@import '_content/NAVR.SharedUI/NAVR.SharedUI.g7l1ruwobt.bundle.scp.css';

/* /Components/Cms/CmsPageBackground.razor.rz.scp.css */
/* ── PER-PAGE / PER-ARTICLE BACKGROUND ────────────────────────────────────────────────────────────────────
   The wrapper CmsPageBackground.razor puts around a page/article body (CmsPage.razor and Home.razor both use it). It sits INSIDE
   MainLayout's .pub-theme wrapper, so the theme system, PublicHeader and PublicFooter are unaffected; only the
   page's own content area is repainted. The colour / image / position / size / repeat arrive as an inline
   style built in C# from normalized values (see BackgroundStyle); everything that needs a media query or a
   pseudo-element lives here instead.

   A page with no background renders a bare <div class="cms-page-bg"> with no style and no modifier — these
   rules then do nothing at all, which is why nothing already published changes appearance. */
.cms-page-bg[b-fnls1fqcml] {
    position: relative;
    max-width: 100%;   /* the background can never widen the page — no horizontal overflow */
}

/* READABILITY SCRIM (Overlay = light | medium | strong): a translucent layer between the background and the
   content, drawn as a pseudo-element so no extra DOM node can ever land in front of the text. */
.cms-page-bg--scrim-light[b-fnls1fqcml]::before,
.cms-page-bg--scrim-medium[b-fnls1fqcml]::before,
.cms-page-bg--scrim-strong[b-fnls1fqcml]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.cms-page-bg--scrim-light[b-fnls1fqcml]::before {
    background: rgba(255, 255, 255, 0.35);
}

.cms-page-bg--scrim-medium[b-fnls1fqcml]::before {
    background: rgba(255, 255, 255, 0.55);
}

.cms-page-bg--scrim-strong[b-fnls1fqcml]::before {
    background: rgba(255, 255, 255, 0.75);
}

/* PARALLAX / FIXED ATTACHMENT — desktop only. iOS Safari (and several Android browsers) either ignore
   background-attachment: fixed or render it at the wrong scale, so it is deliberately never applied on small
   screens; those visitors get a normal scrolling background instead of a broken one. */
@media (min-width: 1024px) {
    .cms-page-bg--fixed[b-fnls1fqcml] {
        background-attachment: fixed;
    }
}

/* When a page background IS configured, the full-bleed section bands inside must let it through. Only the
   opaque band colours read this variable (see Home.razor.css .about/.gallery/.testimonials); cards, chips and
   the hero keep their own colours. Scoped to the wrapper, so it can never leak to the header, footer or a page
   without a configured background. Custom properties inherit, so declaring it on the
   wrapper reaches the bands in the child component's markup without needing ::deep. */
.cms-page-bg--reveal[b-fnls1fqcml] {
    --navr-section-bg: transparent;
}
/* /Components/Cms/CustomBlockSection.razor.rz.scp.css */
/* Custom (template-driven) content block — scoped via Blazor CSS isolation.
   Reuses the existing NAVR language rather than introducing a new one: the leaf palette (#1f5130 deep green,
   #f5f8f3 paper, #c9a54a gold), clamp() fluid spacing, the 68rem content width and 0.9rem media radius of
   .about, the auto-fill responsive grid of .gallery, and the 820px / 520px stacking breakpoints. */

.cblock[b-rgp439qghn] {
    padding: clamp(2.75rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem);
    background-color: #ffffff;
    color: #1c2b1f;

    /* Header presets. The Admin's Header display settings never emit raw CSS — CustomBlockSection maps the
       saved token (small/medium/large, compact/normal/large) onto one of these, so the stylesheet stays the
       single owner of the actual values. The "large" title and "medium" subtitle are the shipped defaults and
       reproduce exactly what the block rendered before these settings were honoured. */
    --cb-h-title-small: clamp(1.12rem, 2.3vw, 1.5rem);
    --cb-h-title-medium: clamp(1.3rem, 2.9vw, 1.9rem);
    --cb-h-title-large: clamp(1.5rem, 3.6vw, 2.4rem);
    --cb-h-sub-small: clamp(0.92rem, 1.6vw, 1rem);
    --cb-h-sub-medium: clamp(1rem, 2vw, 1.18rem);
    --cb-h-sub-large: clamp(1.1rem, 2.4vw, 1.35rem);
    --cb-h-gap-compact: 0.25rem;
    --cb-h-gap-normal: 0.5rem;
    --cb-h-gap-large: 0.85rem;
    --cb-h-mb-compact: 0rem;
    --cb-h-mb-normal: 0.35rem;
    --cb-h-mb-large: 1rem;

    /* Typography for Text / RichText fields is resolved to FINAL CSS VALUES in CustomBlockSection.razor
       (closed switches over the settings' Allowed* lists) and arrives as --cb-ty-* on the element itself.
       The token->value tables that used to live here are gone on purpose: routing a value through
       "var(--cb-ty-color: var(--cb-ty-c-white))" meant that if a token was ever out of scope the property
       became invalid-at-computed-value-time and the declaration fell back to INHERIT rather than to its
       written fallback — which is why Colour = White rendered as inherited dark text. The only token still
       referenced is --cb-ty-c-theme, declared on each text element below so "Theme" keeps that element's own
       shipped colour. */
}

.cblock__wrap[b-rgp439qghn] {
    width: 100%;
    max-width: 72rem;   /* ~1152px — three cards + gaps sit comfortably on desktop */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 4vw, 3rem);
    min-width: 0;
}

.cblock__inner[b-rgp439qghn] {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    min-width: 0;
}

.cblock__inner--split[b-rgp439qghn] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.cblock__inner--single[b-rgp439qghn] {
    grid-template-columns: minmax(0, 46rem);
    justify-content: center;
    text-align: center;
}

/* ── Lead media ─────────────────────────────────────────────────────────── */
.cblock__figure[b-rgp439qghn] {
    margin: 0;
    width: 100%;
    min-width: 0;
}

.cblock__img[b-rgp439qghn] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 30rem;
    object-fit: contain;
    border-radius: 0.9rem;
    box-shadow: 0 10px 30px rgba(20, 44, 28, 0.15);
}

/* ── Editorial column ───────────────────────────────────────────────────── */
.cblock__content[b-rgp439qghn] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 1.6vw, 1rem);
    min-width: 0;
}

/* The block's own header. Alignment, sizes and spacing come in as custom properties set by the component from
   the saved HeaderDisplaySettings; each var() carries the shipped default as its fallback, so a block with no
   saved settings (and a stylesheet loaded without them) renders exactly as it did before. */
.cblock__header[b-rgp439qghn] {
    display: flex;
    flex-direction: column;
    gap: var(--cb-h-gap, 0.5rem);
    margin-bottom: var(--cb-h-mb, 0.35rem);
    text-align: var(--cb-h-align, center);
    min-width: 0;
}

.cblock__title[b-rgp439qghn] {
    margin: 0;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
    font-size: var(--cb-h-title-fs, clamp(1.5rem, 3.6vw, 2.4rem));
    color: #1f5130;
}

.cblock__subtitle[b-rgp439qghn] {
    margin: 0;
    font-size: var(--cb-h-sub-fs, clamp(1rem, 2vw, 1.18rem));
    line-height: 1.7;
    white-space: pre-line;   /* a multiline subtitle keeps the admin's own line breaks */
    color: #46583f;
}

/* ── Text / RichText fields: the ONLY consumers of the typography settings ──────────
   Every declaration reads a --cb-ty-* custom property that CustomBlockSection sets per FIELD, with the shipped
   value as the var() fallback so a field with no settings (or a stylesheet loaded on its own) is unchanged.
   The max-width measure is centred within the column; the text inside it follows --cb-ty-align. */
.cblock .cblock__rich[b-rgp439qghn] {
    --cb-ty-c-theme: #24331f;   /* this element's own shipped colour = the "Theme" option */
    margin: 0;
    margin-block: var(--cb-ty-spacing, 0.25rem);
    /* min(..., 100%) keeps the Bengali / long-string overflow guarantee while letting the Content width
       setting actually apply — a plain max-width:100% elsewhere was silently winning over this. */
    max-width: min(var(--cb-ty-width, 46rem), 100%);
    margin-inline: auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--cb-ty-size, clamp(1rem, 2vw, 1.18rem));
    font-weight: var(--cb-ty-weight, 400);
    line-height: var(--cb-ty-line-height, 1.85);
    text-align: var(--cb-ty-align, left);
    white-space: pre-line;
    color: var(--cb-ty-color, #24331f);
}

.cblock .cblock__text[b-rgp439qghn] {
    --cb-ty-c-theme: #2b2b2b;   /* this element's own shipped colour = the "Theme" option */
    margin: 0;
    margin-block: var(--cb-ty-spacing, 0.25rem);
    max-width: min(var(--cb-ty-width, 46rem), 100%);
    margin-inline: auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--cb-ty-size, clamp(1rem, 2vw, 1.1rem));
    font-weight: var(--cb-ty-weight, 400);
    line-height: var(--cb-ty-line-height, 1.8);
    text-align: var(--cb-ty-align, left);
    color: var(--cb-ty-color, #2b2b2b);
}

/* Number → a small stat, not a stray digit. */
.cblock__stat[b-rgp439qghn] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cblock__inner--single .cblock__stat[b-rgp439qghn] {
    align-items: center;
}

.cblock__stat-value[b-rgp439qghn] {
    font-weight: 700;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    line-height: 1.1;
    color: #1f5130;
}

.cblock__stat-label[b-rgp439qghn] {
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ── CTA buttons ────────────────────────────────────────────────────────── */
.cblock__actions[b-rgp439qghn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.cblock__inner--single .cblock__actions[b-rgp439qghn] {
    justify-content: center;
}

.cblock__btn[b-rgp439qghn] {
    display: inline-block;
    padding: 0.72em 1.8em;
    border-radius: 999px;
    background: #1f5130;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(20, 44, 28, 0.28);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cblock__btn:hover[b-rgp439qghn],
.cblock__btn:focus-visible[b-rgp439qghn] {
    background: #2e7d4f;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(20, 44, 28, 0.32);
}

/* ── Per-field galleries ────────────────────────────────────────────────── */
.cblock__gallery-wrap[b-rgp439qghn] {
    min-width: 0;
}

.cblock__gallery-wrap + .cblock__gallery-wrap[b-rgp439qghn] {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.cblock__gallery[b-rgp439qghn] {
    display: grid;
    /* Fixed 3 columns on desktop (auto-fill collapsed to one column inside a narrow parent and could never be
       relied on to give a row of three). Tablet/mobile step down in the media queries below. */
    /* Column count, gap, frame ratio/height and fit all come from the field's saved Gallery display settings
       (--cb-* custom properties set per gallery in CustomBlockSection.razor); the literals are the fallback for
       a gallery that has none. Tablet/mobile step down below — the configured count is the DESKTOP maximum. */
    grid-template-columns: repeat(var(--cb-cols, 3), minmax(0, 1fr));
    gap: var(--cb-gap, 24px);
}

/* CARD RULES LIVE IN THE SHARED CARD COMPONENT. The gallery card — surface, radius, shadow, border, hover
   lift/zoom, hover scrim, entry keyframes, media fit, reduced motion — is drawn by NAVR.SharedUI's
   NavrPremiumCard (the Universal Premium Card renderer) and styled by NavrPremiumCard.razor.css. This file
   owns only what surrounds the cards: the grid, the carousel, the interaction triggers and the lightbox. The
   --cb-* / --nc-* custom properties are still set on THIS gallery's container (see CardPresentationCss), so the
   cards inherit them and two galleries on one page never affect each other. */

/* FIXED CARD WIDTH (card presentation "Card width"): the grid becomes auto-fill on that width, capped at the
   cell, so a configured width can never widen the page — on a phone the column simply becomes 100%. */
.cblock__gallery--fixed-w[b-rgp439qghn] {
    grid-template-columns: repeat(auto-fill, min(var(--nc-card-w, 320px), 100%));
    justify-content: var(--nc-grid-justify, center);
}

/* ── Overflow safety: Bengali / long unbroken strings must never widen the page ── */
/* .cblock__rich and .cblock__text are deliberately NOT in this list. This rule comes LATER in the file with
   the same specificity, so its max-width:100% was overriding their max-width:var(--cb-ty-width) and the
   Content width setting could never take effect. They carry their own overflow safety in their own rules
   below, via min(<setting>, 100%) plus overflow-wrap. */
.cblock[b-rgp439qghn],
.cblock__wrap[b-rgp439qghn],
.cblock__inner[b-rgp439qghn],
.cblock__content[b-rgp439qghn],
.cblock__header[b-rgp439qghn],
.cblock__title[b-rgp439qghn],
.cblock__subtitle[b-rgp439qghn],
.cblock__btn[b-rgp439qghn] {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 820px) {
    .cblock__inner--split[b-rgp439qghn] {
        grid-template-columns: minmax(0, 1fr);
    }
    .cblock__inner--split .cblock__content[b-rgp439qghn] {
        text-align: center;
    }
    .cblock__inner--split .cblock__actions[b-rgp439qghn],
    .cblock__inner--split .cblock__stat[b-rgp439qghn] {
        justify-content: center;
        align-items: center;
    }
}

/* Tablet: never more than 2 columns, however many the desktop setting asks for (min() keeps a configured 1 at 1). */
@media (max-width: 900px) {
    .cblock__gallery[b-rgp439qghn] {
        grid-template-columns: repeat(min(var(--cb-cols, 3), 2), minmax(0, 1fr));
    }
    .cblock__gallery--fixed-w[b-rgp439qghn] {
        grid-template-columns: repeat(auto-fill, min(var(--nc-card-w, 320px), 100%));
    }
}

@media (max-width: 560px) {
    .cblock__gallery[b-rgp439qghn],
    .cblock__gallery--fixed-w[b-rgp439qghn] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Interaction triggers ───────────────────────────────────────────────────────────────────────────────────
   The hit target sits INSIDE the card and fills it, so the card's own radius, padding, border, shadow, hover
   lift and overlay are all unchanged. Only rendered when Interaction is clickable or lightbox. */
.cblock__hit[b-rgp439qghn] {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: inherit;
    cursor: pointer;
    overflow: hidden;
}

.cblock__hit:focus-visible[b-rgp439qghn],
.cblock__expand:focus-visible[b-rgp439qghn] {
    outline: 3px solid #c9a54a;      /* NAVR gold — visible on both light and dark media */
    outline-offset: 2px;
}

/* Video cards keep their native controls, so they get a separate small trigger instead of a full-card button.
   Placed top-right, clear of the control bar at the bottom of the frame. */
.cblock__expand[b-rgp439qghn] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: rgba(16, 26, 18, 0.7);
    color: #ffffff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.cblock__expand:hover[b-rgp439qghn] {
    background: rgba(16, 26, 18, 0.9);
}

/* ── Lightbox ───────────────────────────────────────────────────────────────────────────────────────────────
   Fixed to the viewport, so it can never widen the page or introduce horizontal overflow. The panel is capped
   by viewport units and the media uses object-fit:contain, so nothing is ever cropped or stretched. */
.cblock__lb[b-rgp439qghn] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
             max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: rgba(8, 16, 10, 0.88);
    animation: cb-fade 0.25s ease both;
}

.cblock__lb-panel[b-rgp439qghn] {
    display: grid;
    place-items: center;
    max-width: min(96vw, 1400px);
    max-height: 86vh;
    min-width: 0;
}

/* contain, always: the original aspect ratio is preserved and no edge is ever cut off. */
.cblock__lb-media[b-rgp439qghn] {
    display: block;
    max-width: min(96vw, 1400px);
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.4rem;
}

.cblock__lb-close[b-rgp439qghn],
.cblock__lb-nav[b-rgp439qghn] {
    position: absolute;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cblock__lb-close:hover[b-rgp439qghn],
.cblock__lb-nav:hover[b-rgp439qghn] {
    background: rgba(255, 255, 255, 0.28);
}

.cblock__lb-close:focus-visible[b-rgp439qghn],
.cblock__lb-nav:focus-visible[b-rgp439qghn] {
    outline: 3px solid #c9a54a;
    outline-offset: 2px;
}

.cblock__lb-close[b-rgp439qghn] {
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.75rem;
    line-height: 1;
}

.cblock__lb-nav[b-rgp439qghn] {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    line-height: 1;
}

.cblock__lb-prev[b-rgp439qghn] { left: max(0.75rem, env(safe-area-inset-left)); }
.cblock__lb-next[b-rgp439qghn] { right: max(0.75rem, env(safe-area-inset-right)); }

.cblock__lb-count[b-rgp439qghn] {
    position: absolute;
    bottom: max(0.9rem, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.8);
}

/* Mobile: the media takes the width, and the side arrows move to the bottom corners so they never sit on top
   of the picture or of a video's control bar. Nothing overflows the viewport. */
@media (max-width: 640px) {
    .cblock__lb-panel[b-rgp439qghn],
    .cblock__lb-media[b-rgp439qghn] {
        max-width: 94vw;
        max-height: 70vh;
    }
    .cblock__lb-nav[b-rgp439qghn] {
        top: auto;
        bottom: max(0.9rem, env(safe-area-inset-bottom));
        transform: none;
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.75rem;
    }
    .cblock__lb-count[b-rgp439qghn] {
        bottom: calc(max(0.9rem, env(safe-area-inset-bottom)) + 0.6rem);
    }
}

/* Reduced motion — "Always reduce" on the field, or the reader's own OS preference. The dialog stays FULLY
   functional: only the non-essential fade is dropped. Interaction itself is never disabled. */
.cblock__lb--no-motion[b-rgp439qghn],
.cblock__lb--no-motion .cblock__lb-close[b-rgp439qghn],
.cblock__lb--no-motion .cblock__lb-nav[b-rgp439qghn] {
    animation: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .cblock__lb[b-rgp439qghn],
    .cblock__lb-close[b-rgp439qghn],
    .cblock__lb-nav[b-rgp439qghn] {
        animation: none;
        transition: none;
    }
}

/* ── Carousel ───────────────────────────────────────────────────────────────────────────────────────────────
   Opt-in per Gallery field. In GRID mode none of these rules apply and none of this markup exists: the gallery
   renders the .cblock__gallery grid exactly as before. Layout (--cb-cols / --cb-gap / --cb-ratio / --cb-card-h
   / fits), Card Design and Animation all keep working untouched inside the track. */
.cblock__car[b-rgp439qghn] {
    position: relative;
    min-width: 0;
    /* The stylesheet derives the live count from the CONFIGURED one, so the breakpoints below can cap it
       without a variable referring to itself (which would be invalid CSS). */
    --cb-car-n: var(--cb-car-n-set, 3);
}

.cblock__car:focus-visible[b-rgp439qghn] {
    outline: 3px solid #c9a54a;
    outline-offset: 4px;
    border-radius: 0.4rem;
}

/* The viewport clips the track. overflow-x:hidden here is what guarantees the PAGE never gains a horizontal
   scrollbar, however many slides the gallery holds. */
.cblock__car-view[b-rgp439qghn] {
    overflow: hidden;
    min-width: 0;
    /* Room for the lift/zoom hover and the focus ring, which would otherwise be clipped by the viewport. */
    padding: 0.5rem 0.35rem;
    margin: -0.5rem -0.35rem;
}

/* The track IS the .cblock__gallery element — same node, same inline properties — switched from grid to a
   horizontal flex row. Each slide is (100% - (n-1)*gap)/n wide, so the step per index is (100% + gap)/n. */
.cblock__gallery--car[b-rgp439qghn] {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    touch-action: pan-y;                 /* vertical page scrolling still works over the carousel */
    transform: translateX(calc(-1 * var(--cb-car-i, 0) * (100% + var(--cb-gap, 24px)) / var(--cb-car-n, 3)));
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.cblock__gallery--car[b-rgp439qghn] >  .ncard {
    flex: 0 0 calc((100% - (var(--cb-car-n, 3) - 1) * var(--cb-gap, 24px)) / var(--cb-car-n, 3));
    max-width: calc((100% - (var(--cb-car-n, 3) - 1) * var(--cb-gap, 24px)) / var(--cb-car-n, 3));
    width: auto;
    margin-inline: 0;
}

.cblock__car-arrow[b-rgp439qghn] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(16, 26, 18, 0.72);
    color: #ffffff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cblock__car-arrow:hover[b-rgp439qghn] { background: rgba(16, 26, 18, 0.9); }

.cblock__car-arrow:focus-visible[b-rgp439qghn],
.cblock__car-dot:focus-visible[b-rgp439qghn] {
    outline: 3px solid #c9a54a;
    outline-offset: 2px;
}

.cblock__car-prev[b-rgp439qghn] { left: -0.5rem; }
.cblock__car-next[b-rgp439qghn] { right: -0.5rem; }

.cblock__car-dots[b-rgp439qghn] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.cblock__car-dot[b-rgp439qghn] {
    width: 0.6rem;
    height: 0.6rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(31, 81, 48, 0.28);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.cblock__car-dot--on[b-rgp439qghn] {
    background: #1f5130;
    transform: scale(1.25);
}

/* Tablet / mobile: cap the slides per view from the CONFIGURED value, so the desktop setting is a maximum
   exactly like the grid's column count is. Nothing overflows the page at any width. */
@media (max-width: 900px) {
    .cblock__car[b-rgp439qghn] { --cb-car-n: min(var(--cb-car-n-set, 3), 2); }
}

@media (max-width: 560px) {
    .cblock__car[b-rgp439qghn] { --cb-car-n: 1; }
    .cblock__car-prev[b-rgp439qghn] { left: 0.25rem; }
    .cblock__car-next[b-rgp439qghn] { right: 0.25rem; }
}

/* Reduced motion: the slide TRANSITION goes, so paging is instant — but arrows, dots, swipe and keyboard all
   keep working. Automatic movement is stopped separately, in the component, for a field set to "always reduce". */
.cblock__gallery--car.cblock__gallery--no-motion[b-rgp439qghn],
.cblock__car--no-motion .cblock__gallery--car[b-rgp439qghn] {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .cblock__gallery--car[b-rgp439qghn] {
        transition: none;
    }
    .cblock__car-arrow[b-rgp439qghn],
    .cblock__car-dot[b-rgp439qghn] {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   NO-CROP POLICY FOR CMS IMAGERY
   The same head-cropping failure that was corrected in Home.razor.css and CmsPage.razor.css also lives here,
   and this is the file that actually renders a Custom block's Image field — so the earlier fixes never reached
   it. Only image FIT and FOCAL POINT are touched below. The lightbox, the carousel, the hover overlay, the
   entry animations and every fixed-position behaviour are deliberately untouched.

   Two different cases, treated differently on purpose:

   1. .cblock__img — the plain Image field. Its 4/3 box is HARD-CODED here; no admin setting produces it. A
      portrait photo forced into it loses its top, which on a photo of a person is their head. Because nothing
      authored it, it is simply removed: the image is constrained in one dimension and keeps its own shape.

   2. .cblock__card-img — a gallery card. Its box IS authored: --cb-card-h and --cb-ratio come from the block
      template's Card Design settings, and --cb-img-fit is the admin's own Image-fit choice. Removing that box
      would silently discard a real editorial decision, so the box stays exactly as configured. What is added is
      a focal anchor, so that when the admin has chosen `cover`, the crop is taken from the bottom of the frame
      rather than centred — faces stay in shot at every configured ratio.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.cblock__img[b-rgp439qghn] {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 34rem;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: var(--navr-focal, 50% 0%);
}

/* Gallery cards: the focal anchor for card media now lives with the card itself (NavrPremiumCard.razor.css,
   .ncard__img) — same rule, same value. */

/* The lightbox needs nothing here: .cblock__lb-media already uses object-fit: contain with a viewport-bounded
   max-height, so the full-screen view has never cropped. Left alone. */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   MOBILE ALIGNMENT FIX — same defect, same cause, same mechanism as Home.razor.css.
   The no-crop pass gave .cblock__img `width: auto` + `max-width: 100%` + `max-height: 34rem`. Its parent
   .cblock__figure is a plain `width: 100%` block, so once a tall source hits the height cap the image computes
   narrower than the figure and, with margin 0, sits flush left — all the leftover space on the right.

   `.cblock__card` was never affected: the original author already gave it `margin-inline: auto`. This restores
   the same convention to the image field, which is the one I rewrote and where I dropped it.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.cblock__img[b-rgp439qghn] {
    margin-inline: auto;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* PREVIEW-ONLY LAYOUT RULES. Every selector below is gated on .pub-theme--preview, which MainLayout adds only on
   the admin preview route ("/preview/{token}"); no real public route ever carries it, so the live site is
   untouched by this file.

   --navr-preview-offset is the preview banner's MEASURED height (CmsPreview.razor.js sets it on <html> from a
   ResizeObserver, so a banner that wraps to two lines on a phone, or grows with a longer message, is accounted
   for automatically). The fallback below only covers the instant before the first measurement. */

/* 1. Reserve the banner's height at the very top of the flow: a static or sticky header — which sits in the
      flow — starts BELOW the banner instead of underneath it. */
.pub-theme--preview[b-5lo2i2dbki] {
    padding-top: var(--navr-preview-offset, 2.75rem);
}

/* 2. A fixed or sticky header is positioned from the viewport top, so the flow padding alone would not move it:
      push its top edge down by the same measured height. Its own Admin-configured --nh-top still applies on top
      of that. A static header (nh--static) is in the flow and is already handled by the padding above. */
.pub-theme--preview[b-5lo2i2dbki]  .nh--pos-fixed:not(.nh--static),
.pub-theme--preview[b-5lo2i2dbki]  .nh--pos-sticky:not(.nh--static),
.pub-theme--preview[b-5lo2i2dbki]  .nh--overlay.nh--pos-normal,
.pub-theme--preview[b-5lo2i2dbki]  .nh--overlay.nh--static {
    top: calc(var(--nh-top, 0px) + var(--navr-preview-offset, 2.75rem));
}
/* /Components/Layout/PublicFooter.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Public site footer — premium redesign. Component-scoped via CSS isolation, so nothing here reaches any other
   section.

   THEME. The footer no longer owns a private palette. Its accent, leaf green and ground TINT are derived from
   the theme custom properties MainLayout republishes on .pub-theme (--navr-theme-*, --navr-gold), so changing
   the NAVR theme repaints the footer with no code change; the literals below are only the fallback for the
   instant before that inline style lands, and for a browser without color-mix().

   One deliberate exception: TEXT stays cream and the ground stays dark on every theme. The footer is the site's
   dark signature band, so binding text to --navr-theme-text (#212121 on light themes) would put unreadable ink
   on a dark ground. Contrast is therefore guaranteed for all 100 themes, while accent/tint still follow.

   NO 100vw break-out anywhere: the footer is an ordinary block in the layout flow and is therefore full-width
   by construction. It is never fixed or sticky, and never its own scroll container.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.pubftr[b-57hob8r4w3] {
    /* Ground: a deep forest base, tinted by the active theme's primary. */
    --ftr-base: #0F1A10;
    --ftr-ground: color-mix(in srgb, var(--navr-theme-primary, #2E7D32) 13%, var(--ftr-base));
    --ftr-ground-deep: color-mix(in srgb, var(--navr-theme-primary, #2E7D32) 7%, #0A120B);

    --ftr-text: #F3EFE3;
    --ftr-muted: rgba(243, 239, 227, 0.66);
    --ftr-faint: rgba(243, 239, 227, 0.42);

    /* Accent + leaf green follow the theme (MainLayout re-points --navr-gold to the theme primary; the brand
       theme keeps NAVR gold, which is exactly the behaviour the header and page accents already have). */
    --ftr-gold: var(--navr-gold, #C9A24B);
    --ftr-green: var(--navr-theme-secondary, #8FBF6A);

    --ftr-rule: color-mix(in srgb, var(--ftr-gold) 20%, transparent);
    --ftr-rule-soft: rgba(243, 239, 227, 0.10);
    --ftr-surface: rgba(255, 255, 255, 0.045);
    --ftr-surface-2: rgba(255, 255, 255, 0.075);

    position: relative;
    isolation: isolate;
    margin-top: clamp(3rem, 7vw, 6rem);
    padding: 0;
    background:
        radial-gradient(120% 100% at 12% 0%, color-mix(in srgb, var(--ftr-green) 12%, transparent) 0%, transparent 58%),
        linear-gradient(180deg, var(--ftr-ground) 0%, var(--ftr-ground) 45%, var(--ftr-ground-deep) 100%);
    color: var(--ftr-text);
    font-size: 15px;
    line-height: 1.7;
    /* The footer is NEVER its own scroll container: it grows to its content and the page scrolls as a whole.
       Pinned explicitly so no inherited or future height/overflow rule can clip it or give it a scrollbar. */
    height: auto;
    max-height: none;
    overflow: visible;
}

/* A browser without color-mix still gets the original, fully readable palette. */
@supports not (background: color-mix(in srgb, red, blue)) {
    .pubftr[b-57hob8r4w3] {
        --ftr-ground: #0F1A10;
        --ftr-ground-deep: #0C150D;
        --ftr-rule: rgba(201, 162, 75, 0.20);
        background: linear-gradient(180deg, #0F1A10 0%, #0F1A10 45%, #0C150D 100%);
    }
}

.pubftr[data-dark="true"][b-57hob8r4w3] {
    --ftr-base: #0A120B;
    --ftr-ground-deep: color-mix(in srgb, var(--navr-theme-primary, #2E7D32) 5%, #070E08);
    --ftr-rule: color-mix(in srgb, var(--ftr-gold) 16%, transparent);
}

/* ── Decorative crest (top transition) ─────────────────────────────────────────────────────────────────────
   An organic curve rather than a straight border. It sits ABOVE the footer's own box and is painted in the
   footer's ground colour, so the page content appears to flow into the footer. Pointer-events off. */
.pubftr__crest[b-57hob8r4w3] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: clamp(46px, 6vw, 96px);
    pointer-events: none;
    line-height: 0;
    overflow: hidden;
}

.pubftr__crest svg[b-57hob8r4w3] { display: block; width: 100%; height: 100%; }

/* The ivory crest lifts the footer away from whatever sits above it; the deeper curve just beneath becomes the
   footer's own top edge, so the two read as one layered organic transition rather than a seam. */
.pubftr__crestivory[b-57hob8r4w3] { fill: #F5F1E8; }
.pubftr__crestdeep[b-57hob8r4w3] { fill: var(--ftr-ground); }

.pubftr[data-dark="true"] .pubftr__crestivory[b-57hob8r4w3] { fill: #E8E3D5; }

/* ── Botanical decoration ──────────────────────────────────────────────────────────────────────────────────
   Two leaf silhouettes, drawn as inline SVG strokes (no image request). Deliberately very low contrast and
   behind every content layer, and removed entirely on small viewports where there is no room to spare. */
.pubftr__flora[b-57hob8r4w3] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.pubftr__leaf[b-57hob8r4w3] {
    position: absolute;
    width: clamp(180px, 22vw, 340px);
    height: auto;
    fill: none;
    stroke: var(--ftr-green);
    stroke-width: 2;
    opacity: .07;
}

.pubftr__leaf--l[b-57hob8r4w3] { left: -4%; top: 8%; transform: rotate(-10deg); }
.pubftr__leaf--r[b-57hob8r4w3] { right: -5%; top: 4%; transform: rotate(8deg); }

/* The village horizon sits along the lower band, behind the bottom bar. */
.pubftr__horizon[b-57hob8r4w3] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: clamp(110px, 16vw, 200px);
    fill: none;
    stroke: var(--ftr-green);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: .085;
}

/* Everything below the decoration layer sits above it. */
.pubftr__inner[b-57hob8r4w3],
.pubftr__bottom[b-57hob8r4w3] { position: relative; z-index: 1; }

/* ── Main grid ─────────────────────────────────────────────────────────────────────────────────────────── */

.pubftr__inner[b-57hob8r4w3] {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2.75rem, 6vw, 4.75rem) clamp(1.25rem, 5vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
    display: grid;
    /* Brand column is widest; the CONTACT column (always last) gets more than a plain link column because it
       carries an email address, which must not be forced to break mid-word. */
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.95fr)) minmax(0, 1.35fr);
    gap: clamp(2.25rem, 4vw, 3.75rem) clamp(1.5rem, 2.6vw, 2.6rem);
    align-items: start;
}

/* The track count follows the REAL configuration (see data-cols), so a site with fewer link columns gets a
   balanced composition instead of a dangling empty track on the right — and the last track stays roomy. */
.pubftr__inner[data-cols="1"][b-57hob8r4w3] { grid-template-columns: minmax(0, 1fr); }
.pubftr__inner[data-cols="2"][b-57hob8r4w3] { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr); }
.pubftr__inner[data-cols="3"][b-57hob8r4w3] { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr) minmax(0, 1.35fr); }

/* ── Brand / story ─────────────────────────────────────────────────────────────────────────────────────── */

.pubftr__brand[b-57hob8r4w3] { min-width: 0; max-width: 34rem; }

.pubftr__mark[b-57hob8r4w3] {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    text-decoration: none;
    color: var(--ftr-text);
    margin-bottom: .55rem;
}

.pubftr__mark:focus-visible[b-57hob8r4w3] { outline: 2px solid var(--ftr-gold); outline-offset: 4px; border-radius: 8px; }
.pubftr__markimg[b-57hob8r4w3] { display: block; max-width: 100%; height: auto; flex: 0 0 auto; }

.pubftr__marktext[b-57hob8r4w3] {
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1;
    color: var(--ftr-text);
}

.pubftr__brandline[b-57hob8r4w3] {
    margin: 0 0 1.35rem;
    padding-bottom: 1rem;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ftr-faint);
    position: relative;
}

/* A short gold rule under the wordmark — the reference's brand lockup accent. */
.pubftr__brandline[b-57hob8r4w3]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ftr-gold), transparent);
}

/* The tagline is the brand column's highlight: gold, larger, and the one warm note above the description. */
.pubftr__tagline[b-57hob8r4w3] {
    margin: 0 0 .9rem;
    font-size: clamp(1.25rem, 2.6vw, 1.7rem);
    line-height: 1.42;
    font-weight: 700;
    color: var(--ftr-gold);
    overflow-wrap: anywhere;
}

.pubftr__desc[b-57hob8r4w3] {
    margin: 0 0 1.5rem;
    color: var(--ftr-muted);
    max-width: 32rem;
    overflow-wrap: anywhere;
}

/* Brand CTA — pill, hairline, restrained accent. */
.pubftr__cta[b-57hob8r4w3] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 46px;
    padding: .6rem 1.35rem;
    border-radius: 999px;
    border: 1px solid var(--ftr-rule);
    background: var(--ftr-surface);
    color: var(--ftr-text);
    font-weight: 600;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .18s ease, color .25s ease;
}

.pubftr__cta:hover[b-57hob8r4w3] {
    background: color-mix(in srgb, var(--ftr-gold) 16%, transparent);
    border-color: color-mix(in srgb, var(--ftr-gold) 58%, transparent);
    color: #fff;
    transform: translateY(-1px);
}

.pubftr__cta:focus-visible[b-57hob8r4w3] { outline: 2px solid var(--ftr-gold); outline-offset: 3px; }
.pubftr__cta-leaf[b-57hob8r4w3] { display: grid; place-items: center; color: var(--ftr-green); }
.pubftr__cta-leaf svg[b-57hob8r4w3] { width: 17px; height: 17px; }
.pubftr__cta-arrow[b-57hob8r4w3] { transition: transform .25s ease; }
.pubftr__cta:hover .pubftr__cta-arrow[b-57hob8r4w3] { transform: translateX(3px); }

/* Decorative brand messaging — quiet by design. */
.pubftr__script[b-57hob8r4w3] {
    margin: 1.6rem 0 0;
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.5;
    color: color-mix(in srgb, var(--ftr-gold) 62%, transparent);
    opacity: .8;
}

.pubftr__script span[b-57hob8r4w3] { display: block; padding-left: 1.5rem; }

/* ── Link columns ──────────────────────────────────────────────────────────────────────────────────────── */

.pubftr__col[b-57hob8r4w3] { min-width: 0; }

.pubftr__coltitle[b-57hob8r4w3] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.2rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ftr-gold);
}

.pubftr__colicon[b-57hob8r4w3] { flex: 0 0 auto; display: grid; place-items: center; color: var(--ftr-green); }
.pubftr__colicon svg[b-57hob8r4w3] { width: 17px; height: 17px; }

.pubftr__list[b-57hob8r4w3] { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.pubftr__link[b-57hob8r4w3] {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    color: var(--ftr-muted);
    text-decoration: none;
    transition: color .2s ease;
    overflow-wrap: anywhere;
}

.pubftr__link:hover[b-57hob8r4w3] { color: var(--ftr-gold); }
.pubftr__link:focus-visible[b-57hob8r4w3] { outline: 2px solid var(--ftr-gold); outline-offset: 3px; border-radius: 4px; }

.pubftr__linkchev[b-57hob8r4w3] {
    color: color-mix(in srgb, var(--ftr-gold) 70%, transparent);
    transition: transform .2s ease;
}

.pubftr__link:hover .pubftr__linkchev[b-57hob8r4w3] { transform: translateX(3px); }

/* ── Contact ───────────────────────────────────────────────────────────────────────────────────────────── */

.pubftr__contactlist[b-57hob8r4w3] { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.pubftr__crow[b-57hob8r4w3] { display: flex; align-items: flex-start; gap: .8rem; min-width: 0; }

.pubftr__cicon[b-57hob8r4w3] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--ftr-rule);
    background: var(--ftr-surface);
    color: var(--ftr-gold);
    transition: background .25s ease, transform .2s ease;
}

.pubftr__crow:hover .pubftr__cicon[b-57hob8r4w3] { background: var(--ftr-surface-2); transform: translateY(-1px); }

.pubftr__ctext[b-57hob8r4w3] { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

/* break-word, NOT anywhere: an email should wrap at a sensible boundary if it truly must, never be chopped
   mid-word (…gmail.co / m) while the column still had room. */
.pubftr__cvalue[b-57hob8r4w3] { color: var(--ftr-text); font-weight: 600; overflow-wrap: break-word; }
.pubftr__cvalue--link[b-57hob8r4w3] { text-decoration: none; transition: color .2s ease; }
.pubftr__cvalue--link:hover[b-57hob8r4w3] { color: var(--ftr-gold); }
.pubftr__cvalue--link:focus-visible[b-57hob8r4w3] { outline: 2px solid var(--ftr-gold); outline-offset: 3px; border-radius: 4px; }

.pubftr__csub[b-57hob8r4w3] {
    font-size: .82rem;
    color: var(--ftr-faint);
    text-decoration: none;
    transition: color .2s ease;
    overflow-wrap: anywhere;
}

a.pubftr__csub:hover[b-57hob8r4w3] { color: var(--ftr-gold); }
a.pubftr__csub:focus-visible[b-57hob8r4w3] { outline: 2px solid var(--ftr-gold); outline-offset: 3px; border-radius: 4px; }
.pubftr__csub--plain[b-57hob8r4w3] { cursor: default; }

/* ── Social ────────────────────────────────────────────────────────────────────────────────────────────── */

.pubftr__socialblock[b-57hob8r4w3] {
    /* A hairline rule instead of a bare gap: the contact list above ends on a text row, so the social block
       needs a boundary of its own to read as a separate section rather than as another contact row. */
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--ftr-rule-soft);
}

.pubftr__socialtitle[b-57hob8r4w3] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .3rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ftr-text);
}

.pubftr__socialtitleicon[b-57hob8r4w3] { display: grid; place-items: center; color: var(--ftr-gold); }
.pubftr__socialtitleicon svg[b-57hob8r4w3] { width: 16px; height: 16px; }

.pubftr__socialnote[b-57hob8r4w3] { margin: 0 0 1rem; font-size: .84rem; color: var(--ftr-faint); }

.pubftr__social[b-57hob8r4w3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}

/* Premium social tiles. The earlier treatment painted every disc in a full, saturated brand fill at REST,
   which put two of the loudest colours on the web (Facebook blue, YouTube red) beside a restrained cream-on-
   forest column — the buttons read as pasted-in stickers rather than as part of the footer. The resting state is
   therefore the footer's own material: the same hairline rule, glass surface and rounded geometry the contact
   icons already use, with the platform colour carried by the GLYPH so identity is never lost. The brand fill is
   moved to hover, where it belongs — the tile lights up in full platform colour on intent, then settles back.

   Squircle rather than circle: the contact rows above are circles, so a circle here would read as a third
   contact row; the 14px tile keeps the family resemblance while staying clearly its own control. */
.pubftr__socialbtn[b-57hob8r4w3] {
    --net: var(--ftr-green);
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid var(--ftr-rule);
    background: var(--ftr-surface);
    /* The glyph carries the platform identity at rest: the brand hue, lifted toward white so it stays legible
       on the dark glass (raw #1877F2 on a near-black tile is too dim to read as blue). */
    color: color-mix(in srgb, var(--net) 62%, #fff);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease;
    -webkit-tap-highlight-color: transparent;
}

/* The brand wash sits on a pseudo-element so it can cross-fade on hover; animating a gradient on the element
   itself would not transition at all. */
.pubftr__socialbtn[b-57hob8r4w3]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg,
        color-mix(in srgb, #fff 18%, var(--net)) 0%,
        var(--net) 55%,
        color-mix(in srgb, var(--net) 88%, #000) 100%);
    opacity: 0;
    transition: opacity .22s ease;
}

/* The glyph wrapper must clear the wash. */
.pubftr__socialbtn > *[b-57hob8r4w3] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

.pubftr__socialbtn svg[b-57hob8r4w3] { width: 22px; height: 22px; display: block; }

.pubftr__socialbtn:hover[b-57hob8r4w3] {
    color: #fff;
    border-color: color-mix(in srgb, var(--net) 55%, transparent);
    transform: translateY(-2px);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, .38),
        0 2px 5px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .30);
}

.pubftr__socialbtn:hover[b-57hob8r4w3]::before { opacity: 1; }

.pubftr__socialbtn:active[b-57hob8r4w3] { transform: translateY(-1px) scale(.97); }
.pubftr__socialbtn:focus-visible[b-57hob8r4w3] { outline: 2px solid var(--ftr-gold); outline-offset: 3px; }

/* Platform identity. Any platform the configuration adds that is not listed here simply keeps the NAVR leaf
   green above, so the row never breaks on an unknown key. Official brand values; the depth stops are left to
   the formula above so every tile keeps the same treatment instead of being hand-darkened one by one. */
.pubftr__socialbtn[data-net="facebook"][b-57hob8r4w3] { --net: #1877F2; }
.pubftr__socialbtn[data-net="youtube"][b-57hob8r4w3] { --net: #FF0000; }
/* Instagram is the one platform whose identity IS a gradient, so its hover wash keeps the diagonal brand ramp
   while the resting glyph uses the ramp's dominant hue. */
.pubftr__socialbtn[data-net="instagram"][b-57hob8r4w3] { --net: #DD2A7B; }
.pubftr__socialbtn[data-net="instagram"][b-57hob8r4w3]::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(145deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%);
}
.pubftr__socialbtn[data-net="linkedin"][b-57hob8r4w3] { --net: #0A66C2; }
.pubftr__socialbtn[data-net="whatsapp"][b-57hob8r4w3] { --net: #25D366; }
.pubftr__socialbtn[data-net="x"][b-57hob8r4w3],
.pubftr__socialbtn[data-net="twitter"][b-57hob8r4w3] { --net: #9AA3AE; }

/* Without color-mix the glyph colour above is dropped, which would leave it inheriting cream on cream-tinted
   glass — readable, but with no platform identity at all. Fall back to the raw brand hue lightened by the
   browser's own means: a plain white glyph on the hairline tile. */
@supports not (color: color-mix(in srgb, red, blue)) {
    .pubftr__socialbtn[b-57hob8r4w3] { color: var(--ftr-text); }
    .pubftr__socialbtn:hover[b-57hob8r4w3] { border-color: var(--ftr-rule); }
}


/* ── Newsletter ────────────────────────────────────────────────────────────────────────────────────────── */

/* Placement. The newsletter is a normal grid item, so it follows the REAL column count: in the reference's
   four-track composition it sits under the link columns with the contact column running full height beside it;
   with fewer columns it simply spans the whole row as a wide band. Nothing is assumed about the data. */
.pubftr__news[b-57hob8r4w3] {
    grid-column: 1 / -1;
    border: 1px solid color-mix(in srgb, var(--ftr-gold) 30%, transparent);
    border-radius: 20px;
    background:
        radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--ftr-green) 12%, transparent), transparent 60%),
        rgba(0, 0, 0, .22);
    padding: clamp(1.35rem, 3vw, 1.9rem);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem 1rem;
    align-items: start;
}

@media (min-width: 861px) {
    .pubftr__inner[data-cols="4"] .pubftr__brand[b-57hob8r4w3],
    .pubftr__inner[data-cols="4"] .pubftr__contact[b-57hob8r4w3] { grid-row: span 2; }
    .pubftr__inner[data-cols="4"] .pubftr__news[b-57hob8r4w3] { grid-column: 2 / -2; }
}

.pubftr__newsicon[b-57hob8r4w3] {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--ftr-gold) 38%, transparent);
    background: color-mix(in srgb, var(--ftr-gold) 16%, transparent);
    color: var(--ftr-gold);
}

.pubftr__newshead[b-57hob8r4w3] { min-width: 0; }

.pubftr__newstitle[b-57hob8r4w3] {
    margin: 0 0 .3rem;
    font-size: clamp(1.02rem, 2vw, 1.2rem);
    font-weight: 700;
    color: var(--ftr-gold);
}

.pubftr__newstext[b-57hob8r4w3] {
    margin: 0;
    color: var(--ftr-muted);
    font-size: .9rem;
    line-height: 1.6;
}

.pubftr__newsform[b-57hob8r4w3] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.1rem;
}

/* The visible placeholder is the field's label; the element itself is for assistive technology only. */
.pubftr__newslabel[b-57hob8r4w3] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pubftr__newsinput[b-57hob8r4w3] {
    flex: 1 1 15rem;
    min-width: 0;
    min-height: 50px;
    padding: .7rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--ftr-rule);
    background: rgba(0, 0, 0, .22);
    color: var(--ftr-text);
    font: inherit;
    transition: border-color .25s ease, background .25s ease;
}

.pubftr__newsinput[b-57hob8r4w3]::placeholder { color: var(--ftr-faint); }

.pubftr__newsinput:focus[b-57hob8r4w3] {
    outline: none;
    border-color: color-mix(in srgb, var(--ftr-gold) 62%, transparent);
    background: rgba(0, 0, 0, .30);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ftr-gold) 18%, transparent);
}

.pubftr__newsbtn[b-57hob8r4w3] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 50px;
    padding: .7rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ftr-gold), color-mix(in srgb, var(--ftr-gold) 72%, #F3EFE3));
    color: #14281A;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease, transform .18s ease;
}

.pubftr__newsbtn:hover[b-57hob8r4w3] { filter: brightness(1.06); transform: translateY(-1px); }
.pubftr__newsbtn:active[b-57hob8r4w3] { transform: translateY(0) scale(.985); }
.pubftr__newsbtn:focus-visible[b-57hob8r4w3] { outline: 2px solid var(--ftr-text); outline-offset: 3px; }
.pubftr__newsarrow[b-57hob8r4w3] { transition: transform .2s ease; }
.pubftr__newsbtn:hover .pubftr__newsarrow[b-57hob8r4w3] { transform: translateX(3px); }

.pubftr__newsnote[b-57hob8r4w3] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .85rem 0 0;
    font-size: .8rem;
    color: var(--ftr-faint);
}

.pubftr__newsnoteicon[b-57hob8r4w3] { display: grid; place-items: center; }
.pubftr__newsnoteicon svg[b-57hob8r4w3] { width: 14px; height: 14px; }

/* ── Sustainability line ───────────────────────────────────────────────────────────────────────────────── */

.pubftr__values[b-57hob8r4w3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    font-size: .84rem;
    letter-spacing: .04em;
    color: var(--ftr-muted);
    text-align: center;
}

.pubftr__valuesleaf[b-57hob8r4w3] { display: grid; place-items: center; color: var(--ftr-green); }
.pubftr__valuesleaf svg[b-57hob8r4w3] { width: 15px; height: 15px; }
.pubftr__valuesdot[b-57hob8r4w3] { color: color-mix(in srgb, var(--ftr-gold) 55%, transparent); }

/* ── Bottom bar ────────────────────────────────────────────────────────────────────────────────────────── */

.pubftr__bottom[b-57hob8r4w3] { border-top: 1px solid var(--ftr-rule-soft); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Three logical areas: copyright, sustainability, policy/location. Each collapses out when empty. */
.pubftr__bottominner[b-57hob8r4w3] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.35rem clamp(1.25rem, 5vw, 2.5rem);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem 1.5rem;
}

.pubftr__bottomstart[b-57hob8r4w3] { justify-self: start; text-align: start; min-width: 0; }

.pubftr__bottomend[b-57hob8r4w3] {
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem 1rem;
    min-width: 0;
}

.pubftr__copy[b-57hob8r4w3] { margin: 0; color: var(--ftr-muted); font-size: .86rem; }
.pubftr__legal[b-57hob8r4w3] { margin: .15rem 0 0; color: var(--ftr-faint); font-size: .8rem; }
.pubftr__legal--notice[b-57hob8r4w3] { font-size: .75rem; opacity: .85; }
.pubftr__legalsep[b-57hob8r4w3] { margin: 0 .35rem; color: color-mix(in srgb, var(--ftr-gold) 55%, transparent); }
.pubftr__place[b-57hob8r4w3] { margin: 0; color: var(--ftr-faint); font-size: .82rem; }

.pubftr__policy[b-57hob8r4w3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    font-size: .82rem;
}

/* A hairline between the policy links and the location, as the reference has. */
.pubftr__policy li + li[b-57hob8r4w3],
.pubftr__bottomend .pubftr__place[b-57hob8r4w3] {
    border-inline-start: 1px solid var(--ftr-rule-soft);
    padding-inline-start: 1rem;
}

/* The developer credit strip is NAVR.SharedUI NavrDeveloperCredit (its own stylesheet). */

/* ── Responsive ────────────────────────────────────────────────────────────────────────────────────────── */

/* The data-cols rules above carry an attribute selector, so every responsive override below must match that
   specificity or it would silently lose to them. Each step narrows only the compositions that are still too
   wide for the viewport, leaving already-narrow configurations alone. */
@media (max-width: 1100px) {
    .pubftr__inner[data-cols="4"][b-57hob8r4w3] { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }

    /* The contact column is tightest here. Reclaim the width the icon and gap take so a full email address
       still sits on ONE line instead of breaking (…gmail.co / m). */
    .pubftr__cicon[b-57hob8r4w3] { width: 34px; height: 34px; }
    .pubftr__crow[b-57hob8r4w3] { gap: .6rem; }
    .pubftr__cvalue[b-57hob8r4w3] { font-size: .92rem; }
}

@media (max-width: 980px) {
    /* Below the reference's spacious desktop composition the bottom bar stacks into one centred column. */
    .pubftr__bottominner[b-57hob8r4w3] { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .pubftr__bottomstart[b-57hob8r4w3] { justify-self: center; text-align: center; }
    .pubftr__bottomend[b-57hob8r4w3] { justify-self: center; justify-content: center; }
}

@media (max-width: 860px) {
    .pubftr__inner[data-cols="3"][b-57hob8r4w3],
    .pubftr__inner[data-cols="4"][b-57hob8r4w3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pubftr__inner[data-cols="2"][b-57hob8r4w3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pubftr__brand[b-57hob8r4w3] { grid-column: 1 / -1; max-width: none; }
    .pubftr__leaf[b-57hob8r4w3] { opacity: .05; }
    .pubftr__horizon[b-57hob8r4w3] { opacity: .06; }
}

@media (max-width: 560px) {
    .pubftr[b-57hob8r4w3] { font-size: 14.5px; }
    .pubftr__inner[b-57hob8r4w3],
    .pubftr__inner[data-cols][b-57hob8r4w3] { grid-template-columns: minmax(0, 1fr); }
    /* The decoration has no room to breathe on a phone — remove it rather than let it sit behind the text. */
    .pubftr__flora[b-57hob8r4w3] { display: none; }
    .pubftr__script[b-57hob8r4w3] { margin-top: 1.25rem; }
    .pubftr__news[b-57hob8r4w3] { grid-template-columns: minmax(0, 1fr); }
    .pubftr__newsicon[b-57hob8r4w3] { grid-row: auto; margin-bottom: .35rem; }
    .pubftr__newsform[b-57hob8r4w3] { flex-direction: column; }
    .pubftr__newsbtn[b-57hob8r4w3] { justify-content: center; }
    .pubftr__socialbtn[b-57hob8r4w3] { width: 42px; height: 42px; border-radius: 12px; }
    .pubftr__socialbtn svg[b-57hob8r4w3] { width: 20px; height: 20px; }
    .pubftr__bottominner[b-57hob8r4w3] { padding-left: 1.1rem; padding-right: 1.1rem; }
    /* The hairline separators read as clutter once the row wraps on a phone. */
    .pubftr__policy li + li[b-57hob8r4w3],
    .pubftr__bottomend .pubftr__place[b-57hob8r4w3] { border-inline-start: 0; padding-inline-start: 0; }
}

@media (max-width: 359.98px) {
    .pubftr__marktext[b-57hob8r4w3] { font-size: 1.6rem; letter-spacing: .22em; }
    .pubftr__brandline[b-57hob8r4w3] { font-size: .62rem; letter-spacing: .16em; }
    .pubftr__social[b-57hob8r4w3] { gap: .5rem; }
}

/* ── Reduced motion ────────────────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .pubftr__cta[b-57hob8r4w3],
    .pubftr__cta-arrow[b-57hob8r4w3],
    .pubftr__linkchev[b-57hob8r4w3],
    .pubftr__cicon[b-57hob8r4w3],
    .pubftr__socialbtn[b-57hob8r4w3],
    .pubftr__newsbtn[b-57hob8r4w3],
    .pubftr__newsarrow[b-57hob8r4w3],
    .pubftr__newsinput[b-57hob8r4w3],
    .pubftr__link[b-57hob8r4w3] {
        transition-duration: .01ms !important;
    }

    .pubftr__cta:hover[b-57hob8r4w3],
    .pubftr__socialbtn:hover[b-57hob8r4w3],
    .pubftr__socialbtn:active[b-57hob8r4w3],
    .pubftr__newsbtn:hover[b-57hob8r4w3],
    .pubftr__crow:hover .pubftr__cicon[b-57hob8r4w3],
    .pubftr__link:hover .pubftr__linkchev[b-57hob8r4w3],
    .pubftr__cta:hover .pubftr__cta-arrow[b-57hob8r4w3],
    .pubftr__newsbtn:hover .pubftr__newsarrow[b-57hob8r4w3] { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   FOOTER DESIGN SYSTEM BRIDGE  (appended by the Premium Footer Design System step)

   Everything above stays exactly as it was and remains the fallback. This block is purely ADDITIVE: each rule
   re-declares one property in terms of a --pf-* custom property whose FALLBACK is the value the rule above
   already produced. So with no configuration saved, every declaration below resolves to today's value and the
   footer is pixel-identical; once Admin changes a setting, FooterPresentationCss emits that custom property on
   the element's inline style and the value flows through.

   The PALETTE is not repeated here: FooterPresentationCss emits --ftr-text / --ftr-muted / --ftr-gold /
   --ftr-rule / --ftr-surface / --ftr-ground directly as inline custom properties, which the existing rules
   above already consume. A colour the administrator has not pinned is not emitted at all, so theme-following
   is preserved.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.pubftr[b-57hob8r4w3] {
    border: var(--pf-border, 0 solid transparent);
    border-radius: var(--pf-radius, 0);
    font-size: var(--pf-body-size, 15px);
    line-height: var(--pf-body-lh, 1.7);
    font-family: var(--pf-body-font, inherit);
}

/* Configured background. "theme" emits no --pf-bg at all, so the themed gradient above stands. */
.pubftr.pf--bg-solid[b-57hob8r4w3],
.pubftr.pf--bg-gradient[b-57hob8r4w3],
.pubftr.pf--bg-transparent[b-57hob8r4w3],
.pubftr.pf--bg-image[b-57hob8r4w3],
.pubftr.pf--bg-image-overlay[b-57hob8r4w3] {
    background: var(--pf-bg, transparent);
}

/* The media ground and its overlay, beneath every content layer. */
.pubftr.pf--bg-image[b-57hob8r4w3]::before,
.pubftr.pf--bg-image-overlay[b-57hob8r4w3]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--pf-bg-image, none);
    background-position: var(--pf-bg-pos, center);
    background-size: var(--pf-bg-size, cover);
    background-repeat: var(--pf-bg-repeat, no-repeat);
}

.pubftr.pf--bg-image-overlay[b-57hob8r4w3]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--pf-overlay, transparent);
}

/* ── Top separator ──────────────────────────────────────────────────────────────────────────────────────── */
.pubftr__crest[b-57hob8r4w3] {
    height: var(--pf-shape-h, 110px);
    opacity: var(--pf-shape-opacity, 1);
    transform: scaleX(var(--pf-shape-flip, 1));
}

.pubftr.pf--shape-none .pubftr__crest[b-57hob8r4w3],
.pubftr.pf--shape-straight .pubftr__crest[b-57hob8r4w3] { height: 0; }

/* Crest colours are only overridden when Admin pinned them; otherwise the rules above win. */
.pubftr__crestivory[b-57hob8r4w3] { fill: var(--pf-shape-color, currentColor); }
.pubftr__crestdeep[b-57hob8r4w3] { fill: var(--pf-shape-color-2, currentColor); }

/* ── Layout ─────────────────────────────────────────────────────────────────────────────────────────────── */
.pubftr__inner[b-57hob8r4w3] {
    max-width: var(--pf-max-w, 1240px);
    padding-top: var(--pf-pad-top, 72px);
    padding-bottom: var(--pf-pad-bottom, 28px);
    padding-left: var(--pf-pad-x, 24px);
    padding-right: var(--pf-pad-x, 24px);
    column-gap: var(--pf-col-gap, 40px);
    row-gap: var(--pf-row-gap, 32px);
}

/* ── Typography ─────────────────────────────────────────────────────────────────────────────────────────── */
.pubftr__coltitle[b-57hob8r4w3],
.pubftr__socialtitle[b-57hob8r4w3],
.pubftr__newstitle[b-57hob8r4w3] {
    font-family: var(--pf-head-font, inherit);
    font-size: var(--pf-head-size, 15px);
    font-weight: var(--pf-head-weight, 600);
    letter-spacing: var(--pf-head-ls, 1.2px);
    text-transform: var(--pf-head-transform, uppercase);
}

.pubftr__link[b-57hob8r4w3] { font-size: var(--pf-link-size, 14px); font-weight: var(--pf-link-weight, 400); }

/* ── Branding ───────────────────────────────────────────────────────────────────────────────────────────── */
.pubftr__markimg[b-57hob8r4w3] {
    height: var(--pf-logo-h, auto);
    border-radius: var(--pf-logo-radius, 0);
}

.pubftr.pf--no-logo .pubftr__markimg[b-57hob8r4w3] { display: none; }

/* ── Social ─────────────────────────────────────────────────────────────────────────────────────────────── */
.pubftr__social[b-57hob8r4w3] { gap: var(--pf-social-gap, 10px); }

.pubftr__socialbtn[b-57hob8r4w3] {
    width: var(--pf-social-size, 46px);
    height: var(--pf-social-size, 46px);
    border-radius: var(--pf-social-radius, 14px);
}

.pubftr__socialbtn svg[b-57hob8r4w3] { width: var(--pf-social-icon, 22px); height: var(--pf-social-icon, 22px); }

.pubftr__socialbtn:hover[b-57hob8r4w3] { transform: translateY(calc(-1 * var(--pf-social-lift, 3px))); }

/* Style presets. "brand-hover" is the current design and therefore changes nothing. */
.pubftr.pf--social-outline .pubftr__socialbtn[b-57hob8r4w3] { background: transparent; }
.pubftr.pf--social-minimal .pubftr__socialbtn[b-57hob8r4w3] { background: transparent; border-color: transparent; box-shadow: none; }
.pubftr.pf--social-brand-filled .pubftr__socialbtn[b-57hob8r4w3] { background: var(--net, var(--ftr-gold)); color: #fff; }
.pubftr.pf--social-brand-filled .pubftr__socialbtn[b-57hob8r4w3]::before { opacity: 0; }

/* ── Newsletter ─────────────────────────────────────────────────────────────────────────────────────────── */
.pubftr__news[b-57hob8r4w3] { border-radius: var(--pf-news-radius, 16px); text-align: var(--pf-news-align, left); }
.pubftr.pf--news-minimal .pubftr__news[b-57hob8r4w3] { background: transparent; border-color: transparent; }
.pubftr.pf--news-bordered .pubftr__news[b-57hob8r4w3] { background: transparent; }

/* ── Decoration ─────────────────────────────────────────────────────────────────────────────────────────── */
.pubftr__flora[b-57hob8r4w3] { opacity: var(--pf-decor-opacity, .22); }
.pubftr.pf--decor-none .pubftr__flora[b-57hob8r4w3] { display: none; }
.pubftr.pf--horizon .pubftr__horizon[b-57hob8r4w3] { display: block; }
.pubftr:not(.pf--horizon) .pubftr__horizon[b-57hob8r4w3] { display: none; }

/* Custom decorative media replaces the built-in leaves when the template asks for it. */
.pubftr.pf--decor-custom .pubftr__leaf[b-57hob8r4w3] { display: none; }

.pubftr.pf--decor-custom .pubftr__flora[b-57hob8r4w3] {
    background-image: var(--pf-decor-left, none), var(--pf-decor-right, none);
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, right bottom;
    background-size: calc(260px * var(--pf-decor-scale, 1)) auto, calc(260px * var(--pf-decor-scale, 1)) auto;
}

/* ── Bottom bar ─────────────────────────────────────────────────────────────────────────────────────────── */
.pubftr__bottom[b-57hob8r4w3] { font-size: var(--pf-copyright-size, 13px); }
.pubftr:not(.pf--bottom-divider) .pubftr__bottom[b-57hob8r4w3] { border-top-width: 0; }
.pubftr.pf--bottom-center .pubftr__bottom[b-57hob8r4w3] { justify-content: center; text-align: center; }
.pubftr.pf--bottom-left .pubftr__bottom[b-57hob8r4w3] { justify-content: flex-start; }
.pubftr.pf--bottom-right .pubftr__bottom[b-57hob8r4w3] { justify-content: flex-end; }

/* ── Colour sources: headings, links, copyright, icons ─────────────────────────────────────────────────────
   FooterPresentationCss resolves each configured colour through the shared NavrColorResolver (Theme → the active
   theme's --navr-color-* token, Default Color → the NAVR default palette, Custom → the validated hex) and emits it
   ONLY when configured. Every fallback below is exactly the value the rule above already produced. */
.pubftr__coltitle[b-57hob8r4w3],
.pubftr__newstitle[b-57hob8r4w3] { color: var(--pf-heading, var(--ftr-gold)); }
.pubftr__socialtitle[b-57hob8r4w3] { color: var(--pf-heading, var(--ftr-text)); }

.pubftr__link[b-57hob8r4w3] { color: var(--pf-link, var(--ftr-muted)); }
.pubftr__link:hover[b-57hob8r4w3] { color: var(--pf-link-hover, var(--ftr-gold)); }

.pubftr__copy[b-57hob8r4w3] { color: var(--pf-bottom-text, var(--ftr-muted)); }

.pubftr__colicon[b-57hob8r4w3] { color: var(--pf-icon, var(--ftr-green)); }
.pubftr__cicon[b-57hob8r4w3],
.pubftr__socialtitleicon[b-57hob8r4w3] { color: var(--pf-icon, var(--ftr-gold)); }
.pubftr__crow:hover .pubftr__cicon[b-57hob8r4w3] { color: var(--pf-icon-hover, var(--pf-icon, var(--ftr-gold))); }
.pubftr__crow:active .pubftr__cicon[b-57hob8r4w3] { color: var(--pf-icon-active, var(--pf-icon-hover, var(--pf-icon, var(--ftr-gold)))); }

@supports (color: color-mix(in srgb, red, blue)) {
    .pubftr__socialbtn[b-57hob8r4w3] { color: var(--pf-icon, color-mix(in srgb, var(--net) 62%, #fff)); }
    .pubftr__socialbtn:hover[b-57hob8r4w3] { color: var(--pf-icon-hover, #fff); }
    .pubftr__socialbtn:active[b-57hob8r4w3] { color: var(--pf-icon-active, var(--pf-icon-hover, #fff)); }
    .pubftr.pf--social-brand-filled .pubftr__socialbtn[b-57hob8r4w3] { color: var(--pf-icon, #fff); }
    .pubftr.pf--social-brand-filled .pubftr__socialbtn:hover[b-57hob8r4w3] { color: var(--pf-icon-hover, var(--pf-icon, #fff)); }
    .pubftr.pf--social-brand-filled .pubftr__socialbtn:active[b-57hob8r4w3] { color: var(--pf-icon-active, var(--pf-icon-hover, var(--pf-icon, #fff))); }
}

/* ── Motion ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* Animations are OPT-IN and never block content: every part is fully visible if the animation never runs. */
.pubftr.pf--anim .pubftr__brand[b-57hob8r4w3],
.pubftr.pf--anim .pubftr__col[b-57hob8r4w3],
.pubftr.pf--anim .pubftr__news[b-57hob8r4w3] {
    animation: pubftr-in-b-57hob8r4w3 var(--pf-anim-duration, 700ms) cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes pubftr-in-b-57hob8r4w3 {
    from { opacity: 0; transform: translateY(var(--pf-anim-shift, 14px)); }
    to { opacity: 1; transform: none; }
}

.pubftr.pf--in-fade .pubftr__brand[b-57hob8r4w3],
.pubftr.pf--in-fade .pubftr__col[b-57hob8r4w3],
.pubftr.pf--in-fade .pubftr__news[b-57hob8r4w3] { --pf-anim-shift: 0px; }

@media (prefers-reduced-motion: reduce) {
    .pubftr.pf--rm-system .pubftr__brand[b-57hob8r4w3],
    .pubftr.pf--rm-system .pubftr__col[b-57hob8r4w3],
    .pubftr.pf--rm-system .pubftr__news[b-57hob8r4w3] { animation: none; }
}

.pubftr.pf--rm-always-reduce .pubftr__brand[b-57hob8r4w3],
.pubftr.pf--rm-always-reduce .pubftr__col[b-57hob8r4w3],
.pubftr.pf--rm-always-reduce .pubftr__news[b-57hob8r4w3] { animation: none; }

/* ── Responsive ─────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .pubftr__crest[b-57hob8r4w3] { height: var(--pf-shape-h-mobile, 64px); }

    .pubftr__inner[b-57hob8r4w3] {
        padding-top: calc(var(--pf-pad-top, 72px) * var(--pf-mobile-pad-scale, .7));
        padding-bottom: calc(var(--pf-pad-bottom, 28px) * var(--pf-mobile-pad-scale, .7));
    }

    .pubftr__socialbtn[b-57hob8r4w3] {
        width: var(--pf-social-size-mobile, 42px);
        height: var(--pf-social-size-mobile, 42px);
    }

    .pubftr.pf--decor-m-hidden .pubftr__flora[b-57hob8r4w3] { display: none; }
}
/* /Components/Layout/PublicHeader.razor.rz.scp.css */
/* Public header styles now live in the shared Universal Premium Header chrome
   (NAVR.SharedUI/Components/Header/NavrHeaderFrame.razor.css) — one stylesheet driven entirely by the
   Admin-saved presentation (--nh-* custom properties + nh--* modifier classes), shared with the Admin live
   preview so the two can never diverge. This component supplies only the live content (menu, language, theme,
   CTA) using the nh__* classes that stylesheet targets through ::deep.

   Kept deliberately empty of visual rules: anything added here would apply to the public site only and could
   not be previewed in Admin. */
.pubhdr[b-9pjp3vb0rn] { /* host hook for page-level selectors; no visual rules */ }
/* /Components/Layout/PublicMediaCreditsLine.razor.rz.scp.css */
/* One quiet line under the footer: theme-following text colour, wraps on a phone, never wider than the page. */
.pmc-line[b-l383hkzb0t] {
    margin: 0;
    padding: 10px 16px 14px;
    text-align: center;
    font-size: .78rem;
    line-height: 1.5;
    color: inherit;
    opacity: .8;
    overflow-wrap: anywhere;
}

.pmc-line__link[b-l383hkzb0t] {
    margin-left: .4em;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pmc-line__link:focus-visible[b-l383hkzb0t] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* /Components/Order/PublicOrderButton.razor.rz.scp.css */
/* The Order Now button wears the header's own CTA styling (nh__cta, from the shared NavrHeaderFrame stylesheet) — size,
   colours, radius, hover and focus ring all come from the saved header presentation and the active theme. The rules here
   only cover what the button element and the order action need on top of that. */

.pub-order-btn[b-oub19lb0gt] {
    cursor: pointer;
}

/* A label can be up to 40 characters: on a phone it wraps onto two short lines rather than pushing the bar wider than the
   screen. */
@media (max-width: 560px) {
    .nh__cta.pub-order-btn[b-oub19lb0gt] {
        white-space: normal;
        max-width: 9.5rem;
        line-height: 1.15;
        text-align: center;
        justify-content: center;
    }
}

/* The header's "hide the CTA on mobile" option, and the split-top mobile strategy that hides the bar's CTA, belong to the
   configured header CTA. Ordering is a separate action that a visitor must be able to reach on every device (the mobile
   menu does not list it), so it stays visible there — the header's fit ladder gives it a row of its own when needed. */
.nh--mobile.nh--m-nocta .nh__cta.pub-order-btn[b-oub19lb0gt],
.nh--mob-split-top.nh--mobile .nh__cta.pub-order-btn[b-oub19lb0gt] {
    display: inline-flex;
}
/* /Components/Order/PublicOrderEntry.razor.rz.scp.css */
/* CARD ORDER — the card beside the card order form. Colours, radius and spacing come from the assigned template's own tokens
   (--pf-*, PaymentFormTheme), so the card order is painted exactly like the website's form. Two columns when there is room,
   one column (card on top) on a phone. */

.co[b-19rbvjzqgt] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: calc(var(--pf-gap) * 1.2);
    align-items: start;
}

.co__item[b-19rbvjzqgt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--pf-pad);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    background: var(--pf-surface);
    position: sticky;
    top: 0;
}

.co__media[b-19rbvjzqgt] {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--pf-radius) * .75);
    overflow: hidden;
    background: var(--pf-accent-soft);
    border: 1px solid var(--pf-accent-line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.co__img[b-19rbvjzqgt] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.co__icon[b-19rbvjzqgt] {
    color: var(--pf-accent);
    display: inline-flex;
}

.co__badge[b-19rbvjzqgt] {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--pf-accent);
    color: var(--pf-ink);
    font-size: .74em;
    font-weight: 600;
}

.co__title[b-19rbvjzqgt] {
    margin: 4px 0 0;
    font-family: var(--pf-head);
    font-size: 1.25em;
    font-weight: 700;
    color: var(--pf-text);
    overflow-wrap: anywhere;
}

.co__text[b-19rbvjzqgt] {
    margin: 0;
    color: var(--pf-muted);
    font-size: .92em;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.co__price[b-19rbvjzqgt] {
    margin: 4px 0 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.co__price-value[b-19rbvjzqgt] {
    color: var(--pf-accent-text);
    font-size: 1.6em;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.co__price-each[b-19rbvjzqgt] {
    color: var(--pf-muted);
    font-size: .82em;
}

.co__main[b-19rbvjzqgt] {
    display: flex;
    flex-direction: column;
    gap: var(--pf-gap);
    min-width: 0;
}

.co__qty[b-19rbvjzqgt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.co__stepper[b-19rbvjzqgt] {
    display: inline-flex;
    align-items: stretch;
    width: max-content;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-field-radius);
    background: var(--pf-field);
    overflow: hidden;
}

.co__step[b-19rbvjzqgt] {
    width: 44px;
    min-height: 42px;
    border: 0;
    background: transparent;
    color: var(--pf-text);
    font-size: 1.25em;
    line-height: 1;
}

.co__step:hover:not(:disabled)[b-19rbvjzqgt] {
    background: var(--pf-accent-soft);
    color: var(--pf-accent-text);
}

.co__step:focus-visible[b-19rbvjzqgt] {
    outline: 2px solid var(--pf-accent);
    outline-offset: -2px;
}

.co__step:disabled[b-19rbvjzqgt] {
    opacity: .4;
    cursor: not-allowed;
}

.co__qty-value[b-19rbvjzqgt] {
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-inline: 1px solid var(--pf-border);
    color: var(--pf-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.co__summary[b-19rbvjzqgt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-field-radius);
    background: var(--pf-surface);
}

.co__summary-title[b-19rbvjzqgt] {
    margin: 0 0 2px;
    font-family: var(--pf-head);
    font-weight: 700;
    color: var(--pf-text);
}

.co__line[b-19rbvjzqgt] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--pf-text);
    font-size: .92em;
}

.co__line > span:first-child[b-19rbvjzqgt] {
    overflow-wrap: anywhere;
}

.co__line > span:last-child[b-19rbvjzqgt] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.co__line--total[b-19rbvjzqgt] {
    padding-top: 8px;
    border-top: 1px solid var(--pf-border);
    font-size: 1.05em;
    font-weight: 700;
}

.co__line--total > span:last-child[b-19rbvjzqgt] {
    color: var(--pf-accent-text);
}

.co__summary .pf__fine[b-19rbvjzqgt] {
    justify-content: flex-start;
    text-align: start;
}

@media (max-width: 760px) {
    .co[b-19rbvjzqgt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .co__item[b-19rbvjzqgt] {
        position: static;
    }

    .co__media[b-19rbvjzqgt] {
        aspect-ratio: 16 / 9;
    }
}
/* /Components/Order/PublicOrderForm.razor.rz.scp.css */
.pub-order-form[b-hgwzc5ra7f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Colours come from the active theme's published tokens (MainLayout), so the notice follows the website's theme. */
.pub-order-form__notice[b-hgwzc5ra7f] {
    margin: 0;
    padding: .7rem .9rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--navr-theme-primary, #1f5130) 35%, transparent);
    background: color-mix(in srgb, var(--navr-theme-primary, #1f5130) 8%, transparent);
    color: var(--navr-theme-text, #1d2a22);
    font-size: .9rem;
    line-height: 1.5;
}

/* The payment form is a CSS container that lays itself out for the width it is given (desktop / tablet / mobile arrangement),
   so the stage only has to hand it the full available width and never more. */
.pub-order-form__stage[b-hgwzc5ra7f] {
    min-width: 0;
    max-width: 100%;
}
/* /Components/Order/PublicOrderModal.razor.rz.scp.css */
/* Order Now dialog. Colours come from the active theme tokens MainLayout publishes (--navr-theme-*), so the dialog chrome
   follows the website's theme; the form inside keeps its own template design. Above the fixed header (z-index 1000). */

.pub-order[b-7l48ndxdtb] {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(.75rem, 3vw, 2rem);
}

.pub-order__backdrop[b-7l48ndxdtb] {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 10, .62);
}

.pub-order__dialog[b-7l48ndxdtb] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 1040px);
    max-height: 100%;
    min-width: 0;
    border-radius: 16px;
    background: var(--navr-theme-surface, #ffffff);
    color: var(--navr-theme-text, #1d2a22);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
    overflow: hidden;
    outline: none;
}

.pub-order__head[b-7l48ndxdtb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem .9rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--navr-theme-text, #1d2a22) 12%, transparent);
    flex: 0 0 auto;
}

.pub-order__title[b-7l48ndxdtb] {
    margin: 0;
    min-width: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pub-order__close[b-7l48ndxdtb] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: 0 .9rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--navr-theme-text, #1d2a22) 22%, transparent);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.pub-order__close:hover[b-7l48ndxdtb] {
    background: color-mix(in srgb, var(--navr-theme-text, #1d2a22) 7%, transparent);
}

.pub-order__close:focus-visible[b-7l48ndxdtb] {
    outline: 3px solid var(--navr-theme-primary, #1f5130);
    outline-offset: 2px;
}

/* The only scrolling region: long forms scroll here, the page behind stays still. */
.pub-order__body[b-7l48ndxdtb] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1rem clamp(.75rem, 2.5vw, 1.5rem) 1.5rem;
}

/* Phones: a full-screen sheet. */
@media (max-width: 600px) {
    .pub-order[b-7l48ndxdtb] {
        padding: 0;
        align-items: stretch;
    }

    .pub-order__dialog[b-7l48ndxdtb] {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .pub-order__close-text[b-7l48ndxdtb] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .pub-order__close[b-7l48ndxdtb] {
        width: 44px;
        justify-content: center;
        padding: 0;
    }
}
/* /Components/Pages/CmsPage.razor.rz.scp.css */
/* Generic public CMS page — plain, readable layout for pages that don't have a bespoke design (Home is separate).
   Same eco-resort palette as Home.razor.css (#1f5130 deep leaf green) but self-contained; scoped via CSS isolation. */

.cms-page[b-gz7356k7q9] {
    max-width: 52rem;
    margin: 0 auto;
    /* Top padding is boosted beyond the original clamp(2rem,5vw,4rem) to also clear PublicHeader's fixed bar
       (~84px tall incl. its own padding — see PublicHeader.razor.css .pubhdr/.pubhdr__bar). MainLayout.razor's
       <main class="pub-main"> has no top offset of its own, and unlike Home's tall, vertically-centered hero
       section (which happens to sit below the header without needing one), this page's <h1> starts right at
       the top — so without extra clearance here it renders hidden behind the fixed header. Left/right/bottom
       padding are unchanged. Captured as a custom property (not just a literal) so .cms-page__hero below can
       cancel exactly this amount via a matching negative margin-top, with no risk of the two values drifting
       apart. */
    --cms-page-top-pad: clamp(6rem, 4vw + 5rem, 7.5rem);
    padding: var(--cms-page-top-pad) clamp(1.25rem, 5vw, 2rem) clamp(2rem, 5vw, 4rem);
}

.cms-page--loading[b-gz7356k7q9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.cms-page__spinner[b-gz7356k7q9] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid rgba(31, 81, 48, 0.2);
    border-top-color: #1f5130;
    animation: cms-page-spin-b-gz7356k7q9 0.8s linear infinite;
}

@keyframes cms-page-spin-b-gz7356k7q9 {
    to {
        transform: rotate(360deg);
    }
}

.cms-page--empty[b-gz7356k7q9] {
    text-align: center;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.cms-page--empty h1[b-gz7356k7q9] {
    margin: 0;
    color: #1f5130;
}

.cms-page__home-link[b-gz7356k7q9] {
    color: #1f5130;
    font-weight: 600;
    text-decoration: underline;
}

.cms-page__header[b-gz7356k7q9] {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.cms-page__title[b-gz7356k7q9] {
    margin: 0;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    color: #1f5130;
}

.cms-page__block[b-gz7356k7q9] {
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.cms-page__block-title[b-gz7356k7q9] {
    margin: 0 0 0.5rem;
    font-weight: 700;
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    color: #1f5130;
}

.cms-page__block-body[b-gz7356k7q9] {
    margin: 0;
    line-height: 1.7;
    color: #2b2b2b;
    white-space: pre-wrap;
}

.cms-page__media[b-gz7356k7q9] {
    display: block;
    width: 100%;
    max-height: 28rem;
    object-fit: contain;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.cms-page__gallery[b-gz7356k7q9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cms-page__gallery-item[b-gz7356k7q9] {
    width: 100%;
    height: 10rem;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* Hero block — a copy of Home.razor.css's .hero/.hero__* rules, sized and spanned to match exactly (Blazor CSS
   isolation scopes styles per component, so Home's rules don't reach this page even when the same class names
   are reused — this file needs and gets its own copy). Unlike every other block type here, Hero is deliberately
   full-bleed (edge to edge, ignoring .cms-page's max-width/padding) — the same "break out of a centered
   max-width container" trick as Home's own hero, which is a top-level section with no width constraint at all:
   margin-left/right: calc(50% - 50vw) shifts the box so its edges land exactly at the viewport edges regardless
   of .cms-page's own width, without needing to move the markup out of `<article class="cms-page">`. No
   border-radius, unlike this file's other media (.cms-page__media) — Home's hero is a flat full-width band. */
.cms-page__hero[b-gz7356k7q9] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(360px, 62vh, 640px);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Cancel .cms-page's own top padding exactly (via the shared --cms-page-top-pad custom property) so that
       when Hero is the page's first element (see CmsPage.razor — it now renders before/instead of the generic
       header), it starts flush at the very top of <main> — i.e. behind PublicHeader's fixed, semi-transparent
       bar — exactly like Home.razor's hero, instead of appearing below a gap left by that padding. Pages
       without a Hero block, or with Hero anywhere but first, are unaffected: this only pulls the box itself
       up, it doesn't touch sibling elements' own spacing. */
    margin-top: calc(-1 * var(--cms-page-top-pad));
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
    text-align: center;
    color: #ffffff;
    background-color: #1f5130;
}

.cms-page__hero-video[b-gz7356k7q9],
.cms-page__hero-image[b-gz7356k7q9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #10231a;
    z-index: 0;
}

/* Neither the image nor the video is ever cropped (the image was a cover-sized CSS background). The VIDEO: cover clipped whatever
   overflowed the hero box, cutting the subject off a frame taller than the box. contain preserves the whole
   frame at its original aspect ratio — no stretch — on a deep-leaf ground so the letterboxing looks deliberate. */
.cms-page__hero-video[b-gz7356k7q9] {
    object-fit: contain;
    object-position: center;
    background: #10231a;
}

.cms-page__hero-overlay[b-gz7356k7q9] {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.cms-page__hero-inner[b-gz7356k7q9] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 6rem) clamp(1.25rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
}

.cms-page__hero-title[b-gz7356k7q9] {
    margin: 0;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    font-size: clamp(1.9rem, 5.5vw, 3.6rem);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.cms-page__hero-body[b-gz7356k7q9] {
    margin: 0;
    max-width: 46rem;
    font-size: clamp(1rem, 2.4vw, 1.4rem);
    line-height: 1.55;
    opacity: 0.96;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 600px) {
    .cms-page__hero[b-gz7356k7q9] {
        min-height: 58vh;
    }
    .cms-page__hero-body[b-gz7356k7q9] {
        font-size: 1.02rem;
    }
}

.cms-page__hero-cta[b-gz7356k7q9] {
    margin-top: .4rem;
    display: inline-block;
    padding: .7em 1.7em;
    border-radius: 999px;
    background: #c9a54a;
    color: #1f5130;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   5B-2 — EXPERIENCE LAYER REFINEMENT
   Appended, not rewritten — deleting this block restores the previous rendering exactly. This file is the
   renderer for EVERY non-Home CMS page, so the changes here are deliberately the conservative half of the
   pass: rhythm, measure, media scale and motion states. No section is recomposed and no block type gains or
   loses a layout.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── EDITORIAL MEASURE AND RHYTHM ────────────────────────────────────────────────────────────────────────────
   Body copy sat at the full 52rem column, which is a long line to track. 68ch is the readable ceiling; the
   column itself is untouched, so headings, media and galleries keep their current width. Block spacing is
   opened up so sections breathe instead of running together. */
.cms-page__block[b-gz7356k7q9] {
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.cms-page__block-body[b-gz7356k7q9] {
    max-width: 68ch;
    color: var(--navr-ink-soft, #2b2b2b);
}

.cms-page__block-title[b-gz7356k7q9] {
    letter-spacing: -0.015em;
}

/* The same short gold rule the Home About section uses, so a CMS page and the home page read as one design
   system. Pure CSS — no markup change, and it applies to every block type that renders a title. */
.cms-page__block-title[b-gz7356k7q9]::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 3px;
    margin-bottom: 0.7rem;
    border-radius: 2px;
    background: var(--navr-gold, #c9a54a);
}

.cms-page__title[b-gz7356k7q9] {
    letter-spacing: -0.02em;
}

/* ── MEDIA AT EDITORIAL SCALE ────────────────────────────────────────────────────────────────────────────────
   A single block image was capped at the 52rem text column and 28rem tall — the size of an illustration, not of
   the subject of a section. On wide viewports it now breaks out past the text column (the same centred
   break-out arithmetic .cms-page__hero uses, but bounded rather than full-bleed so it stays a composition and
   not a banner).
   CROP SAFETY: the 16:9 box below applies to LANDSCAPE and unknown-shape sources only. A portrait source keeps
   an upright box, because forcing a tall photo into a wide one is what cut heads off. Orientation comes from
   MediaDto.Width/Height, which the CMS already records at upload. */
@media (min-width: 1000px) {
    .cms-page__media[b-gz7356k7q9] {
        width: min(64rem, calc(100vw - 2 * clamp(1.25rem, 5vw, 2rem)));
        max-width: none;
        max-height: none;
        /* Bounded, not cropped. A forced 16/9 cover box removes the top of any portrait source whose Width/Height
           the CMS never recorded (Orient() then reports "landscape"). Height is capped instead, so a wide photo
           still fills the break-out and a tall one is simply smaller — never beheaded. */
        aspect-ratio: auto;
        height: auto;
        max-height: clamp(22rem, 70vh, 40rem);
        object-fit: contain;
        margin-inline: auto;
        margin-left: calc((100% - min(64rem, calc(100vw - 2 * clamp(1.25rem, 5vw, 2rem)))) / 2);
        border-radius: var(--navr-radius-lg, 0.9rem);
        box-shadow: var(--navr-shadow-md, 0 10px 30px rgba(20, 44, 28, 0.15));
        margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
    }

    /* Portrait: stay inside the text column, upright, centred. No break-out, no wide crop. */
    .cms-page__media[data-orient="portrait"][b-gz7356k7q9] {
        width: min(30rem, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .cms-page__media[data-orient="square"][b-gz7356k7q9] {
        width: min(40rem, 100%);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Applies at EVERY width, including the untouched sub-1000px layout, where the base rule's max-height: 28rem
   was already cropping tall images from the centre. */
.cms-page__media[b-gz7356k7q9] {
    object-position: var(--navr-focal, 50% 0%);
}

.cms-page__media[data-orient="portrait"][b-gz7356k7q9] {
    object-position: var(--navr-focal, 50% 0%);
}

/* ── GALLERY — composition chosen by ITEM COUNT ──────────────────────────────────────────────────────────────
   Same correction as Home's gallery: the previous six-column mosaic ran at every count, so a two-image gallery
   became one 4x2 feature plus one small orphan. The renderer states the intended composition; the stylesheet
   honours it. Below 900px the original grid is untouched. */
.cms-page__gallery-item[b-gz7356k7q9] {
    border-radius: var(--navr-radius-md, 0.75rem);
    box-shadow: var(--navr-shadow-sm, 0 6px 20px rgba(20, 44, 28, 0.12));
    object-position: var(--navr-focal, 50% 0%);
}

.cms-page__gallery-item[data-orient="portrait"][b-gz7356k7q9] {
    object-position: var(--navr-focal, 50% 0%);
}

@media (min-width: 900px) {
    .cms-page__gallery-item[b-gz7356k7q9] {
        height: 100%;
        object-fit: contain;
    }

    .cms-page__gallery[data-count="single"][b-gz7356k7q9] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cms-page__gallery[data-count="single"] .cms-page__gallery-item[b-gz7356k7q9] {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Two items: a deliberate, asymmetric-but-balanced pair sharing one height. */
    .cms-page__gallery[data-count="pair"][b-gz7356k7q9] {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: stretch;
    }

    .cms-page__gallery[data-count="pair"] .cms-page__gallery-item[b-gz7356k7q9] {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .cms-page__gallery[data-count="few"][b-gz7356k7q9] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    }

    .cms-page__gallery[data-count="few"] .cms-page__gallery-item[b-gz7356k7q9] {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .cms-page__gallery[data-count="mosaic"][b-gz7356k7q9] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: 11rem;
        gap: clamp(0.75rem, 1.6vw, 1.1rem);
    }

    .cms-page__gallery[data-count="mosaic"] .cms-page__gallery-item[b-gz7356k7q9] {
        grid-column: span 2;
        grid-row: span 1;
    }

    .cms-page__gallery[data-count="mosaic"] .cms-page__gallery-item:nth-child(6n + 1)[b-gz7356k7q9] {
        grid-column: span 4;
        grid-row: span 2;
    }

    .cms-page__gallery[data-count="mosaic"] .cms-page__gallery-item:nth-child(6n + 4)[b-gz7356k7q9],
    .cms-page__gallery[data-count="mosaic"] .cms-page__gallery-item[data-orient="portrait"][b-gz7356k7q9] {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* ── HERO CTA STATES ─────────────────────────────────────────────────────────────────────────────────────────
   The rule already existed here (unlike Home's, which was inline-only); it was simply missing its states. */
.cms-page__hero-cta[b-gz7356k7q9] {
    letter-spacing: 0.01em;
    transition: transform var(--navr-dur-fast, 0.35s) var(--navr-ease, ease),
                box-shadow var(--navr-dur-fast, 0.35s) var(--navr-ease, ease);
}

.cms-page__hero-cta:hover[b-gz7356k7q9],
.cms-page__hero-cta:focus-visible[b-gz7356k7q9] {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
}

/* ── MOTION PREFERENCE ───────────────────────────────────────────────────────────────────────────────────────
   This page had no reduced-motion handling of any kind. The loading spinner is intentionally still animated —
   a frozen spinner reads as a hung page rather than as a calmer one. */
@media (prefers-reduced-motion: reduce) {
    .cms-page__hero-cta[b-gz7356k7q9] {
        transition: none;
    }

    .cms-page__hero-cta:hover[b-gz7356k7q9],
    .cms-page__hero-cta:focus-visible[b-gz7356k7q9] {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   5B-3 — HERO HANDOFF AND BLOCK RHYTHM
   Appended. Deleting this block restores 5B-2 exactly. The motion itself lives in navr-experience.css; this
   file only supplies the spacing and the containment those mechanisms need on a CMS page.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── HERO -> FIRST BLOCK (§7) ────────────────────────────────────────────────────────────────────────────────
   The hero already pulls itself flush to the top of the viewport (5B-2). What was missing is the pause after
   it: the first block began at the same rhythm as every later block, so the page moved from an immersive
   full-bleed band straight into body copy. Opening the gap after the hero — and ONLY after the hero — gives the
   handoff a beat without lengthening the rest of the page. */
.cms-page__hero + .cms-page__block[b-gz7356k7q9] {
    margin-top: clamp(2.5rem, 7vw, 5rem);
}

/* NOTE: the hero's settle animation starts its media 5.5% oversized. That is already clipped by
   .cms-page__hero's existing `overflow: hidden` (5B-2), so the scaled frame can never widen the page. No extra
   containment is declared here on purpose — `contain: paint` would additionally make the hero a containing
   block for fixed-position descendants, which is a risk with no benefit over the clipping already in place. */

/* ── STORY PACING (§18) ──────────────────────────────────────────────────────────────────────────────────────
   A page of consecutive text blocks reads as one undifferentiated column. Giving a block that CARRIES AN IMAGE
   more room than a text-only block creates alternation from the CMS content itself, with no new field and no
   authoring step. */
.cms-page__block:has(.cms-page__media)[b-gz7356k7q9],
.cms-page__block:has(.cms-page__gallery)[b-gz7356k7q9] {
    margin-bottom: clamp(3.25rem, 8vw, 6rem);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   NO-CROP POLICY FOR CMS IMAGERY  —  final, metadata-free
   Same policy as Home.razor.css, applied to the generic CMS page renderer so the fix is not partial. A CMS
   image is constrained in ONE dimension only, so its box always matches its own proportions and there is
   nothing to crop — regardless of whether MediaDto.Width/Height were ever recorded (they are null for the
   media in this CMS, which is why the earlier orientation-based fix never fired).
   Appended last, so it wins on source order over the earlier rules in this file.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.cms-page__gallery-item[b-gz7356k7q9] {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    grid-column: auto;
    grid-row: auto;
}

.cms-page__gallery[b-gz7356k7q9],
.cms-page__gallery[data-count="single"][b-gz7356k7q9],
.cms-page__gallery[data-count="pair"][b-gz7356k7q9],
.cms-page__gallery[data-count="few"][b-gz7356k7q9],
.cms-page__gallery[data-count="mosaic"][b-gz7356k7q9] {
    grid-auto-rows: auto;
    align-items: start;
}

@media (min-width: 900px) {
    .cms-page__gallery[data-count="mosaic"][b-gz7356k7q9],
    .cms-page__gallery[data-count="few"][b-gz7356k7q9] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    }

    .cms-page__gallery[data-count="pair"][b-gz7356k7q9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cms-page__gallery[data-count="single"][b-gz7356k7q9] {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    /* The mosaic span rules above are neutralised here rather than deleted, so the 5B-2/5B-3 history in this
       file stays readable and the change is one block to revert. */
    .cms-page__gallery[data-count="mosaic"] .cms-page__gallery-item[b-gz7356k7q9],
    .cms-page__gallery[data-count="mosaic"] .cms-page__gallery-item:nth-child(6n + 1)[b-gz7356k7q9],
    .cms-page__gallery[data-count="mosaic"] .cms-page__gallery-item:nth-child(6n + 4)[b-gz7356k7q9],
    .cms-page__gallery[data-count="mosaic"] .cms-page__gallery-item[data-orient="portrait"][b-gz7356k7q9] {
        grid-column: auto;
        grid-row: auto;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   5B-4 — MEDIA AS COMPOSITION (CMS pages)
   The same column-span hierarchy as Home, so a gallery looks like one system on both surfaces. Spans only —
   never grid-row, never a forced ratio — so heights stay the images' own and nothing is cropped.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
    .cms-page__gallery[data-count="few"][b-gz7356k7q9],
    .cms-page__gallery[data-count="mosaic"][b-gz7356k7q9] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .cms-page__gallery[data-count="few"] .cms-page__gallery-item[b-gz7356k7q9],
    .cms-page__gallery[data-count="mosaic"] .cms-page__gallery-item[b-gz7356k7q9] {
        grid-column: span 2;
    }

    .cms-page__gallery[data-count="few"] .cms-page__gallery-item:first-child[b-gz7356k7q9],
    .cms-page__gallery[data-count="mosaic"] .cms-page__gallery-item:nth-child(6n + 1)[b-gz7356k7q9],
    .cms-page__gallery[data-count="mosaic"] .cms-page__gallery-item:nth-child(6n + 4)[b-gz7356k7q9] {
        grid-column: span 4;
    }
}

/* Poster ground, matching Home and CustomBlockSection. */
video.cms-page__gallery-item[b-gz7356k7q9],
video.cms-page__media[b-gz7356k7q9] {
    background: var(--navr-green-800, #10231a);
}

/* ── PER-PAGE / PER-ARTICLE BACKGROUND — the wrapper itself lives in Components/Cms/CmsPageBackground.razor(.css);
   only the rule that targets THIS component's own <article> stays here. */
/* The content column sits above the scrim. Applied ONLY when a background exists, so a page without one keeps
   its original (static, no stacking context) box exactly as it was. */
.cms-page--on-bg[b-gz7356k7q9] {
    position: relative;
    z-index: 1;
}

/* /Components/Pages/CmsPreview.razor.rz.scp.css */
/* Scoped to the preview route only (Blazor CSS isolation), so nothing here can reach a real public page. */

.cms-preview__banner[b-l041z0f1cq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .6rem 1rem;
    margin: 0;
    background: #7a4b00;
    color: #fff;
    font-size: .9rem;
    line-height: 1.4;
    /* Fixed to the top of the viewport. It does NOT cover the header: its measured height is published as
       --navr-preview-offset (CmsPreview.razor.js) and MainLayout.razor.css reserves that much room above the
       public header, so banner, header and content stack. The z-index only orders it above the header's own
       layer (--nh-z, 1000 by default) for the moments before the first measurement lands. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    z-index: 2000;
}

.cms-preview__badge[b-l041z0f1cq] {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .72rem;
}

.cms-preview__bn[b-l041z0f1cq] {
    opacity: .85;
}

.cms-preview__state[b-l041z0f1cq] {
    max-width: 40rem;
    margin: 6rem auto;
    padding: 0 1.25rem;
    text-align: center;
}

.cms-preview__state h1[b-l041z0f1cq] {
    font-size: 1.6rem;
    margin-bottom: .75rem;
}

.cms-preview__state p[b-l041z0f1cq] {
    margin: .5rem 0;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .cms-preview__banner[b-l041z0f1cq] {
        font-size: .82rem;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Public Home Hero — clean agro / eco-resort styling. Scoped via Blazor CSS isolation. Fully responsive:
   the layout is fluid, the type scales with the viewport (clamp), and the section reflows on tablet/mobile. */

.hero[b-izpi7122ca] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tracks a 16:9 frame (56.25vw) so the hero box scales with the viewport instead of holding a fixed band
       that a taller video could only fill by being cropped. Floor keeps it usable on small phones. */
    min-height: clamp(320px, 56.25vw, 640px);
    padding: clamp(2rem, 6vw, 6rem) clamp(1.25rem, 5vw, 4rem);
    text-align: center;
    color: #ffffff;
    background-color: #1f5130; /* deep leaf green fallback */
    background-position: center;
    background-repeat: no-repeat;
}

.hero--plain[b-izpi7122ca],
.hero--empty[b-izpi7122ca],
.hero--loading[b-izpi7122ca] {
    background-image: linear-gradient(135deg, #1f5130 0%, #2e7d4f 55%, #3f9d63 100%);
}

.hero__inner[b-izpi7122ca] {
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: center;
}

.hero__title[b-izpi7122ca] {
    margin: 0;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    font-size: clamp(1.9rem, 5.5vw, 3.6rem);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero__body[b-izpi7122ca] {
    margin: 0;
    max-width: 46rem;
    font-size: clamp(1rem, 2.4vw, 1.4rem);
    line-height: 1.55;
    opacity: 0.96;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.hero__spinner[b-izpi7122ca] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: hero-spin-b-izpi7122ca 0.8s linear infinite;
}

@keyframes hero-spin-b-izpi7122ca {
    to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
    .hero[b-izpi7122ca] {
        min-height: 58vh;
    }
    .hero__body[b-izpi7122ca] {
        font-size: 1.02rem;
    }
}

/* ── About section — consistent eco-resort palette with the Hero. Two-column when an image exists,
   single centered column when it does not; both reflow to a single stacked column on tablet/mobile. ── */
.about[b-izpi7122ca] {
    padding: clamp(2.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem);
    /* --navr-section-bg is set to transparent by CmsPageBackground ONLY when the editor configured a page
       background; otherwise it is undefined and this section keeps its original colour exactly. */
    background-color: var(--navr-section-bg, #f5f8f3); /* soft leaf-tinted paper */
    color: #1c2b1f;
}

.about__inner[b-izpi7122ca] {
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

/* With an image: media beside content on wide screens, stacked on narrow. */
.about--with-image .about__inner[b-izpi7122ca] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Text-only: a single readable, centered column. */
.about--text-only .about__inner[b-izpi7122ca] {
    grid-template-columns: minmax(0, 46rem);
    justify-content: center;
    text-align: center;
}

.about__media[b-izpi7122ca] {
    width: 100%;
}

.about__img[b-izpi7122ca] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 30rem;
    object-fit: contain;
    border-radius: 0.9rem;
    box-shadow: 0 10px 30px rgba(20, 44, 28, 0.15);
}

.about__title[b-izpi7122ca] {
    margin: 0 0 clamp(0.6rem, 1.5vw, 1rem);
    font-weight: 700;
    line-height: 1.18;
    font-size: clamp(1.5rem, 3.6vw, 2.4rem);
    color: #1f5130;
}

.about__body[b-izpi7122ca] {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.7;
    white-space: pre-line; /* preserve paragraph breaks authored in the CMS body */
}

@media (max-width: 820px) {
    .about--with-image .about__inner[b-izpi7122ca] {
        grid-template-columns: minmax(0, 1fr); /* stack image over text on tablet/mobile */
    }
    .about--with-image .about__content[b-izpi7122ca] {
        text-align: center;
    }
}

/* ── Gallery section — lightweight responsive grid (pure CSS, no JS gallery library). auto-fill keeps a sensible
   column count from desktop → tablet → mobile without breakpoints; images hold a consistent aspect ratio. ── */
.gallery[b-izpi7122ca] {
    padding: clamp(2.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem);
    background-color: var(--navr-section-bg, #ffffff);
    color: #1c2b1f;
}

.gallery__inner[b-izpi7122ca] {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    text-align: center;
}

.gallery__title[b-izpi7122ca] {
    margin: 0 0 clamp(0.5rem, 1.5vw, 0.9rem);
    font-weight: 700;
    line-height: 1.18;
    font-size: clamp(1.5rem, 3.6vw, 2.4rem);
    color: #1f5130;
}

.gallery__intro[b-izpi7122ca] {
    margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
    max-width: 46rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
    opacity: 0.9;
}

.gallery__grid[b-izpi7122ca] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

.gallery__item[b-izpi7122ca] {
    margin: 0;
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 6px 20px rgba(20, 44, 28, 0.12);
    background-color: #eef3ea;
}

.gallery__img[b-izpi7122ca] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.gallery__item:hover .gallery__img[b-izpi7122ca],
.gallery__item:focus-within .gallery__img[b-izpi7122ca] {
    /* A light lift, never a zoom: scaling inside the clipped tile hid the image's edges while hovered. */
    filter: brightness(1.05);
}

.gallery__empty[b-izpi7122ca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px dashed rgba(31, 81, 48, 0.35);
    border-radius: 0.9rem;
    background-color: #f5f8f3;
    color: #46614f;
}

.gallery__empty-icon[b-izpi7122ca] {
    font-size: 2rem;
}

.gallery__empty-text[b-izpi7122ca] {
    margin: 0;
    font-size: 1.05rem;
}

@media (max-width: 520px) {
    .gallery__grid[b-izpi7122ca] {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    }
}

/* ── Testimonials section — CSS-only responsive card grid (no carousel/JS). auto-fit gives 2–3 cards on desktop,
   wraps on tablet, and collapses to a single column on mobile. The quote is the visual focus. ── */
.testimonials[b-izpi7122ca] {
    padding: clamp(2.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem);
    background-color: var(--navr-section-bg, #f0f5ec); /* soft leaf tint, distinct from the white Gallery band */
    color: #1c2b1f;
}

.testimonials__inner[b-izpi7122ca] {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
}

.testimonials__grid[b-izpi7122ca] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
}

.testimonial[b-izpi7122ca] {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 8px 26px rgba(20, 44, 28, 0.1);
}

.testimonial__avatar[b-izpi7122ca] {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    /* The circle would cut the photo's corners: the photo sits in the circle's inscribed square instead
       ((1 - 1/sqrt 2) / 2 = 14.65% each side), on the ring's ground, so the whole image stays visible. */
    box-sizing: border-box;
    padding: calc(4.5rem * 0.1465);
    background: #eef3ea;
    object-fit: contain;
    box-shadow: 0 3px 10px rgba(20, 44, 28, 0.2);
}

.testimonial__quote[b-izpi7122ca] {
    margin: 0;
    position: relative;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.6;
    font-style: italic;
    color: #22301f;
    white-space: pre-line; /* preserve line breaks authored in the CMS body */
}

.testimonial__quote[b-izpi7122ca]::before {
    content: "\201C"; /* decorative opening quote */
    color: #3f9d63;
    font-size: 2.2em;
    line-height: 0;
    vertical-align: -0.35em;
    margin-right: 0.1em;
}

.testimonial__name[b-izpi7122ca] {
    font-weight: 700;
    color: #1f5130;
    font-size: 0.98rem;
}

/* ── CTA section (final) — a strong full-width closing band in the deep-resort green, echoing the Hero palette but
   visually distinct (solid band + optional framed image above the text). Content is centered at a readable width;
   stacks cleanly on mobile with no horizontal overflow. NOTE: no button — the CMS Cta block has no URL/action field,
   so nothing here fabricates a destination. ── */
.cta[b-izpi7122ca] {
    padding: clamp(2.75rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem);
    background: linear-gradient(135deg, #163d24 0%, #1f5130 60%, #2e7d4f 100%);
    color: #ffffff;
    text-align: center;
}

.cta__inner[b-izpi7122ca] {
    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.85rem, 2vw, 1.4rem);
}

.cta__img[b-izpi7122ca] {
    width: 100%;
    max-width: 22rem;
    height: auto;
    max-height: 16rem;
    object-fit: contain;
    border-radius: 0.9rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cta__title[b-izpi7122ca] {
    margin: 0;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-size: clamp(1.7rem, 4.5vw, 2.8rem);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.cta__body[b-izpi7122ca] {
    margin: 0;
    max-width: 42rem;
    font-size: clamp(1.05rem, 2.3vw, 1.35rem);
    line-height: 1.6;
    opacity: 0.96;
    white-space: pre-line; /* preserve line breaks authored in the CMS body */
}

/* ── Why Narail section — dark premium band with a responsive feature-card grid. Rendered only when a WhyNarail
   CMS block carries a valid config envelope (see Home.razor). Cream typography + green/gold accent. Fully responsive:
   the grid gives 4 cards on wide viewports and reflows to 2 / 1 on tablet / mobile via auto-fit. */
.why[b-izpi7122ca] {
    padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem);
    background: linear-gradient(160deg, #12241a 0%, #17301f 60%, #0f1c14 100%);
    color: #f2ede1;
    text-align: center;
}

.why__inner[b-izpi7122ca] {
    width: 100%;
    max-width: 74rem;
    margin: 0 auto;
}

.why__eyebrow[b-izpi7122ca] {
    display: inline-block;
    margin-bottom: 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c9a54a; /* gold accent */
}

.why__heading[b-izpi7122ca] {
    margin: 0 auto;
    max-width: 40rem;
    font-weight: 700;
    line-height: 1.18;
    font-size: clamp(1.7rem, 4.6vw, 2.9rem);
    color: #f6f1e6;
}

.why__subtitle[b-izpi7122ca] {
    margin: 1rem auto 0;
    max-width: 42rem;
    font-size: clamp(1rem, 2.3vw, 1.28rem);
    line-height: 1.6;
    color: rgba(242, 237, 225, 0.82);
}

.why__grid[b-izpi7122ca] {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(1rem, 2.4vw, 1.75rem);
}

.why__card[b-izpi7122ca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(201, 165, 74, 0.22); /* subtle gold border */
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.why__card:hover[b-izpi7122ca] {
    transform: translateY(-4px);
    border-color: rgba(201, 165, 74, 0.5);
}

.why__card-icon[b-izpi7122ca] {
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1;
}

.why__card-title[b-izpi7122ca] {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: #f6f1e6;
}

.why__card-desc[b-izpi7122ca] {
    margin: 0;
    font-size: clamp(0.92rem, 1.9vw, 1.02rem);
    line-height: 1.55;
    color: rgba(242, 237, 225, 0.78);
}

@media (max-width: 600px) {
    .why__grid[b-izpi7122ca] {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   5B-2 — EXPERIENCE LAYER REFINEMENT
   Appended, not rewritten. Every rule above this line is the original and still applies; these rules refine it
   by overriding a handful of specific declarations. That makes the whole pass reversible by deleting this
   block. Values come from navr-experience.css's tokens, which are themselves extracted from the literals
   above — so nothing here introduces a colour, radius, shadow or timing the site did not already use.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── HERO CTA ────────────────────────────────────────────────────────────────────────────────────────────────
   This button previously existed ONLY as a long inline style attribute in Home.razor, which meant it had no
   hover state, no focus state and no motion — and could not get one, since an inline style outranks any rule
   here. The inline style has been removed from the markup and its declarations moved here verbatim (gold pill,
   green text, the same padding/radius/shadow), plus the states it was missing. CmsPage.razor.css already
   carried this rule properly; Home is now consistent with it. */
.hero__cta[b-izpi7122ca] {
    margin-top: 0.4rem;
    display: inline-block;
    padding: 0.7em 1.7em;
    border-radius: var(--navr-radius-pill, 999px);
    background: var(--navr-gold, #c9a54a);
    color: var(--navr-green-700, #1f5130);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: transform var(--navr-dur-fast, 0.35s) var(--navr-ease, ease),
                box-shadow var(--navr-dur-fast, 0.35s) var(--navr-ease, ease);
}

.hero__cta:hover[b-izpi7122ca],
.hero__cta:focus-visible[b-izpi7122ca] {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
}

/* ── ABOUT — from a 50/50 split to an editorial one ──────────────────────────────────────────────────────────
   A perfectly equal two-column split is the single most template-like thing on the page. Weighting the media
   column and widening the gutter turns it into a composition. The image is never cropped: object-fit: contain
   within its max-height (navr-media.css) — nothing is distorted and the whole subject stays in view. */
.about[b-izpi7122ca] {
    background-color: var(--navr-section-bg, var(--navr-paper, #f5f8f3));
}

@media (min-width: 821px) {
    /* Guarded ABOVE the existing 820px stacking breakpoint on purpose: this rule is appended after that media
       query, so unguarded it would out-order the `grid-template-columns: minmax(0, 1fr)` stack and the section
       would stay two-up on phones. Below 821px nothing here applies and the original stacking is untouched. */
    .about--with-image .about__inner[b-izpi7122ca] {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: clamp(1.5rem, 5vw, 4.5rem);
    }
}

/* The About image keeps its own proportions (height:auto from the base rule) and is only bounded, so nothing is
   cropped at all in the common case. The focal anchor and the taller portrait ceiling only matter when the
   max-height actually bites. */
.about__img[b-izpi7122ca] {
    border-radius: var(--navr-radius-lg, 0.9rem);
    box-shadow: var(--navr-shadow-md, 0 10px 30px rgba(20, 44, 28, 0.15));
    object-position: var(--navr-focal, 50% 0%);
}

.about__img[data-orient="portrait"][b-izpi7122ca] {
    max-height: 38rem;
    object-position: var(--navr-focal, 50% 0%);
}

/* A short gold rule above the section title. Pure CSS, no markup, and it echoes the gold eyebrow the Why band
   already uses — so the two sections read as the same design system rather than two unrelated treatments.
   Suppressed in the text-only variant, where the title is centred and a left-anchored rule would look adrift. */
.about--with-image .about__title[b-izpi7122ca]::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-bottom: clamp(0.75rem, 1.6vw, 1.1rem);
    border-radius: 2px;
    background: var(--navr-gold, #c9a54a);
}

.about__title[b-izpi7122ca] {
    letter-spacing: -0.015em;
}

/* Measure: long body copy at a full column width is hard to scan. 62ch is the editorial norm. */
.about__body[b-izpi7122ca] {
    max-width: 62ch;
    color: var(--navr-ink, #1c2b1f);
}

.about--text-only .about__body[b-izpi7122ca] {
    margin-inline: auto;
}

/* ── GALLERY — composition chosen by ITEM COUNT, not by blind :nth-child ──────────────────────────────────────
   BUG THIS REPLACES: the previous rule applied a six-column mosaic at every count, so `:nth-child(6n+1)` made
   item 1 a 4x2 feature and item 2 a 2x1 tile. With exactly two images that is the "one huge, one small orphan"
   imbalance seen in the browser. The renderer already knows how many items there are, so it now states the
   intended composition on the grid (data-count) and the stylesheet honours it. Works for any CMS gallery of any
   length; nothing is keyed to a specific image. */
.gallery__item[b-izpi7122ca] {
    border-radius: var(--navr-radius-md, 0.75rem);
    box-shadow: var(--navr-shadow-sm, 0 6px 20px rgba(20, 44, 28, 0.12));
}

/* Faces live in the upper third — anchor every cover crop there instead of at the geometric centre. */
.gallery__img[b-izpi7122ca] {
    object-position: var(--navr-focal, 50% 0%);
}

/* A portrait photo forced into a landscape box is the crop that removes heads. Give it an upright box and a
   near-neutral anchor: with the right shape there is almost nothing to cut. */
.gallery__item:has(> [data-orient="portrait"])[b-izpi7122ca] {
    aspect-ratio: 4 / 5;
}

.gallery__img[data-orient="portrait"][b-izpi7122ca] {
    object-position: var(--navr-focal, 50% 0%);
}

@media (min-width: 900px) {
    .gallery__item[b-izpi7122ca] {
        display: grid; /* single cell: the media fills the tile without relying on percentage-height resolution */
    }

    .gallery__img[b-izpi7122ca] {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: contain;
    }

    /* ONE image — give it real presence rather than a lonely thumbnail in a wide grid. */
    .gallery__grid[data-count="single"][b-izpi7122ca] {
        grid-template-columns: minmax(0, 1fr);
    }

    .gallery__grid[data-count="single"] .gallery__item[b-izpi7122ca] {
        aspect-ratio: 16 / 9;
        max-height: 32rem;
    }

    /* TWO images — a deliberate pair. Asymmetric so it reads as composed rather than split down the middle
       (which §5 rules out), but the two share one row and one height, so the second is a counterweight and not
       an afterthought. Both stay large. */
    .gallery__grid[data-count="pair"][b-izpi7122ca] {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: stretch;
    }

    .gallery__grid[data-count="pair"] .gallery__item[b-izpi7122ca] {
        aspect-ratio: 4 / 3;
    }

    /* A pair that includes a portrait: give the row an upright rhythm both can share, so neither is cropped to
       suit the other. */
    .gallery__grid[data-count="pair"]:has([data-orient="portrait"]) .gallery__item[b-izpi7122ca] {
        aspect-ratio: 1 / 1;
    }

    /* THREE or FOUR — equal columns, equal weight. */
    .gallery__grid[data-count="few"][b-izpi7122ca] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    }

    .gallery__grid[data-count="few"] .gallery__item[b-izpi7122ca] {
        aspect-ratio: 4 / 3;
    }

    /* FIVE OR MORE — the editorial mosaic, which is where varied spans genuinely earn their place. Row height is
       generous enough that a 1-row tile is still a real picture rather than a letterbox slot. */
    .gallery__grid[data-count="mosaic"][b-izpi7122ca] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: 13rem;
        gap: clamp(0.75rem, 1.6vw, 1.25rem);
    }

    .gallery__grid[data-count="mosaic"] .gallery__item[b-izpi7122ca] {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: auto;
    }

    .gallery__grid[data-count="mosaic"] .gallery__item:nth-child(6n + 1)[b-izpi7122ca] {
        grid-column: span 4;
        grid-row: span 2;
    }

    .gallery__grid[data-count="mosaic"] .gallery__item:nth-child(6n + 4)[b-izpi7122ca] {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* In the mosaic, a portrait picture belongs in a tall slot, not a wide one. */
    .gallery__grid[data-count="mosaic"] .gallery__item:has(> [data-orient="portrait"])[b-izpi7122ca] {
        grid-row: span 2;
        aspect-ratio: auto;
    }
}

/* ── TESTIMONIALS — a pull-quote, not a card ─────────────────────────────────────────────────────────────────
   Each Testimonial CMS block renders as its own section holding a single card, so on a real page the "grid" is
   almost always exactly one item boxed in white with a shadow — a card for no reason. When it IS alone, drop
   the card chrome and let the quote carry the section: larger, upright rather than italic, at a readable
   measure. A section that genuinely holds several testimonials keeps the original card grid untouched. */
.testimonials[b-izpi7122ca] {
    background-color: var(--navr-section-bg, var(--navr-paper-2, #f0f5ec));
}

.testimonials__grid > .testimonial:only-child[b-izpi7122ca] {
    max-width: 54rem;
    margin-inline: auto;
    padding-block: clamp(0.5rem, 2vw, 1.25rem);
    background-color: transparent;
    box-shadow: none;
    gap: 1.15rem;
}

.testimonials__grid > .testimonial:only-child .testimonial__quote[b-izpi7122ca] {
    font-size: clamp(1.25rem, 2.9vw, 1.95rem);
    font-style: normal;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.testimonials__grid > .testimonial:only-child .testimonial__avatar[b-izpi7122ca] {
    width: 3.5rem;
    height: 3.5rem;
}

/* Consecutive testimonial blocks each render a full section with full vertical padding, which stacks into one
   long undifferentiated band. Collapsing the seam between adjacent ones makes them read as a sequence. */
.testimonials + .testimonials[b-izpi7122ca] {
    padding-top: 0;
}

/* ── CTA — large, but no longer a guillotine ─────────────────────────────────────────────────────────────────
   THE HEAD-CROPPING BUG: the previous rule forced `aspect-ratio: 21/9` with `object-fit: cover`. 21:9 is an
   extreme letterbox; applied to a person-focused or portrait photo it discards most of the frame's height, and
   the default centre anchor removes the top of the subject first. Heads came off.
   The fix keeps the image large and cinematic but stops dictating a single ratio to arbitrary CMS content:
   a 16:9 ceiling for landscape sources (still wide, far less destructive), an upright box for portrait sources,
   and the shared focal anchor so whatever cropping does remain takes it from the feet, not the face. */
/* NO FORCED RATIO. The 16/9 box still decapitated a portrait photo, because this CMS record has no stored
   Width/Height, so Orient() fell back to "landscape" and the portrait override never fired. Depending on
   optional metadata to avoid destroying the picture is the wrong default.
   The image now keeps its OWN aspect ratio and is merely bounded: max-width for landscape sources, max-height
   so a tall one cannot run away down the page. Nothing is cropped, nothing is stretched, and it is correct for
   any CMS image whether or not its dimensions were ever recorded. */
.cta__img[b-izpi7122ca] {
    width: auto;
    height: auto;
    max-width: min(100%, 46rem);
    max-height: clamp(20rem, 62vh, 34rem);
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: var(--navr-radius-lg, 0.9rem);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

/* Known-portrait sources are simply given a narrower ceiling so the block sits comfortably in the band. Still
   no crop — this only bounds the box. */
.cta__img[data-orient="portrait"][b-izpi7122ca] {
    max-width: min(100%, 28rem);
}

.cta__title[b-izpi7122ca] {
    letter-spacing: -0.02em;
}

.cta__title[b-izpi7122ca]::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin: clamp(0.85rem, 2vw, 1.25rem) auto 0;
    border-radius: 2px;
    background: var(--navr-gold, #c9a54a);
}

.cta__body[b-izpi7122ca] {
    max-width: 54ch;
}

/* ── WHY — depth, not decoration ─────────────────────────────────────────────────────────────────────────────
   The card hover already lifts by 4px; giving it an eased curve and a shadow change makes it feel considered
   rather than snapped. */
.why__card[b-izpi7122ca] {
    transition: transform var(--navr-dur-fast, 0.35s) var(--navr-ease, ease),
                border-color var(--navr-dur-fast, 0.35s) var(--navr-ease, ease),
                box-shadow var(--navr-dur-fast, 0.35s) var(--navr-ease, ease);
}

.why__card:hover[b-izpi7122ca] {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
}

/* ── MOTION PREFERENCE ───────────────────────────────────────────────────────────────────────────────────────
   The two hover transforms this page has always had (gallery image scale, Why card lift) were never guarded.
   They are now. Colour and shadow feedback is kept so hover is still perceivable — reduced motion means less
   movement, not less usability. The loading spinner is deliberately left spinning: a frozen spinner reads as a
   hung page. */
@media (prefers-reduced-motion: reduce) {
    .gallery__item:hover .gallery__img[b-izpi7122ca],
    .gallery__item:focus-within .gallery__img[b-izpi7122ca] {
        transform: none;
    }

    .gallery__img[b-izpi7122ca],
    .why__card[b-izpi7122ca],
    .hero__cta[b-izpi7122ca] {
        transition: none;
    }

    .why__card:hover[b-izpi7122ca],
    .hero__cta:hover[b-izpi7122ca],
    .hero__cta:focus-visible[b-izpi7122ca] {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   5B-3 — SECTION CONTINUITY AND STORY MOMENTS
   Appended, like the 5B-2 block above it. Deleting this block restores 5B-2 exactly.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── CONTINUITY BETWEEN BANDS (§6) ───────────────────────────────────────────────────────────────────────────
   The constraint that shapes this: block ORDER IS ADMIN-CONTROLLED. Home renders whatever the CMS gives it, in
   whatever order, so a rule that fades one band's colour into its neighbour's would be guessing at a colour
   that may not be there — and would show a hard seam the moment an editor reorders the page.

   What IS order-independent is light. Each band gets a very light wash at its top edge, as though the light
   falls from above: the darker bands take a pale wash, the lighter bands a faint shade. The effect is depth and
   a sense of one continuous landscape rather than stacked rectangles, and it is correct against ANY neighbour
   because it never references one. No new colour is introduced — the washes are the existing ink and cream at
   very low alpha. */
.about[b-izpi7122ca],
.gallery[b-izpi7122ca],
.testimonials[b-izpi7122ca] {
    position: relative;
}

.about[b-izpi7122ca]::before,
.gallery[b-izpi7122ca]::before,
.testimonials[b-izpi7122ca]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5.5rem;
    background: linear-gradient(180deg, rgba(20, 44, 28, 0.055), rgba(20, 44, 28, 0));
    pointer-events: none; /* never intercepts a click or a text selection */
}

.why[b-izpi7122ca],
.cta[b-izpi7122ca] {
    position: relative;
}

.why[b-izpi7122ca]::before,
.cta[b-izpi7122ca]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5.5rem;
    background: linear-gradient(180deg, rgba(246, 241, 230, 0.06), rgba(246, 241, 230, 0));
    pointer-events: none;
}

/* Breathing space before a story band (§18): the page needs stillness between moments, not just between
   paragraphs. Only the FIRST content band after the hero is opened up, so the whole page does not simply grow. */
.hero + .about[b-izpi7122ca],
.hero + .gallery[b-izpi7122ca],
.hero + .testimonials[b-izpi7122ca],
.hero + .why[b-izpi7122ca] {
    padding-top: clamp(3.5rem, 9vw, 7.5rem);
}

/* ── THE QUOTE MOMENT (§10) ──────────────────────────────────────────────────────────────────────────────────
   A lone testimonial already sheds its card in 5B-2. 5B-3 turns it into a deliberate pause: a gold hairline
   introduces it, and the surrounding space is widened so the eye stops here instead of skimming past. Type size
   and the pull-quote treatment are unchanged from 5B-2. */
.testimonials__grid > .testimonial:only-child[b-izpi7122ca]::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin: 0 auto 0.35rem;
    border-radius: 2px;
    background: var(--navr-gold, #c9a54a);
}

.testimonials:has(.testimonial:only-child)[b-izpi7122ca] {
    padding-block: clamp(3.5rem, 9vw, 7.5rem);
}

/* ── MOTION PREFERENCE ───────────────────────────────────────────────────────────────────────────────────────
   The washes and the hairline are static paint, not motion, so they correctly remain under reduced motion —
   they carry meaning (structure and emphasis) rather than movement. Nothing here needs neutralising; the
   5B-3 motion mechanisms are all disabled in navr-experience.css. */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   NO-CROP POLICY FOR CMS IMAGERY  —  final, metadata-free
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   This block exists because head-cropping was reported three separate times, and each earlier fix treated only
   the one rule that had been caught. The pattern behind all three:

     a forced box  (aspect-ratio, or a fixed/max height that bites)
   + object-fit: cover
   + a portrait source
   = the top of the picture is discarded, and the top of a picture of a person is their head.

   The 5B-2 fix tried to detect portraits from MediaDto.Width/Height and give them an upright box. That was the
   wrong foundation: those fields are NULL for the media actually in this CMS, so Orient() reports "landscape"
   for everything and every portrait override silently never fires. A rule that only protects pictures whose
   metadata happens to be populated protects nothing here.

   THE POLICY, which needs no metadata at all: a CMS image is constrained in ONE dimension only. With width
   bounded and height auto (or the reverse), the box always matches the picture's own proportions, so there is
   nothing to crop — for every image, today and after the next upload, with or without recorded dimensions.
   `object-fit: contain` is kept as a backstop: if some future rule ever does impose a height, the image
   letterboxes instead of losing its subject.

   The cost is that gallery tiles are no longer a uniform mosaic. That trade is deliberate: an editorial grid
   that beheads people is not editorial. Rhythm now comes from the images' own shapes.

   Appended last, so these rules win on source order over every earlier rule in this file, including the ones
   inside the min-width: 900px block. ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. The images themselves ────────────────────────────────────────────────────────────────────────────── */
.gallery__img[b-izpi7122ca] {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
}

.about__img[b-izpi7122ca] {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 34rem;
    aspect-ratio: auto;
    object-fit: contain;
}

/* Portrait sources need no special case any more — "one constrained dimension" already covers them. The rule
   is kept only to stop the earlier 5B-2 portrait override from re-imposing a 4/5 box. */
.about__img[data-orient="portrait"][b-izpi7122ca] {
    max-height: 38rem;
    object-fit: contain;
}

/* ── 2. The tiles that used to impose a box ──────────────────────────────────────────────────────────────── */
.gallery__item[b-izpi7122ca],
.gallery__item:has(> [data-orient="portrait"])[b-izpi7122ca],
.gallery__grid[data-count="single"] .gallery__item[b-izpi7122ca],
.gallery__grid[data-count="pair"] .gallery__item[b-izpi7122ca],
.gallery__grid[data-count="pair"]:has([data-orient="portrait"]) .gallery__item[b-izpi7122ca],
.gallery__grid[data-count="few"] .gallery__item[b-izpi7122ca],
.gallery__grid[data-count="mosaic"] .gallery__item[b-izpi7122ca],
.gallery__grid[data-count="mosaic"] .gallery__item:nth-child(6n + 1)[b-izpi7122ca],
.gallery__grid[data-count="mosaic"] .gallery__item:nth-child(6n + 4)[b-izpi7122ca],
.gallery__grid[data-count="mosaic"] .gallery__item:has(> [data-orient="portrait"])[b-izpi7122ca] {
    display: block;
    aspect-ratio: auto;
    max-height: none;
    grid-column: auto;
    grid-row: auto;
}

/* ── 3. The grids: natural heights, tops aligned ─────────────────────────────────────────────────────────── */
.gallery__grid[b-izpi7122ca],
.gallery__grid[data-count="single"][b-izpi7122ca],
.gallery__grid[data-count="pair"][b-izpi7122ca],
.gallery__grid[data-count="few"][b-izpi7122ca],
.gallery__grid[data-count="mosaic"][b-izpi7122ca] {
    grid-auto-rows: auto;
    align-items: start;
}

@media (min-width: 900px) {
    /* One responsive column set for every count. The 4x2 / 2x2 mosaic spans are gone: they only worked by
       forcing tiles into fixed row heights, which is the crop this block removes. A two-image gallery still
       reads as a deliberate pair because the columns are wide; it just no longer cuts anyone's head off. */
    .gallery__grid[data-count="mosaic"][b-izpi7122ca],
    .gallery__grid[data-count="few"][b-izpi7122ca] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    }

    .gallery__grid[data-count="pair"][b-izpi7122ca] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery__grid[data-count="single"][b-izpi7122ca] {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .gallery__grid[data-count="single"] .gallery__img[b-izpi7122ca] {
        width: auto;
        max-width: 100%;
        max-height: 34rem;
    }
}

/* ── 4. The avatar is the one place a crop is correct ────────────────────────────────────────────────────────
   A circular avatar must fill its circle, so `cover` stays. Anchoring it high keeps the face inside the frame
   instead of centring on the chest. */
.testimonial__avatar[b-izpi7122ca] {
    object-position: var(--navr-focal, 50% 0%);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   5B-4 — MEDIA AS COMPOSITION
   Appended after the no-crop policy block, which it deliberately does NOT undo.

   The hierarchy the gallery lost when the mosaic was removed is restored here, but built on a different
   mechanism. The old mosaic created variety by forcing tiles into fixed grid ROWS — that is precisely what
   cropped people's heads, and it is not coming back. Variety now comes from COLUMN SPAN only: a featured image
   is given more width, and because height stays automatic the picture simply renders larger at its own
   proportions. Wider therefore means taller, so the grid gets real rhythm and nothing is ever cut.

     mechanism          height        can it crop?
     grid-row + cover   forced        yes  <- removed in the no-crop pass, not reinstated
     grid-column span   automatic     no   <- what this block uses
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── CAPTIONS (§17) ──────────────────────────────────────────────────────────────────────────────────────────
   MediaDto.Caption, which the public site never rendered. Sits under its own image inside the existing
   <figure>, quiet enough to stay subordinate to the picture. */
.gallery__caption[b-izpi7122ca] {
    margin: 0.6rem 0.15rem 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--navr-ink, #1c2b1f);
    opacity: 0.72;
}

/* ── EDITORIAL SPANS (§4, §5, §27) ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
    /* THREE OR FOUR — the first image leads, the rest support it. Not four identical cards. */
    .gallery__grid[data-count="few"][b-izpi7122ca] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .gallery__grid[data-count="few"] .gallery__item[b-izpi7122ca] {
        grid-column: span 2;
    }

    .gallery__grid[data-count="few"] .gallery__item:first-child[b-izpi7122ca] {
        grid-column: span 4;
    }

    /* FIVE OR MORE — a featured image opens each group of six and another anchors its middle, so a long gallery
       keeps a pulse instead of flattening into a wall. Spans only; every height is still the image's own. */
    .gallery__grid[data-count="mosaic"][b-izpi7122ca] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .gallery__grid[data-count="mosaic"] .gallery__item[b-izpi7122ca] {
        grid-column: span 2;
    }

    .gallery__grid[data-count="mosaic"] .gallery__item:nth-child(6n + 1)[b-izpi7122ca],
    .gallery__grid[data-count="mosaic"] .gallery__item:nth-child(6n + 4)[b-izpi7122ca] {
        grid-column: span 4;
    }

    /* A PAIR keeps the 5B-2 asymmetry: both large, neither an afterthought. */
    .gallery__grid[data-count="pair"][b-izpi7122ca] {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    }
}

/* ── THE SINGLE IMAGE AS A MOMENT (§15) ──────────────────────────────────────────────────────────────────────
   One image is the only case where a media block can safely be given the viewport, because there is no
   neighbour to balance against. It gets width and air — not full-screen, and not applied to any other count. */
@media (min-width: 900px) {
    .gallery__grid[data-count="single"] .gallery__img[b-izpi7122ca] {
        max-height: 40rem;
    }

    .gallery:has(.gallery__grid[data-count="single"]) .gallery__inner[b-izpi7122ca] {
        max-width: 80rem;
    }

    .gallery:has(.gallery__grid[data-count="single"])[b-izpi7122ca] {
        padding-block: clamp(3.5rem, 9vw, 7.5rem);
    }
}

/* ── HOVER (§9) ──────────────────────────────────────────────────────────────────────────────────────────────
   Gated to real pointers, so a touch device never gets a stuck hover state and a tablet is unaffected.
   1.02, down from the previous 1.05: the tile clips to its radius, so a large scale eats into the subject —
   exactly the crop this milestone is meant to prevent. Keyboard focus gets the identical treatment, so the
   interaction is not mouse-only. */
@media (hover: hover) and (pointer: fine) {
    .gallery__item:hover .gallery__img[b-izpi7122ca],
    .gallery__item:focus-within .gallery__img[b-izpi7122ca] {
        filter: brightness(1.05);
    }
}

/* Below the hover query, and on touch, the image must never be left mid-scale. */
@media (hover: none), (pointer: coarse) {
    .gallery__item:hover .gallery__img[b-izpi7122ca],
    .gallery__item:focus-within .gallery__img[b-izpi7122ca] {
        transform: none;
    }
}

/* ── VIDEO (§12) ─────────────────────────────────────────────────────────────────────────────────────────────
   A poster now paints the first frame immediately (MediaDto.PosterUrl). The neutral ground behind it matches
   the one CustomBlockSection already uses for letterboxed video, so a poster of a different ratio reads as
   deliberate rather than broken. */
video.gallery__img[b-izpi7122ca],
video.about__img[b-izpi7122ca],
video.cta__img[b-izpi7122ca] {
    background: var(--navr-green-800, #10231a);
}

/* ── REDUCED MOTION (§21, §22) ───────────────────────────────────────────────────────────────────────────────
   The hover scale is motion; the caption, the spans and the poster are not, so only the scale is removed. The
   media itself stays exactly as visible as before. */
@media (prefers-reduced-motion: reduce) {
    .gallery__item:hover .gallery__img[b-izpi7122ca],
    .gallery__item:focus-within .gallery__img[b-izpi7122ca] {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   5B-4 CORRECTION — THE TWO-MEDIA PAIR
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   ROOT CAUSE (arithmetic, not a guess). The pair was laid out as two grid columns of 1.08fr and 0.92fr with
   `height: auto` on the media. Auto height means H = W / aspectRatio, so visual AREA = W x H = W^2 / AR:

       width ratio     1.08 / 0.92 = 1.17x
       AREA ratio      1.17^2      = 1.38x      <-  the column ratio gets SQUARED

   A 17% width difference therefore renders as a 38% difference in the area the eye actually sees, which is why
   the second item read as a thumbnail rather than a partner. Widening the columns would have made it worse:
   1.15/0.85 squares to 1.83x.

   THE FIX — equalise the axis the eye compares, and let the other axis follow the content. Both media are given
   the SAME HEIGHT; each one's WIDTH is then whatever its own aspect ratio produces at that height. This is the
   classic justified-row composition:

       * both items occupy the same vertical footprint, which is the stated goal;
       * asymmetry still exists, but it now comes from the pictures themselves rather than an arbitrary fr ratio;
       * `object-fit: contain` is kept, so nothing is cropped and nothing is stretched — the head-cropping
         regression cannot return through this rule;
       * it needs NO stored Width/Height. The browser derives each width from the decoded media, so it is
         correct for image+image, video+image, image+video and video+video alike, for any CMS upload, including
         the records in this CMS whose dimensions are null.

   Scoped strictly to [data-count="pair"] and to >= 900px, so single / few / mosaic and all mobile stacking are
   untouched. The height is capped at 19rem so that the widest realistic case — two 16:9 items side by side —
   still fits the 72rem inner column at 1024 through 1920 without overflowing; beyond that the items shrink and
   `contain` letterboxes them, which is a graceful bound rather than a crop or a distortion.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
    .gallery__grid[data-count="pair"][b-izpi7122ca] {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(1rem, 2vw, 1.75rem);
    }

    .gallery__grid[data-count="pair"] .gallery__item[b-izpi7122ca] {
        /* Width follows the media; shrink is allowed so an unusually wide pair bounds itself instead of
           overflowing the section. */
        flex: 0 1 auto;
        width: auto;
        max-width: 100%;
        min-width: 0;
        grid-column: auto; /* the flex row supersedes the span rules above */
    }

    /* The one shared value in the whole composition. Everything else is derived from the media. */
    .gallery__grid[data-count="pair"] .gallery__img[b-izpi7122ca] {
        height: clamp(15rem, 19vw, 19rem);
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    /* A caption belongs to its own picture, so it tracks the media's width rather than a column's. */
    .gallery__grid[data-count="pair"] .gallery__caption[b-izpi7122ca] {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   MOBILE ALIGNMENT FIX — block-level media must centre when it is narrower than its container
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   ROOT CAUSE, and it was introduced by the no-crop pass in this same file. To stop images being cropped, they
   were changed from `width: 100%` to `width: auto` + `max-width: 100%` + `max-height`. That correctly stopped
   the cropping, but it also means the element no longer always fills its container:

       a block-level replaced element whose computed width is LESS than its containing block,
       with `margin` left at its initial value of 0, is placed flush against the START edge —
       so every leftover pixel collects on the RIGHT.

   The height cap is what makes it visible on mobile. At a 390px viewport the content box is ~340px:

       landscape 3:2   -> 340px wide, fills the box            no gap
       portrait  2:3   -> 340px wide, fills the box            no gap
       tall      9:16  -> max-height bites first: 306px wide   34px of leftover, ALL on the right

   So it only shows for sources tall enough to hit `max-height`, which is why it reads as a mobile-only defect.

   THE FIX is the layout system's own centring mechanism for exactly this case, not a compensation: auto inline
   margins. `margin-inline: auto` distributes the leftover space equally on both sides, and is a no-op when the
   element already fills its container — so it changes nothing at any width where the layout was already
   correct, and needs no breakpoint of its own.

   NOT used, deliberately: translateX (a transform would move the paint but not the box, and a transform on
   these elements would also interfere with the 5B-3 figure reveal), fixed pixel offsets, or overflow-x hidden.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.about__img[b-izpi7122ca],
.cta__img[b-izpi7122ca] {
    margin-inline: auto;
}

/* Hero image layer — a real <img> (it was a cover-sized CSS background that cut the subject off). It fills the hero
   box and shows the COMPLETE image letterboxed on the deep-leaf ground, exactly like the hero video. */
.hero__image[b-izpi7122ca] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #10231a;
    z-index: 0;
}
/* /Components/Pages/OrderPage.razor.rz.scp.css */
/* The order page: the website's header and footer come from MainLayout; this is only the content column. The top padding
   clears the fixed public header exactly as the CMS page does (CmsPage.razor.css, --cms-page-top-pad). */
.order-page[b-6m5i7t45pe] {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(6rem, 4vw + 5rem, 7.5rem) clamp(.75rem, 4vw, 2rem) clamp(2rem, 5vw, 4rem);
    min-width: 0;
}

.order-page__title[b-6m5i7t45pe] {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 3vw + .5rem, 2.25rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.order-page--loading[b-6m5i7t45pe] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.order-page__spinner[b-6m5i7t45pe] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--navr-theme-primary, #1f5130) 20%, transparent);
    border-top-color: var(--navr-theme-primary, #1f5130);
    animation: order-page-spin-b-6m5i7t45pe .8s linear infinite;
}

@keyframes order-page-spin-b-6m5i7t45pe {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .order-page__spinner[b-6m5i7t45pe] {
        animation-duration: 2.4s;
    }
}
/* /Components/Pages/PhotoCreditsPage.razor.rz.scp.css */
/* Photo credits page: a readable single column; two columns of credits from tablet width; never wider than the page. */
.pmc-page[b-uwd4f218x4] { max-width: 1100px; margin: 0 auto; padding: 32px 16px 48px; box-sizing: border-box; }

.pmc-page__title[b-uwd4f218x4] { margin: 0 0 8px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.2; }

.pmc-page__intro[b-uwd4f218x4] { margin: 0 0 24px; opacity: .85; line-height: 1.55; }

.pmc-list[b-uwd4f218x4] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

@media (min-width: 720px) {
    .pmc-list[b-uwd4f218x4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pmc-item[b-uwd4f218x4] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 12px;
    box-sizing: border-box;
}

.pmc-item__img[b-uwd4f218x4] {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.pmc-item__img img[b-uwd4f218x4] { display: block; width: 100%; height: 100%; object-fit: contain; }

.pmc-item__text[b-uwd4f218x4] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.pmc-item__title[b-uwd4f218x4] { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

.pmc-item__meta[b-uwd4f218x4] { font-size: .85rem; opacity: .85; overflow-wrap: anywhere; }

.pmc-item__meta a[b-uwd4f218x4] { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.pmc-item__meta a:focus-visible[b-uwd4f218x4] { outline: 2px solid currentColor; outline-offset: 2px; }
/* /Components/Shop/ShopCartButton.razor.rz.scp.css */
/* A square icon button in the header's own chrome (the burger's tokens: --nh-text, --nh-border-color, --nh-accent). */
.shop-cartbtn[b-byd1rrlw9f] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    border: 1px solid var(--nh-border-color, rgba(0, 0, 0, .15));
    background: color-mix(in srgb, var(--nh-text, #1d2a22) 6%, transparent);
    color: var(--nh-text, currentColor);
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.shop-cartbtn:hover[b-byd1rrlw9f] {
    background: color-mix(in srgb, var(--nh-accent, #c9a54a) 16%, transparent);
    border-color: color-mix(in srgb, var(--nh-accent, #c9a54a) 62%, transparent);
}

.shop-cartbtn:focus-visible[b-byd1rrlw9f] { outline: 2px solid var(--nh-accent, #c9a54a); outline-offset: 2px; }

.shop-cartbtn__count[b-byd1rrlw9f] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--nh-accent, #c9a54a);
    color: #111;
    font-size: .7rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}
/* /Components/Shop/ShopCheckoutModal.razor.rz.scp.css */
/* Checkout dialog (Product Checkout Display = Modal / Popup) — the Order Now dialog's own chrome, so both dialogs look alike.
   Colours come from the active theme tokens MainLayout publishes (--navr-theme-*), so the chrome follows the website's theme;
   the checkout form inside keeps its Payment Form's design. Above the fixed header (z-index 1000) and the cart toast (1200). */

.shop-co-modal[b-0jsh2mjng5] {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(.75rem, 3vw, 2rem);
}

.shop-co-modal__backdrop[b-0jsh2mjng5] {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 10, .62);
}

.shop-co-modal__dialog[b-0jsh2mjng5] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 1040px);
    max-height: 100%;
    min-width: 0;
    border-radius: 16px;
    background: var(--navr-theme-surface, #ffffff);
    color: var(--navr-theme-text, #1d2a22);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
    overflow: hidden;
    outline: none;
}

.shop-co-modal__head[b-0jsh2mjng5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem .9rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--navr-theme-text, #1d2a22) 12%, transparent);
    flex: 0 0 auto;
}

.shop-co-modal__title[b-0jsh2mjng5] {
    margin: 0;
    min-width: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.shop-co-modal__close[b-0jsh2mjng5] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: 0 .9rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--navr-theme-text, #1d2a22) 22%, transparent);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.shop-co-modal__close:disabled[b-0jsh2mjng5] {
    opacity: .5;
    cursor: not-allowed;
}

.shop-co-modal__close:hover:not(:disabled)[b-0jsh2mjng5] {
    background: color-mix(in srgb, var(--navr-theme-text, #1d2a22) 7%, transparent);
}

.shop-co-modal__close:focus-visible[b-0jsh2mjng5] {
    outline: 3px solid var(--navr-theme-primary, #1f5130);
    outline-offset: 2px;
}

/* The only scrolling region: long forms scroll here, the page behind stays still. */
.shop-co-modal__body[b-0jsh2mjng5] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1rem clamp(.75rem, 2.5vw, 1.5rem) 1.5rem;
}

/* Phones: a full-screen sheet. */
@media (max-width: 600px) {
    .shop-co-modal[b-0jsh2mjng5] {
        padding: 0;
        align-items: stretch;
    }

    .shop-co-modal__dialog[b-0jsh2mjng5] {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .shop-co-modal__close-text[b-0jsh2mjng5] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .shop-co-modal__close[b-0jsh2mjng5] {
        width: 44px;
        justify-content: center;
        padding: 0;
    }
}
/* /Components/Shop/ShopSummary.razor.rz.scp.css */
/* The summary sizes its lines by its OWN width (container query), so it fits a narrow checkout aside or the checkout dialog. */
.shop-sum[b-zzz0j2dz27] { display: grid; gap: 1rem; min-width: 0; container-type: inline-size; }
.shop-sum__lines[b-zzz0j2dz27] { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.shop-line[b-zzz0j2dz27] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: start;
    padding: .85rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    background: color-mix(in srgb, currentColor 3%, transparent);
    min-width: 0;
}

.shop-line--problem[b-zzz0j2dz27] { border-color: color-mix(in srgb, #b3261e 45%, transparent); }
.shop-line__img[b-zzz0j2dz27] { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, currentColor 7%, transparent); }
.shop-line__img img[b-zzz0j2dz27] { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-line__main[b-zzz0j2dz27] { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; min-width: 0; }
.shop-line__name[b-zzz0j2dz27] { font-weight: 700; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
a.shop-line__name:hover[b-zzz0j2dz27] { text-decoration: underline; }
.shop-line__variant[b-zzz0j2dz27], .shop-line__unit[b-zzz0j2dz27] { font-size: .86rem; opacity: .75; }
.shop-line__problem[b-zzz0j2dz27] { font-size: .86rem; color: #b3261e; font-weight: 600; }
.shop-line__total[b-zzz0j2dz27] { font-weight: 800; white-space: nowrap; }
.shop-line__controls[b-zzz0j2dz27] { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .35rem; }

.shop-line__stepper[b-zzz0j2dz27] {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    overflow: hidden;
}

.shop-line__stepper button[b-zzz0j2dz27] {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}

.shop-line__stepper button:disabled[b-zzz0j2dz27] { opacity: .35; cursor: not-allowed; }
.shop-line__qty[b-zzz0j2dz27] { min-width: 2.2rem; text-align: center; font-weight: 700; }

.shop-line__remove[b-zzz0j2dz27] {
    min-height: 44px;
    padding: 0 .6rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: .88rem;
}

.shop-line button:focus-visible[b-zzz0j2dz27] { outline: 3px solid var(--navr-gold, #c9a54a); outline-offset: 2px; }

.shop-sum__totals[b-zzz0j2dz27] { display: grid; gap: .45rem; margin: 0; padding-top: .75rem; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.shop-sum__totals > div[b-zzz0j2dz27] { display: flex; justify-content: space-between; gap: 1rem; }
.shop-sum__totals dt[b-zzz0j2dz27] { opacity: .8; }
.shop-sum__totals dd[b-zzz0j2dz27] { margin: 0; font-weight: 700; white-space: nowrap; }
.shop-sum__grand[b-zzz0j2dz27] { font-size: 1.15rem; padding-top: .35rem; }
.shop-sum__grand dt[b-zzz0j2dz27] { opacity: 1 !important; font-weight: 800; }
.shop-sum__hint[b-zzz0j2dz27] { margin: 0; font-size: .88rem; padding: .55rem .75rem; border-radius: 10px; background: color-mix(in srgb, currentColor 6%, transparent); }

@media (max-width: 480px) {
    .shop-line[b-zzz0j2dz27] { grid-template-columns: 56px minmax(0, 1fr); }
    .shop-line__img[b-zzz0j2dz27] { width: 56px; height: 56px; }
    .shop-line__total[b-zzz0j2dz27] { grid-column: 2; }
}

/* A narrow summary (the checkout's side column, the checkout dialog): the line total moves under the name, so the name, the
   quantity stepper and the total never overlap. */
@container (max-width: 380px) {
    .shop-line[b-zzz0j2dz27] { grid-template-columns: 56px minmax(0, 1fr); }
    .shop-line__img[b-zzz0j2dz27] { width: 56px; height: 56px; }
    .shop-line__total[b-zzz0j2dz27] { grid-column: 2; }
}

/* The narrowest summary (the checkout's side column on a 1024px screen leaves the line's text column ~110px): the stepper
   (overflow: hidden, so it may shrink below its content) clipped its "+" button. Its two buttons narrow to 36px there — still
   44px tall — so the whole stepper fits. */
@container (max-width: 260px) {
    .shop-line__stepper button[b-zzz0j2dz27] { min-width: 36px; }
}