/* ==========================================================================
   Qasr Lahore — qasrlahore.ae
   Built to the client's approved design: charcoal + cream + brick,
   serif display, geometric sans UI, gold hairline detail.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --ink:          #140D09;   /* main dark sections */
  --ink-soft:     #1E140E;   /* raised dark panels */
  --night:        #0B0705;   /* footer */
  --cream:        #F7F0E4;   /* light sections */
  --cream-deep:   #EFE4D2;   /* light section edges, card wells */
  --white:        #FFFDF9;

  /* Brand */
  --brick:        #A2472A;
  --brick-hi:     #B95735;
  --brick-deep:   #7E341D;
  --gold:         #D9A85C;
  --gold-soft:    #E9CB96;

  /* Text */
  --on-dark:      #F5EADA;
  --on-dark-mute: rgba(245, 234, 218, 0.68);
  --on-light:     #2B1C12;
  --on-light-mute:#6D5847;

  /* Lines */
  --rule-dark:    rgba(217, 168, 92, 0.28);
  --rule-light:   rgba(43, 28, 18, 0.14);

  /* Type */
  --display: "Playfair Display", "Times New Roman", serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;
  --script:  "Pinyon Script", "Playfair Display", cursive;

  /* Scale */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.3rem);
  --step-4:  clamp(2.6rem, 1.8rem + 3.6vw, 5rem);

  /* Space + shell */
  --shell:   1240px;
  --gutter:  clamp(1.15rem, 4vw, 3rem);
  --section: clamp(3.5rem, 7vw, 6.5rem);

  --radius:  4px;
  --radius-lg: 8px;
  --shadow:  0 18px 44px rgba(11, 7, 5, 0.18);

  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The UA stylesheet gives [hidden] display:none, but any author display
   rule outranks it — .field-row{display:grid} was keeping hidden rows on
   screen. This keeps the attribute meaning what it says. */
[hidden] { display: none !important; }

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

/* A <picture> has no intrinsic size, so an img set to height:100% inside
   one resolves against auto and keeps its own aspect ratio: the wrapper
   stays the right shape while the photo sits short inside it, leaving dead
   space and stranding any absolutely positioned caption below the image.
   Every wrapper that crops a photo with object-fit needs the picture — and
   any link around it — to fill it. */
.gallery-grid figure > a,
.gallery-grid picture,
.dish-card picture,
.reel-card picture,
.split-media picture,
.about-band-media picture,
.catering-media picture,
.page-head-media picture,
.hero-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; max-width: 62ch; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--light { background: var(--cream); color: var(--on-light); }
.section--dark  { background: var(--ink); color: var(--on-dark); }

.section--light p { color: var(--on-light-mute); }
.section--dark  p { color: var(--on-dark-mute); }

.stack > * + * { margin-top: 1rem; }

/* Eyebrow + ornament heading, as drawn in the design */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brick-hi);
  margin: 0 0 0.9rem;
}
.section--dark .eyebrow { color: var(--gold); }

.section-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2 { margin-bottom: 0.4rem; }

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--gold);
}
.ornament::before,
.ornament::after {
  content: "";
  height: 1px;
  width: clamp(2.5rem, 8vw, 6rem);
  background: linear-gradient(90deg, transparent, currentColor);
}
.ornament::after { background: linear-gradient(270deg, transparent, currentColor); }
.ornament span { font-size: 0.7rem; letter-spacing: 0.2em; }

.script {
  font-family: var(--script);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.1;
  color: var(--gold-soft);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step-0);
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn .icon { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary { background: var(--brick); color: var(--white); }
.btn--primary:hover { background: var(--brick-hi); }

.btn--light { background: var(--cream); color: var(--brick-deep); }
.btn--light:hover { background: var(--white); }

.btn--ghost { border-color: var(--rule-dark); color: var(--on-dark); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-soft); }

.btn--outline-dark { border-color: var(--rule-light); color: var(--on-light); }
.btn--outline-dark:hover { border-color: var(--brick); color: var(--brick); }

.btn:active { transform: translateY(1px); }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brick);
  font-size: var(--step-0);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.link-more:hover { border-bottom-color: currentColor; }
.link-more .icon { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 60;
  padding-block: 0.9rem;
  transition: background-color 0.3s var(--ease), padding 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.site-header--solid,
.site-header.is-stuck {
  position: fixed;
  background: rgba(14, 9, 6, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--rule-dark);
  padding-block: 0.55rem;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: 0.85rem; }
.brand img { width: 62px; height: 62px; border-radius: 50%; }
.brand-name {
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--cream);
}
.brand-sub {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-top: 0.3rem;
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
.nav a {
  position: relative;
  font-size: var(--step-0);
  color: var(--on-dark-mute);
  padding-block: 0.4rem;
  transition: color 0.2s var(--ease);
}
.nav a:hover { color: var(--cream); }
.nav a.is-active { color: var(--cream); }
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brick-hi);
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  color: var(--cream);
  cursor: pointer;
}
/* :not(.sr-only) matters — without it the visually-hidden "Menu" label is
   styled as a fourth bar, because this selector outranks .sr-only. */
.nav-toggle span:not(.sr-only) {
  display: block; width: 18px; height: 1.5px;
  background: currentColor; position: relative;
  transition: background-color 0.25s var(--ease);
}
.nav-toggle span:not(.sr-only)::before,
.nav-toggle span:not(.sr-only)::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 1.5px; background: currentColor;
  transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}
.nav-toggle span:not(.sr-only)::before { top: -6px; }
.nav-toggle span:not(.sr-only)::after  { top: 6px; }

/* Open: the bars fold into a cross, so the button reads as "close". */
.nav-toggle[aria-expanded="true"] span:not(.sr-only) { background: transparent; }
.nav-toggle[aria-expanded="true"] span:not(.sr-only)::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:not(.sr-only)::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 7, 5, 0.94) 0%, rgba(12, 7, 5, 0.76) 38%, rgba(12, 7, 5, 0.16) 72%),
    linear-gradient(0deg, rgba(12, 7, 5, 0.6) 0%, transparent 45%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(8rem, 16vh, 11rem) clamp(3.5rem, 8vh, 5rem);
  width: 100%;
}
.hero-copy { max-width: 36rem; }

.hero h1 {
  margin: 0.2rem 0 0.35rem;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.hero-sub {
  font-size: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brick-hi);
  margin: 0 0 1.6rem;
}
.hero-divider {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--gold); margin-bottom: 1.4rem;
}
.hero-divider::before {
  content: ""; height: 1px; width: 5.5rem;
  background: linear-gradient(90deg, currentColor, transparent);
}
.hero-lede {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.4;
  color: var(--cream);
  margin-bottom: 1.8rem;
  max-width: 20ch;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem;
  margin-top: 1.9rem;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.hero-note {
  position: absolute;
  right: var(--gutter);
  top: clamp(7rem, 14vh, 9rem);
  z-index: 2;
  text-align: right;
  font-size: var(--step--1);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--on-dark-mute);
  max-width: 11rem;
}
.hero-note::after {
  content: ""; display: block;
  width: 3rem; height: 1px; margin: 0.9rem 0 0 auto;
  background: var(--gold);
}
.hero-script {
  position: absolute;
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: clamp(1.5rem, 5vh, 3rem);
  z-index: 2;
  text-align: right;
}

/* --------------------------------------------------------------------------
   7. Values strip
   -------------------------------------------------------------------------- */
.values {
  position: relative;
  background: var(--ink);
  border-block: 1px solid var(--rule-dark);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.value {
  padding: clamp(1.6rem, 3vw, 2.4rem) 1rem;
  border-left: 1px solid var(--rule-dark);
}
.value:first-child { border-left: 0; }
.value .icon {
  width: 30px; height: 30px;
  margin: 0 auto 0.85rem;
  color: var(--gold);
}
.value h3 {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 0.35rem;
  color: var(--cream);
}
.value p {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

/* --------------------------------------------------------------------------
   8. Signature dishes
   -------------------------------------------------------------------------- */
.signature-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.signature-head .section-head { text-align: left; margin: 0; flex: 1; }
.signature-head .ornament { justify-content: flex-start; }

.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.dish-card {
  background: var(--white);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.dish-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.dish-card figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.dish-card img { width: 100%; height: 100%; object-fit: cover; }

.dish-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1.3rem;
  flex: 1;
}
.dish-card h3 {
  font-size: var(--step-1);
  color: var(--on-light);
  margin: 0 0 0.3rem;
}
.dish-card p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--on-light-mute);
}
.dish-card .pill {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brick);
  color: var(--white);
  transition: background-color 0.25s var(--ease);
}
.dish-card:hover .pill { background: var(--brick-hi); }
.dish-card .pill .icon { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   9. About split
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
}
.split-copy {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-copy h2 { max-width: 12ch; color: var(--cream); }
.split-media { position: relative; min-height: 320px; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }

.about-marks {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2rem;
  margin-top: 2.2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
}
.about-mark {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--on-dark-mute);
}
.about-mark .icon { width: 18px; height: 18px; color: var(--gold); }

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.quote-card {
  background: var(--white);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.quote-card .icon-quote { width: 26px; height: 26px; color: var(--brick); opacity: 0.5; margin-bottom: 1rem; }
.quote-card blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--on-light);
}
.quote-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule-light);
}
.quote-author { font-size: var(--step-0); color: var(--on-light); }
.quote-author small {
  display: block; font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-light-mute); margin-top: 0.2rem;
}
.stars { color: var(--gold); letter-spacing: 0.15em; font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   11. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--brick);
  color: var(--white);
  overflow: hidden;
}

/* The client's gold artwork, each anchored hard against its own edge:
   the skyline sits on the bottom border, the mandala bleeds off the right. */
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
}
.cta-band::before {
  left: 0;
  bottom: 0;
  width: min(34%, 430px);
  height: 100%;
  background-image: url("../img/ornament-skyline.webp");
  background-position: left bottom;
  background-size: contain;
  opacity: 0.22;
}
.cta-band::after {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(20%, 250px);
  height: 190%;
  background-image: url("../img/ornament-mandala.webp");
  background-position: right center;
  background-size: contain;
  opacity: 0.22;
}

.cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  flex-wrap: wrap;
  text-align: center;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
}
.cta-inner h2 {
  margin: 0 0 0.3rem;
  color: var(--white);
  font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.5rem);
  white-space: nowrap;
}
.cta-accent { color: var(--gold-soft); }

.cta-inner p {
  margin: 0;
  font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255, 253, 249, 0.75);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--night);
  color: var(--on-dark-mute);
  padding-block: clamp(2.75rem, 5vw, 4rem) 0;
  font-size: var(--step--1);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 0.9fr 1.2fr;
  gap: clamp(1.75rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-col + .footer-col { border-left: 1px solid var(--rule-dark); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.footer-brand { text-align: center; }
.footer-brand img { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 0.9rem; }
.footer-brand .brand-name { font-size: 1.5rem; display: block; }

.footer-col h4 {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-links a { transition: color 0.2s var(--ease); }
.footer-links a:hover { color: var(--cream); }

.socials { display: flex; gap: 0.9rem; }
.socials a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-dark);
  border-radius: 50%;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.socials .icon { width: 17px; height: 17px; }

.footer-contact { display: grid; gap: 0.9rem; }
.footer-contact div { display: flex; gap: 0.7rem; align-items: flex-start; }
.footer-contact .icon { width: 17px; height: 17px; color: var(--gold); flex: none; margin-top: 0.25rem; }
.footer-contact a:hover { color: var(--cream); }

.footer-bar {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.75rem;
}
.footer-bar nav { display: flex; gap: 1.25rem; }
.footer-bar a:hover { color: var(--cream); }

/* --------------------------------------------------------------------------
   13. Page header (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: clamp(8rem, 18vh, 11rem) clamp(3rem, 6vw, 4.5rem);
  background: var(--ink-soft);
  text-align: center;
  overflow: hidden;
}
.page-head::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 1px;
  background: var(--rule-dark);
}
.page-head h1 { margin-bottom: 0.5rem; color: var(--cream); }
.page-head p { margin: 0 auto; color: var(--on-dark-mute); }

/* --------------------------------------------------------------------------
   14. Menu page
   -------------------------------------------------------------------------- */
.menu-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(14, 9, 6, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-dark);
}
.menu-nav-inner {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.7rem;
}
.menu-nav-inner::-webkit-scrollbar { display: none; }
.menu-nav a {
  flex: none;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--on-dark-mute);
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.menu-nav a:hover { color: var(--cream); border-color: var(--rule-dark); }
.menu-nav a.is-active { background: var(--brick); border-color: var(--brick); color: var(--white); }

.menu-section { padding-block: clamp(2.75rem, 5vw, 4.5rem); scroll-margin-top: 4.5rem; }
.menu-section:nth-child(even) { background: var(--ink-soft); }

.menu-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.menu-section-head h2 { margin: 0; color: var(--cream); }
.menu-section-note {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
}

.menu-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 0 clamp(2rem, 4vw, 3.5rem); }

.menu-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: start;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule-dark);
}
.menu-row-thumb {
  width: 64px; height: 64px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--ink);
}
.menu-row-name {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--cream);
  margin: 0 0 0.2rem;
}
.menu-row-desc {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--on-dark-mute);
  max-width: 46ch;
}
.menu-row-price {
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--gold);
  white-space: nowrap;
  padding-top: 0.1rem;
}
.menu-row-tags { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.tag {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule-dark);
  border-radius: 100px;
  color: var(--gold);
}

.price-key {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
  font-size: var(--step--1);
  color: var(--on-dark-mute);
}

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 0.45rem; margin-bottom: 1.1rem; }
.field label { font-size: var(--step--1); letter-spacing: 0.06em; color: var(--on-dark-mute); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: rgba(255, 253, 249, 0.04);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  color: var(--cream);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  background: rgba(255, 253, 249, 0.07);
  outline: none;
}

/* The open dropdown is drawn by the OS, not the page, so the options need
   their own colours or cream text lands on a white list. */
.field select option,
.field select optgroup {
  background: #1E140E;
  color: #F5EADA;
}
.field select { color-scheme: dark; }
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.1rem; }
.field-error { color: #E08A6B; font-size: var(--step--1); }

.notice {
  padding: 0.95rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule-dark);
  margin-bottom: 1.5rem;
  font-size: var(--step-0);
}
.notice--ok   { border-color: rgba(120, 170, 120, 0.5); color: #BEE0BE; background: rgba(90, 150, 90, 0.1); }
.notice--bad  { border-color: rgba(200, 110, 80, 0.5);  color: #EDA98C; background: rgba(180, 80, 50, 0.1); }

/* --------------------------------------------------------------------------
   16. Gallery
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.gallery-grid figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 1;
  cursor: zoom-in;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.05); }
.gallery-grid figure > a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* The caption is a strip across the foot of the photo, not a row beneath
   it: one line, clipped rather than wrapped, so a long dish name cannot
   push the band up over the food. */
.gallery-grid figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 1.5rem 0.8rem 0.6rem;
  background: linear-gradient(0deg, rgba(11, 7, 5, 0.88) 0%, rgba(11, 7, 5, 0.62) 45%, transparent 100%);
  font-size: var(--step--1);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   17. Contact
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.info-list { display: grid; gap: 1.5rem; margin-bottom: 2rem; }
.info-item { display: flex; gap: 1rem; }
.info-item .icon { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: 0.3rem; }
.info-item h3 {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 0.35rem;
}
.info-item p { margin: 0; color: var(--on-dark-mute); }
.map-frame {
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .value:nth-child(3) { border-left: 0; }
  .value:nth-child(n+3) { border-top: 1px solid var(--rule-dark); }

  .split { grid-template-columns: 1fr; }
  .split-media { min-height: 260px; order: -1; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col + .footer-col { border-left: 0; padding-left: 0; }
  .footer-col:nth-child(n+3) { border-top: 1px solid var(--rule-dark); padding-top: 1.5rem; }

  .contact-grid { grid-template-columns: 1fr; }
  .menu-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }

  /* The slide-in panel is position:fixed, so it must resolve against the
     viewport. Any backdrop-filter on the header makes the header a
     containing block instead, which traps the panel inside the header's own
     box — the menu then appears as a sliver a few lines tall. A solid
     background is indistinguishable at this size, so the blur comes off. */
  .site-header,
  .site-header--solid,
  .site-header.is-stuck {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header--solid,
  .site-header.is-stuck { background: rgba(14, 9, 6, 0.98); }

  /* Keeps the button clickable once the panel is over the header,
     otherwise the only way out is to tap a link. */
  .nav-toggle { position: relative; z-index: 70; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 6rem 1.75rem 2rem;
    background: var(--ink-soft);
    border-left: 1px solid var(--rule-dark);
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav a { width: 100%; font-size: 1.15rem; padding-block: 0.8rem; border-bottom: 1px solid var(--rule-dark); }
  .nav a.is-active::after { display: none; }
  .nav .btn { margin-top: 1.25rem; width: 100%; justify-content: center; }

  body.nav-open { overflow: hidden; }

  .hero-note { display: none; }
  .hero-script { position: static; text-align: left; margin-top: 2rem; }

  /* Ornaments stay, scaled so they still read at phone width */
  .cta-band::before { width: 58%; height: 72%; opacity: 0.2; }
  .cta-band::after  { width: 30%; height: 110%; opacity: 0.2; }
  .cta-inner { padding-block: 2rem 2.75rem; }
  .cta-inner h2 { white-space: normal; }
  .brand img { width: 50px; height: 50px; }
  .brand-name { font-size: 1.2rem; }

  .signature-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-col + .footer-col { border-top: 1px solid var(--rule-dark); padding-top: 1.5rem; }
  .socials, .ornament { justify-content: center; }
  .footer-contact div { justify-content: center; }
  .footer-bar { justify-content: center; text-align: center; }
  .menu-row { grid-template-columns: 1fr auto; }
  .menu-row-thumb { display: none; }
}

@media (max-width: 480px) {
  .values-grid { grid-template-columns: 1fr; }
  .value { border-left: 0; }
  .value + .value { border-top: 1px solid var(--rule-dark); }
  .btn { width: 100%; justify-content: center; }
  .hero-meta { display: none; }
}

/* --------------------------------------------------------------------------
   19. Catering builder
   -------------------------------------------------------------------------- */
.builder { max-width: 1000px; margin-inline: auto; }

.step {
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  margin: 0 0 1.25rem;
  background: rgba(255, 253, 249, 0.02);
}
.step.has-error { border-color: rgba(200, 110, 80, 0.6); }

.step legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: var(--step-2);
  color: var(--cream);
  padding-inline: 0.5rem;
}
.step legend em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  border: 1px solid var(--rule-dark);
  border-radius: 100px;
  padding: 0.15rem 0.6rem;
}

.step-no {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--gold);
}

.step-help {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: baseline; justify-content: space-between;
  margin: 0 0 1.2rem;
  font-size: var(--step--1);
  color: var(--on-dark-mute);
  max-width: none;
}
.step-count { color: var(--gold); white-space: nowrap; }
.step-count.is-full { color: var(--brick-hi); }

/* Radio cards */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.choice {
  position: relative;
  display: block;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.choice:hover { border-color: var(--gold); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--brick-hi); background: rgba(185, 87, 53, 0.12); }
.choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice--slim { padding: 0.85rem 1rem; }

.choice-body strong { display: block; color: var(--cream); font-weight: 400; }
.choice-body small { display: block; margin-top: 0.25rem; color: var(--on-dark-mute); font-size: var(--step--1); }
.choice-price {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--display);
  color: var(--gold);
}

/* Dish checkboxes */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem;
}
.pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem 0.55rem 0.55rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.pick:hover { border-color: var(--gold); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { border-color: var(--brick-hi); background: rgba(185, 87, 53, 0.14); }
.pick:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.pick.is-disabled { opacity: 0.4; cursor: not-allowed; }
.pick img { width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; flex: none; }
.pick-body strong { display: block; font-weight: 400; font-size: var(--step-0); color: var(--cream); }
.pick-body small {
  display: block; margin-top: 0.15rem;
  font-size: 0.72rem; line-height: 1.45;
  color: var(--on-dark-mute);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Sticky running total */
.summary {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin-top: 1.5rem;
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  background: rgba(20, 13, 9, 0.97);
  backdrop-filter: blur(10px);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  box-shadow: var(--shadow);
}
.summary-lines { display: grid; gap: 0.4rem; max-height: 9rem; overflow-y: auto; margin-bottom: 1rem; }
.summary-line {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: var(--step--1); color: var(--on-dark-mute);
}
.summary-line small { color: var(--gold); margin-left: 0.4rem; }
.summary-empty { margin: 0; font-size: var(--step--1); color: var(--on-dark-mute); }

.summary-total {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-dark);
}
.summary-total strong {
  display: block;
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
}
.summary-total small {
  display: block; margin-top: 0.35rem;
  font-size: var(--step--1); color: var(--on-dark-mute);
}
.summary-note { margin: 0.9rem 0 0; font-size: 0.72rem; color: var(--on-dark-mute); max-width: none; }

@media (max-width: 560px) {
  .summary-total { flex-direction: column; align-items: stretch; }
  .summary-total .btn { width: 100%; justify-content: center; }
  .pick-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   20. Catering promo (homepage)
   -------------------------------------------------------------------------- */
.catering-promo {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

/* The photograph occupies the right of the band and is faded into the
   dark background, so the copy always sits on flat colour. */
.catering-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: -1;
}
.catering-media picture,
.catering-media img { width: 100%; height: 100%; object-fit: cover; }
.catering-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(20, 13, 9, 0.92) 28%, rgba(20, 13, 9, 0.45) 62%, rgba(20, 13, 9, 0.35) 100%),
    linear-gradient(0deg, rgba(20, 13, 9, 0.75) 0%, transparent 42%);
}

.catering-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}

.catering-copy h2 {
  margin: 0 0 0.6rem;
  color: var(--cream);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
}
.catering-intro {
  margin: 0 0 1.75rem;
  color: var(--on-dark-mute);
  max-width: 46ch;
}

/* Occasion row with hairline dividers, as drawn */
.occasions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0;
}
.occasions li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 0 clamp(0.7rem, 1.6vw, 1.25rem);
  border-left: 1px solid var(--rule-dark);
}
.occasions li:first-child { border-left: 0; padding-left: 0; }
.occasions .icon { width: 26px; height: 26px; color: var(--gold); }
.occasions span {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--on-dark-mute);
  white-space: nowrap;
}

.catering-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Trust marks sit low over the photograph */
.trust-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem clamp(0.75rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-marks li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
}
.trust-marks .icon { width: 24px; height: 24px; color: var(--gold); }
.trust-marks span {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--on-dark-mute);
  white-space: nowrap;
}

@media (max-width: 960px) {
  .catering-media { width: 100%; }
  .catering-media::after {
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(20, 13, 9, 0.9) 45%, rgba(20, 13, 9, 0.7) 100%),
      linear-gradient(0deg, rgba(20, 13, 9, 0.85) 0%, rgba(20, 13, 9, 0.4) 60%);
  }
  .catering-inner { grid-template-columns: 1fr; align-items: start; }
  .trust-marks { justify-content: flex-start; padding-top: 1.25rem; border-top: 1px solid var(--rule-dark); }
}

@media (max-width: 560px) {
  .occasions li { padding: 0 0.6rem; }
  .occasions span, .trust-marks span { font-size: 0.66rem; }
  .catering-actions .btn { width: 100%; justify-content: center; }
  .trust-marks { gap: 1.1rem; }
  .trust-marks li { flex: 1 1 40%; }
}

/* --------------------------------------------------------------------------
   21. About band (homepage) — photo on the right, faded into the dark
   -------------------------------------------------------------------------- */
.about-band {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.about-band-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 66%;
  z-index: -1;
}
.about-band-media picture { display: block; width: 100%; height: 100%; }
.about-band-media img { width: 100%; height: 100%; object-fit: cover; }

/* Soft fade on the photo's left edge rather than a hard split, plus a
   gentle darkening at top and bottom so the band reads as one piece. */
.about-band-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(20, 13, 9, 0.88) 22%, rgba(20, 13, 9, 0.28) 52%, transparent 78%),
    linear-gradient(0deg, rgba(20, 13, 9, 0.45) 0%, transparent 30%, transparent 72%, rgba(20, 13, 9, 0.35) 100%);
}

.about-band-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}

.about-band-copy { max-width: 32rem; }
.about-band-copy h2 {
  margin: 0 0 0.9rem;
  color: var(--cream);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
}
.about-band-copy p { color: var(--on-dark-mute); max-width: 40ch; }
.about-band-copy .rule {
  display: block;
  width: 3.25rem;
  height: 1px;
  margin: 0 0 1.35rem;
  background: var(--gold);
}
.about-band-copy .about-marks { margin-top: 1.9rem; }

.about-band-quote {
  margin: 0;
  text-align: center;
  line-height: 1.25;
  color: var(--gold-soft);
  text-shadow: 0 2px 18px rgba(20, 13, 9, 0.8);
  flex: none;
}
.about-band-quote::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 1rem auto 0;
  background: var(--gold);
}

@media (max-width: 1080px) {
  .about-band-quote { display: none; }
}

@media (max-width: 960px) {
  .about-band-media { width: 100%; }
  .about-band-media::after {
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(20, 13, 9, 0.9) 42%, rgba(20, 13, 9, 0.62) 100%),
      linear-gradient(0deg, rgba(20, 13, 9, 0.8) 0%, rgba(20, 13, 9, 0.35) 60%);
  }
  .about-band-inner { display: block; }
}

/* The old two-column split is still used on the About page — this stops the
   picture element collapsing and leaving dead space under the photo. */
.split-media picture { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   22. Reels
   -------------------------------------------------------------------------- */
.reel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.reel-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-lg);
  background: var(--ink-soft);
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.reel-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.reel-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.reel-card picture,
.reel-card img,
.reel-blank { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel-card img { object-fit: cover; transition: transform 0.5s var(--ease); }
.reel-card:hover img { transform: scale(1.05); }

.reel-blank {
  background:
    radial-gradient(circle at 50% 35%, rgba(217, 168, 92, 0.16), transparent 62%),
    var(--ink-soft);
}

.reel-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(0deg, rgba(11, 7, 5, 0.9) 8%, transparent 100%);
}

.reel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 234, 218, 0.45);
  background: rgba(20, 13, 9, 0.55);
  backdrop-filter: blur(3px);
  color: var(--cream);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.reel-play svg { width: 22px; height: 22px; margin-left: 3px; }
.reel-card:hover .reel-play { background: var(--brick); border-color: var(--brick); }

.reel-label {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 1rem 0.9rem;
  text-align: left;
}
.reel-caption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--sans);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--cream);
}

.reel-note {
  margin: 1.5rem 0 0;
  font-size: var(--step--1);
  color: var(--on-dark-mute);
  text-align: center;
}

/* Player */
.reel-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}
.reel-modal[hidden] { display: none; }

.reel-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 3, 0.88);
  backdrop-filter: blur(6px);
}

.reel-modal-inner {
  position: relative;
  width: min(420px, 100%);
  max-height: 100%;
}

.reel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 6rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}
.reel-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.reel-close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-dark);
  border-radius: 50%;
  background: rgba(20, 13, 9, 0.7);
  color: var(--cream);
  cursor: pointer;
}
.reel-close:hover { border-color: var(--gold); color: var(--gold); }
.reel-close svg { width: 18px; height: 18px; }

/* Photo mode — the same shell, widened and let out of the 9:16 box. A reel
   is always portrait; a photograph is whatever shape it was shot in, so the
   frame takes its size from the image instead of imposing one. */
.reel-modal.is-photo .reel-modal-inner { width: auto; max-width: min(1100px, 100%); }
.reel-modal.is-photo .reel-frame {
  aspect-ratio: auto;
  max-height: calc(100vh - 9rem);
  background: var(--ink);
  border: 1px solid var(--rule-dark);
}
.reel-modal.is-photo .reel-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  margin: 0 auto;
}

.photo-caption {
  margin: 0.85rem auto 0;
  max-width: 60ch;
  font-size: var(--step--1);
  color: var(--on-dark-mute);
  text-align: center;
}
.photo-caption[hidden] { display: none !important; }
.photo-count { display: block; margin-top: 0.3rem; color: var(--gold); letter-spacing: 0.12em; font-size: 0.72rem; text-transform: uppercase; }

/* Only shown in photo mode, and only when there is more than one photo. */
.photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-dark);
  border-radius: 50%;
  background: rgba(20, 13, 9, 0.78);
  color: var(--cream);
  cursor: pointer;
  z-index: 2;
}
.photo-nav:hover { border-color: var(--gold); color: var(--gold); }
.photo-nav svg { width: 20px; height: 20px; }
.photo-nav--prev { left: clamp(-3.5rem, -4vw, -0.5rem); }
.photo-nav--next { right: clamp(-3.5rem, -4vw, -0.5rem); }
.reel-modal:not(.is-photo) .photo-nav,
.photo-nav[hidden] { display: none !important; }

@media (max-width: 560px) {
  .reel-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .reel-play { width: 46px; height: 46px; }
  .reel-play svg { width: 18px; height: 18px; }
  .reel-close { top: auto; bottom: -3.25rem; right: 50%; transform: translateX(50%); }
  .reel-modal.is-photo .reel-close { top: -3rem; bottom: auto; right: 0; transform: none; }
  .photo-nav--prev { left: 0.25rem; }
  .photo-nav--next { right: 0.25rem; }
}

/* --------------------------------------------------------------------------
   23. Catering builder — price bands, supplements, live stations
   -------------------------------------------------------------------------- */

/* The builder now starts near the top of the page, so the header above it
   is shallower than on the other interior pages. */
.page-head--tight { padding-block: clamp(7rem, 15vh, 9rem) clamp(1.75rem, 3vw, 2.5rem); }
.page-head--tight p { max-width: 54ch; }
.builder-section { padding-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Price bands: the thing customers need to see before they start picking. */
.tier-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.35rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule-dark);
}

.tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem 0.5rem 0.5rem;
  border: 1px solid var(--rule-dark);
  border-radius: 100px;
  background: rgba(255, 253, 249, 0.03);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
              opacity 0.25s var(--ease);
}

.tier-chip-count {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(217, 168, 92, 0.16);
  color: var(--gold);
  font-size: 0.82rem;
  line-height: 1;
}

.tier-chip-text {
  font-size: var(--step--1);
  color: var(--on-dark-mute);
  white-space: nowrap;
}
.tier-chip-text strong {
  color: var(--gold);
  font-weight: 400;
  margin-inline: 0.15rem;
}

/* The band the customer has actually reached. */
.tier-chip.is-active {
  border-color: var(--gold);
  background: rgba(217, 168, 92, 0.14);
}
.tier-chip.is-active .tier-chip-count { background: var(--gold); color: var(--ink); }
.tier-chip.is-active .tier-chip-text  { color: var(--cream); }

/* Bands already exceeded fade back rather than disappearing. */
.tier-chip.is-passed { opacity: 0.4; }

.tier-state {
  margin-left: auto;
  font-size: var(--step--1);
  color: var(--on-dark-mute);
  white-space: nowrap;
}
.tier-state.is-active { color: var(--gold); }
.tier-state.is-full   { color: var(--brick-hi); }

/* A dish that costs extra per guest says so on its own card. */
.pick-extra {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid rgba(217, 168, 92, 0.45);
  border-radius: 100px;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  white-space: nowrap;
}

/* Setup options carry their own "what's included" list, which is why the
   explainer block at the top of the page is no longer needed. */
.choice--setup .choice-price {
  margin-top: 0.35rem;
  font-family: var(--display);
  font-size: var(--step-1);
}
.choice-includes {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--rule-dark);
  display: grid;
  gap: 0.35rem;
}
.choice-includes li {
  position: relative;
  padding-left: 1rem;
  font-size: var(--step--1);
  color: var(--on-dark-mute);
}
.choice-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

@media (max-width: 560px) {
  .tier-bar { gap: 0.4rem; }
  .tier-state { margin-left: 0; width: 100%; }
  .tier-chip-text { white-space: normal; }
}

/* --------------------------------------------------------------------------
   24. Page header with a photograph behind it
   -------------------------------------------------------------------------- */
.page-head--image {
  isolation: isolate;
  background: var(--ink);
}

.page-head-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.page-head-media picture { display: block; width: 100%; height: 100%; }
.page-head-media img { width: 100%; height: 100%; object-fit: cover; }

/* The photo is bright and the heading sits on top of it, so the overlay has
   to be heavy enough to keep cream text legible at the centre while the
   warmth still reads at the edges. */
.page-head-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* keeps the wording readable without hiding the photograph */
    radial-gradient(95% 80% at 50% 45%, rgba(20, 13, 9, 0.78) 0%, rgba(20, 13, 9, 0.56) 55%, rgba(20, 13, 9, 0.3) 100%),
    linear-gradient(180deg, rgba(20, 13, 9, 0.88) 0%, rgba(20, 13, 9, 0.3) 38%, rgba(20, 13, 9, 0.55) 78%, var(--ink) 100%);
}

.page-head--image h1,
.page-head--image .eyebrow { text-shadow: 0 2px 20px rgba(11, 7, 5, 0.85); }
 /* Brighter than the usual muted tone: over a photograph the standard
    68% opacity drops below the 4.5:1 needed for body-size text. */
.page-head--image p {
  color: rgba(245, 234, 218, 0.88);
  text-shadow: 0 1px 12px rgba(11, 7, 5, 0.85);
}

/* Without the photo the header keeps its plain background. */
@media (prefers-reduced-motion: no-preference) {
  .page-head--image { transition: none; }
}

/* --------------------------------------------------------------------------
   25. Guest count — the first step, since every price depends on it
   -------------------------------------------------------------------------- */
.step--guests .guests-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
}
.step--guests .field { margin-bottom: 0; }
.step--guests input[type="number"] {
  width: 7rem;
  padding: 0.7rem 0.9rem;
  font-family: var(--display);
  font-size: var(--step-2);
  text-align: center;
  color: var(--gold);
}
.step--guests input[type="number"]::placeholder {
  color: var(--on-dark-mute);
  opacity: 0.55;
}
.guests-note {
  margin: 0;
  max-width: 34ch;
  font-size: var(--step--1);
  color: var(--on-dark-mute);
}