:root{
  --paper:#FAF9F5; --sand:#F1EEE5; --sand2:#E6E2D6;
  --ink:#171B14; --deep:#232E24;
  --slate:#4C5346; --muted:#8C9382;
  --line:rgba(23,27,20,.11); --line2:rgba(23,27,20,.07);
  --lime:#CCEF57; --limeD:#AFD634; --tint:#EEF8CE; --forest:#3E5A12;
  --amber:#C9922F;
  --disp:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Public Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --maxw:1200px; --pad:clamp(18px,4vw,44px);
  --r:22px; --rs:14px;
  --sh:0 1px 2px rgba(23,27,20,.05),0 10px 30px -14px rgba(23,27,20,.18);
  --sh2:0 2px 6px rgba(23,27,20,.06),0 26px 60px -26px rgba(23,27,20,.32);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.62;overflow-x:clip;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(250,249,245,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line2)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.logo{display:flex;align-items:center;gap:9px;cursor:pointer;background:none;border:0;padding:0;color:var(--ink)}
.logo svg{width:25px;height:25px;flex:none}
.logo img{width:23px;height:auto;flex:none;display:block}
.logo .wm{width:auto;height:15px}
.flogo img{width:38px}.flogo .wm{width:auto;height:24px}
.wordmark img{width:100%;height:auto;display:block;opacity:.055}
.logo b{font-family:var(--disp);font-weight:800;font-size:18.5px;letter-spacing:-.03em}
nav{display:flex;gap:2px}
nav button{font-size:14.5px;font-weight:500;background:none;border:0;color:var(--slate);padding:9px 14px;border-radius:999px;cursor:pointer;transition:.2s}
nav button:hover{background:var(--sand);color:var(--ink)}
nav button[aria-current="page"]{background:var(--ink);color:var(--paper)}
.tob-h{display:inline-flex;align-items:center;gap:9px;background:var(--ink);border:0;border-radius:999px;padding:9px 15px;cursor:pointer;transition:.22s;color:#fff}
.tob-h img{height:14px;width:auto;display:block}
.tob-h span{font-size:12px;opacity:.7}
.tob-h:hover{background:var(--forest)}
@media (max-width:1080px){.tob-h{display:none}}
.hbtn{font-size:14px;font-weight:600;background:var(--ink);color:var(--paper);border:0;padding:11px 20px;border-radius:999px;cursor:pointer;transition:.2s}
.hbtn:hover{background:var(--forest)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:500;cursor:pointer}
@media (max-width:940px){
 nav{position:absolute;top:66px;left:8px;right:8px;background:#fff;border:1px solid var(--line);border-radius:var(--rs);flex-direction:column;padding:8px;display:none;box-shadow:var(--sh2)}
 nav.open{display:flex} nav button{text-align:left;padding:12px 14px}
 .burger{display:block} .hbtn{display:none}
}

/* type */
h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.03;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(38px,6vw,72px);font-weight:800;line-height:.98}
h2{font-size:clamp(27px,3.9vw,46px)}
h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.022em;line-height:1.18}
h4{font-size:16.5px;letter-spacing:-.015em;line-height:1.3;font-weight:600}
p{margin:0 0 1em;max-width:62ch}
.lead{font-size:clamp(17px,1.85vw,19.5px);line-height:1.55;color:var(--slate);font-weight:300}
.tiny{font-size:14.5px;line-height:1.58;color:var(--slate)}
.mut{color:var(--muted)}
.hl{background:var(--lime);border-radius:6px;padding:.02em .16em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.eb{display:inline-flex;align-items:center;gap:9px;color:var(--muted);margin-bottom:18px}
.eb i{width:20px;height:2px;background:var(--limeD);flex:none;border-radius:2px}

.page{display:none}.page.on{display:block}
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}

/* buttons */
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.b{font-size:15px;font-weight:600;padding:13px 24px;border-radius:999px;cursor:pointer;border:1px solid transparent;background:var(--ink);color:var(--paper);transition:.22s;display:inline-flex;align-items:center;gap:8px}
.b:hover{background:var(--forest);transform:translateY(-1px)}
.b .ar{transition:transform .25s}.b:hover .ar{transform:translateX(4px)}
.b.o{background:transparent;color:var(--ink);border-color:var(--line)}
.b.o:hover{background:var(--sand);border-color:var(--muted);color:var(--ink)}
.b.l{background:var(--lime);color:var(--ink)}.b.l:hover{background:var(--limeD)}
.b.w{background:#fff;color:var(--ink)}.b.w:hover{background:var(--lime)}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(34px,5vw,72px) 0 clamp(30px,4vw,58px)}
@media (max-width:960px){.hero{grid-template-columns:1fr;gap:30px}}
.shot{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh2);aspect-ratio:1/.8}
.shot img{width:100%;height:100%;object-fit:cover}
.chip{position:absolute;left:16px;bottom:16px;right:16px;background:rgba(250,249,245,.9);backdrop-filter:blur(10px);border-radius:var(--rs);padding:13px 16px;display:flex;gap:12px;align-items:center}
.chip b{font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:-.015em;display:block}
.chip span{font-size:13px;color:var(--slate)}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--limeD);flex:none;box-shadow:0 0 0 4px rgba(175,214,52,.22)}

/* marquee */
.mq{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--sand);overflow:hidden;padding:26px 0}
.mqi{display:flex;width:max-content;animation:mqs 44s linear infinite}
.mq:hover .mqi{animation-play-state:paused}
@keyframes mqs{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mqi span{font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--muted);padding:0 30px;white-space:nowrap;display:flex;align-items:center;gap:30px}
.mqi span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--limeD);flex:none}

/* sections */
section.s{padding:clamp(50px,6.6vw,98px) 0;position:relative;overflow:hidden}
section.s.sand{background:var(--sand)}
section.s > .wrap{position:relative;z-index:1}
.ctab > *:not(.mesh){position:relative;z-index:1}
footer > *{position:relative;z-index:1}
footer{position:relative}
.shead{max-width:60ch;margin-bottom:38px}
.shead h2{margin-bottom:14px}

/* live mesh */
.mesh{position:absolute;display:block;pointer-events:none;z-index:0}
.silk{position:absolute;left:-30%;top:-40%;width:92%;height:182%;z-index:0;pointer-events:none;
  opacity:1;filter:blur(2px) saturate(1.1);
  -webkit-mask-image:linear-gradient(98deg,rgba(0,0,0,.25) 0%,#000 22%,#000 44%,rgba(0,0,0,0) 86%);
  mask-image:linear-gradient(98deg,rgba(0,0,0,.25) 0%,#000 22%,#000 44%,rgba(0,0,0,0) 86%)}
@media (max-width:960px){.silk{left:-42%;top:-14%;width:112%;height:116%;opacity:.7}}
.hero{position:relative}
.hcopy,.heroart{position:relative;z-index:1}
.tribbon{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.bgmesh{inset:-12% -8%;width:116%;height:124%;opacity:.72;filter:blur(26px) saturate(1.08);
  -webkit-mask-image:radial-gradient(115% 78% at 50% 50%,#000 34%,transparent 92%);
  mask-image:radial-gradient(115% 78% at 50% 50%,#000 34%,transparent 92%)}
.bgwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ctab .mesh{inset:-30%;width:160%;height:160%;opacity:.75;filter:blur(28px);mix-blend-mode:soft-light}
footer .mesh{inset:auto -10% -18% -10%;width:120%;height:78%;opacity:.75;filter:blur(34px)}

/* hero drawing */
.heroart{position:relative}
.heroart .art{position:relative;z-index:1;width:100%;aspect-ratio:672/470}
.heroart .art svg{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:radial-gradient(108% 108% at 50% 50%,#000 86%,transparent 100%);
  mask-image:radial-gradient(108% 108% at 50% 50%,#000 86%,transparent 100%)}
.tag{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .55s cubic-bezier(.3,1.3,.5,1)}
.tag.on{opacity:1;transform:none}
.phase{position:relative;z-index:1;display:flex;align-items:center;gap:11px;margin-top:6px;padding-left:6px}
.phase .pd{width:8px;height:8px;border-radius:50%;background:var(--limeD);flex:none;box-shadow:0 0 0 4px rgba(175,214,52,.2)}
.phase b{font-family:var(--disp);font-size:14.5px;font-weight:700;letter-spacing:-.02em;min-width:74px}
.phase span.t{font-size:13.5px;color:var(--muted)}

/* four steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px)}
@media (max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
.steps div{padding-top:16px;border-top:1px solid var(--line)}
.steps b{font-family:var(--disp);font-size:15.5px;font-weight:700;letter-spacing:-.02em;display:block;margin-bottom:5px}
.steps span{font-size:13.5px;color:var(--muted);line-height:1.5}
.steps .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;color:var(--limeD);display:block;margin-bottom:9px}

/* service cards */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
@media (max-width:1020px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.svc{grid-template-columns:1fr}}
.sc{background:#fff;border-radius:var(--r);padding:6px 6px 22px;position:relative;overflow:hidden;
  box-shadow:var(--sh);transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s;display:flex;flex-direction:column}
.sc:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.sc::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,20%),rgba(204,239,87,.22),transparent 65%);opacity:0;transition:opacity .4s}
.sc:hover::after{opacity:1}
.sc .stage{height:180px;position:relative;border-radius:17px;background:linear-gradient(165deg,var(--sand),#EDEAE0);overflow:hidden}
.sc .stage svg{position:absolute;inset:0;width:100%;height:100%}
.sc .txt{padding:20px 18px 0;display:flex;flex-direction:column;gap:8px;flex:1;position:relative;z-index:2}
.sc .num{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:16px}
.pill{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--muted);background:var(--paper)}
.sc.accent{background:linear-gradient(160deg,var(--lime),#DCF48A);justify-content:center}
.sc.accent .txt{padding:26px 20px}

/* diagram primitives */
.noanim *,.noanim{transition:none !important;animation:none !important}
.dash{stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}
.play .dash{animation:draw 1.05s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pt{transition:transform 1s cubic-bezier(.25,.9,.3,1),opacity .5s}
.play .pt{transform:translate(var(--dx),var(--dy))}
.pop{opacity:0;transform:scale(.5);transform-origin:center;transition:opacity .45s,transform .5s cubic-bezier(.3,1.5,.5,1)}
.play .pop{opacity:1;transform:scale(1)}
.vanish{transition:opacity .5s,transform .6s cubic-bezier(.4,0,.6,1)}
.play .vanish{opacity:0;transform:translateY(-14px) scale(.7)}
.slide{transform:translateX(var(--sx,0));transition:transform .95s cubic-bezier(.25,.9,.3,1)}
.play .slide{transform:translateX(0)}
.fade{opacity:0;transition:opacity .6s}
.play .fade{opacity:1}
.puls{opacity:.18}
.play .puls{animation:pl 1.8s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:.18}50%{opacity:1}}

/* tobie band */
.tobsec{position:relative;overflow:hidden;background:#171F16;padding:clamp(54px,7vw,104px) 0;border-radius:0}
.tobsec .tsc{position:absolute;inset:0;background:linear-gradient(105deg,rgba(18,24,18,.95) 0%,rgba(18,24,18,.60) 46%,rgba(18,24,18,.10) 100%)}
.tobsec .tin{position:relative;z-index:1}
.tobsec .tlogo{position:relative;width:clamp(170px,19vw,238px);height:auto;display:block;margin:4px 0 0}
.thead{margin-bottom:clamp(30px,4vw,52px)}
.tbody{max-width:72ch;margin-bottom:clamp(28px,3.5vw,44px)}
.tp{color:#C3CCB9;font-size:clamp(16px,1.75vw,18px);line-height:1.66;font-weight:300;margin:16px 0 0;max-width:70ch}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tgrid{grid-template-columns:1fr}}
.tcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:var(--rs);padding:20px 18px}
.tcard .mono{color:#AFD634;display:block;margin-bottom:9px}
.tcard h4{color:#fff;font-size:17px;margin-bottom:7px}
.tcard p{color:#A9B4A2;font-size:14px;line-height:1.55;margin:0}

/* gantt */
.sw{display:inline-flex;background:var(--sand);border-radius:999px;padding:4px}
.sw button{font-size:13px;font-weight:500;background:none;border:0;color:var(--slate);padding:8px 16px;border-radius:999px;cursor:pointer;transition:.22s}
.sw button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:700px){.gcols,.grow,.gsl{grid-template-columns:84px 1fr;gap:9px}.grow .gl{font-size:12px}.gticks span{font-size:7.5px;letter-spacing:.03em;padding-left:5px}}

/* products */
.pg{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px)}
@media (max-width:760px){.pg{grid-template-columns:1fr}}
.pc{background:#fff;border-radius:var(--r);padding:6px 6px 22px;box-shadow:var(--sh);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.pc:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.pc .ph{height:150px;border-radius:17px;background:linear-gradient(165deg,#F4F1E8,#E9E5D9);position:relative;overflow:hidden}
.pc .ph svg{position:absolute;inset:0;width:100%;height:100%}
.pc .pb{padding:20px 18px 0;display:flex;flex-direction:column;gap:9px;flex:1}
.stat{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;width:max-content;background:var(--paper)}
.stat i{width:7px;height:7px;border-radius:50%;flex:none}
.i-live{background:var(--limeD)} .i-dev{background:var(--amber)} .i-plan{background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted)}
.kv{font-size:13.5px;color:var(--forest);font-weight:500}


.wcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
@media (max-width:860px){.wcards{grid-template-columns:1fr}}
.wcard{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.wcard:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.wcard .t{aspect-ratio:1/.62;overflow:hidden}
.wcard .t img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.3,1)}
.wcard:hover .t img{transform:scale(1.05)}
.wcard .c{padding:18px}

/* articles */
.rd{display:grid;grid-template-columns:158px 1fr 82px;gap:24px;padding:18px;border-radius:var(--rs);align-items:center;cursor:pointer;transition:.25s;border-bottom:1px solid var(--line2)}
.rd .thumb{width:158px;height:100px;border-radius:12px;overflow:hidden;background:var(--sand);flex:none}
.rd .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.3,1)}
.rd:hover .thumb img{transform:scale(1.07)}
.rd .ex{font-size:14px;line-height:1.55;color:var(--muted);margin:7px 0 0;max-width:70ch}
.rd:hover{background:#fff;box-shadow:var(--sh);border-bottom-color:transparent}
.rd:hover h4{color:var(--forest)}
.rd .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.rd .r{text-align:right;color:var(--muted);font-size:13px}
@media (max-width:760px){.rd{grid-template-columns:1fr;gap:12px}.rd .r{text-align:left}.rd .thumb{width:100%;height:150px}}

.oneline{border-top:1px solid var(--line2)}
.olrow{display:grid;grid-template-columns:54px 300px 1fr;gap:clamp(14px,2.4vw,32px);align-items:baseline;
 padding:20px 14px;border-bottom:1px solid var(--line2);border-radius:var(--rs);transition:.25s}
.olrow:hover{background:#fff;box-shadow:var(--sh);border-bottom-color:transparent}
.olrow .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);padding-top:3px}
.olrow h3{font-size:clamp(17px,1.9vw,20px)}
.olrow p{margin:0;font-size:15px;color:var(--slate);max-width:60ch}
@media (max-width:820px){.olrow{grid-template-columns:44px 1fr;gap:8px}.olrow p{grid-column:2}}

.eng{display:grid;grid-template-columns:250px 1fr 340px;gap:clamp(18px,3vw,44px);align-items:center;
 padding:clamp(26px,3.6vw,46px) 0;border-top:1px solid var(--line2)}
.eng .nm .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);display:block;margin-bottom:9px}
.eng .nm h3{font-size:clamp(19px,2.2vw,25px)}
.eng .pts{list-style:none;margin:0;padding:0;column-gap:26px}
.eng .pts li{position:relative;padding-left:18px;font-size:15px;line-height:1.5;color:var(--slate);margin-bottom:9px;break-inside:avoid}
.eng .pts li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;border-radius:2px;background:var(--limeD)}
.eng .fig{border-radius:var(--r);background:linear-gradient(165deg,var(--sand),#EDEAE0);height:225px;position:relative;overflow:hidden;box-shadow:var(--sh)}
.eng .fig svg{position:absolute;inset:0;width:100%;height:100%}
.eng.rev{grid-template-columns:340px 1fr 250px}
.eng.rev .nm{order:3}.eng.rev .pts{order:2}.eng.rev .fig{order:1}
@media (max-width:980px){
 .eng,.eng.rev{grid-template-columns:1fr;gap:18px}
 .eng .nm,.eng.rev .nm{order:1}.eng .fig,.eng.rev .fig{order:2;height:200px}.eng .pts,.eng.rev .pts{order:3}
}

.lang{position:relative}
.langbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);border-radius:999px;
 padding:9px 13px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);transition:.2s}
.langbtn:hover{background:var(--sand);border-color:var(--muted)}
.langbtn i{font-style:normal;font-size:9px;opacity:.55}
.langmenu{position:absolute;top:44px;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--rs);
 box-shadow:var(--sh2);padding:6px;display:none;min-width:150px;z-index:70}
.langmenu.open{display:block}
.langmenu button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;text-align:left;
 padding:9px 11px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--slate);font-family:var(--body)}
.langmenu button:hover{background:var(--sand);color:var(--ink)}
.langmenu button[aria-current="true"]{background:var(--tint);color:var(--ink);font-weight:600}
.langmenu button b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);width:20px}
@media (max-width:1080px){.lang{display:none}}

.pdhead{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,44px);align-items:center}
@media (max-width:900px){.pdhead{grid-template-columns:1fr}}
.pdshot{border-radius:var(--r);background:linear-gradient(165deg,#F4F1E8,#E9E5D9);height:230px;position:relative;overflow:hidden;box-shadow:var(--sh)}
.pdshot svg{position:absolute;inset:0;width:100%;height:100%}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line2);border-radius:var(--rs);overflow:hidden;margin-top:8px}
.spec div{background:#fff;padding:14px 16px}
.spec dt{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.spec dd{margin:0;font-size:14.5px;font-weight:500;font-variant-numeric:tabular-nums}
.cmt{background:#fff;border-radius:var(--rs);padding:18px 20px;box-shadow:var(--sh);margin-bottom:10px}
.cmt b{font-size:14.5px}.cmt .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:8px}
.cmt p{margin:8px 0 0;font-size:14.5px;color:var(--slate)}
.cstrip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);margin:0}
.cstrip>div{padding:26px 28px 30px;border-right:1px solid var(--line2)}
.cstrip>div:last-child{border-right:0}
.cstrip dt{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.cstrip dd{margin:0;font-size:17px;font-weight:500;line-height:1.45}
@media (max-width:900px){.cstrip{grid-template-columns:1fr 1fr}.cstrip>div:nth-child(2n){border-right:0}.cstrip>div:nth-child(-n+2){border-bottom:1px solid var(--line2)}}
@media (max-width:560px){.cstrip{grid-template-columns:1fr}.cstrip>div{border-right:0;border-bottom:1px solid var(--line2)}.cstrip>div:last-child{border-bottom:0}}
.clink{color:inherit;text-decoration:none;border-bottom:1.5px solid rgba(62,90,18,.35);padding-bottom:2px;transition:color .2s,border-color .2s}
.clink:hover,.clink:focus-visible{color:var(--forest);border-color:var(--forest)}
.teaser{display:grid;grid-template-columns:1.06fr .94fr;gap:0;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.teaser:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.teaser .tx{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
.teaser .k{color:var(--muted);display:block;margin-bottom:12px}
.teaser h3{font-size:clamp(21px,2.6vw,30px);margin-bottom:12px;max-width:22ch}
.teaser .tiny{margin:0;max-width:52ch}
.teaser .im{overflow:hidden;min-height:250px}
.teaser .im img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.3,1)}
.teaser:hover .im img{transform:scale(1.05)}
@media (max-width:820px){.teaser{grid-template-columns:1fr}.teaser .im{min-height:200px;order:-1}}
.art{max-width:70ch;margin:0 auto}
.art h1{font-size:clamp(30px,4.4vw,50px);margin-bottom:20px}
.art .meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;color:var(--muted);margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--line2)}
.art p{font-size:17.5px;line-height:1.72;color:#2E342A;max-width:none;margin-bottom:1.15em}
.art h3{margin:34px 0 12px}
.art blockquote{margin:26px 0;padding:18px 22px;background:var(--tint);border-radius:var(--rs);font-size:17px;color:#2E342A}
.art ul{padding-left:20px;color:#2E342A}.art li{margin-bottom:8px;font-size:16.5px}
.back{background:none;border:0;color:var(--slate);cursor:pointer;font-size:14.5px;font-weight:500;padding:8px 0;display:inline-flex;gap:8px;align-items:center}
.back:hover{color:var(--forest)}

/* misc */

/* services */
.sc .stage{background:linear-gradient(158deg,#F0F5E6 0%,#E2ECCF 100%);box-shadow:inset 0 0 0 1px rgba(62,90,18,.10)}
.sc{border:1px solid var(--line2)}

/* tobie - full-bleed dark ground */
.tlogo{position:relative;width:clamp(158px,17vw,220px);height:auto;display:block;margin:2px 0 20px;object-fit:contain}
section.s.dark{background:#12180F;color:#EDEFE8;padding:clamp(66px,7.6vw,116px) 0}
section.s.dark::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:linear-gradient(102deg,rgba(9,13,8,.95) 0%,rgba(9,13,8,.74) 44%,rgba(9,13,8,.46) 100%)}
.tgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(26px,4.4vw,70px);align-items:center}
@media (max-width:900px){.tgrid{grid-template-columns:1fr;gap:34px}}
.tlead{color:#C6D0BA;margin:0}
.tfacts>div{padding:15px 0;border-top:1px solid rgba(237,239,232,.15)}
.tfacts>div:last-child{border-bottom:1px solid rgba(237,239,232,.15)}
.tfacts b{display:block;font-family:var(--disp);font-size:16.5px;font-weight:700;color:#fff;margin-bottom:4px}
.tfacts span{font-size:13.5px;color:#9AAA8C;line-height:1.5;display:block}

/* fig.02 - drawing becomes data */
section.s.ctys{padding-bottom:0;overflow:visible}
.ctyrail{position:relative;height:300vh}
.ctystick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:clamp(14px,2.6vh,30px)}
.cty{width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.2vh,26px)}
.ctyart{width:min(100%,calc(74vh * 2.2222));margin:0 auto}
.cty svg{display:block;width:100%;height:auto}
.cty .col{opacity:0;transition:opacity .7s cubic-bezier(.3,.9,.3,1)}
.cty .el.on .col{opacity:1}
.cty #e_river.on .ln path{stroke:#3F6E92}
.cty .chip{opacity:0;transform:translateY(7px);pointer-events:none;
 transition:opacity .35s,transform .45s cubic-bezier(.3,1.2,.5,1)}
.cty .el.tip .chip{opacity:1;transform:translateY(0)}
.cty .nd{cursor:pointer;outline:none}
.cty .nd .dot{transition:fill .3s,stroke .3s}
.cty .nd:hover .dot,.cty .nd:focus-visible .dot{fill:#fff}
.cty .nd:focus-visible .halo{opacity:.8}
.cty .nd.on .dot{fill:#3E5A12;stroke:#3E5A12}
.cty .halo{transform-box:fill-box;transform-origin:center;animation:ctyHalo 3.2s ease-in-out infinite}
.cty .nd.on .halo{animation:none;opacity:.5}
@keyframes ctyHalo{0%,100%{transform:scale(.5);opacity:.10}50%{transform:scale(1.2);opacity:.44}}
@media (prefers-reduced-motion:reduce){.cty .halo{animation:none}}
#metroCar{transition:transform .12s linear}
.ctyfoot{display:flex;justify-content:center}
.ctyfoot .b{font-size:13.5px;padding:10px 22px}
.ctytrk{width:min(92%,520px);height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.ctytrk i{display:block;height:100%;width:0;background:var(--forest);border-radius:2px}
@media (max-width:820px){
 .ctyrail{height:auto}
 .ctystick{position:static;height:auto}
 .ctyart{width:100%}
 .ctytrk{display:none}
}

/* article figure */
.afig{margin:32px 0}
.afig img{width:100%;display:block;border-radius:var(--rs);box-shadow:var(--sh)}
.afig figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);max-width:60ch}

/* legal pages */
.art a{color:var(--forest);text-decoration:underline;text-underline-offset:2px}
.art a:hover{color:var(--ink)}
button.lnk{background:none;border:0;padding:0;font:inherit;color:var(--forest);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
button.lnk:hover{color:var(--ink)}
.ltab{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:14.5px}
.ltab th,.ltab td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
.ltab th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400}
.ltab td:first-child{font-weight:600;white-space:nowrap}
.lupd{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:26px;display:block}
.art h4{font-size:16px;margin:26px 0 8px}
.flegal{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:14px}
.flegal button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--body);font-size:13px;color:#A9B4A2;text-decoration:underline;text-underline-offset:3px;transition:.2s}
.flegal button:hover{color:var(--lime)}

/* cookie consent */
.cbk{position:fixed;left:0;right:0;bottom:0;z-index:900;padding:0 var(--pad) 18px;pointer-events:none}
.cbk .in{pointer-events:auto;max-width:var(--maxw);margin:0 auto;background:#fff;border:1px solid var(--line);
 border-radius:var(--r);box-shadow:0 18px 48px rgba(23,27,20,.20);padding:clamp(18px,2.2vw,26px)}
.cbk h4{font-family:var(--disp);font-size:17px;font-weight:700;margin:0 0 8px}
.cbk p{margin:0;font-size:14px;color:var(--slate);max-width:74ch;line-height:1.6}
.cbk p a,.cbk p button.lnk{color:var(--forest);text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.cbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cbtns .b{font-size:14px;padding:11px 20px}
.cprefs{margin-top:20px;padding-top:18px;border-top:1px solid var(--line2);display:none}
.cprefs.open{display:block}
.crow{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line2)}
.crow:last-of-type{border-bottom:0}
.crow .tx{flex:1}
.crow b{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px}
.crow span{display:block;font-size:13px;color:var(--slate);line-height:1.55}
.tgl{position:relative;width:44px;height:25px;flex:none;margin-top:2px}
.tgl input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.tgl i{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:.22s;pointer-events:none}
.tgl i::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.22s}
.tgl input:checked + i{background:var(--forest)}
.tgl input:checked + i::after{transform:translateX(19px)}
.tgl input:disabled + i{background:#B9C4AC}
.tgl input:focus-visible + i{box-shadow:0 0 0 3px rgba(62,90,18,.25)}
@media (max-width:620px){.cbtns .b{flex:1 1 100%;justify-content:center}}

/* latest insight - dark scan ground */
.cloudcv{position:absolute;inset:0;width:100%;height:100%;z-index:0}
section.s.ins{padding:clamp(84px,9.2vw,146px) 0}
section.s.ins::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(130% 100% at 18% 50%,rgba(9,13,8,.72) 0%,rgba(9,13,8,.34) 46%,rgba(9,13,8,0) 100%)}
.ins .teaser{background:rgba(14,20,13,.62);border:1px solid rgba(237,239,232,.16);box-shadow:none;backdrop-filter:blur(6px)}
.ins .teaser:hover{box-shadow:0 20px 44px rgba(0,0,0,.42);border-color:rgba(175,214,52,.42)}
.ins .teaser h3{color:#fff}
.ins .teaser .k{color:#AFD634}
.ins .teaser .tiny{color:#A9B79B}
.ins .teaser .im{border-left:1px solid rgba(237,239,232,.12)}
.ins .b.o{border-color:rgba(237,239,232,.32);color:#EDEFE8}
.ins .b.o:hover{background:rgba(237,239,232,.10);border-color:#AFD634;color:#fff}
@media (max-width:820px){.ins .teaser .im{border-left:0;border-bottom:1px solid rgba(237,239,232,.12)}}

/* fig.01 - information density */
.dhead{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:26px}
.dens{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;border:1px solid var(--line2)}
.dgrid{display:grid;grid-template-columns:repeat(40,1fr);gap:3px;padding:clamp(16px,2.1vw,24px)}
@media (max-width:1000px){.dgrid{grid-template-columns:repeat(26,1fr)}}
@media (max-width:640px){.dgrid{grid-template-columns:repeat(20,1fr);gap:2px}}
.dc{display:block;aspect-ratio:1;border-radius:2.5px;background:transparent;
 box-shadow:inset 0 0 0 1px rgba(23,27,20,.10);
 transition:background .55s cubic-bezier(.3,.9,.3,1),box-shadow .55s cubic-bezier(.3,.9,.3,1)}
.dc.s1{background:var(--lime);box-shadow:inset 0 0 0 1px rgba(62,90,18,.18)}
.dc.s2{background:var(--forest);box-shadow:inset 0 0 0 1px rgba(23,27,20,.12)}
.dfoot{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,40px);align-items:baseline;
 padding:20px clamp(16px,2.1vw,24px);border-top:1px solid var(--line2);background:var(--sand)}
.dstat b{display:block;font-family:var(--disp);font-size:clamp(25px,3.1vw,36px);font-weight:800;letter-spacing:-.035em;line-height:1}
.dstat span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dnote{margin:0;font-size:14px;color:var(--slate);max-width:42ch;flex:1 1 240px}

/* paired closing cards */
.duo{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(16px,2vw,24px);align-items:stretch}
@media (max-width:980px){.duo{grid-template-columns:1fr}}
.duo .ctab{display:flex;flex-direction:column;justify-content:center;height:100%}
.duo .ctab .big{font-size:clamp(84px,9vw,132px);right:-3%;bottom:-34%;color:rgba(23,27,20,.06)}
.tqc{background:linear-gradient(212deg,#E4F6A2,var(--lime) 52%,#C2E747)}
.tqc blockquote{margin:0;font-family:var(--disp);font-weight:700;letter-spacing:-.025em;
 font-size:clamp(19px,1.9vw,26px);line-height:1.34;color:var(--ink);max-width:28ch}
.tqc .who{margin-top:28px;padding-top:18px;border-top:1px solid rgba(23,27,20,.24)}
.tqc .who b{display:block;font-size:15.5px;font-weight:600;color:var(--ink)}
.tqc .who span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#3E5A12}
.ctab{background:linear-gradient(150deg,var(--lime),#DDF291 70%,#E9F6BE);border-radius:var(--r);padding:clamp(30px,4.6vw,58px);position:relative;overflow:hidden;box-shadow:var(--sh)}
.ctab .big{position:absolute;right:-2%;bottom:-32%;font-family:var(--disp);font-size:clamp(130px,22vw,270px);font-weight:800;letter-spacing:-.06em;color:rgba(23,27,20,.07);pointer-events:none;line-height:1}

footer{background:var(--deep);color:#fff;padding:56px 0 0;overflow:hidden;margin-top:20px}
.fg{display:grid;grid-template-columns:1.6fr .85fr 1fr 1.15fr;gap:clamp(20px,3vw,38px)}
@media (max-width:1000px){.fg{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.fg{grid-template-columns:1fr;gap:26px}}
.legal{font-size:13.5px;line-height:1.65;color:#B9C4B2;margin:0}
.legal b{display:block;color:#fff;font-weight:500;font-size:13.5px}
.fg .tobtn{display:inline-flex !important;align-items:center;gap:11px;margin-top:20px;width:auto;white-space:nowrap;
 background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);
 border-radius:999px;padding:10px 18px 10px 15px;cursor:pointer;color:#fff;font-size:13.5px;font-weight:500;transition:.22s}
.fg .tobtn:hover{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:translateY(-1px)}
.fg .tobtn img{height:16px;width:auto;display:block;flex:none}
.fg .tobtn:hover img{filter:invert(1) brightness(.2)}
.fg .tobtn span{font-size:15px;line-height:1}
.fg h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--lime);margin:0 0 13px;font-weight:400}
.fg button{display:block;background:none;border:0;color:#D3DAC9;padding:4px 0;cursor:pointer;font-size:14.5px;text-align:left;font-family:var(--body)}
.fg button:hover{color:var(--lime)}
.fend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);color:#93A08C}
.wordmark{margin-top:28px;padding:0 var(--pad);user-select:none}

.flag{position:fixed;left:14px;bottom:14px;z-index:70;background:rgba(23,27,20,.9);color:var(--lime);backdrop-filter:blur(6px);font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;padding:8px 13px;border-radius:999px}
@media (max-width:760px){.flag{display:none}}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition-duration:.01ms !important}
 .rv{opacity:1;transform:none}.dash{stroke-dashoffset:0}.pop,.fade{opacity:1;transform:none}}


/* ---- generated: anchors inherit the styling of the buttons they replaced ---- */
a{font:inherit;text-decoration:none}
nav a{font-size:14.5px;font-weight:500;background:none;border:0;color:var(--slate);padding:9px 14px;border-radius:999px;cursor:pointer;transition:.2s;text-decoration:none}
nav a:hover{background:var(--sand);color:var(--ink);text-decoration:none}
nav a[aria-current="page"]{background:var(--ink);color:var(--paper);text-decoration:none}
nav a{text-align:left;padding:12px 14px;text-decoration:none}
.sw a{font-size:13px;font-weight:500;background:none;border:0;color:var(--slate);padding:8px 16px;border-radius:999px;cursor:pointer;transition:.22s;text-decoration:none}
.sw a[aria-pressed="true"]{background:var(--ink);color:var(--paper);text-decoration:none}
.langmenu a{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;text-align:left;
 padding:9px 11px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--slate);font-family:var(--body);text-decoration:none}
.langmenu a:hover{background:var(--sand);color:var(--ink);text-decoration:none}
.langmenu a[aria-current="true"]{background:var(--tint);color:var(--ink);font-weight:600;text-decoration:none}
.langmenu a b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);width:20px;text-decoration:none}
a.lnk{background:none;border:0;padding:0;font:inherit;color:var(--forest);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-decoration:none}
a.lnk:hover{color:var(--ink);text-decoration:none}
.flegal a{background:none;border:0;padding:0;cursor:pointer;font-family:var(--body);font-size:13px;color:#A9B4A2;text-decoration:underline;text-underline-offset:3px;transition:.2s;text-decoration:none}
.flegal a:hover{color:var(--lime);text-decoration:none}
.cbk p a.lnk{color:var(--forest);text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:none}
.fg a{display:block;background:none;border:0;color:#D3DAC9;padding:4px 0;cursor:pointer;font-size:14.5px;text-align:left;font-family:var(--body);text-decoration:none}
.fg a:hover{color:var(--lime);text-decoration:none}


/* ============================================================
   Additions for the static build.
   Edit freely - appended after site.css, so these rules win.
   ============================================================ */

/* Skip link (keyboard accessibility) */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);
 padding:10px 16px;border-radius:0 0 8px 0;font-size:14px;text-decoration:none}
.skip:focus{left:0}

/* Links that replaced buttons keep the card's own look */
a.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
nav a{display:inline-block}
#fnav a{display:block}
a.rd,a.card,a.wk,a.pc,a.ins,a.olrow{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--forest);outline-offset:3px}

/* ---------- media: photographs ---------- */
figure.afig{margin:30px 0}
figure.afig img{width:100%;height:auto;border-radius:var(--rs,14px);display:block}
figure.afig figcaption{margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--muted);
 font-family:var(--body)}

/* ---------- media: video ---------- */
.vfig .vwrap{position:relative;width:100%;aspect-ratio:16/9;background:var(--sand,#F1EEE5);
 border-radius:var(--rs,14px);overflow:hidden}
.vfig .vwrap video,.vfig .vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
 display:block;object-fit:cover}
/* Consent gate for third-party embeds - no iframe until the visitor asks for it */
.vwrap.vhold{background-size:cover;background-position:center;display:grid;place-items:center}
.vwrap.vhold::before{content:"";position:absolute;inset:0;background:rgba(23,27,20,.62)}
.vask{position:relative;text-align:center;max-width:38ch;padding:24px}
.vask p{color:#EDF1E8;font-size:14px;line-height:1.6;margin:0 0 14px}

/* ---------- media: product gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:26px 0}
.gal figure.afig{margin:0}
.gal figure.afig img{aspect-ratio:16/10;object-fit:cover}

@media(max-width:640px){
  .gal{grid-template-columns:1fr}
  figure.afig{margin:22px 0}
}

/* ---------- footer bottom bar ---------- */
.fend{align-items:center}
.fend-l{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fend-l a,.fend-l .lnk{color:#93A08C;text-decoration:none;font-family:var(--mono);
 font-size:inherit;background:none;border:0;padding:0;cursor:pointer}
.fend-l a:hover,.fend-l .lnk:hover{color:var(--lime)}
.fend-l i{font-style:normal;opacity:.5}
.fend-r{color:#93A08C;text-align:right}
.ai-note{margin:10px 0 0;font-size:10.5px;line-height:1.5;color:rgba(147,160,140,.45);
 letter-spacing:.02em;max-width:76ch}
@media(max-width:640px){
  .fend{flex-direction:column;align-items:flex-start;gap:10px}
  .fend-r{text-align:left}
}

/* language switcher entries are links now */
.langmenu a{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;
 text-decoration:none;color:var(--ink);font-size:14px;border-radius:8px}
.langmenu a:hover{background:var(--sand)}
.langmenu a b{font-family:var(--mono);font-size:11px;color:var(--muted);min-width:20px}
.langmenu a[aria-current="true"]{background:var(--tint)}
.langmenu a[aria-current="true"] b{color:var(--forest)}

/* ---------- legal pages: language notice ---------- */
.langnote{border:1px solid var(--line,#DCE2DC);border-left:3px solid var(--forest,#3E5A12);
 border-radius:0 var(--rs,14px) var(--rs,14px) 0;background:var(--sand,#F1EEE5);
 padding:16px 20px;margin:0 0 8px}
.langnote p{margin:0 0 7px;font-size:13.5px;line-height:1.6;color:var(--slate,#4C5346)}
.langnote p:last-child{margin-bottom:0}
.langnote p.primary{color:var(--ink,#171B14);font-weight:500}

/* ---------- testimonials ---------- */
.tqs{display:grid}
.tqs>.tq{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s ease}
.tqs>.tq.on{opacity:1;visibility:visible}
.tdots{display:flex;gap:8px;margin-top:20px}
.tdots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;
 background:rgba(23,27,20,.22);transition:background .2s,width .2s}
.tdots button[aria-selected="true"]{background:#171B14;width:22px}
.tdots button:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.tqs>.tq{transition:none}}