/* FLOWMAKERS · production stylesheet. Built from concepts/b2-1-final/site/index.html by production/build.py. */
:root{
  --concrete:#D8D4CB;--cdark:#A8A39A;--ink:#161616;--paper:#F7F4EC;--green:#1F7A4D;--terra:#B5482A;--ochre:#E2A230;--sky:#9DC4E8;--teal:#2C6E72;--col:#C2BEB5;
  --iris:#5b3fff;--spark:#ffb020;--mfink:#16131f;--mfbg:#f6f5fa;--wink:#121110;--wpaper:#F1ECE2;
  --art-hf:url("/assets/logos/flag.svg");
  --art-mf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' preserveAspectRatio='none'%3E%3Crect width='60' height='40' fill='%235b3fff'/%3E%3Crect x='7' y='7' width='19' height='19' rx='3' fill='%23ffb020'/%3E%3Crect x='20' y='20' width='9' height='9' rx='1.6' fill='%2316131f'/%3E%3C/svg%3E");
  --f-display:"Fira Sans Extra Condensed","Arial Narrow",sans-serif;--f-text:"Ubuntu Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"Ubuntu Sans Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-mf:Geologica,Inter,system-ui,sans-serif;--f-wf:Literata,Georgia,serif;
  --m:clamp(16px,2.3vw,32px);--hh:60px;--ease:cubic-bezier(.22,1,.36,1);--out:cubic-bezier(.2,.8,.2,1);--snap:cubic-bezier(.3,1.3,.5,1);--axis:cubic-bezier(.65,0,.35,1);
  --s-lead:clamp(1.1875rem,1.02rem + .75vw,1.625rem);--s-head:clamp(2.75rem,1.5rem + 4.4vw,6.25rem);
  --focus:var(--ink);--halo:var(--paper);--wind:0;--gust:0;
  --sky-bg:var(--sky);--sky-ink:var(--ink);--pole:var(--ink);--quay:var(--concrete);--line:var(--ink)}
/* the sky follows Athens time; ink text on morning, day and dusk, paper text at night */
html[data-sky=morning]{--sky-bg:linear-gradient(#CFE0EE,#9DC4E8)}
html[data-sky=dusk]{--sky-bg:linear-gradient(#F2B58A,#A6789C)}
html[data-sky=night]{--sky-bg:#18233D;--sky-ink:var(--paper);--pole:#5D6987;--quay:#8E8A83;--line:rgba(247,244,236,.62)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px;background:var(--concrete)}
body{margin:0;background:var(--concrete);color:var(--ink);font:400 clamp(1.0625rem,1rem + .2vw,1.1875rem)/1.55 var(--f-text);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.08em}
button{font:inherit;color:inherit}
::selection{background:var(--ochre);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 3px var(--halo)}
[tabindex="-1"]:focus{outline:none;box-shadow:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ph{display:inline-block;background:var(--ink);color:var(--paper);font:700 .75rem/1.2 var(--f-mono);letter-spacing:.03em;padding:3px 6px;vertical-align:.12em}
.skip{position:fixed;z-index:100;left:var(--m);top:-100px;background:var(--paper);color:var(--ink);padding:12px 16px;font:700 1rem/1 var(--f-text);text-decoration:none}
.skip:focus{top:8px}
.cap{margin-top:12px;font-size:.875rem;line-height:1.45;max-width:62ch}
.st{display:inline-flex;align-items:center;gap:.5em;padding:6px 9px 6px 8px;font:700 .75rem/1.25 var(--f-mono);letter-spacing:.04em}
.st svg{width:12px;height:12px;flex:none}
.st--live{background:var(--green);color:var(--paper)}
.st--beta{background:var(--ochre);color:var(--ink)}
.st--res{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}

/* ===== Header: logo · signal nav · harbour board · language ===== */
.hdr{position:fixed;z-index:50;top:0;left:0;right:0;height:var(--hh);display:flex;align-items:center;gap:clamp(10px,1.1vw,24px);padding:0 var(--m);background:var(--ink);color:var(--paper);--focus:var(--paper);--halo:var(--ink)}
.logo{display:inline-flex;align-items:center;gap:10px;flex:none;padding:8px 0;color:var(--paper);text-decoration:none;font:900 1.25rem/1 var(--f-display);letter-spacing:.03em}
.logo img{display:block;height:20px;width:auto;max-width:150px;object-fit:contain;object-position:0 50%}
.snav ul{display:flex;gap:0}
.snav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 7px;border-bottom:3px solid transparent;color:var(--paper);text-decoration:none;font:700 .9375rem/1 var(--f-text);white-space:nowrap}
.snav a:hover{border-bottom-color:var(--cdark)}
.snav a[aria-current]{border-bottom-color:var(--ochre)}
.sw{width:21px;height:14px;flex:none;transform-origin:0 50%}
.sw--roll{width:6px;height:18px}.sw--clip{width:10px;height:20px;color:var(--paper)}.sw--pen{width:11px;height:16px}
.motion [aria-current] .sw{animation:fly .6s var(--out)}
@media (hover:hover){.motion .snav a:hover .sw{animation:fly .6s var(--out)}}
.motion .snav a:focus-visible .sw{animation:fly .6s var(--out)}
@keyframes fly{30%{transform:skewY(-9deg) scaleX(.86)}65%{transform:skewY(6deg)}}
.board{display:flex;align-items:center;gap:8px;margin-left:auto}
.board__r{display:flex;align-items:center;gap:7px;padding:0 12px;min-height:40px;box-shadow:inset 0 0 0 1px rgba(247,244,236,.32);font:400 .8125rem/1 var(--f-mono);white-space:nowrap}
.board__r b{color:var(--ochre);font-size:1rem;font-weight:700}
.wind__sock{width:17px;height:11px;background:var(--ochre);clip-path:polygon(0 0,100% 32%,100% 68%,0 100%);transform-origin:0 50%}
.calm .wind__sock{clip-path:polygon(0 0,40% 30%,40% 70%,0 100%)}
.wind.idle .wind__sock{animation:sock 1.1s ease-in-out infinite alternate}
@keyframes sock{from{transform:scaleX(calc(.6 + var(--wind) * .4)) skewY(-9deg)}to{transform:scaleX(calc(.75 + var(--wind) * .25)) skewY(9deg)}}
.calm-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:0;background:transparent;color:var(--paper);box-shadow:inset 0 0 0 2px rgba(247,244,236,.5);font:700 .8125rem/1 var(--f-text);cursor:pointer;white-space:nowrap}
.calm-btn__i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor}
.calm-btn[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.calm-btn[aria-pressed="true"] .calm-btn__i{background:currentColor}
.lang{display:flex;gap:2px;padding:4px;box-shadow:inset 0 0 0 1px rgba(247,244,236,.32)}
.lang a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:40px;min-height:32px;color:var(--paper);font:700 .875rem/1 var(--f-mono)}
.lang button{min-width:40px;min-height:32px;border:0;background:transparent;color:var(--paper);font:700 .875rem/1 var(--f-mono);cursor:pointer}
.lang a[aria-current="page"],.lang button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.nw{white-space:nowrap}
.no-js .lang,.no-js .calm-btn,.no-js .rail{display:none}
/* phones: a flag rail in the thumb zone */
.rail{position:fixed;z-index:50;left:0;right:0;bottom:0;display:none;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:var(--ink);--focus:var(--paper);--halo:var(--ink)}
.rail a,.rail button{display:grid;justify-items:center;align-content:center;gap:5px;min-height:52px;padding:0 2px;border:0;background:none;color:var(--paper);text-decoration:none;font:700 .6875rem/1.1 var(--f-text);text-align:center;cursor:pointer}
.rail .sw{width:24px;height:16px}.rail .sw--roll{width:7px;height:22px}.rail .sw--clip{width:11px;height:22px}
.rail [aria-current]{color:var(--ochre)}
.dots{display:flex;gap:3px;height:16px;align-items:center}.dots i{width:5px;height:5px;background:currentColor}

/* ===== Hero ===== */
.hero{position:relative;container-type:inline-size;display:flex;flex-direction:column;padding-top:var(--hh);background:var(--sky-bg);color:var(--sky-ink);overflow:hidden;--focus:var(--sky-ink);
  --qh:clamp(96px,12svh,120px);--pw:20px;
  --fh:clamp(160px,calc((100svh - var(--hh) - var(--qh) - 3.5cqw - 410px) / 1.34),220px);
  --hf:calc(var(--fh) * .34);--fw:calc(var(--fh) * 1.5);--rl:calc(var(--fh) * .8);--rw:calc(var(--rl) * .24);
  min-height:max(100vh,calc(var(--hh) + 3.5cqw + 440px + var(--fh) * 1.34 + var(--qh) + var(--sign-h,0px)))}
.hero::before{content:"";position:absolute;inset:var(--hh) 0 auto;height:55%;display:none;
  background:radial-gradient(1.6px 1.6px at 8% 22%,#fff 98%,#0000),radial-gradient(1.2px 1.2px at 19% 9%,#fff 98%,#0000),radial-gradient(1.8px 1.8px at 33% 30%,#fff 98%,#0000),radial-gradient(1.2px 1.2px at 46% 12%,#fff 98%,#0000),radial-gradient(1.5px 1.5px at 66% 6%,#fff 98%,#0000),radial-gradient(1.2px 1.2px at 74% 27%,#fff 98%,#0000),radial-gradient(1.7px 1.7px at 88% 15%,#fff 98%,#0000),radial-gradient(1.3px 1.3px at 95% 38%,#fff 98%,#0000),radial-gradient(1.2px 1.2px at 27% 46%,#fff 98%,#0000)}
html[data-sky=night] .hero::before{display:block}
.lines{position:absolute;z-index:1;top:calc(var(--hh) + var(--sign-h,0px));left:0;width:100%;max-width:none;overflow:visible;pointer-events:none}
.ln{fill:none;stroke:var(--line);stroke-width:2.5}
.back{opacity:.5}
.bsway,.bf{transform-box:fill-box;transform-origin:50% 0}
.wind.idle .bsway{animation:bsway 7s ease-in-out infinite alternate}
.wind.idle .bf{animation:sway 2.6s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes bsway{from{transform:rotate(-.4deg)}to{transform:rotate(.5deg) translateY(3px)}}
@keyframes sway{from{transform:rotate(calc(2.5deg - var(--wind) * 5deg)) skewX(calc(var(--wind) * -4deg))}to{transform:rotate(calc(-3deg - var(--wind) * 15deg)) skewX(calc(1.5deg + var(--wind) * 6deg))}}
.hero__text{position:relative;z-index:2;flex:1;width:54%;padding:calc(17.2cqw + var(--sign-h,0px)) 0 30px var(--m)}
.kick{display:inline-block;padding:7px 11px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);font:700 .8125rem/1.3 var(--f-mono);letter-spacing:.03em}
.display{margin-top:18px;font:900 clamp(4rem,min(10.2cqw,15svh),10rem)/.84 var(--f-display);letter-spacing:-.012em;text-wrap:balance}
.hero h1{margin-top:clamp(16px,2.4svh,28px);font:800 clamp(1.75rem,.9rem + 1.85vw,2.75rem)/1.05 var(--f-display);max-width:21em;text-wrap:balance}
.hstat{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.hstat p{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;background:var(--paper);color:var(--ink);font:600 .9375rem/1.3 var(--f-text)}
.hstat svg{width:12px;height:12px;flex:none}
/* the mast: house flag at the truck, one continuous hoist, everything at the top */
.mast{position:absolute;z-index:3;left:calc(57% - 10px);right:0;top:calc(var(--hh) + 3.47cqw - 15px + var(--sign-h,0px));bottom:var(--qh)}
.mast__pole{position:absolute;left:0;top:14px;bottom:-14px;width:var(--pw);background:var(--pole)}
.mast__truck{position:absolute;left:calc(var(--pw) / 2 - 15px);top:0;width:30px;height:30px;border-radius:50%;background:var(--ochre);border:5px solid var(--pole)}
html[data-sky=night] .mast__truck{box-shadow:0 0 0 6px rgba(226,162,48,.22),0 0 36px 14px rgba(226,162,48,.42)}
html[data-sky=night] .mast__truck::after{content:"";position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(rgba(226,162,48,.45),#0000 70%)}
html[data-sky=night].wind.idle .mast__truck::after{animation:glow 4s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.45}to{opacity:1}}
.mast::after{content:"";position:absolute;left:calc(var(--pw) + 3px);top:28px;bottom:44px;width:2px;background:var(--line)}
.mast__hf{position:absolute;left:calc(var(--pw) + 5px);top:30px;width:calc(var(--hf) * 1.5);height:var(--hf)}
.fl{position:relative;display:block;width:100%;height:100%;background:var(--art) 0 0/100% 100% no-repeat;transform-origin:0 50%}
.fl.is-sliced{background:none;--sw:calc(var(--fw) / var(--n))}
.fl i{position:absolute;top:0;left:var(--sw);width:calc(var(--sw) + 1px);height:100%;background:var(--art) no-repeat;background-size:var(--fw) 100%;background-position:calc(var(--d) * var(--sw) * -1) 0;transform-origin:0 50%}
.fl>i{left:0}
.wind.idle .fl i{--amp:calc(1.1deg + var(--wind) * 2.6deg);animation:bend 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -.2s)}
@keyframes bend{from{transform:skewY(calc(var(--amp) * -1))}to{transform:skewY(var(--amp))}}
.hoists{position:absolute;top:calc(36px + var(--hf));left:calc(var(--pw) + 5px);right:var(--m);padding:calc(var(--fh) + 26px) 0 0 calc(var(--rw) + 56px)}
.strings{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.strings path{fill:none;stroke:var(--sky-ink);stroke-width:1.5;opacity:.7}
.hoist{display:block;color:var(--ink);text-decoration:none}
.hoist:focus-visible{outline:none;box-shadow:none}
.hoist__flag,.hoist__roll,.hclip{position:absolute;left:0}
.hoist__flag{top:0;width:var(--fw);height:var(--fh)}
.hoist__roll{top:var(--fh);width:var(--rw);height:var(--rl)}
.hoist__flag::before,.hoist__flag::after,.hoist__roll::before,.hoist__roll::after{content:"";position:absolute;z-index:1;left:-7px;width:9px;height:6px;background:var(--pole)}
.hoist__flag::before,.hoist__roll::before{top:6px}.hoist__flag::after,.hoist__roll::after{bottom:6px}
.roll{width:100%;height:100%;transform-origin:50% 0}
.rl,.roll{transform-origin:0 0}
.wind.idle .roll{animation:twitch 2.4s ease-in-out infinite alternate}
@keyframes twitch{from{transform:rotate(calc(var(--wind) * -2.5deg))}to{transform:rotate(calc(var(--wind) * 2deg))}}
/* in stops: the rolled flag tugs about 1.5 deg at the hoist and settles; it never opens */
@media (prefers-reduced-motion:no-preference){
  .wind:not(.calm) .hoist:hover .roll,.wind:not(.calm) .hoist:focus-visible .roll,.wind:not(.calm) a:hover .rl,.wind:not(.calm) a:focus-visible .rl,.wind:not(.calm) .legend span:hover .rl,.wind:not(.calm) .key__l span:hover .rl{animation:tug .4s var(--out)}
}
@keyframes tug{45%{transform:rotate(1.5deg)}}
/* the empty clip: a light snap hook on a short lanyard off the halyard, clear of the pole */
.hclip{left:-2px;top:calc(var(--fh) + var(--rl) - 1px);width:40px;height:64px;color:var(--line)}
.hclip svg{width:100%;height:100%;transform-origin:1px 0}.nclip{transform-origin:50% 4px}
.wind.idle .hclip svg,.wind.idle .nclip{animation:clip 3.2s ease-in-out infinite alternate}
@keyframes clip{from{transform:rotate(calc(-4deg - var(--wind) * 10deg))}to{transform:rotate(5deg)}}
/* halyard tags: paper tags on thin lines, no boxed cards */
.tag{position:relative;display:block;width:min(100%,300px);margin:0 0 12px;transform:rotate(var(--rot,-1.5deg));transform-origin:12px 50%;filter:drop-shadow(0 6px 7px rgba(22,22,22,.22));transition:transform .2s var(--out)}
.hoist:hover .tag,.hoist:focus-visible .tag{transform:translateY(-2px) rotate(var(--rot,-1.5deg))}
.hoist:focus-visible .tag{outline:3px solid var(--sky-ink);outline-offset:5px}
.tag__b{display:grid;gap:7px;justify-items:start;padding:11px 14px 13px 31px;background:var(--paper);clip-path:polygon(15px 0,100% 0,100% 100%,15px 100%,0 calc(100% - 15px),0 15px)}
.tag__b::before{content:"";position:absolute;left:8px;top:calc(50% - 6px);width:12px;height:12px;border-radius:50%;border:3px solid var(--cdark);background:var(--paper)}
.tag__mf{width:min(100%,150px);height:auto;overflow:visible}
.tag__wf{width:96px;height:auto}
.tag__n{font:800 1.25rem/1 var(--f-display);letter-spacing:.01em}
.tag__w{font:500 .9375rem/1.3 var(--f-text)}
.hoist:hover .tag__w{text-decoration:underline}
@media (min-width:1380px){.hero{--fh:clamp(150px,calc((100svh - var(--hh) - var(--qh) - 3.5cqw - 300px) / 1.34),240px);min-height:max(100vh,calc(var(--hh) + 3.5cqw + 300px + var(--fh) * 1.34 + var(--qh) + var(--sign-h,0px)))}.hoist--mf .tag{position:absolute;top:10px;left:calc(var(--fw) + 22px);width:min(214px,100% - var(--fw) - 22px);--rot:2deg}}
/* the quay: pots, shadows, the compact legend */
.quay{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:18px;height:var(--qh);padding:0 var(--m);background:var(--quay);border-top:10px solid var(--cdark);color:var(--ink)}
.qsh{position:absolute;left:calc(57% - 10px);top:0;width:300px;height:100%;pointer-events:none}
.qsh::before{content:"";position:absolute;left:4px;top:6px;width:210px;height:14px;background:rgba(22,22,22,.2);filter:blur(4px);transform:skewX(-58deg);transform-origin:0 0}
.qsh::after{content:"";position:absolute;left:96px;top:26px;width:250px;height:28px;border-radius:50%;background:rgba(22,22,22,.13);filter:blur(10px)}
html[data-sky=dusk] .qsh::before{width:300px;background:rgba(70,30,40,.22)}
html[data-sky=morning] .qsh::before{width:260px}
html[data-sky=night] .qsh::before,html[data-sky=night] .qsh::after{display:none}
html[data-sky=night] .qsh{background:radial-gradient(60px 26px at 14px 20px,rgba(226,162,48,.35),#0000)}
.pot{flex:none;align-self:flex-end;height:74%;aspect-ratio:3/4;margin-bottom:4px;background:no-repeat center bottom/contain}
.pot--b{height:56%}
.pa{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Ccircle cx='15' cy='13' r='9' fill='%231F7A4D'/%3E%3Ccircle cx='8' cy='18' r='6' fill='%231F7A4D'/%3E%3Ccircle cx='22' cy='18' r='6' fill='%231F7A4D'/%3E%3Ccircle cx='11' cy='10' r='2.6' fill='%23B5482A'/%3E%3Ccircle cx='19' cy='8' r='2.6' fill='%23B5482A'/%3E%3Ccircle cx='23' cy='15' r='2.6' fill='%23B5482A'/%3E%3Cpath d='M5 23h20v4h-1.5L21 40H9L6.5 27H5z' fill='%23B5482A'/%3E%3C/svg%3E")}
.pb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Ccircle cx='11' cy='19' r='5' fill='%231F7A4D'/%3E%3Ccircle cx='19' cy='17' r='6' fill='%231F7A4D'/%3E%3Ccircle cx='15' cy='11' r='5' fill='%231F7A4D'/%3E%3Crect x='7' y='22' width='16' height='18' fill='%23F7F4EC'/%3E%3Crect x='7' y='29' width='16' height='5' fill='%232C6E72'/%3E%3C/svg%3E")}
.key{position:relative;margin-left:auto;width:min(44%,500px);display:grid;gap:7px}
.key__l{display:flex;flex-wrap:wrap;gap:4px 16px;font:700 .8125rem/1.3 var(--f-mono)}
.key__l>span{display:inline-flex;align-items:center;gap:7px}
.key__l svg{width:auto;height:15px}
.key__d{font-size:.8125rem;line-height:1.4}
/* entrance: lines draw in, flags hoist and break out, the roll rises (≤ 1.2 s, text never moves) */
.motion .lines>g{animation:draw .5s var(--out) both}
.motion .lines>.front{animation-delay:.1s}
@keyframes draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.motion .mast__hf,.motion .hoist__flag,.motion .hoist__roll{animation:hoistup .6s var(--out) .1s both}
.motion .hclip{animation:fadein .3s ease .6s both}
.motion .hoist__flag>.fl{animation:breakout .4s var(--snap) .8s both}
.motion .ties{animation:ties .18s ease-in .7s both}
.motion .strings{animation:fadein .3s ease .9s both}
.ties{display:none}
.motion .ties{display:block;position:absolute;z-index:2;left:0;top:18%;width:calc(var(--fw) * .07 + 6px);height:64%;background:linear-gradient(var(--ink) 0 0) 0 22%/100% 7px no-repeat,linear-gradient(var(--ink) 0 0) 0 74%/100% 7px no-repeat;pointer-events:none}
@keyframes ties{to{transform:translateY(26px);opacity:0}}
@keyframes hoistup{from{transform:translateY(var(--hu,190px))}}
@keyframes breakout{from{transform:scaleX(.07)}70%{transform:scaleX(1.035)}to{transform:none}}
@keyframes fadein{from{opacity:0}}
@supports (animation-timeline:scroll()){
  .motion .plb,.motion .plf{animation:par linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  .motion .plb{--py:34px}.motion .plf{--py:84px}
}
@keyframes par{to{translate:0 var(--py)}}

/* ===== Products intro ===== */
.pintro{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:20px clamp(32px,5vw,96px);align-items:end;padding:clamp(72px,8vw,120px) var(--m);background:var(--ink);color:var(--paper);--focus:var(--paper);--halo:var(--ink)}
.pintro h2{font:900 var(--s-head)/.9 var(--f-display);letter-spacing:-.005em;text-wrap:balance}
.pintro__p{font:500 var(--s-lead)/1.38 var(--f-text);max-width:34ch}
.legend{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:14px;font:700 .875rem/1.3 var(--f-mono)}
.legend span{display:inline-flex;align-items:center;gap:10px}
.legend svg{height:22px;width:auto;color:var(--paper)}

/* ===== Product stages: the flag breaks out across the stage and carries its world ===== */
.prod{position:relative;background:var(--concrete)}
.stage{position:relative;isolation:isolate;min-height:100vh;padding:0 0 0 calc(var(--m) + 14px)}
.stage__mast{position:absolute;z-index:3;left:var(--m);top:0;bottom:0;width:14px;background:var(--ink)}
.stage__mast::before{content:"";position:absolute;left:-6px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--ochre);border:5px solid var(--ink)}
.stage__roll{position:absolute;z-index:2;left:calc(var(--m) + 16px);top:46px;width:34px;height:150px;display:none}
.motion .stage__roll{display:block}
.cloth{position:relative;min-height:100vh;padding:clamp(88px,8.5vw,136px) var(--m) clamp(88px,8.5vw,136px) clamp(24px,3vw,56px)}
.motion .stage:not(.is-open) .cloth{clip-path:inset(0 100% 0 0)}
.motion .stage.is-open .cloth{animation:unfurl .7s cubic-bezier(.2,.8,.2,1) both}
.motion .stage.is-open .stage__roll{animation:fadeout .3s ease .25s both}
@keyframes unfurl{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes fadeout{to{opacity:0;visibility:hidden}}
.motion:not(.js-ok) .stage:not(.is-open) .cloth{animation:fsc 0s 3s forwards}
@keyframes fsc{to{clip-path:inset(0)}}

/* MomentFlow: iris field, spark canton, arrivals */
.cloth--mf{background:var(--iris);color:var(--paper);--focus:var(--paper);--halo:var(--mfink)}
.motion .stage.is-open .mf [data-l]{animation:arrive .55s var(--snap) both;animation-delay:calc(var(--l) * 80ms)}
@keyframes arrive{from{transform:translateY(30px) rotate(-1.2deg)}to{transform:none}}
.mf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(44px,4.6vw,72px) clamp(20px,2.4vw,40px)}
.mf__canton{position:relative;grid-column:1/6;align-self:start;display:grid;gap:18px;justify-items:start;padding:clamp(26px,2.8vw,42px) clamp(26px,2.8vw,42px) clamp(56px,5vw,74px);background:var(--spark);color:var(--mfink);--focus:var(--mfink);--halo:var(--spark)}
.mf__canton::after{content:"";position:absolute;right:0;bottom:0;width:clamp(38px,4vw,58px);aspect-ratio:1;background:var(--mfink)}
.mf__logo{padding:12px 16px 10px;background:var(--mfbg)}
.mf__logo svg{width:clamp(190px,18vw,270px);height:auto;overflow:visible}
.mf__line{font:600 clamp(2rem,1.1rem + 2.2vw,3.4rem)/1.02 var(--f-mf);letter-spacing:-.03em;max-width:12ch}
.mf__p{max-width:38ch;font-size:1.0625rem;line-height:1.5}
.collage{grid-column:6/13;display:grid;grid-template-columns:minmax(0,1fr) clamp(160px,17vw,236px);gap:0 26px;align-items:end}
.browser{grid-column:1;grid-row:1;border-radius:10px;overflow:hidden;background:var(--mfbg);box-shadow:0 22px 50px rgba(22,19,31,.35)}
.browser__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#e8e6f1;color:var(--mfink);font:600 .75rem/1 var(--f-mf)}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:#c9c5d8}
.browser__bar span{margin-left:10px;padding:4px 12px;border-radius:999px;background:#fff}
.crop{grid-column:1;grid-row:2;position:relative;z-index:2;width:44%;margin:-24% 0 0 -5%;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(22,19,31,.4);transform:rotate(-2.5deg)}
.phone{grid-column:2;grid-row:1/span 2;display:grid;gap:12px;justify-items:center}
.phone__f{position:relative;width:100%;aspect-ratio:9/16;border:9px solid var(--mfink);border-radius:30px;overflow:hidden;background:var(--mfink);box-shadow:0 24px 50px rgba(22,19,31,.45)}
.phone__f video{width:100%;height:100%;object-fit:cover}
.vbtn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 12px;border:0;border-radius:999px;background:var(--spark);color:var(--mfink);font:600 .9375rem/1 var(--f-mf);cursor:pointer;--focus:var(--paper);--halo:var(--mfink)}
.vbtn i{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.vbtn.is-playing i{width:11px;height:13px;border:0;background:linear-gradient(90deg,currentColor 0 35%,#0000 35% 65%,currentColor 65%)}
.caps{grid-column:6/13;margin-top:-26px;display:grid;gap:6px;font-size:.875rem;line-height:1.45}
.caps b{font-weight:700}
.night{grid-column:1/-1}
.night__h,.mf__h{font:700 .875rem/1.3 var(--f-mono);letter-spacing:.04em}
.night__list{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(20px,3vw,48px);margin-top:26px;padding-top:40px}
.night__list::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;background:var(--paper)}
.night__list li{position:relative}
.night__list li::before{content:"";position:absolute;left:0;top:-40px;width:22px;height:22px;background:var(--spark)}
.night__when{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.35em;font:600 1.125rem/1.2 var(--f-mf)}
.night__when time{font-size:clamp(2.75rem,1.5rem + 3.2vw,4.75rem);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.night__what{margin-top:10px;font:600 clamp(1.375rem,1.05rem + .9vw,1.875rem)/1.15 var(--f-mf);letter-spacing:-.015em}
.night__src{margin-top:22px;font-size:.875rem}
.mf__facts{grid-column:1/7;display:grid;gap:12px;align-content:start}
.mf__facts ul{display:grid;gap:10px;margin-top:6px}
.mf__facts li{position:relative;padding-left:28px}
.mf__facts li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;background:var(--spark)}
.mf__pay{margin-top:8px;font-weight:700}
.mf__go{grid-column:8/13;align-self:end;justify-self:end}
.biglink{display:inline-block;font:900 clamp(2rem,.9rem + 2.4vw,3.5rem)/1 var(--f-display);letter-spacing:.005em;white-space:nowrap;text-decoration-thickness:.07em}

/* WedFlow: paper field, one strong ink axis, vertical wipes */
.cloth--wf{color:var(--wink);--focus:var(--wink);--halo:var(--wpaper);--ax:4vw;--aw:30vw;background:linear-gradient(90deg,transparent var(--ax),var(--wink) var(--ax) calc(var(--ax) + var(--aw)),transparent 0),var(--wpaper)}
.motion .stage.is-open .wf [data-l]{animation:axisin .65s var(--axis) both;animation-delay:calc(var(--l) * 80ms)}
@keyframes axisin{from{clip-path:inset(0 0 100% -.5em)}to{clip-path:inset(0 0 -2% -.5em)}}
.wf{display:grid;grid-template-columns:var(--ax) var(--aw) minmax(0,1fr);margin-left:calc(-1 * clamp(24px,3vw,56px))}
.wf__axis{grid-column:2;padding:0 clamp(20px,2.6vw,44px);color:var(--wpaper);--focus:var(--wpaper);--halo:var(--wink)}
.wf__id{position:sticky;top:96px;display:grid;gap:20px;justify-items:start;padding-bottom:40px}
.wf__logo img{width:clamp(200px,19vw,300px);height:auto}
.wf__line{font:500 clamp(1.5rem,1rem + 1.35vw,2.375rem)/1.16 var(--f-wf);max-width:17ch}
.wf__p,.wf__note{font-size:1rem;line-height:1.55;max-width:40ch}
.wf__link{font:700 1.0625rem/1.3 var(--f-text)}
.wf-badge{display:none}
.wf__main{grid-column:3;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(72px,7vw,112px);padding-left:clamp(28px,3.6vw,64px);min-width:0}
.worlds,.cal{min-width:0}
.wf__h{font:600 clamp(1.75rem,1.15rem + 1.5vw,2.625rem)/1.05 var(--f-wf);letter-spacing:-.01em}
.wf__hint{margin-top:8px;font:400 .875rem/1.4 var(--f-mono)}
.wtabs{display:none}
.has-tabs .wtabs{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,22px);margin-top:26px;padding-top:22px}
.has-tabs .wtabs::before{content:"";position:absolute;left:-14px;right:-14px;top:9px;height:3px;background:var(--wink)}
.wtab{position:relative;display:grid;justify-items:center;align-content:start;gap:10px;padding:0 0 4px;border:0;background:none;color:var(--wink);cursor:pointer;font:600 1rem/1.1 var(--f-wf);--focus:var(--wink);--halo:var(--wpaper)}
.wtab::before,.wtab::after{content:"";position:absolute;top:-14px;width:3px;height:16px;background:var(--wink)}
.wtab::before{left:18%}.wtab::after{right:18%}
.wtab__flag{display:block;width:100%;padding:4px;background:var(--wa);clip-path:polygon(0 0,100% 0,100% 100%,50% 90%,0 100%);transition:transform .38s var(--ease)}
.wtab__flag img{width:100%;aspect-ratio:1/1.62;object-fit:cover;object-position:50% 0;clip-path:polygon(0 0,100% 0,100% 100%,50% 90%,0 100%)}
.wtab[aria-selected="true"] .wtab__flag{transform:translateY(-12px);background:var(--wink)}
.wtab[aria-selected="true"] .wtab__n{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.22em}
.wpanels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:28px}
.wpanel{display:grid;gap:14px;align-content:start}
.wframe{position:relative;overflow:hidden;background:var(--wink)}
.wframe img{width:100%;aspect-ratio:540/880;object-fit:cover;object-position:50% 0}
.wframe::after{content:"";position:absolute;left:calc(50% - 2px);top:0;bottom:0;width:4px;background:var(--wink);opacity:0}
.wpanel__plate{padding:14px 16px 18px;background:var(--wb);color:var(--wi);border-top:8px solid var(--wa)}
.wpanel__n{font:600 1.375rem/1 var(--f-wf)}
.wpanel__t{margin-top:8px;font:400 1rem/1.4 var(--f-wf)}
.has-tabs .wpanels{display:block;margin-top:34px}
.has-tabs .wpanel{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(22px,3vw,48px);align-items:center}
.has-tabs .wframe img{aspect-ratio:540/960}
.has-tabs .wpanel__n{font-size:clamp(2.25rem,1.4rem + 2vw,3.5rem)}
.has-tabs .wpanel__t{font-size:clamp(1.25rem,1rem + .7vw,1.75rem);line-height:1.3}
.has-tabs .wpanel__plate{padding:24px 26px 28px}
.motion .wpanel.is-hoisted .wframe{animation:axis .35s var(--axis) both}
.motion .wpanel.is-hoisted .wframe::after{animation:axisline .35s ease both}
@keyframes axis{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0)}}
@keyframes axisline{from{opacity:1}to{opacity:0}}
.wpanel[hidden]{display:none!important}
.has-tabs .wpanels+.cap{margin-top:30px}
/* the calendar line: WedFlow's own countdown */
.cal__s{margin-top:26px}
.cal__line{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,28px)}
.cal__line::before{content:"";position:absolute;left:0;right:0;top:78px;height:3px;background:var(--wink)}
.cal__line li{position:relative;display:grid;gap:18px}
.cal__line li::before{content:"";position:absolute;left:0;top:72px;width:15px;height:15px;border-radius:50%;background:var(--wpaper);box-shadow:inset 0 0 0 3px var(--wink)}
.cal__d{display:grid;align-content:end;height:62px;font-size:.9375rem;line-height:1.3}
.cal__d b{font:600 clamp(2rem,1.3rem + 1.6vw,3rem)/1 var(--f-wf);letter-spacing:-.02em}
.ph{margin-top:14px;border:7px solid var(--wink);border-radius:24px;overflow:hidden;background:var(--wink)}
.ph img{width:100%;aspect-ratio:600/1060;object-fit:cover;object-position:50% 0}

/* ===== Next: an empty clip at the top of its own mast ===== */
.next{position:relative;background:var(--sky-bg);color:var(--sky-ink);--focus:var(--sky-ink);padding:clamp(96px,10vw,150px) var(--m) 0;overflow:hidden}
.next__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);max-width:1600px;margin-inline:auto}
.next__body{display:grid;gap:22px;justify-items:start;align-content:start;padding-bottom:clamp(56px,6vw,96px)}
.states{display:flex;flex-wrap:wrap;gap:6px;font:700 .8125rem/1.2 var(--f-mono);letter-spacing:.04em}
.states span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.states .is-on{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 2px var(--paper)}
.states svg{width:12px;height:12px}
.next h3{font:900 var(--s-head)/.9 var(--f-display);letter-spacing:-.005em}
.board{}
.sign-b{position:relative;width:min(100%,660px);padding:clamp(24px,2.6vw,38px) clamp(24px,2.6vw,40px) clamp(26px,2.8vw,42px);background:var(--paper);color:var(--ink);transform:rotate(-1.4deg)}
.sign-b::after{content:"";position:absolute;inset:9px;border:3px solid var(--terra);pointer-events:none}
.sign-b__a{font:900 clamp(1.9rem,1.1rem + 2.3vw,3.25rem)/1 var(--f-display);color:var(--terra)}
.sign-b__b{margin-top:12px;font:800 clamp(1.375rem,1.1rem + .95vw,2rem)/1.1 var(--f-display)}
.next__p{font:500 var(--s-lead)/1.38 var(--f-text);max-width:30ch}
.next__mast{position:relative;min-height:440px;--px:38%}
.next__mast::before{content:"";position:absolute;left:var(--px);top:12px;bottom:-2px;width:16px;background:var(--pole)}
.next__mast::after{content:"";position:absolute;left:calc(var(--px) + 20px);top:26px;bottom:40px;width:2px;background:var(--line)}
.next__truck{position:absolute;left:calc(var(--px) - 6px);top:0;width:28px;height:28px;border-radius:50%;background:var(--ochre);border:5px solid var(--pole)}
html[data-sky=night] .next__truck{box-shadow:0 0 30px 12px rgba(226,162,48,.42)}
.nclip{position:absolute;left:calc(var(--px) + 3px);top:22px;width:36px;height:72px;color:var(--sky-ink)}
.ntag{position:absolute;left:calc(var(--px) + 48px);top:92px;padding:7px 11px 7px 24px;background:var(--paper);color:var(--ink);font:700 .75rem/1 var(--f-mono);letter-spacing:.04em;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px),0 10px);transform:rotate(4deg)}
.ntag::before{content:"";position:absolute;left:7px;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--cdark)}
.next__fold{position:absolute;left:calc(var(--px) + 40px);bottom:0;width:clamp(70px,6.4vw,96px);height:34px;background:linear-gradient(var(--paper) 0 0) 0 0/100% 10px no-repeat,linear-gradient(var(--terra) 0 0) 6px 12px/calc(100% - 6px) 10px no-repeat,linear-gradient(var(--ochre) 0 0) 0 24px/100% 10px no-repeat}
.next__mast .pot{position:absolute;right:2%;bottom:0;height:92px;margin:0}
.next__quay{height:clamp(34px,4vw,52px);margin:0 calc(-1 * var(--m));background:var(--quay);border-top:10px solid var(--cdark)}

/* ===== How we work ===== */
.how{background:var(--ink);color:var(--paper);--focus:var(--paper);--halo:var(--ink);padding:clamp(96px,10vw,150px) var(--m)}
.how__in,.who__in,.closing__in,.foot__in{max-width:1500px;margin-inline:auto}
.how__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,5vw,96px);align-items:end}
.how h2{font:900 var(--s-head)/.9 var(--f-display)}
.how__lead{font:500 var(--s-lead)/1.38 var(--f-text);max-width:32ch}
.prin{margin-top:clamp(56px,6vw,96px);display:grid;gap:clamp(40px,4.4vw,72px)}
.prin li{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px clamp(32px,5vw,96px);align-items:start}
.prin h3{display:flex;align-items:flex-start;gap:clamp(16px,1.8vw,28px);font:900 clamp(2.25rem,1.2rem + 3.3vw,4.75rem)/.92 var(--f-display);letter-spacing:-.005em}
.prin h3 svg{flex:none;width:clamp(64px,6vw,96px);margin-top:.12em;outline:3px solid var(--paper);transform-origin:0 50%}
.proof{padding:16px 18px 18px;background:var(--paper);color:var(--ink);font:400 .9375rem/1.5 var(--f-mono)}
.proof b{display:block;margin-bottom:6px;font-weight:700;font-size:.8125rem;letter-spacing:.06em;color:var(--terra)}

/* ===== Who we are ===== */
.who{background:var(--concrete);padding:clamp(96px,10vw,150px) var(--m)}
.who__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,5vw,96px);align-items:center}
.who h2{font:900 var(--s-display,clamp(3.5rem,1.2rem + 8.6vw,9.5rem))/.86 var(--f-display);letter-spacing:-.01em}
.who__p{margin-top:clamp(20px,2.6vw,32px);font:500 var(--s-lead)/1.38 var(--f-text);max-width:34ch}
.note{position:relative;padding:28px 28px 32px;background:var(--paper);border:3px dashed var(--ink);transform:rotate(1.2deg)}
.note p{margin-top:14px;font:800 clamp(1.5rem,1.1rem + 1vw,2.125rem)/1.15 var(--f-display)}

/* ===== Closing: dressed overall, in a deliberate order ===== */
.closing{position:relative;background:var(--green);color:var(--paper);--focus:var(--paper);--halo:var(--ink);padding:clamp(96px,10vw,150px) var(--m) clamp(110px,11vw,160px);overflow:hidden}
.closing h2{font:900 clamp(3.5rem,1rem + 8.2vw,9.5rem)/.86 var(--f-display);letter-spacing:-.01em;text-wrap:balance;max-width:14em}
.closing__p{margin-top:clamp(20px,2.6vw,32px);font:500 var(--s-lead)/1.38 var(--f-text);max-width:40ch}
.dress{position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin-top:clamp(56px,6vw,90px);padding-top:3px}
.dress::before{content:"";position:absolute;left:calc(-1 * var(--m));right:calc(-1 * var(--m));top:0;height:3px;background:var(--ink);transform-origin:0 50%}
.dress .pn{width:24px;height:38px;background:var(--c);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0}
.dress .hfl{width:50px;transform-origin:50% 0}
.dress .hfl__g{display:none;width:100%;height:auto}
html[data-logo=a] .dress .hfl__g--a,html[data-logo=b] .dress .hfl__g--b,html[data-logo=c] .dress .hfl__g--c{display:block}
.tabli{flex:0 1 clamp(170px,16vw,236px)}
.tab{position:relative;display:block;margin-top:14px;color:var(--ink);text-decoration:none;--focus:var(--paper);--halo:var(--ink)}
.tab::before{content:"";position:absolute;left:50%;top:-17px;width:2px;height:17px;background:var(--ink)}
.tab__b{display:grid;gap:8px;justify-items:start;padding:16px 16px 34px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 16px),0 100%)}
.tab--p .tab__b{background:var(--ochre)}
.tab__b svg,.tab__b img{height:30px;width:auto}
.tab__t{font:800 1.4rem/1.08 var(--f-display);letter-spacing:.01em}
.tab__s{font:400 .75rem/1.35 var(--f-mono);overflow-wrap:anywhere}
.tab:hover .tab__t{text-decoration:underline}
.motion .closing.is-in .dress::before{animation:drawx .5s var(--out) both}
.motion .closing.is-in .pn,.motion .closing.is-in .hfl{animation:pop1 .3s var(--snap) both;animation-delay:calc(.5s + var(--i) * 60ms)}
@keyframes drawx{from{transform:scaleX(0)}}
@keyframes pop1{from{transform:scaleY(.3) rotate(-12deg)}60%{transform:rotate(5deg)}to{transform:none}}
@media (hover:hover){.tab:hover .tab__b{transform:translateY(-2px)}.tab:hover svg,.tab:hover img{animation:fly .6s var(--out)}}
.tab__b{transition:transform .2s var(--out)}.tab:focus-visible .tab__b{transform:translateY(-2px)}
.motion .tab:focus-visible svg,.motion .tab:focus-visible img{animation:fly .6s var(--out)}

/* ===== Footer ===== */
.foot{background:var(--cdark);color:var(--ink);padding:clamp(64px,7vw,104px) var(--m) 48px}
.foot__in{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr);gap:clamp(28px,4vw,72px);align-items:start}
.sign{position:relative;display:inline-flex;align-items:center;gap:.3em;padding:12px 16px 12px 14px;background:var(--ink);color:var(--paper);font:900 2.25rem/.86 var(--f-display);letter-spacing:.015em;white-space:nowrap}
.sign img{display:block;height:28px;width:auto;max-width:none}
.foot__addr{margin-top:18px;max-width:30ch;font-size:1rem}
.foot h2{margin-bottom:12px;font:800 1.5rem/1.1 var(--f-display)}
.foot ul{display:grid;gap:10px;font-weight:700}
.foot__legal p+p{margin-top:10px}
.dress li[hidden]{display:none}
.legal-co b{font-weight:700}
.signoff{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px;max-width:1500px;margin:clamp(48px,6vw,84px) auto 0}
.signoff__b{position:relative;padding:18px 28px 22px;background:var(--paper);transform:rotate(-1.6deg)}
.signoff__b::after{content:"";position:absolute;inset:8px;border:3px solid var(--terra);pointer-events:none}
.signoff__gr{font:900 clamp(2.5rem,1.6rem + 3vw,4.5rem)/.92 var(--f-display);color:var(--terra)}
.signoff__gloss{font-size:1.0625rem;max-width:40ch}
.foot .concept{max-width:1500px;margin:40px auto 0;font:400 .8125rem/1.4 var(--f-mono)}

/* ===== More sheet (dialog) ===== */
.fd{padding:0;border:0;background:transparent;color:var(--ink);max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto}
.fd::backdrop{background:rgba(22,22,22,.7)}
.fd__box{display:grid;gap:10px;width:min(380px,calc(100vw - 24px))}
.fd__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;background:var(--ink);color:var(--paper);--focus:var(--paper);--halo:var(--ink)}
.fd__title{font:900 1.75rem/1 var(--f-display)}
.fd__close{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);font:700 1rem/1 var(--f-text);cursor:pointer}
.fd__list{display:grid;gap:8px;padding:12px;background:var(--sky)}
.fd__list a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 14px;align-items:center;min-height:64px;padding:10px 12px;background:var(--paper);color:var(--ink);text-decoration:none}
.fd__list a>svg{grid-row:1/4;justify-self:center;width:48px;height:32px}
.fd__list a>svg.r{width:10px;height:40px}.fd__list a>svg.c{width:20px;height:40px}
.fd__name{font:800 1.375rem/1 var(--f-display)}
.fd__list .st{justify-self:start}
.fd__more{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:var(--paper)}
.fd__more a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink);text-decoration:none;font-weight:700}
.fd__calm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:12px;background:var(--ink);color:var(--paper);--focus:var(--paper);--halo:var(--ink)}
.motion .fd[open] .fd__box{animation:pop 240ms var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}

/* calm: every idle loop is paused where it is; flags stay at the top, fully open */
.calm .fl i,.calm .bf,.calm .bsway,.calm .roll,.calm .hclip svg,.calm .nclip,.calm .wind__sock,.calm .mast__truck::after{animation-play-state:paused!important}
/* off-screen sections pause their loops too */
.is-off .fl i,.is-off .bf,.is-off .bsway,.is-off .roll,.is-off .hclip svg,.is-off .nclip,.is-off .mast__truck::after{animation-play-state:paused!important}

/* ===== Identity preview: logo slots, copy slots and per-logo hooks ===== */
[hidden]{display:none!important}
.fd__brand{display:flex;align-items:center;gap:10px;min-width:0}
.fd__mark{height:24px;width:auto;max-width:none}
/* logo B: a large wordmark sign row across the top of the hero. Script sets --sign-h so the bunting, mast and words move down to make room */
.hero-sign{display:none}
html[data-logo=b] .hero-sign{display:block;position:absolute;z-index:2;top:var(--hh);left:var(--m);width:calc((100% - 2 * var(--m)) * .64);padding-top:clamp(14px,2vw,28px)}
.hero-sign img{display:block;width:100%;height:auto;max-width:none}
/* hero copy slots: the optional sub line and two CTAs (an empty string hides each) */
.hero__sub{margin-top:clamp(12px,1.6svh,18px);max-width:34em;font:500 var(--s-lead)/1.38 var(--f-text)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(14px,2svh,22px)}
.hcta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);font:700 1rem/1.2 var(--f-text);text-decoration:none}
.hcta--p{background:var(--ink);color:var(--paper);box-shadow:none}
.hcta:hover{text-decoration:underline}
html[data-sky=night] .hcta{box-shadow:none}
html[data-sky=night] .hcta--p{background:var(--ochre);color:var(--ink)}
.foot__tagline{margin-top:14px;max-width:28ch;font:700 1.0625rem/1.35 var(--f-text)}

/* ===== Responsive ===== */
/* the header never overflows: the board drops words in steps (Greek runs longer), then the chip goes; the footer keeps the full label */
@media (max-width:1599.98px){html[lang=el] .b-city{display:none}}
@media (max-width:1439.98px){.b-city{display:none}html[lang=el] .b-wl,html[lang=el] .b-bft{display:none}}
@media (min-width:1200px) and (max-width:1439.98px){html[lang=el] .snav a{padding:0 6px;font-size:.875rem}}
@media (max-width:1439.98px){.b-wl,.b-bft{display:none}.snav a{padding:0 6px;font-size:.875rem}}
@media (min-width:900px) and (max-width:1199.98px){html[lang=el] .board__r{display:none}}
@media (max-width:1199.98px){
  .collage,.caps{grid-column:1/-1}.mf__canton{grid-column:1/-1}.caps{margin-top:0}
  .mf__facts{grid-column:1/8}.mf__go{grid-column:8/13}
}
@media (max-width:899.98px){
  :root{--hh:52px}
  html{scroll-padding-top:64px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .rail{display:grid}
  .snav{display:none}
  .hdr{gap:8px}.logo{font-size:1rem;padding:6px 0;gap:7px}.logo img{height:16px;max-width:130px}
  .board{gap:6px}.board__r{padding:0 9px;gap:6px}.board .calm-btn{display:none}
  .lang a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:40px;min-height:32px;color:var(--paper);font:700 .875rem/1 var(--f-mono)}
.lang button,.lang a{min-width:34px}
  .hero{--fh:104px;min-height:0}
  .lines{width:200%;top:calc(var(--hh) + 4px + var(--sign-h,0px))}
  html[data-logo=b] .hero-sign{width:calc(100% - 2 * var(--m))}
  .hero__sub{font-size:1rem}
  .hcta{padding:0 14px;font-size:.9375rem}
  .hero__text{flex:none;width:auto;padding:calc(54px + 18cqw + var(--sign-h,0px)) var(--m) 22px}
  .display{font-size:min(19cqw,8.5rem)}
  .mast{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:4px 0 0 var(--m);padding-bottom:30px}
  .mast__pole{bottom:-30px}
  .hoists{position:relative;top:auto;left:auto;right:auto;margin:calc(36px + var(--hf)) var(--m) 0 calc(var(--pw) + 5px);padding:calc(var(--fh) + 24px) 0 0 calc(var(--rw) + 46px)}
  .quay{flex-wrap:wrap;height:auto;padding-block:20px 24px}.qsh{display:none}
  .pot{height:62px;margin:0}.pot--b{height:48px}.key{width:100%;margin:0}
  .pintro,.how__head,.who__in,.next__grid{grid-template-columns:minmax(0,1fr)}
  .stage{padding-left:10px}.stage__mast{left:0;width:10px}.stage__mast::before{left:-8px;width:22px;height:22px;border-width:4px}
  .stage__roll{left:12px}
  .cloth{padding:84px var(--m) 84px 16px}
  .mf__facts,.mf__go{grid-column:1/-1}.mf__go{justify-self:start}
  .collage{grid-template-columns:minmax(0,1fr) minmax(0,40%)}
  .night__list{grid-template-columns:minmax(0,1fr);padding:0 0 0 40px;gap:34px}
  .night__list::before{left:9px;right:auto;top:0;bottom:0;width:4px;height:auto}
  .night__list li::before{left:-40px;top:6px}
  .cloth--wf{--ax:14px;--aw:8px}
  .wf{grid-template-columns:minmax(0,1fr);margin-left:0}
  .wf__axis{grid-column:1;padding:26px 20px 28px;margin-left:-16px;background:var(--wink)}
  .wf__id{position:static;padding:0}
  .wf-badge{position:sticky;z-index:4;top:60px;display:inline-flex;justify-self:start;margin:0 0 -40px;box-shadow:0 0 0 2px var(--wink);visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s .2s}
  .wf-badge.is-on{visibility:visible;opacity:1;transition:opacity .2s}
  .wf__main{grid-column:1;margin-top:64px;padding-left:24px}
  .has-tabs .wtabs{gap:8px}.wtab{font-size:.8125rem}
  .has-tabs .wpanel{grid-template-columns:minmax(0,1fr)}
  .has-tabs .wframe{width:min(70%,280px)}
  .cal__s{overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1 * var(--m));padding-bottom:8px}
  .cal__line{grid-template-columns:repeat(4,min(62vw,240px));padding-right:var(--m)}
  .cal__line li{scroll-snap-align:start}
  .next__mast{min-height:280px;--px:30%}
  .prin li{grid-template-columns:minmax(0,1fr)}
  .dress{flex-direction:column;align-items:stretch;gap:14px;padding-top:24px}
  .dress .pn,.dress .hfl{display:none}
  .tabli{flex:none}
  .foot__in{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:900px) and (max-width:1199.98px){.dress .pn:nth-of-type(2n){display:none}
  .hdr{gap:8px}.logo{font-size:1.0625rem;padding:6px 0}.logo img{height:17px;max-width:130px}
  .snav ul{gap:0}.snav a{padding:0 5px;gap:6px;font-size:.8125rem}
  .calm-btn{padding:0 9px;font-size:.75rem}.board__r{padding:0 8px}.lang a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:40px;min-height:32px;color:var(--paper);font:700 .875rem/1 var(--f-mono)}
.lang button,.lang a{min-width:34px}}
@media (max-width:719.98px){.collage{grid-template-columns:minmax(0,1fr)}.phone{grid-column:1;grid-row:auto;width:min(66%,240px);justify-self:center}.crop{width:56%;margin:-18% 0 0 -3%}}
html[lang=el] .hero h1{font-size:clamp(1.625rem,.8rem + 1.7vw,2.5rem)}
html[lang=el] .display{font-size:clamp(3.2rem,min(8.2cqw,13.4svh),8.4rem)}
@media (max-width:899.98px){html[lang=el] .display{font-size:min(14cqw,7rem)}}
/* phones, portrait: the hoist sits under the bunting and above the words, the mast in the left gutter;
   the halyard tags follow the status plates as a list, without strings */
@media (max-width:520px){
  .hero{--pl:5px;--pw:6px;--px:calc(var(--pl) + var(--pw) + 1px);--fx:calc(var(--px) + 5px);--bt:calc(var(--hh) + 46px + var(--sign-h,0px));--H:clamp(172px,28svh,232px);
    --hf:calc(var(--H) * .14);--fh:calc(var(--H) * .4);--fw:calc(var(--fh) * 1.5);--rl:calc(var(--H) * .19);--rw:calc(var(--rl) * .26);
    --ch:calc(var(--H) - 14px - var(--hf) - var(--fh) - var(--rl));--hu:36px}
  .lines{top:calc(var(--hh) - 34px + var(--sign-h,0px))}
  .plf>g:nth-of-type(-n+2){display:none}.plf>g:nth-of-type(-n+2) .bf{animation:none}
  .hero__text{padding:calc(var(--bt) - var(--hh) + var(--H) + 12px) var(--m) 0 calc(var(--m) + 4px)}
  .kick{padding:5px 8px;font-size:min(.75rem,3.2cqw);letter-spacing:0}
  .display{margin-top:10px;font-size:min(19cqw,8.6svh)}
  .hero h1{margin-top:10px;font-size:clamp(1.375rem,3.6svh,1.75rem)}
  .hstat{gap:6px;margin-top:12px}
  .hstat p{padding:6px 10px 6px 9px;font-size:.875rem}
  .mast{position:static;margin:0;padding:0}
  .mast__pole{left:var(--pl);top:var(--bt);bottom:0;width:var(--pw)}
  .mast__truck{left:calc(var(--pl) + var(--pw) / 2 - 8px);top:calc(var(--bt) - 9px);width:16px;height:16px;border-width:3px}
  .mast::after{left:var(--px);top:calc(var(--bt) + 4px);bottom:0;width:1.5px}
  .mast__hf{left:var(--fx);top:calc(var(--bt) + 4px)}
  .hoist__flag,.hoist__roll{left:var(--fx)}
  .hoist__flag{top:calc(var(--bt) + 9px + var(--hf))}
  .hoist__roll{top:calc(var(--bt) + 12px + var(--hf) + var(--fh))}
  .hoist__flag::before,.hoist__flag::after,.hoist__roll::before,.hoist__roll::after{left:-6px;width:7px;height:4px}
  .hclip{left:calc(var(--px) - 1px);top:calc(var(--bt) + 12px + var(--hf) + var(--fh) + var(--rl));height:var(--ch);width:calc(var(--ch) * .78)}
  .strings{display:none}
  .hoists{position:static;margin:20px var(--m) 0 calc(var(--m) + 4px);padding:0}
  .tag{width:100%;max-width:420px;margin:0 0 8px;transform:none;filter:drop-shadow(0 3px 4px rgba(22,22,22,.2))}
  .hoist:hover .tag,.hoist:focus-visible .tag{transform:translateY(-2px)}
  .tag__b{gap:5px;padding:9px 12px 10px 30px}
  .tag__mf{width:124px}.tag__wf{width:80px}.tag__n{font-size:1.125rem}.tag__w{font-size:.875rem}
  .quay{margin-top:12px;z-index:4}
  html[lang=el] .kick{padding:6px 8px 5px;font:800 min(.8125rem,3.45cqw)/1.2 var(--f-display)}
  html[lang=el] .display{font-size:min(14cqw,7.6svh)}
  html[lang=el] .hero h1{font-size:clamp(1.3rem,3.4svh,1.625rem)}
}

/* ===== Step 2: the final logos in the B2.1 hero ===== */
/* lockups differ inside (A carries its tall mark, B is letters only, C a lowercase line), so heights are set per logo for even letter size */
html[data-logo=a] .logo img{height:22px}html[data-logo=b] .logo img{height:15px}html[data-logo=c] .logo img{height:19px}
html[data-logo=a] .sign img{height:31px}html[data-logo=b] .sign img{height:21px}html[data-logo=c] .sign img{height:27px}
@media (min-width:900px) and (max-width:1199.98px){html[data-logo=a] .logo img{height:19px}html[data-logo=b] .logo img{height:13px}html[data-logo=c] .logo img{height:16px}}
@media (max-width:899.98px){html[data-logo=a] .logo img{height:18px}html[data-logo=b] .logo img{height:12.5px}html[data-logo=c] .logo img{height:15.5px}}
img.sw{object-fit:contain}
/* logo C at the truck: a rigid yard, not a fluttering flag */
.mast__mk{display:none}
html[data-logo=c] .mast__hf{z-index:1;left:calc(var(--pw) - 2px);height:auto}
html[data-logo=c] .mast__hf .fl{display:none}
html[data-logo=c] .mast__mk{display:block;width:100%;height:auto;max-width:none}
@media (max-width:520px){html[data-logo=c] .mast__hf{left:calc(var(--pl) + var(--pw) - 1px);top:calc(var(--bt) + 8px)}
  /* logo B: the sign sits in the bunting band above the truck (70 % width, 3 px in), so the hoist and the words stay where A and C have them */
  html[data-logo=b] .hero-sign{width:calc((100% - 2 * var(--m)) * .7);padding-top:3px}
  html[data-logo=b] .hero{--bt:calc(var(--hh) + 46px)}
  html[data-logo=b] .lines{top:calc(var(--hh) - 34px)}}
/* logo C on the closing line: the pieces in the garland's rhythm, paper-led on the green (pointed paper, flat ochre, round sky) */
.dress .pn--p{background:var(--paper)}.dress .pn--f{background:var(--ochre)}.dress .pn--r{background:var(--sky)}
html[data-logo=c] .dress .pn{width:20px;height:32px;clip-path:none}
html[data-logo=c] .dress .pn--p{background:var(--paper);clip-path:polygon(0 0,100% 0,100% 66.7%,50% 100%,0 66.7%)}
html[data-logo=c] .dress .pn--f{background:var(--ochre)}
html[data-logo=c] .dress .pn--r{background:var(--sky);border-radius:0 0 10px 10px}
/* reduced motion: complete and still, unless the visitor turned the wind on */
@media (prefers-reduced-motion:reduce){html:not(.wind) *,html:not(.wind) *::before,html:not(.wind) *::after{animation:none!important;transition:none!important}html{scroll-behavior:auto!important}}

/* ===== Mission 007 · hero fit on short viewports =====
   Goal: the hero CTAs sit inside the first viewport (desktop) and above the fixed bottom rail (phones), with safe areas.
   Height-gated only: taller screens keep B2.1 exactly. Where height is short, the status plates follow the CTAs
   (they are not focusable; the mast tags still carry each product's status), logo B's sign row is capped by height,
   and the display and sentence sizes take a little from the viewport height. */
@media (min-width:900px) and (max-height:940px){
  .hero__text{display:flex;flex-direction:column;align-items:flex-start}
  .hero__ctas{order:1}.hstat{order:2}
  html[data-logo=b] .hero-sign{padding-top:min(2vw,1.6svh)}
  html[data-logo=b] .hero-sign img{max-height:11.5svh;object-fit:contain;object-position:left center}
  .display{margin-top:min(18px,1.6svh);font-size:clamp(3.5rem,min(10.2cqw,13svh),10rem)}
  html[lang=el] .display{font-size:clamp(3rem,min(8.2cqw,11.6svh),8.4rem)}
  .hero h1{margin-top:clamp(12px,1.8svh,24px);font-size:clamp(1.625rem,min(.9rem + 1.85vw,4.6svh),2.75rem)}
}
@media (max-width:520px) and (max-height:760px){
  .hero{--H:clamp(118px,21svh,172px)}
  .hero__text{display:flex;flex-direction:column;align-items:flex-start}
  .hero__ctas{order:1}.hstat{order:2}
  .display{font-size:min(19cqw,7.8svh)}
  html[lang=el] .display{font-size:min(14cqw,7svh)}
  .hero h1{font-size:clamp(1.25rem,3.3svh,1.75rem)}
  html[lang=el] .hero h1{font-size:clamp(1.2rem,3.1svh,1.625rem)}
}
/* very narrow phones: both hero CTAs stay on one row (touch height unchanged at 44 px) */
@media (max-width:360px){.hero__ctas{gap:8px}.hcta{padding:0 10px;font-size:.875rem}}
/* very narrow phones: the rail labels (MomentFlow, «Επικοινωνία») get a touch smaller instead of touching */
@media (max-width:360px){.rail a,.rail button{font-size:.625rem;letter-spacing:-.01em}}

/* production: the five WedFlow Worlds as a list (used while the sample photos are not cleared) */
.wlist{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:14px}
.wlist .wpanel__plate{margin:0}