/* ═══════════════════════════════════════════════════════════════════════════
   OPO! — Our Pinoy Original
   Hearth browns + gold, as before. The signature motif is a woven banig
   band (the Filipino sleeping mat) instead of scattered diamonds.
   Lexend carries all UI, headlines, and reading text for one consistent
   type treatment throughout the page.
═══════════════════════════════════════════════════════════════════════════ */

@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root{
    /* palette */
    --hearth:#191410;      /* page base            */
    --hearth-2:#211b17;    /* alternate band       */
    --kape:#2a221d;        /* raised surface       */
    --kape-2:#352b25;      /* hover / inset        */
    --gold:#c9a24e;
    --gold-pale:#e3c47b;
    --gold-deep:#9c7734;
    --cream:#f5efe4;
    --cream-2:rgba(245,239,228,.76);
    --muted:#a69a8d;
    --line:rgba(201,162,78,.16);
    --line-2:rgba(201,162,78,.34);

    /* type — 1.25 modular scale */
    --ui:'Lexend',system-ui,sans-serif;
    --read:'Lexend',system-ui,sans-serif;
    --fs-xs:.8rem; --fs-sm:.9rem; --fs-md:1.0625rem; --fs-lg:1.25rem;
    --fs-xl:1.563rem; --fs-2xl:clamp(2rem,4.2vw,3.05rem);
    --fs-hero:clamp(2.9rem,8.4vw,6.6rem);

    /* shape + motion */
    --r-sm:10px; --r:16px; --r-lg:24px;
    --nav-h:68px;
    --gutter:clamp(18px,4vw,40px);
    --section-y:clamp(80px,10vw,128px);
    --ease:cubic-bezier(.22,.61,.36,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --shadow:0 40px 80px -44px rgba(0,0,0,.95);

    /* the banig weave: two diagonal strip sets crossing over a base */
    --weave:
        repeating-linear-gradient(45deg, rgba(227,196,123,.9) 0 5px, transparent 5px 10px),
        repeating-linear-gradient(-45deg, rgba(156,119,52,.95) 0 5px, transparent 5px 10px),
        linear-gradient(var(--hearth), var(--hearth));
}

/* ── BASE ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;}
body{
    background:var(--hearth);color:var(--cream);
    font-family:var(--read);font-size:var(--fs-md);line-height:1.7;
    overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,iframe,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--ui);text-wrap:balance;}
p{text-wrap:pretty;}
::selection{background:var(--gold);color:var(--hearth);}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* A jump link lands with the section's own top edge at the top of the screen,
   so nothing of the section above peeks in. No nav offset is needed: every
   section's top padding (--section-y, 80px+) is taller than the fixed nav
   (--nav-h, 60-68px), so the heading clears the nav whether it is showing or
   has slid away on the way down. */
section{position:relative;padding:var(--section-y) 0;scroll-margin-top:0;}

.container{width:min(1200px, 100% - 2 * var(--gutter));margin-inline:auto;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* film grain over everything, very faint */
.page-grain{
    position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the banig band — used as a divider in three places */
.weave{height:12px;background:var(--weave);position:relative;z-index:2;}
.weave::after{content:'';position:absolute;inset:0;box-shadow:inset 0 1px 0 rgba(0,0,0,.45),inset 0 -1px 0 rgba(0,0,0,.45);}

:root{
    --ok:#8fd19e;
    --ok-bg:rgba(143,209,158,.1);
    --ok-line:rgba(143,209,158,.28);
    --closed:#e6a68c;
    --closed-bg:rgba(230,166,140,.1);
    --closed-line:rgba(230,166,140,.3);
    --shadow-float:0 50px 90px -40px rgba(0,0,0,.95);
}

/* ── ACCESSIBILITY + PAGE CHROME ─────────────────────────────────────────── */
.skip-link{
    position:absolute;left:12px;top:-64px;z-index:2000;padding:10px 16px;border-radius:var(--r-sm);
    background:var(--gold);color:var(--hearth);font-family:var(--ui);font-size:var(--fs-sm);font-weight:600;
    transition:top .2s var(--ease);
}
.skip-link:focus{top:12px;}
/* A 2px gold line that fills as you read down the page. */
.scroll-progress{
    position:fixed;top:0;left:0;right:0;height:2px;z-index:1002;pointer-events:none;
    transform-origin:0 50%;transform:scaleX(var(--progress,0));
    background:linear-gradient(90deg,var(--gold-deep),var(--gold-pale));
}

/* ── SHIMMER RAIN — soft upward-drifting gold flecks, behind #feedback only ──
   Previously also layered behind #about; removed from there (see the About
   section notes) because it was the main source of scroll jank when
   stacked on top of About's parallax + light-sweep + glass card. It still
   works well as a single, isolated effect here since #feedback has no
   other animated background layers competing with it.
   `bottom` is animated in %, not vh, so every span rises the full height of
   its OWN .shimmer-rain container -- a full sweep whether that container is
   a 900px hero-sized section or a 500px card strip, instead of the old vh
   version which could clip out almost immediately on a shorter section. */
.shimmer-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.shimmer-rain span{
    position:absolute;bottom:-6%;
    width:var(--sz,3px);height:var(--sz,3px);border-radius:50%;
    background:radial-gradient(circle,#fff6e0 0%,rgba(245,231,186,.95) 32%,rgba(201,162,78,.7) 62%,transparent 78%);
    box-shadow:0 0 7px 2px rgba(201,162,78,.6),0 0 14px 5px rgba(201,162,78,.22);
    opacity:0;
    animation:shimmerRise var(--dur,9s) ease-in-out infinite;
    animation-delay:var(--delay,0s);
    will-change:bottom,transform,opacity;
}
@keyframes shimmerRise{
    0%  {bottom:-6%;opacity:0;transform:translateX(0) scale(.5);}
    10% {opacity:var(--peak,.85);}
    50% {transform:translateX(var(--drift,16px)) scale(1.05);}
    88% {opacity:var(--peak,.85);}
    100%{bottom:112%;opacity:0;transform:translateX(calc(var(--drift,16px) * 2)) scale(.55);}
}
/* Sits behind the testimonial cards -- .container is lifted above it below
   (#feedback > .container) so the cards render solid on top and the flecks
   only show through the gaps and padding around them. */
@media (prefers-reduced-motion:reduce){.shimmer-rain{display:none;}}
@media (max-width:640px){.shimmer-rain span{transform:scale(.85);}}

/* ── EMBER GLOW — a few soft golden bokeh orbs drifting slowly, used behind
   #about. Deliberately few elements (6) and transform/opacity ONLY -- no
   layout-triggering properties, and the blur is a static value rather than
   an animated one -- so it costs the browser almost nothing to run, even
   layered under About's existing parallax, moving light-sweep and glass
   backdrop-filter card. This is now the ONLY moving background layer in
   About; the old shimmer-rain field that used to double up here has been
   removed to fix the scroll lag it caused. */
.ember-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3;}
.ember-glow span{
    position:absolute;
    width:var(--sz,120px);height:var(--sz,120px);border-radius:50%;
    background:radial-gradient(circle,rgba(227,196,123,.5) 0%,rgba(201,162,78,.22) 45%,transparent 72%);
    filter:blur(6px);
    opacity:0;
    animation:emberDrift var(--dur,16s) ease-in-out infinite;
    animation-delay:var(--delay,0s);
    will-change:transform,opacity;
}
@keyframes emberDrift{
    0%  {transform:translate3d(0,0,0) scale(.7);opacity:0;}
    18% {opacity:var(--peak,.55);}
    50% {transform:translate3d(var(--dx,26px),var(--dy,-90px),0) scale(1);}
    82% {opacity:var(--peak,.55);}
    100%{transform:translate3d(calc(var(--dx,26px) * 1.6),calc(var(--dy,-90px) * 1.9),0) scale(.6);opacity:0;}
}
@media (prefers-reduced-motion:reduce){.ember-glow{display:none;}}

/* section headings */
.section-head{margin-bottom:clamp(36px,5vw,56px);max-width:640px;}
.section-head.center{margin-inline:auto;text-align:center;}
.section-title{font-size:var(--fs-2xl);font-weight:700;line-height:1.08;letter-spacing:-.025em;color:var(--cream);}
.section-lead{margin-top:14px;color:var(--muted);font-size:var(--fs-md);max-width:52ch;}
.section-head.center .section-lead{margin-inline:auto;}

/* one quiet reveal: fade + small lift */
.reveal{transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);}
.js .reveal{opacity:0;transform:translateY(28px);}
.js .reveal.in-view{opacity:1;transform:none;}
/* Directional entrances: the map drifts in from the left, its card from the right. */
.js .map-frame.reveal:not(.in-view){transform:translateX(-32px);}
.js .visit-card.reveal:not(.in-view){transform:translateX(32px);}
/* Section headings rise in word by word as they arrive -- the same motion
   as the hero title. JS wraps each word in a mask; without JS (or with
   reduced motion) the heading is left as plain text. */
.js .sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;}
.js .sw > span{display:inline-block;transform:translateY(108%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--w) * 70ms + 150ms);}
.js .in-view .sw > span{transform:none;}

/* Small gold kicker above each section title; its rule draws in on reveal. */
.eyebrow{
    display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;
    font-family:var(--ui);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.eyebrow::before,.section-head.center .eyebrow::after,.cta-band .eyebrow::after{
    content:'';width:28px;height:1px;background:currentColor;transform-origin:left center;
    transition:transform .9s var(--ease-out) .2s;
}
.section-head.center .eyebrow::after,.cta-band .eyebrow::after{transform-origin:right center;}
.js .reveal:not(.in-view) .eyebrow::before,
.js .reveal:not(.in-view) .eyebrow::after{transform:scaleX(0);}

/* Children of a [data-stagger] group rise in one after another. The rule is
   dropped (.stagger-done) once the entrance has played, so each child's own
   hover transitions work normally afterwards. */
.js [data-stagger]:not(.stagger-done) > *{
    opacity:0;transform:translateY(22px);
    transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
    transition-delay:calc(var(--si,0) * 90ms);
}
.js [data-stagger].in-view:not(.stagger-done) > *{opacity:1;transform:none;}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn{
    --h:46px;
    position:relative;isolation:isolate;overflow:hidden;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:var(--h);padding:0 22px;border-radius:var(--r-sm);
    font-family:var(--ui);font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em;white-space:nowrap;
    transition:transform .35s var(--ease),background-color .3s,color .3s,border-color .3s,box-shadow .35s var(--ease);
}
.btn i{font-size:.9em;}
.btn--gold{
    background:linear-gradient(135deg,var(--gold-pale),var(--gold) 55%,var(--gold-deep));
    color:var(--hearth);
    box-shadow:0 14px 30px -16px rgba(201,162,78,.8),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--gold::after{
    content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
    translate:-120% 0;transition:translate .8s var(--ease);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 20px 36px -16px rgba(201,162,78,.9),inset 0 1px 0 rgba(255,255,255,.35);}
.btn--gold:hover::after{translate:120% 0;}
.btn--line{border:1px solid var(--line-2);color:var(--gold-pale);}
.btn--line:hover{border-color:var(--gold);background:rgba(201,162,78,.1);color:var(--cream);}
.btn--quiet{padding-inline:8px;color:var(--cream);}
.btn--quiet i{color:var(--gold);}
.btn--quiet:hover{color:var(--gold-pale);}
.btn--dark{background:var(--hearth);color:var(--gold-pale);}
.btn--dark:hover{color:var(--cream);transform:translateY(-2px);box-shadow:0 16px 28px -16px rgba(25,20,16,.9);}
.btn--sm{--h:38px;padding:0 16px;font-size:var(--fs-xs);}
.btn--lg{--h:54px;padding:0 30px;font-size:.95rem;}

/* ── NAVBAR — full-width, docked to the top; solidifies once you scroll ─── */
.site-nav{position:fixed;inset:0 0 auto;z-index:1000;pointer-events:none;}
.nav-inner{
    pointer-events:auto;position:relative;
    width:100%;height:var(--nav-h);
    display:flex;align-items:center;gap:20px;padding:0 var(--gutter);
    border-radius:0;border-bottom:1px solid transparent;
    transition:height .45s var(--ease),background-color .45s,border-color .45s,box-shadow .45s;
}
.site-nav.scrolled .nav-inner{
    height:calc(var(--nav-h) - 8px);
    background:rgba(25,20,16,.9);border-color:var(--line);
    backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:0 22px 44px -28px rgba(0,0,0,.95);
}
/* while the full-screen menu is open the bar would sit over it — drop it */
.site-nav:has(~ .mobile-menu.open) .nav-inner{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}

.nav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.nav-logo img{width:40px;height:40px;border-radius:50%;object-fit:cover;filter:brightness(0) invert(1);}
.nav-logo-text{display:flex;flex-direction:column;line-height:1.1;}
.nav-logo-text strong{font-family:var(--ui);font-size:1.15rem;font-weight:800;letter-spacing:.04em;}
.nav-logo-text span{font-family:var(--ui);font-size:.68rem;color:var(--gold);font-weight:500;}

.nav-links{flex:1;display:flex;justify-content:center;gap:2px;}
.nav-links a{
    position:relative;padding:9px 16px;border-radius:var(--r-sm);
    font-family:var(--ui);font-size:var(--fs-sm);font-weight:500;color:var(--cream-2);
    transition:color .3s,background-color .3s;
}
.nav-links a:hover{color:var(--cream);background:rgba(245,239,228,.05);}
.nav-links a.active-link{color:var(--gold-pale);background:rgba(201,162,78,.11);}

.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;}
.nav-auth{display:flex;gap:8px;align-items:center;}

/* Just the three lines -- no circle or border. The 44px box stays as the
   (invisible) tap target; the radius only shapes the keyboard focus ring. */
.hamburger{
    display:none;width:44px;height:44px;border-radius:10px;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.hamburger span{width:22px;height:2px;background:var(--cream);border-radius:2px;transition:transform .35s var(--ease),opacity .25s,background-color .25s;}
.hamburger:hover span{background:var(--gold-pale);}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-account .fa-user{font-size:.8em;}
/* ── MOBILE MENU ─────────────────────────────────────────────────────────── */
.mobile-menu{
    position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;
    padding:calc(var(--nav-h) + 48px) var(--gutter) 40px;overflow-y:auto;
    background:
        radial-gradient(90% 50% at 100% 0%,rgba(201,162,78,.14),transparent 65%),
        linear-gradient(170deg,var(--hearth-2),var(--hearth));
    opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.mobile-menu.open{opacity:1;visibility:visible;}
.mobile-menu-links a{
    display:block;padding:14px 0;border-bottom:1px solid var(--line);
    font-family:var(--ui);font-size:clamp(1.6rem,7vw,2.2rem);font-weight:700;letter-spacing:-.02em;
    opacity:0;translate:0 14px;
    transition:opacity .5s var(--ease-out),translate .5s var(--ease-out),color .3s;
}
.mobile-menu-links a:hover{color:var(--gold-pale);}
.mobile-menu.open .mobile-menu-links a{opacity:1;translate:0;transition-delay:calc(var(--i) * 55ms + 100ms);}
.mobile-menu-auth{display:flex;gap:10px;margin-top:32px;}
.mobile-menu-auth .btn{flex:1;}
.mobile-menu-foot{margin-top:auto;padding-top:32px;display:flex;gap:10px;}
.mobile-menu-foot a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--gold-pale);}

.mobile-menu-book{margin-top:12px;}
.mobile-menu-book .btn{width:100%;}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero{
    position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    overflow:hidden;isolation:isolate;
    padding:calc(var(--nav-h) + 56px) 0 120px;
}
.hero-parallax{position:absolute;inset:0;z-index:-2;will-change:transform;}
.hero-bg{
    position:absolute;top:-4%;left:-4%;width:108%;height:124%;
    background:url('../images/bg.jpg') center/cover no-repeat;
    animation:heroSettle 2.4s var(--ease-out) both, heroDrift 28s ease-in-out 2.4s infinite alternate;
}
@keyframes heroSettle{from{transform:scale(1.1);filter:brightness(.5);}to{transform:scale(1);filter:none;}}
/* A slow Ken Burns drift once the page has settled. */
@keyframes heroDrift{from{transform:scale(1) translate(0,0);}to{transform:scale(1.07) translate(-1.5%,-1.2%);}}
.hero-overlay{
    position:absolute;inset:0;z-index:-1;
    background:
        radial-gradient(70% 60% at 78% 45%,rgba(201,162,78,.12),transparent 70%),
        linear-gradient(0deg,var(--hearth) 0%,rgba(25,20,16,.35) 38%,rgba(25,20,16,.6) 100%),
        linear-gradient(95deg,rgba(25,20,16,.95) 0%,rgba(25,20,16,.78) 42%,rgba(25,20,16,.35) 100%);
}
.hero-content{max-width:780px;}
.hero-title{
    font-size:clamp(2.9rem,7.2vw,6.4rem);font-weight:800;line-height:.96;letter-spacing:-.045em;
    color:var(--cream);max-width:11ch;
}
/* Each word rises out of its own mask, one after another. */
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;}
.hw > span{display:inline-block;transform:translateY(108%);animation:wordUp 1s var(--ease-out) forwards;animation-delay:calc(var(--w) * 95ms + 250ms);}
.hw-accent > span{color:var(--gold-pale);}
@keyframes wordUp{to{transform:none;}}
.hero-sub{margin-top:26px;max-width:46ch;font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--cream-2);line-height:1.65;}
.hero-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:36px;}

.hero-in{opacity:0;animation:riseIn 1s var(--ease-out) forwards;animation-delay:calc(var(--i) * 110ms + 250ms);}
@keyframes riseIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

/* Scroll cue, bottom-centre of the hero. `translate` centres it, so the
   entrance animation's `transform` never fights the centring. */
.hero-scroll{
    position:absolute;left:50%;bottom:26px;z-index:2;translate:-50% 0;
    display:inline-flex;flex-direction:column;align-items:center;gap:10px;
    font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
    transition:color .3s;
}
.hero-scroll:hover{color:var(--gold-pale);}
.hero-scroll-line{position:relative;width:1px;height:44px;overflow:hidden;background:var(--line);}
.hero-scroll-line::after{content:'';position:absolute;left:0;top:0;width:1px;height:45%;background:var(--gold);animation:scrollCue 2.2s var(--ease) infinite;}
@keyframes scrollCue{0%{transform:translateY(-100%);}100%{transform:translateY(240%);}}

/* Open / closed dot, used by the Visit card. */
.status-dot{position:relative;width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--ok);}
.status-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:statusPulse 2.4s ease-out infinite;}
.status-dot.is-closed{background:var(--closed);}
.status-dot.is-closed::after{display:none;}
@keyframes statusPulse{0%{transform:scale(1);opacity:.6;}100%{transform:scale(3);opacity:0;}}

/* ── ABOUT ───────────────────────────────────────────────────────────────── */
#about{
    background:
        radial-gradient(55% 45% at 90% 15%,rgba(201,162,78,.07),transparent 70%),
        var(--hearth);
    overflow:hidden;isolation:isolate;
}
.about-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;}
#about > .container{position:relative;z-index:1;}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:clamp(40px,6vw,96px);align-items:center;}
.about-copy .section-title{font-size:clamp(2rem,4vw,3.1rem);}
.concept-copy{margin-top:20px;color:var(--cream-2);font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.85;max-width:58ch;}
.concept-copy strong{color:var(--gold-pale);font-weight:600;}
.about-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px;padding-top:30px;border-top:1px solid var(--line);}
.stat-num{display:block;font-family:var(--ui);font-size:clamp(2.1rem,3.8vw,2.9rem);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--gold-pale);font-variant-numeric:tabular-nums;}
.stat-label{display:block;margin-top:10px;font-family:var(--ui);font-size:var(--fs-xs);color:var(--muted);line-height:1.4;}

.about-media{position:relative;padding:0 0 56px 56px;}
.about-media-main{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-lg);border:1px solid var(--line-2);box-shadow:var(--shadow);}
.about-media-main img{
    position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform;
    transition:clip-path 1.4s var(--ease-out),scale 1.8s var(--ease-out);
}
.about-media-inset{
    position:absolute;left:0;bottom:0;width:44%;aspect-ratio:1;overflow:hidden;
    border-radius:20px;border:6px solid var(--hearth);box-shadow:var(--shadow-float);
    transition:transform .6s var(--ease),opacity .9s ease .5s,translate 1.2s var(--ease-out) .5s;
}
/* `scale` / `translate` / clip-path are separate from the parallax `transform`
   JS puts on the photo, so the entrance and the parallax never clash. */
.js .about-media:not(.in-view) .about-media-main img{clip-path:inset(14% 12% 14% 12%);scale:1.18;}
.js .about-media:not(.in-view) .about-media-inset{opacity:0;translate:-28px 28px;}
.about-media-inset img{width:100%;height:100%;object-fit:cover;}
.about-media:hover .about-media-inset{transform:translate(-6px,6px) rotate(-2deg);}


/* ── MENU ────────────────────────────────────────────────────────────────── */
#menu{background:var(--hearth);}
.menu-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:30px;}
.menu-header .section-head{margin-bottom:0;}
.menu-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.menu-search{position:relative;width:min(300px,100%);}
.menu-search input{
    width:100%;height:44px;padding:0 44px 0 42px;border-radius:var(--r-sm);
    background:var(--kape);border:1px solid var(--line);color:var(--cream);
    font-family:var(--ui);font-size:var(--fs-sm);
    transition:border-color .3s,box-shadow .3s;
}
.menu-search input::placeholder{color:var(--muted);}
.menu-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,78,.16);}
.menu-search > i{position:absolute;left:16px;top:50%;translate:0 -50%;color:var(--gold);font-size:.8rem;pointer-events:none;}
.menu-search-clear{
    position:absolute;right:6px;top:50%;translate:0 -50%;width:32px;height:32px;border-radius:50%;
    display:none;place-items:center;color:var(--muted);font-size:.75rem;transition:color .2s,background-color .2s;
}
.menu-search.has-value .menu-search-clear{display:grid;}
.menu-search-clear:hover{color:var(--gold-pale);background:rgba(201,162,78,.14);}

.menu-chips-bar{margin-bottom:24px;}
/* One row at every width that scrolls sideways instead of wrapping. The
   edge fades only show on a side that has more chips to scroll to (JS
   toggles .fade-left / .fade-right), so the row never looks clipped. */
.menu-chips-scroll{
    position:relative;display:flex;gap:8px;flex-wrap:nowrap;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;
    --fade-l:0px;--fade-r:0px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);
}
.menu-chips-scroll::-webkit-scrollbar{display:none;}
.menu-chips-scroll.fade-left{--fade-l:56px;}
.menu-chips-scroll.fade-right{--fade-r:56px;}
.menu-chips-scroll.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none;}
.menu-chips-scroll.is-dragging .menu-chip{pointer-events:none;}
.menu-chip{scroll-snap-align:start;}
.menu-chip{
    display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--r-sm);
    border:1px solid var(--line);color:var(--cream-2);
    font-family:var(--ui);font-size:var(--fs-xs);font-weight:500;white-space:nowrap;flex-shrink:0;
    transition:border-color .25s,color .25s,background-color .25s;
}
.menu-chip:hover{border-color:var(--line-2);color:var(--cream);}
.menu-chip.active{background:var(--cream);border-color:var(--cream);color:var(--hearth);}

.menu-panel{position:relative;}
.menu-grid-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}

.menu-item{
    container:dish / inline-size;
    display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
    background:var(--kape);border:1px solid rgba(201,162,78,.08);border-radius:18px;
    transition:border-color .35s,box-shadow .45s var(--ease),opacity .3s var(--ease),transform .6s var(--ease-out);
}
.menu-item:hover{border-color:var(--line-2);box-shadow:0 26px 44px -26px rgba(0,0,0,.9);transform:translateY(-4px);}
.menu-item:focus-visible{outline-offset:2px;}
.menu-item.hiding{opacity:0;transform:scale(.96);pointer-events:none;}
.js .menu-item:not(.reveal-in){opacity:0;transform:translateY(26px);}
.menu-item.reveal-in{opacity:1;}

.menu-item-img{
    position:relative;aspect-ratio:4/3;overflow:hidden;flex-shrink:0;
    background:linear-gradient(145deg,var(--kape-2),var(--hearth-2));
    display:grid;place-items:center;color:rgba(201,162,78,.5);font-size:2rem;
}
.menu-item-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:transform .7s var(--ease),opacity .45s ease;}
.menu-item-img img.img-loaded{opacity:1;}
.menu-item:hover .menu-item-img img{transform:scale(1.06);}
.menu-item-img::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,8,6,.35) 0%,transparent 34%);}
.menu-item-hover{
    position:absolute;inset:0;z-index:3;display:grid;place-items:center;
    background:rgba(10,8,6,.5);opacity:0;pointer-events:none;
    font-family:var(--ui);font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);
    transition:opacity .3s ease;
}
.menu-item:hover .menu-item-hover,
.menu-item:focus-visible .menu-item-hover{opacity:1;}
.menu-item-cat{
    position:absolute;top:10px;left:10px;z-index:2;padding:5px 11px;border-radius:var(--r-sm);
    font-family:var(--ui);font-size:.68rem;font-weight:500;color:var(--cream);
    background:rgba(10,8,6,.55);border:1px solid rgba(245,239,228,.14);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.menu-item-info{flex:1;display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;}
.menu-item-info h4{font-size:1.02rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--cream);}
.menu-item-info p{font-size:var(--fs-sm);color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.menu-item-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:10px;}
.menu-item-price{font-family:var(--ui);font-size:1.12rem;font-weight:700;color:var(--gold-pale);letter-spacing:-.01em;}

@container dish (max-width:220px){
    .menu-item-info{gap:3px;padding:11px 12px 13px;}
    .menu-item-info h4{font-size:.85rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    .menu-item-info p{font-size:.76rem;line-height:1.45;}
    .menu-item-foot{padding-top:8px;}
    .menu-item-price{font-size:.92rem;}
    .menu-item-hover{font-size:.66rem;}
    .menu-item-cat{top:7px;left:7px;padding:3px 8px;font-size:.58rem;}
}

.menu-empty{grid-column:1/-1;text-align:center;padding:64px 20px;color:var(--muted);}
.menu-empty i{display:block;margin:0 auto 12px;font-size:1.3rem;color:var(--gold);}
.menu-empty strong{display:block;font-family:var(--ui);color:var(--cream);font-weight:600;margin-bottom:4px;}

/* card badges and the collapsed-grid "Show all" control */
.menu-item-badge{
    position:absolute;top:10px;right:10px;z-index:2;padding:4px 10px;border-radius:999px;
    font-family:var(--ui);font-size:.64rem;font-weight:700;letter-spacing:.03em;
}
.menu-item-badge--fav{background:var(--gold);color:var(--hearth);}
.menu-item-badge--new{background:var(--cream);color:var(--hearth);}
.js .menu-item.is-over{display:none;}
.menu-more{display:none;justify-content:center;margin-top:32px;}
.js .menu-more:not([hidden]){display:flex;}
.menu-more .btn i{transition:transform .35s var(--ease);}
.menu-more .btn[aria-expanded="true"] i{transform:rotate(180deg);}

/* ── DISH MODAL ──────────────────────────────────────────────────────────── */
.dish-modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;}
.dish-modal[hidden]{display:none;}
.dish-modal-backdrop{
    position:absolute;inset:0;background:rgba(8,6,5,.82);
    backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);
    animation:dishFade .3s var(--ease) both;
}
@keyframes dishFade{from{opacity:0;}to{opacity:1;}}
@keyframes dishPop{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:none;}}

.dish-stack-wrap{position:relative;width:min(540px,100%);z-index:1;animation:dishPop .5s var(--ease-out) both;}
.dish-stack{position:relative;height:clamp(460px,66vh,600px);}

.dish-stack-layer{
    position:absolute;inset:0;overflow:hidden;
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,var(--kape) 0%,var(--hearth-2) 100%);
    border:1px solid var(--line-2);border-radius:22px;
    box-shadow:0 34px 60px -26px rgba(0,0,0,.9);
    transition:transform .55s var(--ease),opacity .45s ease,filter .45s ease,box-shadow .4s ease;
}
.dish-stack-layer.no-anim{transition:none!important;}
/* Coverflow: the open dish sits in front and up to two neighbours fan out
   on each side, each step further out smaller and darker and tucked behind
   the one before it. JS only ever sets data-slot -- every position lives
   here, so the whole row slides as one when it moves. Slot 3 is the
   off-stage spot a card enters from or leaves to. */
.dish-stack-layer[data-slot="0"]{z-index:10;}
.dish-stack-layer[data-slot="-1"],.dish-stack-layer[data-slot="1"]{z-index:8;cursor:pointer;filter:brightness(.5) saturate(.85);}
.dish-stack-layer[data-slot="-1"]{transform:translateX(-60%) scale(.8);}
.dish-stack-layer[data-slot="1"]{transform:translateX(60%) scale(.8);}
.dish-stack-layer[data-slot="-2"],.dish-stack-layer[data-slot="2"]{z-index:6;cursor:pointer;filter:brightness(.3) saturate(.75);}
.dish-stack-layer[data-slot="-2"]{transform:translateX(-106%) scale(.64);}
.dish-stack-layer[data-slot="2"]{transform:translateX(106%) scale(.64);}
.dish-stack-layer[data-slot="-3"],.dish-stack-layer[data-slot="3"]{z-index:4;opacity:0;pointer-events:none;}
.dish-stack-layer[data-slot="-3"]{transform:translateX(-140%) scale(.5);}
.dish-stack-layer[data-slot="3"]{transform:translateX(140%) scale(.5);}
.dish-stack-layer[data-slot="-1"]:hover,.dish-stack-layer[data-slot="1"]:hover{filter:brightness(.7) saturate(.9);}
.dish-stack-layer[data-slot="-2"]:hover,.dish-stack-layer[data-slot="2"]:hover{filter:brightness(.48) saturate(.85);}

.dish-card-media{position:relative;height:44%;flex-shrink:0;overflow:hidden;background:var(--hearth-2);display:grid;place-items:center;}
.dish-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.dish-card-media i{font-size:2.9rem;color:rgba(201,162,78,.4);}
.dish-card-scrim{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,8,6,.5) 0%,rgba(10,8,6,0) 32%,rgba(10,8,6,.12) 68%,var(--kape) 100%);
}
.dish-card-cat{
    position:absolute;top:16px;left:16px;padding:6px 13px;border-radius:var(--r-sm);
    font-family:var(--ui);font-size:.72rem;font-weight:500;color:var(--cream);
    background:rgba(10,8,6,.55);border:1px solid rgba(245,239,228,.16);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.dish-card-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:22px 26px 22px;}
.dish-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.dish-card-head h3{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;min-width:0;color:var(--cream);}
.dish-card-price{font-family:var(--ui);font-size:1.25rem;font-weight:800;color:var(--gold-pale);white-space:nowrap;flex-shrink:0;}
.dish-card-body p{margin-top:10px;color:var(--cream-2);font-size:.95rem;line-height:1.65;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.dish-card-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.dish-card-counter{font-family:var(--ui);font-size:var(--fs-xs);color:var(--muted);}

.dish-nav,.dish-close{
    position:absolute;z-index:20;width:46px;height:46px;border-radius:50%;
    display:grid;place-items:center;font-size:.9rem;color:var(--cream);
    background:rgba(10,8,6,.7);border:1px solid rgba(245,239,228,.2);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    box-shadow:0 12px 26px -12px rgba(0,0,0,.8);
    transition:background-color .25s,color .25s,border-color .25s,transform .35s var(--ease),box-shadow .3s ease;
}
.dish-nav{top:36%;transform:translateY(-50%);}
.dish-nav-prev{left:-14px;}
.dish-nav-next{right:-14px;}
.dish-close{top:-14px;right:-14px;}
.dish-nav:hover:not(:disabled){background:var(--gold);color:var(--hearth);border-color:var(--gold);transform:translateY(-50%) scale(1.1);}
.dish-close:hover{background:var(--gold);color:var(--hearth);border-color:var(--gold);transform:rotate(90deg);}
.dish-nav:disabled{opacity:0;pointer-events:none;}


/* ── RESERVE — how booking works, from the real settings ────────────────── */
#reserve{background:var(--hearth-2);overflow:hidden;}
.steps{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:8px;counter-reset:step;}
/* The line joining the three dots draws itself in as the section arrives. */
.steps::before{
    content:'';position:absolute;top:28px;left:28px;right:0;height:1px;
    background:linear-gradient(90deg,var(--gold-deep),var(--line-2) 70%,transparent);
    transform-origin:left center;transform:scaleX(0);transition:transform 1.6s var(--ease-out) .2s;
}
.steps.in-view::before{transform:scaleX(1);}
.step{position:relative;}
.step-dot{
    position:relative;z-index:1;width:56px;height:56px;margin-bottom:22px;border-radius:50%;display:grid;place-items:center;
    background:var(--hearth-2);border:1px solid var(--line-2);color:var(--gold-pale);font-size:1.05rem;
    transition:background-color .4s,color .4s,border-color .4s,transform .45s var(--ease);
}
.step:hover .step-dot{background:var(--gold);border-color:var(--gold);color:var(--hearth);transform:scale(1.06);}
.step-num{display:block;font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.step h3{margin-top:8px;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:var(--cream);}
.step p{margin-top:8px;font-size:var(--fs-sm);color:var(--muted);line-height:1.7;}
.step p strong{color:var(--cream-2);font-weight:600;}
.reserve-cta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:clamp(44px,5vw,60px);}
.reserve-note{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:6px;
    font-family:var(--ui);font-size:var(--fs-xs);color:var(--muted);
}
.reserve-note i{color:var(--gold);}

/* ── FEEDBACK ────────────────────────────────────────────────────────────── */
#feedback{background:var(--hearth-2);overflow:hidden;isolation:isolate;}
#feedback > .container{position:relative;z-index:1;}
.feedback-carousel-controls{display:flex;justify-content:center;margin-bottom:22px;}
.carousel-toggle-btn{
    display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px;border-radius:var(--r-sm);
    border:1px solid var(--line-2);color:var(--cream-2);font-family:var(--ui);font-size:var(--fs-xs);font-weight:500;
    transition:border-color .3s,color .3s;
}
.carousel-toggle-btn:hover{border-color:var(--gold);color:var(--gold-pale);}
.carousel-toggle-btn i{color:var(--gold);font-size:.7rem;width:12px;text-align:center;}
.feedback-track-viewport{
    display:flex;overflow:hidden;padding:8px 0 16px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.feedback-track{display:flex;gap:20px;width:max-content;flex-shrink:0;opacity:0;transition:opacity .5s ease;will-change:transform;}
.feedback-track.is-ready{opacity:1;}
.feedback-track.is-scrolling{animation:feedbackScroll var(--scroll-duration,60s) linear infinite;}
.feedback-track-viewport:hover .feedback-track,
.feedback-track-viewport:focus-within .feedback-track,
.feedback-track.is-paused,
.feedback-track.is-touch-paused{animation-play-state:paused;}
@keyframes feedbackScroll{from{transform:translateX(0);}to{transform:translateX(var(--scroll-distance,-50%));}}

.feedback-card{
    flex:0 0 340px;width:340px;min-height:260px;padding:28px 28px 22px;border-radius:var(--r-lg);
    display:flex;flex-direction:column;gap:18px;
    background:var(--kape);border:1px solid var(--line);
    transition:border-color .3s,transform .3s var(--ease),box-shadow .3s var(--ease);
}
.feedback-card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 20px 40px -22px rgba(0,0,0,.85);}
.feedback-mark{font-family:var(--read);font-size:4rem;line-height:.5;height:24px;color:var(--gold);}
.feedback-quote{
    flex:1;color:var(--cream);font-size:1.02rem;line-height:1.7;
    display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.feedback-footer{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line);}
.feedback-avatar{
    width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--gold-pale),var(--gold-deep));
    font-family:var(--ui);font-weight:800;color:var(--hearth);font-size:.9rem;
}
.feedback-name{font-family:var(--ui);font-size:var(--fs-sm);font-weight:600;}
.feedback-date{font-family:var(--ui);font-size:.74rem;color:var(--muted);}
.feedback-empty{text-align:center;padding:48px 20px;color:var(--muted);}


/* ── VISIT ───────────────────────────────────────────────────────────────── */
#location{background:var(--hearth);}
.visit-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);gap:20px;align-items:stretch;}
.map-frame{position:relative;min-height:clamp(360px,40vw,520px);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--kape);box-shadow:var(--shadow);}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) sepia(.16) contrast(1.04);}
.visit-card{
    display:flex;flex-direction:column;padding:clamp(24px,3vw,34px);border-radius:var(--r-lg);
    background:linear-gradient(170deg,var(--kape),var(--hearth-2));border:1px solid var(--line);box-shadow:var(--shadow);
}
.status-pill{
    align-self:flex-start;display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border-radius:999px;
    font-family:var(--ui);font-size:.76rem;font-weight:600;
    background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line);
}
.status-pill.is-closed{background:var(--closed-bg);color:var(--closed);border-color:var(--closed-line);}
.visit-card h3{margin-top:18px;font-size:1.45rem;font-weight:700;letter-spacing:-.02em;color:var(--cream);}
.visit-list{margin-top:14px;}
.visit-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--line);}
.visit-row:first-child{border-top:0;}
.visit-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(201,162,78,.1);color:var(--gold-pale);font-size:.88rem;}
.visit-label{display:block;font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.visit-value{display:block;margin-top:3px;font-family:var(--ui);font-size:var(--fs-sm);color:var(--cream);line-height:1.5;overflow-wrap:anywhere;}
a.visit-value:hover{color:var(--gold-pale);}
.visit-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:22px;}
.visit-actions .btn{flex:1 1 150px;}

/* ── CLOSING CALL TO ACTION ──────────────────────────────────────────────── */
.cta-band{position:relative;overflow:hidden;isolation:isolate;padding:clamp(96px,12vw,150px) 0;text-align:center;}
.cta-band-bg{position:absolute;inset:-12% 0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat;will-change:transform;}
.cta-band::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:
        radial-gradient(60% 70% at 50% 50%,rgba(25,20,16,.45),rgba(25,20,16,.9) 100%),
        linear-gradient(180deg,rgba(25,20,16,.88),rgba(25,20,16,.6) 50%,rgba(25,20,16,.94));
}
.cta-band h2{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:800;line-height:1.02;letter-spacing:-.04em;color:var(--cream);}
.cta-band-lead{max-width:50ch;margin:18px auto 0;color:var(--cream-2);font-size:clamp(1rem,1.4vw,1.12rem);}
.cta-band .hero-cta{justify-content:center;}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.site-footer{background:var(--hearth-2);font-family:var(--ui);border-top:1px solid var(--line);}
.footer-top{padding-top:clamp(56px,8vw,88px);}
.footer-grid{
    display:grid;grid-template-columns:1.5fr .9fr .9fr 1.2fr;
    gap:clamp(28px,4vw,64px);
    padding-bottom:48px;
}
.footer-brand-logo{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.footer-brand-logo img{width:42px;height:42px;border-radius:50%;object-fit:cover;filter:brightness(0) invert(1);}
.footer-brand-logo span{font-family:inherit;font-weight:800;font-size:1.15rem;letter-spacing:.04em;}
.footer-col p{color:var(--muted);font-size:var(--fs-sm);max-width:34ch;line-height:1.7;}
.footer-col h4{font-size:var(--fs-sm);font-weight:600;color:var(--gold-pale);margin-bottom:18px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col ul a{
    position:relative;display:inline-block;font-family:inherit;color:var(--cream-2);font-size:var(--fs-sm);
    transition:color .3s,translate .3s var(--ease);
}
.footer-col ul a:hover{color:var(--gold-pale);translate:4px 0;}
.footer-social{display:flex;gap:8px;margin-top:20px;}
.footer-social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--cream-2);transition:background-color .3s,color .3s,border-color .3s,transform .3s var(--ease);}
.footer-social a:hover{background:var(--gold);color:var(--hearth);border-color:var(--gold);transform:translateY(-3px);}
.footer-contact-item{display:flex;gap:12px;align-items:flex-start;font-family:inherit;color:var(--cream-2);font-size:var(--fs-sm);line-height:1.5;margin-bottom:14px;}
.footer-contact-item i{color:var(--gold);margin-top:4px;width:15px;flex-shrink:0;}
.footer-contact-item a:hover{color:var(--gold-pale);}
.footer-wordmark{
    font-family:inherit;font-weight:800;letter-spacing:-.06em;line-height:.78;text-align:center;
    font-size:clamp(4.5rem,20vw,15rem);user-select:none;margin-bottom:-.06em;pointer-events:none;
    background:linear-gradient(180deg,rgba(201,162,78,.28),rgba(201,162,78,0) 85%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.footer-bottom{
    border-top:1px solid var(--line);padding:22px 0;
    display:flex;justify-content:center;align-items:center;
    text-align:center;flex-wrap:wrap;gap:10px;
    font-family:inherit;font-size:var(--fs-xs);color:var(--muted);
}

/* ── BACK TO TOP — its ring fills as you scroll, where supported ─────────── */
.back-to-top{
    position:fixed;bottom:24px;right:24px;z-index:900;width:50px;height:50px;border-radius:50%;
    display:grid;place-items:center;background:var(--kape);color:var(--gold-pale);font-size:.95rem;
    box-shadow:0 14px 30px -12px rgba(0,0,0,.8);
    opacity:0;visibility:hidden;transform:translateY(14px);
    transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,background-color .3s,color .3s;
}
.back-to-top::before{
    content:'';position:absolute;inset:0;border-radius:50%;
    background:conic-gradient(var(--gold) var(--p),rgba(201,162,78,.2) 0);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
            mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
}
@supports (animation-timeline: scroll()){
    .back-to-top::before{animation:scrollRing linear both;animation-timeline:scroll(root);}
}
@keyframes scrollRing{to{--p:100%;}}
.back-to-top.show{opacity:1;visibility:visible;transform:none;}
.back-to-top:hover{background:var(--gold);color:var(--hearth);}


/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width:1100px){
    .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
}
@media (max-width:1024px){
    .nav-links,.nav-auth{display:none;}
    .hamburger{display:flex;}
    .about-grid{grid-template-columns:1fr;}
    .about-media{max-width:560px;}
    .visit-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
    .hero{padding-bottom:96px;}
}
@media (max-width:640px){
    :root{--nav-h:60px;}
    .nav-inner{width:100%;padding:0 6px 0 14px;}
    .nav-logo img{width:34px;height:34px;}
    .hero-cta .btn--lg{--h:50px;padding:0 24px;}
    .hero-cta .btn{flex:1 1 auto;}
    .hero-cta .btn--quiet{flex:0 0 auto;}
    .about-media{padding:0 0 40px 32px;}
    .about-stats{gap:10px;}
    .menu-header{flex-direction:column;align-items:stretch;}
    .menu-tools{flex-direction:column-reverse;align-items:stretch;}
    .menu-search{width:100%;}
    .menu-search input{font-size:16px;height:48px;} /* 16px stops iOS zoom-on-focus */
    /* Bleeds to the true screen edge on phones, where the container's own
       gutter would otherwise waste the space the fade needs. */
    .menu-chips-scroll{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);}
    .menu-chips-scroll.fade-left{--fade-l:40px;}
    .menu-chips-scroll.fade-right{--fade-r:40px;}
    .menu-grid-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .menu-item{border-radius:14px;}
    .menu-item-badge{top:7px;right:7px;padding:3px 8px;font-size:.58rem;}
    .dish-modal{padding:12px;}
    .dish-stack{height:clamp(420px,72vh,560px);}
    .dish-card-body{padding:16px 18px 18px;}
    .dish-card-head h3{font-size:1.2rem;}
    .dish-card-price{font-size:1.05rem;}
    .dish-card-foot .btn{flex:1 1 100%;}
    .dish-nav-prev{left:2px;}
    .dish-nav-next{right:2px;}
    .dish-close{top:2px;right:2px;}
    /* No room for the whole row on a phone: just an edge of each neighbour
       peeks out behind the front card, and the far ones stay hidden. */
    .dish-stack-layer[data-slot="-1"]{transform:translateX(-9%) scale(.9);}
    .dish-stack-layer[data-slot="1"]{transform:translateX(9%) scale(.9);}
    .dish-stack-layer[data-slot="-2"],.dish-stack-layer[data-slot="2"]{opacity:0;pointer-events:none;}
    /* The three booking steps become a vertical timeline. */
    .steps{grid-template-columns:1fr;row-gap:0;}
    .steps::before{display:block;top:28px;bottom:28px;left:27px;right:auto;width:1px;height:auto;transform-origin:center top;background:linear-gradient(180deg,var(--gold-deep),var(--line-2) 80%,transparent);}
    .steps:not(.in-view)::before{transform:scaleY(0);}
    .steps.in-view::before{transform:scaleY(1);}
    .step{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;padding-bottom:30px;}
    .step:last-child{padding-bottom:0;}
    .step-dot{grid-row:span 3;margin-bottom:0;}
    .step h3{margin-top:4px;}
    .reserve-cta .btn{flex:1 1 100%;}
    .visit-actions .btn{flex:1 1 100%;}
    .feedback-card{flex-basis:290px;width:290px;padding:24px 22px 20px;}
    .footer-grid{grid-template-columns:1fr;gap:32px;}
    .footer-bottom{flex-direction:column;text-align:center;}
    .back-to-top{bottom:16px;right:16px;width:46px;height:46px;}
}
@media (max-width:420px){
    .nav-logo-text span{display:none;}
    .hero-cta{flex-direction:column;align-items:stretch;}
    .feedback-card{flex-basis:260px;width:260px;}
    .about-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
    .stat-label{font-size:.72rem;}
}
@media (max-height:480px) and (orientation:landscape){
    .hero{min-height:auto;padding-top:calc(var(--nav-h) + 40px);}
    .mobile-menu{padding-top:calc(var(--nav-h) + 16px);}
    .mobile-menu-links a{padding:8px 0;font-size:1.3rem;}
}
@media (hover:none){
    .menu-item:hover{box-shadow:none;border-color:rgba(201,162,78,.08);transform:none;}
    .menu-item:hover .menu-item-img img{transform:none;}
    .feedback-card:hover{transform:none;}
    .footer-col ul a:hover{translate:0;}
}

/* reduced motion — respect the visitor's preference */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important;}
    .hero-in,.hw > span{opacity:1;transform:none;animation:none!important;}
    .hero-bg{animation:none;}
    .hero-parallax{transform:none!important;}
    .js .reveal,.js .menu-item:not(.reveal-in),.js [data-stagger] > *{opacity:1;transform:none;}
    .js .about-media .about-media-main img,.js .about-media .about-media-inset{clip-path:none;scale:1;translate:0 0;opacity:1;}
    .steps::before{transform:none!important;}
    .dish-stack-layer{transition:none!important;}
    .feedback-track{animation:none!important;opacity:1!important;}
    .feedback-track-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
}

/* ── HERO META — open/closed line under the buttons ──────────────────────── */
.hero-meta{margin-top:22px;}