/* ============================================================
   LAVOYA CATERERS — Production Stylesheet
   ============================================================ */

:root {
    --primary-dark: #191714;
    --warm-ivory: #F6F1E8;
    --soft-beige: #E8DED0;
    --muted-olive: #77745F;
    --luxury-bronze: #9A7553;
    --bronze-deep: #7E5E41;
    --white: #FFFFFF;
    --ink-soft: #565049;

    /* The green/red square every Indian menu prints beside a dish.
       Desaturated to sit inside the warm palette rather than shout
       over it — and never the only signal: the tag beside the mark
       always spells the diet out in words. */
    --veg-mark: #3E7A4E;
    --nonveg-mark: #9E3B2F;

    /* Motion system — one easing curve, three durations. */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.22s;
    --dur: 0.4s;
    --dur-slow: 0.75s;

    /* Layout grid — nav, hero and every section align to these. */
    --container: 1440px;
    --gutter: 40px;
    --nav-h: 92px;
    --nav-h-scrolled: 68px;

    /* Spacing scale — a 4px base. Every margin, padding and gap on the
       page resolves to one of these steps; one-off pixel values are a
       bug, not a decision. The middle steps (12/20/28) are what an
       8-only scale misses, and they carry most of the type rhythm. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Vertical rhythm — every section uses one of these two, so the
       spacing between blocks stays even down the whole page.
       --section-y  plain sections on the page background
       --block-y    tinted or full-bleed bands (`.band`), which carry
                    their own colour and so need less air to read as
                    separate — and the half-measure a plain section
                    keeps on the side where it meets one
       Two plain sections share one --section-y between them; a plain
       section meeting a band shares two --block-y across the colour
       change (see the .band rules under .section-padding). Ran at
       120/72 until 2026-09-07, when the client read the joins as
       empty ground; the whole page tightened one step. */
    --section-y: var(--space-24);
    --block-y: 72px;

    /* One gap for the space under a section header, one for the gap
       between the two columns of a split section. Set once here so no
       section quietly invents its own. */
    --header-gap: var(--space-16);
    --split-gap: var(--space-20);

    --card-radius: 4px;

    /* Playfair Display runs optically larger than the Cormorant it
       replaced — bigger x-height, sturdier stems — so the display sizes
       below are set for it, not scaled from the old face. */
    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', sans-serif;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h-scrolled) + 24px);
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--warm-ivory);
    color: var(--primary-dark);
    font-family: var(--sans);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

p { text-wrap: pretty; }

h1 em, h2 em { font-style: italic; color: var(--luxury-bronze); }
.on-dark h2 em, .hero h1 em { color: inherit; font-style: italic; }

a { text-decoration: none; color: inherit; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
ul { list-style: none; }
button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; }

/* Kills the 300ms double-tap-zoom wait on touch, and replaces the
   browser's default blue tap flash with the brand bronze. */
button, a, summary, label {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(154, 117, 83, 0.18);
}

img { max-width: 100%; display: block; object-fit: cover; }

/* Any rule below that sets `display` on an element would otherwise beat
   the UA's [hidden] rule and un-hide it. The progressive-enhancement
   controls (carousel arrows, mobile menu) all ship
   hidden and are revealed by main.js, so this has to hold. */
[hidden] { display: none !important; }

::selection { background: var(--luxury-bronze); color: var(--white); }

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

/* Skip link — first tab stop for keyboard and screen-reader users. */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2000;
    padding: 12px 22px;
    background: var(--primary-dark);
    color: var(--white);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: translateY(-150%);
    transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

/* padding-block only. Many sections carry both .container and
   .section-padding; a `padding: 120px 0` shorthand here would win on
   source order and silently erase the container's side gutter. */
.section-padding { padding-block: var(--section-y); }
/* Two plain sections back to back would stack their paddings into 240px
   of empty ivory, and so would a page header followed by a plain section.
   The second of the pair drops its top padding, so adjacent blocks share
   one --section-y and the joins read evenly down the page. */
.section-padding + .section-padding,
.page-hero + .section-padding { padding-block-start: 0; }

/* The join straight after the hero. The hero already ends in its own
   band of dark, so a full section gap there reads as a hole rather
   than a breath — the rhythm goes tight here and generous between the
   peer sections that follow. */
.section-tight-top { padding-block-start: var(--block-y); }

/* A plain section meeting a tinted band gives up half of its run-out on
   that side, and the band's own --block-y makes up the rest: a colour
   change reads as one breath and a half, not two full sections' worth
   of empty ground (the 240px joins the client flagged on 2026-09-07).
   `.band` marks every full-bleed tinted block — stats strip, cuisine,
   featured, testimonials, CTA, explorer, live feature, numbers — and
   the footer counts as one, so the last section before it gives up the
   same half. */
.section-padding:has(+ .band) { padding-block-end: var(--block-y); }
.band + .section-padding { padding-block-start: var(--block-y); }
main > .section-padding:last-child { padding-block-end: var(--block-y); }

/* ------------------------------------------------------------
   Buttons — shared sweep-fill hover
   ------------------------------------------------------------ */
.btn {
    position: relative;
    display: inline-block;
    padding: 16px 36px;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    font-weight: 500;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-soft);
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--luxury-bronze);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(25,23,20,0.18); }
.btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(25,23,20,0.16); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; }
.btn:disabled::before { transform: scaleX(0); }

.btn-primary { background-color: var(--primary-dark); color: var(--white); }
.btn-primary:hover, .btn-primary:focus-visible { color: var(--white); }

.btn-outline {
    border: 1px solid var(--primary-dark);
    color: var(--primary-dark);
    background: transparent;
}
.btn-outline::before { background: var(--primary-dark); }
.btn-outline:hover, .btn-outline:focus-visible { color: var(--white); }

.btn-light { background: var(--white); color: var(--primary-dark); }
.btn-light:hover, .btn-light:focus-visible { color: var(--white); }

/* ------------------------------------------------------------
   Pill controls — the tab, filter and toggle buttons that used to
   read as plain text. Every one now carries a visible border, a
   hover fill and a clearly filled selected state.
   ------------------------------------------------------------ */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 13px padding keeps the control above a 40px touch target. */
    padding: 13px 26px;
    border: 1px solid rgba(25,23,20,0.22);
    border-radius: 999px;
    background: transparent;
    color: var(--primary-dark);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-soft),
                box-shadow var(--dur) var(--ease);
}

.pill:hover {
    border-color: var(--luxury-bronze);
    color: var(--luxury-bronze);
    transform: translateY(-2px);
}

.pill[aria-pressed="true"],
.pill[aria-selected="true"] {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(25,23,20,0.22);
}

.pill[aria-pressed="true"]:hover,
.pill[aria-selected="true"]:hover {
    background: var(--bronze-deep);
    border-color: var(--bronze-deep);
    color: var(--white);
}

/* On the dark cuisine band the same pill inverts. */
.on-dark .pill {
    border-color: rgba(255,255,255,0.28);
    color: rgba(255,255,255,0.82);
}
.on-dark .pill:hover { border-color: var(--luxury-bronze); color: var(--white); }
.on-dark .pill[aria-selected="true"] {
    background: var(--luxury-bronze);
    border-color: var(--luxury-bronze);
    color: var(--white);
    box-shadow: 0 8px 22px rgba(154,117,83,0.4);
}
.on-dark .pill[aria-selected="true"]:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); }

.label {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 12px;
    color: var(--luxury-bronze);
    margin-bottom: 20px;
    display: block;
}

/* ------------------------------------------------------------
   Media loading — reserves space, fades the image in
   ------------------------------------------------------------ */
.media {
    position: relative;
    overflow: hidden;
    background: var(--soft-beige);
}

.js .media img {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-soft), transform 1.2s var(--ease);
}
.js .media img.is-loaded { opacity: 1; }

/* Shimmer while the photo is in flight; removed once loaded. */
.js .media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(255,255,255,0) 20%,
        rgba(255,255,255,0.45) 50%,
        rgba(255,255,255,0) 80%);
    background-size: 220% 100%;
    animation: shimmer 1.6s infinite linear;
    pointer-events: none;
}
.js .media.is-settled::after { content: none; }

@keyframes shimmer {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}

/* ============================================================
   1. NAVIGATION
   White over the dark hero, solid once scrolled.
   ============================================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 22px 0;
    color: var(--white);
    transition: background-color var(--dur) var(--ease), padding var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* The nav sits on whatever the hero is showing that second, and a
   blurred video is not a stable backdrop — measured white-on-frame came
   out at 2.6:1 in the bright corners. This band gives the links a floor
   of their own so legibility never depends on the footage. It is only
   painted while the header is transparent; once .scrolled swaps in the
   solid white bar the band would just muddy it. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 168px;
    pointer-events: none;
    background: linear-gradient(rgba(0,0,0,0.34) 0%,
                                rgba(0,0,0,0.18) 55%,
                                rgba(0,0,0,0) 100%);
    transition: opacity var(--dur) var(--ease);
}
.site-header.scrolled::before { opacity: 0; }

/* The bar's own children have to clear the band it just painted. */
.site-header > * { position: relative; z-index: 1; }

/* The header stays put at every scroll position. An auto-hiding
   header would put the nav out of reach on the way down the page. */
.site-header.scrolled {
    background: var(--white);
    color: var(--primary-dark);
    padding: 12px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.nav-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

/* ---- Brand lockup ------------------------------------------------
   Wordmark over a letterspaced descriptor, matching the LAVOYA /
   CATERING logo. `--logo-size` drives the whole lockup so the nav,
   footer and 404 variants stay in proportion from one value. */
.logo {
    --logo-size: 30px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* The raster logo artwork already carries the fleuron, wordmark and
   CATERING descriptor. `--logo-size` still drives the whole lockup:
   the image renders 2.2× that value tall, the height of the old
   three-part CSS lockup, so nav, footer and 404 stay in proportion
   from one value. */
.logo-img {
    height: calc(var(--logo-size) * 2.2);
    width: auto;
    display: block;
    transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Over the hero photo the header is transparent and white — the gold
   artwork sinks into warm photography there, so render it white until
   the solid header background takes over. */
.site-header:not(.scrolled) .logo-img { filter: brightness(0) invert(1); opacity: 0.94; }

.nav-links { display: flex; gap: 36px; }

.nav-links a, .nav-contact {
    position: relative;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    opacity: 0.85;
    padding: 4px 0;
}

.nav-links a::after, .nav-contact::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--luxury-bronze);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--dur) var(--ease);
}

.nav-links a:hover, .nav-contact:hover { opacity: 1; }
.nav-links a:hover::after, .nav-contact:hover::after,
.nav-links a[aria-current]::after, .nav-contact[aria-current]::after { transform: scaleX(1); transform-origin: left center; }
/* No colour override here on purpose. Bronze text measured 1.01:1 over
   the blurred hero and 4.16:1 on the scrolled white header — both under
   the 4.5:1 AA floor for 13px text. The ::after underline above already
   marks the current page, and an underline is a non-colour indicator,
   so dropping the tint satisfies 1.4.3 and 1.4.1 at once. The link now
   inherits the header's own colour and stays legible in both states. */
.nav-links a[aria-current], .nav-contact[aria-current] { opacity: 1; }

/* Right-hand group: the Contact link sits beside the CTA. */
.nav-cta { display: flex; align-items: center; gap: var(--space-8); }

.nav-cta .btn { padding: 12px 28px; font-size: 12px; }

.site-header .nav-cta .btn { background: var(--white); color: var(--primary-dark); }
.site-header .nav-cta .btn:hover, .site-header .nav-cta .btn:focus-visible { color: var(--white); }
.site-header.scrolled .nav-cta .btn { background: var(--primary-dark); color: var(--white); }

/* Scroll progress rail sits on the header's bottom edge. */
.scroll-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--luxury-bronze);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}
.site-header.scrolled .scroll-progress { opacity: 1; }

/* Mobile toggle — hamburger morphs to X */
.mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 34px;
    height: 40px;
    z-index: 1001;
    position: relative;
}

.mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
    transform-origin: center;
}

body.menu-open .mobile-toggle { color: var(--white); }
body.menu-open .mobile-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.menu-open .mobile-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .mobile-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobile-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--primary-dark);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease),
                visibility 0s linear var(--dur-slow);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease),
                visibility 0s linear 0s;
}

.mobile-menu a {
    font-family: var(--serif);
    font-size: clamp(30px, 8vw, 42px);
    margin: 10px 0;
    opacity: 0;
    transform: translateY(24px);
}

/* Links stagger in behind the panel. */
.mobile-menu.active a {
    animation: menuItemIn 0.55s var(--ease) forwards;
}
.mobile-menu.active a:nth-child(1) { animation-delay: 0.12s; }
.mobile-menu.active a:nth-child(2) { animation-delay: 0.17s; }
.mobile-menu.active a:nth-child(3) { animation-delay: 0.22s; }
.mobile-menu.active a:nth-child(4) { animation-delay: 0.27s; }
.mobile-menu.active a:nth-child(5) { animation-delay: 0.32s; }
.mobile-menu.active a:nth-child(6) { animation-delay: 0.37s; }
.mobile-menu.active a:nth-child(7) { animation-delay: 0.42s; }

@keyframes menuItemIn {
    to { opacity: 1; transform: translateY(0); }
}

.mobile-menu a:hover { color: var(--luxury-bronze); }

.mobile-menu .menu-contact {
    margin-top: 40px;
    font-size: 14px;
    opacity: 0.6;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 0 24px;
}

/* ============================================================
   2. HERO
   ============================================================ */
/* Fill the opening desktop viewport like the reference while allowing
   the section to grow rather than clip at browser zoom. The content is
   anchored low so the video remains a visible part of the composition. */
.hero {
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding-top: calc(var(--nav-h) + var(--space-8));
    padding-bottom: var(--space-24);
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
}

/* Deliberately no z-index: with `position` alone and `z-index: auto`
   this box does not open a stacking context, so .hero-bg, the video,
   the scrim and the button keep resolving against .hero exactly as they
   did when they were its direct children. Give this rule a z-index and
   the pause button drops behind the headline container. */
.hero-media {
    position: absolute;
    inset: 0;
}

/* z-index 0 (not -1) keeps the layer inside the hero's own stacking
   context — a negative index can slip behind the page background. */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../assets/hero-still.jpg') center/cover no-repeat;
    transform: scale(1.05);
    animation: slowZoom 24s infinite alternate ease-in-out;
}

@keyframes slowZoom {
    from { transform: scale(1.05); }
    to { transform: scale(1.15); }
}

/* Keep the client's footage crisp and recognisable. The targeted scrim
   above it handles text contrast without turning the video into texture. */
.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    filter: brightness(0.98) saturate(1.04);
}

/* On .hero-media, not .hero-bg. .hero-bg carries `z-index: 0`, which
   makes it a stacking context, so a scrim declared on its ::after is
   sealed inside it and the video — a later sibling at the same level —
   paints straight over the top. Hung on the wrapper (no z-index, so no
   stacking context of its own) the scrim resolves against .hero and
   lands above the video at z-index 1, still under the copy at 2 and the
   pause button at 3. */
.hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    /* The darker lower-left pocket protects the copy; the rest of the
       frame stays light enough for motion and food detail to read. */
    background:
        linear-gradient(90deg, rgba(0,0,0,0.52) 0%,
                               rgba(0,0,0,0.34) 48%,
                               rgba(0,0,0,0.08) 78%),
        linear-gradient(rgba(0,0,0,0.22) 0%,
                        rgba(0,0,0,0.08) 46%,
                        rgba(0,0,0,0.24) 100%);
}

/* Once the video paints, the still behind it is never seen again —
   running slowZoom on top of real footage is two motions fighting over
   one layer, and it animates a 720p video texture for nothing. */
.hero.has-video .hero-bg { animation: none; transform: scale(1.05); }

/* Same treatment as .cuisine-arrow: a glyph that has to stay readable
   over whatever frame happens to be underneath it. */
.hero-motion-toggle {
    position: absolute;
    z-index: 3;
    right: var(--space-5);
    bottom: var(--space-5);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: rgba(25,23,20,0.68);
    border: 1px solid rgba(255,255,255,0.55);
    backdrop-filter: blur(6px);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.hero-motion-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.hero-motion-toggle:hover,
.hero-motion-toggle:focus-visible {
    background: var(--luxury-bronze);
    border-color: var(--luxury-bronze);
}
.hero-motion-toggle:active { background: var(--bronze-deep); border-color: var(--bronze-deep); }
.hero-motion-toggle .icon-pause { display: none; }
.hero-motion-toggle.is-playing .icon-play { display: none; }
.hero-motion-toggle.is-playing .icon-pause { display: block; }

/* width:100% matters: as a flex item the container would otherwise
   shrink-to-fit and centre itself, pushing the headline off the
   gutter that the logo and every section below align to. */
.hero > .container { position: relative; z-index: 2; width: 100%; }

/* No extra padding — the hero headline aligns to the same gutter
   as the logo and every section below it. */
.hero-content { max-width: 1000px; }

.js .hero-content > * {
    opacity: 0;
    transform: translateY(30px);
    animation: heroIn 1s var(--ease) forwards;
}
.js .hero-content > *:nth-child(2) { animation-delay: 0.15s; }
.js .hero-content > *:nth-child(3) { animation-delay: 0.3s; }
.js .hero-content > *:nth-child(4) { animation-delay: 0.45s; }

@keyframes heroIn {
    to { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-6);
    border: 1px solid rgba(255,255,255,0.34);
    border-radius: 12px;
    color: #4E4035;
    background: rgba(246,241,232,0.92);
    backdrop-filter: blur(8px);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 28px rgba(25,23,20,0.12);
}

.hero-eyebrow::before {
    content: '\2726';
    color: var(--luxury-bronze);
    font-size: 16px;
    line-height: 1;
}

/* Playfair Display, like every other heading on the site. This rule used to
   override the family to Inter, which made the one headline visitors see
   first the only place the brand's display serif was missing.

   Inheriting the family is not enough on its own — the metrics that suited
   a grotesk actively fight a display serif. Inter tolerated -0.055em
   tracking and a 0.98 line-height because its letterforms are upright and
   evenly weighted; Playfair has real stroke contrast, bracketed serifs and
   long ascenders, so at that tracking the serifs collide and at that
   leading the descenders of line one touch the caps of line two. Hence the
   looser values below — still tight enough to read as deliberate display
   typography, no longer tight enough to damage the letterforms.

   Weight and family both come from the base h1-h4 rule now; only what the
   hero genuinely needs differently is restated. */
.hero h1 {
    max-width: none;
    margin-bottom: var(--space-5);
    font-size: clamp(46px, 5.8vw, 84px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    text-wrap: initial;
}

.hero-title-line { display: block; }
.hero-title-accent { color: #E7C49F; }

.hero p {
    font-size: 17px;
    line-height: 1.5;
    max-width: 62ch;
    margin-bottom: var(--space-8);
    font-weight: 400;
    opacity: 0.96;
}

.hero-btns { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero .btn-outline { border-color: var(--white); color: var(--white); }
.hero .btn-outline::before { background: var(--white); }
.hero .btn-outline:hover, .hero .btn-outline:focus-visible { color: var(--primary-dark); }
.hero .btn:hover, .hero .btn:focus-visible { box-shadow: 0 12px 28px rgba(0,0,0,0.35); }

/* ============================================================
   3. BRAND INTRODUCTION
   ============================================================ */
/* Equal columns and a fixed image-block height, so the copy column
   and the picture column share one centre line and one baseline —
   the text no longer floats above a picture that runs past it. */
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--split-gap);
    align-items: center;
}

.intro-text { align-self: center; }
.intro-text h2 { font-size: clamp(30px, 3.9vw, 52px); margin-bottom: var(--space-5); }

.intro-text p {
    font-size: 18px;
    color: var(--ink-soft);
    margin-bottom: var(--space-8);
    max-width: 520px;
}

.text-link {
    display: inline-block;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 13px;
    border-bottom: 1px solid var(--primary-dark);
    padding-bottom: 5px;
}
.text-link:hover { color: var(--luxury-bronze); border-color: var(--luxury-bronze); }

/* The whole composition is boxed to one height, so nothing spills
   past the section any more — the 50px hack that used to push the
   stats strip down is gone with it. */
.intro-images {
    position: relative;
    height: 560px;
}

.img-large {
    position: absolute;
    inset: 0 0 0 22%;
    border-radius: var(--card-radius);
}
.img-large img, .img-small img { width: 100%; height: 100%; }

.img-small {
    position: absolute;
    left: 0;
    bottom: 48px;
    width: 52%;
    height: 300px;
    border: 12px solid var(--warm-ivory);
    border-radius: var(--card-radius);
}

/* ============================================================
   4. STATS
   ============================================================ */
.stats-strip {
    background: var(--soft-beige);
    padding: var(--block-y) 0;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    gap: 30px;
}

.stat-item h3 {
    font-size: 56px;
    color: var(--luxury-bronze);
    /* Tabular figures stop the number jittering as it counts up. */
    font-variant-numeric: tabular-nums;
}

.stat-item p {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
    margin-top: 5px;
}

/* ============================================================
   5. SERVICES / OCCASIONS
   ============================================================ */
/* One header treatment for every section on the page — same gap under
   the heading, same gap under the block. Sections used to run 80 / 60 /
   50 here, which is what made the page feel unevenly spaced. */
.services-header { text-align: center; margin-bottom: var(--header-gap); }
.services-header h2 { font-size: clamp(28px, 3.6vw, 48px); margin-bottom: var(--space-5); }
.services-header p { max-width: 700px; margin: 0 auto; color: var(--ink-soft); }

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.service-card {
    position: relative;
    display: block;
    height: 600px;
    overflow: hidden;
    color: var(--white);
    background: var(--soft-beige);
}

.service-card img {
    width: 100%;
    height: 100%;
}

.service-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    padding: 40px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: var(--white);
    transform: translateY(40px);
    transition: transform var(--dur-slow) var(--ease);
}

.service-overlay h3 { font-size: 30px; margin-bottom: 8px; }
.service-overlay p {
    font-size: 14px;
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease);
}

.service-card:hover img,
.service-card:focus-visible img { transform: scale(1.08); }
.service-card:hover .service-overlay,
.service-card:focus-visible .service-overlay { transform: translateY(0); }
.service-card:hover .service-overlay p,
.service-card:focus-visible .service-overlay p { opacity: 0.9; }

/* Touch devices have no hover — keep the copy visible. */
@media (hover: none) {
    .service-overlay { transform: translateY(0); }
    .service-overlay p { opacity: 0.9; }
}

/* ============================================================
   6. CUISINE (dark section)
   ============================================================ */
.cuisine-section {
    background: var(--primary-dark);
    color: var(--white);
    padding: var(--block-y) 0;
}

.cuisine-header { margin-bottom: var(--header-gap); }
.cuisine-header h2 { font-size: clamp(28px, 3.6vw, 48px); margin-bottom: var(--space-5); }
.cuisine-header p { opacity: 0.7; max-width: 560px; }

/* The tablist sits in its own control bar row, centred under the
   section heading. */
.cuisine-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--header-gap);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: var(--space-8);
}

.cuisine-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Sizing only — the pill class supplies the border, fill and states. */
.cuisine-btn { font-size: 13px; padding: 13px 26px; }

.cuisine-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--split-gap);
    align-items: center;
    transition: opacity var(--dur) var(--ease-soft);
}
.cuisine-display.is-swapping { opacity: 0; }

/* The info column is now the taller of the two, and it varies by
   cuisine — so the photo tracks the row height rather than fixing it. */
.cuisine-img { position: relative; min-height: 500px; width: 100%; align-self: stretch; display: grid; }
.cuisine-img img { width: 100%; height: 100%; grid-area: 1 / 1; }

/* Prev / next sit on the left and right edges of the photo, which is
   what tells you the picture slides. The tablist above stays the
   primary control; these are a second route to the same five panels. */
.cuisine-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: rgba(25,23,20,0.68);
    border: 1px solid rgba(255,255,255,0.55);
    backdrop-filter: blur(6px);
    transform: translateY(-50%);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.cuisine-arrow svg { width: 15px; height: 15px; fill: currentColor; }
.cuisine-arrow-prev { left: var(--space-4); }
.cuisine-arrow-next { right: var(--space-4); }

.cuisine-arrow:hover,
.cuisine-arrow:focus-visible {
    background: var(--luxury-bronze);
    border-color: var(--luxury-bronze);
    color: var(--white);
}
.cuisine-arrow:active { background: var(--bronze-deep); border-color: var(--bronze-deep); }

/* The photo darkens slightly at both edges so the two white glyphs
   never land on a pale dish and disappear. ::before, not ::after —
   .media already owns ::after for the loading shimmer. */
.cuisine-img::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,0.32), rgba(0,0,0,0) 24%,
                                       rgba(0,0,0,0) 76%, rgba(0,0,0,0.32));
}

.cuisine-info { align-self: center; }
.cuisine-info h3 { font-size: clamp(26px, 2.8vw, 38px); margin-bottom: 18px; color: var(--luxury-bronze); }
.cuisine-info p { font-size: 17px; opacity: 0.8; max-width: 520px; }

/* Four highlights per cuisine. A hairline rule replaces the bullet —
   the list has to sit beside a 500px photo without shouting. */
.cuisine-points {
    margin-top: 34px;
    max-width: 520px;
    display: grid;
    gap: 22px;
}

.cuisine-points li {
    position: relative;
    padding-left: 34px;
}

.cuisine-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 20px;
    height: 1px;
    background: var(--luxury-bronze);
}

.point-name {
    display: block;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--luxury-bronze);
    margin-bottom: 7px;
}

.point-desc {
    display: block;
    font-size: 15px;
    line-height: 1.65;
    opacity: 0.72;
}

/* ============================================================
   7. LIVE EXPERIENCES (horizontal carousel)
   ============================================================ */
/* --live-media-h keeps the side arrows centred on the photo row rather
   than on the whole card, which includes the caption below it. */
.live-carousel { position: relative; --live-media-h: 300px; }

.live-scroll-container {
    display: flex;
    gap: var(--space-10);
    overflow-x: auto;
    padding: var(--space-10) 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    cursor: grab;
}

.live-scroll-container::-webkit-scrollbar { display: none; }
.live-scroll-container.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.live-scroll-container.is-dragging * { pointer-events: none; }

/* A definite width, not a minimum. With `flex: 0 0 auto` and only a
   min-width, each card sized to its own paragraph — they came out
   ~566px wide, which on a phone made every card wider than the screen
   and left the snap points landing mid-card. */
.live-item {
    flex: 0 0 auto;
    width: min(400px, 78vw);
    scroll-snap-align: start;
}
.live-item .media { height: var(--live-media-h); margin-bottom: var(--space-5); }
.live-item img { height: 100%; width: 100%; }
.live-item h3 { font-size: 28px; margin-bottom: var(--space-2); }
.live-item p { color: var(--ink-soft); font-size: 15px; }

/* Arrows flank the track on the left and right, level with the middle
   of the photos, so the direction of travel is unmistakable. They sit
   just inside the edge rather than centred underneath, where they read
   as page furniture instead of as a control on this row. */
.carousel-controls { display: contents; }

.carousel-btn {
    position: absolute;
    z-index: 4;
    top: calc(var(--space-10) + var(--live-media-h) / 2);
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: 1px solid var(--primary-dark);
    border-radius: 50%;
    background: var(--white);
    color: var(--primary-dark);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(25,23,20,0.16);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), opacity var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur) var(--ease);
}
.carousel-btn svg { width: 16px; height: 16px; fill: currentColor; }

.carousel-btn-prev { left: calc(var(--space-5) * -1); }
.carousel-btn-next { right: calc(var(--space-5) * -1); }

.carousel-btn:hover:not(:disabled) {
    background: var(--luxury-bronze);
    color: var(--white);
    border-color: var(--luxury-bronze);
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 12px 26px rgba(25,23,20,0.24);
}
.carousel-btn:active:not(:disabled) { transform: translateY(-50%) scale(1); }
.carousel-btn:disabled { opacity: 0.28; cursor: not-allowed; box-shadow: none; }

/* Hint and Pause sit on one line under the track, centred as a pair. */
.live-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-4);
}

.scroll-hint {
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0.4;
    margin: 0;
}


/* ============================================================
   8. FEATURED WEDDING
   ============================================================ */
.featured-wedding {
    background: var(--soft-beige);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    padding-block: var(--block-y);
}

.featured-info { padding: 0 var(--split-gap); }
.featured-info h2 { font-size: clamp(34px, 4vw, 56px); margin-bottom: var(--space-8); }
.featured-info > p { margin-bottom: var(--space-10); opacity: 0.8; }

.featured-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
}

.meta-item span { font-size: 12px; text-transform: uppercase; opacity: 0.6; display: block; letter-spacing: 0.08em; }
.meta-item p { font-size: 18px; font-weight: 500; }

.featured-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 300px;
    gap: 15px;
    padding: 0 var(--space-10);
}

.featured-images .media { height: 100%; }
.featured-images img { width: 100%; height: 100%; }
.f-img-1 { grid-row: span 2; }

/* ============================================================
   9. PROCESS STEPS — interactive cards
   Each card is an accordion: header button, always-visible summary,
   and a panel that expands. Hover, focus and the open state all
   read differently, so the row is never a flat block of text.
   ============================================================ */
/* stretch, not start: all four cards take the height of the tallest,
   so opening one no longer leaves a ragged row of three short cards
   beside one long one. The row resizes as a unit when the open card
   changes, which reads as the panel driving the grid. */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    align-items: stretch;
}

.step-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-7) var(--space-6) var(--space-6);
    background: var(--white);
    border: 1px solid rgba(25,23,20,0.09);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

/* A hairline across the card top draws in as the step scrolls into
   view. One pixel, matching the bronze rules used beside the cuisine
   highlights — a heavier bar reads as a status stripe, which is not
   what this is. */
.step-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--luxury-bronze);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s var(--ease), background-color var(--dur) var(--ease);
}
.reveal.active .step-item::before { transform: scaleX(1); }
.steps-grid .step-item:nth-child(2)::before { transition-delay: 0.12s; }
.steps-grid .step-item:nth-child(3)::before { transition-delay: 0.24s; }
.steps-grid .step-item:nth-child(4)::before { transition-delay: 0.36s; }

.step-item:hover,
.step-item:focus-within {
    transform: translateY(-6px);
    border-color: rgba(154,117,83,0.45);
    box-shadow: 0 18px 40px rgba(25,23,20,0.12);
}

.step-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0 0 var(--space-4);
    text-align: left;
}

.step-num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(154,117,83,0.5);
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1;
    color: var(--luxury-bronze);
    background: rgba(154,117,83,0.06);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur) var(--ease-soft);
}

.step-item:hover .step-num {
    background: var(--luxury-bronze);
    border-color: var(--luxury-bronze);
    color: var(--white);
    transform: scale(1.06);
}

.step-label {
    font-family: var(--serif);
    font-size: 24px;
    line-height: 1.2;
    flex: 1 1 auto;
    transition: color var(--dur) var(--ease);
}
.step-item:hover .step-label { color: var(--luxury-bronze); }

.step-summary { color: var(--ink-soft); font-size: 15px; margin-bottom: var(--space-4); }

/* The detail is always on the page — see the note in index.html. It is
   pushed to the bottom of the card (margin-top: auto) so the four cards
   share one baseline for this block however the summary above it wraps,
   which is what makes the row read as four equal cards rather than four
   boxes of the same height with the text floating at different points. */
.step-detail {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(25,23,20,0.08);
}

.step-detail > p {
    font-size: 14.5px;
    color: var(--ink-soft);
}

/* ============================================================
   10. GALLERY
   ============================================================ */
.gallery-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 50px;
}

/* The pill class supplies the border, fill and states. */
.filter-btn { padding: 13px 26px; }

.gallery-grid {
    columns: 3 300px;
    column-gap: 20px;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 20px;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    position: relative;
    background: var(--soft-beige);
    transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}

/* Two-step hide keeps the reflow from snapping. */
.gallery-item.is-hiding { opacity: 0; transform: scale(0.96); }
.gallery-item.hidden { display: none; }

/* height:auto preserves each photo's own aspect ratio in the
   masonry columns, while the width/height attrs reserve the box. */
.gallery-item img { width: 100%; height: auto; transition: transform var(--dur-slow) var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }

.js .gallery-item img {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease);
}
.js .gallery-item img.is-loaded { opacity: 1; }

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(25,23,20,0.28);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
}
.gallery-item:hover::after,
.gallery-item:focus-visible::after { opacity: 1; }

.gallery-zoom {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--primary-dark);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    pointer-events: none;
    z-index: 2;
}
.gallery-zoom svg { width: 18px; height: 18px; fill: currentColor; }
.gallery-item:hover .gallery-zoom,
.gallery-item:focus-visible .gallery-zoom { opacity: 1; transform: scale(1); }

.gallery-empty {
    text-align: center;
    padding: 40px 0;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15,13,11,0.94);
    display: grid;
    place-items: center;
    padding: 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-soft), visibility 0s linear var(--dur);
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease-soft), visibility 0s linear 0s;
}

.lightbox-figure {
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.lightbox-img {
    max-width: 100%;
    max-height: calc(100vh - 180px);
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease);
}
.lightbox.is-ready .lightbox-img { opacity: 1; transform: scale(1); }

.lightbox-caption {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.04em;
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--white);
    background: rgba(255,255,255,0.1);
    transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.24); }
.lightbox-close svg, .lightbox-nav svg { width: 18px; height: 18px; fill: currentColor; }

.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ============================================================
   11. TESTIMONIALS — card grid
   Every quote is on the page at once. No carousel, no timer, and
   nothing that moves out from under a reader mid-sentence.
   ============================================================ */
.testimonial-section {
    background: var(--white);
    padding: var(--block-y) 0;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}

.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 44px 34px 34px;
    background: var(--warm-ivory);
    border: 1px solid rgba(25,23,20,0.08);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

/* Hairline, to match the step cards and the cuisine highlight rules —
   the same bronze accent at the same weight everywhere it appears. */
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--luxury-bronze);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease);
}

.testimonial-card:hover,
.testimonial-card:focus-within {
    transform: translateY(-6px);
    border-color: rgba(154,117,83,0.45);
    box-shadow: 0 20px 44px rgba(25,23,20,0.12);
}
.testimonial-card:hover::before,
.testimonial-card:focus-within::before { transform: scaleX(1); }

.quote-mark {
    position: absolute;
    top: 6px;
    right: 22px;
    font-family: var(--serif);
    font-size: 120px;
    line-height: 1;
    color: var(--luxury-bronze);
    opacity: 0.14;
    pointer-events: none;
}

/* Off-screen sprite that holds the star symbol. */
.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.testimonial-rating {
    display: flex;
    gap: 5px;
    margin-bottom: 18px;
}
.testimonial-rating svg {
    width: 17px;
    height: 17px;
    fill: var(--luxury-bronze);
}

.testimonial-text {
    font-family: var(--serif);
    font-size: 21px;
    line-height: 1.5;
    font-style: italic;
    /* Pushes the attribution to the bottom, so the three cards line
       their names up regardless of quote length. */
    flex: 1 1 auto;
    margin-bottom: 28px;
}

.testimonial-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid rgba(25,23,20,0.1);
}

.testimonial-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--luxury-bronze);
    color: var(--white);
    font-size: 14px;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.testimonial-person { display: flex; flex-direction: column; gap: 3px; }

.testimonial-author {
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.2;
    color: var(--primary-dark);
}

.testimonial-role {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

/* ============================================================
   12. FAQ
   ============================================================ */
.faq-section { max-width: 900px; margin: 0 auto; }

.faq-item { border-bottom: 1px solid rgba(0,0,0,0.1); }

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 28px 48px 28px 0;
    font-family: var(--serif);
    font-size: 24px;
    position: relative;
    transition: color var(--dur) var(--ease);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--luxury-bronze); }

.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--sans);
    font-size: 24px;
    font-weight: 300;
    color: var(--luxury-bronze);
    transition: transform var(--dur) var(--ease);
}

.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item[open] summary { color: var(--luxury-bronze); }

/* Answer slides open instead of popping. */
.faq-answer {
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr;
}

.faq-item p {
    padding: 0 40px 28px 0;
    color: var(--ink-soft);
    max-width: 760px;
}

.faq-item[open] .faq-answer { animation: faqOpen var(--dur) var(--ease-soft); }

@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   13. CTA
   ============================================================ */
.cta-box {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
                url('https://images.unsplash.com/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&q=80&w=2069') center/cover;
    background-color: var(--primary-dark);
    padding: var(--block-y) var(--gutter);
    text-align: center;
    color: var(--white);
}

.cta-box .label { color: var(--white); }
.cta-box h2 { font-size: clamp(36px, 5.5vw, 72px); margin-bottom: 30px; max-width: 1000px; margin-inline: auto; }
.cta-box .btn-light:hover, .cta-box .btn-light:focus-visible { color: var(--white); }

/* ============================================================
   14. ENQUIRY FORM
   ============================================================ */
.enquiry-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--split-gap);
}

.enquiry-intro h2 { font-size: clamp(32px, 4vw, 52px); }
.enquiry-intro > p { margin-top: var(--space-5); opacity: 0.7; }

.enquiry-contact { margin-top: var(--space-10); }
.enquiry-contact p { margin-bottom: var(--space-2); }
.enquiry-contact a { border-bottom: 1px solid transparent; }
.enquiry-contact a:hover { color: var(--luxury-bronze); border-color: var(--luxury-bronze); }

.form-note { font-size: 13px; opacity: 0.55; margin-top: var(--space-6); }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.form-group { margin-bottom: var(--space-8); position: relative; }

.form-group label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    opacity: 0.6;
    transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    font-family: inherit;
    font-size: 16px;
    color: var(--primary-dark);
    outline: none;
    border-radius: 0;
    transition: border-color var(--dur) var(--ease);
}

.form-group textarea { resize: vertical; min-height: 96px; }

/* Bronze underline sweeps in from the left on focus. */
.form-group::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--luxury-bronze);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--ease);
    pointer-events: none;
}
.form-group:focus-within::after { transform: scaleX(1); }
.form-group:focus-within label { opacity: 1; color: var(--luxury-bronze); }

.form-group select { cursor: pointer; }
.form-group select:invalid { color: rgba(25,23,20,0.42); }

/* Inline validation */
.field-error {
    display: block;
    font-size: 12.5px;
    color: #A33A3A;
    margin-top: 8px;
    min-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-bottom-color: #A33A3A; }
.form-group.has-error .field-error { opacity: 1; transform: translateY(0); }
.form-group.has-error label { color: #A33A3A; opacity: 1; }
.form-group.has-error::after { background: #A33A3A; }

.form-status {
    margin-top: 20px;
    font-size: 15px;
    display: none;
    padding: 16px 20px;
    border-left: 2px solid currentColor;
    background: rgba(0,0,0,0.02);
}
.form-status.success { display: block; color: #3E6B3E; }
.form-status.error { display: block; color: #A33A3A; }
/* Neither a success nor a failure — the note that says a shortlist
   carried over from the menu page has been dropped into the message. */
.form-status.info { display: block; color: var(--bronze-deep); }

.form-fallback {
    display: none;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.form-fallback.active { display: flex; }
.form-fallback .btn { padding: 13px 26px; font-size: 12px; }

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   15. MENU PAGE (/menu.html)
   ============================================================ */

/* ---- Sub-page header -------------------------------------------
   index.html opens on a dark hero, so the nav starts transparent and
   only turns solid past 50px. There is nothing but ivory behind it
   here, so it has to start solid — otherwise the white-filtered logo
   and white links sit on a near-white bar. These mirror .scrolled
   exactly and are written with one extra class of specificity so
   they hold at scroll position 0; .scrolled still applies on top and
   changes nothing. */
.page-solid .site-header {
    background: var(--white);
    color: var(--primary-dark);
    padding: 12px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.page-solid .site-header::before { opacity: 0; }
.page-solid .site-header .logo-img { filter: none; opacity: 1; }
.page-solid .site-header .nav-cta .btn { background: var(--primary-dark); color: var(--white); }

/* ---- Breadcrumbs ------------------------------------------------ */
.breadcrumbs { margin-bottom: var(--space-6); }
/* The global reset only clears markers off `ul`; a breadcrumb trail is
   genuinely ordered, so this is the one `ol` on the site. */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.breadcrumbs li { font-size: 13px; color: var(--ink-soft); }
.breadcrumbs li + li::before {
    content: '/';
    margin-right: var(--space-3);
    color: rgba(25,23,20,0.3);
}
.breadcrumbs a { position: relative; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.breadcrumbs a:hover { color: var(--luxury-bronze); border-color: var(--luxury-bronze); }
/* 13px text gives an 18px-tall link, under the 24px floor in 2.5.8.
   The hit area grows on a pseudo-element rather than on padding, so
   the underline stays tight against the word. */
.breadcrumbs a::after { content: ''; position: absolute; inset: -6px -4px; }
.breadcrumbs [aria-current="page"] { color: var(--primary-dark); }

/* ---- Page header ------------------------------------------------ */
/* The summary band directly under it is a .band, so the header keeps
   only the half-measure below — the same join as everywhere else. */
.menu-hero {
    padding-block: calc(var(--nav-h) + var(--space-14)) var(--block-y);
}

.menu-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--split-gap);
    align-items: center;
}

.menu-hero h1 {
    font-size: clamp(38px, 5.6vw, 74px);
    margin-bottom: var(--space-6);
}

.menu-hero-lead {
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 52ch;
    margin-bottom: var(--space-10);
}

.menu-hero-media { border-radius: var(--card-radius); aspect-ratio: 1 / 1; }
.menu-hero-media img { width: 100%; height: 100%; }

/* ---- Catalogue summary band ------------------------------------- */
.menu-doc {
    background: var(--soft-beige);
    padding-block: var(--block-y);
}

.menu-doc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--split-gap);
    align-items: center;
}

.menu-doc-intro h2 { font-size: clamp(28px, 3.4vw, 46px); margin-bottom: var(--space-5); }
.menu-doc-intro p { color: var(--ink-soft); max-width: 46ch; }

.menu-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.menu-stat-num {
    display: block;
    font-family: var(--serif);
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1;
    color: var(--bronze-deep);
    margin-bottom: var(--space-2);
}

.menu-stat-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    line-height: 1.35;
}

.menu-doc-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.menu-doc-actions .btn { padding: 14px 26px; font-size: 12px; }

/* ---- Occasion strip ---------------------------------------------
   One hairline between cells rather than a border on each, so the
   grid reads as a single ruled block instead of six boxes. */
.occasion-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(25,23,20,0.12);
    border: 1px solid rgba(25,23,20,0.12);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.occasion-card {
    display: block;
    height: 100%;
    background: var(--white);
    padding: var(--space-10);
    transition: background-color var(--dur) var(--ease);
}
/* White cells; the one under the cursor takes on the page's own ivory. */
.occasion-card:hover, .occasion-card:focus-visible { background: var(--warm-ivory); }

.occasion-eyebrow {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--luxury-bronze);
    margin-bottom: var(--space-4);
}

.occasion-name {
    display: block;
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

.occasion-desc {
    display: block;
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: var(--space-5);
}

.occasion-arrow {
    display: inline-block;
    color: var(--luxury-bronze);
    font-size: 18px;
    transition: transform var(--dur) var(--ease);
}
.occasion-card:hover .occasion-arrow,
.occasion-card:focus-visible .occasion-arrow { transform: translateX(6px); }

/* ---- Browse by category ----------------------------------------- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.category-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid rgba(25,23,20,0.1);
    border-radius: var(--card-radius);
    padding: var(--space-8);
    transition: transform var(--dur-fast) var(--ease-soft),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.category-card:hover, .category-card:focus-visible {
    background: var(--warm-ivory);
    transform: translateY(-4px);
    border-color: var(--luxury-bronze);
    box-shadow: 0 14px 32px rgba(25,23,20,0.1);
}

.category-num {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--luxury-bronze);
    margin-bottom: var(--space-10);
}

.category-name {
    font-family: var(--serif);
    font-size: 25px;
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

.category-desc {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: var(--space-6);
    flex: 1;
}

.category-link {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: var(--bronze-deep);
}

/* ============================================================
   MENU EXPLORER — search, filter, shortlist
   ============================================================ */

/* A white band between two ivory sections: the catalogue reads as a
   working surface rather than another passage of the page. */
.explorer-section {
    background: var(--white);
    padding-block: var(--block-y);
}

/* The explorer's filtering uses a class, not the `hidden` attribute:
   [hidden] carries !important in this stylesheet and the print rules
   have to be able to bring the whole catalogue back. */
.chapter.is-hidden,
.dish.is-hidden { display: none; }

/* Content that exists only on paper — see the PRINT block. */
.print-only { display: none; }

.explorer-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.explorer-search { flex: 1 1 340px; max-width: 520px; }

.explorer-search label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
    margin-bottom: var(--space-3);
}

.explorer-search-field { position: relative; }

.explorer-search-icon {
    position: absolute;
    left: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    fill: var(--ink-soft);
    pointer-events: none;
}

.explorer-search input {
    width: 100%;
    height: 58px;
    padding: 0 var(--space-12) 0 var(--space-12);
    font-family: var(--sans);
    font-size: 16px;
    color: var(--primary-dark);
    background: var(--warm-ivory);
    border: 1px solid rgba(25,23,20,0.16);
    border-radius: var(--card-radius);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
    -webkit-appearance: none;
    appearance: none;
}
.explorer-search input::placeholder { color: rgba(86,80,73,0.7); }
.explorer-search input:focus { outline: none; border-color: var(--luxury-bronze); background: var(--white); }
.explorer-search input:focus-visible { outline: 2px solid var(--luxury-bronze); outline-offset: 2px; }
/* The UA's own clear affordance would sit beside ours. */
.explorer-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.explorer-search-clear {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ink-soft);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.explorer-search-clear svg { width: 16px; height: 16px; fill: currentColor; }
.explorer-search-clear:hover { background: rgba(25,23,20,0.06); color: var(--primary-dark); }

.explorer-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.explorer-filters .pill { padding: 12px 22px; font-size: 12px; }

.explorer-body {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--space-12);
    align-items: start;
}

/* ---- Chapter rail ----------------------------------------------- */
.explorer-rail {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-5));
    border: 1px solid rgba(25,23,20,0.12);
    border-radius: var(--card-radius);
    overflow: hidden;
    max-height: calc(100vh - var(--nav-h) - var(--space-12));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: 13px var(--space-5);
    text-align: left;
    font-size: 14px;
    line-height: 1.3;
    color: var(--ink-soft);
    border-bottom: 1px solid rgba(25,23,20,0.1);
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail-item:last-child { border-bottom: 0; }
.rail-item:hover { background: var(--warm-ivory); color: var(--primary-dark); }

.rail-count {
    flex: none;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: rgba(86,80,73,0.75);
    font-variant-numeric: tabular-nums;
}

.rail-item[aria-pressed="true"] {
    background: var(--primary-dark);
    color: var(--white);
    font-weight: 500;
}
.rail-item[aria-pressed="true"] .rail-count { color: rgba(255,255,255,0.7); }
.rail-item[aria-pressed="true"]:hover { background: var(--bronze-deep); }

/* ---- Results ----------------------------------------------------- */
.explorer-results { min-width: 0; }

.explorer-results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(25,23,20,0.12);
    margin-bottom: var(--space-10);
}

.explorer-count { font-family: var(--serif); font-size: 20px; }
.explorer-hint { font-size: 13px; color: var(--ink-soft); }

.explorer-empty {
    padding: var(--space-16) 0;
    text-align: center;
    font-size: 17px;
    color: var(--ink-soft);
    max-width: 46ch;
    margin-inline: auto;
}

.chapter + .chapter { margin-top: var(--space-16); }

.chapter-head {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(25,23,20,0.1);
    margin-bottom: var(--space-8);
}
.chapter-title { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: var(--space-3); }
.chapter-blurb { font-size: 15px; color: var(--ink-soft); max-width: 62ch; margin-bottom: var(--space-3); }
.chapter-count {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--luxury-bronze);
}

.dish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: var(--space-4);
}

.dish {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--warm-ivory);
    border: 1px solid rgba(25,23,20,0.1);
    border-radius: var(--card-radius);
    padding: var(--space-6);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dish:hover { border-color: rgba(154,117,83,0.5); box-shadow: 0 8px 20px rgba(25,23,20,0.06); }

/* JS injects this on cross-chapter search results, where the chapter
   is information. Under a chapter heading it would repeat the heading,
   so it is not in the markup. */
.dish-chapter {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--luxury-bronze);
}

.dish-name { font-size: 19px; line-height: 1.25; }
.dish-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

.dish-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }

.dish-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    border: 1px solid rgba(25,23,20,0.14);
    border-radius: 999px;
    padding: 4px 10px;
    line-height: 1.4;
    white-space: nowrap;
}

/* The green/red mark is the convention every Indian menu uses, and
   people scan for it before they read. It is a second channel only —
   the tag always spells out "Vegetarian" or "Non-vegetarian" in text,
   so nothing here depends on colour alone (WCAG 1.4.1). */
.dish-tag-veg::before,
.dish-tag-nonveg::before {
    content: '';
    width: 8px;
    height: 8px;
    flex: none;
    border: 1px solid currentColor;
    border-radius: 1px;
    box-shadow: inset 0 0 0 2px var(--warm-ivory);
}
.dish-tag-veg::before { color: var(--veg-mark); background: var(--veg-mark); }
.dish-tag-nonveg::before { color: var(--nonveg-mark); background: var(--nonveg-mark); }

.dish-tag-jain { color: var(--bronze-deep); border-color: rgba(154,117,83,0.45); }
.dish-tag-sig { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }

/* ---- Add-to-shortlist button (created by js/main.js) -------------- */
.dish-add {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    margin-top: var(--space-1);
    padding: 9px 16px 9px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: var(--bronze-deep);
    background: transparent;
    border: 1px solid rgba(154,117,83,0.4);
    border-radius: 999px;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.dish-add:hover { background: rgba(154,117,83,0.12); border-color: var(--luxury-bronze); }

.dish-add-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex: none;
}
/* A + and a ✓ drawn on top of each other, cross-fading. Only opacity
   moves between them: morphing the bars would have meant transitioning
   top, left, width and height — layout work, on a 14px decoration. */
.dish-add-icon::before,
.dish-add-icon::after {
    content: '';
    position: absolute;
    transition: opacity var(--dur-fast) var(--ease-soft);
}
.dish-add-icon::before {
    inset: 0;
    background:
        linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
}
.dish-add-icon::after {
    top: 0;
    left: 4px;
    width: 6px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    opacity: 0;
}

.dish-add[aria-pressed="true"] {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}
.dish-add[aria-pressed="true"]:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); }
.dish-add[aria-pressed="true"] .dish-add-icon::before { opacity: 0; }
.dish-add[aria-pressed="true"] .dish-add-icon::after { opacity: 1; }

.dish[data-shortlisted] { border-color: var(--primary-dark); }

/* ---- Live counters feature --------------------------------------- */
.live-feature {
    background: var(--primary-dark);
    color: var(--white);
    padding-block: var(--block-y);
}

.live-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--split-gap);
    align-items: center;
}

.live-feature h2 { font-size: clamp(28px, 3.4vw, 46px); margin-bottom: var(--space-6); }
.live-feature p { color: rgba(255,255,255,0.76); margin-bottom: var(--space-10); max-width: 48ch; }
.live-feature .label { color: var(--luxury-bronze); }

.live-feature-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-3);
    aspect-ratio: 4 / 3;
}
.live-feature-media .media { border-radius: var(--card-radius); height: 100%; }
.live-feature-media .media:first-child { grid-row: span 2; }
.live-feature-media img { width: 100%; height: 100%; }

/* ---- Dietary & seasonality --------------------------------------- */
.dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--split-gap); }

.dual-card {
    padding: var(--space-16) var(--space-14);
    border-radius: var(--card-radius);
}
.dual-card h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: var(--space-5); }
.dual-card p { color: var(--ink-soft); margin-bottom: var(--space-8); }

.dual-card-diet { background: var(--soft-beige); }
.dual-card-season { background: rgba(154,117,83,0.12); }

/* The closing CTA carries a meta line between the heading and the
   button, so the heading's own gap tightens to make room. */
.page-solid .cta-box h2 { margin-bottom: var(--space-4); }
.cta-box .cta-meta {
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-8);
}

/* ---- Shortlist tray ----------------------------------------------
   Docked at the bottom, revealed by js/main.js the moment a dish is
   added and hidden again when the last one is removed. --tray-h is
   measured and written by the script so the floats and the page tail
   clear it exactly, at any wrap. */
.shortlist-tray {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: var(--primary-dark);
    color: var(--white);
    /* Full-bleed against the bottom edge, so it has to clear the home
       indicator on a notched phone. --tray-h is measured from the
       rendered box, which means the floats and the page tail pick the
       inset up for free. */
    padding: var(--space-4) 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(25,23,20,0.22);
    animation: trayIn var(--dur) var(--ease);
}

@keyframes trayIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

.shortlist-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
}

.shortlist-lead { display: flex; align-items: baseline; gap: var(--space-4); flex: none; }
.shortlist-title { font-family: var(--serif); font-size: 18px; white-space: nowrap; }

.shortlist-clear {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.62);
    border-bottom: 1px solid transparent;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.shortlist-clear:hover { color: var(--white); border-color: rgba(255,255,255,0.5); }

.shortlist-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex: 1 1 240px;
    min-width: 0;
    max-height: 62px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.shortlist-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 5px 6px 5px 12px;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    color: rgba(255,255,255,0.9);
    line-height: 1.4;
}

.shortlist-chip button {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255,255,255,0.65);
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.shortlist-chip button:hover { background: rgba(255,255,255,0.16); color: var(--white); }
.shortlist-chip button svg { width: 11px; height: 11px; fill: currentColor; }

.shortlist-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); flex: none; margin-left: auto; }
.shortlist-actions .btn { padding: 13px 24px; font-size: 12px; }
.shortlist-actions .btn-outline { border-color: rgba(255,255,255,0.5); color: var(--white); }
.shortlist-actions .btn-outline::before { background: var(--white); }
.shortlist-actions .btn-outline:hover, .shortlist-actions .btn-outline:focus-visible { color: var(--primary-dark); }
.shortlist-actions .btn-primary { background: var(--white); color: var(--primary-dark); }
.shortlist-actions .btn-primary:hover, .shortlist-actions .btn-primary:focus-visible { color: var(--white); }

/* The tray would otherwise sit over the floats and the colophon. */
body.has-shortlist { padding-bottom: var(--tray-h, 0px); }
/* Anchor jumps and sequential focus both scroll into a viewport the tray
   is now standing in front of. --tray-h is written by js/main.js and
   removed with the tray, so this is 0px the rest of the time. */
html { scroll-padding-bottom: var(--tray-h, 0px); }
body.has-shortlist .whatsapp-float { bottom: calc(var(--tray-h, 0px) + 28px); }
body.has-shortlist .to-top { bottom: calc(var(--tray-h, 0px) + 98px); }

/* Stagger delays past the fourth child — the occasion strip runs to
   six and the category grid to eight. */
.js .reveal.active .stagger > *:nth-child(5) { transition-delay: 0.32s; }
.js .reveal.active .stagger > *:nth-child(6) { transition-delay: 0.4s; }
.js .reveal.active .stagger > *:nth-child(7) { transition-delay: 0.48s; }
.js .reveal.active .stagger > *:nth-child(8) { transition-delay: 0.56s; }

/* ============================================================
   FOOTER
   ============================================================ */
/* A band like any other: --block-y on top, and the section above gives
   up its half (see the .band join rules). No tail below — the wordmark
   is the last thing on the page and is meant to run off its edge. */
footer {
    background: var(--primary-dark);
    color: var(--white);
    padding: var(--block-y) 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
}

.footer-logo { --logo-size: 34px; margin-bottom: 24px; }
.footer-tagline { opacity: 0.6; max-width: 320px; }

.footer-col h3 { font-size: 18px; margin-bottom: 25px; color: var(--luxury-bronze); }
/* WCAG 2.2 SC 2.5.8 (Target Size, Minimum). A 14px anchor in a list box
   is 17px tall, and the inline exception does not cover it — these are
   standalone list links, not links sitting inside a sentence. The anchor
   takes over the gap the list item used to hold, so every target clears
   24px while the rows keep the pitch they already had. */
.footer-col ul li { margin-bottom: var(--space-1); opacity: 0.7; font-size: 14px; }
.footer-col ul li a {
    display: inline-flex;
    align-items: center;
    min-height: var(--space-6);
}
.footer-col ul li a:hover { color: var(--luxury-bronze); opacity: 1; }

.footer-bottom {
    padding-top: 40px;
    padding-bottom: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    opacity: 0.5;
}

/* The WhatsApp bubble and back-to-top button are fixed to the
   bottom-right corner, so at the very end of the page they land on this
   row. Reserve their column rather than let them sit on the colophon. */
.footer-bottom > :last-child { padding-right: 76px; }

/* ============================================================
   FLOATING ACTIONS
   ============================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 998;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.whatsapp-float:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.whatsapp-float svg { width: 30px; height: 30px; fill: var(--white); }

.to-top {
    position: fixed;
    bottom: 98px;
    right: 28px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary-dark);
    color: var(--white);
    display: grid;
    place-items: center;
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility 0s linear var(--dur), background-color var(--dur) var(--ease);
}
.to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility 0s linear 0s, background-color var(--dur) var(--ease);
}
.to-top:hover { background: var(--luxury-bronze); }
.to-top svg { width: 15px; height: 15px; fill: currentColor; }

/* ============================================================
   SCROLL REVEAL
   Only applied when JS is running — see the .js class set in
   the document head. Without JS every section stays visible.
   ============================================================ */
/* The fade sits on the block; the rise is an animation on its children.
   A transform on the section itself moves the very box an anchor scroll
   aims at: a link to #gallery computed its target while the section
   still sat 40px low, so once the reveal caught up the heading slid
   under the fixed header. (Hidden for a while by the 120px of top
   padding every section used to carry; the tighter rhythm exposed it.)
   An animation rather than a transition, so a child's own hover
   transitions — the CTA buttons, say — stay exactly as declared. The
   .stagger grids are left out: their children already rise on their
   own, and two rises stacked read as a lurch. */
.js .reveal {
    opacity: 0;
    transition: opacity 1s var(--ease-soft);
}

.js .reveal.active { opacity: 1; }
.js .reveal.active > :not(.stagger) { animation: reveal-rise 1s var(--ease) both; }

@keyframes reveal-rise {
    from { translate: 0 40px; }
    to   { translate: 0 0; }
}

/* Staggered children inside a revealed block.
   `translate` rather than `transform`, so a card can still use its own
   transform for the hover lift without the two rules fighting. */
.js .reveal .stagger > * {
    opacity: 0;
    translate: 0 24px;
    transition: opacity 0.8s var(--ease-soft), translate 0.8s var(--ease);
}
.js .reveal.active .stagger > * { opacity: 1; translate: 0 0; }

/* Cards inside a stagger need their hover transitions back — the
   shorthand above would otherwise replace them and the lift would
   snap instead of easing. */
.js .reveal .stagger > .step-item,
.js .reveal .stagger > .testimonial-card {
    transition: opacity 0.8s var(--ease-soft), translate 0.8s var(--ease),
                transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.js .reveal.active .stagger > *:nth-child(2) { transition-delay: 0.08s; }
.js .reveal.active .stagger > *:nth-child(3) { transition-delay: 0.16s; }
.js .reveal.active .stagger > *:nth-child(4) { transition-delay: 0.24s; }

/* ============================================================
   OCCASIONS PAGE — after the client's reference (lavoya-events.html)
   A centred two-face headline (a serif line over a bold sans line),
   a symmetric arc of seven photograph cards under it, three
   pillars, a bento of six tiles (the five occasion groups and the
   menu), the full catalogue of 41 occasions in five groups, four
   figures on a tinted band, the FAQ, a closing call and the short
   footer. Same treatment as the about page: the reference's roles
   filled with Lavoya's colours, Playfair Display for the headings,
   Inter for everything else. Scoped by `.page-occasions`,
   prefixed `ev-`; the catalogue keeps its `occ-` classes (the suite
   and the footers of the other pages point at them) and is restyled
   here.

   Motion — the headline settles in on load and the cards of the arc
   flow slowly through it (initArc), pausing under the pointer; sections rise as
   they arrive through the shared .reveal system, tile photographs ease
   out of scale under the pointer. The reduced-motion block at the end keeps every state
   legible without movement.
   ============================================================ */

.page-occasions {
    --ev-ink: var(--primary-dark);
    --ev-cream: var(--warm-ivory);
    --ev-cream-2: #EFE8DB;
    --ev-line: var(--soft-beige);
    --ev-muted: var(--muted-olive);
    --ev-body: var(--ink-soft);
    --ev-accent: var(--luxury-bronze);
    --ev-accent-deep: var(--bronze-deep);
    --ev-maxw: 1120px;
    --ev-font: var(--sans);

    background: var(--ev-cream);
    color: var(--ev-ink);
}

.page-occasions main,
.page-occasions footer { font-family: var(--ev-font); line-height: 1.55; }
/* :where() keeps these resets at element specificity, so every block's
   own margin rule below outranks them. */
:where(.page-occasions main) h1,
:where(.page-occasions main) h2,
:where(.page-occasions main) h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.01em; line-height: 1.1; text-wrap: balance; }
:where(.page-occasions main) p { margin: 0; }
:where(.page-occasions main) ul,
:where(.page-occasions main) ol { list-style: none; margin: 0; padding: 0; }
.ev-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }

.ev-shell { max-width: var(--ev-maxw); margin: 0 auto; padding: 0 24px; }

/* Pill with the arrow dot. */
.ev-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.7rem 0.7rem 1.25rem;
    border-radius: 999px;
    font-size: 0.88rem; font-weight: 500;
    background: var(--ev-ink); color: var(--white);
    border: 1px solid transparent; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft),
                box-shadow var(--dur-fast) var(--ease-soft);
}
.ev-btn:hover { background: #38322A; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(25, 23, 20, 0.2); }
.ev-btn:active { transform: translateY(0); }
.ev-btn:focus-visible { outline: 2px solid var(--ev-accent); outline-offset: 3px; }
.ev-dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--white); color: var(--ev-ink);
    display: grid; place-items: center; font-size: 0.72rem; flex: none;
    transition: transform var(--dur-fast) var(--ease-soft);
}
.ev-btn:hover .ev-dot { transform: translateX(2px); }
.ev-dot svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Header ----------------------------------------------------- */
.ev-hero { text-align: center; padding: calc(var(--nav-h) + 56px) 0 40px; }
.ev-hero h1 { font-size: clamp(2rem, 5vw, 3.3rem); }
.ev-line1 { display: block; font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.ev-line2 { display: block; font-weight: 600; letter-spacing: -0.015em; margin-top: 0.15em; }
.ev-hero-lead { color: var(--ev-muted); font-size: 0.98rem; max-width: 460px; margin: 1.15rem auto 1.7rem; }

@keyframes ev-rise {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
}
.ev-hero .ev-shell > * { animation: ev-rise 0.9s var(--ease) both; }
.ev-hero .ev-shell > :nth-child(2) { animation-delay: 0.1s; }
.ev-hero .ev-shell > :nth-child(3) { animation-delay: 0.2s; }

/* ---- The arc of cards ------------------------------------------ */
/* Seven cards in one symmetric arc, as in the client's reference: the
   centre card sits highest and upright, each card outward drops a step
   and leans a little further away from the centre, and the two at the
   ends are cut by the edge of the page. Pure CSS, so it stands without
   JS. Cards rotate about their own centre by 4° steps on a 20px gap:
   a 255px card turned 4° moves its corners 9px sideways, so tilted
   neighbours never meet. The row is wider than most screens on purpose
   and is clipped centred; on narrow screens it scrolls sideways instead
   (the script parks it on the middle card). */
/* A flex box centring a child wider than itself overflows it equally
   on both sides — which is exactly how the arc is clipped. */
.ev-arc { display: flex; justify-content: center; margin-top: 52px; padding: 0 0 34px; overflow: hidden; }
.ev-arc-row {
    display: flex; gap: 20px; flex: none;
    padding: 36px 0 44px;
    width: max-content;
}
.ev {
    position: relative; flex: 0 0 190px; width: 190px; height: 255px;
    border-radius: 16px; overflow: hidden;
    background: var(--ev-cream-2);
    box-shadow: 0 16px 34px rgba(40, 32, 20, 0.16);
    margin: 0;
    transform-origin: center center;
}
.ev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 34px 14px 12px;
    background: linear-gradient(transparent, rgba(20, 16, 10, 0.82));
    color: var(--white); font-size: 0.82rem; font-weight: 500; letter-spacing: -0.01em;
}
.ev figcaption small { display: block; font-weight: 400; opacity: 0.78; font-size: 0.72rem; }
/* The arc, mirrored about the fourth card. */
.ev:nth-child(1) { transform: translateY(34px) rotate(-12deg); }
.ev:nth-child(2) { transform: translateY(18px) rotate(-8deg); }
.ev:nth-child(3) { transform: translateY(6px) rotate(-4deg); }
.ev:nth-child(4) { transform: translateY(0) rotate(0deg); }
.ev:nth-child(5) { transform: translateY(6px) rotate(4deg); }
.ev:nth-child(6) { transform: translateY(18px) rotate(8deg); }
.ev:nth-child(7) { transform: translateY(34px) rotate(12deg); }
/* Entrance: the cards settle in from the centre outward. `translate`
   composes with the rotation above, so the arc is never disturbed. */
@keyframes ev-card-in {
    from { opacity: 0; translate: 0 28px; }
    to   { opacity: 1; translate: 0 0; }
}
.ev { animation: ev-card-in 0.9s var(--ease) both; }
.ev:nth-child(4) { animation-delay: 0.15s; }
.ev:nth-child(3), .ev:nth-child(5) { animation-delay: 0.25s; }
.ev:nth-child(2), .ev:nth-child(6) { animation-delay: 0.35s; }
.ev:nth-child(1), .ev:nth-child(7) { animation-delay: 0.45s; }

/* In motion (initArc). The script lays every card on the same curve
   from its horizontal position — the further from the centre, the
   lower and the more it leans — and moves them all along it at a walk,
   cloning the seven so the loop never breaks. Only `transform` changes
   and every card is promoted to its own layer, so nothing is laid out
   or painted again while it moves. Without JS, or with motion turned
   off, the static arc above is what stands. */
.ev-arc.is-flowing { animation: ev-fade-in 1s var(--ease-soft) 0.2s both; contain: layout paint; }
.ev-arc.is-flowing .ev-arc-row {
    display: block; width: 100%; padding: 0;
    height: calc(255px + 80px); position: relative;
}
.ev-arc.is-flowing .ev {
    position: absolute; left: 0; top: 36px;
    animation: none; opacity: 1; translate: none;
    will-change: transform;
}
@keyframes ev-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Pillars ---------------------------------------------------- */
.ev-pillars {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px;
    text-align: center; padding-top: 8px; padding-bottom: 40px;
    border-bottom: 1px solid var(--ev-line);
}
.ev-pillar-icon {
    width: 40px; height: 40px; border-radius: 12px; margin: 0 auto 1rem;
    border: 1px solid var(--ev-line); background: var(--white);
    display: grid; place-items: center;
}
.ev-pillar-icon svg { width: 20px; height: 20px; stroke: var(--ev-accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ev-pillars h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.5rem; }
.ev-pillars p { font-size: 0.82rem; color: var(--ev-muted); max-width: 30ch; margin: 0 auto; }

/* ---- Sections --------------------------------------------------- */
.ev-section { padding: 64px 0; }
.ev-sec-head { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.ev-sec-head h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); font-weight: 500; }
.ev-sec-head .em { display: block; font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
.occ-group-head h2 em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
.ev-sec-head p { color: var(--ev-muted); font-size: 0.93rem; margin-top: 1rem; }

/* ---- Tiles ------------------------------------------------------ */
.ev-tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.ev-tile {
    position: relative; border-radius: 18px; overflow: hidden; min-height: 300px;
    display: flex; align-items: flex-end;
    background: var(--ev-cream-2); color: var(--white); text-decoration: none;
    isolation: isolate;
}
.ev-tile img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ev-tile:hover img,
.ev-tile:focus-visible img { transform: scale(1.05); }
.ev-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 32%, rgba(18, 14, 9, 0.8)); }
.ev-tile:focus-visible { outline: 2px solid var(--ev-accent); outline-offset: 3px; }
.ev-tile-copy { position: relative; z-index: 2; padding: 22px; }
.ev-tile h3 { font-size: 1.5rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--white); }
.ev-tile p { font-size: 0.83rem; opacity: 0.85; max-width: 34ch; }
.ev-tag {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    background: rgba(246, 241, 232, 0.92); color: var(--ev-ink);
    font-size: 0.72rem; padding: 0.3rem 0.65rem; border-radius: 999px;
}
.ev-t7 { grid-column: span 7; }
.ev-t5 { grid-column: span 5; }

/* ---- Catalogue (the 41 occasions) ------------------------------- */
.ev-catalogue { padding-top: 64px; }
.occ-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 56px; }
.occ-jump a {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.95rem; border-radius: 999px;
    border: 1px solid var(--ev-line); background: var(--white);
    font-size: 0.82rem; font-weight: 500; color: var(--ev-ink); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.occ-jump a:hover,
.occ-jump a:focus-visible { background: var(--ev-ink); color: var(--white); border-color: var(--ev-ink); }
.occ-jump-count { color: var(--ev-accent); font-weight: 600; }
.occ-jump a:hover .occ-jump-count,
.occ-jump a:focus-visible .occ-jump-count { color: inherit; }

.occ-group { scroll-margin-top: calc(var(--nav-h) + 16px); }
.occ-group + .occ-group { margin-top: 72px; }
.occ-group-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; margin-bottom: 28px; }
.occ-group-head .label { font-family: var(--ev-font); font-size: 0.72rem; letter-spacing: 0.16em; margin-bottom: 0.7rem; }
.occ-group-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500; }
.occ-group-head p { color: var(--ev-muted); font-size: 0.9rem; max-width: 46ch; }

.occ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.occ-card {
    position: relative; display: block; height: 100%;
    padding: 20px 20px 22px;
    border: 1px solid var(--ev-line); border-radius: 16px;
    background: var(--white); color: var(--ev-ink); text-decoration: none;
    transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.occ-card:hover,
.occ-card:focus-visible { transform: translateY(-3px); border-color: #D9C7B0; box-shadow: 0 16px 34px rgba(40, 32, 20, 0.08); }
.occ-card:focus-visible { outline: 2px solid var(--ev-accent); outline-offset: 3px; }
.occ-icon {
    width: 36px; height: 36px; border-radius: 10px; margin-bottom: 1.1rem;
    border: 1px solid var(--ev-line); background: var(--ev-cream);
    display: grid; place-items: center;
}
.occ-icon svg { width: 18px; height: 18px; stroke: var(--ev-accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.occ-name { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.35rem; padding-right: 32px; }
.occ-desc { display: block; font-size: 0.83rem; color: var(--ev-muted); }
.occ-go {
    position: absolute; top: 18px; right: 18px;
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ev-cream); color: var(--ev-ink);
    transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.occ-go svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.occ-card:hover .occ-go,
.occ-card:focus-visible .occ-go { background: var(--ev-ink); color: var(--white); transform: translate(2px, -2px); }

/* ---- Figures ---------------------------------------------------- */
.ev-results { background: var(--ev-cream-2); }
.ev-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; }
.ev-fig { background: var(--ev-cream); border: 1px solid var(--ev-line); border-radius: 16px; padding: 24px; }
.ev-fig b {
    display: block; font-family: var(--serif); font-weight: 500;
    font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height: 1; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.ev-fig span { display: block; margin-top: 0.6rem; font-size: 0.84rem; color: var(--ev-muted); }
.ev-results-link { text-align: center; margin-top: 28px; }
.ev-results .text-link { font-size: 0.9rem; }

/* ---- FAQ -------------------------------------------------------- */
.ev-faq .faq-section { max-width: 760px; }
.ev-faq .faq-item summary { font-family: var(--ev-font); font-size: 1rem; font-weight: 500; }
.ev-faq .faq-item p { font-size: 0.92rem; color: var(--ev-body); }

/* ---- Closing call ----------------------------------------------- */
.ev-cta { text-align: center; }
.ev-cta h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 500; }
.ev-cta p { color: var(--ev-muted); margin: 1rem auto 1.8rem; max-width: 440px; font-size: 0.94rem; }

/* ---- Footer (site-wide) ------------------------------------------
   The one footer every page carries: the logo and a line, then Events,
   Company and Follow, then the colophon with an italic credit. */
footer { background: var(--primary-dark); color: rgba(246, 241, 232, 0.82); padding-top: 52px; font-family: var(--sans); line-height: 1.55; }
.ev-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 44px; }
.ev-foot-grid .footer-logo { margin-bottom: 0; }
.ev-foot-brand p { font-size: 0.86rem; margin: 1rem 0 0; max-width: 26ch; opacity: 0.8; }
.ev-foot-col h4 { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; letter-spacing: 0; color: var(--ev-accent); margin: 0 0 0.9rem; }
.ev-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.86rem; }
.ev-foot-col a { color: inherit; text-decoration: none; display: inline-block; padding: 0.15rem 0; transition: color var(--dur-fast) var(--ease-soft); }
.ev-foot-col a:hover,
.ev-foot-col a:focus-visible { color: var(--ev-accent); }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.14); padding-bottom: var(--space-10); }
/* Nothing sits under the colophon any more, so at phone widths the two
   lines keep clear of the column the floating buttons occupy. */
@media (max-width: 600px) {
    .footer-bottom > p { max-width: calc(100% - 96px); }
}
.ev-credit em { font-style: italic; }
.ev-credit a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Reveal timing for this page's grids ------------------------ */
.js .reveal.active .ev-figures > :nth-child(2),
.js .reveal.active .ev-tiles > :nth-child(2) { transition-delay: 0.08s; }
.js .reveal.active .ev-figures > :nth-child(3),
.js .reveal.active .ev-tiles > :nth-child(3) { transition-delay: 0.16s; }
.js .reveal.active .ev-figures > :nth-child(4),
.js .reveal.active .ev-tiles > :nth-child(4) { transition-delay: 0.24s; }
.js .reveal.active .ev-tiles > :nth-child(5) { transition-delay: 0.32s; }
.js .reveal.active .ev-tiles > :nth-child(6) { transition-delay: 0.4s; }
.js .reveal.active .occ-grid > :nth-child(n+5) { transition-delay: 0.3s; }
/* Cards keep their own hover lift inside a stagger. */
.js .reveal .stagger > .occ-card,
.js .reveal .stagger > li > .occ-card { transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft); }

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 900px) {
    .ev-pillars { grid-template-columns: 1fr; gap: 26px; padding-bottom: 32px; }
    .ev-t7, .ev-t5 { grid-column: span 12; }
    .occ-group-head { grid-template-columns: 1fr; gap: 12px; }
    .occ-grid { grid-template-columns: repeat(2, 1fr); }
    .ev-figures { grid-template-columns: repeat(2, 1fr); }
    .ev-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    /* Narrower than the arc: let it scroll sideways, scrollbar hidden. */
    .ev-arc { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .ev-arc::-webkit-scrollbar { display: none; }
    .ev-arc-row { padding-inline: 24px; }
    .ev-arc.is-flowing { overflow: hidden; }
}
@media (max-width: 560px) {
    .ev-hero { padding-top: calc(var(--nav-h) + 32px); }
    .ev { flex-basis: 150px; width: 150px; height: 205px; }
    .ev-arc-row { gap: 16px; }
    .ev-arc.is-flowing .ev-arc-row { height: calc(205px + 80px); }
    .ev-section { padding: 56px 0; }
    .occ-grid { grid-template-columns: 1fr; }
    .ev-figures { grid-template-columns: 1fr; }
    .ev-foot-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ev-hero .ev-shell > * { animation: none; opacity: 1; translate: none; }
    /* The arc stands as it is; only the entrance is dropped. */
    .ev { animation: none; opacity: 1; translate: none; }
    .ev-btn:hover, .occ-card:hover, .occ-card:focus-visible { transform: none; }
    .ev-tile:hover img, .ev-tile:focus-visible img { transform: none; }
}

/* ---- Print ------------------------------------------------------ */
@media print {
    .ev-arc { overflow: visible; }
    .ev-arc-row { flex-wrap: wrap; width: auto; justify-content: center; }
    .ev { animation: none !important; opacity: 1 !important; translate: none !important; transform: none !important; box-shadow: none; }
    .ev-hero .ev-shell > * { animation: none !important; opacity: 1 !important; }
    .ev-tile { color: #000; }
    .ev-tile::after { content: none; }
    .ev-tile img { display: none; }
    .ev-tile h3 { color: #000; }
}


/* ---- Footer: occasion columns and the design credit ------------- */
.footer-occasions {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: var(--space-12);
    margin-bottom: var(--space-16);
}
.footer-occasions > h3 { font-size: 18px; margin-bottom: var(--space-8); color: var(--luxury-bronze); }

.footer-occasions-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-8);
}

.footer-occasions h4 {
    font-size: 15px;
    margin-bottom: var(--space-4);
    color: rgba(255,255,255,0.92);
}

.footer-credit a { display: inline-flex; align-items: center; gap: var(--space-2); }
.footer-credit img { width: 18px; height: auto; }
.footer-credit a:hover { color: var(--luxury-bronze); }

/* ---- Footer wordmark ---------------------------------------------
   The brand name set large across the foot of the page, after the
   Writesonic footer the client sent as the reference on 2026-09-07 —
   then, the same day, brought down from doorway scale to a size that
   stays whole and legible: nothing cut off by the page edge, nothing
   fading to nothing. Decorative: the colophon above carries the words
   that matter, and the mark is hidden from assistive tech. Sized in vw
   so it scales with the page and capped well inside the column; the
   letter-spacing's trailing gap is paid back as text-indent so the
   word stays optically centred. overflow: hidden only guards against
   widening a narrow phone — the line box is taller than the glyphs. */
.footer-mark {
    margin-top: var(--space-8);
    padding-bottom: var(--space-10);
    overflow: hidden;
    font-family: var(--serif);
    font-size: clamp(40px, 7.5vw, 108px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: transparent;
    background: linear-gradient(180deg, rgba(154,117,83,0.95) 0%, rgba(154,117,83,0.6) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
    pointer-events: none;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js .reveal,
    .js .reveal > *,
    .js .reveal .stagger > *,
    .js .hero-content > *,
    .mobile-menu a { opacity: 1; transform: none; translate: none; animation: none; }

    .js .media img,
    .js .gallery-item img { opacity: 1; }
    .js .media::after { content: none; }
    .hero-bg { animation: none; transform: scale(1.05); }
    .live-scroll-container { scroll-snap-type: none; }
    .reveal.active .step-item::before { transform: scaleX(1); }
    .step-item:hover, .step-item:focus-within { transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    /* One gutter value drives the nav and every section, so the two
       never drift apart at this breakpoint. */
    :root {
        --nav-h: 84px;
        --nav-h-scrolled: 64px;
        --gutter: 30px;
        --section-y: var(--space-20);
        --block-y: var(--space-16);
    }

    .nav-links, .nav-cta { display: none; }
    .mobile-toggle { display: flex; }

    .intro-grid, .cuisine-display, .featured-wedding, .enquiry-container {
        grid-template-columns: 1fr;
    }
    /* One step down the scale for the two-column gaps, so the columns
       stay related to each other as the page narrows. */
    :root { --split-gap: var(--space-14); --header-gap: var(--space-14); }

    .intro-images { height: 480px; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .service-card { height: 480px; }
    .steps-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
    .testimonial-card { padding: 34px 26px 28px; }
    .testimonial-text { font-size: 18px; margin-bottom: var(--space-6); }
    .quote-mark { font-size: 92px; right: 16px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
    .featured-info { padding: var(--space-20) var(--space-10); }
    .lightbox { padding: 24px; }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
    .lightbox-close { top: 14px; right: 14px; }

    /* ---- menu page ---- */
    .menu-hero-grid, .menu-doc-grid, .live-feature-grid, .dual-grid { grid-template-columns: 1fr; }
    .menu-hero-media { aspect-ratio: 16 / 10; }
    .occasion-strip, .category-grid { grid-template-columns: 1fr 1fr; }
    .explorer-body { grid-template-columns: 1fr; gap: var(--space-8); }
    /* The rail turns into a horizontal strip. A 250px column would eat
       a third of the width here, and sixteen stacked chapters is a lot
       of scrolling to get past before the first dish. */
    .explorer-rail {
        position: static;
        display: flex;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }
    .rail-item {
        flex: none;
        width: auto;
        border-bottom: 0;
        border-right: 1px solid rgba(25,23,20,0.1);
        scroll-snap-align: start;
        white-space: nowrap;
    }
    .rail-item:last-child { border-right: 0; }

    /* ---- occasions & about pages ---- */
    .occ-group-head { grid-template-columns: 1fr; }
    .occ-group-head { align-items: start; }
    .occ-grid { grid-template-columns: 1fr 1fr; }
    /* The empty top-left cell of the desktop bento has no room here:
       the two stat tiles share the first row and the photo runs under
       them full width. */
    .footer-occasions-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    :root {
        --gutter: 24px;
        --section-y: var(--space-16);
        --block-y: var(--space-12);
        --split-gap: var(--space-10);
        --header-gap: var(--space-12);
    }

    /* Like the reference, the phone hero stops before the viewport ends
       so the next section peeks in. Shorter copy and one primary action
       leave more of the video visible. */
    .hero {
        min-height: min(78dvh, 660px);
        padding-top: calc(var(--nav-h) + var(--space-6));
        padding-bottom: var(--space-20);
    }

    /* Copy spans almost the full phone width, so use an even vertical
       scrim and reserve the darkest stop for the lower text area. */
    .hero-media::after {
        background: linear-gradient(rgba(0,0,0,0.22) 0%,
                                    rgba(0,0,0,0.30) 42%,
                                    rgba(0,0,0,0.58) 100%);
    }

    /* Text is over the video again, so the pause control moves off the
       bottom-right corner the CTAs now occupy. */
    .hero-motion-toggle {
        right: var(--space-4);
        bottom: var(--space-4);
    }
    .hero-eyebrow {
        max-width: 100%;
        margin-bottom: var(--space-6);
        font-size: 13px;
    }
    /* Playfair sets wider than Inter at the same size, so the phone step
       comes down as well as loosening — the two lines have to stay
       unbroken on a 390px screen, which tests/e2e.mjs asserts. */
    .hero h1 {
        max-width: none;
        font-size: clamp(27px, 7.9vw, 35px);
        line-height: 1.08;
        letter-spacing: -0.015em;
    }
    .hero p { font-size: 15px; line-height: 1.45; margin-bottom: var(--space-7); }
    .hero-btns .btn { flex: 1 1 100%; text-align: center; }
    .hero-btns .btn-outline { display: none; }
    .services-grid, .steps-grid, .stats-grid, .testimonial-grid { grid-template-columns: 1fr; }
    /* Matching heights only earn their keep when cards sit side by side.
       Stacked one per column, a stretched card is just a tall empty box
       with nothing to line up against. */
    .steps-grid { align-items: start; }
    .stats-grid { gap: var(--space-10); }
    .testimonial-grid { gap: var(--space-5); }
    .featured-info { padding: var(--space-12) var(--space-6); }
    .featured-images { padding: 24px; grid-template-rows: 200px 200px; }
    .cuisine-controls { padding-bottom: var(--space-6); }
    .cuisine-nav { gap: var(--space-2); }
    .cuisine-btn { padding: 13px 20px; font-size: 12px; }
    .cuisine-img { min-height: 0; height: 340px; }
    .cuisine-arrow { width: 44px; height: 44px; }
    .cuisine-arrow-prev { left: var(--space-2); }
    .cuisine-arrow-next { right: var(--space-2); }
    .cuisine-points { margin-top: var(--space-7); gap: var(--space-5); }
    .gallery-grid { columns: 2 150px; column-gap: 14px; }
    .gallery-item { margin-bottom: 14px; }
    .gallery-filters { gap: 10px; }
    .filter-btn { padding: 13px 20px; font-size: 12px; }
    .live-carousel { --live-media-h: 220px; }
    /* One card fills the track with the next one peeking in, so it is
       obvious there is more to swipe to. */
    .live-item { width: min(320px, 82vw); }
    .live-scroll-container { gap: var(--space-6); }
    /* Inside the track at this width — the page gutter is too narrow to
       hang a 46px control off the edge of it. */
    .carousel-btn { width: 46px; height: 46px; }
    .carousel-btn-prev { left: var(--space-1); }
    .carousel-btn-next { right: var(--space-1); }
    .intro-images { height: 420px; }
    .img-small { bottom: 24px; height: 220px; width: 55%; border-width: 8px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .faq-item summary { font-size: 20px; }
    footer { padding: var(--block-y) 0 0; }
    .footer-grid { margin-bottom: var(--space-12); }
    .whatsapp-float { bottom: 20px; right: 20px; width: 52px; height: 52px; }
    .to-top { bottom: 82px; right: 20px; width: 42px; height: 42px; }
    .lightbox-img { max-height: calc(100vh - 150px); }

    /* ---- menu page ---- */
    .menu-hero { padding-block: calc(var(--nav-h) + var(--space-10)) var(--block-y); }
    .occasion-strip, .category-grid { grid-template-columns: 1fr; }
    .occasion-card { padding: var(--space-8); }
    .menu-stats { gap: var(--space-4); }
    .explorer-controls { gap: var(--space-6); margin-bottom: var(--space-10); }
    .explorer-search { max-width: none; }
    .dish-grid { grid-template-columns: 1fr; }
    .chapter + .chapter { margin-top: var(--space-12); }
    .dual-card { padding: var(--space-12) var(--space-8); }
    .live-feature-media { aspect-ratio: 3 / 2; }
    /* Chips need a second line of their own on a phone; the count and
       the two actions are what has to stay reachable. */
    .shortlist-chips { display: none; }
    .shortlist-inner { gap: var(--space-3); }
    .shortlist-actions { margin-left: 0; flex: 1 1 auto; }
    .shortlist-actions .btn { flex: 1 1 auto; text-align: center; }

    /* ---- occasions & about pages ---- */
    .occ-grid { grid-template-columns: 1fr; }
    .occ-card { padding: var(--space-6); }
    .footer-occasions-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
    .footer-grid { grid-template-columns: 1fr; }
    /* Colophon stacks here, so the floats need clearing below it
       rather than beside it. The wordmark under it already holds the
       page open by ~110px; this tops that up past the back-to-top. */
    .footer-bottom { padding-bottom: var(--space-12); }
    .footer-bottom > :last-child { padding-right: 0; }
    .logo { --logo-size: 24px; }
    .footer-logo { --logo-size: 28px; }
    .live-item { width: min(260px, 84vw); }
    .intro-images { height: 340px; }
    .img-small { height: 170px; bottom: 16px; }
    .step-label { font-size: 21px; }
    .testimonial-card { padding: 30px 22px 24px; }
    .menu-stats { grid-template-columns: 1fr 1fr; row-gap: var(--space-6); }
    .menu-doc-actions .btn { width: 100%; text-align: center; }

    /* ---- occasions & about pages ---- */
    .occ-jump { justify-content: flex-start; }
    .footer-occasions-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PRINT
   The menu page's "Save as PDF" is not a fake download — it opens
   the browser's own print dialogue, and this is what comes out.
   The explorer's screen state (one chapter, filtered) is deliberately
   overridden: on paper the point is the complete catalogue.
   ============================================================ */
@media print {
    :root { --section-y: 24px; --block-y: 18px; --gutter: 0px; }

    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
    }

    html { scroll-behavior: auto; }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
        padding-bottom: 0 !important;
    }

    /* Chrome and navigation have no meaning on paper. */
    .site-header,
    .mobile-menu,
    .skip-link,
    .to-top,
    .whatsapp-float,
    .shortlist-tray,
    .breadcrumbs,
    .scroll-progress,
    .menu-doc-actions,
    .footer-mark,
    .explorer-controls,
    .explorer-rail,
    .explorer-results-head,
    .explorer-empty,
    .explorer-hint,
    .dish-add,
    .hero-btns,
    .menu-hero-media,
    .live-feature-media,
    .category-link,
    .occasion-arrow,
    .cta-box,
    footer .footer-grid,
    .lightbox { display: none !important; }

    /* Print-only masthead, so a printed page still says who made it
       and how to reach them. */
    .print-only { display: block !important; }
    .print-masthead {
        text-align: center;
        border-bottom: 1pt solid #000;
        padding-bottom: 10pt;
        margin-bottom: 18pt;
    }
    .print-masthead img { height: 46pt; width: auto; margin: 0 auto 8pt; }
    .print-masthead p { font-size: 9pt; letter-spacing: 0.04em; margin: 2pt 0; }

    /* The reveal system leaves offscreen sections at opacity 0 — on
       paper nothing has ever been scrolled into view. */
    .js .reveal,
    .js .reveal > *,
    .js .reveal .stagger > * { opacity: 1 !important; transform: none !important; translate: none !important; animation: none !important; }

    /* The whole catalogue prints, whatever the explorer was showing. */
    .chapter.is-hidden { display: block !important; }
    .dish.is-hidden { display: flex !important; }

    .menu-hero { padding-block: 0 18pt; }
    .menu-hero h1 { font-size: 26pt; }
    .menu-hero-lead { font-size: 10pt; max-width: none; }
    .menu-hero-grid, .menu-doc-grid, .explorer-body, .dual-grid, .live-feature-grid {
        display: block;
    }

    .explorer-section, .menu-doc, .live-feature {
        background: #fff !important;
        color: #000 !important;
        padding-block: 12pt;
    }
    .live-feature p, .live-feature .label { color: #000 !important; }

    .menu-stats { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
    .menu-stat-num, .label, .chapter-count, .category-num { color: #000 !important; }

    .chapter { break-inside: auto; }
    .chapter + .chapter { margin-top: 16pt; }
    .chapter-head { break-after: avoid; break-inside: avoid; margin-bottom: 8pt; padding-bottom: 4pt; }
    .chapter-title { font-size: 15pt; }
    .chapter-blurb { font-size: 9pt; }

    .dish-grid { grid-template-columns: repeat(3, 1fr); gap: 6pt; }
    .dish {
        break-inside: avoid;
        background: #fff;
        border: 0.5pt solid #999;
        padding: 6pt 8pt;
        gap: 3pt;
    }
    .dish-name { font-size: 10.5pt; }
    .dish-desc { font-size: 8pt; }
    .dish-tag { font-size: 7pt; padding: 1pt 5pt; border-color: #999; }
    .dish-tag-sig { background: #fff !important; color: #000 !important; border-color: #000; }
    /* The veg/non-veg mark has to survive a printer that drops
       backgrounds, so it falls back to an outlined vs filled square. */
    .dish-tag-veg::before { background: #fff; box-shadow: none; }
    .dish-tag-nonveg::before { background: #000; box-shadow: none; }

    .occasion-strip, .category-grid { grid-template-columns: repeat(3, 1fr); gap: 8pt; }
    .occasion-card, .category-card { padding: 8pt; break-inside: avoid; border: 0.5pt solid #999; }
    .dual-card { background: #fff !important; border: 0.5pt solid #999; padding: 10pt; margin-bottom: 8pt; }

    .faq-item summary { font-size: 11pt; }
    .faq-item .faq-answer { display: block !important; }

    footer { padding: 12pt 0 0; background: #fff !important; color: #000 !important; }
    .footer-bottom { border-top: 0.5pt solid #999; padding-top: 6pt; font-size: 8pt; }

    a { color: #000; text-decoration: none; }

    @page { margin: 14mm 12mm; }
}
/* ============================================================
   ABOUT PAGE — after the client's reference (lavoya-about.html)
   One white card on a cloud-grey ground: a centred header with a dot
   field fading in from either edge, the photograph under it, a forest
   band of the occasions the kitchen serves, four value cards, a text
   and photograph split, a ruled strip of four figures, the story as
   three chapters with photographs, and two rows of testimonials that
   drift in opposite directions. The footer is the site's own, recoloured
   so it reads as the foot of the card.

   Everything is scoped by `.page-about` and prefixed `ab-`, so the
   other three pages keep their own palette, type and rhythm. The
   reference's palette is carried as tokens on the
   body — swap the eight colours below and the whole page follows; type
   is the site's own Playfair Display and Inter.

   Motion — the header settles in on load (eyebrow, headline, lead,
   buttons, then the photograph), every section below rises once as it
   arrives (the shared .reveal / .stagger system in js/main.js), the
   figures count up, cards lift under the pointer, and the testimonial
   rows loop until hovered or focused. The reduced-motion block at the
   end keeps every state legible without movement.
   ============================================================ */

.page-about {
    /* The reference's roles, filled with Lavoya's own colours: its
       forest band and dark button become the site's near-black, its
       lime accent the bronze, its cloud ground the warm ivory. */
    --ab-ink: var(--primary-dark);
    --ab-forest: var(--primary-dark);
    --ab-forest-deep: #000000;
    --ab-lime: var(--luxury-bronze);
    --ab-lime-dark: var(--bronze-deep);
    --ab-lime-soft: var(--warm-ivory);
    --ab-lime-line: #D9C7B0;
    --ab-paper: #FFFFFF;
    --ab-cloud: var(--warm-ivory);
    --ab-line: var(--soft-beige);
    --ab-muted: var(--muted-olive);
    --ab-body: var(--ink-soft);
    --ab-on-lime: #FFFFFF;
    --ab-star: var(--luxury-bronze);
    --ab-radius: 14px;
    --ab-maxw: 1180px;
    --ab-font: var(--sans);

    background: var(--ab-cloud);
    color: var(--ab-ink);
}

/* Type — the shared header keeps Inter so the nav is identical on every
   page; the card and the footer are set in the reference's face. */
.page-about main,
.page-about footer { font-family: var(--ab-font); line-height: 1.55; }
/* :where() keeps these resets at element specificity, so every block's
   own margin rule below outranks them. */
:where(.page-about main) h1,
:where(.page-about main) h2,
:where(.page-about main) h3 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.12;
    margin: 0;
}
.page-about main h1,
.page-about main h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; }
.page-about main h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
.page-about main h2 { font-size: clamp(1.8rem, 3.7vw, 2.65rem); }
.page-about main h3 { font-size: 1.25rem; font-weight: 500; }
:where(.page-about main) p { margin: 0; }
:where(.page-about main) ul,
:where(.page-about main) ol { list-style: none; margin: 0; padding: 0; }

.ab-eyebrow { font-size: 0.78rem; color: var(--ab-muted); letter-spacing: 0.02em; }

/* Pills. Their own class, not `.btn`, so the header's square button and
   its hover fill stay exactly as they are on every other page. */
.ab-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.72rem 1.35rem;
    border-radius: 999px;
    font-size: 0.9rem; font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft),
                color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.ab-btn:hover { transform: translateY(-1px); }
.ab-btn:active { transform: translateY(0); }
.ab-btn:focus-visible { outline: 2px solid var(--ab-forest); outline-offset: 3px; }
.ab-btn-lime { background: var(--ab-lime); color: var(--ab-on-lime); }
.ab-btn-lime:hover { background: var(--ab-lime-dark); box-shadow: 0 8px 20px rgba(154, 117, 83, 0.28); }
.ab-btn-dark { background: var(--ab-forest); color: var(--ab-paper); }
.ab-btn-dark:hover { background: var(--ab-forest-deep); box-shadow: 0 8px 20px rgba(25, 23, 20, 0.22); }

/* ---- The card --------------------------------------------------- */
/* Full bleed: the white ground runs edge to edge under the header
   rather than floating as an inset card (client ask, 2026-09-15). */
.ab-page {
    margin: var(--nav-h) 0 0;
    background: var(--ab-paper);
    overflow: hidden;
}
.ab-shell { max-width: var(--ab-maxw); margin: 0 auto; padding: 0 24px; }

/* ---- Header ----------------------------------------------------- */
.ab-hero { position: relative; text-align: center; padding: 74px 0 56px; overflow: hidden; }
.ab-hero .ab-shell { position: relative; z-index: 2; max-width: 900px; }
.ab-hero h1 { margin: 0.85rem 0 1.1rem; }
.ab-lede { color: var(--ab-muted); font-size: 1rem; max-width: 540px; margin: 0 auto; }
.ab-hero-actions { display: flex; gap: 0.7rem; justify-content: center; margin-top: 1.9rem; flex-wrap: wrap; }

/* Entrance: each line of the header settles in, then the photograph. */
@keyframes ab-rise {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
}
@keyframes ab-photo-in {
    from { opacity: 0; scale: 1.03; }
    to   { opacity: 1; scale: 1; }
}
.ab-hero .ab-shell > * { animation: ab-rise 0.9s var(--ease) both; }
.ab-hero .ab-shell > :nth-child(2) { animation-delay: 0.08s; }
.ab-hero .ab-shell > :nth-child(3) { animation-delay: 0.16s; }
.ab-hero .ab-shell > :nth-child(4) { animation-delay: 0.24s; }

.ab-hero-media { padding: 0 24px; }
.ab-hero-frame {
    max-width: var(--ab-maxw); margin: 0 auto;
    height: clamp(240px, 42vw, 460px);
    border-radius: 16px;
    background: var(--ab-cloud);
    animation: ab-photo-in 1.1s var(--ease) 0.3s both;
}
.ab-hero-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Occasions band --------------------------------------------- */
.ab-trusted { background: var(--ab-forest); color: var(--warm-ivory); margin-top: 34px; padding: 34px 0 38px; text-align: center; }
.page-about main .ab-trusted h2 { font-size: 1.5rem; font-weight: 400; margin-bottom: 1.5rem; color: var(--warm-ivory); }
.ab-logos {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(1.5rem, 5vw, 3.4rem);
    font-size: 1rem; font-weight: 500; color: rgba(246, 241, 232, 0.72); letter-spacing: -0.01em;
}
.ab-logos a {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0;
    color: inherit; text-decoration: none; opacity: 0.92;
    transition: color var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
}
.ab-logos a:hover,
.ab-logos a:focus-visible { color: var(--ab-lime); opacity: 1; }
.ab-logos a:focus-visible { outline: 2px solid var(--ab-lime); outline-offset: 4px; border-radius: 4px; }
.ab-logos svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* ---- Sections --------------------------------------------------- */
.ab-section { padding: 76px 0; }
.ab-split-section { padding-top: 0; }
.ab-sec-head { text-align: center; margin-bottom: 44px; }
.ab-sec-head h2 { margin-top: 0.5rem; }
.ab-sec-head > p:not(.ab-eyebrow) { color: var(--ab-muted); max-width: 540px; margin: 0.9rem auto 0; font-size: 0.95rem; }

/* ---- Values ----------------------------------------------------- */
.ab-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ab-value {
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    padding: 26px;
    background: var(--ab-paper);
    transition: background var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft),
                transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.ab-value:first-child { background: linear-gradient(135deg, #fff 42%, var(--ab-lime-soft)); }
.ab-value:hover {
    border-color: var(--ab-lime-line);
    background: linear-gradient(135deg, #fff 42%, var(--ab-lime-soft));
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(24, 40, 20, 0.07);
}
.ab-v-icon {
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--ab-line); background: var(--ab-paper);
    display: grid; place-items: center;
    margin-bottom: 2.6rem;
    transition: border-color var(--dur) var(--ease-soft);
}
.ab-value:hover .ab-v-icon { border-color: var(--ab-lime-line); }
.ab-v-icon svg { width: 17px; height: 17px; stroke: var(--ab-forest); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-value h3 { margin-bottom: 0.5rem; }
.ab-value p { color: var(--ab-muted); font-size: 0.9rem; }

/* ---- How we work ------------------------------------------------ */
.ab-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ab-split h2 { margin: 0.6rem 0 1rem; }
.ab-split-text > p:not(.ab-eyebrow) { color: var(--ab-muted); font-size: 0.95rem; max-width: 44ch; }
.ab-split .ab-btn { margin-top: 1.7rem; }
.ab-photo { border-radius: 14px; height: 330px; background: var(--ab-cloud); }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Numbers ---------------------------------------------------- */
.ab-stats { border-top: 1px solid var(--ab-line); border-bottom: 1px solid var(--ab-line); }
.ab-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 44px; padding-bottom: 44px; }
.ab-stat b {
    display: block; font-family: var(--serif);
    font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 500;
    letter-spacing: -0.03em; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ab-stat span { color: var(--ab-muted); font-size: 0.86rem; display: block; margin-top: 0.55rem; }

/* ---- Story ------------------------------------------------------ */
.ab-story-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 42px; }
.ab-story-head h2 { margin-top: 0.5rem; }
.ab-story-head > div:last-child > p { color: var(--ab-muted); font-size: 0.92rem; max-width: 40ch; }
.ab-story-head .ab-btn { margin-top: 1rem; }
.ab-chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ab-chapter-photo { border-radius: 12px; height: 230px; background: var(--ab-cloud); }
.ab-chapter-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ab-chapter:hover .ab-chapter-photo img { transform: scale(1.04); }
.ab-chapter h3 { font-size: 1.25rem; margin: 0.85rem 0 0.3rem; }
.ab-chapter p { font-size: 0.88rem; color: var(--ab-muted); }

/* ---- Testimonials ----------------------------------------------- */
.ab-testimonials { background: var(--ab-cloud); padding-bottom: 86px; }

/* The cards ship once in the markup and read as a single row. The
   script clones them until each track is wide enough to loop and marks
   the row `is-looping`, which is what switches the animation on — so a
   visitor without JS, and a reduced-motion visitor, get a static row
   that wraps. */
.ab-marquee { overflow: hidden; }
.ab-marquee + .ab-marquee { margin-top: 20px; }
.ab-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 0 24px; }
.ab-marquee.is-looping {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ab-marquee.is-looping .ab-track {
    flex-wrap: nowrap; justify-content: flex-start;
    width: max-content; padding: 0;
    animation: ab-slide 46s linear infinite;
    will-change: transform;
}
.ab-marquee-reverse.is-looping .ab-track { animation-direction: reverse; animation-duration: 54s; }
.ab-marquee.is-looping:hover .ab-track,
.ab-marquee.is-looping:focus-within .ab-track { animation-play-state: paused; }
@keyframes ab-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ab-quote {
    width: 330px; flex: 0 0 330px;
    background: var(--ab-paper);
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    padding: 22px;
    transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.ab-quote:hover { border-color: var(--ab-lime-line); box-shadow: 0 12px 30px rgba(24, 40, 20, 0.06); }
.ab-quote-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.9rem; }
.ab-stars { color: var(--ab-star); font-size: 0.82rem; letter-spacing: 0.08em; }
.ab-src { font-size: 0.78rem; color: var(--ab-muted); }
.ab-quote > p { font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--ab-body); }
.ab-who { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.2rem; }
.ab-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--ab-lime-soft); color: var(--ab-forest);
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
}
.ab-who b { font-family: var(--serif); font-size: 1rem; font-weight: 500; display: block; }
.ab-who span { font-size: 0.75rem; color: var(--ab-muted); }

/* ---- Footer ------------------------------------------------------
   The reference's footer: the logo and one line, then three short
   columns (Pages, Events, Social). The colophon and wordmark below are
   the site's own. */
.page-about footer { background: var(--ab-forest); color: rgba(246, 241, 232, 0.82); }
.ab-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 52px; }
.ab-foot-grid .footer-logo { margin-bottom: 0; }
.page-about .ab-foot-grid h3 {
    font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em;
    color: var(--white); font-size: 1.5rem; line-height: 1.2; max-width: 16ch; margin-top: 1.2rem;
}
.ab-foot-col h4 { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; letter-spacing: 0; color: var(--luxury-bronze); margin: 0 0 1rem; }
.ab-foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; font-size: 0.9rem; }
.ab-foot-col a { color: inherit; text-decoration: none; display: inline-block; padding: 0.15rem 0; transition: color var(--dur-fast) var(--ease-soft); }
.ab-foot-col a:hover,
.ab-foot-col a:focus-visible { color: var(--luxury-bronze); }
.page-about .footer-bottom { border-top-color: rgba(255, 255, 255, 0.14); padding-bottom: var(--space-10); }
/* The credit is a line of italic type here, no logo, and the page ends
   on the colophon — no wordmark below it. */
.ab-credit em { font-style: italic; }
.ab-credit a { text-decoration: underline; text-underline-offset: 3px; }
/* The wordmark keeps the site's size and stays whole (the client
   rejected a page-edge-clipped version); only its face and finish
   follow the reference — an outline, not a fill. */
.page-about .footer-mark {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.045em;
    text-indent: 0;
    text-transform: none;
    background: none;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
}

/* ---- Reveal timing for this page's grids ------------------------ */
.js .reveal.active .ab-values > :nth-child(2),
.js .reveal.active .ab-stats-grid > :nth-child(2) { transition-delay: 0.08s; }
.js .reveal.active .ab-values > :nth-child(3),
.js .reveal.active .ab-stats-grid > :nth-child(3) { transition-delay: 0.16s; }
.js .reveal.active .ab-values > :nth-child(4),
.js .reveal.active .ab-stats-grid > :nth-child(4) { transition-delay: 0.24s; }
/* Cards inside a stagger keep their hover lift (see the same note on
   .step-item above). */
.js .reveal .stagger > .ab-value {
    transition: opacity 0.8s var(--ease-soft), translate 0.8s var(--ease),
                background var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft),
                transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 1100px) {
    .ab-values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .ab-split { grid-template-columns: 1fr; gap: 32px; }
    .ab-split-media { order: -1; }
    .ab-chapters { grid-template-columns: 1fr; }
    .ab-chapter-photo { height: clamp(220px, 46vw, 340px); }
    .ab-story-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .ab-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ab-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .ab-section { padding: 56px 0; }
    .ab-hero { padding: 52px 0 40px; }
    .ab-values,
    .ab-stats-grid { grid-template-columns: 1fr; }
    .ab-stats-grid { gap: 28px; }
    .ab-quote { width: 270px; flex-basis: 270px; }
    .ab-photo { height: clamp(220px, 60vw, 330px); }
    .ab-foot-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ab-hero .ab-shell > *,
    .ab-hero-frame { animation: none; opacity: 1; translate: none; scale: none; }
    .ab-marquee.is-looping { -webkit-mask-image: none; mask-image: none; }
    .ab-marquee.is-looping .ab-track {
        animation: none; flex-wrap: wrap; justify-content: center; width: auto; padding: 0 24px;
    }
    /* The clones would double the row once it stops moving. */
    .ab-track > [aria-hidden="true"] { display: none; }
    .ab-value:hover, .ab-btn:hover { transform: none; }
    .ab-chapter:hover .ab-chapter-photo img { transform: none; }
}

/* ---- Print ------------------------------------------------------ */
@media print {
    .ab-page { box-shadow: none; margin: 0; }
    .ab-hero .ab-shell > *, .ab-hero-frame { animation: none !important; opacity: 1 !important; }
    .ab-marquee { mask-image: none !important; -webkit-mask-image: none !important; }
    .ab-marquee .ab-track { animation: none !important; flex-wrap: wrap; width: auto; }
    .ab-track > [aria-hidden="true"] { display: none; }
    .ab-trusted { color: #000; background: none; border-block: 1pt solid #999; }
    .ab-trusted h2, .ab-logos { color: #000; }
}