/* HERO — the land, full bleed. Cognitive Agriculture over Lavaux. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 64px;color:var(--peat);isolation:isolate;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-3}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-2;opacity:0;transition:opacity 1.2s cubic-bezier(.22,.68,.24,1)}
.hero-vid.on{opacity:1}
/* still frame underneath: no flash before the clip is ready, and the fallback if it never plays */
@media(prefers-reduced-motion:reduce){.hero-vid{display:none}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,22,24,.42) 0%,rgba(14,22,24,.18) 45%,rgba(14,22,24,0) 75%),linear-gradient(180deg,rgba(14,22,24,.36),rgba(14,22,24,0) 26%,rgba(14,22,24,.06) 60%,rgba(14,22,24,.58) 100%)}
.hero-in{position:relative;width:100%}
.hero h1{font-size:clamp(64px,10.2vw,176px);line-height:.9;letter-spacing:-.035em;font-variation-settings:"wdth" 68;color:var(--peat)}
.hero-tag{margin-top:28px;font-size:clamp(20px,2.2vw,32px);font-weight:300;font-variation-settings:"wdth" 86;letter-spacing:-.015em;line-height:1.2;color:rgba(241,236,223,.92);max-width:34ch;text-wrap:balance}
/* intro */
/* figures — the problem in three numbers */
.figs{border-top:1px solid var(--line-2);padding-top:6px}
.fig{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.fig b{font-size:clamp(34px,3.2vw,48px);font-weight:300;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 78;min-width:5.2ch}
.fig span{font-size:14.5px;color:var(--bone-2);line-height:1.45}
.fig.acc b{color:var(--moss)}
.fig-foot{margin-top:22px;font-size:15px;color:var(--bone-2);max-width:none}
/* facts under the stage */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.facts div{font-size:14.5px;line-height:1.5;color:var(--bone-2)}
.facts .mono{display:block;margin-bottom:8px;color:var(--moss)}
/* three layers */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px;padding-top:28px;border-top:1px solid var(--line)}
.cols3 .k{font-size:clamp(26px,2.4vw,36px);font-weight:300;font-variation-settings:"wdth" 76;letter-spacing:-.02em;margin-bottom:14px;color:var(--moss)}
.cols3 p{font-size:15px;max-width:none}
/* the stage */
.stage{position:relative;width:100%;border-top:1px solid var(--line);padding-top:8px;margin-top:56px}
.fee-n{fill:var(--moss)!important}
.stage svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--f)}
.stage .replay{position:absolute;right:0;top:14px;font-size:12px;color:var(--ash);opacity:0;transition:opacity .4s}
.stage.done .replay{opacity:1}
.g-top{fill:var(--peat-2);stroke:var(--bone);stroke-width:1;stroke-opacity:.45}
.g-side{fill:rgba(24,26,22,.12)}
.rows line{stroke:rgba(24,26,22,.25);stroke-width:1}
.glbl{font-size:10.5px;font-weight:500;letter-spacing:.22em;fill:var(--ash)}
.f-top{fill:var(--peat);stroke:var(--bone);stroke-width:1;stroke-opacity:.55}
.f-side{fill:rgba(24,26,22,.22)}
.lay.n1 .f-top,.lay.n2 .f-top,.lay.n3 .f-top{fill:rgba(24,26,22,.06);stroke-dasharray:3 3}
.ll{font-size:16px;fill:var(--bone)}
.lv{font-size:13.5px;font-weight:500;fill:var(--ash);font-variant-numeric:tabular-nums}
.ldr{stroke:rgba(24,26,22,.3);stroke-width:1}
.brk{stroke:rgba(24,26,22,.45);stroke-width:1;fill:none}
.btxt{font-size:30px;font-weight:300;letter-spacing:-.02em;fill:var(--bone)}
.btxt2{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;fill:var(--ash)}
.p-top{fill:var(--moss)}.p-side{fill:#46502a}
.p-lbl{font-size:10.5px;font-weight:500;letter-spacing:.24em;fill:var(--peat)}
.fee-k{font-size:16px;fill:var(--bone-2)}
.fee-n{font-size:58px;font-weight:300;letter-spacing:-.03em;fill:var(--bone)}
.one-ll{font-size:19px;font-weight:400;fill:var(--bone)}
.one-lv{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;fill:var(--ash)}
.g-one line{stroke:var(--line);stroke-width:1}
.cov{font-size:15.5px;fill:var(--bone-2)}
/* choreography — armed by .play; second beat by .s1 */
.lay,.g-brk,.g-parcel,.g-fee,.g-one{opacity:0}
.lay{transform:translateY(14px)}
.g-parcel{transform:translateY(-26px)}.g-fee{transform:translateY(8px)}
.play .lay.ground{animation:rise .9s cubic-bezier(.22,.68,.24,1) .2s forwards}
.play .lay.b1{animation:rise .7s cubic-bezier(.22,.68,.24,1) .8s forwards}
.play .lay.b2{animation:rise .7s cubic-bezier(.22,.68,.24,1) 1.1s forwards}
.play .lay.b3{animation:rise .7s cubic-bezier(.22,.68,.24,1) 1.4s forwards}
.play .lay.n1{animation:rise .7s cubic-bezier(.22,.68,.24,1) 1.7s forwards}
.play .lay.n2{animation:rise .7s cubic-bezier(.22,.68,.24,1) 2s forwards}
.play .lay.n3{animation:rise .7s cubic-bezier(.22,.68,.24,1) 2.3s forwards}
.play .g-brk{animation:appear .9s ease 3.1s forwards}
.play.s1 .lay.b1{animation:rise 0s forwards,collapse .75s cubic-bezier(.5,0,.75,.4) .05s forwards}
.play.s1 .lay.b2{animation:rise 0s forwards,collapse .75s cubic-bezier(.5,0,.75,.4) .11s forwards}
.play.s1 .lay.b3{animation:rise 0s forwards,collapse .75s cubic-bezier(.5,0,.75,.4) .17s forwards}
.play.s1 .lay.n1{animation:rise 0s forwards,collapse .75s cubic-bezier(.5,0,.75,.4) .23s forwards}
.play.s1 .lay.n2{animation:rise 0s forwards,collapse .75s cubic-bezier(.5,0,.75,.4) .29s forwards}
.play.s1 .lay.n3{animation:rise 0s forwards,collapse .75s cubic-bezier(.5,0,.75,.4) .35s forwards}
.play.s1 .g-brk{animation:appear 0s forwards,fadeout .4s ease .05s forwards}
.play.s1 .g-parcel{animation:land .7s cubic-bezier(.34,1.3,.44,1) .85s forwards}
.play.s1 .g-fee{animation:rise .8s cubic-bezier(.22,.68,.24,1) 1.35s forwards}
.play.s1 .g-one{animation:appear .7s ease 1.75s forwards}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
@keyframes appear{to{opacity:1}}
@keyframes fadeout{to{opacity:0;visibility:hidden}}
@keyframes collapse{to{opacity:0;transform:translateY(var(--d))}}
@keyframes land{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.lay.ground,.g-parcel,.g-fee,.g-one{opacity:1!important;transform:none!important;animation:none!important}.lay.b1,.lay.b2,.lay.b3,.lay.n1,.lay.n2,.lay.n3,.g-brk{display:none}.stage .replay{display:none}}


/* ---- DEMO — a real block, a simulated season ---- */
.demo-sec{padding-bottom:0;background:var(--peat-2)}
.demo-head{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,5vw,96px);align-items:end;margin-bottom:44px}
.demo-head h2{margin-top:18px;max-width:14ch}
.demo-head p{font-size:16px;max-width:none}
.demo{display:grid;grid-template-columns:1.6fr 1fr;background:#1d211c;color:var(--peat)}
.demo .field{position:relative;min-height:640px;overflow:hidden;background:#1d211c}
.demo .field canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.demo .field .cap{position:absolute;left:24px;top:22px;display:flex;flex-direction:column;gap:5px;max-width:34ch;padding:14px 16px;background:rgba(29,33,28,.72);backdrop-filter:blur(6px);border-left:2px solid var(--moss-2)}
.demo .field .cap b{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(241,236,223,.6)}
.demo .field .cap span{font-size:15.5px;color:var(--peat);transition:opacity .25s;line-height:1.35}
.demo .field .week{position:absolute;right:24px;top:22px;display:flex;gap:10px;align-items:baseline;padding:10px 14px;background:rgba(29,33,28,.72);backdrop-filter:blur(6px)}
.demo .field .week .mono{color:rgba(241,236,223,.6)}
.demo .field .week b{font-size:26px;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.demo .field .legend{position:absolute;left:24px;bottom:20px;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(241,236,223,.92);padding:9px 12px;background:rgba(29,33,28,.8)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:2px}
.legend i.u3{background:rgba(241,236,223,.97)}.legend i.u2{background:rgba(241,236,223,.5)}.legend i.u1{background:#3d5a2c;border:1px solid rgba(241,236,223,.5)}
.legend i.dot{width:6px;height:6px;border-radius:50%;background:#fff;margin:0 5px 0 12px}
.legend i.ring{width:10px;height:10px;border-radius:50%;border:2px solid var(--moss-2);background:transparent;margin-left:12px}
.demo .field .credit{position:absolute;right:24px;bottom:22px;color:rgba(241,236,223,.45);font-size:10.5px}
.demo .panel{padding:28px 28px 24px;display:flex;flex-direction:column;gap:12px;border-left:1px solid rgba(241,236,223,.1);background:#242923}
.score{display:flex;align-items:baseline;gap:6px;padding-bottom:16px;border-bottom:1px solid rgba(241,236,223,.14)}
.score b{font-size:68px;font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--peat)}
.score em{font-style:normal;font-size:16px;color:rgba(241,236,223,.5)}
.score span{margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(241,236,223,.55);text-align:right;line-height:1.3}
.panel .row{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(241,236,223,.55);margin-top:4px}
.panel .row b{font-weight:500;color:var(--peat);font-variant-numeric:tabular-nums}
.panel .bar{height:3px;background:rgba(241,236,223,.14);position:relative;overflow:hidden}
.panel .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--moss-2);width:0;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.counts{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 0;border-top:1px solid rgba(241,236,223,.14);border-bottom:1px solid rgba(241,236,223,.14);margin-top:8px}
.counts b{display:block;font-size:30px;font-weight:300;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--peat)}
.counts span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(241,236,223,.55)}
.log{list-style:none;margin:0;padding:0;font-size:13.5px;color:rgba(241,236,223,.7);min-height:120px;display:flex;flex-direction:column;gap:8px}
.log li:nth-child(n+5){display:none}
.log li{display:grid;grid-template-columns:40px 1fr;gap:10px;opacity:0;transform:translateY(6px);animation:rise .5s forwards;line-height:1.4}
.log li b{font-weight:500;color:rgba(241,236,223,.45);font-variant-numeric:tabular-nums;font-size:11.5px;padding-top:2px}
.log li em{font-style:normal;color:var(--peat)}
.log li.d em{color:#d7a86a}
.disturb{margin-top:auto;padding-top:16px;border-top:1px solid rgba(241,236,223,.14)}
.disturb .mono{color:rgba(241,236,223,.55)}
.dbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dbtns button{font-size:13px;font-weight:500;padding:9px 14px;border:1px solid rgba(241,236,223,.5);color:var(--peat);border-radius:999px;transition:background .2s,color .2s,border-color .2s}
.dbtns button:hover{background:var(--peat);color:var(--bone);border-color:var(--peat)}
.dbtns button.reset{border-color:rgba(241,236,223,.35);color:rgba(241,236,223,.75)}
.dbtns button.reset:hover{background:transparent;color:var(--peat);border-color:var(--peat)}
@media(max-width:900px){.hero{padding-top:104px}.hero-grid{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}.cols3{grid-template-columns:1fr}.demo{grid-template-columns:1fr}.demo .field{min-height:420px}.demo-head{grid-template-columns:1fr}.demo .field .legend{display:none}.stage svg{min-height:300px}}
@media(max-width:560px){.facts{grid-template-columns:1fr}}

/* ---- Cognitive Agriculture — the manifesto gets the room ---- */
.intro{padding:clamp(96px,11vw,168px) 0 clamp(96px,11vw,168px)}
.intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,120px);align-items:start}
.intro-side{position:sticky;top:104px}
.intro-side .mono{color:var(--moss)}
.intro-side h2{margin-top:26px;font-weight:300;font-variation-settings:"wdth" 76;letter-spacing:-.025em;line-height:1;font-size:clamp(34px,3.6vw,56px);max-width:12ch;text-wrap:balance}
.intro-side .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.intro-copy p{font-size:clamp(19px,1.55vw,24px);line-height:1.42;color:var(--bone);max-width:none;font-variation-settings:"wdth" 96;letter-spacing:-.008em}
.intro-copy p+p{margin-top:clamp(22px,2.2vw,34px)}
.intro-copy{padding-top:clamp(40px,4vw,58px)}
.intro-copy p:first-child{font-size:clamp(22px,2vw,30px);line-height:1.3;letter-spacing:-.015em;font-variation-settings:"wdth" 90}
/* agents copy folded into AGROSTASIS */
.agn{margin-top:clamp(56px,6vw,88px);padding-top:32px;border-top:1px solid var(--line)}
.agn .mono{color:var(--moss);margin-bottom:22px}
/* the project */
.kv{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.kv dt{font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.kv dd{margin:6px 0 0;font-size:16px;color:var(--bone);text-wrap:balance}
.goals{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.goals-h{margin-bottom:14px;color:var(--moss)}
.goals li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.goals li b{font-size:13px;font-weight:500;color:var(--moss);letter-spacing:.06em;padding-top:4px;font-variant-numeric:tabular-nums}
.goals li span{font-size:16px;line-height:1.45;color:var(--bone-2)}
.partners .k{font-size:clamp(24px,2.2vw,32px)}
.ft .cred{opacity:.7}
/* reveal — critically damped, no overshoot; from the current value; off under reduced motion */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.68,.24,1),transform .7s cubic-bezier(.22,.68,.24,1)}
.js .rv.in{opacity:1;transform:none}
.js .intro-copy .rv{transition-delay:calc(var(--i,0)*90ms)}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:opacity .25s}}
@media(max-width:700px){.hero-vid,.hero-img{object-position:64% 42%}.hero::before{background:linear-gradient(180deg,rgba(18,24,22,.42),rgba(18,24,22,0) 30%,rgba(18,24,22,.2) 55%,rgba(18,24,22,.78) 100%)}}
@media(max-width:900px){.intro-grid{grid-template-columns:1fr}.intro-side{position:static}.kv{grid-template-columns:1fr 1fr}.intro-copy p:first-child{font-size:22px}}

/* AGROSTASIS — four beats: Sense / Model / Act / Adapt */
.agro-lead{max-width:64ch;margin-bottom:clamp(48px,5vw,72px)}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,2.6vw,40px);padding-top:30px;border-top:1px solid var(--line)}
.cols4 .k{font-size:clamp(20px,1.7vw,26px);font-weight:500;font-variation-settings:"wdth" 100;letter-spacing:.02em;text-transform:uppercase;margin-bottom:14px;color:var(--moss)}
.cols4 p{font-size:15px;max-width:none;line-height:1.5}
@media(max-width:1100px){.cols4{grid-template-columns:1fr 1fr;row-gap:38px}}
@media(max-width:640px){.cols4{grid-template-columns:1fr}}