/* =====================================================================
   KNA Catering Solutions: main stylesheet
   Mobile-first. Breakpoints: 36em, 40em, 56em, 64em, 72em (nav).

   Contents
   1.  Reset
   2.  Fonts
   3.  Design tokens and colour themes
   4.  Base
   5.  Layout
   6.  Shared components
   7.  Header and navigation
   8.  Hero
   9.  Home page sections
   10. Daily meals
   11. Forms
   12. Footer and WhatsApp button
   13. Gallery page and photo viewer
   14. Motion
   15. Utilities and print
   16. Legal pages (Privacy Policy & Terms and Conditions)
   17. Payment page (after a meal order)

   Colour contrast (WCAG 2.2, checked):
   - Gold #CF9D53 on black ............ 8.6:1  (all text sizes)
   - Black on gold .................... 8.6:1  (buttons, gold sections)
   - White on black ................... 21:1
   - Deep gold #8C6420 on white ....... 5.3:1  (gold text on light sections)
   - Grey #A9A9A9 on black ............ 8.9:1  (secondary text on dark)
   - Grey #595959 on white ............ 7.0:1  (secondary text on light)
   - Grey #A9A9A9 on charcoal #1F1F1F . 7.0:1  (footer credit strip)
   - White on charcoal #1F1F1F ........ 16.5:1 (footer credit link)
   - Leaf green #9DC07B on black ...... 10.2:1 (vegetarian mark)
   ===================================================================== */


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

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img,
video {
  height: auto;
}

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

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400; /* Abril Fatface has one weight: never fake a bold */
  line-height: 1.15;
  text-wrap: balance;
}

p,
li,
dd,
figcaption {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

address {
  font-style: normal;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------------------
   2. Fonts (files in css/fonts/; match the names below to your files)
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Abril Fatface";
  src: url("fonts/AbrilFatface-Regular.woff2") format("woff2"),
       url("fonts/AbrilFatface-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Light.woff2") format("woff2"),
       url("fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Regular.woff2") format("woff2"),
       url("fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Medium.woff2") format("woff2"),
       url("fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Italianno";
  src: url("fonts/Italianno-Regular.woff2") format("woff2"),
       url("fonts/Italianno-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ---------------------------------------------------------------------
   3. Design tokens and colour themes
   --------------------------------------------------------------------- */

:root {
  /* Brand colours */
  --black: #000000;
  --gold: #cf9d53;
  --white: #ffffff;

  /* Supporting tones, derived from the brand gold */
  --gold-light: #e2bf87;   /* hover on dark */
  --gold-deep: #8c6420;    /* gold text on white (5.3:1) */
  --champagne: #efe3cb;    /* soft fills */
  --charcoal: #1f1f1f;     /* plate diagram and the footer credit strip */
  --veg: #9dc07b;          /* vegetarian leaf on black */
  --grey-on-dark: #a9a9a9;
  --grey-on-light: #595959;
  --rule-on-dark: rgb(207 157 83 / 0.4);
  --rule-on-light: rgb(0 0 0 / 0.16);
  --error-on-dark: #ff8a7a;   /* 9.2:1 on black */
  --error-on-light: #b42318;  /* 6.6:1 on white */

  /* Typefaces */
  --font-display: "Abril Fatface", "Bodoni MT Black", "Bodoni 72", "Didot", Georgia, serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Italianno", "Snell Roundhand", "Apple Chancery", cursive;
  /* Small uppercase labels (desktop nav, footer titles, dates, weekdays).
     Abril Fatface is a headline face and clogs up at 14px, so these use Poppins. */
  --font-label: var(--font-body);
  --label-weight: 500;

  /* Type scale (classic 14/16/18/21/24/36/48/60/72 px, fluid between steps) */
  --step--1: 0.875rem;
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --step-2: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --step-4: clamp(2rem, 1.55rem + 2.1vw, 3.25rem);
  --step-5: clamp(2.75rem, 1.9rem + 4vw, 4.5rem);
  --script-1: clamp(2.125rem, 1.8rem + 1.5vw, 2.875rem);
  --measure: 62ch;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;
  --section-space: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);

  /* Layout */
  --container: 78rem;
  --header-h: 4.5rem;

  /* Corners: photos and panels are blocks with a slight radius, and
     smaller parts get a smaller one so the rounding stays in proportion */
  --radius-block: 0.5rem;     /* photos, cards and panels */
  --radius-control: 0.25rem;  /* buttons, fields, tabs, chips and badges */
  --radius-mark: 0.1875rem;   /* small markers: checkboxes, swatches, dots */

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.25s;

  /* The logo heart, used as a mask for dividers and list markers */
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1089 2026 183 162'%3E%3Cpath d='M1105.22 2042.59c10.16-10.16 23.54-15.24 36.91-15.24 13.37 0 26.75 5.08 36.9 15.24l1.13 1.13 1.12-1.13c10.16-10.16 23.54-15.24 36.91-15.24 13.36 0 26.74 5.08 36.9 15.24 10.16 10.16 15.24 23.54 15.24 36.91 0 13.37-5.08 26.75-15.24 36.91l-66.55 66.55c-4.63 4.63-12.14 4.63-16.77 0l-66.55-66.55c-10.16-10.16-15.24-23.54-15.24-36.91 0-13.37 5.08-26.75 15.24-36.91z'/%3E%3C/svg%3E");

  /* Default theme (dark). Sections switch theme with .theme-* classes. */
  --bg: var(--black);
  --fg: var(--white);
  --muted: var(--grey-on-dark);
  --accent: var(--gold);
  --rule: var(--rule-on-dark);
  --focus: var(--gold);
  --error: var(--error-on-dark);
  --surface-hint: rgb(255 255 255 / 0.06);
  color-scheme: dark;
}

@media (min-width: 72em) {
  :root {
    --header-h: 5.5rem;
  }
}

.theme-dark {
  --bg: var(--black);
  --fg: var(--white);
  --muted: var(--grey-on-dark);
  --accent: var(--gold);
  --rule: var(--rule-on-dark);
  --focus: var(--gold);
  --error: var(--error-on-dark);
  --surface-hint: rgb(255 255 255 / 0.06);
  color-scheme: dark;
  background-color: var(--bg);
  color: var(--fg);
}

.theme-light {
  --bg: var(--white);
  --fg: var(--black);
  --muted: var(--grey-on-light);
  --accent: var(--gold-deep);
  --rule: var(--rule-on-light);
  --focus: var(--gold-deep);
  --error: var(--error-on-light);
  --surface-hint: rgb(0 0 0 / 0.05);
  color-scheme: light;
  background-color: var(--bg);
  color: var(--fg);
}

.theme-gold {
  --bg: var(--gold);
  --fg: var(--black);
  --muted: #33270f;
  --accent: var(--black);
  --rule: rgb(0 0 0 / 0.3);
  --focus: var(--black);
  --surface-hint: rgb(0 0 0 / 0.06);
  color-scheme: light;
  background-color: var(--bg);
  color: var(--fg);
}


/* ---------------------------------------------------------------------
   4. Base
   --------------------------------------------------------------------- */
body {
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
}

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

::selection {
  background-color: var(--gold);
  color: var(--black);
}

strong {
  font-weight: 500;
}


/* ---------------------------------------------------------------------
   5. Layout
   --------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-space);
}

.section--flush-top {
  padding-top: 0;
}

/* Vertical rhythm for stacked content */
.flow > * + * {
  margin-top: var(--flow-space, 1.25rem);
}

.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.split__media {
  width: 100%;
  max-width: 30rem;
  justify-self: center;
}

.split__content p {
  max-width: var(--measure);
}

@media (min-width: 56em) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 7vw, 7.5rem);
  }

  .split--reverse {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .split--reverse .split__media {
    order: 2;
  }

  .split__media {
    max-width: none;
  }
}


/* ---------------------------------------------------------------------
   6. Shared components
   --------------------------------------------------------------------- */

/* Section titles: Abril Fatface, always uppercase */
.section-title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--fg);
}

/* Centred titles carry the logo's line-heart-line rule */
.section-title--center {
  text-align: center;
}

.section-title--center::after {
  content: "";
  display: block;
  width: 9rem;
  height: 1rem;
  margin: var(--space-s) auto 0;
  background-color: var(--accent);
  -webkit-mask:
    linear-gradient(#000 0 0) left center / 3.4rem 1px no-repeat,
    var(--heart) center / 1rem auto no-repeat,
    linear-gradient(#000 0 0) right center / 3.4rem 1px no-repeat;
  mask:
    linear-gradient(#000 0 0) left center / 3.4rem 1px no-repeat,
    var(--heart) center / 1rem auto no-repeat,
    linear-gradient(#000 0 0) right center / 3.4rem 1px no-repeat;
}

/* Italianno: short sayings only */
.saying {
  font-family: var(--font-script);
  font-size: var(--script-1);
  line-height: 1;
  color: var(--accent);
}

.lead {
  max-width: 40rem;
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.55;
}

.fine-print {
  max-width: 52ch;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Buttons */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-border: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.75em 1.6em;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-control);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);

}

.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--black);
  --btn-border: var(--gold);
}

.btn--gold:hover {
  --btn-bg: var(--gold-light);
  --btn-border: var(--gold-light);
}

.btn--light {
  --btn-fg: var(--white);
  --btn-border: rgb(255 255 255 / 0.7);
}

.btn--light:hover {
  --btn-bg: var(--white);
  --btn-fg: var(--black);
  --btn-border: var(--white);
}

.btn--dark {
  --btn-bg: var(--black);
  --btn-fg: var(--white);
  --btn-border: var(--black);
}

.btn--dark:hover {
  --btn-bg: var(--gold-deep);
  --btn-border: var(--gold-deep);
}

.btn--outline-dark {
  --btn-fg: var(--black);
  --btn-border: var(--black);
}

.btn--outline-dark:hover {

  --btn-bg: var(--black);
  --btn-fg: var(--white);
}

.btn--block {
  width: 100%;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}

.flow > .actions {
  margin-top: var(--space-l);
}

.text-link,
.link-button {
  color: var(--fg);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color var(--dur) var(--ease);
}

.text-link:hover,
.link-button:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}

/* Photos: blocks with a slight corner radius
   (the class name is kept from the earlier arch crop, so no markup changes) */
.arch-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-block);
  background-color: var(--surface-hint);
}

.arch-img--tall {
  aspect-ratio: 3 / 4;
}

/* Slideshow: the photos share one grid cell and cross-fade (see main.js) */
.slideshow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.slideshow > * {
  grid-area: 1 / 1;
}

.slideshow__slide {
  opacity: 0;
}

/* The outgoing photo stays opaque underneath while the next one fades in */
.slideshow__slide.is-leaving {
  z-index: 1;
  opacity: 1;
}

.slideshow__slide.is-active {
  z-index: 2;
  opacity: 1;
  transition: opacity 1.2s ease-in-out; /* an even dissolve, rather than the snappier UI easing */
}

.slideshow__toggle {
  z-index: 3;
  align-self: end;
  justify-self: start;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: var(--space-s);
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-control);
  background-color: rgb(0 0 0 / 0.55); /* darker than the hero button: keeps the icon clear on bright photos */
  color: var(--white);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.slideshow__toggle:hover {
  background-color: var(--white);
  color: var(--black);
}

.slideshow__toggle .icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* Lists with the logo heart as the marker */
.list-title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.4;
}

.heart-list {
  display: grid;
  gap: 0.55rem;
}

.heart-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.heart-list li::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.62rem;
  background-color: var(--accent);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}

/* Stroke icons from the sprite in php/header.php */
.icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------------------------------------------------------------------
   7. Header and navigation
   --------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--white);
}

/* Solid bar: always on inner pages, after scrolling on the home page */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--rule-on-dark);
  background-color: rgb(0 0 0 / 0.94);
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}

.site-header--overlay {
  background-image: linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0));
}

.site-header--overlay:not(.is-scrolled)::before {
  opacity: 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--gold);
  text-decoration: none;
}

.brand__mark {
  width: clamp(3.4rem, 3rem + 1.5vw, 4.4rem);
  height: auto;
  fill: currentColor;
}

.brand__text {
  display: none;
  padding-left: 0.85rem;
  border-left: 1px solid var(--rule-on-dark);
  font-family: var(--font-body); /* "Catering Solutions" is set in Poppins, as in the logo */
  font-size: 0.7rem;
  line-height: 1.55;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--white);
}

.brand__text span {
  display: block;
}

@media (min-width: 24em) {
  .brand__text {
    display: block;
  }
}

/* Menu button (small screens) */
.nav-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 500;
}

.nav-toggle__bars {
  position: relative;
  width: 1.5rem;
  height: 0.7rem;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}

.nav-toggle__bars::before {
  top: 0;
}

.nav-toggle__bars::after {
  top: calc(100% - 1.5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  top: calc(50% - 0.75px);
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  top: calc(50% - 0.75px);
  transform: rotate(-45deg);
}

/* Full-screen menu (small screens) */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-l);
  padding: calc(var(--header-h) + var(--space-m)) var(--gutter) var(--space-xl);
  overflow-y: auto;
  background-color: var(--black);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}

.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease);
}

.site-nav__list {
  display: grid;
  gap: 0.25rem;
}

.site-nav__link {
  display: inline-block;
  padding-block: 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.2rem + 2.4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  transition: color var(--dur) var(--ease);
}

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

.site-nav__cta {
  align-self: flex-start;
}

.site-nav__contact {
  display: grid;
  gap: 0.4rem;
  color: var(--grey-on-dark);
  font-size: var(--step--1);
}

.site-nav__contact a {
  text-decoration: none;
}

.site-nav__contact a:hover {
  color: var(--gold);
}

html.nav-open {
  overflow: hidden;
}

@media (min-width: 72em) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    padding: 0;
    overflow: visible;
    background: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .site-nav__list {
    display: flex;
    gap: clamp(1.25rem, 2vw, 2.25rem);
  }

  .site-nav__link {
    position: relative;
    padding-block: 0.5rem;
    font-family: var(--font-label);
    font-size: 0.875rem;
    font-weight: var(--label-weight);
    letter-spacing: 0.14em;
  }

  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0.14em;
    bottom: 0.2rem;
    height: 1px;
    background-color: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }

  .site-nav__link:hover::after,
  .site-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .site-nav__cta {
    align-self: auto;
    min-height: 2.75rem;
    padding-inline: 1.3em;
  }

  .site-nav__contact {
    display: none;
  }
}


/* ---------------------------------------------------------------------
   8. Hero: the logo lockup, set live over the client's video
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--space-l)) 0 var(--space-3xl);
  overflow: hidden;
  background-color: var(--black);
  color: var(--white);
  text-align: center;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkening for legibility over any footage */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 75% 60% at 50% 50%, rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.9)),
    linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0) 65%, rgb(0 0 0 / 0.75));
}

.hero__content {
  display: grid;
  justify-items: center;
}

.hero__cloche {
  width: clamp(5rem, 3.8rem + 4vw, 8rem);
  height: auto;
  overflow: visible;
  fill: var(--gold);
}

.hero__lid {
  transform-box: fill-box;
  transform-origin: 8% 100%;
}

.hero__steam path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 20;
  stroke-linecap: round;
  opacity: 0;
}

/* h1: "KNA" over a rule, "Catering Solutions" (Poppins) over line-heart-line, as in the logo */
.hero__title {
  --kna-size: clamp(4rem, 2.2rem + 8.5vw, 9rem);
  --kna-track: calc(var(--kna-size) * 0.36);
  --kna-line: max(2px, calc(var(--kna-size) * 0.022));
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: var(--space-s);
}

.hero__brand {
  padding-left: var(--kna-track);
  font-family: var(--font-display);
  font-size: var(--kna-size);
  line-height: 1;
  letter-spacing: var(--kna-track);
  text-transform: uppercase;
  color: var(--gold);
}

.hero__brand::after {
  content: "";
  display: block;
  height: var(--kna-line);
  margin: 0.12em var(--kna-track) 0 0;
  background-color: var(--gold);
}

.hero__name {
  margin-top: 0.8em;
  font-family: var(--font-body);
  font-size: max(0.8rem, calc(var(--kna-size) * 0.16));
  line-height: 1.2;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
}

.hero__name::after {
  content: "";
  display: block;
  height: 1.1rem;
  margin: 0.6rem var(--kna-track) 0;
  background-color: var(--gold);
  -webkit-mask:
    linear-gradient(#000 0 0) left center / calc(50% - 1rem) var(--kna-line) no-repeat,
    var(--heart) center / 1.05rem auto no-repeat,
    linear-gradient(#000 0 0) right center / calc(50% - 1rem) var(--kna-line) no-repeat;
  mask:
    linear-gradient(#000 0 0) left center / calc(50% - 1rem) var(--kna-line) no-repeat,
    var(--heart) center / 1.05rem auto no-repeat,
    linear-gradient(#000 0 0) right center / calc(50% - 1rem) var(--kna-line) no-repeat;
}

.hero__tagline {
  max-width: 17em;
  margin-top: var(--space-m);
  font-family: var(--font-script);
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 4.25rem);
  line-height: 1.05;
  color: var(--white);
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.hero__video-toggle {
  position: absolute;
  left: var(--gutter);
  bottom: var(--space-l);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radius-control);
  background-color: rgb(0 0 0 / 0.35);
  color: var(--white);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.hero__video-toggle:hover {
  background-color: var(--white);
  color: var(--black);
}

.hero__video-toggle .icon {
  width: 1.1rem;
  height: 1.1rem;
}


/* ---------------------------------------------------------------------
   9. Home page sections
   --------------------------------------------------------------------- */

/* Welcome + service index */
.intro__grid {
  display: grid;
  gap: var(--space-xl);
}

.intro__text {
  display: grid;
  gap: var(--space-m);
}

.intro__text p {
  max-width: var(--measure);
}

.intro__media {
  width: 100%;
  max-width: 26rem;
  justify-self: center;
}

.service-index {
  border-top: 1px solid var(--rule);
}

.service-index__item {
  border-bottom: 1px solid var(--rule);
}

.service-index__link {
  display: grid;
  gap: 0.3rem;
  padding-block: var(--space-m);
  text-decoration: none;
  transition: padding-left 0.35s var(--ease);
}

.service-index__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: 0.02em;
  transition: color var(--dur) var(--ease);
}

.service-index__desc {
  color: var(--muted);
  font-size: 0.9375rem;
}

.service-index__link:hover {
  padding-left: 0.75rem;
}

.service-index__link:hover .service-index__name {
  color: var(--accent);
}

@media (min-width: 40em) {
  .service-index__link {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.3fr);
    align-items: baseline;
    gap: var(--space-m);
  }
}

@media (min-width: 56em) {
  .intro__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas:
      "text  media"
      "index media";
    column-gap: clamp(3rem, 7vw, 7.5rem);
  }

  .intro__text {
    grid-area: text;
  }

  .intro__media {
    grid-area: media;
    align-self: start;
    max-width: none;
  }

  .service-index {
    grid-area: index;
  }
}

/* Functions & events */
.events__lists {
  display: grid;
  gap: var(--space-l);
}

.flow > .events__lists {
  margin-top: var(--space-l);
}

@media (min-width: 36em) {
  .events__lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Weddings */
.weddings__media {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  padding-bottom: 1.5rem;
}

.weddings__img-main {
  grid-column: 1 / span 9;
  grid-row: 1;
}

.weddings__img-accent {
  grid-column: 7 / span 6;
  grid-row: 1;
  aspect-ratio: 3 / 4;
  margin-bottom: -1.5rem;
  border: 0.5rem solid var(--bg);
  border-radius: calc(var(--radius-block) + 0.5rem); /* keeps the photo's own corner at --radius-block */
}

.points {
  display: grid;
  gap: var(--space-m);
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}

.flow > .points {
  margin-top: var(--space-l);
}

.points__item dt {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.02em;
}

.points__item dd {
  margin-top: 0.3rem;
  color: var(--muted);
}

/* Special diet meals */
.diets__layout {
  display: grid;
  gap: var(--space-2xl);
}

.diet-list {
  border-top: 1px solid var(--rule);
}

.diet-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-s);
  row-gap: 0.35rem;
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--rule);
}

.diet-list__icon {
  grid-row: span 2;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
}

.diet-list__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.02em;
}

.diet-list__item p {
  color: var(--muted);
}

@media (min-width: 40em) {
  .diet-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
    border-top: 0;
  }

  .diet-list__item:nth-child(-n + 2) {
    border-top: 1px solid var(--rule);
  }
}

@media (min-width: 60em) {
  .diets__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: clamp(3rem, 7vw, 7.5rem);
    align-items: start;
  }
}

/* How booking works: a real sequence, so it is numbered */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-2xl);
}

.steps__item {
  counter-increment: step;
  position: relative;
  padding-left: 4.5rem;
}

.steps__item::before {
  content: counter(step);
  position: absolute;
  top: -0.35rem;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
  background-color: var(--bg);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
}

/* Connecting line between the numbers */
.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3rem;
  left: 1.5rem;
  bottom: calc(-1 * var(--space-l) - 0.35rem);
  width: 1px;
  background-color: var(--rule);
}

.steps__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.02em;
}

.steps__item p {
  max-width: 30ch;
  margin-top: 0.4rem;
  color: var(--muted);
}

@media (min-width: 56em) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-l);
  }

  .steps__item {
    padding-top: 4.5rem;
    padding-left: 0;
  }

  .steps__item::before {
    top: 0;
  }

  .steps__item:not(:last-child)::after {
    top: 1.5rem;
    left: 3.75rem;
    right: calc(-1 * var(--space-l) + 0.75rem);
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

/* Our story + team */
.story__owner {
  display: grid;
  gap: var(--space-2xl);
}

.story__portrait {
  position: relative;
  width: calc(100% - 1.25rem);
  max-width: 28rem;
  margin: 1.25rem 0 0 1.25rem;
  justify-self: center;
}

/* Offset gold outline behind the portrait, the same shape as the photo */
.story__portrait::before {
  content: "";
  position: absolute;
  inset: -1.25rem 1.25rem 1.25rem -1.25rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-block);
}

.story__portrait .arch-img {
  position: relative;
}

.story__text p {
  max-width: var(--measure);
}

.timeline {
  border-left: 1px solid var(--rule);
}

.flow > .timeline {
  margin-top: var(--space-l);
}

.timeline__item {
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding: 0 0 1.25rem 1.5rem;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: -0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-mark);
  background-color: var(--accent);
}

.timeline__when {
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: var(--label-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.signature {
  font-family: var(--font-script);
  font-size: clamp(2.75rem, 2.2rem + 2vw, 3.75rem);
  line-height: 1;
  color: var(--fg);
}

.team {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--rule);
}

.team__head {
  display: grid;
  gap: 0.5rem;
}

.team__head p {
  color: var(--muted);
}

.team__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  letter-spacing: 0.02em;
}

.team__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-m);
  margin-top: var(--space-xl);
}

.team-member__name {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.02em;
}

.team-member__role {
  color: var(--muted);
  font-size: 0.9375rem;
}

@media (min-width: 56em) {
  .story__owner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 7vw, 7.5rem);
    align-items: center;
  }

  .team__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-l);
  }
}

/* Gallery preview */
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s) var(--space-xl);
}

.gallery__head p {
  max-width: 36ch;
  color: var(--muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: clamp(9rem, 5.5rem + 12vw, 15rem);
  gap: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
  margin-top: var(--space-xl);
}

.gallery-grid__item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-grid__item:nth-child(3) {
  grid-row: span 2;
}

.gallery-grid__item:nth-child(5),
.gallery-grid__item:nth-child(6) {
  grid-column: span 2;
}

@media (min-width: 56em) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.gallery-grid__link {
  position: relative;
  isolation: isolate; /* keeps the zoomed photo clipped to the rounded corners in Safari */
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-block);
  background-color: var(--surface-hint);
  color: var(--white);
  text-decoration: none;
}

.gallery-grid__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.gallery-grid__link:hover img {
  transform: scale(1.04);
}

.gallery-grid__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1rem 0.85rem;
  background-image: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.85));
  font-size: var(--step--1);
  text-align: left;
}

.gallery__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

/* Reviews (gold section) */
.review-list {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.review {
  display: grid;
  gap: var(--space-m);
  align-content: start;
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}

.review__quote {
  font-size: var(--step-1);
  line-height: 1.55;
}

.review__quote p {
  text-indent: -0.4em; /* hang the opening quote mark */
}

.review__by {
  font-weight: 500;
}

.review__event {
  display: block;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 400;
}

@media (min-width: 60em) {
  .review-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2xl);
  }
}

/* FAQ */
.faq__layout {
  display: grid;
  gap: var(--space-xl);
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item:first-child {
  border-top: 1px solid var(--rule);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: 1.2rem;
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

/* Plus that becomes a minus */
.faq-item__question::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--accent);
  background:
    linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) center / 1.5px 100% no-repeat;
  transition: background-size 0.25s var(--ease);
}

.faq-item[open] > .faq-item__question::after {
  background-size: 100% 1.5px, 1.5px 0;
}

.faq-item__question:hover {
  color: var(--accent);
}

.faq-item__answer {
  max-width: var(--measure);
  padding-bottom: 1.25rem;
  color: var(--muted);
}

@media (min-width: 60em) {
  .faq__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    column-gap: clamp(3rem, 7vw, 7.5rem);
    align-items: start;
  }

  .faq__intro {
    position: sticky;
    top: calc(var(--header-h) + var(--space-l));
  }
}

/* Enquiry */
.enquire__layout {
  display: grid;
  gap: var(--space-2xl);
}

.contact-list {
  display: grid;
  gap: var(--space-m);
}

.flow > .contact-list {
  margin-top: var(--space-xl);
}

.contact-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-s);
}

.contact-list__item .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15rem;
  color: var(--accent);
}

.contact-list__label {
  display: block;
  color: var(--muted);
  font-size: var(--step--1);
}

.contact-list a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
}

.contact-list a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

@media (min-width: 60em) {
  .enquire__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: clamp(3rem, 7vw, 7.5rem);
    align-items: start;
  }
}


/* ---------------------------------------------------------------------
   10. Daily meals: the plate, the price board, the day menu and the order form
   --------------------------------------------------------------------- */
.meals__head {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
  text-align: center;
}

/* Price board: a menu card with a double gold hairline */
.meal-board {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius-block);
}

/* Inner hairline, 0.6rem inside the border */
.meal-board::before {
  content: "";
  position: absolute;
  inset: calc(0.6rem - 2px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-mark);
  pointer-events: none;
}

/* Plate diagram: slices drawn to the real portion weights */
.plate {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
}

.plate__svg {
  width: min(100%, 30rem);
  height: auto;
}

.plate__cutlery {
  fill: var(--gold);
}

.plate__rim {
  fill: var(--white);
}

.plate__well {
  fill: none;
  stroke: rgb(0 0 0 / 0.1);
  stroke-width: 1;
}

.plate__slice {
  fill: none;
  stroke-width: 58;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
}

.plate__slice--protein { stroke: var(--gold); }
.plate__slice--veg1 { stroke: var(--gold-deep); }
.plate__slice--veg2 { stroke: var(--charcoal); }
.plate__slice--starch { stroke: var(--champagne); }

.portions {
  display: grid;
  gap: 0.6rem 1.75rem;
}

@media (min-width: 30em) {
  .portions {
    grid-template-columns: repeat(2, auto);
  }
}

.portions__item {
  --swatch: var(--gold);
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.6rem;
  color: var(--grey-on-dark);
  font-size: 0.9375rem;
  transition: color var(--dur) var(--ease);
}

.portions__item::before {
  content: "";
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: var(--radius-mark);
  background-color: var(--swatch);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.5);
}

.portions__item--veg1 { --swatch: var(--gold-deep); }
.portions__item--veg2 { --swatch: var(--charcoal); }
.portions__item--starch { --swatch: var(--champagne); }

.portions__amount {
  color: var(--white);
  font-weight: 500;
}

/* Point at a portion to pick it out on the plate */
.plate:has(.portions__item:hover) .plate__slice {
  opacity: 0.25;
}

.plate:has(.portions__item--protein:hover) .plate__slice--protein,
.plate:has(.portions__item--veg1:hover) .plate__slice--veg1,
.plate:has(.portions__item--veg2:hover) .plate__slice--veg2,
.plate:has(.portions__item--starch:hover) .plate__slice--starch {
  opacity: 1;
  transform: scale(1.06);
}

.portions__item:hover {
  color: var(--white);
}

.meal-board__price {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
}

.meal-board__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.05em;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  line-height: 0.9;
}

.price__amount {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 8vw, 9rem);
  color: var(--gold);
}

.price__unit {
  font-size: var(--step-1);
}

.meal-board__note {
  max-width: 34ch;
  color: var(--grey-on-dark);
}

.meal-board__addons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.meal-board__addon {
  padding: 0.55rem 1rem;
  border: 1px dashed var(--gold);
  border-radius: var(--radius-control);
}

.meal-board__addon strong {
  color: var(--gold);
}

/* Monthly package: a price sticker on the menu card */
.deal {
  display: grid;
  place-content: center;
  justify-items: center;
  width: clamp(9rem, 7.5rem + 5vw, 11.5rem);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--radius-block);
  background-color: var(--gold);
  box-shadow: 0 0 0 0.35rem var(--black), 0 0 0 calc(0.35rem + 1px) var(--gold);
  color: var(--black);
  text-align: center;
  transform: rotate(-8deg);
  transition: transform 0.4s var(--ease-out);
}

.deal:hover {
  transform: rotate(4deg) scale(1.03);
}

.deal__title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}

.deal__meals {
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.deal__price {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem);
  line-height: 1.05;
  white-space: nowrap;
}

.deal__save {
  font-size: 0.8125rem;
  font-weight: 500;
}

@media (min-width: 56em) {
  .meal-board {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
  }

  .deal {
    position: absolute;
    top: 0;
    right: clamp(1.5rem, 4vw, 3.5rem);
    margin: 0;
    transform: translateY(-45%) rotate(-8deg);
  }

  .deal:hover {
    transform: translateY(-45%) rotate(4deg) scale(1.03);
  }
}

/* Meal facts */
.meal-facts {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  margin-top: var(--space-2xl);
}

.meal-fact {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}

.meal-fact__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--gold);
}

.meal-fact__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.meal-fact p {
  color: var(--grey-on-dark);
  font-size: 0.9375rem;
}

@media (min-width: 40em) {
  .meal-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .meal-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* This week's menu: one tab per day once JavaScript runs; the days are stacked without it */
.weekly-menu {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-3xl);
}

.weekly-menu__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem var(--space-l);
}

.weekly-menu__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: 0.02em;
}

.weekly-menu__week {
  color: var(--grey-on-dark);
}

/* Day tabs: a week strip, each day like a leaf of a desk calendar */
.day-tabs {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.4rem;
}

.day-tab {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.2rem;
  min-height: 4.5rem;
  padding: 0.55rem 0.2rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  color: var(--white);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.day-tab:hover {
  border-color: var(--gold);
}

.day-tab__name {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.day-tab__date {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1;
}

/* Days already gone this week */
.day-tab--past {
  color: var(--grey-on-dark);
}

/* Today: a gold dot under the date, as on a calendar */
.day-tab--today::after {
  content: "";
  position: absolute;
  bottom: 0.4rem;
  left: 50%;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background-color: var(--gold);
  transform: translateX(-50%);
}

.day-tab[aria-selected="true"] {
  border-color: var(--gold);
  background-color: var(--gold);
  color: var(--black);
}

.day-tab--today[aria-selected="true"]::after {
  background-color: var(--black);
}

/* One day's menu, course by course */
.day-menu__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.8rem;
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.03em;
  color: var(--gold);
}

.day-menu__today {
  padding: 0.25em 0.65em;
  border: 1px solid var(--gold);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.courses {
  border-top: 1px solid var(--rule);
}

.course {
  display: grid;
  gap: 0.4rem;
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rule);
}

.course__name {
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: var(--label-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.dishes {
  display: grid;
  gap: 0.3rem;
}

/* The mains are what people order, so they lead */
.course--mains .dishes {
  gap: 0.6rem;
  font-size: var(--step-1);
  line-height: 1.4;
}

/* Where people pick ONE dish (mains, dessert): "Choose one" by the heading and
   "or" between the dishes. Keep this below .course--mains .dishes, which it overrides. */
.course--pick .dishes {
  gap: 0.3rem;
}

.course__hint {
  margin-left: 0.4em;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

.dish__or {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 11rem;
  margin-bottom: 0.3rem;
  font-size: var(--step-0);
  line-height: 1.2;
  color: var(--gold);
}

.dish__or::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--rule);
}

.dish__choice {
  display: block;
  color: var(--grey-on-dark);
  font-size: var(--step--1);
}

/* Vegetarian: a small green leaf after the dish */
.veg-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.4em;
  vertical-align: -0.12em;
  fill: var(--veg);
}

.veg-key {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--grey-on-dark);
  font-size: var(--step--1);
}

.veg-key .veg-mark {
  margin-left: 0;
  font-size: 1.1rem;
}

@media (min-width: 40em) {
  .course {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-m);
  }

  .course__hint {
    display: block;
    margin: 0.15rem 0 0;
  }
}

/* Meal planner */
.planner {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--rule);
}

.planner__intro {
  display: grid;
  gap: var(--space-xs);
  max-width: 44rem;
}

.planner__intro p {
  color: var(--grey-on-dark);
}

.planner__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: 0.02em;
}

.planner__form {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  align-items: start;
}

.planner__controls {
  display: grid;
  gap: var(--space-l);
}

.planner__step {
  display: grid;
  gap: var(--space-s);
}

.planner__legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.03em;
}

.planner__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--gold);
  border-radius: var(--radius-control);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
}

.planner__help {
  color: var(--grey-on-dark);
  font-size: var(--step--1);
}

.planner__closed {
  max-width: 44rem;
  margin-top: var(--space-l);
}

.planner textarea.field__input {
  min-height: 6rem;
}

/* Order form: one row per day, with the main and how many */
.meal-picks {
  border-top: 1px solid var(--rule);
}

.meal-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rule);
}

.meal-pick__day {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  font-weight: 500;
}

.meal-pick__date {
  color: var(--grey-on-dark);
  font-size: var(--step--1);
  font-weight: 400;
}

.meal-pick__today {
  color: var(--gold);
  font-size: var(--step--1);
}

.meal-pick__qty .field__input {
  width: 8.5rem;
}

@media (min-width: 40em) {
  .meal-pick {
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  }

  .meal-pick__day {
    grid-column: auto;
    display: grid;
    gap: 0;
    line-height: 1.35;
  }
}

.dessert-picks {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
}

/* The delivery fee note stands apart: it matters before ordering */
.order-note {
  max-width: 40rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-control) var(--radius-control) 0; /* keeps the gold stripe straight */
  background-color: rgb(207 157 83 / 0.1);
  font-size: var(--step--1);
}

.order-address {
  grid-column: 1 / -1;
}

/* Plan choice cards */
.choice-row {
  display: grid;
  gap: var(--space-s);
}

@media (min-width: 30em) {
  .choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice__input,
.pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice__box {
  position: relative;
  display: grid;
  gap: 0.2rem;
  height: 100%;
  padding: 1rem 3rem 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* Radio indicator: an empty ring that fills when chosen */
.choice__box::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  right: 1.05rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--grey-on-dark);
  border-radius: 50%;
}

.choice:hover .choice__box {
  border-color: var(--gold);
}

.choice__input:checked + .choice__box {
  border-color: var(--gold);
  background-color: rgb(207 157 83 / 0.12);
}

.choice__input:checked + .choice__box::after {
  border-color: var(--gold);
  background-color: var(--gold);
  box-shadow: inset 0 0 0 3px var(--black);
}

.choice__input:focus-visible + .choice__box,
.pill input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.choice__title {
  font-weight: 500;
}

.choice__meta {
  color: var(--grey-on-dark);
  font-size: 0.9375rem;
}

/* Pills for options and extras */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pill {
  position: relative;
  cursor: pointer;
}

.pill span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  font-size: 0.9375rem;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pill span::before {
  content: "";
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.pill input[type="checkbox"] + span::before {
  border-radius: var(--radius-mark);
}

.pill:hover span {
  border-color: var(--gold);
}

.pill input:checked + span {
  border-color: var(--gold);
  background-color: var(--gold);
  color: var(--black);
}

.pill input:checked + span::before {
  background-color: currentColor;
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* Receipt: the order "prints" as options change */
.planner__summary {
  display: grid;
  gap: var(--space-m);
}

.receipt {
  --zigzag: 0.9rem;
  padding: var(--space-l) var(--space-l) calc(var(--space-l) + var(--zigzag));
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  background-color: var(--white);
  color: var(--black);
  font-size: 0.9375rem;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zigzag) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zigzag) 100%;
}

.receipt__head {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding-bottom: var(--space-s);
  border-bottom: 1px dashed rgb(0 0 0 / 0.35);
  text-align: center;
}

.receipt__mark {
  width: 3.5rem;
  height: auto;
  fill: var(--black);
}

.receipt__title {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.receipt__date {
  color: var(--grey-on-light);
  font-size: 0.8125rem;
}

.receipt__lines,
.receipt__details {
  display: grid;
  gap: 0.45rem;
  padding-block: var(--space-s);
  border-bottom: 1px dashed rgb(0 0 0 / 0.35);
}

.receipt__line,
.receipt__details > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
}

.receipt__line dd {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.receipt__details {
  font-size: 0.875rem;
}

.receipt__details dt {
  color: var(--grey-on-light);
}

.receipt__details dd {
  text-align: right;
}

.receipt__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-s);
  font-weight: 500;
}

.receipt__amount {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.receipt__saving {
  margin-top: 0.4rem;
  color: var(--gold-deep);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: right;
}

/* The chosen meals, day by day (.receipt raises it above the ul[role="list"] reset) */
.receipt .receipt__meals {
  display: grid;
  gap: 0.45rem;
  padding-block: var(--space-s);
  border-bottom: 1px dashed rgb(0 0 0 / 0.35);
  font-size: 0.875rem;
  line-height: 1.45;
}

.receipt__meal {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-xs);
}

.receipt__meal-day,
.receipt__meal-extra,
.receipt__empty {
  color: var(--grey-on-light);
}

.receipt__meal-qty {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.receipt__meal-extra {
  grid-column: 2 / -1;
}

.receipt .is-new {
  animation: print-in 0.35s var(--ease-out);
}

.planner__actions {
  display: grid;
  gap: var(--space-xs);
}

.planner__actions .planner__help {
  text-align: center;
}

@media (min-width: 64em) {
  .planner__form {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .planner__summary {
    position: sticky;
    top: calc(var(--header-h) + var(--space-m));
  }
}


/* ---------------------------------------------------------------------
   11. Forms
   --------------------------------------------------------------------- */
.enquiry-form {
  display: grid;
  gap: var(--space-l);
  padding: clamp(1.25rem, 0.9rem + 2vw, 2.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius-block);
  scroll-margin-top: calc(var(--header-h) + var(--space-s));
}

.enquiry-form.is-highlighted {
  animation: highlight 1.6s var(--ease);
}

.form-grid {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 40em) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

.field {
  display: grid;
  align-content: start;
  gap: 0.45rem;
}

.field__label {
  font-size: 0.9375rem;
  font-weight: 500;
}

.field__optional {
  color: var(--muted);
  font-weight: 400;
}

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.45); /* 4.4:1 against black */
  border-radius: var(--radius-control);
  background-color: rgb(255 255 255 / 0.04);
  color: var(--white);
  transition: border-color var(--dur) var(--ease);
}

.field__input:hover {
  border-color: rgb(255 255 255 / 0.75);
}

.field__input:focus-visible {
  border-color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.field__input[aria-invalid="true"] {
  border-color: var(--error);
}

select.field__input {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CF9D53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.9rem center;
  background-repeat: no-repeat;
  background-size: 1.1rem;
  -webkit-appearance: none;
  appearance: none;
}

select.field__input option {
  background-color: var(--black);
  color: var(--white);
}

textarea.field__input {
  min-height: 9rem;
  resize: vertical;
}

.field__error {
  color: var(--error);
  font-size: var(--step--1);
}

.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: 0.25rem;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.check input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--gold);
}

.form-status {
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-control) var(--radius-control) 0; /* keeps the gold stripe straight */
  background-color: rgb(207 157 83 / 0.12);
}

.form-status--error {
  border-left-color: var(--error);
  background-color: rgb(255 138 122 / 0.1);
}

.form-privacy {
  color: var(--muted);
  font-size: var(--step--1);
}

.enquiry-form > .btn {
  justify-self: start;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ---------------------------------------------------------------------
   12. Footer and WhatsApp button
   --------------------------------------------------------------------- */
.footer-cta {
  padding-block: var(--space-2xl);
}

.footer-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-xl);
}

.footer-cta__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.site-footer {
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--rule-on-dark);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
}

.site-footer__brand {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
}

.footer-logo {
  display: block;
  color: var(--gold);
}

.footer-logo__svg {
  width: 10rem;
  height: auto;
  fill: currentColor;
}

.footer-title {
  margin-bottom: var(--space-s);
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: var(--label-weight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-links {
  display: grid;
  gap: 0.35rem;
}

.footer-links a,
.footer-address a {
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.footer-links a:hover,
.footer-address a:hover {
  color: var(--gold);
}

.footer-address {
  display: grid;
  gap: 0.35rem;
  color: var(--grey-on-dark);
}

.footer-address a {
  color: var(--white);
  overflow-wrap: anywhere;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-2xl);
  padding-block: var(--space-m);
  border-top: 1px solid var(--rule-on-dark);
  color: var(--grey-on-dark);
  font-size: var(--step--1);
}

.site-footer__bottom a {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-footer__bottom a:hover {
  color: var(--gold);
}

/* Privacy Policy / Terms and Conditions, in the bottom bar next to the copyright line */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

@media (min-width: 48em) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

/* Designer credit: a dark grey strip, the last thing in the footer */
.site-credit {
  padding-block: var(--space-s);
  background-color: var(--charcoal);
  color: var(--grey-on-dark);
  font-size: var(--step--1);
}

.site-credit a {
  color: var(--white);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.3em;
  transition: color var(--dur) var(--ease);
}

.site-credit a:hover {
  color: var(--gold);
}

/* Floating WhatsApp button */
.wa-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-control);
  background-color: var(--gold);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4), 0 0.5rem 1.5rem rgb(0 0 0 / 0.35);
  color: var(--black);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}

.wa-float:hover {
  background-color: var(--gold-light);
}

.wa-float:focus-visible {
  outline-color: var(--white);
}

.wa-float__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.wa-float__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 40em) {
  .wa-float {
    width: auto;
    padding: 0 1.2rem 0 1rem;
  }

  .wa-float__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

html.nav-open .wa-float {
  display: none;
}


/* ---------------------------------------------------------------------
   13. Gallery page and photo viewer
   --------------------------------------------------------------------- */
.page-hero {
  padding: calc(var(--header-h) + var(--space-2xl)) 0 var(--space-2xl);
  text-align: center;
}

.page-hero__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1;
  letter-spacing: 0.03em;
}

.page-hero .lead {
  color: var(--grey-on-dark);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  color: var(--grey-on-dark);
  font-size: var(--step--1);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--gold);
}

.breadcrumb a {
  text-underline-offset: 0.25em;
}

.breadcrumb a:hover {
  color: var(--gold);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--space-xl);
}

.filter-bar__button {
  min-height: 2.75rem;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.filter-bar__button:hover {
  border-color: var(--gold);
}

.filter-bar__button[aria-pressed="true"] {
  border-color: var(--gold);
  background-color: var(--gold);
  color: var(--black);
}

.gallery-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-l) var(--space-m);
}

.gallery-page__link {
  isolation: isolate; /* keeps the zoomed photo clipped to the rounded corners in Safari */
  display: block;
  overflow: hidden;
  border-radius: var(--radius-block);
  background-color: var(--surface-hint);
}

.gallery-page__link img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.gallery-page__link:hover img {
  transform: scale(1.04);
}

.gallery-page__caption {
  margin-top: 0.6rem;
  color: var(--grey-on-dark);
  font-size: 0.9375rem;
}

/* Photo viewer (created by main.js) */
.lightbox {
  width: min(100% - 2rem, 72rem);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--white);
}

.lightbox::backdrop {
  background-color: rgb(0 0 0 / 0.92);
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

.lightbox__img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
  border-radius: var(--radius-block);
}

.lightbox__caption {
  color: var(--grey-on-dark);
  font-size: 0.9375rem;
  text-align: center;
}

.lightbox__count {
  display: block;
  font-size: var(--step--1);
}

.lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: var(--radius-control);
  background-color: rgb(0 0 0 / 0.55);
  color: var(--white);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.lightbox__btn:hover {
  background-color: var(--white);
  color: var(--black);
}

.lightbox__close {
  top: 1rem;
  right: 1rem;
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__prev {
  left: 1rem;
}


.lightbox__next {
  right: 1rem;
}


/* ---------------------------------------------------------------------
   14. Motion
   One orchestrated moment: the hero lockup assembles and the cloche lid
   lifts to let out a little steam. Everything else moves only in answer
   to the visitor, apart from the events slideshow, which has a pause
   button and stays still for visitors who prefer reduced motion.
   --------------------------------------------------------------------- */
@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@keyframes rule-in {
  from { transform: scaleX(0); }
}

@keyframes track-in {
  from {
    opacity: 0;
    letter-spacing: calc(var(--kna-track) * 2);
  }
}

@keyframes lid-peek {
  0%   { transform: none; }
  30%  { transform: translateY(-9%) rotate(-10deg); }
  55%  { transform: translateY(-11%) rotate(-7deg); }
  82%  { transform: translateY(0) rotate(1deg); }
  100% { transform: none; }
}

@keyframes steam {
  0%   { opacity: 0; transform: translateY(0); }
  35%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-260px); }
}

@keyframes print-in {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }
}

@keyframes highlight {
  0%, 100% { border-color: var(--rule); }
  20%, 60% { border-color: var(--gold); }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .hero__cloche {
    animation: fade-in 0.8s var(--ease) 0.1s both;
  }

  .hero__lid {
    animation: lid-peek 2s var(--ease) 0.7s both;
  }

  .hero__steam path {
    animation: steam 1.7s ease-out 1s both;
  }

  .hero__steam path:nth-child(2) {
    animation-delay: 1.15s;
  }

  .hero__steam path:nth-child(3) {
    animation-delay: 1.3s;
  }

  .hero__brand {
    animation: track-in 1.1s var(--ease-out) 0.3s both;
  }

  .hero__brand::after,
  .hero__name::after {
    animation: rule-in 1s var(--ease) 1.2s both;
  }

  .hero__name {
    animation: fade-up 0.9s var(--ease) 1.2s both;
  }

  .hero__tagline {
    animation: fade-up 1s var(--ease) 1.5s both;
  }

  .hero__actions {
    animation: fade-up 1s var(--ease) 1.8s both;
  }
}

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


/* ---------------------------------------------------------------------
   15. Utilities and print
   --------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-control);
  background-color: var(--gold);
  color: var(--black);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Features that need JavaScript stay hidden without it */
.no-js .js-only {
  display: none !important;
}

@media print {
  .site-header,
  .hero__video,
  .hero__video-toggle,
  .slideshow__toggle,
  .planner,
  .copy-button,
  .wa-float,
  .filter-bar {
    display: none !important;
  }

  body,
  .theme-dark,
  .theme-gold,
  .hero,
  .site-credit {
    background: #fff !important;
    color: #000 !important;
  }

  /* The menu's "Choose one" and "or" are coloured for the dark page: print them black */
  .course__hint,
  .dish__or {
    color: #000 !important;
  }

  .legal__layout {
    display: block;
  }

  .legal__toc {
    position: static;
    max-height: none;
  }
}


/* ---------------------------------------------------------------------
   16. Legal pages (Privacy Policy & Terms and Conditions)
   --------------------------------------------------------------------- */
.legal__layout {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 64em) {
  .legal__layout {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: var(--space-2xl);
  }
}

/* "On this page" jump list */
.legal__toc {
  padding: var(--space-m);
  border: 1px solid var(--rule);
  border-radius: var(--radius-block);
}

@media (min-width: 64em) {
  .legal__toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-l));
    max-height: calc(100vh - var(--header-h) - var(--space-l) * 2);
    overflow-y: auto;
  }
}

.legal__toc-title {
  margin-bottom: var(--space-s);
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: var(--label-weight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.legal__toc-list {
  display: grid;
  gap: 0.6rem;
}

.legal__toc-list a {
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.legal__toc-list a:hover,
.legal__toc-list a:focus-visible {
  color: var(--accent);
}

.legal__content {
  max-width: var(--measure);
}

/* "Last updated" badge in the page-hero */
.legal__updated {
  display: inline-block;
  padding: 0.4em 0.9em;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: var(--step--1);
}

/* Each numbered clause, with a rule between consecutive clauses */
.legal__section + .legal__section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--rule);
}

.legal__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  scroll-margin-top: calc(var(--header-h) + var(--space-s));
  font-family: var(--font-body);
  font-size: var(--step-2);
  font-weight: 500;
}

.legal__heading-num {
  color: var(--accent);
}

/* Bulleted clauses: a small square mark instead of a default browser bullet */
.legal__list {
  display: grid;
  gap: 0.5rem;
}

.legal__list li {
  position: relative;
  padding-left: 1.3em;
}

.legal__list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.4em;
  height: 0.4em;
  border-radius: var(--radius-mark);
  background-color: var(--accent);
}

/* Contact details inside the Contact Us / Complaints clauses */
.legal__contact {
  display: grid;
  gap: 0.35rem;
}

.legal__contact-name {
  font-weight: 500;
}


/* ---------------------------------------------------------------------
   17. Payment page (after a meal order)
   --------------------------------------------------------------------- */
.payment__actions {
  justify-content: center;
  margin-top: var(--space-s);
}

.payment__layout {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.payment__main {
  display: grid;
  gap: var(--space-l);
}

.pay-card {
  display: grid;
  gap: var(--space-s);
  padding: clamp(1.25rem, 0.9rem + 2vw, 2.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius-block);
}

.pay-card__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: 0.02em;
}

.pay-card__note {
  color: var(--grey-on-dark);
}

.pay-card .actions {
  margin-top: var(--space-2xs);
}

.bank-details {
  border-top: 1px solid var(--rule);
}

.bank-details__row {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.bank-details__row dt {
  color: var(--grey-on-dark);
  font-size: var(--step--1);
}

.bank-details__row dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
}

.bank-details__value {
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* The reference and the amount: the two things to get exactly right */
.bank-details__row--key .bank-details__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gold);
}

@media (min-width: 36em) {
  .bank-details__row {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-m);
  }
}

.copy-button {
  min-height: 2.25rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  color: var(--gold);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.copy-button:hover {
  border-color: var(--gold);
}

.copy-button.is-copied {
  border-color: var(--gold);
  background-color: var(--gold);
  color: var(--black);
}

@media (min-width: 64em) {
  .payment__layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .payment__summary {
    position: sticky;
    top: calc(var(--header-h) + var(--space-m));
  }
}