/* BIOVERA: palette carried over from the original design */
:root{
  --bg:#f5f5ef; --ink:#092c1b; --ink-soft:#13251b; --muted:#50645a; --line:#b9c9b7;
  --g950:#031b10; --g900:#062c1b; --g850:#082d1c; --g700:#0b4a27;
  --leaf:#65a72e; --leaf-2:#558a37; --lime:#8ed63e; --sage:#eaf0e5; --white:#fff;
  --radius:30px; --pad:5vw;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
img,svg,video{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:8px;top:8px;transform:translateY(-300%);background:var(--g700);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{transform:none}

/* header */
header{height:78px;display:flex;align-items:center;padding:0 var(--pad);gap:28px;position:fixed;inset-block-start:0;inset-inline:0;z-index:20;background:#ffffffed;backdrop-filter:blur(12px);border-bottom:1px solid #0000000d}
.brand{font-size:27px;letter-spacing:8px;font-weight:700;text-decoration:none;color:var(--ink);direction:ltr;display:block;line-height:1}
.brand span{color:var(--leaf)}
.brand small{display:block;font-size:7px;letter-spacing:3px;margin-top:5px;color:var(--leaf-2);font-weight:600}
nav{margin-inline-start:auto;display:flex;gap:24px}
nav a{color:var(--ink-soft);text-decoration:none;font-size:14px;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--leaf)}
.head-actions{display:flex;align-items:center;gap:12px}
#lang{border:1px solid var(--line);border-radius:30px;padding:9px 17px;background:#fff;cursor:pointer;font:inherit;font-size:14px;color:var(--ink)}
#lang:hover{border-color:var(--leaf)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--g700);color:#fff;padding:14px 22px;border-radius:var(--radius);text-decoration:none;border:1px solid var(--g700);font:inherit;font-size:15px;cursor:pointer}
.btn:hover{background:var(--g900)}
.btn.ghost{background:#fff;color:var(--g700)}
.btn.ghost:hover{background:var(--sage)}
.btn.sm{padding:10px 18px;font-size:14px}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:42px;height:42px;cursor:pointer;font-size:20px;color:var(--ink)}
html[dir=rtl] .arrow{display:inline-block;transform:scaleX(-1)}

/* hero */
.hero{min-height:100vh;position:relative;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:110px var(--pad) 150px;gap:20px;background:linear-gradient(180deg,#fbf6e4 0%,#eaf2db 52%,#f5f5ef 100%)}
.hero::before{content:"";position:absolute;width:60vw;height:60vw;max-width:820px;max-height:820px;inset-inline-end:-6vw;top:6%;background:radial-gradient(circle,#ffe9a855 0%,#ffe9a800 65%);pointer-events:none}
.skyline{position:absolute;inset-inline:0;bottom:0;height:42%;width:100%;pointer-events:none}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
.hero.has-video .hero-video{opacity:1}
.shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(247,247,239,.93) 0%,rgba(247,247,239,.63) 38%,transparent 70%)}
html[dir=rtl] .shade{background:linear-gradient(270deg,rgba(247,247,239,.93) 0%,rgba(247,247,239,.63) 38%,transparent 70%)}
.hero.has-video .shade{opacity:1}
.hero.has-video .figure{display:none}
.copy{position:relative;z-index:2;max-width:560px}
.eyebrow{font-size:12px;letter-spacing:4px;font-weight:700;color:var(--leaf-2);text-transform:uppercase;margin:0}
.copy h1{font-size:clamp(46px,6.4vw,78px);line-height:.95;margin:22px 0;letter-spacing:-1px;color:var(--g900)}
html[dir=rtl] .copy h1{letter-spacing:0;line-height:1.15}
.copy>p:not(.eyebrow){font-size:20px;line-height:1.5;color:var(--ink-soft)}
.actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.figure{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;height:min(74vh,640px)}
.unit{height:100%;width:auto;overflow:visible;filter:drop-shadow(0 30px 40px #0b4a2740)}
.chip{position:absolute;background:#ffffffe6;border:1px solid #0b4a2722;border-radius:30px;padding:8px 14px;font-size:12px;font-weight:600;color:var(--g700);box-shadow:0 8px 24px #0b4a2714;white-space:nowrap}
.chip i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);margin-inline-end:8px;box-shadow:0 0 8px var(--lime)}
.chip.in{inset-inline-start:0;top:34%}
.chip.out{inset-inline-end:0;top:20%}
.chip.cap{inset-inline-end:2%;bottom:6%;background:#082d1ce6;color:#e6f3da;border-color:#ffffff22}
.pills{position:absolute;z-index:3;inset-inline:var(--pad);bottom:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#ffffffd9;border:1px solid #0b4a2715;border-radius:22px;padding:16px 10px;backdrop-filter:blur(8px)}
.pills div{display:flex;align-items:center;gap:12px;padding:0 14px;font-size:13px;font-weight:600;color:var(--g700);letter-spacing:.5px}
.pills div+div{border-inline-start:1px solid #0b4a2722}
.pills svg{flex:none;width:38px;height:38px;stroke:var(--g700);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;background:var(--sage);border-radius:50%;padding:8px}

/* unit animation */
.led{animation:pulse 3.2s ease-in-out infinite}
.glowfloor{animation:pulse 3.2s ease-in-out infinite;transform-origin:center}
.bub{animation:rise 6s linear infinite;opacity:0}
.flow{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:6 12;animation:dash 2.4s linear infinite}
.flow.in{stroke:#6f8a76;opacity:.75}
.flow.out{stroke:#6ec22b;opacity:.95}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.85}85%{opacity:.5}100%{transform:translateY(-190px);opacity:0}}
@keyframes dash{to{stroke-dashoffset:-36}}
html[dir=rtl] .unit{direction:ltr}

/* sections */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}
.statement{text-align:center;padding:110px 20px 90px}
.statement .kicker{letter-spacing:3px;text-transform:uppercase;font-size:14px;color:var(--leaf-2);font-weight:700;margin:0}
.statement h2,.impact h2,.contact h2{font-size:clamp(34px,4.6vw,52px);margin:15px auto;max-width:900px;line-height:1.1;color:var(--g900)}
.statement .lead{max-width:680px;margin:18px auto 0;font-size:18px;color:var(--muted)}
.solutions{display:grid;grid-template-columns:repeat(4,1fr);background:var(--g900);color:#fff}
.solutions article{padding:55px 35px;border-inline-end:1px solid #ffffff30;min-height:320px;display:flex;flex-direction:column}
.solutions article:last-child{border-inline-end:0}
.solutions b{color:var(--lime);font-size:15px;letter-spacing:2px}
.solutions h3{font-size:26px;margin:14px 0 10px}
.solutions p{line-height:1.65;color:#d7e3d9;margin:0 0 20px}
.tag{margin-top:auto;align-self:flex-start;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border:1px solid #ffffff40;border-radius:20px;padding:5px 12px;color:#bfe39a}
.feature{display:grid;grid-template-columns:42% 58%;align-items:center;background:#fff}
.feature>div:first-child{padding:7vw}
.feature h2{font-size:clamp(32px,4vw,48px);line-height:1.12;margin:12px 0;color:var(--g900)}
.feature p{line-height:1.75;color:var(--ink-soft)}
.steps{list-style:none;margin:0;padding:6vw 5vw;display:grid;grid-template-columns:1fr 1fr;gap:18px;background:linear-gradient(135deg,var(--g900),var(--g700))}
.steps li{background:#ffffff12;border:1px solid #ffffff22;border-radius:22px;padding:28px 24px;color:#fff;position:relative;overflow:hidden}
.steps li::after{content:"";position:absolute;inset-inline-end:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#8ed63e55,transparent 70%)}
.steps b{display:block;color:var(--lime);font-size:13px;letter-spacing:2px;margin-bottom:10px}
.steps h4{margin:0 0 8px;font-size:20px}
.steps p{margin:0;color:#d7e3d9;font-size:15px;line-height:1.6}
.projects{padding:100px var(--pad);background:var(--bg)}
.sec-head{max-width:760px;margin:0 auto 50px;text-align:center}
.sec-head h2{font-size:clamp(32px,4.2vw,46px);margin:12px 0;line-height:1.12;color:var(--g900)}
.sec-head p{color:var(--muted);font-size:17px;margin:0}
.concepts{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;max-width:1300px;margin:0 auto}
.concept{margin:0}
.concept .ph{aspect-ratio:3/4;border-radius:22px;background:linear-gradient(160deg,#dfeacf,#b9d49a 55%,#8fbf5a);position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-start}
.concept .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.concept .n{position:relative;margin:14px;background:#082d1ccc;color:#cdeea6;border-radius:20px;padding:4px 11px;font-size:12px;letter-spacing:2px;font-weight:700}
.concept figcaption{padding:12px 4px 0;font-weight:700;font-size:15px;color:var(--g900)}
.note-line{text-align:center;color:var(--muted);font-size:13px;margin-top:34px}
.impact{text-align:center;padding:100px 6vw;background:var(--sage)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin:60px auto;max-width:1100px}
.metrics>span{font-size:32px;font-weight:700;border-inline-end:1px solid #9eb49d;color:var(--g900)}
.metrics>span:last-child{border:0}
.metrics small{display:block;font-size:13px;margin-top:10px;font-weight:400;color:var(--muted)}
.note{max-width:800px;margin:auto;font-size:12px;color:var(--muted)}
.latest{padding:100px var(--pad);background:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1200px;margin:0 auto}
.card{border:1px solid #0b4a2720;border-radius:22px;padding:28px;background:var(--bg);display:flex;flex-direction:column;gap:10px;text-decoration:none;min-height:240px}
a.card:hover{border-color:var(--leaf);transform:translateY(-3px);transition:.2s}
.card .cat{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--leaf-2);font-weight:700}
.card h3{margin:0;font-size:22px;line-height:1.25;color:var(--g900)}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .meta{margin-top:auto;font-size:13px;color:var(--leaf-2);font-weight:600}
.card.soon{opacity:.72}
.contact{padding:110px var(--pad);background:var(--g850);color:#fff;text-align:center}
.contact h2{color:#fff}
.contact>p{margin:0 auto 40px;color:#d7e3d9}
.form{max-width:640px;margin:0 auto;display:grid;gap:14px;text-align:start}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:grid;gap:6px;font-size:13px;color:#cfe0d3}
.form input,.form textarea,.form select{font:inherit;padding:13px 14px;border-radius:14px;border:1px solid #ffffff33;background:#ffffff12;color:#fff}
.form select option{color:#000}
.form textarea{min-height:120px;resize:vertical}
.form .check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#cfe0d3}
.form .check input{margin-top:3px;flex:none;width:18px;height:18px}
.form .check a{color:var(--lime)}
.form .btn{justify-self:start;background:var(--lime);color:var(--g950);border-color:var(--lime);font-weight:700}
.form-msg{font-size:14px;color:var(--lime);min-height:20px}
footer{padding:44px var(--pad) 28px;background:var(--g950);color:#a8b9ae;font-size:13px}
.foot{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;max-width:1200px;margin:0 auto}
.foot .brand{color:#fff;font-size:22px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:#a8b9ae;text-decoration:none}
.foot a:hover{color:var(--lime)}
.legalline{max-width:1200px;margin:30px auto 0;padding-top:20px;border-top:1px solid #ffffff1f;font-size:12px;line-height:1.7}
.todo{background:#fff3a8;color:#4a3d00;padding:0 4px;border-radius:3px}

/* inner pages */
.page-hero{padding:150px var(--pad) 70px;background:linear-gradient(180deg,#fbf6e4,#eaf2db);text-align:center}
.page-hero h1{font-size:clamp(38px,5vw,60px);margin:12px 0;color:var(--g900);line-height:1.08}
.page-hero p{max-width:640px;margin:0 auto;color:var(--muted);font-size:18px}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:34px 0 0}
.chips button{border:1px solid var(--line);background:#fff;border-radius:30px;padding:9px 18px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.chips button[aria-pressed=true]{background:var(--g700);color:#fff;border-color:var(--g700)}
.blog-body{padding:70px var(--pad) 100px;background:#fff}
.featured{max-width:1200px;margin:0 auto 34px;display:grid;grid-template-columns:1.1fr .9fr;border-radius:26px;overflow:hidden;background:var(--g900);color:#fff;text-decoration:none}
.featured .txt{padding:46px}
.featured .cat{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--lime);font-weight:700}
.featured h2{font-size:34px;margin:12px 0;line-height:1.15}
.featured p{color:#d7e3d9}
.featured .vis{background:linear-gradient(135deg,#0b4a27,#65a72e);min-height:260px;display:grid;place-items:center}
.featured .vis svg{height:220px;width:auto}
.article{max-width:760px;margin:0 auto;padding:150px 22px 90px}
.article .cat{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--leaf-2);font-weight:700}
.article h1{font-size:clamp(34px,5vw,52px);line-height:1.08;margin:12px 0;color:var(--g900)}
.article .by{color:var(--muted);font-size:14px;margin-bottom:34px}
.article p,.article li{font-size:18px;line-height:1.8;color:var(--ink-soft)}
.article h2{margin-top:40px;color:var(--g900)}
.callout{background:var(--sage);border-inline-start:4px solid var(--leaf);border-radius:12px;padding:18px 22px;margin:30px 0;font-size:16px}
.legal{max-width:860px;margin:0 auto;padding:150px 22px 90px}
.legal h1{font-size:clamp(34px,4.5vw,48px);color:var(--g900);margin:0 0 10px}
.legal h2{margin-top:56px;color:var(--g900);padding-top:20px;border-top:1px solid var(--line)}
.legal h3{margin:26px 0 6px;color:var(--g700)}
.legal p,.legal li{line-height:1.8;color:var(--ink-soft)}
.toc{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 10px}
.toc a{border:1px solid var(--line);border-radius:30px;padding:8px 16px;text-decoration:none;font-size:14px;background:#fff}
.toc a:hover{border-color:var(--leaf)}

/* notice */
.notice{position:fixed;z-index:50;inset-inline:16px;bottom:16px;max-width:560px;background:var(--g900);color:#e6f3da;border-radius:18px;padding:18px 20px;display:none;gap:16px;align-items:center;box-shadow:0 20px 50px #0006;font-size:14px}
.notice.show{display:flex}
.notice a{color:var(--lime)}
.notice button{flex:none;border:0;border-radius:24px;padding:10px 18px;background:var(--lime);color:var(--g950);font:inherit;font-weight:700;cursor:pointer}

@media(max-width:1100px){
  nav{display:none;position:absolute;inset-inline:0;top:78px;background:#fff;flex-direction:column;gap:0;padding:10px var(--pad) 20px;border-bottom:1px solid var(--line)}
  header.open nav{display:flex}
  nav a{padding:14px 0;border-bottom:1px solid #0000000d}
  .menu-btn{display:block}
  .head-actions .btn{display:none}
  .head-actions{margin-inline-start:auto}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding:100px var(--pad) 40px;text-align:start}
  .figure{height:520px;margin-top:10px}
  .pills{position:relative;inset-inline:auto;bottom:auto;grid-template-columns:1fr 1fr;gap:16px;margin:10px var(--pad) 0;grid-column:1}
  .pills div+div{border:0}
  .solutions{grid-template-columns:1fr 1fr}
  .solutions article{border-bottom:1px solid #ffffff30}
  .feature{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .concepts{grid-template-columns:repeat(2,1fr)}
  .metrics{grid-template-columns:1fr 1fr;gap:35px}
  .metrics>span{border:0}
  .cards{grid-template-columns:1fr}
  .featured{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
}
@media(max-width:560px){
  .brand{font-size:20px;letter-spacing:6px}
  .solutions{grid-template-columns:1fr}
  .chip.in{top:26%}
  .copy>p:not(.eyebrow){font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .bub{opacity:.5}
}

/* additions */
.feature>img{width:100%;height:100%;min-height:560px;max-height:760px;object-fit:cover;display:block}
.featured .vis{min-height:300px;position:relative}
.featured .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.legal [data-en]:not(h1):not(h2):not(h3):not(a){white-space:normal}
@media(max-width:900px){.feature>img{min-height:360px}}
@media(max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero>*{min-width:0}
  .figure{overflow:hidden}
  .chip.in{inset-inline-start:2%}
  .chip.out{inset-inline-end:2%}
  .chip.cap{display:none}
  .unit{max-width:100%}
}

/* hero product render + gallery */
.figure::after{content:"";position:absolute;inset-inline:6%;bottom:-2%;height:12%;background:radial-gradient(ellipse at center,#8ed63e66,transparent 70%);filter:blur(10px);z-index:-1}
.product{height:100%;width:auto;max-width:100%;object-fit:cover;border-radius:28px;box-shadow:0 30px 60px #0b4a2740,0 0 0 1px #0b4a2714;animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.inside{padding:100px var(--pad);background:var(--g950);color:#fff}
.inside .sec-head h2{color:#fff}.inside .sec-head p{color:#b7c8bc}.inside .eyebrow{color:var(--lime)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1300px;margin:0 auto}
.gal figure{margin:0}
.gal a{display:block;border-radius:20px;overflow:hidden;border:1px solid #ffffff22;transition:transform .25s,border-color .25s}
.gal a:hover{transform:translateY(-4px);border-color:var(--lime)}
.gal img{display:block;width:100%;height:auto}
.gal figcaption{padding:14px 4px 0}.gal figcaption b{display:block;font-size:17px}
.gal figcaption span{display:block;color:#b7c8bc;font-size:14px;margin-top:4px;line-height:1.5}
.inside .note-line{color:#8fa597}
@media(max-width:1000px){.gal{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gal{gap:12px}.gal figcaption span{display:none}}

/* hero chips: sit on top of the render, straddling its edges */
.chip{z-index:4}
@media(min-width:901px){
.chip.in{inset-inline-start:calc(50% - 270px);top:38%}
.chip.out{inset-inline-end:calc(50% - 270px);top:22%}
.chip.cap{inset-inline-end:auto;inset-inline-start:calc(50% - 190px);bottom:9%}
}

/* ===== premium dark hero (carbon + emerald + gold, from the first site) ===== */
:root{--carbon:#0b1a14;--emerald:#1a7a4a;--gold:#c9a84c;--gold-2:#e3c878}
.hero{background:radial-gradient(ellipse 60% 80% at 72% 48%,#1a7a4a59 0%,transparent 62%),radial-gradient(ellipse 45% 60% at 12% 90%,#4fc56a24 0%,transparent 55%),linear-gradient(135deg,#0b1a14 0%,#0d3b2e 52%,#0b1a14 100%);color:#fff}
.hero::before{display:none}
.hero .glow{position:absolute;inset-inline-end:6%;top:50%;width:min(46vw,620px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,#8ed63e40 0%,#4fc56a14 45%,transparent 70%);filter:blur(10px);pointer-events:none;animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.7;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.06)}}
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bubbles i{position:absolute;bottom:-40px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#4fc56a66,#1a7a4a1a);border:1px solid #4fc56a33;animation:bub linear infinite}
@keyframes bub{0%{transform:translateY(0) scale(.6);opacity:0}10%{opacity:1}90%{opacity:.5}100%{transform:translateY(-105vh) scale(1.15);opacity:0}}
.hero .eyebrow.gold{display:inline-flex;align-items:center;gap:14px;color:var(--gold-2)}
.hero .eyebrow.gold::before{content:"";width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero .copy h1{color:#fff}
.hero .copy h1 em{font-style:normal;background:linear-gradient(135deg,#8ed63e,#6ae07a 60%,#c9e87a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#8ed63e}
.hero .copy>p:not(.eyebrow){color:#ffffffb3}
.hero .btn{background:linear-gradient(135deg,#8ed63e,#1a7a4a);color:#06220f;border:0;font-weight:700;box-shadow:0 6px 26px #4fc56a55}
.hero .btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px #4fc56a77;background:linear-gradient(135deg,#8ed63e,#1a7a4a)}
.hero .btn.ghost{background:transparent;color:#fff;border:1px solid #ffffff40;box-shadow:none;font-weight:600}
.hero .btn.ghost:hover{border-color:var(--gold);color:var(--gold-2);background:transparent}
.hero .product{border:1px solid #c9a84c55;box-shadow:0 30px 80px #000000a0,0 0 70px #4fc56a40}
.hero .chip{background:#0b1a14cc;color:#e6f3da;border:1px solid #4fc56a44;backdrop-filter:blur(8px);box-shadow:0 8px 24px #00000066}
.hero .chip.cap{background:#c9a84c;color:#1d1605;border-color:#c9a84c}
.hero .pills{background:#0b1a14b3;border:1px solid #ffffff1f;backdrop-filter:blur(14px)}
.hero .pills div{color:#e6f3da}
.hero .pills div+div{border-color:#ffffff1f}
.hero .pills svg{background:#4fc56a22;stroke:#8ed63e}
.hero .figure::after{background:radial-gradient(ellipse at center,#8ed63e88,transparent 70%)}
/* header floats transparent over the dark hero, turns solid on scroll */
body.home header:not(.scrolled){background:transparent;border-color:transparent;backdrop-filter:none}
body.home header:not(.scrolled) .brand{color:#fff}
body.home header:not(.scrolled) .brand small{color:var(--gold-2)}
body.home header:not(.scrolled) nav a{color:#ffffffd9}
body.home header:not(.scrolled) nav a:hover{border-color:var(--gold)}
body.home header:not(.scrolled) #lang{background:#ffffff14;color:#fff;border-color:#ffffff40}
body.home header:not(.scrolled) .menu-btn{color:#fff;border-color:#ffffff40}
body.home header:not(.scrolled) .btn.sm{background:linear-gradient(135deg,#8ed63e,#1a7a4a);color:#06220f;border:0;font-weight:700}
body.home header{transition:background .3s,border-color .3s}
@media(max-width:900px){body.home header.open:not(.scrolled){background:#0b1a14f2}}

/* ===== paper-to-product phases ===== */
.journey{padding:100px var(--pad);background:var(--g950);color:#fff}
.journey .sec-head h2{color:#fff}.journey .sec-head p{color:#b7c8bc}.journey .eyebrow{color:var(--gold-2)}
.phases{list-style:none;margin:0 auto;padding:0;max-width:1300px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:ph}
.phases li{position:relative}
.phases li:not(:last-child)::after{content:"";position:absolute;top:42%;inset-inline-end:-22px;width:22px;height:2px;background:linear-gradient(90deg,var(--gold),var(--lime));z-index:2}
.phases a{display:block;border-radius:20px;overflow:hidden;border:1px solid #ffffff22;transition:transform .25s,border-color .25s}
.phases a:hover{transform:translateY(-4px);border-color:var(--gold)}
.phases img{display:block;width:100%;height:auto}
.ph-meta{display:flex;gap:12px;align-items:flex-start;padding:16px 2px 0}
.ph-n{flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1d1605;font-weight:700;font-size:13px;display:grid;place-items:center}
.ph-meta b{display:block;font-size:17px}
.ph-meta div span{display:block;color:#b7c8bc;font-size:14px;margin-top:4px;line-height:1.5}
.journey .note-line{color:#8fa597}
html[dir=rtl] .phases li:not(:last-child)::after{transform:scaleX(-1)}
@media(max-width:1000px){.phases{grid-template-columns:1fr 1fr}.phases li::after{display:none}}
@media(max-width:560px){.phases{gap:14px}.ph-meta div span{display:none}.ph-n{width:28px;height:28px}}

/* ===== intro: brand name and tagline, then the site loads ===== */
.intro{display:none}
html.intro-on .intro{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0 var(--pad);background:radial-gradient(ellipse 55% 60% at 50% 45%,#1a7a4a66 0%,transparent 65%),linear-gradient(135deg,#0b1a14,#0d3b2e 55%,#0b1a14);color:#fff;transition:opacity .6s ease,visibility .6s}
html.intro-on{overflow:hidden}
html.intro-out .intro{opacity:0;visibility:hidden}
.intro-brand{margin:0;font-size:clamp(38px,9vw,108px);letter-spacing:.24em;padding-inline-start:.24em;font-weight:700;direction:ltr;line-height:1;opacity:0;animation:fadeup .9s .3s both}
.intro-brand span{color:var(--lime)}
.intro-kicker{margin:14px 0 0;font-size:clamp(12px,1.7vw,17px);letter-spacing:.24em;color:var(--gold-2);font-weight:600;direction:ltr;opacity:0;animation:fadeup .7s .9s both}
html[dir=rtl] .intro-kicker{letter-spacing:.1em;direction:rtl}
.intro-line{margin:22px 0 0;font-size:clamp(20px,3.4vw,30px);font-weight:600;text-align:center;line-height:1.3}
.intro-line .l1,.intro-line .l2{display:inline-block;opacity:0;animation:fadeup .6s forwards}
.intro-line .l1{animation-delay:1.4s}
.intro-line .l2{animation-delay:1.9s;color:var(--lime)}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.intro-skip{position:absolute;top:24px;inset-inline-end:var(--pad);background:#ffffff14;border:1px solid #ffffff40;color:#fff;border-radius:30px;padding:9px 20px;font:inherit;font-size:14px;cursor:pointer}
.intro-skip:hover{border-color:var(--gold)}

/* mission & vision */
.mv{padding:90px var(--pad) 70px;background:var(--bg)}
.mv-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mv-grid article{background:#fff;border:1px solid #0b4a2718;border-radius:26px;padding:36px 34px}
.mv-grid article:first-child{background:linear-gradient(135deg,var(--g900),var(--g700));color:#fff;border-color:transparent}
.mv-grid article:first-child .eyebrow{color:var(--gold-2)}
.mv-grid h3{font-size:clamp(24px,2.6vw,32px);line-height:1.15;margin:12px 0 14px}
.mv-grid article p:not(.eyebrow){margin:0;font-size:17px;line-height:1.65;color:var(--muted)}
.mv-grid article:first-child p:not(.eyebrow){color:#d7e3d9}
.values{list-style:none;max-width:1100px;margin:28px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.values li{padding-inline-start:18px;border-inline-start:3px solid var(--gold)}
.values b{display:block;font-size:17px;color:var(--g900)}
.values span{display:block;margin-top:4px;color:var(--muted);font-size:15px;line-height:1.5}
@media(max-width:800px){.mv-grid,.values{grid-template-columns:1fr}}

/* hero render blends into the background: no card, soft feathered edges */
.pw{position:relative;height:100%;aspect-ratio:2/3;max-width:100%;z-index:2}
.hero .product{border:0;border-radius:0;box-shadow:none;width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 60%,transparent 100%)}
.pw .wm{position:absolute;inset-inline-end:6%;bottom:5%;font-weight:700;font-size:clamp(14px,1.6vw,22px);letter-spacing:.02em;color:#ffffff73;direction:ltr;pointer-events:none}
.hero .figure::after{display:none}
@media(min-width:901px){
.chip.in{inset-inline-start:calc(50% - 250px);top:64%}
.chip.out{inset-inline-end:calc(50% - 250px);top:12%}
.chip.cap{inset-inline-start:calc(50% - 90px);inset-inline-end:auto;bottom:2%}
}

/* paper-to-product: two steps */
.phases{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;gap:44px}
.phases li:not(:last-child)::after{inset-inline-end:-44px;width:44px}
.phases li:not(:last-child)::before{content:"";position:absolute;top:calc(42% - 4px);inset-inline-end:-44px;width:0;height:0;border-block:5px solid transparent;border-inline-start:8px solid var(--lime);z-index:2}
html[dir=rtl] .phases li:not(:last-child)::before{border-inline-start:0;border-inline-end:8px solid var(--lime)}
@media(max-width:1000px){.phases li:not(:last-child)::after{display:block}}
@media(max-width:560px){.phases{grid-template-columns:1fr;gap:34px}.phases li:not(:last-child)::after,.phases li:not(:last-child)::before{display:none}.ph-meta div span{display:block}.ph-n{width:34px;height:34px}}

.vision2030{max-width:1100px;margin:34px auto 0;padding-top:22px;border-top:1px solid #0b4a2722;text-align:center;font-size:16px;color:var(--g700);font-weight:600}
/* floating buttons: WhatsApp + back to top */
.fabs{position:fixed;z-index:40;inset-inline-end:16px;bottom:16px;display:flex;flex-direction:column;gap:10px}
.fab{width:46px;height:46px;border-radius:50%;border:1px solid #ffffff33;background:#0b1a14e6;color:#e6f3da;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px #0005;backdrop-filter:blur(8px);transition:opacity .3s,transform .3s,border-color .2s}
.fab:hover{border-color:var(--gold)}
.fab svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:currentColor}
.fab svg path[fill=none]{fill:none}
.fab .i-on{display:none}.fab.on .i-on{display:block}.fab.on .i-off{display:none}
.fab.on{color:var(--lime);border-color:#8ed63e80}
#totop{opacity:0;transform:translateY(10px);pointer-events:none}
#totop.show{opacity:1;transform:none;pointer-events:auto}
.notice.show~.fabs{bottom:110px}
@media(max-width:600px){.notice.show~.fabs{bottom:170px}}
@media(prefers-reduced-motion:reduce){.fab{transition:none}}
#totop{order:-1}
/* ---------- logo mark ---------- */
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:38px;height:42px;flex:none;color:var(--leaf)}
.brand .bw{display:block;font-weight:700}
body.home header:not(.scrolled) .brand .mark{color:var(--lime)}
.foot .brand .mark{color:var(--lime)}
@media(max-width:900px){.brand .mark{width:30px;height:34px}}
.intro-mark{width:clamp(64px,9vw,104px);height:clamp(72px,10vw,116px);color:var(--lime);margin-bottom:22px;opacity:0;animation:fadeup .8s .1s both}
/* ---------- vision & mission (client wording) ---------- */
.mv .sec-head{margin-bottom:40px}
.mv-grid h3{font-size:clamp(20px,2vw,25px);line-height:1.35;margin:14px 0 0;font-weight:600}
.goals-title{max-width:1100px;margin:40px auto 0;font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:12px;color:var(--leaf-2)}
.values.goals{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:16px}
@media(max-width:1000px){.values.goals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.values.goals{grid-template-columns:1fr}}
/* ---------- who we are ---------- */
.who{padding:90px var(--pad);background:#fff}
.who-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start}
.who-story p{margin:0 0 22px;font-size:17px;line-height:1.75;color:var(--ink-soft)}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.facts li{display:flex;gap:14px;padding-bottom:12px;border-bottom:1px solid #0b4a2715;color:var(--muted)}
.facts b{min-width:130px;color:var(--g900)}
.team{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.team li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;align-items:center;background:var(--bg);border-radius:18px;padding:14px 18px}
.team .avatar{grid-row:span 2;width:52px;height:52px;border-radius:50%;background:var(--g900);display:grid;place-items:center}
.team .avatar svg{width:24px;height:26px;color:var(--lime)}
.team b{color:var(--g900)}.team small{color:var(--muted);font-size:14px}
@media(max-width:800px){.who-grid{grid-template-columns:1fr}}
/* ---------- where it fits ---------- */
.fits{padding:90px var(--pad);background:var(--sage)}
.fit-list{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.fit-list li{background:#fff;border:1px solid #0b4a2715;border-radius:16px;padding:18px 16px;font-weight:600;color:var(--g900);font-size:15px;display:flex;gap:10px;align-items:flex-start}
.fit-list li::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--leaf)}
@media(max-width:1000px){.fit-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.fit-list{grid-template-columns:1fr}}
/* ---------- partners ---------- */
.partners{padding:80px var(--pad);background:#fff}
.partners .sec-head{margin-bottom:34px}
.partner-grid{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.partner-grid li{height:92px;border:1px solid #0b4a2718;border-radius:16px;display:grid;place-items:center;padding:12px;text-align:center;font-weight:600;color:var(--g900)}
.partner-grid img{max-height:64px;max-width:100%;object-fit:contain}
.partner-grid li.slot{border-style:dashed}
@media(max-width:900px){.partner-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.partner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- faq ---------- */
.faq{padding:90px var(--pad);background:var(--bg)}
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid #0b4a2718;border-radius:18px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;font-size:17px;color:var(--g900);display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--leaf)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 20px;color:var(--muted);line-height:1.7}
/* ---------- contact: direct ---------- */
.direct{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn.wa-btn{background:#25d366;border-color:#25d366;color:#062c1b;font-weight:700}
.btn.wa-btn:hover{background:#1fb956}
.btn.wa-btn svg{width:20px;height:20px;fill:currentColor}
.btn.ghost.light{background:transparent;color:#fff;border-color:#ffffff55;direction:ltr}
.btn.ghost.light:hover{background:#ffffff14}
.contact .or{margin:26px 0 22px;color:#b7c8bc;font-size:14px}
/* ---------- whatsapp floating ---------- */
.fab.wa{background:#25d366;border-color:#25d366;color:#fff;width:54px;height:54px}
.fab.wa svg{width:28px;height:28px;stroke:none;fill:currentColor}
.fab.wa:hover{border-color:#fff}
/* ---------- partners carousel ---------- */
.partners{padding:90px 0;background:#fff;overflow:hidden}
.partners .sec-head{padding-inline:var(--pad)}
.marquee{display:flex;direction:ltr;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{list-style:none;margin:0;padding:0;display:flex;gap:18px;padding-inline-end:18px;flex:none;animation:marquee 48s linear infinite}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
.marquee li{flex:none;width:220px;height:170px;border:1px solid #0b4a2718;border-radius:20px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px;text-align:center}
.marquee img{max-height:78px;max-width:170px;object-fit:contain}
.marquee .pname{font-size:13px;line-height:1.35;color:var(--muted);font-weight:600;direction:auto}
.marquee li.noimg{background:var(--sage)}
.marquee li.noimg .pname{font-size:17px;color:var(--g900);font-weight:700}
@keyframes marquee{to{transform:translateX(-100%)}}
@media(max-width:600px){.marquee li{width:170px;height:150px}.marquee img{max-height:60px;max-width:130px}}
@media(prefers-reduced-motion:reduce){.marquee{flex-wrap:wrap;justify-content:center;-webkit-mask-image:none;mask-image:none}.marquee .track{animation:none;flex-wrap:wrap;justify-content:center;padding:0 var(--pad)}.marquee .track[aria-hidden]{display:none}}
.marquee li{height:140px}
.marquee img{width:180px;height:84px;max-width:none;max-height:none;object-fit:contain}
@media(max-width:600px){.marquee li{height:120px}.marquee img{width:130px;height:64px}}
/* designer credit */
.credit{max-width:1200px;margin:18px auto 0;padding-top:16px;border-top:1px solid #ffffff14;text-align:center}
.credit a{color:#7f9488;text-decoration:none;font-size:12px;letter-spacing:.04em}
.credit b{color:#c9d6cd;letter-spacing:.08em}
.credit a:hover,.credit a:hover b{color:var(--gold-2)}
.credit .sd-arrow{display:inline-block;margin-inline-start:2px}
@media(max-width:600px){.credit{text-align:center}}
/* ---------- language switch: an algae cell that swims between EN and ع ---------- */
#lang.lang-switch{position:relative;width:86px;height:40px;padding:0;border-radius:40px;direction:ltr;display:inline-flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#e9f4dc,#d6ebc2);border:1px solid #8ed63e80;box-shadow:inset 0 2px 6px #0b4a2722;overflow:hidden;font-weight:700}
.ls-opt{position:relative;z-index:1;width:43px;text-align:center;font-size:13px;color:var(--g700);transition:color .35s}
.ls-ar{font-size:16px;line-height:1}
.ls-cell{position:absolute;top:3px;left:3px;width:40px;height:32px;border-radius:50% 50% 48% 52%/55% 55% 45% 45%;z-index:0;
  background:radial-gradient(circle at 35% 30%,#d9ff9e 0 12%,#8ed63e 40%,#3f9a2a 78%,#1f6b20);box-shadow:0 0 12px #8ed63e99,inset -3px -4px 8px #0b4a2755;
  transition:transform .55s cubic-bezier(.5,1.6,.4,1),border-radius .55s;animation:cellbreath 3.2s ease-in-out infinite}
.ls-cell i{position:absolute;border-radius:50%;background:#2f7d22aa}
.ls-cell i:nth-child(1){width:7px;height:5px;left:9px;top:14px}
.ls-cell i:nth-child(2){width:5px;height:5px;left:22px;top:8px}
.ls-cell i:nth-child(3){width:6px;height:4px;left:24px;top:19px}
#lang[aria-checked=true] .ls-cell{transform:translateX(40px) rotate(180deg)}
.lang-switch .ls-en{color:var(--g950)}
.lang-switch[aria-checked=true] .ls-en{color:var(--g700)}
.lang-switch[aria-checked=true] .ls-ar{color:var(--g950)}
.lang-switch[aria-checked=false] .ls-ar{color:var(--g700)}
.lang-switch::before,.lang-switch::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;border:1.5px solid #8ed63e;opacity:0;pointer-events:none;bottom:4px}
.lang-switch::before{left:30px}.lang-switch::after{left:52px;width:4px;height:4px}
.lang-switch.bubbling::before{animation:lsbub .8s ease-out}
.lang-switch.bubbling::after{animation:lsbub .8s .12s ease-out}
@keyframes lsbub{0%{opacity:.9;transform:translateY(0)}100%{opacity:0;transform:translateY(-30px)}}
@keyframes cellbreath{50%{border-radius:52% 48% 50% 50%/48% 52% 48% 52%}}
#lang.lang-switch:hover{border-color:var(--leaf)}
body.home header:not(.scrolled) #lang.lang-switch{background:linear-gradient(180deg,#ffffff1f,#ffffff0d);border-color:#8ed63e66}
body.home header:not(.scrolled) .ls-opt{color:#ffffffa6}
body.home header:not(.scrolled) .lang-switch[aria-checked=false] .ls-en,body.home header:not(.scrolled) .lang-switch[aria-checked=true] .ls-ar{color:var(--g950)}
@media(prefers-reduced-motion:reduce){.ls-cell{transition:none;animation:none}.lang-switch.bubbling::before,.lang-switch.bubbling::after{animation:none}}
/* ---------- future concepts: ladder ---------- */
.future{padding:100px var(--pad);background:linear-gradient(180deg,#0b1a14,#0f2a1d 60%,#0b1a14);color:#e6f3da}
.future .sec-head h2{color:#fff}.future .sec-head p{color:#b7c8bc}.future .eyebrow{color:var(--gold-2)}
.fz-ladder{max-width:1120px;margin:0 auto;display:grid;gap:56px;position:relative}
.fz-ladder::before{content:"";position:absolute;inset-block:40px;inset-inline-start:50%;width:2px;background:linear-gradient(180deg,transparent,#8ed63e55,transparent)}
.fz{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:44px;align-items:center;position:relative}
.fz:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
.fz:nth-child(even) figure{order:2}
.fz-1{margin-inline-end:12%}.fz-2{margin-inline:6%}.fz-3{margin-inline-start:12%}
.fz figure{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px #0008,0 0 0 1px #8ed63e22;aspect-ratio:2/3;max-height:560px;max-width:100%;justify-self:center}
.fz img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}
.fz:hover img{transform:scale(1.03)}
.fz-place{display:inline-block;margin:0 0 10px;padding:6px 14px;border-radius:30px;border:1px solid #c9a84c66;color:var(--gold-2);font-size:13px;font-weight:600}
.fz h3{margin:0 0 12px;font-size:clamp(26px,3vw,36px);color:#fff;line-height:1.15}
.fz-copy>p{margin:0 0 14px;color:#cfdcd3;line-height:1.7;font-size:16px}
.fz ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.fz li{display:flex;gap:10px;align-items:flex-start;color:#e6f3da;font-size:15px}
.fz li::before{content:"";flex:none;width:9px;height:9px;margin-top:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.fz-copy>p.fz-future{color:var(--lime);font-weight:600;font-size:15px;border-inline-start:3px solid var(--lime);padding-inline-start:12px}
.future .note-line{color:#8fa597}
@media(max-width:860px){.fz,.fz:nth-child(even){grid-template-columns:1fr;gap:22px}.fz:nth-child(even) figure{order:0}.fz-1,.fz-2,.fz-3{margin-inline:0}.fz-ladder::before{display:none}.fz figure{max-height:none;width:100%;max-width:420px}}
/* footer: brand + two aligned link columns */
.foot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,.7fr);gap:30px 40px;align-items:start}
.fcol .fhead{margin:0 0 12px;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-2);font-weight:700}
.fcol ul{gap:10px}
html[dir=rtl] .fcol .fhead{letter-spacing:0}
@media(max-width:700px){.foot{grid-template-columns:1fr 1fr;gap:30px 24px}.foot>div:first-child{grid-column:1/-1}}
.credit .sd-arrow{font-family:Arial,sans-serif}
.social{display:flex;gap:10px;margin-top:22px}
.social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff24;color:#c9d6cd;transition:background .2s,color .2s,border-color .2s}
.social svg{width:18px;height:18px;fill:currentColor}
.social a:hover,.social a:focus-visible{background:var(--lime);border-color:var(--lime);color:var(--g950)}

/* ===== the science (replaces paper-to-product) ===== */
.science{padding:100px var(--pad);background:var(--g950);color:#fff}
.science .sec-head h2{color:#fff}.science .sec-head p{color:#b7c8bc}.science .eyebrow{color:var(--gold-2)}
.eq-wrap{max-width:900px;margin:0 auto 40px;text-align:center}
.eq-h{margin:0 0 14px;color:#b7c8bc;font-size:14px;letter-spacing:.5px}
.eq{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px}
.eq-t{font:inherit;font-size:clamp(18px,3vw,26px);font-weight:700;color:#fff;background:#ffffff0f;border:1px solid #ffffff26;border-radius:14px;padding:10px 16px;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.eq-t:hover{border-color:var(--lime);transform:translateY(-2px)}
.eq-t[aria-pressed=true]{background:var(--lime);color:var(--g950);border-color:var(--lime)}
.eq-op{font-size:22px;color:var(--gold-2)}
.eq-cap{min-height:24px;margin:16px 0 0;color:#d7e3d9}
.sci{max-width:1100px;margin:0 auto;background:#ffffff0a;border:1px solid #ffffff1f;border-radius:26px;overflow:hidden}
.sci-tabs{display:flex;overflow-x:auto;border-bottom:1px solid #ffffff1f;scrollbar-width:none}
.sci-tabs::-webkit-scrollbar{display:none}
.sci-tabs [role=tab]{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;font-weight:600;color:#b7c8bc;background:none;border:0;border-bottom:3px solid transparent;padding:18px 16px;cursor:pointer;white-space:nowrap}
.sci-tabs [role=tab]:hover{color:#fff}
.sci-tabs [aria-selected=true]{color:#fff;border-bottom-color:var(--lime);background:#ffffff08}
.ico{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sci-tabs .ico{color:var(--lime)}
.sci-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;padding:40px}
.sci-panel[hidden]{display:none}
.sci-stat{display:flex;flex-direction:column;gap:12px}
.sci-ico{width:52px;height:52px;fill:none;stroke:var(--lime);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;background:#8ed63e1a;border-radius:50%;padding:12px}
.sci-num{font-size:clamp(44px,6vw,72px);line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.sci-stat p{margin:0;font-size:18px;line-height:1.5;color:#fff}
.sci-body>p:first-child{margin:0 0 20px;line-height:1.75;color:#d7e3d9}
.sci-src-h{margin:22px 0 6px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-2)}
.sci-src{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.sci-src a{color:#bfe39a;text-decoration:underline;text-underline-offset:3px}
.sci-src a:hover{color:var(--lime)}
.calc{background:#00000033;border:1px solid #ffffff1f;border-radius:18px;padding:18px 20px}
.calc label{display:block;font-size:14px;color:#b7c8bc;margin-bottom:10px}
.calc input{width:100%;accent-color:var(--lime)}
.calc-out{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 4px;font-size:18px}
.calc-out b{font-size:28px;color:var(--lime);font-variant-numeric:tabular-nums}
.calc-note{margin:0;font-size:12px;color:#8fa597}
html[dir=rtl] .calc-out .arrow{transform:scaleX(-1)}
.science .note-line{max-width:900px;margin:30px auto 0;text-align:center;color:#8fa597;font-size:13px}
@media(max-width:800px){.sci-panel{grid-template-columns:1fr;gap:24px;padding:26px 20px}.sci-tabs [role=tab]{flex:0 0 auto;padding:16px 14px}}

/* ===== icons across the site ===== */
.solutions .sol-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.solutions .sol-top .ico{width:40px;height:40px;color:var(--lime);background:#ffffff12;border-radius:50%;padding:9px}
.steps li>.ico{width:42px;height:42px;color:var(--lime);background:#ffffff14;border-radius:12px;padding:9px;margin-bottom:14px;display:block}
.metrics .ico{display:block;width:44px;height:44px;margin:0 auto 12px;color:var(--leaf);background:var(--sage);border-radius:50%;padding:10px}
.metrics>span{text-align:center}
.fit-list li::before{display:none}
.fit-list li .ico{color:var(--leaf);width:24px;height:24px;margin-top:-1px}
.direct .ico{width:18px;height:18px;margin-inline-end:8px;vertical-align:-3px}

/* ===== founder ===== */
.founder{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.f-photo{margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4/5;background:var(--g900);box-shadow:0 30px 60px #0b4a2726}
.f-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ph-empty{height:100%;display:grid;place-items:center;align-content:center;gap:16px;color:var(--lime)}
.ph-empty svg{width:80px;height:88px}
.f-copy h2{margin:10px 0 18px;font-size:clamp(30px,4vw,44px);color:var(--g900);line-height:1.1}
.f-name{margin:0;font-size:24px;font-weight:700;color:var(--g900)}
.f-role{margin:4px 0 18px;color:var(--leaf);font-weight:600;letter-spacing:.5px}
.f-copy>p:not(.eyebrow):not(.f-name):not(.f-role):not(.f-kicker){font-size:17px;line-height:1.75;color:var(--ink-soft);margin:0 0 22px}
.founder .facts li{align-items:center}
.founder .facts .ico{color:var(--leaf)}
@media(max-width:800px){.founder{grid-template-columns:1fr;gap:30px}.f-photo{max-width:380px;width:100%;justify-self:center}}

/* ===== concept design label ===== */
.fz-media{display:grid;justify-items:center;gap:12px}
.fz:nth-child(even) .fz-media{order:2}
.fz-tag{margin:0;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-2);display:flex;align-items:center;gap:10px}
.fz-tag::before,.fz-tag::after{content:"";width:26px;height:1px;background:#c9a84c88}
@media(max-width:860px){.fz:nth-child(even) .fz-media{order:0}.fz-media{width:100%}}

/* ===== a better planet + saudi impact ===== */
.kingdom{padding:100px var(--pad);background:var(--bg)}
.kingdom .sec-head h2{color:var(--g900)}
.ways-switch{display:flex;justify-content:center;gap:6px;margin:0 auto 34px;padding:6px;background:#fff;border:1px solid #0b4a2718;border-radius:40px;width:max-content;max-width:100%}
.ws{font:inherit;font-size:14px;font-weight:600;border:0;border-radius:30px;padding:11px 20px;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:8px}
.ws[aria-pressed=true]{background:var(--g900);color:#fff}
.ws .ico{width:18px;height:18px;color:var(--lime)}
.ways{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.way{background:#fff;border:1px solid #0b4a2715;border-radius:22px;padding:26px 22px;transition:background .35s,border-color .35s}
.way-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.way-h .ico{width:38px;height:38px;padding:8px;border-radius:50%;background:var(--sage);color:var(--leaf)}
.way h3{margin:0;font-size:19px;color:var(--g900)}
.way p{margin:0;line-height:1.65;font-size:15px}
.way-old{color:var(--muted)}
.way-new{color:var(--g900);font-weight:500}
.ways[data-mode=new] .way-old,.ways[data-mode=old] .way-new{display:none}
.ways[data-mode=new] .way{background:var(--g900);border-color:var(--g900)}
.ways[data-mode=new] .way h3,.ways[data-mode=new] .way-new{color:#fff}
.ways[data-mode=new] .way-h .ico{background:#ffffff14;color:var(--lime)}
.ksa{margin-top:90px}
.k-grid{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.k-tile{background:#fff;border:1px solid #0b4a2715;border-radius:22px;padding:24px 22px;display:flex;flex-direction:column;gap:8px}
.k-tile>.ico{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--sage);color:var(--leaf)}
.k-num{font-size:clamp(34px,4vw,44px);line-height:1.1;color:var(--g900);font-variant-numeric:tabular-nums}
.k-tile>p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.k-more{margin-top:auto;align-self:flex-start;font:inherit;font-size:13px;font-weight:700;color:var(--leaf);background:none;border:0;padding:8px 0 0;cursor:pointer;display:flex;gap:8px;align-items:center}
.k-more span:last-child{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--sage);transition:transform .25s}
.k-tile.open .k-more span:last-child{transform:rotate(45deg)}
.k-tile .k-help{margin:0;padding:12px 14px;border-radius:14px;background:var(--g900);color:#e6f3da;font-size:14px;line-height:1.6}
.k-tile:last-child{background:var(--g900);border-color:var(--g900)}
.k-tile:last-child .k-num{color:var(--lime)}.k-tile:last-child>p{color:#cfdcd3}
.k-tile:last-child>.ico{background:#ffffff14;color:var(--lime)}
.k-tile:last-child .k-more{color:var(--lime)}.k-tile:last-child .k-more span:last-child{background:#ffffff14}
.k-tile:last-child .k-help{background:#ffffff12}
.k-local{max-width:1100px;margin:22px auto 0;display:flex;gap:22px;align-items:center;background:linear-gradient(135deg,var(--g900),var(--g700));color:#fff;border-radius:22px;padding:28px 30px}
.k-local h3{margin:0 0 6px;font-size:22px}.k-local p{margin:0;color:#d7e3d9;line-height:1.6}
.kingdom .note-line{max-width:900px;margin:26px auto 0;text-align:center;font-size:13px;color:var(--muted);line-height:1.8}
.kingdom .note-line a{color:var(--leaf)}
@media(max-width:1000px){.ways,.k-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ways,.k-grid{grid-template-columns:1fr}.k-local{flex-direction:column;align-items:flex-start}.ws{padding:10px 14px}}
.k-tile:last-child{grid-column:span 2}
@media(max-width:560px){.k-tile:last-child{grid-column:auto}}
.fz .fz-media figure{order:0}
.k-num span[data-en]{font-size:.6em;margin-inline-start:2px}

/* image protection */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
figure,.fz-media,.pw{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
@media print{img,figure{visibility:hidden}}

/* ===== the biovera story (film + 8 frames) ===== */
.story{padding:100px var(--pad);background:linear-gradient(180deg,var(--g950),#0b2418);color:#fff;overflow:hidden}
.story .sec-head h2{color:#fff}.story .sec-head p{color:#b7c8bc}.story .eyebrow{color:var(--gold-2)}
.st-wrap{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:34px;align-items:start}
.st-film{margin:0;position:relative;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px #0009,0 0 0 1px #8ed63e33;background:#000}
.st-film video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.st-play{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;border:0;background:#8ed63ee6;cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 10px #8ed63e33,0 10px 30px #0008;transition:transform .2s}
.st-play:hover{transform:scale(1.06)}
.st-play svg{width:34px;height:34px;fill:var(--g950);margin-inline-start:4px}
.st-film.playing .st-play{display:none}
.st-film figcaption{position:absolute;top:14px;inset-inline-start:14px;font-size:12px;letter-spacing:2px;text-transform:uppercase;background:#0b1a14b3;backdrop-filter:blur(6px);padding:6px 12px;border-radius:20px;color:var(--lime)}
.st-film.playing figcaption{display:none}
.st-rail-wrap{min-width:0}
.st-rail{list-style:none;margin:0;padding:4px 2px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,240px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.st-rail::-webkit-scrollbar{display:none}
.st-card{position:relative;scroll-snap-align:start;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px #0008,0 0 0 1px #ffffff1a;transition:transform .3s}
.st-card:hover{transform:translateY(-4px)}
.st-card img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.st-n{position:absolute;bottom:12px;inset-inline-start:12px;font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--lime);background:#0b1a14b3;backdrop-filter:blur(6px);padding:4px 10px;border-radius:14px}
.st-nav{display:flex;align-items:center;gap:14px;margin-top:6px}
.st-nav button{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff0d;color:#fff;cursor:pointer;display:grid;place-items:center;font-size:18px}
.st-nav button:hover{border-color:var(--lime);color:var(--lime)}
.st-prev .arrow{display:inline-block;transform:scaleX(-1)}
html[dir=rtl] .st-prev .arrow{transform:none}html[dir=rtl] .st-next .arrow{display:inline-block;transform:scaleX(-1)}
.st-count{font-size:14px;color:#b7c8bc;font-variant-numeric:tabular-nums}.st-count b{color:#fff}
.story .note-line{text-align:center;color:#8fa597;margin-top:26px;font-size:13px}
@media(max-width:860px){.st-wrap{grid-template-columns:1fr}.st-film{max-width:340px;width:100%;justify-self:center}.st-rail{grid-auto-columns:62%}}
.st-play{inset:auto 0 18% 0}

/* future concepts: film block at the top */
.fz-film{max-width:1000px;margin:0 auto 70px;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:48px;align-items:center}
.fz-film-copy h3{margin:0 0 12px;font-size:clamp(26px,3vw,36px);color:#fff;line-height:1.15}
.fz-film-copy>p:not(.fz-place){margin:0 0 20px;color:#cfdcd3;line-height:1.7;font-size:16px}
.fz-jump{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fz-jump a{display:inline-block;padding:9px 16px;border-radius:24px;border:1px solid #8ed63e55;color:#e6f3da;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s}
.fz-jump a:hover{background:#8ed63e1f;border-color:var(--lime);color:var(--lime)}
.fz{scroll-margin-top:110px}
@media(max-width:860px){.fz-film{grid-template-columns:1fr;gap:26px}.fz-film .st-film{max-width:340px;width:100%;justify-self:center}}

/* future concepts: tabs beside the film (no images) */
.fz-film{align-items:start}
.fz-film-copy h3{margin-top:6px}
.fz-intro{margin:0 0 22px;color:#cfdcd3;line-height:1.7;font-size:16px}
.fz-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.fz-tabs [role=tab]{font:inherit;font-size:14px;font-weight:600;padding:10px 18px;border-radius:24px;border:1px solid #8ed63e55;background:none;color:#e6f3da;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.fz-tabs [role=tab]:hover{border-color:var(--lime);color:var(--lime)}
.fz-tabs [aria-selected=true]{background:var(--lime);border-color:var(--lime);color:var(--g950)}
.fz-panel{background:#ffffff0a;border:1px solid #ffffff1f;border-radius:22px;padding:26px 26px 22px;animation:fzIn .35s ease}
.fz-panel[hidden]{display:none}
.fz-panel h4{margin:4px 0 10px;font-size:24px;color:#fff}
.fz-panel>p:not(.fz-place):not(.fz-future){margin:0 0 14px;color:#cfdcd3;line-height:1.7;font-size:16px}
.fz-panel ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.fz-panel li{display:flex;gap:10px;align-items:flex-start;color:#e6f3da;font-size:15px}
.fz-panel li::before{content:"";flex:none;width:9px;height:9px;margin-top:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.fz-panel .fz-future{margin:0;color:var(--lime);font-weight:600;font-size:15px;border-inline-start:3px solid var(--lime);padding-inline-start:12px}
@keyframes fzIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fz-panel{animation:none}}

/* header: keep menu items and tagline on one line at mid widths */
nav a{white-space:nowrap}
.brand small{white-space:nowrap}
@media(min-width:1101px) and (max-width:1340px){nav{gap:15px}nav a{font-size:13.5px}.brand small{letter-spacing:2px}}
.f-kicker{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--leaf)}