/* self-hosted Google Fonts latin subsets (SIL OFL 1.1, licences in fonts/) */
@font-face{font-family:"Inter Tight";src:url("fonts/InterTight-latin.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}
:root{--brand:#7DA33A;--ink:#121212;--paper:#F0F0EE;--s:1}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 "Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.slash::before{content:"";display:inline-block;width:9px;height:12px;background:currentColor;transform:skewX(-24deg);margin-right:10px;vertical-align:-1px}
.logo{display:flex;align-items:center;gap:6px}
.logo i{display:block;width:17px;height:19px;background:var(--brand);clip-path:polygon(0 36%,50% 0,100% 36%,100% 100%,0 100%)}
.logo i+i{width:12px;height:14px}
.logo b{background:var(--ink);color:#fff;font-weight:700;font-size:15px;letter-spacing:-.04em;padding:5px 8px 6px;margin-left:4px}
.btn-k{white-space:nowrap;background:var(--ink);color:#fff;font-size:13px;font-weight:500;padding:13px 20px;display:inline-block}
.btn-b{background:var(--brand);color:var(--ink);font-size:13px;font-weight:600;padding:15px 22px;display:inline-flex;gap:12px}
.btn-o{white-space:nowrap;background:transparent;color:var(--ink);font-size:13px;font-weight:500;padding:12px 19px;border:1px solid var(--ink)}

/* cookie choice (track.js): bottom right, clear of the scene label and the hero CTA; accept and reject weigh the same */
.consent{position:fixed;right:24px;bottom:24px;z-index:40;max-width:400px;background:#fff;color:var(--ink);padding:20px 22px;box-shadow:0 24px 60px -24px #0007;font-size:14px;line-height:1.45}
.consent p{margin:0 0 14px}
.consent a{text-decoration:underline}
.consent div{display:flex;gap:10px}
.consent button{font-family:inherit;cursor:pointer;border-radius:0}
.consent .btn-k{border:1px solid var(--ink)}
@media (max-width:560px){.consent{left:16px;right:16px;bottom:16px;max-width:none}}

/* preloader */
.preloader{position:fixed;inset:0;z-index:50;background:var(--brand);display:grid;place-items:center}
.preloader .logo i{background:var(--ink)}
.logo.xl{transform:scale(2.2)}

/* navigation: full bar in the hero, compact pill afterwards */
.nav-full{position:fixed;left:48px;right:48px;top:30px;z-index:30;display:flex;align-items:center}
.nav-full nav{display:flex;gap:42px;margin-left:120px;font-size:13.5px;color:#333}
.nav-full .btn-k{margin-left:auto}
.nav-pill{position:fixed;left:50%;top:22px;z-index:30;display:flex;white-space:nowrap;align-items:center;gap:150px;padding:8px 8px 8px 16px;background:#ffffffcc;backdrop-filter:blur(12px)}
.nav-pill .burger{width:20px;height:12px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);position:relative}
.nav-pill .burger::after{content:"";position:absolute;left:0;right:0;top:4px;border-top:1.5px solid var(--ink)}

/* pinned stage: a 1440x900 composition scaled to the viewport */
.stage{position:relative;height:490vh}
.pin{position:sticky;top:0;height:100vh;overflow:hidden}
.panel{position:absolute;inset:0;background:var(--brand);clip-path:circle(var(--pr,0px) at var(--px,70%) var(--py,50%));z-index:0;will-change:clip-path,transform}
.board{position:absolute;left:50%;top:50%;width:1440px;height:900px;transform:translate(-50%,-50%) scale(var(--s));z-index:1}
.w{position:absolute;margin:0;font-weight:600;letter-spacing:-.065em;line-height:.86;font-size:228px;overflow:hidden;padding:0 .02em .06em}
.w span{display:block}
.w1{left:38px;top:200px;z-index:1}
.w2{right:44px;bottom:30px;z-index:1}
.tilt{position:absolute;inset:0;z-index:2;perspective:1600px}
.ct{position:absolute;left:0;top:0;width:1440px;height:900px;z-index:2;transform-origin:50% 50%;will-change:transform;--cut:0;-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--cut)*1% - 7%),#000 calc(var(--cut)*1%));mask-image:linear-gradient(to bottom,transparent calc(var(--cut)*1% - 7%),#000 calc(var(--cut)*1%))}
.ct canvas,.ct img{position:absolute;inset:0;width:100%;height:100%}
.ct img.white{-webkit-mask-image:radial-gradient(circle var(--r,132px) at var(--mx,1010px) var(--my,442px),transparent 99%,#000 100%);mask-image:radial-gradient(circle var(--r,132px) at var(--mx,1010px) var(--my,442px),transparent 99%,#000 100%)}
.ct canvas{-webkit-mask-image:radial-gradient(circle var(--r,132px) at var(--mx,1010px) var(--my,442px),#000 99%,transparent 100%);mask-image:radial-gradient(circle var(--r,132px) at var(--mx,1010px) var(--my,442px),#000 99%,transparent 100%)}
.ring{position:absolute;width:calc(var(--r,132px)*2);height:calc(var(--r,132px)*2);left:calc(var(--mx,1010px) - var(--r,132px));top:calc(var(--my,442px) - var(--r,132px));border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff66;pointer-events:none}
.hero-ui>*{position:absolute;z-index:5}
.since{left:48px;top:470px;color:#555;font-size:11.5px}
.badge{left:58px;top:560px;width:118px;height:118px}
.badge svg{width:100%;height:100%;animation:spin 14s linear infinite}
.badge text{font:500 10.5px "IBM Plex Mono",monospace;letter-spacing:2.6px;fill:var(--ink)}
.badge b{position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;background:var(--brand);display:grid;place-items:center}
.badge b::after{content:"";border-left:10px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
@keyframes spin{to{transform:rotate(360deg)}}
.cta{left:48px;bottom:56px}
.card{right:48px;top:118px;width:208px;background:#fff;padding:12px;display:flex;gap:12px;box-shadow:0 10px 30px -18px #0004;font-size:12px;line-height:1.3}
.card .thumb{flex:none;width:64px;height:64px;background:var(--brand);display:grid;gap:4px;padding:9px;align-content:center}
.card .thumb span{height:5px;background:#12121299}.card .thumb span:nth-child(2){width:70%}.card .thumb span:nth-child(3){width:85%}
.card b{display:block;font-size:13px;margin-bottom:3px}.card small{display:block;color:#777;font-size:10.5px;margin-top:4px}
.stats{right:48px;top:330px;text-align:right}
.stats div{margin-bottom:26px}
.stats b{display:block;font-size:34px;font-weight:500;letter-spacing:-.04em;line-height:1}
.stats sub{font-size:14px;vertical-align:baseline;color:#777}
.stats span{font-size:11.5px;color:#777}

.about>*{position:absolute;z-index:4;margin:0}
.about .label{top:166px;left:0;right:0;text-align:center}
.about .statement{top:212px;left:230px;width:980px;text-align:center;font-weight:500;font-size:54px;line-height:1.08;letter-spacing:-.045em}
.about .go{top:470px;left:50%;transform:translateX(-50%)}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.word>span{display:inline-block}

.mission>*{position:absolute;z-index:4;margin:0}
.mission .tl{left:48px;top:118px}
.mission .what{left:310px;top:118px;font-size:11px;color:#777;line-height:1.35}
.mission .para{right:48px;top:112px;width:520px;font-size:21px;line-height:1.3;letter-spacing:-.02em;color:#555}
.mission .para em{color:var(--ink)}
.mission .lines{left:0;top:0;width:1440px;height:900px;overflow:visible;z-index:5}
.lines path{fill:none;stroke:var(--ink);stroke-width:1}
.lines rect{fill:#ffffff66;stroke:#ffffffaa;stroke-width:1}
.anns{list-style:none;padding:0;left:0;top:0;width:1440px;height:900px;pointer-events:none;z-index:6}
.anns li{position:absolute;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}

.after{min-height:70vh;padding:16vh 48px;max-width:980px}
.after h2{font-weight:500;font-size:44px;line-height:1.1;letter-spacing:-.04em;margin:18px 0}
.after p{color:#555}



/* cursor ring text */
.ringtext{position:absolute;width:calc(var(--r,132px)*2 + 44px);height:calc(var(--r,132px)*2 + 44px);left:calc(var(--mx,1010px) - var(--r,132px) - 22px);top:calc(var(--my,442px) - var(--r,132px) - 22px);pointer-events:none;animation:spin 18s linear infinite;overflow:visible}
.ringtext text{font:500 7.6px "IBM Plex Mono",monospace;letter-spacing:2.2px;fill:var(--ink)}
/* scroll hint */
.scrollhint{left:300px;bottom:52px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10.5px;color:#555}
.scrollhint i{width:1px;height:46px;background:#1212122e;position:relative;overflow:hidden}
.scrollhint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:drip 1.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes drip{to{top:100%}}
/* about: drifting outlined product names */
.marquee{position:absolute;left:0;top:560px;white-space:nowrap;z-index:1;opacity:0;pointer-events:none}
.mono-big{font:600 150px/1 "Inter Tight",sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px #12121255}
/* hand-drawn marks on the statement */
.mark{position:relative;display:inline-block}
.mark svg{position:absolute;left:-6%;width:112%;overflow:visible;pointer-events:none}
.mark.u svg{bottom:-.16em;height:.3em}
.mark.c svg{top:-.22em;height:1.42em}
.mark path{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* mission: words light up as you read */
.para .pw{color:#b9b9b4;transition:none}
.para .pw.em{font-style:italic}
.anns li b{display:block;font:500 10px "IBM Plex Mono",monospace;letter-spacing:.08em;color:#8a8a85;margin-bottom:3px}
.lines circle{fill:var(--brand);transform-box:fill-box;transform-origin:center;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.fly{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;visibility:hidden;opacity:0;will-change:opacity}   /* the camera move into the yard */
/* tall screens: the board shows its middle 820px (x 310–1130; 36px ≈ the 16px phone gutter) and --vt/--vb are its visible top and bottom, in board px */
html.tall .slash::before{width:18px;height:24px;margin-right:18px}
html.tall .w{font-size:186px}
html.tall .w>span{padding-bottom:.14em}   /* room for the descender, inside the part that slides out */
html.tall .w1{left:346px;top:calc(var(--vt) + 250px)}
html.tall .w2{right:346px;bottom:auto;top:calc(var(--vb) - 530px)}
html.tall .since{left:348px;top:calc(var(--vt) + 200px);font-size:22px}
html.tall :is(.badge,.card,.stats,.scrollhint,.mission .what){display:none}
html.tall .cta{left:346px;right:346px;bottom:auto;top:calc(var(--vb) - 210px);justify-content:space-between;gap:24px;padding:32px 40px;font-size:30px}
html.tall .about{position:absolute;left:346px;width:748px;top:calc(var(--vt) + 220px);display:flex;flex-direction:column;align-items:center;gap:44px}
html.tall .about>*{position:static}
html.tall .about .label{font-size:22px}
html.tall .about .statement{width:auto;font-size:64px}
html.tall .about .go{transform:none;padding:28px 40px;font-size:28px}
html.tall .mission .tl{left:346px;top:calc(var(--vt) + 220px);font-size:22px}
html.tall .mission .para{left:346px;right:346px;width:auto;top:calc(var(--vt) + 280px);font-size:46px}
html.tall .anns li{font-size:28px}
html.tall .anns li b{font-size:20px}
html.tall .lines path{stroke-width:2}
html.motion-off :is(.badge svg,.ringtext,.scrollhint i::after,.lines circle){animation:none}
.motion-toggle{position:fixed;left:16px;bottom:16px;z-index:70;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;background:#121212e0;color:#fff;border:1px solid #fff4;padding:9px 12px;cursor:pointer}
.motion-toggle:hover{background:var(--brand);color:var(--ink)}.motion-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ================= the journey: producer → sealed → truck → road → route → buyer → shelf ================= */
.journey{position:relative;height:1000vh;background:#121212}
/* animation-off layout (reduced motion, or before/without JS): the scenes stack as full-height panels, everything visible.
   journey-act.js adds html.j-live when it builds the scroll stage. */
/* live: the journey overlaps the last screen of act one and stays invisible until it pins, so the hand-off is a frame match */
html.j-live .journey{margin-top:-100vh;background:none}
html.j-live .journey .jpin{opacity:0;pointer-events:none}
html.j-live .journey.on .jpin{opacity:1;pointer-events:auto}
html:not(.j-live) .journey{height:auto}
html:not(.j-live) .jpin{position:relative;height:auto;overflow:visible}
html:not(.j-live) .j-scene{position:relative;inset:auto;visibility:visible;height:100vh;min-height:620px}
html:not(.j-live) .j-doors{display:none}
html:not(.j-live) :is(.hotspots li,.docs li,.track li,.ticks li){opacity:1}
html:not(.j-live) .j-drive .truck{left:12vw}
html:not(.j-live) .j-route .ship{left:-52vw}
html:not(.j-live) .track .done{stroke-dasharray:none}
html:not(.j-live) .track .mover{left:100%}
html:not(.j-live) :is(.track li,.ticks li)::before{background-color:var(--brand);border-color:var(--brand)}
html:not(.j-live) .stamp{opacity:1}
.jpin{position:sticky;top:0;height:100vh;overflow:hidden}
.j-scene{position:absolute;inset:0;visibility:hidden;overflow:hidden;isolation:isolate}
.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform}
.j-copy{position:absolute;z-index:4;max-width:min(520px,36vw);color:var(--ink)}
.j-copy.left{left:48px;top:50%;transform:translateY(-50%)}
.j-copy.right{right:48px;top:50%;transform:translateY(-50%)}
.j-copy.top{left:48px;top:110px;max-width:none}
.j-copy h2{font-weight:500;font-size:clamp(40px,4.4vw,72px);line-height:1;letter-spacing:-.05em;margin:14px 0 18px}
.j-copy p{font-size:clamp(15px,1.15vw,18px);line-height:1.45;color:#3d3d3a;margin:0;max-width:40ch}
.j-copy .mono{color:var(--ink);font-size:12px}
.j-copy .btn-b{margin-top:22px}
.j-producer .j-copy,.j-buyer .j-copy{background:#f6f4efe6;backdrop-filter:blur(10px);padding:30px 32px 34px;box-shadow:0 30px 60px -40px #0006}
/* producer dossier with stamps */
.dossier{position:absolute;z-index:5;right:48px;bottom:56px;width:min(360px,28vw);background:#fffdf8;color:var(--ink);padding:22px 24px;box-shadow:0 30px 70px -30px #0008;font-size:13.5px}
.dossier>.mono{font-size:11px;margin:0 0 12px}.dossier>.mono span{color:#999}
.dossier dl{margin:0}
.dossier dl div{position:relative;display:grid;grid-template-columns:110px 1fr;gap:10px;padding:10px 0;border-top:1px solid #1212121a}
.dossier dt{color:#888;font-size:12px}.dossier dd{margin:0}
.stamp{position:absolute;right:-34px;top:4px;font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#C2410C;border:2px solid #C2410C;padding:6px 8px 5px;border-radius:3px;transform:rotate(-8deg);opacity:0;background:#fff8}
.dossier small{display:block;margin-top:12px;color:#999;font-size:11px}
/* hotspots on the dioramas */
.hotspots{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:3;pointer-events:none}
.hotspots li{position:absolute;transform:translate(-50%,-50%);opacity:0}
.hotspots i{position:relative;display:block;width:14px;height:14px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px #fff,0 6px 16px #0006}
.hotspots i::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid #fff;animation:ping 2s ease-out infinite}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.hotspots span{position:absolute;left:22px;top:50%;transform:translateY(-50%);white-space:nowrap;background:#121212e6;color:#fff;font-size:12.5px;padding:7px 10px;line-height:1.2}
.hotspots span b{display:block;font:500 10px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:2px}
.hotspots li.flip span{left:auto;right:22px}
.hotspots li.mute span{display:none}
/* sealing doors */
.j-doors{position:absolute;inset:0;z-index:6;pointer-events:none;visibility:hidden;--dw:max(100vw,160vh)}
/* one render of the door end, split down the door gap: each leaf shows its half of the same cover-sized image */
.door{position:absolute;top:0;bottom:0;width:50%;background:#7e9743 url("doors.webp") no-repeat;background-size:var(--dw) auto;box-shadow:0 0 50px #0007}
.door.l{left:0;background-position:calc(50vw - var(--dw) / 2) 50%}
.door.r{right:0;background-position:calc(var(--dw) / -2) 50%}
.seal-img{position:absolute;opacity:0;filter:drop-shadow(0 10px 14px #0005)}
.seal{position:absolute;translate:0 -50%;background:#121212;color:#fff;padding:14px 18px;display:grid;gap:5px;opacity:0;box-shadow:0 20px 40px -10px #000a}
.seal::before{content:"";position:absolute;right:100%;top:50%;width:26px;height:2px;background:#121212}
.seal.left::before{right:auto;left:100%}
.seal b{font-weight:600;font-size:34px;letter-spacing:-.04em;line-height:1;color:var(--brand)}
.seal .mono{font-size:10.5px;color:#bbb}
/* loading */
.j-load{background:var(--paper)}
.j-load canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}   /* motion frames over the yard plate: same size, same fit */
.j-load::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,#f1eee8d9 0,#f1eee88c 26%,#f1eee800 46%)}
/* the road */
.j-drive{box-shadow:-30px 0 60px #0004}                       /* leading edge during the whip-pan */
.j-drive .layer{position:absolute;left:0;right:0}
.j-drive .tile{right:auto;will-change:transform}               /* width = viewport + one tile; slid by transform, never repainted */
.j-drive .sky{top:0;bottom:0;background:linear-gradient(180deg,#97adcb 0%,#c3cfdb 40%,#e6e1d6 72%)}
.j-drive .photo{right:auto;background:no-repeat 0 0/100% 100%;will-change:transform}   /* sized and placed by journey-act.js */
html.js:not(.j-near) :is(.door,.j-drive .photo,.j-drive .tile,.j-clouds){background-image:none}   /* fetched once the journey is near */
.j-drive .far{background-image:url("drive-photo-far.webp");-webkit-mask-image:linear-gradient(180deg,#0000 0,#000 16%);mask-image:linear-gradient(180deg,#0000 0,#000 16%)}   /* top edge melts into the sky on tall screens */
.j-drive .mid{background-image:url("drive-photo-mid.webp")}
.j-drive .road{bottom:0;height:30vh;background:url("drive-road.webp") repeat-x 0 0/auto 100%}
.j-drive .near{bottom:0;height:40vh;z-index:3;background:url("drive-near.webp") repeat-x 0 100%/auto 100%;filter:blur(1.5px)}
.j-drive .truck{position:absolute;z-index:2;left:0;bottom:22.5vh;width:min(74vw,1300px);aspect-ratio:3}
.j-drive .truck::before{content:"";position:absolute;left:8%;right:4%;bottom:9%;height:8%;border-radius:50%;background:radial-gradient(closest-side,#0006,#0000)}
.j-drive .truck .body{position:absolute;inset:0;width:100%;height:100%}
.j-drive .wheel{position:absolute;width:8.53%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--spin,0deg))}
.docs{position:absolute;z-index:4;right:48px;top:118px;list-style:none;margin:0;padding:0;display:grid;gap:8px;justify-items:end}
.docs li{background:#fffdf8;color:var(--ink);font-size:13px;padding:9px 14px;box-shadow:0 12px 30px -16px #0006;opacity:0}
.docs li::before{content:"✓";color:#2f7d32;font-weight:700;margin-right:8px}
.docs em{color:#999;font-style:normal;font-size:11.5px}
/* the route */
.j-clouds{position:absolute;left:0;top:0;width:100%;height:max(162.5vw,240vh);background:url("clouds.webp") center/100% 100% no-repeat;visibility:hidden;z-index:5;pointer-events:none;will-change:transform}
.j-route{background:#0b2d45;color:#fff}
.j-buyer :is(.bfly,.dfly),.j-shelf .sfly{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}   /* rendered camera moves */
.j-shelf .ink{position:absolute;inset:0;z-index:5;background:var(--ink);opacity:0;pointer-events:none}   /* the end fades into the next section */
.j-route::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#061a28d9 0,#061a2800 34%,#061a2800 52%,#061a28f0 100%)}
.j-route .ship{position:absolute;left:0;top:calc(47% - 19.3vw);width:130vw;z-index:1}
.j-route .ship>img{display:block;width:100%;height:auto}
.j-route .lot{position:absolute;z-index:1}
.j-route .lot i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px #fff}
.j-route .lot i::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid #fff;animation:ping 2s ease-out infinite}
.j-route .lot b{position:absolute;left:-1px;bottom:22px;white-space:nowrap;background:#fff;color:var(--ink);font:500 10px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px}
.j-route .lot b::after{content:"";position:absolute;left:0;top:100%;width:2px;height:16px;background:#fff}
.j-route>.mono,.j-route h2,.j-route .track,.j-route small{z-index:3}
.j-route>.mono{position:absolute;left:48px;top:118px;margin:0;font-size:12px}.j-route>.mono span{color:#888}
.j-route h2{position:absolute;left:48px;top:150px;margin:0;font-weight:500;font-size:clamp(44px,5vw,84px);letter-spacing:-.05em;line-height:1}
.track{position:absolute;left:6vw;right:6vw;bottom:84px}
.track svg{width:100%;height:60px;display:block;overflow:visible}
.track path{fill:none;stroke-width:2}
.track .base{stroke:#ffffff33;stroke-dasharray:6 8}
.track .done{stroke:var(--brand);stroke-width:3}
.track .mover{position:absolute;top:30px;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;background:var(--brand);border-radius:50%;box-shadow:0 0 0 6px #7da33a33,0 0 30px #7da33a}
.track ol{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.track li{position:relative;padding-top:6px;opacity:.35}
.track li::before{content:"";position:absolute;left:0;top:-67px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#121212;border:2px solid #ffffff66}
.track li.on{opacity:1}.track li.on::before{background:var(--brand);border-color:var(--brand)}
.track li b{display:block;font-weight:500;font-size:clamp(22px,2vw,32px);letter-spacing:-.03em}
.track li span{display:block;color:#c3d0da;font-size:13.5px;margin-top:4px}
.track li em{display:block;font:500 11px "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--brand);margin-top:10px;font-style:normal}
.track li:nth-child(4){text-align:right}.track li:nth-child(4)::before{left:auto;right:0;margin:0 -7px 0 0}
.j-route small{position:absolute;left:6vw;bottom:32px;color:#9fb1bf;font-size:12px}
/* buyer ticks */
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:center;font-size:15px;opacity:.25}
.ticks li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23121212' stroke-width='1.8'/%3E%3C/svg%3E")}
.ticks li.on{opacity:1}.ticks li.on::before{background-color:var(--brand);border-color:var(--brand)}
.j-copy.dark{background:none}
.j-shelf::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--scrim,1);background:linear-gradient(90deg,#f3f0eaeb 0,#f3f0eab8 30%,#f3f0ea00 52%)}
/* ================= footer: giant wordmark between sky and containers ================= */
.foot{position:relative;height:100vh;min-height:640px;overflow:hidden;background:#cfe0ee;color:var(--ink)}
.foot-stage{position:absolute;inset:0}
.foot .sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foot .giant{position:absolute;left:0;right:0;top:4vh;margin:0;text-align:center;font-weight:700;font-size:31vw;line-height:.8;letter-spacing:-.075em;color:#fff;text-shadow:0 10px 60px #0002}
.foot .stack{position:absolute;left:24vw;bottom:0;width:90vw;height:auto}
.foot .loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:none}   /* journey-act.js: the rendered loop */
.foot.live .loop{display:block}
.foot.live :is(.sky,.giant,.stack){display:none}
.foot-ui{position:absolute;left:48px;right:48px;bottom:40px;display:flex;flex-direction:column;gap:16px;z-index:2}
.foot-ui nav{display:flex;gap:28px;font-size:14px;color:var(--ink)}
.foot-cta{background:#fffdf8;padding:22px 26px;display:flex;gap:26px;align-items:center;align-self:flex-start;box-shadow:0 30px 60px -30px #0008}
.foot-cta h2{margin:0;font-weight:500;font-size:28px;letter-spacing:-.04em}
.foot .fine{margin:0;font-size:11.5px;color:#121212a6;max-width:60ch}.foot .fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------------------- phones: copy moves to the bottom, full width */
@media (max-width:760px),(orientation:portrait) and (max-width:1100px){
  .nav-full nav{display:none}
  .nav-pill{gap:28px}
  .j-copy,.j-copy.left,.j-copy.right{left:16px;right:16px;top:auto;bottom:20px;max-width:none;transform:none}
  .j-copy.top{left:16px;right:16px;top:104px;bottom:auto}
  .j-copy h2{font-size:clamp(30px,8.6vw,40px);margin:10px 0 12px}
  .j-copy p{font-size:14.5px}
  .j-producer .j-copy,.j-buyer .j-copy{padding:18px 20px 20px}
  .ticks{margin-top:12px;gap:7px}.ticks li{font-size:13.5px}
  .dossier,.hotspots span{display:none}
  .docs{right:auto;left:16px;top:auto;bottom:calc(30vh + 4px);justify-items:start;gap:6px}
  .docs li{font-size:12px;padding:7px 10px}
  .j-load .cover,.j-load canvas{object-position:64% 50%}
  .j-load::before{background:linear-gradient(0deg,#f1eee8f0 0,#f1eee8b3 30%,#f1eee800 50%)}
  .j-route h2{left:16px;right:16px;top:132px;font-size:clamp(34px,9vw,44px)}
  .j-route>.mono{left:16px;top:104px}
  .j-route .lot b{left:auto;right:-1px}.j-route .lot b::after{left:auto;right:0}
  .track{left:16px;right:16px;bottom:64px}
  .track ol{grid-template-columns:1fr 1fr;row-gap:16px}
  .track li::before{display:none}
  .track li:nth-child(4){text-align:left}
  .j-route small{left:16px;right:16px;bottom:18px}
  .j-shelf::before{background:linear-gradient(0deg,#f3f0eaf5 0,#f3f0eadd 38%,#f3f0ea00 62%)}
  .seal{translate:-50% -50%}.seal::before{display:none}
  .foot .giant{top:14vh;font-size:30vw}
  .foot .stack{left:-12vw;width:150vw}
  .foot-cta{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-cta h2{font-size:24px}
  /* phones: the scene gets the whole screen, the links, CTA and credits follow on the sky's horizon colour */
  .foot{height:auto;min-height:0;background:#f3dec2}
  .foot-stage{position:relative;height:100vh;height:100svh;overflow:hidden}
  .foot.v-port .foot-stage{height:177.78vw}.foot.v-land .foot-stage{height:62.5vw}   /* the loop at its own proportions: nothing cropped */
  .foot-ui{position:relative;left:auto;right:auto;bottom:auto;padding:24px 16px 32px}
  .foot-ui nav{flex-wrap:wrap;gap:10px 20px}

}

/* how it works: a calm section after the journey, before the footer */
.steps{position:relative;background:var(--ink);color:#fff;padding:16vh 48px 18vh}
.steps>.mono{margin:0;color:#fff}
.steps h2{margin:14px 0 56px;font-weight:500;font-size:clamp(40px,4.6vw,76px);line-height:1;letter-spacing:-.05em}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cards li{background:var(--brand);color:var(--ink);padding:26px 26px 22px;display:flex;flex-direction:column;min-height:380px;box-shadow:0 30px 60px -30px #0008}
.cards .n{font:500 22px/1 "Inter Tight",sans-serif;letter-spacing:-.03em}
.cards b{font-weight:500;font-size:clamp(26px,2.2vw,36px);line-height:1;letter-spacing:-.045em;margin-top:14px}
.cards svg{width:84px;height:84px;margin:auto 0;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.cards small{font-size:14px;line-height:1.35;max-width:26ch}
.steps .money{margin:44px 0 0;max-width:62ch;font-size:17px;line-height:1.5;color:#ffffffbb}
.steps .money b{color:#fff;font-weight:600}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.nav-full nav{display:none}}
@media (max-width:560px){.steps{padding:12vh 16px 14vh}.cards{grid-template-columns:1fr}.cards li{min-height:0}.cards svg{margin:26px 0}}

/* preview aid: numbered scene label (journey-act.js; ?clean hides it) */
.scene-no{position:fixed;left:16px;bottom:52px;z-index:60;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;background:#121212e0;color:#fff;padding:8px 10px;pointer-events:none}