/* ==========================================================================
   Nexlo Bistro — main stylesheet
   Bootstrap 5.3 is loaded first; everything here layers on top of it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --forest: #0f3a2a;          /* dark green sections + footer */
  --forest-deep: #0a2b1f;
  --brand: #2f6b34;           /* buttons, eyebrows, icons */
  --brand-dark: #245227;
  --cream: #f6f3ea;           /* page background */
  --sand: #eceadf;            /* alternate band */
  --paper: #ffffff;
  --ink: #1d2a22;             /* headings */
  --body: #5c6b60;            /* body copy */
  --muted: #8b978d;
  --line: rgba(29, 42, 34, .12);

  --ff-script: "Pinyon Script", cursive;
  --ff-display: "Anton", "Oswald", sans-serif;
  --ff-head: "Playfair Display", Georgia, serif;
  --ff-title: "Fraunces", "Playfair Display", Georgia, serif;
  --ff-body: "Jost", "Poppins", system-ui, sans-serif;

  --shell: 1200px;
  --pad-y: 110px;
  --radius: 18px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.85;
  color: var(--body);
  background: var(--cream);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-head);
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

a { text-decoration: none; color: inherit; transition: color .25s ease; }

img { max-width: 100%; height: auto; display: block; }

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

.container { max-width: var(--shell); }

.section { padding: var(--pad-y) 0; position: relative; overflow: hidden; }
.section--tight { padding: 80px 0; }

/* Shared type helpers -------------------------------------------------- */
.eyebrow {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
  display: block;
}

.section-title {
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.section-title--sm { font-size: clamp(26px, 2.6vw, 34px); }

.lead-sm {
  font-size: 15px;
  color: var(--body);
  max-width: 46ch;
}

.text-script {
  font-family: var(--ff-script);
  color: var(--ink);
}

/* Buttons --------------------------------------------------------------- */
.btn-leaf {
  --bs-btn-focus-shadow-rgb: 47, 107, 52;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 14px 30px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  transition: background .28s ease, color .28s ease, border-color .28s ease;
}
.btn-leaf:hover,
.btn-leaf:focus-visible { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn-leaf--ghost {
  background: transparent;
  color: var(--brand);
}
.btn-leaf--ghost:hover { background: var(--brand); color: #fff; }

.btn-leaf--light {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.btn-leaf--light:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

/* Decorative shapes -------------------------------------------------------
   Plate rings + organic blobs stand in for literal leaf art: a ring reads
   as a plate/table setting, a blob as a soft garden-bed accent. Both are
   pure CSS so they stay crisp and recolour with the brand tokens.        */
.shape {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.shape--blob {
  border-radius: 42% 58% 69% 31% / 45% 41% 59% 55%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--forest) 100%);
}
.shape--ring {
  border-radius: 50%;
  border: 1.5px solid var(--brand);
}
.shape--ring-thick {
  border-radius: 50%;
  border: 28px solid var(--sand);
}
/* On dark grounds (footer) swap the brand fill for a pale one so the shape
   still reads against the deep green background. */
.shape--light.shape--blob { background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .25)); }
.shape--light.shape--ring { border-color: rgba(255, 255, 255, .55); }

.section > .container { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  padding: 22px 0;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.is-stuck {
  background: rgba(10, 43, 31, .95);
  padding: 12px 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

/* Absolutely centred so it stays dead-centre regardless of what the two
   flex siblings (menu button, book-a-table CTA) weigh on either side —
   including when the CTA is hidden on small screens below. */
.site-header .brand-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.menu-toggle i { font-size: 14px; }

.brand-mark {
  font-family: var(--ff-script);
  font-size: 40px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.brand-mark small {
  display: block;
  font-family: var(--ff-body);
  font-size: 8px;
  letter-spacing: .5em;
  text-transform: uppercase;
  margin-top: 2px;
  opacity: .85;
}

/* Off-canvas navigation -------------------------------------------------- */
.offcanvas.nav-panel {
  background: var(--forest);
  color: #fff;
  width: min(420px, 88vw);
}
.nav-panel .offcanvas-body { padding: 40px; }
.nav-panel .nav-group + .nav-group { margin-top: 38px; }
.nav-panel .nav-group h6 {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 16px;
}
.nav-panel a { color: #fff; }
.nav-panel .nav-link-lg {
  display: block;
  font-family: var(--ff-head);
  font-size: 22px;
  padding: 7px 0;
  color: #fff;
}
.nav-panel .nav-link-lg:hover { color: #a9d3a4; }
.nav-panel .contact-line {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 8px;
}
.nav-panel .social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.nav-panel .social a:hover { background: #fff; color: var(--forest); }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 170px 0 120px;
  background: var(--forest-deep) center/cover no-repeat;
  background-image: url("../images/hero-garden.jpg");
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 26, 18, .72), rgba(6, 26, 18, .55) 45%, rgba(6, 26, 18, .8));
}
.hero .container { position: relative; z-index: 3; }

.hero-script {
  font-family: var(--ff-script);
  font-size: clamp(58px, 8vw, 104px);
  line-height: .8;
  color: rgba(255, 255, 255, .35);
  margin-bottom: -18px;
}

.hero-title {
  font-family: var(--ff-display);
  font-size: clamp(38px, 7.2vw, 92px);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .45);
  margin-bottom: 26px;
}
.hero-title em {
  font-family: var(--ff-head);
  font-style: italic;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0;
}

.hero-copy {
  max-width: 620px;
  margin: 0 auto 26px;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .88);
}

.hero-sign {
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}

/* --------------------------------------------------------------------------
   5. About
   -------------------------------------------------------------------------- */
.about { background: var(--paper); }

.about-stack {
  position: relative;
  padding-bottom: 60px;
}
.about-stack__main {
  border-radius: 14px;
  --rot: -3deg;
  transform: rotate(var(--rot));
  box-shadow: 0 26px 50px rgba(19, 40, 28, .2);
  width: 78%;
}
.about-stack__inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  border: 6px solid #fff;
  border-radius: 12px;
  --rot: 2deg;
  transform: rotate(var(--rot));
  box-shadow: 0 20px 40px rgba(19, 40, 28, .22);
}

.about-body { padding-left: 30px; }
.about-body h2 { margin-bottom: 18px; }
.about-body h4 {
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
}
.about-body p { font-size: 14.5px; max-width: 60ch; }

/* --------------------------------------------------------------------------
   6. Menu
   -------------------------------------------------------------------------- */
.menu { background: var(--cream); }

.menu-head { text-align: center; max-width: 620px; margin: 0 auto 50px; }
.menu-head .text-script { font-size: 32px; display: block; margin-bottom: 4px; }
.menu-head .section-title { margin-bottom: 16px; }
.menu-head p { font-size: 14.5px; margin: 0 auto 28px; max-width: 50ch; }

.menu-gallery { min-height: 560px; }

.menu-hero {
  position: relative;
  height: 100%;
  min-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(19, 40, 28, .22);
}
.menu-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.menu-hero:hover img { transform: scale(1.06); }
.menu-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 24, 17, 0) 55%, rgba(10, 24, 17, .55));
}
.menu-hero__badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  background: rgba(255, 255, 255, .92);
  color: var(--brand-dark);
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
}

.menu-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  height: 100%;
}

.menu-tile {
  position: relative;
  display: block;
  min-height: 150px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(19, 40, 28, .16);
}
.menu-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.menu-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 24, 17, 0) 40%, rgba(10, 24, 17, .82));
  opacity: .75;
  transition: opacity .4s ease;
}
.menu-tile:hover img,
.menu-tile:focus-visible img { transform: scale(1.1); }
.menu-tile:hover::before,
.menu-tile:focus-visible::before { opacity: 1; }

.menu-tile__info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px;
  color: #fff;
}
.menu-tile__name {
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}
.menu-tile__desc {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  margin: 6px 0 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .35s ease;
}
.menu-tile:hover .menu-tile__desc,
.menu-tile:focus-visible .menu-tile__desc {
  max-height: 60px;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   7. Accommodation — fancy tagline
   -------------------------------------------------------------------------- */
.tagline {
  background: var(--paper);
  text-align: center;
  padding: 140px 0;
}

.tagline-content { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
.tagline-content .eyebrow { text-align: center; }

.tagline-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 30px;
}
.tagline-divider::before,
.tagline-divider::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--line);
}
.tagline-divider__mark {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--brand);
  transform: rotate(45deg);
}

.tagline-text {
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.28;
  color: var(--ink);
  margin: 0 0 36px;
}
.tagline-text em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(100deg, var(--brand) 0%, var(--forest) 25%, var(--brand) 50%, var(--forest) 75%, var(--brand) 100%);
  background-size: 220% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s linear infinite;
}

@keyframes shimmer {
  to { background-position: -220% center; }
}

/* Small solid accent dot, used alongside the blob/ring shapes */
.shape--dot { border-radius: 50%; background: var(--brand); }

/* Gentle continuous drift — purely decorative, paused for reduced motion via
   the global prefers-reduced-motion rule further down. */
.shape--float { animation-name: shapeFloat; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes shapeFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(14px, -18px) rotate(8deg); }
}

/* --------------------------------------------------------------------------
   8. Facilities
   -------------------------------------------------------------------------- */
.facility {
  background: var(--sand);
  background-image: url("../images/texture-paper.png");
  background-size: cover;
  text-align: center;
}
.facility .section-title { margin-bottom: 8px; }
.facility__sub { font-size: 14px; color: var(--muted); margin-bottom: 46px; }

.facility-item { text-align: center; padding: 0 6px; }
.facility-item i {
  display: block;
  font-size: 32px;
  color: var(--forest);
  margin: 0 auto 14px;
}
.facility-item h5 {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}

.facility-shot {
  margin-top: 54px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 26px 55px rgba(19, 40, 28, .2);
}
.facility-shot img { width: 100%; }

/* --------------------------------------------------------------------------
   9. Festival / collage
   -------------------------------------------------------------------------- */
.festival { background: var(--sand); }
.festival h2 {
  font-family: var(--ff-head);
  font-size: clamp(30px, 4vw, 60px);
  line-height: 1.35;
  color: var(--forest);
  font-weight: 900;
}

.festival-intro p { font-size: 15px; margin: 22px 0 0; max-width: 42ch; }
.festival-intro .eyebrow { margin-bottom: 18px; }

/* Shuffling photo deck ---------------------------------------------------
   A stack of prints: the top one is fully in view, two more peek out behind
   it, and every few seconds the top card flicks off to the left while the
   next rises into its place. Depth is driven entirely by data-depth, which
   the script rewrites on each advance, so the whole animation is one CSS
   transition per card rather than a keyframe timeline.

   The base rules below are the no-JS layout: a plain grid, so every photo is
   still reachable if the script never runs. Everything under .js turns that
   same markup into the stack. */
.photo-shuffle { position: relative; }

.photo-shuffle__deck {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.shuffle-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 9px solid #fff;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(19, 40, 28, .24);
}
.shuffle-card img { width: 100%; height: 100%; object-fit: cover; }

.shuffle-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 46px 18px 15px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(180deg, rgba(10, 24, 17, 0), rgba(10, 24, 17, .82));
  transition: opacity .45s ease;
  pointer-events: none;
}

/* --- The stack ------------------------------------------------------- */
.js .photo-shuffle__deck {
  display: block;
  aspect-ratio: 4 / 3;
}
.js .shuffle-card {
  position: absolute;
  top: 0;
  left: 0;
  /* The gap on the right and below is where the two peeking cards sit. */
  right: 7%;
  bottom: 8%;
  aspect-ratio: auto;
  transform-origin: 50% 60%;
  transition: transform .75s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
  will-change: transform, opacity;
}
.js .shuffle-card__caption { opacity: 0; }
.js .shuffle-card[data-depth="0"] .shuffle-card__caption { opacity: 1; }

.js .shuffle-card[data-depth="0"] {
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  opacity: 1;
  z-index: 5;
}
.js .shuffle-card[data-depth="1"] {
  transform: translate3d(3.6%, 4.2%, 0) rotate(3.5deg) scale(.955);
  opacity: 1;
  z-index: 4;
  pointer-events: none;
}
.js .shuffle-card[data-depth="2"] {
  transform: translate3d(6.8%, 7.8%, 0) rotate(6.5deg) scale(.915);
  opacity: 1;
  z-index: 3;
  pointer-events: none;
}
/* Everything deeper waits behind card 2, invisible, so the browser never
   paints nine layers at once. */
.js .shuffle-card[data-depth="back"] {
  transform: translate3d(6.8%, 7.8%, 0) rotate(6.5deg) scale(.915);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
/* The card that just left flicks away to the left and fades out; it then
   travels back to the bottom of the stack while still invisible. */
.js .shuffle-card[data-depth="out"] {
  transform: translate3d(-46%, -7%, 0) rotate(-13deg) scale(.9);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
}

/* Controls ------------------------------------------------------------- */
.photo-shuffle__ui {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.shuffle-btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.shuffle-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.shuffle-dots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shuffle-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(29, 42, 34, .22);
  transition: background .3s ease, width .3s ease;
}
.shuffle-dot:hover { background: rgba(29, 42, 34, .45); }
.shuffle-dot.is-active { width: 26px; background: var(--brand); }

/* --------------------------------------------------------------------------
   10. Reviews
   -------------------------------------------------------------------------- */
.reviews { background: var(--paper); text-align: center; }

.review-card { max-width: 720px; margin: 0 auto; }
.review-card .quote-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 30px auto 24px;
}
.review-card blockquote {
  font-family: var(--ff-body);
  font-size: 15px;
  font-style: italic;
  line-height: 1.9;
  color: var(--body);
  margin-bottom: 26px;
}
.review-card .review-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.review-card .stars { color: #e0a11a; font-size: 13px; margin-top: 6px; letter-spacing: 2px; }

.carousel-indicators.dots {
  position: static;
  margin: 34px 0 0;
}
.carousel-indicators.dots [data-bs-target] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c8cfc7;
  border: 0;
  opacity: 1;
  margin: 0 5px;
}
.carousel-indicators.dots .active { background: var(--brand); }

.badges {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 52px;
}
.badge-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 22px;
  box-shadow: 0 12px 26px rgba(19, 40, 28, .08);
}
.badge-chip img { width: 34px; }
.badge-chip span { font-size: 12px; font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   11. Food & drinks
   -------------------------------------------------------------------------- */
.food {
  background: var(--forest);
  color: rgba(255, 255, 255, .82);
  text-align: center;
}
.food .section-title { color: #fff; margin-bottom: 16px; }
.food p { max-width: 520px; margin: 0 auto 48px; font-size: 14px; }

.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  transition: transform .5s ease;
}
.photo-grid a { display: block; overflow: hidden; border-radius: 8px; }
.photo-grid a:hover img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   12. Events — asymmetrical magazine spread
   -------------------------------------------------------------------------- */
.events { background: var(--cream); }
.events-head { text-align: center; margin-bottom: 54px; }
.events-head .eyebrow { text-align: center; }

.events-spread {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  align-items: start;
}

/* Big lead story: portrait photo, oversized number, caption on the image */
.event-feature {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(19, 40, 28, .2);
}
.event-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.event-feature:hover img { transform: scale(1.06); }
.event-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 24, 17, 0) 42%, rgba(10, 24, 17, .82));
}
.event-feature__num {
  position: absolute;
  top: -10px;
  left: 20px;
  z-index: 2;
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(70px, 9vw, 120px);
  line-height: 1;
  color: rgba(255, 255, 255, .3);
}
.event-feature__caption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 2;
  color: #fff;
}
.event-feature__tag {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 8px;
}
.event-feature__caption h3 {
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px);
  color: #fff;
}

/* Two smaller stories stacked beside it, one staggered inward for the
   asymmetrical, off-grid rhythm of a magazine spread. */
.events-side { display: flex; flex-direction: column; gap: 34px; height: 100%; justify-content: space-between; }

.event-side { display: flex; align-items: flex-end; gap: 18px; }
.event-side--reverse { flex-direction: row-reverse; margin-left: 12%; }

.event-side__media {
  position: relative;
  flex: 0 0 42%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(19, 40, 28, .16);
}
.event-side__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.event-side:hover .event-side__media img { transform: scale(1.08); }
.event-side__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(10, 24, 17, 0), rgba(10, 24, 17, .75));
}
.event-side__num {
  position: absolute;
  right: 10px;
  bottom: 4px;
  z-index: 2;
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: #fff;
}

.event-side__text { flex: 1 1 auto; padding-bottom: 4px; }
.event-side__tag {
  display: block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px;
}
.event-side__text h3 {
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  transition: color .25s ease;
}
.event-side:hover .event-side__text h3 { color: var(--brand); }

/* --------------------------------------------------------------------------
   13. Blogs
   -------------------------------------------------------------------------- */
.blogs { background: var(--paper); }

.blog-card img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 18px;
}
.blog-card h3 {
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 14px;
  min-height: 48px;
}
.blog-card .more {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
}
.blog-card .more:hover { color: var(--brand-dark); }

/* --------------------------------------------------------------------------
   14. Booking
   -------------------------------------------------------------------------- */
.booking { background: var(--cream); }

.booking-panel {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(19, 40, 28, .12);
  padding: 62px 58px;
}

.booking-panel h2 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 10px; }
.booking-panel .sub { font-size: 14px; margin-bottom: 34px; }

.hours-title {
  font-family: var(--ff-head);
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 18px;
}
.hours-title a { color: var(--brand); font-style: italic; }

.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li {
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list strong {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  margin-right: 6px;
}

.booking-form .form-control,
.booking-form .form-select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
}
.booking-form .form-control:focus,
.booking-form .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47, 107, 52, .12);
}
.booking-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--forest);
  color: rgba(255, 255, 255, .72);
  padding: 90px 0 30px;
  position: relative;
  overflow: hidden;
}
.site-footer .brand-mark { font-size: 52px; }

.footer-col h6 {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { font-size: 14px; margin-bottom: 11px; }
.footer-col a:hover { color: #a9d3a4; }

.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.footer-social a:hover { background: #fff; color: var(--forest); }

.footer-bottom {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12px;
  letter-spacing: .06em;
  text-align: center;
}

/* --------------------------------------------------------------------------
   16. Scroll reveal
   Elements animate in as they cross the viewport. Scoped under .js so the
   page still shows everything if JavaScript never runs.
   -------------------------------------------------------------------------- */
.js .reveal,
.js .reveal-left,
.js .reveal-right,
.js .reveal-scale,
.js .reveal-pop {
  opacity: 0;
  will-change: transform, opacity;
}
/* --rot lets elements that already carry a static rotate() (the about-stack
   photos) keep their tilt through the animation instead of the
   reveal transform wiping it out; it's 0deg for everything else. */
.js .reveal            { transform: translateY(38px) rotate(var(--rot, 0deg)); transition: opacity .7s ease, transform .7s cubic-bezier(.16,.8,.24,1); }
.js .reveal-left       { transform: translateX(-52px) rotate(var(--rot, 0deg)); transition: opacity .8s ease, transform .8s cubic-bezier(.16,.8,.24,1); }
.js .reveal-right      { transform: translateX(52px) rotate(var(--rot, 0deg));  transition: opacity .8s ease, transform .8s cubic-bezier(.16,.8,.24,1); }
.js .reveal-scale      { transform: scale(.88) rotate(var(--rot, 0deg)); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.js .reveal-pop        { transform: translateY(24px) scale(.7) rotate(var(--rot, 0deg)); transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }

.js .reveal.in-view,
.js .reveal-left.in-view,
.js .reveal-right.in-view,
.js .reveal-scale.in-view,
.js .reveal-pop.in-view {
  opacity: 1;
  transform: rotate(var(--rot, 0deg));
}

.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
.reveal-d5 { transition-delay: .4s; }
.reveal-d6 { transition-delay: .48s; }
.reveal-d7 { transition-delay: .56s; }
.reveal-d8 { transition-delay: .64s; }
.reveal-d9 { transition-delay: .72s; }

/* Hero plays once on load, no scroll trigger needed — it's above the fold. */
.js .hero-script,
.js .hero-title,
.js .hero-copy,
.js .hero-sign {
  opacity: 0;
  animation: heroRise .9s cubic-bezier(.16,.8,.24,1) forwards;
}
.js .hero-script { animation-delay: .1s; }
.js .hero-title  { animation-delay: .22s; }
.js .hero-copy   { animation-delay: .4s; }
.js .hero-sign   { animation-delay: .55s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   17. Secondary pages (about / menu / accommodation / events / booking / contact / gallery)
   -------------------------------------------------------------------------- */

/* Page banner — a shorter, page-titled cousin of the homepage .hero */
.page-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 150px 0 70px;
  background: var(--forest-deep) center/cover no-repeat;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 26, 18, .72), rgba(6, 26, 18, .55) 45%, rgba(6, 26, 18, .82));
}
.page-hero .container { position: relative; z-index: 3; }
.page-hero__crumb {
  display: block;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 18px;
}
.page-hero__crumb a { color: rgba(255, 255, 255, .9); }
.page-hero__crumb a:hover { color: #fff; }
.page-hero h1 {
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(38px, 6vw, 72px);
  color: #fff;
}
.page-hero p {
  color: rgba(255, 255, 255, .85);
  max-width: 56ch;
  margin: 18px auto 0;
  font-size: 15px;
}

/* Fine-dining style category list, used on menu.html below the picks grid */
.menu-category { margin-bottom: 54px; }
.menu-category:last-child { margin-bottom: 0; }
.menu-category__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.menu-category__head i { font-size: 22px; color: var(--brand); }
.menu-category__title {
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--ink);
}

.menu-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.menu-row:last-child { border-bottom: 0; }
.menu-row__head { display: flex; align-items: baseline; gap: 8px; }
.menu-row__name {
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  white-space: nowrap;
}
.menu-row__dots { flex: 1 1 auto; min-width: 24px; border-bottom: 1px dotted var(--line); margin-bottom: 5px; }
.menu-row__price {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--brand);
  white-space: nowrap;
}
.menu-row__desc { font-size: 13.5px; color: var(--body); margin: 6px 0 0; max-width: 64ch; }

/* Room cards, used on accommodation.html */
.room-card {
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 20px 45px rgba(19, 40, 28, .14);
}
.room-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.room-card:hover img { transform: scale(1.06); }
.room-card__body { padding: 26px 24px; }
.room-card__body h3 {
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 8px;
}
.room-card__body p { font-size: 13.5px; margin-bottom: 18px; }
.room-card__amenities { display: flex; gap: 14px; color: var(--brand); font-size: 17px; margin-bottom: 20px; }

/* Shared centred CTA banner for the bottom of secondary pages */
.page-cta { background: var(--forest); color: rgba(255, 255, 255, .8); text-align: center; }
.page-cta h2 { color: #fff; margin-bottom: 14px; }
.page-cta p { max-width: 46ch; margin: 0 auto 30px; font-size: 14.5px; }

/* Contact info list, used on contact-us.html — a light-background cousin of
   .nav-panel .contact-line */
.contact-list { list-style: none; padding: 0; margin: 0 0 26px; }
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--body);
  margin-bottom: 14px;
}
.contact-list li i { color: var(--brand); font-size: 16px; margin-top: 2px; }
.contact-list li a { color: inherit; }
.contact-list li a:hover { color: var(--brand); }

/* Asymmetrical bento grid, used on gallery.html. grid-auto-flow: dense lets
   the wide/tall variants below sit anywhere in the flow while normal cells
   fill in around them, instead of a uniform repeating grid. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 130px;
  grid-auto-flow: dense;
  gap: 14px;
}
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(19, 40, 28, .14);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 24, 17, 0) 55%, rgba(10, 24, 17, .55));
  opacity: 0;
  transition: opacity .35s ease;
}
.gallery-item__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.7);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item:hover::after,
.gallery-item:hover .gallery-item__icon { opacity: 1; }
.gallery-item:hover .gallery-item__icon { transform: translate(-50%, -50%) scale(1); }

.gallery-item--w2 { grid-column: span 2; }
.gallery-item--h2 { grid-row: span 2; }
.gallery-item--w2h2 { grid-column: span 2; grid-row: span 2; }

/* One outlet on location.html: a full-width card split into a photo half and a
   details half. The halves are grid columns rather than floats so both sides
   always match height, letting the photo cover its cell however tall the
   details run. */
.branch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 26px 55px rgba(19, 40, 28, .14);
  margin-bottom: 54px;
}
.branch:last-child { margin-bottom: 0; }

.branch__media { position: relative; min-height: 460px; }
.branch__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Alternate the photo to the right on every second outlet. Ordering the grid
   items keeps the markup in reading order — photo first, details second. */
.branch--reverse .branch__media { order: 2; }

.branch__tag {
  position: absolute;
  z-index: 2;
  left: 24px;
  top: 24px;
  background: rgba(255, 255, 255, .94);
  color: var(--forest);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.branch__body { padding: 52px 48px; }
.branch__body h3 {
  font-family: var(--ff-head);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--forest);
  margin-bottom: 6px;
}
.branch__addr {
  font-size: 14px;
  color: var(--body);
  margin-bottom: 22px;
}
.branch__seats {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
/* Parking / access footnote — sits below the hours, quieter than body copy. */
.branch__note {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  margin: 22px 0 28px;
}
.branch__note i { color: var(--brand); margin-top: 2px; }

.branch__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   18. Header click-to-call
   Sits beside the booking CTA so the phone number is one tap away from any
   page, without pushing the absolutely-centred logo off balance.
   -------------------------------------------------------------------------- */
.header-actions { display: flex; align-items: center; gap: 12px; }

.header-call {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  white-space: nowrap;
  transition: background .28s ease, color .28s ease, border-color .28s ease;
}
.header-call:hover,
.header-call:focus-visible { background: #fff; border-color: #fff; color: var(--forest); }
.header-call i { font-size: 13px; }

/* Small pill, used on order cards and the sticky mobile bag bar */
.btn-leaf--sm {
  padding: 10px 20px;
  font-size: 11px;
  letter-spacing: .14em;
  gap: 8px;
}

/* Two CTAs side by side (homepage menu block, page CTAs) */
.menu-head .btn-leaf + .btn-leaf,
.page-cta .btn-leaf + .btn-leaf { margin-left: 12px; }

/* --------------------------------------------------------------------------
   19. Footer bottom + Instagram strip
   -------------------------------------------------------------------------- */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  text-align: left;
}
.footer-bottom__credit a { color: #a9d3a4; font-weight: 600; }
.footer-bottom__credit a:hover { color: #fff; }

/* Instagram strip — the last band of the footer, above the link columns. */
.insta-strip {
  position: relative;
  z-index: 2;
  padding: 0 0 70px;
  margin-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.insta-strip__head { text-align: center; margin-bottom: 34px; }
.insta-strip__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #a9d3a4;
  margin-bottom: 12px;
}
.insta-strip__head h3 {
  font-family: var(--ff-title);
  font-size: clamp(24px, 2.6vw, 32px);
  color: #fff;
}
.insta-strip__handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .8);
}
.insta-strip__handle:hover { color: #fff; }

.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.insta-post {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}
.insta-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.insta-post:hover img { transform: scale(1.08); }
.insta-post__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  background: rgba(10, 43, 31, .55);
  opacity: 0;
  transition: opacity .3s ease;
}
.insta-post:hover .insta-post__icon,
.insta-post:focus-visible .insta-post__icon { opacity: 1; }

.insta-strip__cta {
  display: block;
  width: fit-content;
  margin: 30px auto 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  padding-bottom: 4px;
}
.insta-strip__cta:hover { color: #a9d3a4; border-color: #a9d3a4; }

/* --------------------------------------------------------------------------
   20. Online ordering (order-online.html)
   -------------------------------------------------------------------------- */
.order-steps { background: var(--paper); }
.order-step {
  height: 100%;
  padding: 30px 28px;
  background: var(--cream);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.order-step__num {
  font-family: var(--ff-display);
  font-size: 28px;
  color: var(--brand);
  letter-spacing: .04em;
}
.order-step h4 {
  font-family: var(--ff-head);
  font-size: 19px;
  margin: 10px 0 8px;
}
.order-step p { font-size: 14px; margin: 0; }

.order {
  background: var(--cream);
  padding-top: 70px;
  /* .section clips its overflow, which would turn both sticky children
     (the category tabs and the bag panel) into ordinary boxes. */
  overflow: visible;
}

.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 40px;
  align-items: start;
}

/* Category tabs — sticky under the fixed header while you scroll the menu */
.order-tabs {
  position: sticky;
  top: 76px;
  z-index: 20;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0;
  margin-bottom: 10px;
  background: var(--cream);
  scrollbar-width: thin;
}
.order-tab {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.order-tab:hover { border-color: var(--brand); color: var(--brand); }
.order-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.order-cat { scroll-margin-top: 150px; margin-bottom: 46px; }
.order-cat:last-child { margin-bottom: 0; }
.order-cat__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.order-cat__head i { color: var(--brand); font-size: 22px; margin-top: 4px; }
.order-cat__head h3 { font-family: var(--ff-head); font-size: 24px; }
.order-cat__head p { font-size: 14px; margin: 4px 0 0; }

.order-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.order-card {
  display: flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.order-card:hover {
  box-shadow: 0 18px 40px rgba(15, 58, 42, .1);
  transform: translateY(-3px);
}
.order-card__media { flex: 0 0 110px; }
.order-card__media img { width: 110px; height: 100%; object-fit: cover; }
.order-card__body {
  flex: 1 1 auto;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.order-card__name { font-family: var(--ff-head); font-size: 16px; line-height: 1.35; }
.order-card__price {
  flex: 0 0 auto;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}
.order-card__desc { font-size: 13px; line-height: 1.65; margin: 0; }
.order-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.order-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}

.food-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--body);
}
.food-tag--veg { background: rgba(47, 107, 52, .12); color: var(--brand); }
.food-tag--spicy { background: rgba(190, 66, 41, .12); color: #a33f26; }
.food-tag--pickup { background: rgba(29, 42, 34, .1); color: var(--ink); }

/* Quantity stepper ---------------------------------------------------- */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.qty__btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.qty__btn:hover { background: var(--brand); color: #fff; }
.qty__val {
  min-width: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.qty--sm .qty__btn { width: 26px; height: 26px; font-size: 12px; }
.qty--sm .qty__val { min-width: 20px; font-size: 12px; }

.btn-leaf.is-added { background: var(--forest); border-color: var(--forest); }

/* Bag panel ------------------------------------------------------------ */
.order-aside { position: sticky; top: 110px; }

.cart-card {
  scroll-margin-top: 110px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: 0 20px 50px rgba(15, 58, 42, .07);
}
.cart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.cart-card__head h3 { font-family: var(--ff-head); font-size: 20px; display: flex; align-items: center; gap: 9px; }
.cart-card__head i { color: var(--brand); font-size: 17px; }
.cart-count { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }

.cart-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin: 18px 0;
  background: var(--cream);
  border-radius: 999px;
}
.cart-mode__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}
.cart-mode__btn.is-active { background: var(--brand); color: #fff; }

.cart-empty { font-size: 13px; color: var(--muted); margin: 0 0 6px; }

.cart-list { list-style: none; padding: 0; margin: 0 0 6px; max-height: 320px; overflow-y: auto; }
.cart-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.cart-line__info { min-width: 0; }
.cart-line__name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.cart-line__unit { font-size: 11px; color: var(--muted); }
.cart-line__right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cart-line__total { font-size: 12px; font-weight: 600; color: var(--ink); min-width: 58px; text-align: right; }
.cart-line__remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  padding: 4px;
  line-height: 1;
}
.cart-line__remove:hover { color: #a33f26; }

.cart-note {
  font-size: 12px;
  line-height: 1.6;
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sand);
  color: var(--body);
}
.cart-note--good { background: rgba(47, 107, 52, .1); color: var(--brand); }

.cart-totals { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.cart-totals__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 5px 0;
}
.cart-totals dt { font-weight: 400; color: var(--body); }
.cart-totals dd { margin: 0; font-weight: 600; color: var(--ink); }
.cart-totals__row--grand {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
.cart-totals__row--grand dt { font-family: var(--ff-head); color: var(--ink); }
.cart-totals__row--grand dd { color: var(--brand); }

.cart-checkout { width: 100%; justify-content: center; margin-top: 20px; }
.cart-checkout.is-disabled { opacity: .45; pointer-events: none; }

.cart-help { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 14px 0 0; text-align: center; }
.cart-help a { color: var(--brand); font-weight: 600; }
.cart-help a:hover { color: var(--brand-dark); }

/* Sticky bag bar — only surfaces on phones, where the panel is off-screen */
.cart-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1040;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 999px;
  background: var(--forest);
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.cart-bar__info { font-size: 13px; }
.cart-bar__info strong { font-weight: 600; }
.cart-bar .btn-leaf { background: #fff; border-color: #fff; color: var(--forest); }
.cart-bar .btn-leaf:hover { background: var(--cream); border-color: var(--cream); color: var(--forest); }

/* Checkout ------------------------------------------------------------- */
.checkout { background: var(--paper); scroll-margin-top: 90px; }
.checkout-panel {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 46px 44px;
}
.checkout-panel__sub { font-size: 15px; margin-bottom: 28px; max-width: 60ch; }

.checkout-form .form-control,
.checkout-form .form-select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
}
.checkout-form .form-control:focus,
.checkout-form .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47, 107, 52, .12);
}
.checkout-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.checkout-form .form-check-label { font-size: 13px; font-weight: 400; color: var(--body); line-height: 1.6; }
.checkout-form .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.checkout-error {
  font-size: 13px;
  color: #a33f26;
  background: rgba(190, 66, 41, .1);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 16px;
}

.order-success { text-align: center; padding: 10px 0; }
.order-success__icon { font-size: 46px; color: var(--brand); line-height: 1; }
.order-success h3 { font-family: var(--ff-title); font-size: 30px; margin: 12px 0 6px; }
.order-success__ref { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.order-success__ref strong { color: var(--ink); }
.order-success__summary {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 22px 0;
  max-height: 320px;
  overflow: auto;
}
.order-success__summary pre {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 13px;
  line-height: 1.75;
  color: var(--body);
  white-space: pre-wrap;
}
.order-success__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}
.order-success__again {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 22px;
  text-decoration: underline;
}
.order-success__again:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   21. Blog detail (blog-detail.html)
   -------------------------------------------------------------------------- */

/* Thin reading-progress rail. Sits just above the fixed header (z 1030) so it
   stays visible once the header goes solid. */
.read-bar {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  background: var(--brand);
  z-index: 1040;
  transition: width .1s linear;
}

/* Post banner — the .page-hero shape, left-aligned and with room for the
   category chip and the byline row. */
.page-hero--post { text-align: left; min-height: 60vh; }
.page-hero--post .container { max-width: 900px; }
.page-hero--post p { margin-left: 0; }

.post-cat {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 18px;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: 26px;
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
}
.post-meta span { display: inline-flex; align-items: center; gap: 8px; }
.post-meta i { color: #fff; opacity: .7; font-size: 14px; }

/* Article ------------------------------------------------------------- */
.post { background: var(--paper); }
.post-body { max-width: 68ch; }
.post-body > *:last-child { margin-bottom: 0; }

.post-body .post-lead {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 30px;
}
.post-body p { font-size: 15.5px; margin-bottom: 22px; }
.post-body h2 {
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  margin: 46px 0 18px;
}
.post-body h3 {
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 21px;
  margin: 34px 0 12px;
}
/* Only prose links get the underline — the tag pills, share buttons and
   prev/next links below live inside .post-body too. */
.post-body p > a,
.post-body .post-list a {
  color: var(--brand);
  border-bottom: 1px solid rgba(47, 107, 52, .35);
}
.post-body p > a:hover,
.post-body .post-list a:hover { color: var(--brand-dark); border-bottom-color: var(--brand-dark); }

/* Tick list. The marker is a plain Unicode check rather than a Bootstrap
   Icons glyph so it renders even if the icon webfont hasn't loaded. */
.post-list { list-style: none; padding: 0; margin: 0 0 24px; }
.post-list li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  margin-bottom: 12px;
}
.post-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--brand);
  font-size: 15px;
  font-weight: 700;
}

.post-figure { margin: 34px 0; }
.post-figure img { width: 100%; border-radius: var(--radius); }
.post-figure figcaption {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}

.post-quote {
  margin: 38px 0;
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--brand);
  font-family: var(--ff-head);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
}
.post-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--ff-body);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Pull-out box for the practical details people scan for. */
.post-callout {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 30px 32px;
  margin: 38px 0;
}
.post-callout h3 { margin-top: 0; margin-bottom: 14px; font-size: 19px; }
.post-callout .post-list { margin-bottom: 0; }

.post-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 46px; }
.post-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--body);
  background: var(--sand);
  border-radius: 999px;
  padding: 8px 16px;
}
.post-tag:hover { background: var(--brand); color: #fff; }

.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.post-share__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.post-share__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 15px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.post-share__btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.post-share__copied { font-size: 12px; color: var(--brand); font-weight: 600; }

/* Author card + prev/next --------------------------------------------- */
.post-author {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin-top: 40px;
}
.post-author__avatar {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
}
/* Scoped so it outranks .post-body p, which it sits inside. */
.post-author .post-author__name {
  font-family: var(--ff-title);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 4px;
}
.post-author p { font-size: 13.5px; margin: 0; }

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.post-nav a {
  max-width: 46%;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
}
.post-nav a:hover { color: var(--brand); }
.post-nav a:last-child { text-align: right; }
.post-nav small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Sidebar -------------------------------------------------------------- */
.post-aside { position: sticky; top: 110px; }

.aside-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 28px 26px;
  margin-bottom: 26px;
}
.aside-card:last-child { margin-bottom: 0; }
.aside-card__title {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 20px;
}
.aside-card--dark { background: var(--forest); color: rgba(255, 255, 255, .8); }
.aside-card--dark .aside-card__title { color: rgba(255, 255, 255, .6); }
.aside-card--dark h3 { color: #fff; font-family: var(--ff-title); font-size: 22px; margin-bottom: 10px; }
.aside-card--dark p { font-size: 13.5px; margin-bottom: 22px; }

/* Recent-post row: small square thumb, title, date. */
.post-mini { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.post-mini:last-child { margin-bottom: 0; }
.post-mini img {
  flex: 0 0 auto;
  width: 74px;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
}
.post-mini h4 {
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 5px;
}
.post-mini a:hover h4 { color: var(--brand); }
.post-mini time { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.aside-links { list-style: none; padding: 0; margin: 0; }
.aside-links li { border-bottom: 1px solid var(--line); }
.aside-links li:last-child { border-bottom: 0; }
.aside-links a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font-size: 14px;
  color: var(--body);
}
.aside-links a:hover { color: var(--brand); }
.aside-links span { color: var(--muted); font-size: 12px; }

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  :root { --pad-y: 72px; }
  .about-body { padding-left: 0; margin-top: 48px; }
  .menu-gallery { min-height: 0; }
  .menu-hero { min-height: 260px; }
  .menu-tiles { grid-template-rows: 1fr 1fr; margin-top: 24px; }
  .js .photo-shuffle__deck { aspect-ratio: 3 / 2; }
  .booking-panel { padding: 42px 30px; }
  .event-side--reverse { margin-left: 6%; }
  .shape { display: none; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 110px; }
  /* Outlets stack: photo on top, details below, with the alternating order
     reset so every card reads photo-first. */
  .branch { grid-template-columns: 1fr; }
  .branch--reverse .branch__media { order: 0; }
  .branch__media { min-height: 260px; }
  .branch__body { padding: 34px 26px; }
  /* Ordering: the bag stops being a sidebar and drops below the menu, so a
     sticky bar keeps the running total reachable. */
  .order-layout { grid-template-columns: minmax(0, 1fr); }
  .order-aside { position: static; }
  .cart-list { max-height: none; }
  .cart-bar.is-visible { display: flex; }
  /* Keep the bar from sitting on top of the last row of the page. */
  body.has-cart-bar { padding-bottom: 78px; }
  .checkout-panel { padding: 36px 28px; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
}


@media (max-width: 767.98px) {
  :root { --pad-y: 60px; }
  body { font-size: 15px; }
  .hero { min-height: 88vh; padding: 140px 0 90px; }
  .brand-mark { font-size: 32px; }
  .menu-toggle { padding: 9px 15px; letter-spacing: .16em; }
  /* The "Book a table" pill wraps and collides with the centred logo on
     phone-width screens — drop it and rely on the nav panel's own
     "Book a Table" link and the WhatsApp contact line instead. */
  .site-header .btn-leaf { display: none; }
  /* The click-to-call stays: it shrinks to its icon, which balances the
     menu button on the left and leaves the logo dead centre. */
  .header-call { padding: 10px 13px; }
  .header-call span { display: none; }
  .header-call i { font-size: 15px; }
  .about-stack__main { width: 88%; }
  .about-stack__inset { width: 52%; }
  .menu-tile { min-height: 130px; }
  .menu-tile__desc { max-height: 60px; opacity: 1; } /* no hover on touch — description stays visible */
  .photo-shuffle__deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .js .photo-shuffle__deck { aspect-ratio: 4 / 3; }
  .shuffle-card { border-width: 7px; }
  .shuffle-card__caption { font-size: 12px; padding: 38px 14px 12px; }
  .facility-shot { margin-top: 34px; }
  .events-spread { grid-template-columns: 1fr; }
  .event-feature { aspect-ratio: 4 / 3; }
  .events-side { margin-top: 28px; gap: 26px; }
  .event-side--reverse { flex-direction: row; margin-left: 0; }
  .event-side__num { font-size: 22px; }
  .page-hero { min-height: 38vh; padding: 130px 0 50px; }
  .menu-row__name { white-space: normal; }
  .room-card__body { padding: 22px 20px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 10px; }
  .order-cards { grid-template-columns: minmax(0, 1fr); }
  .order-card__media { flex-basis: 96px; }
  .order-card__media img { width: 96px; }
  .order-tabs { top: 62px; }
  .order-cat { scroll-margin-top: 128px; }
  .checkout-panel { padding: 28px 20px; }
  .order-success__actions .btn-leaf { width: 100%; justify-content: center; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { justify-content: center; text-align: center; }
  .menu-head .btn-leaf + .btn-leaf,
  .page-cta .btn-leaf + .btn-leaf { margin-left: 0; margin-top: 12px; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}