/* ==========================================================================
   MARCO CAFE & BREAKFAST — Design System
   Palette sampled from the venue itself:
     · cream / greige walls and facade
     · olive-sage accent wall + garden chairs
     · mint neon of the MARCO sign, used only as a highlight
   ========================================================================== */

/* Type: Avenir Next / Avenir where the visitor has it (macOS, iOS, licensed
   Windows installs). Everyone else gets Nunito Sans — the closest free
   geometric-humanist match; same open apertures, same tall x-height, so the
   layout does not shift between the two. */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Cream — the facade and interior walls */
    --c-50:  #fdfaf3;
    --c-100: #f8f3e7;
    --c-200: #efe8d6;
    --c-300: #e3d9c1;
    --c-400: #d2c4a5;

    /* Green — the garden chairs through the accent wall */
    --g-50:  #f4f7ef;
    --g-100: #eaf0e2;
    --g-200: #d9e3cb;
    --g-300: #bfcfae;
    --g-400: #9db089;
    --g-500: #7e9163;
    --g-600: #5e7350;
    --g-700: #4a5d46;
    --g-800: #39482f;
    --g-900: #26311f;

    /* Mint — the neon sign. A highlight, never a surface. */
    --mint:      #17998a;
    --mint-lit:  #3ad9c4;
    --mint-soft: #e2f5f1;

    --g-950: #151d11;   /* the maker credit strip, one step below the footer */

    /* Reserved for destructive actions and errors only */
    --danger:      #b0453b;
    --danger-soft: #f8e9e7;

    /* Ink */
    --ink:   #232b1e;
    --ink-2: #52604a;
    --ink-3: #7d8974;

    /* Type — one family, two roles. Weight and tracking carry the hierarchy. */
    --sans: 'Avenir Next', 'Avenir', 'Avenir Next LT Pro', 'Nunito Sans',
            ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --display: var(--sans);

    /* Elevation — soft, green-tinted, never black */
    --sh-xs: 0 1px 2px rgba(38, 49, 31, .05);
    --sh-sm: 0 2px 8px rgba(38, 49, 31, .06);
    --sh-md: 0 12px 28px -12px rgba(38, 49, 31, .18);
    --sh-lg: 0 30px 60px -24px rgba(38, 49, 31, .28);

    /* Geometry */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;

    --ease: cubic-bezier(.22, 1, .36, 1);
    --t:    .35s var(--ease);

    --shell: 1200px;
    --gutter: clamp(20px, 5vw, 48px);
    --topbar-h: 38px;
    --header-h: 76px;
}

/* -------------------------------------------------------------------------
   Inner pages — editorial, image-led rhythm inspired by modern coffee houses
   ------------------------------------------------------------------------- */
body:not(.page-home) main { overflow: clip; }
body:not(.page-home) .section--top { padding-top: clamp(58px, 8vw, 105px); }
body:not(.page-home) .section-head { margin-bottom: clamp(38px, 6vw, 72px); }
body:not(.page-home) .section-head > div { max-width: 820px; }
body:not(.page-home) .section-head h1,
body:not(.page-home) .about-copy h1 { font-size: clamp(42px, 6.5vw, 88px); line-height: .94; letter-spacing: -.055em; }
body:not(.page-home) .section-head .lede { max-width: 680px; font-size: clamp(16px, 1.6vw, 20px); }
body:not(.page-home) .eyebrow { margin-bottom: 18px; letter-spacing: .18em; }

.page-about .about-grid { grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); gap: clamp(42px, 7vw, 110px); align-items: center; }
.page-about .about-media > img { aspect-ratio: 4 / 5; border-radius: 0; }
.page-about .about-media::before { display: none; }
.page-about .about-card { border-radius: 0; right: -25px; bottom: 28px; }
.page-about .about-copy p { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.8; }
.page-about .check-list { border-top: 1px solid var(--line); margin-top: 28px; }
.page-about .check-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }

.page-gallery .mosaic { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 240px; gap: 12px; }
.page-gallery .tile { border-radius: 0; }
.page-gallery .tile:nth-child(3n+1) { grid-column: span 7; grid-row: span 2; }
.page-gallery .tile:nth-child(3n+2) { grid-column: span 5; grid-row: span 1; }
.page-gallery .tile:nth-child(3n+3) { grid-column: span 5; grid-row: span 1; }
.page-gallery .tile-cap { opacity: 1; transform: none; padding: 45px 24px 22px; background: linear-gradient(transparent, rgba(8,15,7,.78)); }

.page-contact .contact-grid { grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr); border-radius: 0; box-shadow: none; background: transparent; gap: clamp(24px, 4vw, 58px); }
.page-contact .contact-info { padding: clamp(12px, 2vw, 28px) 0; }
.page-contact .contact-info h3 { font-size: clamp(28px, 3vw, 42px); }
.page-contact .contact-list { border-top: 1px solid var(--line); gap: 0; }
.page-contact .contact-list li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.page-contact .contact-map,
.page-contact .contact-map iframe { min-height: 590px; border-radius: 0; }
.page-contact .review-card { border-radius: 0; }

.page-uye .member-shell { max-width: 760px; }
.page-uye .member-tabs { border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 0; }
.page-uye .member-tabs a { border-radius: 0; padding: 15px 22px; }
.page-uye .member-tabs a.is-active { background: var(--g-800); color: var(--c-50); }
.page-uye .member-card { border-radius: 0; padding: clamp(34px, 6vw, 64px); }
.page-uye .member-form { padding-top: 10px; }

@media (max-width: 760px) {
    body:not(.page-home) .section { padding-block: 54px; }
    body:not(.page-home) .section--top { padding-top: 46px; }
    body:not(.page-home) .section-head { margin-bottom: 34px; }
    body:not(.page-home) .section-head h1,
    body:not(.page-home) .about-copy h1 { font-size: clamp(39px, 13.5vw, 58px); line-height: .94; }
    body:not(.page-home) .section-head .lede { font-size: 15px; line-height: 1.65; }

    .page-about .about-grid { display: flex; flex-direction: column; gap: 36px; }
    .page-about .about-media { width: calc(100% + (var(--gutter) * 2)); margin-inline: calc(var(--gutter) * -1); }
    .page-about .about-media > img { width: 100%; aspect-ratio: 4 / 4.8; }
    .page-about .about-card { right: var(--gutter); bottom: 18px; padding: 10px 12px; }
    .page-about .about-copy { text-align: left; }
    .page-about .hero-actions { display: grid; margin-bottom: 0; }
    .page-about .hero-actions .btn { width: 100%; }

    .page-gallery .mosaic { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 9px; margin-inline: calc(var(--gutter) * -1); }
    .page-gallery .tile,
    .page-gallery .tile:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
    .page-gallery .tile:nth-child(even) { aspect-ratio: 4 / 3; }
    .page-gallery .tile-cap { padding: 60px var(--gutter) 24px; }
    .page-gallery .tile-cap b { font-size: 22px; }

    .page-contact .contact-grid { display: flex; flex-direction: column; gap: 36px; }
    .page-contact .contact-map { order: -1; width: calc(100% + (var(--gutter) * 2)); margin-inline: calc(var(--gutter) * -1); }
    .page-contact .contact-map,
    .page-contact .contact-map iframe { min-height: 430px; }
    .page-contact .contact-info { padding: 0; }
    .page-contact .contact-info > .btn { width: 100%; }
    .page-contact .review-card { margin-top: 34px; }

    .page-uye .member-shell { padding-inline: var(--gutter); }
    .page-uye .member-card { margin-inline: calc(var(--gutter) * -1); padding: 42px var(--gutter); }
    .page-uye .member-actions { display: grid; }
    .page-uye .member-actions .btn { width: 100%; }
}

/* Reservation and editorial pages share the same open, linear treatment. */
.page-reserve .reserve { border-radius: 0; box-shadow: none; }
.page-reserve .reserve-aside { border-radius: 0; padding: clamp(34px, 5vw, 62px); }
.page-reserve .reserve-form { padding: clamp(30px, 5vw, 62px); }
.page-reserve .field input,
.page-reserve .field select,
.page-reserve .field textarea,
.page-uye .field input,
.page-uye .field select,
.page-uye .field textarea { border-radius: 0; border-width: 0 0 1px; background: transparent; padding-inline: 0; }
.page-blog .post-grid { gap: 12px; }
.page-blog .post-card { border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
.page-blog .post-card img { border-radius: 0; }
.page-blog .post-shell { max-width: 920px; }
.page-blog .post-head h1,
.page-kvkk .post-head h1 { font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: -.05em; }
.page-blog .post-cta,
.page-kvkk .post-cta { border-radius: 0; }

@media (max-width: 760px) {
    .page-reserve .reserve { margin-inline: calc(var(--gutter) * -1); }
    .page-reserve .reserve-aside,
    .page-reserve .reserve-form { padding: 38px var(--gutter); }
    .page-blog .post-grid { grid-template-columns: 1fr; gap: 8px; margin-inline: calc(var(--gutter) * -1); }
    .page-blog .post-card { border-radius: 0; }
    .page-blog .post-card-content { padding-inline: var(--gutter); }
    .page-blog .post-head h1,
    .page-kvkk .post-head h1 { font-size: clamp(38px, 12vw, 54px); }
    .page-blog .post-cta,
    .page-kvkk .post-cta { margin-inline: calc(var(--gutter) * -1); }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--c-100);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Barely-there paper grain — keeps large cream fields from looking flat */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.038'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

[hidden] { display: none !important; }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--g-300); color: var(--g-900); }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.02em;
    color: var(--g-900);
}
/* A geometric sans set large needs its tracking pulled in further than a
   serif would; without this the headline reads loose rather than composed. */
h1 { letter-spacing: -.03em; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding: clamp(64px, 9vw, 116px) 0; }
.section--tight { padding: clamp(48px, 6vw, 72px) 0; }

/**
 * First section on an interior page.
 *
 * The standard padding is tuned for a band sitting between two other bands on
 * the home page, where it reads as breathing room. Directly under the header it
 * is just a gap, and it pushes the thing the page exists for — the reservation
 * form — below the fold. Roughly 88px higher on a desktop, 44px on a phone.
 */
.section--top { padding-top: clamp(32px, 4vw, 52px); }
.section--top .section-head { margin-bottom: clamp(24px, 3vw, 36px); }
.section--cream { background: var(--c-50); }
.section--sage  { background: var(--g-50); }

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    margin-bottom: clamp(36px, 5vw, 60px);
}
.section-head > div { max-width: 640px; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--g-600);
    margin-bottom: 14px;
}
.eyebrow::before {
    content: '';
    width: 22px;
    height: 1.5px;
    background: var(--mint);
    flex: none;
}

.section-head h2,
.h-lg {
    font-size: clamp(30px, 4vw, 46px);
}

.lede {
    font-size: clamp(16px, 1.4vw, 18px);
    color: var(--ink-2);
    max-width: 58ch;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t),
                transform var(--t), box-shadow var(--t);
}
.btn i { font-size: .95em; }

.btn--primary {
    background: var(--g-700);
    color: var(--c-50);
    box-shadow: var(--sh-md);
}
.btn--primary:hover {
    background: var(--g-800);
    transform: translateY(-2px);
    box-shadow: var(--sh-lg);
}

.btn--ghost {
    background: transparent;
    color: var(--g-800);
    border: 1.5px solid var(--g-300);
}
.btn--ghost:hover {
    background: var(--g-100);
    border-color: var(--g-500);
}

.btn--light {
    background: var(--c-50);
    color: var(--g-800);
    box-shadow: var(--sh-sm);
}
.btn--light:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--sh-md); }

.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn--block { width: 100%; }

/* Text link with an animated rule */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--g-700);
    padding-bottom: 3px;
    border-bottom: 1.5px solid var(--g-300);
    transition: gap var(--t), border-color var(--t), color var(--t);
}
.link-arrow:hover { gap: 16px; color: var(--g-900); border-color: var(--g-600); }

/* --------------------------------------------------------------------------
   5. Topbar
   -------------------------------------------------------------------------- */
.topbar {
    background: var(--g-900);
    color: var(--g-200);
    font-size: 12.5px;
    letter-spacing: .01em;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
}
.topbar .shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.topbar-group { display: flex; align-items: center; gap: 22px; }
.topbar a, .topbar span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.topbar i { color: var(--g-400); font-size: 11px; }
.topbar a { transition: color var(--t); }
.topbar a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(248, 243, 231, .9);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--t), border-color var(--t), background var(--t);
}
.site-header.is-stuck {
    background: rgba(253, 250, 243, .97);
    border-bottom-color: var(--c-300);
    box-shadow: 0 6px 24px -18px rgba(38, 49, 31, .5);
}

.navbar {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Brand lockup */
.brand { display: inline-flex; align-items: center; gap: 13px; }
/* One circular medallion, used at every size the site needs. The artwork is
   already a round cream disc, so the box has to stay square — --mark-size
   drives both axes and every override changes that single token, never one
   dimension on its own (that is what made the mark read as an oval before).
   The hairline keeps the cream disc legible on the cream header. */
.brand-mark {
    --mark-size: 44px;
    width: var(--mark-size);
    height: var(--mark-size);
    flex: none;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(38, 49, 31, .12);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text b {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--g-900);
}
.brand-text span {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .28em;
    color: var(--g-600);
    text-transform: uppercase;
    margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
    position: relative;
    padding: 9px 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-2);
    border-radius: 999px;
    transition: color var(--t), background var(--t);
}
.nav a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 1.5px;
    background: var(--g-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t);
}
.nav a:hover { color: var(--g-800); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--g-800); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

/* Hamburger */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-300);
    background: var(--c-50);
    place-items: center;
}
.nav-toggle span {
    display: block;
    width: 18px;
    height: 1.8px;
    background: var(--g-800);
    border-radius: 2px;
    transition: transform var(--t), opacity var(--t);
}
.nav-toggle span + span { margin-top: 4.5px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.3px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.3px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    grid-template-columns: min(360px, 88vw) 1fr;
    visibility: hidden;
    pointer-events: none;
}
/* The scrim is the click-to-close div itself, never a ::before: a pseudo-element
   on a grid container counts as a grid item, so it would take column 1 and shunt
   the panel into an implicit second row 47px wide. */
.nav-drawer > [data-drawer-close] {
    grid-column: 2;
    grid-row: 1;
    background: rgba(38, 49, 31, .5);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--t);
}
.nav-drawer-panel {
    grid-column: 1;
    grid-row: 1;
    background: var(--c-50);
    padding: 28px 26px 36px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .48s var(--ease);
    box-shadow: var(--sh-lg);
}
body.nav-open .nav-drawer { visibility: visible; pointer-events: auto; }
body.nav-open .nav-drawer > [data-drawer-close] { opacity: 1; }
body.nav-open .nav-drawer-panel { transform: translateX(0); }

.nav-drawer-panel .drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}
.nav-drawer-panel a.drawer-link {
    padding: 15px 4px;
    font-size: 17px;
    font-weight: 600;
    color: var(--g-800);
    border-bottom: 1px solid var(--c-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateX(-22px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), color var(--t);
}
.nav-drawer-panel .drawer-head,
.nav-drawer-panel .drawer-foot { opacity: 0; transform: translateX(-18px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
body.nav-open .nav-drawer-panel .drawer-head,
body.nav-open .nav-drawer-panel .drawer-foot,
body.nav-open .nav-drawer-panel a.drawer-link { opacity: 1; transform: translateX(0); }
body.nav-open .nav-drawer-panel .drawer-head { transition-delay: .12s; }
body.nav-open .nav-drawer-panel a.drawer-link:nth-of-type(1) { transition-delay: .16s; }
body.nav-open .nav-drawer-panel a.drawer-link:nth-of-type(2) { transition-delay: .20s; }
body.nav-open .nav-drawer-panel a.drawer-link:nth-of-type(3) { transition-delay: .24s; }
body.nav-open .nav-drawer-panel a.drawer-link:nth-of-type(4) { transition-delay: .28s; }
body.nav-open .nav-drawer-panel a.drawer-link:nth-of-type(5) { transition-delay: .32s; }
body.nav-open .nav-drawer-panel a.drawer-link:nth-of-type(6) { transition-delay: .36s; }
body.nav-open .nav-drawer-panel a.drawer-link:nth-of-type(7) { transition-delay: .40s; }
body.nav-open .nav-drawer-panel .drawer-foot { transition-delay: .44s; }
.nav-drawer-panel a.drawer-link i { color: var(--g-400); font-size: 13px; }
.drawer-foot { margin-top: 26px; display: grid; gap: 12px; }
.drawer-foot p { font-size: 13.5px; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding: clamp(48px, 7vw, 92px) 0 clamp(60px, 8vw, 104px);
    background:
        radial-gradient(120% 90% at 88% 0%, var(--g-100) 0%, transparent 58%),
        radial-gradient(90% 70% at 0% 100%, var(--c-200) 0%, transparent 60%),
        var(--c-100);
    overflow: hidden;
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(40px, 6vw, 76px);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 8px;
    background: var(--c-50);
    border: 1px solid var(--c-300);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g-700);
    box-shadow: var(--sh-xs);
    margin-bottom: 22px;
}
.hero-badge b {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--g-100);
    color: var(--g-600);
    font-size: 10px;
}

.hero h1 {
    font-size: clamp(38px, 5.6vw, 66px);
    line-height: 1.04;
    letter-spacing: -.03em;
    margin-bottom: 22px;
}
/* Italic in a geometric sans reads casual. The accent phrase steps down in
   weight instead — same emphasis, corporate register. */
.hero h1 em {
    font-style: normal;
    font-weight: 400;
    color: var(--g-600);
}
.hero .lede { margin-bottom: 34px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    padding-top: 26px;
    border-top: 1px solid var(--c-300);
}
.hero-fact strong {
    display: block;
    font-family: var(--display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--g-700);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.hero-fact span {
    font-size: 12.5px;
    color: var(--ink-3);
    letter-spacing: .04em;
}

/* Overlapping image composition */
.hero-media { position: relative; }
.hero-media-main {
    position: relative;
    border-radius: 190px 190px var(--r-lg) var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-lg);
}
.hero-media-main img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 58%; /* keeps the lit facade and sign in frame */
}
.hero-media-sub {
    position: absolute;
    left: -34px;
    bottom: 42px;
    width: 44%;
    max-width: 210px;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 7px solid var(--c-50);
    box-shadow: var(--sh-lg);
}
.hero-media-sub img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
/* The logo medallion sits on the corner of the photograph — the only mark the
   hero needs. It replaces the outlined frame that used to trail off to the
   right of the image. */
.hero-stamp {
    position: absolute;
    right: -14px;
    top: 24px;
    padding: 7px;
    border-radius: 50%;
    background: var(--c-50);
    box-shadow: var(--sh-md);
}
.hero-stamp .brand-mark { --mark-size: 78px; box-shadow: none; }

/* --------------------------------------------------------------------------
   8. Marquee
   -------------------------------------------------------------------------- */
.marquee {
    background: var(--g-800);
    color: var(--g-100);
    padding: 15px 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    position: relative;
}
/* Soften both ends with overlays in the band's own colour. A CSS mask would
   fade the background away too, and masking the track would drag the fade
   along with the animation. */
.marquee::before,
.marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--g-800), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--g-800), transparent); }

.marquee-track {
    display: inline-flex;
    align-items: center;
    animation: marquee 42s linear infinite;
}
.marquee-track > span { display: inline-flex; align-items: center; padding-right: 0; }
.marquee-track i {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--g-400);
    margin: 0 26px;
    vertical-align: middle;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   9. Feature slider
   Four text columns used to stack into four full-height blocks on a phone,
   which is a lot of scrolling for four sentences. They are cards on a
   scroll-snap rail now: four across on a desktop with nothing to swipe, one
   and a bit on a phone.
   -------------------------------------------------------------------------- */
.feat-slider { position: relative; }

.feat-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Bottom room for the cards' shadow, which the overflow box would clip.
       Deliberately no left/right padding: it would offset every snap position
       by its own width and leave the first card unable to rest at zero. */
    padding-bottom: 12px;
    margin-bottom: -12px;
}
.feat-track::-webkit-scrollbar { display: none; }
.feat-track:focus-visible { outline: 2px solid var(--g-500); outline-offset: 4px; }

.feat-card {
    position: relative;
    scroll-snap-align: start;
    display: flex;
    align-items: flex-end;
    /* 3:4 exactly, because the photographs are shot 3:4. object-fit: cover
       only crops what does not fit, so a matching card crops nothing — the
       nargile stands in frame from bowl to tripod. */
    aspect-ratio: 3 / 4;
    min-height: 300px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--g-800);
    box-shadow: var(--sh-md);
    /* Own stacking context, so the photo and its scrim can sit behind the
       text with z-index:-1 without falling behind the section itself. */
    isolation: isolate;
}

.feat-photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.feat-card:hover .feat-photo { transform: scale(1.06); }

/* Reading scrim. The photographs are night shots, so it takes very little at
   the top and most of its weight where the text actually sits. */
.feat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(21, 29, 17, .10) 0%,
        rgba(21, 29, 17, .52) 52%,
        rgba(21, 29, 17, .90) 100%);
}

/* No photograph yet: a designed panel rather than a grey hole. */
.feat-card--plain {
    background: linear-gradient(155deg, var(--g-600) 0%, var(--g-800) 58%, var(--g-900) 100%);
}
.feat-card--plain::after { background: none; }
.feat-ghost {
    position: absolute;
    top: -12px;
    right: -14px;
    z-index: -1;
    font-size: 132px;
    line-height: 1;
    color: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.feat-body { position: relative; padding: 24px 22px 26px; }

.feat-num {
    display: block;
    font-family: var(--display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--mint-lit);
    margin-bottom: 12px;
}
.feat-body > i {
    display: block;
    font-size: 20px;
    color: #fff;
    opacity: .88;
    margin-bottom: 12px;
    transition: transform var(--t);
}
.feat-card:hover .feat-body > i { transform: translateY(-3px); }
.feat-body h3 { font-size: 19px; color: #fff; margin-bottom: 7px; }
.feat-body p {
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .84);
}

/* Controls — hidden by the script when every card already fits. */
.feat-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}
.feat-ctrl[hidden] { display: none; }

.feat-arrow {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--c-300);
    border-radius: 50%;
    background: var(--c-50);
    color: var(--g-700);
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t), opacity var(--t);
}
.feat-arrow:hover { background: var(--g-700); border-color: var(--g-700); color: #fff; }
.feat-arrow:disabled { opacity: .35; cursor: default; }
.feat-arrow:disabled:hover { background: var(--c-50); border-color: var(--c-300); color: var(--g-700); }

.feat-dots { display: flex; gap: 8px; }
.feat-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-400);
    cursor: pointer;
    transition: width var(--t), background var(--t);
}
.feat-dots button.is-active { width: 22px; border-radius: 999px; background: var(--g-600); }

/* --------------------------------------------------------------------------
   9a. Scrollable rails
   Shared by the QR category strip, the home slider and the admin nav. A
   horizontal scroller with its scrollbar hidden looks like a static list —
   these are the marks that say otherwise. Driven by rail.js: it sets
   --rail-l / --rail-r to the fade width on whichever side still has content.
   -------------------------------------------------------------------------- */
[data-rail].rail-on {
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--rail-l, 0px),
        #000 calc(100% - var(--rail-r, 0px)),
        transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--rail-l, 0px),
        #000 calc(100% - var(--rail-r, 0px)),
        transparent 100%);
    transition: -webkit-mask-image .2s linear, mask-image .2s linear;
}

.rail-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    border: 1px solid var(--c-300);
    border-radius: 50%;
    background: var(--c-50);
    color: var(--g-700);
    font-size: 11px;
    box-shadow: var(--sh-sm);
    transition: background var(--t), color var(--t), opacity var(--t);
}
.rail-arrow:hover { background: var(--g-700); border-color: var(--g-700); color: #fff; }
.rail-arrow--prev { left: 4px; }
.rail-arrow--next { right: 4px; }
/* Dimmed, not removed. At opacity 0 the left arrow was absent until the first
   tap and then popped into existence on top of the chips — the strip appeared
   to gain a control it did not have a moment ago. */
.rail-arrow:disabled { opacity: .22; pointer-events: none; }
.rail-arrow[hidden] { display: none; }

/* The arrows float over the rail, so the rail has to keep its ends clear —
   otherwise the first and last item sit underneath a button and cannot be
   tapped. Only applied when arrows actually exist. */
[data-rail].rail-has-arrows { padding-inline: 42px; }

/* --------------------------------------------------------------------------
   9b. Home page menu call-to-action
   The last thing on the home page, and its whole job: send the guest to the
   menu. Centred rather than in a section-head, because there is nothing
   underneath it competing for the eye.
   -------------------------------------------------------------------------- */
.cta-menu { text-align: center; max-width: 760px; margin-inline: auto; }
.cta-menu > .eyebrow { display: flex; width: max-content; margin-inline: auto; justify-content: center; font-family: var(--display); font-size: clamp(34px, 5vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -.035em; text-transform: none; color: var(--g-900); }
.cta-menu > .eyebrow::before { display: none; }
.cta-menu h2 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.1; letter-spacing: -.025em; margin-top: 14px; }
.cta-menu .lede { max-width: 590px; margin: 20px auto 28px; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; }
.cta-menu-note {
    margin-top: 20px;
    font-size: 13px;
    color: var(--ink-3);
}
.btn--lg { padding: 15px 28px; font-size: 15px; }

/* --------------------------------------------------------------------------
   10. About
   -------------------------------------------------------------------------- */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

.about-media { position: relative; }
/* Direct child only — the floating card inside carries a logo that must keep
   its own circular geometry, not the photograph's 5:6 crop. */
.about-media > img {
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
}
.about-media::before {
    content: '';
    position: absolute;
    left: -20px;
    top: -20px;
    width: 62%;
    height: 62%;
    background:
        radial-gradient(circle at 1.5px 1.5px, var(--g-300) 1.3px, transparent 1.4px)
        0 0 / 14px 14px;
    z-index: -1;
}
.about-card {
    position: absolute;
    right: clamp(-28px, -2vw, -10px);
    bottom: 34px;
    background: var(--c-50);
    padding: 20px 26px;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    text-align: center;
    min-width: 168px;
}
.about-card .brand-mark { --mark-size: 46px; margin: 0 auto 8px; box-shadow: none; }
.about-card span { font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }

.about-copy h2 { margin-bottom: 20px; }
.about-copy p { color: var(--ink-2); margin-bottom: 18px; }

.check-list { display: grid; gap: 14px; margin: 28px 0 34px; }
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 15px;
    color: var(--ink);
}
.check-list i {
    flex: none;
    margin-top: 3px;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--g-100);
    color: var(--g-600);
    font-size: 10px;
}

/* --------------------------------------------------------------------------
   11. Menu — filters, grid, cards
   -------------------------------------------------------------------------- */
.menu-toolbar {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 40px;
}

.search {
    position: relative;
    width: 100%;
    max-width: 460px;
}
.search input {
    width: 100%;
    padding: 15px 46px 15px 48px;
    border-radius: 999px;
    border: 1px solid var(--c-300);
    background: var(--c-50);
    font-size: 14.5px;
    outline: none;
    transition: border-color var(--t), box-shadow var(--t);
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus {
    border-color: var(--g-500);
    box-shadow: 0 0 0 4px var(--g-100);
}
.search > i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-500);
    font-size: 14px;
    pointer-events: none;
}
.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: none;
    place-items: center;
    color: var(--ink-3);
    transition: background var(--t), color var(--t);
}
.search.has-value .search-clear { display: grid; }
.search-clear:hover { background: var(--g-100); color: var(--g-800); }

.filters {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    /* hints that there is more to scroll to on narrow screens */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.filters::-webkit-scrollbar { display: none; }
.filter {
    flex: none;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--c-300);
    background: var(--c-50);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
    transition: all var(--t);
}
.filter:hover { border-color: var(--g-400); color: var(--g-800); }
.filter.is-active {
    background: var(--g-700);
    border-color: var(--g-700);
    color: var(--c-50);
    box-shadow: var(--sh-sm);
}

.price {
    font-family: var(--display);
    font-size: 21px;
    font-weight: 700;
    color: var(--g-800);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--g-50);
    color: var(--g-600);
    font-size: 11.5px;
    font-weight: 600;
}
.chip i { font-size: 10px; }
.chip--mint { background: var(--mint-soft); color: var(--mint); }

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 70px 20px;
    color: var(--ink-3);
}
.empty-state i { font-size: 34px; color: var(--g-300); margin-bottom: 16px; }
.empty-state h3 { font-size: 21px; margin-bottom: 6px; }
/* Menu page: category section headings */
.menu-section-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 56px 0 26px;
}
.menu-section-head:first-child { margin-top: 0; }
.menu-section-head h2 { font-size: clamp(23px, 3vw, 30px); white-space: nowrap; }
.menu-section-head .rule { flex: 1; height: 1px; background: var(--c-300); }
.menu-section-head .count { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

/* Category tiles — the way into a 100+ item menu */
.cat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 14px;
}
.cat-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--c-50);
    border: 1px solid var(--c-200);
    border-radius: var(--r-md);
    transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}
.cat-tile:hover {
    transform: translateY(-3px);
    border-color: var(--g-300);
    box-shadow: var(--sh-md);
}
.cat-tile i {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--g-50);
    color: var(--g-600);
    font-size: 17px;
    transition: background var(--t), color var(--t);
}
.cat-tile:hover i { background: var(--g-700); color: var(--c-50); }
.cat-tile b {
    display: block;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    color: var(--g-900);
    line-height: 1.2;
}
.cat-tile span { font-size: 12.5px; color: var(--ink-3); }

/* Menu list — a real menu reads as rows, not as a wall of cards */
.menu-list {
    display: grid;
    gap: 2px;
}

.item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 16px 16px 0;
    border-bottom: 1px solid var(--c-200);
    cursor: pointer;
    text-align: left;
    border-radius: var(--r-md);
    transition: background var(--t), padding-left var(--t);
}
.item:hover { background: var(--c-50); padding-left: 16px; }
.item:last-child { border-bottom: 0; }

.item-main { flex: 1; min-width: 0; }

.item-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.item-head h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
.item-head .leader {
    flex: 1;
    min-width: 18px;
    height: 0;
    border-bottom: 1px dotted var(--c-400);
    transform: translateY(-4px);
}
.item-head .price {
    font-size: 17px;
    white-space: nowrap;
}

.item p {
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.55;
    margin-top: 5px;
    max-width: 62ch;
}

.item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}
.item-star { color: var(--mint); font-size: 12px; margin-left: 2px; }

/* Estimates disclaimer — calories and allergens are not lab figures */
.menu-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    background: var(--g-50);
    border: 1px solid var(--g-100);
    border-radius: var(--r-md);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
}
.menu-note i { color: var(--g-500); margin-top: 3px; }

/* Menu page: hero band, sticky toolbar, closing CTA */
.menu-hero {
    padding: clamp(40px, 5vw, 64px) 0 clamp(26px, 3vw, 36px);
    background:
        radial-gradient(110% 80% at 85% 0%, var(--g-100) 0%, transparent 60%),
        var(--c-100);
    text-align: center;
}
.menu-hero .eyebrow { justify-content: center; }
.menu-hero h1 { margin-bottom: 14px; }
.menu-hero .lede { margin-inline: auto; }

.menu-sticky {
    position: sticky;
    top: var(--header-h);
    z-index: 150;
    background: rgba(248, 243, 231, .92);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t), box-shadow var(--t);
    padding: 14px 0;
}
.menu-sticky.is-stuck {
    border-bottom-color: var(--c-300);
    box-shadow: 0 8px 22px -20px rgba(38, 49, 31, .6);
}
.menu-sticky-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}
.menu-sticky .search { max-width: 300px; flex: none; }
.menu-sticky .filters { flex: 1; min-width: 0; }

.menu-section[hidden] { display: none; }

.menu-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
}

@media (max-width: 860px) {
    .menu-sticky-inner { flex-direction: column; align-items: stretch; gap: 12px; }
    .menu-sticky .search { max-width: none; }
}

/* --------------------------------------------------------------------------
   12. Gallery mosaic
   -------------------------------------------------------------------------- */
.mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: 18px;
}
.tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    cursor: zoom-in;
    box-shadow: var(--sh-sm);
}
/* Repeating rhythm rather than fixed positions: one tall tile beside two
   stacked ones, over and over. Pinned to the first three, a fourth photograph
   dropped into the gallery fell out of the pattern into a narrow leftover
   cell. */
.tile:nth-child(3n+1) { grid-column: span 2; grid-row: span 2; }
.tile:nth-child(3n+2) { grid-column: span 2; grid-row: span 1; }
.tile:nth-child(3n+3) { grid-column: span 2; grid-row: span 1; }

.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}
.tile:hover img { transform: scale(1.06); }
.tile-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 44px 22px 20px;
    background: linear-gradient(transparent, rgba(38, 49, 31, .82));
    color: #fff;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity var(--t), transform var(--t);
}
.tile:hover .tile-cap { opacity: 1; transform: translateY(0); }
.tile-cap b { font-family: var(--display); font-size: 18px; font-weight: 600; display: block; }
.tile-cap span { font-size: 12.5px; color: var(--g-200); }

/* --------------------------------------------------------------------------
   13. Reservation
   -------------------------------------------------------------------------- */
.reserve {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    background: var(--c-50);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-lg);
}

.reserve-aside {
    background:
        linear-gradient(165deg, var(--g-700), var(--g-900));
    color: var(--g-100);
    padding: clamp(32px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.reserve-aside::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 280px;
    height: 280px;
    background: url('../img/logo-round.png') no-repeat center / contain;
    opacity: .07;
    pointer-events: none;
}
.reserve-aside .eyebrow { color: var(--g-300); }
.reserve-aside .eyebrow::before { background: var(--g-400); }
.reserve-aside h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); margin-bottom: 16px; }
.reserve-aside p { font-size: 14.5px; color: var(--g-200); margin-bottom: 28px; }
.reserve-aside ul { display: grid; gap: 13px; position: relative; }
.reserve-aside li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--g-100);
}
.reserve-aside li i { color: var(--g-400); margin-top: 4px; font-size: 12px; }

.reserve-form { padding: clamp(30px, 4vw, 46px); }
.field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--g-700);
}
/* Form controls carry an intrinsic width from their `size` attribute, measured
   in the current font. Left alone they refuse to shrink and blow the grid
   column open on narrow screens — the width the layout gives them wins. */
.field input,
.field select,
.field textarea {
    width: 100%;
    min-width: 0;
    padding: 13px 15px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-300);
    background: var(--c-100);
    font-size: 14.5px;
    outline: none;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--g-500);
    background: var(--c-50);
    box-shadow: 0 0 0 4px var(--g-100);
}
.field select { cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%234a7350' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}
.form-note {
    font-size: 12.5px;
    color: var(--ink-3);
    text-align: center;
    margin-top: 14px;
}

/* --------------------------------------------------------------------------
   14. Contact / map
   -------------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 0;
    background: var(--c-50);
    border: 1px solid var(--c-200);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-md);
}
.contact-info { padding: clamp(30px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.contact-info h3 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 24px; }
.contact-list { display: grid; gap: 20px; margin-bottom: 32px; }
.contact-list li { display: flex; gap: 15px; align-items: flex-start; }
.contact-item-link { display: flex; width: 100%; gap: 15px; align-items: flex-start; color: inherit; border-radius: 10px; }
.contact-item-link > div { min-width: 0; }
.contact-item-link:hover span { color: var(--g-700); }
.contact-list i {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--g-50);
    color: var(--g-600);
    font-size: 15px;
}
.contact-list b {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 2px;
}
.contact-list span { font-size: 15px; color: var(--ink); }
.contact-map { min-height: 380px; background: var(--g-50); }
.contact-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footer {
    background: var(--g-900);
    color: var(--g-200);
    padding: clamp(52px, 7vw, 84px) 0 28px;
    font-size: 14px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
    gap: 40px;
    padding-bottom: 46px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer .brand-text b { color: #fff; }
.footer .brand-text span { color: var(--g-400); }
.footer-about { font-size: 14px; color: var(--g-300); margin: 20px 0 22px; max-width: 34ch; line-height: 1.7; }

.footer h4 {
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--g-400);
    margin-bottom: 18px;
}
.footer-links { display: grid; gap: 11px; }
.footer-links a { color: var(--g-200); transition: color var(--t), padding-left var(--t); }
.footer-links a:hover { color: #fff; padding-left: 5px; }

.socials { display: flex; gap: 10px; }
.socials a {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--g-200);
    transition: all var(--t);
}
.socials a:hover { background: var(--g-400); border-color: var(--g-400); color: var(--g-900); }

.footer-bottom {
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: var(--g-400);
}
.footer-bottom a { transition: color var(--t); }
.footer-bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   17b. Google review card + blog
   -------------------------------------------------------------------------- */
/* Sits under the contact details; the star row is the whole point, so it is
   the first thing in the box rather than an afterthought under the button. */
.review-card {
    margin-top: 26px;
    padding: 22px 24px;
    border: 1px solid var(--c-300);
    border-radius: var(--r-lg);
    background: var(--c-50);
    display: grid;
    gap: 14px;
}
.review-stars { display: flex; align-items: center; gap: 9px; }
.review-stars i { color: #f5a623; font-size: 15px; }
.review-stars b {
    font-family: var(--display);
    font-size: 15px;
    color: var(--g-800);
    margin-left: 4px;
}
.review-card p { font-size: 14px; color: var(--ink-2); }
.review-card .btn { justify-self: start; }

/* Google's G, drawn as a mark rather than pulled from a remote sprite. */
.g-mark {
    width: 18px;
    height: 18px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #4285f4;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}
.post-card {
    border: 1px solid var(--c-300);
    border-radius: var(--r-lg);
    background: var(--c-50);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--g-300); }
.post-card > a { display: grid; gap: 12px; padding: 26px 24px 24px; height: 100%; align-content: start; }
.post-card h3 { font-size: 19px; line-height: 1.3; }
.post-card p { font-size: 14.5px; color: var(--ink-2); }

.post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}
.post-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--g-700);
}
.post-card:hover .post-more { gap: 14px; }

/* Article column — a measure, not the full 1200px shell. */
.post-shell { max-width: 760px; }
.post-crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 26px;
}
.post-crumbs i { font-size: 9px; }
.post-crumbs a { color: var(--g-700); font-weight: 600; }
.post-crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.post-head { padding-bottom: 30px; border-bottom: 1px solid var(--c-300); margin-bottom: 34px; }
.post-head h1 { font-size: clamp(28px, 4vw, 42px); margin: 14px 0 18px; }

.post-body { font-size: 17px; line-height: 1.78; color: var(--ink-2); }
.post-body h2 {
    font-size: clamp(21px, 2.4vw, 26px);
    color: var(--g-900);
    margin: 40px 0 14px;
}
.post-body p { margin-bottom: 20px; }
.post-body strong, .post-body b { color: var(--ink); }
.post-list { display: grid; gap: 11px; margin: 0 0 22px; }
.post-list li { position: relative; padding-left: 24px; }
.post-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g-400);
}

.post-cta {
    margin-top: 48px;
    padding: 30px;
    border-radius: var(--r-lg);
    background: var(--g-50);
    border: 1px solid var(--g-200);
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
    justify-content: space-between;
}
.post-cta h2 { font-size: 22px; margin-bottom: 8px; }
.post-cta p { font-size: 13.5px; color: var(--ink-3); }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.post-more-list { margin-top: 44px; }
.post-more-list h2 { font-size: 18px; margin-bottom: 16px; }
.post-more-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid var(--c-300);
    font-weight: 600;
    color: var(--g-800);
    transition: color var(--t), padding-left var(--t);
}
.post-more-list a:last-child { border-bottom: 1px solid var(--c-300); }
.post-more-list a:hover { color: var(--g-600); padding-left: 6px; }
.post-more-list i { color: var(--g-500); font-size: 13px; }

/* --------------------------------------------------------------------------
   17c. Membership + campaigns
   -------------------------------------------------------------------------- */
.member-shell { max-width: 620px; }

/* The admin panel has these, the public site did not — the membership form is
   the first place a visitor sees a validation message. */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--r-md);
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 22px;
}
.alert i { margin-top: 3px; flex: none; }
.alert--ok    { background: var(--g-100);      color: var(--g-800);  border: 1px solid var(--g-200); }
.alert--error { background: var(--danger-soft); color: var(--danger); border: 1px solid #eccbc7; }

.field-hint { font-size: 12.5px; color: var(--ink-3); }

.member-tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    background: var(--c-200);
    border-radius: 999px;
    margin-bottom: 26px;
}
.member-tabs a {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-2);
    transition: background var(--t), color var(--t);
}
.member-tabs a.is-active { background: var(--c-50); color: var(--g-800); box-shadow: var(--sh-xs); }

.member-form { display: grid; gap: 18px; }

/* Each permission is its own decision, so each gets its own visible box. */
.consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--c-300);
    border-radius: var(--r-md);
    background: var(--c-50);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    cursor: pointer;
}
.consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--g-600); flex: none; }
.consent a { color: var(--g-700); text-decoration: underline; }

/* The card a guest holds up at the table. */
.member-card {
    background: linear-gradient(160deg, var(--g-700), var(--g-900));
    color: var(--c-100);
    border-radius: var(--r-xl);
    padding: clamp(28px, 5vw, 40px);
    text-align: center;
    box-shadow: var(--sh-lg);
}
.member-card .eyebrow { color: var(--g-300); justify-content: center; }
.member-card .eyebrow::before { background: var(--g-400); }
.member-card h1 { color: #fff; font-size: clamp(24px, 4vw, 32px); margin-bottom: 4px; }
.member-phone { color: var(--g-300); font-size: 14px; margin-bottom: 26px; }

.member-code {
    display: inline-grid;
    gap: 4px;
    padding: 16px 34px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .1);
    border: 1px dashed rgba(255, 255, 255, .3);
}
.member-code span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--g-300); }
.member-code b {
    font-family: var(--display);
    font-size: 30px;
    letter-spacing: .22em;
    color: #fff;
}
.member-hint { font-size: 13px; color: var(--g-300); margin-top: 18px; }

.member-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.campaign-block { margin-top: 44px; }
.campaign-block h2 { font-size: 22px; margin-bottom: 18px; }
.campaign-list { display: grid; gap: 12px; }

.campaign {
    display: flex;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--c-300);
    border-radius: var(--r-lg);
    background: var(--c-50);
}
.campaign > i {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--g-100);
    color: var(--g-600);
    font-size: 17px;
}
.campaign h3 { font-size: 17px; margin-bottom: 5px; }
.campaign p { font-size: 14px; color: var(--ink-2); }
.campaign-when,
.campaign-terms {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    font-size: 12.5px;
    color: var(--ink-3);
}
.campaign-when { color: var(--g-600); font-weight: 600; }
.campaign-terms { display: block; }

/* Maker credit — a full-width strip pinned below everything else */
.attribution {
    display: block;
    background: var(--g-950);
    color: var(--g-300);
    border-top: 1px solid rgba(255, 255, 255, .07);
    transition: background var(--t), color var(--t);
}
.attribution:hover { background: #101709; color: #fff; }

.attribution-inner {
    max-width: var(--shell);
    margin-inline: auto;
    padding: 15px var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 12px;
    font-size: 12.5px;
    text-align: center;
}
.attribution-text b { color: var(--c-200); font-weight: 700; }
.attribution:hover .attribution-text b { color: #fff; }

.attribution-domain {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--mint-lit);
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: border-color var(--t), background var(--t);
}
.attribution-domain i { font-size: 10px; }
.attribution:hover .attribution-domain {
    border-color: var(--mint-lit);
    background: rgba(58, 217, 196, .1);
}

/* --------------------------------------------------------------------------
   16. Floating WhatsApp
   -------------------------------------------------------------------------- */
.wa-float {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 180;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 56px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--g-700);
    color: var(--c-50);
    box-shadow: var(--sh-lg);
    transition: gap var(--t), padding var(--t), background var(--t);
    overflow: hidden;
}
.wa-float i { font-size: 24px; width: 40px; text-align: center; flex: none; }
.wa-float span {
    max-width: 0;
    opacity: 0;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: max-width var(--t), opacity var(--t);
}
.wa-float:hover { background: var(--g-800); gap: 4px; padding-right: 22px; }
.wa-float:hover span { max-width: 220px; opacity: 1; }

/* --------------------------------------------------------------------------
   17. Modal
   -------------------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(38, 49, 31, .58);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t), visibility var(--t);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal-box {
    position: relative; /* anchors .modal-close */
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--c-50);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    transform: translateY(18px) scale(.98);
    transition: transform .4s var(--ease);
}
.modal.is-open .modal-box { transform: none; }

/* Only rendered when the product actually has a photograph. */
.modal-media { position: relative; background: var(--g-100); }
.modal-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* Without a photo the title would slide under the close button. */
.modal-media[hidden] + .modal-close + .modal-body { padding-top: 22px; }
.modal-media[hidden] + .modal-close + .modal-body .modal-head { padding-right: 44px; }

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(253, 250, 243, .93);
    color: var(--g-800);
    box-shadow: var(--sh-sm);
    transition: background var(--t), transform var(--t);
}
.modal-close:hover { background: #fff; transform: rotate(90deg); }

.modal-body { padding: 26px 28px 28px; }
.modal-head {
    display: flex;
    gap: 18px;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.modal-head h3 { font-size: 24px; line-height: 1.2; }
.modal-head .price { font-size: 25px; white-space: nowrap; }
.modal-desc { font-size: 14.5px; color: var(--ink-2); margin-bottom: 22px; }

.spec {
    background: var(--g-50);
    border: 1px solid var(--g-100);
    border-radius: var(--r-md);
    padding: 16px 18px;
    margin-bottom: 22px;
}
.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    font-size: 13.5px;
    color: var(--g-700);
}
.spec-row + .spec-row { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--g-200); }
.spec-row > span { display: inline-flex; align-items: center; gap: 8px; }
.spec-row i { color: var(--g-500); }
.spec-row strong { color: var(--g-900); font-weight: 700; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.tag {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--mint-soft);
    color: var(--mint);
    font-size: 11.5px;
    font-weight: 600;
}
.tag--ok { background: var(--g-100); color: var(--g-600); }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(38, 49, 31, .88);
    backdrop-filter: blur(6px);
    cursor: zoom-out;
    animation: fade .3s var(--ease);
}
.lightbox img {
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
}
@keyframes fade { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   18. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
    /* Two and a bit: the sliver of the third card is what tells a thumb the
       row scrolls. A clean two-up looks finished and gets no swipe.
       Capped in pixels as well — at 44% of a 1080px tablet a 3:4 card would
       stand 577px tall and eat the whole screen. */
    .feat-track { grid-auto-columns: min(44%, 320px); }
}

@media (max-width: 960px) {
    :root { --header-h: 68px; }

    .nav, .nav-actions .btn { display: none; }
    .nav-toggle { display: grid; }

    /* minmax(0, 1fr), never a bare 1fr: a bare 1fr keeps an auto minimum, so
       one stubborn child (an input, a long word, an image) widens the column
       past the viewport instead of being made to fit. */
    .hero-grid,
    .about-grid,
    .reserve,
    .contact-grid { grid-template-columns: minmax(0, 1fr); }

    .hero-media { max-width: 460px; margin-inline: auto; }
    .hero-media-main { border-radius: 150px 150px var(--r-lg) var(--r-lg); }
    .hero-media-sub { left: -14px; width: 40%; }

    .about-media > img { aspect-ratio: 4 / 3; }
    .about-card { right: 16px; }

    .reserve-aside { order: -1; }
    .contact-map { min-height: 320px; }

    .mosaic { grid-auto-rows: 150px; }
    .tile:nth-child(3n+1) { grid-column: span 4; grid-row: span 2; }
    .tile:nth-child(3n+2),
    .tile:nth-child(3n+3) { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 700px) {
    .topbar { display: none; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .field-grid { grid-template-columns: minmax(0, 1fr); }
    .menu-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-facts { gap: 18px 26px; }
    .hero-stamp { right: -8px; top: 16px; padding: 5px; }
    .hero-stamp .brand-mark { --mark-size: 60px; }
    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .footer-bottom { justify-content: center; text-align: center; }
    .wa-float { height: 52px; }
    .wa-float i { font-size: 21px; width: 36px; }
    .mosaic { grid-auto-rows: 140px; }
    .modal-head { flex-direction: column; gap: 8px; }
}

@media (max-width: 520px) {
    /* One card plus a peek. Four stacked blocks became one screenful. */
    .feat-track { grid-auto-columns: 78%; gap: 14px; }
    .feat-body { padding: 20px 18px 22px; }
    .feat-ghost { font-size: 112px; }
    .brand-text b { font-size: 17px; }
}

/* Print (QR table card) */
@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
    body::before { display: none; }
}

/* --------------------------------------------------------------------------
   Editorial full-screen home opening
   -------------------------------------------------------------------------- */
.hero--slider {
    position: relative;
    min-height: calc(100svh - var(--topbar-h) - var(--header-h));
    padding: 0;
    display: grid;
    align-items: end;
    overflow: hidden;
    isolation: isolate;
    background: var(--g-900);
    touch-action: pan-y;
    cursor: grab;
}
.hero--slider:active { cursor: grabbing; }
.hero-slides,
.hero-slide,
.hero-shade { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transform: scale(1.035); transition: opacity 1s ease, transform 6s ease; }
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(21,29,17,.88) 0%, rgba(21,29,17,.55) 48%, rgba(21,29,17,.12) 78%),
        linear-gradient(0deg, rgba(21,29,17,.58), transparent 55%);
}
.hero-stage {
    z-index: 2;
    width: 100%;
    padding-top: clamp(70px, 12vh, 150px);
    padding-bottom: clamp(34px, 7vh, 72px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}
.hero-copy { max-width: 760px; }
.hero--slider h1,
.hero--slider .lede,
.hero--slider .hero-fact strong { color: var(--c-50); }
.hero--slider h1 { font-size: clamp(46px, 7.2vw, 94px); line-height: .96; letter-spacing: -.055em; }
.hero--slider h1 em { color: var(--g-300); }
.hero--slider .lede { max-width: 650px; color: var(--c-200); }
.hero--slider .hero-facts { border-color: rgba(255,255,255,.22); }
.hero--slider .hero-fact span { color: var(--c-300); }
.hero--slider .btn--ghost { color: var(--c-50); border-color: rgba(255,255,255,.48); background: rgba(21,29,17,.18); }
.hero-slider-controls { display: flex; align-items: center; gap: 14px; flex: none; padding-bottom: 4px; }
.hero-slider-controls > button {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45);
    background: rgba(21,29,17,.28); color: var(--c-50); cursor: pointer; transition: var(--t);
}
.hero-slider-controls > button:hover { background: var(--g-700); border-color: var(--g-700); }
.hero-slider-dots { display: flex; gap: 7px; }
.hero-slider-dots button { width: 7px; height: 7px; border: 0; border-radius: 50%; background: rgba(255,255,255,.42); cursor: pointer; transition: var(--t); }
.hero-slider-dots button.is-active { width: 24px; border-radius: 99px; background: var(--g-300); }
.hero-mobile-title,
.hero-scroll-cue { display: none; }
.home-menu-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 26px auto 30px; max-width: 900px; }
.home-menu-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--g-300); border-radius: 999px; background: var(--c-50); color: var(--g-800); font-size: 13px; font-weight: 700; transition: var(--t); }
.home-menu-chips a:hover { color: var(--c-50); background: var(--g-700); border-color: var(--g-700); transform: translateY(-2px); }
.home-menu-chips i { color: var(--g-500); }
.home-menu-chips a:hover i { color: var(--g-300); }

@media (max-width: 700px) {
    .page-home .site-header {
        position: absolute; top: 0; left: 0; right: 0; z-index: 90;
        background: linear-gradient(180deg, rgba(15,21,12,.72), transparent);
        border: 0; box-shadow: none;
    }
    .page-home .site-header.is-stuck { position: fixed; background: rgba(21,29,17,.94); }
    .page-home .navbar { height: 82px; justify-content: center; }
    .page-home .brand { color: var(--c-50); }
    .page-home .brand-mark { display: none; }
    .page-home .brand-text { display: flex; align-items: center; }
    .page-home .brand-text b { color: var(--c-50); font-size: 25px; letter-spacing: .16em; }
    .page-home .brand-text span { display: none; }
    .page-home .nav-actions { position: absolute; left: var(--gutter); }
    .page-home .nav-toggle { border: 0; background: transparent; box-shadow: none; padding: 0; width: 38px; }
    .page-home .nav-toggle span { width: 29px; height: 2px; background: var(--c-50); }

    .hero--slider { min-height: 100svh; }
    .hero-slide img { object-position: center center; }
    .hero-shade { background: linear-gradient(180deg, rgba(8,13,7,.34) 0%, rgba(8,13,7,.06) 42%, rgba(8,13,7,.48) 100%); }
    .hero-stage { min-height: 100svh; display: grid; align-items: end; padding: 82px 22px 112px; text-align: left; }
    .hero-copy { width: 100%; }
    .hero--slider .hero-badge,
    .hero--slider h1,
    .hero--slider .lede,
    .hero--slider .hero-actions,
    .hero--slider .hero-facts { display: none; }
    .hero-mobile-title { display: grid; justify-items: start; gap: 14px; width: max-content; max-width: 100%; color: var(--c-50); line-height: 1.15; text-shadow: 0 3px 22px rgba(0,0,0,.45); }
    .hero-mobile-brand { display: flex; align-items: center; gap: 13px; text-align: left; }
    .hero-mobile-brand img { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
    .hero-mobile-brand div { display: grid; gap: 5px; }
    .hero-mobile-brand b { font-size: 25px; font-weight: 700; letter-spacing: .13em; white-space: nowrap; }
    .hero-mobile-brand span { font-size: 11px; font-weight: 600; letter-spacing: .055em; opacity: .9; }
    .hero-mobile-location { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.44); border-radius: 99px; color: var(--c-50); background: rgba(18,28,15,.38); box-shadow: 0 8px 24px rgba(0,0,0,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11px; font-weight: 700; letter-spacing: .025em; text-decoration: none; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
    .hero-mobile-location .fa-location-dot { color: var(--g-300); font-size: 14px; }
    .hero-mobile-location .fa-arrow-up-right-from-square { font-size: 9px; opacity: .7; }
    .hero-slider-controls { position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%); margin: 0; padding: 0; }
    .hero-slider-controls > button { display: none; }
    .hero-slider-dots { position: static; transform: none; }
    .hero-slider-dots button { background: rgba(255,255,255,.55); }
    .hero-slider-dots button.is-active { background: var(--c-50); }
    .hero-scroll-cue { display: block; position: absolute; bottom: 17px; left: 50%; width: 22px; height: 14px; transform: translateX(-50%); }
    .hero-scroll-cue::before,
    .hero-scroll-cue::after { content: ''; position: absolute; top: 2px; width: 11px; height: 1px; background: var(--c-50); }
    .hero-scroll-cue::before { left: 1px; transform: rotate(35deg); }
    .hero-scroll-cue::after { right: 1px; transform: rotate(-35deg); }
    .home-menu-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
    .home-menu-chips::-webkit-scrollbar { display: none; }
}