[hidden]{display:none!important}
html{scrollbar-gutter:stable}
body{margin:0;background:#0B1714}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.eco{--ink:#0B1714;--ink2:#10201B;--ink3:#173029;--paper:#F0F3F1;--paper2:#E2EAE5;--paper3:#D2DED7;--gold:#34B36F;--gold2:#8FDDB0;--golddeep:#076B3F;--teal:#8FDDB0;--tealdeep:#076B3F;--hg:#076B3F;--silica:#EAF6F2;--field:#CFDC8E;--fgd:#EEEAE0;--mutd:#A9B5AF;--fgl:#07382E;--mutl:#535F59;--lined:rgba(238,234,224,.14);--linel:rgba(13,25,21,.14);--sh:min(100svh,1100px);--ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.76,0,.24,1);--pad:clamp(20px,4.2vw,64px);--gx:max(var(--pad),calc((100% - 1400px) / 2 + var(--pad)));--tb:0px;position:relative;font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:400;color:var(--fgd);background:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased}
@supports (height:100lvh){
.eco{--tb:calc(100lvh - 100svh)}
}
.eco *,.eco *::before,.eco *::after{box-sizing:border-box}
.eco ::selection{background:#076B3F;color:#fff}
:where(.eco) a{color:inherit;text-decoration:none}
:where(.eco) img{display:block;max-width:none}
:where(.eco) :where(h1,h2,h3,h4,p,ol,ul,li,figure){margin:0}
:where(.eco) :where(ol,ul){padding:0;list-style:none}
:where(.eco) :where(h1,h2,h3),.serif{word-spacing:.07em;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-optical-sizing:auto;}
.eco em{font-style:normal;font-weight:300}
.mono{font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace}
.wrap{width:100%;max-width:1400px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;line-height:1.2;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.h2{font-size:clamp(38px,5vw,80px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.body{font-size:clamp(16px,1.2vw,18px);line-height:1.65}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.paper{background:var(--paper);color:var(--fgl)}
.anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.pin{position:sticky;top:0;height:100vh;height:100lvh;overflow:clip}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:0 9px 0 26px;border-radius:999px;font-family:'Be Vietnam Pro',sans-serif;font-size:15px;font-weight:600;letter-spacing:.01em;border:0;cursor:pointer;white-space:nowrap;transition:background .35s,color .35s,box-shadow .35s,transform .5s var(--ease)}
.btn .arr{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;font-size:15px;font-weight:500;transition:transform .5s var(--ease),background .35s}
.btn:hover .arr{transform:translateX(3px)}
.btn-gold{background:var(--hg);color:#fff;box-shadow:0 10px 24px -14px rgba(7,107,63,.8)}
.btn-gold .arr{background:#fff;color:var(--hg)}
.btn-gold:hover{background:#0A7F4B}
.btn-line{background:transparent;color:var(--fgd);box-shadow:inset 0 0 0 1px rgba(238,234,224,.32)}
.btn-line .arr{background:rgba(238,234,224,.1)}
.btn-line:hover{box-shadow:inset 0 0 0 1px rgba(238,234,224,.75)}
.btn-sm{min-height:44px;padding:0 6px 0 18px;font-size:14px;gap:10px}
.btn-sm .arr{width:32px;height:32px}
/* reveal */
.rv{transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.eco.ready:not(.still) .rv:not(.in){opacity:0;transform:translateY(42px)}
.rvimg{overflow:hidden;clip-path:inset(0 0 0 0 round var(--r,28px));transition:clip-path 1.5s var(--ease)}
.rvimg img{transition:scale 1.9s var(--ease)}
.eco.ready:not(.still) .rvimg:not(.in){clip-path:inset(12% 7% 12% 7% round var(--r,28px))}
.eco.ready:not(.still) .rvimg:not(.in) img{scale:1.22}
/* intro loader + grain */
.curtain{--k:0;--dy:0;position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#F0F3F1;animation:clFail .01s linear 9s forwards}
@keyframes clFail{to{visibility:hidden;opacity:0}}
.cl-center{position:relative;width:clamp(210px,21vw,340px)}
.cl-logo{position:relative;width:100%;aspect-ratio:1100 / 218}
.cl-logo img{display:block;width:100%;height:100%;will-change:clip-path;clip-path:inset(-20% calc((1 - var(--k)) * 100%) -20% 0)}
.cl-pen{position:absolute;left:calc(var(--k) * 100%);top:calc(50% + var(--dy) * 50%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#34B36F;will-change:left,top;box-shadow:0 0 0 3px rgba(52,179,111,.18);transition:opacity .4s}
.curtain.is-full .cl-pen{opacity:0}
.cl-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(7,107,63,.08)}
.cl-bar::after{content:"";position:absolute;inset:0;background:#076B3F;transform-origin:0 50%;transform:scaleX(var(--k))}
.eco.intro-out .curtain{pointer-events:none;animation:clUp 1.1s var(--ease2) .15s forwards}
@keyframes clUp{to{transform:translateY(-100%)}}
.eco.intro-out .cl-center{animation:clOut .65s var(--ease2) forwards}
@keyframes clOut{to{opacity:0;transform:translateY(-30px)}}
.eco.intro-out .cl-bar{opacity:0;transition:opacity .3s}
.eco.intro-done .curtain{display:none}
.eco.intro-out :is(.st-video,.st-fallback,.st-gl){animation:heroZoom 2s cubic-bezier(.16,1,.3,1) .3s both}
@keyframes heroZoom{from{scale:1.16}to{scale:1}}
html.intro-lock{overflow:hidden}
.still .curtain{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;background-image:url(../assets/img/noise.png);background-size:220px 220px;opacity:.035;animation:grain 1.4s steps(6) infinite}
@media (pointer:coarse){
.grain{display:none}
}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,6%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}}
.still .grain{animation:none}
/* header */
.hdr{--hg:#076B3F;--hgd:#07382E;position:fixed;top:0;left:0;right:0;z-index:50;color:var(--hgd)}
.hdr::before{content:"";position:absolute;inset:0;background:#fff;box-shadow:0 1px 0 rgba(7,56,46,.08);transition:box-shadow .4s}
.hdr[data-scrolled="1"]::before{box-shadow:0 1px 0 rgba(7,56,46,.1),0 10px 30px -18px rgba(7,56,46,.35)}
.hdr-in{position:relative;max-width:1400px;margin:0 auto;padding:12px var(--pad);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px 34px}
.hdr-logo{position:relative;display:flex;align-items:center;min-height:48px;justify-self:start}
.lg{height:30px;width:auto}
.lg-w{display:none}
.hdr-nav{display:flex;justify-content:center;gap:clamp(18px,2.2vw,34px);font-size:16px;font-weight:500;color:var(--hgd)}
.hdr-nav a{padding:12px 0;transition:color .25s}
.hdr-nav a:hover{color:var(--hg)}
.hdr-r{display:flex;align-items:center;justify-content:flex-end;gap:22px}
.hdr-lang{display:flex;gap:8px;font-size:14px;letter-spacing:.04em}
.hdr-lang a{color:#849D97;padding:12px 2px;transition:color .25s}
.hdr-lang a:hover{color:var(--hg)}
.hdr-lang>span{color:#849D97}
.hdr-lang b{font-weight:600;color:var(--hg);padding:12px 2px}
.hdr .btn-gold{background:var(--hg);color:#fff;min-height:50px;padding:0 7px 0 26px;gap:18px;font-size:15px;box-shadow:0 10px 24px -14px rgba(7,107,63,.8)}
.hdr .btn-gold .arr{background:#fff;color:var(--hg);width:38px;height:38px}
.hdr .btn-gold:hover{background:#0A7F4B}
.hdr-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hg);transform-origin:0 50%;transform:scaleX(var(--gp,0))}
.hdr-burger{display:none;position:relative;width:44px;height:44px;flex-shrink:0;border:0;border-radius:50%;background:rgba(7,107,63,.1);color:var(--hg);cursor:pointer;transition:background .3s}
.hdr-burger span{position:absolute;left:14px;right:14px;height:1.5px;border-radius:2px;background:currentColor}
.hdr-burger span:first-child{top:17px}
.hdr-burger span:last-child{bottom:17px}
.menu{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;overflow:auto;background:var(--ink);color:var(--fgd);animation:menuIn .8s var(--ease) both}
@keyframes menuIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.menu-top{display:flex;justify-content:space-between;align-items:center;min-height:68px;padding-top:12px;padding-bottom:12px}
.menu-top img{height:21px;width:auto}
.menu-x{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:var(--gold);color:var(--ink);cursor:pointer}
.menu-nav{display:flex;flex-direction:column;margin:auto 0;padding-top:24px;padding-bottom:24px}
.menu-nav a{word-spacing:.07em;display:flex;align-items:baseline;gap:18px;padding:12px 0;border-bottom:1px solid var(--lined);font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(34px,8.6vw,64px);line-height:1.05;letter-spacing:-.02em;animation:fadeUp .8s var(--ease) both;animation-delay:calc(.12s + var(--d,0) * 60ms)}
.menu-nav a .mono{font-size:11.5px;letter-spacing:.1em;color:var(--gold)}
.menu-foot{display:flex;flex-wrap:wrap;gap:10px 28px;padding-bottom:30px;font-size:15px;color:var(--mutd)}
.menu-foot a{color:var(--fgd)}
/* ===== stage ===== */
.stage{position:relative;height:calc(var(--sh) * 6.2)}
.stage .pin{background:var(--ink)}
.st-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s}
.eco.gl-ok .st-gl{opacity:1}
.eco.gl-ok .st-fallback{visibility:hidden}
.st-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0B1714;opacity:clamp(0,calc(1 - (var(--p,0) - .2) * 22),1);transform:scale(calc(1 + min(var(--p,0),.24) * 1.4))}
.stage[data-vid="off"] .st-video{visibility:hidden}
.st-fb2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.eco:not(.gl-ok) .st-fb2{opacity:min(clamp(0,calc((var(--p,0) - .2) * 20),1),clamp(0,calc((.87 - var(--p,0)) * 10),1))}
.eco.gl-ok .st-fb2{display:none}
.st-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,23,20,.84) 0%,rgba(11,23,20,.5) 40%,rgba(11,23,20,0) 74%),linear-gradient(180deg,rgba(11,23,20,.55) 0%,rgba(11,23,20,0) 24%,rgba(11,23,20,0) 52%,rgba(11,23,20,.92) 100%);opacity:clamp(0,calc(1 - (var(--p,0) - .02) * 14),1)}
.st-scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 72% 62% at 50% 52%,rgba(11,23,20,.8),rgba(11,23,20,.52));opacity:min(clamp(0,calc((var(--p,0) - .05) * 16),1),clamp(0,calc((.245 - var(--p,0)) * 18),1))}
.hero{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;opacity:clamp(0,calc(1 - (var(--p,0) - .02) * 20),1);transform:translateY(calc(var(--p,0) * -900px))}
.stage[data-hero="off"] .hero{visibility:hidden}
.hero-in{padding-bottom:calc(clamp(22px,3.6vh,40px) + var(--tb))}
.hero-eye{color:var(--gold);margin-bottom:clamp(18px,3vh,30px)}
.hero-h{font-size:clamp(40px,6.2vw,108px);line-height:1.12;letter-spacing:-.02em;color:#F7F3E9}
.hero-h em{color:var(--gold2)}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 48px;margin-top:clamp(56px,9vh,96px)}
.hero-sub{max-width:31em;font-size:clamp(15.5px,1.15vw,18px);line-height:1.6;color:#D9E0DB}
.hero-tag{display:flex;align-items:center;gap:12px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:clamp(13px,.95vw,15px);font-weight:500;letter-spacing:.01em;color:rgba(243,239,229,.8);white-space:nowrap}
.hero-tag::before{content:"";width:28px;height:1px;background:var(--gold2);opacity:.75}
.hero-ben{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(22px,3.8vh,40px)}
.hb{position:relative;display:flex;align-items:center;gap:16px;min-height:clamp(78px,10vh,92px);padding:16px 18px 16px 16px;border-radius:24px;overflow:hidden;color:#fff;background:linear-gradient(135deg,rgba(18,110,62,.62),rgba(6,58,34,.5));-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(143,221,176,.28),0 18px 40px -22px rgba(0,0,0,.6);transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .5s}
.hb::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.hb:hover{transform:translateY(-5px);background:linear-gradient(135deg,rgba(24,128,72,.72),rgba(8,70,40,.58));box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(143,221,176,.5),0 26px 50px -24px rgba(0,0,0,.7),0 0 40px -12px rgba(52,179,111,.55)}
.hb-ic{position:relative;flex-shrink:0;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:#076B3F;background:radial-gradient(circle at 35% 30%,#fff,#DDF2E5);box-shadow:0 0 0 6px rgba(255,255,255,.1),0 8px 20px -8px rgba(0,0,0,.5);transition:transform .6s var(--ease)}
.hb:hover .hb-ic{transform:rotate(-8deg) scale(1.06)}
.hb-ic svg{width:26px;height:26px}
.hb-tx{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;min-width:0;padding-right:34px}
.hb-n{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;color:#BFF0D3}
.hb-t{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.hb-leaf{position:absolute;right:-6px;bottom:-8px;width:62px;height:62px;opacity:.55;pointer-events:none;transition:transform .8s var(--ease),opacity .5s}
.hb:hover .hb-leaf{transform:rotate(-10deg) translate(-4px,-4px);opacity:.85}
.hb-wave{position:absolute;left:0;right:0;bottom:0;height:40px;width:100%;pointer-events:none;opacity:.5}
.ln{display:block;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block}
.eco.ready:not(.still) .ln>span{animation:lnUp 1.15s var(--ease) both;animation-delay:calc(.55s + var(--d,0) * 110ms);animation-play-state:paused}
.eco.ready:not(.still) .hfade{animation:fadeUp 1s var(--ease) both;animation-delay:calc(.85s + var(--d,0) * 100ms);animation-play-state:paused}
.eco.ready.go:not(.still) .ln>span,.eco.ready.go:not(.still) .hfade{animation-play-state:running}
@keyframes lnUp{from{transform:translateY(108%)}to{transform:none}}
.mf{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;padding:110px var(--pad) 60px;opacity:min(clamp(0,calc((var(--p,0) - .06) * 25),1),clamp(0,calc((.235 - var(--p,0)) * 25),1));transform:translateY(calc((var(--mp,0) - .5) * -40px))}
.mf-in{max-width:1120px;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,30px)}
.mf-eye{color:var(--gold)}
.mf-h{font-size:clamp(22px,2vw,30px);line-height:1.2;color:var(--fgd)}
.mf-h em{color:var(--gold2)}
.mf-text{word-spacing:.07em;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(30px,3.7vw,60px);line-height:1.16;letter-spacing:-.015em;color:#F7F3E9;text-wrap:balance}
.w{--t:clamp(0,calc((var(--mp,0) * (var(--n) + 4) - var(--i)) / 4),1);opacity:calc(.14 + .86 * var(--t))}
.pill{display:inline-block;width:1.85em;height:.8em;border-radius:999px;overflow:hidden;vertical-align:-.04em;margin:0 .06em;clip-path:inset(0 calc(50% * (1 - var(--t))) round 999px)}
.pill img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.35 - .35 * var(--t)))}
.hud{position:absolute;inset:0;pointer-events:none;color:rgba(234,246,242,.78);opacity:min(clamp(0,calc((var(--p,0) - .255) * 18),1),clamp(0,calc((.875 - var(--p,0)) * 18),1))}
.hud-frame{position:absolute;top:clamp(84px,12vh,118px);bottom:calc(clamp(20px,4vh,40px) + var(--tb));left:var(--gx);right:var(--gx)}
.hud-frame .c{position:absolute;width:20px;height:20px;border:1px solid rgba(234,246,242,.55)}
.hud-frame .tl{top:0;left:0;border-right:0;border-bottom:0}
.hud-frame .tr{top:0;right:0;border-left:0;border-bottom:0}
.hud-frame .bl{bottom:0;left:0;border-right:0;border-top:0}
.hud-frame .br{bottom:0;right:0;border-left:0;border-top:0}
.hud-top,.hud-bot{position:absolute;left:34px;right:34px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.hud-top{top:2px}
.hud-bot{bottom:2px}
.hud-top b,.hud-bot b{font-weight:500;color:#fff}
.hud-top,.hud-bot{font-size:12px}
.hud-scale b{text-transform:none;letter-spacing:.06em}
.hud-scale{display:flex;align-items:center;gap:12px}
.hud-scale i{position:relative;width:110px;height:1px;background:rgba(234,246,242,.8)}
.hud-scale i::before,.hud-scale i::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:rgba(234,246,242,.8)}
.hud-scale i::before{left:0}
.hud-scale i::after{right:0}
.hud-ret{position:absolute;left:50%;top:52%;width:min(68vh,640px,80vw);aspect-ratio:1;border-radius:50%;border:1px dashed rgba(234,246,242,.16);transform:translate(-50%,-50%);animation:retSpin 90s linear infinite}
@keyframes retSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hud-cross{position:absolute;left:50%;top:52%;width:26px;height:26px;transform:translate(-50%,-50%)}
.hud-cross::before,.hud-cross::after{content:"";position:absolute;background:rgba(234,246,242,.5)}
.hud-cross::before{left:50%;top:0;bottom:0;width:1px}
.hud-cross::after{top:50%;left:0;right:0;height:1px}
.st-stepshade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 52% 46% at 18% 86%,rgba(11,23,20,.82),rgba(11,23,20,0) 70%);opacity:min(clamp(0,calc((var(--p,0) - .255) * 18),1),clamp(0,calc((.885 - var(--p,0)) * 18),1))}
.steps{position:absolute;left:0;right:0;bottom:calc(clamp(64px,11vh,120px) + var(--tb));pointer-events:none}
.step{position:absolute;left:calc(var(--gx) + 34px);bottom:0;width:min(580px,calc(100% - 2 * var(--pad) - 68px));opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.step-n{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,246,242,.78)}
.step-n b{display:flex;align-items:center;gap:14px;font-weight:500;color:var(--c)}
.step-n b::after{content:"";width:28px;height:1px;background:var(--c);opacity:.8}
.step-h{font-size:clamp(46px,5.6vw,94px);line-height:.94;letter-spacing:-.03em;color:#F7F3E9;margin:.26em 0 .24em}
.step-p{font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--mutd);max-width:400px}
.stage[data-step="1"] .step[data-k="1"],.stage[data-step="2"] .step[data-k="2"],.stage[data-step="3"] .step[data-k="3"],.stage[data-step="4"] .step[data-k="4"]{opacity:1;transform:none}
.rail{position:absolute;right:calc(var(--gx) + 34px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:16px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;opacity:min(clamp(0,calc((var(--p,0) - .26) * 18),1),clamp(0,calc((.875 - var(--p,0)) * 18),1))}
.rail li{display:flex;align-items:center;gap:12px;color:rgba(234,246,242,.36);transition:color .5s}
.rail li::after{content:"";width:16px;height:1px;background:currentColor;transition:width .6s var(--ease)}
.stage[data-step="1"] .rail li:nth-child(1),.stage[data-step="2"] .rail li:nth-child(2),.stage[data-step="3"] .rail li:nth-child(3),.stage[data-step="4"] .rail li:nth-child(4){color:#fff}
.stage[data-step="1"] .rail li:nth-child(1)::after,.stage[data-step="2"] .rail li:nth-child(2)::after,.stage[data-step="3"] .rail li:nth-child(3)::after,.stage[data-step="4"] .rail li:nth-child(4)::after{width:40px}
.st-end{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;background:radial-gradient(ellipse 62% 52% at 50% 54%,rgba(11,23,20,.6),rgba(11,23,20,0));opacity:clamp(0,calc((var(--p,0) - .9) * 16),1)}
.st-end .wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.st-end .eyebrow{color:var(--gold)}
.st-end-h{word-spacing:.07em;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(34px,4.4vw,72px);line-height:1.04;letter-spacing:-.02em;color:#F8F4EA;max-width:17ch;text-wrap:balance}
.st-end-h em{color:var(--gold2)}
@keyframes vspin{to{transform:rotate(360deg)}}
/* photo card */
/* logos row */
/* dotted vines */
/* ECO OK bottles */
/* EcoCycle wheel */
/* golden field + benefits */

/* ===== EcoConcept ===== */
.ec{--bandh:clamp(54px,7.4vh,72px);--th:clamp(320px,54vh,600px);--txl:40px;--txr:120px;--gw2:calc(min(590px,50% - var(--pad)) - clamp(18px,2.2vw,32px));--iw:max(106vw,1100px);--suny:calc(100% - var(--bandh) - clamp(60px,9vh,110px));--sp:1;position:relative;z-index:2;height:calc(var(--sh) * 2.3);margin:-44px 0;border-radius:44px;overflow:clip}
.ec-pin{display:flex;flex-direction:column;background:#F2C690}
.ec-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ec-bg::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--suny) + 60px);background:linear-gradient(180deg,#F1F6F2 0%,#F2F3EC 30%,#F5EBDD 56%,#F6DCBD 80%,#F4CC9C 100%)}
.ec-farm{position:absolute;left:calc(50% - var(--iw) * 0.5262);top:calc(var(--suny) - var(--iw) * 0.0571);width:var(--iw);height:auto;-webkit-mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 6%,#000 12%);mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 6%,#000 12%);transform:translateY(calc((1 - var(--sp)) * 40px))}
.ec-sun,.ec-rays{position:absolute;left:50%;top:calc(var(--suny) + (1 - var(--sp)) * 40px);aspect-ratio:1;translate:-50% -50%}
.ec-sun{width:min(64vw,860px);border-radius:50%;mix-blend-mode:screen;background:radial-gradient(closest-side,#FFFFF6 0,#FFF8DE 3.5%,rgba(255,236,180,.85) 7%,rgba(255,222,150,.5) 17%,rgba(255,210,130,.22) 36%,rgba(255,210,130,0) 66%);opacity:calc(.3 + .5 * var(--sp))}
.ec-rays{width:min(130vw,1700px);background:repeating-conic-gradient(from 4deg,rgba(255,236,190,0) 0deg,rgba(255,236,190,.45) 2.5deg,rgba(255,236,190,0) 6deg,rgba(255,236,190,0) 13deg);-webkit-mask:radial-gradient(closest-side,#000,rgba(0,0,0,.35) 34%,transparent 62%);mask:radial-gradient(closest-side,#000,rgba(0,0,0,.35) 34%,transparent 62%);mix-blend-mode:soft-light;opacity:calc(.25 + .55 * var(--sp))}
.ec-motes i{position:absolute;left:var(--x);bottom:calc(var(--bandh) + 6%);width:calc(5px * var(--s));aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,244,214,.75) 45%,rgba(255,244,214,0));opacity:0;animation:ecMote calc(10s + var(--i) * 1.1s) linear infinite;animation-delay:calc(var(--i) * -1.9s)}
@keyframes ecMote{0%{opacity:0;transform:translate(0,0)}12%{opacity:.95}50%{transform:translate(14px,max(-22vh,-210px))}88%{opacity:.7}100%{opacity:0;transform:translate(-8px,max(-44vh,-420px))}}
.ec-stage{position:relative;z-index:2;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(12px,2vh,24px);padding:calc(70px + min(2.6vh,28px)) var(--pad) clamp(14px,2.6vh,32px)}
.ec-head{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.9vh,10px);width:min(1180px,100%)}
.ec-title{position:relative;line-height:0}
.ec-title img{display:block;height:clamp(56px,10.5vh,118px);width:auto}
.ec-shine{position:absolute;inset:0;-webkit-mask:url(../assets/img/logo-ecoconcept.webp) center / contain no-repeat;mask:url(../assets/img/logo-ecoconcept.webp) center / contain no-repeat;background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 60%) 100% 0 / 300% 100% no-repeat;opacity:0}
.ec-title.in .ec-shine{animation:ecShine 1.8s cubic-bezier(.45,.05,.3,1) .7s both}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-title .ec-shine{animation:ecShine 1.8s cubic-bezier(.45,.05,.3,1) 1.6s both}
@keyframes ecShine{0%{opacity:1;background-position:100% 0}100%{opacity:1;background-position:0 0}}
/* outer bracket */
.ec-subrow{--rr:clamp(24px,2.6vw,38px);--lw:4px;--g0:#056B3B;--g1:#22A35E;--g2:#A9EAC2;display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);width:100%}
.ec-sub{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:800;font-size:clamp(16px,1.7vw,27px);line-height:1.2;letter-spacing:.055em;text-transform:uppercase;color:#07362A;white-space:nowrap}
.ec-ln{position:relative;flex:1 1 0;height:var(--lw);filter:drop-shadow(0 0 5px rgba(52,179,111,.3))}
.ec-ln b{position:absolute;top:0;bottom:0;border-radius:var(--lw);transform:scaleX(0);transition:transform .5s var(--ease)}
.ec-ln[data-s="l"] b{left:calc(var(--rr) - 1px);right:0;background:linear-gradient(90deg,var(--g0),var(--g1) 48%,var(--g2));transform-origin:100% 50%}
.ec-ln[data-s="r"] b{left:0;right:calc(var(--rr) - 1px);background:linear-gradient(270deg,var(--g0),var(--g1) 48%,var(--g2));transform-origin:0 50%}
.ec-ln::before,.ec-ln::after{content:"";position:absolute;opacity:0;transition:opacity .3s,transform .4s var(--ease)}
.ec-ln::before{top:0;width:var(--rr);height:var(--rr);border-top:var(--lw) solid var(--g0)}
.ec-ln[data-s="l"]::before{left:0;border-left:var(--lw) solid var(--g0);border-top-left-radius:var(--rr)}
.ec-ln[data-s="r"]::before{right:0;border-right:var(--lw) solid var(--g0);border-top-right-radius:var(--rr)}
.ec-ln::after{top:calc(var(--rr) - 1px);width:var(--lw);height:var(--brk,clamp(170px,42vh,420px));border-radius:0 0 var(--lw) var(--lw);background:linear-gradient(180deg,var(--g0),var(--g1) 38%,rgba(52,179,111,.4) 72%,rgba(52,179,111,0));transform:scaleY(0);transform-origin:50% 0}
.ec-ln[data-s="l"]::after{left:0}
.ec-ln[data-s="r"]::after{right:0}
.ec:is([data-ec="1"],[data-ec="2"],[data-ec="3"]) .ec-ln b{transform:none;transition:transform .9s var(--ease) .1s}
.ec:is([data-ec="1"],[data-ec="2"],[data-ec="3"]) .ec-ln::before{opacity:1;transition:opacity .35s .75s}
.ec:is([data-ec="1"],[data-ec="2"],[data-ec="3"]) .ec-ln::after{opacity:1;transform:none;transition:opacity .3s .95s,transform 1.4s var(--ease) .95s}
/* glass cards */
.ec-grid{--wl:calc(((100cqw - clamp(22px,2.4vw,38px)) / 2 - 2 * clamp(14px,2vw,30px)) * .49);--u:min(clamp(230px,28.5vh,290px),var(--wl));position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.4vw,38px);width:calc(min(1180px,100%) - clamp(36px,4.4vw,64px));container-type:inline-size;perspective:1400px}
.ec-card{--cr:clamp(20px,1.9vw,28px);position:relative;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:clamp(22px,3.2vh,36px) clamp(14px,2vw,30px) clamp(12px,1.8vh,20px);border-radius:var(--cr);background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.32));-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 30px 60px -48px rgba(7,56,46,.45);opacity:0;transform:translateY(56px) rotateX(9deg) scale(.97);transform-origin:50% 100%;transition:opacity .35s,transform .5s var(--ease)}
.ec-card::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-55%;width:42%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.62) 50%,rgba(255,255,255,0));transform:skewX(-16deg);opacity:0;pointer-events:none}
.ec:is([data-ec="1"],[data-ec="2"],[data-ec="3"]) .ec-card[data-k="1"],.ec:is([data-ec="2"],[data-ec="3"]) .ec-card[data-k="2"]{opacity:1;transform:none;transition:opacity .8s var(--ease) .05s,transform 1.15s var(--ease) .05s}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-card[data-k="2"]{transition-delay:.25s}
.ec:is([data-ec="1"],[data-ec="2"],[data-ec="3"]) .ec-card[data-k="1"]::after{animation:ecGlass 1.5s cubic-bezier(.45,.05,.3,1) .55s both}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-card[data-k="2"]::after{animation:ecGlass 1.5s cubic-bezier(.45,.05,.3,1) .8s both}
@keyframes ecGlass{0%{opacity:1;left:-55%}100%{opacity:1;left:125%}}
.ec-logo{display:block;height:clamp(25.5px,4.1vh,40px);width:auto}
.ec-logo-cy{height:clamp(28px,4.4vh,43px);margin-top:calc(clamp(25.5px,4.1vh,40px) - clamp(28px,4.4vh,43px))}
.ec-kick{margin-top:clamp(4px,.7vh,8px);font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:700;font-size:clamp(13px,1.2vw,18px);line-height:1.2;letter-spacing:.05em;text-transform:uppercase;color:#0B3B2C}
.ec-cap{display:flex;align-items:center;gap:12px;margin-top:auto;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:600;font-size:clamp(13px,1.15vw,17px);line-height:1.3;color:#0A6B42;white-space:nowrap}
.ec-cap::before,.ec-cap::after{content:"";width:clamp(26px,4vw,64px);height:1.5px;border-radius:2px;background:linear-gradient(90deg,rgba(30,154,88,0),#2FA866)}
.ec-cap::after{transform:scaleX(-1)}
.ec-card :is(.ec-logo,.ec-kick,.ec-cap){opacity:0;transform:translateY(14px);transition:opacity .3s,transform .4s var(--ease)}
.ec:is([data-ec="1"],[data-ec="2"],[data-ec="3"]) .ec-card[data-k="1"] :is(.ec-logo,.ec-kick,.ec-cap),.ec:is([data-ec="2"],[data-ec="3"]) .ec-card[data-k="2"] :is(.ec-logo,.ec-kick,.ec-cap){opacity:1;transform:none;transition:opacity .7s var(--ease) .45s,transform .9s var(--ease) .45s}
.ec:is([data-ec="1"],[data-ec="2"],[data-ec="3"]) .ec-card[data-k="1"] .ec-kick,.ec:is([data-ec="2"],[data-ec="3"]) .ec-card[data-k="2"] .ec-kick{transition-delay:.55s}
.ec:is([data-ec="1"],[data-ec="2"],[data-ec="3"]) .ec-card[data-k="1"] .ec-cap{transition-delay:1.25s}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-card[data-k="2"] .ec-cap{transition-delay:1.7s}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-card[data-k="2"] :is(.ec-logo,.ec-kick){transition-delay:.6s}
/* Three-product grouping: larger bottles with comfortable spacing. */
.ec-bottles{--bh:calc(var(--u) * 1.12);position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,1.4vw,18px);margin:auto 0;padding:clamp(10px,1.6vh,20px) 0 clamp(10px,1.8vh,22px)}
.ec-b{position:relative;display:block;height:calc(var(--bh) * var(--h));aspect-ratio:var(--ar,532) / 1200;padding:0;border:0;border-radius:14px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ec-b img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;opacity:0;transform:translateY(46px) scale(.84);transition:opacity .3s,transform .4s var(--ease),translate .45s var(--ease),filter .45s}
.ec:is([data-ec="1"],[data-ec="2"],[data-ec="3"]) .ec-b img{opacity:1;transform:none;transition:opacity .5s calc(.55s + var(--d) * .13s),transform 1s cubic-bezier(.3,1.45,.45,1) calc(.55s + var(--d) * .13s),translate .45s var(--ease),filter .45s}
.ec-b:focus-visible{outline:2px solid #1E9A58;outline-offset:4px}
@media (hover:hover){
.ec-bottles:hover .ec-b img{filter:saturate(.78) brightness(1.04)}
.ec-bottles .ec-b:hover img{translate:0 -12px;filter:none}
}
/* plus */
.ec-plus{position:absolute;left:50%;top:50%;z-index:4;width:clamp(58px,6.4vw,96px);translate:-50% -50%;pointer-events:none}
.ec-plus img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 14px 16px rgba(5,80,46,.35));opacity:0;transform:rotate(-200deg) scale(.2);transition:opacity .3s,transform .45s var(--ease)}
.ec-plus::before{content:"";position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(214,245,226,.6) 45%,rgba(214,245,226,0));opacity:0;transform:scale(.4);transition:opacity .4s,transform .6s var(--ease)}
.ec-plus::after{content:"";position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;box-shadow:0 0 0 2px rgba(52,179,111,.5);opacity:0}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-plus img{opacity:1;transform:none;transition:opacity .4s,transform 1.25s cubic-bezier(.3,1.5,.45,1)}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-plus::before{opacity:1;transform:none;transition:opacity .8s .2s,transform 1.2s var(--ease) .2s}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-plus::after{animation:ecPing 3.2s cubic-bezier(.2,.6,.3,1) 1.1s infinite}
@keyframes ecPing{0%{opacity:.9;transform:scale(.7)}70%,100%{opacity:0;transform:scale(1.45)}}
/* cycle: hexagon loop of photo mini-cards (all sizes in cqw of the cycle box) */
.ec-cycle{--k:1;position:relative;width:min(100%,calc(var(--u) * 2));aspect-ratio:500 / 300;container-type:inline-size;margin:clamp(14px,2.2vh,24px) 0 clamp(12px,1.8vh,20px)}
.ec-arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ec-arcs[data-l="m"]{display:none}
.ec-arc{fill:none;stroke-width:3.3;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .35s}
.ec-arc-hi{fill:none;stroke:#D2F7E0;stroke-width:4.2;stroke-linecap:round;stroke-dasharray:.3 1.3;stroke-dashoffset:.3;opacity:0;animation:ecFlow 9s linear infinite;animation-delay:calc(var(--i) * 1.5s)}
.ec-head-a{fill:#139455;opacity:0;transition:opacity .2s}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-arc{stroke-dashoffset:0;transition:stroke-dashoffset .55s cubic-bezier(.5,0,.3,1) calc(1.15s + var(--i) * .13s)}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-head-a{opacity:1;transition:opacity .25s calc(1.6s + var(--i) * .13s)}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-arc-hi{opacity:1;transition:opacity .5s 2.4s}
@keyframes ecFlow{0%,11%{stroke-dashoffset:.3}19%{stroke-dashoffset:-1}19.01%,100%{stroke-dashoffset:.3}}
.ec-hub{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;overflow:hidden;background:#EAF4EC;box-shadow:0 0 0 calc(var(--k) * .9cqw) #fff,0 0 0 calc(var(--k) * 1.25cqw) rgba(52,179,111,.42),0 0 calc(var(--k) * 6cqw) calc(var(--k) * 1.2cqw) rgba(255,236,170,.7),0 calc(var(--k) * 3.6cqw) calc(var(--k) * 6cqw) calc(var(--k) * -2.8cqw) rgba(7,56,46,.5);opacity:0;transform:scale(.55);transition:opacity .3s,transform .4s var(--ease)}
.ec-hub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:ecHubImg 9s linear infinite;animation-delay:calc(var(--i) * 1.5s)}
@keyframes ecHubImg{0%{opacity:0;transform:scale(1.16)}3%{opacity:1}16.7%{opacity:1}20.5%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-hub{opacity:1;transform:none;transition:opacity .6s .75s,transform 1.1s cubic-bezier(.3,1.4,.45,1) .75s}
.ec-nodes{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.ec-node{position:absolute;left:var(--x);top:var(--y);width:16.8%;aspect-ratio:84 / 86;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--ease)}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-node{opacity:1;transform:none;transition:opacity .4s calc(.85s + var(--i) * .12s),transform .8s cubic-bezier(.3,1.5,.45,1) calc(.85s + var(--i) * .12s)}
.ec-ico{position:relative;display:block;flex:0 0 auto;width:76%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#EAF2EC;box-shadow:0 0 0 calc(var(--k) * .6cqw) #fff,0 0 0 calc(var(--k) * .95cqw) rgba(30,154,88,.8),0 calc(var(--k) * 2cqw) calc(var(--k) * 3.6cqw) calc(var(--k) * -1.6cqw) rgba(7,56,46,.5)}
.ec-ico img{display:block;width:100%;height:100%;object-fit:cover;animation:ecIco 9s linear infinite;animation-delay:calc(var(--i) * 1.5s)}
.ec-lab{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin-top:calc(var(--k) * -1.2cqw);height:calc(var(--k) * 4.2cqw);min-height:18px;padding:0 calc(var(--k) * 1.1cqw);border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(30,154,88,.3),0 6px 14px -8px rgba(7,56,46,.5);font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:700;font-size:max(10px,calc(var(--k) * 2.2cqw));line-height:1;letter-spacing:.005em;color:#0A4530;white-space:nowrap}
.ec-lab::after{content:attr(data-t);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:#139455;color:#fff;opacity:0;animation:ecLabOn 9s linear infinite;animation-delay:calc(var(--i) * 1.5s)}
.ec-node::after{content:"";position:absolute;left:12%;top:0;width:76%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 calc(var(--k) * .45cqw) #34B36F,0 0 calc(var(--k) * 3.6cqw) calc(var(--k) * .4cqw) rgba(52,179,111,.55);opacity:0;visibility:hidden;animation:ecRing 9s linear infinite;animation-delay:calc(var(--i) * 1.5s);pointer-events:none}
.ec:is([data-ec="2"],[data-ec="3"]) .ec-node::after{visibility:visible;transition:visibility 0s calc(1.2s + var(--i) * .12s)}
@keyframes ecRing{0%{opacity:0;transform:scale(.94)}3%,15%{opacity:1;transform:scale(1)}19%,100%{opacity:0;transform:scale(1.06)}}
@keyframes ecIco{0%,18%,100%{transform:scale(1)}4%,14%{transform:scale(1.1)}}
@keyframes ecLabOn{0%,19%,100%{opacity:0}3%,15%{opacity:1}}
@media (hover:hover){
.ec-cycle:hover :is(.ec-hub img,.ec-ico img,.ec-arc-hi),.ec-cycle:hover .ec-node::after,.ec-cycle:hover .ec-lab::after{animation-play-state:paused}
}
/* foreground trees */
.ec-trees{position:absolute;left:0;right:0;top:0;z-index:3;height:calc(var(--bandtop,calc(100% - var(--bandh))) + var(--th) * .09);pointer-events:none}
.ec-tree{position:absolute;bottom:0;height:var(--th);width:auto;max-width:none;transform-origin:50% 100%;translate:0 calc((1 - var(--sp)) * 46px);animation:ecSway 9s ease-in-out infinite alternate}
.ec-tree[data-s="l"]{right:calc(50% + var(--gw2) - var(--txl))}
.ec-tree[data-s="r"]{left:calc(50% + var(--gw2) - var(--txr));animation-duration:10.5s;animation-delay:-5s}
@keyframes ecSway{0%{rotate:-.7deg}100%{rotate:.8deg}}
/* benefit band */
.ec-band{position:relative;z-index:4;flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:calc(var(--bandh) + var(--tb));margin:0;padding:0 var(--pad) var(--tb);list-style:none;background:linear-gradient(90deg,#03362A,#0A5A3D 50%,#03362A);box-shadow:0 -1px 0 rgba(255,255,255,.18) inset;overflow:hidden;transform:translateY(102%);transition:transform .5s var(--ease)}
.ec-band::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgba(143,221,176,0),#8FDDB0 50%,rgba(143,221,176,0))}
.ec-band::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.13),rgba(255,255,255,0));animation:ecShim 7s ease-in-out infinite 2s}
@keyframes ecShim{0%{left:-30%}40%,100%{left:110%}}
.ec-band li{display:flex;align-items:center;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;font-size:clamp(13px,1.45vw,21px);letter-spacing:.08em;text-transform:uppercase;color:#F1F7F3;white-space:nowrap;opacity:0;transform:translateY(14px);transition:opacity .3s,transform .4s var(--ease)}
.ec-band li+li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin:0 clamp(14px,3.1vw,50px);border-radius:50%;background:#8FDDB0;box-shadow:0 0 10px rgba(143,221,176,.85)}
.ec[data-ec="3"] .ec-band{transform:none;transition:transform 1s var(--ease)}
.ec[data-ec="3"] .ec-band li{opacity:1;transform:none;transition:opacity .6s calc(.35s + var(--i) * .1s),transform .8s var(--ease) calc(.35s + var(--i) * .1s)}
.ec:not([data-live]) :is(.ec-motes i,.ec-hub img,.ec-ico img,.ec-arc-hi,.ec-tree),.ec:not([data-live]) .ec-lab::after,.ec:not([data-live]) .ec-node::after,.ec:not([data-live]) .ec-band::after,.ec:not([data-live]) .ec-plus::after{animation-play-state:paused}
.still :is(.ec-motes i,.ec-arc-hi,.ec-ico img,.ec-hub img,.ec-tree),.still .ec-lab::after,.still .ec-node::after,.still .ec-band::after,.still .ec-plus::after,.still .ec-card::after{animation:none}
.still .ec-hub img[style*="--i: 1"]{opacity:1}
/* unpinned layouts (portrait / short screens) */
.ec[data-flow]{height:auto}
.ec[data-flow] .ec-pin{position:relative;height:auto;min-height:0}
/* ===== cycle ===== */
.cycle{position:relative;height:calc(var(--sh) * 4.4);background:var(--ink)}
.cycle .pin{display:flex;align-items:center}
.cycle-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,5vw,80px);align-items:center;padding-top:64px}
.cycle-copy{display:flex;flex-direction:column;gap:20px}
.cycle-copy .eyebrow{color:var(--gold)}
.cycle-copy .h2 em{font-style:normal;color:var(--gold)}
.cycle-copy .body{color:var(--mutd);max-width:460px}
.cnow{position:relative;height:clamp(118px,17vh,168px);margin-top:clamp(8px,2vh,22px);border-top:1px solid var(--lined)}
.cn{position:absolute;left:0;right:0;top:20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 24px;align-items:end;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.cn-n{grid-row:span 2;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(70px,8vw,128px);line-height:.8;color:var(--gold);letter-spacing:-.04em}
.cn .mono{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mutd)}
.cn b{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(28px,2.6vw,42px);line-height:1;color:var(--fgd)}
.cycle[data-stage="0"] .cn[data-k="0"],.cycle[data-stage="1"] .cn[data-k="1"],.cycle[data-stage="2"] .cn[data-k="2"],.cycle[data-stage="3"] .cn[data-k="3"],.cycle[data-stage="4"] .cn[data-k="4"]{opacity:1;transform:none}
.cs{display:flex;gap:6px}
.cs li{position:relative;flex:1;height:3px;border-radius:3px;background:rgba(238,234,224,.14);overflow:hidden}
.cs li::after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(clamp(0,calc(var(--s,0) - var(--k) + 1),1))}
.dial{--D:min(calc(var(--sh) * .74),640px,44vw);--R:calc(var(--D) * .44);position:relative;width:var(--D);height:var(--D);justify-self:center}
.dial-svg,.dial-txt{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.drot{transform-box:view-box;transform-origin:320px 320px;transform:rotate(calc(var(--s,0) * -72deg))}
.dial-txt{animation:vspin 80s linear infinite}
.dial-ring{position:absolute;inset:0;transform:rotate(calc(var(--s,0) * -72deg))}
.node{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--R) * -1))}
.node-in{position:absolute;left:0;top:0;transform:translate(-50%,-7px) rotate(calc(var(--a) * -1 + var(--s,0) * 72deg));transform-origin:50% 7px;display:flex;flex-direction:column;align-items:center;gap:10px}
.node-dot{width:14px;height:14px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(238,234,224,.55);transition:transform .5s var(--ease),background .4s,box-shadow .4s}
.node-lab{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,234,224,.5);white-space:nowrap;transition:color .4s}
.cycle[data-stage="0"] .node[data-k="0"] .node-dot,.cycle[data-stage="1"] .node[data-k="1"] .node-dot,.cycle[data-stage="2"] .node[data-k="2"] .node-dot,.cycle[data-stage="3"] .node[data-k="3"] .node-dot,.cycle[data-stage="4"] .node[data-k="4"] .node-dot{background:var(--gold);box-shadow:0 0 0 8px rgba(52,179,111,.18);transform:scale(1.25)}
.cycle[data-stage="0"] .node[data-k="0"] .node-lab,.cycle[data-stage="1"] .node[data-k="1"] .node-lab,.cycle[data-stage="2"] .node[data-k="2"] .node-lab,.cycle[data-stage="3"] .node[data-k="3"] .node-lab,.cycle[data-stage="4"] .node[data-k="4"] .node-lab{color:#fff}
.dial-photo{position:absolute;left:50%;top:50%;width:calc(var(--D) * .62);height:calc(var(--D) * .62);transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;background:var(--ink2);box-shadow:0 0 0 1px rgba(238,234,224,.14),0 40px 80px -30px rgba(0,0,0,.75)}
.dphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.2);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.cycle[data-stage="0"] .dphoto[data-k="0"],.cycle[data-stage="1"] .dphoto[data-k="1"],.cycle[data-stage="2"] .dphoto[data-k="2"],.cycle[data-stage="3"] .dphoto[data-k="3"],.cycle[data-stage="4"] .dphoto[data-k="4"]{opacity:1;transform:scale(1.03)}
.dial-photo::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -40px 70px -30px rgba(11,23,20,.55)}
/* ===== applications ===== */
.apps{position:relative;z-index:2;margin:-44px 0;padding:clamp(110px,15vh,160px) 0 clamp(100px,13vh,150px);border-radius:44px}
.apps-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,100px)}
.apps-sticky{position:sticky;top:clamp(104px,15vh,150px);display:flex;flex-direction:column;gap:22px}
.apps-sticky .eyebrow{color:var(--tealdeep)}
.apps-sticky .h2 em{font-style:normal;color:var(--tealdeep)}
.apps-sticky .body{color:var(--mutl);max-width:470px}
.apps-tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--golddeep)}
.apps-list{margin-top:14px;border-top:1px solid var(--linel)}
.apps-list li{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:baseline;gap:4px 12px;padding:15px 0;border-bottom:1px solid var(--linel);color:rgba(13,25,21,.36);transition:color .5s,padding .6s var(--ease)}
.apps-list .mono{font-size:11.5px;letter-spacing:.1em}
.apps-list b{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(24px,2.2vw,34px);line-height:1.1;letter-spacing:-.015em}
.apps-list em{grid-column:2;font-style:normal;font-size:14px;color:inherit;opacity:.85}
.apps[data-active="0"] .apps-list li[data-k="0"],.apps[data-active="1"] .apps-list li[data-k="1"],.apps[data-active="2"] .apps-list li[data-k="2"],.apps[data-active="3"] .apps-list li[data-k="3"],.apps[data-active="4"] .apps-list li[data-k="4"]{color:var(--fgl);padding-left:14px}
.apps-right{display:flex;flex-direction:column;gap:clamp(40px,8vh,90px);padding-top:clamp(0px,5vh,56px)}
.app-fig{display:flex;flex-direction:column;gap:14px}
.app-frame{--r:30px;position:relative;aspect-ratio:6/5;border-radius:30px;background:var(--paper2)}
.app-frame img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;transform:translateY(calc(var(--n,0) * -7%))}
.app-fig figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.app-fig figcaption .mono{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mutl)}
.app-fig figcaption b{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:22px}
.app-cap{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.app-cap em{font-style:normal;font-size:13.5px;color:var(--mutl)}
/* ===== results ===== */
.proof{position:relative;z-index:1;padding:clamp(130px,17vh,180px) 0 clamp(90px,12vh,140px);background:var(--ink)}
.proof-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px 60px;align-items:end}
.proof-head .eyebrow{color:var(--gold)}
.proof-head .h2 em{color:var(--gold)}
.proof-head .body{color:var(--mutd)}
.proof-meta{margin-top:16px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(56px,8vh,96px);border-top:1px solid var(--lined)}
.stat{display:flex;flex-direction:column;gap:12px;padding:28px 24px 0 0}
.stat+.stat{padding-left:24px;border-left:1px solid var(--lined)}
.stat-v{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:300;font-size:clamp(44px,5vw,84px);line-height:.95;letter-spacing:-.045em;color:#F7F3E9;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-l{font-size:15px;line-height:1.45;color:var(--fgd)}
.stat-s{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mutd)}
.lib{margin-top:clamp(70px,10vh,120px)}
.lib-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--lined)}
.lib-title{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(24px,2vw,32px)}
.lib-title>span{font-style:italic;color:var(--mutd)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--lined);background:transparent;color:var(--fgd);font-family:'Be Vietnam Pro',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.chip sup{font-family:'JetBrains Mono',monospace;font-size:10px;opacity:.7}
.chip:hover{border-color:rgba(238,234,224,.5)}
.chip[aria-pressed="true"]{background:var(--fgd);color:var(--ink);border-color:var(--fgd)}
.row{border-bottom:1px solid var(--lined)}
.row-btn{width:100%;display:grid;grid-template-columns:56px minmax(0,1.25fr) minmax(0,1fr) minmax(0,.8fr) 44px;align-items:center;gap:16px;padding:24px 0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:padding .6s var(--ease)}
.row-btn:hover{padding-left:12px}
.row-n{font-size:11.5px;letter-spacing:.1em;color:var(--mutd)}
.row-crop{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(26px,2.6vw,42px);line-height:1.05;letter-spacing:-.02em}
.row-sub{font-size:14.5px;color:var(--mutd)}
.row-kpi{display:flex;align-items:baseline;justify-content:flex-end;gap:10px}
.row-kpi b{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:300;font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--gold)}
.row-kpi .mono{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mutd)}
.row-plus{position:relative;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--lined);transition:background .3s}
.row-plus::before,.row-plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--fgd);transform:translate(-50%,-50%);transition:transform .5s var(--ease),background .3s}
.row-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.row[data-open="true"] .row-plus{background:var(--gold);box-shadow:none}
.row[data-open="true"] .row-plus::before,.row[data-open="true"] .row-plus::after{background:var(--ink)}
.row[data-open="true"] .row-plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.row-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);padding:4px 0 40px;animation:fadeUp .8s var(--ease) both}
.rd-img{border-radius:24px;overflow:hidden;aspect-ratio:3/2;background:var(--ink2)}
.rd-img img{width:100%;height:100%;object-fit:cover;animation:imgIn 1.4s var(--ease) both}
@keyframes imgIn{from{transform:scale(1.15)}to{transform:none}}
.rd-body{display:flex;flex-direction:column;justify-content:center;gap:18px}
.rd-cap{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.rd-kicker{font-size:15px;color:var(--mutd)}
.rd-hero{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
.rd-hero b{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:300;font-size:clamp(52px,5.6vw,90px);line-height:.95;letter-spacing:-.05em;color:#F7F3E9}
.rd-hero>span{max-width:230px;font-size:16px;color:var(--fgd)}
.bars{display:flex;flex-direction:column;gap:12px;padding:20px 0;border-top:1px solid var(--lined);border-bottom:1px solid var(--lined)}
.bars-h{display:flex;justify-content:space-between;font-size:14px;font-weight:500}
.bars-h .mono{font-size:11px;color:var(--mutd)}
.bar{display:grid;grid-template-columns:110px minmax(0,1fr) 72px;align-items:center;gap:14px;font-size:14px}
.bar .mono{text-align:right;font-size:13px}
.bar-t{height:8px;border-radius:8px;background:rgba(238,234,224,.08);overflow:hidden}
.bar-f{display:block;height:100%;border-radius:8px;transform-origin:0 50%;animation:barGrow 1.3s var(--ease) .15s both}
.bar-f.p{background:linear-gradient(90deg,#2B8F86,#6CD3C7)}
.bar-f.c{background:rgba(238,234,224,.34)}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rd-profit{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.rd-profit .mono{width:100%;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mutd)}
.rd-profit b{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:300;font-size:42px;line-height:1;letter-spacing:-.04em;color:var(--gold)}
.rd-profit>span:not(.mono){font-size:14.5px;color:var(--mutd)}
.disclaimer{margin-top:26px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mutd)}
.follower{position:fixed;left:0;top:0;z-index:40;width:300px;height:210px;pointer-events:none;will-change:transform}
.follower img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:18px;opacity:0;clip-path:inset(100% 0 0 0 round 18px);transition:opacity .25s,clip-path .55s var(--ease)}
.follower[data-show="0"] img[data-i="0"],.follower[data-show="1"] img[data-i="1"],.follower[data-show="2"] img[data-i="2"],.follower[data-show="3"] img[data-i="3"],.follower[data-show="4"] img[data-i="4"],.follower[data-show="5"] img[data-i="5"],.follower[data-show="6"] img[data-i="6"],.follower[data-show="7"] img[data-i="7"],.follower[data-show="8"] img[data-i="8"]{opacity:1;clip-path:inset(0 0 0 0 round 18px)}
/* ===== products ===== */
.prod{--H:min(calc(var(--sh) * .6),600px);position:relative;height:calc(var(--sh) * 3.6)}
.prod .pin{background:var(--ink)}
.pbg{position:absolute;inset:0;background:radial-gradient(ellipse 52% 62% at 50% 53%,var(--gs),transparent 68%),var(--bg);clip-path:circle(0% at 50% 53%);transition:clip-path 1.25s var(--ease2)}
.prod[data-prod="0"] .pbg[data-k="0"],.prod[data-prod="1"] .pbg[data-k="1"],.prod[data-prod="2"] .pbg[data-k="2"],.prod[data-prod="3"] .pbg[data-k="3"],.prod[data-prod="4"] .pbg[data-k="4"]{clip-path:circle(150% at 50% 53%)}
.prod-names{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;overflow:hidden}
.pname{word-spacing:.07em;position:absolute;top:50%;left:50%;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(120px,21vw,360px);line-height:1;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px rgba(238,234,224,.26);white-space:nowrap;opacity:0;transform:translate(-50%,-38%);transition:opacity .9s var(--ease),transform 1.3s var(--ease)}
.prod[data-prod="0"] .pname[data-k="0"],.prod[data-prod="1"] .pname[data-k="1"],.prod[data-prod="2"] .pname[data-k="2"],.prod[data-prod="3"] .pname[data-k="3"],.prod[data-prod="4"] .pname[data-k="4"]{opacity:1;transform:translate(calc(-50% + var(--nx,0vw)),-50%);transition:opacity .9s var(--ease),transform .2s linear}
.prod-head{position:absolute;top:clamp(90px,12.5vh,126px);left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.prod-head .eyebrow{color:var(--gold)}
.prod-sub{display:none}
.prod-title{max-width:22ch;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(22px,2vw,30px);line-height:1.15;text-align:right;color:var(--fgd)}
.prod-title em{color:var(--gold2)}
.prod-stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.pitem{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.prod[data-prod="0"] .pitem[data-k="0"],.prod[data-prod="1"] .pitem[data-k="1"],.prod[data-prod="2"] .pitem[data-k="2"],.prod[data-prod="3"] .pitem[data-k="3"],.prod[data-prod="4"] .pitem[data-k="4"]{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s}
.pbottle{position:absolute;left:50%;top:53%;height:var(--H);transform:translate(-50%,-50%);opacity:var(--bo,1)}
.pbottle img{height:100%;width:auto;filter:drop-shadow(0 50px 60px rgba(0,0,0,.55));animation:none!important;transform:none!important}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
.pnotes{position:absolute;left:50%;top:53%;width:0;height:0}
.pnote{position:absolute;display:flex;flex-direction:column;gap:6px;width:240px}
.pnote.l{right:calc(var(--H) * .22 + 96px);align-items:flex-end;text-align:right}
.pnote.r{left:calc(var(--H) * .22 + 96px)}
.pnote.n1{top:calc(var(--H) * -.24)}
.pnote.n2{top:calc(var(--H) * -.2)}
.pnote.n3{top:calc(var(--H) * .12)}
.pnote .mono{font-size:12px;letter-spacing:.06em;color:rgba(238,234,224,.8)}
.pnote b{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:300;font-size:clamp(19px,1.6vw,26px);line-height:1.15;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.pnote i{position:absolute;top:7px;width:84px;height:1px;background:rgba(238,234,224,.55);transform:scaleX(0);transition:transform 1s var(--ease) .35s}
.pnote i::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--glow)}
.pnote.l i{right:-94px;transform-origin:0 50%}
.pnote.l i::after{right:-3px}
.pnote.r i{left:-94px;transform-origin:100% 50%}
.pnote.r i::after{left:-3px}
.pnote>span,.pnote>b{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .5s,transform .9s var(--ease) .5s}
.prod[data-prod="0"] .pitem[data-k="0"] .pnote i,.prod[data-prod="1"] .pitem[data-k="1"] .pnote i,.prod[data-prod="2"] .pitem[data-k="2"] .pnote i,.prod[data-prod="3"] .pitem[data-k="3"] .pnote i,.prod[data-prod="4"] .pitem[data-k="4"] .pnote i{transform:scaleX(1)}
.prod[data-prod="0"] .pitem[data-k="0"] .pnote>*,.prod[data-prod="1"] .pitem[data-k="1"] .pnote>*,.prod[data-prod="2"] .pitem[data-k="2"] .pnote>*,.prod[data-prod="3"] .pitem[data-k="3"] .pnote>*,.prod[data-prod="4"] .pitem[data-k="4"] .pnote>*{opacity:1;transform:none}
.prod[data-prod="0"] .pitem[data-k="0"] .pnote i,.prod[data-prod="1"] .pitem[data-k="1"] .pnote i,.prod[data-prod="2"] .pitem[data-k="2"] .pnote i,.prod[data-prod="3"] .pitem[data-k="3"] .pnote i,.prod[data-prod="4"] .pitem[data-k="4"] .pnote i{opacity:1}
.prod-info{position:absolute;left:0;right:0;bottom:calc(clamp(96px,13vh,132px) + var(--tb));z-index:3;pointer-events:none}
.pinfo{position:absolute;left:var(--gx);bottom:0;width:min(400px,34vw);display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .7s var(--ease),transform .9s var(--ease),visibility 0s linear .7s}
.prod[data-prod="0"] .pinfo[data-k="0"],.prod[data-prod="1"] .pinfo[data-k="1"],.prod[data-prod="2"] .pinfo[data-k="2"],.prod[data-prod="3"] .pinfo[data-k="3"],.prod[data-prod="4"] .pinfo[data-k="4"]{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .7s var(--ease) .15s,transform .9s var(--ease) .15s,visibility 0s}
.pi-n{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--glow)}
.pi-name{font-size:clamp(44px,4.6vw,76px);line-height:.95;letter-spacing:-.03em;color:#F7F3E9}
.pi-line{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(20px,1.6vw,24px);line-height:1.2;color:#F3EFE5}
.pi-desc{font-size:15px;line-height:1.55;color:var(--mutd)}
.pi-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.prod-aside{position:absolute;right:var(--gx);bottom:calc(clamp(96px,13vh,132px) + var(--tb));z-index:3;max-width:260px;text-align:right;font-size:14px;line-height:1.55;color:var(--mutd)}
.prod-aside a{display:inline-flex;align-items:center;gap:10px;margin-top:12px;color:var(--fgd);font-weight:600}
.prod-aside a span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(238,234,224,.35);transition:background .3s,color .3s}
.prod-aside a:hover span{background:var(--gold);color:var(--ink);box-shadow:none}
.prod-nav{position:absolute;left:var(--gx);right:var(--gx);bottom:calc(clamp(22px,4vh,40px) + var(--tb));z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pn{position:relative;display:flex;align-items:baseline;gap:10px;min-height:44px;padding:14px 0 0;background:none;border:0;color:rgba(238,234,224,.5);font-family:'Be Vietnam Pro',sans-serif;font-size:13px;font-weight:500;text-align:left;cursor:pointer;transition:color .4s}
.pn::before,.pn::after{content:"";position:absolute;left:0;right:0;top:0;height:2px}
.pn::before{background:rgba(238,234,224,.14)}
.pn::after{background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)}
.pn .mono{font-size:10.5px}
.pn:hover{color:#fff}
.prod[data-prod="0"] .pn[data-k="0"],.prod[data-prod="1"] .pn[data-k="1"],.prod[data-prod="2"] .pn[data-k="2"],.prod[data-prod="3"] .pn[data-k="3"],.prod[data-prod="4"] .pn[data-k="4"]{color:#fff}
.prod[data-prod="0"] .pn[data-k="0"]::after,.prod[data-prod="1"] .pn[data-k="1"]::after,.prod[data-prod="2"] .pn[data-k="2"]::after,.prod[data-prod="3"] .pn[data-k="3"]::after,.prod[data-prod="4"] .pn[data-k="4"]::after{transform:scaleX(1)}
/* dialog */
.dlg{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.dlg-scrim{position:absolute;inset:0;border:0;background:rgba(5,12,10,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;animation:fade .4s ease both}
.dlg-panel{position:relative;width:min(1120px,100%);max-height:min(88vh,860px);overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);border-radius:32px;background:var(--paper);color:var(--fgl);animation:dlgIn .7s var(--ease) both}
@keyframes dlgIn{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}
.dlg-side{position:relative;display:grid;place-items:center;min-height:460px;padding:40px 20px;background:radial-gradient(ellipse 60% 60% at 50% 56%,var(--gs),transparent 70%),var(--bg)}
.dlg-side img{height:min(52vh,460px);width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.dlg-vol{position:absolute;left:24px;bottom:22px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,234,224,.8)}
.dlg-main{display:flex;flex-direction:column;gap:14px;padding:clamp(28px,4vw,52px)}
.dlg-k{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mutl)}
.dlg-main h3{font-size:clamp(44px,4.4vw,70px);line-height:.95;letter-spacing:-.03em}
.dlg-sub{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:22px;color:var(--tealdeep)}
.dlg-desc{font-size:16px;color:var(--mutl)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;margin:10px 0 6px;padding:5px;border-radius:999px;background:var(--paper2)}
.tab{min-height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--mutl);font-family:'Be Vietnam Pro',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background .3s,color .3s}
.tab[aria-selected="true"]{background:var(--fgl);color:var(--paper)}
.spec{display:flex;flex-direction:column}
.spec-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--linel);font-size:15px}
.spec-row b{font-weight:500}
.bens{display:flex;flex-direction:column;gap:10px}
.bens li{display:flex;gap:14px;padding:14px 16px;border-radius:16px;background:var(--paper2);font-size:15px;line-height:1.5}
.bens li::before{content:"";flex-shrink:0;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--golddeep)}
.use{display:flex;flex-direction:column;gap:10px}
.use-m{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tealdeep)}
.use-row{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:16px;background:var(--paper2)}
.use-row div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px}
.use-row b{font-size:15.5px;font-weight:600}
.use-row .mono{font-size:13px;color:var(--tealdeep)}
.use-row p{font-size:14.5px;line-height:1.55;color:var(--mutl)}
.compat{padding-left:14px;border-left:2px solid var(--gold);font-size:14px;line-height:1.55;color:var(--mutl)}
.dlg-x{position:absolute;top:16px;right:16px;z-index:2;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:var(--fgl);color:var(--paper);cursor:pointer}
/* ===== values ===== */
.values{position:relative;z-index:2;margin:-44px 0;padding:clamp(120px,16vh,170px) 0 clamp(90px,12vh,130px);border-radius:44px}
.values-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px 60px;align-items:end;margin-bottom:clamp(50px,8vh,90px)}
.values-head .eyebrow{color:var(--tealdeep)}
.values-head .h2 em{font-style:normal;color:var(--tealdeep)}
.values-head .body{color:var(--mutl)}
.vstack{position:relative;padding-bottom:calc(var(--sh) * .14)}
.vcard{position:sticky;top:calc(96px + var(--i) * 22px);height:calc(var(--sh) * .74);margin-bottom:calc(var(--sh) * .14)}
.vcard:last-child{margin-bottom:0}
.vc-in{position:relative;height:100%;border-radius:34px;overflow:hidden;background:var(--ink);color:#F7F3E9;transform-origin:50% 0;transform:scale(calc(1 - var(--q,0) * .05))}
.vc-in::after{content:"";position:absolute;inset:0;background:#05100C;opacity:calc(var(--q,0) * .42);pointer-events:none}
.vc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vc-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,23,20,0) 28%,rgba(11,23,20,.86) 100%),linear-gradient(90deg,rgba(11,23,20,.55) 0%,rgba(11,23,20,0) 62%)}
.vc-body{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:20px 40px;padding:clamp(28px,4vw,56px)}
.vc-n{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(90px,11vw,180px);line-height:.78;letter-spacing:-.05em;color:var(--gold)}
.vc-body h3{font-size:clamp(40px,4.6vw,76px);line-height:.95;letter-spacing:-.03em}
.vc-body p{max-width:520px;margin-top:14px;font-size:17px;line-height:1.6;color:#DDE3DF}
.vc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.vc-tags li{padding:9px 13px;border-radius:999px;background:rgba(246,242,232,.14);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
/* ===== cta ===== */
.cta{position:relative;height:calc(var(--sh) * 2.4);background:var(--ink)}
.cta-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 70%;transform:scale(calc(1.18 - var(--p,0) * .18))}
.cta-mask{position:absolute;inset:0;width:100%;height:100%;opacity:clamp(0,calc((.78 - var(--p,0)) * 12),1)}
.still .cta-mask{opacity:clamp(0,calc((.55 - var(--p,0)) * 6),1)}
.cta-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,23,20,.86),rgba(11,23,20,.4) 62%,rgba(11,23,20,.18));opacity:clamp(0,calc((var(--p,0) - .6) * 6),1)}
.cta-top{position:absolute;left:0;right:0;top:clamp(110px,17vh,180px);display:flex;justify-content:center;opacity:clamp(0,calc((.3 - var(--p,0)) * 6),1)}
.cta-top .eyebrow{color:var(--gold)}
.cta-hint{position:absolute;left:0;right:0;bottom:clamp(30px,6vh,60px);display:flex;justify-content:center;opacity:clamp(0,calc((.2 - var(--p,0)) * 8),1)}
.cta-content{position:absolute;left:0;right:0;bottom:calc(clamp(40px,8vh,90px) + var(--tb));display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:40px;opacity:clamp(0,calc((var(--p,0) - .7) * 7),1);transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .7) * 7),1)) * 40px))}
.cta[data-cta="off"] .cta-content{visibility:hidden}
.cta-content .eyebrow{color:var(--gold);margin-bottom:22px}
.cta-content h2{font-size:clamp(54px,7.4vw,124px);line-height:.9;letter-spacing:-.035em;color:#F8F4EA}
.cta-content h2 em{display:block;color:var(--gold2)}
.cta-content p{max-width:520px;margin-top:22px;font-size:18px;line-height:1.6;color:#DDE3DF}
.cards{display:flex;flex-direction:column;gap:10px}
.ccard{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;border-radius:22px;background:rgba(11,23,20,.58);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(238,234,224,.18);transition:background .35s,transform .5s var(--ease)}
.ccard:hover{background:rgba(11,23,20,.8);transform:translateY(-3px)}
.ccard .mono{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mutd)}
.ccard strong{font-size:clamp(18px,1.5vw,21px);font-weight:500}
.ccard.gold{background:var(--hg);color:#fff;box-shadow:none}
.ccard.gold .mono{color:rgba(255,255,255,.72)}
.ccard.gold:hover{background:#0A7F4B}
/* ===== footer ===== */
.foot{position:relative;overflow:clip;display:flex;flex-direction:column;padding:clamp(72px,11vh,120px) 0 clamp(22px,3vh,32px);background:radial-gradient(70% 90% at 85% 0%,rgba(52,179,111,.12),rgba(52,179,111,0) 70%),#0B1714;color:#F3EFE5}
.foot>*{position:relative;z-index:1}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:40px;padding-bottom:clamp(30px,5vh,52px);border-bottom:1px solid rgba(143,221,176,.2)}
.foot-logo{display:block;height:clamp(38px,3.6vw,54px);width:auto}
.foot-tag{margin-top:14px;font-size:15px;letter-spacing:.14em;color:rgba(243,239,229,.82)}
.foot-bsc{display:inline-flex;align-items:baseline;gap:11px;margin-top:22px;font-size:19px;line-height:1;letter-spacing:.01em;color:rgba(243,239,229,.5);transition:color .25s}
.foot-bsc img{position:relative;top:.5px;height:16px;width:auto;opacity:.75}
.foot-bsc:hover{color:#fff}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:13px;font-size:15.5px;letter-spacing:.04em;color:rgba(243,239,229,.9)}
.foot-col .mono{margin-bottom:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(191,240,211,.75)}
.foot-col a{transition:color .25s}
.foot-col a:hover{color:#8FDDB0}
.foot-pill{display:inline-flex;align-items:center;gap:12px;margin-top:6px;padding:12px 22px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(243,239,229,.55);font-size:14.5px;letter-spacing:.04em;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
.foot-pill:hover{background:#F3EFE5;color:#0B1714!important;box-shadow:none}
.foot-word{margin-top:clamp(28px,6vh,72px);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:500;font-size:clamp(56px,10.4vw,176px);line-height:.94;letter-spacing:-.045em;color:#F3EFE5}
.foot-word em{position:relative;display:inline-block;margin-right:.04em;font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.02em;color:#A8D9B3}
.foot-swash{position:absolute;left:-2%;bottom:-.16em;width:110%;height:.26em;overflow:visible;pointer-events:none}
.foot-swash path{fill:none;stroke:#A8D9B3;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .5s}
.foot-word.in .foot-swash path,.still .foot-swash path{stroke-dashoffset:0}
.foot-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:0;padding-top:28px;font-size:13px;letter-spacing:.04em;color:rgba(243,239,229,.78)}
.foot-r{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.foot-r>*+*{padding-left:26px;border-left:1px solid rgba(243,239,229,.3)}
.foot-lang b{font-weight:500;color:#fff}
.foot-lang a{color:rgba(243,239,229,.6)}
.foot-lang a:hover,.foot-bot a:hover{color:#fff}
.foot-up{display:grid;place-items:center;width:52px;height:52px;padding:0!important;border:0!important;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(243,239,229,.6);font-size:18px;transition:background .3s,color .3s}
.foot-up:hover{background:#F3EFE5;color:#0B1714!important}
/* ===== responsive ===== */
@media (max-width:1100px){
.hdr-nav{display:none}
.hdr-burger{display:block}
.hdr-in{grid-template-columns:minmax(0,1fr) auto}
.lg{height:24px}
}
@media (min-height:1601px){
.eco{--tb:0px}
.pin{height:var(--sh)}
.cycle,.cta,.ec{height:var(--sh)}
.stage,.prod{height:calc(var(--sh) + 44px)}
.curtain,.cta-hint{display:none}
}
@media (max-width:900px){
.apps-grid,.proof-head,.values-head,.cta-content,.cycle-grid{grid-template-columns:minmax(0,1fr)}
.hero-ben{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hb{min-height:78px;padding:12px;gap:12px;border-radius:20px}
.hb-ic{width:44px;height:44px}
.hb-ic svg{width:20px;height:20px}
.hb-t{font-size:14.5px}
.hb-tx{padding-right:22px}
.hb-leaf{width:44px;height:44px}
.rail{display:none}
.hero-h{font-size:clamp(34px,10.4vw,48px);line-height:1.14}
.hero-row{flex-direction:column;align-items:flex-start;gap:14px;margin-top:clamp(28px,5vh,44px)}
.hero-tag{font-size:13px}
.hud-ret{width:86vw}
.hud-top span:first-child,.hud-bot span:first-child{display:none}
.step{left:var(--pad);width:calc(100% - 2 * var(--pad))}
.steps{bottom:calc(clamp(54px,9vh,90px) + var(--tb))}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{padding-bottom:26px}
.stat:nth-child(3){padding-left:0;border-left:0}
.stat:nth-child(n+3){border-top:1px solid var(--lined)}
.apps-sticky{position:relative;top:0}
.apps-list{display:none}
.row-btn{grid-template-columns:34px minmax(0,1fr) 44px;gap:6px 12px;padding:20px 0}
.row-crop{grid-column:2}
.row-sub{grid-column:2}
.row-kpi{grid-column:2;justify-content:flex-start}
.row-plus{grid-column:3;grid-row:1 / span 3}
.row-detail{grid-template-columns:minmax(0,1fr)}
.dlg-panel{grid-template-columns:minmax(0,1fr)}
.dlg-side{min-height:280px}
.dlg-side img{height:240px}
.foot-top{grid-template-columns:minmax(0,1fr)}
.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot-col:last-child{grid-column:1 / -1}
.foot-addr{display:none}
.foot-r>*+*{padding-left:0;border-left:0}
.cycle-grid{gap:14px;padding-top:64px}
.dial{--D:min(74vw,calc(var(--sh) * .42))}
.cycle-copy{gap:12px}
.cycle-copy .body{font-size:15px;line-height:1.55}
.node-lab{opacity:0}
.cycle[data-stage="0"] .node[data-k="0"] .node-lab,.cycle[data-stage="1"] .node[data-k="1"] .node-lab,.cycle[data-stage="2"] .node[data-k="2"] .node-lab,.cycle[data-stage="3"] .node[data-k="3"] .node-lab,.cycle[data-stage="4"] .node[data-k="4"] .node-lab{opacity:1}
.cnow{height:96px}
.cn-n{font-size:64px}
.prod{--H:min(calc(var(--sh) * .29),270px)}
.prod-sub{display:block;max-width:34ch;font-size:14px;line-height:1.5;color:var(--mutd)}
.pnote{display:none}
.prod-head{flex-direction:column;gap:10px}
.prod-title{text-align:left}
.pinfo{right:var(--pad);width:auto}
.pi-name{font-size:40px}
.pi-desc{font-size:14px}
.prod-aside{display:none}
.pbottle{top:45.5%}
.pn{font-size:11px;flex-direction:column;gap:2px}
.cta-content{gap:22px}
}
@media (max-width:600px){
.tabs{flex-wrap:nowrap;width:100%}
.tab{flex:1;padding:0 8px}
.hdr-r .btn-gold{display:none}
.bar{grid-template-columns:84px minmax(0,1fr) 56px}
.vc-body{grid-template-columns:minmax(0,1fr)}
.vc-n{font-size:72px}
}
@media (max-width:600px) and (min-height:561px){
.prod{--H:min(calc(var(--sh) * .48),420px,calc((100vw - 220px) * 2.3))}
.prod-sub,.pname,.pi-desc{display:none}
.pbottle{left:calc(var(--pad) + var(--H) * .2);top:56%}
.prod-info{top:0;bottom:0}
.pinfo{left:calc(var(--pad) + var(--H) * .43 + 8px);right:var(--pad);top:56%;bottom:auto;width:auto;gap:8px;translate:0 -50%}
.pi-n{font-size:10.5px;letter-spacing:.1em}
.pi-name{font-size:clamp(30px,8.6vw,38px);line-height:1}
.pi-line{font-size:clamp(15px,4.1vw,17px);line-height:1.3;text-wrap:balance}
.pi-cta{margin-top:10px}
.pi-cta .btn{min-height:44px;gap:8px;padding:0 5px 0 15px;font-size:12.5px}
.pi-cta .btn .arr{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
.eco *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* Keep hero descenders clear of the following line during and after reveal. */
.hero-h .ln{padding-bottom:.18em;margin-bottom:-.18em}
/* Mobile portfolio: align the information column with the bottle silhouette. */
.pi-id{display:contents}
.pi-mobile{display:none}
@media (max-width:600px) and (min-height:561px){
.prod{--H:min(calc(var(--sh) * .48),420px,calc(100vw * .94))}
.pinfo{min-height:var(--H);gap:clamp(14px,2.1svh,20px);justify-content:space-between;padding:4px 0}
.pi-n{font-size:9px;letter-spacing:.07em}
.pi-name{font-size:clamp(30px,8.8vw,40px);line-height:1.05}
.pi-line{font-size:clamp(14px,3.8vw,16px);line-height:1.35;text-wrap:pretty}
.pi-id{display:flex;flex-direction:column;gap:5px}
.pi-mobile{display:contents}
.pi-summary{display:grid;gap:5px}
.pi-category{font-size:clamp(10px,2.8vw,12px);line-height:1.45;letter-spacing:.025em;color:var(--glow)}
.pinfo .pi-line{display:none}
.pi-purpose{font-size:clamp(13px,3.7vw,16px);font-weight:500;line-height:1.4;text-wrap:pretty;color:#F3EFE5}
.pi-benefits{list-style:none;margin:0;padding:clamp(10px,1.8svh,16px) 0 0;border-top:1px solid rgba(243,239,229,.22);display:grid;gap:10px}
.pi-benefits li{position:relative;padding-left:12px;font-size:clamp(11px,3.1vw,13px);line-height:1.5;color:rgba(243,239,229,.78);text-wrap:pretty}
.pi-benefits li::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;background:var(--glow)}
.pi-cta{margin-top:0}
.pi-cta .btn{width:100%;justify-content:space-between;min-height:44px;padding-left:12px;font-size:clamp(10px,2.85vw,12.5px);gap:4px}
.pi-cta .btn .arr{flex:0 0 28px;width:28px;height:28px}
}
@media (max-width:360px) and (min-height:561px){
.pinfo{gap:12px}
.pi-id{gap:4px}
.pi-summary{gap:4px}
.pi-line{font-size:13px}
.pi-purpose{font-size:12px;line-height:1.35}
.pi-benefits{gap:8px;padding-top:9px}
.pi-benefits li{font-size:10.5px;line-height:1.4}
}
/* Avoid the opening frame while restoring a deliberate language switch. */
.language-restoring [data-eco-root]{visibility:hidden}

@media (max-width:900px) and (max-aspect-ratio:1/1),(max-width:1180px) and (max-aspect-ratio:4/5){
.ec{height:auto}
.ec-pin{position:relative;height:auto}
.ec-stage{justify-content:flex-start;gap:clamp(16px,3svh,26px);padding:calc(68px + 3.5svh) var(--pad) min(64vw,340px)}
.ec-title img{height:clamp(50px,14vw,92px)}
.ec-sub{font-size:clamp(14px,4vw,22px)}
.ec-subrow{justify-content:center;--lw:3.5px}
.ec-ln{flex:0 0 clamp(26px,9vw,70px)}
.ec-ln::before,.ec-ln::after{display:none}
.ec-ln[data-s="l"] b{left:0}
.ec-ln[data-s="r"] b{right:0}
.ec-grid{grid-template-columns:minmax(0,1fr);row-gap:14px;width:100%;max-width:560px;perspective:none}
.ec-plus{position:relative;left:auto;top:auto;translate:none;justify-self:center;width:clamp(50px,13vw,70px);margin:clamp(-36px,-7vw,-26px) 0}
.ec-grid>.ec-card[data-k="1"]{padding-bottom:clamp(34px,10vw,46px)}
.ec-grid>.ec-card[data-k="2"]{padding-top:clamp(36px,10.5vw,50px)}
.ec-card{--cr:clamp(18px,5vw,26px);padding:clamp(24px,6.5vw,34px) clamp(12px,4vw,24px) clamp(16px,4.4vw,24px)}
.ec-logo{height:clamp(25.5px,7.3vw,40px)}
.ec-logo-cy{height:clamp(30px,8.8vw,48px);margin-top:0}
.ec-kick{font-size:clamp(13px,3.6vw,17px)}
.ec-cap{font-size:clamp(13px,3.7vw,16px)}
.ec-bottles{--bh:clamp(134px,47.5vw,265px);gap:clamp(8px,2.4vw,14px)}
.ec-cycle{--k:1.5625;width:min(100%,380px);aspect-ratio:320 / 460}
.ec-arcs[data-l="d"]{display:none}
.ec-arcs[data-l="m"]{display:block}
.ec-node{left:var(--mx);top:var(--my);width:26.25%}
.ec-hub{width:36%}
.ec{--th:min(58vw,320px)}
.ec-tree[data-s="l"]{right:auto;left:calc(var(--th) * -.2)}
.ec-tree[data-s="r"]{left:auto;right:calc(var(--th) * -.24)}
.ec{--iw:max(250vw,980px)}
.ec-motes{display:none}
.ec-sun{width:min(130vw,720px)}
.ec-band{height:auto;display:grid;grid-template-columns:repeat(6,auto);justify-content:center;row-gap:10px;padding:16px var(--pad) calc(18px + var(--tb))}
.ec-band li{justify-content:center;font-size:clamp(12.5px,3.6vw,17px)}
.ec-band li:nth-child(-n+3){grid-column:span 2}
.ec-band li:nth-child(n+4){grid-column:span 3}
.ec-band li:nth-child(4)::before{display:none}
.ec-band li+li::before{margin:0 clamp(10px,3.4vw,22px)}
}
@media (max-height:700px) and (min-aspect-ratio:1/1){
.ec{height:auto}
.ec-pin{position:relative;height:auto}
.ec-stage{padding:calc(62px + 3vh) var(--pad) 190px}
.ec-title img{height:clamp(44px,12vh,72px)}
.ec-grid{--u:min(clamp(200px,40vh,260px),var(--wl))}
.ec{--th:clamp(240px,62vh,360px);--txl:18px;--txr:60px}
.ec-ln::after{--brk:60vh}
.ec{--iw:max(106vw,1000px)}
.ec-band{height:auto;padding:14px var(--pad);flex-wrap:wrap;row-gap:8px}
}

/* Mobile portfolio v61: compact framed product card under the heading */
@media (max-width:600px) and (min-height:561px){
.prod{--H:min(calc(var(--sh) * .44),380px,calc(100vw * .88));--cp:clamp(14px,4vw,20px);--ht:max(clamp(90px,12.5vh,126px),calc((var(--sh) - var(--H) - var(--cp) * 2 - 200px) / 2 + 28px));--ct:calc(var(--ht) + 108px);--cc:calc(var(--ct) + var(--cp) + var(--H) / 2)}
.prod-stage::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:var(--ct);height:calc(var(--H) + var(--cp) * 2);border-radius:28px;background:radial-gradient(120% 90% at 22% 50%,rgba(255,255,255,.13),rgba(255,255,255,.035) 60%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(143,221,176,.26),inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px -34px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.prod-stage::after{content:"";position:absolute;left:calc(var(--pad) + var(--cp) + var(--H) * .46 + 4px);top:calc(var(--ct) + var(--cp) + 6px);height:calc(var(--H) - 12px);width:1px;background:linear-gradient(180deg,rgba(143,221,176,0),rgba(143,221,176,.35),rgba(143,221,176,0))}
.pbottle{left:calc(var(--pad) + var(--cp) + var(--H) * .225);top:var(--cc)}
.pinfo{left:calc(var(--pad) + var(--cp) + var(--H) * .46 + 16px);right:calc(var(--pad) + var(--cp));top:var(--cc);min-height:var(--H);gap:clamp(10px,1.6svh,16px)}
.pi-name{font-size:clamp(28px,8vw,36px)}
.pi-benefits{gap:7px}
.prod-nav{top:calc(var(--ct) + var(--H) + var(--cp) * 2 + 14px);bottom:auto}
.pn{padding-top:12px}
.prod-head{top:var(--ht)}
}

/* EcoConcept: independent uncropped photographic layers, v460. */
.ec-bg::before{height:100%;background:linear-gradient(180deg,#F1F6F2 0%,#F4F1E7 48%,#F5DCB9 78%,#EBC283 100%)}
.ec-farm{left:0;top:auto;bottom:var(--bandh);width:100%;height:34%;object-fit:cover;object-position:center 58%;mask:linear-gradient(180deg,transparent,#000 25%);-webkit-mask:linear-gradient(180deg,transparent,#000 25%);transform:translateY(calc((1 - var(--sp)) * 12px))}
.ec-sun,.ec-rays{display:none}
.ec-trees{inset:0 0 var(--bandh);height:auto;z-index:3;overflow:visible}
.ec-tree{bottom:10px;height:min(64%,590px);width:14%;max-width:320px;object-fit:contain;object-position:center bottom;translate:none;transform-origin:50% 95%;animation:ecWholeTreeSway 10s ease-in-out infinite alternate}
.ec-tree[data-s="l"]{left:1.5%;right:auto}
.ec-tree[data-s="r"]{left:auto;right:1.5%;animation-duration:12s;animation-delay:-4s}
@keyframes ecWholeTreeSway{from{transform:rotate(-.65deg) translateY(0)}to{transform:rotate(.65deg) translateY(-3px)}}
@media(max-width:900px) and (max-aspect-ratio:1/1),(max-width:1180px) and (max-aspect-ratio:4/5){
 .ec-farm{height:min(30%,370px);bottom:0;object-position:center 60%}
 .ec-trees{bottom:90px}
 .ec-tree{height:clamp(190px,57vw,320px);width:46%;max-width:none;bottom:0}
 .ec-tree[data-s="l"]{left:2%;right:auto}
 .ec-tree[data-s="r"]{left:auto;right:2%}
}
@media(prefers-reduced-motion:reduce){.ec-tree{animation:none}.ec-farm{transform:none}}

/* Close-up orchard canopies frame the scene; no standalone trunks. */
.ec-tree{bottom:0;height:min(65%,610px);width:clamp(180px,22vw,430px);max-width:none;object-fit:contain;mask:linear-gradient(180deg,transparent,#000 22%);-webkit-mask:linear-gradient(180deg,transparent,#000 22%);transform-origin:50% 100%;animation:ecCanopySway 12s ease-in-out infinite alternate}
.ec-tree[data-s="l"]{left:0;right:auto;object-position:left bottom}
.ec-tree[data-s="r"]{right:0;left:auto;object-position:right bottom;animation-duration:14s;animation-delay:-5s}
@keyframes ecCanopySway{from{transform:translateY(0) rotate(-.25deg)}to{transform:translateY(2px) rotate(.25deg)}}
@media(max-width:900px) and (max-aspect-ratio:1/1),(max-width:1180px) and (max-aspect-ratio:4/5){
 .ec-tree{height:clamp(210px,65vw,360px);width:43%;bottom:0}
 .ec-tree[data-s="l"]{left:0;right:auto}.ec-tree[data-s="r"]{right:0;left:auto}
}
@media(prefers-reduced-motion:reduce){.ec-tree{animation:none}}
/* Match the mask to the image bounds so the canopy has no straight top seam. */
.ec-tree{height:auto;width:clamp(160px,18vw,360px);max-height:none;aspect-ratio:2 / 3;object-fit:fill;mask:linear-gradient(180deg,transparent 0%,#000 26%);-webkit-mask:linear-gradient(180deg,transparent 0%,#000 26%)}
@media(max-width:900px) and (max-aspect-ratio:1/1),(max-width:1180px) and (max-aspect-ratio:4/5){.ec-tree{height:auto;width:43%;max-height:none}}
/* EcoConcept composition aligned to the supplied reference, v462. */
.ec{--bandh:clamp(54px,8vh,72px)}
.ec-stage{gap:clamp(8px,1.3vh,16px);padding:calc(70px + 1.5vh) var(--pad) clamp(95px,14vh,155px)}
.ec-head{width:min(1180px,100%);gap:clamp(4px,.7vh,8px)}
.ec-title img{height:clamp(58px,10vh,104px)}
.ec-sub{color:#101714;font-size:clamp(17px,2vw,28px);letter-spacing:.01em}
.ec-subrow{--g0:#59AF1F;--g1:#8BC94C;--g2:#DEEDCE;--rr:clamp(30px,4.5vw,64px);--lw:4px}
.ec-ln::after{height:clamp(220px,45vh,470px);background:linear-gradient(180deg,#59AF1F,#8FC6DB 65%,transparent)}
.ec-grid{width:calc(min(1180px,100%) - 30px);gap:clamp(28px,3vw,46px);--u:min(clamp(210px,28vh,270px),var(--wl))}
.ec-card{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.12) 65%,rgba(255,255,255,0));backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(214,228,227,.55);border:1px solid rgba(222,233,233,.35);padding-top:clamp(16px,2.2vh,26px);padding-bottom:clamp(12px,1.5vh,20px)}
.ec-card::after{display:none}
.ec-kick{color:#111A16;letter-spacing:0;font-size:clamp(13px,1.35vw,19px)}
.ec-cap{color:#063A82;font-weight:700;font-size:clamp(13px,1.25vw,18px)}
.ec-plus{width:clamp(58px,6.3vw,90px);top:48%}
.ec-plus img{filter:none}
.ec-plus::before,.ec-plus::after{display:none}
.ec-farm{height:34%;object-position:center 60%}
.ec-tree{width:clamp(145px,16vw,320px)}
.ec-band{background:linear-gradient(100deg,#0051A3,#064A94 50%,#003B86)}
.ec-band::before{background:rgba(255,255,255,.2)}
.ec-band li{color:white;letter-spacing:.025em;font-size:clamp(13px,1.5vw,21px)}
.ec-band li+li::before{background:#fff;box-shadow:none}
@media(max-width:900px) and (max-aspect-ratio:1/1),(max-width:1180px) and (max-aspect-ratio:4/5){
 .ec-stage{padding:calc(68px + 3svh) var(--pad) min(64vw,340px);gap:18px}
 .ec-title img{height:clamp(50px,14vw,92px)}
 .ec-sub{font-size:clamp(14px,4vw,22px)}
 .ec-grid{width:100%;gap:14px}
 .ec-plus{top:auto;width:clamp(50px,13vw,70px)}
 .ec-cap{font-size:clamp(13px,3.7vw,16px)}
 .ec-kick{font-size:clamp(13px,3.6vw,17px)}
 .ec-tree{width:43%}
 .ec-band li{font-size:clamp(12.5px,3.6vw,17px)}
}
/* Keep captions against the bright sky, with undistorted landscape proportions. */
.ec-farm{height:auto;bottom:calc(var(--bandh) - 14vw);object-fit:contain;mask:linear-gradient(180deg,transparent,#000 18%);-webkit-mask:linear-gradient(180deg,transparent,#000 18%)}
.ec-cap{text-shadow:0 1px 3px rgba(255,255,255,.9)}
@media(max-width:900px) and (max-aspect-ratio:1/1),(max-width:1180px) and (max-aspect-ratio:4/5){.ec-farm{height:min(30%,370px);bottom:0;object-fit:cover}}
/* EcoConcept caption contrast and brand-colour benefit band. */
.ec-cap{color:#fff;text-shadow:0 1px 3px rgba(3,36,25,.9),0 2px 8px rgba(3,36,25,.55)}
.ec-band{background:linear-gradient(100deg,#03362A,#076B3F 50%,#03362A)}
.ec-band li+li::before{background:#8FDDB0;box-shadow:none}
/* Harmonise the foreground canopies with the distant farm, v464. */
.ec-tree{width:clamp(110px,10.5vw,215px);filter:saturate(.73) contrast(.92) brightness(1.02);opacity:.92;mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 18%,#000 35%);-webkit-mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 18%,#000 35%)}
.ec-farm{bottom:calc(var(--bandh) - 18vw);filter:saturate(.8) contrast(.92) brightness(1.07);mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 34%);-webkit-mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 34%)}
.ec-bg::before{background:linear-gradient(180deg,#F1F6F2 0%,#F4F1E7 60%,#F4E7D2 80%,#E8CEA1 100%)}
@media(max-width:900px) and (max-aspect-ratio:1/1),(max-width:1180px) and (max-aspect-ratio:4/5){
 .ec-tree{width:30%;max-width:170px}
 .ec-farm{bottom:0;filter:saturate(.8) contrast(.92) brightness(1.07)}
}
.ec-farm{aspect-ratio:3 / 1}

/* Six-stage EcoCycle circle with a stable growing plant at its centre. */
.ec-trees{display:none}
.ec-cycle{--k:1.3;width:min(100%,clamp(235px,32vh,320px));aspect-ratio:1;margin:clamp(14px,2vh,22px) auto clamp(20px,3vh,32px)}
.ec-arcs[data-l="d"]{display:block}.ec-arcs[data-l="m"]{display:none}
.ec-ring-arrow{fill:none;stroke:#68BE32;stroke-width:3.5;stroke-linecap:round}
.ec-node{width:24%;aspect-ratio:84 / 86}
.ec-node:nth-child(1){left:50%;top:10%}
.ec-node:nth-child(2){left:84.5%;top:30%}
.ec-node:nth-child(3){left:84.5%;top:70%}
.ec-node:nth-child(4){left:50%;top:90%}
.ec-node:nth-child(5){left:15.5%;top:70%}
.ec-node:nth-child(6){left:15.5%;top:30%}
.ec-hub{width:44%}
.ec-hub img{opacity:0;animation:ecHubImg 9s linear infinite;animation-delay:calc(var(--i) * 1.5s)}
.ec-lab{font-size:max(10px,3cqw);height:5.2cqw;padding:0 1.7cqw}
.ec-ico{width:75%}
@media(max-width:900px) and (max-aspect-ratio:1/1),(max-width:1180px) and (max-aspect-ratio:4/5){
 .ec-cycle{--k:1.3;width:min(100%,320px);aspect-ratio:1;margin:26px auto 34px}
 .ec-arcs[data-l="d"]{display:block}.ec-arcs[data-l="m"]{display:none}
 .ec-node{width:24%}.ec-hub{width:44%}
 .ec-stage{padding-bottom:clamp(150px,40vw,250px)}
}

/* Restore the light mobile scene; keep the benefit band content-sized. */
@media(max-width:900px) and (max-aspect-ratio:1/1),(max-width:1180px) and (max-aspect-ratio:4/5){
 .ec{--tb:0px;height:auto}
 .ec-pin{height:auto;min-height:0}
 .ec-band{height:auto;min-height:0;flex:0 0 auto;grid-template-rows:repeat(2,max-content);grid-auto-rows:max-content;align-content:center;row-gap:10px;padding:16px var(--pad) 18px;margin:0}
}
/* Centre the second benefit row as one text-and-separator group. */
@media(max-width:900px) and (max-aspect-ratio:1/1),(max-width:1180px) and (max-aspect-ratio:4/5){
 .ec-band{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:0;row-gap:10px}
 .ec-band li{flex:0 0 auto;grid-column:auto;order:1}
 .ec-band li:nth-child(n+4){order:3;grid-column:auto}
 .ec-band::after{content:"";position:static;flex:0 0 100%;order:2;height:0;width:0;background:none;animation:none}
 .ec-band li:nth-child(4)::before{display:none}
 .ec-band li:nth-child(5)::before{margin:0 clamp(18px,6vw,28px)}
}
/* Mobile cards remain distinct and captions retain clear white-on-green contrast. */
@media(max-width:900px) and (max-aspect-ratio:1/1),(max-width:1180px) and (max-aspect-ratio:4/5){
 .ec-card{background:linear-gradient(160deg,#EDF3EB,#DDEADB);border:1px solid #B7CFBC;box-shadow:0 8px 24px -16px rgba(7,56,46,.25),inset 0 1px 0 rgba(255,255,255,.8);backdrop-filter:none;-webkit-backdrop-filter:none}
 .ec-card .ec-cap{align-self:stretch;justify-content:center;gap:8px;padding:11px 8px;border-radius:12px;background:#0A6042;color:#fff;text-shadow:none;white-space:normal;text-align:center;font-size:clamp(12px,3.45vw,16px);line-height:1.4}
 .ec-card .ec-cap::before,.ec-card .ec-cap::after{width:clamp(12px,4vw,24px);flex:0 0 auto;background:#8FDDB0}
}
/* Desktop uses the same circular six-stage geometry as mobile. */
/* Align the desktop concept frame with the shared .wrap content edges. */
@media(min-width:901px) and (min-aspect-ratio:1/1),(min-width:1181px){
 .ec-head{width:min(100%,calc(1400px - 2 * var(--pad)))}
 .ec-grid{width:calc(min(100%,1400px - 2 * var(--pad)) - 30px)}
}
/* Consistent EcoConcept typography across labels, captions and benefit text. */
.ec :is(.ec-sub,.ec-kick,.ec-cap,.ec-lab,.ec-band li){font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:0}
.ec .ec-kick{text-transform:none;font-weight:600;line-height:1.4}
.ec :is(.ec-cap,.ec-lab){font-weight:600}
.ec .ec-sub,.ec .ec-band li{font-weight:700}

/* Continuous circular flow sits clear of the stage images and their labels. */
.ec .ec-arcs[data-l="d"]{left:0;top:0;width:100%;height:100%;transform:none;overflow:visible}
.ec-closed-arrow{fill:none;stroke:#58AD35;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

.ec-stage-link{fill:none;stroke:#68B642;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* Keep a single representative photo only when reduced motion is requested. */
.still .ec-hub img{animation:none;opacity:0;transform:none}
.still .ec-hub img:nth-child(3){opacity:1}
@media(prefers-reduced-motion:reduce){.ec-hub img{animation:none;opacity:0;transform:none}.ec-hub img:nth-child(3){opacity:1}}

.ec-stage-link{stroke-linecap:butt}
.ec-stage-head{fill:#68B642;stroke:none}

/* Mobile products: use the available card height instead of an empty footer, v481. */
@media (max-width:600px) and (min-height:561px){
 .prod{--ht:clamp(90px,12.5svh,126px);--card-h:max(calc(var(--H) + var(--cp) * 2),calc(100svh - var(--ct) - 88px));--cc:calc(var(--ct) + var(--card-h) / 2)}
 .prod-stage::before{height:var(--card-h)}
 .prod-stage::after{height:calc(var(--card-h) - var(--cp) * 2 - 12px)}
 .pinfo{min-height:calc(var(--card-h) - var(--cp) * 2)}
 .prod-nav{top:calc(var(--ct) + var(--card-h) + 14px)}
}

/* Improve mobile product title and summary legibility, v482. */
@media (max-width:600px) and (min-height:561px){
 .pinfo .pi-name{font-size:clamp(32px,9vw,40px);line-height:1.1}
 .pinfo .pi-category{font-size:clamp(12px,3.4vw,15px);line-height:1.45;letter-spacing:0;font-weight:500}
 .pinfo .pi-purpose{font-size:clamp(15px,4.2vw,18px);line-height:1.4}
 .pi-summary{gap:7px}
}

/* Equal mobile spacing above and below the product name, v483. */
@media (max-width:600px) and (min-height:561px){
 .pinfo .pi-id{display:contents}
}

/* Mobile product showcase: bottle, existing copy, benefit icons and pack size, v484. */
.pi-volume,.pi-benefit-icon{display:none}
@media (max-width:600px) and (min-height:561px){
 .prod{--inner:calc(100vw - var(--pad) * 2 - var(--cp) * 2);--ct:calc(var(--ht) + 112px);--card-h:max(420px,calc(100svh - var(--ct) - 88px));--H:min(calc(var(--card-h) - 32px),calc(var(--inner) * 1.02));--cc:calc(var(--ct) + var(--card-h) / 2)}
 .prod .pin{height:max(100lvh,calc(var(--ct) + var(--card-h) + 88px));background:#073B3D}
 .prod .pbg{background:radial-gradient(ellipse at 24% 54%,rgba(76,153,123,.4),transparent 65%),linear-gradient(145deg,#073B3D,#0D4648 55%,#063333)}
 .prod-title{font-size:clamp(22px,5.7vw,28px);font-weight:600;max-width:none;line-height:1.25}
 .prod-title em{display:block;font-weight:400}
 .prod-stage::before{background:radial-gradient(ellipse at 20% 42%,rgba(143,221,176,.14),transparent 65%),rgba(255,255,255,.025);border-radius:22px;box-shadow:inset 0 0 0 1px rgba(167,218,195,.42)}
 .prod-stage::after{display:none}
 .pbottle{left:calc(var(--pad) + var(--cp) + var(--inner) * .215)}
 .pinfo{left:calc(var(--pad) + var(--cp) + var(--inner) * .47);right:calc(var(--pad) + var(--cp));height:calc(var(--card-h) - var(--cp) * 2);min-height:0;gap:10px;justify-content:flex-start;padding:0}
 .pinfo .pi-n{display:none}
 .pinfo .pi-name{font-size:clamp(26px,7.4vw,36px);font-weight:600;line-height:1.1;letter-spacing:-.04em}
 .pi-summary{gap:8px}
 .pinfo .pi-category{font-size:clamp(11px,3.05vw,15px);color:#8FDDB0;line-height:1.4}
 .pinfo .pi-purpose{font-size:clamp(13px,3.45vw,17px);font-weight:400;line-height:1.4}
 .pi-benefits{display:flex;flex-direction:column;justify-content:center;flex:1;margin-top:6px;padding:0;border:0;gap:0}
 .pi-benefits li{display:flex;align-items:center;gap:8px;flex:1;min-height:64px;max-height:110px;padding:8px 0;border-top:1px solid rgba(167,218,195,.26);font-size:clamp(11px,3vw,14px);line-height:1.4;color:#EEEFE8}
 .pi-benefits li::before{display:none}
 .pi-benefit-icon{display:block;flex:0 0 28px;width:28px;height:28px;padding:5px;box-sizing:content-box;border:1px solid rgba(167,218,195,.5);border-radius:50%;color:#D8F0DE;background:rgba(52,179,111,.14)}
 .pi-volume{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:14px;color:#EEEFE8;margin-top:2px}
 .pi-volume-icon{width:20px;height:25px;color:#A9DCC0}
 .pi-cta{margin-top:0}
 .pi-cta .btn{font-size:clamp(10px,2.85vw,13px);min-height:40px;padding-left:10px}
 .pi-cta .btn .arr{width:28px;height:28px;flex-basis:28px}
 .prod-nav{gap:8px}
 .pn .mono{display:none}
 .pn{font-size:clamp(10px,2.7vw,12px)}
}
@media (max-width:360px) and (min-height:561px){
 .prod{--cp:12px;--card-h:max(456px,calc(100svh - var(--ct) - 88px))}
 .pinfo{gap:9px}
 .pi-benefit-icon{flex-basis:22px;width:22px;height:22px;padding:4px}
 .pi-benefits li{gap:6px}
}

/* Case study crop-care notes, separate from measured trial results. */
.rd-benefit{padding-top:18px;border-top:1px solid var(--lined);display:grid;gap:8px}.rd-benefit>.mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mutd)}.rd-benefit h4{font-size:clamp(20px,2vw,27px);line-height:1.25;font-weight:500;color:var(--gold)}.rd-benefit p{font-size:15px;line-height:1.65;color:var(--fgd);max-width:58ch}

/* Longer bilingual value statements stay fully readable on narrow screens. */
.vc-body h3{text-wrap:balance;line-height:1.05}
@media(max-width:700px){
 .vcard{min-height:560px}
 .vc-body h3{font-size:clamp(30px,8vw,40px)}
 .vc-body p{font-size:16px;line-height:1.55}
}

/* Keep story labels legible over the bright user-supplied rice-husk barge photo. */
.stage[data-step="1"] .st-shade{opacity:1;background:linear-gradient(90deg,rgba(11,23,20,.42),rgba(11,23,20,0) 62%),linear-gradient(180deg,rgba(11,23,20,.2),rgba(11,23,20,0) 28%,rgba(11,23,20,0) 52%,rgba(11,23,20,.75))}

/* Expand the icon ring evenly to clear the central photo and its labels. */
.ec-node:nth-child(1){left:50%;top:6%}
.ec-node:nth-child(2){left:88.1%;top:28%}
.ec-node:nth-child(3){left:88.1%;top:72%}
.ec-node:nth-child(4){left:50%;top:94%}
.ec-node:nth-child(5){left:11.9%;top:72%}
.ec-node:nth-child(6){left:11.9%;top:28%}
.ec-stage-link{stroke-width:5.5}

.ec-hub{width:42%}

/* Keep the top stage icon clear of the Farming Cycle heading in both languages. */
.ec-cycle{margin-top:clamp(32px,4vh,40px)}

/* Anchor each stage by its photo centre; captions must not shift the orbit. */
.ec-node{translate:-50% -9cqw}