/* Layout: floating pill nav → centred hero with demo player → product streams → stats → clients → countries → process → EPRpilot → audiences → FAQ → contact card → footer.
   Brand look from the otoneso presentation: paper-white ground, deep green-black ink, leaf green accent, short green bar as section motif. */
:root{
  --bg:#EFEFEF; --surface:#FFFFFF; --surface-2:#EEF2E8; --sage:#E6EBE0; --ink:#1A1A1A; --muted:#55615A; --dim:#7A857E; --line:#DDE3D6;
  --green:#96C43C; --leaf:#96C43C; --leaf-hover:#86B232; --olive:#546D31; --on-leaf:#1A1A1A; --warn:#9A6B2A; --teal:#1F4A43;
  --ring:0 0 0 1px rgba(19,32,26,.07), 0 1px 2px rgba(19,32,26,.04);
  --lift:0 30px 60px -36px rgba(19,32,26,.28);
  --f-display:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Inter","Segoe UI",system-ui,sans-serif;
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16.5px; line-height:1.6; margin:0; position:relative; overflow-x:clip}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:40; background:var(--bg)}
a{color:inherit}
:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.wrap{max-width:1240px; margin:0 auto; padding-left:var(--gut); padding-right:var(--gut-r)}
h1,h2,h3{font-family:var(--f-display); font-weight:800; letter-spacing:-.035em; line-height:1.06; text-wrap:balance; margin:0}
h1 em,h2 em,h3 em{font-style:normal; color:var(--green)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font:700 12.5px var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--olive)}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--leaf); flex:none}
.gbar{display:block; width:66px; height:7px; border-radius:99px; background:var(--leaf)}
.page-glow{position:absolute; left:50%; top:-320px; transform:translateX(-50%); width:min(1100px,100%); height:900px; background:radial-gradient(closest-side, rgba(150,196,60,.18), rgba(150,196,60,.05) 55%, transparent 75%); pointer-events:none; z-index:0}

.btn{display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:13px 22px; font:700 15px var(--f-body); text-decoration:none; border:0; cursor:pointer; background:var(--leaf); color:var(--on-leaf); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(19,32,26,.12), 0 14px 28px -16px rgba(89,143,36,.8)}
.btn:hover{background:var(--leaf-hover)}
.btn svg{width:14px; height:14px}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(19,32,26,.18)}
.btn-ghost:hover{background:transparent; box-shadow:inset 0 0 0 1.5px var(--green); color:var(--green)}
.ldot{width:7px; height:7px; border-radius:50%; background:var(--leaf); animation:blink 1.6s infinite; flex:none}
@keyframes blink{50%{opacity:.35}}
@keyframes rise{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}
.mk-img{display:block; width:auto}

/* ---------- Nav ---------- */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; padding:12px var(--gut-r) 0 var(--gut)}
.nav .bar{max-width:1180px; margin:0 auto; padding:8px 8px 8px 20px; display:flex; align-items:center; gap:22px; border-radius:999px; background:rgba(255,255,255,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--ring), 0 10px 30px -20px rgba(19,32,26,.3)}
.logo{display:flex; align-items:center; text-decoration:none; flex:none}
.logo img{height:30px; width:auto; display:block}
.menu{flex:1; display:flex; align-items:center; justify-content:flex-end; gap:20px; font-size:14px; font-weight:500}
.menu a{text-decoration:none; color:var(--muted)}
.menu a:hover{color:var(--ink)}
.menu .live{display:inline-flex; align-items:center; gap:7px; color:var(--ink)}
.menu .btn{color:var(--on-leaf); padding:10px 18px; font-size:14px; box-shadow:none}
.lang{font:600 12px var(--f-body); color:var(--dim)!important; border-radius:999px; padding:4px 9px; box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:1020px){.menu a:not(.btn):not(.live):not(.lang){display:none}}
@media (max-width:540px){.menu .live{display:none} .nav .bar{padding-left:16px} .logo img{height:26px}}

/* ---------- Hero + player ---------- */
.hero{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:56px var(--gut-r) 24px var(--gut); display:flex; flex-direction:column; align-items:center; gap:26px; text-align:center}
.hero .eyebrow{padding:7px 14px; border-radius:999px; background:var(--surface); box-shadow:var(--ring)}
.hero .eyebrow::before{display:none}
.hero h1{font-size:clamp(36px,4.8vw,64px); max-width:940px}
.hero .lead{margin:-6px 0 0; max-width:660px; color:var(--muted); font-size:clamp(15px,1.3vw,17.5px)}
.player{width:100%; max-width:980px; border-radius:26px; padding:10px; background:var(--surface); box-shadow:var(--ring), var(--lift); text-align:left}
.screen{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/9; background:var(--sage); background-image:linear-gradient(rgba(19,32,26,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(19,32,26,.045) 1px, transparent 1px); background-size:40px 40px}
.scr-logo{position:absolute; top:14px; left:20px}
.scr-logo img{height:20px; width:auto; display:block}
.scr-chap{position:absolute; top:16px; right:20px; font:600 12px var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--olive)}
.scene{position:absolute; inset:52px 6% 76px; display:none; gap:6%; align-items:center; justify-content:center}
.scene.on{display:flex; animation:rise .5s ease}
.say{flex:0 1 40%; display:flex; flex-direction:column; gap:10px}
.say span{font:700 12px var(--f-body); letter-spacing:.12em; color:var(--olive)}
.say div{font-family:var(--f-display); font-size:clamp(17px,2.5vw,33px); font-weight:800; letter-spacing:-.035em; line-height:1.1}
.say b{color:var(--green)}
.mock{flex:0 1 46%; display:flex; flex-direction:column; gap:8px; font-size:clamp(10px,1.25vw,14px); min-width:0}
.row{display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); border-radius:12px; padding:9px 12px; box-shadow:var(--ring)}
.row small{color:var(--dim); font-size:.86em}
.ok{color:var(--green); font-weight:600} .wait{color:var(--warn); font-weight:600} .q{color:var(--muted)}
.row.hl{background:#F1F8E6; box-shadow:inset 0 0 0 1.5px var(--leaf)}
.pchips{display:flex; flex-wrap:wrap; gap:6px}
.pchip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--surface); box-shadow:var(--ring); font-weight:600; font-size:.92em}
.pchip i{width:7px; height:7px; border-radius:50%; background:var(--leaf)} .pchip i.w{background:var(--warn)}
.meter{height:8px; border-radius:99px; background:#D3DBC9; overflow:hidden} .meter i{display:block; height:100%; background:var(--leaf); border-radius:99px}
.big-cta{display:inline-block; align-self:center; background:var(--leaf); color:var(--on-leaf); border-radius:999px; padding:10px 20px; font-weight:700; text-decoration:none}
.subt{position:absolute; left:50%; bottom:52px; transform:translateX(-50%); max-width:86%; text-align:center; font-size:clamp(10.5px,1.2vw,13.5px); color:#F7F8F4; background:rgba(19,32,26,.82); border-radius:8px; padding:4px 10px}
.ctrl{position:absolute; left:12px; right:12px; bottom:10px; display:flex; align-items:center; gap:12px}
.pp{flex:none; width:36px; height:36px; border-radius:999px; border:0; cursor:pointer; display:grid; place-items:center; color:var(--ink); background:var(--surface); box-shadow:var(--ring)}
.pp svg{width:14px; height:14px}
.ctrl time{font:600 12px var(--f-body); color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.chaps{flex:1; display:flex; gap:4px}
.chaps button{flex:1; height:24px; border:0; padding:0; background:none; cursor:pointer; display:flex; align-items:center}
.chaps button span{display:block; width:100%; height:4px; border-radius:2px; background:rgba(19,32,26,.14); overflow:hidden}
.chaps button i{display:block; height:100%; width:0; background:var(--teal); border-radius:2px}
.chaps button.cur i{background:var(--leaf)}
.player-note{margin:-10px 0 0; font-size:13px; color:var(--dim)}
.hero-cta{width:100%; max-width:980px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; text-align:left; margin-top:6px}
.hero-cta p{margin:0}
.hero-cta .big{font-family:var(--f-display); font-size:24px; font-weight:800; letter-spacing:-.03em; line-height:1.25}
.hero-cta .big b{color:var(--green)}
.hero-cta .sm{font-size:14px; color:var(--dim); max-width:440px; margin-top:6px}
.acts{display:flex; gap:12px; flex-wrap:wrap}
@media (max-width:720px){
  .screen{aspect-ratio:auto; min-height:440px}
  .scene{inset:48px 16px 92px; flex-direction:column-reverse; justify-content:center; gap:16px}
  .say,.mock{flex:none; width:100%}
  .say div{font-size:20px}
  .subt{bottom:54px}
}

/* ---------- Sections common ---------- */
section{position:relative; z-index:1}
.sec{padding-block:clamp(56px,7vw,96px)}
.head{display:grid; gap:24px; margin-bottom:clamp(36px,5vw,64px); max-width:1100px}
.head h2{font-size:clamp(34px,4.2vw,58px); margin-top:14px}
.head p{margin:0; color:var(--muted); font-size:clamp(17px,1.5vw,21px); line-height:1.5; max-width:52ch}
.arrow-i{width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center; background:#EAF3DC; color:var(--green); transition:background .35s, transform .35s}
.arrow-i svg{width:15px; height:15px}

/* ---------- Product streams ---------- */
.cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.card{display:flex; flex-direction:column; gap:14px; padding:28px 26px 26px; background:var(--surface); border-radius:18px; box-shadow:var(--ring); text-decoration:none; transition:background .35s, box-shadow .35s}
.card .ico{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--teal); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.card .ico svg{width:24px; height:24px}
.card h3{font-weight:800; font-size:23px; letter-spacing:-.03em}
.card p{margin:0; color:var(--muted); font-size:15.5px}
.card .foot{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line)}
.card .foot small{font:600 12px var(--f-body); letter-spacing:.04em; color:var(--olive)}
.card:hover,.card:focus-visible{box-shadow:inset 0 0 0 1.5px var(--leaf), var(--lift)}
.card:hover .ico{background:var(--leaf); color:var(--on-leaf)}
.card:hover .arrow-i{background:var(--leaf); color:var(--on-leaf); transform:rotate(45deg)}
@media (max-width:1080px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* ---------- Stats ---------- */
.stats .grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--teal); color:#F7F8F4; border-radius:26px; padding:clamp(28px,4vw,52px); box-shadow:var(--lift)}
.stats .eyebrow{color:#B9DB85}
.stats .eyebrow::before{background:var(--leaf)}
.stat{display:flex; flex-direction:column; gap:10px; padding:4px clamp(16px,2.4vw,36px)}
.stat:first-child{padding-left:0}
.stat + .stat{border-left:1px solid rgba(247,248,244,.16)}
.stat b{font-family:var(--f-display); font-weight:800; font-size:clamp(48px,6vw,84px); line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.stat p{margin:0; color:#C5D1CA; font-size:15.5px; max-width:24ch}
@media (max-width:860px){.stats .grid{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:36px} .stat:nth-child(3){padding-left:0; border-left:0}}
@media (max-width:460px){.stat{padding:0} .stat + .stat{border:0} .stat b{font-size:44px}}

/* ---------- Clients ---------- */
.trust{overflow:hidden; padding-block:clamp(40px,5vw,72px)}
.trust h2{font-size:clamp(28px,3vw,42px); margin:14px 0 36px}
.marquee{display:flex; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.track{display:flex; flex:none; gap:16px; padding:0 8px; margin:0; list-style:none; animation:scroll 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-100%)}}
.client{flex:none; display:flex; align-items:center; justify-content:center; width:210px; height:96px; border-radius:16px; background:var(--surface); box-shadow:var(--ring); font-family:var(--f-display); font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--dim); transition:color .3s}
.client:hover{color:var(--ink)}
.client.alg{gap:10px; font-size:17px} .client.alg i{font:700 11px var(--f-body); font-style:normal; color:var(--on-leaf); background:var(--leaf); padding:3px 8px; border-radius:999px}
@media (prefers-reduced-motion: reduce){.marquee{mask-image:none; -webkit-mask-image:none} .track{flex-wrap:wrap; justify-content:center} .track[aria-hidden]{display:none}}

/* ---------- Countries ---------- */
.ctry{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start}
.cgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px}
.cbtn{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:14px; border:0; background:var(--surface); box-shadow:var(--ring); color:var(--ink); font:500 14.5px var(--f-body); text-align:left; cursor:default; transition:background .25s, box-shadow .25s}
.cbtn i{font:700 11.5px var(--f-body); font-style:normal; color:var(--dim); width:24px; letter-spacing:.04em}
.cbtn:hover{background:var(--surface-2)}
.cbtn[aria-pressed="true"]{background:#F1F8E6; box-shadow:inset 0 0 0 1.5px var(--leaf)}
.cbtn[aria-pressed="true"] i{color:var(--green)}
.cpanel{position:sticky; top:96px; background:var(--surface); box-shadow:var(--ring), var(--lift); border-radius:24px; padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:16px}
.cpanel .code{font:700 12.5px var(--f-body); letter-spacing:.14em; color:var(--olive)}
.cpanel h3{font-size:clamp(30px,3vw,42px)}
.cpanel > p{margin:0; color:var(--muted); font-size:15.5px}
.streams{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.streams li{display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); font-size:15px}
.streams span{color:var(--muted); font-size:13.5px; text-align:right}
.streams b{font-weight:600}
@media (max-width:900px){.ctry{grid-template-columns:1fr} .cpanel{position:static}}

/* ---------- Process ---------- */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line)}
.steps div{padding:26px 26px 6px 0}
.steps div + div{padding-left:26px; border-left:1px solid var(--line)}
.steps i{font:700 12px var(--f-body); font-style:normal; color:var(--olive); letter-spacing:.14em; text-transform:uppercase}
.steps b{display:block; font-family:var(--f-display); font-size:24px; font-weight:800; letter-spacing:-.03em; margin:10px 0 8px}
.steps p{margin:0; color:var(--muted); font-size:15.5px}
.steps .tag{display:inline-block; margin-top:14px; font:700 12px var(--f-body); color:var(--on-leaf); background:var(--leaf); border-radius:999px; padding:3px 10px}
@media (max-width:760px){.steps{grid-template-columns:1fr} .steps div + div{padding-left:0; border-left:0; border-top:1px solid var(--line)}}

/* ---------- EPRpilot ---------- */
.pilot-top{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:end; margin-bottom:clamp(32px,4vw,52px)}
.pilot-top h2{font-size:clamp(32px,3.6vw,52px); margin:14px 0 16px}
.pilot-top p{color:var(--muted); margin:0 0 20px; max-width:52ch}
.feat{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px}
.feat li{display:flex; gap:12px; align-items:flex-start; color:var(--muted)}
.feat li b{color:var(--ink); font-weight:600}
.feat svg{width:20px; height:20px; flex:none; margin-top:3px; color:var(--green)}
@media (max-width:900px){.pilot-top{grid-template-columns:1fr}}
.ap{--a-card:#FFFFFF; --a-ink:#1A1A1A; --a-mut:#66716A; --a-line:#E1E6DA;
  display:grid; grid-template-columns:240px minmax(0,1fr); gap:18px; padding:18px; border-radius:28px; background:var(--sage); color:var(--a-ink); box-shadow:var(--ring), var(--lift)}
.ap-side{background:var(--teal); color:#E7EEE9; border-radius:22px; padding:20px 14px; display:flex; flex-direction:column; gap:4px; font-size:14px}
.ap-brand{display:flex; align-items:center; gap:8px; padding:0 8px 16px; font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; color:#fff}
.ap-brand i{width:10px; height:10px; border-radius:3px; background:var(--leaf)}
.ap-nav{padding:9px 12px; border-radius:12px; color:#B9C7C0; display:flex; justify-content:space-between; align-items:center}
.ap-nav.on{background:rgba(255,255,255,.1); color:#fff; font-weight:600}
.badge{font-size:11px; font-weight:700; min-width:20px; height:20px; display:inline-grid; place-items:center; border-radius:50%; background:var(--leaf); color:var(--on-leaf)}
.ap-main{display:grid; gap:14px; align-content:start; min-width:0; padding:4px}
.ap-hello{font-family:var(--f-display); font-size:clamp(24px,2.6vw,34px); font-weight:500; letter-spacing:-.03em; line-height:1.1}
.ap-hello b{font-weight:800}
.ap-date{color:var(--a-mut); font-size:14px}
.ap-kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.ap-kpis div{background:var(--a-card); border:1px solid var(--a-line); border-radius:18px; padding:14px 16px}
.ap-kpis small{display:block; font-size:12.5px; color:var(--a-mut); font-weight:600}
.ap-kpis b{font-family:var(--f-display); font-size:32px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.ap-kpis span{display:block; font-size:12.5px; color:var(--a-mut)}
.ap-card{background:var(--a-card); border:1px solid var(--a-line); border-radius:18px; padding:16px 18px; overflow-x:auto}
.ap-card h4{margin:0 0 10px; font-family:var(--f-display); font-size:17px; font-weight:800; letter-spacing:-.01em}
.ap-card table{width:100%; min-width:460px; border-collapse:collapse; font-size:13.5px}
.ap-card th,.ap-card td{padding:9px 6px; text-align:left; border-top:1px solid var(--a-line)}
.ap-card th{font-weight:600; color:var(--a-mut); font-size:12px; border-top:0}
.st{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:12.5px}
.st i{width:8px; height:8px; border-radius:2px}
.st.g i{background:var(--green)} .st.y i{background:#D9A23A} .st.n i{background:#B9C0B4}
.ap-note{margin:14px 0 0; font-size:13px; color:var(--dim); text-align:center}
@media (max-width:820px){.ap{grid-template-columns:1fr; padding:12px} .ap-side{display:none}}
@media (max-width:520px){.ap-kpis{gap:8px} .ap-kpis div{padding:10px} .ap-kpis b{font-size:22px} .ap-kpis span{display:none}}

/* ---------- Audiences + services ---------- */
.aud{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:clamp(40px,5vw,64px)}
.aud article{background:var(--surface); box-shadow:var(--ring); border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:10px}
.aud small{font:700 12px var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--olive)}
.aud b{font-family:var(--f-display); font-size:21px; font-weight:800; letter-spacing:-.03em; line-height:1.2}
.aud p{margin:0; color:var(--muted); font-size:15px}
.aud .mk{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px}
.aud .mk span{font:600 12px var(--f-body); padding:4px 10px; border-radius:999px; background:#EAF3DC; color:var(--olive)}
@media (max-width:900px){.aud{grid-template-columns:1fr}}
.svc{list-style:none; margin:0; padding:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(24px,4vw,56px)}
.svc li{display:grid; grid-template-columns:minmax(120px,200px) minmax(0,1fr); gap:20px; padding:18px 0; border-bottom:1px solid var(--line)}
.svc b{font-family:var(--f-display); font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:1.3}
.svc span{color:var(--muted); font-size:15px}
@media (max-width:900px){.svc{grid-template-columns:1fr}}
@media (max-width:520px){.svc li{grid-template-columns:1fr; gap:4px}}

/* ---------- FAQ ---------- */
.faq .wrap{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(28px,6vw,96px)}
.faq-head{align-self:start; position:sticky; top:96px; display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.faq-head h2{font-size:clamp(34px,4vw,56px)}
.faq-head p{margin:0 0 8px; color:var(--muted); max-width:36ch}
.faq-list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font-family:var(--f-display); font-size:clamp(18px,1.6vw,21px); font-weight:700; letter-spacing:-.02em; line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--green)}
.pm{position:relative; flex:none; width:36px; height:36px; border-radius:50%; background:var(--leaf)}
.pm::before,.pm::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.8px; background:var(--on-leaf); translate:-50% -50%}
.pm::after{rotate:90deg; transition:rotate .3s}
.qa[open] .pm::after{rotate:0deg}
.qa p{margin:0 0 24px; color:var(--muted); max-width:62ch; padding-right:56px}
@media (max-width:860px){.faq .wrap{grid-template-columns:1fr} .faq-head{position:static} .qa p{padding-right:0}}

/* ---------- Contact (deep teal card) ---------- */
.contact .box{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,96px); background:var(--teal); color:#F7F8F4; border-radius:28px; padding:clamp(28px,5vw,64px); box-shadow:var(--lift)}
.contact .eyebrow{color:#B9DB85}
.contact h2{font-size:clamp(36px,4.4vw,62px); margin:16px 0 22px}
.contact h2 em{color:var(--leaf)}
.contact p{color:#C5D1CA; max-width:44ch; margin:0 0 14px}
.cdet{display:grid; gap:6px; margin-top:24px; font-size:15.5px; color:#C5D1CA}
.cdet .sel{user-select:all; color:#fff; font-weight:600}
form{display:grid; gap:16px}
label{display:grid; gap:6px; font:600 12px var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:#B9C7C0}
input,select,textarea{font:inherit; font-family:var(--f-body); font-size:16px; text-transform:none; letter-spacing:0; color:#fff; background:transparent; border:0; border-bottom:1px solid rgba(247,248,244,.28); padding:10px 0; border-radius:0}
input::placeholder{color:#8FA39A}
select option{color:#1A1A1A}
input:focus,select:focus,textarea:focus{outline:none; border-bottom-color:var(--leaf)}
textarea{min-height:96px; resize:vertical}
.form-note{font-size:14px; color:#B9DB85; min-height:1.4em; margin:0}
.contact :focus-visible{outline-color:var(--leaf)}
@media (max-width:820px){.contact .box{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); color:var(--dim); font-size:14.5px; margin-top:clamp(48px,6vw,80px)}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--green)}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,56px); padding-block:clamp(56px,7vw,88px) 40px}
.foot-brand img{height:34px; width:auto; display:block}
.foot-brand p{margin:18px 0 24px; max-width:34ch}
.foot-col{display:flex; flex-direction:column; gap:10px; font-style:normal; line-height:1.5}
.foot-col h4{margin:0 0 6px; font:700 11.5px var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--olive)}
.foot-col b{color:var(--ink); font-weight:600}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-block:22px; border-top:1px solid var(--line); font-size:13px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- EPRpilot platform card ---------- */
.pilot{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
.pilot h2{font-size:clamp(32px,3.6vw,52px); margin:14px 0 16px}
.pilot > div > p{color:var(--muted); margin:0 0 22px; max-width:52ch}
.pf-wrap{position:relative; padding-top:34px}
.pf-mascot{position:absolute; top:-26px; left:-30px; width:96px; height:auto; z-index:2; filter:drop-shadow(0 10px 14px rgba(19,32,26,.18)); transform:rotate(-6deg)}
.pf{position:relative; background:rgba(255,255,255,.75); border-radius:28px; padding:clamp(16px,2vw,24px); box-shadow:var(--ring), var(--lift)}
.pf-top,.pf-two > div{background:var(--surface); border-radius:18px; box-shadow:var(--ring); padding:clamp(16px,2vw,22px)}
.pf-h{display:flex; align-items:center; gap:14px; font:700 14.5px var(--f-body); letter-spacing:.06em; text-transform:uppercase}
.pf-ico{width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--teal); color:#fff}
.pf-ico svg{width:22px; height:22px}
.pf-chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}
.pf-chips span{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; padding:5px 12px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line)}
.pf-chips span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--leaf)}
.pf-top p,.pf-two p{margin:0; color:var(--muted); font-size:15px}
.pf-fork{display:block; width:100%; height:64px}
.pf-fork path{fill:none; stroke:#A9C98A; stroke-width:2}
.pf-fork circle{fill:var(--leaf)}
.pf-two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.pf-two b{display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-size:17px; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin-bottom:10px}
.pf-two b span{width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; background:#EAF3DC; color:var(--teal)}
.pf-two b svg{width:19px; height:19px}
.pf-foot{margin:16px 0 2px; text-align:center; font-size:13.5px; color:var(--dim)}
@media (max-width:900px){.pilot{grid-template-columns:1fr} .pf-mascot{left:-6px; width:90px}}
@media (max-width:460px){.pf-two{grid-template-columns:1fr}}

/* ---------- About ---------- */
.about{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,6vw,96px); align-items:center}
.about .pill{display:inline-flex; align-items:center; gap:9px; font:700 12.5px var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--green); background:#EAF3DC; padding:8px 16px; border-radius:999px}
.about .pill svg{width:16px; height:16px}
.about h2{font-size:clamp(34px,4.2vw,58px); margin:22px 0 22px}
.about h2 i{font-style:normal; color:var(--leaf)}
.about p{color:var(--muted); font-size:clamp(17px,1.4vw,19px); line-height:1.65; margin:0 0 30px; max-width:52ch}
.photo-card{margin:0; background:var(--surface); border-radius:22px; overflow:hidden; box-shadow:var(--ring), var(--lift); transform:rotate(-1.8deg); transition:transform .5s ease}
.photo-card:hover{transform:rotate(0)}
.photo-card img{display:block; width:100%; height:auto; aspect-ratio:800/798; object-fit:cover}
.photo-card figcaption{display:flex; align-items:center; gap:10px; padding:18px 24px; font-weight:500}
.photo-card figcaption svg{width:18px; height:18px; color:var(--leaf)}
@media (max-width:900px){.about{grid-template-columns:1fr} .photo-card{max-width:560px}}

/* ---------- Challenges ---------- */
.pains .head{margin-inline:auto; text-align:center; justify-items:center; max-width:900px}
.pains .head p{max-width:62ch}
.pain-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.pain-grid article{background:var(--surface); border-radius:22px; box-shadow:var(--ring), 0 18px 40px -28px rgba(19,32,26,.35); padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; transition:box-shadow .3s, transform .3s}
.pain-grid article:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1.5px var(--leaf), var(--lift)}
.pain-ico{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:#EAF3DC; color:var(--teal); margin-bottom:6px}
.pain-ico svg{width:28px; height:28px}
.pain-grid h3{font-size:21px; letter-spacing:-.025em}
.pain-grid p{margin:0; color:var(--muted); font-size:15.5px; max-width:34ch}
@media (max-width:960px){.pain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.pain-grid{grid-template-columns:1fr}}

/* ---------- Product categories strip ---------- */
.cats{padding-block:clamp(24px,3vw,40px) 0}
.cat-row{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; list-style:none; margin:0; padding:0}
.cat-row li{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:116px; padding:16px 10px; text-align:center; background:rgba(255,255,255,.7); border-radius:16px; box-shadow:inset 0 0 0 1px var(--line); font-size:14.5px; font-weight:600; line-height:1.3; transition:background .25s, box-shadow .25s, transform .25s}
.cat-row li:hover{background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--leaf); transform:translateY(-2px)}
.cat-row svg{width:28px; height:28px; color:var(--leaf)}
@media (max-width:1080px){.cat-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:480px){.cat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cgroups{display:grid; gap:26px; min-width:0}
.cgroup h4{margin:0 0 12px; font:700 12.5px var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--olive); display:flex; align-items:center; gap:10px}
.cgroup h4 span{font:600 12px var(--f-body); letter-spacing:0; text-transform:none; color:var(--on-leaf); background:#EAF3DC; border-radius:999px; padding:2px 9px}
.cbtn .fl{font-size:18px; line-height:1; width:24px; text-align:center; flex:none}
.cgrid.world .cbtn{background:rgba(255,255,255,.6)}

/* ---------- What is EPR ---------- */
.what{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); align-items:center}
.what h2{font-size:clamp(34px,4.2vw,56px); margin:14px 0 20px}
.what p{color:var(--muted); margin:0 0 14px; max-width:58ch}
.what .btn{margin-top:14px} .what ul{list-style:none; margin:20px 0 28px; padding:0; display:grid; gap:10px}
.what li{display:flex; gap:12px; align-items:center; font-weight:600}
.what li svg{width:20px; height:20px; flex:none; color:var(--green)}
.what-photo{position:relative; margin:0; border-radius:26px; overflow:hidden; box-shadow:var(--ring), var(--lift); aspect-ratio:4/3; max-width:100%}
.what-photo img{width:100%; height:100%; object-fit:cover; object-position:60% 40%; display:block; transition:transform 1.2s ease}
.what-photo:hover img{transform:scale(1.03)}
.what-photo figcaption{position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink); background:rgba(255,255,255,.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:999px; padding:7px 14px}
.what-photo figcaption i{width:8px; height:8px; border-radius:50%; background:var(--leaf)}
@media (max-width:900px){.what{grid-template-columns:1fr}}

/* ---------- Reviews ---------- */
.reviews .rhead{text-align:center; display:grid; justify-items:center; gap:18px; margin-bottom:clamp(36px,5vw,56px)}
.reviews h2{font-size:clamp(34px,4.2vw,56px)}
.reviews h2 span{display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center}
.reviews h2 .avs{display:inline-flex; gap:0}
.avs i{width:52px; height:52px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font:700 16px var(--f-body); font-style:normal; letter-spacing:0; color:#fff; border:3px solid var(--bg); margin-left:-12px}
.avs i:first-child{margin-left:0} .avs svg{width:100%; height:100%; display:block}
.avs i:nth-child(1){background:var(--teal)} .avs i:nth-child(2){background:var(--olive)} .avs i:nth-child(3){background:var(--green)} .avs i:nth-child(4){background:var(--leaf); color:var(--on-leaf)}
.reviews .rhead p{margin:0; color:var(--muted); max-width:62ch}
.rgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.rcard{margin:0; background:var(--surface); border-radius:20px; box-shadow:inset 0 0 0 1px var(--line); padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column; gap:22px}
.rq{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:#EAF3DC; color:var(--leaf)}
.rq svg{width:22px; height:22px}
.rcard blockquote{margin:0; font-size:17px; line-height:1.65; color:var(--ink)}
.rcard figcaption{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; color:var(--muted)}
.stars{display:inline-flex; gap:2px; color:var(--leaf)} .stars svg{width:18px; height:18px}
@media (max-width:900px){.rgrid{grid-template-columns:1fr}}
.dd{position:relative; display:flex; align-items:center}
.dd>a{display:inline-flex; align-items:center; gap:4px}
.dd>a svg{width:12px; height:12px; transition:transform .2s}
.dd:hover>a svg,.dd:focus-within>a svg{transform:rotate(180deg)}
.dd-menu{position:absolute; top:100%; left:-16px; padding-top:12px; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s, transform .18s, visibility .18s; z-index:50}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1; visibility:visible; transform:none}
.dd-menu div{min-width:290px; background:var(--surface); border-radius:16px; box-shadow:var(--ring), var(--lift); padding:8px; display:grid; gap:2px}
.menu .dd-menu a{display:block; padding:10px 12px; border-radius:10px; color:var(--ink); font-weight:600}
.menu .dd-menu a small{display:block; font-weight:400; font-size:12.5px; color:var(--dim); margin-top:2px}
.menu .dd-menu a:hover{background:var(--surface-2)}
@media (max-width:1020px){.menu .dd{display:none}}

/* ---- orange accents ---- */
:root{--orange:#F28C28; --orange-hover:#E27A12; --on-orange:#1B1206; --orange-soft:#FDEBD8}
.btn:not(.btn-ghost){background:var(--orange); color:var(--on-orange); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -12px rgba(226,122,18,.75)}
.btn:not(.btn-ghost):hover{background:var(--orange-hover)}
.menu .btn{color:var(--on-orange)}
.big-cta{background:var(--orange); color:var(--on-orange)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--orange); color:var(--orange-hover)}
.stars{color:var(--orange)}
.steps .tag{background:var(--orange); color:var(--on-orange)}
.pm{background:var(--leaf)} .pm::before,.pm::after{background:var(--on-leaf)}
.badge{background:var(--orange); color:var(--on-orange)}
.progress i{background:linear-gradient(90deg,var(--leaf),var(--orange))}
.card:hover .arrow-i{background:var(--orange); color:var(--on-orange)}
.rq{background:var(--orange-soft); color:var(--orange)}
.contact h2 em,.reach h2 em{color:var(--orange)}
.client.alg i{background:var(--orange); color:var(--on-orange)}
.cstep h3 b{background:var(--orange-soft); color:var(--orange-hover)}
.chip[aria-pressed="true"]{background:var(--ink)}
.page-glow{display:none}
.nav .btn:not(.btn-ghost){background:var(--leaf); color:var(--on-leaf); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -12px rgba(89,143,36,.7)}
.nav .btn:not(.btn-ghost):hover{background:var(--leaf-hover)}

/* eco emblem in subpage heroes */
.sub-hero::before{content:""; position:absolute; z-index:-1; top:50%; right:clamp(-200px,-6vw,-40px); width:clamp(340px,34vw,540px); aspect-ratio:1; transform:translateY(-50%); background:url(img/eco.svg) center/contain no-repeat; pointer-events:none}
@media (max-width:720px){.sub-hero::before{width:300px; right:-150px; opacity:.6}}

/* language dropdown */
.langdd{position:relative; display:inline-flex}
.langdd-btn{display:inline-flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; font:600 15px var(--f-body); color:var(--ink); padding:6px 4px}
.langdd-btn .chev{width:15px; height:15px; color:var(--muted); transition:transform .2s}
.langdd .flag{display:inline-flex; width:22px; height:15px; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px rgba(19,32,26,.12); flex:none}
.langdd .flag svg{width:100%; height:100%; display:block}
.langdd-menu{position:absolute; top:100%; right:0; padding-top:8px; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s, transform .18s, visibility .18s; z-index:60}
.langdd-menu a{display:flex; align-items:center; gap:10px; white-space:nowrap; background:var(--surface); border-radius:12px; padding:10px 14px; box-shadow:var(--ring), 0 14px 30px -12px rgba(19,32,26,.25); font:600 14px var(--f-body); color:var(--ink); text-decoration:none}
.langdd-menu a:hover{color:var(--green)}
.langdd:hover .langdd-menu,.langdd:focus-within .langdd-menu{opacity:1; visibility:visible; transform:none}
.langdd:hover .chev,.langdd:focus-within .chev{transform:rotate(180deg)}

/* notched photo corner with caption */
.notched{position:relative; box-shadow:none!important; border-bottom-right-radius:0!important}
.notched .ph-notch{position:absolute; z-index:2; left:auto; right:0; bottom:0; display:block; background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0; border-top-left-radius:28px; padding:clamp(14px,1.8vw,26px) clamp(16px,2.2vw,30px) 4px; min-width:min(46%,300px); text-align:left; font-weight:400; gap:0}
.notched .ph-notch::before,.notched .ph-notch::after{content:""; position:absolute; width:28px; height:28px; background:radial-gradient(circle at 0 0, transparent 27.5px, var(--bg) 28px)}
.notched .ph-notch::before{right:0; bottom:100%} .notched .ph-notch::after{bottom:0; right:100%}
.notched .ph-notch b{display:block; font:800 clamp(22px,2.3vw,32px)/1 var(--f-display); letter-spacing:-.03em; color:var(--ink)}
.notched .ph-notch span{display:block; margin-top:8px; font-size:clamp(13px,1.1vw,15.5px); line-height:1.55; color:var(--muted)}
@media (max-width:560px){.notched .ph-notch{min-width:0; max-width:75%}}

/* Service subpage hero: centered, photo with notched corners (as home hero) */
.sub-hero-c .wrap{display:flex; flex-direction:column; align-items:center; text-align:center}
.sub-hero-c .crumbs{align-self:center}
.svc-hero{display:flex; flex-direction:column; align-items:center; gap:22px; max-width:900px}
.svc-hero .eyebrow::before{display:none}
.svc-hero .eyebrow{font-size:10.1px; padding:6px 12px; border-radius:999px; background:var(--surface); box-shadow:var(--ring)}
.svc-hero h1{margin:0}
.svc-hero .lead{margin:0; max-width:660px; color:var(--muted)}
.svc-hero .acts{justify-content:center}
.hphoto{position:relative; width:100%; max-width:1040px; margin:clamp(28px,3.4vw,44px) auto 0; border-radius:0 30px 0 30px; overflow:hidden; aspect-ratio:16/9; background:#D9D9D6; text-align:left}
.hphoto > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; animation:hpzoom 18s ease-in-out infinite alternate}
@keyframes hpzoom{from{transform:scale(1)} to{transform:scale(1.06)}}
.hp-tl{position:absolute; z-index:2; top:0; left:0; width:clamp(78px,10%,112px); aspect-ratio:1; background:var(--bg); border-bottom-right-radius:30px; display:grid; place-items:center}
.hp-tl::before,.hp-tl::after{content:""; position:absolute; width:30px; height:30px; background:radial-gradient(circle at 100% 100%, transparent 29.5px, var(--bg) 30px)}
.hp-tl::before{top:0; left:100%} .hp-tl::after{top:100%; left:0}
.hp-badge{width:58%; aspect-ratio:1; border-radius:50%; background:#1A1A1A; display:grid; place-items:center; box-shadow:0 0 0 4px var(--surface)}
.hp-badge svg{width:46%; height:46%}
.hp-br{position:absolute; z-index:2; right:0; bottom:0; margin:0; background:var(--bg); border-top-left-radius:30px; padding:clamp(16px,2.2vw,30px) clamp(18px,2.4vw,34px) 4px; text-align:left; min-width:min(42%,330px)}
.hp-br::before,.hp-br::after{content:""; position:absolute; width:30px; height:30px; background:radial-gradient(circle at 0 0, transparent 29.5px, var(--bg) 30px)}
.hp-br::before{right:0; bottom:100%} .hp-br::after{bottom:0; right:100%}
.hp-br b{display:block; font:800 clamp(22px,2.3vw,32px)/1 var(--f-display); letter-spacing:-.03em; color:var(--ink)}
.hp-br span{display:block; margin-top:8px; font-size:clamp(13px,1.1vw,15.5px); line-height:1.55; color:var(--muted)}
.svc-card-sec{padding-bottom:0}
.svc-card-sec .p-hero{align-items:center}
.svc-card-sec h2{margin:12px 0 14px; font-size:clamp(28px,3.4vw,46px)}
.svc-card-sec{padding-top:clamp(40px,5vw,72px)}
@media (max-width:720px){.hphoto{aspect-ratio:4/3} .hp-br{min-width:0; max-width:72%}}
@media (prefers-reduced-motion: reduce){.hphoto > img{animation:none}}

.consent{display:flex; align-items:flex-start; gap:12px; font:400 14px/1.55 var(--f-body); letter-spacing:0; text-transform:none; color:#B9C7C0; cursor:pointer}
.consent input{flex:none; appearance:none; -webkit-appearance:none; width:20px; height:20px; margin:2px 0 0; padding:0; border:1.5px solid rgba(255,255,255,.45); border-radius:5px; background:transparent; cursor:pointer; display:grid; place-items:center}
.consent input:checked{background:#96C43C; border-color:#96C43C}
.consent input:checked::after{content:""; width:5px; height:10px; border:solid #1A1A1A; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg)}
.consent input:focus-visible{outline:2px solid #96C43C; outline-offset:2px}
.consent a{color:#96C43C; text-decoration:underline; text-underline-offset:2px}
.consents{display:grid; gap:12px}
.hp-bot{position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0}
/* full legal texts */
.doc ol,.doc ul{margin:0 0 12px; padding-left:22px; color:var(--muted); display:grid; gap:8px}
.doc ol ol,.doc ol ul{margin-top:8px}
.doc li > p{margin:0}
.doc li::marker{color:var(--green); font-weight:600}
.doc strong{color:var(--ink)}
.toc{max-height:calc(100vh - 120px); overflow:auto; scrollbar-width:thin}

/* mobile menu */
.burger{display:none; flex:none; width:42px; height:42px; border:0; border-radius:50%; background:var(--surface-2,#EEF1EA); color:var(--ink); cursor:pointer; align-items:center; justify-content:center}
.burger svg{width:20px; height:20px}
.burger .x{display:none} .nav.open .burger .x{display:block} .nav.open .burger .b{display:none}
.mnav{display:none}
.langdd.open .langdd-menu{opacity:1; visibility:visible; transform:none}
.langdd.open .chev{transform:rotate(180deg)}
.langdd-menu{display:grid; gap:6px}
@media (max-width:1020px){
  .burger{display:inline-flex}
  .nav.open .mnav{display:block}
  .mnav{max-width:1180px; margin:8px auto 0; background:var(--surface,#fff); border-radius:24px; box-shadow:var(--ring), 0 24px 50px -24px rgba(19,32,26,.35); padding:10px; max-height:calc(100vh - 110px); overflow:auto}
  .mnav a{display:block; padding:12px 14px; border-radius:12px; text-decoration:none; color:var(--ink); font:600 16px var(--f-body)}
  .mnav a:hover,.mnav a[aria-current="page"]{background:var(--surface-2,#EEF1EA); color:var(--green)}
  .mnav a small{display:block; font:400 13px var(--f-body); color:var(--dim); margin-top:2px}
  .mnav h5{margin:10px 14px 4px; font:700 11px var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--olive,#546D31)}
  .mnav .sub a{padding-left:24px; font-size:15px}
  .mnav .mlangs{display:flex; flex-wrap:wrap; gap:8px; padding:6px 10px 8px}
  .mnav .mlangs a{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface-2,#EEF1EA); font-size:14px}
  .mnav .mlangs .flag{display:inline-flex; width:22px; height:15px; border-radius:3px; overflow:hidden}
  .mnav .mlangs .flag svg{width:100%; height:100%}
}
@media (max-width:540px){.menu .btn svg{display:none} .menu .btn{padding:9px 14px; font-size:13px} .nav .bar{gap:10px} .menu{gap:10px} .langdd-btn{font-size:14px; gap:6px}}
@media (max-width:480px){.menu .btn{display:none}}
.menu .langdd-menu a{display:flex!important}

/* social */
.soc{display:flex; align-items:center; gap:4px}
.soc a{display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:50%; color:var(--muted); transition:color .2s, background .2s}
.soc a:hover{color:var(--green); background:var(--surface-2,#EEF1EA)}
.soc svg{width:17px; height:17px}
.menu .soc a{display:inline-flex!important}
@media (max-width:1240px){.menu .soc{display:none}}
.foot-brand .soc{margin-top:16px; gap:8px} .foot-brand .soc a{background:var(--surface,#fff); box-shadow:var(--ring); width:38px; height:38px}
.mnav .soc{padding:6px 10px 10px; gap:8px} .mnav .soc a{display:inline-flex; width:42px; height:42px; padding:0; background:var(--surface-2,#EEF1EA)} .mnav .soc svg{width:20px; height:20px}

/* no horizontal scroll */
html{overflow-x:hidden} .sub-hero{overflow-x:clip} @media (max-width:720px){.page-globe{right:0; width:300px; opacity:.4}}

/* EPRpilot button */
.menu .btn.pilot-btn{background:transparent; color:var(--ink,#13201A); border:1.5px solid rgba(19,32,26,.28); box-shadow:none; gap:8px}
.menu .btn.pilot-btn:hover{background:transparent; border-color:#96C43C; color:var(--green,#598F24)}
.pilot-btn .ldot{width:7px; height:7px; border-radius:50%; background:#96C43C; box-shadow:0 0 0 3px rgba(150,196,60,.25)}
.menu .btn.pilot-btn svg{display:inline-block}
@media (max-width:640px){.menu .btn.pilot-btn{display:none}}