/*
Theme Name: Anandiitaa Custom Theme!
Author: Heramb Joshi
Description: Custom enterprise theme for Anandiitaa
Version: 1.1
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&display=swap');

/* ========================================================================
   FONTS
   ======================================================================== */

@font-face {
    font-family: 'Appetite Pro';
    src: url('assets/fonts/appetite-pro/AppetitePro-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Appetite Pro';
    src: url('assets/fonts/appetite-pro/AppetitePro-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Appetite Pro';
    src: url('assets/fonts/appetite-pro/AppetitePro-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Appetite Pro';
    src: url('assets/fonts/appetite-pro/AppetitePro-Bold.otf') format('opentype');
    font-weight: 700;                       /* font-face descriptor — maps Bold OTF to 700 (untouched by global token) */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Appetite Pro';
    src: url('assets/fonts/appetite-pro/AppetitePro-Heavy.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('assets/fonts/dm-sans/DMSans-Variable.ttf') format('truetype-variations');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('assets/fonts/dm-sans/DMSans-Italic-Variable.ttf') format('truetype-variations');
    font-weight: 100 1000;
    font-style: italic;
    font-display: swap;
}

/* ========================================================================
   RESET + BASE
   ======================================================================== */

:root {
    --brand-maroon: #6b0f1a;
    --brand-maroon-dark: #4a0a12;
    --brand-cream: #ece1cb;
    /* Match slide bg — adjust if needed */
    --brand-text: #333333;

    /* === Type scale (per design system) ===
       Headings = 57px / weight 500 (medium, never bold)
       Subtext  = 27px / weight 500
       Body     = 18px / DM Sans regular (weight 400)
       Reference these tokens in every component rule for consistency. */
    --fs-heading: 57px;
    --fs-subtext: 27px;
    --fs-body: 18px;
    --fw-heading: 500;
    --fw-body: 400;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: var(--fs-body);             /* 18px global body baseline */
    font-weight: var(--fw-body);           /* DM Sans regular (400), never bold */
    color: var(--brand-text);
    /* SEAMLESS_BG_TEST: original cream bg commented; brand gradient per design spec. Restore by uncommenting below and removing gradient. */
    /* background: var(--brand-cream); */
    background: linear-gradient(90deg, #feebc7 0%, #fcf9f3 100%);
    background-attachment: fixed;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ========================================================================
   Custom scrollbar — maroon thumb on cream track.
   WebKit pseudos cover Chrome/Safari/Edge; scrollbar-color covers Firefox.
   ======================================================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--brand-cream, #ece1cb);
}

::-webkit-scrollbar-thumb {
    background: var(--brand-maroon, #6b0f1a);
    border-radius: 999px;
    transition: background 200ms ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-maroon-dark, #4a0a12);
}

::-webkit-scrollbar-corner {
    background: var(--brand-cream, #ece1cb);
}

/* Smooth, fluid native scrolling site-wide. No snap — content flows freely. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-maroon, #6b0f1a) var(--brand-cream, #ece1cb);
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);        /* medium 500 — never bold */
    line-height: 1.15;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
picture {
    display: block;
    max-width: 100%;
}

/* ========================================================================
   HEADER / NAV
   ======================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* z-index above .nav-backdrop (150) so the mobile hamburger drawer
       (which lives inside .site-header in markup) renders ABOVE the blur.
       Without this, the backdrop's stacking context blurred the entire
       header including the drawer's own contents. */
    z-index: 220;
    padding: 14px clamp(20px, 4vw, 48px); /* desktop default: edge gutters spread logo & nav to viewport edges */
    background: var(--brand-cream);      /* solid cream — same surface at every scroll position */
}

/* Pages other than the home page used to need top space when the header was
   always-visible. Header now auto-hides at the top, so no padding required. */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}


.logo a {
    display: inline-block;
}

.logo img {
    height: 30px;                        /* was 42 — ~30% smaller */
    width: auto;
}

.main-navigation {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.78rem;                  /* slightly tighter to match shorter header */
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.main-navigation a {
    color: var(--brand-text);
    margin-left: 28px;
    transition: color 0.2s;
}

.main-navigation a:hover,
.main-navigation a[aria-current="page"] {
    color: var(--brand-maroon);
}

/* ========================================================================
   MOBILE HAMBURGER MENU
   Default state: hamburger button + close button + backdrop are HIDDEN.
   Mobile media query (@media max-width: 700px below) flips them on and
   converts .main-navigation into a slide-in drawer.
   ======================================================================== */
/* Kill the iOS / mobile-Chrome blue tap-highlight on EVERY interactive
   element, globally. Future buttons/links inherit automatically — no
   per-element patches needed. Keyboard users still get :focus-visible. */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
summary,
label {
    -webkit-tap-highlight-color: transparent;
}
/* Default focus outline is killed via :focus (mouse/touch); :focus-visible
   restores it for keyboard users — accessibility kept. */
a:focus,
button:focus,
[role="button"]:focus,
input:focus,
summary:focus {
    outline: none;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand-maroon);
    outline-offset: 3px;
    border-radius: 4px;
}

.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--brand-maroon);
}
.nav-toggle__bar {
    display: block;
    width: 26px;
    height: 2.5px;
    background: var(--brand-maroon);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle__bar + .nav-toggle__bar { margin-top: 6px; }

/* Backdrop — covers viewport behind the drawer with a blur. */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(40, 18, 8, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 150;
}
.nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Hover dropdown — used by Products (Jaggery / Sugar) */
.nav-item {
    position: relative;
    display: inline-block;
    margin-left: 28px;
}
.nav-item__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 0; /* nav-item already supplies the spacing */
}
.nav-item__caret {
    width: 10px;
    height: 7px;
    transition: transform 0.25s ease;
}
.nav-item:hover .nav-item__caret,
.nav-item:focus-within .nav-item__caret {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 180px;
    padding: 10px 0;
    background: rgba(255, 250, 240, 0.85);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(107, 15, 26, 0.10);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(107, 15, 26, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0.22s;
    z-index: 110;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0s;
}

/* Hover bridge: invisible strip between trigger and panel so the hover doesn't drop. */
.nav-dropdown::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.nav-dropdown a {
    display: block;
    margin-left: 0;
    padding: 10px 22px;
    color: var(--brand-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    transition: background 0.18s ease, color 0.18s ease;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus {
    background: rgba(107, 15, 26, 0.06);
    color: var(--brand-maroon);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-dropdown { background: rgba(255, 250, 240, 0.97); }
}

/* ========================================================================
   BUTTONS (Montserrat)
   ======================================================================== */

.btn {
    display: inline-block;
    position: relative;
    padding: 14px 36px;
    border-radius: 50px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transform: translateY(0);
    transition:
        background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-primary {
    background: #6b0f1a;
    color: #fff;
    box-shadow: 0 6px 18px rgba(107, 15, 26, 0.18);
}

.btn-primary:hover {
    background: #4a0a12;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(107, 15, 26, 0.28);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(107, 15, 26, 0.20);
}

.btn-outline {
    background: transparent;
    color: #6b0f1a;
    border: 1.5px solid #6b0f1a;
}

.btn-outline:hover {
    background: #6b0f1a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(107, 15, 26, 0.22);
}

/* ========================================================================
   HERO CAROUSEL (Immersive Header)
   ======================================================================== */

.hero-carousel {
    position: relative;
    width: 100%;
    height: 100vh;
    /* full viewport — header overlays transparently */
    min-height: 560px;
    overflow: hidden;
    /* SEAMLESS_BG_TEST: commented to let body bg show through. */
    /* background: var(--brand-cream); */
}

.hero-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.65, 0.05, 0.36, 1);
    will-change: transform;
}

.hero-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ========================================================================
   STANDALONE PAGE SECTIONS (former carousel slides 6+, scroll-revealed)
   Reuses .hero-slide internals; just gives each one its own block + height.
   ======================================================================== */
.page-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 560px;
    flex: initial;            /* override .hero-slide's flex sizing */
    /* SEAMLESS_BG_TEST: commented to let body bg show through. */
    /* background: var(--brand-cream); */
    /* SEAMLESS_BG_TEST: breathing room between sections (no hard borders → margin OK). */
    margin-top: 10vh;
}

/* SEAMLESS_BG_TEST: B-selective — the news slide (7) has dense absolute-positioned
   content (top caption + clipping + bottom caption) that crowds/clips on a short
   ~620px viewport. Give it a taller frame floor so the %-positioned content has
   room. max(100vh, 760px): on tall (mac) screens it stays 100vh; on short ones it
   grows to 760px (the user scrolls a touch more, nothing clips). */
.page-section--news {
    height: auto;
    min-height: max(100vh, 760px);
}

/* Slide 7 — pin the bottom "Choose Pure, Choose Anandiitaa" caption to the
   first-viewport zone (100svh), NOT to the section bottom. With the 760px
   min-height above, anchoring via `bottom` placed the heading below the user's
   visible viewport on short screens (client flagged: "appearing outside the
   frame"). Anchoring to `top: calc(100svh - 110px)` keeps it ~110px above the
   visible fold regardless of how tall the section grows. */
.page-section--news .hero-slide__content--bottom-center {
    top: calc(100svh - 110px);
    bottom: auto;
}

/* Slide 7 — confine the news-clipping background image to a centered band so it
   doesn't crowd either caption. Without these limits the bg fills the full
   slide and the clippings collide with both "Not all jaggery..." (top) and
   "Choose Pure..." (bottom). We reserve a responsive top buffer for the top
   caption and a fixed 150px tail for the bottom caption. CSS var so the same
   clamp value drives both the `top` anchor and the height subtraction.
   NOTE: this is fixed-% / fixed-px positional tuning — the right long-term
   fix lives in Plan B (context.md §3) where this whole slide moves to a
   flex/grid layout that self-arranges instead of being absolute-positioned. */
.page-section--news {
    --news-bg-top: clamp(80px, 12%, 130px);
}
.page-section--news .hero-slide__bg {
    top: var(--news-bg-top);
    bottom: auto;
    height: calc(100svh - var(--news-bg-top) - 150px);
}

/* ========================================================================
   SCROLL-TRIGGERED CONTENT ANIMATIONS
   Section bgs do NOT animate — only the content layered on top eases in
   when scroll-reveal.js adds .is-visible to the [data-reveal] section.
   The :where() block below lists every component that should animate; the
   nth-child rules give each group a small stagger so groups read sequentially.
   Carousel slides 1–5 are not [data-reveal] — they keep their auto-scroll.
   ======================================================================== */

/* Idle state for any animatable content inside a [data-reveal] section.
   Excludes elements that use transform for positioning/centering — those go
   to the opacity-only block below to avoid layout jumps. */
[data-reveal] :where(
    .product-features li,
    .product-hero__image,
    .product-hero__stage,
    .natural-seal,
    .process-title,
    .process-step,
    .benefits-title,
    .benefit-item,
    .benefits-footer,
    .recipes-title,
    .recipe-card,
    .variants-grid > .variant-card,
    .reviews-grid > .review-card,
    .standards-title,
    .standards-col,
    .benefits-grid > .benefit-card,
    .social-slide > *
) {
    opacity: 0;
    transform: translateY(14px);             /* subtle rise — was 28px, kept short */
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--anim-delay, 0ms),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--anim-delay, 0ms);
    will-change: opacity, transform;
}

/* Reveal state — same selector list, with .is-visible scope. */
[data-reveal].is-visible :where(
    .product-features li,
    .product-hero__image,
    .product-hero__stage,
    .natural-seal,
    .process-title,
    .process-step,
    .benefits-title,
    .benefit-item,
    .benefits-footer,
    .recipes-title,
    .recipe-card,
    .variants-grid > .variant-card,
    .reviews-grid > .review-card,
    .standards-title,
    .standards-col,
    .benefits-grid > .benefit-card,
    .social-slide > *
) {
    opacity: 1;
    transform: translateY(0);
}

/* Elements that rely on transform for positioning/centering (translateX/Y -50%
   etc) — animating their transform would break their anchored position, so
   they use an opacity-only fade. Subtle, no jump. */
[data-reveal] :where(
    .hero-slide__content,
    .hero-slide__content--top-center,
    .hero-slide__content--bottom-center,
    .hero-slide__content--top-caption,
    .reviews-title,
    .product-hero__title
) {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--anim-delay, 0ms);
    will-change: opacity;
}
[data-reveal].is-visible :where(
    .hero-slide__content,
    .hero-slide__content--top-center,
    .hero-slide__content--bottom-center,
    .hero-slide__content--top-caption,
    .reviews-title,
    .product-hero__title
) {
    opacity: 1;
}

/* Per-group stagger delays (so items in the same group cascade in). */
[data-reveal] .product-hero__title           { --anim-delay: 0ms; }
[data-reveal] .product-hero__stage,
[data-reveal] .product-hero__image           { --anim-delay: 80ms; }
[data-reveal] .product-features li:nth-child(1) { --anim-delay: 160ms; }
[data-reveal] .product-features li:nth-child(2) { --anim-delay: 240ms; }
[data-reveal] .product-features li:nth-child(3) { --anim-delay: 320ms; }
[data-reveal] .natural-seal                  { --anim-delay: 380ms; }

[data-reveal] .process-title                 { --anim-delay: 0ms; }
[data-reveal] .process-step:nth-child(1)     { --anim-delay: 120ms; }
[data-reveal] .process-step:nth-child(2)     { --anim-delay: 220ms; }
[data-reveal] .process-step:nth-child(3)     { --anim-delay: 320ms; }
[data-reveal] .process-step:nth-child(4)     { --anim-delay: 420ms; }
[data-reveal] .process-step:nth-child(5)     { --anim-delay: 520ms; }

[data-reveal] .benefits-title                { --anim-delay: 0ms; }
[data-reveal] .benefit-item:nth-child(1)     { --anim-delay: 100ms; }
[data-reveal] .benefit-item:nth-child(2)     { --anim-delay: 180ms; }
[data-reveal] .benefit-item:nth-child(3)     { --anim-delay: 260ms; }
[data-reveal] .benefit-item:nth-child(4)     { --anim-delay: 340ms; }
[data-reveal] .benefit-item:nth-child(5)     { --anim-delay: 420ms; }
[data-reveal] .benefits-footer               { --anim-delay: 520ms; }

[data-reveal] .recipes-title                 { --anim-delay: 0ms; }
[data-reveal] .recipes-grid .recipe-card:nth-child(1) { --anim-delay: 100ms; }
[data-reveal] .recipes-grid .recipe-card:nth-child(2) { --anim-delay: 180ms; }
[data-reveal] .recipes-grid .recipe-card:nth-child(3) { --anim-delay: 280ms; }
[data-reveal] .recipes-grid .recipe-card:nth-child(4) { --anim-delay: 360ms; }

[data-reveal] .variants-grid > .variant-card:nth-child(1) { --anim-delay: 80ms; }
[data-reveal] .variants-grid > .variant-card:nth-child(2) { --anim-delay: 220ms; }

[data-reveal] .reviews-title                 { --anim-delay: 0ms; }
[data-reveal] .reviews-grid > .review-card:nth-child(1) { --anim-delay: 140ms; }
[data-reveal] .reviews-grid > .review-card:nth-child(2) { --anim-delay: 280ms; }

[data-reveal] .standards-title               { --anim-delay: 0ms; }
[data-reveal] .standards-col:nth-child(1)    { --anim-delay: 100ms; }
[data-reveal] .standards-col:nth-child(2)    { --anim-delay: 200ms; }
[data-reveal] .standards-col:nth-child(3)    { --anim-delay: 300ms; }
[data-reveal] .standards-col:nth-child(4)    { --anim-delay: 400ms; }

[data-reveal] .benefits-grid > .benefit-card:nth-child(1) { --anim-delay: 100ms; }
[data-reveal] .benefits-grid > .benefit-card:nth-child(2) { --anim-delay: 200ms; }
[data-reveal] .benefits-grid > .benefit-card:nth-child(3) { --anim-delay: 300ms; }
[data-reveal] .benefits-grid > .benefit-card:nth-child(4) { --anim-delay: 400ms; }

[data-reveal] .social-slide > *:nth-child(1) { --anim-delay: 80ms; }
[data-reveal] .social-slide > *:nth-child(2) { --anim-delay: 200ms; }
[data-reveal] .social-slide > *:nth-child(3) { --anim-delay: 320ms; }
[data-reveal] .social-slide > *:nth-child(4) { --anim-delay: 440ms; }

/* Per-element flavor overrides — different motion per element type. */

/* Hero packet image: subtle scale-pop entrance. */
[data-reveal] .product-hero__image,
[data-reveal] .product-hero__stage {
    transform: translateY(8px) scale(0.98);
}
[data-reveal].is-visible .product-hero__image,
[data-reveal].is-visible .product-hero__stage {
    transform: translateY(0) scale(1);
}

/* 100% Natural badge: small wax-seal-style rotate-in. translateY keeps the
   lift offset from the base .natural-seal rule applied during the reveal. */
[data-reveal] .natural-seal {
    transform: translateY(calc(-50% - 200px)) scale(0.85) rotate(-8deg);
    transition-duration: 0.7s;
}
[data-reveal].is-visible .natural-seal {
    transform: translateY(calc(-50% - 200px)) scale(1) rotate(0deg);
}

/* Process timeline circles: tiny scale-pop in sequence. */
[data-reveal] .process-step {
    transform: translateY(10px) scale(0.97);
}
[data-reveal].is-visible .process-step {
    transform: translateY(0) scale(1);
}

/* Variant cards: subtle alternating slide from sides — kept short. */
[data-reveal] .variants-grid > .variant-card:nth-child(1) {
    transform: translateX(-12px);
}
[data-reveal] .variants-grid > .variant-card:nth-child(2) {
    transform: translateX(12px);
}
[data-reveal].is-visible .variants-grid > .variant-card { transform: translateX(0); }

/* Review cards: same subtle alternation. */
[data-reveal] .reviews-grid > .review-card:nth-child(1) {
    transform: translateX(-10px);
}
[data-reveal] .reviews-grid > .review-card:nth-child(2) {
    transform: translateX(10px);
}
[data-reveal].is-visible .reviews-grid > .review-card { transform: translateX(0); }

/* Subtle lift on card hover — adds tactile feedback without competing with the reveal. */
.recipe-card,
.variant-card,
.benefit-card { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; }
.recipe-card:hover { transform: translateY(-4px); }
.variant-card:hover { transform: translateY(-6px); }
.benefit-card:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] .product-hero__title,
    [data-reveal] .product-hero__image,
    [data-reveal] .product-hero__stage,
    [data-reveal] .natural-seal,
    [data-reveal] .process-step,
    [data-reveal] .variants-grid > .variant-card,
    [data-reveal] .reviews-grid > .review-card {
        transform: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] :where(
        .product-features li, .product-hero__image, .product-hero__stage,
        .natural-seal, .process-title, .process-step, .benefits-title, .benefit-item,
        .benefits-footer, .recipes-title, .recipe-card, .variants-grid > .variant-card,
        .reviews-grid > .review-card, .standards-title, .standards-col,
        .benefits-grid > .benefit-card, .social-slide > *
    ) {
        opacity: 1;
        transform: none;
        transition: none;
    }
    [data-reveal] :where(
        .hero-slide__content, .hero-slide__content--top-center,
        .hero-slide__content--bottom-center, .hero-slide__content--top-caption,
        .reviews-title, .product-hero__title
    ) {
        opacity: 1;
        transition: none;
    }
}

.hero-slide__bg,
.hero-slide__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* cover + centered keeps the bg flush to the slide regardless of which
       variant is served (laptop 16:9 vs mac 3:2). Trade: minor edge crop on
       the off-aspect variant. Per-slide overrides below tweak object-position
       when a subject needs to anchor left/right instead of center. */
    object-fit: cover;
    object-position: center center;
}

/* SEAMLESS_BG_TEST: first slide uses transparent-bg sticker.
   No override needed — default `cover` + L1344's `object-position: center bottom`
   anchor products to bottom and crop the transparent top, matching other slides' width.
   Mac-focused for now; windows assets pending. */

/* SEAMLESS_BG_TEST: option 2 safety net — soft top/bottom fade on stickers.
   Targets only *-sticker.png so old full-bleed slides stay untouched.
   Any hard image edge dissolves into the gradient instead of cutting hard. */
.hero-slide__bg img[src*="-sticker"] {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* SEAMLESS_BG_TEST: benefits section — bottom fade removed per design feedback. */
.page-section--benefits .hero-slide__bg img[src*="-sticker"] {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 100%);
}

/* Slide 9 — Benefits — DESKTOP/TABLET layout (≥701px):
   The new 9-jaggery.jpg replaces the old sticker. To restore the
   sectioned look (title + cards on cream upper area, photo strip
   at bottom), constrain the bg image to a bottom strip and let the
   slide's cream body show through above. Mobile (<700px) is excluded
   — it uses the explicit full-fill override in the mobile block. */
@media (min-width: 701px) {
    .page-section--benefits .hero-slide__bg {
        top: auto;
        bottom: 0;
        height: 35%;
    }
}

.hero-slide__content {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    max-width: 560px;
    z-index: 5;
    color: #6b0f1a;
}

.hero-slide__content h2 {
    font-size: var(--fs-heading);
    font-weight: var(--fw-heading);
    line-height: 1.1;
    margin-bottom: 28px;
    color: #6b0f1a;
}

.hero-slide__content p {
    font-size: var(--fs-body);
    color: #333;
    margin-bottom: 28px;
    max-width: 460px;
}

.hero-slide__content .btn {
    margin-top: 8px;
}

/* Top-center variant: heading + CTA stack centered above the slide imagery */
.hero-slide__content--top-center {
    top: 9%;                                /* bumped down from 4% so heading clears the fixed header */
    left: 50%;
    transform: translateX(-50%);
    max-width: 800px;
    width: 90%;
    text-align: center;
}

.hero-slide__content--top-center h2 {
    font-size: var(--fs-heading);
    margin-bottom: 24px;
}

.hero-slide__content--top-center .btn {
    padding: 12px 30px;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}

/* Slide 1 only: pull the CTA up so it sits tight under the heading and clears
   the packet tops below. Iteration: -100px → -135px → -160px. At each step
   the maroon button still overlapped the maroon Desi Jaggery Powder pack
   (same color = visual merge). -160px puts it clearly in the cream zone
   above the packet line on the typical 1366×768 / 1440×900 viewports. */
.hero-slide:first-child .hero-slide__content--top-center .btn {
    margin-top: -160px;
}
/* Slide 1 only: tighten the heading→button vertical breathing room so the
   -160px pull above doesn't risk clipping into the heading text on the
   shorter tier headings (1366: 36px h2). Scoped to :first-child so other
   carousel slides keep the default. */
.hero-slide:first-child .hero-slide__content--top-center h2 {
    margin-bottom: 6px;
}

/* Bottom-center variant: caption sits a bit above the bottom edge */
.hero-slide__content--bottom-center {
    top: auto;
    bottom: calc(12% - 50px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 1100px;
    width: 90%;
    text-align: center;
}

.hero-slide__content--bottom-center h2 {
    font-size: var(--fs-heading);
    margin-bottom: 0;
}

/* Top-caption variant: caption sits a bit below the top edge (mirrors bottom-center sizing) */
.hero-slide__content--top-caption {
    top: 7%;                            /* pushed down from 2% — caption was crowding the slide's top edge */
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 1100px;
    width: 90%;
    text-align: center;
}

.hero-slide__content--top-caption h2 {
    font-size: var(--fs-heading);
    margin-bottom: 0;
}

.hero-features {
    list-style: none;
    margin-top: 110px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.hero-features li {
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--brand-maroon);
}

.hero-features .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-features .icon svg {
    width: 22px;
    height: 22px;
}

/* Carousel controls */
.hero-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #6b0f1a;
    cursor: pointer;
    z-index: 10;
    display: grid;
    place-items: center;
    transition: background 0.2s;
}

.hero-carousel__arrow:hover {
    background: #fff;
}

.hero-carousel__arrow--prev { left: 24px; }
.hero-carousel__arrow--next { right: 24px; }

.hero-carousel__arrow svg {
    width: 22px;
    height: 22px;
}

.hero-carousel__dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.hero-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #6b0f1a;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.hero-carousel__dot.is-active {
    background: #6b0f1a;
}

/* ========================================================================
   CONTENT SECTIONS (Below carousel)
   ======================================================================== */

.page-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.bg-picture,
.bg-picture img {
    width: 100%;
    height: auto;
    display: block;
}

.section-content {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 10;
    max-width: 600px;
    padding: 30px;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}

.section-content h2 {
    font-size: var(--fs-heading);
    margin-bottom: 15px;
    font-weight: var(--fw-heading);
}

.section-content p {
    font-size: var(--fs-body);
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Section 2 (Our Process) — no card, right-aligned */
#section-2 .section-content {
    left: auto;
    right: 5%;
    background: transparent;
    padding: 0;
    color: #333;
}

#section-2 .section-content h2 {
    color: #6b0f1a;
    font-size: var(--fs-heading);
    margin-bottom: 18px;
}

#section-2 .section-content p {
    color: #333;
    font-size: var(--fs-body);
    font-weight: var(--fw-body);
    line-height: 1.55;
}

/* ========================================================================
   BENEFITS SLIDE (carousel slide type=benefits)
   ======================================================================== */

.benefits-title {
    position: absolute;
    top: 18%;
    left: 6%;
    z-index: 5;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-heading);
    line-height: 1.1;
    color: var(--brand-maroon);
    margin: 0;
}

.benefits-grid {
    position: absolute;
    bottom: 32%;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    max-width: 1100px;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;                              /* roomier than 22 — visible breathing room */
}

.benefit-card {
    position: relative;
    background: #6b0f1a;
    border-radius: 22px;
    padding: 48px 22px 24px;
    color: #fff;
    aspect-ratio: 0.92;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    transform: translateY(0);
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.22);
}
.benefit-card .benefit-card__icon {
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.benefit-card:hover .benefit-card__icon {
    transform: scale(1.08) rotate(-6deg);
    box-shadow: 0 0 0 8px #FEEBC7, 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Maroon → pink gradient across the row */
.benefit-card:nth-child(1) {
    background: #76112D;
}

.benefit-card:nth-child(2) {
    background: #9D2745;
}

.benefit-card:nth-child(3) {
    background: #BA3656;
}

.benefit-card:nth-child(4) {
    background: #CD3F60;
}

.benefit-card__icon {
    position: absolute;
    top: -32px;
    left: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #CD3F60;
    /* yolk (inner) */
    border: none;
    box-shadow: 0 0 0 8px #FEEBC7;
    /* fried-egg white (outer shell) */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FEEBC7;
}

.benefit-card__icon svg {
    width: 28px;
    height: 28px;
}

.benefit-card__title {
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-subtext);
    line-height: 1.05;
    color: #fff;
    margin: 0 0 16px;
}

.benefit-card__body {
    font-family: 'DM Sans', sans-serif;
    font-weight: var(--fw-body);
    font-size: var(--fs-body);
    line-height: 1.4;
    color: #fff;
    margin: 0;
}

/* ========================================================================
   PRODUCTS GRID SLIDE (carousel slide type=products-grid)
   ======================================================================== */

.products-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1280px;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 28px 32px;
}

.product-card {
    position: relative;
    background: linear-gradient(155deg, #faf2dc 0%, #efe1bb 100%);
    border-radius: 55px;
    padding: 40px 32px 24px;
    overflow: visible;
    aspect-ratio: 2.05;
    box-shadow: 0 2px 14px rgba(80, 50, 20, 0.05);
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.45), transparent 55%);
    pointer-events: none;
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px rgba(80, 50, 20, 0.16);
}

.product-card__body {
    max-width: 58%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    color: var(--card-accent);
}

.product-card__title {
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-subtext);
    line-height: 1.05;
    color: var(--card-accent);
    margin-bottom: 22px;
}

.product-card__desc {
    font-family: 'DM Sans', sans-serif;
    font-weight: var(--fw-body);
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--card-accent);
    max-width: 380px;
}

.product-card__sizes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    color: var(--card-accent);
}

.product-card__sizes-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: var(--fw-heading);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

.product-card__sizes-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-body);
    letter-spacing: 0.05em;
}

.product-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--card-accent);
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.product-card__arrow:hover {
    transform: translateX(4px);
    opacity: 0.92;
}

.product-card__arrow svg {
    width: 22px;
    height: 22px;
}

.product-card__image {
    position: absolute;
    bottom: 18%;
    right: 5%;
    height: auto;
    width: auto;
    max-width: 36%;
    max-height: 135%;
    object-fit: contain;
    pointer-events: none;
    z-index: 0;
    /* mix-blend-mode: multiply was tinting the white sugar inside the green/
       blue packs reddish/yellowish (the cream card gradient bled through the
       packet PNG). Removed per client feedback. Maroon jaggery packs look
       essentially identical without it. */
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover .product-card__image {
    transform: translateY(-10px) scale(1.04);
}

.product-card__body {
    position: relative;
    z-index: 1;
}
.product-card__arrow {
    transform: translateX(0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover .product-card__arrow {
    transform: translateX(8px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

/* ========================================================================
   STANDARDS SLIDE LAYOUT (carousel slide type=standards)
   ======================================================================== */

.standards-title {
    position: absolute;
    /* SEAMLESS_BG_TEST: shift title up ~100px via top (transform is owned by scroll-reveal anim). */
    top: calc(14% - 100px);
    left: 6%;
    z-index: 5;
    color: var(--brand-maroon);
    line-height: 1;
}

.standards-title__small {
    display: block;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-heading);
    line-height: 1;
}

.standards-title__wordmark {
    display: block;
    width: clamp(360px, 38vw, 700px);
    height: auto;
    margin: 10px 0;
}

.standards-grid {
    position: absolute;
    bottom: 10%;
    left: 6%;
    right: 6%;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.standards-col {
    padding: 0 32px;
    border-right: 2px dashed var(--brand-maroon);
    color: var(--brand-maroon);
}

.standards-col:first-child {
    padding-left: 0;
}

.standards-col:last-child {
    padding-right: 0;
    border-right: none;
}

.standards-col__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--brand-maroon);
    color: #fff;
    border-radius: 12px;
    margin-bottom: 18px;
}

.standards-col__icon svg {
    width: 30px;
    height: 30px;
}

.standards-col__title {
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-subtext);
    line-height: 1.15;
    color: var(--brand-maroon);
    margin-bottom: 18px;
}

.standards-col__body {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-body);
    line-height: 1.45;
    color: var(--brand-maroon);
}

/* ========================================================================
   SOCIAL SLIDE (carousel slide type=social — Community / Follow CTA)
   ======================================================================== */

.social-slide {
    position: absolute;
    top: 50%;
    left: clamp(20px, 6vw, 96px);
    transform: translateY(-50%);
    z-index: 5;
    /* Stay inside the bg's left negative-space band regardless of which variant
       (laptop 16:9 vs mac 3:2) is being served — capping at 40vw guarantees
       the overlay never crosses into the powder-bowl half of the bg. */
    max-width: min(560px, 40vw);
}

.social-slide__wordmark {
    display: block;
    width: clamp(220px, 24vw, 420px);
    height: auto;
    margin-bottom: 28px;
    margin-top: 12px;
}

.social-slide__heading {
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-heading);
    line-height: 1.1;
    color: var(--brand-maroon);
    margin: 0 0 18px;
}

.social-slide__subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-body);
    line-height: 1.55;
    color: #1a1a1a;
    margin: 0 0 36px;
}

.social-slide__pills,
.site-footer__socials {
    /* Hidden per client request:
       - .social-slide__pills: social CTA pills on the homepage "For Those Who
         Choose Better" slide (Instagram, YouTube, Facebook).
       - .site-footer__socials: Instagram + YouTube icons in the footer brand col.
       Markup stays for SEO/structure; just visually removed. */
    display: none;
}

.social-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand-maroon);
    color: #fff;
    border-radius: 14px;
    padding: 14px 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(0.85rem, 0.95vw, 1rem);
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.2s, transform 0.18s;
}

.social-pill:hover {
    background: var(--brand-maroon-dark);
    transform: translateY(-2px);
}

.social-pill svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Slide 11 (social) bg: switch from `contain` (which letterboxes when bg
   aspect != slide aspect) to `cover` with the subject anchored right.
   This keeps the powder bowl on the right edge for both the 1920×1080
   (laptop, 16:9) and 2560×1664 (mac, 3:2) variants, and guarantees the
   left half always shows the bg's own cream/slate negative space — the
   reading area where .social-slide content sits. */
.page-section--social .hero-slide__bg img {
    object-fit: cover;
    object-position: 100% center;
}

/* Carousel slides (1–5) place product packets at the bottom of the frame.
   Anchor bg to the bottom so the packets stay fully visible regardless of
   slide aspect — top (cream/empty space) crops instead. */
.hero-track .hero-slide__bg img {
    object-position: center bottom;
}

/* ========================================================================
   FOOTER
   ======================================================================== */

/* ---- Brand footer (Anandiitaa) ---- */
.site-footer {
    --footer-bg: #690B26;
    --footer-fg: #F9EED1;
    position: relative;
    isolation: isolate;
    background: var(--footer-bg);
    color: var(--footer-fg);
    padding: 88px 3% 28px;
    font-family: 'Montserrat', system-ui, sans-serif;
    overflow: hidden;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 56px;
    max-width: 100%;
    margin: 0;
    align-items: start;
}

.site-footer__col--nav  { grid-column: 3; }
.site-footer__col--info { grid-column: 4; }

/* --- Column 1: brand (logo + socials + legal) --- */
.site-footer__col--brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
}

.site-footer__logo {
    display: block;
    width: 360px;
    max-width: 100%;
    height: 64px;
    background-color: var(--footer-fg);
    -webkit-mask: url('assets/images/logo/anandiitaa-wordmark.png') left center/contain no-repeat;
            mask: url('assets/images/logo/anandiitaa-wordmark.png') left center/contain no-repeat;
}

.site-footer__brand-base {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 90px;
}

.site-footer__socials {
    /* Hidden per client request — Instagram + YouTube icons. Markup stays
       in footer.php for SEO/structure, just visually removed.
       (Was `display: flex; gap: 14px; align-items: center;` — restore if
       client ever wants them back.) */
    display: none;
}
.site-footer__socials a {
    color: var(--footer-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: opacity .2s ease;
}
.site-footer__socials a:hover { opacity: 0.75; }

.site-footer__legal {
    font-size: 13px;
    letter-spacing: 0.01em;
    color: var(--footer-fg);
    opacity: 0.92;
    margin: 0;
}
.site-footer__legal a {
    color: inherit;
    text-decoration: none;
}
.site-footer__legal a:hover { text-decoration: underline; }
.site-footer__sep {
    margin: 0 8px;
    opacity: 0.6;
}

/* --- Column 2: nav --- */
.site-footer__col--nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 8px;
}
.site-footer__col--nav a {
    color: var(--footer-fg);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
    transition: opacity .2s ease;
}
.site-footer__col--nav a:hover { opacity: 1; }

/* --- Column 3: corporate office + contact --- */
.site-footer__col--info {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 8px;
}
.site-footer__info-block h4 {
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--footer-fg);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 6px;
}
.site-footer__info-block p {
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--footer-fg);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    opacity: 0.92;
}
.site-footer__info-block a {
    color: inherit;
    text-decoration: none;
}
.site-footer__info-block a:hover { text-decoration: underline; }

/* --- Bottom-right copyright (slightly raised) --- */
.site-footer__copy {
    position: absolute;
    right: 6%;
    bottom: 28px;
    margin: 0;
    color: var(--footer-fg);
    font-size: 13px;
    opacity: 0.9;
    letter-spacing: 0.02em;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .site-footer { padding: 64px 6% 96px; }
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
    .site-footer__col--brand {
        grid-column: 1 / -1;
        min-height: auto;
    }
    .site-footer__brand-base { margin-top: 36px; }
    .site-footer__copy {
        right: 0;
        left: 0;
        text-align: center;
        bottom: 24px;
    }
}

@media (max-width: 600px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .site-footer__logo { width: 260px; height: 52px; }
    .site-footer__legal { font-size: 12px; }
    .site-footer__sep { margin: 0 6px; }
}

/* ========================================================================
   PRODUCTS LANDING (`/products`) — two category cards (Jaggery + Sugar)
   ======================================================================== */

.products-landing {
    min-height: 100vh;
    /* SEAMLESS_BG_TEST: commented to let body bg show through. */
    /* background: var(--brand-cream); */
    padding: 96px 6% 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 56px;
}

.products-landing__intro {
    text-align: center;
    max-width: 720px;
}
.products-landing__intro h1 {
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    color: var(--brand-maroon);
    font-size: var(--fs-heading);   /* matches home benefits/reviews title scale */
    margin: 0 0 14px;
    line-height: 1.05;
}
.products-landing__intro p {
    font-family: 'DM Sans', sans-serif;
    color: var(--brand-text);
    font-size: var(--fs-body);
    margin: 0;
    opacity: 0.85;
}

.products-landing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 560px));
    justify-content: center;
    gap: 48px;
    width: 100%;
    max-width: 1280px;
}

.category-card {
    --card-accent: #6b0f1a;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 28px;
    /* Light cream gradient — same recipe as home slide-4 product cards */
    background: linear-gradient(155deg, #faf2dc 0%, #efe1bb 100%);
    color: var(--brand-maroon);
    text-decoration: none;
    box-shadow: 0 14px 40px rgba(80, 50, 20, 0.10);
    transform: translateY(0) scale(1);
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    min-height: 480px;
}

.category-card::after {
    /* Tiny corner highlight only — fades out by ~12% so it stays at the edge
       and doesn't bleed into / wash out the packet image. */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.45) 0%, transparent 12%);
    pointer-events: none;
}

.category-card:hover,
.category-card:focus-visible {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 24px 56px rgba(80, 50, 20, 0.18);
}

.category-card__media {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px 16px;
    min-height: 280px;
}
.category-card__media img {
    max-width: 70%;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(80, 50, 20, 0.18));
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-card:hover .category-card__media img {
    transform: translateY(-8px) scale(1.04);
}

.category-card__body {
    position: relative;
    z-index: 1;
    padding: 28px 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-card__title {
    margin: 0;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-heading);
    line-height: 1.05;
    color: var(--brand-maroon);
}
.category-card__tagline {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-body);
    line-height: 1.45;
    color: var(--brand-maroon);
    opacity: 0.78;
}
.category-card__cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-maroon);
    transition: gap 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-card__cta svg {
    width: 18px;
    height: 18px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-card:hover .category-card__cta {
    gap: 16px;
}
.category-card:hover .category-card__cta svg {
    transform: translateX(4px);
}

@media (max-width: 800px) {
    .products-landing__grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   PRODUCT PAGE (slide-based — Jaggery, Sugar)
   Each slide is one full-viewport section. More slides will be added below.
   ======================================================================== */

.product-slide {
    position: relative;
    width: 100%;
    min-height: 100vh;
    /* SEAMLESS_BG_TEST: commented to let body bg show through. */
    /* background: var(--brand-cream); */
    overflow: hidden;
    padding-top: 24px;  /* header hides at top — slide owns the viewport */
    padding-bottom: 0;
}

/* "Anandiitaa Jaggery" lockup above the packet — wordmark logo + serif word */
.product-hero__title {
    position: absolute;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-heading);   /* matches home benefits/reviews title scale */
    line-height: 1;
    color: var(--brand-maroon);
    white-space: nowrap;
}
.product-hero__title img {
    height: clamp(2rem, 3vw, 3.4rem);
    width: auto;
    display: block;
}

/* Sugar page: black wordmark + black logo PNG (filter recolors maroon → black) */
.product-page--sugar .product-hero__title { color: #000; }
.product-page--sugar .product-hero__title img { filter: brightness(0); }

/* Slide-1 hero image fills the entire slide — composite already includes
   its own background and pink halo, so the slide bg is irrelevant here. */
.product-hero__stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}
.product-hero__stage picture { display: contents; } /* keep .product-hero__image inheriting stage box */
.product-hero__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* Anchor to bottom — both jaggery and sugar hero composites place the
       packet/bowl/pile at the lower half. Top is empty cream space, safe to crop. */
    object-position: center bottom;
}

/* Green "100% Natural" badge — bigger, inside viewport, no rotation */
/* Client-requested L/R swap (jaggery + sugar hero): "100% Natural" seal moves
   to the LEFT rail, the 3 feature RTBs move to the RIGHT rail. The original
   layout had seal on right, features on left. */
.natural-seal {
    position: absolute;
    top: 50%;
    left: 4%;
    right: auto;
    transform: translateY(calc(-50% - 200px));
    width: clamp(220px, 22vw, 340px);
    height: auto;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 8px 22px rgba(29, 94, 46, 0.18));
}

/* Right-rail feature list — bright pink pill cards, larger text, more breathing room */
.product-features {
    position: absolute;
    top: 50%;
    right: 5%;
    left: auto;
    transform: translateY(-50%);
    z-index: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 56px;
    max-width: 380px;
}
.product-features li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 1.25;
    color: var(--brand-maroon);
}
.product-features__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background: #CD3F60;          /* bright pink — matches home benefits row */
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
}
.product-features__icon svg { width: 32px; height: 32px; }

/* ========================================================================
   PROCESS TIMELINE SLIDE (jaggery slide 2 — "Process Defines Purity")
   5 steps in a row, alternating top/bottom. Each step has a "lid" (thick arc
   border + number knob) above or below an image circle, with text on the inside.
   ======================================================================== */

.product-slide--process {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;     /* title rides high; timeline gets pushed down by its own margin */
    padding: 60px 3% 60px;
    position: relative;
}

/* Mac-only background: only large viewports (≥1440px) get the process bg
   image. Non-mac variants intentionally absent — content still readable
   on the existing cream slide bg for smaller screens. Same pattern reused
   below for the variants slide. */
/* SEAMLESS_BG_TEST: entire mac-only bg-image block commented to let body bg show through. Uncomment to restore product page bgs. */
/*
@media (min-width: 1440px) {
    .product-page--jaggery .product-slide--process {
        background: url('assets/images/products/jaggery/mac/process-bg.png') center / 100% 100% no-repeat;
    }
    .product-page--sugar .product-slide--process {
        background: url('assets/images/products/sugar/mac/process-bg.png') center / 100% 100% no-repeat;
    }
    .product-page--jaggery .product-slide--variants,
    .product-page--jaggery .product-slide--benefits {
        background: url('assets/images/products/jaggery/mac/variants-bg.png') center / cover no-repeat;
    }
    .product-page--sugar .product-slide--variants,
    .product-page--sugar .product-slide--recipes {
        background: url('assets/images/products/sugar/mac/variants-bg.png') center / cover no-repeat;
    }
}
*/

.process-title {
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    color: #000;
    font-size: var(--fs-heading);
    line-height: 1.05;
    text-align: center;
    margin: 0 0 90px;                /* breathing room before the timeline */
}

/* Timeline: 5-column grid with explicit height so absolute-positioned
   children (circle, text, connectors) align reliably across viewport sizes. */
.process-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 12px;
    width: 100%;
    max-width: 1500px;
    position: relative;
    height: clamp(560px, 64vh, 720px);
}

/* Connector SVG layer — sits over the timeline.
   z-index above the step text so the lines aren't covered, but below the
   circle (which gets its own higher z-index) so the line tucks behind discs. */
.process-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.process-step {
    position: relative;
    height: 100%;
    /* Step LI must sit above .process-connectors (z-index: 3). Required because
       the reveal animation applies a transform → LI becomes a stacking context,
       which would otherwise isolate the inner circle's z-index from the timeline. */
    z-index: 5;
}

.process-step__circle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(220px, 18vw, 280px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #efe2c8;
    border: 5px solid #d6be9f;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    z-index: 4;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-step__circle:hover {
    transform: translateX(-50%) scale(1.04);
    box-shadow: 0 18px 40px rgba(107, 15, 26, 0.18);
}
.process-step__circle img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-step__circle:hover img {
    transform: scale(1.08);
}
.process-step--top    .process-step__circle { top:    20px; }
.process-step--bottom .process-step__circle { bottom: 20px; }

.process-step__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.process-step__placeholder {
    color: rgba(107, 15, 26, 0.35);
}
.process-step__placeholder svg { width: 80px; height: 80px; }

/* Thick arc — a coffee ring grown beyond the circle, clipped to one half */
.process-step__arc {
    position: absolute;
    border: 22px solid #d6be9f;
    border-radius: 50%;
    width: calc(100% + 36px);
    height: calc(100% + 36px);
    pointer-events: none;
}
.process-step--top .process-step__arc {
    top: -18px;
    left: -18px;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.process-step--bottom .process-step__arc {
    bottom: -18px;
    left: -18px;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

/* Number knob — coffee-filled rounded rectangle (pill-ish) with maroon numeral */
.process-step__lid {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}
.process-step--top    .process-step__lid { top:    -90px; }
.process-step--bottom .process-step__lid { bottom: -90px; }

.process-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 72px;
    background: #d6be9f;
    border-radius: 22px;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-subtext);
    color: var(--brand-maroon);
    line-height: 1;
}

/* Step text — fixed-height block so all five start AND end at the same y.
   Content is centered both horizontally (text-align) and vertically (flex). */
/* Same fixed-height text box for every step → all five start AND end at the same y.
   Narrower than the circle so the diagonal connector lines have a clear path. */
.process-step__text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(190px, 14vw, 240px);
    height: auto;                /* was 7em + overflow:hidden — clipped the longer copy */
    margin: 0;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-body);
    line-height: 1.45;
    color: var(--brand-text);
    overflow: visible;
}
.process-step--top    .process-step__text { top:    calc(20px + clamp(220px, 18vw, 280px) + 40px); }
.process-step--bottom .process-step__text { bottom: calc(20px + clamp(220px, 18vw, 280px) + 40px); }

/* Heading sits bold on its OWN line; body always wraps beneath it. */
.process-step__text strong {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--brand-text);
}

/* ========================================================================
   RECIPES SLIDE (sugar slide 3 — "Home Delicacies Recipes")
   2x2 grid of recipe cards. Each card: photo (left) + body+meta (right) +
   recipe title under photo. Horizontal rules act as row dividers.
   ======================================================================== */

.product-slide--recipes {
    display: block;
    padding: 80px 6% 100px;
}

.recipes-title {
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    color: #000;
    font-size: var(--fs-heading);
    line-height: 1.05;
    margin: 0 0 36px;
    padding: 0 0 28px;
    border-bottom: 1.5px solid #b89c70;
}

.recipes-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 80px;
    row-gap: 0;
}

.recipe-card {
    display: grid;
    grid-template-columns: clamp(220px, 22vw, 300px) 1fr;
    grid-template-areas:
        "media content"
        "title content";
    column-gap: 32px;
    row-gap: 18px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1.5px solid #b89c70;
}

.recipe-card__media {
    grid-area: media;
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 14px;
    overflow: hidden;
    background: #e9d9b8;
}
.recipe-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recipe-card__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.recipe-card__body {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-body);
    line-height: 1.55;
    color: #000;
}

.recipe-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.recipe-meta__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-body);
    color: #000;
}
.recipe-meta__icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    color: #000;
}
.recipe-meta__icon svg { width: 100%; height: 100%; }

.recipe-card__title {
    grid-area: title;
    margin: 0;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    color: #000;
    font-size: var(--fs-subtext);
    line-height: 1.15;
}

@media (max-width: 900px) {
    .recipes-grid { grid-template-columns: 1fr; column-gap: 0; }
}
@media (max-width: 560px) {
    .recipe-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "title"
            "content";
    }
}

/* ========================================================================
   HEALTH BENEFITS SLIDE (jaggery slide 3 — accordion)
   Native <details>/<summary> styled to match the brand. Each row expands
   to reveal a placeholder image + supporting body copy.
   ======================================================================== */

.product-slide--benefits {
    display: block;                  /* simple vertical flow: title → list → footer */
    padding: 60px 6% 60px;
}

.benefits-title {
    display: block;
    position: relative;
    width: 100%;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    color: #000;
    font-size: var(--fs-heading);
    line-height: 1.1;
    margin: 0 0 40px;
    padding: 0 0 24px;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 14px;                              /* visible spacing between rows */
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    clear: both;
}

/* Each row gets its own border + a subtle hover/open background so the
   spacing reads as clear, separate cards rather than one continuous list. */
.benefit-item {
    border: none;
    border-bottom: 3px solid #b89c70;
    contain: layout paint;
}
.benefit-item:first-child {
    border-top: 3px solid #b89c70;
}

.benefit-item details {
    width: 100%;
}
.benefit-item summary {
    list-style: none;
    cursor: pointer;
}
.benefit-item summary::-webkit-details-marker { display: none; }

/* Bigger numbers + titles */
.benefit-summary {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 22px;
    padding: 26px 10px;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    color: var(--brand-maroon);
    font-size: var(--fs-subtext);
    line-height: 1.2;
}
.benefit-summary__number {
    font-variant-numeric: tabular-nums;
}
.benefit-summary__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--brand-maroon);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.benefit-summary__caret svg { width: 100%; height: 100%; stroke-width: 2.4; }

.benefit-item details[open] .benefit-summary__caret {
    transform: rotate(180deg);
}

/* Reveal container — JS owns the open/close animation via Web Animations API.
   CSS only defines the static states; JS interpolates `height` between them. */
.benefit-reveal {
    overflow: hidden;
    height: 0;
}
.benefit-item details[open] .benefit-reveal {
    height: auto;
}
.benefit-reveal > * {
    opacity: 0;
    transform: translateY(-6px);
}
.benefit-item details[open] .benefit-reveal > * {
    opacity: 1;
    transform: translateY(0);
}

.benefit-content {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 40px;
    align-items: center;
    padding: 4px 10px 32px 94px;        /* aligned past the bigger number column */
}

.benefit-content__image {
    aspect-ratio: 16 / 9;
    background: transparent;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.benefit-content__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.benefit-item:hover .benefit-content__image img {
    transform: scale(1.04);
}
.benefit-content__placeholder {
    color: rgba(107, 15, 26, 0.35);
}
.benefit-content__placeholder svg { width: 64px; height: 64px; }

.benefit-content__body {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: var(--fw-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--brand-maroon);
    max-width: 720px;
}

.benefits-footer {
    margin: 32px 0 0;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--fs-body);
    color: var(--brand-maroon);
    opacity: 0.85;
}

/* ========================================================================
   PRODUCT VARIANTS SLIDE (jaggery slide 4 — Powder + Block side by side)
   Each card has a packet image overhanging the top, inside content below.
   ======================================================================== */

.product-slide--variants {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 4%;
}

.variants-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    width: 100%;
    max-width: 1600px;
}

.variant-card {
    position: relative;
    background:
        linear-gradient(155deg, #fbf2dc 0%, #f1e2bd 100%);
    border-radius: 28px;
    padding: 64px 68px;
    min-height: 500px;
    overflow: visible;
    box-shadow: 0 14px 40px rgba(107, 15, 26, 0.08);
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.variant-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.35), transparent 55%);
    pointer-events: none;
}
.variant-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 56px rgba(107, 15, 26, 0.16);
}
.variant-card:hover .variant-card__image {
    transform: translateY(-12px);
}

/* Packet base aligned to the BASELINE of "AVAILABLE IN:" — the line the
   letters sit on, not their top edge. */
.variant-card__image {
    position: absolute;
    right: 12px;
    bottom: 148px;
    height: clamp(520px, 60vh, 700px);
    width: auto;
    display: block;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.12));
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Body anchored to the bottom-left. */
.variant-card__body {
    position: absolute;
    bottom: 48px;
    left: 60px;
    right: 38%;
}

.variant-card__avail {
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;     /* body font per design system */
    color: var(--brand-maroon);
}
.variant-card__avail-label {
    font-weight: 500;
    font-size: var(--fs-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
}
.variant-card__avail-value {
    font-weight: var(--fw-heading);
    font-size: var(--fs-subtext);
    letter-spacing: 0.04em;
}

.variant-card__title {
    margin: 0;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-heading);
    line-height: 1.05;
    color: var(--brand-maroon);
    white-space: nowrap;                /* keep "Jaggery Powder" on a single line */
}

/* Sugar page: variant card text in black instead of maroon */
.product-page--sugar .variant-card__avail,
.product-page--sugar .variant-card__title { color: #000; }

/* ========================================================================
   PRODUCT PAGES — legacy basic grid (kept for any non-slide product pages)
   ======================================================================== */

.products-page {
    padding: 80px 8%;
    max-width: 1400px;
    margin: 0 auto;
}

.products-page h1 {
    font-size: var(--fs-heading);
    color: #6b0f1a;
    margin-bottom: 16px;
    text-align: center;
}

.products-page .lead {
    text-align: center;
    font-size: var(--fs-body);
    color: #555;
    max-width: 700px;
    margin: 0 auto 60px;
}

.products-page .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 36px;
}

.products-page .product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    transition: transform 0.25s, box-shadow 0.25s;
}

.products-page .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.products-page .product-card img {
    width: 100%;
    height: 280px;
    object-fit: contain;
    margin-bottom: 20px;
}

.products-page .product-card h3 {
    font-size: var(--fs-subtext);
    color: #6b0f1a;
    margin-bottom: 8px;
}

.products-page .product-card p {
    color: #666;
    font-size: var(--fs-body);
    margin-bottom: 18px;
}

/* ========================================================================
   REVIEWS SLIDE (carousel slide type=reviews — "Words that matter")
   U-shaped cards: image flat on top, body rounded at bottom.
   ======================================================================== */

.reviews-title {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    margin: 0;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: var(--fs-heading);
    line-height: 1.1;
    color: var(--brand-maroon);
    text-align: center;
    white-space: nowrap;
}

.reviews-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 82%;
    max-width: 1100px;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    /* force both columns to equal height */
    gap: 48px;
    margin-top: 4%;
}

.review-card {
    position: relative;
    background: transparent;
    /* blends with the cream slide bg */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* stretch to match sibling */
}

.review-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: visible;
    /* let the quote mark spill below the image */
    border-radius: 0;
    /* image stays straight-edged (top of U) */
}

.review-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Big yellow ” straddling the image's bottom edge.
   Anchored to the image so position is exact regardless of layout. */
.review-card__quote-mark {
    position: absolute;
    right: 32px;
    bottom: 0;
    transform: translateY(85%);
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-size: clamp(16rem, 22vw, 26rem);
    line-height: 0.8;
    color: #f0c869;
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}

.review-card__body {
    position: relative;
    flex: 1;
    /* grow to fill equal card height */
    background: transparent;
    /* blends with slide bg */
    border-left: 1.5px solid #D6BE9F;
    border-right: 1.5px solid #D6BE9F;
    border-bottom: 1.5px solid #D6BE9F;
    border-radius: 0 0 32px 32px;
    /* U-shape: rounded bottom corners */
    padding: 32px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.review-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-card__name {
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading);
    font-style: italic;
    font-size: var(--fs-subtext);
    /* unified — both cards same size */
    color: #1a1a1a;
    line-height: 1.25;
}

.review-card__role {
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-body);
    font-style: italic;
    font-size: var(--fs-body);
    /* unified */
    color: #1a1a1a;
    line-height: 1.25;
}

.review-card__quote {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-weight: var(--fw-body);
    font-size: var(--fs-body);
    /* unified — not too small, consistent across both cards */
    line-height: 1.55;
    color: var(--brand-maroon);
}

/* ========================================================================
   RESPONSIVE (desktop-first; mobile/tablet refinements deferred)
   ======================================================================== */

@media (max-width: 1024px) {
    .hero-slide__content h2 {
        font-size: 2.6rem;
    }

    .hero-slide__content {
        left: 6%;
        max-width: 480px;
    }
}

@media (max-width: 767px) {
    .hero-carousel {
        height: 70vh;
        min-height: 480px;
    }

    .hero-slide__content {
        left: 5%;
        right: 5%;
        max-width: none;
        text-align: left;
    }

    .hero-slide__content h2 {
        font-size: 1.8rem;
    }

    .hero-features li {
        font-size: 0.95rem;
    }

    .hero-carousel__arrow {
        display: none;
    }

    .section-content {
        left: 5% !important;
        right: 5% !important;
        max-width: 90%;
        padding: 20px;
    }

    #section-2 .section-content {
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%);
        top: 50%;
        text-align: center;
    }
}

/* ========================================================================
   ABOUT US — Slide 1 (Product wall + callouts)
   Bg image bakes in the cream paper, plants, salt, jaggery, and 4 packets.
   This block layers the page title and the four dashed-arrow callouts.
   Mac viewport first — desktop / responsive tuning passes come later.
   ======================================================================== */
.about-page {
    /* SEAMLESS_BG_TEST: commented to let body bg show through. */
    /* background: var(--brand-cream); */
}

.about-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    /* SEAMLESS_BG_TEST: commented to let body bg show through. */
    /* background: var(--brand-cream); */
}

.about-slide__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.about-slide__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.about-slide__title {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-size: var(--fs-heading);
    font-weight: var(--fw-heading);
    color: var(--brand-maroon);
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Single full-slide overlay SVG. Its viewBox matches the bg image's native
   pixel dimensions (2560×1664) and uses `xMidYMid slice` — same crop as the
   bg <img>'s object-fit: cover — so every label and arrow drawn in image-
   pixel space stays locked to the packets at any viewport aspect ratio. */
.about-callouts {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;     /* don't block clicks on anything below */
}

/* Reveal stagger — title in first, callouts fade together. */
[data-reveal] .about-slide__title  { --anim-delay: 0ms; }
[data-reveal] .about-callouts      { --anim-delay: 200ms; }

[data-reveal] :where(.about-slide__title, .about-callouts) {
    opacity: 0;
    transition: opacity 600ms ease var(--anim-delay, 0ms);
}
[data-reveal].is-visible :where(.about-slide__title, .about-callouts) {
    opacity: 1;
}

@media (max-width: 900px) {
    .about-slide__title {
        font-size: 36px;
        top: 8%;
    }
}

/* ========================================================================
   ABOUT US — Slide 2 (Our Vision)
   Split layout: giant decorative quote glyph + title + body on the left,
   vertical dashed maroon divider, product photo on the right.
   ======================================================================== */
.about-slide--vision {
    display: flex;
    align-items: stretch;
    padding: 0;
}

/* SEAMLESS_BG_TEST: vision section bg = new mac image (≥1440px). */
@media (min-width: 1440px) {
    .about-slide--vision {
        background: url('images/about-us/mac/vision-new.png') center / cover no-repeat;
    }
}

.about-vision__grid {
    display: grid;
    /* SEAMLESS_BG_TEST: was `1fr 1px 1fr` (copy | divider | photo). Divider + photo removed → single column. */
    grid-template-columns: 1fr;
    align-items: stretch;
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 100px 80px;
    gap: 80px;
}

.about-vision__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding: 40px 0;
    min-height: 600px;
    /* SEAMLESS_BG_TEST: lift heading + body ~50px (not in scroll-reveal list, so transform is safe). */
    transform: translateY(-50px);
}

/* Giant pale quote glyph behind the title (decorative). Uses a tan/cream
   fill on the cream bg for the soft watermark look in the reference. */
.about-vision__quotemark {
    position: absolute;
    top: -90px;
    left: 20px;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-size: 100rem;
    line-height: 1;
    color: #e6d6b3;            /* warm tan, sits on cream bg as subtle backdrop */
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.about-vision__title {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    font-family: 'Appetite Pro', 'Georgia', serif;
    /* Matches mission title size for visual consistency. */
    font-size: var(--fs-heading);
    font-weight: var(--fw-heading);
    color: var(--brand-maroon);
    line-height: 1;
    /* SEAMLESS_BG_TEST: uppercase "Our Vision". */
    text-transform: uppercase;
}

.about-vision__body {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    /* SEAMLESS_BG_TEST: title/body font sizes interchanged (was --fs-subtext). */
    font-size: var(--fs-heading);
    font-weight: 700;
    color: var(--brand-maroon);
    line-height: 1.45;
}

.about-vision__divider {
    width: 1px;
    border-left: 2px dashed var(--brand-maroon);
    align-self: stretch;
}

.about-vision__photo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-vision__photo img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 20px;
    display: block;
}

/* Reveal stagger for slide 2 */
[data-reveal] :where(.about-vision__quotemark, .about-vision__title, .about-vision__body, .about-vision__divider, .about-vision__photo) {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms ease, transform 700ms ease;
}
[data-reveal] .about-vision__quotemark { transition-delay: 0ms; }
[data-reveal] .about-vision__title     { transition-delay: 120ms; }
[data-reveal] .about-vision__body      { transition-delay: 240ms; }
[data-reveal] .about-vision__divider   { transition-delay: 340ms; }
[data-reveal] .about-vision__photo     { transition-delay: 200ms; }

[data-reveal].is-visible :where(.about-vision__quotemark, .about-vision__title, .about-vision__body, .about-vision__divider, .about-vision__photo) {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .about-vision__grid {
        grid-template-columns: 1fr;
        padding: 60px 24px;
        gap: 40px;
    }
    .about-vision__divider {
        display: none;
    }
    .about-vision__quotemark {
        font-size: 16rem;
        top: -40px;
    }
    .about-vision__title {
        margin-top: 40px;
        font-size: 40px;
    }
    .about-vision__body {
        font-size: 18px;
    }
}

/* ========================================================================
   ABOUT US — Slide 3 (Our Mission)
   Full-bleed photo bg (sugarcane + sugar bowl on maroon wood). Copy is
   placed on the right half over the darker wood area.
   ======================================================================== */
.about-slide--mission {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
}

.about-mission__copy {
    position: absolute;
    z-index: 2;
    right: 8%;
    top: 50%;
    transform: translateY(calc(-50% + 50px));
    max-width: 620px;
    color: #f5ebd2;
    text-align: left;
}

.about-mission__title {
    margin: 0 0 32px;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-size: var(--fs-heading);
    font-weight: var(--fw-heading);
    color: #f5ebd2;
    line-height: 1;
}

.about-mission__body {
    margin: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: var(--fs-subtext);
    font-weight: 700;
    color: #f5ebd2;
    line-height: 1.45;
}

/* Reveal stagger */
[data-reveal] :where(.about-mission__title, .about-mission__body) {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms ease, transform 700ms ease;
}
[data-reveal] .about-mission__title { transition-delay: 0ms; }
[data-reveal] .about-mission__body  { transition-delay: 180ms; }

[data-reveal].is-visible :where(.about-mission__title, .about-mission__body) {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .about-mission__copy {
        right: 5%;
        left: 5%;
        max-width: none;
    }
    .about-mission__title {
        font-size: 36px;
    }
    .about-mission__body {
        font-size: 18px;
    }
}

/* ========================================================================
   ABOUT US — Slide 4 (The Anandiitaa Standards)
   Centered header with inline wordmark + 2x2 grid of image/card pairs.
   ======================================================================== */
.about-slide--standards {
    width: 100%;
    min-height: 100vh;
    /* SEAMLESS_BG_TEST: edge-relative side padding — boxes stay ~5vw from every
       device border regardless of screen size (was fixed 80px). */
    padding: 100px clamp(24px, 5vw, 100px) 120px;
    /* SEAMLESS_BG_TEST: commented to let body bg show through. */
    /* background: var(--brand-cream); */
    overflow: hidden;
}

.about-standards__title {
    margin: 0 auto 160px;
    text-align: center;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-size: var(--fs-heading);
    font-weight: var(--fw-heading);
    color: var(--brand-maroon);
    line-height: 1;
    display: flex;
    align-items: baseline;       /* sit text + wordmark on common baseline */
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.about-standards__wordmark {
    height: 0.78em;              /* slightly tighter; wordmark sits cleanly with the surrounding text */
    width: auto;
    display: inline-block;
    align-self: baseline;
    transform: translateY(0.05em); /* nudge down so wordmark glyph baseline meets text baseline */
}

.about-standards__grid {
    /* Brick stagger: row 1 sits flush, row 2 shifted right by half a card so
       each row 2 card sits between the two cards above it. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 36px;
    /* SEAMLESS_BG_TEST: grid fits inside the padded section; can't exceed it (was 1520px). */
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

/* Brick stagger split symmetrically: row 1 shifts -15%, row 2 shifts +15%.
   Net horizontal offset between rows = 30% (gentle brick). Smaller offset
   keeps both end-cards inside the section padding at common viewports. */
/* SEAMLESS_BG_TEST: gentler brick stagger (was ±15%) so big cards stay inside the padded area. */
.standard-item:nth-child(-n+2) {
    transform: translateX(-6%);
}
.standard-item:nth-child(n+3) {
    transform: translateX(6%);
}

.standard-item {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 0;
    align-items: stretch;
    /* SEAMLESS_BG_TEST: bigger card boxes (was 480px). */
    max-width: 780px;
    cursor: default;
    transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}

/* Hover lifts each card -8px while preserving its row brick offset. */
.standard-item:nth-child(-n+2):hover {
    transform: translateX(-6%) translateY(-8px);
}
.standard-item:nth-child(n+3):hover {
    transform: translateX(6%) translateY(-8px);
}

.standard-item__image {
    position: relative;
    z-index: 2;
    width: 210px;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: box-shadow 380ms ease;
}

.standard-item:hover .standard-item__image {
    box-shadow: 0 16px 36px rgba(107, 15, 26, 0.18);
}

.standard-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}

.standard-item:hover .standard-item__image img {
    transform: scale(1.08);
}

.standard-item__card {
    position: relative;
    background: #fbf3df;        /* slightly lighter than page cream */
    border-radius: 22px;
    /* SEAMLESS_BG_TEST: bigger box + symmetric L/R padding (equal margins). */
    padding: 64px 72px;
    margin-left: -28px;         /* image overlaps card's left edge */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* SEAMLESS_BG_TEST: text block hugs left (near image), heading + body share one straight left edge. */
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    transition: background 380ms ease, box-shadow 380ms ease;
}

.standard-item:hover .standard-item__card {
    background: #fff;
    box-shadow: 0 14px 30px rgba(107, 15, 26, 0.10);
}

.standard-item__title {
    transition: color 380ms ease;
}

.standard-item:hover .standard-item__title {
    color: var(--brand-maroon-dark, #4a0a12);
}

@media (prefers-reduced-motion: reduce) {
    .standard-item,
    .standard-item__image,
    .standard-item__image img,
    .standard-item__card,
    .standard-item__title {
        transition: none !important;
    }
    .standard-item:nth-child(-n+2):hover {
        transform: translateX(-15%);
    }
    .standard-item:nth-child(n+3):hover {
        transform: translateX(15%);
    }
    .standard-item:hover .standard-item__image img {
        transform: none;
    }
}

.standard-item__title {
    margin: 0;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--brand-maroon);
    line-height: 1.15;
}

.standard-item__body {
    margin: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--brand-maroon);
    line-height: 1.5;
}

/* Reveal stagger.
   NOTE: cards animate via opacity only, never transform — `.standard-item`
   already owns its transform (translateX(50%) for row-2 brick offset +
   translateY(-8px) on hover). Layering a reveal transform would clobber
   either the brick offset or the hover lift. */
[data-reveal] .about-standards__title {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms ease 0ms, transform 700ms ease 0ms;
}
[data-reveal] .standard-item {
    opacity: 0;
    /* Two-property transition: opacity for reveal, transform for hover/brick.
       Per-card nth-child rules set the delay tuple in matching order so the
       hover transform stays instant (0ms) while the reveal staggers. */
    transition: opacity 700ms ease, transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-reveal] .standard-item:nth-child(1)   { transition-delay: 120ms, 0ms; }
[data-reveal] .standard-item:nth-child(2)   { transition-delay: 200ms, 0ms; }
[data-reveal] .standard-item:nth-child(3)   { transition-delay: 280ms, 0ms; }
[data-reveal] .standard-item:nth-child(4)   { transition-delay: 360ms, 0ms; }

[data-reveal].is-visible .about-standards__title {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal].is-visible .standard-item {
    opacity: 1;
}

@media (max-width: 1100px) {
    .about-standards__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* SEAMLESS_BG_TEST: MAC version (>=1440px) — own layout, distinct from the
   tighter desktop/laptop base. Card text pushed right off the images; rows
   lifted up so the spread doesn't overflow the slide bottom.
   Row 1 (Purity, Hygiene) up 40px; Row 2 (Food Safety, Quality) up 60px.
   Transforms re-declare translateX (brick) since transform isn't additive;
   hover keeps the lift + an extra -8px raise. */
@media (min-width: 1440px) {
    /* Section padding trimmed at bottom so the lifted row 2 doesn't get
       clipped on smaller mac viewports (1440×900 with chrome/dock ≈ 700vh). */
    .about-slide--standards {
        padding-bottom: 60px;
    }
    .about-standards__grid {
        /* row-gap reduced 96→48 so row 2 sits higher and clears the section. */
        row-gap: 48px;
    }
    .standard-item__card {
        padding-left: 104px;
    }
    .standard-item:nth-child(-n+2) {
        transform: translateX(-6%) translateY(-40px);
    }
    /* Bottom row lifted further (was −60 → −80) to give clearance from
       the section's bottom edge. */
    .standard-item:nth-child(n+3) {
        transform: translateX(6%) translateY(-80px);
    }
    .standard-item:nth-child(-n+2):hover {
        transform: translateX(-6%) translateY(-48px);
    }
    .standard-item:nth-child(n+3):hover {
        transform: translateX(6%) translateY(-88px);
    }
}

@media (max-width: 700px) {
    .about-slide--standards {
        /* Base .about-slide is height:100vh + overflow:hidden — fine for the
           single-screen slides, but 4 stacked standard cards exceed one screen
           on mobile, so the 4th got clipped. Let this slide grow with content
           and scroll instead. */
        height: auto;
        min-height: 100svh;
        overflow: visible;
        padding: clamp(70px, 14svh, 96px) clamp(16px, 5vw, 24px) clamp(40px, 8svh, 60px);
    }
    .about-standards__title {
        font-size: clamp(30px, 9vw, 42px);
        margin-bottom: clamp(28px, 8vw, 44px);
        gap: 8px;
    }

    /* Kill the desktop brick-stagger offset. Base CSS shifts cards 1-2 by
       translateX(-6%) and cards 3-4 by translateX(+6%) for the wide 2-col
       layout. In the stacked 1-col mobile layout (set at ≤1100px) that +6%
       pushed cards 3 & 4 off the right edge — card 3 spilled, card 4 hidden. */
    .standard-item,
    .standard-item:nth-child(-n+2),
    .standard-item:nth-child(n+3),
    .standard-item:hover,
    .standard-item:nth-child(-n+2):hover,
    .standard-item:nth-child(n+3):hover {
        transform: none;
    }

    .standard-item {
        grid-template-columns: clamp(96px, 28vw, 128px) 1fr;
        max-width: none;
    }
    .standard-item__image {
        width: clamp(96px, 28vw, 128px);
    }
    .standard-item__card {
        padding: clamp(14px, 4vw, 22px) clamp(16px, 4.5vw, 24px)
                 clamp(14px, 4vw, 22px) clamp(26px, 7vw, 36px);
        margin-left: clamp(-22px, -5vw, -16px);
        gap: clamp(6px, 2vw, 12px);
    }
    .standard-item__title {
        font-size: clamp(18px, 5.2vw, 22px);
    }
    .standard-item__body {
        font-size: clamp(13px, 3.6vw, 15px);
    }
}

/* ========================================================================
   ABOUT US — Slide 5 (Our Purpose)
   Single rounded container with photo on top + maroon band beneath holding
   the title and body copy in cream.
   ======================================================================== */
.about-slide--purpose {
    width: 100%;
    min-height: 100vh;
    padding: 80px 80px;
    /* SEAMLESS_BG_TEST: commented to let body bg show through. */
    /* background: var(--brand-cream); */
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-purpose__container {
    width: 100%;
    max-width: 1500px;
    border-radius: 36px;
    overflow: hidden;
    background: #b73354;                 /* falls through behind both children */
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.about-purpose__image {
    width: 100%;
    aspect-ratio: 16 / 6;
    overflow: hidden;
}

.about-purpose__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-purpose__placeholder {
    width: 100%;
    height: 100%;
    background: #d4d4d4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', system-ui, sans-serif;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 14px;
}

.about-purpose__band {
    background: #b73354;
    padding: 60px 80px 70px;
    color: var(--brand-cream);
}

.about-purpose__title {
    margin: 0 0 24px;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-size: var(--fs-heading);
    font-weight: 700;
    color: var(--brand-cream);
    line-height: 1;
}

.about-purpose__body {
    margin: 0;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: var(--fs-subtext);
    font-weight: 400;
    color: var(--brand-cream);
    line-height: 1.45;
    max-width: 1280px;
}

/* Reveal stagger */
[data-reveal] :where(.about-purpose__container, .about-purpose__title, .about-purpose__body) {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms ease, transform 700ms ease;
}
[data-reveal] .about-purpose__container { transition-delay: 0ms; }
[data-reveal] .about-purpose__title     { transition-delay: 180ms; }
[data-reveal] .about-purpose__body      { transition-delay: 300ms; }

[data-reveal].is-visible :where(.about-purpose__container, .about-purpose__title, .about-purpose__body) {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .about-slide--purpose {
        padding: 40px 20px;
    }
    .about-purpose__container {
        border-radius: 24px;
    }
    .about-purpose__image {
        aspect-ratio: 4 / 3;
    }
    .about-purpose__band {
        padding: 36px 28px 44px;
    }
    .about-purpose__title {
        font-size: 36px;
    }
    .about-purpose__body {
        font-size: 18px;
    }
}

/* ========================================================================
   ABOUT US — Mac-only paper-bg for slides 2 (Vision), 4 (Standards), 5
   (Purpose). Placed at the very end of the file so it wins over each
   slide's own base rule, which sets background to flat cream.
   Non-mac viewports stay on the flat cream bg.
   ======================================================================== */
/* SEAMLESS_BG_TEST: about-us mac paper-bg commented to let body bg show through. */
/*
@media (min-width: 1440px) {
    .about-slide--vision,
    .about-slide--standards,
    .about-slide--purpose {
        background: url('images/about-us/mac/paper-bg.png') center / cover no-repeat;
    }
}
*/

/* Mac (>=1440px) — late override so it beats the base .reviews-title /
   .reviews-grid rules that appear earlier in this file. Home slide 10
   (Words that matter): lift heading + U-cards up. */
@media (min-width: 1440px) {
    /* Floor at 76px = mac header (~66px) + 10px breathing room. On taller
       viewports the 6% wins; on shorter mac windows the floor keeps the title
       below the fixed header instead of clipped behind it. */
    .reviews-title {
        top: max(76px, 6%);
    }
    .reviews-grid {
        top: 45%;
    }
}

/* ========================================================================
   SEAMLESS_BG_TEST: SHORT-VIEWPORT (height-aware) fixes.
   Real 1366×768 / 1280×720 Windows browsers have only ~600–700px USABLE
   height after tabs+address bar+taskbar. Sections are height:100vh and the
   titles are absolutely positioned near the top with the 57px --fs-heading,
   so on a short viewport they collide with the content below (client bug:
   hero title over products, news caption over headlines, benefits title
   behind the cards). This block shrinks the heading scale and repositions
   the three colliding titles. Keyed on HEIGHT (not device/width) because the
   same overlap happens on any short viewport. Mac (~900px tall) is unaffected.
   Placed last in the file so it wins the cascade.
   ======================================================================== */
@media (max-height: 800px) {
    :root {
        /* Designer-specified small-screen scale. */
        --fs-heading: 45px;
        --fs-subtext: 24px;
        --fs-body:    18px;
    }

    /* Slide 1 hero — sit higher so the title clears the product sticker */
    .hero-slide__content--top-center { top: 6%; }

    /* Section 7 news — caption higher so it clears the clipping headlines */
    .hero-slide__content--top-caption { top: 4%; }

    /* Section 9 benefits — split title (up) and card grid (down) so they
       can't collide in the shorter section. */
    .benefits-title { top: 5%; }
    .benefits-grid  { bottom: 12%; }
}

/* Extra squeeze for very short viewports (e.g. 1280×720 after chrome ≈ 560px),
   where the designer's full 45px would still overflow. */
@media (max-height: 620px) {
    :root {
        --fs-heading: 38px;
        --fs-subtext: 22px;
    }
    .benefits-title { top: 3%; }
    .benefits-grid  { bottom: 8%; }
}

/* ========================================================================
   SEAMLESS_BG_TEST: MAC (≥1440) — additional client fixes.
   PLACED AFTER the (max-height:800) + (max-height:620) blocks so it wins
   the cascade on mac laptops where chrome+dock reduce usable height ≤800.
   Without this ordering, the height-based rules above would override mac.
   ======================================================================== */
@media (min-width: 1440px) {
    /* Homepage slide 1 — "Choose Pure. Choose Anandiitaa." + EXPLORE MORE.
       Drop the heading + button by 40px so they clear the fixed 58px header
       on mac laptops. (Button moves with heading: its margin-top is relative.) */
    .hero-slide__content--top-center { top: calc(9% + 40px); }

    /* Product variant packets (jaggery + sugar) — shrink so the hover lift
       (translateY −12px) doesn't push the packet top past the slide edge on
       shorter mac viewports. Base clamp was (520, 60vh, 700). */
    .variant-card__image { height: clamp(440px, 50vh, 560px); }

    /* Homepage slide 9 — the 4 pink benefit cards were sinking to
       bottom:12% (from the max-height:800 rule above) on mac laptops where
       usable height ≤800. Lift them up: 22% base + 60px = consistently higher
       across any mac height. */
    .benefits-grid { bottom: calc(22% + 120px); }
}

/* ========================================================================
   SEAMLESS_BG_TEST: 1366 TIER (1281–1439px) device-specific layout fixes.
   Sits on top of the height-aware font scaling. Scoped to width so the 1280
   tier (handled separately) and mac (≥1440) are untouched. Placed last so it
   wins the cascade for the properties it overrides.
   ======================================================================== */
@media (min-width: 1281px) and (max-width: 1439px) {
    /* Slide 1 hero — the full-size header (~58px) was eating "Choose Pure" at the
       old top:6%. Mirror the 1280 fix: shrink the header (+ logo) and drop the
       title clear of it. ~610px viewport here leaves more room than 1280. */
    .site-header { padding: 8px clamp(16px, 3vw, 44px); }
    .logo img    { height: 26px; }
    .hero-slide__content--top-center { top: 10%; }

    /* Slide 1 title — shrink it (Option 1) so the 2-line headline fits cleanly
       between the header and the packets instead of clipping under the header.
       Scoped to top-center = slide 1 only; other slides keep the global scale. */
    .hero-slide__content--top-center h2 {
        font-size: 36px;
        margin-bottom: 10px;
    }

    /* EXPLORE MORE — smaller + tight under the (now smaller) title, off the packets. */
    .hero-slide__content--top-center .btn {
        padding: 9px 24px;
        font-size: 0.74rem;
        margin-top: 0;
    }

    /* Slide 6 — standards title. Base rule is top:calc(14% - 100px) (mac tuning),
       which goes NEGATIVE on the short 1366 viewport and clips "The" at the top
       edge. Bring it down to a safe positive offset. */
    .standards-title { top: 7%; }

    /* Slide 9 — benefits. Lift the 4 pink cards further up (≈+90px more; 22% → 37%). */
    .benefits-grid { bottom: 37%; }

    /* Slide 8 product grid — packets overflow the card top (max-height 135%); on the
       short 1366 viewport the hover lift pushes the top-row packets (Desi Jaggery
       Powder, Bold Grain Sugar) off the slide edge. Shrink the cards a touch +
       soften the hover so they stay in. */
    .products-grid { width: 86%; max-width: 1140px; }
    .product-card:hover .product-card__image { transform: translateY(-6px) scale(1.03); }

    /* Slide 10 — reviews. "Words that matter" title up but with a hard floor
       so it clears the fixed 58px header on REAL Windows short viewports
       (~625px usable height). max() picks the larger value: stays at
       calc(14% - 78px) on tall viewports, snaps to 78px when the calc would
       go behind the header. */
    /* Floor raised 33→56 to clear the 1366-tier header (~42px) + breathing
       room. Preserves the +45-up visual on taller viewports (where calc wins);
       short Windows viewports snap to 56px so the title sits below the header. */
    .reviews-title { top: max(56px, calc(14% - 123px)); }

    /* Slide 7 — "Choose Pure, Choose Anandiitaa" (bottom-center caption). Drop it
       ~20px so the i-dots stop overlapping the newspaper graphic above. */
    .hero-slide__content--bottom-center { bottom: calc(12% - 70px); }

    /* Slide 10 — reviews. Grid pushed down 56→60% and card image shortened
       (aspect 3/1 → 4/1) so the title has more clearance above the grid.
       Confirmed via Playwright: at 1366×625 the title bottom was overlapping
       grid top by 10px; these changes give it ~50px headroom instead. */
    .reviews-grid {
        top: 60%;
        transform: translate(-50%, -50%);
        margin-top: 0;
        gap: 36px;
    }
    /* EXPLICIT height (not aspect-ratio) — the flex layout was overriding
       aspect-ratio and stretching the image to fill the row.
       Uses clamp() so the image scales with viewport height: 220px floor on
       the shortest 1366×625 viewport (still big enough to show the photo
       properly), 35vh in the middle, 320px ceiling for big monitors.
       Math-verified: 1366×625 gives 220px image → card 403 → grid_top 174,
       title_bottom 105 → 69px clearance. No overlap at any realistic height. */
    .review-card__image     { aspect-ratio: auto; height: clamp(250px, 37vh, 340px); }
    .review-card__image img { height: clamp(250px, 37vh, 340px); }
    .review-card__body      { padding: 16px 22px; gap: 12px; }

    /* ----------------------------------------------------------------------
       SEAMLESS_BG_TEST: jaggery-page-only tweaks at 1366 tier (client req).
       Scoped to .product-page--jaggery so home + sugar are untouched.
       ---------------------------------------------------------------------- */

    /* (1) Hero "100% Natural" seal — drop further (−130 → −90, ~40px lower)
       per client feedback "place a lil below". Must override the reveal/is-
       visible transforms too (higher specificity), or the seal snaps back to
       the base −200px once the scroll-reveal marks it visible. */
    .product-page--jaggery .natural-seal {
        transform: translateY(calc(-50% - 90px));
    }
    .product-page--jaggery [data-reveal] .natural-seal {
        transform: translateY(calc(-50% - 90px)) scale(0.85) rotate(-8deg);
    }
    .product-page--jaggery [data-reveal].is-visible .natural-seal {
        transform: translateY(calc(-50% - 90px)) scale(1) rotate(0deg);
    }

    /* Jaggery hero title — at 1366 tier the packet composite extends up into
       the top: 96px zone, partially covering the "ANANDIITAA Jaggery"
       wordmark + serif word. Push title up to top:50 so it sits cleanly in
       the cream zone above the packets. Header at this tier is ~42px tall
       (the `.site-header` padding is shrunk at line 3457), so a 50px top
       leaves an 8px gap below header bottom. */
    .product-page--jaggery .product-hero__title { top: 50px; }

    /* (2) Variant cards (Jaggery Powder / Block) — packet overflows the section
       top (overflow:hidden clips it). Card is 500px, centered (top ≈110px at
       720); packet bottom:148px + height:520px overshoots the top. Shrink the
       packet so it sits inside the slide. */
    .product-page--jaggery .variant-card__image { height: 420px; }

    /* Reviews slide — "Words that matter" title down +40px (calc(14% - 38px)),
       FLOORED at 78px so it always clears the fixed header on short Windows
       viewports (~625px usable). max() picks the larger of the two.
       NOTE: the card-size shrink (max-width:760 / aspect 3.4:1) was removed so
       the product review cards match the homepage — they now use the same global
       1366 rules (max-width:1100, gap:36, aspect 3/1) as home + sugar. */
    .product-page--jaggery .reviews-title { top: max(56px, calc(14% - 83px)); }

    /* ----------------------------------------------------------------------
       SEAMLESS_BG_TEST: About-us slide 4 ("The Anandiitaa Standards") — the 4
       cards inherit the oversized BASE values at this tier (max-width 780,
       64×72 padding, 210px images, 160px title margin) → huge on the ~625–720
       short 1366 viewport. Scale them down ~30% (still comfortably readable).
       Selectors are about-page-only, so the media query is enough scoping.
       ---------------------------------------------------------------------- */
    .about-standards__title { margin-bottom: 56px; }
    .about-standards__grid  { max-width: 980px; column-gap: 40px; row-gap: 24px; }
    .standard-item          { grid-template-columns: 130px 1fr; max-width: 560px; }
    .standard-item__image   { width: 150px; }
    /* padding-left bumped 34→70 so the title/body clear the overlapping photo
       (card sits under the image via margin-left:-24). Right padding trimmed to
       30 to keep text width. Left alignment unchanged. */
    .standard-item__card    { padding: 28px 30px 28px 70px; margin-left: -24px; }
    .standard-item__title   { font-size: 21px; }
    .standard-item__body    { font-size: 14px; }

    /* About-us slide 2 (Vision) — client-supplied bg image (1366-sized).
       Mac (≥1440) keeps vision-new.png; this fills 1366 only. */
    .about-slide--vision {
        background: url('images/about-us/d1366/vision-bg.png') center / cover no-repeat;
    }

    /* About-us slide 5 (Purpose) — the rounded container is taller than the
       short 1366 viewport, so the slide clips its top+bottom and the 36px
       corners look sharp/chipped. Scale the container ~20% smaller (narrower +
       lighter band/fonts) and trim the slide's 80px vertical padding so it sits
       fully inside. Border-radius itself untouched. */
    .about-slide--purpose     { padding: 48px 80px; }
    .about-purpose__container { max-width: 960px; }
    .about-purpose__band      { padding: 48px 64px 56px; }
    .about-purpose__title     { font-size: 36px; margin-bottom: 18px; }
    .about-purpose__body      { font-size: 19px; }

    /* ----------------------------------------------------------------------
       SEAMLESS_BG_TEST: products/sugar page tweaks at 1366 (client req).
       Mirror the jaggery fixes; scoped to .product-page--sugar.
       ---------------------------------------------------------------------- */

    /* (1) Hero "100% Natural" seal — same drop as jaggery (−200px → −130px),
       overriding the reveal/is-visible transforms too (else it snaps back). */
    .product-page--sugar .natural-seal {
        transform: translateY(calc(-50% - 130px));
    }
    .product-page--sugar [data-reveal] .natural-seal {
        transform: translateY(calc(-50% - 130px)) scale(0.85) rotate(-8deg);
    }
    .product-page--sugar [data-reveal].is-visible .natural-seal {
        transform: translateY(calc(-50% - 130px)) scale(1) rotate(0deg);
    }

    /* (3) Variant packets (Bold/Fine Grain) — match jaggery's 420px so they
       stop clipping at the card top. */
    .product-page--sugar .variant-card__image { height: 420px; }

    /* (4) Reviews "Words that matter" title down +25 (base calc(14% - 78px)). */
    .product-page--sugar .reviews-title { top: max(56px, calc(14% - 98px)); }

    /* ----------------------------------------------------------------------
       SEAMLESS_BG_TEST: Process timeline (slide 2) — BOTH product pages.
       The pot "lid" (the .process-step__arc dome + the number knob) pokes past
       the short 1366 slide edges (overflow:hidden clips it). Shrink the LID
       only — the image circles keep their current (good) size. .process-step__*
       lives only on product pages, so this hits jaggery + sugar, mac/1280 not. */
    .process-step__arc { border-width: 16px; width: calc(100% + 24px); height: calc(100% + 24px); }
    .process-step--top    .process-step__arc { top: -12px; left: -12px; }
    .process-step--bottom .process-step__arc { bottom: -12px; left: -12px; }
    .process-step--top    .process-step__lid { top: -64px; }
    .process-step--bottom .process-step__lid { bottom: -64px; }
    .process-step__number { width: 92px; height: 60px; }
}

/* ========================================================================
   SEAMLESS_BG_TEST: 1280 TIER (1101–1280px) device-specific layout.
   Viewport is even shorter (~560px after browser chrome) than 1366, and the
   fixed header (~58px) overlays the top of every section. Shrink the header,
   push titles clear of it, lift benefits cards, shrink review cards hard.
   Scoped to width so 1366 + mac are untouched. Placed last → wins cascade.
   ======================================================================== */
@media (min-width: 1101px) and (max-width: 1280px) {
    /* Global 1280 type scale — compact for the ~560px usable viewport.
       Smaller than the designer's 45 (too big at this height); fixes the
       standards title crowding the image (#3) and shrinks the hero title (#1). */
    :root {
        --fs-heading: 30px;
        --fs-subtext: 18px;
        --fs-body:    16px;
    }

    /* #1/#2 Header — shrink so it stops eating the hero title + packet tops. */
    .site-header { padding: 7px clamp(16px, 3vw, 40px); }
    .logo img    { height: 24px; }

    /* #1 Hero "Choose Pure" — smaller font (above) sits just below the header,
       in the strip above the packets. */
    .hero-slide__content--top-center { top: 8%; }

    /* #1b EXPLORE MORE button — shrink + pull up so it stops overlapping packets. */
    .hero-slide__content--top-center .btn {
        padding: 8px 22px;
        font-size: 0.7rem;
        margin-top: 4px;
    }

    /* SEAMLESS_BG_TEST: carousel image-fit hacks (contain + scale(1.2) + side mask)
       removed — new properly-sized 1280×720 assets fill correctly, so the carousel
       returns to the default `cover` + center-bottom behavior. */

    /* #2/#3 Slide 6 standards — clear the header; the smaller heading also keeps
       it off the sugarcane image. */
    .standards-title { top: 10%; }
    .benefits-title  { top: 10%; }

    /* #3 Slide 9 benefits — lift the 4 cards (kept from prior pass). */
    .benefits-grid { bottom: 28%; }

    /* Slide 8 product grid — the packet images overflow the card top (max-height
       135%); on this short viewport the hover lift pushes the top-row packets off
       the slide edge. Shrink the cards a touch + soften the hover so they stay in. */
    .products-grid { width: 84%; max-width: 1080px; }
    .product-card:hover .product-card__image { transform: translateY(-6px) scale(1.03); }

    /* #4 Slide 10 reviews — force much smaller: explicit short image height
       (more forceful than aspect-ratio), narrower grid, tight body, recentered. */
    .reviews-title { top: 9%; }
    .reviews-grid {
        top: 57%;
        transform: translate(-50%, -50%);
        margin-top: 0;
        gap: 24px;
        max-width: 900px;
    }
    .review-card__image     { aspect-ratio: auto; height: 182px; }
    .review-card__image img { height: 182px; }
    .review-card__body      { padding: 16px 20px; gap: 12px; }

    /* About-us slide 2 (Vision) — client-supplied bg image (1280-sized). */
    .about-slide--vision {
        background: url('images/about-us/d1280/vision-bg.png') center / cover no-repeat;
    }

    /* Products landing — force the two choice cards (Jaggery / Sugar) side by
       side instead of stacked, and shrink them so the pair fits the short
       1280×720 viewport. Explicit 2-col (base is auto-fit). */
    .products-landing       { padding: 56px 5% 48px; gap: 32px; }
    .products-landing__grid { grid-template-columns: 1fr 1fr; gap: 32px; max-width: 940px; }
    .category-card          { min-height: 340px; }
    .category-card__media   { min-height: 180px; padding: 32px 32px 12px; }
    .category-card__media img { max-height: 200px; }
    .category-card__body    { padding: 20px 32px 28px; }

    /* ----------------------------------------------------------------------
       SEAMLESS_BG_TEST: product pages (jaggery + sugar) tweaks at 1280.
       UNSCOPED — .natural-seal / .process-step__* / .variant-card__image exist
       only on the two product pages, so these hit both equally (client req:
       same changes on jaggery + sugar).
       ---------------------------------------------------------------------- */

    /* (1) Hero "100% Natural" seal — drop −200px → −130px (~70px down; matches
       jaggery 1366). Override reveal/is-visible too (later + equal specificity
       than the global rules → wins at this width). */
    .natural-seal {
        transform: translateY(calc(-50% - 130px));
    }
    [data-reveal] .natural-seal {
        transform: translateY(calc(-50% - 130px)) scale(0.85) rotate(-8deg);
    }
    [data-reveal].is-visible .natural-seal {
        transform: translateY(calc(-50% - 130px)) scale(1) rotate(0deg);
    }

    /* (2) Process timeline — shrink the pot "lid" (arc dome + number knob) so it
       stops clipping on the short 1280 viewport. Image circles untouched. */
    .process-step__arc { border-width: 14px; width: calc(100% + 20px); height: calc(100% + 20px); }
    .process-step--top    .process-step__arc { top: -10px; left: -10px; }
    .process-step--bottom .process-step__arc { bottom: -10px; left: -10px; }
    .process-step--top    .process-step__lid { top: -56px; }
    .process-step--bottom .process-step__lid { bottom: -56px; }
    .process-step__number { width: 84px; height: 54px; }

    /* (3) Variant packets (powder/block, bold/fine grain) — smaller so they
       don't shoot past the short 1280 slide top (420 clips here; 360 fits). */
    .variant-card__image { height: 360px; }
}

/* ========================================================================
   SUGAR PAGE — recipe-card overlay link + "Read recipe" CTA
   Only the cookies card is linked for now. The overlay <a> covers the
   entire card so clicks anywhere navigate to /recipes/home-made-cookies.
   ======================================================================== */

.recipe-card { position: relative; }

.recipe-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 14px;
    text-indent: -9999px;
    overflow: hidden;
}

.recipe-card--linked { cursor: pointer; transition: transform 200ms ease; }
.recipe-card--linked:hover { transform: translateY(-3px); }
.recipe-card--linked:hover .recipe-card__media img { transform: scale(1.03); }
.recipe-card__media img { transition: transform 350ms ease; }
.recipe-card--linked:hover .recipe-card__cta { color: var(--brand-maroon); transform: translateX(3px); }
.recipe-card__overlay:focus-visible { outline: 2px solid var(--brand-maroon); outline-offset: 4px; }

.recipe-card__cta {
    display: inline-block;
    margin-left: 6px;
    font-weight: 600;
    color: var(--brand-maroon);
    white-space: nowrap;
    transition: color 200ms ease, transform 200ms ease;
}

/* ========================================================================
   RECIPE DETAIL PAGE (page-recipes-cookies.php and siblings)
   Slide-based: each .recipe-detail-slide is min-height:100svh on the brand
   gradient. Content uses flex centering rather than absolute positioning —
   the recipe page is greenfield, so it's not bound to the legacy slide
   architecture. (See context.md §2/§3.)
   ======================================================================== */

.recipe-detail {
    background: linear-gradient(135deg, #feebc7 0%, #fcf9f3 55%, #f7e3bf 100%);
}

.recipe-detail-slide {
    min-height: 100svh;
    box-sizing: border-box;
    padding: clamp(72px, 10vh, 120px) clamp(24px, 6vw, 96px) clamp(56px, 8vh, 96px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #1f1208;
    position: relative;
}

/* Soft inter-slide separator so the gradient still feels like one surface,
   but each slide has a slight rhythm boundary. */
.recipe-detail-slide + .recipe-detail-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(120px, 18vw, 220px);
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #b89c70 50%, transparent);
}

.recipe-detail__eyebrow {
    margin: 0 0 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(12px, 0.9vw, 14px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-maroon);
    font-weight: 600;
}

.recipe-detail__title {
    margin: 0 0 28px;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading, 700);
    font-size: clamp(36px, 5.2vw, 72px);
    line-height: 1.05;
    color: #2a1608;
}

.recipe-detail__section-title {
    margin: 0 0 36px;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading, 700);
    font-size: clamp(32px, 4.4vw, 60px);
    line-height: 1.1;
    color: #2a1608;
}

/* ---- Slide 1: intro layout (image left, copy right) ---- */
.recipe-intro {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    max-width: 1280px;
    width: 100%;
    text-align: left;
}
.recipe-intro__media {
    aspect-ratio: 4 / 3;
    max-height: clamp(280px, 62svh, 560px);
    border-radius: 24px;
    overflow: hidden;
    background: #e9d9b8;
    box-shadow: 0 24px 60px -28px rgba(67, 34, 12, 0.45);
}
.recipe-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.recipe-intro__copy .recipe-detail__eyebrow,
.recipe-intro__copy .recipe-detail__title { text-align: left; }
.recipe-detail__intro-body {
    margin: 0 0 32px;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.65;
    color: #3a2412;
}

.recipe-detail__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    border-top: 1.5px solid #b89c70;
    border-bottom: 1.5px solid #b89c70;
    padding: 18px 0;
    max-width: 460px;
}
.recipe-detail__meta li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.recipe-detail__meta-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7a5a30;
    font-weight: 600;
}
.recipe-detail__meta-value {
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-size: clamp(16px, 1.2vw, 20px);
    color: #2a1608;
}

/* ---- Slide 2: ingredients ---- */
.recipe-ingredients {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px 48px;
    max-width: 840px;
    width: 100%;
    text-align: left;
}
.recipe-ingredients__item {
    position: relative;
    padding: 14px 14px 14px 36px;
    border-bottom: 1px dashed #b89c70;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(15px, 1.1vw, 18px);
    color: #2a1608;
}
.recipe-ingredients__item::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand-maroon);
    transform: translateY(-50%);
    box-shadow: 0 0 0 4px rgba(107, 15, 26, 0.12);
}

/* ---- Slides 3–8: method steps ----
   2-column grid: copy on one side, image on the other. Odd steps render copy
   on the left (default DOM order). Even steps swap via --reverse modifier on
   the slide. Image height is clamped against viewport height so the slide
   never overflows on short (1280×560) or ultrawide viewports. */
.recipe-detail-slide--step { text-align: left; }
.recipe-step {
    max-width: 1180px;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
.recipe-detail-slide--reverse .recipe-step__copy { order: 2; }
.recipe-detail-slide--reverse .recipe-step__media { order: 1; }

.recipe-step__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}
.recipe-step__number {
    display: block;
    margin: 0;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-size: clamp(56px, 7vw, 104px);
    line-height: 0.9;
    color: var(--brand-maroon);
    letter-spacing: -0.02em;
}
.recipe-step__title {
    margin: 0;
    font-family: 'Appetite Pro', 'Georgia', serif;
    font-weight: var(--fw-heading, 700);
    font-size: clamp(26px, 3.2vw, 44px);
    line-height: 1.15;
    color: #2a1608;
}
.recipe-step__body {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(15px, 1.1vw, 19px);
    line-height: 1.65;
    color: #3a2412;
}
.recipe-step__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: clamp(260px, 58svh, 520px);
    border-radius: 24px;
    overflow: hidden;
    background: #efe0c2;
    box-shadow: 0 24px 60px -28px rgba(67, 34, 12, 0.4);
}
.recipe-step__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.recipe-step__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #b89c70;
    background: repeating-linear-gradient(
        135deg,
        #efe0c2 0 18px,
        #ead6ad 18px 36px
    );
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.recipe-step__placeholder svg { width: 56px; height: 56px; opacity: 0.75; }

/* Photo-backed recipes (Gulab Jamun / Gajar Ka Halwa / Choco Lava Cake) have
   real step photos that vary in aspect (~5:4 to 4:3). Drop the base fixed
   4/3 + object-fit:cover crop AND the tablet/mobile max-height cap so each
   media box takes its image's own natural shape — the whole photo shows,
   responsive per image, on every device (mac / desktop / tablet / mobile).

   The `--reverse` variant is listed explicitly: the tablet block
   (701–1100px) has a 2-class `.recipe-detail-slide--reverse .recipe-step__media`
   max-height rule, so we need the 3-class form here to win on reverse steps. */
.recipe-detail--gulab-jamun    .recipe-step__media,
.recipe-detail--gulab-jamun    .recipe-detail-slide--reverse .recipe-step__media,
.recipe-detail--gajar-ka-halwa .recipe-step__media,
.recipe-detail--gajar-ka-halwa .recipe-detail-slide--reverse .recipe-step__media,
.recipe-detail--choco-lava-cake .recipe-step__media,
.recipe-detail--choco-lava-cake .recipe-detail-slide--reverse .recipe-step__media {
    aspect-ratio: auto;
    max-height: none;
    height: auto;
}
.recipe-detail--gulab-jamun    .recipe-step__media img,
.recipe-detail--gulab-jamun    .recipe-detail-slide--reverse .recipe-step__media img,
.recipe-detail--gajar-ka-halwa .recipe-step__media img,
.recipe-detail--gajar-ka-halwa .recipe-detail-slide--reverse .recipe-step__media img,
.recipe-detail--choco-lava-cake .recipe-step__media img,
.recipe-detail--choco-lava-cake .recipe-detail-slide--reverse .recipe-step__media img {
    height: auto;
    object-fit: contain;
}

/* ---- Slide 9: tip ---- */
.recipe-tip { max-width: 720px; }
.recipe-tip__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand-maroon);
    color: #feebc7;
    margin-bottom: 22px;
}
.recipe-tip__badge svg { width: 32px; height: 32px; }
.recipe-tip__body {
    margin: 0 0 36px;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.65;
    color: #3a2412;
}
.recipe-detail__back {
    display: inline-block;
    padding: 14px 28px;
    background: var(--brand-maroon);
    color: #feebc7;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: background 200ms ease, transform 200ms ease;
}
.recipe-detail__back:hover {
    background: var(--brand-maroon-dark);
    transform: translateY(-2px);
}

/* ---- Tablet / mobile collapse ---- */
@media (max-width: 900px) {
    .recipe-intro {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .recipe-intro__copy .recipe-detail__eyebrow,
    .recipe-intro__copy .recipe-detail__title { text-align: center; }
    .recipe-detail__meta { margin: 0 auto; }
    .recipe-detail__meta li { text-align: center; align-items: center; }
    .recipe-ingredients { grid-template-columns: 1fr; gap: 0; }

    /* Step slides: always stack image above copy on narrow viewports,
       regardless of --reverse (reverse only swaps left/right on wide). */
    .recipe-detail-slide--step { text-align: center; }
    .recipe-step {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .recipe-detail-slide--reverse .recipe-step__copy,
    .recipe-step__copy { order: 2; align-items: center; }
    .recipe-detail-slide--reverse .recipe-step__media,
    .recipe-step__media { order: 1; max-height: clamp(220px, 38svh, 360px); }
}

/* ========================================================================
   PLAN B — TABLET PORTRAIT (701px–1100px)
   First responsive-pass for tablet portrait (e.g. iPad 1024×1366). Pairs with
   the new tablet bg images under /images/home/tablet/. Scoped to homepage
   sections that have multi-column layouts tuned for landscape desktop and
   collapse poorly at this narrower width.
   Per context.md §3: this is partial Plan B. Full plan replaces all absolute
   positioning with flex/grid flow. For now, targeted overrides to make tablet
   portrait usable without breaking landscape desktop tiers.
   ======================================================================== */
@media (min-width: 701px) and (max-width: 1100px) {

    /* ------------------------------------------------------------------
       Homepage carousel slides 1–5 — fluid type so headings don't oversize
       on the narrower portrait viewport. Heading position stays at top-center;
       only the size shrinks. Button uses inherited margin (the slide 1 -135px
       pull stays — it's scoped to :first-child and works at this size too). */
    .hero-slide__content--top-center {
        max-width: 86%;
    }
    .hero-slide__content--top-center h2 {
        font-size: clamp(32px, 5.4vw, 52px);
    }
    .hero-slide__content--top-center .btn {
        padding: 12px 28px;
        font-size: 0.78rem;
    }
    /* Features list (slides 2–5) — tighter so it doesn't run past the packets
       on portrait. Margin-top reduced from the 110px desktop base. */
    .hero-features {
        margin-top: clamp(48px, 8vh, 88px);
        gap: 16px;
    }
    .hero-features li {
        font-size: clamp(14px, 1.5vw, 17px);
    }

    /* ------------------------------------------------------------------
       Slide 6 — Standards. 4-col grid → 2x2. Vertical dashed dividers need
       to be re-scoped: in 4-col, only the last col had no right border. In
       2-col, the 2nd col of each row (nth-child(2n)) has no right border. */
    .standards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 0;
        bottom: 8%;
    }
    .standards-col {
        padding: 0 22px;
        border-right: 2px dashed var(--brand-maroon);
    }
    .standards-col:nth-child(2n) {
        border-right: none;
        padding-right: 0;
    }
    .standards-col:nth-child(2n+1) {
        padding-left: 0;
    }
    .standards-title {
        top: 6%;
    }

    /* ------------------------------------------------------------------
       Slide 8 — Products grid. Already 2x2, but the cards are tight at this
       width — slight padding + image trim so the packet doesn't overflow. */
    .products-grid {
        width: 88%;
        max-width: 940px;
        gap: 24px;
    }
    .product-card {
        padding: 28px 24px 20px;
        border-radius: 40px;
    }
    .product-card__title {
        font-size: clamp(20px, 2.4vw, 26px);
    }
    .product-card__image {
        max-width: 42%;
    }

    /* ------------------------------------------------------------------
       Slide 9 — Benefits. 4-col → 2x2 grid. */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        bottom: 18%;
        width: 86%;
        max-width: 720px;
    }
    .benefits-title {
        top: 12%;
        font-size: clamp(32px, 4.2vw, 48px);
    }

    /* ------------------------------------------------------------------
       Slide 10 — Reviews. 2-col stays but tightened for portrait. */
    .reviews-grid {
        max-width: 760px;
        gap: 28px;
    }
    .reviews-title {
        font-size: clamp(32px, 4.2vw, 48px);
    }

    /* ------------------------------------------------------------------
       Slide 11 — Social. Pills wrap naturally; just tighten title. */
    .social-slide__heading {
        font-size: clamp(36px, 5vw, 56px);
    }
    .social-slide__subtitle {
        font-size: clamp(15px, 1.6vw, 18px);
    }

    /* ------------------------------------------------------------------
       News slide (7) — already responsive via 100svh-based rules. No change
       needed; the bg confine + clamp top buffer adapts on tablet too. */
}

/* ========================================================================
   PLAN B — MOBILE (≤700px, fluid, no fixed widths)
   FLUID by design: every size uses clamp() against svw/vw so it scales for
   ANY phone width — iPhone SE (375) through Pixel Pro / iPhone Pro Max (430+)
   continuously, not stepwise. NO fixed px widths inside this block.
   Phone bg images live under /images/home/phone/ and /phone/sections/.
   ======================================================================== */
@media (max-width: 700px) {

    /* ------------------------------------------------------------------
       Global header — shrink so it doesn't eat the hero content. */
    .site-header { padding: 8px clamp(12px, 4vw, 18px); }
    .logo img    { height: clamp(22px, 5vw, 28px); }

    /* Hamburger button — visible on mobile only. Sits on the right edge
       of the navbar, replaces the horizontal nav links. */
    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 220; /* above drawer so its X-state stays clickable */
    }

    /* Animated hamburger → X when open. */
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }

    /* Slide-in drawer. Hidden off-screen by default (translateX 100%).
       When .is-open is added by JS, slides in from the right edge. */
    .main-navigation {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(82vw, 320px);
        height: 100svh;
        background: var(--brand-cream);
        padding: clamp(60px, 12svh, 90px) clamp(20px, 6vw, 32px) clamp(24px, 5vh, 40px);
        display: flex;
        flex-direction: column;
        gap: clamp(4px, 1.2vh, 10px);
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 200;
        box-shadow: -20px 0 60px rgba(40, 18, 8, 0.2);
        font-size: clamp(15px, 4vw, 18px);
        letter-spacing: 0.06em;
    }
    .main-navigation.is-open {
        transform: translateX(0);
    }
    .main-navigation a {
        margin-left: 0;
        padding: clamp(12px, 2vh, 16px) 0;
        border-bottom: 1px solid rgba(107, 15, 26, 0.12);
        color: var(--brand-maroon);
        font-weight: 600;
    }
    .main-navigation a:hover,
    .main-navigation a[aria-current="page"] {
        color: var(--brand-maroon-dark);
    }

    /* Body scroll lock while drawer is open. */
    body.nav-locked {
        overflow: hidden;
    }

    /* Use svh (small viewport — always visible area) instead of vh so iOS
       Safari's URL bar doesn't push hero content below the visible fold. */
    .hero-slide,
    .page-section {
        min-height: 100svh;
    }

    /* CRITICAL: legacy `@media (max-width: 767px)` block sets
       `.hero-carousel { height: 70vh; min-height: 480px }` which makes
       the carousel container SHORTER than the slide inside it. Slide is
       100svh but carousel is 70vh → bottom 30vh of slide (and the bg
       packet image) gets clipped by carousel's overflow:hidden. Force
       carousel to match slide height. */
    .hero-carousel {
        height: 100svh !important;
        min-height: 100svh !important;
    }

    /* ------------------------------------------------------------------
       Carousel hero slides 1–5 content block. SCOPED TO .hero-track ONLY
       so this doesn't match standalone .page-section.hero-slide elements
       (which have their own --top-caption / --bottom-center captions that
       should NOT be forced to top:60px).
       Slide 1 has `position: 'top-center'` (gets --top-center modifier).
       Slides 2–5 get the BARE .hero-slide__content (no modifier) which
       inherits `top: 50%; translateY(-50%)` from base. This rule targets
       BOTH so all carousel slides anchor to the TOP. */
    .hero-track .hero-slide .hero-slide__content,
    .hero-track .hero-slide .hero-slide__content--top-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        top: clamp(50px, 9svh, 80px) !important;
        bottom: auto !important;
        right: auto !important;
        height: auto !important;
        max-width: 92% !important;
        width: 92% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
    }
    .hero-track .hero-slide .hero-slide__content h2,
    .hero-track .hero-slide .hero-slide__content--top-center h2 {
        font-size: clamp(22px, 6.5vw, 36px) !important;
        line-height: 1.15 !important;
        margin-bottom: clamp(8px, 2vh, 16px) !important;
        text-align: center !important;
    }
    .hero-track .hero-slide .hero-slide__content .btn,
    .hero-track .hero-slide .hero-slide__content--top-center .btn {
        padding: clamp(7px, 2.2vw, 10px) clamp(16px, 4.5vw, 24px) !important;
        font-size: clamp(10px, 2.6vw, 13px) !important;
        letter-spacing: 0.08em;
        margin-top: clamp(2px, 0.8vh, 8px) !important;
    }

    /* ------------------------------------------------------------------
       PRODUCT PAGES — hero (products/jaggery + products/sugar).
       Layout: title top-center, 100% Natural seal on LEFT (sized prominent
       but mobile-fluid), features rail on RIGHT (shrunk for phone width).
       All sizes via clamp so they scale across iPhone SE → Pro Max. */
    .product-hero__title {
        top: clamp(60px, 11svh, 95px) !important;
        /* Nudged left from 50% → 45% so the title doesn't sit dead-center
           over the seal/features axis. Translation still -50% of element. */
        left: 45% !important;
        font-size: clamp(20px, 5.2vw, 28px) !important;
        gap: clamp(6px, 2vw, 12px) !important;
        z-index: 10 !important;
    }
    .product-hero__title img {
        height: clamp(20px, 5vw, 28px) !important;
    }
    /* 100% Natural seal — LEFT side, bigger than my previous tiny version.
       Desktop pulled it via transform translateY — reset that for mobile
       and pin it left-side with a fluid clamp size. */
    .natural-seal {
        width: clamp(95px, 26vw, 140px) !important;
        top: clamp(130px, 22svh, 200px) !important;
        left: 3% !important;
        right: auto !important;
        transform: none !important;
        z-index: 6 !important;
    }
    [data-reveal] .natural-seal,
    [data-reveal].is-visible .natural-seal {
        transform: none !important;
    }
    /* Features rail — RIGHT side, vertical column, shrunk text + icons.
       Top pulled further up (clamp(95, 15svh, 140) — was 115/18svh/165)
       and right pushed flush against edge (right: 0). Tightens the column
       so the third feature clears the packet image entirely. */
    .product-features {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: clamp(95px, 15svh, 140px) !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        width: clamp(120px, 38vw, 170px) !important;
        max-width: 38vw;
        gap: clamp(8px, 2vh, 14px) !important;
        z-index: 6;
        margin: 0;
        padding: 0 clamp(2px, 1vw, 6px) 0 0;
        list-style: none;
    }
    .product-features li {
        font-size: clamp(10px, 2.6vw, 12px) !important;
        gap: clamp(4px, 1vh, 8px) !important;
        line-height: 1.2;
    }
    .product-features__icon {
        width: clamp(34px, 9vw, 44px) !important;
        height: clamp(34px, 9vw, 44px) !important;
    }
    .product-features__icon svg {
        width: clamp(18px, 5vw, 24px) !important;
        height: clamp(18px, 5vw, 24px) !important;
    }
    /* Slide 1 first-child btn pull — reset to 0 on mobile (desktop -160
       would shove the button above the heading at this scale). */
    .hero-slide:first-child .hero-slide__content--top-center .btn {
        margin-top: clamp(4px, 1.5vh, 12px);
    }
    .hero-slide:first-child .hero-slide__content--top-center h2 {
        margin-bottom: clamp(8px, 2vh, 16px);
    }
    /* Features list (slides 2–5) — LEFT-aligned. All icons line up on
       same x position regardless of text width. Previously each li was
       `width: max-content` + parent `align-items: center` → each item
       centered individually, causing the staggered look the user flagged.
       Now: align-items flex-start, each li full width, icon+text both
       left-anchored at a fixed indent from the column edge. */
    .hero-features {
        margin-top: clamp(12px, 2.5svh, 22px) !important;
        gap: clamp(6px, 1.6vh, 12px);
        align-items: flex-start !important;
        width: 100%;
        padding: 0 0 0 clamp(20px, 8vw, 50px);
        list-style: none;
    }
    .hero-features li {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(8px, 3vw, 14px);
        font-size: clamp(12px, 3.2vw, 15px);
        width: 100%;
        max-width: 100%;
        text-align: left;
    }
    .hero-features .icon {
        width: clamp(24px, 6vw, 32px);
        height: clamp(24px, 6vw, 32px);
        flex-shrink: 0;
    }

    /* Carousel arrows + dots — smaller, tucked. Display:flex overrides the
       legacy `@media (max-width: 767px)` block above which set `display: none`
       on the arrows for old-style mobile (we want them visible now). */
    .hero-carousel__arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: clamp(32px, 9vw, 42px);
        height: clamp(32px, 9vw, 42px);
    }
    .hero-carousel__arrow--prev { left: clamp(8px, 3vw, 16px); }
    .hero-carousel__arrow--next { right: clamp(8px, 3vw, 16px); }
    .hero-carousel__arrow svg {
        width: clamp(16px, 4.5vw, 22px);
        height: clamp(16px, 4.5vw, 22px);
    }
    .hero-carousel__dots {
        bottom: clamp(10px, 3svh, 20px);
        gap: clamp(6px, 2vw, 10px);
    }
    .hero-carousel__dot {
        width: clamp(8px, 2vw, 10px);
        height: clamp(8px, 2vw, 10px);
    }

    /* ------------------------------------------------------------------
       Slide 6 — Standards. KEY: drop absolute positioning entirely on
       mobile. Section becomes a flex column; title + grid flow naturally
       anchored at TOP (justify-content: flex-start). The bg sticker's
       busy bottom (sugar bowl + cane) lives in the empty space below. */
    .page-section--standards,
    .hero-slide[data-type="standards"],
    section:has(> .standards-grid) {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: clamp(16px, 3vh, 28px);
        padding: clamp(28px, 6svh, 60px) 6% clamp(40px, 8svh, 80px);
        min-height: 100svh;
        height: auto;
    }
    .standards-title {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        text-align: center;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(2px, 0.6vh, 6px);
    }
    .standards-title__small {
        font-size: clamp(20px, 6vw, 30px);
        line-height: 1;
    }
    .standards-title__wordmark {
        width: clamp(150px, 52vw, 240px);
        height: auto;
        margin: 0;
    }
    .standards-grid {
        position: static;
        transform: none;
        left: auto;
        right: auto;
        bottom: auto;
        width: auto;
        max-width: none;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(16px, 3vh, 26px) clamp(10px, 3vw, 18px);
    }
    .standards-col {
        padding: 0;
        border-right: none;
        text-align: center;
    }
    .standards-col__icon {
        width: clamp(32px, 8vw, 44px);
        height: clamp(32px, 8vw, 44px);
        margin: 0 auto clamp(6px, 1.2vh, 10px);
    }
    .standards-col__icon svg {
        width: clamp(18px, 5vw, 24px);
        height: clamp(18px, 5vw, 24px);
    }
    .standards-col__title {
        font-size: clamp(12px, 3.4vw, 15px);
        margin-bottom: clamp(4px, 0.8vh, 8px);
        line-height: 1.2;
    }
    .standards-col__body {
        font-size: clamp(11px, 2.8vw, 13px);
        line-height: 1.35;
    }

    /* ------------------------------------------------------------------
       Slide 7 — News. Force both captions centered horizontally with
       constrained width (mobile-only) — the base h2 font (--fs-heading
       at 45–57px) made the text overflow both edges, looked as if it was
       anchored to the left. .page-section--news scope wins specificity. */
    .page-section--news {
        --news-bg-top: clamp(110px, 18svh, 160px);
    }
    .page-section--news .hero-slide__bg {
        height: calc(100svh - var(--news-bg-top) - clamp(90px, 14svh, 140px));
    }
    .page-section--news .hero-slide__content--top-caption,
    .page-section--news .hero-slide__content--bottom-center {
        width: 86%;
        max-width: 86%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        text-align: center;
    }
    .page-section--news .hero-slide__content--top-caption {
        top: clamp(60px, 11svh, 110px);
    }
    .page-section--news .hero-slide__content--bottom-center {
        top: calc(100svh - clamp(80px, 13svh, 130px));
    }
    .page-section--news .hero-slide__content--top-caption h2,
    .page-section--news .hero-slide__content--bottom-center h2 {
        font-size: clamp(18px, 5vw, 26px);
        line-height: 1.2;
        margin: 0;
        padding: 0;
        word-wrap: break-word;
    }

    /* ------------------------------------------------------------------
       Slide 8 — Products grid. Mobile rule: ALL 4 cards must fit in
       viewport simultaneously, auto-resizing as needed.
       - Section locked to 100svh (visible viewport).
       - Section becomes flex column, grid stretches to fill available
         height minus padding.
       - Grid rows: repeat(4, minmax(0, 1fr)) → each row gets exactly
         (viewport - padding - gaps)/4 of height. Cards auto-shrink to fit.
       - Card uses 2-col grid (copy left, packet right). Packet image with
         object-fit: contain scales to card height naturally. */
    /* IMPORTANT: section's actual class is `.page-section--products-grid`
       (from front-page.php `type: 'products-grid'`), NOT --products.
       Selector mismatch was making all my products mobile rules NO-OP. */
    .page-section--products-grid {
        /* Was height:100svh forcing all 4 cards to split one screen → each
           card got ~163px but its content needs ~178px, so the AVAILABLE
           value + arrow and the packet bottoms were clipped by overflow:hidden.
           Cramming 4 content-rich cards into one phone screen can't scale to
           small phones, so let the section grow with content and scroll. */
        height: auto;
        min-height: 100svh;
        overflow: visible;
        display: flex;
        flex-direction: column;
        /* Top padding covers the fixed header (~46–60px) + breathing room.
           Without it, top of section sits BEHIND the fixed header and the
           first card's top edge clips. */
        padding: clamp(64px, 11svh, 90px) 0 clamp(20px, 4svh, 40px);
    }
    .products-grid {
        /* Base CSS floats this absolute + centered (top/left:50% + translate),
           which takes it OUT of flex flow → flex:1 was ignored, the grid kept
           its auto (content) height, and the centered overflow clipped card 1
           (top) and card 4 (bottom). Reset to a normal in-flow flex child so
           flex:1 bounds it and minmax(0,1fr) shrinks the 4 rows to fit. */
        position: static;
        top: auto;
        left: auto;
        transform: none;
        grid-template-columns: 1fr;
        /* Content-height rows (was repeat(4, minmax(0,1fr)) which forced each
           card too short). Section grows + scrolls instead of clipping. */
        grid-template-rows: repeat(4, auto);
        gap: clamp(12px, 2vh, 20px);
        width: 92%;
        margin: 0 auto;
        flex: 0 0 auto;
        min-height: 0;
    }
    .product-card {
        aspect-ratio: auto;
        height: auto;
        min-height: clamp(150px, 22vh, 190px);
        border-radius: clamp(20px, 6vw, 34px);
        padding: clamp(10px, 3vw, 16px) clamp(12px, 3.5vw, 18px);
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        column-gap: clamp(6px, 1.6vw, 12px);
        align-items: stretch;
        overflow: hidden;
    }
    .product-card__body {
        max-width: none;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: clamp(6px, 1.5vh, 12px);
    }
    .product-card__top {
        display: flex;
        flex-direction: column;
        gap: clamp(4px, 1vh, 8px);
    }
    /* Bottom of card: sizes stack above the arrow. User-requested grouping
       — AVAILABLE IN block sits up, arrow circle directly below it. */
    .product-card__bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(6px, 1.5vh, 10px);
        margin-top: auto;
    }
    .product-card__title {
        font-size: clamp(16px, 4.6vw, 20px);
        margin-bottom: 0;
        line-height: 1.1;
    }
    .product-card__desc {
        font-size: clamp(11px, 3vw, 13px);
        line-height: 1.3;
    }
    .product-card__sizes {
        margin-bottom: 0;
        gap: clamp(2px, 0.5vh, 4px);
    }
    .product-card__sizes-label { font-size: clamp(8px, 2.4vw, 10px); }
    .product-card__sizes-value { font-size: clamp(11px, 3vw, 13px); }
    .product-card__arrow {
        width: clamp(32px, 8.5vw, 42px);
        height: clamp(32px, 8.5vw, 42px);
        flex-shrink: 0;
    }
    .product-card__arrow svg {
        width: clamp(14px, 4vw, 18px);
        height: clamp(14px, 4vw, 18px);
    }
    /* Image: drop the absolute floating-packet behavior on mobile. Inline
       it into the card's grid right column so it sits inside the card. */
    .product-card__image {
        position: static;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
    }
    /* Hover lift is desktop-feel; nuke transform/scale on mobile. */
    .product-card:hover .product-card__image,
    .product-card:hover .product-card__arrow {
        transform: none;
    }

    /* ------------------------------------------------------------------
       Slide 9 — Benefits. Same flex flow as Standards but pushed UP so
       the new jaggery bg photo at the bottom is fully visible. Cards
       shrunk significantly so they don't dominate the viewport.
       Bg image forced edge-to-edge with explicit overrides (overflow
       hidden on section so absolute bg can't be clipped by anything else,
       inset: 0 + 100% width/height on bg img). */
    .page-section--benefits,
    section:has(> .benefits-grid) {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: clamp(10px, 2vh, 18px);
        padding: clamp(20px, 4svh, 40px) 6% clamp(28px, 6svh, 50px);
        min-height: 100svh;
        height: auto;
        overflow: hidden;
    }
    .page-section--benefits .hero-slide__bg,
    .page-section--benefits .hero-slide__bg img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
    }
    /* The source 9-jaggery.jpg has near-white edges baked into the image
       (cream space around the dish). At mobile viewport widths cover-fit
       still shows those white edges as side gaps. Zoom the image so the
       white edges push off-screen, leaving only the dish visible. */
    .page-section--benefits .hero-slide__bg img {
        transform: scale(1.5);
        transform-origin: center center;
    }
    .benefits-title {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        text-align: center;
        width: auto;
        font-size: clamp(22px, 6vw, 30px);
        margin: 0;
    }
    .benefits-grid {
        position: static;
        transform: none;
        left: auto;
        right: auto;
        bottom: auto;
        width: auto;
        max-width: none;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(8px, 1.8vh, 14px) clamp(8px, 2.4vw, 14px);
    }
    .benefit-card {
        padding: clamp(12px, 3.2vw, 16px) clamp(10px, 3vw, 14px);
        border-radius: clamp(12px, 3.5vw, 16px);
        min-height: 0;
    }
    /* Icon: take it OUT of absolute positioning on mobile (desktop has
       `position: absolute; top: -32px` to float above the card edge —
       on a 2x2 mobile grid this reaches into the card above). Static
       flow at top of card body, no overflow, no negative space wasted. */
    .benefit-card__icon {
        position: static;
        top: auto;
        left: auto;
        width: clamp(28px, 7vw, 38px);
        height: clamp(28px, 7vw, 38px);
        margin: 0 0 clamp(6px, 1.4vh, 12px);
        box-shadow: none; /* desktop has 8px cream "fried-egg" ring — noisy on the smaller mobile card */
    }
    /* Drop the hover-scale on mobile too (touch devices don't hover). */
    .benefit-card:hover .benefit-card__icon {
        transform: none;
        box-shadow: none;
    }
    .benefit-card__icon svg {
        width: clamp(16px, 4vw, 22px);
        height: clamp(16px, 4vw, 22px);
    }
    .benefit-card__title {
        font-size: clamp(12px, 3.4vw, 15px);
        line-height: 1.15;
        margin-bottom: clamp(4px, 0.8vh, 8px);
    }
    .benefit-card__body  {
        font-size: clamp(10px, 2.8vw, 12px);
        line-height: 1.3;
    }

    /* ------------------------------------------------------------------
       Slide 10 — Reviews. Same flex-flow restructure as Standards/Benefits:
       drop absolute positioning, let section grow to fit content, anchor
       title at top, 1-col card stack. Cards shrunk so both fit cleanly. */
    .page-section--reviews,
    section:has(> .reviews-grid) {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: clamp(16px, 3vh, 28px);
        padding: clamp(28px, 6svh, 60px) 6% clamp(40px, 8svh, 80px);
        min-height: 100svh;
        height: auto;
    }
    .reviews-title {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        text-align: center;
        width: auto;
        white-space: normal;
        font-size: clamp(22px, 6vw, 32px);
        margin: 0;
    }
    .reviews-grid {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        max-width: none;
        margin: 0;
        grid-template-columns: 1fr;
        gap: clamp(16px, 3vh, 24px);
    }
    .review-card {
        flex-direction: column;
    }
    .review-card__image {
        width: 100%;
        aspect-ratio: 16 / 10;
        height: auto;
        max-height: clamp(160px, 28svh, 240px);
    }
    .review-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .review-card__body {
        padding: clamp(12px, 3.4vw, 18px);
        gap: clamp(6px, 1.5vh, 10px);
    }
    .review-card__name  { font-size: clamp(13px, 3.6vw, 16px); }
    .review-card__role  { font-size: clamp(11px, 3vw, 13px); }
    .review-card__quote { font-size: clamp(12px, 3.4vw, 14px); }

    /* ------------------------------------------------------------------
       Slide 11 — Social CTA. Wordmark + heading + pills, all centered.
       Wordmark sizes by WIDTH with height:auto so the natural aspect
       ratio is preserved (the desktop base rule fixes width AND my old
       mobile override also forced height, which stretched the letters
       vertically — letters looked compressed). */
    .social-slide__wordmark {
        width: clamp(180px, 55vw, 260px);
        height: auto;
        margin: 0 0 clamp(16px, 3vh, 24px);
    }
    .social-slide__heading {
        font-size: clamp(26px, 7vw, 38px);
        line-height: 1.1;
    }
    .social-slide__subtitle {
        font-size: clamp(13px, 3.6vw, 16px);
        padding: 0 clamp(12px, 4vw, 24px);
    }
    .social-slide__pills {
        flex-wrap: wrap;
        gap: clamp(8px, 2vw, 14px);
        justify-content: center;
    }
    .social-pill {
        padding: clamp(8px, 2.5vw, 12px) clamp(14px, 4vw, 20px);
        font-size: clamp(12px, 3.4vw, 15px);
    }

    /* ------------------------------------------------------------------
       Footer. Stack columns vertically.
       Switch from grid → flex column so the base `.site-footer__col--nav
       { grid-column: 3 }` and `--info { grid-column: 4 }` rules can't
       push children into off-screen auto-generated columns. */
    .site-footer {
        padding: clamp(28px, 6vh, 48px) 6% clamp(20px, 4vh, 32px);
    }
    .site-footer__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(18px, 3.5vh, 30px);
        max-width: 100%;
    }
    .site-footer__col {
        grid-column: auto;
        width: 100%;
        text-align: center;
        margin: 0;
    }
    .site-footer__col--brand {
        align-items: center;
    }
    /* Logo is an empty <a> with -webkit-mask: url(wordmark) — needs BOTH
       width AND height explicitly (no <img> to derive proportions from).
       Mask uses `contain` so the wordmark scales inside whatever box we
       give it. Center the mask horizontally on mobile. */
    .site-footer__logo {
        display: block;
        margin: 0 auto;
        width: clamp(160px, 50vw, 240px);
        height: clamp(28px, 8vw, 40px);
        -webkit-mask-position: center;
                mask-position: center;
    }
    .site-footer__brand-base {
        align-items: center;
        text-align: center;
        margin-top: clamp(12px, 2vh, 20px);
    }
    .site-footer__legal {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 8px;
        font-size: clamp(11px, 3vw, 13px);
    }
    .site-footer__col--nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(6px, 1.5vh, 12px);
    }
    .site-footer__col--nav a {
        font-size: clamp(13px, 3.4vw, 15px);
    }
    .site-footer__col--info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(12px, 2vh, 18px);
    }
    .site-footer__info-block h4 {
        font-size: clamp(12px, 3vw, 14px);
        margin-bottom: 4px;
    }
    .site-footer__info-block p {
        font-size: clamp(11px, 3vw, 13px);
        line-height: 1.4;
    }
    .site-footer__copy {
        /* Base CSS has position: absolute; right: 6%; bottom: 28px (sticks
           copyright to bottom-right on desktop). Reset to static so it
           flows naturally at the END of the flex column on mobile. */
        position: static;
        right: auto;
        bottom: auto;
        font-size: clamp(10px, 2.8vw, 12px);
        text-align: center;
        margin-top: clamp(14px, 2.5vh, 22px);
    }
    /* Brand-base has desktop margin-top: 90px which leaves huge gap on
       mobile. Override to a sensible mobile spacing. */
    .site-footer__brand-base {
        margin-top: clamp(8px, 1.5vh, 16px);
    }

    /* ------------------------------------------------------------------
       Bg image fit override: on portrait phone viewports, force the hero
       bg images (now phone-tier 375x667 portrait) to anchor center-center
       and cover. The desktop `object-position: center bottom` would crop
       the top off our portrait phone composites. */
    .hero-track .hero-slide__bg img,
    .page-section .hero-slide__bg img {
        object-position: center center;
    }

    /* ------------------------------------------------------------------
       PROCESS SLIDE (jaggery/sugar slide 2 — "Process Defines Purity")

       Desktop is a 5-column horizontal timeline with absolute-positioned
       circles (alternating up/down), absolute text, and a diagonal dashed
       SVG connector tuned for that horizontal geometry. Cramming 5 columns
       of 220px+ circles into a 375px phone makes everything overlap.

       Mobile: drop ALL absolute positioning. Vertical flow — each step is
       one row (circle + text side-by-side), alternating side for rhythm.
       Content-driven height, no fixed grid height. SVG connector hidden
       (its % coords only make sense across a horizontal row). */
    .product-slide--process {
        height: auto;
        min-height: 100svh;
        justify-content: flex-start;
        padding: clamp(70px, 14svh, 96px) clamp(16px, 5vw, 26px) clamp(40px, 8svh, 60px);
    }

    .process-title {
        margin-bottom: clamp(22px, 6vw, 40px);
    }

    /* Grid → single vertical column of rows. Kill the fixed height so the
       slide grows with its content. */
    .process-timeline {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: clamp(24px, 7vw, 40px);
        max-width: 460px;
        margin: 0 auto;
    }

    /* Connector lines were drawn for the horizontal alternating layout. */
    .process-connectors { display: none; }

    /* Each step: circle + text in a row. Alternate side per up/down variant
       so it reads as a zig-zag down the page instead of a flat list. */
    .process-step {
        height: auto;
        display: flex;
        align-items: center;
        gap: clamp(14px, 4.5vw, 24px);
    }
    .process-step--bottom { flex-direction: row-reverse; }

    /* Circle: static, shrunk, no longer h-centered. flex-shrink:0 so text
       can't squeeze it. */
    .process-step__circle,
    .process-step--top    .process-step__circle,
    .process-step--bottom .process-step__circle {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: clamp(104px, 30vw, 150px);
        flex: 0 0 auto;
        border-width: 4px;
    }
    /* Base hover used translateX(-50%) scale() — no longer centered, so a
       bare scale keeps the lift without yanking the circle sideways. */
    .process-step__circle:hover { transform: scale(1.04); }

    /* Coffee-ring arc: scale border + overflow to the smaller circle. Offset
       must be half the size growth so the ring stays concentric. */
    .process-step__arc {
        border-width: clamp(7px, 2.4vw, 11px);
        width:  calc(100% + clamp(12px, 4vw, 18px));
        height: calc(100% + clamp(12px, 4vw, 18px));
    }
    .process-step--top .process-step__arc {
        top:  calc(-1 * clamp(6px, 2vw, 9px));
        left: calc(-1 * clamp(6px, 2vw, 9px));
    }
    .process-step--bottom .process-step__arc {
        bottom: calc(-1 * clamp(6px, 2vw, 9px));
        left:   calc(-1 * clamp(6px, 2vw, 9px));
    }

    /* Number knob: park it over the TOP edge of every circle (uniform), not
       the desktop ±90px float. Positioned relative to the now-relative circle. */
    .process-step__lid,
    .process-step--top    .process-step__lid,
    .process-step--bottom .process-step__lid {
        top:    calc(-1 * clamp(13px, 4vw, 19px));
        bottom: auto;
    }
    .process-step__number {
        width:  clamp(48px, 14vw, 64px);
        height: clamp(30px, 9vw, 40px);
        border-radius: 14px;
        font-size: clamp(16px, 5vw, 22px);
    }

    /* Text: static, fills remaining row width, left-aligned. */
    .process-step__text,
    .process-step--top    .process-step__text,
    .process-step--bottom .process-step__text {
        position: static;
        top: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: auto;
        flex: 1 1 auto;
        text-align: left;
        font-size: clamp(13px, 3.6vw, 15px);
        line-height: 1.42;
    }

    /* ------------------------------------------------------------------
       BENEFITS ACCORDION (jaggery/sugar slide 3 — "Health Benefits")

       Desktop .benefit-content is a 2-col grid: image minmax(280px,360px)
       + body 1fr, with 94px left padding to clear the number column. On a
       375px phone the image column alone (≥280px + 94px pad) overflows the
       row → image shoved right, body squeezed to ~0 width (invisible).

       Mobile: single column. Image on top, body below. Drop the number-
       column padding so content uses the full width. */
    .product-slide--benefits {
        min-height: 100svh;
        padding: clamp(70px, 14svh, 96px) clamp(16px, 5vw, 24px) clamp(40px, 8svh, 60px);
    }
    .benefits-title {
        margin-bottom: clamp(20px, 5vw, 32px);
        padding-bottom: clamp(14px, 4vw, 22px);
    }

    /* Tighter summary row: number / title / caret. auto-width number column
       so it doesn't reserve a fat 72px gutter on a narrow screen. */
    .benefit-summary {
        grid-template-columns: auto 1fr auto;
        gap: clamp(12px, 4vw, 20px);
        padding: clamp(16px, 4.5vw, 24px) 4px;
    }

    .benefit-content {
        grid-template-columns: 1fr;
        gap: clamp(12px, 4vw, 18px);
        align-items: stretch;
        padding: 0 4px clamp(20px, 6vw, 28px);
    }
    .benefit-content__body {
        max-width: none;
        font-size: clamp(13px, 3.7vw, 15px);
        line-height: 1.5;
    }

    /* ------------------------------------------------------------------
       VARIANTS SLIDE (jaggery/sugar slide 4 — Powder + Block cards)

       Desktop: 2-col grid (120px gap) where each card has an ABSOLUTE packet
       image overhanging (height clamp(520px,60vh,700px)) + ABSOLUTE body
       anchored bottom-left (right:38%, title white-space:nowrap). On a 375px
       phone both cards + their oversized images cram and overflow — image
       spills sideways, "AVAILABLE IN" + title get clipped.

       Mobile: single column. Each card flows top→bottom: packet image (static,
       shrunk, centered) then body (static, centered). Title may wrap. */
    .product-slide--variants {
        min-height: 100svh;
        align-items: stretch;
        padding: clamp(70px, 14svh, 96px) clamp(16px, 5vw, 24px) clamp(40px, 8svh, 60px);
    }
    .variants-grid {
        grid-template-columns: 1fr;
        gap: clamp(28px, 8vw, 44px);
        max-width: 420px;
        margin: 0 auto;
    }
    .variant-card {
        min-height: 0;
        padding: clamp(22px, 6vw, 34px);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    /* Image: out of absolute flow, scaled to the card, centered on top. */
    .variant-card__image {
        position: static;
        right: auto;
        bottom: auto;
        height: clamp(220px, 54vw, 300px);
        max-width: 82%;
        margin: 0 auto clamp(12px, 4vw, 20px);
    }
    .variant-card:hover .variant-card__image { transform: translateY(-6px); }

    /* Body: static, full width, centered. */
    .variant-card__body {
        position: static;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
    }
    .variant-card__avail {
        align-items: center;
        margin-bottom: clamp(10px, 3vw, 16px);
    }
    .variant-card__avail-label { font-size: clamp(11px, 3vw, 13px); }
    .variant-card__avail-value { font-size: clamp(18px, 5.5vw, 24px); }
    .variant-card__title {
        white-space: normal;          /* allow wrap; desktop forces single line */
        font-size: clamp(22px, 7vw, 30px);
    }

    /* ------------------------------------------------------------------
       ABOUT US — Vision slide bg (mobile only).

       Desktop sets the vision photo as a section background per tier
       (mac vision-new.png / 1366 + 1280 vision-bg.png). Below 1440px there
       was no image — just cream. Add the 1.png composite as the phone bg.
       (Mission slide gets 2.png via a phone <source> in page-about.php.) */
    .about-slide--vision {
        background: url('images/about-us/phone/vision.png') center / cover no-repeat;
    }
}