/* ============================================================
   ZOUMI — production stylesheet
   ============================================================ */

/* Arabic — SAUDI (project typeface) */
@font-face{font-family:Saudi;src:url("../assets/fonts/SaudiWeb-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Saudi;src:url("../assets/fonts/SaudiWeb-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

/* English — Source Serif 4 Variable (approved Minion alternative), latin subset, opsz pinned */
@font-face{font-family:"Source Serif 4";src:url("../assets/fonts/SourceSerif4-var-latin.woff2") format("woff2-variations");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}

:root{
    --deep:#06231e;--green:#0a4a3f;--lime:#c7dc42;--ink:#0e2c26;
    --paper:#f4f1e8;--cream:#fffdf8;--muted:#5d6f69;
    --line:rgba(14,44,38,.16);--line-soft:rgba(14,44,38,.09);
    --tone:#3F9A12;--tone-deep:#296710;
    --radius-pill:999px;--radius-circle:50%;
    --pad:max(5vw,calc((100vw - 1360px)/2));
    --wide:min(90vw,1360px);
    --header:5rem;
    --ease:cubic-bezier(.16,1,.3,1);
    --ar:Saudi,"Noto Naskh Arabic",Tahoma,sans-serif;
    --en:"Source Serif 4",Charter,Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 1.5rem)}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0}
a,button{touch-action:manipulation}
svg{display:block}
:focus-visible{outline:3px solid var(--deep);outline-offset:3px;box-shadow:0 0 0 3px var(--lime);border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:1000;inset-block-start:.7rem;inset-inline-start:.7rem;padding:.75rem 1.1rem;background:var(--cream);color:var(--ink);font-weight:600;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* ---------- Typography: tuned separately per script ---------- */
[dir=ltr] body{font-family:var(--en);font-size:1.0625rem;line-height:1.62;font-weight:400}
[dir=rtl] body{font-family:var(--ar);font-size:1.0625rem;line-height:1.9;font-weight:400}
h1,h2,h3{text-wrap:balance}
[dir=ltr] :is(h1,h2,h3){font-weight:600;letter-spacing:-.021em;line-height:1.05}
[dir=ltr] h1{font-size:clamp(3rem,5.6vw,5.1rem)}
[dir=ltr] h2{font-size:clamp(2.4rem,4.2vw,3.75rem)}
[dir=ltr] h3{font-size:clamp(1.5rem,2.3vw,2.15rem);line-height:1.14}
[dir=rtl] :is(h1,h2,h3){font-weight:700;letter-spacing:0;line-height:1.36}
[dir=rtl] h1{font-size:clamp(2.55rem,4.8vw,4.1rem);line-height:1.32}
[dir=rtl] h2{font-size:clamp(2.2rem,3.7vw,3.2rem)}
[dir=rtl] h3{font-size:clamp(1.45rem,2.1vw,1.95rem);line-height:1.42}

.eyebrow{display:flex;align-items:center;gap:.65rem;color:var(--lime);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
[dir=rtl] .eyebrow{letter-spacing:0;text-transform:none;font-size:.92rem}
.eyebrow span{font:600 .68rem/1 var(--en);letter-spacing:.14em;opacity:.85}
.eyebrow--ink{color:var(--tone-deep)}

/* ---------- Buttons ---------- */
.button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
    min-height:3.3rem;padding-inline:1.6rem;overflow:hidden;cursor:pointer;
    background:var(--green);color:var(--cream);font-weight:600;font-size:1rem;border-radius:var(--radius-pill)}
[dir=rtl] .button{font-weight:700}
.button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lime);border-radius:inherit;
    transform:translateY(101%);transition:transform .42s var(--ease)}
.button:is(:hover,:focus-visible)::before{transform:none}
.button:is(:hover,:focus-visible){color:var(--deep)}
.button svg{width:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .35s var(--ease)}
.button:hover svg{transform:translateX(.22rem)}
[dir=rtl] .button svg{transform:scaleX(-1)}
[dir=rtl] .button:hover svg{transform:translateX(-.22rem) scaleX(-1)}
.button--lime{background:var(--lime);color:var(--deep)}
.button--lime::before{background:var(--cream)}
.button--ghost{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.button--ghost::before{background:#fff}
.button--ghost:is(:hover,:focus-visible){color:var(--deep)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset-block-start:0;inset-inline:0;z-index:100;height:var(--header);color:#fff;transition:transform .4s var(--ease),color .35s var(--ease)}
.site-header.is-scrolled{color:var(--ink)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--paper) 82%,transparent);
    backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid transparent;opacity:0;transition:opacity .3s}
.site-header.is-scrolled::before{opacity:1;border-bottom-color:var(--line-soft)}
.site-header.menu-active,.site-header.menu-active.is-scrolled{color:#fff}
.site-header.menu-active::before{opacity:0}
/* over the video the chrome reads on white until the page scrolls */
.site-header:not(.is-scrolled) .brand__word span{color:var(--lime)}
.site-header:not(.is-scrolled) .brand__tag,
.site-header:not(.is-scrolled) .desktop-nav a,
.site-header:not(.is-scrolled) .language-link{color:rgba(255,255,255,.8)}
.site-header:not(.is-scrolled) .desktop-nav a:is(:hover,.is-active){color:#fff}
.site-header:not(.is-scrolled) .desktop-nav a::after{background:var(--lime)}
.site-header.is-hidden{transform:translateY(-115%)}
.site-header__inner{width:var(--wide);height:100%;margin-inline:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem}
.brand{justify-self:start;display:grid;gap:.28rem;line-height:1}
.brand__word{font:700 1.6rem/1 var(--en);letter-spacing:-.03em}
.brand__word span{color:var(--tone-deep)}
.brand__tag{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-family:var(--en);font-weight:600}
[dir=rtl] .brand__tag{letter-spacing:0;text-transform:none;font-family:var(--ar);font-size:.76rem}
.desktop-nav{display:flex;gap:clamp(1.4rem,2.6vw,2.9rem)}
.desktop-nav a{position:relative;display:flex;align-items:center;min-height:2.75rem;font-size:1.02rem;font-weight:500;color:var(--muted);transition:color .25s}
[dir=rtl] .desktop-nav a{font-weight:400}
.desktop-nav a::after{content:"";position:absolute;inset-block-end:.4rem;inset-inline:0;height:1.5px;background:var(--tone-deep);
    transform:scaleX(0);transform-origin:var(--to,left);transition:transform .35s var(--ease)}
[dir=rtl] .desktop-nav a::after{--to:right}
.desktop-nav a:is(:hover,.is-active){color:var(--ink)}
.desktop-nav a:is(:hover,.is-active)::after{transform:scaleX(1)}
.site-header__actions{justify-self:end;display:flex;align-items:center;gap:1rem}
.language-link{display:flex;align-items:center;min-height:2.75rem;font-size:.94rem;color:var(--muted);transition:color .25s}
.language-link:hover{color:var(--ink)}
.shop-link{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.55rem;min-height:2.7rem;padding-inline:1.15rem;
    border:1.5px solid currentColor;border-radius:var(--radius-pill);font-size:.94rem;font-weight:600;overflow:hidden;transition:color .3s,border-color .3s}
[dir=rtl] .shop-link{font-weight:700}
.shop-link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lime);border-radius:inherit;transform:translateY(101%);transition:transform .4s var(--ease)}
.shop-link:is(:hover,:focus-visible)::before{transform:none}
.shop-link:is(:hover,:focus-visible){color:var(--deep);border-color:var(--lime)}
.shop-link svg{width:.95rem;fill:none;stroke:currentColor;stroke-width:1.9;transition:transform .3s var(--ease)}
.shop-link:hover svg{transform:translateX(.18rem)}
[dir=rtl] .shop-link svg{transform:scaleX(-1)}
[dir=rtl] .shop-link:hover svg{transform:translateX(-.18rem) scaleX(-1)}
.menu-toggle{display:none;width:2.9rem;height:2.9rem;padding:.85rem;border:1.5px solid currentColor;border-radius:var(--radius-pill)}
.menu-toggle span{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.menu-toggle span+span{margin-top:.42rem}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(.29rem) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-.29rem) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:90;padding:calc(var(--header) + 2.5rem) 6vw 3rem;background:var(--deep);color:var(--cream);overflow-y:auto}
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:grid;gap:.2rem}
.mobile-menu nav>a:not(.mobile-menu__store){display:flex;align-items:center;gap:1.1rem;min-height:4.4rem;
    border-bottom:1px solid rgba(255,255,255,.13);font-size:clamp(1.4rem,6vw,2rem);font-weight:600}
[dir=rtl] .mobile-menu nav>a:not(.mobile-menu__store){font-weight:700}
.mobile-menu nav>a span{font:600 .7rem/1 var(--en);letter-spacing:.14em;color:var(--lime)}
.mobile-menu__store{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2rem;
    min-height:4rem;padding-inline:1.5rem;border-radius:var(--radius-pill);background:var(--lime);color:var(--deep);font-weight:700;font-size:1.05rem}
.mobile-menu__store span:first-child{display:none}
.mobile-menu__store svg{width:1.15rem;fill:none;stroke:currentColor;stroke-width:2}
[dir=rtl] .mobile-menu__store svg{transform:scaleX(-1)}
.menu-open{overflow:hidden}

/* ---------- Hero: full-bleed video ---------- */
.hero{position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-rows:1fr auto;
    overflow:hidden;color:#fff;background:var(--deep)}
.hero__reel{position:absolute;inset:0;z-index:-1;margin:0}
.hero__video{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(4,20,17,.62) 0%,rgba(4,20,17,.12) 26%,transparent 44%),
      linear-gradient(6deg,rgba(4,20,17,.95) 20%,rgba(4,20,17,.78) 44%,rgba(4,20,17,.34) 66%,transparent 86%),
      linear-gradient(96deg,color-mix(in srgb,var(--green) 58%,transparent) 0%,color-mix(in srgb,var(--green) 14%,transparent) 46%,transparent 70%)}
[dir=rtl] .hero__scrim{background:
      linear-gradient(180deg,rgba(4,20,17,.62) 0%,rgba(4,20,17,.12) 26%,transparent 44%),
      linear-gradient(-6deg,rgba(4,20,17,.95) 20%,rgba(4,20,17,.78) 44%,rgba(4,20,17,.34) 66%,transparent 86%),
      linear-gradient(264deg,color-mix(in srgb,var(--green) 58%,transparent) 0%,color-mix(in srgb,var(--green) 14%,transparent) 46%,transparent 70%)}
.hero__media-controls{position:absolute;z-index:2;inset-block-start:calc(var(--header) + .9rem);inset-inline-end:max(5vw,calc((100vw - 1360px)/2));
    display:flex;align-items:center;gap:.65rem}
.hero__caption{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:var(--radius-pill);
    margin:0;background:rgba(255,255,255,.13);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);
    color:#fff;font-size:.72rem;font-weight:600}
.hero__caption::before{content:"";width:.42rem;height:.42rem;border-radius:var(--radius-circle);background:var(--lime);flex:none}
.hero__toggle{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border-radius:var(--radius-circle);
    background:rgba(255,255,255,.13);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);
    color:#fff;cursor:pointer;transition:background-color .25s}
.hero__toggle:is(:hover,:focus-visible){background:rgba(255,255,255,.24)}
.hero__toggle svg{width:1.05rem;flex:none;fill:currentColor;stroke:none}
.hero__toggle svg[hidden]{display:none}

.hero__grid{position:relative;z-index:1;align-self:end;width:var(--wide);margin-inline:auto;
    padding-block:clamp(2rem,5vh,4rem)}
.hero__copy{min-width:0;max-width:36rem;padding-block-end:clamp(.5rem,2vw,1.5rem)}
.hero h1{margin-block-start:1.15rem;max-width:16ch;text-shadow:0 .1rem 2.2rem rgba(4,20,17,.4)}
[dir=rtl] .hero h1{max-width:18ch}
.hero__actions{margin-block-start:2.2rem;display:flex;flex-direction:column;gap:1.4rem}
.hero__buttons{display:flex;flex-direction:column;gap:.85rem;width:min(100%,18rem)}
.hero__meta{display:flex;align-items:center;gap:.75rem}
.hero__meta b{font:600 3.1rem/.85 var(--en);color:var(--lime)}
.hero__meta span{display:grid;font-size:.9rem;font-weight:600;line-height:1.3;color:#fff}
.hero__meta em{font-style:normal;font-weight:400;font-size:.8rem;color:rgba(255,255,255,.72)}


.hero__cue{position:relative;z-index:1;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:.6rem;
    padding-block-end:1.2rem;color:rgba(255,255,255,.72);font-size:.68rem;letter-spacing:.16em;
    text-transform:uppercase;font-weight:600}
[dir=rtl] .hero__cue{letter-spacing:0;text-transform:none;font-size:.8rem}
.hero__cue em{display:block;width:1.5px;height:2.4rem;background:linear-gradient(180deg,var(--lime),transparent)}

/* ---------- Flavour showcase: one pinned scene, driven by native scroll ---------- */
.showcase{position:relative;isolation:isolate;background:var(--tone-wash);color:var(--ink);
    transition:background-color .32s var(--ease)}

.showcase__track{position:relative}
/* The tall track only exists with JS; without it the scene is a single screen. */
/* --step-vh is the scroll distance per flavour, as a share of the viewport.
   JS reads it and sets the track height, so the count stays in PHP only. */
.showcase{--step-vh:.58}

.showcase__scene{position:sticky;top:0;height:100svh;min-height:34rem;overflow:hidden;
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center;column-gap:clamp(1.5rem,4vw,4rem);
    padding:calc(var(--header) + clamp(1rem,3vh,2.5rem)) var(--pad) clamp(1rem,3vh,2rem);
    touch-action:pan-y;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}
@media(prefers-reduced-motion:reduce){.showcase{--step-vh:.34}}

.showcase__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(90% 70% at 78% 20%,color-mix(in srgb,var(--tone) 16%,transparent) 0%,transparent 64%),
               radial-gradient(85% 58% at 10% 92%,rgba(6,35,30,.07) 0%,transparent 68%)}
[dir=rtl] .showcase__glow{background:radial-gradient(90% 70% at 22% 20%,color-mix(in srgb,var(--tone) 16%,transparent) 0%,transparent 64%),
               radial-gradient(85% 58% at 90% 92%,rgba(6,35,30,.07) 0%,transparent 68%)}

.showcase__numeral{position:absolute;z-index:0;inset-block-start:calc(var(--header) - 1rem);inset-inline-start:.5rem;
    font:600 clamp(9rem,26vw,24rem)/.8 var(--en);color:color-mix(in srgb,var(--tone-deep) 11%,transparent);
    pointer-events:none;user-select:none;letter-spacing:-.04em}

.showcase__product{grid-column:1;position:relative;z-index:2;justify-self:center;
    width:min(100%,52rem);display:grid;place-items:center}
.showcase__product img{width:100%;height:auto;aspect-ratio:1300/880;object-fit:contain;
    max-height:min(56vh,36rem);will-change:opacity,transform;
    filter:drop-shadow(0 1.4rem 1.8rem rgba(4,20,17,.2));-webkit-user-drag:none;user-select:none}

.showcase__panel{grid-column:2;position:relative;z-index:2;align-self:center}
.showcase__count{display:flex;align-items:baseline;gap:.3rem;font:600 .9rem/1 var(--en);
    letter-spacing:.14em;color:color-mix(in srgb,var(--ink) 72%,transparent)}
.showcase__count i{font-style:normal;opacity:.5}
[dir=rtl] .showcase__count{justify-content:flex-end}

.showcase__slot{display:grid}
.showcase__live,.showcase__ghosts{grid-area:1/1;min-width:0}
.showcase__ghosts{display:grid;visibility:hidden;pointer-events:none}
.showcase__ghost{grid-area:1/1}

.showcase__panel h3,.showcase__ghost-name{margin-block-start:.8rem;color:var(--ink);
    font-size:clamp(2.4rem,4.6vw,4.2rem);font-weight:600;letter-spacing:-.021em;line-height:1.04;text-wrap:balance}
[dir=rtl] .showcase__panel h3,[dir=rtl] .showcase__ghost-name{font-size:clamp(2.1rem,3.9vw,3.6rem);font-weight:700;letter-spacing:0;line-height:1.32}
.showcase__tag{margin-block-start:.75rem;font-weight:700;font-size:1.08rem;color:var(--tone-deep)}
.showcase__desc{margin-block-start:.85rem;max-width:36ch;color:var(--muted);font-size:1.02rem;line-height:1.6}
[dir=rtl] .showcase__desc{line-height:1.85}

/* ---------- Story ---------- */
.story{position:relative;isolation:isolate;padding:clamp(5rem,9vw,8.5rem) var(--pad);overflow:clip;
    background:linear-gradient(180deg,var(--paper) 0%,#ece9dc 100%)}
.story::before{content:"03";position:absolute;z-index:-1;inset-block-start:-.07em;inset-inline-end:-.03em;
    font:600 clamp(14rem,31vw,34rem)/.8 var(--en);letter-spacing:-.08em;color:rgba(14,44,38,.035);pointer-events:none}
.story__lead{position:relative;width:var(--wide);margin-inline:auto;display:grid;
    grid-template-columns:minmax(18rem,.78fr) minmax(0,1.22fr);align-items:center;gap:clamp(2.5rem,6vw,6.5rem)}
.story__text{position:relative;z-index:2;min-width:0;padding-block:clamp(1rem,4vw,3.5rem)}
.story h2{margin-block-start:1rem;max-width:14ch;font-size:clamp(2.8rem,5vw,5rem)}
[dir=rtl] .story h2{font-size:clamp(2.5rem,4.4vw,4.3rem);line-height:1.3}
.story__body{margin-block-start:1.6rem;max-width:43ch;color:var(--muted);font-size:clamp(1rem,1.3vw,1.12rem)}
[dir=rtl] .story__body{line-height:1.95}

.story__visual{position:relative;min-width:0;display:grid;grid-template-rows:auto auto;gap:clamp(.8rem,1.4vw,1.1rem)}
.story__stamp{position:absolute;z-index:5;inset-block-start:clamp(.9rem,1.8vw,1.35rem);inset-inline-end:clamp(.9rem,1.8vw,1.35rem);
    padding:.58rem .82rem;border:1px solid rgba(255,255,255,.5);border-radius:var(--radius-pill);
    color:#fff;background:rgba(6,35,30,.54);-webkit-backdrop-filter:blur(.55rem);backdrop-filter:blur(.55rem);
    font:600 .65rem/1 var(--en);letter-spacing:.14em;box-shadow:0 .35rem 1.2rem rgba(6,35,30,.12)}
.story__stage{position:relative;z-index:1;grid-row:1;aspect-ratio:777/526;overflow:hidden;
    border:1px solid rgba(14,44,38,.12);border-radius:clamp(1.2rem,2vw,1.8rem);
    display:grid;place-items:center;background:var(--tone-wash);
    box-shadow:0 1.35rem 3.2rem rgba(6,35,30,.13)}
.story__figure{position:relative;z-index:2;grid-area:1/1;width:100%;height:100%;margin:0;display:grid;place-items:center}
.story__figure[hidden]{display:none}
.story__figure:not([hidden]){view-transition-name:story-product}
.story__figure img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
    -webkit-user-drag:none;user-select:none}
.story__caption{position:absolute;z-index:3;inset-block-end:clamp(.8rem,1.4vw,1.15rem);inset-inline-start:clamp(.8rem,1.4vw,1.15rem);
    display:flex;align-items:center;gap:.58rem;min-height:2.45rem;padding:.52rem .8rem;
    border:1px solid rgba(255,255,255,.58);border-radius:var(--radius-pill);
    background:rgba(255,253,248,.82);color:var(--deep);-webkit-backdrop-filter:blur(.65rem);backdrop-filter:blur(.65rem);
    box-shadow:0 .45rem 1.35rem rgba(6,35,30,.12)}
.story__caption span{font:600 .65rem/1 var(--en);letter-spacing:.12em;color:var(--tone-deep)}
.story__caption strong{font-size:.83rem;line-height:1.2}
.story__flavors{position:relative;z-index:4;grid-row:2;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.15rem;
    padding:.6rem;border:1px solid var(--line-soft);border-radius:1.4rem;background:rgba(255,253,248,.72);
    box-shadow:0 .75rem 2rem rgba(6,35,30,.07);-webkit-backdrop-filter:blur(.65rem);backdrop-filter:blur(.65rem)}
.story__flavor-tab{position:relative;appearance:none;min-width:0;min-height:5.2rem;padding:.35rem .2rem .7rem;
    border-radius:1rem;color:var(--muted);cursor:pointer;display:grid;place-items:center;align-content:center;gap:.42rem;
    font:inherit;transition:color .25s,background-color .25s,transform .32s var(--ease)}
.story__flavor-tab::after{content:"";position:absolute;inset-inline:28%;inset-block-end:.18rem;height:2px;border-radius:var(--radius-pill);
    background:var(--tone);transform:scaleX(0);transition:transform .3s var(--ease)}
.story__flavor-tab[aria-selected=true]{color:var(--deep);background:rgba(235,238,221,.68);
    background:color-mix(in srgb,var(--tone-wash) 62%,transparent)}
.story__flavor-tab[aria-selected=true]::after{transform:scaleX(1)}
@media (hover:hover){.story__flavor-tab:hover{color:var(--deep);transform:translateY(-.15rem)}}
.story__flavor-icon{position:relative;display:block;width:clamp(2.75rem,4vw,3.5rem);aspect-ratio:1;border-radius:var(--radius-circle);
    overflow:hidden;border:2px solid var(--cream);box-shadow:0 0 0 1px rgba(14,44,38,.16),0 .4rem .9rem rgba(6,35,30,.12);
    transition:transform .32s var(--ease),box-shadow .32s,border-color .32s}
.story__flavor-icon img{width:100%;height:100%;object-fit:cover}
.story__flavor-tab[aria-selected=true] .story__flavor-icon{transform:scale(1.08);border-color:var(--cream);
    box-shadow:0 0 0 2px var(--tone),0 .6rem 1.25rem rgba(6,35,30,.17)}
.story__flavor-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.67rem;line-height:1.2}
[dir=rtl] .story__flavor-label{font-size:.71rem}

::view-transition-group(root){animation:none}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(story-product){animation:story-product-out .24s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(story-product){animation:story-product-in .42s var(--ease) both}
@keyframes story-product-out{to{opacity:0;transform:translateY(.8rem) scale(.975)}}
@keyframes story-product-in{from{opacity:0;transform:translateY(-.9rem) scale(.975)}to{opacity:1;transform:none}}

.story__manifesto{position:relative;width:var(--wide);margin:clamp(3.5rem,7vw,6.5rem) auto 0;
    padding:clamp(2rem,5vw,4.5rem);overflow:hidden;border-radius:clamp(1.5rem,3vw,2.5rem);
    display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:end;
    background:var(--deep);color:var(--cream);box-shadow:0 1.8rem 4rem rgba(6,35,30,.16)}
.story__manifesto::after{content:"";position:absolute;inset-block-start:-45%;inset-inline-end:-12%;width:42%;aspect-ratio:1;
    border-radius:var(--radius-circle);background:radial-gradient(circle,rgba(199,220,66,.18),transparent 67%);pointer-events:none}
.story__pack{position:relative;z-index:1}
.story__pack h3{margin-block-start:1.5rem;max-width:15ch;color:var(--cream);font-size:clamp(1.8rem,3vw,2.8rem)}
[dir=rtl] .story__pack h3{line-height:1.45}
.story__pack p{margin-block-start:1rem;color:rgba(255,255,255,.66);max-width:42ch}
.story__palette{display:flex;width:min(100%,25rem);gap:.35rem}
.story__palette li{flex:1 1 0;height:.48rem;border-radius:var(--radius-pill);background:var(--tone)}
.story__quote{position:relative;z-index:1;margin:0;padding-inline-start:clamp(1.25rem,3vw,2.5rem);border-inline-start:2px solid var(--lime)}
.story__quote p{max-width:20ch;color:var(--cream);font-size:clamp(1.7rem,3.6vw,3.5rem);font-weight:600;line-height:1.22;font-style:italic}
[dir=rtl] .story__quote p{font-style:normal;font-weight:700;line-height:1.55}
.story__quote p::before{content:"\201C"}
.story__quote p::after{content:"\201D"}
[dir=rtl] .story__quote p::before{content:"\201D"}
[dir=rtl] .story__quote p::after{content:"\201C"}

.who{width:var(--wide);margin:clamp(5rem,10vw,9rem) auto 0}
.who__head{display:grid;grid-template-columns:minmax(15rem,.72fr) minmax(0,1.28fr);align-items:end;gap:clamp(2rem,6vw,6rem);
    padding-block-end:clamp(2.5rem,5vw,4.5rem);border-bottom:1px solid var(--line)}
.who__title{max-width:15ch;font-size:clamp(2.6rem,5.4vw,5.4rem);line-height:1.04}
[dir=rtl] .who__title{font-size:clamp(2.35rem,4.8vw,4.7rem);line-height:1.35}
.who__list{margin-block-start:clamp(1.2rem,2.5vw,2rem);display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
    align-items:stretch;gap:clamp(1rem,2vw,1.6rem)}
.who__card{position:relative;isolation:isolate;min-height:clamp(24rem,36vw,31rem);padding:clamp(2.2rem,4vw,4.2rem);overflow:hidden;
    display:flex;flex-direction:column;justify-content:flex-end;border-radius:clamp(1.7rem,3vw,2.8rem);box-shadow:0 1.6rem 4rem rgba(6,35,30,.1)}
.who__card::before{position:absolute;z-index:-2;inset-block-start:-.2em;inset-inline-end:-.02em;
    font:600 clamp(12rem,24vw,23rem)/1 var(--en);letter-spacing:-.1em;pointer-events:none}
.who__card::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.who__card--home{background:linear-gradient(145deg,#041b17 0%,var(--deep) 48%,#0b4a3f 145%);color:var(--cream)}
.who__card--home::before{content:"01";color:rgba(255,255,255,.045)}
.who__card--home::after{inset:-25% -12% 7% 38%;opacity:.28;clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);
    background:repeating-linear-gradient(118deg,transparent 0 1.05rem,rgba(199,220,66,.38) 1.05rem 1.12rem)}
.who__card--move{background:linear-gradient(135deg,#d5eb3e 0%,var(--lime) 55%,#a9bf2d 135%);color:var(--deep)}
.who__card--move::before{content:"02";color:rgba(6,35,30,.06)}
.who__card--move::after{inset:-8% -10% auto auto;width:72%;height:78%;opacity:.1;background:var(--deep);
    clip-path:polygon(42% 0,100% 0,69% 41%,100% 41%,24% 100%,43% 57%,0 57%)}
.who__number{position:absolute;inset-block-start:clamp(1.8rem,3vw,3rem);inset-inline-start:clamp(2rem,4vw,4rem);
    display:grid;place-items:center;min-width:3.1rem;min-height:2rem;padding-inline:.7rem;border:1px solid currentColor;border-radius:var(--radius-pill);
    font:600 .72rem/1 var(--en);letter-spacing:.16em;opacity:.72}
.who__icon{position:absolute;inset-block-start:clamp(1.7rem,3vw,2.8rem);inset-inline-end:clamp(1.7rem,3vw,2.8rem);
    width:clamp(4.8rem,7vw,7.2rem);height:clamp(4.8rem,7vw,7.2rem);stroke:currentColor;fill:none;stroke-width:1.05}
.who__card h4{position:relative;width:max-content;max-width:100%;padding-block-start:1.2rem;font-weight:700;
    font-size:clamp(2.4rem,4.2vw,4rem);line-height:1.1;color:inherit}
.who__card h4::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:2.8rem;height:.26rem;background:currentColor;border-radius:var(--radius-pill)}
[dir=rtl] .who__card h4{font-size:clamp(2.5rem,4.1vw,3.8rem);line-height:1.35}
.who__card p{margin-block-start:1rem;max-width:31ch;color:currentColor;opacity:.8;font-size:clamp(1.1rem,1.45vw,1.22rem);line-height:1.7}
[dir=rtl] .who__card p{line-height:1.9}

/* ---------- Facts ---------- */
.facts{position:relative;isolation:isolate;padding:clamp(6rem,11vw,10rem) var(--pad);background:var(--deep);color:var(--cream);overflow:hidden}
.facts::before{content:"";position:absolute;z-index:-1;inset:-20% -15% auto auto;width:60vw;aspect-ratio:1;border-radius:var(--radius-circle);
    background:radial-gradient(circle,color-mix(in srgb,var(--green) 68%,transparent),transparent 67%)}
.facts__frame{width:var(--wide);margin-inline:auto;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    grid-template-areas:"head marks";gap:clamp(3rem,7vw,7rem)}
.facts__head{position:relative;grid-area:head;padding-block-start:clamp(2rem,7vw,6rem)}
.facts__chapter{position:absolute;z-index:-1;inset-block-start:-.34em;inset-inline-start:-.06em;color:rgba(255,255,255,.035);
    font:600 clamp(11rem,22vw,22rem)/1 var(--en);letter-spacing:-.09em}
.facts__head .eyebrow{color:var(--lime)}
.facts h2{margin-block-start:1rem;max-width:12ch;font-size:clamp(2.8rem,5.2vw,5.2rem)}
[dir=rtl] .facts h2{font-size:clamp(2.45rem,4.5vw,4.5rem)}
.facts__lede{margin-block-start:1.5rem;max-width:43ch;color:rgba(255,255,255,.64)}
.facts__marks{grid-area:marks;border-block:1px solid rgba(255,255,255,.16)}
.facts__marks li{position:relative;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.55rem 1.25rem;
    padding:clamp(1.7rem,3vw,2.7rem) 0;border-bottom:1px solid rgba(255,255,255,.16)}
.facts__marks li:last-child{border-bottom:0}
.facts__marks small{grid-row:1/3;padding-block-start:.35rem;color:var(--lime);font:600 .7rem/1 var(--en);letter-spacing:.14em}
.facts__marks b{font-size:clamp(1.25rem,2vw,1.65rem);font-weight:600;line-height:1.3}
[dir=rtl] .facts__marks b{font-weight:700}
.facts__marks span{color:rgba(255,255,255,.58);font-size:.92rem;line-height:1.6}

/* Document rows (04/05) continue the same numbered list as the facts above —
   one coherent list instead of a second, disconnected card section. Each row
   is identification (number + title) plus a single trailing action; no photo
   preview, because the real labels are dense regulatory text that only reads
   at full size — shrinking them into a card made them decorative clutter,
   not information. */
.facts__marks li.facts__marks-doc{grid-template-columns:3rem minmax(0,1fr) auto;align-items:center;gap:.55rem 1.25rem}
.facts__marks-doc small{grid-row:auto;padding-block-start:0}
.facts__marks-doc b{grid-column:2}
.facts__marks-view{grid-column:3;display:inline-flex;align-items:center;gap:.45rem;flex-shrink:0;
    min-height:2.6rem;padding-inline:1rem;border-radius:var(--radius-pill);border:1.5px solid rgba(255,255,255,.3);
    color:var(--cream);font-size:.82rem;font-weight:600;transition:border-color .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease)}
[dir=rtl] .facts__marks-view{font-weight:700}
.facts__marks-view svg{width:.95rem;fill:none;stroke:currentColor;stroke-width:2}
.facts__marks-view:is(:hover,:focus-visible){background:var(--lime);border-color:var(--lime);color:var(--deep)}

/* Product-information lightbox: custom rather than <dialog>, keeping a direct
   image link as the no-JS/legacy-browser fallback. */
body.info-open{overflow:hidden}
.info-lightbox[hidden]{display:none}
.info-lightbox{position:fixed;z-index:300;inset:0;display:grid;place-items:center;overflow:auto;padding:clamp(1rem,3vw,2rem);
    padding-block:max(clamp(1rem,3vw,2rem),env(safe-area-inset-top)) max(clamp(1rem,3vw,2rem),env(safe-area-inset-bottom));
    background:rgba(2,16,13,.94);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;transition:opacity .22s ease}
.info-lightbox.is-open{opacity:1}
.info-lightbox__figure{width:max-content;max-width:100%;margin:auto;display:grid;justify-items:center;gap:.8rem;
    transform:scale(.975);transition:transform .28s var(--ease)}
.info-lightbox.is-open .info-lightbox__figure{transform:none}
.info-lightbox__figure img{width:auto;max-width:calc(100vw - 2rem);height:auto;max-height:calc(100vh - 6rem);max-height:calc(100svh - 6rem);
    border-radius:.65rem;box-shadow:0 2rem 5rem rgba(0,0,0,.46)}
.info-lightbox__figure figcaption{color:rgba(255,255,255,.78);font-size:.9rem;text-align:center}
.info-lightbox__close{position:fixed;z-index:2;inset-block-start:max(1rem,env(safe-area-inset-top));inset-inline-end:max(1rem,env(safe-area-inset-right));
    display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--radius-circle);background:var(--lime);color:var(--deep);cursor:pointer;box-shadow:0 .7rem 1.5rem rgba(0,0,0,.28)}
.info-lightbox__close svg{width:1.35rem;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- Finale ---------- */
.finale{position:relative;isolation:isolate;padding:clamp(7rem,12vw,11rem) var(--pad) clamp(5rem,9vw,8rem);background:var(--lime);overflow:hidden}
.finale::before{content:"";position:absolute;z-index:-1;inset:-25% -10% auto auto;width:52vw;aspect-ratio:1;border:1px solid rgba(6,35,30,.13);border-radius:var(--radius-circle);
    box-shadow:0 0 0 7vw rgba(6,35,30,.035),0 0 0 14vw rgba(6,35,30,.025)}
.finale__ticker{position:absolute;inset-block-start:-.08em;inset-inline:0;white-space:nowrap;overflow:hidden;color:rgba(6,35,30,.075);
    font:600 clamp(5rem,13vw,13rem)/1 var(--en);letter-spacing:-.07em;pointer-events:none}
.finale__ticker span{display:block;width:max-content}
.finale__inner{width:var(--wide);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(20rem,.88fr);
    align-items:end;gap:clamp(2.5rem,6vw,6rem)}
.finale__family{position:relative;z-index:1;align-self:end;width:min(100%,47rem);margin-block-end:-4%}
.finale__family::after{content:"";position:absolute;z-index:-1;inset:auto 10% 3%;height:12%;border-radius:var(--radius-circle);background:rgba(6,35,30,.18);filter:blur(1.3rem)}
.finale__family img{width:100%;height:auto;filter:drop-shadow(0 1.5rem 1.5rem rgba(6,35,30,.12))}
.finale__copy .eyebrow{color:var(--tone-deep)}
.finale h2{margin-block-start:1rem;max-width:11ch;font-size:clamp(3rem,5.6vw,5.8rem)}
[dir=rtl] .finale h2{font-size:clamp(2.6rem,4.9vw,5rem)}
.finale__body{margin-block-start:1.3rem;max-width:34ch;color:color-mix(in srgb,var(--deep) 72%,transparent)}
.finale__actions{margin-block-start:2.4rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.finale__back{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;font-weight:600;border-bottom:1.5px solid rgba(6,35,30,.35);transition:border-color .3s,color .3s}
[dir=rtl] .finale__back{font-weight:700}
.finale__back:hover{border-bottom-color:var(--deep);color:var(--deep)}
.finale__back svg{width:1rem;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s var(--ease)}
.finale__back:hover svg{transform:translateY(-.22rem)}

/* ---------- Footer ----------
   Composition: a palm horizon and a woven trim (brand identity assets,
   not content images) frame a three-column editorial grid — brand,
   site links, connect/store — closing the page the way the finale
   opens it, on the same --deep ground as the .facts section. */
.site-footer{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);color:var(--cream)}
.site-footer__horizon{width:100%;height:clamp(3.25rem,7vw,5.5rem);
    background:url("../assets/images/footer-palms.webp") repeat-x bottom center/auto 100%;opacity:.85}
.site-footer__content{display:grid;grid-template-columns:minmax(18rem,1.2fr) minmax(9rem,.6fr) minmax(13rem,.7fr);
    column-gap:clamp(2rem,4vw,4.5rem);align-items:start;
    padding:clamp(2.5rem,4.5vw,3.75rem) var(--pad) clamp(2.5rem,4vw,3.25rem)}
.site-footer__brand{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.site-footer .brand__word{font:700 clamp(2.75rem,4vw,3.75rem)/.82 var(--en);letter-spacing:-.055em;color:var(--cream)}
.site-footer .brand__word span{color:var(--lime)}
.site-footer__brand p{color:rgba(255,255,255,.5);font-size:.86rem;max-width:22ch}
.site-footer__nav{display:grid;gap:.1rem;align-content:start;padding-block-start:.4rem}
.site-footer__nav a{display:flex;align-items:center;min-height:2.2rem;color:rgba(255,255,255,.66);font-size:.92rem;transition:color .25s}
.site-footer__nav a:hover{color:var(--lime)}
.site-footer__connect{display:flex;flex-direction:column;align-items:flex-start;gap:1.15rem;padding-block-start:.4rem}
.site-footer__connect-label{font:600 .68rem/1 var(--en);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.47)}
[dir=rtl] .site-footer__connect-label{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:.8rem}
.social-links{display:flex;gap:.6rem}
.social-links a{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.22);transition:.3s var(--ease)}
.social-links a:hover{background:var(--lime);border-color:var(--lime);color:var(--deep);transform:translateY(-.18rem)}
.social-links svg{width:1.1rem;fill:none;stroke:currentColor;stroke-width:1.7}
.site-footer__store{min-height:2.85rem;padding-inline:1.35rem;font-size:.92rem}
.site-footer__trim{width:100%;height:clamp(1.15rem,2.2vw,1.6rem);
    background:url("../assets/images/footer-pattern.webp") repeat-x center/auto 100%;opacity:.65}
.site-footer__legal{padding:1.1rem var(--pad) 1.4rem;color:rgba(255,255,255,.47);font-size:.78rem}
.whatsapp{position:fixed;z-index:80;inset-block-end:1.1rem;inset-inline-end:1.1rem;display:grid;place-items:center;
    width:3.4rem;height:3.4rem;border-radius:var(--radius-pill);background:#168b4a;color:#fff;box-shadow:0 .7rem 1.4rem rgba(6,35,30,.3);transition:transform .3s var(--ease)}
.whatsapp:hover{transform:translateY(-.22rem)}
.whatsapp svg{width:1.45rem;fill:currentColor}
.whatsapp span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.whatsapp--pending{background:#4a544f;cursor:not-allowed}
.scroll-progress{position:fixed;inset-block-start:0;inset-inline:0;z-index:130;height:2px;pointer-events:none}
.scroll-progress span{display:block;width:100%;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:var(--to,left)}
[dir=rtl] .scroll-progress span{--to:right}

/* ---------- 404 ----------
   Fluid by clamp() alone, with no breakpoints and no JS: the error page may be
   the first thing a browser ever loads from this site, so it must lay itself
   out correctly at any width on its own. Colours here are plain rgba rather
   than color-mix() so the page still paints fully on older engines — an error
   page is the last place that can afford a rendering failure. Composition
   reuses the site's own vocabulary: the oversized ghost numeral of the
   product/facts sections, and the footer's palm horizon. */
.error-body{background:var(--deep)}
.error-page{position:relative;isolation:isolate;overflow:hidden;
    display:flex;align-items:center;
    min-height:100vh;min-height:100svh;
    padding:clamp(3rem,8vw,6rem) var(--pad) clamp(5rem,10vw,8rem);
    background:var(--deep);color:var(--cream)}
.error-page__inner{width:var(--wide);margin-inline:auto;
    display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    align-items:center;gap:clamp(2rem,5vw,4rem)}
/* Text elements carry their own measure — the column stays full width so the
   actions can sit on one line. Same approach as .facts h2 / .facts__lede. */
.error-page__copy{grid-column:1;min-width:0}
.error-page__brand{display:inline-block;margin-block-end:clamp(1.6rem,4vw,2.6rem)}
.error-page .brand__word{font:700 clamp(1.8rem,3.2vw,2.4rem)/1 var(--en);letter-spacing:-.045em;color:var(--cream)}
.error-page .brand__word span{color:var(--lime)}
.error-page__title{margin-block-start:1rem;max-width:14ch;font-size:clamp(2.4rem,5vw,4.4rem)}
[dir=rtl] .error-page__title{max-width:13ch;font-size:clamp(2.1rem,4.4vw,3.9rem)}
.error-page__body{margin-block-start:1.4rem;max-width:38ch;color:rgba(255,255,255,.62)}
.error-page__actions{margin-block-start:clamp(2rem,4vw,2.8rem);display:flex;flex-wrap:wrap;gap:.9rem}
.error-page__lang{display:inline-flex;align-items:center;min-height:2.75rem;
    margin-block-start:clamp(1.4rem,3vw,2rem);
    color:rgba(255,255,255,.55);font-size:.92rem;
    border-bottom:1px solid rgba(255,255,255,.22);
    transition:color .25s,border-color .25s}
.error-page__lang:is(:hover,:focus-visible){color:var(--lime);border-bottom-color:var(--lime)}
/* The numeral is this page's visual, the way a product shot leads a product page:
   sized as an object, not as decoration, and set flush to the end edge. */
.error-page__code{grid-column:2;justify-self:end;margin:0;
    font:600 clamp(9rem,25vw,25rem)/.8 var(--en);letter-spacing:-.075em;
    color:rgba(255,255,255,.12);
    -webkit-user-select:none;user-select:none}
.error-page__horizon{position:absolute;z-index:-1;inset-block-end:0;inset-inline:0;
    height:clamp(2.5rem,6vw,4.5rem);pointer-events:none;opacity:.45;
    background:url("../assets/images/footer-palms.webp") repeat-x bottom center/auto 100%}

/* ---------- Reveal ---------- */
.js [data-reveal],.js [data-reveal-group]>*{opacity:0;transform:translateY(var(--rise,1.4rem));transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js [data-reveal].is-visible,.js [data-reveal-group].is-visible>*{opacity:1;transform:none}
.js [data-reveal-group].is-visible>*{transition-delay:calc(var(--i,0) * 90ms)}

/* ---------- Flavour tones (sampled from the real pack artwork) ---------- */
[data-flavor=vegetable]{--tone:#3F9A12;--tone-deep:#27660B;--tone-wash:#EEF5E8}
[data-flavor=spicy]    {--tone:#B3121F;--tone-deep:#8D0E18;--tone-wash:#F7E9E9}
[data-flavor=chicken]  {--tone:#8E2A93;--tone-deep:#6D1F71;--tone-wash:#F4EAF4}
[data-flavor=curry]    {--tone:#A8641B;--tone-deep:#79430D;--tone-wash:#F7EFE4}
[data-flavor=beef]     {--tone:#7E5330;--tone-deep:#603A20;--tone-wash:#F1EAE4}
[data-flavor=tomyum]   {--tone:#D2481F;--tone-deep:#963113;--tone-wash:#F9EBE6}
[data-flavor=truffle]  {--tone:#6B6D32;--tone-deep:#50521F;--tone-wash:#F0F0E6}
[data-flavor=fried]    {--tone:#2F3A31;--tone-deep:#263129;--tone-wash:#E9ECE9}

/* ---------- Responsive ---------- */
@media(max-width:1050px){
    .desktop-nav{display:none}
    .site-header__inner{grid-template-columns:1fr auto}
    .menu-toggle{display:block}
    .showcase__scene{grid-template-columns:minmax(0,1fr);
        grid-template-rows:auto auto;row-gap:clamp(.65rem,1.6vh,1rem);
        align-content:center;align-items:center;justify-items:center;text-align:center;
        padding-block-start:calc(var(--header) + .5rem);padding-block-end:1.5rem}
    .showcase__product{grid-column:1;width:min(100%,38rem);align-self:center}
    .showcase__product img{max-height:min(38vh,24rem)}
    .showcase__panel{grid-column:1;max-width:42rem;justify-self:center}
    .showcase__desc{margin-inline:auto}
    .showcase__count,[dir=rtl] .showcase__count{justify-content:center}
    .story__lead{grid-template-columns:1fr;gap:2.5rem}
    .story__text{max-width:46rem}
    .story__visual{width:min(100%,50rem);justify-self:center}
    .story__manifesto{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4rem)}
    .facts__frame{grid-template-columns:1fr;grid-template-areas:"head" "marks" "documents";gap:3.5rem}
    .facts__head{padding-block-start:2rem;max-width:48rem}
    .facts__marks{max-width:48rem}
    .finale__inner{grid-template-columns:1fr;gap:3rem}
    .finale__family{width:min(100%,44rem);margin-inline:auto;order:2}
    .finale__copy{max-width:43rem;order:1}
    /* One column: the numeral drops behind the copy as a chapter ghost,
       the same move .facts__chapter makes at this width. */
    .error-page__inner{grid-template-columns:minmax(0,1fr);gap:0}
    .error-page__copy{grid-column:1;grid-row:1;max-width:44rem;padding-block-start:clamp(2rem,9vw,4.5rem)}
    .error-page__code{grid-column:1;grid-row:1;position:relative;z-index:-1;
        justify-self:start;align-self:start;
        inset-block-start:-.16em;inset-inline-start:-.05em;
        font-size:clamp(9rem,30vw,15rem);color:rgba(255,255,255,.05)}
    .site-footer__content{grid-template-columns:minmax(0,1fr) minmax(14rem,auto);row-gap:2.5rem}
    .site-footer__brand{grid-column:1/-1}
    .site-footer__nav{grid-column:1}
    .site-footer__connect{grid-column:2}
}
@media(max-width:760px){
    :root{--header:4.4rem;--pad:6vw;--wide:88vw}
    [dir=ltr] body,[dir=rtl] body{font-size:1rem}
    .shop-link--header{display:none}
    /* Mobile hero: the film is the subject. Copy hugs the bottom so the
       upper frame stays clear, and the scrim only darkens where text sits. */
    .hero__scrim,[dir=rtl] .hero__scrim{background:
        linear-gradient(180deg,rgba(4,20,17,.52) 0%,rgba(4,20,17,.14) 15%,transparent 28%),
        linear-gradient(0deg,rgba(4,20,17,.93) 0%,rgba(4,20,17,.84) 33%,rgba(4,20,17,.5) 51%,rgba(4,20,17,.12) 65%,transparent 77%),
        linear-gradient(0deg,color-mix(in srgb,var(--green) 46%,transparent) 0%,color-mix(in srgb,var(--green) 10%,transparent) 40%,transparent 58%)}
    .hero__video{object-position:52% 32%}
    .hero__grid{align-self:end;padding-block:calc(var(--header) + 1rem) 1.75rem}
    .hero__copy{padding-block-end:0}
    /* the label wraps at this width; keep its index on the first line */
    .hero .eyebrow{font-size:.76rem;align-items:flex-start;gap:.55rem}
    .hero .eyebrow span{margin-block-start:.28rem}
    [dir=rtl] .hero .eyebrow{font-size:.86rem}
    [dir=rtl] .hero .eyebrow span{margin-block-start:.4rem}
    [dir=ltr] .hero h1{font-size:2.55rem}
    [dir=rtl] .hero h1{font-size:2.4rem}
    .hero h1{margin-block-start:.85rem}
    /* stat reads as a supporting detail; the CTAs land last, nearest the thumb */
    .hero__actions{margin-block-start:1.5rem;flex-direction:column-reverse;gap:1.2rem}
    .hero__buttons{gap:.6rem;width:100%}
    .hero__buttons .button{min-height:3.05rem}
    .hero__meta{gap:.65rem}
    .hero__meta b{font-size:2.1rem}
    .hero__meta span{font-size:.86rem}
    .hero__meta em{font-size:.76rem}
    .hero__media-controls{inset-inline-end:6vw}
    .hero__caption{display:none}
    .hero__cue{display:none}
    .showcase{--step-vh:.46}
    .showcase__scene{padding-inline:4vw;padding-block-start:calc(var(--header) + .35rem);
        padding-block-end:1rem;row-gap:.4rem}
    .showcase__numeral{font-size:7rem;inset-block-start:calc(var(--header) - .5rem)}
    .showcase__product{width:min(94vw,42rem)}
    .showcase__product img{max-height:min(39vh,22rem)}
    .showcase__panel{width:min(92vw,34rem)}
    .showcase__panel h3,.showcase__ghost-name{margin-block-start:.5rem}
    .showcase__desc{font-size:.95rem}
    .story{padding:clamp(4.5rem,14vw,6rem) 5vw}
    .story__lead,.story__manifesto,.who{width:100%}
    .story__lead{gap:2rem}
    .story__text{padding-block:0}
    .story h2,[dir=rtl] .story h2{font-size:clamp(2.25rem,10vw,3.15rem)}
    .story__body{margin-block-start:1.2rem}
    .story__stage{border-radius:1.1rem}
    .story__stamp{inset-block-start:.75rem;inset-inline-end:.75rem;font-size:.58rem}
    .story__caption{inset-block-end:.65rem;inset-inline-start:.65rem;min-height:2.15rem;padding:.43rem .67rem}
    .story__caption strong{font-size:.76rem}
    .story__flavors{grid-template-columns:repeat(4,minmax(0,1fr));gap:.1rem;padding:.45rem;border-radius:1.15rem}
    .story__flavor-tab{min-height:4.45rem;border-radius:.8rem;padding:.3rem .15rem .6rem}
    .story__flavor-icon{width:2.55rem}
    .story__flavor-label,[dir=rtl] .story__flavor-label{font-size:.64rem}
    .story__manifesto{margin-block-start:3rem;padding:1.6rem;grid-template-columns:1fr;gap:2.25rem;border-radius:1.5rem}
    .story__pack h3{margin-block-start:1.25rem;font-size:2rem}
    .story__quote{padding-inline-start:1.25rem}
    .story__quote p,[dir=rtl] .story__quote p{font-size:clamp(1.75rem,8vw,2.35rem)}
    .who{margin-block-start:4.5rem}
    .who__head{grid-template-columns:1fr;gap:1.25rem;padding-block-end:2.25rem}
    .who__title{font-size:clamp(2rem,8vw,2.7rem)}
    .who__list{grid-template-columns:1fr;gap:1rem;margin-block-start:1rem}
    .who__card{min-height:22rem;padding:2rem 1.5rem;border-radius:1.7rem;box-shadow:0 1rem 2.5rem rgba(6,35,30,.1)}
    .who__card--move{min-height:20.5rem}
    .who__card::before{font-size:13rem;inset-block-start:.02em}
    .who__card--home::after{inset:-18% -24% 15% 34%}
    .who__card--move::after{width:86%;height:70%}
    .who__number{inset-block-start:1.8rem;inset-inline-start:1.5rem}
    .who__icon{inset-block-start:1.6rem;inset-inline-end:1.4rem;width:4.8rem;height:4.8rem}
    .who__card h4,[dir=rtl] .who__card h4{font-size:clamp(2.35rem,10vw,2.8rem)}
    .who__card p{font-size:1.15rem;max-width:28ch}
    .facts{padding-block:5.5rem}
    .facts__frame{width:100%;gap:3rem}
    .facts__chapter{font-size:12rem}
    .facts h2,[dir=rtl] .facts h2{font-size:clamp(2.35rem,10vw,3.15rem)}
    .facts__marks li{grid-template-columns:2.2rem minmax(0,1fr);gap:.5rem .8rem;padding-block:1.6rem}
    .facts__marks li.facts__marks-doc{grid-template-columns:2.2rem minmax(0,1fr) auto}
    .facts__marks-view{min-height:2.3rem;padding-inline:.75rem;font-size:.76rem}
    .info-lightbox__figure img{max-width:calc(100vw - 1.2rem);max-height:calc(100vh - 5rem);max-height:calc(100svh - 5rem)}
    .finale{padding-block:6.5rem 4.5rem}
    .finale__inner{width:100%;gap:2.5rem}
    .finale h2,[dir=rtl] .finale h2{font-size:clamp(2.6rem,12vw,3.6rem)}
    .finale__actions{align-items:stretch;flex-direction:column;gap:1rem}
    .finale__actions .button{width:100%}
    .finale__back{align-self:flex-start}
    .finale__family{width:110%;max-width:none;margin-inline:-5%;margin-block-end:0}
    /* Full-width actions, matching .finale__actions at this width. */
    .error-page__actions{align-items:stretch;flex-direction:column;gap:1rem}
    .error-page__actions .button{width:100%}
    .error-page__title,[dir=rtl] .error-page__title{max-width:none}
    .site-footer__horizon{height:clamp(2.35rem,11vw,3.25rem)}
    .site-footer__content{grid-template-columns:minmax(0,1fr);row-gap:2.25rem;
        padding:2.5rem var(--pad) 2rem}
    .site-footer__brand,.site-footer__nav,.site-footer__connect{grid-column:1;padding-block-start:0}
    .site-footer .brand__word{font-size:clamp(2.6rem,12vw,3.25rem)}
    .site-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}
    .site-footer__trim{height:clamp(.85rem,3.4vw,1.15rem)}
    .site-footer__legal{padding-block:1rem 1.5rem}
}
@media(max-width:430px){
    .brand__tag{display:none}
    .showcase__panel h3,.showcase__ghost-name{font-size:1.9rem}
}

@media(max-width:1050px) and (max-height:520px){
    .showcase__scene{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:1fr;
        height:100svh;min-height:100svh;align-content:stretch;text-align:start;column-gap:1.25rem;row-gap:0;
        padding-block-start:calc(var(--header) + .25rem);padding-block-end:.5rem}
    .showcase__product{grid-column:1;width:100%;align-self:center}
    .showcase__product img{max-height:min(64vh,16rem)}
    .showcase__panel{grid-column:2;width:100%;align-self:center;justify-self:stretch}
    .showcase__count,[dir=rtl] .showcase__count{justify-content:flex-start}
    .showcase__desc{margin-inline:0}
    .showcase__panel h3,.showcase__ghost-name{font-size:clamp(1.65rem,4.4vw,2.25rem)}
    [dir=rtl] .showcase__panel h3,[dir=rtl] .showcase__ghost-name{font-size:clamp(1.75rem,4.2vw,2.35rem)}
    .showcase__tag{margin-block-start:.35rem;font-size:1rem}
    .showcase__desc{margin-block-start:.4rem;font-size:.9rem;line-height:1.5}
    [dir=rtl] .showcase__desc{line-height:1.65}
}

/* ---------- Scroll-linked polish (progressive enhancement) ---------- */
@supports (animation-timeline:scroll(root)){
    .scroll-progress span{animation:progress linear;animation-timeline:scroll(root)}
    @keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
    @supports (animation-timeline:view()){
        .hero__video{animation:hero-pan linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
        @keyframes hero-pan{from{transform:scale(1.06) translateY(-1.2%)}to{transform:scale(1.06) translateY(1.2%)}}
        .finale__family img{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
        @keyframes drift{from{transform:scale(1.02) translateY(1rem)}to{transform:scale(1.02) translateY(-1rem)}}
        .facts__chapter{animation:chapter-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
        @keyframes chapter-drift{from{transform:translateY(-2%)}to{transform:translateY(2%)}}
    }
}

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