/* ─────────────────────────────────────────────────────────────────────
   Vyakula brand override.
   Loads AFTER the Lunch Box theme's style.css so this always wins.
   Nothing in the theme's own files is modified — remove this file and
   the theme reverts to its shipped orange palette.
   ───────────────────────────────────────────────────────────────────── */

:root {
    --vy-mint:      #3ed900;   /* Primary — brand accent (vivid green) */
    --vy-mint-ink:  #2ba400;   /* Darker green for text on light backgrounds */
    --vy-teal:      #003233;   /* Deep teal — headings, dark surfaces */
    --vy-gold:      #feca57;   /* Secondary — warm accent */
    --vy-fire:      #e17055;   /* Warm CTA (used sparingly) */
    --vy-text:      #1a2e30;   /* Body text on light bg */
    --vy-muted:     #6b7f7c;   /* Muted secondary text */
    --vy-line:      rgba(0,50,51,0.10);  /* Hairline border */
}

/* ───── SVG fills — theme uses inline fill="#FFA31E" on many icons ── */
[fill="#FFA31E"]   { fill: var(--vy-mint) !important; }
[stroke="#FFA31E"] { stroke: var(--vy-mint) !important; }
[fill="#5E0821"]   { fill: var(--vy-teal) !important; }
[stroke="#5E0821"] { stroke: var(--vy-teal) !important; }

/* ───── Buttons — theme's primary is orange ─────────────────────────── */
.btn.btnPrimary,
.btnPrimary,
button.btnPrimary,
a.btnPrimary,
.deliveryFoodBtn {
    background: var(--vy-mint) !important;
    color: var(--vy-teal) !important;
    border: 1px solid var(--vy-mint) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn.btnPrimary:hover,
.btnPrimary:hover,
button.btnPrimary:hover,
a.btnPrimary:hover,
.deliveryFoodBtn:hover {
    background: var(--vy-teal) !important;
    color: var(--vy-mint) !important;
    border-color: var(--vy-teal) !important;
}
.btn.btnSecondary { background: var(--vy-teal) !important; color: #fff !important; border-color: var(--vy-teal) !important; }
.btn.btnSecondary:hover { background: var(--vy-mint) !important; color: var(--vy-teal) !important; }

/* ───── Section headings — theme paints the accent word in orange ──── */
.commonHeading h4 span,
.commonHeading h2 span,
.commonHeading h1 span,
.specialDishTiffinCol h1 span,
.customerSaysCol h4 span,
.deliveryFoodInner h2 span,
.innerPageBannerContent h1 span {
    color: var(--vy-mint) !important;
}
.commonHeading h4,
.commonHeading h2,
.commonHeading h1,
.specialDishTiffinCol h1,
.deliveryFoodInner h2,
.innerPageBannerContent h1 {
    color: var(--vy-teal) !important;
}

/* ───── Nav ─────────────────────────────────────────────────────────── */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: var(--vy-mint) !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: rgba(62, 217, 0, 0.08) !important;
}

/* ───── Header — deep-teal bar with white links, mint on hover/active ── */
.header {
    background: var(--vy-teal) !important;
    border-bottom: none !important;
    position: relative !important;   /* theme flips to fixed at mobile — force in-flow at rest */
    top: auto !important;
    z-index: 100;
}
/* Scroll-sticky state (JS adds .headerActive on scroll). Restore fixed
   positioning that our !important on .header would otherwise block. */
.header.headerActive {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    background: var(--vy-teal) !important;
    box-shadow: 0 4px 20px rgba(0, 50, 51, 0.25);
    animation: vy-slide-down 0.3s ease;
}
@keyframes vy-slide-down {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
/* Cap the logo — footer-logo.png is 300×104 raw, would blow up the bar */
.header .navbar-brand img {
    /* max-height: 64px; */
    width: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
.header .navbar-nav .nav-link {
    color: #fff !important;
}
.header .navbar-nav .nav-link.active,
.header .navbar-nav .nav-link:hover {
    color: var(--vy-mint) !important;
}
/* Dropdown menu — keep on white ground for legibility */
.header .dropdown-menu {
    background: #fff !important;
    border: 1px solid var(--vy-line);
    box-shadow: 0 12px 32px rgba(0, 50, 51, 0.12);
}
.header .dropdown-menu .dropdown-item {
    color: var(--vy-teal) !important;
}
.header .dropdown-menu .dropdown-item:hover,
.header .dropdown-menu .dropdown-item:focus {
    background: rgba(62, 217, 0, 0.10) !important;
    color: var(--vy-mint-ink) !important;
}
/* Hamburger toggler on mobile — white bars on teal */
.header .navbar-toggler #nav-icon2 span {
    background: #fff !important;
}
/* Mobile drawer — theme collapses .navbar-collapse into a white dropdown
   panel on <XL viewports which hides our white links. Force teal ground so
   white nav-links stay legible; keep the dropdown-menu (Our Services)
   readable by leaving its ::deep white background alone. */
@media (max-width: 1199.98px) {
    .header .navbar-collapse {
        background: var(--vy-teal) !important;
        padding: 12px 16px;
        border-radius: 8px;
        margin-top: 8px;
        box-shadow: 0 10px 30px rgba(0, 50, 51, 0.25);
    }
    .header .navbar-collapse .navbar-nav .nav-link {
        color: #fff !important;
        padding: 12px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .header .navbar-collapse .navbar-nav > li:last-child .nav-link {
        border-bottom: none;
    }
    /* The Our Services dropdown-menu inside the drawer — keep on white */
    .header .navbar-collapse .dropdown-menu {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12);
        margin: 0 8px 8px;
    }
    .header .navbar-collapse .dropdown-menu .dropdown-item {
        color: #fff !important;
    }
    .header .navbar-collapse .dropdown-menu .dropdown-item:hover,
    .header .navbar-collapse .dropdown-menu .dropdown-item:focus {
        background: rgba(62, 217, 0, 0.14) !important;
        color: var(--vy-mint) !important;
    }
}
/* Sticky variant of the header (added by theme JS on scroll) */
.header.headerActive {
    background: var(--vy-teal) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Hero v2 — bold two-column layout with the vyakula-cover collage
   ───────────────────────────────────────────────────────────────────── */
.vy-hero {
    background: #fff;
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.vy-hero-grid {
    display: grid;
    /* Narrowed text column by ~20% (was 5fr 6fr = 45%/55%; now 4fr 7fr ≈ 36%/64%)
       to show more of the food collage. */
    grid-template-columns: 4fr 7fr;
    align-items: stretch;
    min-height: 560px;
}
.vy-hero-text {
    padding: 72px clamp(24px, 5vw, 80px) 120px 8vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: #fff;
}
.vy-hero-text h1 {
    font-family: 'Jacques Francois', 'Times New Roman', Georgia, serif;
    font-size: clamp(2.6rem, 5.2vw, 4.4rem);
    line-height: 1.05;
    color: var(--vy-teal);
    font-weight: 400;   /* Jacques Francois has one weight — no need for 700 */
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}
.vy-hero-script {
    display: inline-block;
    color: var(--vy-mint);
    font-family: 'Corinthiago', 'Brush Script MT', cursive;
    font-weight: 400;
    padding-left: 6px;
}
.vy-hero-body {
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.65;
    color: var(--vy-text);
    max-width: 44ch;
    margin: 0 0 20px;
}
.vy-hero-tag {
    font-size: 1.05rem;
    color: var(--vy-teal);
    margin: 0 0 32px;
}
.vy-hero-tag-accent { color: var(--vy-mint); font-weight: 700; }
.vy-hero-cta {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.vy-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    color: var(--vy-teal) !important;
    border: 1.5px solid var(--vy-line);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.vy-btn-ghost:hover {
    background: var(--vy-teal);
    color: #fff !important;
    border-color: var(--vy-teal);
}
.vy-btn-ghost svg { color: var(--vy-mint); }
.vy-btn-ghost:hover svg { color: var(--vy-mint); }

/* Right-column collage — full-bleed to the section's right edge */
.vy-hero-photo {
    position: relative;
    overflow: hidden;
    background: #fff;
}
.vy-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Soft white fade on the LEFT edge of the image so it blends into the
   text column instead of ending in a hard vertical seam. */
.vy-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
                                #fff 0%,
                                rgba(255,255,255,0.55) 8%,
                                rgba(255,255,255,0) 22%);
    pointer-events: none;
    z-index: 1;
}

/* Feature strip card — sits below the two-column hero, offset upward so
   it visually overlaps the hero/next-section boundary. */
.vy-hero-features {
    position: relative;
    z-index: 3;
    margin: -56px clamp(16px, 5vw, 80px) 32px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px -10px rgba(0, 50, 51, 0.14),
                0 8px 24px -6px rgba(0, 50, 51, 0.08);
    padding: 28px clamp(20px, 3vw, 40px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border: 1px solid var(--vy-line);
}
.vy-feature {
    display: flex;
    align-items: center;
    gap: 16px;
}
.vy-feature-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(62, 217, 0, 0.10);
    color: var(--vy-mint);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vy-feature-txt h5 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vy-teal);
    line-height: 1.2;
}
.vy-feature-txt p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--vy-muted);
    line-height: 1.3;
}

/* Hero responsive — stack the two columns and drop the feature strip
   into 2×2 on tablet, single column on phones. */
@media (max-width: 991px) {
    .vy-hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .vy-hero-text {
        padding: 48px 24px 32px;
        text-align: center;
    }
    .vy-hero-body { margin-left: auto; margin-right: auto; }
    .vy-hero-cta { justify-content: center; }
    .vy-hero-photo { min-height: 320px; }
    .vy-hero-photo::before {
        background: linear-gradient(to bottom,
                                    #fff 0%,
                                    rgba(255,255,255,0) 15%);
    }
    .vy-hero-features {
        grid-template-columns: 1fr 1fr;
        margin-top: -32px;
    }
}
@media (max-width: 560px) {
    .vy-hero-features {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 20px;
    }
}

/* ───── Delivery / CTA banner ───────────────────────────────────────── */
.deliveryFood {
    background: var(--vy-teal) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 320px;
}
.deliveryFood h2,
.deliveryFood h4 {
    color: #fff !important;
}
.deliveryFood h2 span {
    color: var(--vy-mint) !important;
}
.deliveryFoodBtn {
    background: var(--vy-mint) !important;
    color: var(--vy-teal) !important;
}
.deliveryFoodBtn:hover {
    background: #fff !important;
    color: var(--vy-teal) !important;
}
/* Container must sit above the image so the copy is legible. */
.deliveryFood > .container { position: relative; z-index: 2; }

/* ───── Stewed-chicken photo (right half, no mask on the image itself) ── */
.deliveryFoodImg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.deliveryFoodImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Solid teal "connector" strip along the image's LEFT edge. The mask SVG
   doesn't paint fully-opaque teal all the way to its right edge (which
   becomes the visual-left after the flip). The raw path in the large
   mask begins at x=960 of a 1000-wide viewBox — that ~40px of empty
   band, scaled to overlay width, translates to roughly 20-30px of
   transparent teal on the visual-left. Width scales proportionally with
   the drip overlay so the bridge stays correct at any viewport. */
.deliveryFoodImg::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6vw;
    max-width: 70px;
    min-width: 40px;
    background: var(--vy-teal);
    z-index: 3;              /* explicitly above the drip's stacking context */
    pointer-events: none;
}
/* Teal "sauce" overlay pinned to the LEFT edge of the image. Uses the
   user's dripping-mirror SVG as its mask so only the wall + drip shapes
   are painted teal; between drips the mask is transparent and the food
   photo below shows through. Container is flipped horizontally so the
   SVG's native wall (right edge) ends up on the visual LEFT — matching
   the layout — and drips extend visually RIGHT into the image. */
.deliveryFoodDrip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* Natural width for the LARGE SVG (1000×800) at full container height:
       1000/800 = 1.25 → for a ~395px-tall banner that's ~494px wide. */
    width: min(45vw, 520px);
    background: var(--vy-teal);
    z-index: 2;
    transform: scaleX(-1);
    -webkit-mask-image: url('/static/gateway/images/dripping-mirror-mask-large.svg');
            mask-image: url('/static/gateway/images/dripping-mirror-mask-large.svg');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-position: center;
            mask-position: center;
}
/* A soft teal-to-transparent wash along the mask edge stops the image's
   warm tones fighting the palette at the boundary. */
.deliveryFoodImg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
                                rgba(0, 50, 51, 0.55) 0%,
                                rgba(0, 50, 51, 0.25) 20%,
                                rgba(0, 50, 51, 0) 45%);
    pointer-events: none;
}

/* Responsive — under ~900px the two-column layout doesn't work; drop the
   image to a full-width band beneath the text with the sauce edge on top. */
@media (max-width: 900px) {
    /* Image sits flush with the section's TOP edge — no teal padding above it.
       Text moves below the image, section bottom padding stays for breathing room. */
    .deliveryFood {
        padding-top: 0 !important;
    }
    .deliveryFoodImg {
        position: relative;
        width: 100%;
        height: 240px;
        margin-top: 0;
    }
    /* Push the text down a little so it isn't jammed under the image */
    .deliveryFood > .container { padding-top: 32px; }

    /* Mobile drip: horizontal band at the TOP edge of the image using the
       purpose-built horizontal mask (800×500, wall at top with drips
       flowing DOWN natively). No rotation needed — just position, size,
       and let it read as "sauce dripping onto the top of the plate". */
    .deliveryFoodDrip {
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: min(40vw, 180px);
        transform: none;   /* horizontal SVG is pre-oriented; no flip needed */
        -webkit-mask-image: url('/static/gateway/images/dripping-mirror-mask-h.svg');
                mask-image: url('/static/gateway/images/dripping-mirror-mask-h.svg');
    }
    /* Top connector: solid teal strip along the image's TOP edge in case
       the mask's wall doesn't reach the exact top pixel (matches the
       desktop connector's purpose but rotated to the horizontal layout).
       Must reset max/min-width — desktop rule clamps width to 70px which
       would leave the top band tiny on mobile. */
    .deliveryFoodImg::before {
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 2.5vw;
        max-height: 14px;
        min-height: 6px;
    }
}

/* ───── Footer ──────────────────────────────────────────────────────── */
/* Theme ships a saturated orange footer background. Replace with deep teal
   so the footer reads as a considered dark closing section, not a loud strip. */
.footer {
    background-color: var(--vy-teal) !important;
    color: #fff !important;
}
/* Theme's :before / :after paint decorative mask images inside the footer.
   Kill them — they add visual noise without meaning. */
.footer:before,
.footer:after { display: none !important; }

.footer h4,
.footer h5,
.footer p,
.footer .footerMenu .nav-link,
.footer .footerInner .subscribeOuter .logisticSubscribeTxt h4,
.footer .footerInner .footContent .copyRight p { color: #fff !important; }

.footer .footerInner .subscribeOuter .logisticSubscribeTxt p,
.footer .footerInner .footContent .copyRight p { color: rgba(255,255,255,0.75) !important; }

.footer .socialMedia .nav-link { color: var(--vy-mint) !important; }
.footer .socialMedia .nav-link:hover { color: var(--vy-gold) !important; }
.footer .logisticSubscribeTxt h4 span { color: var(--vy-mint) !important; }
.footer .subscribeInpt .btnPrimary { background: var(--vy-mint) !important; color: var(--vy-teal) !important; border-color: var(--vy-mint) !important; }
.footer .subscribeInpt .btnPrimary:hover { background: #fff !important; color: var(--vy-teal) !important; }
.footer .subscribeInpt .form-control {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #fff !important;
}
.footer .subscribeInpt .form-control::placeholder { color: rgba(255,255,255,0.6) !important; }
.footer .footerMenu .nav-link:hover { color: var(--vy-mint) !important; }
.footer .copyRight a { color: var(--vy-mint) !important; }

/* ───── Cards ───────────────────────────────────────────────────────── */
.ourMealCard,
.howItWorkItem {
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ourMealCard:hover {
    border-color: var(--vy-mint) !important;
    box-shadow: 0 10px 32px rgba(0, 50, 51, 0.08);
    transform: translateY(-2px);
}
.ourMealCard .ourMealPrice span,
.ourMealCard h2 a { color: var(--vy-teal) !important; }
.ourMealCard h2 a:hover { color: var(--vy-mint-ink) !important; }
.ourMealPara ul li::marker { color: var(--vy-mint) !important; }

/* ───── Testimonial / customer-say block ────────────────────────────── */
.customerSayStarGroup .fa-solid.fa-star,
.customerSayStarGroup .fa-regular.fa-star,
.ourHappyCustomerContent .fa-star { color: var(--vy-gold) !important; }

/* ───── Preloader — quieter, on-brand ───────────────────────────────── */
.preloader { background: var(--vy-teal) !important; }
.loading { color: var(--vy-mint) !important; }

/* ───── Breadcrumb ──────────────────────────────────────────────────── */
.breadcrumb .breadcrumb-item a { color: var(--vy-mint-ink); }
.breadcrumb .breadcrumb-item.active { color: var(--vy-muted); }
/* Theme has a highly-specific rule painting the active breadcrumb orange —
   override with matching specificity. */
.innerPageBanner .innerPageBannerInner .innerPageBannerContent ul.breadcrumb li.active {
    color: var(--vy-mint-ink) !important;
}

/* ───── Inner-page banner (Story / Catering / Contact / Thanks) ─────── */
/* Custom Vyakula outline-icon header on a soft cream ground.
   URL is written as a plain static path (this file is served as-is by
   Django's staticfiles, not template-rendered, so no {% static %} tag). */
.innerPageBanner {
    background-color: #FBF7F1 !important;
    background-image: url('/static/website/images/innerheader.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* ───── Our Promise / howItWorkAbout — theme adds decorative mask ───── */
.howItWorkAbout:before,
.howItWorkAbout:after { display: none !important; }

/* ───── howItWorkItem — orange fill-on-hover overlay ────────────────── */
.howItWorkItem::after {
    background-color: var(--vy-teal) !important;
}
.howItWorkItem:hover .howItWorkIcon svg path,
.howItWorkItem:hover .howItWorkIcon svg { fill: var(--vy-mint) !important; stroke: var(--vy-mint) !important; }
.howItWorkItem:hover .howItWorkContent h4 { color: #fff !important; }
.howItWorkItem:hover .howItWorkContent p { color: rgba(255,255,255,0.85) !important; }

/* ───── Form focus states ───────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--vy-mint) !important;
    box-shadow: 0 0 0 0.15rem rgba(62, 217, 0, 0.25) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Premium clean-up — "sophisticated does not mean clutter".
   Hide the theme's decorative floating garnishes (ginger, mint sprigs,
   radish etc.) that surround hero + about images. They add busy-ness
   without adding meaning. The main image + backdrop stays.
   ───────────────────────────────────────────────────────────────────── */
.specialDishTiffinCol .maskImg,
.customerSaysIcon,
.makTiff,
.arrowLine,
.timeIcon,
.callIcon,
.discountLabel,
.sTiffinBox,
.ourReviewer {
    display: none !important;
}

/* Hide the small "Crafted in Nairobi" pill above the hero heading —
   the h1 speaks for itself; the pill fights the hierarchy. */
.specialDishTiffinCol .moreFaster { display: none !important; }

/* Kill the parallax jitter that the theme adds to floating elements.
   Anything decorative that survived above stays put. */
.movingjs { transform: none !important; }

/* ─────────────────────────────────────────────────────────────────────
   Ship-orange decorative discs / rings.
   The theme layers big orange disc + ring PNGs behind the hero image and
   behind the customerSays image. They're stylised for the theme's orange
   palette and read as a huge splash of colour that fights our mint accent.
   Hide them — the primary image + subtle backdrop reads cleaner.
   ───────────────────────────────────────────────────────────────────── */
.bgBannerImg,
.bgBannerInnerImg,
.customerSaysBg { display: none !important; }

/* When those decorative layers are gone, the primary hero image ends up
   position:relative with no width constraint. Give it a graceful frame. */
.specialDishTiffinImg { text-align: center; }
.specialDishTiffinImg img { max-width: 100%; height: auto; }

/* ───── Hero image — the actual Vyakula meal-box photo ──────────────── */
.vy-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}
.vy-hero-image img {
    max-width: 100%;
    max-height: 540px;
    height: auto;
    width: auto;
    border-radius: 24px;
    box-shadow: 0 30px 60px -20px rgba(0, 50, 51, 0.28),
                0 10px 30px -10px rgba(0, 50, 51, 0.15);
    object-fit: cover;
    display: block;
}
.customerSaysImg,
.customerSaysImgInner {
    display: flex !important;
    justify-content: center;
    align-items: center;
    min-height: 380px;
}
.customerSaysChef {
    position: static !important;
    max-width: 90%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,50,51,0.10);
}

/* Inner-page banner — the custom outline-icon background image is doing
   all the visual work. Hide the theme's two decorative placeholder image
   slots that would otherwise cover the illustration edges. Also hide the
   h1 + breadcrumb: the illustration already carries a centred "Prepared
   with love / Delivered with care / Made for your lifestyle" stamp that
   speaks for every page. Page context still comes from the URL + nav. */
.innerPageBannerImgLeft,
.innerPageBannerImgRight { display: none !important; }
.innerPageBannerInner {
    justify-content: center !important;
    min-height: 220px;
}
.innerPageBannerContent { display: none !important; }

/* Delivery banner — full deep-teal without theme's decorative background */
.deliveryFoodOuter {
    background: transparent !important;
    padding: 2rem 0 !important;
}
.deliveryFoodOuter::before,
.deliveryFoodOuter::after { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────
   Section rhythm — theme ships everything at padding: 80px 0 (i.e. 160px
   of vertical space between sections). Reads spacious but empty on a
   marketing page with our tighter copy. Bring it down to a considered
   48px so sections breathe without feeling adrift.
   ───────────────────────────────────────────────────────────────────── */
.specialDishTiffin,
.customerSays,
.ourMealPlan,
.deliveryFood,
.howItWork,
.howItWorkAbout,
.innerPageBanner,
.getInTouchInfo,
.sendMessage,
.errorSec {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

/* Hero can be a touch tighter at top since it's the first thing after the
   header — the header already sits above with its own padding. */
.specialDishTiffin { padding-top: 32px !important; padding-bottom: 40px !important; }

/* Inner-page banners are already visually thick — tighten more aggressively */
.innerPageBanner { padding-top: 40px !important; padding-bottom: 40px !important; }

/* Footer already deep-teal; no need for its own 40px pad on top of that */
.footer { padding-top: 40px !important; padding-bottom: 24px !important; }

/* Section-heading blocks add their own bottom margin — trim it so the
   heading→content gap is proportional to the tighter section padding */
.commonHeading { margin-bottom: 32px; }
.ourMealPlanRow { margin-bottom: 24px !important; }

/* CTA banner is content-sparse, so the smaller outer pad matters more */
.deliveryFood { padding-top: 10px !important; padding-bottom: 10px !important; }

/* ─── Footer WhatsApp button — replaces the old callback-request
   form. Sits in the same footer slot the input+button used to fill. */
.footerWhatsapp {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.footerWhatsappBtn {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 22px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.footerWhatsappBtn svg { flex-shrink: 0; }
@media (max-width: 991.98px) {
    .footerWhatsapp { justify-content: flex-start; margin-top: 12px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Catering — four-package tier cards.
   Layout: col-lg-3 desktop / col-md-6 tablet / col-12 mobile.
   Each card sets --pkg-color via a .pkg-<tier> modifier class;
   everything else (icon strokes, price bar, patterns, corner motif)
   reads from that variable via `currentColor` so tier styling is
   centralised. The card is `position: relative` because the corner
   ankara motif and the bottom ankara strip are absolutely-positioned
   SVGs painted in the tier colour.
   ───────────────────────────────────────────────────────────────────── */
.packagesSection { padding: 60px 0; background: #fbfaf7; }
.packagesSection .pkgRow { row-gap: 28px; }

/* ─── Section heading — two-line lowercase serif with leaf ornaments ─── */
.pkgHeading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 30px;
    text-align: center;
}
.pkgHeadingOrn {
    width: 160px;
    height: 60px;
    color: var(--vy-mint-ink);
    opacity: 0.35;
    flex-shrink: 0;
}
.pkgHeadingInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.pkgHeadingTitle {
    font-family: 'Jacques Francois', serif;
    color: var(--vy-teal);
    font-size: 40px;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.005em;
    text-transform: lowercase;
    font-weight: 400;
}
.pkgHeadingDivider {
    width: 240px;
    max-width: 100%;
    color: var(--vy-mint-ink);
    display: flex;
    justify-content: center;
}
.pkgHeadingDivider svg { width: 100%; height: 8px; }
.pkgHeadingSub {
    font-family: 'Jacques Francois', serif;
    color: var(--vy-mint-ink);
    font-size: 28px;
    line-height: 1;
    margin: 0;
    text-transform: lowercase;
    font-weight: 400;
}

/* ─── Card shell ─── */
.pkgCard {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 22px rgba(0, 50, 51, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pkgCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 50, 51, 0.14);
}

/* Corner ankara motif — top-right half-triangle, uses the same tier
   SVG as the bottom strip, clipped to a right triangle so the ankara
   pattern fills only the top-right corner of the card. */
.pkgCornerPattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 140px;
    background-repeat: repeat;
    background-size: 55px 55px;
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}
.pkg-karibu .pkgCornerPattern { background-image: url('../images/karibu.svg'); }
.pkg-baraka .pkgCornerPattern { background-image: url('../images/baraka.svg'); }
.pkg-fahari .pkgCornerPattern { background-image: url('../images/fahari.svg'); }
.pkg-malkia .pkgCornerPattern { background-image: url('../images/malkia.svg'); }

/* Card head — icon, name, tagline, ornament (description moved to
   .pkgBody below the image so images align across the 4 cards). */
.pkgHead {
    padding: 24px 22px 18px;
    text-align: center;
    position: relative;
    z-index: 2;
}
.pkgIcon {
    width: 60px;
    height: 60px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pkg-color);
    color: var(--pkg-color);
}
.pkgIcon svg { width: 30px; height: 30px; }
.pkgName {
    font-family: 'Jacques Francois', serif;
    color: var(--pkg-color);
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0;
    margin: 8px 0 2px;
    text-transform: lowercase;
    font-weight: 400;
}
.pkgTagline {
    color: var(--pkg-color);
    font-size: 13px;
    text-transform: lowercase;
    letter-spacing: 0.01em;
    font-weight: 500;
    margin-bottom: 4px;
    opacity: 0.9;
}
.pkgOrn {
    display: block;
    width: 90px;
    height: 8px;
    margin: 6px auto 10px;
    color: var(--pkg-color);
    opacity: 0.55;
}
.pkgDesc {
    color: var(--vy-text);
    font-size: 13px;
    line-height: 1.4;
    margin: 0 22px 10px;
    padding-top: 4px;
    opacity: 0.85;
    text-align: center;
}

/* Image band — the image itself is masked at the top so it dissolves
   into the (white) card head instead of meeting it with a hard line.
   Using mask-image on the <img> rather than a white overlay means
   the effect works for any image and doesn't wash out its colours. */
.pkgImg {
    height: 180px;
    overflow: hidden;
    position: relative;
}
.pkgImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 12%, rgba(0, 0, 0, 1) 28%);
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 12%, rgba(0, 0, 0, 1) 28%);
}

/* Body wrapper — everything below the image. Wedged into the image
   via a negative margin-top + rounded top corners so the transition
   from image to content reads as a soft overlap rather than a flat
   cut. Also carries the flex column that lets .pkgFeatures grow to
   fill available card height (so cards line up across the row). */
.pkgBody {
    position: relative;
    z-index: 2;
    margin-top: -22px;
    padding-top: 14px;
    background: #fff;
    border-radius: 26px 26px 0 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Feature list — no dashed borders, bigger icons, cleaner */
.pkgFeatures {
    list-style: none;
    padding: 18px 22px;
    margin: 0;
    flex: 1;
}
.pkgFeatures li {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    align-items: center;
    border-bottom: 1px dotted var(--pkg-color);
}
.pkgFeatures li:last-child { border-bottom: none; }
.pkgFtIcon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--pkg-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pkgFtIcon svg { width: 28px; height: 28px; }
.pkgFtText { flex: 1; min-width: 0; }
.pkgFtText strong {
    display: block;
    font-weight: 600;
    color: var(--vy-teal);
    font-size: 14px;
    line-height: 1.2;
    text-transform: lowercase;
}
.pkgFtText span {
    display: block;
    font-size: 12px;
    color: var(--vy-muted);
    margin-top: 2px;
    line-height: 1.3;
    text-transform: lowercase;
}

/* ─── Price button — centered pill (not edge-to-edge). Sits between
   the features list and the thin bottom pattern strip. Reset default
   <button> chrome, add subtle hover-brighten + arrow shift so it reads
   as pressable without shouting. `align-self: center` shrinks the item
   to content width inside the card's flex column. ─── */
.pkgPriceBtn {
    background: var(--pkg-color);
    color: #fff;
    border: none;
    padding: 12px 30px;
    align-self: center;
    margin: 6px 20px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: filter 0.2s ease, background 0.2s ease;
    font: inherit;
    text-align: center;
    position: relative;
    z-index: 2;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 50, 51, 0.12);
}
.pkgPriceBtn:hover { filter: brightness(1.08); }
.pkgPriceBtn:active { filter: brightness(0.96); }
.pkgPriceBtn:focus-visible {
    outline: 3px solid var(--pkg-color);
    outline-offset: 3px;
}
.pkgPriceLine {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}
.pkgPriceFrom {
    font-size: 10px;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}
.pkgPriceAmt {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: lowercase;
}
.pkgPriceAmt small {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.75;
    margin-right: 2px;
}
.pkgPricePer {
    font-size: 10px;
    text-transform: lowercase;
    letter-spacing: 0.03em;
    opacity: 0.85;
}
.pkgPriceCta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    opacity: 0.85;
    font-weight: 600;
}
.pkgPriceCta svg {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}
.pkgPriceBtn:hover .pkgPriceCta svg { transform: translateX(3px); }

/* Bottom ankara strip — full-width band using the tier's dedicated
   SVG pattern from /gateway/images/<tier>.svg (colours are baked into
   the SVG, so no currentColor plumbing needed here). Positioned in
   flow at the card's bottom, below the price button, per the mockup. */
.pkgPattern {
    display: block;
    width: 100%;
    height: 24px;
    background-repeat: repeat;
    background-size: 55px 55px;
    opacity: 0.75;
}
.pkg-karibu .pkgPattern { background-image: url('../images/karibu.svg'); }
.pkg-baraka .pkgPattern { background-image: url('../images/baraka.svg'); }
.pkg-fahari .pkgPattern { background-image: url('../images/fahari.svg'); }
.pkg-malkia .pkgPattern { background-image: url('../images/malkia.svg'); }

/* ─── Per-tier palette. Deep colours on the accents; the CSS variable
   flows into border, icon strokes, price bar, corner motif and bottom
   strip via `currentColor`. Green tier stays inside the brand mint;
   brown / gold / purple are earned exceptions so the four cards read
   distinct at a glance — matches the mockup. ─── */
.pkg-karibu { --pkg-color: #2ba400; }
.pkg-baraka { --pkg-color: #8b4513; }
.pkg-fahari { --pkg-color: #b47905; }
.pkg-malkia { --pkg-color: #4a1a5f; }

/* ─── Package request modal — Bootstrap 5 modal, restyled to brand.
   Teal header, mint-accented form fields, brand-neutral neutrals. ─── */
.pkgRequestModal .modal-content {
    border-radius: 22px;
    border: none;
    box-shadow: 0 30px 80px rgba(0, 50, 51, 0.25);
    overflow: hidden;
}
.pkgRequestModal .modal-header {
    background: var(--vy-teal);
    color: #fff;
    padding: 20px 24px;
    border-bottom: none;
    align-items: flex-start;
    gap: 12px;
}
.pkgRequestModal .modal-header .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.85;
    margin: 0;
}
.pkgModalHeadWrap { flex: 1; min-width: 0; }
.pkgRequestModal .modal-title {
    font-family: 'Jacques Francois', serif;
    font-size: 22px;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.15;
    font-weight: 400;
}
.pkgModalPkgChip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    max-width: 100%;
    flex-wrap: wrap;
}
.pkgModalPkgLabel {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    font-size: 10px;
}
.pkgModalPkgName { font-weight: 600; text-transform: capitalize; }
.pkgModalPkgPrice { opacity: 0.85; }

.pkgRequestModal .modal-body { padding: 24px; }
.pkgRequestModal .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--vy-teal);
    margin-bottom: 6px;
}
.pkgRequestModal .form-control,
.pkgRequestModal .form-select {
    border-radius: 10px;
    border: 1px solid var(--vy-line);
    padding: 10px 12px;
    font-size: 14px;
    background-color: #fff;
}
.pkgRequestModal .form-control:focus,
.pkgRequestModal .form-select:focus {
    border-color: var(--vy-mint);
    box-shadow: 0 0 0 3px rgba(62, 217, 0, 0.15);
    outline: none;
}
.pkgModalNote {
    background: #f4f7f2;
    border-left: 3px solid var(--vy-mint);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--vy-muted);
    margin-bottom: 16px;
    line-height: 1.4;
}
.pkgModalError {
    background: #fdecec;
    border: 1px solid #e17055;
    color: #a3402a;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
}
.pkgModalActions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}
.pkgModalSubmit { min-width: 170px; }
.pkgModalThanks {
    text-align: center;
    padding: 30px 10px 20px;
}
.pkgModalThanksIcon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    color: var(--vy-mint-ink);
}
.pkgModalThanksIcon svg { width: 100%; height: 100%; }
.pkgModalThanks h5 {
    font-family: 'Jacques Francois', serif;
    color: var(--vy-teal);
    font-size: 24px;
    margin: 0 0 10px;
    font-weight: 400;
}
.pkgModalThanks p {
    color: var(--vy-muted);
    font-size: 14px;
    margin: 0 0 22px;
    line-height: 1.5;
}
.pkgModalThanksPkg {
    color: var(--vy-mint-ink);
    font-weight: 600;
    text-transform: capitalize;
}

/* ─── Responsive — tablet and mobile tweaks ─── */
@media (max-width: 991.98px) {
    .pkgImg { height: 220px; }
    .pkgHeadingOrn { width: 100px; }
    .pkgHeadingTitle { font-size: 32px; }
    .pkgHeadingSub { font-size: 22px; }
}

@media (max-width: 767.98px) {
    .packagesSection { padding: 40px 0; }
    .pkgHeading { flex-direction: column; gap: 6px; }
    .pkgHeadingOrn { display: none; }
    .pkgHeadingTitle { font-size: 28px; }
    .pkgHeadingSub { font-size: 22px; }
    .pkgCard { max-width: 480px; margin: 0 auto; }
    .pkgImg { height: 240px; }
    .pkgName { font-size: 36px; }
}

/* ═════════════════════════════════════════════════════════════════════
   Error pages (404 / 500 / 403 / 400) — shared shell. Each template
   drops its own numeric code into .vyErrorNumber; the rest of the
   layout is identical so the four pages read as siblings.
   ═════════════════════════════════════════════════════════════════════ */
.errorPage .errorSec { padding: 80px 0 100px; background: #faf6ee; }
.errorPage .errorSecInner { text-align: center; }
.errorPage .errorSecInnerGroup {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vyErrorNumber {
    font-family: 'Jacques Francois', 'Times New Roman', serif;
    font-size: clamp(6rem, 18vw, 12rem);
    line-height: 0.95;
    color: var(--vy-teal);
    text-align: center;
    letter-spacing: -0.03em;
    margin: 0;
    font-weight: 400;
}
.vyErrorRule {
    width: 80px;
    height: 3px;
    background: var(--vy-gold);
    border-radius: 2px;
    margin: 4px 0 22px;
}
.errorPage .errorSecContent h1 {
    font-family: 'Jacques Francois', serif;
    color: var(--vy-teal) !important;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 14px;
    font-weight: 400;
}
.errorPage .errorSecContent h1 span { color: var(--vy-mint-ink) !important; }
.errorPage .errorSecContent p {
    font-size: 17px;
    color: var(--vy-text);
    line-height: 1.55;
    margin: 0 0 28px;
    max-width: 520px;
}
.errorPage .specialDishBtnGroup { display: flex; justify-content: center; }

/* ═════════════════════════════════════════════════════════════════════
   Story page — narrative flow across 7 sections. Section backgrounds
   alternate between a warm cream (#faf6ee) and white; the standards
   band breaks the rhythm with deep teal. All typography lands on the
   brand tokens (--vy-teal / --vy-mint-ink / --vy-gold) so the page
   reads consistent with the rest of the site.
   ═════════════════════════════════════════════════════════════════════ */

.ourStoryPage .storyHero,
.ourStoryPage .storyPanel,
.ourStoryPage .storyThreeWays,
.ourStoryPage .storyOutro { padding: 60px 0; }

.ourStoryPage .storyHero        { background: #faf6ee; padding-top: 50px; padding-bottom: 40px; }
.ourStoryPage .storyPanel-intro { background: #fff; }
.ourStoryPage .storyPanel-plans { background: #faf6ee; }
.ourStoryPage .storyThreeWays   { background: #fff; }
.ourStoryPage .storyPanel-thread { background: #faf6ee; }
.ourStoryPage .storyOutro       { background: #fff; padding: 40px 0 60px; text-align: center; }

/* ─── Shared: eyebrow, squiggle, icon bubble, gold emphasis ─── */
.storyEyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    font-weight: 700;
    color: var(--vy-teal);
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.storyEyebrowLine {
    width: 30px;
    height: 1px;
    background: var(--vy-gold);
    display: inline-block;
}
.storySquiggle {
    display: inline-block;
    width: 80px;
    height: 10px;
    color: var(--vy-gold);
    margin: 12px 0;
}
.storySquiggle svg { width: 100%; height: 100%; display: block; }
.storyIconBubble {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--vy-teal);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.storyIconBubble svg { width: 26px; height: 26px; }
.storyIconBubble.bubble-mint { background: var(--vy-mint-ink); }
.storyIconBubble.bubble-gold { background: var(--vy-gold); color: var(--vy-teal); }
.storyIconBubble.bubble-red  { background: #a13d2d; color: #fff; }
.storyEmphasis { color: var(--vy-gold); font-weight: 600; }

/* ─── Hero ─── */
.storyHeroInner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.storyHeroTitle {
    font-family: 'Jacques Francois', serif;
    color: var(--vy-teal);
    font-size: 56px;
    line-height: 1.05;
    margin: 0 0 4px;
    font-weight: 400;
}
.storyHeroLead {
    font-size: 17px;
    color: var(--vy-text);
    max-width: 480px;
    line-height: 1.55;
    margin: 8px 0 0;
}
.storyHeroLead strong { color: var(--vy-teal); }
.storyHeroImg {
    position: relative;
    height: 100%;
    min-height: 320px;
    overflow: hidden;
    border-radius: 20px;
}
/* Silent cross-fade slider between the two hero photos. Two absolutely
   positioned images stacked; each runs the same 12s keyframe animation
   but slide 2 starts 6s in (negative animation-delay) so their
   opacity phases are opposite. No JS, no controls, no user affordance. */
.storyHeroSlide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: storyHeroFade 12s ease-in-out infinite;
}
.storyHeroSlide-2 { animation-delay: -6s; }
@keyframes storyHeroFade {
    0%,   42% { opacity: 1; }
    50%,  92% { opacity: 0; }
    100%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .storyHeroSlide { animation: none; }
    .storyHeroSlide-2 { opacity: 0; }
}
/* Soft fade on the left edge of the hero photo so it eases into the
   cream section bg rather than meeting the text with a hard line. */
.storyHeroImg::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    background: linear-gradient(to right, #faf6ee, transparent);
    pointer-events: none;
    z-index: 1;
    border-radius: 20px 0 0 20px;
}

/* ─── Intro panel (3-col: text | photo | text) ─── */
.storyIntroRow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
}
.storyIntroCol {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.storyIntroCol p {
    color: var(--vy-text);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}
.storyIntroCol .storyLead strong {
    color: var(--vy-teal);
    font-size: 17px;
}
.storyIntroCol .storyEmphasis {
    font-size: 17px;
    margin-top: 4px;
}
.storyIntroImg img {
    width: 100%;
    border-radius: 12px;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ─── Meal plans panel (text | photo, tray-wide) ─── */
.storyPlansRow {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 40px;
    align-items: center;
}
.storyPlansText p {
    color: var(--vy-text);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}
.storyPlansText strong { color: var(--vy-teal); }
.storyPlansImg img {
    width: 100%;
    border-radius: 12px;
    display: block;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

/* ─── Three ways of showing up (heading with gold dashes + 3 cards) ─── */
.storyThreeWaysHead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 30px;
    text-align: center;
}
.storyDashDivider {
    flex: 0 1 80px;
    height: 1px;
    background: var(--vy-gold);
    display: inline-block;
}
.storyThreeWaysTitle {
    font-size: 17px;
    color: var(--vy-teal);
    font-weight: 500;
}
.storyWaysRow { row-gap: 24px; }
.storyWayCard {
    background: #faf6ee;
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.storyWayHead {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.storyWayIcon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.storyWayIcon svg { width: 26px; height: 26px; }
.storyWayIcon.way-teal { background: var(--vy-teal); color: #fff; }
.storyWayIcon.way-gold { background: var(--vy-gold); color: var(--vy-teal); }
.storyWayIcon.way-red  { background: #a13d2d; color: #fff; }
.storyWayLabels { flex: 1; min-width: 0; }
.storyWayLabel {
    color: var(--vy-teal);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.05em;
    margin: 2px 0 6px;
    text-transform: uppercase;
}
.storyWayDesc {
    color: var(--vy-text);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}
.storyWayImg { margin-top: auto; }
.storyWayImg img {
    width: 100%;
    border-radius: 8px;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ─── Standards band (teal bg, thin) ─── */
.storyStandards {
    background: var(--vy-teal);
    color: #fff;
    padding: 28px 0;
}
.storyStandardsTitle {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin: 0 0 20px;
}
.storyStandardsRow {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}
.storyStandardsItem {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.storyStdIcon { color: var(--vy-gold); flex-shrink: 0; }
.storyStdIcon svg { width: 28px; height: 28px; }
.storyStdText strong {
    display: block;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.storyStdText span {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin-top: 2px;
}
.storyStandardsDivider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
}
.storyStandardsDivider-tall { height: 48px; }
.storyStandardsQuote {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 260px;
}
.storyStandardsQuote p {
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

/* ─── Thread panel (quote | family photo) ─── */
.storyThreadRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.storyThreadText {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.storyThreadText p {
    color: var(--vy-text);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}
.storyThreadText strong { color: var(--vy-teal); }
.storyThreadImg img {
    width: 100%;
    border-radius: 14px;
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* ─── Outro — embedded at the bottom of the thread panel, no
   longer its own section. Centred below the thread-row. ─── */
.storyThreadOutro {
    text-align: center;
    margin-top: 40px;
    padding-top: 8px;
}
.storyOutroTitle {
    font-family: 'Jacques Francois', serif;
    color: var(--vy-teal);
    font-size: 44px;
    margin: 0;
    font-weight: 400;
    line-height: 1;
}
.storyOutroTitle em {
    color: var(--vy-gold);
    font-style: italic;
    font-weight: 400;
}

/* ─── Desktop typography scale-up ─────────────────────────────────────
   At ≥1200px, body copy on the story page needs to hold its own
   against the wide photography or it reads as a whisper. Mobile is
   untouched — this block only lifts sizes and weight from the 992px
   breakpoint upward. Pull-quotes shift to the Jacques Francois serif
   for editorial contrast against the sans body.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
    /* Intro panel — text columns get uniform breathing space; the
       lead line + gold pull-quote both step up as display sizes. */
    .storyIntroCol p           { font-size: 18px; line-height: 1.65; }
    .storyIntroCol .storyLead strong {
        font-family: 'Jacques Francois', serif;
        font-weight: 400;
        font-size: 26px;
        line-height: 1.2;
        color: var(--vy-teal);
    }
    .storyIntroCol .storyEmphasis {
        font-family: 'Jacques Francois', serif;
        font-weight: 400;
        font-size: 24px;
        line-height: 1.3;
    }

    /* Meal plans — the paragraph reads next to a very wide tray photo;
       lift it to a mini pull-quote so the balance feels intentional. */
    .storyPlansRow  { grid-template-columns: 1fr 1.4fr; gap: 56px; }
    .storyPlansText p { font-size: 22px; line-height: 1.55; }
    .storyPlansText p strong {
        font-family: 'Jacques Francois', serif;
        font-weight: 400;
        color: var(--vy-teal);
    }

    /* Way cards — labels feel like headings, not captions. */
    .storyWayLabel { font-size: 20px; letter-spacing: 0.06em; }
    .storyWayDesc  { font-size: 16px; line-height: 1.5; }

    /* Standards band — sub-13px reads as noise on the wide teal. */
    .storyStandardsTitle { font-size: 19px; }
    .storyStdText strong { font-size: 14px; letter-spacing: 0.1em; }
    .storyStdText span   { font-size: 13px; }
    .storyStandardsQuote p { font-size: 15px; line-height: 1.5; }
    .storyStandardsQuote { max-width: 300px; }

    /* Thread panel — the closing quote deserves editorial weight. */
    .storyThreadText p { font-size: 24px; line-height: 1.5; }
    .storyThreadText p strong {
        font-family: 'Jacques Francois', serif;
        font-weight: 400;
        color: var(--vy-teal);
    }

    /* Outro — bigger for the closing punchline. */
    .storyOutroTitle { font-size: 60px; }
}

/* ─── Responsive ─── */
@media (max-width: 991.98px) {
    .storyHeroTitle { font-size: 42px; }
    .storyIntroRow { grid-template-columns: 1fr; gap: 28px; }
    .storyIntroImg img { aspect-ratio: 16 / 10; }

    /* Standards band tablet: 4 items in a 2x2 grid, quote spans full
       width underneath (hairline dividers hidden). */
    .storyStandardsRow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 28px;
        align-items: flex-start;
        justify-content: unset;
    }
    .storyStandardsDivider { display: none; }
    .storyStandardsQuote {
        grid-column: 1 / -1;
        max-width: 100%;
        justify-content: center;
        text-align: center;
        margin-top: 8px;
    }
}

@media (max-width: 767.98px) {
    .ourStoryPage .storyHero,
    .ourStoryPage .storyPanel,
    .ourStoryPage .storyThreeWays { padding: 40px 0; }
    .storyHeroInner { grid-template-columns: 1fr; gap: 24px; }
    .storyHeroImg { min-height: 220px; }
    .storyHeroImg::before { display: none; }
    .storyHeroTitle { font-size: 34px; }
    .storyPlansRow { grid-template-columns: 1fr; gap: 24px; }
    .storyThreadRow { grid-template-columns: 1fr; gap: 24px; }
    .storyOutroTitle { font-size: 30px; }

    /* Standards band mobile: single column, each item centred as a
       small icon+text pair. Quote stacks the mint bubble above the
       line for a natural signature-quote feel. */
    .storyStandardsRow {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .storyStandardsItem {
        justify-content: center;
        max-width: 260px;
        margin: 0 auto;
    }
    .storyStandardsQuote {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .storyStandardsQuote p { max-width: 320px; }
}