/* ==========================================================================
   Modern UI layer — 2026 interface conventions applied over the brand system.
   Bento grids, soft depth, sticky conversion bar, scroll affordances.
   ========================================================================== */

:root {
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  /* sage-tinted depth — neutral greys read cheap against a warm ground */
  --shadow-1: 0 1px 2px rgba(49,84,33,.06), 0 2px 8px -2px rgba(49,84,33,.08);
  --shadow-2: 0 2px 4px rgba(49,84,33,.06), 0 12px 28px -8px rgba(49,84,33,.16);
  --shadow-3: 0 4px 8px rgba(49,84,33,.08), 0 28px 56px -16px rgba(49,84,33,.28);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300;
  background: transparent; pointer-events: none;
}
.scroll-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--clay-700), var(--clay-500), #E9C9A8);
  transition: width 80ms linear;
}

/* ---------- Type: tighter, larger, more modern ---------- */
h1, .h1 { letter-spacing: -0.025em; }
h2, .h2 { letter-spacing: -0.02em; }
.section-head h2 { margin-bottom: 12px; }
.section-head .lead { font-size: clamp(17px, 1.5vw, 19px); max-width: 620px; }

/* ---------- Cards: modern radii + softer, deeper shadows ---------- */
.card, .work-tile, .vcard, .card--setup, .occasion-card, .review-card {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out), border-color 250ms ease;
}
.card:hover, .work-tile:hover, .vcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-3);
}
.occasion-card { border-radius: var(--r-lg); }
.occasion-card::after, .work-tile__frame, .vcard::after { border-radius: calc(var(--r-md) - 4px); }
.occasion-card::after { border-radius: calc(var(--r-lg) - 10px); }

/* ---------- BENTO: the occasion router as an asymmetric modular grid ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.bento > * { min-height: 260px; }
.bento .occasion-card:nth-child(1) { grid-column: span 7; grid-row: span 2; min-height: 540px; }
.bento .occasion-card:nth-child(2) { grid-column: span 5; }
.bento .occasion-card:nth-child(3) { grid-column: span 5; }
.bento .occasion-card:nth-child(4) { grid-column: span 12; min-height: 300px; }
.bento .bento-panel { grid-column: span 12; }
@media (max-width: 1024px) {
  .bento .occasion-card:nth-child(1) { grid-column: span 12; min-height: 420px; }
  .bento .occasion-card:nth-child(2),
  .bento .occasion-card:nth-child(3) { grid-column: span 6; }
  .bento .occasion-card:nth-child(4) { grid-column: span 12; }
}
@media (max-width: 640px) {
  .bento > .occasion-card { grid-column: span 12 !important; min-height: 340px !important; }
}
/* the featured tile gets a larger type scale */
.bento .occasion-card:nth-child(1) h3 { font-size: 26px; }
.bento .occasion-card:nth-child(1) p { font-size: 16.5px; max-width: 46ch; }
.bento .occasion-card:nth-child(1) .occasion-card__body { padding: 34px 34px 36px; }

/* a glass info panel that sits inside the bento */
.bento-panel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  background: linear-gradient(135deg, rgba(49,84,33,.06), rgba(149,75,46,.06));
  border: 1px solid rgba(172,170,145,.5);
  border-radius: var(--r-md); padding: 26px 30px; min-height: 0 !important;
}
.bento-panel p { margin: 0; font-family: var(--font-serif); font-size: 19px; font-style: italic; color: var(--sage-900); }

/* ---------- Buttons: modern spring interaction ---------- */
.btn {
  border-radius: 999px;
  transition: transform 300ms var(--ease-spring), box-shadow 300ms var(--ease-out), background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn--primary { box-shadow: 0 2px 6px rgba(149,75,46,.28), 0 10px 24px -8px rgba(149,75,46,.4); }
.btn--primary:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 4px 10px rgba(149,75,46,.3), 0 18px 34px -10px rgba(149,75,46,.5); }
.btn:active { transform: translateY(0) scale(.99); }
.btn--secondary:hover { transform: translateY(-2px); }

/* ---------- Header: frosted, condensed on scroll ---------- */
.site-header {
  background: rgba(232,228,220,.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(172,170,145,.4);
  transition: box-shadow 300ms ease, background 300ms ease;
}
.site-header.is-stuck { background: rgba(232,228,220,.94); box-shadow: 0 1px 0 rgba(172,170,145,.5), 0 10px 30px -12px rgba(49,84,33,.28); }
.nav { transition: min-height 300ms var(--ease-out); }
.site-header.is-stuck .nav { min-height: 66px; }
.nav__menu a { position: relative; }
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  background: var(--clay-500); border-radius: 2px; transition: right 300ms var(--ease-out);
}
.nav__menu a:hover::after { right: 0; }
.nav__drop { border-radius: var(--r-sm); box-shadow: var(--shadow-2); overflow: hidden; }
.nav__drop a { border-radius: 0; }
.nav__drop a::after { content: none; }
.nav__drop a:hover { background: rgba(149,75,46,.08); }

/* ---------- Marquee tape between sections ---------- */
.tape {
  background: var(--sage-900); color: var(--paper);
  padding: 14px 0; overflow: hidden; border-block: 1px solid rgba(232,228,220,.15);
}
.tape__track { display: flex; gap: 44px; width: max-content; animation: tape 34s linear infinite; align-items: center; }
.tape span {
  display: inline-flex; align-items: center; gap: 44px; white-space: nowrap;
  font-family: var(--font-serif); font-style: italic; font-size: 20px; color: rgba(232,228,220,.92);
}
.tape span::after { content: "✦"; font-style: normal; font-size: 12px; color: var(--clay-500); }
@keyframes tape { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape__track { animation: none; } }

/* ---------- Sticky conversion bar (mobile) ---------- */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(232,228,220,.92);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid rgba(172,170,145,.55);
  transform: translateY(110%); transition: transform 400ms var(--ease-out);
}
.actionbar.is-up { transform: none; }
.actionbar .btn { flex: 1; justify-content: center; padding: 14px 18px; font-size: 13px; }
@media (max-width: 860px) {
  .actionbar { display: flex; }
  .float-wa { display: none !important; }
  body { padding-bottom: 76px; }
}

/* ---------- Animated counters ---------- */
.proof__num { font-variant-numeric: tabular-nums; }

/* ---------- Section transitions: soft dividers instead of hard edges ---------- */
.section--dark { border-radius: var(--r-xl); margin-inline: 16px; }
@media (max-width: 768px) { .section--dark { border-radius: var(--r-lg); margin-inline: 8px; } }
.section--band::before { border-radius: var(--r-lg); }

/* ---------- Work mosaic: modern spacing + radius ---------- */
.work-grid { gap: 18px; }
.work-tile { border-radius: var(--r-md); }
.work-filter button { border-radius: 999px; transition: transform 250ms var(--ease-spring), background 200ms ease, color 200ms ease, border-color 200ms ease; }
.work-filter button:hover { transform: translateY(-2px); }

/* ---------- Forms: modern inputs ---------- */
.enquiry input[type="text"], .enquiry input[type="tel"], .enquiry input[type="date"],
.enquiry select, .enquiry textarea {
  border-radius: var(--r-sm); border-color: rgba(172,170,145,.7);
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus {
  outline: none; border-color: var(--clay-500);
  box-shadow: 0 0 0 4px rgba(187,104,72,.16);
}
.enquiry fieldset { border-radius: var(--r-sm); border-color: rgba(172,170,145,.7); }
.enquiry .checks label {
  border: 1px solid rgba(172,170,145,.7); border-radius: 999px; padding: 8px 14px;
  cursor: pointer; transition: border-color 180ms ease, background 180ms ease;
}
.enquiry .checks label:has(input:checked) { border-color: var(--clay-500); background: rgba(187,104,72,.1); }
.form-confirm { border-radius: var(--r-md); box-shadow: var(--shadow-2); }

/* ---------- FAQ: modern accordion ---------- */
.faq details {
  background: var(--white); border: 1px solid rgba(172,170,145,.5); border-radius: var(--r-sm);
  margin-bottom: 12px; padding: 4px 22px; transition: box-shadow 250ms ease, border-color 250ms ease;
}
.faq details[open] { box-shadow: var(--shadow-2); border-color: rgba(187,104,72,.5); }
.faq summary { list-style: none; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-sans); font-size: 24px; font-weight: 300; color: var(--clay-700);
  transition: transform 300ms var(--ease-out); flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 16px; margin: 0; }

/* ---------- Focus visibility, modernised ---------- */
:focus-visible { outline: 2px solid var(--clay-500); outline-offset: 3px; border-radius: 4px; }

/* ---------- Reveal: subtler, faster, modern easing ---------- */
[data-reveal] { transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transform: translateY(24px); }
[data-reveal].grid > *, [data-reveal].setup-strip > *, [data-reveal].bento > *,
[data-reveal].masonry-strip > *, [data-reveal].proof > *, [data-reveal].work-grid > * {
  opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
[data-reveal].grid.is-in > *, [data-reveal].setup-strip.is-in > *, [data-reveal].bento.is-in > *,
[data-reveal].masonry-strip.is-in > *, [data-reveal].proof.is-in > *, [data-reveal].work-grid.is-in > * {
  opacity: 1; transform: none;
}
[data-reveal].is-in > *:nth-child(2) { transition-delay: 130ms; }
[data-reveal].is-in > *:nth-child(3) { transition-delay: 260ms; }
[data-reveal].is-in > *:nth-child(4) { transition-delay: 390ms; }
[data-reveal].is-in > *:nth-child(5) { transition-delay: 520ms; }
[data-reveal].is-in > *:nth-child(6) { transition-delay: 650ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scroll-progress { display: none; }
}

/* ---------- Hero: modern scale + inner rounding ---------- */
.hero { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.hero__badge { border-radius: 999px; }
.hero__dots { gap: 10px; }
.hero__dot { width: 26px; height: 4px; border-radius: 99px; transition: background 250ms ease, width 250ms ease; }
.hero__dot.is-active { width: 44px; background: var(--paper); }

/* ---------- Lightbox: modern chrome ---------- */
.lb { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(24,32,20,.86); }
.lb video, .lb img { border-radius: var(--r-md); box-shadow: 0 40px 90px -20px rgba(0,0,0,.7); }
.lb__close {
  width: 44px; height: 44px; border-radius: 50%; font-size: 26px;
  background: rgba(232,228,220,.14); border: 1px solid rgba(232,228,220,.3);
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms ease, transform 200ms var(--ease-spring);
}
.lb__close:hover { background: rgba(232,228,220,.28); transform: rotate(90deg); }

/* ---------- Footer modernisation ---------- */
.site-footer { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.footer__col ul a { transition: padding-left 200ms var(--ease-out), color 200ms ease; display: inline-block; }
.footer__col ul a:hover { padding-left: 6px; text-decoration: none; color: #E9C9A8; }

/* ==========================================================================
   CLEAN PASS — remove competing ornament, let whitespace carry the design.
   Ornament is used once per context, never stacked.
   ========================================================================== */

/* 1. Kill the doubled keylines inside image cards — the image is the frame. */
.occasion-card::after,
.work-tile__frame,
.vcard::after,
.occasion-card .occasion-card__img::after { content: none !important; border: 0 !important; }

/* 2. Drop the inset frame on banded sections. */
.section--band::before { content: none; }

/* 3. Jaali texture: whisper, not pattern. Dark sections only, very low. */
.section--dark::before, .site-footer::before { opacity: .045; background-size: 620px auto; }

/* 4. One ornament per card: the setup cards keep the arch, lose the marigold strip. */
.card--setup .card__art::after { content: none; }
.card--setup .card__art { background-image: none; background-color: #F1EDE4; }

/* 5. Marigold dividers only where a section genuinely changes subject. */
.marigold-divider { padding: 22px 0; }
.marigold-divider img { width: 26px; opacity: .55; }
.marigold-row { display: none; }

/* 6. Calmer borders — hairlines, not outlines. */
.card, .card--setup, .review-card, .work-tile {
  border: 1px solid rgba(172,170,145,.38);
}
.card:not(.occasion-card):not(.card--setup):not(.review-card) { background: var(--white); }
.review-card { border-top-width: 2px; }

/* 7. Softer shadows — presence without heaviness. */
:root {
  --shadow-1: 0 1px 2px rgba(49,84,33,.04), 0 2px 6px -2px rgba(49,84,33,.06);
  --shadow-2: 0 2px 4px rgba(49,84,33,.04), 0 10px 24px -8px rgba(49,84,33,.12);
  --shadow-3: 0 3px 6px rgba(49,84,33,.05), 0 22px 44px -16px rgba(49,84,33,.2);
}
.btn--primary { box-shadow: 0 2px 6px rgba(149,75,46,.2); }
.btn--primary:hover { box-shadow: 0 8px 20px -6px rgba(149,75,46,.42); }

/* 8. More air. Generous, consistent vertical rhythm. */
:root { --section-pad: 132px; }
@media (max-width: 768px) { :root { --section-pad: 76px; } }
.section-head { margin-bottom: 64px; }
.container { padding-inline: 32px; }
@media (max-width: 640px) { .container { padding-inline: 20px; } }

/* 9. Quieter eyebrows — one accent colour, not two. */
.eyebrow-num { color: var(--sage-400); font-size: 12.5px; letter-spacing: .2em; }
.eyebrow-num::before { color: var(--clay-500); font-size: 17px; }
.eyebrow-num::after { width: 40px; background: rgba(172,170,145,.6); }
.section-head .eyebrow { color: var(--sage-400); }

/* 10. Arch header: shallower and quieter, so pages start calm. */
.arch-head__block { min-height: 168px; }
.arch-head--sage .arch-head__block { background-image: linear-gradient(160deg, #4D6448, #41563D); }
.arch-head__block::after { opacity: .18; }
@media (max-width: 768px) { .arch-head__block { min-height: 118px; } }
.arch-head__glyph { width: 34px; margin-top: -52px; }

/* 11. Occasion cards: cleaner overlay, description always visible, no sliding. */
.occasion-card::before {
  background: linear-gradient(178deg, rgba(24,32,20,0) 34%, rgba(24,32,20,.62) 66%, rgba(24,32,20,.9) 100%);
}
.occasion-card .occasion-card__body { transform: none !important; padding: 28px; }
.occasion-card p { opacity: 1 !important; transform: none !important; }
.occasion-card .occasion-card__body::after { content: none; }
.occasion-card h3::after { content: none; }
.occasion-card h3 { font-size: 21px; letter-spacing: .06em; margin-bottom: 2px; }
.occasion-card .meta { font-size: 15px; opacity: .88; }

/* 12. Work tiles: caption always legible, no hover-dependent reveal. */
.work-tile::after { opacity: .8; }
.work-tile__cap { transform: none; opacity: 1; }
.work-tile__type { background: rgba(24,32,20,.55); font-weight: 500; }

/* 13. Tape: subtle, single line, low contrast. */
.tape { padding: 11px 0; border-block: 0; }
.tape span { font-size: 16px; color: rgba(232,228,220,.7); letter-spacing: .04em; }
.tape span::after { color: rgba(187,104,72,.8); }

/* 14. Logo marquee: quieter frame. */
.logo-marquee { border-block: 1px solid rgba(172,170,145,.3); background: transparent; padding-block: 34px; }
.logo-marquee img { opacity: .55; }
.logo-marquee__label { color: var(--sage-400); font-size: 11.5px; letter-spacing: .2em; margin-bottom: 22px; }

/* 15. Proof band: no dividers, just space. */
.proof > div { border: 0 !important; padding: 10px 20px; }
.proof { gap: 24px; }

/* 16. Founder chip and arch frame: keep the arch, drop the outline ring. */
.arch-frame::after { content: none; }
.founder-chip { box-shadow: var(--shadow-2); }

/* 17. Cinema band gets the same rounding as other dark blocks. */
.cinema { border-radius: var(--r-xl); margin-inline: 16px; overflow: hidden; }
@media (max-width: 768px) { .cinema { border-radius: var(--r-lg); margin-inline: 8px; } }

/* ==========================================================================
   PREMIUM HERO — Taj-inspired: the photograph stays clear, the type is
   minimal and confident, the framing is generous. No heavy scrims, no
   decorative edges, no competing chrome.
   ========================================================================== */

.hero {
  min-height: 100svh;
  border-radius: 0;
  display: flex; align-items: flex-end;
}
/* photography reads true — no sepia wash over the hero */
.hero__slide img { filter: none; }
/* slow, cinematic drift instead of a static plate */
.hero__slide.is-active img { animation: heroDrift 16s ease-out forwards; }
@keyframes heroDrift { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero__slide.is-active img { animation: none; } }

/* Two soft gradients only: a whisper at the top for the nav, a base for the
   type. The centre of the image is left completely clear. */
.hero__scrim {
  background:
    linear-gradient(to bottom, rgba(20,26,17,.34) 0%, rgba(20,26,17,0) 22%),
    linear-gradient(to top, rgba(20,26,17,.72) 0%, rgba(20,26,17,.28) 26%, rgba(20,26,17,0) 52%);
}
.hero::after { content: none; } /* remove the scalloped edge — it fought the photo */

.hero__inner {
  padding-block: 0 clamp(72px, 9vh, 128px);
  max-width: 900px;
}
/* eyebrow: fine, letterspaced, no pill chrome */
.hero__badge {
  background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0; margin-bottom: 26px;
  font-size: 12px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(232,228,220,.9);
}
.hero__badge::after {
  content: ""; display: block; width: 46px; height: 1px;
  background: rgba(232,228,220,.5); margin-top: 18px;
}
.hero h1 {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.04; letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
  margin-bottom: 22px; max-width: 16ch;
}
.hero h1 em { color: #EED9BE; }
.hero__sub {
  font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.6;
  color: rgba(232,228,220,.92); max-width: 46ch;
  text-shadow: 0 1px 16px rgba(0,0,0,.4);
}
.hero__pa { color: rgba(232,228,220,.82); font-size: 15.5px; }
.hero .btn-row { margin-top: 34px !important; gap: 14px; }
.hero .btn--secondary { background: rgba(232,228,220,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero .btn--secondary:hover { background: var(--paper); color: var(--sage-900); }

/* the meta row moves out of the hero into its own quiet strip */
.hero__meta { display: none; }

/* slide indicators: hairlines, bottom-right, unobtrusive */
.hero__dots { left: auto; right: 32px; bottom: 34px; transform: none; gap: 8px; }
.hero__dot { width: 22px; height: 2px; background: rgba(232,228,220,.4); border-radius: 0; }
.hero__dot.is-active { width: 38px; background: var(--paper); }
@media (max-width: 640px) { .hero__dots { right: 20px; bottom: 26px; } }

/* ---------- Facts strip beneath the hero (replaces the in-hero meta) ---------- */
.factstrip { border-bottom: 1px solid rgba(172,170,145,.3); }
.factstrip__inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  text-align: center; padding-block: 30px;
}
.factstrip__inner > div + div { border-left: 1px solid rgba(172,170,145,.3); }
.factstrip b {
  display: block; font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 22px; color: var(--clay-700); line-height: 1.2;
}
.factstrip span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-400); }
@media (max-width: 640px) {
  .factstrip__inner { grid-template-columns: 1fr; gap: 18px; padding-block: 24px; }
  .factstrip__inner > div + div { border-left: 0; border-top: 1px solid rgba(172,170,145,.3); padding-top: 18px; }
}

/* ---------- Header over the hero: transparent until scrolled ---------- */
.site-header { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; box-shadow: none; }
.site-header:not(.is-stuck) .nav__menu a,
.site-header:not(.is-stuck) .nav__wordmark b { color: rgba(255,255,255,.94); }
.site-header:not(.is-stuck) .nav__wordmark i { color: #EED9BE; }
.site-header:not(.is-stuck) .nav--planners a { color: rgba(255,255,255,.72); }
.site-header:not(.is-stuck) .nav__wa { border-color: rgba(255,255,255,.5); color: #fff; }
.site-header:not(.is-stuck) .nav__wa:hover { background: rgba(255,255,255,.14); }
.site-header:not(.is-stuck) .nav__toggle { color: #fff; }
.site-header:not(.is-stuck) .nav__brand img { filter: brightness(0) invert(1); opacity: .95; }
.site-header.is-stuck { position: fixed; background: rgba(232,228,220,.92); border-bottom-color: rgba(172,170,145,.4); }
.annbar { position: relative; z-index: 101; }
/* inner pages start below the fixed header */
body:not(.home) .arch-head { padding-top: 92px; }

/* ==========================================================================
   COVERFLOW — 3D perspective video carousel for reviews.
   ========================================================================== */
.coverflow {
  position: relative; perspective: 1800px;
  height: clamp(400px, 56vw, 600px);
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto; max-width: 1100px;
}
.coverflow__item {
  position: absolute; top: 50%; left: 50%;
  width: clamp(210px, 25vw, 300px); aspect-ratio: 3/4;
  margin: 0; padding: 0; border: 0; background: var(--ink);
  border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  transform-origin: center center;
  transition: transform 650ms var(--ease-out), opacity 650ms var(--ease-out), box-shadow 650ms var(--ease-out);
  will-change: transform;
}
.coverflow__item img { width: 100%; height: 100%; object-fit: cover; }

/* stacking positions, assigned by JS via data-pos */
.coverflow__item[data-pos="0"]  { transform: translate(-50%,-50%) translateX(0)      translateZ(60px)  rotateY(0)     scale(1);    z-index: 6; opacity: 1;   box-shadow: 0 30px 70px -18px rgba(31,31,29,.55); }
.coverflow__item[data-pos="1"]  { transform: translate(-50%,-50%) translateX(72%)    translateZ(-90px) rotateY(-26deg) scale(.92); z-index: 5; opacity: .95; box-shadow: 0 20px 50px -20px rgba(31,31,29,.4); }
.coverflow__item[data-pos="-1"] { transform: translate(-50%,-50%) translateX(-72%)   translateZ(-90px) rotateY(26deg)  scale(.92); z-index: 5; opacity: .95; box-shadow: 0 20px 50px -20px rgba(31,31,29,.4); }
.coverflow__item[data-pos="2"]  { transform: translate(-50%,-50%) translateX(128%)   translateZ(-220px) rotateY(-32deg) scale(.82); z-index: 4; opacity: .72; }
.coverflow__item[data-pos="-2"] { transform: translate(-50%,-50%) translateX(-128%)  translateZ(-220px) rotateY(32deg)  scale(.82); z-index: 4; opacity: .72; }
.coverflow__item[data-pos="hidden"] { transform: translate(-50%,-50%) translateZ(-380px) scale(.7); opacity: 0; pointer-events: none; z-index: 1; }

/* badge + play, only on the active card */
.coverflow__badge {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(24,32,20,.62); color: var(--paper);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: 7px 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.coverflow__badge svg { flex: none; }
.coverflow__play {
  position: absolute; inset: 0; margin: auto; z-index: 3;
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(254,254,254,.94); color: var(--clay-700);
  border: 2px solid rgba(233,201,168,.9);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
  opacity: 0; transform: scale(.85);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-spring), background 200ms ease;
}
.coverflow__item[data-pos="0"] .coverflow__play { opacity: 1; transform: scale(1); }
.coverflow__item[data-pos="0"]:hover .coverflow__play { transform: scale(1.08); background: #fff; }
/* dim the off-centre cards so the active one leads */
.coverflow__item::after {
  content: ""; position: absolute; inset: 0; background: rgba(24,32,20,.42);
  transition: opacity 600ms var(--ease-out);
}
.coverflow__item[data-pos="0"]::after { opacity: 0; }

/* caption + rating beneath the carousel */
.coverflow-meta { text-align: center; margin-top: 26px; }
.coverflow-stars { display: inline-flex; gap: 5px; color: #D9A94A; margin-bottom: 12px; }
.coverflow-caption {
  font-family: var(--font-serif); font-size: clamp(18px, 1.8vw, 22px); font-style: italic;
  color: var(--ink); margin: 0 auto 6px; max-width: 40ch;
}
.coverflow-venue { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-400); }

/* arrows */
.coverflow-nav { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.coverflow-nav button {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid rgba(172,170,145,.7); color: var(--sage-900);
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 250ms var(--ease-spring);
}
.coverflow-nav button:hover { background: var(--sage-900); color: var(--paper); border-color: var(--sage-900); transform: translateY(-2px); }
@media (max-width: 640px) {
  .coverflow__item[data-pos="2"], .coverflow__item[data-pos="-2"] { opacity: 0; pointer-events: none; }
  .coverflow__item[data-pos="1"] { transform: translate(-50%,-50%) translateX(62%) translateZ(-90px) rotateY(-24deg) scale(.86); }
  .coverflow__item[data-pos="-1"] { transform: translate(-50%,-50%) translateX(-62%) translateZ(-90px) rotateY(24deg) scale(.86); }
}

/* ==========================================================================
   PHOTO RAIL — full-bleed horizontal scrolling strip of tall images.
   ========================================================================== */
.rail { position: relative; width: 100%; }
.rail__track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 32px 26px; scroll-padding-left: 32px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail__track::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { .rail__track { padding-inline: 20px; gap: 14px; } }

.rail__item {
  position: relative; flex: none; scroll-snap-align: start;
  width: clamp(230px, 24vw, 330px); aspect-ratio: 3/4.2;
  border: 0; padding: 0; margin: 0; cursor: pointer;
  border-radius: var(--r-lg); overflow: hidden; background: #EFE9DD;
  box-shadow: var(--shadow-1);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.rail__item:hover { transform: translateY(-8px); box-shadow: var(--shadow-3); }
.rail__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.rail__item:hover img { transform: scale(1.05); }
.rail__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(24,32,20,.78) 0%, rgba(24,32,20,.08) 42%, transparent 62%);
  opacity: 0; transition: opacity 400ms var(--ease-out);
}
.rail__item:hover::after, .rail__item--video::after { opacity: 1; }
.rail__cap {
  position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; text-align: left;
  font-family: var(--font-serif); font-size: 16.5px; color: var(--paper); line-height: 1.3;
  opacity: 0; transform: translateY(8px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.rail__item:hover .rail__cap, .rail__item--video .rail__cap { opacity: 1; transform: none; }
.rail__badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(24,32,20,.6); color: var(--paper);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: 6px 13px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.rail__play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(254,254,254,.94); color: var(--clay-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform 300ms var(--ease-spring), background 200ms ease;
}
.rail__item--video:hover .rail__play { transform: scale(1.1); background: #fff; }

/* edge fades so the rail reads as continuing beyond the viewport */
.rail::before, .rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 3; pointer-events: none;
}
.rail::before { left: 0; background: linear-gradient(to right, var(--paper), transparent); }
.rail::after  { right: 0; background: linear-gradient(to left, var(--paper), transparent); }
.section--dark .rail::before { background: linear-gradient(to right, #4D6448, transparent); }
.section--dark .rail::after  { background: linear-gradient(to left, #4D6448, transparent); }

/* nav arrows for the rail */
.rail-nav { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.rail-nav button {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid rgba(172,170,145,.7); color: var(--sage-900);
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms ease, color 200ms ease, transform 250ms var(--ease-spring);
}
.rail-nav button:hover { background: var(--sage-900); color: var(--paper); transform: translateY(-2px); }
.section--dark .rail-nav button { border-color: rgba(232,228,220,.45); color: var(--paper); }
.section--dark .rail-nav button:hover { background: var(--paper); color: var(--sage-900); }

/* ---------- Hero legibility on bright plates ----------
   The photo stays clear in the centre; contrast is bought at the two
   edges where type and nav actually sit. */
.hero__slide img { filter: brightness(.94) saturate(1.02); }
.hero__scrim {
  background:
    /* nav band */
    linear-gradient(to bottom, rgba(18,24,15,.52) 0%, rgba(18,24,15,.18) 12%, rgba(18,24,15,0) 24%),
    /* type block, anchored bottom-left */
    linear-gradient(to top, rgba(18,24,15,.88) 0%, rgba(18,24,15,.62) 22%, rgba(18,24,15,.18) 44%, rgba(18,24,15,0) 62%),
    linear-gradient(to right, rgba(18,24,15,.55) 0%, rgba(18,24,15,.12) 42%, rgba(18,24,15,0) 66%);
}
.hero h1 { text-shadow: 0 2px 26px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3); }
.hero__sub, .hero__pa { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.hero__badge { color: #F0EAE0; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero__badge::after { background: rgba(240,234,224,.55); }

/* announcement bar sits above the fixed header, so the header offset must
   clear both — otherwise the nav overlaps the hero type on load. */
.annbar { position: relative; z-index: 102; }
.site-header { top: 0; }
.hero { padding-top: 0; }

/* ---------- Hero crossfade without a background flash ----------
   The outgoing slide stays fully opaque underneath while the incoming
   one fades in above it, so the sage ground is never revealed. */
.hero__slide { opacity: 0; z-index: 1; transition: opacity 1100ms var(--ease-out); }
.hero__slide.was-active { opacity: 1; z-index: 2; transition: none; }
.hero__slide.is-active { opacity: 1; z-index: 3; }

/* slides stack at z1–3, so the scrim and copy must sit above them */
.hero__scrim { z-index: 4; }
.hero > .container { position: relative; z-index: 5; }
.hero__dots { z-index: 6; }

/* ==========================================================================
   BENTO FIX — cards must fill their grid cell, not impose a 3:4 aspect that
   blows the featured tile up to 1200px+ tall. Explicit row heights instead.
   ========================================================================== */
.bento {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 250px;
  gap: 16px;
}
.bento > * { min-height: 0; }
/* kill the aspect-ratio inside the bento — the grid owns the box now */
.bento .occasion-card { aspect-ratio: auto; min-height: 0; height: 100%; }
.bento .occasion-card:nth-child(1) { grid-column: span 6; grid-row: span 2; }   /* featured: tall */
.bento .occasion-card:nth-child(2) { grid-column: span 6; grid-row: span 1; }
.bento .occasion-card:nth-child(3) { grid-column: span 6; grid-row: span 1; }
.bento .occasion-card:nth-child(4) { grid-column: span 6; grid-row: span 2; }   /* second tall, balances the row */
@media (max-width: 900px) {
  .bento { grid-auto-rows: 220px; }
  .bento .occasion-card:nth-child(1) { grid-column: span 12; grid-row: span 1; }
  .bento .occasion-card:nth-child(2) { grid-column: span 6; grid-row: span 1; }
  .bento .occasion-card:nth-child(3) { grid-column: span 6; grid-row: span 1; }
  .bento .occasion-card:nth-child(4) { grid-column: span 12; grid-row: span 1; }
}
@media (max-width: 560px) {
  .bento { grid-auto-rows: 260px; }
  .bento > .occasion-card { grid-column: span 12 !important; grid-row: span 1 !important; }
}

/* ==========================================================================
   IMAGE GRADE — crisp and premium, not foggy. A sepia veil made every photo
   look hazy; replace with a clean contrast/saturation lift.
   ========================================================================== */
.occasion-card__img img, .gallery-item img, .work-tile img, .founder-media img,
.hero__slide img, .rail__item img, .coverflow__item img, .card--setup .card__art img,
.cinema__bg img, .vcard img {
  filter: saturate(1.05) contrast(1.04);
}
.hero__slide img { filter: saturate(1.05) contrast(1.04) brightness(.96); }

/* occasion card overlay: image reads clearly, copy stays legible at the base */
.occasion-card::before {
  background: linear-gradient(180deg, rgba(24,32,20,0) 40%, rgba(24,32,20,.55) 72%, rgba(20,26,16,.92) 100%);
}
.occasion-card__img img { object-position: center; }

/* ==========================================================================
   SETUP CARDS FIX — the city line-illustrations were masked into an arch on
   a cream card, making them invisible. Show them full on a tinted panel with
   a multiply blend so the cream baked-in background drops out and the sage
   line-art reads clearly. The arch shape becomes the panel's top edge.
   ========================================================================== */
.card--setup .card__art {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(165deg, #E7E1D2 0%, #D8D1BE 100%);
  -webkit-mask-image: none; mask-image: none;
}
.card--setup .card__art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  -webkit-mask-image: none; mask-image: none;
  mix-blend-mode: multiply;
  filter: contrast(1.35) saturate(1.15) brightness(.96);
  background: transparent;
  transition: transform 700ms var(--ease-out);
}
.card--setup:hover .card__art img { transform: scale(1.05); }
.card--setup .card__art::after { content: none; }
/* a slim clay keyline under the art so it reads as a framed vignette */
.card--setup .card__art { border-bottom: 2px solid rgba(187,104,72,.35); }
/* the arch nods to the brand as a small marigold-topped notch, once */

/* ==========================================================================
   PREMIUM HEADER v2 — three-part grid: brand left, nav centred, actions
   right. Refined single wordmark (the flower mark already carries the name,
   so the wordmark is a clean text lockup, not a cramped 3-line stamp).
   ========================================================================== */
.site-header .container { max-width: 1340px; }
.nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 88px !important;
  gap: 24px;
}
.site-header.is-stuck .nav { min-height: 72px !important; }

/* brand: mark + refined wordmark */
.nav__brand { justify-self: start; gap: 13px; }
/* legacy bare-img sizing retired — the mark is sized by .nav__plaque now */
.nav__wordmark { flex-direction: column; line-height: 1; gap: 1px; }
.nav__wordmark b {
  font-family: var(--font-sans); font-weight: 600; letter-spacing: .38em;
  font-size: 9.5px; text-transform: uppercase; color: var(--sage-900);
}
.nav__wordmark b:last-child { align-self: stretch; text-align: justify; }
.nav__wordmark i {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 23px; letter-spacing: .01em; color: var(--clay-700); margin: 1px 0;
}

/* centred nav */
.nav__menu {
  grid-column: 2; justify-self: center; flex: none;
  display: flex; align-items: center; gap: 30px; margin: 0;
}
.nav__menu > li > a {
  font-size: 14.5px; font-weight: 500; letter-spacing: .015em; color: var(--ink);
  display: inline-flex; align-items: center; gap: 5px; padding-block: 6px;
}
.nav__caret { font-size: 15px; opacity: .6; transform: rotate(90deg); display: inline-block; transition: transform 250ms var(--ease-out); }
.nav__item--has-children:hover .nav__caret { transform: rotate(-90deg); }

/* actions right */
.nav__actions { grid-column: 3; justify-self: end; gap: 18px; }
.nav__planners { font-size: 13.5px; font-weight: 500; letter-spacing: .04em; color: var(--sage-400); }
.nav__planners:hover { color: var(--clay-700); text-decoration: none; }
.nav__quote { padding: 12px 26px !important; font-size: 12.5px !important; }
.nav__wa { width: 42px; height: 42px; }

/* transparent-over-hero state: everything reads white and legible */
.site-header:not(.is-stuck) .nav__wordmark b { color: rgba(255,255,255,.95); }
.site-header:not(.is-stuck) .nav__wordmark i { color: #EED9BE; }
.site-header:not(.is-stuck) .nav__menu > li > a { color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.site-header:not(.is-stuck) .nav__planners { color: rgba(255,255,255,.68); }
.site-header:not(.is-stuck) .nav__brand img { filter: brightness(0) invert(1); opacity: .96; }

/* the announcement bar + header offset for inner pages */
body:not(.home) .site-header { position: sticky; }
body:not(.home) .site-header:not(.is-stuck) { background: rgba(232,228,220,.92); border-bottom-color: rgba(172,170,145,.4); }
body:not(.home) .site-header:not(.is-stuck) .nav__wordmark b { color: var(--sage-900); }
body:not(.home) .site-header:not(.is-stuck) .nav__wordmark i { color: var(--clay-700); }
body:not(.home) .site-header:not(.is-stuck) .nav__menu > li > a { color: var(--ink); text-shadow: none; }
body:not(.home) .site-header:not(.is-stuck) .nav__planners { color: var(--sage-400); }
body:not(.home) .site-header:not(.is-stuck) .nav__brand img { filter: none; }

@media (max-width: 1080px) {
  .nav__menu, .nav__planners { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .nav__actions { grid-column: 2; }
}

/* ==========================================================================
   ALIGNMENT FIX — everything sits on one grid, full-bleed, edge-aligned.
   ========================================================================== */
/* 1. Hero container must fill width so the text aligns to the page grid,
      not shrink-to-content-and-centre inside the flex hero. */
.hero > .container { width: 100%; max-width: 1340px; }
.hero__inner { margin-left: 0; }

/* 2. Full-bleed sections — no 16px insets, no rounded panels jutting in/out.
      Clean edge-to-edge bands that all align. */
.section--dark, .cinema { margin-inline: 0 !important; border-radius: 0 !important; }
.site-header, .site-footer, .hero { border-radius: 0 !important; }

/* 3. Consistent vertical rhythm — dark sections match the light-section pad. */
.section--dark { padding-block: 112px !important; }
.cinema > .container { padding-block: clamp(96px, 12vw, 150px); }

/* 4. Container is one width everywhere. */
.container { max-width: 1200px; }
.site-header .container, .hero > .container { max-width: 1340px; }

/* ==========================================================================
   ONE CONTAINER — header, hero and every section share the exact same width
   and left edge, so the logo, hero headline and section content all align.
   ========================================================================== */
.container,
.site-header .container,
.hero > .container { max-width: 1280px !important; margin-inline: auto; padding-inline: 40px; }
@media (max-width: 640px) {
  .container, .site-header .container, .hero > .container { padding-inline: 22px; }
}

/* factstrip content must sit on the same grid as everything else */
.factstrip .container { max-width: 1280px !important; padding-inline: 40px; margin-inline: auto; }
@media (max-width: 640px) { .factstrip .container { padding-inline: 22px; } }

/* ==========================================================================
   HEADER / ANNOUNCEMENT STACKING FIX — the fixed header was overlapping the
   announcement bar. Pin the bar at the very top; sit the transparent header
   just beneath it over the hero; when scrolled, the solid header rises to
   top:0 and covers the bar cleanly.
   ========================================================================== */
.annbar {
  position: fixed; top: 0; left: 0; right: 0; height: 40px; z-index: 101;
  margin: 0;
}
.scroll-progress { top: 0; z-index: 103; }

.site-header { position: fixed; top: 40px; left: 0; right: 0; z-index: 100; }
.site-header.is-stuck { top: 0; z-index: 104; }

/* Home hero sits under the fixed bars (content is bottom-anchored, so the
   image simply runs behind them — no content overlap). */
.home .hero { margin-top: 0; }

/* Inner pages have no hero, so their content must clear the fixed bars. */
body:not(.home) .site-header { position: fixed; top: 40px; }
body:not(.home) .site-header.is-stuck { top: 0; }
body:not(.home) #main { padding-top: 128px; }
body:not(.home) .arch-head { padding-top: 24px; }

/* ==========================================================================
   FOLD 2 v2 — refined facts strip + clean uniform venue row.
   ========================================================================== */
/* --- Facts strip: three promises with icons, generous, premium --- */
.factstrip { border-bottom: 1px solid rgba(172,170,145,.28); background: var(--paper); }
.factstrip__inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; padding-block: 46px; text-align: center;
}
.factstrip__inner > .fact + .fact { border-left: 1px solid rgba(172,170,145,.28); }
.fact { padding-inline: 34px; display: flex; flex-direction: column; align-items: center; }
.fact__icon { width: 30px; height: 30px; color: var(--clay-500); margin-bottom: 16px; }
.fact b {
  font-family: var(--font-serif); font-style: normal; font-weight: 600;
  font-size: clamp(19px, 1.7vw, 23px); color: var(--sage-900); letter-spacing: -0.01em; margin-bottom: 8px;
}
.fact span { font-size: 14px; line-height: 1.5; color: var(--sage-700); max-width: 30ch; }
@media (max-width: 720px) {
  .factstrip__inner { grid-template-columns: 1fr; gap: 0; padding-block: 8px; }
  .factstrip__inner > .fact { padding-block: 26px; }
  .factstrip__inner > .fact + .fact { border-left: 0; border-top: 1px solid rgba(172,170,145,.28); }
}

/* --- Venue row: static, centred, uniform. No distortion, no scroll. --- */
.venues { padding-block: 52px; border-bottom: 1px solid rgba(172,170,145,.28); }
.venues__label {
  text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--sage-400); margin: 0 0 30px;
}
.venues__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 40px 64px;
}
.venues__logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; width: 130px;
}
.venues__logo img {
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.62);
  transition: filter 250ms ease, transform 250ms ease;
}
.venues__logo:hover img { filter: grayscale(0) opacity(1); transform: scale(1.04); }
@media (max-width: 640px) {
  .venues__row { gap: 28px 40px; }
  .venues__logo { height: 38px; width: 100px; }
}

/* ==========================================================================
   SETUP STRIP v2 — hidden scrollbar, nav arrows, cards that read as a set.
   ========================================================================== */
.setup-strip { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 8px; }
.setup-strip::-webkit-scrollbar { display: none; }
.setup-strip .card--setup {
  scroll-snap-align: start;
  border: 1px solid rgba(172,170,145,.5);
  box-shadow: var(--shadow-1);
}
.setup-strip .card--setup:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); }
/* the "all setups" CTA card */
.card--setup-all {
  background: linear-gradient(160deg, var(--sage-700), var(--sage-900)) !important;
  border-color: var(--sage-900) !important;
  display: flex; align-items: center;
}
.card--setup-all .card__body { color: var(--paper); padding: 32px; }
.card--setup-all h3 { color: var(--paper) !important; }
.card--setup-all p { color: var(--sage-200) !important; }
.card--setup-all__arrow {
  display: inline-flex; margin-top: 16px; width: 42px; height: 42px; border-radius: 50%;
  align-items: center; justify-content: center; font-size: 20px; color: var(--paper);
  border: 1px solid rgba(232,228,220,.4); transition: background 250ms ease, transform 250ms var(--ease-spring);
}
.card--setup-all:hover .card--setup-all__arrow { background: rgba(232,228,220,.16); transform: translateX(4px); }

/* nav arrows sit right, aligned to the grid */
.setup-strip + .rail-nav { justify-content: flex-end; margin-top: 22px; }

/* ==========================================================================
   BENTO v3 — 4 items don't tile cleanly as "1 feature + rest" (the 4th
   orphans). A balanced 2×2 of equal, substantial cards is clean and premium.
   ========================================================================== */
.bento {
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 20px !important;
}
.bento .occasion-card {
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: 16 / 11;
  height: auto;
  min-height: 0;
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr !important; gap: 16px !important; }
  .bento .occasion-card { aspect-ratio: 4 / 3; }
}
/* uniform type across the four equal cards */
.bento .occasion-card:nth-child(1) h3,
.bento .occasion-card h3 { font-size: 21px; }
.bento .occasion-card:nth-child(1) p,
.bento .occasion-card p { font-size: 15px; max-width: 42ch; }
.bento .occasion-card:nth-child(1) .occasion-card__body { padding: 26px; }

/* ==========================================================================
   FOUNDER PORTRAIT — the source image is a transparent cutout, so it needs
   an arch NICHE behind it (a mihrab panel) rather than a photo mask. Sumit
   stands inside a warm arch niche with the marigold glyph at the apex.
   ========================================================================== */
.founder-portrait {
  position: relative; margin: 0 auto; width: min(400px, 100%);
  aspect-ratio: 4 / 5; display: flex; align-items: flex-end; justify-content: center;
}
/* the arch niche: rounded-top panel, warm gradient + faint jaali */
.founder-portrait__niche {
  position: absolute; left: 0; right: 0; bottom: 0; top: 40px;
  border-radius: 200px 200px 20px 20px;
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(232,228,220,.14), transparent 60%),
    linear-gradient(165deg, #4D6448 0%, #315421 58%, #24401A 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 26px 52px -22px rgba(49,84,33,.55);
  overflow: hidden;
}
/* faint jaali texture, kept tonal (not red) via low-opacity screen blend */
.founder-portrait__niche::before {
  content: ""; position: absolute; inset: 0;
  background: var(--jaali-url) center/300px auto;
  opacity: .10; mix-blend-mode: overlay;
}
/* thin clay keyline echoing the arch */
.founder-portrait__niche::after {
  content: ""; position: absolute; inset: 10px; z-index: 2;
  border: 1px solid rgba(233,201,168,.35);
  border-radius: 190px 190px 12px 12px;
}
/* marigold glyph at the apex */
.founder-portrait__marigold {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 40px; z-index: 3;
  background: var(--marigold-url) center/contain no-repeat;
  opacity: .8;
}
/* the cutout portrait, standing in the niche */
.founder-portrait img {
  position: relative; z-index: 2;
  max-width: 90%; max-height: 96%; width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(31,31,29,.28));
}
@media (max-width: 900px) {
  .founder-portrait { width: min(320px, 100%); margin-bottom: 8px; }
}

/* the founder chip: refined, sits under the copy */
.founder-chip {
  background: linear-gradient(160deg, var(--sage-700), var(--sage-900));
  border-radius: var(--r-sm); padding: 14px 20px;
  box-shadow: var(--shadow-2);
}
.founder-chip strong { font-family: var(--font-serif); font-size: 27px; font-weight: 600; }

/* ==========================================================================
   BENTO OVERLAP FIX — earlier asymmetric rules (nth-child min-heights + col
   spans) out-specify the 2×2 override, so card 1 kept a 540px min-height and,
   with aspect-ratio 16/11, computed a 785px width that overflowed its 590px
   column into card 2. Neutralise every per-card sizing so all four are equal.
   ========================================================================== */
.bento .occasion-card:nth-child(1),
.bento .occasion-card:nth-child(2),
.bento .occasion-card:nth-child(3),
.bento .occasion-card:nth-child(4) {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 11;
  height: auto;
}
/* keep the type identical across all four (the old featured card was larger) */
.bento .occasion-card:nth-child(1) h3 { font-size: 21px; }
.bento .occasion-card:nth-child(1) p { font-size: 15px; max-width: 42ch; }
.bento .occasion-card:nth-child(1) .occasion-card__body { padding: 26px; }
@media (max-width: 640px) {
  .bento .occasion-card:nth-child(1),
  .bento .occasion-card:nth-child(2),
  .bento .occasion-card:nth-child(3),
  .bento .occasion-card:nth-child(4) { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   TAJ RESTRAINT PASS — measured from tajhotels.com: muted ink on warm white,
   tiny serif-caps labels, ONE accent, text below clean imagery (not overlaid),
   slim rectangular buttons, small letterspaced nav. Luxury = restraint.
   ========================================================================== */

/* ---------- Ground: lighter, airier; ink softened ---------- */
body { background: #F7F5F0; color: #3E3D38; }
.section { background: transparent; }
.section--band { background: #EFECE4; }

/* ---------- Type: calm. No italic accents shouting in every heading ---------- */
h1 em, h2 em { font-style: normal; color: inherit; }
.hero h1 em { color: inherit; }
h2, .h2 { font-weight: 500; color: #33322D; }
.section-head h2 { font-size: clamp(26px, 3vw, 38px); }
.section-head .lead { color: #6B6A62; font-size: 16.5px; }

/* eyebrows: tiny serif caps, single muted colour — the Taj/Cinzel signal,
   done with EB Garamond small caps. No numbers, no dashes. */
.eyebrow-num, .section-head .eyebrow {
  font-family: var(--font-serif);
  font-size: 12.5px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
  color: #9C8A5A;
}
.eyebrow-num::before, .eyebrow-num::after { content: none; }

/* ---------- Buttons: slim rectangles, quiet caps — not chunky pills ---------- */
.btn {
  border-radius: 2px;
  padding: 14px 30px;
  font-size: 12px; letter-spacing: .18em; font-weight: 500;
}
.btn--primary { background: var(--clay-700); box-shadow: none; }
.btn--primary:hover { transform: none; background: #7E3E24; box-shadow: 0 6px 18px -6px rgba(149,75,46,.45); }
.btn--secondary { border-width: 1px; }
.btn--secondary:hover { transform: none; }
.nav__quote { border-radius: 2px !important; padding: 11px 22px !important; font-size: 11px !important; }

/* ---------- Nav: small, letterspaced, quietly confident ---------- */
.nav__menu > li > a {
  font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.nav__menu a::after { height: 1px; }
.nav__planners { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Occasion cards: EDITORIAL, not overlay. Clean image, text below.
   This single change removes most of the "template" feel. ---------- */
.bento { grid-template-columns: repeat(2, 1fr) !important; gap: 44px 36px !important; }
.bento .occasion-card,
.bento .occasion-card:nth-child(n) {
  aspect-ratio: auto !important;
  display: block; overflow: visible;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  isolation: auto;
}
.occasion-card:hover { transform: none; box-shadow: none; }
.occasion-card::before, .occasion-card::after { content: none !important; }
.occasion-card .occasion-card__img {
  position: static; display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: 4px;
}
.occasion-card .occasion-card__img img { transition: transform 900ms var(--ease-out); }
.occasion-card:hover .occasion-card__img img { transform: scale(1.035); }
.occasion-card .occasion-card__body,
.bento .occasion-card:nth-child(1) .occasion-card__body {
  position: static; transform: none !important; padding: 22px 2px 0; color: var(--ink);
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
}
.occasion-card h3, .bento .occasion-card:nth-child(1) h3 {
  font-family: var(--font-serif); font-weight: 500; font-size: 24px; letter-spacing: 0;
  text-transform: none; color: #33322D; margin: 0;
}
.occasion-card p, .bento .occasion-card:nth-child(1) p { color: #6B6A62; font-size: 15.5px; margin: 0; }
.occasion-card .meta {
  order: -1;
  font-family: var(--font-serif); font-style: normal; font-size: 11.5px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: #9C8A5A;
}
/* quiet explore affordance */
.occasion-card .occasion-card__body::after {
  content: "Explore →"; position: static; opacity: 1; transform: none;
  margin-top: 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay-700); transition: letter-spacing 250ms var(--ease-out);
}
.occasion-card:hover .occasion-card__body::after { letter-spacing: .22em; }
@media (max-width: 720px) { .bento { grid-template-columns: 1fr !important; gap: 40px !important; } }

/* ---------- Setup cards: same editorial calm ---------- */
.card--setup { border: 0; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.card--setup:hover { transform: none; box-shadow: none; }
.card--setup .card__art { border-radius: 4px; border-bottom: 0; box-shadow: inset 0 0 0 1px rgba(172,170,145,.4); }
.card--setup .card__body { padding: 20px 2px 0; }
.card--setup h3 {
  font-family: var(--font-serif); font-size: 21px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: #33322D;
}
.card--setup h3::after { content: none; }
.card--setup p { color: #6B6A62; }
.card--setup-all { background: transparent !important; border: 1px solid rgba(156,138,90,.45) !important; border-radius: 4px !important; }
.card--setup-all h3 { color: #33322D !important; }
.card--setup-all p { color: #6B6A62 !important; }
.card--setup-all__arrow { color: var(--clay-700); border-color: rgba(149,75,46,.4); }

/* ---------- The work: white ground, calm captions ---------- */
.section--dark { background: #EFECE4 !important; padding-block: 120px !important; }
.section--dark::before { content: none; }
.section--dark h2, .section--dark .proof__num { color: #33322D; }
.section--dark .section-head .eyebrow, .section--dark .eyebrow-num { color: #9C8A5A !important; }
.section--dark .rail::before { background: linear-gradient(to right, #EFECE4, transparent); }
.section--dark .rail::after { background: linear-gradient(to left, #EFECE4, transparent); }
.section--dark .rail-nav button { border-color: rgba(107,106,98,.4); color: #33322D; }
.section--dark .rail-nav button:hover { background: #33322D; color: #F7F5F0; }
.section--dark .btn--secondary { color: #33322D; border-color: #33322D; }

/* ---------- Facts strip: one quiet line ---------- */
.factstrip { background: transparent; }
.factstrip__inner { padding-block: 34px; }
.fact__icon { display: none; }
.fact b { font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.fact span { font-size: 13px; color: #8A897F; }

/* ---------- Venues row quieter ---------- */
.venues { padding-block: 44px; }
.venues__label { color: #9C8A5A; font-family: var(--font-serif); letter-spacing: .3em; }

/* ---------- Founder chip: subtle ---------- */
.founder-chip { background: transparent; border: 1px solid rgba(156,138,90,.45); color: #33322D; box-shadow: none; }
.founder-chip strong { color: var(--clay-700); }

/* ---------- Coverflow meta + review cards on white ---------- */
.coverflow-caption { color: #33322D; }
.review-card { border: 1px solid rgba(172,170,145,.4); border-top: 2px solid #9C8A5A; box-shadow: none; }
.review-card:hover { transform: none; box-shadow: var(--shadow-1); }

/* ---------- Enquiry band + footer keep sage, everything else breathes ---------- */
.annbar { background: #33322D; }

/* ---------- Instagram strip on the gallery page ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
.ig-item { position: relative; margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 3/4; cursor: zoom-in; }
.ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.ig-item:hover img { transform: scale(1.04); }
.ig-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px;
  background: linear-gradient(to top, rgba(24,32,20,.72), transparent); color: var(--paper); font-size: 13px;
}

/* ==========================================================================
   PRINT & CURVE PASS — Dishoom-inspired craft on the Taj-calm base:
   pill buttons return, print-plate frames, label rules, arch-top imagery,
   sideways captions. Curves are the brand; restraint stays.
   ========================================================================== */

/* ---------- Buttons: pills again, Dishoom-style bordered ---------- */
.btn { border-radius: 999px; padding: 14px 32px; font-size: 12px; letter-spacing: .16em; }
.btn--primary { background: var(--clay-700); }
.btn--secondary { border: 1.5px solid currentColor; }
.nav__quote { border-radius: 999px !important; }
.rail-nav button, .coverflow-nav button { border-radius: 50%; }

/* ---------- Section labels: small caps flanked by hairline rules ---------- */
.section-head { display: flex; flex-direction: column; align-items: center; }
.section-head .eyebrow, .eyebrow-num {
  display: inline-flex; align-items: center; gap: 18px;
  color: #8A7A4F;
}
.section-head .eyebrow::before, .section-head .eyebrow::after,
.eyebrow-num::before, .eyebrow-num::after {
  content: "" !important; display: inline-block; width: 56px; height: 1px;
  background: rgba(138,122,79,.4); transform: none;
}
@media (max-width: 560px) {
  .section-head .eyebrow::before, .section-head .eyebrow::after,
  .eyebrow-num::before, .eyebrow-num::after { width: 28px; }
}
/* left-aligned heads (cinema, founder text) keep a single leading rule */
.cinema .eyebrow-num::after { display: none; }

/* ---------- Print-plate frames: outer border + inner keyline ---------- */
.occasion-card .occasion-card__img,
.ig-item,
.card--setup .card__art {
  border: 1px solid rgba(62,61,56,.55);
  padding: 7px;
  background: var(--white);
  border-radius: 0;
  box-shadow: none;
}
.occasion-card .occasion-card__img img,
.ig-item img,
.card--setup .card__art img { border-radius: 0; }
.occasion-card .occasion-card__img { aspect-ratio: auto; }
.occasion-card .occasion-card__img img { aspect-ratio: 16/10; object-fit: cover; }
.ig-item { aspect-ratio: auto; }
.ig-item img { aspect-ratio: 3/4; object-fit: cover; }
.ig-item figcaption { left: 7px; right: 7px; bottom: 7px; }

/* the mihrab curve where it belongs: setup-card art arches at the top */
.card--setup .card__art { border-radius: 160px 160px 0 0; padding-top: 10px; }
.card--setup .card__art img { border-radius: 150px 150px 0 0; }
.card--setup .card__art { box-shadow: none; background-image: none; }

/* founder niche keyline synchronised with plate language */
.founder-portrait__niche::after { border-color: rgba(233,201,168,.45); }

/* ---------- Sideways captions, the Dishoom device ---------- */
.side-cap { position: relative; }
.side-cap__text {
  position: absolute; left: -34px; bottom: 0; z-index: 3;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-serif); font-style: italic; font-size: 13.5px;
  color: #6B6A62; letter-spacing: .02em; white-space: nowrap;
}
@media (max-width: 900px) { .side-cap__text { display: none; } }

/* ---------- Ink & ground: Dishoom cream, near-ink serif headings ---------- */
body { background: #EFECE2; }
.section--band, .section--dark { background: #E7E3D6 !important; }
h2, .h2, .occasion-card h3, .card--setup h3 { color: #2B2A25; }

/* ---------- Hero: Punjabi script accent returns (brand voice) ---------- */
.hero__pa { display: block; }

/* ---------- Marigold ornament between major sections, used once ---------- */
.marigold-sep { display: flex; justify-content: center; padding: 6px 0 0; }
.marigold-sep::before {
  content: ""; width: 26px; height: 30px; opacity: .5;
  background: var(--marigold-url) center/contain no-repeat;
}

/* ==========================================================================
   MENU BREATHING ROOM — the dish list was two cramped columns in an 820px
   well with a rule under every row. Widen the well, open the leading, drop
   the row borders, and separate the columns with one hairline like a printed
   menu spread.
   ========================================================================== */
.menu-section { max-width: 1020px; }
.menu-cols {
  columns: 2; column-gap: 96px;
  column-rule: 1px solid rgba(172,170,145,.4);
  margin-top: 40px !important;
  margin-bottom: 72px !important;
}
.menu-item { border-bottom: 0; padding-block: 15px; }
.dish { font-size: 20px; line-height: 1.35; color: #2B2A25; }
.dish + .desc, .menu-item .desc { margin-top: 5px; font-size: 15px; line-height: 1.55; }
.menu-section h2, .menu-section h3 { margin-top: 20px; }
@media (max-width: 820px) {
  .menu-cols { columns: 1; column-rule: none; margin-bottom: 48px !important; }
  .menu-item { padding-block: 13px; }
}

/* header actions must never wrap */
.nav__actions { flex-wrap: nowrap; }
.nav__actions .btn, .nav__planners, .nav__quote { white-space: nowrap; }
.nav__menu > li > a { white-space: nowrap; }

/* ==========================================================================
   MOTION LAYER — depth, choreography, dimensional type. The difference
   between dressed-up-static and genuinely modern.
   ========================================================================== */

/* ---------- Split-line heading reveals ---------- */
.split-line { display: block; overflow: hidden; }
.split-line__in {
  display: block; transform: translateY(110%);
  transition: transform 1000ms var(--ease-out);
}
.split-in .split-line__in { transform: none; }
.sw { display: inline; }
html.rm .split-line__in { transform: none !important; }
/* headings that split must not also fade via data-reveal */
.section-head h2, .cinema h2 { opacity: 1 !important; }

/* ---------- Parallax hosts crop their oversized layers ---------- */
.hero__slides, .cinema__bg { overflow: hidden; }
.hero__slide img, .cinema__bg img { will-change: transform; }

/* ---------- Ghost display typography behind section heads ---------- */
.section-head { position: relative; }
.section-head::before {
  content: attr(data-ghost);
  position: absolute; left: 50%; top: -0.32em; transform: translateX(-50%);
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: clamp(90px, 13vw, 190px); line-height: 1; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(138,122,79,.16);
  pointer-events: none; z-index: 0; user-select: none;
}
.section-head > * { position: relative; z-index: 1; }
.cinema .eyebrow-num, .cinema h2, .cinema p, .cinema .venue-list, .cinema .btn-row { position: relative; z-index: 2; }

/* ---------- Big serif marquee divider ---------- */
.marquee {
  display: flex; overflow: hidden; padding: 34px 0; white-space: nowrap;
  border-block: 1px solid rgba(62,61,56,.35);
  background: transparent;
}
.marquee__run {
  display: inline-flex; align-items: baseline; gap: 0;
  animation: marqueeRun 40s linear infinite;
  padding-right: 0;
}
.marquee span {
  font-family: var(--font-serif); font-size: clamp(30px, 4vw, 54px); font-weight: 500;
  color: #2B2A25; padding-right: 26px;
}
.marquee em { font-style: italic; color: var(--clay-700); }
.marquee i {
  font-style: normal; align-self: center; padding-right: 26px;
  width: 30px; height: 34px; flex: none;
  background: var(--marigold-url) center/contain no-repeat; opacity: .55;
}
@keyframes marqueeRun { to { transform: translateX(-100%); } }
.marquee:hover .marquee__run { animation-play-state: paused; }
html.rm .marquee__run { animation: none; }

/* ---------- Rails: grab affordance ---------- */
[data-rail-track].draggable { cursor: grab; }
[data-rail-track].dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
[data-rail-track].dragging * { pointer-events: none; }

/* ---------- Card media gets tilt-ready transform origin ---------- */
.occasion-card .occasion-card__img, .card--setup .card__art { transform-style: preserve-3d; }

/* ---------- Coverflow idle float on the active card ---------- */
@keyframes cfFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -8px; } }
.coverflow__item[data-pos="0"] img { animation: cfFloat 5s ease-in-out infinite; }
html.rm .coverflow__item[data-pos="0"] img { animation: none; }

/* ---------- Scroll cue in the hero ---------- */
.hero__cue {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 6;
  width: 26px; height: 42px; border: 1.5px solid rgba(240,234,224,.7); border-radius: 16px;
}
.hero__cue::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 8px;
  transform: translateX(-50%); border-radius: 3px; background: rgba(240,234,224,.9);
  animation: cue 1.9s ease-in-out infinite;
}
@keyframes cue { 0% { opacity: 0; top: 7px; } 30% { opacity: 1; } 100% { opacity: 0; top: 20px; } }
html.rm .hero__cue { display: none; }
@media (max-width: 640px) { .hero__cue { display: none; } }

/* ==========================================================================
   OCCASIONS — EDITORIAL INDEX. Four huge serif rows with hairlines and a
   cursor-following image preview. The router becomes a moment.
   ========================================================================== */
.occ-index { position: relative; margin-top: 8px; }
.occ-row {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr auto 40px;
  align-items: center; gap: 28px;
  padding: 34px 10px;
  border-top: 1px solid rgba(62,61,56,.28);
  text-decoration: none; color: inherit;
  transition: background 250ms ease, padding-left 350ms var(--ease-out);
}
.occ-row:last-of-type { border-bottom: 1px solid rgba(62,61,56,.28); }
.occ-row:hover { text-decoration: none; background: rgba(255,255,255,.5); padding-left: 26px; }

.occ-row__num {
  font-family: var(--font-serif); font-style: italic; font-size: 17px; color: #9C8A5A;
}
.occ-row__name {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -0.015em;
  color: #2B2A25;
  transition: color 250ms ease, font-style 0ms, transform 350ms var(--ease-out);
}
.occ-row:hover .occ-row__name { color: var(--clay-700); transform: translateX(6px); }

.occ-row__side { text-align: right; display: flex; flex-direction: column; gap: 5px; }
.occ-row__desc { font-size: 15px; color: #6B6A62; }
.occ-row__meta {
  font-family: var(--font-serif); font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: #9C8A5A;
}
.occ-row__arrow {
  font-size: 22px; color: var(--clay-700);
  opacity: 0; transform: translateX(-10px);
  transition: opacity 250ms ease, transform 350ms var(--ease-out);
}
.occ-row:hover .occ-row__arrow { opacity: 1; transform: none; }

/* inline thumb — mobile/touch only; desktop uses the floating preview */
.occ-row__thumb { display: none; }

/* shed-style fixed preview panel — sits beside the rows, wipes on hover */
.occ-index { position: relative; }
.occ-preview {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 3;
  width: clamp(260px, 26vw, 360px);
  overflow: hidden; border-radius: var(--r-md);
  pointer-events: none;
  background: #E7E0D2;
  box-shadow: 0 3px 8px rgba(49,84,33,.08), 0 30px 60px -26px rgba(49,84,33,.4);
}
.occ-preview img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; margin: 0; padding: 0; border: 0;
  opacity: 0;
}
.occ-preview img.is-under { opacity: 0; z-index: 1; }
.occ-preview img.is-out   { opacity: 1; z-index: 2; clip-path: inset(0); }
.occ-preview img.is-in {
  opacity: 1; z-index: 3;
  animation: occWipe 600ms var(--ease-out) both;
}
@keyframes occWipe {
  from { clip-path: inset(100% 0 0 0); transform: scale(1.08) translateY(12px); }
  to   { clip-path: inset(0);          transform: scale(1) translateY(0); }
}
html.rm .occ-preview img.is-in { animation: none; }
@media (prefers-reduced-motion: reduce) { .occ-preview img.is-in { animation: none; } }

/* rows leave room for the panel on desktop */
@media (min-width: 901px) {
  .occ-index .occ-row { margin-right: calc(clamp(260px, 26vw, 360px) + 44px); }
}

@media (max-width: 900px), (hover: none) {
  /* superseded by OCCASIONS ON MOBILE (end of file): rows are heading-only
     and the photo pops beneath the in-view row */
  .occ-preview { display: none; }
}

/* ---------- Pinned horizontal setups: sticky stage ---------- */
.hscroll { position: relative; }
.hscroll__sticky { }
.hscroll-active .hscroll__sticky {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.hscroll-active { padding-block: 0 !important; }
.hscroll-active .setup-strip {
  overflow: visible; width: max-content;
  scroll-snap-type: none;
  will-change: transform;
  cursor: default;
}
.hscroll-active .rail-nav { display: none; }
.hscroll-active .section-head { margin-bottom: 40px; }

/* ---------- Signature script for the wordmark "Chaat" ----------
   Brand script (Alex Brush — the signature face used across TCP assets;
   closest licensed match to Brittany Signature. Swap the src if the
   Brittany Signature file is supplied.) */
@font-face {
  font-family: 'TCP Signature';
  src: url('../fonts/alex-brush-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
.nav__wordmark i {
  font-family: 'TCP Signature', cursive;
  font-style: normal; font-weight: 400;
  font-size: 30px; line-height: .9; letter-spacing: .01em;
  margin: 0;
  color: var(--clay-700);
}
.site-header:not(.is-stuck) .nav__wordmark i { color: #EED9BE; }

/* ==========================================================================
   PERFECTION PASS — hero venue chip, hscroll progress, founder hand-quote,
   pre-footer CTA band, footer signature watermark.
   ========================================================================== */

/* ---------- Hero: slide-synced venue caption ---------- */
.hero__venue {
  position: absolute; left: 40px; bottom: 32px; z-index: 6;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(240,234,224,.85);
}
.hero__venue span { display: none; }
.hero__venue span.is-on { display: inline-flex; align-items: center; gap: 10px; animation: venueIn 600ms var(--ease-out); }
.hero__venue span::before { content: ""; width: 26px; height: 1px; background: rgba(240,234,224,.6); }
@keyframes venueIn { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 640px) { .hero__venue { display: none; } }

/* ---------- Pinned setups: scrub progress hairline ---------- */
.hscroll__progress {
  display: none; width: min(520px, 60vw); height: 2px; margin: 34px auto 46px;
  background: rgba(62,61,56,.18); border-radius: 2px; overflow: hidden;
}
.hscroll-active .hscroll__progress { display: block; }
.hscroll__progress span { display: block; height: 100%; width: 0%; background: var(--clay-700); border-radius: 2px; }

/* ---------- Founder: handwritten pull quote + signature ---------- */
.founder-hand {
  font-family: 'TCP Signature', cursive;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.35; color: var(--sage-900);
  margin: 18px 0 2px; transform: rotate(-1.2deg);
}
.founder-sign {
  font-family: 'TCP Signature', cursive;
  font-size: 24px; color: var(--clay-700); margin: 0 0 12px; transform: rotate(-2deg);
}

/* ---------- Pre-footer CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #4D6448 0%, #315421 70%, #29471E 100%);
  padding-block: clamp(88px, 11vw, 150px);
  text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--jaali-url); background-size: 560px auto;
  opacity: .07; mix-blend-mode: luminosity;
}
.cta-band__marigold {
  position: absolute; left: 50%; top: 34px; transform: translateX(-50%);
  width: 30px; height: 34px; background: var(--marigold-url) center/contain no-repeat;
  filter: invert(1) brightness(1.7); opacity: .5;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band__eyebrow {
  display: inline-block; font-family: var(--font-serif); font-size: 12.5px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: #C9CDB4; margin-bottom: 18px;
}
.cta-band__title {
  font-size: clamp(44px, 6.5vw, 92px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--paper); margin: 0;
}
.cta-band__wa { color: var(--paper); border-color: rgba(232,228,220,.55); }
.cta-band__wa:hover { background: var(--paper); color: var(--sage-900); }

/* ---------- Footer: giant signature watermark ---------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::after {
  content: "Chaat";
  position: absolute; right: -20px; bottom: -70px; z-index: 0;
  font-family: 'TCP Signature', cursive;
  font-size: clamp(160px, 24vw, 340px); line-height: 1;
  color: rgba(232,228,220,.05);
  pointer-events: none; user-select: none;
}
.site-footer .container { position: relative; z-index: 1; }

/* ==========================================================================
   GHAT PAGE-BASE ANCHOR — the Banaras ghats line-drawing sits in the deep
   whitespace at the base of a section: bottom-aligned, multiply-blended so
   only the sage line-art shows, faded at the top, always under content.
   ========================================================================== */
.ghat-anchor { position: relative; overflow: hidden; }
.ghat-anchor > .container { position: relative; z-index: 1; }
.ghat-anchor__art {
  position: absolute; right: -40px; bottom: -6px; z-index: 0;
  width: min(880px, 72vw); height: auto;
  mix-blend-mode: multiply; opacity: .38;
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to top, black 55%, transparent 100%);
  mask-image: linear-gradient(to top, black 55%, transparent 100%);
}
/* give the section extra base room so the art never sits under the rows */
.ghat-anchor { padding-bottom: calc(var(--section-pad) + 150px) !important; }
@media (max-width: 900px) {
  .ghat-anchor__art { width: 120vw; right: -10vw; opacity: .3; }
  .ghat-anchor { padding-bottom: calc(var(--section-pad) + 90px) !important; }
}

/* ---------- Ghat art: dissolve, don't sit ----------
   The PNG carries its own paper rectangle. Two moves erase it:
   1) brightness lift washes its ground to near-white so multiply makes the
      paper invisible and leaves only ink;
   2) a radial mask anchored at the bottom fades the artwork out in every
      direction long before any edge of the file can be seen. */
.ghat-anchor__art {
  opacity: .32;
  filter: brightness(1.14) contrast(1.06);
  -webkit-mask-image: radial-gradient(115% 105% at 76% 102%, #000 34%, transparent 72%);
  mask-image: radial-gradient(115% 105% at 76% 102%, #000 34%, transparent 72%);
  right: -60px; bottom: -10px;
}
@media (max-width: 900px) {
  .ghat-anchor__art {
    opacity: .26;
    -webkit-mask-image: radial-gradient(130% 110% at 60% 102%, #000 30%, transparent 74%);
    mask-image: radial-gradient(130% 110% at 60% 102%, #000 30%, transparent 74%);
  }
}

/* ==========================================================================
   OCCASIONS — hover atmosphere. The whole section takes on a washed,
   full-bleed image of the hovered occasion; rows stay legible under a cream
   veil; the ghat art steps back while it plays.
   ========================================================================== */
.occ-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.occ-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 700ms var(--ease-out), transform 1200ms var(--ease-out);
  will-change: opacity, transform;
}
.occ-bg img.is-active { opacity: 1; transform: scale(1); }
/* cream veil keeps the index readable over any photo */
.occ-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(239,236,226,.96) 0%, rgba(239,236,226,.78) 45%, rgba(239,236,226,.55) 100%),
    linear-gradient(to bottom, rgba(239,236,226,.95) 0%, rgba(239,236,226,.4) 40%, rgba(239,236,226,.9) 100%);
}
.ghat-anchor .occ-bg { opacity: 0; transition: opacity 500ms ease; }
.ghat-anchor.is-atmo .occ-bg { opacity: 1; }
.ghat-anchor.is-atmo .ghat-anchor__art { opacity: .08; }
.ghat-anchor__art { transition: opacity 500ms ease; }
/* rows gain a touch more contrast when atmosphere is on */
.ghat-anchor.is-atmo .occ-row { border-top-color: rgba(62,61,56,.4); }
@media (hover: none) { .occ-bg { display: none; } }

/* ==========================================================================
   VENUES ROW v3 — logos blend into the cream (multiply kills white boxes),
   sit larger, and fade up one by one with the background.
   ========================================================================== */
.venues__logo { height: 54px; width: 148px; }
.venues__logo img {
  mix-blend-mode: multiply;
  filter: saturate(.15) opacity(.68) contrast(1.05);
  transition: filter 350ms ease, transform 350ms var(--ease-out);
}
.venues__logo:hover img { filter: saturate(1) opacity(1) contrast(1); transform: scale(1.05); }
/* staggered fade-up with the section reveal */
.venues__row[data-reveal] { opacity: 1 !important; transform: none !important; }
.venues__row[data-reveal] .venues__logo {
  opacity: 0; transform: translateY(18px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.venues__row[data-reveal].is-in .venues__logo { opacity: 1; transform: none; }
.venues__row.is-in .venues__logo:nth-child(2) { transition-delay: 130ms; }
.venues__row.is-in .venues__logo:nth-child(3) { transition-delay: 260ms; }
.venues__row.is-in .venues__logo:nth-child(4) { transition-delay: 390ms; }
.venues__row.is-in .venues__logo:nth-child(5) { transition-delay: 520ms; }
.venues__row.is-in .venues__logo:nth-child(6) { transition-delay: 650ms; }
@media (max-width: 640px) { .venues__logo { height: 42px; width: 108px; } }

/* ==========================================================================
   OCCASIONS ATMOSPHERE v2 — line-art, not photography. Each hovered event
   summons its own city drawing, dissolved into the page base exactly like
   the resting ghat. Weddings→Lucknow, Corporate→Bambai, Prayer→Banaras,
   House parties→South.
   ========================================================================== */
.occ-bg--art::after { content: none; }              /* no cream veil needed for ink */
.occ-bg--art img {
  /* inherit the ghat dissolve treatment, not full-bleed cover */
  inset: auto; left: auto; right: -60px; bottom: -10px;
  width: min(880px, 72vw); height: auto; object-fit: contain;
  mix-blend-mode: multiply;
  filter: brightness(1.14) contrast(1.06);
  -webkit-mask-image: radial-gradient(115% 105% at 76% 102%, #000 34%, transparent 72%);
  mask-image: radial-gradient(115% 105% at 76% 102%, #000 34%, transparent 72%);
  opacity: 0; transform: none;
  transition: opacity 650ms var(--ease-out);
}
.occ-bg--art img.is-active { opacity: .38; transform: none; }
/* while hovering, the resting Banaras art yields fully to the active drawing */
.ghat-anchor.is-atmo .ghat-anchor__art { opacity: 0; }
@media (max-width: 900px) {
  .occ-bg--art img { width: 120vw; right: -10vw; }
  .occ-bg--art img.is-active { opacity: .3; }
}

/* ==========================================================================
   VENUES ROW v4 — every logo file has real transparency, so no blend games:
   crisp marks, one single row, evenly distributed. Grayscale at rest,
   colour on hover.
   ========================================================================== */
.venues__row {
  flex-wrap: nowrap !important;
  justify-content: space-between;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
}
.venues__logo {
  flex: 0 1 auto;
  height: 46px; width: auto; max-width: 150px; min-width: 0;
}
.venues__logo img {
  mix-blend-mode: normal !important;
  filter: grayscale(1) opacity(.8);
  max-height: 46px;
}
.venues__logo:hover img { filter: grayscale(0) opacity(1); transform: none; }
@media (max-width: 760px) {
  /* small screens: two tidy rows of three, still no bleeding */
  .venues__row { flex-wrap: wrap !important; justify-content: center; gap: 22px 34px; }
  .venues__logo { height: 36px; max-width: 104px; }
  .venues__logo img { max-height: 36px; }
}

/* ==========================================================================
   COUNTER STYLES cards — numbered, grounded in dishes, with a suits-line.
   ========================================================================== */
.card--setup__num {
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
  color: #9C8A5A; display: block; margin-bottom: 4px;
}
.card--setup__dishes {
  font-family: var(--font-serif); font-style: italic;
  font-size: 15.5px; line-height: 1.55; color: #6B6A62; margin: 8px 0 10px;
}
.card--setup__suits {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--clay-700);
  border-top: 1px solid rgba(172,170,145,.5); padding-top: 10px;
}

/* ==========================================================================
   STRUCTURE UNIFICATION — every remaining fold speaks the index/print
   language: hairline rows, italic numerals, serif statements, plate mats.
   ========================================================================== */

/* ---------- A) Facts → editorial ledger ---------- */
.factstrip { border-bottom: 1px solid rgba(62,61,56,.28); }
.ledger { display: grid; grid-template-columns: repeat(3, 1fr); }
.ledger__row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 40px 34px;
  border-left: 1px solid rgba(62,61,56,.22);
}
.ledger__row:first-child { border-left: 0; padding-left: 10px; }
.ledger__num { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: #9C8A5A; }
.ledger__row b {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.01em; color: #2B2A25;
}
.ledger__note { font-size: 14px; color: #8A897F; }
/* staggered rise with the reveal */
.ledger[data-reveal] { opacity: 1 !important; transform: none !important; }
.ledger[data-reveal] .ledger__row { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.ledger[data-reveal].is-in .ledger__row { opacity: 1; transform: none; }
.ledger.is-in .ledger__row:nth-child(2) { transition-delay: 130ms; }
.ledger.is-in .ledger__row:nth-child(3) { transition-delay: 260ms; }
@media (max-width: 760px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger__row { border-left: 0; border-top: 1px solid rgba(62,61,56,.2); padding: 22px 4px; }
  .ledger__row:first-child { border-top: 0; }
}

/* ---------- D) Hill venues → index rows on the dark plate ---------- */
.hill-list { margin: 26px 0 6px; max-width: 460px; }
.hill-list__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 13px 2px;
  border-top: 1px solid rgba(232,228,220,.24);
}
.hill-list__row:last-child { border-bottom: 1px solid rgba(232,228,220,.24); }
.hill-list__row b {
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: 19px; color: #EED9BE; white-space: nowrap;
}
.hill-list__row span { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(232,228,220,.66); text-align: right; }

/* ---------- C) Work rail → print-plate frames with captions beneath ---------- */
.rail__item {
  border: 1px solid rgba(232,228,220,.4);
  padding: 7px 7px 44px;
  background: rgba(254,254,254,.06);
  border-radius: 0;
  aspect-ratio: 3/4.55;
}
.rail__item img { border-radius: 0; }
.rail__item::after { content: none; }
.rail__cap {
  left: 7px; right: 7px; bottom: 12px;
  opacity: 1; transform: none;
  font-size: 13.5px; font-style: italic; text-align: center;
  color: rgba(232,228,220,.85); text-shadow: none;
}
.rail__badge { top: 14px; left: 14px; }
.rail__play { top: 42%; }
/* on the parchment band the frame flips to ink */
.section--dark .rail__item { border-color: rgba(62,61,56,.45); background: var(--white); }
.section--dark .rail__cap { color: #6B6A62; }

/* ---------- B) Enquiry: form sits on a plate mat ---------- */
#enquiry .enquiry-split { margin-top: 8px; }
#enquiry form, #enquiry .enquiry {
  background: var(--white); border: 1px solid rgba(62,61,56,.4);
  padding: 34px;
}
@media (max-width: 640px) { #enquiry form, #enquiry .enquiry { padding: 22px; } }

/* ==========================================================================
   SPLIT STAGES — replaces the card strip and the circle carousel.
   An index of rows on one side, one large plate-framed stage on the other.
   ========================================================================== */
.stage { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
@media (max-width: 980px) { .stage { grid-template-columns: 1fr; gap: 40px; } }

.section-head--left { align-items: flex-start; text-align: left; margin-bottom: 34px; }
.section-head--left::before { left: 0; transform: none; }
.section-head--left .eyebrow-num::before { display: none; }
.section-head--left .lead { margin-inline: 0; }

/* ---- the index rows (shared by styles + films) ---- */
.stage__rows { border-top: 1px solid rgba(62,61,56,.24); }
.stage-row {
  display: grid; grid-template-columns: 42px 1fr auto; align-items: baseline; gap: 16px;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 15px 6px; border-bottom: 1px solid rgba(62,61,56,.24);
  font: inherit; color: inherit;
  transition: background 250ms ease, padding-left 300ms var(--ease-out);
}
.stage-row:hover, .stage-row.is-on { background: rgba(255,255,255,.6); padding-left: 16px; }
.stage-row__num { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: #9C8A5A; }
.stage-row__name {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(19px, 1.9vw, 25px);
  color: #2B2A25; transition: color 200ms ease;
}
.stage-row.is-on .stage-row__name, .stage-row:hover .stage-row__name { color: var(--clay-700); font-style: italic; }
.stage-row__suits { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #9C8A5A; text-align: right; }
@media (max-width: 560px) { .stage-row__suits { display: none; } .stage-row { grid-template-columns: 36px 1fr; } }

/* ---- the stage panel (styles) ---- */
.stage__panel { position: relative; min-height: 520px; }
.stage-item {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out);
  transform: translateY(12px);
}
.stage-item.is-on { opacity: 1; pointer-events: auto; transform: none; }
.stage-item__art {
  display: block; height: 340px;
  border: 1px solid rgba(62,61,56,.5); padding: 8px; background: var(--white);
  border-radius: 190px 190px 3px 3px; overflow: hidden;
}
.stage-item__art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
  border-radius: 182px 182px 0 0;
  mix-blend-mode: multiply; filter: contrast(1.3) saturate(1.1) brightness(.98);
}
/* styles with no city drawing get an ornamental jaali-and-marigold plate */
.stage-item__art--orn {
  background:
    var(--marigold-url) center 58% / 54px no-repeat,
    var(--jaali-url) center / 280px,
    linear-gradient(165deg, #EBE4D4, #DCD3BE);
  background-blend-mode: normal, multiply, normal;
}
.stage-item__body { display: block; padding-top: 22px; }
.stage-item__body h3 {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px);
  color: #2B2A25; margin: 0 0 8px; letter-spacing: -0.01em;
}
.stage-item__dishes { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: #6B6A62; margin: 0 0 12px; }
.stage-item__suits { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--clay-700); border-top: 1px solid rgba(172,170,145,.5); padding-top: 10px; display: inline-block; }
.stage__more { position: absolute; left: 0; bottom: -6px; }
@media (max-width: 980px) { .stage__panel { min-height: 470px; } .stage__more { position: static; display: inline-block; margin-top: 20px; } }

/* ---- film stage (reviews) ---- */
.stage--films { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 980px) { .stage--films { grid-template-columns: 1fr; } }
.film-stage { position: relative; aspect-ratio: 4/3; border: 1px solid rgba(62,61,56,.5); padding: 8px; background: var(--white); }
.film { position: absolute; inset: 8px; margin: 0; opacity: 0; transition: opacity 500ms var(--ease-out); }
.film.is-on { opacity: 1; }
.film img, .film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__play {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%;
  background: rgba(254,254,254,.94); color: var(--clay-700); border: 1px solid rgba(233,201,168,.9);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  transition: transform 300ms var(--ease-spring), background 200ms ease;
}
.film__play:hover { transform: scale(1.08); background: #fff; }
.film.is-playing .film__play { display: none; }
.film figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px;
  background: linear-gradient(to top, rgba(24,32,20,.8), transparent);
  color: var(--paper); font-family: var(--font-serif); font-style: italic; font-size: 15px; text-align: center;
}
.stage__rows--films { align-self: center; }

/* ==========================================================================
   CITY CARD — one single frame. The full menu artwork uncropped, dish
   highlights rising over it on hover, name plate at the base.
   ========================================================================== */
.stage__panel { min-height: 560px; }
.citycard {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(62,61,56,.5);
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(255,255,255,.7), transparent 70%),
    linear-gradient(168deg, #EFE9DA 0%, #E4DCC9 100%);
  padding: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity 550ms var(--ease-out);
}
.citycard.is-on { opacity: 1; pointer-events: auto; }

/* the artwork sits whole — contained, never cropped, never masked */
.citycard__art {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: 92%; height: auto; max-height: 74%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: contrast(1.28) saturate(1.08) brightness(1.02);
  transition: transform 900ms var(--ease-out), opacity 500ms ease;
}
.citycard:hover .citycard__art { transform: translate(-50%, -52%) scale(1.02); }

/* ornamental plate for the styles with no drawing in the menu */
.citycard--orn::before {
  content: ""; position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%);
  width: 78%; height: 62%;
  background:
    var(--marigold-url) center 62% / 62px no-repeat,
    var(--jaali-url) center / 300px;
  background-blend-mode: normal, multiply;
  opacity: .5;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}

/* dish highlights — rise and stagger in on hover */
.citycard__dishes {
  position: absolute; left: 0; right: 0; top: 26px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  list-style: none; margin: 0; padding: 0 26px; z-index: 2;
}
.citycard__dishes li {
  font-family: var(--font-serif); font-style: italic; font-size: 14.5px;
  color: #4A4940;
  background: rgba(254,254,254,.9); border: 1px solid rgba(62,61,56,.28);
  border-radius: 999px; padding: 6px 15px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 420ms var(--ease-out), transform 500ms var(--ease-out);
  transition-delay: calc(var(--d) * 70ms);
}
.citycard.is-on:hover .citycard__dishes li,
.citycard.is-on.is-touch .citycard__dishes li { opacity: 1; transform: none; }

/* name plate at the base of the same frame */
.citycard__cap {
  position: relative; z-index: 2; margin: 0;
  padding: 22px 24px;
  background: linear-gradient(to top, rgba(239,236,226,.97) 55%, rgba(239,236,226,0));
  text-align: center;
}
.citycard__cap h3 {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px);
  color: #2B2A25; margin: 0 0 6px; letter-spacing: -0.01em;
}
.citycard__suits {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--clay-700);
}
/* hint that hovering reveals the dishes */
.citycard__cap::after {
  content: "Hover for the dishes";
  display: block; margin-top: 10px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #A8A79B;
  transition: opacity 300ms ease;
}
.citycard:hover .citycard__cap::after { opacity: 0; }
@media (hover: none) {
  .citycard__cap::after { content: "Dishes on this counter"; }
  .citycard__dishes li { opacity: 1; transform: none; }
}
@media (max-width: 980px) { .stage__panel { min-height: 520px; } }

/* ==========================================================================
   COUNTERS — alternating editorial spread. No list, no accordion, no frames.
   The menu drawings sit directly on the paper; dishes read as a printed
   column beside them, sides alternating down the page.
   ========================================================================== */
.counters { display: flex; flex-direction: column; gap: clamp(60px, 8vw, 120px); margin-top: 8px; }

.counter {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.counter:nth-child(even) { grid-template-columns: .85fr 1.15fr; }
.counter:nth-child(even) .counter__art { order: 2; }
.counter:nth-child(even) .counter__text { order: 1; text-align: right; }
.counter:nth-child(even) .counter__dishes li { justify-content: flex-end; }
.counter:nth-child(even) .counter__suits { margin-left: auto; }
@media (max-width: 860px) {
  .counter, .counter:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .counter:nth-child(even) .counter__art { order: 0; }
  .counter:nth-child(even) .counter__text { order: 0; text-align: left; }
  .counter:nth-child(even) .counter__dishes li { justify-content: flex-start; }
  .counter:nth-child(even) .counter__suits { margin-left: 0; }
}

/* the artwork: no frame, no mat — ink on the page */
.counter__art { position: relative; }
.counter__art img {
  display: block; width: 100%; height: auto;
  mix-blend-mode: multiply;
  filter: contrast(1.3) saturate(1.05) brightness(1.03);
  -webkit-mask-image: radial-gradient(110% 100% at 50% 55%, #000 62%, transparent 96%);
  mask-image: radial-gradient(110% 100% at 50% 55%, #000 62%, transparent 96%);
  transition: transform 1200ms var(--ease-out);
}
.counter:hover .counter__art img { transform: scale(1.02); }

/* the text column */
.counter__num {
  font-family: var(--font-serif); font-style: italic; font-size: 15px; color: #9C8A5A;
  display: block; margin-bottom: 6px;
}
.counter__text h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -0.015em;
  color: #2B2A25; margin: 0 0 10px;
}
.counter__suits {
  display: inline-block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--clay-700); border-bottom: 1px solid rgba(187,104,72,.4); padding-bottom: 8px; margin-bottom: 20px;
}
.counter__dishes { list-style: none; margin: 0; padding: 0; }
.counter__dishes li {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.5;
  color: #5C5B52; padding: 9px 0;
  border-top: 1px solid rgba(62,61,56,.16);
}
.counter__dishes li:first-child { border-top: 0; }

/* ==========================================================================
   MOBILE CHROME — match the live site's restraint.
   Top bar: logo · WhatsApp · menu (no quote button).
   Bottom: one floating WhatsApp pill, no full-width action bar.
   ========================================================================== */
@media (max-width: 1080px) {
  /* the quote CTA lives inside the drawer on mobile, not in the bar */
  .nav__quote { display: none !important; }
  .nav__wa { display: inline-flex !important; }
  .nav__actions { gap: 12px; }
}

/* the bottom action bar is gone everywhere — one floating button instead */
.actionbar { display: none !important; }
body { padding-bottom: 0 !important; }
.float-wa { display: inline-flex !important; }
@media (max-width: 860px) {
  .float-wa {
    right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    width: 56px; height: 56px; padding: 0;
    border-radius: 50%; justify-content: center;
  }
  .float-wa span { display: none; }
}

/* ==========================================================================
   COUNTER CAROUSEL — one screen, five slides. Food photograph carries the
   slide; the menu drawing sits behind the text as a watermark, normalised
   into a fixed box so the differing artwork sizes stop mattering.
   ========================================================================== */
.ccarousel { position: relative; margin-top: 8px; }
.ccarousel__track {
  display: flex; gap: 26px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 40px 8px; scroll-padding-left: 40px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ccarousel__track::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { .ccarousel__track { padding-inline: 20px; scroll-padding-left: 20px; gap: 16px; } }

.cslide {
  flex: none; scroll-snap-align: start;
  width: min(920px, 88vw);
  display: grid; grid-template-columns: 1.05fr .95fr;
  height: 420px;
  background: var(--white);
  border: 1px solid rgba(62,61,56,.34);
  overflow: hidden;
}
@media (max-width: 760px) { .cslide { grid-template-columns: 1fr; height: auto; width: 84vw; } }

/* the food photograph */
.cslide__photo { position: relative; overflow: hidden; background: #EFE9DD; }
.cslide__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1100ms var(--ease-out);
}
.cslide:hover .cslide__photo img { transform: scale(1.04); }
@media (max-width: 760px) { .cslide__photo { height: 230px; } }

/* the text side, with the drawing as a watermark behind it */
.cslide__info {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 38px 40px; overflow: hidden;
  background: linear-gradient(165deg, #F3EFE5 0%, #E9E3D4 100%);
}
@media (max-width: 760px) { .cslide__info { padding: 28px 24px 32px; } }
.cslide__art {
  position: absolute; right: -8%; bottom: -6%;
  width: 78%; height: 62%;
  object-fit: contain; object-position: right bottom;   /* normalises every artwork size */
  mix-blend-mode: multiply; opacity: .3;
  filter: brightness(1.12) contrast(1.05);
  -webkit-mask-image: radial-gradient(105% 100% at 78% 100%, #000 40%, transparent 78%);
  mask-image: radial-gradient(105% 100% at 78% 100%, #000 40%, transparent 78%);
  pointer-events: none;
}
.cslide__info > *:not(.cslide__art) { position: relative; z-index: 1; }
.cslide__num {
  font-family: var(--font-serif); font-style: italic; font-size: 13px; color: #9C8A5A; margin-bottom: 6px;
}
.cslide__info h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(28px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.015em;
  color: #2B2A25; margin: 0 0 16px;
}
.cslide__dishes { list-style: none; margin: 0 0 18px; padding: 0; }
.cslide__dishes li {
  font-family: var(--font-serif); font-style: italic; font-size: 16.5px; color: #5C5B52;
  padding: 7px 0; border-top: 1px solid rgba(62,61,56,.15);
}
.cslide__dishes li:first-child { border-top: 0; }
.cslide__suits {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--clay-700);
}

/* footer controls */
.ccarousel__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; }
.ccarousel__dots { display: flex; gap: 7px; }
.ccarousel__dots button {
  width: 24px; height: 2px; padding: 0; border: 0; cursor: pointer;
  background: rgba(62,61,56,.25); transition: background 250ms ease, width 250ms ease;
}
.ccarousel__dots button.is-on { background: var(--clay-700); width: 40px; }
.ccarousel__nav { display: flex; align-items: center; gap: 10px; }
.ccarousel__nav button {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid rgba(62,61,56,.35); color: #2B2A25;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms ease, color 200ms ease, transform 250ms var(--ease-spring);
}
.ccarousel__nav button:hover { background: var(--sage-900); color: var(--paper); border-color: var(--sage-900); transform: translateY(-2px); }
.ccarousel__menu { margin-left: 8px; padding: 11px 22px !important; font-size: 11.5px !important; }
@media (max-width: 560px) { .ccarousel__menu { display: none; } }

/* ==========================================================================
   DISH CAROUSEL — Dakwala/live-site language: a full-bleed row of tall
   rounded dish cards that drift past, each naming the dish and the counter
   style it belongs to. Compact: one band, not five.
   ========================================================================== */
.dishrail { position: relative; padding-block: 8px 0; }
.dishrail__track {
  display: flex; gap: 22px; width: max-content;
  animation: dishDrift 60s linear infinite;
  will-change: transform;
}
.dishrail:hover .dishrail__track { animation-play-state: paused; }
@keyframes dishDrift { to { transform: translateX(-50%); } }
html.rm .dishrail__track { animation: none; }

.dishcard {
  position: relative; flex: none;
  width: clamp(230px, 22vw, 300px); aspect-ratio: 3/4.3;
  border-radius: 22px; overflow: hidden; margin: 0;
  background: #EFE9DD;
  box-shadow: 0 2px 6px rgba(49,84,33,.07), 0 18px 40px -18px rgba(49,84,33,.28);
}
.dishcard img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease-out); }
.dishcard:hover img { transform: scale(1.05); }
.dishcard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(24,32,20,.82) 0%, rgba(24,32,20,.12) 46%, transparent 68%);
}
.dishcard figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 18px;
  color: var(--paper); text-align: left;
}
.dishcard__name {
  display: block; font-family: var(--font-serif); font-size: 18px; line-height: 1.25; margin-bottom: 5px;
}
.dishcard__style {
  display: inline-block; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #EED9BE; border-top: 1px solid rgba(238,217,190,.45); padding-top: 7px;
}
/* edge fades so the rail reads as endless */
.dishrail::before, .dishrail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 3; pointer-events: none;
}
.dishrail::before { left: 0; background: linear-gradient(to right, #EFECE2, transparent); }
.dishrail::after { right: 0; background: linear-gradient(to left, #EFECE2, transparent); }
@media (max-width: 640px) {
  .dishcard { width: 62vw; }
  .dishrail::before, .dishrail::after { width: 40px; }
}

/* ==========================================================================
   FOLD RHYTHM — the page reads as chapters, not one endless cream sheet.
   Three paper tones alternate between the dark photographic bands, each
   separated by a hairline so the change is felt without being loud.
   ========================================================================== */
:root {
  --ground-mist: #F4F2EA;   /* lightest — intro, founder */
  --ground-warm: #EAE5D8;   /* mid — occasions, reviews */
  --ground-clay: #EFE6DC;   /* clay-tinted — dishes, enquiry */
}
.band { position: relative; }
.band--mist { background: var(--ground-mist); }
.band--warm { background: var(--ground-warm); }
.band--clay { background: var(--ground-clay); }

/* a hairline marks each chapter change */
.band + .band, .band + .section--dark, .section--dark + .band,
.cinema + .band, .band + .cinema { border-top: 1px solid rgba(62,61,56,.16); }

/* the ghat art and edge fades must follow whichever ground they sit on */
.band--warm .dishrail::before, .band--warm .rail::before { background: linear-gradient(to right, var(--ground-warm), transparent); }
.band--warm .dishrail::after,  .band--warm .rail::after  { background: linear-gradient(to left,  var(--ground-warm), transparent); }
.band--clay .dishrail::before { background: linear-gradient(to right, var(--ground-clay), transparent); }
.band--clay .dishrail::after  { background: linear-gradient(to left,  var(--ground-clay), transparent); }
.band--mist .rail::before { background: linear-gradient(to right, var(--ground-mist), transparent); }
.band--mist .rail::after  { background: linear-gradient(to left,  var(--ground-mist), transparent); }

/* keep the earlier flat overrides from fighting the new grounds */
.section--band { background: transparent !important; }
.factstrip.band--mist, .venues.band--mist { background: var(--ground-mist); }

/* dark chapters keep their weight; slightly deeper so the contrast reads */
.section--dark { background: #46583F !important; }

/* ---------- Dish illustrations: drawn, not photographed ----------
   Transparent PNGs on the paper ground — no crop, no dark scrim, caption
   printed beneath like a menu plate. */
.dishcard {
  aspect-ratio: 3/3.5; background: transparent;
  box-shadow: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: clamp(210px, 20vw, 268px);
}
.dishcard img {
  width: 100%; height: auto; object-fit: contain;
  mix-blend-mode: multiply;
  filter: contrast(1.06) saturate(1.05);
}
.dishcard::after { content: none; }
.dishcard figcaption {
  position: static; padding: 14px 6px 0; text-align: center; color: inherit;
  border-top: 1px solid rgba(62,61,56,.18); margin-top: 14px; width: 82%;
}
.dishcard__name { font-size: 17px; color: #2B2A25; margin-bottom: 4px; }
.dishcard__style { color: var(--clay-700); border-top: 0; padding-top: 0; }
.dishcard:hover img { transform: scale(1.05) rotate(-1deg); }

/* ---------- Dish cards revert to PHOTOGRAPHS (illustrations dropped) ---------- */
.dishcard {
  aspect-ratio: 3/4.2;
  border-radius: 20px; overflow: hidden;
  background: #EFE9DD;
  box-shadow: 0 2px 6px rgba(49,84,33,.07), 0 18px 40px -18px rgba(49,84,33,.28);
  display: block; width: clamp(230px, 21vw, 290px);
}
.dishcard img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: normal; filter: saturate(1.06) contrast(1.03);
}
.dishcard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(24,32,20,.86) 0%, rgba(24,32,20,.14) 48%, transparent 70%);
}
.dishcard figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; width: auto;
  padding: 20px 18px; margin: 0; border-top: 0; text-align: left; color: var(--paper);
}
.dishcard__name { font-size: 18px; color: var(--paper); }
.dishcard__style { color: #EED9BE; border-top: 1px solid rgba(238,217,190,.45); padding-top: 7px; }
.dishcard:hover img { transform: scale(1.05) rotate(0deg); }

/* ==========================================================================
   HILL BAND v2 — copy left, four real venue photographs right. Replaces the
   hairline list so this fold has its own photographic identity.
   ========================================================================== */
.cinema__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 78px); align-items: center; }
@media (max-width: 900px) { .cinema__split { grid-template-columns: 1fr; gap: 34px; } }
.cinema__copy { max-width: 560px; }

/* compact inline facts instead of a bulleted list */
.cinema__facts { display: flex; flex-wrap: wrap; gap: 26px 34px; margin-top: 26px; }
.cinema__facts span { display: flex; flex-direction: column; gap: 3px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(232,228,220,.72); }
.cinema__facts b { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 24px; letter-spacing: 0; text-transform: none; color: #EED9BE; }

/* the venue photo grid */
.venuegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.venuegrid__item { position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden; border-radius: 14px; background: #1F1F1D; }
.venuegrid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.venuegrid__item:hover img { transform: scale(1.06); }
.venuegrid__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,24,15,.88) 0%, rgba(18,24,15,.15) 55%, transparent 78%);
}
.venuegrid__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 14px 13px; }
.venuegrid__item figcaption b {
  display: block; font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 16px; color: #EED9BE; margin-bottom: 2px;
}
.venuegrid__item figcaption span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(232,228,220,.7); }
@media (max-width: 520px) { .venuegrid { gap: 12px; } .venuegrid__item figcaption b { font-size: 14px; } }

/* ==========================================================================
   VENUE SLIDESHOW — one large frame instead of four unreadable tiles.
   Crossfades through the hill properties, with dots and a counter.
   ========================================================================== */
.venueshow { width: 100%; }
.venueshow__stage {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  border-radius: 16px; background: #1F1F1D;
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.65);
}
.venueslide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 900ms var(--ease-out);
}
.venueslide.is-on { opacity: 1; }
.venueslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.venueslide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,24,15,.88) 0%, rgba(18,24,15,.2) 46%, transparent 68%);
}
.venueslide figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px 26px; }
.venueslide figcaption b {
  display: block; font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(20px, 2vw, 27px); color: #EED9BE; margin-bottom: 4px;
}
.venueslide figcaption span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(232,228,220,.78); }

.venueshow__bar { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.venueshow__dots { display: flex; gap: 8px; }
.venueshow__dots button {
  width: 26px; height: 2px; padding: 0; border: 0; cursor: pointer;
  background: rgba(232,228,220,.34); transition: background 250ms ease, width 250ms ease;
}
.venueshow__dots button.is-on { background: #EED9BE; width: 44px; }
.venueshow__count { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: rgba(232,228,220,.65); }

/* ==========================================================================
   HILL BAND — solid ground. With a large photo slideshow on the right, a
   photographic background competed with it. The fold keeps its dark weight
   from ink and a whisper of jaali instead.
   ========================================================================== */
.cinema--solid {
  background:
    radial-gradient(120% 90% at 78% 20%, rgba(233,201,168,.10), transparent 60%),
    linear-gradient(168deg, #3E5138 0%, #2C3F26 55%, #24371F 100%);
}
.cinema--solid::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--jaali-url) center / 520px;
  opacity: .05; mix-blend-mode: overlay; pointer-events: none;
}
.cinema--solid .container { position: relative; z-index: 1; }
.cinema--solid .cinema__caption { display: none; }

/* ---------- Facts: one slim line, not three stacked blocks ---------- */
.factline {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 14px 22px; margin: 0; padding-block: 26px;
  font-family: var(--font-serif); font-size: clamp(15px, 1.5vw, 18px); color: #4A4940;
}
.factline i {
  width: 16px; height: 18px; flex: none; opacity: .45;
  background: var(--marigold-url) center/contain no-repeat;
}
@media (max-width: 720px) {
  .factline { flex-direction: column; gap: 8px; padding-block: 22px; text-align: center; }
  .factline i { display: none; }
}

/* ==========================================================================
   HORIZONTAL OVERFLOW FIX — the drifting dish rail and the work rail were
   pushing the document 2000px+ wide, which showed as dead white space to the
   right of every section. Each rail must clip to its own band.
   ========================================================================== */
html, body { overflow-x: hidden; max-width: 100%; }
.dishrail, .rail, .ccarousel, .marquee, .logo-marquee, .tape { overflow: hidden; max-width: 100vw; }
.dishrail__track { will-change: transform; }
.rail__track { max-width: 100%; }
/* animated tracks are allowed to be wider than the screen — but only inside
   a clipping parent, never against the document */
section, .band, .factstrip, .venues, .cinema, .site-footer { overflow-x: clip; }

/* ==========================================================================
   HILL BAND — layered, not flat. Deep sage ground + a blurred atmospheric
   wash of a real hill night + hairline mihrab architecture + jaali. Depth
   and brand language, with nothing competing against the slideshow.
   ========================================================================== */
.cinema--layered {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 70% at 20% 0%, rgba(233,201,168,.12), transparent 62%),
    radial-gradient(80% 80% at 92% 88%, rgba(187,104,72,.20), transparent 66%),
    linear-gradient(168deg, #40543A 0%, #2C3F26 52%, #1F3119 100%);
}
/* the atmosphere: a real photograph, blurred to pure light and colour */
.cinema__atmos { position: absolute; inset: -8%; z-index: 0; pointer-events: none; }
.cinema__atmos img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(46px) saturate(1.5) brightness(.62);
  opacity: .5;
  transform: scale(1.08);
}
/* jaali, drifting slowly so the band never feels static */
.cinema--layered::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--jaali-url) center / 420px;
  opacity: .07; mix-blend-mode: overlay;
  animation: jaaliDrift 90s linear infinite;
}
@keyframes jaaliDrift { to { background-position: 420px 420px; } }
html.rm .cinema--layered::before { animation: none; }
/* a warm vignette so the copy side stays readable */
.cinema--layered::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(20,30,16,.82) 0%, rgba(20,30,16,.42) 46%, rgba(20,30,16,.12) 100%);
}
/* mihrab architecture drawn in gold hairlines along the base */
.cinema__arches {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  width: 100%; height: min(62%, 420px);
  color: rgba(233,201,168,.16);
  pointer-events: none;
}
.cinema--layered .container { position: relative; z-index: 2; }


/* ==========================================================================
   HILL BAND v3 — the blurred photo made it muddy and near-black. Ground is
   now a clean, warm sage with real tonal movement; the mihrab architecture
   is actually visible; the slideshow gets the weight it needs.
   ========================================================================== */
.cinema--layered {
  background:
    radial-gradient(75% 65% at 88% 12%, rgba(233,201,168,.22), transparent 58%),
    radial-gradient(65% 60% at 8% 92%, rgba(187,104,72,.20), transparent 62%),
    linear-gradient(155deg, #52684A 0%, #3C5134 46%, #2E4128 100%);
}
/* softer directional shade — readability without blackness */
.cinema--layered::after {
  background: linear-gradient(102deg, rgba(26,38,20,.62) 0%, rgba(26,38,20,.26) 44%, rgba(26,38,20,0) 78%);
}
/* jaali: present enough to read as pattern */
.cinema--layered::before { opacity: .10; background-size: 380px; }

/* the arches now read as architecture */
.cinema__arches {
  color: rgba(233,201,168,.30);
  height: min(76%, 520px);
}

/* give the slideshow the dominant column */
.cinema__split { grid-template-columns: .92fr 1.08fr; align-items: center; }
@media (max-width: 900px) { .cinema__split { grid-template-columns: 1fr; } }
.venueshow__stage { aspect-ratio: 5/4; box-shadow: 0 30px 70px -24px rgba(0,0,0,.72); }
.cinema--layered { padding-block: clamp(76px, 9vw, 118px); }
.cinema--layered > .container { padding-block: 0; }

/* ==========================================================================
   BRAND CORNER — the menu's own device, scaled down to punctuation.
   In the printed menu an olive jaali block sits at the top edge with a
   scalloped mihrab arch cut out of it, revealing the paper beneath. Here it
   becomes a corner stamp: same olive (#585741), same jaali, same arch cut,
   sized small and faded so it signs the page without competing with content.
   ========================================================================== */
.brandcorner {
  position: absolute; top: 0; z-index: 0; pointer-events: none;
  width: clamp(220px, 26vw, 400px);
  height: clamp(120px, 15vw, 210px);
  background-image: url('../img/jaali-olive.jpg');
  background-size: 300px;
  opacity: .16;
  /* the scalloped arch, cut from the block's lower edge */
  -webkit-mask-image:
    radial-gradient(58% 100% at 50% 0, #000 62%, transparent 63%),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(58% 100% at 50% 0, #000 62%, transparent 63%),
    linear-gradient(#000, #000);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}
.brandcorner--right { right: 0; border-bottom-left-radius: 40% 90%; }
.brandcorner--left  { left: 0;  border-bottom-right-radius: 40% 90%; }
/* a marigold sits under the arch apex, as it does in the menu */
.brandcorner::after {
  content: ""; position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  width: 22px; height: 26px; opacity: .5;
  background: var(--marigold-url) center/contain no-repeat;
}
.band { position: relative; }
.band > .container { position: relative; z-index: 1; }
@media (max-width: 640px) { .brandcorner { opacity: .11; height: 96px; } }

/* ---------- Founder: facts row + signature, no invented quote ---------- */
.founder-copy { max-width: 560px; }
.founder-facts {
  display: flex; flex-wrap: wrap; gap: 20px 36px;
  margin: 26px 0 20px; padding-top: 20px;
  border-top: 1px solid rgba(62,61,56,.2);
}
.founder-facts span { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #8A897F; }
.founder-facts b {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 23px; letter-spacing: 0; text-transform: none; color: var(--clay-700);
}
.founder-sign {
  font-family: 'TCP Signature', cursive; font-size: 26px; color: var(--sage-900);
  margin: 0; transform: rotate(-1.5deg); transform-origin: left center;
}

/* ---------- Founder portrait: a real photograph in the mihrab arch ----------
   The cutout PNG never sat properly. This crops the studio headshot into the
   arch itself — no niche needed behind it. */
.founder-portrait--photo { aspect-ratio: 4/5; width: min(420px, 100%); display: block; }
.founder-portrait--photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; object-position: center 30%;
  border-radius: 210px 210px 10px 10px;
  filter: saturate(1.03) contrast(1.03);
  box-shadow: 0 26px 56px -22px rgba(49,84,33,.5);
}
.founder-portrait--photo::after {
  content: ""; position: absolute; inset: -12px;
  border: 1px solid rgba(187,104,72,.32);
  border-radius: 222px 222px 14px 14px;
  pointer-events: none;
}
.founder-portrait--photo .founder-portrait__marigold { top: -30px; z-index: 3; }

/* ---------- Founder headline: the origin fact carries the fold ---------- */
.founder-head {
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.founder-head__place {
  font-style: italic; color: var(--clay-700);
  position: relative; white-space: nowrap;
}
.founder-head__place::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: 2px;
  background: rgba(187,104,72,.35); border-radius: 2px;
}
.founder-head__year {
  position: relative; display: inline-block;
  font-family: var(--font-serif); font-weight: 600;
  font-size: 1.32em; letter-spacing: -0.01em; color: var(--sage-900);
}
.founder-head__rule {
  position: absolute; left: 0; right: -18px; bottom: -12px; height: 1px;
  background: linear-gradient(to right, var(--clay-700), rgba(187,104,72,0));
}
/* the split-line reveal must not fight the structured headline */
.founder-head .split-line__in { transform: none !important; }


/* ==========================================================================
   FOUNDER FOLD — full-bleed portrait against a dated timeline. Editorial,
   structurally distinct from every other fold, and factual throughout.
   ========================================================================== */
.founderfold {
  position: relative;
  display: grid; grid-template-columns: minmax(300px, 40%) 1fr;
  align-items: stretch; gap: 0;
  padding: 0 !important;
  overflow: hidden;
}
@media (max-width: 900px) { .founderfold { grid-template-columns: 1fr; } }

/* the portrait bleeds to the page edge */
.founderfold__portrait {
  position: relative; margin: 0; min-height: 560px; overflow: hidden;
  background: #2E4128;
}
@media (max-width: 900px) { .founderfold__portrait { min-height: 400px; } }
.founderfold__portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: saturate(1.02) contrast(1.04);
}
.founderfold__portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(24,32,20,.86) 0%, rgba(24,32,20,.1) 42%, transparent 62%);
}
.founderfold__portrait figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 30px;
}
.founderfold__portrait figcaption b {
  display: block; font-family: 'TCP Signature', cursive; font-size: 34px;
  color: #EED9BE; line-height: 1; margin-bottom: 6px;
}
.founderfold__portrait figcaption span {
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(232,228,220,.78);
}

/* the copy column */
.founderfold__body { display: flex; align-items: center; padding: clamp(56px, 7vw, 104px) clamp(28px, 5vw, 84px); }
.founderfold__inner { max-width: 620px; }
.founderfold .founder-head { font-size: clamp(32px, 3.8vw, 52px); margin-bottom: 34px; }

/* the timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 92px 1fr; gap: 22px;
  padding: 20px 0; border-top: 1px solid rgba(62,61,56,.18);
  position: relative;
}
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline__year {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 21px; color: var(--clay-700); line-height: 1.3;
}
.timeline b {
  display: block; font-family: var(--font-serif); font-weight: 500;
  font-size: 19px; color: #2B2A25; margin-bottom: 5px;
}
.timeline p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #6B6A62; }
@media (max-width: 560px) {
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
  .timeline__year { font-size: 18px; }
}

.founderfold__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(62,61,56,.18);
}
.founderfold .founder-sign { font-size: 27px; margin: 0; }

/* ---------- Founder fold: quieter, more air ---------- */
.founderfold { grid-template-columns: minmax(280px, 36%) 1fr; }
.founderfold__portrait { min-height: 480px; }
.founderfold__body { padding: clamp(64px, 8vw, 116px) clamp(28px, 6vw, 96px); }
.founderfold .founder-head { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 20px; }
.founderfold__lead {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; color: #5C5B52;
  max-width: 46ch; margin: 0;
}
.founderfold__foot { margin-top: 40px; padding-top: 26px; }
@media (max-width: 900px) { .founderfold__portrait { min-height: 360px; } }

/* ==========================================================================
   FOUNDER FOLD v3 — on the grid. Copy starts at the same left edge as every
   other section; the portrait sits beside it inside the container.
   ========================================================================== */
.founderfold { display: block; padding-block: var(--section-pad) !important; overflow: visible; }
.founderfold__grid {
  display: grid; grid-template-columns: 1fr minmax(290px, 390px);
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
@media (max-width: 900px) { .founderfold__grid { grid-template-columns: 1fr; gap: 36px; } }
.founderfold__inner { max-width: 620px; }

.founderfold__portrait {
  position: relative; margin: 0; aspect-ratio: 4/5; overflow: hidden;
  border-radius: 195px 195px 12px 12px; min-height: 0; background: #2E4128;
  box-shadow: 0 26px 56px -24px rgba(49,84,33,.45);
}
.founderfold__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.founderfold__portrait figcaption { padding: 22px 24px; }
.founderfold__portrait figcaption b { font-size: 29px; }
@media (max-width: 900px) { .founderfold__portrait { width: min(330px, 100%); margin-inline: auto; } }

/* his own profiles */
.founderfold__links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.founderfold__links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: 999px;
  border: 1px solid rgba(62,61,56,.28); color: #4A4940;
  font-size: 12.5px; letter-spacing: .06em; text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease, transform 220ms var(--ease-out);
}
.founderfold__links a:hover { border-color: var(--clay-500); color: var(--clay-700); transform: translateY(-2px); text-decoration: none; }

/* ==========================================================================
   FOUNDER PORTRAIT v4 — no window frame. The studio grey is graded warm and
   the edges dissolve into the page, so Sumit emerges from the paper. One
   hairline arch sits behind him as a nod to the brand device, not a box.
   ========================================================================== */
.founderfold__portrait {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  aspect-ratio: 4/4.6;
  display: flex; align-items: flex-end; justify-content: center;
}
.founderfold__halo {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: 104%; height: 92%; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 52% at 50% 48%, rgba(233,201,168,.42), rgba(233,201,168,.12) 58%, transparent 76%);
}
.founderfold__arc {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 88%; height: 94%; z-index: 1; pointer-events: none;
  color: rgba(187,104,72,.28);
}
.founderfold__portrait img {
  position: relative; z-index: 2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 14%;
  border-radius: 0;
  filter: saturate(.92) sepia(.16) contrast(1.05) brightness(1.02);
  -webkit-mask-image: radial-gradient(62% 66% at 50% 40%, #000 52%, rgba(0,0,0,.55) 72%, transparent 92%);
  mask-image: radial-gradient(62% 66% at 50% 40%, #000 52%, rgba(0,0,0,.55) 72%, transparent 92%);
}
.founderfold__portrait::after { content: none !important; }
.founderfold__portrait figcaption {
  position: relative; z-index: 3; padding: 0; text-align: center; margin-top: -14px;
}
.founderfold__portrait figcaption b {
  font-family: 'TCP Signature', cursive; font-size: 34px; color: var(--clay-700); margin-bottom: 2px;
}
.founderfold__portrait figcaption span { color: #8A897F; }

/* ==========================================================================
   HEADER LOGO — the terracotta mark over the hero (it reads warm against the
   photograph), the sage mark once the header goes solid. No white filter.
   ========================================================================== */
.nav__brand { position: relative; }
.nav__logo { transition: opacity 300ms ease; }
.nav__logo--clay { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
/* over the hero: terracotta */
.site-header:not(.is-stuck) .nav__logo--sage { opacity: 0; }
.site-header:not(.is-stuck) .nav__logo--clay { opacity: 1; }
.site-header:not(.is-stuck) .nav__brand img { filter: none !important; opacity: 1; }
/* scrolled / inner pages: sage */
.site-header.is-stuck .nav__logo--sage { opacity: 1; }
.site-header.is-stuck .nav__logo--clay { opacity: 0; }
body:not(.home) .site-header:not(.is-stuck) .nav__logo--sage { opacity: 1; }
body:not(.home) .site-header:not(.is-stuck) .nav__logo--clay { opacity: 0; }

/* ==========================================================================
   FOUNDER PORTRAIT v5 — clean rounded frame, matching the venue slideshow,
   dish cards and work tiles. No dissolve, no window arch.
   ========================================================================== */
.founderfold__portrait {
  aspect-ratio: 4/5;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  background: #EFE9DD !important;
  box-shadow: 0 2px 6px rgba(49,84,33,.07), 0 22px 48px -20px rgba(49,84,33,.3) !important;
  display: block;
}
.founderfold__halo, .founderfold__arc { display: none !important; }
.founderfold__portrait img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  border-radius: 0;
  filter: saturate(1.02) contrast(1.03);
  -webkit-mask-image: none !important; mask-image: none !important;
}
/* name plate back on the image, quiet gradient */
.founderfold__portrait::after {
  content: "" !important; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(24,32,20,.78) 0%, rgba(24,32,20,.1) 38%, transparent 58%);
}
.founderfold__portrait figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 22px 24px; margin: 0; text-align: left;
}
.founderfold__portrait figcaption b { font-size: 30px; color: #EED9BE; }
.founderfold__portrait figcaption span { color: rgba(232,228,220,.78); }

/* ==========================================================================
   WORDMARK — "Chaat" set in Parlare Regular.
   Drop the licensed file at assets/fonts/parlare-regular.woff2 (or .otf /
   .ttf — all three are declared) and it takes over automatically. Until then
   the stack falls through to TCP Signature so the header never goes unstyled.
   ========================================================================== */
@font-face {
  font-family: 'Parlare';
  src: url('../fonts/parlare-regular.woff2') format('woff2'),
       url('../fonts/parlare-regular.woff')  format('woff'),
       url('../fonts/parlare-regular.otf')   format('opentype'),
       url('../fonts/parlare-regular.ttf')   format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
.nav__wordmark i,
.nav-drawer__wordmark i {
  font-family: 'Parlare', 'TCP Signature', cursive;
}

/* ==========================================================================
   THE WORK v2 — lead plate + contact sheet.
   Deliberately unlike every other fold: captions sit OUTSIDE the frame
   (everything else overlays), and motion is vertical column drift
   (the dish rail owns horizontal drag). No venue names — the hill fold
   and the reviews already name them twice.
   ========================================================================== */
.plates { padding-block: 84px 90px; overflow-x: clip; }
.plates .section-head { margin-bottom: 44px; }
.plates .section-head__lead {
  margin: 14px 0 0; max-width: 44ch;
  font-family: var(--font-serif); font-style: italic;
  font-size: 18px; line-height: 1.6; color: rgba(232,228,220,.62);
}

/* ---- plate: frame + caption beneath ---- */
.plate { margin: 0; }
.plate__frame {
  display: block; position: relative; width: 100%;
  aspect-ratio: var(--ar, 4/5);
  padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-md); overflow: hidden;
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
  -webkit-tap-highlight-color: transparent;
}
.plate__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.001);
  transition: transform .9s cubic-bezier(.16,1,.3,1), filter .5s ease;
  filter: saturate(.98);
}
.plate__frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  pointer-events: none;
}
.plate__frame:hover img,
.plate__frame:focus-visible img { transform: scale(1.045); filter: saturate(1.06); }
.plate__frame:focus-visible { outline: 2px solid #E9C9A8; outline-offset: 3px; }

.plate__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20,26,18,.55); color: #F3EFE6;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22);
  transition: scale .4s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.plate__frame:hover .plate__play { scale: 1.08; background: rgba(20,26,18,.72); }

/* caption OUTSIDE the image — the distinguishing move of this fold */
.plate__cap {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 14px; padding-right: 8px;
}
.plate__cap i {
  flex: none; font-style: normal;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 10px; letter-spacing: .22em;
  color: rgba(233,201,168,.72);
  padding-top: 3px;
}
.plate__cap span {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.45;
  color: rgba(238,234,226,.86);
}

/* ---- lead plate ---- */
.plate--lead { margin-bottom: 44px; }
.plate--lead .plate__frame { aspect-ratio: 16/8.2; }
.plate--lead .plate__cap { margin-top: 18px; }
.plate--lead .plate__cap span { font-size: 21px; font-style: italic; color: rgba(238,234,226,.92); }

/* ---- contact sheet: three drifting columns ---- */
.sheet {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; align-items: start;
}
.sheet__col {
  display: flex; flex-direction: column; gap: 30px;
  will-change: transform;
}
.sheet__col:nth-child(2) { margin-top: 40px; }
.sheet__col:nth-child(3) { margin-top: 18px; }

/* text plate — closes the third column instead of a centred button */
.plate--note {
  border-top: 1px solid rgba(233,201,168,.24);
  padding-top: 22px; margin-top: 4px;
}
.plate--note p {
  margin: 0 0 16px;
  font-family: var(--font-serif); font-size: 17px; line-height: 1.62;
  color: rgba(238,234,226,.78);
}
.plate--note .link-more { color: #E9C9A8; }
.plate--note .link-more::after { background: rgba(233,201,168,.5); }

@media (max-width: 980px) {
  .sheet { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .sheet__col:nth-child(2) { margin-top: 40px; }
  .sheet__col:nth-child(3) { margin-top: 0; grid-column: 1 / -1; }
  .sheet__col:nth-child(3) { flex-direction: row; align-items: flex-start; gap: 24px; }
  .sheet__col:nth-child(3) > * { flex: 1 1 0; }
}
@media (max-width: 640px) {
  .plates { padding-block: 68px 76px; }
  .sheet { grid-template-columns: 1fr; gap: 34px; }
  .sheet__col { gap: 34px; margin-top: 0 !important; transform: none !important; }
  .sheet__col:nth-child(3) { flex-direction: column; }
  .plate--lead { margin-bottom: 38px; }
  .plate--lead .plate__frame { aspect-ratio: 4/3; }
  .plate--lead .plate__cap span { font-size: 18px; }
  .plate__cap span { font-size: 15.5px; }
}


/* ==========================================================================
   REVIEWS — 3D coverflow. Featured review centred, neighbours receding in
   perspective; click a side card (or the arrows) to bring it forward.
   Geometry ported from the live techhands build; palette moved onto the
   relaunch tokens (clay for the stars/ring, not gold).
   ========================================================================== */
.revgal-band .section-head { margin-bottom: 34px; }
.revgal { position: relative; overflow: hidden; padding: 8px 0; }

.revgal__stage {
  position: relative; height: clamp(400px, 58vh, 560px);
  perspective: 1700px;
  /* no preserve-3d: with it, Chrome hit-tests this element's own z=0 plane
     in front of the negative-Z flank cards, making them unclickable */
}
.revg {
  position: absolute; top: 0; left: 50%;
  width: clamp(250px, 26vw, 372px); height: 100%;
  transform: translateX(-50%); transform-origin: center center;
  transition: transform .55s var(--ease-out), opacity .55s ease;
  will-change: transform; cursor: pointer;
  display: flex; align-items: stretch;
}
.revg__art {
  position: relative; width: 100%; height: 100%;
  border-radius: 14px; overflow: hidden; background: #1B1F18;
  box-shadow: 0 34px 64px -22px rgba(28,38,22,.62);
}
.revg__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.revg__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(20,26,17,.62), rgba(20,26,17,.04) 55%);
}
.revg__art video { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; background: #000; }
.revg__art.is-playing::after,
.revg__art.is-playing .revg__tag { display: none; }

/* corner badge */
.revg__tag {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #F5F1E8;
  background: rgba(20,26,17,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 6px 12px; border-radius: 999px;
}

/* play control — only reachable on the centred card */
.revg__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 5;
  width: 68px; height: 68px; border-radius: 50%; padding-left: 4px;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--sage-900);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--clay-500), 0 10px 26px rgba(20,26,17,.42);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, scale .25s ease, background .25s ease;
}
.revg.is-active .revg__play { opacity: 1; pointer-events: auto; }
.revg.is-active .revg__play:hover { scale: 1.08; background: #fff; }
.revg__play:focus-visible { outline: 2px solid var(--clay-700); outline-offset: 4px; }

/* ---- caption beneath ---- */
.revgal__caption { max-width: 660px; margin: 26px auto 0; text-align: center; }
.revgal__stars { display: inline-flex; gap: 5px; color: var(--clay-500); margin-bottom: 14px; }
.revgal__caption blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(19px, 2vw, 25px); line-height: 1.42;
  color: var(--sage-900);
}

/* ---- client bar ---- */
.revgal__bar {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; margin-top: 22px;
}
.revg-nav {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  border: 1px solid rgba(49,84,33,.24); background: transparent;
  color: var(--sage-900); font-size: 21px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.revg-nav:hover { background: var(--clay-700); color: #F5F1E8; border-color: transparent; }
.revg-nav:focus-visible { outline: 2px solid var(--clay-700); outline-offset: 3px; }

.revg-person { display: flex; align-items: center; gap: 13px; min-width: 262px; justify-content: center; }
.revg-person__ava {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  background: var(--clay-700); color: #F5F1E8;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: .04em;
}
.revg-person__meta { text-align: left; }
.revg-person__meta strong {
  display: block; font-family: 'Parlare', 'TCP Signature', cursive;
  font-weight: 400; font-size: 25px; line-height: 1.1;
  color: var(--sage-900);
}
.revg-person__meta small {
  font-family: var(--font-sans); font-size: 12px;
  letter-spacing: .06em; color: var(--sage-700);
}

/* ---- progress ---- */
.revgal__progress {
  max-width: 300px; margin: 18px auto 0; height: 3px;
  background: rgba(49,84,33,.16); border-radius: 3px; overflow: hidden;
}
.revgal__progress span {
  display: block; height: 100%; width: 100%; transform-origin: left center;
  background: var(--clay-700);
  transition: transform .45s var(--ease-out); will-change: transform;
}

.revgal-band .reviews-note {
  margin: 30px auto 0; max-width: 62ch;
  color: var(--sage-700); font-size: 14.5px;
}

@media (max-width: 700px) {
  .revgal__stage { height: clamp(360px, 96vw, 470px); }
  .revg { width: 66vw; }
  .revg-person { min-width: 0; }
  .revg-person__meta strong { font-size: 20px; }
  .revg-nav { width: 40px; height: 40px; font-size: 19px; }
  .revgal__bar { gap: 12px; margin-top: 18px; }
  .revg__play { width: 56px; height: 56px; }
  .revgal__caption { margin-top: 20px; }
  .revgal__caption blockquote { font-size: 18px; }
}

html.rm .revg { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .revg, .revgal__progress span { transition: none !important; }
}

/* ==========================================================================
   ENQUIRY v2 — form on a raised paper card, process rail beside it.
   Native <select>s are gone: event type and guest count are radio chips,
   so the two choices are one tap and the control is ours to style. Labels
   float over the input rather than sitting above it, which halves the
   vertical rhythm of an 8-field form.
   ========================================================================== */
.enq-band .section-head { margin-bottom: 40px; }
.enq-band .section-head__lead {
  margin: 14px auto 0; max-width: 56ch;
  font-family: var(--font-serif); font-size: 17.5px; line-height: 1.6;
  color: var(--sage-700);
}

.enqsplit { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 48px; align-items: start; }

/* ---- the card ---- */
.enqcard {
  position: relative; overflow: hidden;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(187,104,72,.075), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(49,84,33,.055), transparent 55%),
    #F6F2E9;
  border-radius: var(--r-lg, 20px);
  padding: 40px 40px 34px;
  box-shadow:
    inset 0 0 0 1px rgba(49,84,33,.1),
    inset 0 1.5px 0 rgba(255,255,255,.85),
    0 2px 6px rgba(49,84,33,.06),
    0 18px 32px -18px rgba(49,84,33,.22),
    0 42px 80px -36px rgba(49,84,33,.4);
}
/* clay crown along the top edge */
.enqcard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--clay-700), var(--clay-500) 55%, transparent 130%);
  border-radius: var(--r-lg, 20px) var(--r-lg, 20px) 0 0;
}
/* jaali whisper in the far corner */
.enqcard::after {
  content: ""; position: absolute; right: -70px; bottom: -70px;
  width: 300px; height: 300px; pointer-events: none;
  background: url('../img/jaali-olive.jpg') center/cover;
  opacity: .05; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
}
.enqcard > * { position: relative; z-index: 1; }
.enq { max-width: none; }
.enq__group { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid rgba(49,84,33,.14); }
.enq__group:last-of-type { border-bottom: 0; padding-bottom: 6px; margin-bottom: 18px; }
.enq__step {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--sage-700);
}
.enq__step i { font-style: normal; color: var(--clay-700); letter-spacing: .2em; }
.enq__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* ---- floating-label field ---- */
.enq__f { position: relative; margin: 0 0 18px; }
.enq__f:last-child { margin-bottom: 0; }
.enq__f input,
.enq__f textarea {
  width: 100%; display: block;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(49,84,33,.16); border-bottom-color: rgba(49,84,33,.32);
  border-radius: 10px;
  padding: 24px 14px 9px; margin: 0;
  font-family: var(--font-serif); font-size: 17px; color: var(--sage-900);
  box-shadow: inset 0 1px 3px rgba(49,84,33,.05);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.enq__f textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
.enq__f label {
  position: absolute; left: 14px; top: 20px;
  font-family: var(--font-sans); font-size: 15px; color: var(--sage-700);
  pointer-events: none;
  transition: transform .22s cubic-bezier(.16,1,.3,1), font-size .22s cubic-bezier(.16,1,.3,1), color .22s ease;
  transform-origin: left top;
}
.enq__f input:focus, .enq__f textarea:focus {
  outline: 0; background: #fff;
  border-color: var(--clay-500); border-bottom-color: var(--clay-700);
  box-shadow: inset 0 1px 3px rgba(49,84,33,.04), 0 0 0 3px rgba(187,104,72,.14);
}
/* raise the label once the field has focus or content */
.enq__f input:focus + label,
.enq__f textarea:focus + label,
.enq__f input:not(:placeholder-shown) + label,
.enq__f textarea:not(:placeholder-shown) + label,
.enq__f--date label {
  transform: translateY(-19px); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--clay-700);
}
.enq__hint { display: block; margin-top: 7px; font-family: var(--font-sans); font-size: 12.5px; color: var(--sage-700); }
.enq__f--date input { color-scheme: light; }

/* small opt-in under the date */
.enq__opt { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; cursor: pointer; }
.enq__opt span { font-family: var(--font-sans); font-size: 14px; color: var(--sage-700); }
.enq__opt input { accent-color: var(--clay-700); width: 16px; height: 16px; }

/* ---- chips (replace the selects) ---- */
.enq__chips { border: 0; padding: 0; margin: 0 0 22px; }
.enq__chips:last-child { margin-bottom: 0; }
.enq__chips legend {
  padding: 0; margin-bottom: 11px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--sage-900);
}
.enq__chips legend small { font-weight: 400; color: var(--sage-700); text-transform: none; letter-spacing: 0; }
.chiprow { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.chip span {
  display: inline-flex; align-items: center;
  padding: 9px 17px; border-radius: 999px;
  border: 1px solid rgba(49,84,33,.22);
  background: rgba(255,255,255,.65);
  box-shadow: 0 1px 2px rgba(49,84,33,.07);
  font-family: var(--font-sans); font-size: 14px; color: var(--sage-900);
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.chip:hover span { border-color: var(--clay-500); }
.chip input:checked + span {
  background: var(--clay-700); border-color: var(--clay-700); color: #F5F1E8;
  box-shadow: 0 3px 10px -3px rgba(149,75,46,.55), inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.chip input:focus-visible + span { outline: 2px solid var(--clay-700); outline-offset: 2px; }

.enq__foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.enq .form-note { margin-top: 16px; font-size: 13.5px; color: var(--sage-700); }

/* ---- process rail ---- */
.enqrail { position: sticky; top: 108px; }
.enqrail__title {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--sage-700);
  margin: 0 0 22px;
}
.enqrail__steps { list-style: none; margin: 0; padding: 0; }
.enqrail__steps li {
  position: relative; padding: 0 0 26px 40px;
}
.enqrail__steps li::before {   /* the connecting spine */
  content: ""; position: absolute; left: 13px; top: 24px; bottom: 2px; width: 1px;
  background: rgba(49,84,33,.22);
}
.enqrail__steps li:last-child { padding-bottom: 0; }
.enqrail__steps li:last-child::before { display: none; }
.enqrail__steps i {
  position: absolute; left: 0; top: 0;
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--clay-700); color: #F5F1E8;
  font-style: normal; font-family: var(--font-sans); font-weight: 600;
  font-size: 10px; letter-spacing: .06em;
}
.enqrail__steps b {
  display: block; font-family: var(--font-serif); font-size: 19px;
  color: var(--sage-900); margin-bottom: 5px; font-weight: 500;
}
.enqrail__steps span {
  display: block; font-family: var(--font-sans); font-size: 14.5px;
  line-height: 1.55; color: var(--sage-700);
}
.enqrail__note {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(49,84,33,.16);
}
.enqrail__note p {
  margin: 0 0 12px; font-family: var(--font-serif); font-style: italic;
  font-size: 16px; line-height: 1.55; color: var(--sage-700);
}

@media (max-width: 980px) {
  .enqsplit { grid-template-columns: 1fr; gap: 34px; }
  .enqrail { position: static; }
}
@media (max-width: 640px) {
  .enqcard { padding: 26px 20px 22px; border-radius: 16px; }
  .enq__row { grid-template-columns: 1fr; gap: 4px; }
  .enq__foot .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   FOOTER v2 — a sign-off band above the directory, and the wordmark set
   into the base. The columns stay; what changed is that the footer now
   closes the argument instead of only listing links.
   ========================================================================== */
.btn--ghost {
  background: transparent; color: var(--paper);
  border: 1px solid rgba(232,228,220,.45);
}
.btn--ghost:hover { background: rgba(232,228,220,.1); border-color: var(--paper); color: var(--paper); }

.footer__col--brand .footer__legal--lic { margin-top: 12px; }
.footer__reach a { display: inline-flex; align-items: center; gap: 8px; }
.footer__bottom { align-items: center; }
.footer__bottom span:last-child { display: flex; gap: 18px; flex-wrap: wrap; }

/* wordmark set into the base — decorative only */
.footmark {
  display: flex; align-items: baseline; justify-content: center; gap: .28em;
  padding: 6px 0 22px; margin-top: 4px;
  line-height: .82; user-select: none; pointer-events: none;
  color: rgba(232,228,220,.085);
  overflow: hidden;
}
.footmark b {
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(13px, 1.7vw, 26px); letter-spacing: .34em; text-transform: uppercase;
}
.footmark i {
  font-family: 'Parlare', 'TCP Signature', cursive; font-style: normal;
  font-size: clamp(46px, 8.4vw, 132px);
}

@media (max-width: 820px) {
  .footcta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footcta__btns { width: 100%; }
  .footcta__btns .btn { flex: 1 1 auto; justify-content: center; }
  .footmark { padding-bottom: 14px; }
}

/* ---------- Enquiry: the three-step lead-gen flow ---------- */
.enq__progress {
  display: flex; gap: 0; list-style: none; margin: 0 0 30px; padding: 0;
}
.enq__progress li {
  flex: 1; display: flex; align-items: center; gap: 9px;
  padding-bottom: 13px; position: relative;
  opacity: .45; transition: opacity .3s ease;
}
.enq__progress li::after {          /* the track under each step */
  content: ""; position: absolute; left: 0; right: 12px; bottom: 0; height: 2px;
  background: rgba(49,84,33,.16);
}
.enq__progress li.is-on, .enq__progress li.is-done { opacity: 1; }
.enq__progress li.is-on::after, .enq__progress li.is-done::after { background: var(--clay-700); }
.enq__progress i {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  background: rgba(49,84,33,.12); color: var(--sage-900);
}
.enq__progress li.is-on i, .enq__progress li.is-done i { background: var(--clay-700); color: #F5F1E8; }
.enq__progress li.is-done i { background: var(--sage-700); }
.enq__progress span {
  font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .04em;
  color: var(--sage-900); white-space: nowrap;
}

.enq__ask {
  margin: 0 0 22px;
  font-family: var(--font-serif); font-size: clamp(21px, 2vw, 26px);
  line-height: 1.3; color: var(--sage-900);
}
.enq__step-panel[hidden] { display: none; }
.enq__step-panel { animation: enqIn .4s cubic-bezier(.16,1,.3,1); }
@keyframes enqIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html.rm .enq__step-panel { animation: none; }
@media (prefers-reduced-motion: reduce) { .enq__step-panel { animation: none; } }

.chiprow--lg .chip span { padding: 12px 21px; font-size: 15px; }

.enq__nav {
  display: flex; align-items: center; gap: 16px;
  margin-top: 26px;
}
.enq__back {
  border: 0; background: none; padding: 10px 4px; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; color: var(--sage-700);
  transition: color .2s ease;
}
.enq__back:hover { color: var(--sage-900); }
.enq__back:focus-visible { outline: 2px solid var(--clay-700); outline-offset: 2px; }
[data-enq-weddings][hidden] { display: none; }

@media (max-width: 640px) {
  .enq__progress span { display: none; }
  .enq__progress li.is-on span { display: inline; }
  .enq__nav { flex-wrap: wrap; }
  .enq__nav .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   LOTUS SEAMS v3 — ghost bloom. The medallion is a tonal watermark, not a
   sticker: two offset copies at low opacity, counter-rotating very slowly,
   half swallowed by the seam. On entering the viewport the whole device
   blooms — scales from closed to open and settles. Embossed ornament,
   in the same register as the ghost headings.
   ========================================================================== */
.lotus-seam {
  position: absolute; top: 0; z-index: 1;
  width: clamp(200px, 24vw, 340px); aspect-ratio: 1;
  transform: translateY(-50%) scale(.82);
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 0 50% 0);
  transition: transform 1400ms cubic-bezier(.16,1,.3,1), opacity 1100ms ease;
}
.lotus-seam.is-bloomed { transform: translateY(-50%) scale(1); opacity: 1; }
.lotus-seam--right { right: clamp(12px, 5vw, 80px); }
.lotus-seam--left  { left: clamp(12px, 5vw, 80px); }

/* two petal layers: a wide soft ghost behind, a firmer core in front,
   turning against each other */
.lotus-seam::before,
.lotus-seam::after {
  content: ""; position: absolute; inset: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.lotus-seam::before {
  opacity: .1; transform: scale(1.18);
  animation: lotusTurn 70s linear infinite;
}
.lotus-seam::after {
  opacity: .16;
  animation: lotusTurnBack 46s linear infinite;
}
.lotus-seam--clay::before, .lotus-seam--clay::after { background-image: url('../img/lotus-clay.png'); }
.lotus-seam--sage::before, .lotus-seam--sage::after { background-image: url('../img/lotus-sage.png'); }
@keyframes lotusTurn { to { transform: scale(1.18) rotate(360deg); } }
@keyframes lotusTurnBack { to { transform: rotate(-360deg); } }

html.rm .lotus-seam::before, html.rm .lotus-seam::after { animation: none; }
html.rm .lotus-seam { transition: none; transform: translateY(-50%); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lotus-seam::before, .lotus-seam::after { animation: none; }
  .lotus-seam { transition: none; transform: translateY(-50%); opacity: 1; }
}
@media (max-width: 640px) {
  .lotus-seam { width: 150px; }
  .lotus-seam--right { right: 8px; }
  .lotus-seam--left { left: 8px; }
}

/* ==========================================================================
   ENQUIRY v3 — pop. A gradient ring around the card, an oversized step
   numeral set behind the content, and the event choice as descriptive
   tiles that each speak to their own audience (weddings lead; planners
   get a named line beneath).
   ========================================================================== */
/* gradient ring: the card sits on a 1px conic wash */
.enqcard {
  border: 0;
}
.enqsplit { position: relative; }
.enqcard {
  box-shadow:
    inset 0 0 0 1px rgba(49,84,33,.08),
    inset 0 1.5px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(49,84,33,.08),
    0 24px 44px -20px rgba(49,84,33,.28),
    0 60px 110px -48px rgba(149,75,46,.36);
}
/* oversized numeral behind each step */
.enq__step-panel { position: relative; }
.enq__step-panel::before {
  content: attr(data-enq-num);
  position: absolute; right: -8px; top: -34px; z-index: 0;
  font-family: var(--font-serif); font-size: 150px; line-height: 1;
  color: rgba(49,84,33,.055); pointer-events: none; user-select: none;
}
.enq__step-panel > * { position: relative; z-index: 1; }

/* ---- event tiles ---- */
.tilegrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px;
}
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tile__body {
  display: flex; flex-direction: column; gap: 3px;
  padding: 15px 44px 14px 17px;
  border-radius: 13px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(49,84,33,.18);
  box-shadow: 0 1px 3px rgba(49,84,33,.07);
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.tile__body b {
  font-family: var(--font-serif); font-weight: 500; font-size: 17.5px;
  color: var(--sage-900); line-height: 1.2;
}
.tile__body small {
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4;
  color: var(--sage-700);
}
.tile__dot {
  position: absolute; right: 15px; top: 50%; translate: 0 -50%;
  width: 19px; height: 19px; border-radius: 50%;
  border: 1.5px solid rgba(49,84,33,.34); background: #fff;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.tile:hover .tile__body { border-color: var(--clay-500); transform: translateY(-1px); }
.tile input:checked ~ .tile__body {
  background: linear-gradient(135deg, rgba(187,104,72,.1), rgba(255,255,255,.72) 55%);
  border-color: var(--clay-700);
  box-shadow: 0 6px 18px -8px rgba(149,75,46,.45), inset 0 0 0 1px rgba(149,75,46,.25);
  transform: translateY(-1px);
}
.tile input:checked ~ .tile__dot {
  border-color: var(--clay-700); background: var(--clay-700);
  box-shadow: inset 0 0 0 3.5px #fff;
}
.tile input:focus-visible ~ .tile__body { outline: 2px solid var(--clay-700); outline-offset: 2px; }

.enq__planner {
  margin: 18px 0 0; padding: 13px 16px;
  border-radius: 11px;
  background: rgba(49,84,33,.06);
  border: 1px dashed rgba(49,84,33,.24);
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.55;
  color: var(--sage-900);
}
.enq__planner a { color: var(--clay-700); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .tilegrid { grid-template-columns: 1fr; }
  .enq__step-panel::before { font-size: 104px; top: -22px; }
}

/* ==========================================================================
   NAV MARK — the transparent logo itself, no badge. Larger than the bar and
   anchored to its top, so the mark hangs over the bottom edge — over the
   hero and on the stuck header alike. No plate, no ring: the PNG's own
   transparency does the work, a drop-shadow gives it lift.
   ========================================================================== */
.nav__plaque {
  position: relative; flex: none;
  align-self: flex-start;            /* anchor to the bar's top, hang below */
  width: 96px; height: 96px;
  margin-top: 4px; margin-bottom: -34px;
  background: none; border-radius: 0; box-shadow: none;
  transition: width 320ms var(--ease-out), height 320ms var(--ease-out),
              margin 320ms var(--ease-out);
  z-index: 60;
}
.nav__plaque::after { display: none; }
.nav__plaque .nav__logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 100%; height: 100%;
  filter: drop-shadow(0 8px 18px rgba(20,26,17,.32));
}
/* stuck: bar compresses to ~73px; the mark keeps its size, its optical
   centre rides level with the wordmark, and the bottom third hangs below */
.site-header.is-stuck .nav__plaque {
  width: 96px; height: 96px;
  margin-top: -5px; margin-bottom: -40px;
}
.site-header.is-stuck .nav__plaque .nav__logo {
  filter: drop-shadow(0 6px 14px rgba(20,26,17,.28));
}

/* keep the dropdown above the mark */
.nav__drop { z-index: 70; }

.nav__brand .nav__plaque img { transition: width 320ms var(--ease-out), height 320ms var(--ease-out), opacity 300ms ease; }

@media (max-width: 640px) {
  /* Logo enlarged for mobile — 72px read small against the header height. */
  .nav__plaque { width: 92px; height: 92px; margin-top: 2px; margin-bottom: -30px; }
  .site-header.is-stuck .nav__plaque { width: 78px; height: 78px; margin-bottom: -24px; }
}

/* ---------- Review lightbox + expand control ---------- */
.revg__expand {
  position: absolute; right: 12px; top: 12px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(20,26,17,.5); color: #F5F1E8;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, background .2s ease, scale .2s ease;
}
.revg.is-active .revg__expand { opacity: 1; pointer-events: auto; }
.revg__expand:hover { background: rgba(20,26,17,.72); scale: 1.07; }
.revg__expand:focus-visible { outline: 2px solid var(--clay-500); outline-offset: 3px; }
.revg__art.is-playing .revg__expand { opacity: 1; }

.revlb {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center; gap: 18px;
  padding: 4vh 4vw;
  background: rgba(18,24,15,.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.revlb.is-open { display: flex; }
html.revlb-lock, html.revlb-lock body { overflow: hidden; }

.revlb__body { max-width: min(560px, 86vw); display: flex; flex-direction: column; gap: 18px; }
.revlb__media {
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}
.revlb__media video, .revlb__media img {
  display: block; width: 100%; max-height: 66vh; object-fit: contain; background: #000;
}
.revlb__cap blockquote {
  margin: 0 0 8px;
  font-family: var(--font-serif); font-size: 19px; line-height: 1.45;
  color: #F3EFE6;
}
.revlb__cap p { margin: 0; font-family: var(--font-sans); font-size: 13px; color: rgba(238,234,226,.72); }
.revlb__cap strong { color: #EED9BE; font-weight: 600; }

.revlb__close {
  position: absolute; top: 18px; right: 22px;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #F5F1E8; font-size: 26px; line-height: 1;
  transition: background .2s ease;
}
.revlb__close:hover { background: rgba(255,255,255,.24); }
.revlb__nav {
  flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #F5F1E8; font-size: 26px; line-height: 1;
  transition: background .2s ease, scale .2s ease;
}
.revlb__nav:hover { background: rgba(255,255,255,.24); scale: 1.06; }
.revlb__close:focus-visible, .revlb__nav:focus-visible { outline: 2px solid #EED9BE; outline-offset: 3px; }

@media (max-width: 640px) {
  .revlb { padding: 3vh 10px; gap: 8px; }
  .revlb__nav { width: 42px; height: 42px; }
  .revlb__cap blockquote { font-size: 16px; }
}

/* ==========================================================================
   ENQUIRY v3.1 — compact. Same fields, same flow; a third less chrome.
   A lead form should feel like three small questions, not a document.
   ========================================================================== */
.enqcard { padding: 26px 28px 24px; }
.enq__progress { margin-bottom: 20px; }
.enq__progress li { padding-bottom: 9px; }
.enq__ask { font-size: clamp(18px, 1.7vw, 21px); margin-bottom: 14px; }
.enq__step-panel::before { font-size: 88px; top: -18px; right: -2px; color: rgba(49,84,33,.045); }

.tilegrid { gap: 8px; }
.tile__body { padding: 10px 36px 9px 13px; border-radius: 11px; gap: 2px; }
.tile__body b { font-size: 15.5px; }
.tile__body small { font-size: 11.5px; }
.tile__dot { width: 16px; height: 16px; right: 12px; }
.tile input:checked ~ .tile__dot { box-shadow: inset 0 0 0 3px #fff; }

.enq__chips { margin: 0 0 14px; }
.enq__chips legend { margin-bottom: 8px; font-size: 12.5px; }
.chiprow { gap: 7px; }
.chip span { padding: 7px 13px; font-size: 13px; }
.chiprow--lg .chip span { padding: 8px 15px; font-size: 13.5px; }

.enq__planner { margin-top: 12px; padding: 9px 12px; font-size: 12.5px; border-radius: 9px; }

.enq__row { gap: 14px; }
.enq__f { margin-bottom: 12px; }
.enq__f input, .enq__f textarea { padding: 20px 12px 7px; font-size: 16px; border-radius: 9px; }
.enq__f label { left: 12px; top: 16px; font-size: 14px; }
.enq__f input:focus + label, .enq__f textarea:focus + label,
.enq__f input:not(:placeholder-shown) + label,
.enq__f textarea:not(:placeholder-shown) + label,
.enq__f--date label { transform: translateY(-14px); font-size: 10px; }
.enq__f textarea { min-height: 58px; }
.enq__hint { margin-top: 5px; font-size: 11.5px; }
.enq__opt { margin-top: 8px; }
.enq__opt span { font-size: 13px; }

.enq__nav { margin-top: 16px; gap: 12px; }
.enq__nav .btn--lg { padding-block: 13px; }
.enq .form-note { margin-top: 11px; font-size: 12.5px; }

@media (max-width: 640px) {
  .enqcard { padding: 20px 16px 18px; }
  .enq__step-panel::before { font-size: 64px; top: -12px; }
}

/* ==========================================================================
   POST-RESCUE ADDITIONS (14.x) — everything after the 13.9.0 snapshot.
   ========================================================================== */

/* CTA diet: the floating pill sits out the homepage */

/* the qualified-WhatsApp line inside step 3 */
.enq__waalt { margin: 12px 0 0; font-family: var(--font-sans); font-size: 13px; color: var(--sage-700); }
.enq__waalt a { color: var(--clay-700); text-decoration: underline; text-underline-offset: 2px; }

/* footer brand: terracotta mark on the sage ground, short tagline */
.footer__logo--clay { width: 92px; height: 92px; background: none; border-radius: 0; padding: 0; }
.footer__tag {
  margin: 14px 0 16px; max-width: 30ch;
  font-family: var(--font-serif); font-style: italic;
  font-size: 15px; line-height: 1.6; color: rgba(232,228,220,.8);
}

/* ==========================================================================
   FLOATING CTA — one persistent conversion point on the homepage. Routes to
   the qualifying form, not to WhatsApp; appears once the hero is passed.
   Mobile already has the action bar, so this is desktop-only.
   ========================================================================== */
.float-cta {
  position: fixed; right: 26px; bottom: 26px; z-index: 96;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 24px; border-radius: 999px;
  background: var(--clay-700); color: #F5F1E8 !important;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: .04em;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(149,75,46,.3), 0 20px 44px -12px rgba(149,75,46,.5);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), background .2s ease;
}
.float-cta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.float-cta:hover { background: var(--clay-500); }
.float-cta__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #EED9BE;
  animation: ctaPulse 2.4s ease-in-out infinite;
}
@keyframes ctaPulse { 0%,100% { opacity: .5; scale: 1; } 50% { opacity: 1; scale: 1.25; } }
html.rm .float-cta__dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .float-cta__dot { animation: none; } .float-cta { transition: none; } }
@media (max-width: 860px) { .float-cta { display: none; } }

/* ==========================================================================
   VREVIEW — floating video-review bubble, ported from the live build.
   Cycles muted clips in a small portrait card bottom-right; clicking opens
   a modal with sound, prev/next and a quote CTA. Palette moved onto the
   relaunch tokens; geometry identical to the live site.
   ========================================================================== */
/* rides above the floating WhatsApp pill (right:20 bottom:20, 56px) so the
   two never overlap; same stacking as the live build */
.vreview { position: fixed; right: 20px; bottom: 94px; z-index: 96; }
.vreview.is-hidden { display: none; }
.vreview__bubble {
  display: block; position: relative;
  width: 142px; height: 181px;
  border-radius: 16px; overflow: hidden; padding: 0; border: 2px solid #F6F2E9;
  background: #1B1F18;
  box-shadow: 0 10px 30px rgba(20,26,17,.35);
  cursor: pointer;
  animation: vreviewPop .4s ease;
}
.vreview__vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.vreview__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 7px 4px 6px;
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; text-align: center;
  background: linear-gradient(transparent, rgba(20,26,17,.75));
}
.vreview__close {
  position: absolute; top: -8px; right: -8px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--sage-900); color: #fff; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
@keyframes vreviewPop { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
html.rm .vreview__bubble { animation: none; }
@media (max-width: 860px) { .vreview { display: none !important; } }

.vreview-modal {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(18,24,15,.92);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.vreview-modal.is-open { display: flex; }
.vreview-modal__inner { margin: 0; max-width: 420px; width: 100%; }
.vreview-modal video { width: 100%; max-height: 80vh; border-radius: 14px; background: #000; display: block; }
.vreview-modal figcaption {
  color: #F3EFE6; text-align: center; margin-top: 12px;
  font-family: var(--font-serif); font-size: 15px;
}
.vreview-modal__cta { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.vreview-modal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  transition: background .2s ease;
}
.vreview-modal__nav:hover { background: rgba(255,255,255,.3); }
.vreview-modal__nav--prev { left: 16px; }
.vreview-modal__nav--next { right: 16px; }
.vreview-modal__close {
  position: absolute; top: 20px; right: 24px;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.vreview-modal__close:hover { background: rgba(255,255,255,.3); }
@media (max-width: 560px) {
  .vreview-modal__nav { width: 40px; height: 40px; left: 8px; }
  .vreview-modal__nav--next { right: 8px; }
}

/* ==========================================================================
   ENQUIRY v4 — the fold goes deep sage. The reviews band and the form band
   were five points of beige apart and read as one endless section; now the
   page visibly changes register when it asks for the enquiry, and the paper
   card floats on the dark ground instead of dissolving into it.
   ========================================================================== */
.enq-band {
  background: linear-gradient(168deg, #4D6448 0%, #3E5539 58%, #35492F 100%);
  border-radius: var(--r-xl); margin-inline: 16px;
  overflow: hidden; position: relative;
}
@media (max-width: 768px) { .enq-band { border-radius: var(--r-lg); margin-inline: 8px; } }
/* jaali whisper, same register as the other dark blocks */
.enq-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/jaali-olive.jpg') center/620px auto;
  opacity: .05; mix-blend-mode: luminosity;
}
.enq-band > .container { position: relative; z-index: 1; }

.enq-band .section-head h2 { color: var(--paper); }
.enq-band .section-head h2 em { color: #EED9BE; }
.enq-band .eyebrow-num { color: rgba(232,228,220,.62); }
.enq-band .section-head__lead { color: rgba(232,228,220,.78); }

/* the card now carries the fold — deeper lift, warm crown pops on dark */
.enq-band .enqcard {
  box-shadow:
    inset 0 0 0 1px rgba(49,84,33,.08),
    inset 0 1.5px 0 rgba(255,255,255,.9),
    0 2px 6px rgba(12,18,10,.3),
    0 30px 60px -24px rgba(12,18,10,.55),
    0 70px 130px -50px rgba(12,18,10,.6);
}

/* rail flips to light-on-dark */
.enq-band .enqrail__title { color: rgba(232,228,220,.62); }
.enq-band .enqrail__steps b { color: var(--paper); }
.enq-band .enqrail__steps span { color: rgba(232,228,220,.72); }
.enq-band .enqrail__steps li::before { background: rgba(232,228,220,.24); }
.enq-band .enqrail__steps i { background: #EED9BE; color: #35492F; }
.enq-band .enqrail__note { border-top-color: rgba(232,228,220,.2); }
.enq-band .enqrail__note p { color: rgba(232,228,220,.75); }
.enq-band .enqrail__note .link-more { color: #EED9BE; }
.enq-band .enqrail__note .link-more::after { background: rgba(238,217,190,.5); }

/* the sage lotus seam vanishes on the dark ground — the clay one reads */
.enq-band .lotus-seam--sage::before { background-image: url('../img/lotus-clay.png'); }
.enq-band .lotus-seam--sage { filter: drop-shadow(0 -6px 18px rgba(0,0,0,.25)); opacity: .9; }

/* ==========================================================================
   OCCASIONS ON MOBILE — headings and images, nothing else. The desc/meta
   lines go; each row is a big heading, and the photo of the row you are
   scrolled to pops open beneath it (scroll-driven, so a tap still navigates).
   ========================================================================== */
@media (max-width: 900px), (hover: none) {
  .occ-index .occ-row { display: block; margin-right: 0; padding: 16px 4px; }
  .occ-row__side, .occ-row__num { display: none !important; }
  .occ-row__name { font-size: clamp(30px, 9vw, 42px); display: inline-block; }
  .occ-row__arrow { display: inline-block; margin-left: 10px; opacity: 1; transform: none; }

  /* the pop: closed by default, springs open on the in-view row */
  .occ-row__thumb {
    display: block; width: 100%; height: 0; overflow: hidden;
    padding: 0; border: 0; background: none;
    border-radius: 14px; margin-top: 0;
    transition: height 520ms var(--ease-out), margin-top 520ms var(--ease-out);
  }
  .occ-row.is-peek .occ-row__thumb { height: 205px; margin-top: 14px; }
  .occ-row__thumb img {
    width: 100%; height: 205px; object-fit: cover; display: block;
    transform: scale(1.1);
    transition: transform 900ms var(--ease-out);
  }
  .occ-row.is-peek .occ-row__thumb img { transform: scale(1); }

  html.rm .occ-row__thumb, html.rm .occ-row__thumb img { transition: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .occ-row__thumb, .occ-row__thumb img { transition: none; }
}

/* ==========================================================================
   MEGA MENU — "Plan an event": every path visible at once. Occasion cards
   with photos on the left, experiences and the date CTA on the right.
   Desktop only; the drawer keeps the flat list.
   ========================================================================== */
.nav__item--mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #F6F2E9;
  border-top: 1px solid rgba(49,84,33,.12);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 40px 80px -30px rgba(20,26,17,.4), 0 8px 24px -12px rgba(20,26,17,.18);
  opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s;
  z-index: 90;
}
.nav__item--mega.is-open .mega {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s;
}
.mega__grid {
  display: grid; grid-template-columns: minmax(0,1fr) 280px;
  gap: 40px; padding-top: 30px; padding-bottom: 32px;
}
.mega__occasions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mega__card { display: block; text-decoration: none !important; }
.mega__thumb {
  display: block; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  margin-bottom: 12px; background: #E7E0D2;
  box-shadow: 0 2px 6px rgba(49,84,33,.1);
}
.mega__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease-out);
}
.mega__card:hover .mega__thumb img { transform: scale(1.06); }
.mega__card b {
  display: block; font-family: var(--font-serif); font-weight: 500;
  font-size: 17px; color: var(--sage-900); margin-bottom: 3px;
}
.mega__card small {
  display: block; font-family: var(--font-sans); font-size: 12px;
  line-height: 1.45; color: var(--sage-700);
}
.mega__card:hover b { color: var(--clay-700); }

.mega__aside { border-left: 1px solid rgba(49,84,33,.14); padding-left: 32px; }
.mega__label {
  display: block; margin-bottom: 14px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--sage-700);
}
.mega__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; text-decoration: none !important;
  font-family: var(--font-serif); font-size: 16.5px; color: var(--sage-900);
  border-bottom: 1px solid rgba(49,84,33,.1);
  transition: color .2s ease, padding-left .25s var(--ease-out);
}
.mega__link:hover { color: var(--clay-700); padding-left: 5px; }
.mega__link i { font-style: normal; color: var(--clay-700); opacity: 0; transition: opacity .2s ease; }
.mega__link:hover i { opacity: 1; }
.mega__cta { margin-top: 22px; padding-top: 18px; }
.mega__cta p {
  margin: 0 0 12px; font-family: var(--font-sans); font-size: 12.5px;
  line-height: 1.5; color: var(--sage-700);
}
@media (max-width: 900px) { .mega { display: none; } }
html.rm .mega { transition: none; }

/* ==========================================================================
   INNER PAGES — shared primitives for the sitewide pattern rollout.
   .pagehead is the new page opener (arch-head retired); .band--sage is the
   generic deep-sage band (the enquiry fold's ground, made reusable).
   ========================================================================== */
.pagehead {
  position: relative; overflow-x: clip;
  padding: calc(92px + 64px) 0 56px;   /* fixed header + breathing room */
}
.pagehead .section-head { margin-bottom: 0; }
.pagehead h1 {
  font-size: clamp(38px, 4.6vw, 64px); line-height: 1.06;
  letter-spacing: -.02em; color: var(--sage-900);
  max-width: 18ch; margin-inline: auto;
}
.pagehead h1 em { font-style: italic; color: var(--clay-700); }
.pagehead__lead {
  margin: 18px auto 0; max-width: 54ch;
  font-family: var(--font-serif); font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.62; color: var(--sage-700);
}
.pagehead__media {
  margin: 44px 0 0; border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 16/7; background: #E7E0D2;
  box-shadow: 0 2px 6px rgba(49,84,33,.07), 0 26px 54px -24px rgba(49,84,33,.32);
}
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .pagehead { padding: calc(72px + 40px) 0 40px; }
  .pagehead__media { aspect-ratio: 4/3; margin-top: 30px; }
}

/* generic deep-sage band — same recipe as the enquiry fold */
.band--sage {
  background: linear-gradient(168deg, #4D6448 0%, #3E5539 58%, #35492F 100%);
  border-radius: var(--r-xl); margin-inline: 16px;
  overflow: hidden; position: relative;
  color: var(--paper);
}
@media (max-width: 768px) { .band--sage { border-radius: var(--r-lg); margin-inline: 8px; } }
.band--sage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/jaali-olive.jpg') center/620px auto;
  opacity: .05; mix-blend-mode: luminosity;
}
.band--sage > .container { position: relative; z-index: 1; }
.band--sage .section-head h2, .band--sage h2, .band--sage h3 { color: var(--paper); }
.band--sage .section-head h2 em { color: #EED9BE; }
.band--sage .eyebrow-num { color: rgba(232,228,220,.62); }
.band--sage p { color: rgba(232,228,220,.82); }
.band--sage .card { background: rgba(246,242,233,.06); border-color: rgba(232,228,220,.16); }
.band--sage .card h3 { color: var(--paper); }
.band--sage .card p { color: rgba(232,228,220,.78); }
.band--sage .link-more { color: #EED9BE; }

/* ---------- FAQ fold: the breather between form and footer ---------- */
.faq-band { padding-block: 84px 88px; position: relative; overflow-x: clip; }
.faq-band .section-head { margin-bottom: 44px; }
.faq--split { max-width: 780px; margin-inline: auto; columns: 1; }
.faq-band__more {
  margin: 30px auto 0; text-align: center;
  font-family: var(--font-sans); font-size: 14px; color: var(--sage-700);
}
.faq-band__more .link-more { margin-left: 6px; }

/* ==========================================================================
   SEAM + HEADER FIXES
   1. The footer carried margin-top: var(--section-pad) (132px) from the old
      system — with band sections handling their own spacing it read as a
      dead gap after the FAQ. Bands own their padding now; the footer sits
      flush.
   2. Inner pages have no dark hero, so the transparent header left pale
      chrome floating on the warm pagehead. Off the homepage the bar is
      solid paper with dark chrome from the first pixel.
   ========================================================================== */
.site-footer { margin-top: 0; }
.faq-band { padding-bottom: 96px; }

body:not(.home) .site-header {
  background: rgba(232,228,220,.94);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(172,170,145,.4);
}
body:not(.home) .site-header:not(.is-stuck) .nav__menu a { color: var(--ink); }
body:not(.home) .site-header:not(.is-stuck) .nav__wa { border-color: rgba(49,84,33,.34); color: var(--sage-900); }
body:not(.home) .site-header:not(.is-stuck) .nav__wa:hover { background: rgba(49,84,33,.08); }
body:not(.home) .site-header:not(.is-stuck) .nav__toggle { color: var(--sage-900); }

/* band--sage: the process rail adapts (About timeline etc. sit on sage) */
.band--sage .enqrail__title { color: rgba(232,228,220,.62); }
.band--sage .enqrail__steps b { color: var(--paper); }
.band--sage .enqrail__steps span { color: rgba(232,228,220,.72); }
.band--sage .enqrail__steps li::before { background: rgba(232,228,220,.24); }
.band--sage .enqrail__steps i { background: #EED9BE; color: #35492F; }

/* ---------- Contrast repairs (audit: menus page sweep) ---------- */
/* index-row meta was a pale gold that sank into the clay ground */
.occ-row__meta { color: var(--sage-700); }
/* mega CTA button was inheriting ink over clay */
.mega__cta .btn--primary { color: var(--paper); }
/* footer pending slots barely read on sage-700 */
.footer__legal .pending-client { color: #EED9BE; }

/* ==========================================================================
   CONTRAST REPAIRS II — sitewide sweep findings.
   ========================================================================== */
/* The mega panel is a paper surface inside .nav__menu, so it inherited the
   header's over-hero link colours (white on paper — invisible). The panel
   owns its own palette regardless of header state. */
.site-header .nav__menu .mega a { color: var(--sage-900) !important; }
.site-header .nav__menu .mega .mega__card b { color: var(--sage-900); }
.site-header .nav__menu .mega .mega__card:hover b,
.site-header .nav__menu .mega .mega__link:hover { color: var(--clay-700) !important; }
.site-header .nav__menu .mega .mega__cta .btn--primary { color: var(--paper) !important; }

/* footer column headings and the bottom-bar pending slot sat under 3:1 */
.footer__col h3 { color: var(--paper); }
.footer__bottom .pending-client { color: #EED9BE; }

/* quiet labels were too quiet: 3.2–3.4:1 on the warm grounds */
.link-more { color: var(--clay-700); }
.link-more::after { background: rgba(149,75,46,.45); }
.eyebrow-num { color: var(--sage-700); }

/* ==========================================================================
   PROOF BAND — the credibility line beneath the hero. Restrained serif
   figures on paper, hairline-separated. Established facts only.
   ========================================================================== */
.proofband { background: var(--paper); border-bottom: 1px solid rgba(172,170,145,.34); }
.proofband__row {
  list-style: none; margin: 0; padding: 34px 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  text-align: center;
}
.proofband__row li { padding: 4px 18px; position: relative; }
.proofband__row li + li::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: rgba(172,170,145,.4);
}
.proofband__row b {
  display: block; font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.01em;
  color: var(--clay-700);
}
.proofband__row b i { font-style: normal; font-size: .62em; vertical-align: super; margin-left: 1px; }
.proofband__row em {
  display: block; margin-top: 9px; font-style: normal;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sage-700);
}
@media (max-width: 860px) {
  .proofband__row { grid-template-columns: repeat(2, 1fr); gap: 26px 0; padding: 30px 0; }
  .proofband__row li:nth-child(odd)::before { display: none; }
  .proofband__row li:nth-child(5) { grid-column: 1 / -1; }
  .proofband__row li:nth-child(5)::before { display: none; }
}
@media (max-width: 420px) {
  .proofband__row { grid-template-columns: 1fr; gap: 22px; }
  .proofband__row li::before { display: none !important; }
}

/* ---------- Radius consolidation (design-system hygiene) ----------
   Two cards carried orphan radii (14px, 22px) off the 10/16/24/32 token
   scale; align both to --r-md so rounding reads as one system. */
.dishcard { border-radius: var(--r-md); }
.revg__art { border-radius: var(--r-md); }

/* ==========================================================================
   MODERNIZATION PASS (16.5) — how-we-work fold, spacing rhythm, heading ramp.
   ========================================================================== */

/* ---- How we work: four-step horizontal process ---- */
.howwe .section-head { margin-bottom: 52px; }
.howwe__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  counter-reset: none;
}
.howwe__steps li {
  position: relative; padding-top: 26px;
  border-top: 2px solid rgba(49,84,33,.16);
}
/* the connective tick between steps */
.howwe__steps li::after {
  content: ""; position: absolute; top: -2px; left: 0; width: 34px; height: 2px;
  background: var(--clay-700);
}
.howwe__steps i {
  display: block; font-style: normal;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; color: var(--clay-700); margin-bottom: 14px;
}
.howwe__steps b {
  display: block; font-family: var(--font-serif); font-weight: 500;
  font-size: 21px; line-height: 1.2; color: var(--sage-900); margin-bottom: 9px;
}
.howwe__steps span {
  display: block; font-family: var(--font-sans); font-size: 14px;
  line-height: 1.6; color: var(--sage-700);
}
@media (max-width: 900px) {
  .howwe__steps { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
}
@media (max-width: 520px) {
  .howwe__steps { grid-template-columns: 1fr; gap: 0; }
  .howwe__steps li { padding: 22px 0; border-top-width: 1px; }
  .howwe__steps li:first-child { border-top: 0; }
  .howwe__steps li::after { display: none; }
}

/* ---- Enquiry aside: reassurance copy (steps moved to the how-we fold) ---- */
.enqrail__why {
  margin: 0 0 24px;
  font-family: var(--font-serif); font-size: 17px; line-height: 1.62;
  color: rgba(232,228,220,.82);
}

/* ---- Spacing rhythm: kill the occasions dead gap (was +150 → ~+40) ---- */
.ghat-anchor { padding-bottom: calc(var(--section-pad) + 40px) !important; }
@media (max-width: 768px) { .ghat-anchor { padding-bottom: calc(var(--section-pad) + 24px) !important; } }

/* ---- Heading ramp: unify the two feature folds to one size (founder 46 → 52),
        so the scale reads 38 default · 52 feature · 76 hero, no orphans ---- */
.founderfold .founder-head { font-size: clamp(32px, 3.8vw, 52px) !important; }

/* ---- Motion polish: staggered reveal for the proof band + process steps ---- */
.proofband__row li, .howwe__steps li {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
[data-reveal].is-in .proofband__row li,
.proofband__row[data-reveal].is-in li,
[data-reveal].is-in.howwe__steps li,
.howwe__steps[data-reveal].is-in li { opacity: 1; transform: none; }
.proofband__row.is-in li:nth-child(2), .howwe__steps.is-in li:nth-child(2) { transition-delay: 130ms; }
.proofband__row.is-in li:nth-child(3), .howwe__steps.is-in li:nth-child(3) { transition-delay: 260ms; }
.proofband__row.is-in li:nth-child(4), .howwe__steps.is-in li:nth-child(4) { transition-delay: 390ms; }
.proofband__row.is-in li:nth-child(5) { transition-delay: 520ms; }
html.rm .proofband__row li, html.rm .howwe__steps li { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .proofband__row li, .howwe__steps li { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   EDITORIAL MASTHEAD (17.0) — homepage only. Replaces the centered
   eyebrow + centered heading + ghost-word (the "generated" tell) with an
   asymmetric magazine masthead: an italic folio numeral, a hairline rule
   carrying the label, and the heading hanging left. Scoped to body.home so
   inner pages keep their centered heads.
   ========================================================================== */
body.home .section-head {
  text-align: left;
  align-items: stretch;
  max-width: none;
  margin-bottom: 48px;
}
/* retire the centered ghost word on home — it fought an asymmetric layout */
body.home .section-head::before { display: none !important; }

/* the masthead line: [ 02 ]  LABEL ─────────────────────────── */
body.home .eyebrow-num {
  display: flex; align-items: center; gap: 16px; width: 100%;
  margin-bottom: 22px;
  font-family: var(--font-sans); font-weight: 600; font-size: 11.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--sage-700);
}
body.home .eyebrow-num::before {
  content: attr(data-num);
  flex: none;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 38px; letter-spacing: 0; line-height: .8; color: var(--clay-700);
}
body.home .eyebrow-num::after {
  content: ""; flex: 1; height: 1px; background: rgba(49,84,33,.24);
}

body.home .section-head h2 {
  text-align: left; margin-inline: 0; max-width: 20ch;
}
body.home .section-head h2 em { font-style: italic; }
body.home .section-head .lead,
body.home .section-head .section-head__lead,
body.home .section-head__lead {
  text-align: left; margin-inline: 0; max-width: 56ch;
}

/* dark home folds (hill cinema, enquiry sage) — light rule + cream folio */
body.home .cinema .eyebrow-num,
body.home .enq-band .eyebrow-num { color: rgba(232,228,220,.72); }
body.home .cinema .eyebrow-num::before,
body.home .enq-band .eyebrow-num::before { color: #EED9BE; }
body.home .cinema .eyebrow-num::after,
body.home .enq-band .eyebrow-num::after { background: rgba(232,228,220,.28); }

/* the hill fold centres its cinematic content — keep its head left but pull
   it into the same container rhythm */
body.home .cinema .section-head { align-items: flex-start; }

@media (max-width: 600px) {
  body.home .eyebrow-num::before { font-size: 30px; }
  body.home .section-head { margin-bottom: 34px; }
}

/* ==========================================================================
   CTA FOLD + QUOTE LIGHTBOX (17.1) — the tall inline form fold becomes a
   compact centred CTA; the form opens on demand in a lightbox.
   ========================================================================== */
.ctafold { padding-block: 92px; text-align: center; position: relative; overflow-x: clip; }
.ctafold .section-head { text-align: center; align-items: center; margin-bottom: 30px; }
.ctafold .section-head h2 { text-align: center; margin-inline: auto; max-width: 20ch; }
.ctafold .section-head__lead { text-align: center; margin-inline: auto; max-width: 52ch; }
.ctafold .eyebrow-num { justify-content: center; width: auto; margin-inline: auto; }
.ctafold .eyebrow-num::after { display: none; }   /* centred: drop the trailing rule */
.ctafold__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ctafold__fine {
  margin: 22px 0 0; font-family: var(--font-sans); font-size: 13px;
  letter-spacing: .03em; color: rgba(232,228,220,.62);
}

.quotebox { position: fixed; inset: 0; z-index: 320; display: none; }
.quotebox.is-open { display: block; }
html.quote-lock, html.quote-lock body { overflow: hidden; }
.quotebox__backdrop {
  position: absolute; inset: 0; background: rgba(18,24,15,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.quotebox__panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(680px, 94vw); max-height: 92vh;
  background: var(--paper); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
}
.quotebox.is-open .quotebox__panel { animation: quotePop .42s var(--ease-out); }
@keyframes quotePop { from { opacity: 0; transform: translate(-50%,-46%) scale(.97); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
html.rm .quotebox.is-open .quotebox__panel { animation: none; }
.quotebox__scroll { overflow-y: auto; padding: 44px clamp(22px,4vw,48px); }
.quotebox__close {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(49,84,33,.08); color: var(--sage-900); font-size: 25px; line-height: 1;
  transition: background .2s ease;
}
.quotebox__close:hover { background: rgba(49,84,33,.16); }
.quotebox__eyebrow {
  margin: 0 0 8px; font-family: var(--font-serif); font-size: 12.5px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--clay-700);
}
.quotebox__title { margin: 0 0 24px; font-size: clamp(26px,3vw,34px); color: var(--sage-900); }
.quotebox__title em { font-style: italic; color: var(--clay-700); }
@media (max-width: 520px) { .quotebox__scroll { padding: 40px 18px 30px; } }

/* ---- FAQ head centred (kept as a calm exception to the editorial masthead) ---- */
body.home .faq-band .section-head { text-align: center; align-items: center; }
body.home .faq-band .section-head h2 { text-align: center; margin-inline: auto; max-width: none; }
body.home .faq-band .eyebrow-num { justify-content: center; width: auto; margin-inline: auto; }
body.home .faq-band .eyebrow-num::after { display: none; }

/* ==========================================================================
   FOOTER POLISH (17.1) — ruled clay column heads, a more present base
   wordmark, tighter rhythm. Reads designed, not defaulted.
   ========================================================================== */
.footer__col h3 {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: #E9C9A8;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(232,228,220,.15);
}
.footer__col ul { display: flex; flex-direction: column; gap: 9px; }
.footer__col ul a { font-size: 15px; color: rgba(232,228,220,.82); }
.footer__col ul a:hover { color: var(--paper); }
.footer__tag {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16.5px; line-height: 1.55; color: rgba(232,228,220,.82);
}
.footer__reach a { display: inline-flex; align-items: center; gap: 7px; }
.footmark { color: rgba(232,228,220,.12); padding-top: 18px; }
.footer__bottom { font-size: 13px; letter-spacing: .02em; }

/* ==========================================================================
   EDITORIAL MASTHEAD — INNER PAGES (17.3). The same asymmetric masthead now
   carries across content sections on every page, so inner pages match the
   homepage's art direction. Pageheads (.pagehead, not .section) keep their
   centred page-title treatment, so the hierarchy stays: centred title →
   editorial section mastheads below.
   ========================================================================== */
body:not(.home) .section .section-head {
  text-align: left; align-items: stretch; max-width: none; margin-bottom: 48px;
}
body:not(.home) .section .section-head::before { display: none !important; } /* no ghost word */
body:not(.home) .section .eyebrow-num {
  display: flex; align-items: center; gap: 16px; width: 100%; margin-bottom: 22px;
  font-family: var(--font-sans); font-weight: 600; font-size: 11.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--sage-700);
}
body:not(.home) .section .eyebrow-num::before {
  content: attr(data-num); flex: none;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 38px; letter-spacing: 0; line-height: .8; color: var(--clay-700);
}
body:not(.home) .section .eyebrow-num::after {
  content: ""; flex: 1; height: 1px; background: rgba(49,84,33,.24);
}
body:not(.home) .section .section-head h2 { text-align: left; margin-inline: 0; max-width: 22ch; }
body:not(.home) .section .section-head h2 em { font-style: italic; }
body:not(.home) .section .section-head .lead,
body:not(.home) .section .section-head__lead,
body:not(.home) .section .section-head .section-head__lead { text-align: left; margin-inline: 0; max-width: 56ch; }

/* dark inner folds (band--sage, section--dark) — cream folio + light rule */
body:not(.home) .band--sage .eyebrow-num,
body:not(.home) .section--dark .eyebrow-num { color: rgba(232,228,220,.72); }
body:not(.home) .band--sage .eyebrow-num::before,
body:not(.home) .section--dark .eyebrow-num::before { color: #EED9BE; }
body:not(.home) .band--sage .eyebrow-num::after,
body:not(.home) .section--dark .eyebrow-num::after { background: rgba(232,228,220,.28); }

/* keep a "center" class opt-out available on inner content heads if a page
   wants a calm centred moment (matches the homepage FAQ exception) */
body:not(.home) .section .section-head.is-centered { text-align: center; align-items: center; }
body:not(.home) .section .section-head.is-centered .eyebrow-num { justify-content: center; }
body:not(.home) .section .section-head.is-centered .eyebrow-num::after { display: none; }
body:not(.home) .section .section-head.is-centered h2 { text-align: center; margin-inline: auto; max-width: none; }

@media (max-width: 600px) {
  body:not(.home) .section .eyebrow-num::before { font-size: 30px; }
  body:not(.home) .section .section-head { margin-bottom: 34px; }
}

/* ==========================================================================
   GHAT DRIFT (17.4) — the city line-art as a faint texture in more folds.
   Lower opacity than the occasions anchor so it reads as atmosphere, not a
   repeated motif; different city + corner per fold.
   ========================================================================== */
.ghat-drift { position: relative; overflow: hidden; }
.ghat-drift > .container { position: relative; z-index: 1; }
.ghat-drift .dishrail, .ghat-drift .container { position: relative; z-index: 1; }
.ghat-drift__art {
  position: absolute; z-index: 0; width: min(640px, 56vw); height: auto;
  mix-blend-mode: multiply; opacity: .13; pointer-events: none; user-select: none;
}
.ghat-drift__art--bl {
  left: -60px; bottom: -30px;
  -webkit-mask-image: linear-gradient(to top right, #000 40%, transparent 78%);
  mask-image: linear-gradient(to top right, #000 40%, transparent 78%);
}
.ghat-drift__art--tr {
  right: -60px; top: -20px; transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to bottom left, #000 40%, transparent 78%);
  mask-image: linear-gradient(to bottom left, #000 40%, transparent 78%);
}
@media (max-width: 640px) { .ghat-drift__art { width: 78vw; opacity: .1; } }

/* ==========================================================================
   MOBILE ACTION BAR (17.4) — sticky bottom conversion bar, phone-first.
   Frosted, safe-area aware; replaces the floating pills on small screens.
   ========================================================================== */
.mobilebar { display: none; }
@media (max-width: 860px) {
  .mobilebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
    display: flex; align-items: stretch; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(246,242,233,.9);
    -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
    border-top: 1px solid rgba(172,170,145,.4);
    box-shadow: 0 -8px 24px -12px rgba(20,26,17,.2);
  }
  body { padding-bottom: 74px; }
  /* the floating pills are redundant once the bar is present */
  .float-wa, .vreview { display: none !important; }
}
.mobilebar__wa {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; border-radius: 12px;
  border: 1px solid rgba(49,84,33,.24); background: transparent;
  color: var(--sage-900) !important; text-decoration: none !important;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
}
.mobilebar__wa:active { background: rgba(49,84,33,.06); }
.mobilebar__quote {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px !important; padding-block: 15px; font-size: 14px;
}

/* ==========================================================================
   MOBILE APP-FEEL PASS (17.5) — make the phone experience read like a native
   app: animated slide-over menu, the quote form as a bottom sheet, tactile
   tap feedback, momentum scrolling, and safe-area-aware chrome.
   ========================================================================== */

/* ---- Global touch polish (touch devices only) ---- */
@media (hover: none) {
  a, button, .btn, .tile, .chip, [role="button"], summary,
  .occ-row, .mobilebar__wa, .mobilebar__quote, .nav-drawer a {
    -webkit-tap-highlight-color: transparent;
  }
  .btn { transition: transform .12s ease, box-shadow .3s ease, background .2s ease; }
  .btn:active { transform: scale(.97); }
  .tile:active, .chip:active, summary:active { transform: scale(.985); }
  .mobilebar__quote:active { transform: scale(.97); }
  .mobilebar__wa:active { background: rgba(49,84,33,.08); }
  a:active { opacity: .7; }
  /* momentum + no scroll-chaining inside scroll regions */
  .nav-drawer, .quotebox__scroll, [data-rail-track], .dishrail__track,
  .revgal__stage { -webkit-overflow-scrolling: touch; }
}

/* ---- App-like slide-over menu ---- */
@media (max-width: 900px) {
  .nav-drawer {
    display: block;                 /* always mounted so it can transition */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .42s var(--ease-out), visibility 0s .42s;
    padding: 18px 22px calc(26px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    box-shadow: -20px 0 60px -20px rgba(20,26,17,.4);
  }
  .nav-drawer.is-open {
    display: block; transform: none; visibility: visible;
    transition: transform .42s var(--ease-out), visibility 0s;
  }
  html.rm .nav-drawer { transition: none; }
  .nav-drawer__head { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(172,170,145,.4); }
  /* larger, app-list tap targets with chevrons */
  .nav-drawer nav > a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 54px; padding: 14px 2px; font-size: 20px; font-weight: 500;
    border-bottom: 1px solid rgba(172,170,145,.28);
  }
  .nav-drawer nav > a::after {
    content: "›"; font-size: 22px; color: var(--clay-500);
    opacity: .7;
  }
  .nav-drawer nav > span {
    margin-top: 18px; font-family: var(--font-sans); font-weight: 600;
    font-size: 11px; letter-spacing: .18em; color: var(--clay-700);
  }
  .nav-drawer .nav-drawer__sub { min-height: 48px; font-size: 17px; padding-left: 2px; }
  .nav-drawer .btn-row { margin-top: 26px; display: grid; gap: 10px; }
  .nav-drawer .btn-row .btn { justify-content: center; padding-block: 16px; }
}

/* ---- Quote form as a bottom sheet on phones ---- */
@media (max-width: 640px) {
  .quotebox__panel {
    top: auto; bottom: 0; left: 0; right: 0;
    transform: none; width: 100%; max-height: 90vh;
    border-radius: 22px 22px 0 0;
  }
  .quotebox.is-open .quotebox__panel { animation: quoteSheet .4s var(--ease-out); }
  @keyframes quoteSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
  html.rm .quotebox.is-open .quotebox__panel { animation: none; }
  /* drag-handle affordance */
  .quotebox__panel::before {
    content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 2px; background: rgba(49,84,33,.22); z-index: 4;
  }
  .quotebox__scroll { padding-top: 30px; overscroll-behavior: contain; }
  .quotebox__close { top: 12px; right: 12px; }
}

/* ---- Split-line safety net: under 700px any residual split markup flows
        as normal inline text, so headings can never break mid-line ---- */
@media (max-width: 699px) {
  .split-line, .split-line__in, .sw { display: inline !important; }
  .split-line__in { transform: none !important; transition: none !important; opacity: 1 !important; }
  .hero h1, .section-head h2 { opacity: 1 !important; }
}

/* ==========================================================================
   CTA FOLD v2 (17.7) — asymmetric split: editorial copy left, the
   "booking slip" card stack right. The slip draws the one-wedding-a-date
   promise as a paper artefact: big numeral, ruled rows, slight tilt over a
   shadow card. Replaces the blank centred version.
   ========================================================================== */
.ctafold { text-align: left; }
.ctafold__grid {
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
/* copy returns to the editorial masthead (left, folio, rule) */
.ctafold .section-head { text-align: left; align-items: stretch; margin-bottom: 34px; }
.ctafold .section-head h2 { text-align: left; margin-inline: 0; max-width: 16ch; }
.ctafold .section-head__lead { text-align: left; margin-inline: 0; max-width: 46ch; }
.ctafold .eyebrow-num { justify-content: flex-start; width: 100%; margin-inline: 0; }
.ctafold .eyebrow-num::after { display: block; }
.ctafold__actions { justify-content: flex-start; }
.ctafold__fine { text-align: left; }

/* ---- the booking slip ---- */
.dateslip { position: relative; justify-self: center; width: min(320px, 100%); }
.dateslip__card {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 30px 30px 26px;
  background: var(--paper);
  border-radius: 14px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.9),
    0 2px 6px rgba(12,18,10,.28),
    0 32px 64px -24px rgba(12,18,10,.55);
  transform: rotate(-3deg);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.dateslip:hover .dateslip__card:not(.dateslip__card--under) { transform: rotate(-1.2deg) translateY(-6px); }
.dateslip__card--under {
  position: absolute; inset: 0; z-index: 1; padding: 0;
  background: rgba(238,217,190,.16);
  border: 1px solid rgba(238,217,190,.28);
  transform: rotate(3.5deg);
  box-shadow: none;
}
/* perforated slip top */
.dateslip__card:not(.dateslip__card--under)::before {
  content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 2px;
  background-image: radial-gradient(circle, rgba(49,84,33,.28) 1.2px, transparent 1.6px);
  background-size: 10px 2px;
}
.dateslip__season {
  font-family: var(--font-sans); font-weight: 600; font-size: 10.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--clay-700);
  margin-bottom: 2px;
}
.dateslip__month {
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
  color: var(--sage-700); margin-bottom: 12px;
}
.dateslip__num {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 118px; line-height: .9; letter-spacing: -.02em;
  color: var(--sage-900);
}
.dateslip__cap {
  font-family: var(--font-serif); font-style: italic; font-size: 19px;
  color: var(--clay-700); margin: 4px 0 18px;
}
.dateslip__rule { width: 100%; height: 1px; background: rgba(49,84,33,.16); margin-bottom: 14px; }
.dateslip__row {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 0;
  font-family: var(--font-sans); font-weight: 600; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sage-700);
}
.dateslip__row i {
  font-style: italic; font-family: var(--font-serif); font-weight: 400;
  font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--sage-900);
}
.dateslip__row + .dateslip__row { border-top: 1px dashed rgba(49,84,33,.14); }

@media (max-width: 900px) {
  .ctafold__grid { grid-template-columns: 1fr; gap: 44px; }
  .dateslip { justify-self: start; width: min(300px, 88%); margin-left: 6px; }
}
html.rm .dateslip__card { transition: none; }

/* ==========================================================================
   CRAFT DETAILS (17.8) — the small signatures generated sites never carry.
   ========================================================================== */
::selection { background: rgba(187,104,72,.28); color: var(--ink); }
.band--sage ::selection, .section--dark ::selection, .cinema ::selection {
  background: rgba(238,217,190,.4); color: #1B1F18;
}
h1, h2, h3, .pagehead h1 { text-wrap: balance; }
p, .section-head__lead, .lead, figcaption { text-wrap: pretty; }

/* ---- Dark-fold → footer seam: when a page ENDS on a dark rounded band,
        leave a slip of paper ground before the dark footer so the two read
        as separate cards, not one attached mass ---- */
main > section.band--sage:last-child,
main > section.enq-band:last-child,
main > section.section--dark:last-child {
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  main > section.band--sage:last-child,
  main > section.enq-band:last-child,
  main > section.section--dark:last-child { margin-bottom: 18px; }
}

/* ==========================================================================
   FLOATING CONTACT DOCK (18.1) — ported from the HAO reference into the
   Chaat system: frosted circular stack bottom-right, WhatsApp as the clay
   accent with a slow pulsing ring, staggered entrance on scroll.
   ========================================================================== */
.cfloat {
  position: fixed; right: 20px; bottom: 22px; z-index: 90;
  display: flex; flex-direction: column; gap: 9px;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .55s cubic-bezier(.14,1,.34,1), transform .55s cubic-bezier(.14,1,.34,1);
}
.cfloat.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cfloat__item {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(246,242,233,.88);
  color: var(--sage-900);
  border: 1px solid rgba(49,84,33,.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 2px 6px rgba(20,26,17,.12), 0 12px 28px -12px rgba(20,26,17,.28);
  text-decoration: none !important;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s cubic-bezier(.14,1,.34,1), transform .45s cubic-bezier(.14,1,.34,1),
    background-color .3s ease, color .3s ease, border-color .3s ease;
}
.cfloat.is-visible .cfloat__item { opacity: 1; transform: translateY(0); }
.cfloat.is-visible .cfloat__item:nth-child(1) { transition-delay: 0s; }
.cfloat.is-visible .cfloat__item:nth-child(2) { transition-delay: .08s; }
.cfloat.is-visible .cfloat__item:nth-child(3) { transition-delay: .16s; }
.cfloat__item:hover { background: var(--sage-900); color: var(--paper); border-color: var(--sage-900); transform: translateY(-3px); }
.cfloat__item--accent {
  background: var(--clay-700); color: #F5F1E8; border-color: var(--clay-700);
  position: relative;
}
.cfloat__item--accent:hover { background: var(--clay-500); border-color: var(--clay-500); color: #fff; }
.cfloat__item--accent::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1.5px solid rgba(187,104,72,.75);
  animation: cfloatPulse 2.6s ease-out infinite; pointer-events: none;
}
@keyframes cfloatPulse {
  0% { transform: scale(1); opacity: .6; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
html.rm .cfloat__item--accent::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cfloat__item--accent::after { animation: none; opacity: 0; } }
/* the video bubble sits just above the horizontal dock — one corner cluster */
.vreview { bottom: 82px; }
@media (max-width: 860px) { .cfloat { display: none; } }

/* ==========================================================================
   FOOTER DEPTH (18.1) — the flat sage-700 slab gets the band-sage gradient
   register plus a soft top glow, so the close matches the rest of the system.
   Grid gains the Where-we-cook column.
   ========================================================================== */
.site-footer {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(238,217,190,.07), transparent 60%),
    linear-gradient(172deg, #4D6448 0%, #41563D 46%, #35492F 100%);
}
.footer__grid { grid-template-columns: 1.25fr 1fr 1fr 1.05fr 1.05fr; gap: 34px; }
@media (max-width: 1100px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   AMBIENT DRIFT FIELD (18.2) — soft-focus colour orbs floating very slowly
   behind light folds. Depth without noise: palette-tinted, heavily blurred,
   GPU-cheap transforms only. Off under reduced motion.
   ========================================================================== */
.drift-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* Raise real content above the drift layer — but never the absolutely placed
   decor. Forcing position:relative on a .lotus-seam or .brandcorner collapses
   it to a 0x0 inline box, which silently killed those ornaments on every
   section where a drift field happened to be the earlier sibling. */
.drift-field ~ .container,
.drift-field ~ *:not(.lotus-seam):not(.brandcorner):not(.ghat-drift__art):not(.ghat-anchor__art):not(.lotus-divider) {
  position: relative; z-index: 1;
}
.drift-field i {
  position: absolute; border-radius: 50%; display: block;
  filter: blur(64px); will-change: transform;
}
.drift-field i:nth-child(1) {
  width: 420px; height: 420px; left: -120px; top: 8%;
  background: rgba(187,104,72,.1);
  animation: driftA 46s ease-in-out infinite alternate;
}
.drift-field i:nth-child(2) {
  width: 340px; height: 340px; right: -90px; top: 40%;
  background: rgba(238,217,190,.16);
  animation: driftB 58s ease-in-out infinite alternate;
}
.drift-field i:nth-child(3) {
  width: 280px; height: 280px; left: 34%; bottom: -80px;
  background: rgba(77,100,72,.1);
  animation: driftC 52s ease-in-out infinite alternate;
}
@keyframes driftA { from { transform: translate(0,0) scale(1); } to { transform: translate(90px,60px) scale(1.12); } }
@keyframes driftB { from { transform: translate(0,0) scale(1); } to { transform: translate(-70px,-80px) scale(.92); } }
@keyframes driftC { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,-50px) scale(1.08); } }
html.rm .drift-field i { animation: none; }
@media (prefers-reduced-motion: reduce) { .drift-field i { animation: none; } }
@media (max-width: 640px) { .drift-field i { filter: blur(48px); opacity: .8; } }

/* ---- Scroll progress: slightly more present, glowing tip ---- */
.scroll-progress { height: 3px; }
.scroll-progress__bar {
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px rgba(187,104,72,.55);
}

/* ==========================================================================
   UI/UX AUDIT FIXES (18.3) — 26 confirmed findings from the adversarial
   audit, resolved. Grouped: CTA integrity, motion hygiene, layering, no-JS.
   ========================================================================== */

/* ---- CTA integrity ---- */
/* hero secondary: paper chrome at rest, readable sage-on-paper on hover
   (the old inline style made hover text paper-on-paper — invisible) */
.btn--on-dark { color: var(--paper); border-color: var(--paper); }
.btn--on-dark:hover { background: var(--paper); color: var(--sage-900) !important; border-color: var(--paper); }
/* outlined controls were sub-3:1 against their grounds */
.revg-nav { border-color: rgba(49,84,33,.48); }
.btn--ghost { border-color: rgba(232,228,220,.68); }
.mobilebar__wa { border-color: rgba(49,84,33,.42); }
/* primary/secondary adjacent height parity: borders eat into equal padding */
.btn--secondary { padding: calc(14px - 1.5px) calc(32px - 1.5px); }
.btn--ghost { padding: calc(14px - 1px) calc(32px - 1px); }

/* ---- Motion hygiene ---- */
/* progress bar is transform-driven now */
.scroll-progress__bar { width: 100%; transform: scaleX(0); transform-origin: left center; transition: transform 80ms linear; will-change: transform; }
html.rm .hero__venue span.is-on { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero__venue span.is-on { animation: none; } }
/* scroll containment on the remaining overlays */
.revlb, .vreview-modal { overscroll-behavior: contain; }

/* ---- Layering ---- */
/* the old body padding kill-switch was flattening the mobile bar clearance */
@media (max-width: 860px) { body { padding-bottom: 84px !important; } }
/* form lightbox decisively above every other overlay */
.quotebox { z-index: 340; }

/* ---- No-JS safety: content never stays hidden without the reveal JS ---- */
html:not(.js) [data-reveal], html:not(.js) [data-reveal] > *,
html:not(.js) .proofband__row li, html:not(.js) .howwe__steps li {
  opacity: 1 !important; transform: none !important;
}

/* ---- padding-left hovers → transforms (composited) where structure allows ---- */
.mega__link { transition: color .2s ease, transform .25s var(--ease-out); }
.mega__link:hover { padding-left: 0; transform: translateX(5px); }
.footer__col ul a { transition: transform 200ms var(--ease-out), color 200ms ease; }
.footer__col ul a:hover { padding-left: 0; transform: translateX(6px); }

/* ==========================================================================
   COMPACT FLOATING MOBILE DOCK (18.3) — the reference treatment: a centred
   glass pill floating above the bottom edge, not an edge-to-edge slab.
   ========================================================================== */
@media (max-width: 860px) {
  .mobilebar {
    left: 50%; right: auto; bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: auto; max-width: calc(100vw - 28px);
    padding: 6px;
    gap: 8px;
    border: 1px solid rgba(172,170,145,.5);
    border-radius: 999px;
    background: rgba(246,242,233,.88);
    box-shadow: 0 4px 14px rgba(20,26,17,.14), 0 18px 44px -14px rgba(20,26,17,.34);
    border-top: 1px solid rgba(172,170,145,.5);
  }
  .mobilebar__wa {
    width: 46px; height: 46px; padding: 0; justify-content: center;
    border-radius: 50%;
  }
  .mobilebar__wa span { display: none; }
  .mobilebar__quote { border-radius: 999px !important; padding: 0 22px; height: 46px; }
}

/* ==========================================================================
   LOGO HALO (18.3) — a slow-turning soft glow behind the petal mark.
   Conic cream/clay wash, heavily blurred, barely-there; off under rm.
   ========================================================================== */
.nav__plaque::before {
  content: ""; position: absolute; inset: -14%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(238,217,190,0) 0%, rgba(238,217,190,.5) 18%, rgba(187,104,72,.32) 38%,
    rgba(238,217,190,0) 55%, rgba(238,217,190,.4) 76%, rgba(238,217,190,0) 100%);
  filter: blur(13px);
  opacity: .55; z-index: -1;
  animation: haloTurn 16s linear infinite;
  pointer-events: none;
}
@keyframes haloTurn { to { transform: rotate(360deg); } }
.site-header.is-stuck .nav__plaque::before { opacity: .35; }
html.rm .nav__plaque::before { animation: none; opacity: .3; }
@media (prefers-reduced-motion: reduce) { .nav__plaque::before { animation: none; opacity: .3; } }

/* ---- Compact dock: buttons size to their content, labels never wrap ---- */
@media (max-width: 860px) {
  .mobilebar__quote { flex: 0 0 auto; white-space: nowrap; }
  .mobilebar__wa { flex: 0 0 auto; }
}

/* ==========================================================================
   QUOTEBOX SLIM (18.4) — the form read heavy in the lightbox: five tall
   hinted tiles + planner note + two chip groups all at once. In the panel,
   tiles compress to label pills in two columns, hints go, the planner line
   whispers, rhythm tightens. Fields and values untouched.
   ========================================================================== */
.quotebox .enq__progress { margin-bottom: 16px; }
.quotebox .enq__ask { font-size: 18px; margin-bottom: 12px; }
.quotebox .tilegrid { grid-template-columns: 1fr 1fr; gap: 7px; }
.quotebox .tile__body { padding: 11px 34px 11px 13px; }
.quotebox .tile__body b { font-size: 14.5px; }
.quotebox .tile__body small { display: none; }        /* labels carry it */
.quotebox .tile__dot { width: 14px; height: 14px; right: 11px; }
.quotebox .tile input:checked ~ .tile__dot { box-shadow: inset 0 0 0 2.5px #fff; }
.quotebox .enq__planner {
  margin-top: 8px; padding: 0; background: none; border: 0;
  font-size: 11.5px; color: var(--sage-700);
}
.quotebox .enq__chips { margin-bottom: 10px; }
.quotebox .enq__chips legend { margin-bottom: 6px; font-size: 12px; }
.quotebox .chip span { padding: 6px 12px; font-size: 12.5px; }
.quotebox .enq__nav { margin-top: 12px; }
.quotebox .enq__step-panel::before { display: none; }  /* no watermark numeral in the panel */
.quotebox__title { margin-bottom: 16px; font-size: clamp(24px, 3vw, 30px); }
.quotebox__scroll { padding-top: 36px; }
@media (max-width: 520px) {
  .quotebox .tilegrid { grid-template-columns: 1fr 1fr; }
  .quotebox .tile__body { padding: 10px 30px 10px 12px; }
}

/* ---- Fillable text is always the clean sans — serif tails have no place
        in an input. Applies to typed values, placeholders and pickers. ---- */
.enq__f input, .enq__f textarea,
.enq input, .enq textarea, .enq select,
.enquiry input, .enquiry textarea, .enquiry select {
  font-family: var(--font-sans);
  font-size: 16px;                 /* and ≥16px so iOS never zoom-jumps */
  letter-spacing: .01em;
}
.enq__f input::placeholder, .enq__f textarea::placeholder { font-family: var(--font-sans); }
/* date picker internals follow suit */
.enq__f input[type="date"] { font-family: var(--font-sans); }

/* ==========================================================================
   QUOTEBOX FRIENDLY (18.6) — planners and hosts as equals, popup that
   doesn't swallow the screen, closing is obvious, filling is effortless.
   ========================================================================== */
/* planner toggle: an inviting switch row, not fine print */
.enq__plannertoggle {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 2px; padding: 11px 14px;
  background: rgba(49,84,33,.05); border: 1px dashed rgba(49,84,33,.22);
  border-radius: 10px; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.enq__plannertoggle:hover { background: rgba(49,84,33,.08); }
.enq__plannertoggle input { accent-color: var(--clay-700); width: 16px; height: 16px; }
.enq__plannertoggle span {
  font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; color: var(--sage-900);
}
.enq__plannertoggle small {
  font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--sage-700);
}
.enq__client { margin-top: 10px; }
.enq__client[hidden] { display: none; }

/* the popup is a card, not a takeover */
.quotebox__panel { max-height: 84vh; }
@media (max-width: 640px) {
  .quotebox__panel { max-height: 86vh; border-radius: 22px 22px 0 0; }
}
/* closing is unmissable: labelled button, plus the backdrop and Escape */
.quotebox__close {
  width: auto; height: 40px; padding: 0 16px 0 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-weight: 600; font-size: 12.5px;
  letter-spacing: .06em;
}
.quotebox__close::after {
  content: "Close"; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}

/* ---- Footer mark carries the same slow halo as the header — the pair
        bookend the page with one signature ---- */
.footer__mark { position: relative; display: inline-block; }
.footer__mark::before {
  content: ""; position: absolute; inset: -16%;
  border-radius: 50%;
  background: conic-gradient(from 180deg,
    rgba(238,217,190,0) 0%, rgba(238,217,190,.4) 18%, rgba(187,104,72,.35) 38%,
    rgba(238,217,190,0) 55%, rgba(238,217,190,.32) 76%, rgba(238,217,190,0) 100%);
  filter: blur(14px);
  opacity: .5; z-index: 0;
  animation: haloTurn 18s linear infinite reverse;
  pointer-events: none;
}
.footer__mark img { position: relative; z-index: 1; }
html.rm .footer__mark::before { animation: none; opacity: .28; }
@media (prefers-reduced-motion: reduce) { .footer__mark::before { animation: none; opacity: .28; } }

/* ---- Footer mark separation: a steady radial backing glow beneath the
        rotating halo, plus edge lift on the mark itself, so the terracotta
        lotus reads clearly against the sage ground ---- */
.footer__mark::after {
  content: ""; position: absolute; inset: -22%;
  border-radius: 50%; z-index: 0;
  background: radial-gradient(circle,
    rgba(238,217,190,.22) 0%, rgba(238,217,190,.12) 42%, rgba(238,217,190,0) 70%);
  pointer-events: none;
}
.footer__mark img {
  filter: drop-shadow(0 4px 14px rgba(12,18,10,.55)) drop-shadow(0 1px 3px rgba(12,18,10,.4));
}
/* the rotating conic rides above the steady glow */
.footer__mark::before { z-index: 1; opacity: .55; }
.footer__mark img { z-index: 2; }

/* ---- Pure veg mark: the green dot square, aligned to its text line ---- */
.vegmark { display: inline-block; vertical-align: -2px; margin-right: 2px; }
.hero__badge .vegmark { vertical-align: -2.5px; background: rgba(246,242,233,.92); border-radius: 3px; padding: 1px; }
.proofband__row .vegmark { vertical-align: -2px; }
.footer__legal .vegmark { background: rgba(246,242,233,.92); border-radius: 3px; padding: 1px; vertical-align: -2.5px; }

/* ---- Hill fold: capability list replaces the pseudo-stat row ---- */
.cinema__list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cinema__list li {
  position: relative; padding-left: 26px;
  font-family: var(--font-sans); font-size: 15px; line-height: 1.5;
  color: rgba(232,228,220,.88);
}
.cinema__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 7px;
  border-left: 2px solid #E9C9A8; border-bottom: 2px solid #E9C9A8;
  transform: rotate(-45deg);
}

/* ---- Footer reach links: the generic list-link rule forced inline-block,
        which kills flex gap — icon sat glued to its label ---- */
.footer__col ul.footer__reach a { display: inline-flex; align-items: center; gap: 9px; }
.footer__col ul.footer__reach a svg { flex: none; }

/* ---- Founder fold on mobile: the portrait leads, the copy follows ---- */
@media (max-width: 900px) {
  .founderfold__grid .founderfold__portrait { order: -1; }
}

/* ---- Contact dock: horizontal row on desktop, WhatsApp anchoring the corner ---- */
.cfloat { flex-direction: row; align-items: center; }

/* ---- Instagram follow row — closes the reviews fold; the films' home ---- */
.instarow {
  display: flex; align-items: center; gap: 18px;
  max-width: 660px; margin: 42px auto 0;
  padding: 18px 22px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(49,84,33,.14);
  border-radius: var(--r-md);
}
.instarow__mark {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--sage-900); color: var(--paper);
}
.instarow__copy { flex: 1; margin: 0; min-width: 0; }
.instarow__copy b {
  display: block; font-family: var(--font-serif); font-weight: 500;
  font-size: 17px; color: var(--sage-900);
}
.instarow__copy span {
  display: block; margin-top: 2px;
  font-family: var(--font-sans); font-size: 13px; color: var(--sage-700);
}
.instarow__btn { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
  .instarow { flex-wrap: wrap; text-align: left; gap: 12px; }
  .instarow__btn { flex: 1 1 100%; justify-content: center; }
}

/* ---- Trade strip: the planner door on the homepage — a ruled line, not a fold ---- */
.tradestrip { background: var(--paper); border-block: 1px solid rgba(172,170,145,.4); }
.tradestrip__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding-block: 22px;
}
.tradestrip__copy { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tradestrip__copy b {
  font-family: var(--font-serif); font-weight: 500; font-size: 18px; color: var(--sage-900);
}
.tradestrip__copy span { font-family: var(--font-sans); font-size: 13.5px; color: var(--sage-700); }
.tradestrip .link-more { white-space: nowrap; }

/* ---- Download button: icon sits with the label ---- */
.btn--download { display: inline-flex; align-items: center; gap: 8px; }
.btn--download svg { flex: none; }

/* ==========================================================================
   TRUST ROW (19.4) — venue and partner marks beneath the proof band.
   Logos unified to a single quiet tone; colour returns on hover.
   ========================================================================== */
.trustrow { background: var(--paper); border-bottom: 1px solid rgba(172,170,145,.34); padding-block: 26px 30px; }
.trustrow__label {
  margin: 0 0 18px; text-align: center;
  font-family: var(--font-sans); font-weight: 600; font-size: 10.5px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--sage-700);
}
.trustrow__logos {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(28px, 5vw, 64px); flex-wrap: wrap;
}
.trustrow__item { display: inline-flex; align-items: center; }
.trustrow__item img {
  height: 34px; width: auto; max-width: 150px; object-fit: contain;
  filter: grayscale(1) opacity(.55) contrast(1.05);
  transition: filter .35s ease, transform .35s var(--ease-out);
}
.trustrow__item:hover img { filter: none; transform: translateY(-2px); }
@media (max-width: 640px) {
  .trustrow__logos { gap: 22px 28px; }
  .trustrow__item img { height: 26px; max-width: 110px; }
}

/* ---- Proof band at six KPIs ---- */
.proofband__row { grid-template-columns: repeat(6, 1fr); }
.proofband__row li { padding: 4px 12px; }
.proofband__row b { font-size: clamp(25px, 2.6vw, 36px); }
@media (max-width: 1000px) {
  .proofband__row { grid-template-columns: repeat(3, 1fr); gap: 26px 0; }
  .proofband__row li:nth-child(4)::before { display: none; }
}
@media (max-width: 640px) {
  .proofband__row { grid-template-columns: repeat(2, 1fr); }
  .proofband__row li:nth-child(3)::before { display: none; }
  .proofband__row li:nth-child(5)::before { display: none; }
}

/* counter spans live inside <b>; labels are <em> so the two never collide */
.proofband__row b span { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; display: inline; margin: 0; }

/* honeypot: off-screen but not display:none, so bots still fill it */
.enq__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Reassurance at the ask: the last step is where people hesitate ---- */
.enq__assure { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.enq__assure li {
  position: relative; padding-left: 22px;
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--sage-700);
}
.enq__assure li::before {
  content: ""; position: absolute; left: 2px; top: 5px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--clay-700); border-bottom: 2px solid var(--clay-700);
  transform: rotate(-45deg);
}

/* ==========================================================================
   LEGAL PAGES — readable measure, quiet hierarchy. Long text wants a column,
   not a full-width band.
   ========================================================================== */
.legal { max-width: 68ch; margin-inline: auto; }
.legal h2 {
  font-size: clamp(19px, 1.8vw, 23px); margin: 38px 0 10px;
  color: var(--sage-900);
}
.legal h2:first-child { margin-top: 0; }
.legal p {
  margin: 0 0 14px;
  font-family: var(--font-sans); font-size: 15.5px; line-height: 1.72; color: var(--sage-700);
}
.legal a { color: var(--clay-700); text-decoration: underline; text-underline-offset: 2px; }
.legal__note {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(49,84,33,.16);
  font-style: italic; font-family: var(--font-serif) !important; font-size: 14.5px !important;
}

/* ==========================================================================
   PAGEHEAD VERB ROW (20.4) — the occasion's intent in three letterspaced
   words beneath the lead. A premium editorial signature: the reader finds
   their own mandate before a line of service copy.
   ========================================================================== */
.pagehead__verbs {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
  margin: 30px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(49,84,33,.16);
  max-width: 34ch;
}
.pagehead__verbs span {
  font-family: var(--font-sans); font-weight: 600; font-size: 10.5px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--clay-700);
  padding: 0 clamp(10px, 2vw, 18px);
  position: relative;
}
.pagehead__verbs span + span::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: rgba(49,84,33,.32);
}
@media (max-width: 480px) {
  .pagehead__verbs span { font-size: 9.5px; letter-spacing: .2em; padding: 0 9px; }
}

/* ==========================================================================
   SPEC SHEET (20.6) — the operational facts as a datasheet, not prose.
   The move the premium event caterers make and the local market does not:
   a planner can screenshot this straight into a client deck. Value leads in
   the serif, label sits small and quiet, hairlines do the ruling.
   ========================================================================== */
.specsheet {
  /* Sits under a price band on most pages: it needs its own air so the two
     read as separate statements rather than one stacked block. */
  margin: clamp(44px, 5.5vw, 72px) 0 0; padding: 0;
  border-top: 1px solid rgba(49,84,33,.2);
  columns: 2; column-gap: clamp(34px, 5vw, 72px);
}
.specsheet__row {
  break-inside: avoid; page-break-inside: avoid;
  display: block; padding: 20px 0 18px;
  border-bottom: 1px solid rgba(49,84,33,.14);
}
.specsheet dt {
  font-family: var(--font-sans); font-weight: 600; font-size: 10.5px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--clay-700); margin: 0 0 7px;
}
.specsheet dd {
  margin: 0;
  font-family: var(--font-serif); font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.5; color: var(--ink);
}
/* Leading figures read as data, not decoration. */
.specsheet dd::first-line { font-variant-numeric: lining-nums tabular-nums; }
.specsheet__note {
  margin: 26px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(49,84,33,.14);
  font-family: var(--font-serif); font-style: italic;
  font-size: 15px; line-height: 1.6; color: var(--sage-700);
  max-width: 62ch;
}
/* On the sage band the hairlines and label colour have to flip. */
.band--sage .specsheet,
.band--sage .specsheet__row { border-color: rgba(232,228,220,.22); }
.band--sage .specsheet dt { color: var(--clay-300); }
.band--sage .specsheet dd { color: var(--paper); }
.band--sage .specsheet__note { color: rgba(232,228,220,.72); border-color: rgba(232,228,220,.22); }

@media (max-width: 760px) {
  .specsheet { columns: 1; }
  .specsheet__row { padding: 16px 0 15px; }
  .specsheet dd { font-size: 16px; }
}

/* ==========================================================================
   EDITORIAL PHOTO SET (20.8) — the homepage carries its weight in imagery;
   the inner pages were running on type alone. These give every page the same
   photographic rhythm: a full band to open air between text folds, an offset
   pair for narrative, a trio for range. Captions are the house italic.
   All reveal-compatible and safe inside any band.
   ========================================================================== */

/* --- shared figure chrome --- */
.pfig { margin: 0; position: relative; }
.pfig img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  background: var(--warm-gray);
}
.pfig figcaption,
.photoband__cap {
  margin-top: 12px;
  font-family: var(--font-serif); font-style: italic;
  font-size: 14.5px; line-height: 1.5; color: var(--sage-700);
}
.band--sage .pfig figcaption,
.band--sage .photoband__cap { color: rgba(232,228,220,.74); }

/* --- 1. PHOTO BAND: one wide plate that lets a text-heavy page breathe --- */
.photoband { margin: clamp(56px, 7vw, 96px) 0 0; }
.photoband__frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  aspect-ratio: 21 / 9; background: var(--warm-gray);
}
.photoband__frame img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.photoband:hover .photoband__frame img { transform: scale(1); }
/* a whisper of the house green so photography sits in the palette */
.photoband__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(49,84,33,.14));
}
@media (max-width: 760px) {
  .photoband__frame { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
}

/* --- 2. PHOTO PAIR: offset duo, the editorial move --- */
.photopair {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(18px, 3vw, 40px); align-items: end;
  margin: clamp(56px, 7vw, 96px) 0 0;
}
.photopair .pfig:first-child img { aspect-ratio: 4 / 3; }
.photopair .pfig:last-child  img { aspect-ratio: 3 / 4; }
/* the smaller plate drops, so the pair reads as a spread not a row */
.photopair .pfig:last-child { transform: translateY(clamp(16px, 3vw, 38px)); }
@media (max-width: 760px) {
  .photopair { grid-template-columns: 1fr; gap: 18px; }
  .photopair .pfig:last-child { transform: none; }
  .photopair .pfig img { aspect-ratio: 4 / 3 !important; }
}

/* --- 3. PHOTO TRIO: three plates, centre one taller --- */
.phototrio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 28px); align-items: center;
  margin: clamp(56px, 7vw, 96px) 0 0;
}
.phototrio .pfig img { aspect-ratio: 3 / 4; }
.phototrio .pfig:nth-child(2) img { aspect-ratio: 3 / 4.6; }
@media (max-width: 760px) {
  .phototrio { grid-template-columns: repeat(2, 1fr); }
  .phototrio .pfig:nth-child(3) { display: none; }
  .phototrio .pfig:nth-child(2) img { aspect-ratio: 3 / 4; }
}
@media (max-width: 420px) {
  .phototrio { grid-template-columns: 1fr; }
  .phototrio .pfig:nth-child(3) { display: block; }
}

/* ==========================================================================
   MOBILE FIRST PASS (20.10) — measured on a real 390px device profile, not
   guessed. Two classes of defect were found and are fixed here:
   1. Tap targets under the 44px minimum (footer links sat at 25px tall, the
      hero dots at 2px, header and gallery controls at 38 to 42px).
   2. Type below 12.5px in running copy, down to 9.5px on the verb row.
   Hit areas grow through padding and pseudo elements so nothing about the
   visual design changes; only the touchable region and the type floor move.
   ========================================================================== */
@media (max-width: 860px) {

  /* ---- 1. Interactive elements reach 44px ---- */

  /* Footer navigation was the worst offender: 160 links at 25px tall. */
  .footer__col ul li { margin: 0; }
  .footer__col ul a {
    display: flex; align-items: center;
    min-height: 44px; padding-block: 4px;
  }
  .footer__col ul a:hover { padding-left: 0; }

  /* Header controls: 42px is close but still short of the minimum. */
  .nav__wa, .nav__toggle { min-width: 44px; min-height: 44px; }
  .nav__toggle { padding: 11px; }

  /* Inline "read more" links: the text is small, the target should not be. */
  .link-more {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }

  /* Review gallery controls. */
  .revg-nav, .revg__expand, .revg__play { min-width: 44px; min-height: 44px; }

  /* The hero dots sat at bottom:26px, directly underneath the fixed action
     bar — a hit test at the dot centre returned .mobilebar__quote, so on a
     phone they were entirely unreachable. Lift them clear of the bar. */
  .hero__dots { bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* Hero slider dots stay 8px visually; the touchable square around each one
     grows to 44px through a transparent pseudo element. */
  .hero__dot { position: relative; }
  .hero__dot::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 50%;
  }
  .hero__dots { gap: 4px; }

  /* The masthead kept a desktop sized opening gap on phones: 112px of padding
     under a 129px header left 111px of empty ground, 13% of a 844px viewport,
     before the eyebrow. Tightened so the headline and its lead sit above the
     fold on a normal handset. */
  .pagehead { padding-top: calc(72px + 24px); padding-bottom: 32px; }
  .pagehead__verbs { margin-top: 22px; padding-top: 18px; }

  /* Legal links in the footer base sat at 21px tall and, once the height was
     fixed, only 37px wide on their short words. Give them the full 44x44.
     Scoped to the legal nav so the inline credit link keeps its text baseline. */
  .footer__legalnav a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding-inline: 10px;
  }

  /* Any remaining icon only control. */
  .chip, .tile { -webkit-tap-highlight-color: rgba(149,75,46,.12); }

  /* ---- 2. Type floor ---- */

  /* Running copy never drops below 12.5px. */
  .tile small,
  .tilegrid small,
  .occ-row__desc,
  .card small,
  .pfig figcaption,
  .photoband__cap,
  .hero__badge { font-size: 12.5px !important; line-height: 1.5; }

  /* Letterspaced label type never drops below 11px, and loses some tracking
     so it stays readable rather than merely small. */
  .pagehead__verbs span { font-size: 11px; letter-spacing: .16em; }
  .eyebrow-num,
  .trustrow__label,
  .revg__tag,
  .dishcard__style,
  .mega__label { font-size: 11px !important; letter-spacing: .14em; }

  /* iOS zooms the page in when a focused field is under 16px. Keep every
     text entry at 16px so opening the lead form never zooms the layout. */
  .enq input[type="text"],
  .enq input[type="tel"],
  .enq input[type="email"],
  .enq input[type="date"],
  .enq textarea,
  .enq select { font-size: 16px !important; }
}

/* ==========================================================================
   SAGE BAND CARD CONTRAST (20.12) — main.css sets
   `.card:not(.occasion-card):not(.card--setup):not(.review-card)` to white,
   which at (0,4,0) outranks `.band--sage .card` at (0,2,0). The card therefore
   rendered white while the band still painted its text cream: measured 1.26:1,
   against a 4.5:1 requirement. The card is genuinely light, so the text is what
   has to change. Matching the original selector so this actually wins.
   ========================================================================== */
.band--sage .card:not(.occasion-card):not(.card--setup):not(.review-card) h3,
.band--sage .card:not(.occasion-card):not(.card--setup):not(.review-card) h4 {
  color: var(--sage-900);
}
.band--sage .card:not(.occasion-card):not(.card--setup):not(.review-card) p,
.band--sage .card:not(.occasion-card):not(.card--setup):not(.review-card) li,
.band--sage .card:not(.occasion-card):not(.card--setup):not(.review-card) span {
  color: var(--ink);
}
.band--sage .card:not(.occasion-card):not(.card--setup):not(.review-card) a {
  color: var(--clay-700);
}

/* ==========================================================================
   PHOTO PAIR, EVENED UP (20.12) — the pair mixed a 4:3 landscape with a 3:4
   portrait and then offset one of them, so a wide daylight frame sat beside a
   tall dusk frame at a visibly different size and it read as a mistake rather
   than as a spread. Both plates now share one ratio and one baseline, so the
   pair looks deliberate whatever the source images happen to be.
   ========================================================================== */
.photopair { grid-template-columns: 1fr 1fr; align-items: start; }
.photopair .pfig:first-child img,
.photopair .pfig:last-child img { aspect-ratio: 4 / 3; }
.photopair .pfig:last-child { transform: none; }
@media (max-width: 760px) {
  .photopair .pfig img { aspect-ratio: 4 / 3 !important; }
}

/* ==========================================================================
   QUOTE CTA PANEL (20.13) — the enquiry form now lives only in the lightbox,
   so every page that used to carry a tall inline form carries this instead.
   Same card footprint as the form it replaces, so the two column split with
   the "what happens next" rail still balances.
   ========================================================================== */
.enqcard--cta {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 0;
  padding: clamp(30px, 4vw, 52px);
}
.enqcard__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-sans); font-weight: 600; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--clay-700);
}
.enqcard__title {
  margin: 0 0 22px;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.14; color: var(--sage-900);
}
.enqcard__title em { font-style: italic; color: var(--clay-700); }
.enqcard__assure { list-style: none; margin: 0 0 28px; padding: 0; }
.enqcard__assure li {
  position: relative; padding-left: 24px; margin-bottom: 10px;
  font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--ink);
}
.enqcard__assure li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--clay-500);
}
.enqcard__go { align-self: stretch; text-align: center; }
.enqcard__alt {
  margin: 18px 0 0;
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
  color: var(--sage-700);
}
.enqcard__alt a { color: var(--clay-700); font-style: normal; text-decoration: none; }
.enqcard__alt a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .enqcard--cta { padding: 26px 22px 28px; }
  .enqcard__assure li { font-size: 15px; }
}

/* ==========================================================================
   SAGE BAND LEAD TEXT (20.15) — `.section-head .lead` is (0,2,0) and sets a
   dark grey (#6B6A62); `.band--sage p` is only (0,1,1), so the grey won on
   every dark green band no matter the source order. The lead paragraph was
   rendering dark grey on dark green. Anything that carries body copy on the
   sage ground is listed here at (0,3,0) or better so it actually wins.
   ========================================================================== */
.band--sage .section-head .lead,
.band--sage .section-head .section-head__lead,
.band--sage .section-head p,
.band--sage .lead,
.band--sage .section-head__lead {
  color: rgba(232,228,220,.86);
}
.band--sage .section-head .lead a,
.band--sage .lead a { color: #EED9BE; }

/* The same trap on the other dark grounds. */
.enq-band .section-head .lead,
.enq-band .section-head .section-head__lead,
.section--dark .section-head .lead,
.cinema .section-head .lead {
  color: rgba(232,228,220,.86);
}

/* ==========================================================================
   TYPE SCALE CORRECTION (20.16)
   Two faults pulling in opposite directions, both measured on desktop:
   1. .tilegrid tiles run 596px wide but set their description at 11.5px with
      no padding — a wide card carrying tiny type reads as unfinished.
   2. .occ-row__name tops out at 64px, which suits a one word label like
      "Weddings" but makes a real venue name ("Parv Vilas · ITC
      WelcomeHeritage") wrap to two lines and swamp the row.
   ========================================================================== */

/* --- 1. Tiles: give the card the type its width deserves --- */
.tilegrid .tile__body { padding: 22px 26px; display: block; }
.tilegrid .tile b {
  display: block; margin-bottom: 6px;
  font-family: var(--font-serif); font-weight: 500;
  font-size: 20px; line-height: 1.2; color: var(--sage-900);
}
.tilegrid .tile small {
  display: block;
  font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55;
  color: #4A4A43;
}
.tilegrid { gap: 14px; }
@media (max-width: 760px) {
  .tilegrid .tile__body { padding: 18px 20px; }
  .tilegrid .tile b { font-size: 18px; }
  .tilegrid .tile small { font-size: 14px; }
}

/* --- 2. Row names: sized for a venue name, not a single word --- */
.occ-row__name { font-size: clamp(28px, 3.1vw, 44px); }
@media (max-width: 860px) { .occ-row__name { font-size: clamp(24px, 6.4vw, 34px); } }

/* --- 3. Muted greys that measured just under WCAG AA --- */
.occ-row__desc { color: #57564E; }               /* was #6B6A62 → 4.32 */
.occ-row__num  { color: #7A7869; }               /* was 2.69 */
.section-head .lead { color: #57564E; }          /* was #6B6A62 → 4.41 */
.footer__tag { color: rgba(232,228,220,.88); }   /* was 4.04 */
.footer__col h3 { color: var(--paper); }         /* was sage-200 → 4.14 */
.enqrail__title { color: rgba(232,228,220,.82); }/* was .62 → 3.58 */
.band--sage .enqrail__title { color: rgba(232,228,220,.82); }

/* ==========================================================================
   GHAT WATERMARK + FRAMING (20.17)

   1. WATERMARK PRESENCE. The home page anchor art sits at .32; the inner page
      drift art was left at .13, which on a warm paper ground is close to
      invisible. Inner pages asked for the same watermark, so bring the two
      into the same register and give the art a little more size.

   2. CROP. Measured against a typical 3:2 source, the frames were discarding
      far too much: the 21:9 band lost 36% off the top and bottom, and the
      preview panel lost 69% off the sides — which is why counters were being
      cut in half. Gentler ratios keep the subject whole.
   ========================================================================== */

/* --- 1. The watermark reads as a watermark --- */
.ghat-drift__art { opacity: .22; width: min(720px, 60vw); }
@media (max-width: 640px) { .ghat-drift__art { width: 86vw; opacity: .17; } }

/* --- 2. Frames that keep the subject --- */
/* 21:9 → 16:9: loss on a 3:2 source drops from 36% to 16%. */
.photoband__frame { aspect-ratio: 16 / 9; }
@media (max-width: 760px) { .photoband__frame { aspect-ratio: 4 / 3; } }

/* The preview panel was 1:2.14 and cut both ends off every counter. Pin it to
   4:5 and centre it in the rail instead of stretching it full height. */
.occ-preview {
  top: 50%; bottom: auto; transform: translateY(-50%);
  aspect-ratio: 4 / 5; height: auto;
  width: clamp(260px, 26vw, 380px);
}
.occ-preview img { object-position: center; }

/* The trio's portrait plates were losing half of a landscape source. */
.phototrio .pfig img { aspect-ratio: 4 / 5; }
.phototrio .pfig:nth-child(2) img { aspect-ratio: 4 / 5.4; }
@media (max-width: 760px) {
  .phototrio .pfig img,
  .phototrio .pfig:nth-child(2) img { aspect-ratio: 4 / 3 !important; }
}

/* Softer edges so a plate reads as part of the page, not a card dropped on it. */
.photoband__frame { box-shadow: var(--shadow-2); }

/* Row names again: 44px still forced two line wraps on real names
   ("Fusion Blends", "Simply South", "Parv Vilas · ITC WelcomeHeritage").
   Sized so the common names sit on one line. */
.occ-row__name { font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -0.01em; }
@media (max-width: 860px) { .occ-row__name { font-size: clamp(20px, 5vw, 26px); } }

/* Masthead titles were capped at 18ch, which forced longer headlines
   ("Corporate catering your finance team can process.") into three cramped
   lines inside a wide, empty band. Give the line the width the band has. */
.pagehead h1 { max-width: 26ch; }
.pagehead__lead { max-width: 60ch; }
@media (max-width: 760px) { .pagehead h1 { max-width: 18ch; } }

/* ==========================================================================
   MOBILE HERO, DECONGESTED (20.25) — measured at 390x844: badge 2 lines,
   H1 3 lines, sub 5 lines and two stacked buttons ending 2px above the fixed
   action bar, with the slider dots underneath the buttons. 400px of text on
   a photograph. On a phone the hero keeps the headline and the one line
   promise; the badge, the geography sentence and the button stack go — the
   fixed action bar IS the mobile CTA and duplicating it above itself was
   noise. Geography lives in the KPI band and the footer either way.
   ========================================================================== */
@media (max-width: 640px) {
  .hero__badge { display: none; }
  .hero__sub-more { display: none; }
  .hero .btn-row, .hero__cta { display: none; }
  .hero__sub { margin-bottom: 0; }
}

/* ==========================================================================
   GHAT ART AS A TRUE WATERMARK (20.26) — the city PNGs carry their own paper
   ground, and the corner masks only feathered one corner, so wherever the art
   floated mid band the other three edges printed as a hard rectangle against
   the tint. One elliptical mask feathers every edge, so the drawing dissolves
   into the band the way the homepage anchor art does — and it also swallows
   the stray caption fragments baked into the artwork's edges.
   Applies to every instance, on every page, both variants.
   ========================================================================== */
.ghat-drift__art,
.ghat-drift__art--bl,
.ghat-drift__art--tr,
.ghat-anchor__art {
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 32%, transparent 72%);
  mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 32%, transparent 72%);
}

/* ==========================================================================
   PRICE BAND, DECARDED (20.27) — the white box with the terracotta spine
   read as a component dropped onto the page. Restyled as an editorial note:
   no box, no accent bar, just the fact set between two hairlines on the
   band's own ground — the same register as the spec sheet and the legal
   pages, which is the language the rest of the site already speaks.
   ========================================================================== */
.price-band {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  border-top: 1px solid rgba(49,84,33,.22);
  border-bottom: 1px solid rgba(49,84,33,.14);
  padding: 24px 0 22px; margin-block: 34px;
  max-width: 72ch;
}
.price-band strong {
  display: block; margin-bottom: 8px;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; color: var(--sage-900);
}
.price-band span {
  font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: #57564E;
}
.price-band br { display: none; }
.band--sage .price-band { border-color: rgba(232,228,220,.26); }
.band--sage .price-band strong { color: var(--paper); }
.band--sage .price-band span { color: rgba(232,228,220,.8); }

/* ==========================================================================
   FLOAT GATE (20.27) — the contact dock, review bubble and mobile action bar
   held their corner over the hero itself. They now arrive with the second
   fold: held while any of the opening fold is in view, then fade up.
   ========================================================================== */
body.float-gated .cfloat,
body.float-gated .vreview,
body.float-gated .mobilebar {
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
body.float-hold .cfloat,
body.float-hold .vreview,
body.float-hold .mobilebar {
  opacity: 0; pointer-events: none; transform: translateY(14px);
}
html.rm body.float-gated .cfloat, html.rm body.float-gated .vreview, html.rm body.float-gated .mobilebar { transition: none; }

/* ==========================================================================
   PROOF BAND AS A MARQUEE RIBBON (20.28) — three stats now ride a slow
   continuous ribbon instead of sitting in a sparse grid, at a size that
   actually registers. The row is duplicated once with aria-hidden for the
   seamless loop, counters stripped from the duplicate so nothing runs twice.
   Reduced motion gets the static row back.
   ========================================================================== */
.proofband { overflow: hidden; }
.proofband__track {
  display: flex; width: max-content;
  animation: proofRun 26s linear infinite;
}
.proofband__row,
.proofband__row--dup {
  display: flex; flex-wrap: nowrap;
  grid-template-columns: none;
  padding: 30px 0;
}
.proofband__row li { padding: 4px clamp(34px, 5vw, 72px); white-space: nowrap; }
.proofband__row b { font-size: clamp(40px, 4.4vw, 58px); }
.proofband__row em,
.proofband__row li em { font-size: 12.5px; letter-spacing: .2em; }
@keyframes proofRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.proofband:hover .proofband__track { animation-play-state: paused; }
html.rm .proofband__track { animation: none; }
html.rm .proofband__row--dup { display: none; }
@media (prefers-reduced-motion: reduce) {
  .proofband__track { animation: none; }
  .proofband__row--dup { display: none; }
}

/* Ghat watermark, third pass: the tight vignette read as a small smudge in
   the corner. Larger art, and a looser ellipse so the drawing itself is
   visible while the edges still dissolve into the band. */
.ghat-drift__art { width: min(920px, 74vw); opacity: .24; }
.ghat-drift__art,
.ghat-drift__art--bl,
.ghat-drift__art--tr,
.ghat-anchor__art {
  -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 44%, transparent 86%);
  mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 44%, transparent 86%);
}
@media (max-width: 640px) { .ghat-drift__art { width: 100vw; opacity: .18; } }

/* Peek stability (20.29): closing at the same 520ms as opening left two rows
   visibly open on every switch. The close now runs at nearly half the open,
   so the handoff reads as one photo travelling down the list. */
@media (max-width: 900px), (hover: none) {
  .occ-row__thumb { transition: height 280ms ease, margin-top 280ms ease; }
  .occ-row.is-peek .occ-row__thumb { transition: height 520ms var(--ease-out), margin-top 520ms var(--ease-out); }
}

/* ==========================================================================
   TREATMENT SWAP (20.29) — the stats hold still, the venue logos travel.
   1. Proof band: back to a fixed grid, three columns, at the larger cut.
   2. Trust row: the logo set rides a slow marquee, drawn bigger, both sets
      aria separated so screen readers hear one list.
   ========================================================================== */
.proofband__track { animation: none; display: block; width: auto; }
.proofband__row,
.proofband .container .proofband__row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  width: auto; animation: none; text-align: center;
  padding: 34px 0;
}
.proofband__row li { white-space: normal; padding: 4px 18px; }
.proofband__row li + li::before { display: block; }
@media (max-width: 640px) {
  .proofband__row { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .proofband__row b { font-size: 30px; }
  .proofband__row em { font-size: 10.5px; letter-spacing: .12em; }
}

.trustrow { overflow: hidden; }
.trustrow__marquee {
  display: flex; width: max-content;
  animation: proofRun 11s linear infinite;
}
.trustrow__marquee .trustrow__logos {
  flex-wrap: nowrap; justify-content: flex-start;
  gap: 0; padding-right: 0;
}
.trustrow__marquee .trustrow__item { padding: 0 clamp(36px, 5vw, 78px); }
.trustrow__marquee .trustrow__item img {
  height: 52px; max-width: 220px;
  filter: grayscale(1) opacity(.62) contrast(1.05);
}
.trustrow:hover .trustrow__marquee { animation-play-state: paused; }
html.rm .trustrow__marquee { animation: none; }
html.rm .trustrow__marquee .trustrow__logos[aria-hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .trustrow__marquee { animation: none; }
  .trustrow__marquee .trustrow__logos[aria-hidden] { display: none; }
}
@media (max-width: 640px) {
  .trustrow__marquee .trustrow__item img { height: 38px; max-width: 150px; }
  .trustrow__marquee .trustrow__item { padding: 0 26px; }
}

/* ==========================================================================
   THE BHAAV MOMENT (20.32) — one photograph, one couplet. The bowl is held
   out to the reader; the line sits beside it at pull quote scale. Deliberate
   and single: this is a signature moment, not a photo band.
   ========================================================================== */
.bhaav__grid {
  display: grid; grid-template-columns: minmax(240px, 380px) 1fr;
  gap: clamp(30px, 5vw, 72px); align-items: center;
  max-width: 980px; margin-inline: auto;
}
.bhaav__photo { margin: 0; }
.bhaav__photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.bhaav__quote { margin: 0; }
.bhaav__line {
  margin: 0 0 18px;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.22;
  letter-spacing: -.01em; color: var(--sage-900);
}
.bhaav__line em { font-style: italic; color: var(--clay-700); }
.bhaav__gloss {
  margin: 0; padding-top: 14px;
  border-top: 1px solid rgba(49,84,33,.18);
  font-family: var(--font-serif); font-style: italic;
  font-size: 15.5px; line-height: 1.6; color: #57564E;
  max-width: 40ch;
}
@media (max-width: 760px) {
  .bhaav__grid { grid-template-columns: 1fr; gap: 22px; max-width: 420px; }
  .bhaav__photo { max-width: 300px; margin-inline: auto; }
  .bhaav__quote { text-align: center; }
  .bhaav__gloss { margin-inline: auto; }
}

/* Founder portrait, drawn larger (20.33) — the face is the point of the
   fold and it was capped at 390px on a 1200px grid. Desktop only: below 900px
   the fold stacks to one column (portrait first), and an unguarded 2-column
   rule here was collapsing the portrait to 0px on phones. */
@media (min-width: 901px) {
  .founderfold__grid { grid-template-columns: 1fr minmax(360px, 500px); }
}
@media (max-width: 900px) {
  .founderfold__grid { grid-template-columns: 1fr !important; }
  .founderfold__portrait { min-height: 480px; width: 100%; margin-inline: 0; }
}
/* Phones: cap the portrait height so it does not dominate the stack. */
@media (max-width: 560px) {
  .founderfold__portrait { min-height: 420px; }
}

/* ==========================================================================
   FOOTER CREDIT (20.35) — studio attribution, quiet but present, with a real
   heart. Dofollow by intent: the link carries no rel="nofollow".
   ========================================================================== */
.footer__bottom { flex-wrap: wrap; gap: 10px 22px; }
.footer__credit {
  font-family: var(--font-sans); font-size: 13px;
  color: rgba(232,228,220,.66); letter-spacing: .01em;
}
.footer__credit a {
  color: rgba(232,228,220,.9); text-decoration: none;
  border-bottom: 1px solid rgba(232,228,220,.32); padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.footer__credit a:hover { color: #EED9BE; border-color: #EED9BE; }
.footer__credit .heart { color: var(--clay-500); font-style: normal; }

/* Credit link sits inline on the text baseline (never the 44px legal-link box). */
.footer__credit, .footer__credit a { display: inline; vertical-align: baseline; line-height: 1.5; min-height: 0; }
.footer__credit a { align-items: baseline; }

@media (max-width: 640px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer__credit { margin-top: 4px; }
}

/* ==========================================================================
   MOBILE PADDING POLISH (20.38) — consistent, comfortable gutters and a
   calmer vertical rhythm on phones. Gutter goes 22 → 24px for a touch more
   air; a hair tighter under 380px so nothing crowds a small handset.
   ========================================================================== */
@media (max-width: 640px) {
  .container,
  .site-header .container,
  .hero > .container,
  .factstrip .container { padding-inline: 24px; }
  /* the page masthead and section heads get a little top breathing room so
     the eyebrow never kisses the fold boundary */
  .pagehead__lead, .section-head__lead { margin-top: 12px; }
}
@media (max-width: 380px) {
  .container,
  .site-header .container,
  .hero > .container,
  .factstrip .container { padding-inline: 18px; }
  :root { --section-pad: 66px; }
}

/* ==========================================================================
   QUOTE FORM — FULL SCREEN APP FLOW ON MOBILE (20.41)
   A true full-height sheet: a slim sticky progress header up top, the step
   content scrolling in the middle, and the Next / Back actions pinned to a
   thumb-reachable bar at the bottom — the pattern every good mobile app uses.
   ========================================================================== */
@media (max-width: 640px) {
  /* --- full screen, no bottom-sheet radius or grab handle --- */
  .quotebox__panel {
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%; height: 100dvh; max-height: none;
    border-radius: 0;
  }
  .quotebox.is-open .quotebox__panel { animation: quoteSlideUp .4s var(--ease-out); }
  @keyframes quoteSlideUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  html.rm .quotebox.is-open .quotebox__panel { animation: none; }
  .quotebox__panel::before { display: none; }

  /* --- the whole panel is a flex column; scroll flexes between header + footer --- */
  .quotebox__scroll {
    flex: 1 1 auto; min-height: 0;
    padding: 0 20px 0;
    display: flex; flex-direction: column;
    -webkit-overflow-scrolling: touch;
  }
  /* compact, quiet header */
  .quotebox__eyebrow {
    position: sticky; top: 0; z-index: 6;
    margin: 0 -20px; padding: 18px 60px 8px 20px;
    background: var(--paper); font-size: 11px; letter-spacing: .26em;
  }
  .quotebox__title {
    font-size: 22px; line-height: 1.15; margin: 0 0 14px;
    padding-right: 48px;
  }
  .quotebox__close {
    position: fixed; top: 12px; right: 14px; z-index: 8;
    width: 44px; height: 44px; font-size: 0;
    background: #fff; color: transparent;
    border: 1px solid rgba(49,84,33,.16);
    box-shadow: 0 2px 8px -2px rgba(20,26,17,.16);
  }
  .quotebox__close::after {
    content: "\00d7"; font-size: 27px; color: var(--sage-900);
    display: block; line-height: 42px; text-align: center;
  }
  .quotebox__close:active { background: var(--paper); }

  /* --- form + active step fill the height so nav can pin to the floor --- */
  .quotebox .enq { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .quotebox .enq__step-panel:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; }

  /* --- slim sticky progress just under the title --- */
  .quotebox .enq__progress {
    position: sticky; top: 46px; z-index: 5;
    margin: 0 -20px 18px; padding: 12px 20px;
    background: var(--paper);
    box-shadow: 0 1px 0 rgba(49,84,33,.08);
  }

  /* --- pinned bottom action bar --- */
  .quotebox .enq__nav {
    position: sticky; bottom: 0; margin: auto -20px 0; margin-top: auto;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
    background: var(--paper);
    box-shadow: 0 -1px 0 rgba(49,84,33,.1), 0 -12px 24px -14px rgba(20,26,17,.18);
  }
  .quotebox .enq__nav .btn--primary,
  .quotebox .enq__nav button[data-enq-next],
  .quotebox .enq__nav button[type="submit"] {
    flex: 1 1 auto; justify-content: center;
    padding-block: 17px; font-size: 12.5px; border-radius: 14px;
  }
  .quotebox .enq__back {
    flex: 0 0 auto; padding: 15px 18px; border-radius: 14px;
    background: rgba(49,84,33,.06); color: var(--sage-900);
    font-family: var(--font-sans); font-weight: 600; font-size: 13px;
    border: 1px solid rgba(49,84,33,.14);
  }
  /* keep the WhatsApp alt line above the pinned bar, not floating over it */
  .quotebox .enq__waalt, .quotebox .form-note { margin-bottom: 8px; }

  /* --- premium field + tap sizing --- */
  .quotebox .enq__f input,
  .quotebox .enq__f textarea,
  .quotebox .enq__f select { font-size: 16px; padding: 15px 16px; border-radius: 13px; }
  .quotebox .tile__body { padding: 15px 40px 15px 15px; }
  .quotebox .tile__body b { font-size: 15.5px; }
  .quotebox .chip { padding: 11px 16px; }
}

/* ==========================================================================
   CLOSE BUTTON FIX + THANK YOU CTA (20.43)
   The mobile close inherited the desktop pill's inline-flex + padding + a
   "Close" pseudo, which shoved the × to a corner. Reset to a clean centered
   circle using the button's own × (kill the pseudo). Cream, not stark white.
   ========================================================================== */
@media (max-width: 640px) {
  .quotebox__close {
    display: flex; align-items: center; justify-content: center;
    padding: 0; gap: 0;
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 24px; line-height: 1; color: var(--sage-900);
    background: #F6F2E9; border: 1px solid rgba(49,84,33,.18);
    box-shadow: 0 2px 8px -3px rgba(20,26,17,.2);
  }
  .quotebox__close::after { content: none; }
  .quotebox__close:active { background: #EDE7DA; }
}

/* Thank-you page CTA block */
.ty-cta {
  margin-top: clamp(30px, 4vw, 44px); padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid rgba(232,228,220,.24);
  max-width: 62ch;
}
.ty-cta__note {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.6;
  color: rgba(232,228,220,.86); margin: 0 0 20px;
}
.enqrail__steps--wide { max-width: 760px; }

/* ==========================================================================
   MOBILE TOP CHROME + HERO HEADER + FOOTER (20.44)
   ========================================================================== */
@media (max-width: 640px) {
  /* --- slimmer announcement bar: one tidy line, not two tall ones --- */
  .annbar {
    height: 32px; min-height: 32px; padding: 0 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; letter-spacing: .1em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(28,26,22,.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  /* header sits right under the slimmer bar */
  .site-header, body:not(.home) .site-header { top: 32px; }
  .site-header.is-stuck, body:not(.home) .site-header.is-stuck { top: 0; }

  /* --- shorter floating header (less height eaten on a phone) --- */
  .nav { min-height: 62px !important; gap: 12px; }
  .site-header.is-stuck .nav { min-height: 56px !important; }

  /* --- HOME hero header, modern + slick: a soft top-down scrim keeps the
     logo, WhatsApp and menu crisp over any hero frame and reads as an
     intentional glass bar rather than three icons floating on the photo --- */
  .home .site-header:not(.is-stuck) {
    background: linear-gradient(to bottom,
      rgba(20,26,17,.5) 0%, rgba(20,26,17,.24) 58%, rgba(20,26,17,0) 100%);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    border-bottom-color: transparent;
  }
}

/* --- Footer: organized 2-column grid on phones instead of one long stack --- */
@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr; gap: 26px 22px; padding-bottom: 36px;
  }
  .footer__col--brand { grid-column: 1 / -1; margin-bottom: 4px; }
  .footer__col h3 { margin-bottom: 8px; font-size: 13px; }
  /* tighter, tidy rows — still a comfortable tap height, no huge gaps */
  .footer__col ul { display: flex; flex-direction: column; }
  .footer__col ul li { margin: 0; }
  .footer__col ul a { min-height: 40px; padding-block: 2px; font-size: 14.5px; }
}

/* ==========================================================================
   MOBILE BODY READABILITY (20.45)
   Body copy was EB Garamond (serif) at 15–16.5px — small and light on a
   phone. Larger sizes + more leading make the serif read easily while keeping
   the editorial voice; the one sub-AA sage-band case is lifted to clear 4.5.
   ========================================================================== */
@media (max-width: 640px) {
  /* BODY FLOOR — every paragraph and body list item, site-wide, gets a
     readable size. Bare `p`/`li`/`dd` sit at (0,0,1), so every label, eyebrow
     and small-caps class (all at (0,1,0)+) keeps its own smaller size; only
     genuine body copy is lifted. Leads then step up again below. */
  p, li, dd, blockquote { font-size: 16.5px; line-height: 1.6; }

  /* body-text spans that are not p/li/dd */
  .occ-row__desc,
  .enqrail__steps span,
  .enqrail__note span,
  .price-band span,
  .bhaav__gloss { font-size: 16.5px; line-height: 1.6; }

  /* Leads a size up. Compound selectors so they beat the (0,2,0) base + the
     bare-p floor above. */
  .pagehead .pagehead__lead,
  .section-head .lead,
  .section-head .section-head__lead,
  .section-head__lead,
  p.lead,
  .founderfold .founderfold__lead {
    font-size: 18px; line-height: 1.62;
  }

  /* Re-assert the small letterspaced labels that happen to be <p>/<li> so the
     body floor never enlarges them. */
  .pagehead__eyebrow, .quotebox__eyebrow, .enqcard__eyebrow,
  .footer__legal, .form-note, .enq__hint,
  .occ-row__meta, .review-meta, .plate__cap,
  .footer__col ul a { font-size: revert-layer; }
  .pagehead__eyebrow { font-size: 12.5px; }
  .footer__legal { font-size: 13px; }
  .form-note { font-size: 13px; }
  .review-meta { font-size: 13px; }
  .footer__col ul a { font-size: 14.5px; }

  /* small print stays clearly legible, not tiny */
  .tile__body small { font-size: 14px; line-height: 1.5; }
  /* occ-row descriptions are captions in a dense rail — readable, not full body */
  .occ-row__desc { font-size: 15px !important; line-height: 1.55; }

  /* Contrast: lift muted body text on the dark sage bands to clear AA */
  .band--sage p,
  .band--sage li,
  .band--sage .lead,
  .band--sage .section-head__lead,
  .band--sage .enqrail__steps span,
  .band--sage .enqrail__note p { color: rgba(232,228,220,.92); }

  /* The pagehead lead in sage green reads a touch light on paper — deepen it */
  .pagehead__lead { color: #3E5237; }
}

/* ============================================================================
   CINEMATIC LAYER (20.47)
   A living hero, a slow zoom on every interior masthead, and a filmic unveil
   on the founder portrait. All motion holds still under prefers-reduced-motion.
   Hero motion is CSS-owned now (removed from motion.js scroll-parallax), so it
   runs on mobile too — where the old parallax never did.
   ========================================================================== */

/* 1 — HOME HERO: continuous Ken Burns. Each of the three slides pans from a
   different origin, so the loop never repeats the same move. Slides show for
   8s; a 14s ease-out keeps the frame drifting the whole time it is up. */
.hero__slides { overflow: hidden; }
.hero__slide img { transform: scale(1.12); transform-origin: 50% 50%; will-change: transform; }
.hero__slide:nth-child(1) img { transform-origin: 32% 40%; }
.hero__slide:nth-child(2) img { transform-origin: 68% 56%; }
.hero__slide:nth-child(3) img { transform-origin: 46% 68%; }
.hero__slide.is-active img { animation: heroKen 14s ease-out both; }
@keyframes heroKen { from { transform: scale(1.16); } to { transform: scale(1.03); } }

/* 2 — INTERIOR MASTHEAD: the cover photo settles from a slow zoom as the page
   opens, so every page leads on motion rather than a still frame. Composes with
   the figure's own data-reveal rise. */
.pagehead__media { overflow: hidden; }
.pagehead__media img {
  transform: scale(1.14);
  transition: transform 1700ms var(--ease-out);
  will-change: transform;
}
.pagehead__media.is-in img { transform: scale(1); }

/* 3 — FOUNDER PORTRAIT: a curtain wipes up off the photograph while it eases
   back from a slight push-in. Scoped to this one figure so text blocks keep the
   quick fade and parallaxed images keep their JS transform. */
.founderfold__portrait { overflow: hidden; }
.founderfold__portrait img {
  clip-path: inset(16% 0 0 0);
  transform: scale(1.09);
  transition: clip-path 1200ms var(--ease-out), transform 1500ms var(--ease-out);
  transition-delay: 140ms;
  will-change: clip-path, transform;
}
.founderfold__portrait.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active img { animation: none; transform: scale(1.03); }
  .pagehead__media img { transform: none; transition: none; }
  .founderfold__portrait img { clip-path: none; transform: none; transition: none; }
}
/* ==== end cinematic layer (20.47) ==== */


/* ============================================================================
   CINEMATIC HERO GRADE (20.49) — warm filmic wash, lens vignette, longer
   cross-dissolve, and a lighter proof band on phones. Photo hero only;
   all still under prefers-reduced-motion via the guards already in place.
   ========================================================================== */
.hero__slide img { filter: saturate(1.08) contrast(1.07) brightness(.95) sepia(.05); }

.hero__scrim {
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(255,216,150,.12), rgba(255,216,150,0) 42%),
    radial-gradient(135% 130% at 50% 44%, rgba(10,8,4,0) 52%, rgba(10,8,4,.20) 82%, rgba(10,8,4,.42) 100%),
    linear-gradient(to bottom, rgba(18,24,15,.52) 0%, rgba(18,24,15,.18) 12%, rgba(18,24,15,0) 24%),
    linear-gradient(to top, rgba(18,24,15,.88) 0%, rgba(18,24,15,.62) 22%, rgba(18,24,15,.18) 44%, rgba(18,24,15,0) 62%),
    linear-gradient(to right, rgba(18,24,15,.55) 0%, rgba(18,24,15,.12) 42%, rgba(18,24,15,0) 66%);
}

/* Longer cross-dissolve so slides melt rather than cut (JS holds outgoing 1650ms). */
.hero__slide { transition: opacity 1600ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }

/* Proof band: smaller, tighter stats on phones. */
@media (max-width: 640px) {
  .proofband__row b { font-size: 20px; }
  .proofband__row b i { font-size: .6em; }
  .proofband__row em { font-size: 10.5px; letter-spacing: .1em; margin-top: 6px; }
  .proofband__row li { padding: 2px 10px; }
}
/* ==== end cinematic hero grade (20.49) ==== */

/* ============================================================================
   SCROLL CHOREOGRAPHY (20.50) — the ghat skyline draws itself on as each
   section arrives, and the scroll-progress line reads with more presence.
   The draw-on is JS-gated (html.js) so a no-JS page shows the art normally,
   and holds still under prefers-reduced-motion.
   ========================================================================== */
html.js .ghat-drift__art {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1500ms var(--ease-out);
  will-change: clip-path;
}
/* --tr carries scaleX(-1), so the same inset wipes it the opposite way on
   screen — the two skylines build toward each other. */
html.js .ghat-drift__art.is-drawn { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  html.js .ghat-drift__art { clip-path: none; transition: none; }
}

/* Scroll-progress line: a touch taller with a warmer glow so it reads as a
   deliberate brand signature tracking the whole page. */
.scroll-progress { height: 4px; }
.scroll-progress__bar { box-shadow: 0 0 14px rgba(187,104,72,.62), 0 0 4px rgba(233,201,168,.5); }
/* ==== end scroll choreography (20.50) ==== */

/* ============================================================================
   MOBILE HERO FEATURE VIDEO (20.51) — a real, brand-free clip of guests at our
   live counters, featured (not full-bleed) on phones. Desktop keeps the graded
   photo slideshow. Poster shows if autoplay is blocked or under reduced motion.
   ========================================================================== */
.hero__feature { display: none; }
@media (max-width: 640px) {
  .hero__feature {
    display: block; position: relative; margin: 18px 0 2px;
    border-radius: 18px; overflow: hidden;
    aspect-ratio: 1 / 1; max-height: 42vh;
    box-shadow: 0 20px 46px rgba(8,10,6,.55);
    border: 1px solid rgba(232,228,220,.16);
  }
  .hero__feature-video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero__feature::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(8,10,6,.52) 0%, rgba(8,10,6,0) 36%);
  }
  .hero__feature-cap {
    position: absolute; left: 14px; bottom: 11px; margin: 0; z-index: 2;
    font-family: var(--font-sans); font-size: 11px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.94);
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
  }
}
/* ==== end mobile hero feature (20.51) ==== */

/* ============================================================================
   MOBILE HERO = VIDEO (20.52) — on phones the photo slideshow is dropped and
   the featured clip becomes the main highlight on a clean dark brand ground.
   Desktop is untouched (photo hero with Ken Burns + grade).
   ========================================================================== */
@media (max-width: 640px) {
  .hero__slides { display: none; }
  .hero__dots { display: none; }
  .hero__scrim { display: none; }            /* no photo to protect now */
  /* Hero hugs its content (CTAs live in the sticky mobile bar, not here), so
     the clip fills the screen with no empty gap beneath it. */
  .hero {
    min-height: auto; align-items: stretch;
    padding: 150px 0 30px;
    background: linear-gradient(163deg, #24401A 0%, #1A2A12 48%, #12180F 100%);
  }
  .hero__feature {
    aspect-ratio: 4 / 5; max-height: 54vh; margin: 20px 0 0;
    box-shadow: 0 24px 56px rgba(0,0,0,.5);
    border-color: rgba(232,228,220,.20);
  }
}
/* ==== end mobile hero = video (20.52) ==== */

/* ============================================================================
   HERO FEATURE — CTA + DESKTOP CARD (20.53)
   Video fill / overlay / caption now apply at all sizes. Mobile gains one
   primary CTA under the clip; desktop shows the clip as a framed portrait
   feature on the right of the hero, over the graded photo backdrop.
   ========================================================================== */
.hero__feature-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__feature::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,10,6,.52) 0%, rgba(8,10,6,0) 38%);
}
.hero__feature-cap {
  position: absolute; left: 14px; bottom: 11px; margin: 0; z-index: 2;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.94);
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}

/* Mobile: one primary CTA directly under the video */
.hero__feature-cta { display: none; }
@media (max-width: 640px) {
  .hero__feature-cta { display: inline-flex; width: 100%; justify-content: center; margin-top: 18px; }
}

/* Desktop: framed portrait feature card on the right; copy stays left.
   hero__inner goes static so the card's containing block is .container (which
   is position:relative), anchoring it to the true right edge, not the copy. */
@media (min-width: 641px) {
  .hero__inner { position: static; max-width: min(56%, 600px); }
  .hero__feature {
    display: block; position: absolute; z-index: 6; margin: 0;
    right: 40px; top: 50%; transform: translateY(-50%);
    width: clamp(260px, 24vw, 342px); aspect-ratio: 3 / 4;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 34px 76px rgba(0,0,0,.5);
    border: 1px solid rgba(232,228,220,.22);
  }
}
/* ==== end hero feature CTA + desktop card (20.53) ==== */

/* ============================================================================
   DESKTOP HERO = CLEAN TWO-COLUMN (20.54) — drop the photo slideshow behind
   the hero (as on mobile), put copy on the left on the dark brand ground and
   a larger video feature on the right. Supersedes the 20.53 desktop card.
   ========================================================================== */
@media (min-width: 641px) {
  .hero__slides, .hero__scrim, .hero__dots, .hero__venue, .hero__cue { display: none; }
  .hero {
    background: linear-gradient(118deg, #274419 0%, #1A2A12 52%, #11170E 100%);
  }
  .hero__inner { position: static; max-width: min(52%, 560px); }
  .hero__feature {
    display: block; position: absolute; z-index: 6; margin: 0;
    right: clamp(28px, 5vw, 84px); top: 50%; transform: translateY(-50%);
    width: clamp(330px, 33vw, 452px); aspect-ratio: 3 / 4; max-height: 74vh;
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 40px 92px rgba(0,0,0,.55);
    border: 1px solid rgba(232,228,220,.20);
  }
}
/* ==== end desktop clean two-column hero (20.54) ==== */

/* ============================================================================
   HERO GROUND = JALI TEXTURE (20.55) — the brand olive jaali lattice under a
   dark overlay for legibility, replacing the flat gradient on every size.
   ========================================================================== */
.hero {
  background-color: #12180E;
  background-image:
    linear-gradient(107deg, rgba(13,18,10,.92) 0%, rgba(13,18,10,.64) 52%, rgba(13,18,10,.5) 100%),
    url(../img/jaali-olive.jpg);
  background-size: auto, 440px;
  background-repeat: repeat, repeat;
  background-position: center;
}
/* ==== end hero jali ground (20.55) ==== */

/* ============================================================================
   DESKTOP HERO CARD — GROUNDED (20.56) — the video feature spans the hero
   height (touches near the bottom) with consistent top/bottom gaps, while the
   copy is centred independently. Container stretches to full hero height so
   the card can anchor to it.
   ========================================================================== */
@media (min-width: 641px) {
  .hero { align-items: stretch; }
  .hero > .container {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  }
  .hero__inner { position: static; max-width: min(52%, 560px); }
  .hero__feature {
    position: absolute; z-index: 6; margin: 0;
    right: clamp(28px, 5vw, 84px);
    top: clamp(200px, 21vh, 232px);
    bottom: clamp(44px, 5vh, 60px);
    width: clamp(340px, 33vw, 476px);
    height: auto; aspect-ratio: auto; max-height: none; transform: none;
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 40px 92px rgba(0,0,0,.5);
    border: 1px solid rgba(232,228,220,.20);
  }
}
/* ==== end desktop hero card grounded (20.56) ==== */

/* Remove the trailing rule after the hero eyebrow (leftover from the old pill
   badge; it read as a stray line after "2013"). */
.hero__badge::after { display: none; }

/* ============================================================================
   EYEBROW CONTRAST ON HOME SAGE BANDS (20.57) — the ctafold eyebrow read at
   62% paper with a clay number, bleeding into the sage. Lift both.
   ========================================================================== */
body.home .band--sage .eyebrow-num { color: rgba(232,228,220,.9); }
body.home .band--sage .eyebrow-num::before { color: #EED9BE; }
/* ==== end eyebrow contrast (20.57) ==== */

/* ============================================================================
   BRAND WORDMARK IN PARLARE (20.58) — the "chaat" in the header/footer
   wordmark is set in Parlare, the logo face, lowercase as the logo renders it.
   ========================================================================== */
:root { --font-brand: "parlare", "EB Garamond", serif; }
.nav__wordmark i, .footmark i {
  font-family: var(--font-brand);
  font-style: normal; font-weight: 400;
  font-size: 25px; letter-spacing: 0; line-height: 1;
  text-transform: lowercase;
}
/* ==== end brand wordmark parlare (20.58) ==== */

/* ============================================================================
   HERO QUICK LINKS (20.59) — a row of editorial nav links under the hero CTAs,
   so the hero offers a way into the main occasion pages, not just the quote.
   ========================================================================== */
.hero__quicklinks { display: flex; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.hero__quicklinks a {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: rgba(232,228,220,.82); text-decoration: none;
  padding: 2px 16px; line-height: 1.5;
  border-left: 1px solid rgba(232,228,220,.28);
  transition: color 220ms var(--ease-out);
}
.hero__quicklinks a:first-child { border-left: 0; padding-left: 0; }
.hero__quicklinks a:hover { color: #EED9BE; }
@media (max-width: 640px) {
  .hero__quicklinks { margin-top: 18px; row-gap: 6px; }
  .hero__quicklinks a { font-size: 12.5px; padding: 2px 13px; }
}
/* ==== end hero quick links (20.59) ==== */

/* ============================================================================
   HERO JALI, CRISP (20.60) — the olive tile was 420px/5KB and upscaled into a
   blur. Use the sharp 636x900 jaali.png (the site's --jaali-url), DOWNSCALED so
   it stays crisp, as a subtle luminosity overlay over a solid dark ground.
   ========================================================================== */
.hero {
  background: var(--sage-700);   /* match the footer ground (was near-black #16230F) */
  background-image: none;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--jaali-url);
  background-size: 340px auto;      /* < 636px source width, so it downscales (sharp) */
  background-repeat: repeat;
  opacity: .22;
  mix-blend-mode: luminosity;
}
/* The container (z-index 5) and the feature card (z-index 6) already sit above
   this texture via their existing rules; do NOT re-declare position here or the
   desktop card's absolute anchoring breaks. */
/* ==== end hero jali crisp (20.60) ==== */

/* ============================================================================
   DESKTOP HERO TOP CLEARANCE (20.61) — the copy is taller now (quicklinks),
   so centring pushed the eyebrow under the fixed header. Top-align with a
   header-clearing pad; the eyebrow lines up with the grounded card's top.
   ========================================================================== */
@media (min-width: 641px) {
  .hero > .container {
    justify-content: flex-start;
    padding-top: 224px;
    padding-bottom: 46px;
  }
}
/* ==== end desktop hero top clearance (20.61) ==== */

/* ============================================================================
   WORDMARK LOCKUP TO MATCH THE LOGO (20.62) — centred, tight, "chaat" dominant
   in Parlare with "THE" tucked above and "PROJECT" tracked below, echoing the
   lotus logo lockup rather than a loose left-aligned stack.
   ========================================================================== */
.nav__wordmark, .footmark {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.nav__wordmark i, .footmark i {
  font-family: var(--font-brand); font-style: normal; font-weight: 400;
  font-size: 31px; letter-spacing: 0; line-height: .9; text-transform: lowercase;
}
.nav__wordmark b, .footmark b {
  font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: .3em;
}
.nav__wordmark b:first-child, .footmark b:first-child { margin-bottom: -5px; z-index: 2; }
.nav__wordmark b:last-child, .footmark b:last-child { margin-top: -1px; letter-spacing: .36em; }
/* ==== end wordmark lockup (20.62) ==== */

/* Hero quick links: drop Hill weddings on phones to keep the row to one line. */
@media (max-width: 640px) { .hero__quicklinks .ql-hill { display: none; } }

/* ============================================================================
   JALI TEXTURE ON SOLID GROUNDS (20.66) — carry the hero's crisp jaali onto the
   flat/solid bands and strips so nothing reads as a plain colour fill. Subtle,
   tuned per tone; content is lifted above the overlay.
   ========================================================================== */
.band--warm, .band--clay, .band--sage, .band--mist,
.proofband, .trustrow, .tradestrip { position: relative; }

.band--warm::before, .band--clay::before, .band--sage::before, .band--mist::before,
.proofband::before, .trustrow::before, .tradestrip::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--jaali-url);
  background-size: 320px auto; background-repeat: repeat;
  opacity: .08; mix-blend-mode: multiply;
}
.band--sage::before { opacity: .17; mix-blend-mode: luminosity; }
.band--clay::before { opacity: .09; mix-blend-mode: soft-light; }

.band--warm > .container, .band--clay > .container, .band--sage > .container, .band--mist > .container,
.proofband > .container, .trustrow > .container, .tradestrip > .container { position: relative; z-index: 1; }
/* ==== end jali on solid grounds (20.66) ==== */

/* Footer jaali to match the hero (was dialled down to .045/620px). */
.site-footer::before {
  background-size: 340px auto;
  opacity: .22;
  mix-blend-mode: luminosity;
}

/* ============================================================================
   PICK A CITY: hovered city's ghat skyline blends into screen centre (20.69)
   ========================================================================== */
.citypreview { position: fixed; inset: 0; z-index: 3; pointer-events: none; display: grid; place-items: center; }
.citypreview img {
  grid-area: 1 / 1; width: min(52vw, 660px); height: auto;
  opacity: 0; transform: scale(1.06);
  transition: opacity 700ms var(--ease-out), transform 1200ms var(--ease-out);
  mix-blend-mode: multiply;   /* the cream illustration ground drops into the band; the skyline stays */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 84%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 84%);
  will-change: opacity, transform;
}
.citypreview img.is-on { opacity: .92; transform: scale(1); }
@media (max-width: 900px) { .citypreview { display: none; } }
@media (prefers-reduced-motion: reduce) { .citypreview img { transition: opacity 200ms linear; } }

/* While a city is hovered, fade the static banaras anchor so the hovered
   city's ghat is the sole centred reveal. */
.ghat-anchor__art { transition: opacity 500ms var(--ease-out); }
.ghat-anchor.is-city-active .ghat-anchor__art { opacity: 0; }

/* Quote page: the clay lotus on the enquiry -> FAQ seam pointed UP into the dark
   form and overlapped it. Flip it (ulta) so it emerges DOWN into the light FAQ. */
.enq-band + .faq-band .lotus-seam { clip-path: inset(50% 0 0 0); }

/* ============================================================================
   LOGO REDESIGN (20.72) — blank lotus petal + our wordmark (no duplicate name),
   a slow rotating ring behind it, and no drop shadow.
   ========================================================================== */
/* no shadow behind the mark */
.nav__plaque .nav__logo,
.site-header.is-stuck .nav__plaque .nav__logo { filter: none !important; }

/* slow moving circle: a thin ring with a light travelling around it */
.nav__plaque::before {
  content: ""; position: absolute; inset: -15%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 66%, rgba(238,217,190,.6) 82%, transparent 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  filter: none;
  opacity: .85; z-index: -1; pointer-events: none;
  animation: haloTurn 24s linear infinite;
}
/* on light headers the travelling light reads as clay */
.site-header.is-stuck .nav__plaque::before,
body:not(.home) .site-header:not(.is-stuck) .nav__plaque::before {
  background: conic-gradient(from 0deg, transparent 0 66%, rgba(149,75,46,.5) 82%, transparent 92%);
  opacity: .8;
}

/* the wordmark now carries the name on every size (blank lotus has no text) */
@media (max-width: 640px) {
  .nav__wordmark { display: flex !important; }
  .nav__wordmark i { font-size: 22px; }
  .nav__wordmark b { font-size: 8.5px; letter-spacing: .26em; }
  .nav__plaque { width: 68px; height: 68px; margin-bottom: -18px; }
  .site-header.is-stuck .nav__plaque { width: 60px; height: 60px; margin-bottom: -14px; }
}
/* ==== end logo redesign (20.72) ==== */

/* ============================================================================
   LOGO: TEXT OVER THE PETAL (20.73) — drop the golden rotating ring; place the
   wordmark centred over the blank lotus as a single lockup (no name beside it).
   ========================================================================== */
.nav__plaque::before { display: none !important; }

.nav__brand { position: relative; }
.nav__wordmark {
  position: absolute; left: 0; top: 4px;
  width: 96px; height: 96px; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; line-height: 1; z-index: 61; pointer-events: none;
}
.nav__wordmark i { font-size: 18px; line-height: .9; }
.nav__wordmark b { font-size: 6.5px; letter-spacing: .2em; }
.nav__wordmark b:first-child { margin-bottom: -1px; }
.nav__wordmark b:last-child { margin-top: 0; letter-spacing: .26em; }
.site-header.is-stuck .nav__wordmark { top: -5px; }
@media (max-width: 640px) {
  .nav__wordmark { width: 68px; height: 68px; top: 2px; }
  .nav__wordmark i { font-size: 13px; }
  .nav__wordmark b { font-size: 5px; }
  .site-header.is-stuck .nav__wordmark { width: 60px; height: 60px; }
}
/* ==== end logo text over petal (20.73) ==== */

/* Remove the rotating glow behind the footer logo (matches the header). */
.footer__mark::before { display: none !important; }

/* ============================================================================
   WORDMARK CONTRAST FIX (20.75) — the wordmark now sits ON the lotus (clay on
   the dark hero header, sage on the light stuck/inner headers). Both petals are
   dark enough that the text must always be LIGHT, or it vanishes on the sage
   petal (dark-on-dark). Force light in every header state.
   ========================================================================== */
.nav__wordmark b { color: #F6F2E9 !important; }
.nav__wordmark i { color: #EED9BE !important; }
/* ==== end wordmark contrast fix (20.75) ==== */

/* ============================================================================
   LOGO: USE THE MARK (20.76) — the text-over-petal lockup had alignment issues,
   so use the logo image (text baked in, properly set) and hide the overlay
   wordmark to avoid a double name. Ring + shadow stay removed.
   ========================================================================== */
.nav__wordmark { display: none !important; }
@media (max-width: 640px) {
  .nav__plaque { width: 92px; height: 92px; margin-top: 2px; margin-bottom: -30px; }
  .site-header.is-stuck .nav__plaque { width: 78px; height: 78px; margin-bottom: -24px; }
}
/* ==== end logo use the mark (20.76) ==== */

/* ============================================================================
   MOBILE HERO ALIGNMENT (20.77) — centre everything so the headline, sub, the
   full-width video, the CTA and the quick links all read as one consistent
   column instead of a left/centre mix.
   ========================================================================== */
@media (max-width: 640px) {
  .hero__inner { text-align: center; }
  .hero__quicklinks { justify-content: center; gap: 4px 0; margin-top: 16px; }
  .hero__quicklinks a { border-left: 0; padding: 2px 12px; }
}
/* ==== end mobile hero alignment (20.77) ==== */

/* ============================================================================
   DISHCARD LABEL LEGIBILITY (20.79) — the caption's light text sat directly on
   the food photo, so it bled on any photo with a light bottom. Add a dark scrim
   behind the caption so the label always has contrast.
   ========================================================================== */
.dishcard figcaption {
  background: linear-gradient(to top, rgba(18,14,8,.78) 0%, rgba(18,14,8,.42) 52%, rgba(18,14,8,0) 100%);
}
/* ==== end dishcard label legibility (20.79) ==== */

/* ============================================================================
   HERO HEADER GLASS (20.80) — on desktop the home hero header was fully
   transparent; give it a frosted-glass bar (translucent tint + backdrop blur)
   that frosts the hero behind it. Stuck header keeps its own light glass.
   ========================================================================== */
@media (min-width: 641px) {
  body.home .site-header:not(.is-stuck) {
    background: linear-gradient(to bottom, rgba(20,30,14,.18), rgba(20,30,14,.04));
    -webkit-backdrop-filter: blur(13px) saturate(1.35);
    backdrop-filter: blur(13px) saturate(1.35);
    border-bottom: 1px solid rgba(238,217,190,.10);
  }
}
/* ==== end hero header glass (20.80) ==== */

/* ============================================================================
   DISHRAIL + REVIEW SWIPE (20.82) — the dishrail was a CSS marquee that could
   not be grabbed. Make it a native horizontal scroll rail (free swipe/scroll)
   with a gentle JS auto-advance that pauses on interaction.
   ========================================================================== */
.dishrail {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.dishrail::-webkit-scrollbar { display: none; }
.dishrail__track { animation: none !important; width: max-content; }
.dishcard { scroll-snap-align: center; }
/* ==== end dishrail + review swipe (20.82) ==== */

/* ============================================================================
   SECTION HEAD ALIGNMENT (20.83) — home section heads were centred blocks with
   left text (reads as neither left nor centre) and sat over left-aligned
   content. Left-align them to match the content and the inner pages. The CTA
   and FAQ folds stay deliberately centred.
   ========================================================================== */
body.home .section:not(.ctafold):not(.faq-band) .section-head {
  align-items: flex-start; text-align: left;
}
/* ==== end section head alignment (20.83) ==== */

/* ============================================================================
   MOBILE PROOF BAND DENSITY (20.84) — labels wrapped to 3 lines each (each
   stat ~90px tall) and read busy. Tighter letter-spacing + smaller labels wrap
   to 2 lines, and the band is more compact.
   ========================================================================== */
@media (max-width: 640px) {
  .proofband { padding-block: 22px; }
  .proofband__row { gap: 14px 2px; }
  .proofband__row b { font-size: 21px !important; }
  .proofband__row em { font-size: 9.5px !important; letter-spacing: .05em !important; line-height: 1.35; margin-top: 5px; }
  .proofband__row li { padding: 2px 6px; }
}
/* ==== end mobile proof band density (20.84) ==== */

/* ============================================================================
   MOBILE CREDENTIALS BREATHING ROOM (20.85) — the stats band and the logo
   marquee sat flush (0px gap) with 38px logos, reading as one dense block.
   Add air between them and quiet the logos so the stretch feels calm.
   ========================================================================== */
@media (max-width: 640px) {
  .trustrow { padding-top: 40px; padding-bottom: 34px; }
  .trustrow img, .trustrow figure img, .trustrow__marquee img { height: 30px !important; }
  .trustrow::before { content: ""; display: block; width: 44px; height: 1px;
    background: rgba(49,84,33,.18); margin: 0 auto -8px; }
}
/* ==== end mobile credentials breathing room (20.85) ==== */

/* ============================================================================
   RESTORE DISH MARQUEE (20.86) — 20.82 turned the dishrail into a native-scroll
   rail with scroll-snap + a JS auto-advance. On the live site the snap pinned
   scrollLeft back to a card centre every frame, so the auto-advance netted 0px
   and the rail sat frozen. Return it to the pure CSS transform marquee it was
   built as (the track already carries 2 identical copies, so translateX(-50%)
   loops seamlessly), matching the logo trust-row marquee. No JS, no snap, no
   pause-flag to stall on. Pauses on hover; honours reduced-motion.
   ========================================================================== */
.dishrail {
  overflow: hidden;                 /* clip like a marquee; kill native scroll + its snap */
  scroll-snap-type: none;
}
.dishrail__track {
  animation: dishDrift 30s linear infinite !important;   /* was frozen (animation:none) in 20.82 */
  width: max-content;
}
.dishrail:hover .dishrail__track { animation-play-state: paused; }
.dishcard { scroll-snap-align: none; }
html.rm .dishrail__track { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .dishrail__track { animation: none !important; } }
/* ==== end restore dish marquee (20.86) ==== */

/* ============================================================================
   MOBILE HERO ALIGNMENT (20.89) — mobile hero was text-align:center while the
   DESKTOP hero (and every section head) is left-aligned, and the H1 sat in an
   asymmetric max-width box (24px left inset, 120px right) so the centred text
   read as misaligned. Left-align the whole mobile hero for one consistent
   rhythm, and let the H1 use the full container width.
   ========================================================================== */
@media (max-width: 640px) {
  .hero__inner { text-align: left; align-items: flex-start; }
  .hero h1, .hero__sub, .hero__badge, .hero__quicklinks, .hero__feature-cap { text-align: left; }
  .hero h1 { max-width: none; }
  .hero__quicklinks { justify-content: flex-start; }
}
/* ==== end mobile hero alignment (20.89) ==== */

/* ============================================================================
   TRUST MARQUEE tuning (20.94) — a sixth logo lengthened the track, so 11s now
   travels faster; ease it back. And the Kikar Lodge lockup is a stacked mark
   with a tagline, so it reads small at the shared 52px; give it a little more.
   ========================================================================== */
.trustrow__marquee { animation: proofRun 18s linear infinite; }
.trustrow__marquee .trustrow__item img[alt="Kikar Lodge"] { height: 60px; max-width: 200px; }
@media (max-width: 640px) {
  .trustrow__marquee .trustrow__item img[alt="Kikar Lodge"] { height: 38px !important; max-width: 150px; }
}
/* ==== end trust marquee tuning (20.94) ==== */