/* =====================================================================
   THE HOLI COLLECTION — Stylesheet
   A refined editorial hospitality aesthetic.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Coco Gothic — self-hosted font family
   ---------------------------------------------------------------------
   Loaded from assets/uploads/fonts/.
   Trial files use a *_trial.ttf naming convention. When you swap in
   licensed production fonts, update the URLs (and ideally convert to
   .woff2 for a smaller payload).

   Weight map used across the site:
     200 — UltraLight   (rare, very large display moments)
     300 — Light        (default body / nav)
     400 — Regular
     700 — Bold
     800 — Heavy        (loud headings — used sparingly)
     900 — Fat          (display-only, reserved)
   --------------------------------------------------------------------- */
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-UltraLight_trial.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-UltraLightItalic_trial.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-Light_trial.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-LightItalic_trial.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic_trial.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-Italic_trial.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-Bold_trial.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-BoldItalic_trial.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-Heavy_trial.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-HeavyItalic_trial.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-Fat_trial.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Coco Gothic';
    src: url('../uploads/fonts/CocoGothic-FatItalic_trial.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ---------------------------------------------------------------------
   2. Design tokens
   --------------------------------------------------------------------- */
:root {
    /* Brand colour family — built around #48362e */
    --holi-ink:        #48362e;   /* primary brand colour */
    --holi-ink-soft:   #6b554a;   /* secondary text */
    --holi-ink-muted:  #9b8a7e;   /* tertiary / meta */

    --holi-cream:      #f7f2ec;   /* warm off-white background */
    --holi-cream-deep: #ebe1d4;   /* card / section alt */
    --holi-paper:      #ffffff;
    --holi-line:       rgba(72, 54, 46, 0.12);
    --holi-line-soft:  rgba(72, 54, 46, 0.06);

    --holi-accent:     #c9a98a;   /* warm gilded tan for hovers / rules */

    /* Type */
    --holi-font-sans: 'Coco Gothic', 'Avenir Next', 'Futura', 'Helvetica Neue', system-ui, sans-serif;
    --holi-font-serif: 'Cormorant Garamond', 'Didot', 'Bodoni 72', Georgia, serif;

    /* Spatial */
    --holi-container: 1280px;
    --holi-gutter: clamp(1.25rem, 4vw, 3rem);

    /* Motion */
    --holi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
    margin: 0;
    font-family: var(--holi-font-sans);
    font-weight: 300;
    color: var(--holi-ink);
    background: var(--holi-cream);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

a {
    color: var(--holi-ink);
    text-decoration: none;
    transition: color 220ms var(--holi-ease), opacity 220ms var(--holi-ease);
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: var(--holi-ink);
}

p { margin: 0 0 1em; }

::selection { background: var(--holi-ink); color: var(--holi-cream); }

/* Accessibility helper */
.holi-skip-link {
    position: absolute;
    top: -100px; left: 1rem;
    background: var(--holi-ink); color: var(--holi-cream);
    padding: 0.75rem 1.25rem;
    z-index: 1000;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.75rem;
}
.holi-skip-link:focus { top: 1rem; }

/* ---------------------------------------------------------------------
   4. Header & navigation
   --------------------------------------------------------------------- */
.holi-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 242, 236, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 300ms var(--holi-ease),
                background-color 300ms var(--holi-ease),
                padding 300ms var(--holi-ease);
}

.holi-header.is-scrolled {
    border-bottom-color: var(--holi-line);
    background: rgba(247, 242, 236, 0.97);
}

.holi-header__inner {
    max-width: var(--holi-container);
    margin: 0 auto;
    padding: 1.1rem var(--holi-gutter) 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    text-align: center;
    transition: padding 300ms var(--holi-ease), gap 300ms var(--holi-ease);
}

.holi-header.is-scrolled .holi-header__inner {
    padding-top: 0.7rem;
    padding-bottom: 0.6rem;
    gap: 0.55rem;
}

.holi-header__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.holi-header__logo {
    height: clamp(28px, 3.2vw, 38px);
    width: auto;
    transition: opacity 220ms var(--holi-ease), height 300ms var(--holi-ease);
}
.holi-header.is-scrolled .holi-header__logo { height: clamp(24px, 2.6vw, 30px); }
.holi-header__brand:hover .holi-header__logo { opacity: 0.75; }

/* ---------------------------------------------------------------------
   Nav
   ---------------------------------------------------------------------
   The <nav> is a sibling of <header>, not a child — this is deliberate
   so position:fixed on mobile isn't trapped by the header's
   backdrop-filter containing block. On desktop we style the nav as a
   visual continuation of the header strip, sticky under it.
   --------------------------------------------------------------------- */
.holi-nav {
    position: sticky;
    top: 0;
    z-index: 99;    /* just below the header (100) so header shadow sits over it */
    background: rgba(247, 242, 236, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--holi-line);
    padding: 0.75rem var(--holi-gutter);
}

.holi-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.85rem, 2vw, 1.85rem);
    align-items: center;
}

.holi-nav__link {
    position: relative;
    display: inline-block;
    padding: 0.3rem 0;
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--holi-ink);
}

.holi-nav__link::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 1px;
    background: var(--holi-ink);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 360ms var(--holi-ease);
}

.holi-nav__link:hover::after,
.holi-nav__link:focus-visible::after,
.holi-nav__link.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.holi-nav__link.is-active { color: var(--holi-ink); }

/* Mobile toggle */
.holi-header__toggle {
    display: none;
    width: 40px;
    height: 40px;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.holi-header__toggle-bar {
    display: block;
    width: 26px;
    height: 1px;
    background: var(--holi-ink);
    transition: transform 300ms var(--holi-ease), opacity 200ms var(--holi-ease);
}
.holi-header__toggle[aria-expanded="true"] .holi-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.holi-header__toggle[aria-expanded="true"] .holi-header__toggle-bar:nth-child(2) { opacity: 0; }
.holi-header__toggle[aria-expanded="true"] .holi-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------------
   5. Layout primitives
   --------------------------------------------------------------------- */
.holi-main { min-height: 60vh; }

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

.holi-section { padding: clamp(4rem, 9vw, 8rem) 0; }
.holi-section--cream { background: var(--holi-cream); }
.holi-section--deep  { background: var(--holi-cream-deep); }
.holi-section--ink   { background: var(--holi-ink); color: var(--holi-cream); }
.holi-section--ink h1, .holi-section--ink h2, .holi-section--ink h3 { color: var(--holi-cream); }

/* Editorial type helpers */
.holi-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--holi-ink-soft);
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 3.25rem;
}
.holi-eyebrow::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 2.5rem; height: 1px;
    background: var(--holi-ink-soft);
}

.holi-display {
    font-family: var(--holi-font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--holi-ink);
}
.holi-display em {
    font-style: normal;
    font-family: var(--holi-font-sans);
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------
   6. Hero slider (home page)
   ---------------------------------------------------------------------
   Full-bleed crossfade carousel with Ken Burns motion, dot pagination,
   arrow controls, a slide counter and a progress bar. Heights account
   for the sticky header so no content gets cropped.
   --------------------------------------------------------------------- */
.holi-slider {
    position: relative;
    width: 100%;
    /* A touch under viewport — leaves room for the brand strip and
       grid to invite the user to scroll. */
    height: 75vh;
    height: 75dvh;
    min-height: 560px;
    overflow: hidden;
    background: var(--holi-ink);
    isolation: isolate;
}

@media (min-width: 1400px) {
    .holi-slider { min-height: 680px; }
}

@media (max-width: 768px) {
    .holi-slider { min-height: 480px; }
}

/* Video hero — same footprint as the image slider, full-bleed,
   object-fit cover so the video fills the frame at any ratio. */
.holi-video-hero {
    position: relative;
    width: 100%;
    height: 75vh;
    height: 75dvh;
    min-height: 560px;
    overflow: hidden;
    background: var(--holi-ink);
    isolation: isolate;
}
@media (min-width: 1400px) {
    .holi-video-hero { min-height: 680px; }
}
@media (max-width: 768px) {
    .holi-video-hero { min-height: 480px; }
}
.holi-video-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.holi-slider__track {
    position: absolute;
    inset: 0;
}

/* Individual slide ------------------------------------------------- */
.holi-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1200ms var(--holi-ease),
                visibility 0s linear 1200ms;
    will-change: opacity;
}

.holi-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1200ms var(--holi-ease),
                visibility 0s linear 0s;
    z-index: 1;
}

.holi-slide__image {
    position: absolute;
    inset: -2% -2% -2% -2%;          /* slight oversize for ken-burns headroom */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.06);
    transition: transform 300ms var(--holi-ease);
}

/* Slow Ken Burns zoom while active — restart with the slide */
.holi-slide.is-active .holi-slide__image {
    animation: holi-kenburns 9000ms var(--holi-ease) forwards;
}

@keyframes holi-kenburns {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}

/* Dark scrim for legibility — gradient, not flat */
.holi-slide__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(28, 20, 16, 0.10) 0%,
            rgba(28, 20, 16, 0.25) 45%,
            rgba(28, 20, 16, 0.62) 100%),
        linear-gradient(90deg,
            rgba(28, 20, 16, 0.45) 0%,
            rgba(28, 20, 16, 0.10) 55%,
            rgba(28, 20, 16, 0) 100%);
    pointer-events: none;
}

/* Text content */
.holi-slide__inner {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0 var(--holi-gutter) clamp(5rem, 11vh, 8rem);
    max-width: var(--holi-container);
    margin: 0 auto;
    color: var(--holi-cream);
    transform: translateY(20px);
    opacity: 0;
    transition: opacity 1000ms var(--holi-ease) 300ms,
                transform 1000ms var(--holi-ease) 300ms;
}

.holi-slide.is-active .holi-slide__inner {
    opacity: 1;
    transform: translateY(0);
}

.holi-slide__title {
    color: var(--holi-cream);
    max-width: 22ch;
    font-size: clamp(2.25rem, 6vw, 5.25rem);
    margin: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.holi-slide__title em {
    font-style: normal;
    font-family: var(--holi-font-sans);
    font-weight: 200;
    letter-spacing: 0.02em;
}

.holi-slide__sub {
    margin-top: 1.5rem;
    max-width: 44ch;
    color: rgba(247, 242, 236, 0.85);
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.7;
    font-weight: 300;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}

.holi-slide__cta {
    margin-top: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 2.2rem;
    border: 1px solid var(--holi-cream);
    color: var(--holi-cream);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    background: rgba(247, 242, 236, 0.04);
    backdrop-filter: blur(2px);
    transition: background-color 320ms var(--holi-ease),
                color 320ms var(--holi-ease),
                gap 320ms var(--holi-ease);
}
.holi-slide__cta::after {
    content: '→';
    font-size: 0.95rem;
    letter-spacing: 0;
    transition: transform 320ms var(--holi-ease);
}
.holi-slide__cta:hover {
    background: var(--holi-cream);
    color: var(--holi-ink);
    gap: 1.5rem;
}
.holi-slide__cta:hover::after { transform: translateX(4px); }

/* Light-on-dark variant of the eyebrow */
.holi-eyebrow--light {
    color: rgba(247, 242, 236, 0.8);
}
.holi-eyebrow--light::before {
    background: rgba(247, 242, 236, 0.7);
}

/* Arrow controls --------------------------------------------------- */
.holi-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: 1px solid rgba(247, 242, 236, 0.4);
    background: rgba(28, 20, 16, 0.15);
    color: var(--holi-cream);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 280ms var(--holi-ease),
                border-color 280ms var(--holi-ease),
                transform 280ms var(--holi-ease);
}
.holi-slider__arrow:hover {
    background: var(--holi-cream);
    color: var(--holi-ink);
    border-color: var(--holi-cream);
}
.holi-slider__arrow:focus-visible {
    outline: 2px solid var(--holi-accent);
    outline-offset: 4px;
}
.holi-slider__arrow svg { width: 22px; height: 22px; }

.holi-slider__arrow--prev { left: clamp(1rem, 3vw, 2.5rem); }
.holi-slider__arrow--next { right: clamp(1rem, 3vw, 2.5rem); }

.holi-slider__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.holi-slider__arrow--next:hover { transform: translateY(-50%) translateX(3px); }

/* Dot pagination --------------------------------------------------- */
.holi-slider__dots {
    position: absolute;
    bottom: clamp(1.5rem, 3vh, 2.25rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.85rem;
    z-index: 5;
}

.holi-slider__dot {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
}
.holi-slider__dot span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(247, 242, 236, 0.35);
    transition: background-color 280ms var(--holi-ease),
                width 280ms var(--holi-ease);
}
.holi-slider__dot:hover span { background: rgba(247, 242, 236, 0.7); }
.holi-slider__dot.is-active span {
    background: var(--holi-cream);
    width: 28px;
    border-radius: 6px;
}
.holi-slider__dot:focus-visible { outline: 2px solid var(--holi-accent); outline-offset: 2px; border-radius: 50%; }

/* Slide counter ---------------------------------------------------- */
.holi-slider__counter {
    position: absolute;
    top: clamp(1.5rem, 3vh, 2.25rem);
    right: clamp(1.25rem, 3vw, 2.5rem);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--holi-cream);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    font-variant-numeric: tabular-nums;
}
.holi-slider__counter-sep {
    width: 36px;
    height: 1px;
    background: rgba(247, 242, 236, 0.45);
    display: inline-block;
}

/* Responsive tweaks ----------------------------------------------- */
@media (max-width: 768px) {
    .holi-slider__arrow { display: none; }       /* swipe-only on mobile */
    .holi-slide__inner { padding-bottom: clamp(6rem, 14vh, 9rem); }
    .holi-slide__scrim {
        background:
            linear-gradient(180deg,
                rgba(28, 20, 16, 0.18) 0%,
                rgba(28, 20, 16, 0.40) 50%,
                rgba(28, 20, 16, 0.72) 100%);
    }
    .holi-slider__counter { font-size: 0.7rem; }
    .holi-slider__counter-sep { width: 22px; }
}

/* Reduced motion: still cross-fade (necessary for usability) but kill the zoom */
@media (prefers-reduced-motion: reduce) {
    .holi-slide.is-active .holi-slide__image { animation: none; transform: scale(1); }
    .holi-slide__image { transform: scale(1); }
}

/* ---------------------------------------------------------------------
   6b. Legacy hero (kept available, no longer used by index)
   --------------------------------------------------------------------- */
.holi-hero {
    position: relative;
    min-height: clamp(560px, 88vh, 880px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--holi-cream-deep);
}

.holi-hero__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 70% 30%, rgba(201, 169, 138, 0.55), transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(72, 54, 46, 0.18), transparent 65%),
        linear-gradient(180deg, var(--holi-cream) 0%, var(--holi-cream-deep) 100%);
}

.holi-hero__bg::after {
    /* subtle film-grain */
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.28 0 0 0 0 0.21 0 0 0 0 0.18 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.45;
    pointer-events: none;
}

.holi-hero__inner {
    position: relative;
    max-width: var(--holi-container);
    margin: 0 auto;
    padding: 6rem var(--holi-gutter) 5rem;
    width: 100%;
}

.holi-hero__title {
    max-width: 18ch;
    margin: 0;
}

.holi-hero__sub {
    margin-top: 2rem;
    max-width: 46ch;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    color: var(--holi-ink-soft);
    font-weight: 300;
    line-height: 1.7;
}

.holi-hero__cta {
    margin-top: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 2.25rem;
    border: 1px solid var(--holi-ink);
    color: var(--holi-ink);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    transition: background-color 320ms var(--holi-ease),
                color 320ms var(--holi-ease),
                gap 320ms var(--holi-ease);
}
.holi-hero__cta:hover {
    background: var(--holi-ink);
    color: var(--holi-cream);
    gap: 1.5rem;
}
.holi-hero__cta::after {
    content: '→';
    font-size: 0.95rem;
    letter-spacing: 0;
    transition: transform 320ms var(--holi-ease);
}
.holi-hero__cta:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   7. Brand logo strip
   ---------------------------------------------------------------------
   Three restaurant marks on a single line. Generous whitespace, optical
   alignment via flex centring, subtle hover lift. The logos arrive as
   mixed-format PNGs so we constrain them by height (not width) which
   gives the row a consistent optical baseline regardless of each
   logo's aspect ratio.
   --------------------------------------------------------------------- */
.holi-brands {
    background: var(--holi-cream);
    padding: clamp(4rem, 8vw, 7rem) 0;
    position: relative;
}

/* Hairline dividers above and below — keeps the strip self-contained */
.holi-brands::before,
.holi-brands::after {
    content: '';
    position: absolute;
    left: var(--holi-gutter);
    right: var(--holi-gutter);
    height: 1px;
    background: var(--holi-line);
}
.holi-brands::before { top: 0; }
.holi-brands::after  { bottom: 0; }

.holi-brands__intro {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.holi-brands__intro .holi-eyebrow {
    padding-left: 0;
    margin-bottom: 1rem;
}
.holi-brands__intro .holi-eyebrow::before { display: none; }

.holi-brands__caption {
    font-family: var(--holi-font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    color: var(--holi-ink);
    margin: 0;
    line-height: 1.4;
}

.holi-brands__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.holi-brands__item {
    flex: 1 1 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Each cell gets a consistent vertical envelope so all three logos
       sit on the same optical baseline regardless of source aspect ratio. */
    min-height: 120px;
}

.holi-brands__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    transition: transform 420ms var(--holi-ease),
                opacity 320ms var(--holi-ease);
    opacity: 0.85;
}
.holi-brands__link:hover {
    opacity: 1;
    transform: translateY(-4px);
}
.holi-brands__link:focus-visible {
    outline: 2px solid var(--holi-accent);
    outline-offset: 8px;
    opacity: 1;
}

.holi-brands__logo {
    /* Cap height so a tall logo and a wide logo read as the same size.
       Width auto-derives. */
    height: clamp(48px, 6.5vw, 78px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* Per-brand size compensation in the strip above the venue cards.
   The Kolonaki PNG is cropped tighter around the mark than Blockman's,
   so at the shared height it reads much smaller. Bumping its height
   up ~45% normalises it visually with the other two brand logos. */
.holi-brands__logo[src*="KoloNAKI"],
.holi-brands__logo[src*="kolonaki-logo"] {
    height: clamp(70px, 9.5vw, 115px);
}

@media (max-width: 640px) {
    .holi-brands__row {
        flex-direction: column;
        gap: 2.5rem;
    }
    .holi-brands__item { min-height: 0; }

    /* Mobile — the brand strip stacks vertically, so each logo gets
       the full row width. Bump all three logos significantly so they
       command the row rather than floating as small marks on a wide
       cream band. */
    .holi-brands__logo {
        height: clamp(70px, 12vw, 100px);
    }
    .holi-brands__logo[src*="KoloNAKI"],
    .holi-brands__logo[src*="kolonaki-logo"] {
        height: clamp(90px, 15vw, 130px);
    }
    /* Modena carries the "ITALIAN EATERY" tagline under the wordmark
       in the same file, so a "100px tall container" renders the mark
       itself at only ~50px. Double its height so the wordmark reads
       at parity with the other two brand marks. */
    .holi-brands__logo[src*="Modena"],
    .holi-brands__logo[src*="modena"] {
        height: clamp(130px, 22vw, 180px);
    }
}

/* ---------------------------------------------------------------------
   7b. Venues grid (2 × 3 tile layout below the brand strip)
   ---------------------------------------------------------------------
   Each tile is a landscape rectangle. The image lives inside the tile
   with a slow scale on hover, and a near-white scrim slides in over
   the top carrying the venue name in centered, all-caps display type.
   --------------------------------------------------------------------- */
.holi-venues {
    background: var(--holi-cream);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    /* Ensure the sticky header doesn't cover the top of the section
       when scrolled to via the #restaurants anchor from the nav. */
    scroll-margin-top: 140px;
}

.holi-venues__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 1.6vw, 1.5rem);
}

/* Feature row: the first three venues get a larger, near-full-bleed
   treatment with a tight 5px gutter between cards. Sits OUTSIDE the
   container so it can extend past the page's normal max-width.
   - 5px of breathing room on the left + right edges of the viewport
     (width = 100% minus 10px total horizontal gutter).
   - 5px between each card.
   - Slightly taller aspect (~10px on a typical viewport) for presence. */
.holi-venues__grid--feature {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    width: calc(100% - 10px);
    max-width: none;
    margin: 0 auto clamp(1rem, 1.6vw, 1.5rem);
}

/* 4 / 4.5 — still portrait but noticeably shorter than the 4/5 default.
   On a ~620px-wide desktop card, this works out to roughly 700px tall
   instead of 775px. Less of a wall, more of a card. */
.holi-venues__grid--feature .holi-venues__link {
    aspect-ratio: 4 / 4.5;
}

/* Two-column variant used on brand landing pages (Blockman, Kolonaki).
   Inherits the feature row's edge-gutter + 5px gap, but lays the cards
   out in 2 columns instead of 3 — each card occupies roughly half
   the viewport width.
   The doubled selector raises specificity above .holi-venues__grid--feature
   so this column count always wins regardless of class order. */
.holi-venues__grid.holi-venues__grid--two,
.holi-venues__grid--two {
    grid-template-columns: repeat(2, 1fr);
}

/* Two-column centred variant used when a brand page has exactly two
   venues (e.g. Blockman: Parkhurst + Bryanston). Each card is sized
   to match a homepage feature card (roughly one-third of the viewport
   width), and the pair sits centered rather than stretched.

   Uses flexbox rather than grid so the horizontal centering is
   guaranteed regardless of the parent element's layout mode. Cards
   are given an explicit width equal to what a homepage feature card
   occupies, and flexbox handles the empty space on either side.

   Doubled selector raises specificity above --feature's grid rules. */
.holi-venues__grid.holi-venues__grid--two-centered,
.holi-venues__grid--two-centered {
    display: flex;
    flex-wrap: wrap;                 /* wrap onto multiple rows when > 2 cards */
    justify-content: center;
    align-items: stretch;
    gap: 5px;                        /* uniform gap between rows and columns */
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    /* Grid template columns from --feature no longer applies once
       display switches to flex, but reset it explicitly for clarity. */
    grid-template-columns: none;
}

/* Each card takes up roughly one-third of the viewport, matching the
   homepage feature-card size. Formula matches the homepage:
   width = (100vw - 10px edge gutter - 2×5px gaps) / 3. */
.holi-venues__grid.holi-venues__grid--two-centered > .holi-venues__item,
.holi-venues__grid--two-centered > .holi-venues__item {
    flex: 0 0 calc((100vw - 20px) / 3);
    max-width: calc((100vw - 20px) / 3);
}

@media (max-width: 700px) {
    /* On phones, cards go half-width so they stay readable. */
    .holi-venues__grid.holi-venues__grid--two-centered > .holi-venues__item,
    .holi-venues__grid--two-centered > .holi-venues__item {
        flex: 0 0 calc((100vw - 15px) / 2);
        max-width: calc((100vw - 15px) / 2);
    }
}

/* Brand landing page intro blurb. Centred single-column copy block,
   sits between the hero slider and the venue cards. Tight top padding
   so the title sits just below the slider, not floating in white space. */
.holi-brand-blurb {
    padding: 10px 0 clamp(3rem, 5vw, 4.5rem);
    background: var(--holi-cream);
}
.holi-brand-blurb__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.holi-brand-blurb__title {
    margin: 0 0 1.25rem;
    font-family: var(--holi-font-sans);
    font-weight: 300;
    font-size: clamp(2rem, 3.5vw, 3rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--holi-ink);
    padding-left: 0.32em;   /* optical centering for tracked uppercase */
}

/* Logo variant — image sits where the text title would. Resets the
   text-specific rules so they don't collapse the image box. */
.holi-brand-blurb__title--logo {
    padding-left: 0;
    letter-spacing: normal;
    text-transform: none;
    line-height: 0;    /* avoids the baseline gap below an inline img */
    display: flex;
    justify-content: center;
    align-items: center;
}
.holi-brand-blurb__title-img {
    display: block;
    width: auto;
    max-width: min(90%, 480px);
    height: auto;
    /* Match the visual weight of the equivalent text title. The
       original clamp was 2rem to 3rem, so cap at a comparable height
       even for very wide logos (like Kolonaki's 1920x400 landscape). */
    max-height: clamp(60px, 7vw, 95px);
    object-fit: contain;
}

/* Kolonaki logo in brand-blurb title is landscape (4.8:1) — let it
   run wider so the mark isn't cramped. */
.holi-brand-blurb__title-img[src*="KoloNAKI"],
.holi-brand-blurb__title-img[src*="kolonaki-logo"] {
    max-width: min(95%, 620px);
    max-height: clamp(50px, 6.5vw, 90px);
}
.holi-brand-blurb__lead {
    margin: 0 0 1.5rem;
    font-family: var(--holi-font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.25rem, 1.7vw, 1.55rem);
    line-height: 1.45;
    color: var(--holi-ink);
}
.holi-brand-blurb__body {
    margin: 0;
    font-family: var(--holi-font-sans);
    font-weight: 300;
    font-size: clamp(0.98rem, 1.1vw, 1.1rem);
    line-height: 1.8;
    color: var(--holi-ink-soft);
}

/* Brand-page venue cards block — strip the top margin that the
   feature row normally has on the homepage so it nudges right up
   against the blurb above. */
.holi-brand-venues {
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.holi-venues__item {
    position: relative;
    overflow: hidden;
}

.holi-venues__link {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;          /* landscape rectangle, matches reference */
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    isolation: isolate;
}

.holi-venues__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.01);
    transition: transform 900ms var(--holi-ease);
    will-change: transform;
}

/* Slow zoom on hover */
.holi-venues__link:hover .holi-venues__image,
.holi-venues__link:focus-visible .holi-venues__image {
    transform: scale(1.06);
}

.holi-venues__overlay {
    position: absolute;
    inset: 0;
    /* 80% cream wash — muted veil so the logo carries visual weight
       while the underlying photograph still reads as atmosphere.
       This is the default on mobile. On desktop with a real hover
       capability, the hover-media block below hides it until hover. */
    background: rgba(247, 242, 236, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    gap: 0.9rem;
    opacity: 1;
    transition: background-color 480ms var(--holi-ease);
    z-index: 1;
}

/* Brand logo shown on top of the overlay wash. Sized generously so
   the logo carries the card visually. Mobile: always visible with
   wash behind. Desktop: hidden by default, fades in on hover. */
.holi-venues__logo {
    max-width: min(60%, 320px);
    max-height: 55%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Soft drop-shadow so the logo stays legible against varied
       photograph tones behind the light overlay wash. */
    filter: drop-shadow(0 2px 12px rgba(28, 20, 16, 0.25));
    transition: opacity 480ms var(--holi-ease), transform 520ms var(--holi-ease);
}

/* -----------------------------------------------------------------
   DESKTOP HOVER INVERSION
   -----------------------------------------------------------------
   On devices with a real pointer (desktop/laptop with mouse) AND
   above the mobile breakpoint, the interaction flips: the card
   shows the clear photograph by default, and the cream wash + logo
   + sublabel fade in only on hover or keyboard focus.

   `(hover: hover)` excludes touchscreens where there is no hover
   state — a tap would leave the card showing the wash permanently
   on mobile, which is bad UX. On touch we always show the wash+logo.
   ----------------------------------------------------------------- */
@media (hover: hover) and (min-width: 861px) {
    /* Default state: clear image, no wash, no logo, no sublabel */
    .holi-venues__overlay {
        background: rgba(247, 242, 236, 0);
    }
    .holi-venues__logo {
        opacity: 0;
    }
    .holi-venues__sublabel {
        opacity: 0;
    }

    /* Hover / keyboard focus: everything fades in */
    .holi-venues__link:hover .holi-venues__overlay,
    .holi-venues__link:focus-visible .holi-venues__overlay {
        background: rgba(247, 242, 236, 0.8);
    }
    .holi-venues__link:hover .holi-venues__logo,
    .holi-venues__link:focus-visible .holi-venues__logo {
        opacity: 1;
        transform: scale(1);
    }
    .holi-venues__link:hover .holi-venues__sublabel,
    .holi-venues__link:focus-visible .holi-venues__sublabel {
        opacity: 1;
    }
}

/* Per-brand size compensation.
   Both the Modena and Kolonaki PNGs are cropped tighter around the
   mark than Blockman's, so at the shared default size they read
   smaller. Bumping their max-widths normalises the three logos to
   the same visual weight. */
.holi-venues__logo[src*="Modena"],
.holi-venues__logo[src*="modena"] {
    max-width: min(66%, 355px);
    max-height: 61%;
}
.holi-venues__overlay:has(.holi-venues__sublabel) .holi-venues__logo[src*="Modena"],
.holi-venues__overlay:has(.holi-venues__sublabel) .holi-venues__logo[src*="modena"] {
    max-width: min(58%, 310px);
    max-height: 50%;
}
/* Kolonaki — "a little" bigger than default (~15%). */
.holi-venues__logo[src*="KoloNAKI"],
.holi-venues__logo[src*="kolonaki-logo"] {
    max-width: min(70%, 370px);
    max-height: 62%;
}
.holi-venues__overlay:has(.holi-venues__sublabel) .holi-venues__logo[src*="KoloNAKI"],
.holi-venues__overlay:has(.holi-venues__sublabel) .holi-venues__logo[src*="kolonaki-logo"] {
    max-width: min(52%, 275px);
    max-height: 44%;
}

/* When both a logo AND sublabel are present, shrink the logo a
   touch so the pair reads as a unit rather than the logo dominating. */
.holi-venues__overlay:has(.holi-venues__sublabel) .holi-venues__logo {
    max-width: min(45%, 240px);
    max-height: 38%;
}

/* Sublabel — a subtitle sitting under the logo. Bold and prominent so
   it pairs with the logo rather than fading beneath it. */
.holi-venues__sublabel {
    font-family: var(--holi-font-sans);
    font-weight: 700;
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--holi-ink);
    line-height: 1.35;
    max-width: 22ch;
    text-align: center;
    transition: opacity 480ms var(--holi-ease);
}
/* Hover/focus behavior for the sublabel is handled inside the desktop
   hover-inversion media query above (fade IN on hover). Mobile keeps
   it visible permanently. */

.holi-venues__label {
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.6vw, 1.5rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--holi-ink);
    line-height: 1.3;
    /* Wide enough to accommodate multi-word second lines like
       "MODERN GREEK KOUZINA" without them wrapping inside themselves. */
    max-width: 22ch;
    text-align: center;
}

.holi-venues__link:focus-visible {
    outline: 2px solid var(--holi-accent);
    outline-offset: 4px;
}

/* Responsive: 2 cols on tablet, 1 col on phone */
@media (max-width: 960px) {
    .holi-venues__grid { grid-template-columns: repeat(2, 1fr); }
    /* Feature grid also drops to 2 columns on tablet — the third card
       wraps under the row. */
    .holi-venues__grid.holi-venues__grid--feature {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .holi-venues__grid { grid-template-columns: 1fr; gap: 0.75rem; }
    /* Feature grid stacks to 1 column on phone. Cards get their full
       width instead of being crammed at 33% each. */
    .holi-venues__grid.holi-venues__grid--feature {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    /* On phone, keep the cream wash so the logo reads clearly
       against varying photograph brightness. */
    .holi-venues__overlay {
        background: rgba(247, 242, 236, 0.8);
    }
    .holi-venues__label {
        font-size: 0.78rem;
        letter-spacing: 0.16em;
        max-width: 100%;
    }
    .holi-venues__logo {
        max-width: 55%;
        max-height: 50%;
    }
}

/* ---------------------------------------------------------------------
   8. Intro / story block
   --------------------------------------------------------------------- */
.holi-intro__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.holi-intro__copy p {
    font-size: clamp(1rem, 1.05vw, 1.1rem);
    color: var(--holi-ink-soft);
    line-height: 1.85;
}
.holi-intro__copy p + p { margin-top: 1.25rem; }

.holi-intro__copy p:first-of-type::first-letter {
    font-family: var(--holi-font-serif);
    font-style: italic;
    font-size: 4.2em;
    float: left;
    line-height: 0.88;
    margin: 0.05em 0.12em 0 -0.05em;
    color: var(--holi-ink);
}

/* ---------------------------------------------------------------------
   9. Restaurant cards (a teaser grid for the home page)
   --------------------------------------------------------------------- */
.holi-collection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3.5rem;
}

.holi-card {
    position: relative;
    background: var(--holi-paper);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--holi-line-soft);
    transition: transform 500ms var(--holi-ease), box-shadow 500ms var(--holi-ease);
}
.holi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -30px rgba(72, 54, 46, 0.35);
}

.holi-card__media {
    aspect-ratio: 4 / 5;
    background: var(--holi-cream-deep);
    background-size: cover;
    background-position: center;
    transition: transform 800ms var(--holi-ease);
}
.holi-card:hover .holi-card__media { transform: scale(1.04); }

.holi-card__body { padding: 1.75rem 1.75rem 2rem; }

.holi-card__kicker {
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--holi-ink-muted);
}

.holi-card__title {
    font-family: var(--holi-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.85rem;
    margin: 0.4rem 0 0.6rem;
}

.holi-card__excerpt { color: var(--holi-ink-soft); font-size: 0.95rem; }

/* ---------------------------------------------------------------------
   9b. Restaurant detail page
   ---------------------------------------------------------------------
   Used by pages/restaurants/*.php — a centered logo + opening line with
   a hairline rule beneath, then a two-column story: bold sans display
   tagline on the left, long-form body copy + outline CTA on the right.
   --------------------------------------------------------------------- */
.holi-rest-intro {
    background: var(--holi-cream);
    padding: clamp(3rem, 6vw, 5rem) 0 0;
}

.holi-rest-intro__logo-wrap {
    text-align: center;
}

.holi-rest-intro__logo {
    height: clamp(60px, 8vw, 110px);
    width: auto;
    max-width: 60%;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}

.holi-rest-intro__opened {
    margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
    max-width: 64ch;
    text-align: center;
    color: var(--holi-ink);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    font-weight: 300;
}

.holi-rest-intro__rule {
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    height: 1px;
    background: var(--holi-line);
}

.holi-rest-story {
    background: var(--holi-cream);
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6rem);
}

.holi-rest-story__grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.holi-rest-story__tagline {
    margin: 0;
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: clamp(1.85rem, 3.2vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--holi-ink);
    max-width: 18ch;
}

.holi-rest-story__copy p {
    margin: 0 0 1.4em;
    color: var(--holi-ink-soft);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.85;
    font-weight: 300;
}
.holi-rest-story__copy p:last-of-type { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }

.holi-rest-story__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 2rem;
    border: 1px solid var(--holi-line);
    background: var(--holi-cream-deep);
    color: var(--holi-ink);
    font-family: var(--holi-font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    transition: background-color 320ms var(--holi-ease),
                color 320ms var(--holi-ease),
                border-color 320ms var(--holi-ease),
                gap 320ms var(--holi-ease);
}
.holi-rest-story__cta::after {
    content: '↗';
    font-size: 1rem;
    letter-spacing: 0;
    transition: transform 320ms var(--holi-ease);
}
.holi-rest-story__cta:hover {
    background: var(--holi-ink);
    color: var(--holi-cream);
    border-color: var(--holi-ink);
    gap: 1.25rem;
}
.holi-rest-story__cta:hover::after { transform: translate(3px, -3px); }

@media (max-width: 860px) {
    .holi-rest-story__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .holi-rest-story__tagline { max-width: none; }
}

/* Trial Coco Gothic ships with strikethrough placeholders in place of
   digit glyphs. This helper opts numerical runs out of Coco Gothic so
   years and similar values stay readable until the licensed font is
   installed. Swap to `inherit` once production fonts are in place. */
.holi-num {
    font-family: 'Avenir Next', 'Futura', 'Helvetica Neue', system-ui, sans-serif;
    font-feature-settings: "lnum" 1;     /* lining (not old-style) numerals */
    font-variant-numeric: lining-nums;
}

/* ---------------------------------------------------------------------
   9d. Vision page
   ---------------------------------------------------------------------
   Full-bleed photographic hero with a centered two-line wordmark
   ("Our / Vision"), reusing the Cormorant Garamond italic / Coco
   Gothic pairing established on the homepage hero. Body copy reuses
   the restaurant-page two-column layout so the site reads as a
   single visual system.
   --------------------------------------------------------------------- */
.holi-vision-hero {
    position: relative;
    display: flex;
    align-items: flex-end;          /* anchor content towards the bottom */
    justify-content: center;
    width: 100%;
    /* Belt-and-braces sizing: explicit min-height first (works everywhere),
       then progressive height units. The strong min-height guarantees the
       section is large even if a viewport unit fails to apply. */
    min-height: 640px;
    min-height: 80vh;
    min-height: 80dvh;
    height: 80vh;
    height: 80dvh;
    padding-bottom: clamp(3rem, 8vh, 7rem);   /* breathing room below text */
    background-color: var(--holi-ink);     /* visible while image loads */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    isolation: isolate;
}

/* Vision, Franchising and Gallery pages want their titles sitting
   ~200px higher than the shared hero default. Since content is
   anchored to the bottom, we lift it by adding 200px to the bottom
   padding. */
.holi-vision-hero--vision-page,
.holi-vision-hero--franchising-page,
.holi-vision-hero--gallery-page {
    padding-bottom: calc(clamp(3rem, 8vh, 7rem) + 200px);
}

@media (min-width: 1400px) {
    .holi-vision-hero {
        min-height: 760px;
    }
}

@media (max-width: 768px) {
    .holi-vision-hero {
        min-height: 540px;
    }
}

.holi-vision-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center,
            rgba(28, 20, 16, 0.18) 0%,
            rgba(28, 20, 16, 0.48) 70%,
            rgba(28, 20, 16, 0.62) 100%);
    pointer-events: none;
}

.holi-vision-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 var(--holi-gutter);
}

.holi-vision-hero__title {
    margin: 0;
    color: var(--holi-cream);
    font-family: var(--holi-font-sans);
    font-weight: 300;
    font-size: clamp(3.2rem, 6vw, 5.2rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    padding-left: 0.32em;   /* optical centering: compensates for tracking */
    text-align: center;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.35);
}

/* Body wrap-around — keep the cream context but tighten the top
   padding because the hero already gives the page plenty of weight. */
.holi-vision-story {
    padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

/* Lead-in paragraph above the main body copy — sits in the right column
   as an italic serif lead, giving the eye somewhere soft to land before
   the prose proper. */
.holi-vision-story__intro {
    font-family: var(--holi-font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.25rem, 1.7vw, 1.55rem);
    line-height: 1.45;
    color: var(--holi-ink);
    margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
    padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
    border-bottom: 1px solid var(--holi-line);
}

/* Mosaic spacing — slightly more breathing room above than a venue gallery,
   since this one acts as the page's closing statement rather than the
   middle of a longer story. */
.holi-vision-mosaic {
    padding-top: clamp(1rem, 3vw, 2.5rem);
}

/* ---------------------------------------------------------------------
   9e. Franchising page
   ---------------------------------------------------------------------
   Three numbered pillars below the intro, then a two-column enquiry
   block (lead copy on the left, form on the right). Form fields use
   underline-style inputs to stay editorially quiet rather than
   shouting like a typical checkout form.
   --------------------------------------------------------------------- */

/* — Pillars ----------------------------------------------------------- */
.holi-franchise-pillars {
    background: var(--holi-cream);
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

.holi-franchise-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
}

.holi-franchise-pillar {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-top: 1px solid var(--holi-line);
    padding-top: 1.5rem;
}

.holi-franchise-pillar__num {
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--holi-ink-muted);
}

.holi-franchise-pillar__title {
    margin: 0;
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.25;
    color: var(--holi-ink);
}

.holi-franchise-pillar__copy {
    margin: 0;
    color: var(--holi-ink-soft);
    font-size: 0.95rem;
    line-height: 1.7;
    font-weight: 300;
}

@media (max-width: 800px) {
    .holi-franchise-pillars__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* — Enquiry block ---------------------------------------------------- */
.holi-franchise-enquiry {
    background: var(--holi-cream-deep);
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6rem);
}

.holi-franchise-enquiry__grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.holi-franchise-enquiry__lead .holi-rest-story__tagline {
    max-width: 14ch;
    margin-bottom: 1.5rem;
}

.holi-franchise-enquiry__sub {
    color: var(--holi-ink-soft);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.75;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.holi-franchise-enquiry__contact {
    font-size: 0.85rem;
    color: var(--holi-ink-soft);
    line-height: 1.6;
    margin: 0;
}
.holi-franchise-enquiry__contact a {
    color: var(--holi-ink);
    border-bottom: 1px solid var(--holi-line);
    transition: color 240ms var(--holi-ease), border-color 240ms var(--holi-ease);
}
.holi-franchise-enquiry__contact a:hover {
    color: var(--holi-accent);
    border-color: var(--holi-accent);
}

@media (max-width: 860px) {
    .holi-franchise-enquiry__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .holi-franchise-enquiry__lead .holi-rest-story__tagline {
        max-width: none;
    }
}

/* — Alerts ----------------------------------------------------------- */
.holi-franchise-enquiry__alert {
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.75rem;
    font-size: 0.95rem;
    line-height: 1.55;
    border-left: 3px solid var(--holi-ink);
    background: var(--holi-paper);
    color: var(--holi-ink);
}
.holi-franchise-enquiry__alert--success {
    border-left-color: #6b8e5a;
}
.holi-franchise-enquiry__alert--error {
    border-left-color: #a8523a;
}
.holi-franchise-enquiry__alert strong {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

/* — Form -------------------------------------------------------------- */
.holi-form { display: block; }

.holi-form__honey {
    /* Off-screen but technically present, so bots fill it.
       Real users never see or focus this field. */
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.holi-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
    .holi-form__row { grid-template-columns: 1fr; gap: 1.5rem; }
}

.holi-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}
.holi-form__row .holi-form__field { margin-bottom: 0; }

.holi-form__label {
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--holi-ink-soft);
}
.holi-form__label span[aria-hidden="true"] {
    color: var(--holi-accent);
    margin-left: 0.2em;
}

.holi-form__input,
.holi-form__textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--holi-line);
    padding: 0.6rem 0;
    font-family: var(--holi-font-sans);
    font-size: 1rem;
    font-weight: 300;
    color: var(--holi-ink);
    transition: border-color 220ms var(--holi-ease);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
}
.holi-form__input:focus,
.holi-form__textarea:focus {
    outline: none;
    border-bottom-color: var(--holi-ink);
}
.holi-form__input::placeholder {
    color: var(--holi-ink-muted);
    font-weight: 300;
}

.holi-form__textarea {
    resize: vertical;
    min-height: 7rem;
    padding-top: 0.8rem;
}

/* Native select needs a custom indicator since we strip appearance */
select.holi-form__input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%2348362e' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    background-size: 12px 8px;
    padding-right: 1.75rem;
    cursor: pointer;
}

.holi-form__actions {
    margin-top: 2.5rem;
}

.holi-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.05rem 2.4rem;
    background: var(--holi-ink);
    color: var(--holi-cream);
    border: 1px solid var(--holi-ink);
    font-family: var(--holi-font-sans);
    font-size: 0.74rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 320ms var(--holi-ease),
                color 320ms var(--holi-ease),
                gap 320ms var(--holi-ease);
}
.holi-form__submit::after {
    content: '→';
    letter-spacing: 0;
    font-size: 1rem;
    transition: transform 320ms var(--holi-ease);
}
.holi-form__submit:hover {
    background: transparent;
    color: var(--holi-ink);
    gap: 1.3rem;
}
.holi-form__submit:hover::after {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------------
   9f. Contact page
   ---------------------------------------------------------------------
   Mirrors the Vision/Franchising hero treatment, then a two-column
   intro block (left: tagline + lead, right: three info cells), a
   full-width map embed, and the contact form (reuses Franchising
   form styling).
   --------------------------------------------------------------------- */
.holi-contact-intro {
    background: var(--holi-cream);
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.holi-contact-intro__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.holi-contact-intro__lead .holi-rest-story__tagline {
    max-width: 12ch;
}

/* The three info cells stack vertically inside their column, separated
   by hairline rules. Works at any width without media queries. */
.holi-contact-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.holi-contact-block {
    padding: 1.5rem 0;
    border-top: 1px solid var(--holi-line);
}
.holi-contact-block:first-child {
    border-top: 0;
    padding-top: 0;
}
.holi-contact-block:last-child {
    padding-bottom: 0;
}

.holi-contact-block__heading {
    margin: 0 0 0.6rem;
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--holi-ink-soft);
}

.holi-contact-block__body {
    margin: 0;
    font-family: var(--holi-font-sans);
    font-weight: 300;
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.65;
    color: var(--holi-ink);
    font-style: normal;
}
.holi-contact-block__body a {
    color: var(--holi-ink);
    border-bottom: 1px solid var(--holi-line);
    transition: color 240ms var(--holi-ease), border-color 240ms var(--holi-ease);
}
.holi-contact-block__body a:hover {
    color: var(--holi-accent);
    border-color: var(--holi-accent);
}

.holi-contact-block__meta {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: var(--holi-ink-muted);
    line-height: 1.55;
}
.holi-contact-block__meta a {
    color: var(--holi-ink-soft);
    border-bottom: 1px solid var(--holi-line);
    transition: color 240ms var(--holi-ease), border-color 240ms var(--holi-ease);
}
.holi-contact-block__meta a:hover {
    color: var(--holi-accent);
    border-color: var(--holi-accent);
}

@media (max-width: 860px) {
    .holi-contact-intro__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .holi-contact-intro__lead .holi-rest-story__tagline { max-width: none; }
}

/* — Map embed -------------------------------------------------------- */
.holi-contact-map {
    background: var(--holi-cream-deep);
}

/* `holi-contact-map__frame` uses aspect-ratio so the iframe responds
   nicely without a fixed pixel height. A subtle saturation drop and
   a touch more contrast brings the Google Maps palette closer to the
   muted brand colours without obscuring readability. */
.holi-contact-map__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6;
    overflow: hidden;
}
@media (max-width: 768px) {
    .holi-contact-map__frame { aspect-ratio: 4 / 5; }
}

.holi-contact-map__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: saturate(0.7) contrast(0.96);
}

/* — Contact form section override --------------------------------------
   Reuses .holi-franchise-enquiry but on a cream (not cream-deep)
   background so the visual rhythm of the page flows: cream → tan map
   → cream form, which is gentler than two adjacent deep bands. */
.holi-contact-form-section {
    background: var(--holi-cream);
}

/* ---------------------------------------------------------------------
   9c. Restaurant gallery (mixed-width rows)
   ---------------------------------------------------------------------
   Each row carries a `.holi-rest-gallery__row--cols-N` modifier (N=2..6)
   so per-row column counts can vary without touching CSS. Cells share
   a fixed aspect ratio for visual rhythm regardless of source image.
   --------------------------------------------------------------------- */
.holi-rest-gallery {
    background: var(--holi-cream);
    padding: 0 0 clamp(4rem, 7vw, 6rem);
}

.holi-rest-gallery__row {
    display: grid;
    gap: 0;
    margin-bottom: 0;
}

.holi-rest-gallery__row--cols-2 { grid-template-columns: repeat(2, 1fr); }
.holi-rest-gallery__row--cols-3 { grid-template-columns: repeat(3, 1fr); }
.holi-rest-gallery__row--cols-4 { grid-template-columns: repeat(4, 1fr); }

.holi-rest-gallery__cell {
    margin: 0;
    overflow: hidden;
    position: relative;
    background: var(--holi-cream-deep);
}

.holi-rest-gallery__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 900ms var(--holi-ease);
    will-change: transform;
}
.holi-rest-gallery__cell:hover .holi-rest-gallery__image {
    transform: scale(1.04);
}

/* Responsive: 3-up collapses to 2 on tablet and 1 on phone; 2-up
   stays 2-up on tablet then collapses to 1 on phone. */
@media (max-width: 860px) {
    .holi-rest-gallery__row--cols-3 { grid-template-columns: repeat(2, 1fr); }
    .holi-rest-gallery__row--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .holi-rest-gallery__row--cols-2,
    .holi-rest-gallery__row--cols-3,
    .holi-rest-gallery__row--cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   10. Footer
   ---------------------------------------------------------------------
   Light cream background, dark brown ink. Three vertical stacks of
   link + social icon, separated from the signup line above by a single
   hairline rule that runs nearly edge to edge.
   --------------------------------------------------------------------- */
.holi-footer {
    background: var(--holi-cream);
    color: var(--holi-ink);
    margin-top: 0;
}

/* 1 ─ Sign-up line --------------------------------------------------- */
.holi-footer__signup {
    padding: clamp(1rem, 2vw, 1.75rem) var(--holi-gutter) clamp(1.5rem, 2.5vw, 2.25rem);
    text-align: center;
}

.holi-footer__signup-line {
    margin: 0;
    font-family: var(--holi-font-sans);
    font-weight: 300;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    color: var(--holi-ink);
    letter-spacing: 0.02em;
}

/* 2 ─ Divider rule --------------------------------------------------- */
.holi-footer__rule {
    height: 1px;
    background: var(--holi-line);
    max-width: calc(var(--holi-container) + (var(--holi-gutter) * 2));
    margin: 0 auto;
}

/* 3 ─ Three-column link block --------------------------------------- */
.holi-footer__inner {
    max-width: var(--holi-container);
    margin: 0 auto;
    padding: clamp(2.25rem, 4vw, 3.25rem) var(--holi-gutter) clamp(2.5rem, 4vw, 3.5rem);
}

.holi-footer__columns {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
}

.holi-footer__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.holi-footer__link {
    font-family: var(--holi-font-sans);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--holi-ink);
    position: relative;
    padding-bottom: 0.25rem;
    transition: color 240ms var(--holi-ease);
}
.holi-footer__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--holi-ink);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 360ms var(--holi-ease);
}
.holi-footer__link:hover::after,
.holi-footer__link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* 4 ─ Social icons --------------------------------------------------- */
.holi-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--holi-ink);
    transition: color 240ms var(--holi-ease), transform 320ms var(--holi-ease);
}
.holi-footer__social:hover,
.holi-footer__social:focus-visible {
    color: var(--holi-accent);
    transform: translateY(-2px);
}
.holi-footer__social svg {
    width: 100%;
    height: 100%;
    display: block;
}
.holi-footer__social:focus-visible {
    outline: 2px solid var(--holi-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

/* 5 ─ Base bar (very subtle) ---------------------------------------- */
.holi-footer__base {
    border-top: 1px solid var(--holi-line-soft);
    padding: 1.25rem var(--holi-gutter);
    max-width: var(--holi-container);
    margin: 0 auto;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--holi-ink-muted);
}
.holi-footer__base p { margin: 0; }

/* Responsive --------------------------------------------------------- */
@media (max-width: 720px) {
    .holi-footer__columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ---------------------------------------------------------------------
   11. Reveal-on-scroll
   --------------------------------------------------------------------- */
[data-holi-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms var(--holi-ease), transform 900ms var(--holi-ease);
    transition-delay: var(--holi-delay, 0ms);
}
[data-holi-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
    [data-holi-reveal] { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   12. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .holi-intro__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   12b. Mobile nav
   ---------------------------------------------------------------------
   Trigger below 860px (keeps tablet landscape on desktop nav; portrait
   tablets get the hamburger). Full-screen cream takeover with large
   tap targets and a visible close affordance.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
    /* CRITICAL FIX: `backdrop-filter` on the header creates a new
       containing block for position:fixed descendants. That means the
       nav's position:fixed was binding to the header's dimensions
       (~70px) instead of the viewport, so the open menu could only grow
       as tall as "double the header". We strip the backdrop-filter on
       mobile where the fixed-overlay nav lives. A solid background
       colour is used in its place — on mobile the subtle blur was
       never doing much work visually anyway. */
    .holi-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--holi-cream);
    }
    .holi-header.is-scrolled {
        background: var(--holi-cream);
    }

    /* Header row — logo and burger sit side-by-side rather than
       stacked, so there's less vertical space used. */
    .holi-header__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        padding: 0.85rem var(--holi-gutter);
        text-align: left;
    }
    .holi-header.is-scrolled .holi-header__inner {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    .holi-header__brand { margin-right: auto; }
    .holi-header__logo { height: clamp(26px, 6vw, 34px); }
    .holi-header.is-scrolled .holi-header__logo { height: clamp(22px, 5.4vw, 28px); }

    /* Toggle: generous 44x44 tap target per Apple HIG guidance.
       z-index tops the opened nav so the X close affordance works. */
    .holi-header__toggle {
        display: inline-flex;
        width: 44px;
        height: 44px;
        position: static;
        transform: none;
        margin-right: -8px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 1001;
    }

    /* Full-screen takeover.
       - Uses 100dvh (dynamic viewport height) so it works around mobile
         browser chrome (address bar) that resizes while scrolling.
       - Scrolls internally if content overflows, with the ul top-aligned
         rather than flex-centered so items at the top never get clipped.
       - z-index must sit above sticky header (100) and all page content. */
    .holi-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: var(--holi-cream);
        /* Explicitly kill desktop treatments so the mobile overlay
           is a clean opaque sheet. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 0;
        padding: 5rem var(--holi-gutter) 3rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 360ms var(--holi-ease),
                    visibility 360ms var(--holi-ease);
        z-index: 1000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .holi-nav.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* Links — centered horizontally, top-aligned vertically (so if
       content overflows a tiny viewport, you can scroll to see the
       bottom items rather than them being clipped). */
    .holi-nav__list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 1.75rem;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        min-height: 100%;
    }
    .holi-nav__item {
        width: 100%;
        text-align: center;
    }
    .holi-nav__link {
        display: inline-block;
        font-family: var(--holi-font-sans);
        font-size: clamp(1.2rem, 4.5vw, 1.7rem);
        letter-spacing: 0.24em;
        font-weight: 300;
        text-transform: uppercase;
        color: var(--holi-ink);
        padding: 0.6rem 1rem;
        text-decoration: none;
    }

    /* Active page indicator — subtle underline centered under the link. */
    .holi-nav__link.is-active {
        color: var(--holi-ink);
    }
    .holi-nav__link.is-active::after {
        bottom: 0;
        width: 40%;
        left: 30%;
    }

    /* Prevent background scroll while menu open. */
    body.is-locked { overflow: hidden; }
}

/* Very small phones — tighten things further */
@media (max-width: 420px) {
    .holi-nav { padding-top: 4.5rem; }
    .holi-nav__link {
        font-size: 1.25rem;
        letter-spacing: 0.2em;
    }
    .holi-nav__list { gap: 1.35rem; }
}