/* ========================================================================== 
   Little Luna 2622 — authoritative responsive design layer
   Loaded after style.css. This file owns fluid layout, component adaptation,
   safe-area behavior, hero art direction, section surfaces, and breakpoints.
   ========================================================================== */

:root {
    --ll-content-max: var(--cfg-content-max, 1180px);
    --ll-gutter: clamp(var(--cfg-gutter-min, 18px), 3.8vw, var(--cfg-gutter-max, 34px));
    --ll-section-space: clamp(var(--cfg-section-min, 48px), 7vw, var(--cfg-section-max, 96px));
    --ll-radius-card: var(--cfg-radius, 20px);
    --ll-control-min: var(--cfg-control-height, 48px);
    --ll-copy-measure: 68ch;
    --ll-wide-measure: 82ch;
    --ll-header-h: 72px;
    --ll-surface-base: var(--paper);
    --ll-surface-alt: var(--surface-alt, color-mix(in srgb, var(--paper) 55%, var(--card)));
    --ll-surface-elevated: var(--surface-elevated, var(--card));
}

html,
body { max-width: 100%; }
html { min-width: 0; }
body {
    min-width: 0;
    font-size: calc(var(--cfg-body-size, 16px) * var(--cfg-type-scale, 1));
    overflow-x: clip;
    overflow-wrap: break-word;
}
body.nav-open { overflow: hidden; }

.wrap {
    width: min(100%, calc(var(--ll-content-max) + (var(--ll-gutter) * 2)));
    max-width: none;
    margin-inline: auto;
    padding-inline: max(var(--ll-gutter), env(safe-area-inset-left)) max(var(--ll-gutter), env(safe-area-inset-right));
}
.section { padding-block: calc(var(--ll-section-space) * .5); }
.section:first-child { padding-block-start: var(--ll-section-space); }
.section-head { max-width: var(--ll-wide-measure); margin-inline: auto; }
.section-head > :first-child { margin-block-start: 0; }
.section-head > :last-child { margin-block-end: 0; }

h1 { font-size: calc(clamp(2.5rem, 1.55rem + 4vw, 5.5rem) * var(--cfg-type-scale, 1)); line-height: .98; text-wrap: balance; }
h2 { font-size: calc(clamp(2rem, 1.55rem + 2vw, 3.5rem) * var(--cfg-type-scale, 1)); line-height: 1.05; text-wrap: balance; }
h3 { font-size: calc(clamp(1.25rem, 1.1rem + .65vw, 1.8rem) * var(--cfg-type-scale, 1)); line-height: 1.15; text-wrap: balance; }
p, li { text-wrap: pretty; }

.btn,
button,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea { min-height: var(--ll-control-min); }
.btn { display: inline-flex; align-items: center; justify-content: center; }

/* Owner-selectable card treatment. */
:is(.fav-card,.review-card,.choice-card,.gallery-empty,.reviews-empty) {
    border-radius: var(--ll-radius-card);
}
html[data-card-style="soft"] :is(.fav-card,.review-card,.choice-card) {
    box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 10%, transparent);
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
}
html[data-card-style="outlined"] :is(.fav-card,.review-card,.choice-card) {
    box-shadow: none;
    border: 1px solid var(--line);
}
html[data-card-style="flat"] :is(.fav-card,.review-card,.choice-card) {
    box-shadow: none;
    border-color: transparent;
}

/* Header: reset the historical <=980 mobile rules, then re-enable them only
   at the content-driven 920px constraint below. */
.header-inner { min-height: var(--ll-header-h); height: auto; }
.brand { min-width: 0; flex-shrink: 0; }
.brand-logo {
    display: block;
    width: auto;
    height: clamp(38px, 4vw, 44px);
    max-width: min(24vw, 190px);
    object-fit: contain;
    flex: none;
}
.header-actions { display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.theme-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: none; }
.nav-burger { display: none; min-width: 48px; min-height: 48px; flex: none; }
.header-order { display: inline-flex; }
.main-nav {
    position: static;
    inset: auto;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(.65rem, 1.35vw, 1.125rem);
    width: auto;
    margin-left: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
}
.main-nav a { min-height: 44px; display: inline-flex; align-items: center; }


/* A selected Hero may partially override semantic palette values for seasonal
   or media-specific contrast. Values are fully resolved server-side, so theme
   switching remains deterministic and no custom property falls back to itself. */
.hero[data-hero-palette-override="1"] {
    --paper: var(--hero-light-paper);
    --card: var(--hero-light-card);
    --ink: var(--hero-light-ink);
    --muted: var(--hero-light-muted);
    --brand: var(--hero-light-brand);
    --accent: var(--hero-light-accent);
    --line: var(--hero-light-line);
    --cfg-hero-text: var(--hero-light-hero-text);
    --cfg-hero-scrim-color: var(--hero-light-hero-scrim);
    --hero-primary-text: var(--hero-light-primary-text);
}
[data-theme="dark"] .hero[data-hero-palette-override="1"] {
    --paper: var(--hero-dark-paper);
    --card: var(--hero-dark-card);
    --ink: var(--hero-dark-ink);
    --muted: var(--hero-dark-muted);
    --brand: var(--hero-dark-brand);
    --accent: var(--hero-dark-accent);
    --line: var(--hero-dark-line);
    --cfg-hero-text: var(--hero-dark-hero-text);
    --cfg-hero-scrim-color: var(--hero-dark-hero-scrim);
    --hero-primary-text: var(--hero-dark-primary-text);
}
.hero .hero-cta-order { color: var(--hero-primary-text, #2B2410); }
.hero .hero-cta-order:hover { color: var(--hero-primary-text, #2B2410); }

/* Homepage hero: one content composition over art-directed media. */
.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: clamp(38rem, 72svh, 56rem);
    padding-block: clamp(4rem, 9svh, 8rem);
    overflow: clip;
}
.hero--bleed {
    color: var(--cfg-hero-text, #fff);
    background: color-mix(in srgb, var(--ink) 80%, var(--cfg-hero-scrim-color, #000));
}
.hero--bleed::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--cfg-hero-scrim-color, #000) calc(var(--cfg-hero-scrim, .58) * 100%), transparent) 0%,
            color-mix(in srgb, var(--cfg-hero-scrim-color, #000) calc(var(--cfg-hero-scrim, .58) * 100%), transparent) 34%,
            color-mix(in srgb, var(--cfg-hero-scrim-color, #000) calc(var(--cfg-hero-scrim, .58) * 30%), transparent) 68%,
            transparent 100%),
        linear-gradient(0deg, color-mix(in srgb, var(--cfg-hero-scrim-color, #000) 26%, transparent), transparent 44%);
}
.hero.hero--bleed { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.hero.hero--bleed .hero-grid {
    grid-row: auto;
    align-self: auto;
    grid-template-columns: minmax(0, 1fr);
}
.hero.hero--bleed .hero-copy { width: min(100%, 43rem); max-width: none; margin: 0; text-align: left; }
.hero.hero--bleed :is(.hero-h1,.hero-support,.hero-display,.eyebrow) { color: var(--cfg-hero-text, #fff); }
.hero.hero--bleed .eyebrow-status { color: var(--accent); }
.hero.hero--bleed :is(.hero-cta-secondary-row .btn,.hero-issue--desktop) {
    background: color-mix(in srgb, var(--card) 92%, transparent);
    border-color: var(--line);
    color: var(--ink);
    text-shadow: none;
}
.hero.hero--bleed .hero-issue-label { color: var(--muted); }
.hero.hero--bleed .hero-issue-link { color: var(--ink); }

.hero-media,
.hero-media picture,
.hero-media img,
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-media { z-index: 0; margin: 0; border-radius: 0; overflow: hidden; }
.hero-media picture { display: block; }
.hero-media img,
.hero-video {
    object-fit: cover;
    object-position: var(--hero-desktop-x, 50%) var(--hero-desktop-y, 50%);
}
.hero-video { display: block; opacity: 0; transition: opacity .5s ease; }
.hero-video.is-playing { opacity: 1; }
.hero-grid { position: relative; z-index: 2; display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); }
.hero-copy {
    width: min(100%, 43rem);
    max-width: none;
    display: grid;
    gap: clamp(1.35rem, 2.7vw, 2.25rem);
}
.hero-copy-group { display: grid; gap: 0; }
.hero-eyebrows { display: grid; gap: clamp(.25rem, .6vw, .45rem); }
.hero-copy :is(.eyebrow,.hero-h1,.hero-support,.hero-display) { margin: 0; }
.hero--bleed .hero-copy-group { text-shadow: 0 2px 18px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.7); }
.hero-h1 {
    max-width: 12ch;
    margin-block-start: clamp(.85rem, 1.6vw, 1.35rem) !important;
    font-size: calc(clamp(3rem, 2rem + 4.8vw, 6.7rem) * var(--cfg-type-scale, 1));
    line-height: .9;
    letter-spacing: -.045em;
}
.hero-support {
    max-width: 42ch;
    margin-block-start: clamp(.8rem, 1.5vw, 1.25rem) !important;
    font-size: clamp(1rem, .9rem + .5vw, 1.3rem);
    line-height: 1.45;
}
.hero-display {
    max-width: 30ch;
    margin-block-start: clamp(.75rem, 1.3vw, 1.1rem) !important;
    font-size: clamp(1.12rem, 1rem + .75vw, 1.55rem);
    font-weight: 700;
    line-height: 1.2;
}
.hero-cta { display: grid; width: min(100%, 32rem); max-width: none; gap: clamp(.65rem, 1.2vw, .9rem); }
.hero-cta-order { display: inline-flex; width: 100%; }
.hero-cta-secondary-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(.55rem, 1vw, .75rem); }
.hero-cta-secondary-row .btn { width: 100%; min-width: 0; }
.hero-issue { width: 100%; max-width: none; min-height: var(--ll-control-min); }
.hero-issue--mobile { display: none; }
.hero-motion-toggle {
    position: absolute;
    z-index: 3;
    right: max(var(--ll-gutter), env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    padding: .55rem .85rem;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px;
    background: rgba(0,0,0,.52);
    color: #fff;
    backdrop-filter: blur(8px);
    cursor: pointer;
}
.hero-motion-toggle[hidden] { display: none; }
.hero-motion-icon { width: 1.1em; text-align: center; }
.hero-grid--noimg { justify-items: center; text-align: center; }
.hero-grid--noimg .hero-copy { justify-items: center; }
.hero-grid--noimg :is(.hero-h1,.hero-support,.hero-display) { margin-inline: auto; }

/* Homepage section system. Palette colors remain owner-controlled; sections
   choose only a semantic surface derived from the active palette. */
.home-mid { display: flex; flex-direction: column; gap: 0; }
.home-mid > * { margin-top: 0 !important; }
.home-mid-story { order: 1; }
.home-mid-issue { order: 2; display: none; }
.home-mid-featured { order: 3; }
.home-mid-reviews { order: 4; }
.home-mid-gallery { order: 5; }
.home-mid [data-surface="base"] { background: var(--ll-surface-base); }
.home-mid [data-surface="alternate"] { background: var(--ll-surface-alt); }
.home-mid [data-surface="elevated"] { background: var(--ll-surface-elevated); }
.home-mid .section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.home-mid .story-line {
    padding-block: clamp(1.5rem, 3.5vw, 2.4rem) clamp(1.25rem, 3vw, 2rem);
    border-top: 0;
    border-bottom: 1px solid var(--line);
}
.story-sentence { max-width: 46ch; margin-inline: auto; }
/* 2625CA — .section-intro is AUTHORITATIVE for the intro-stack pattern.

   It states its own contract rather than relying on nothing else colliding
   with it. Two of these declarations exist specifically to be immune to the
   legacy utility-row rules in style.css, which are now :not() scoped but were
   silently defeating this block before the 2625 corrective audit (historical):

     - the auto inline margins reset, because an auto inline margin outranks
       justify-items:center in grid, so ANY inherited margin-inline auto —
       from this sheet, a future rule, or a page-level override — would push a
       child off the shared centre axis;
     - the dash suppression, because a decorative em dash joins two items
       sitting on one line and has nothing to join in a centered stack.

   Both are cheap, and together they mean a regression has to defeat the
   pattern twice rather than once. */
.section-intro {
    /* 2625CA-2 — centering is stated on BOTH axes and does not depend on the
       display model.

       The mobile rule in style.css centres by `align-items: center` on a flex
       column, which is a HORIZONTAL effect there. `.section-intro` switches the
       container to grid, where `align-items` controls the VERTICAL axis instead,
       so that rule's centering silently evaporates and only `justify-items`
       remains. That is the same failure shape as the original defect: a
       declaration written for one layout model quietly meaning something else
       under another.

       So the pattern now centres redundantly and cheaply — container
       `justify-items`, per-child `justify-self`, auto inline margins, and
       `text-align` — and a regression has to defeat all four rather than one. */
    display: grid;
    justify-items: center;
    justify-content: center;
    gap: clamp(.35rem, .8vw, .65rem);
    max-width: 48rem;
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
}
.section-intro > * {
    margin-inline: auto;
    max-width: 100%;
    justify-self: center;
    text-align: center;
}
.section-intro :is(h2,p) { margin-block: 0; }
.section-intro .section-sub { color: var(--muted); max-width: 60ch; }
.section-intro .section-sub::before { content: none; }
.section-intro .text-link { display: inline-flex; align-items: center; }
.fav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.review-card {
    display: grid;
    align-content: start;
    min-height: 0;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.review-card p { margin: 0; }
.review-card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(.8rem, 1.8vw, 1.1rem);
    padding-top: 0;
}
.review-more { margin: 0; }
.gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); }
.fav-card-img, .gallery-grid img { width: 100%; object-fit: cover; }

/* Interior pages and forms remain readable at intermediate widths. */
.form-intro { max-width: var(--ll-copy-measure); }
:is(.contact-grid,.form-grid,.footer-grid) { gap: clamp(1.25rem, 3vw, 3rem); }
.contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
iframe, video, canvas, svg { max-width: 100%; }
.mobile-order-bar[data-sticky-mode="off"] { display: none !important; }

/* Navigation changes only when six links, controls, logo, and Order CTA no
   longer fit without collision. A 980px desktop-emulation viewport keeps the
   full menu; tablets and true narrow layouts use the mobile navigation. */
@media (max-width: 920px) {
    .header-order { display: none; }
    .nav-burger { display: flex; }
    .main-nav {
        position: fixed;
        z-index: 120;
        top: var(--ll-header-h);
        right: 0;
        bottom: 0;
        left: 0;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        width: auto;
        margin: 0;
        padding: clamp(1rem, 4vh, 2rem) max(var(--ll-gutter), env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(var(--ll-gutter), env(safe-area-inset-left));
        overflow-y: auto;
        background: var(--card);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-1rem);
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }
    html[data-mobile-nav="drawer"] .main-nav {
        left: auto;
        width: min(88vw, 24rem);
        transform: translateX(100%);
        box-shadow: -16px 0 40px color-mix(in srgb, var(--ink) 18%, transparent);
    }
    .main-nav.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
    }
    .main-nav a {
        min-height: 58px;
        justify-content: center;
        padding: .85rem 0;
        border-bottom: 1px solid var(--line);
        font-size: clamp(1.1rem, 3.5vw, 1.4rem);
        color: var(--ink);
        text-align: center;
    }
    .main-nav a[aria-current="page"] { color: var(--accent); font-weight: 700; }
    .contact-grid { grid-template-columns: 1fr; }
    /* Stacked below the form, so there is no form height to match. The photos
       take their natural shape rather than being cropped to a share of nothing. */
    .catering-photos { align-self: auto; grid-template-rows: auto; }
    .catering-photo img { flex: 0 0 auto; height: auto; aspect-ratio: 4 / 3; }
    .fav-grid, .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    :root { --ll-header-h: 76px; }
    .site-header { min-height: var(--ll-header-h); }
    .header-inner { min-height: var(--ll-header-h); gap: .75rem; }
    .brand-logo { height: 44px; max-width: min(49vw, 190px); }
    .theme-toggle { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
    .theme-toggle svg { width: 21px; height: 21px; }
    .nav-burger { min-width: 48px; min-height: 48px; padding: 9px; }
    .nav-burger span { width: 26px; }

    .hero {
        --ll-hero-heading-gap: clamp(1rem, 2.2svh, 1.3rem);
        --ll-hero-fold-trim: clamp(.35rem, 1svh, .6rem);
        min-height: min(calc(var(--cfg-hero-height, 100svh) - var(--ll-header-h) - var(--ll-hero-fold-trim)), var(--cfg-hero-max-height, 920px));
        padding-block: clamp(.55rem, 1.35svh, .85rem) clamp(1.35rem, 2.8svh, 1.85rem);
        align-items: start;
    }
    .hero--bleed { background: var(--paper); }
    .hero--bleed::before { content: none; }
    .hero.hero--bleed .hero-media {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
    }
    .hero-media img,
    .hero-video { object-position: var(--hero-mobile-x, 50%) var(--hero-mobile-y, 42%); }
    .hero.hero--bleed .hero-grid {
        align-self: start;
        padding-top: clamp(.65rem, 1.8svh, 1rem);
        padding-bottom: calc(var(--ll-orderbar-h) + .5rem + env(safe-area-inset-bottom));
    }
    .hero.hero--bleed .hero-copy {
        width: 100%;
        max-width: none;
        margin: 0;
        gap: clamp(1.25rem, 2.5svh, 1.55rem);
    }
    .hero-copy-group { width: 100%; }
    .hero-eyebrows { gap: clamp(.24rem, .65svh, .38rem); }
    .hero.hero--bleed .hero-copy .eyebrow { margin: 0; text-indent: 0; }
    .hero.hero--bleed .hero-copy .eyebrow-status { margin: 0; }
    .hero.hero--bleed .hero-h1 {
        max-width: 11ch;
        margin-block-start: var(--ll-hero-heading-gap) !important;
        font-size: calc(clamp(2.55rem, 10.2vw, 4.15rem) * var(--cfg-type-scale, 1));
        line-height: .99;
    }
    .hero.hero--bleed .hero-support {
        max-width: 35ch;
        margin-block-start: var(--ll-hero-heading-gap) !important;
        font-size: clamp(.98rem, 3.65vw, 1.13rem);
        line-height: 1.42;
    }
    .hero.hero--bleed .hero-display {
        max-width: 29ch;
        margin-block-start: clamp(.9rem, 1.9svh, 1.15rem) !important;
        font-size: clamp(1.12rem, 4.35vw, 1.34rem);
        line-height: 1.18;
    }
    .hero[data-mobile-align="center"] .hero-copy { text-align: center; justify-items: center; }
    .hero[data-mobile-align="center"] :is(.hero-h1,.hero-support,.hero-display) { margin-inline: auto; }
    .hero[data-mobile-align="left"] .hero-copy { text-align: left; justify-items: start; }
    .hero-cta { width: min(100%, 31rem); gap: clamp(.7rem, 1.65svh, .95rem); text-shadow: none; }
    .hero-cta-order { display: inline-flex; }
    .hero-cta-secondary-row { gap: clamp(.55rem, 1.2svh, .75rem); }
    .hero.hero--bleed .hero-cta-secondary-row .btn {
        background: color-mix(in srgb, var(--paper) 88%, transparent);
        border: 1px solid var(--accent);
        color: var(--ink);
    }
    .hero-issue--desktop { display: none !important; }
    .hero-motion-toggle { right: max(.75rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); }
    .hero-motion-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

    .home-mid-issue {
        display: block;
        padding-block: clamp(.8rem, 2.5vw, 1.15rem);
        border-bottom: 1px solid var(--line);
        background: var(--ll-surface-base);
    }
    .hero-issue--mobile {
        display: flex;
        min-height: var(--ll-control-min);
        padding: clamp(.9rem, 3.5vw, 1.15rem) clamp(1rem, 4vw, 1.35rem);
        border: 1px solid var(--line);
        border-radius: var(--ll-radius-card);
        background: var(--card);
        color: var(--ink);
        text-shadow: none;
    }
    .hero-issue--mobile .hero-issue-label { color: var(--muted); }
    .hero-issue--mobile .hero-issue-link { color: var(--ink); }

    /* The historical direct-child reset has higher specificity than a bare
       .section rule. Own the real homepage structures explicitly so section
       spacing and centering cannot silently fall back to the old layout. */
    .home-mid > section.section:not(.story-line),
    .home-mid-featured > section.section {
        padding-block: clamp(2rem, 5.8vw, 3rem);
    }
    .home-mid-featured > section.section {
        padding-block-start: clamp(1.7rem, 4.8vw, 2.35rem);
    }
    .home-mid .story-line {
        padding-block: clamp(1.12rem, 4vw, 1.55rem) clamp(.92rem, 3.25vw, 1.3rem);
        border-top: 0;
    }
    .story-sentence { font-size: clamp(1.15rem, 5vw, 1.55rem); line-height: 1.3; }
    .home-mid-featured > .featured,
    .home-mid-reviews { border-bottom: 1px solid var(--line); }
    .home-mid :is(.featured,.reviews,.gallery) .section-head.section-intro {
        width: 100%;
        max-width: none;
        display: grid;
        align-items: center;
        justify-items: center;
        gap: .48rem;
        margin: 0 auto clamp(1.35rem, 5vw, 2rem);
        text-align: center;
    }
    .home-mid :is(.featured,.reviews,.gallery) .section-head.section-intro > * {
        margin-inline: auto;
        text-align: center;
    }
    .home-mid :is(.featured,.reviews,.gallery) .section-head.section-intro h2 {
        font-size: clamp(1.75rem, 7.2vw, 2.35rem);
    }
    .home-mid :is(.featured,.reviews,.gallery) .section-head.section-intro :is(.section-sub,.subtle,.rating-line,.rating-cta) {
        margin-block: 0;
        text-align: center;
    }
    .home-mid-reviews .section-head.section-intro h2 {
        width: 100%;
        white-space: nowrap;
        font-size: clamp(1.25rem, 6.1vw, 2.2rem);
        letter-spacing: -.035em;
    }
    .rating-line { text-align: center; }
    .rating-line .rating-stars {
        display: block;
        font-size: 2em;
        letter-spacing: 4px;
        margin: 0 auto .35rem;
    }
    .rating-cta { text-align: center; }

    .fav-grid,
    .gallery-grid.instagram-feed {
        margin-inline: 0;
        background: transparent;
        border: 0;
    }
    .fav-grid, .review-grid { grid-template-columns: 1fr; gap: 1rem; }
    .fav-card { aspect-ratio: 10 / 9; border-radius: var(--ll-radius-card); border: 1px solid var(--line); }
    .home-mid-reviews .review-card {
        padding: clamp(.85rem, 3.7vw, 1.1rem);
    }
    .home-mid-reviews .review-card p { line-height: 1.5; }
    .home-mid-reviews .review-card-foot {
        margin-top: clamp(.45rem, 2vw, .65rem);
        padding-top: 0;
        gap: .65rem;
    }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid.instagram-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 3px, both axes. The gap is not empty space — the grid's background is
           --line showing through, so the number is the width of the rule drawn
           between tiles. At 1px it read as a rendering seam rather than a
           decision; 3px reads as deliberate separation without turning a photo
           wall into a set of boxes. */
        gap: 3px;
        background: var(--line);
    }
    .instagram-card,
    .instagram-card a,
    .gallery-grid.instagram-feed img { border-radius: 0; }
    .footer-grid { grid-template-columns: 1fr; }

    .mobile-order-bar {
        position: fixed;
        z-index: 110;
        right: max(.75rem, env(safe-area-inset-right));
        bottom: max(.75rem, env(safe-area-inset-bottom));
        left: max(.75rem, env(safe-area-inset-left));
        display: flex;
        min-height: var(--ll-control-min);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(calc(100% + 1.5rem));
        transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
        box-shadow: 0 12px 34px rgba(0,0,0,.24);
    }
    .mobile-order-bar.is-sticky-visible,
    .mobile-order-bar[data-sticky-mode="always"] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
    }
    body.has-mobile-order { padding-bottom: calc(var(--ll-control-min) + 2rem + env(safe-area-inset-bottom)); }
}

/* Compact-height phones preserve the same composition and fold contract while
   tightening fluid rhythm. Content may grow the hero; it is never clipped. */
@media (max-width: 640px) and (max-height: 720px) {
    .hero {
        --ll-hero-heading-gap: .88rem;
        padding-block: .5rem 1rem;
    }
    .hero.hero--bleed .hero-copy { gap: 1.05rem; }
    .hero-eyebrows { gap: .18rem; }
    .hero.hero--bleed .hero-h1 {
        font-size: calc(clamp(2.25rem, 9.3vw, 3.35rem) * var(--cfg-type-scale, 1));
        line-height: .98;
    }
    .hero.hero--bleed .hero-support { line-height: 1.32; }
    .hero.hero--bleed .hero-display { margin-block-start: .74rem !important; }
    .hero-cta { gap: .58rem; }
    .hero-cta-secondary-row { gap: .52rem; }
}

/* Mobile landscape is height-constrained: use two content columns while
   retaining the same semantic source and preserving every CTA. */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 920px) {
    .hero { min-height: auto; padding-block: 1.1rem; }
    .hero.hero--bleed .hero-media {
        -webkit-mask-image: linear-gradient(to right, #000 0%, #000 66%, transparent 100%);
        mask-image: linear-gradient(to right, #000 0%, #000 66%, transparent 100%);
    }
    .hero-copy { width: min(100%, 68rem); grid-template-columns: minmax(0,1.25fr) minmax(17rem,.75fr); align-items: end; gap: 1.25rem; }
    .hero-copy-group { align-self: center; }
    .hero.hero--bleed .hero-h1 { font-size: calc(clamp(2rem, 5.6vw, 3.2rem) * var(--cfg-type-scale, 1)); }
    .hero.hero--bleed .hero-support { display: none; }
    .hero-cta { width: 100%; }
    .main-nav { padding-top: .5rem; }
    .main-nav a { min-height: 44px; padding: .45rem 0; }
}

@media (max-width: 420px) {
    .hero-cta-secondary-row { grid-template-columns: 1fr; }
    .gallery-grid:not(.instagram-feed) { gap: .7rem; }
}


/* 2622 owner review: CTA labels remain crisp; homepage intros are centered by
   selectors that outrank the historical section-head rules. Explicit palette
   surface slots remain the sole color owner. */
.hero-cta-order { text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none !important; }
    .hero-motion-toggle { display: none !important; }
    .main-nav, .mobile-order-bar { transition: none; }
}