/* ============================================================
   ELEMENTS — Base Styles
   main.css

   Depends on: tokens.css (load tokens.css first)
   Zero hardcoded colour values — every colour via a token.
   Zero box-shadows. border-radius: 0 everywhere except .btn.
   No gradient decoration. No scroll-triggered animations.
   No hover lift/scale. No all-caps tracked labels.

   Index
   1.  Reset
   2.  Base
   3.  Typography
   4.  Layout
   5.  Buttons
   6.  Forms
   7.  Focus
   8.  Navigation
   9.  Hero + load animation (home page only)
   10. Footer
   11. Utilities
   12. Reduced-motion override
   ============================================================ */


/* ── 1. Reset ────────────────────────────────────────────────── */

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

/* Ensure [hidden] wins against all author display rules */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable; /* prevent layout shift when overflow:hidden hides scrollbar */
  overflow-x: hidden; /* must match body — without this, body's overflow-x:hidden creates
                         a body-level scroll container instead of clipping at the viewport */
  /* Mode is always set as data-mode on this element.
     Default is daylight, set in HTML before page paint. */
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  border-radius: 0;
}

ol,
ul {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Selection */
::selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
}


/* ── 2. Base ─────────────────────────────────────────────────── */

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  min-height: 100dvh;
  overflow-x: hidden;
  /* Theme switch is a user action — transition is appropriate */
  transition:
    background-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease);
}

/* Prevent text synthesis when font variants are not yet loaded */
body {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* ── 3. Typography ───────────────────────────────────────────── */

/* Display role — Fraunces for page titles and section headings.
   All other prose uses Instrument Sans.
   line-height: 1.05 is intentional and tighter than default.    */

h1, h2, h3,
.display {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Type scale assignments */
h1, .h1 { font-size: var(--step-5); }
h2, .h2 { font-size: var(--step-4); }
h3, .h3 { font-size: var(--step-3); }

/* Sub-headings remain in Instrument Sans */
h4, .h4 {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}

h5, .h5 {
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}

h6, .h6 {
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* Body text — 72ch cap, 1.6 leading */
p {
  max-width: 72ch;
  line-height: 1.6;
}

/* Wide text blocks (e.g. intro paragraphs) sit at step-1 */
.text-lead {
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.5;
  max-width: 62ch;
}

small,
.text-small {
  font-size: var(--step--1);
  line-height: 1.5;
}

strong {
  font-weight: 500;
}

em {
  font-style: italic;
}

/* Links — inherit context colour; hairline underline at rest */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

a:hover {
  text-decoration-color: var(--accent);
}

/* Nav links and standalone text links that carry no underline */
.link-bare {
  text-decoration: none;
  color: inherit;
}

.link-accent {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.link-accent:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Blockquote — used in Founder's Note */
blockquote {
  border-left: 1px solid var(--hairline);
  padding-left: var(--sp-6);
  color: var(--muted);
  font-style: italic;
  max-width: 60ch;
}

/* Horizontal rule — hairline only, no box styling */
hr {
  border: none;
  border-top: 1px solid var(--hairline);
}


/* ── 4. Layout ───────────────────────────────────────────────── */

/* Container — max-width with fluid outer gutters */
.container {
  width: 100%;
  padding-inline: var(--gutter);
  margin-inline: auto;
  max-width: calc(1400px + var(--gutter) * 2);
}

/* 12-column grid ─────────────────────────────────────────────
   On mobile: collapses to 1 column (24px gutters from --gutter).
   On desktop: all 12 columns active.
   Column spans are applied via modifier classes.             */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--col-gap);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(var(--cols), 1fr);
  }

  /* Common column-span utilities — extend as pages require */
  .col-full       { grid-column: 1 / -1; }
  .col-10         { grid-column: span 10; }
  .col-8          { grid-column: span 8; }
  .col-7          { grid-column: span 7; }
  .col-6          { grid-column: span 6; }
  .col-5          { grid-column: span 5; }
  .col-4          { grid-column: span 4; }
  .col-3          { grid-column: span 3; }

  /* Offset helpers */
  .col-start-2    { grid-column-start: 2; }
  .col-start-3    { grid-column-start: 3; }
}

/* Section rhythm — whitespace separates, not dividers */
.section {
  padding-block: var(--sp-20);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--sp-32);
  }
}

/* A section that opens immediately after the hero needs
   less top padding to avoid doubling the gap */
.section--flush-top {
  padding-block-start: var(--sp-12);
}

@media (min-width: 768px) {
  .section--flush-top {
    padding-block-start: var(--sp-20);
  }
}


/* ── 5. Buttons ──────────────────────────────────────────────── */

/* Primary — accent fill */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  padding-inline: var(--sp-8);
  background-color: var(--accent);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-btn); /* 2px — only exception */
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    color            var(--dur-fast) var(--ease),
    border-color     var(--dur-fast) var(--ease);
}

.btn:hover {
  background-color: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Ghost variant — no fill, hairline border */
.btn--ghost {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}

.btn--ghost:hover {
  opacity: 1;
  border-color: var(--ink);
}

/* Small variant */
.btn--sm {
  padding-block:   var(--sp-2);
  padding-inline:  var(--sp-5);
  font-size: var(--step--1);
}


/* ── 6. Forms ────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

label,
.label {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}

/* Required indicator */
.label--required::after {
  content: " *";
  color: var(--accent);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  display: block;
  width: 100%;
  padding-block:  var(--sp-3);
  padding-inline: var(--sp-4);
  background-color: var(--surface);
  color: var(--ink);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.5;
  border: 1px solid var(--hairline);
  border-radius: 0;   /* hard rule */
  appearance: none;
  -webkit-appearance: none;
  /* User-action transition */
  transition:
    border-color     var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

/* Touch target: inputs and textareas meet 44px minimum */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"] {
  min-height: 2.75rem; /* 44px */
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  border-color: var(--muted);
}

/* focus handled globally by :focus-visible below */

textarea {
  resize: vertical;
  min-height: 8.75rem; /* 140px */
}

select {
  cursor: pointer;
}

::placeholder {
  color: var(--muted);
  opacity: 0.55;
}

/* Helper text below a field */
.field-hint {
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.4;
}

/* Inline error — shown below the field when validation fails */
.field-error {
  font-size: var(--step--1);
  color: var(--accent); /* contextual; in candlelight this is brass */
  line-height: 1.4;
}

/* Form grid — stacks on mobile, 2 columns on tablet */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid .field--full {
    grid-column: 1 / -1;
  }
}


/* ── Phone prefix split field ────────────────────────────────── */

/* Contact page: full box border, unified look */
.phone-wrap {
  display: flex;
  border: 1px solid var(--hairline);
  background-color: var(--surface);
  min-height: 2.75rem;
  transition: border-color var(--dur-fast) var(--ease);
}
.phone-wrap:hover   { border-color: var(--muted);  }
.phone-wrap:focus-within { border-color: var(--accent); }

.phone-wrap .phone-prefix {
  flex-shrink: 0;
  width: 9rem;
  border: none;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  padding-block: var(--sp-3);
  padding-inline: var(--sp-3);
  background-color: transparent;
  font-size: var(--step-0);
  min-height: unset;
  display: block;
  transition: none;
  cursor: pointer;
}
.phone-wrap .phone-prefix:focus,
.phone-wrap .phone-prefix:focus-visible { outline: none; }

.phone-wrap .phone-number {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  border: none;
  border-radius: 0;
  min-height: unset;
  display: block;
  transition: none;
}
.phone-wrap .phone-number:focus,
.phone-wrap .phone-number:focus-visible {
  outline: none;
  border-color: transparent;
}

/* Modal request form: side-by-side underline fields */
.req-phone-row {
  display: flex;
  gap: var(--sp-4);
}
.req-phone-row .req-phone-prefix {
  width: 9rem;
  flex-shrink: 0;
  padding-inline-start: 0;   /* keep aligned with other req-inputs */
}
.req-phone-row .req-phone-number { flex: 1 1 0; min-width: 0; }


/* ── 7. Focus ────────────────────────────────────────────────── */

/* Visible for keyboard users; suppressed on pointer interaction
   via :focus-visible (native browser behaviour).              */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Remove default outline — only :focus-visible renders it */
:focus:not(:focus-visible) {
  outline: none;
}

/* Inputs get a border highlight instead of an outline ring */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--accent);
}


/* ── 8. Navigation ───────────────────────────────────────────── */

.site-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  padding-block: var(--sp-5);
  background-color: transparent;
  transition:
    background-color var(--dur-base) var(--ease),
    border-color     var(--dur-base) var(--ease),
    color            var(--dur-base) var(--ease),
    opacity          0.35s ease;
}

/* Over hero video — everything white */
.site-nav:not(.is-scrolled) .site-nav__list a,
.site-nav:not(.is-scrolled) .menu-toggle {
  color: #fff;
}


.site-nav:not(.is-scrolled) .logo-img--dark {
  display: none;
}

.site-nav:not(.is-scrolled) .logo-img--light {
  display: block;
}

/* Candlelight already shows white logo — keep consistent */
[data-mode="candlelight"] .site-nav:not(.is-scrolled) .logo-img--dark  { display: none;  }
[data-mode="candlelight"] .site-nav:not(.is-scrolled) .logo-img--light { display: block; }

.site-nav.is-scrolled {
  background-color: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-block-end: 1px solid var(--hairline);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

/* Mobile: flex with three absolutely-anchored positions.
   Toggle → left (flex-start), logo → center (absolute), menu → right (absolute).
   Only the toggle stays in the normal flow, so it naturally occupies the left. */
@media (max-width: 899px) {
  .site-nav__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }

  .site-nav__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-nav__controls {
    display: contents; /* dissolve wrapper — children join inner flex */
  }

  /* Menu button: pinned to right edge, out of normal flow */
  .menu-toggle {
    position: absolute;
    right: 0;
  }

  .site-nav__logo-img {
    height: 53px; /* +10% vs desktop 48px */
  }
}

/* Mobile nav open over daylight bg — restore dark ink in the header */
@media (max-width: 899px) {
  [data-mode="daylight"] .site-nav:not(.is-scrolled):has(~ .mobile-nav.is-open) .menu-toggle {
    color: var(--ink);
  }


  [data-mode="daylight"] .site-nav:not(.is-scrolled):has(~ .mobile-nav.is-open) .logo-img--dark {
    display: block;
  }

  [data-mode="daylight"] .site-nav:not(.is-scrolled):has(~ .mobile-nav.is-open) .logo-img--light {
    display: none;
  }
}

.site-nav__logo-img {
  height: 48px;
  width: auto;
}

/* Logo PNG switching — must come AFTER .site-nav__logo-img to win cascade */
.logo-img--dark  { display: block; }
.logo-img--light { display: none;  }

[data-mode="candlelight"] .logo-img--dark  { display: none;  }
[data-mode="candlelight"] .logo-img--light { display: block; }

/* Logo — container */
.site-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
  flex-shrink: 0;
}

.site-nav__logo-mark {
  flex-shrink: 0;
  display: block;
  color: var(--ink);
}

.site-nav__logo-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}

.site-nav__logo-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: var(--step-1);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.site-nav__logo-sub {
  font-family: var(--font-body);
  font-size: 0.5625rem; /* 9px */
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Nav links — desktop */
.site-nav__list {
  display: none; /* shown via media query or .is-open */
  align-items: center;
  gap: var(--sp-8);
}

@media (min-width: 900px) {
  .site-nav__list {
    display: flex;
  }
}

.site-nav__list a {
  font-size: 0.9375rem; /* 15px — step-0 (16px) minus ~1pt */
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--accent);
}

/* Right-side controls (theme toggle + CTA) */
.site-nav__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* ── iOS-style theme switch ───────────────────────────────────── */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  min-height: 44px; /* touch target */
}

/* ── Track ── */
.theme-switch__track {
  position: relative;
  width: 42px;
  height: 26px;
  border-radius: 13px;
  background-color: #C8C0B6;
  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  flex-shrink: 0;
}

[data-mode="candlelight"] .theme-switch__track {
  background-color: var(--brand-camel);
}

/* ── Knob ── */
.theme-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(0,0,0,0.06);
  transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-mode="candlelight"] .theme-switch__knob {
  transform: translateX(16px);
}

/* ── Labels ── */
.theme-switch__label {
  font-family: var(--font-body);
  font-size: 0.5625rem; /* 9px — very compact */
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.28s ease, opacity 0.28s ease;
}

/* Daylight: active in daylight, dimmed in candlelight */
.theme-switch__label--day {
  color: #231F20;
  opacity: 1;
}
[data-mode="candlelight"] .theme-switch__label--day {
  color: #ffffff;
  opacity: 0.35;
}

/* Candlelight: dimmed in daylight, active in candlelight */
.theme-switch__label--night {
  color: #231F20;
  opacity: 0.35;
}
[data-mode="candlelight"] .theme-switch__label--night {
  color: #ffffff;
  opacity: 1;
}

/* ── Over hero video (not scrolled) ── */
.site-nav:not(.is-scrolled) .theme-switch__label--day {
  color: #ffffff;
  opacity: 1;
}
[data-mode="candlelight"] .site-nav:not(.is-scrolled) .theme-switch__label--day {
  color: #ffffff;
  opacity: 0.35;
}
.site-nav:not(.is-scrolled) .theme-switch__label--night {
  color: #ffffff;
  opacity: 0.35;
}
[data-mode="candlelight"] .site-nav:not(.is-scrolled) .theme-switch__label--night {
  color: #ffffff;
  opacity: 1;
}
.site-nav:not(.is-scrolled) .theme-switch__track {
  background-color: rgba(255, 255, 255, 0.28);
}
[data-mode="candlelight"] .site-nav:not(.is-scrolled) .theme-switch__track {
  background-color: rgba(176, 143, 102, 0.75);
}

/* ── Mobile: tutto più piccolo e compatto ── */
@media (max-width: 899px) {
  .theme-switch {
    gap: 5px;
    min-height: 44px;
  }

  .theme-switch__label {
    font-size: 0;
    letter-spacing: 0;
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .theme-switch__label--day::before {
    content: "☼\FE0E";
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
  }

  .theme-switch__label--night::before {
    content: "☽";
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
  }

  .theme-switch__track {
    width: 28px;
    height: 17px;
    border-radius: 9px;
  }

  .theme-switch__knob {
    width: 11px;
    height: 11px;
    top: 3px;
    left: 3px;
  }

  [data-mode="candlelight"] .theme-switch__knob {
    transform: translateX(11px); /* 28 - 11 - 3 - 3 = 11 */
  }
}

/* Mobile nav open over daylight — restore track colour */
[data-mode="daylight"] .site-nav:not(.is-scrolled):has(~ .mobile-nav.is-open) .theme-switch__track {
  background-color: #C8C0B6;
}

/* Mobile menu toggle — icon only, no border, 44px touch target */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.menu-toggle:hover {
  color: var(--accent);
}

@media (min-width: 900px) {
  .menu-toggle {
    display: none;
  }
}

/* Mobile nav drawer — hidden by default, opened by JS */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background-color: var(--bg);
  padding-block-start: calc(88px + var(--sp-6)); /* clear fixed nav (48px logo + 2×20px padding) */
  padding-block-end: var(--sp-12);
  padding-inline: var(--gutter);
  overflow-y: auto;
  overscroll-behavior: contain; /* don't chain scroll to the page behind */
}

/* Lock page scroll while the mobile menu is open. Must target <html>:
   html has overflow-x:hidden, so it (not body) owns the viewport scroll. */
html:has(.mobile-nav.is-open),
html:has(.mobile-nav.is-open) body {
  overflow: hidden;
}

.mobile-nav.is-open {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

@media (min-width: 900px) {
  .mobile-nav {
    display: none !important;
  }
}


.mobile-nav a {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  border-block-end: 1px solid var(--hairline);
  padding-block-end: var(--sp-5);
  flex-shrink: 0; /* keep every row full height */
  transition: color var(--dur-fast) var(--ease);
}

.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] {
  color: var(--accent);
}

/* CTA button inside mobile nav — full width, sits after the links */
.mobile-nav__cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-block-start: var(--sp-3);
  border-block-end: none; /* override the generic .mobile-nav a rule */
  padding-block-end: 0;
}

/* Override font/size from .mobile-nav a so .btn styles win */
.mobile-nav .mobile-nav__cta {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--btn-fg);
  border-block-end: none;
  padding-block-end: var(--sp-3);
}


/* ── 9. Hero + load animation ────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--ink); /* fallback before video loads */
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Video starts muted and autoplay — no controls shown */
}

/* Scrim — restraint. Enough to read text, not a gradient wash */
.hero__scrim {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.hero__content {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  padding-block-end: var(--sp-16);
  color: var(--surface);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Override ink colour for hero text — it sits on dark video */
.hero__content h1,
.hero__content .h1 {
  color: var(--surface);
}

.hero__content p {
  color: var(--surface);
  opacity: 0.82;
}

/* ── Home page load animation ─────────────────────────────────
   Applied ONLY to the hero on index.html via .hero--animate.
   Three children stagger. No other element on the site
   uses animation — all other motion is transition-based.    */

@keyframes elements-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero--animate .hero__kicker {
  animation: elements-reveal var(--dur-slow) var(--ease-out) 100ms both;
}

.hero--animate .hero__headline {
  animation: elements-reveal var(--dur-slow) var(--ease-out) 260ms both;
}

.hero--animate .hero__sub {
  animation: elements-reveal var(--dur-slow) var(--ease-out) 420ms both;
}

.hero--animate .hero__cta {
  animation: elements-reveal var(--dur-slow) var(--ease-out) 560ms both;
}


/* ── 10. Footer ──────────────────────────────────────────────── */

.site-footer {
  border-block-start: 1px solid var(--hairline);
  padding-block: var(--sp-12);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.site-footer__ig {
  display: flex;
  align-items: center;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}

.site-footer__ig:hover {
  color: var(--ink);
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: var(--step-1);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.site-footer__links a,
.site-footer__links span {
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.site-footer__links a:hover {
  color: var(--ink);
}

.site-footer__legal {
  font-size: var(--step--1);
  color: var(--muted);
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--hairline);
}


/* ── 11. Utilities ───────────────────────────────────────────── */

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Colour utilities */
.text-muted  { color: var(--muted);  }
.text-accent { color: var(--accent); }
.text-ink    { color: var(--ink);    }

/* The one centred block — final home page CTA only */
.cta-centre {
  text-align: center;
}

.cta-centre p {
  margin-inline: auto;
}

/* Spacing helpers (block-start only — prefer section padding) */
.mt-4  { margin-block-start: var(--sp-4);  }
.mt-6  { margin-block-start: var(--sp-6);  }
.mt-8  { margin-block-start: var(--sp-8);  }
.mt-10 { margin-block-start: var(--sp-10); }
.mt-12 { margin-block-start: var(--sp-12); }
.mt-16 { margin-block-start: var(--sp-16); }

/* Surface card — separation via colour, not shadow */
.surface {
  background-color: var(--surface);
}

/* Hairline border utilities — use only where it carries meaning */
.border-top    { border-block-start: 1px solid var(--hairline); }
.border-bottom { border-block-end:   1px solid var(--hairline); }

/* Padding shorthand for common inner content blocks */
.inner {
  padding: var(--sp-8);
}

@media (min-width: 768px) {
  .inner {
    padding: var(--sp-12);
  }
}


/* ── 12. Reduced-motion override ─────────────────────────────── */

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


/* ── 14. Hero — home page ────────────────────────────────────── */

/* Full-bleed video behind centered text — desktop and mobile */
.hero-home {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #2a2a2a; /* neutral fallback before video loads */
}

.hero-home__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-home__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Dark luxury overlay — uniform dim + gradient edges */
.hero-home__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.48) 30%,
      rgba(0,0,0,0.48) 70%,
      rgba(0,0,0,0.75) 100%
    );
  pointer-events: none;
}

/* Content sits above gradient, centered */
.hero-home__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  padding: calc(var(--sp-20) + 4rem) var(--gutter) var(--sp-20);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-home__content h1 {
  color: #fff;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: 0.08em;
  font-weight: 300;
  opacity: 0; /* revealed after splash via JS */
  white-space: nowrap; /* prevents letter spans from wrapping */
}

/* ── Gold shimmer reveal ─────────────────────────────────────────
   Replicates the sunlight-on-metal effect:
   uniform gold base (#C6A15B) + narrow bright streak (47–53%)
   that sweeps right→left (200% → -40%) in one clean pass.
   The fade-in is folded into the first 18% of the keyframe.
   JS removes the class on animationend and restores white.
────────────────────────────────────────────────────────────────── */
@keyframes gold-shimmer-reveal {
  0%   { opacity: 0; background-position: 200% center; }
  15%  { opacity: 1; background-position: 200% center; }
  100% { opacity: 1; background-position: 0% center; }
  /* ends at 0% = left side of gradient = solid #C6A15B gold */
}

.hero-home__content h1.gold-reveal {
  background: linear-gradient(
    100deg,
    #C6A15B   0%,
    #C6A15B  35%,
    #f0d878  44%,
    #f8e98a  47%,
    #fffce8  50%,
    #f8e98a  53%,
    #f0d878  56%,
    #C6A15B  65%,
    #C6A15B 100%
  );
  background-size: 250% auto;
  background-position: 200% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gold-shimmer-reveal 1.8s ease-in-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-home__content h1.gold-reveal {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
    animation: none;
    opacity: 1;
  }
}

/* ── Final gold state ────────────────────────────────────────────
   Bright warm gold + very soft luminous glow around the letters.
────────────────────────────────────────────────────────────────── */
.hero-home__content h1.gold-metallic {
  color: #FFF8DC;
  opacity: 1;
  text-shadow:
    0 0 16px rgba(255, 235, 120, 0.70),
    0 0 40px rgba(240, 200, 50, 0.30),
    0 0 70px rgba(220, 165, 10, 0.12);
}

.hero-home__tagline {
  margin-block-start: var(--sp-3);
  font-size: var(--step-0);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255 255 255 / 0.72);
}

.hero-home__body {
  margin-block-start: var(--sp-6);
  max-width: 46ch;
}

.hero-home__body p {
  font-size: var(--step-0);
  line-height: 1.6;
  color: rgba(255 255 255 / 0.85);
}

.hero-home__ctas {
  margin-block-start: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

/* CTAs on dark video — always white button, always dark text */
.hero-home__ctas .btn {
  background-color: #fff;
  color: #231F20;
  border-color: #fff;
}

.hero-home__ctas .btn:hover {
  background-color: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.hero-home__ctas .btn--ghost {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255 255 255 / 0.5);
}

.hero-home__ctas .btn--ghost:hover {
  border-color: #fff;
  opacity: 1;
}


/* ── 15. Tagline strip — infinite marquee ───────────────────── */

.tagline-strip {
  padding-block: var(--sp-5);
  border-block-end: 1px solid var(--hairline);
  overflow: hidden;
  /* Fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.tagline-strip__track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.tagline-strip__inner {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.01em;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-12.5%); } /* 1/8 of track = exactly one copy */
}

@media (prefers-reduced-motion: reduce) {
  .tagline-strip__track {
    animation: none;
  }
}


/* ── 16. Elements grid ───────────────────────────────────────── */

.elements-section {
  padding-block: var(--sp-20);
}

@media (min-width: 768px) {
  .elements-section {
    padding-block: var(--sp-32);
  }
}

.elements-heading {
  margin-block-end: var(--sp-12);
}

@media (min-width: 768px) {
  .elements-heading {
    margin-block-end: var(--sp-16);
  }
}

/* Grid — 12 columns, irregular panel widths */
.elements-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .elements-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-3);
  }
}

/* Each panel is a linked article */
.el-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: var(--on-video);
  background-color: var(--surface);
}

/* Mobile: consistent height */
.el-card {
  min-height: 75vw;
}

@media (min-width: 480px) {
  .el-card {
    min-height: 55vw;
  }
}

/* Desktop column spans — irregular rhythm */
@media (min-width: 768px) {
  .el-card--earth  { grid-column: 1 / span 7;  min-height: 62vh; }
  .el-card--fire   { grid-column: 8 / span 5;  min-height: 76vh; }
  .el-card--water  { grid-column: 1 / span 5;  min-height: 76vh; }
  .el-card--air    { grid-column: 6 / span 7;  min-height: 62vh; }
}

.el-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

/* Legibility gradient — functional, not decorative */
.el-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.72) 0%,
    rgb(0 0 0 / 0.18) 55%,
    transparent 100%
  );
  pointer-events: none;
}

.el-card__body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  padding: var(--sp-6);
}

@media (min-width: 768px) {
  .el-card__body {
    padding: var(--sp-8);
  }
}

.el-card__element {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.0;
  color: var(--on-video);
  display: block;
}

.el-card__service {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--on-video);
  opacity: 0.7;
  margin-block-start: var(--sp-1);
  letter-spacing: 0.02em;
}

.el-card__desc {
  display: block;
  font-size: var(--step--1);
  color: var(--on-video);
  opacity: 0.82;
  margin-block-start: var(--sp-3);
  max-width: 36ch;
  line-height: 1.5;
}

/* Hover: very subtle video scale — user-action response, not decoration */
@media (hover: hover) {
  .el-card:hover .el-card__video {
    transform: scale(1.03);
  }
}


/* ── 17. Approach section ────────────────────────────────────── */

.approach {
  background-color: var(--surface);
  padding-block: var(--sp-20);
}

@media (min-width: 768px) {
  .approach {
    padding-block: var(--sp-32);
  }
}

.approach__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}

@media (min-width: 768px) {
  .approach__inner {
    grid-template-columns: 42fr 58fr;
    gap: var(--sp-16);
    align-items: start;
  }
}

.approach__lead {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 3.5vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.approach__body {
  padding-block-start: 0;
}

@media (min-width: 768px) {
  .approach__body {
    padding-block-start: 0.5rem;
  }
}

.approach__body p {
  font-size: var(--step-0);
  color: var(--muted);
  line-height: 1.7;
  max-width: 56ch;
}

.approach__body p + p {
  margin-block-start: var(--sp-5);
}

.approach__close {
  margin-block-start: var(--sp-12);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  letter-spacing: 0.01em;
  text-align: right;
}


/* ── 18. Trust ───────────────────────────────────────────────── */

.trust {
  padding-block: var(--sp-16);
  border-block-start: 1px solid var(--hairline);
}

@media (min-width: 768px) {
  .trust {
    padding-block: var(--sp-20);
  }
}

.trust__heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--step-3);
  font-weight: 300;
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
  max-width: 52ch;
  margin-inline: auto;
  text-align: center;
}


/* ── 19. Page CTA ────────────────────────────────────────────── */

.page-cta {
  padding-block: var(--sp-20);
  border-block-start: 1px solid var(--hairline);
}

@media (min-width: 768px) {
  .page-cta {
    padding-block: var(--sp-32);
  }
}

.page-cta__heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-cta .btn {
  margin-block-start: var(--sp-8);
}


/* ── 20. Services section ────────────────────────────────────── */

.services {
  padding-block: var(--sp-20);
  border-block-end: 1px solid var(--hairline);
}

@media (min-width: 768px) {
  .services {
    padding-block: var(--sp-32);
  }
}

.services__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
}

@media (min-width: 768px) {
  .services__inner {
    grid-template-columns: 40fr 60fr;
    gap: var(--sp-16);
    align-items: start;
  }
}

.services__kicker {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: var(--sp-5);
}

.services__heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.services__list {
  list-style: none;
  border-block-start: 1px solid var(--hairline);
}

.services__item {
  padding-block: var(--sp-6);
  border-block-end: 1px solid var(--hairline);
}

.services__item-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  margin-block-end: var(--sp-2);
}

.services__item-desc {
  font-size: var(--step-0);
  color: var(--muted);
  line-height: 1.6;
  max-width: 52ch;
}

.services__cta {
  margin-block-start: var(--sp-8);
}


/* ── 21. Four elements · Four menus ──────────────────────────── */

.four-elements {
  border-block-start: 1px solid var(--hairline);
}

.four-elements__inner {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden; /* clip translateX animation children — prevents horizontal scroll */
}

@media (min-width: 768px) {
  .four-elements__inner {
    grid-template-columns: 55fr 45fr;
    min-height: 85vh;
  }
}

.four-elements__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-20);
  padding-inline-start: max(var(--sp-6), calc((100vw - 1428px) / 2 + var(--sp-6)));
  padding-inline-end: var(--sp-12);
}

@media (min-width: 768px) {
  .four-elements__content {
    padding-block: var(--sp-32);
    padding-inline-end: var(--sp-20);
  }
}

.four-elements__heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-block-end: var(--sp-8);
}

.four-elements__intro {
  font-size: var(--step-0);
  color: var(--muted);
  line-height: 1.7;
  max-width: 50ch;
  margin-block-end: var(--sp-10);
}

.four-elements__list {
  list-style: none;
  border-block-start: 1px solid var(--hairline);
  margin-block-end: var(--sp-10);
}

.four-elements__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--hairline);
}

@media (min-width: 480px) {
  .four-elements__item {
    gap: var(--sp-8);
  }
}

.four-elements__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  color: var(--ink);
  min-width: 5ch;
  flex-shrink: 0;
}

.four-elements__desc {
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.5;
}

.four-elements__media {
  overflow: hidden;
  display: none;
}

@media (max-width: 767px) {
  .four-elements__media {
    display: block;
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 768px) {
  .four-elements__media {
    display: block;
  }
}

.four-elements__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}


/* ── 22. Chef bio ────────────────────────────────────────────── */

.chef-bio {
  border-block-start: 1px solid var(--hairline);
}

.chef-bio__inner {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden; /* clip translateX animation children — prevents horizontal scroll */
}

@media (min-width: 768px) {
  .chef-bio__inner {
    grid-template-columns: 42fr 58fr;
    min-height: 80vh;
  }
}

.chef-bio__media {
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

@media (min-width: 768px) {
  .chef-bio__media {
    aspect-ratio: unset;
  }
}

.chef-bio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.chef-bio__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-20);
  padding-inline: var(--sp-8);
}

@media (min-width: 768px) {
  .chef-bio__content {
    padding-block: var(--sp-32);
    padding-inline-start: var(--sp-16);
    padding-inline-end: max(var(--sp-6), calc((100vw - 1428px) / 2 + var(--sp-6)));
  }
}

.chef-bio__heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-block-end: var(--sp-8);
}

.chef-bio__body {
  font-size: var(--step-0);
  color: var(--muted);
  line-height: 1.7;
  max-width: 52ch;
}

.chef-bio__close {
  margin-block-start: var(--sp-8);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.chef-bio__cta {
  margin-block-start: var(--sp-8);
  align-self: flex-start;
}


/* ── 23. Beyond the menu ─────────────────────────────────────── */

.beyond-menu {
  background-color: var(--surface);
  border-block-start: 1px solid var(--hairline);
}

.beyond-menu__inner {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden; /* clip translateX animation children — prevents horizontal scroll */
}

@media (min-width: 768px) {
  .beyond-menu__inner {
    grid-template-columns: 55fr 45fr;
    min-height: 75vh;
  }
}

.beyond-menu__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-20);
  padding-inline-start: max(var(--sp-6), calc((100vw - 1428px) / 2 + var(--sp-6)));
  padding-inline-end: var(--sp-12);
}

@media (min-width: 768px) {
  .beyond-menu__content {
    padding-block: var(--sp-32);
    padding-inline-end: var(--sp-20);
  }
}

.beyond-menu__heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-block-end: var(--sp-8);
}

.beyond-menu__body {
  font-size: var(--step-0);
  color: var(--muted);
  line-height: 1.7;
  max-width: 50ch;
}

.beyond-menu__close {
  margin-block-start: var(--sp-8);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.beyond-menu__cta {
  margin-block-start: var(--sp-8);
  align-self: flex-start;
}

.beyond-menu__media {
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

@media (min-width: 768px) {
  .beyond-menu__media {
    aspect-ratio: unset;
  }
}

.beyond-menu__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}


/* ── 25. Request modal ───────────────────────────────────────── */

/* Wrapper — fixed, full-viewport, flex-centred on desktop */
.req-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.req-modal[hidden] {
  display: none;
}

/* Dark overlay */
.req-overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.55);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.req-modal.is-open .req-overlay {
  opacity: 1;
}

/* Panel — desktop: 560px centred, no radius, no shadow */
.req-panel {
  position: relative;
  z-index: 1;
  width: 560px;
  max-width: calc(100vw - 2rem);
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity    var(--dur-slow) var(--ease-out),
    transform  var(--dur-slow) var(--ease-out);
}

.req-modal.is-open .req-panel {
  opacity: 1;
  transform: none;
}

/* Panel — mobile: full height, slides up from bottom */
@media (max-width: 599px) {
  .req-modal {
    align-items: flex-end;
    justify-content: stretch;
  }

  .req-panel {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-block-start: 1px solid var(--hairline);
    opacity: 1;
    transform: translateY(100%);
    transition: transform var(--dur-slow) cubic-bezier(0.0, 0.0, 0.2, 1);
  }

  .req-modal.is-open .req-panel {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Top bar */
.req-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-block-end: 1px solid var(--hairline);
  flex-shrink: 0;
}

/* Logo in topbar */
.req-topbar-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Step dashes */
.req-dashes {
  display: flex;
  gap: var(--sp-2);
  flex: 1;
  align-items: center;
}

.req-dash {
  height: 2px;
  flex: 1;
  background: var(--hairline);
  transition: background var(--dur-base) var(--ease);
}

.req-dash.is-active {
  background: var(--accent);
}

.req-dash.is-done {
  background: var(--accent);
  opacity: 0.3;
}

/* Close button */
.req-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease);
}

.req-close:hover {
  color: var(--ink);
}

.req-close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Scrollable body */
.req-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 599px) {
  .req-body {
    padding: var(--sp-6) var(--sp-6) var(--sp-4);
  }
}

/* Step heading */
.req-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  margin-block-end: var(--sp-6);
  outline: none;   /* focus is managed by JS; style stays clean */
}

/* Step panels */
.req-step[hidden] {
  display: none;
}

/* ── Radios (step 1) ── */
.req-radio-group {
  border-block-start: 1px solid var(--hairline);
}

.req-radio-label {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--hairline);
  cursor: pointer;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.4;
  user-select: none;
  -webkit-user-select: none;
  transition: color var(--dur-fast) var(--ease);
}

.req-radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  accent-color: var(--accent);
}

.req-radio-label:has(input:checked) {
  font-weight: 500;
  color: var(--ink);
}

/* ── Fields (steps 2–4) ── */
.req-field {
  margin-block-end: var(--sp-6);
}

.req-field:last-child {
  margin-block-end: 0;
}

.req-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: var(--sp-2);
  line-height: 1.4;
}

/* Inputs: bottom-border only, no fill, no radius */
.req-input,
.req-textarea {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-block-end: 1px solid var(--hairline);
  border-radius: 0;
  padding-block:  var(--sp-2);
  padding-inline: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.req-input:hover,
.req-textarea:hover {
  border-block-end-color: var(--muted);
}

/* Focus: --ink border, no outline ring */
.req-input:focus,
.req-textarea:focus {
  border-block-end-color: var(--ink);
}

.req-input::placeholder,
.req-textarea::placeholder {
  color: var(--muted);
  opacity: 0.5;
}

.req-textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.6;
}

input[type="date"].req-input {
  cursor: pointer;
  color-scheme: light dark;
}

input[type="number"].req-input::-webkit-inner-spin-button,
input[type="number"].req-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

input[type="number"].req-input {
  -moz-appearance: textfield;
}

select.req-input {
  cursor: pointer;
  padding-inline-end: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 12px 8px;
}

/* ── Checkboxes ── */
.req-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  cursor: pointer;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.5;
  user-select: none;
  -webkit-user-select: none;
}

.req-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-block-start: 3px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ── Extras group (step 3) ── */
.req-extras-wrap {
  margin-block-end: var(--sp-6);
}

.req-label-hint {
  font-weight: 400;
  color: var(--muted);
  font-size: var(--step--1);
}

/* ── Menu steppers ── */
.req-menus-wrap {
  margin-block-end: var(--sp-6);
}

.req-menus-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-2);
}

.req-menu-counter {
  font-size: var(--step--1);
  color: var(--muted);
  transition: color 0.2s ease;
}
.req-menu-counter[data-state="ok"]   { color: #25a244; }
.req-menu-counter[data-state="over"] { color: #c0392b; }

.req-menus-list {
  border-block-start: 1px solid var(--hairline);
}

.req-menu-group-label {
  margin: 0;
  padding-block: var(--sp-2);
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-block-end: 1px solid var(--hairline);
}

.req-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-2);
  border-block-end: 1px solid var(--hairline);
}

.req-menu-row__name {
  font-size: var(--step-0);
}

.req-stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.req-stepper__btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: none;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.req-stepper__btn:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.req-stepper__val {
  min-width: 1.5ch;
  text-align: center;
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
}

.req-extras-group {
  border-block-start: 1px solid var(--hairline);
}

.req-extras-group .req-checkbox-label {
  border-block-end: 1px solid var(--hairline);
}

/* ── Error messages ── */
.req-err {
  font-size: var(--step--1);
  color: var(--accent);   /* --accent is camel — avoids red which isn't in the palette */
  line-height: 1.4;
  margin-block-start: var(--sp-1);
  min-height: 1.2em;
}

/* ── Submit error (network / server failure) ── */
.req-submit-err {
  margin-block-start: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.6;
}

.req-submit-err[hidden] {
  display: none;
}

.req-submit-err a {
  color: var(--ink);
}

/* ── Confirmation state ── */
.req-confirm {
  padding-block: var(--sp-4);
}

.req-confirm-body {
  font-size: var(--step-0);
  color: var(--muted);
  line-height: 1.7;
  max-width: 42ch;
  margin-block-end: var(--sp-8);
}

/* ── Footer (persistent) ── */
.req-footer {
  flex-shrink: 0;
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
  border-block-start: 1px solid var(--hairline);
}

.req-footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-4);
}

.req-footer-nav[hidden] {
  display: none;
}

.req-footer-nav .btn[hidden] {
  display: none;
}

.req-footnote {
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

@keyframes waHint {
  0%, 100% { color: var(--muted); }
  50%       { color: var(--accent); }
}

.req-footnote a {
  color: var(--muted);
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease);
}

.req-footnote__wa {
  animation: waHint 1.4s ease 0.9s 2;
}

.req-footnote a:hover {
  color: var(--ink);
}

/* Botcheck — visually hidden, never type="hidden" */
.req-botcheck {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Live region */
.req-live {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .req-overlay,
  .req-panel,
  .req-dash {
    transition: none !important;
  }
}


/* ── 26. Contact page — inline form ─────────────────────────── */

.cf-wrap {
  padding-block: var(--sp-20);
}

@media (min-width: 768px) {
  .cf-wrap {
    padding-block: var(--sp-32);
  }
}

.cf-intro {
  margin-block-end: var(--sp-12);
  padding-block-end: var(--sp-12);
  border-block-end: 1px solid var(--hairline);
}

.cf-intro__heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-block-end: var(--sp-8);
}

.cf-intro__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.cf-intro__contact p {
  font-size: var(--step-0);
  color: var(--muted);
  max-width: none;
}

.cf-intro__min {
  margin-block-start: var(--sp-5);
  font-size: var(--step--1);
  color: var(--muted);
  font-style: italic;
}

/* Form section headings */
.cf-section {
  margin-block-end: var(--sp-10);
  padding-block-end: var(--sp-10);
  border-block-end: 1px solid var(--hairline);
}

.cf-section:last-of-type {
  border-block-end: none;
}

.cf-section__heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  margin-block-end: var(--sp-6);
}

/* Contact page field labels */
.cf-label {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: var(--sp-2);
  line-height: 1.4;
}

.cf-label--req::after {
  content: " *";
  color: var(--accent);
}

/* Radios — same style as modal */
.cf-radio-group {
  border-block-start: 1px solid var(--hairline);
}

.cf-radio-label {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--hairline);
  cursor: pointer;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.4;
  user-select: none;
  -webkit-user-select: none;
}

.cf-radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  accent-color: var(--accent);
}

.cf-radio-label:has(input:checked) {
  font-weight: 500;
}

/* Inline field */
.cf-field {
  margin-block-end: var(--sp-6);
}

.cf-field:last-child {
  margin-block-end: 0;
}

/* Form grid — 2-col on wider screens */
.cf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 600px) {
  .cf-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cf-grid .cf-field--full {
    grid-column: 1 / -1;
  }
}

/* Error messages */
.cf-err {
  display: block;
  font-size: var(--step--1);
  color: var(--accent);
  margin-block-start: var(--sp-1);
  line-height: 1.4;
}

/* Submit error */
.cf-submit-err {
  margin-block-start: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.6;
}

/* Success message */
.cf-success {
  padding: var(--sp-10) 0;
}

.cf-success__head {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300;
  color: var(--ink);
  margin-block-end: var(--sp-4);
}

.cf-success__body {
  font-size: var(--step-0);
  color: var(--muted);
  line-height: 1.7;
  max-width: 42ch;
}

/* Extras checkboxes — same as modal */
.cf-extras-group {
  border-block-start: 1px solid var(--hairline);
}

.cf-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--hairline);
  cursor: pointer;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.5;
  user-select: none;
  -webkit-user-select: none;
}

.cf-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-block-start: 3px;
  cursor: pointer;
  accent-color: var(--accent);
}