/* ACUVENTO — scherp gedacht, snel gebouwd. */
@font-face{font-family:"Geist";src:url(../fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --ink:#0B0B0C;--ink-2:#141416;--ink-3:#1E1E21;--ink-line:rgba(241,239,234,.12);
  --paper:#F1EFEA;--paper-2:#E7E4DD;--paper-line:rgba(11,11,12,.12);
  --blue:#2236FF;--blue-2:#5566FF;--mist:#C9D3DD;--grey:#5A5854;--grey-d:#8F8D88;
  --gust:var(--blue);
  --sans:"Geist",system-ui,-apple-system,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --pad:clamp(20px,3.2vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{list-style:none;padding:0}
em{font-style:italic}
::selection{background:var(--blue);color:var(--paper)}
:root{--focus:var(--blue)}
.dark,.foot,.menu,.console,.calc-out,.price-card,.pick,html[data-ui="dark"] .site-head{--focus:var(--blue-2)}
.bluebg,.score,html[data-ui="blue"] .site-head{--focus:var(--paper)}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
main[tabindex="-1"]:focus,section[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:10px;transition:top .2s}
.skip:focus{top:16px}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:450}
.serif{font-family:var(--serif);font-weight:400}
.blue{color:var(--blue)}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}

/* grain */
body::after{content:"";position:fixed;inset:-50%;z-index:120;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* split-text masks */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .05em .14em;margin:-.1em -.05em -.14em}
.w>span{display:inline-block;will-change:transform}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.7em;height:56px;padding:0 26px;border-radius:999px;font:500 16px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;isolation:isolate;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;transform:translateY(102%);transition:transform .55s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn svg{width:18px;height:18px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px) rotate(-45deg)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink::before{background:var(--blue)}
.btn-blue{background:var(--blue);color:var(--paper)}
.btn-blue::before{background:var(--ink)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper::before{background:var(--ink)}
.btn-paper:hover{color:var(--paper)}
.btn-line{border:1px solid currentColor;background:transparent}
.btn-line::before{background:var(--ink)}
.btn-line:hover{color:var(--paper)}
/* outline buttons on dark: paper outline, fills paper with ink text on hover (text never vanishes) */
.dark .btn-line{color:var(--paper)}
.dark .btn-line::before{background:var(--paper)}
.dark .btn-line:hover{color:var(--ink)}
.btn-sm{height:44px;padding:0 18px;font-size:14.5px}
.link-arrow{display:inline-flex;align-items:center;gap:.55em;font:500 16px var(--sans);padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.link-arrow:hover{background-size:100% 1px}
.link-arrow svg{width:16px;height:16px}

/* ---------- header ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:90;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:18px var(--pad);color:var(--ink);transition:color .4s var(--ease),transform .5s var(--ease)}
.site-head.hide{transform:translateY(-110%)}
.site-head.hide:has(:focus-visible){transform:none}
html[data-ui="dark"] .site-head,html[data-ui="blue"] .site-head{color:var(--paper)}
/* the logo's gust bar follows the header theme; scoped to the header so a theme switch only restyles the header
   (on the root, the inherited custom property made every element recalculate on each switch) */
html[data-ui="blue"] .site-head{--gust:var(--ink)}
html[data-ui="dark"] .site-head{--gust:var(--blue-2)}
.brand{display:inline-flex;align-items:center;justify-self:start}
.brand svg{height:30px;width:auto}
.lg-a{fill:currentColor}.lg-g{fill:var(--gust);transition:fill .4s}
.nav{display:flex;gap:4px;padding:5px;border-radius:999px;background:color-mix(in srgb,currentColor 7%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav a{padding:9px 14px;border-radius:999px;transition:background .3s}
.nav a:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.head-right{justify-self:end;display:flex;align-items:center;gap:18px}
.head-time{opacity:.9}
.site-head .btn-sm{background:currentColor}
.site-head .btn-sm>span,.site-head .btn-sm svg{color:var(--paper);position:relative}
html[data-ui="dark"] .site-head .btn-sm span,html[data-ui="dark"] .site-head .btn-sm svg,html[data-ui="blue"] .site-head .btn-sm span,html[data-ui="blue"] .site-head .btn-sm svg{color:var(--ink)}
.site-head .btn-sm::before{background:var(--blue)}
html[data-ui="blue"] .site-head .btn-sm::before{background:var(--ink)}
.site-head .btn-sm:hover span,.site-head .btn-sm:hover svg{color:var(--paper)}
.menu-btn{display:none;height:44px;padding:0 18px;border-radius:999px;border:1px solid currentColor}
/* language switch (TR) */
.lang{display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:44px;padding:0 13px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 38%,transparent);font:450 12.5px var(--mono);letter-spacing:.06em;transition:background .3s,border-color .3s}
.lang:hover{background:color-mix(in srgb,currentColor 10%,transparent);border-color:currentColor}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:95;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:flex-end;padding:100px var(--pad) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);visibility:hidden}
.menu.open{clip-path:inset(0);visibility:visible}
.menu a.big{font:500 clamp(40px,11vw,72px)/1.05 var(--sans);letter-spacing:-.04em;display:block;padding:4px 0}
.menu a.big small{margin-left:4px;font:450 clamp(13px,3.6vw,17px)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--grey-d)}
.menu .menu-foot{display:flex;justify-content:space-between;margin-top:36px;color:var(--grey-d)}
.menu-close{position:absolute;right:var(--pad);top:18px;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--ink-line)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:120px var(--pad) 28px}
#wind{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 60% at 22% 78%,color-mix(in srgb,var(--paper) 88%,transparent) 0%,transparent 70%)}
.hero-inner{position:relative;z-index:2}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(18px,2.4vw,34px)}
.hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(34,54,255,.5);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,54,255,.45)}70%{box-shadow:0 0 0 12px rgba(34,54,255,0)}100%{box-shadow:0 0 0 0 rgba(34,54,255,0)}}
.hero-title{font:500 clamp(58px,10.6vw,204px)/.86 var(--sans);letter-spacing:-.065em;margin-left:-.04em}
.hero-title .line{display:block}
.hero-title em{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;font-size:1.08em;line-height:.8}
.hero-title .line+.line{padding-left:clamp(0px,8vw,150px)}
.hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px;margin-top:clamp(26px,3.4vw,52px)}
.hero-sub{max-width:34ch;font-size:clamp(17px,1.35vw,21px);line-height:1.45;color:#3a3936}
.hero-sub b{font-weight:500;color:var(--ink)}
.hero-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero-meta{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(28px,4vw,56px);padding-top:16px;border-top:1px solid var(--paper-line);color:var(--grey)}
.hero-meta b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.scroll-cue{display:inline-flex;align-items:center;gap:8px}
.scroll-cue i{display:block;width:1px;height:18px;background:currentColor;transform-origin:top;animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero-skip{position:absolute;right:var(--pad);top:96px;z-index:3;opacity:.7;transition:opacity .3s}
.hero-skip:hover{opacity:1}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;padding:clamp(28px,4vw,56px) 0;border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);white-space:nowrap}
.marquee-track{display:inline-flex;will-change:transform}
.marquee-track span{font:500 clamp(48px,8.4vw,150px)/1 var(--sans);letter-spacing:-.055em;padding-right:.35em;display:inline-flex;align-items:center;gap:.35em}
.marquee-track span em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.marquee-track span svg{width:.42em;height:.42em;color:var(--blue)}

/* ---------- section scaffolding ---------- */
.sec{position:relative;padding:clamp(100px,13vw,220px) var(--pad)}
.sec-label{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;margin-bottom:clamp(40px,6vw,90px);border-bottom:1px solid var(--paper-line);color:var(--grey)}
.dark .sec-label{border-color:var(--ink-line);color:var(--grey-d)}
.h2{font:500 clamp(44px,6.4vw,118px)/.92 var(--sans);letter-spacing:-.06em}
.h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.dark{background:var(--ink);color:var(--paper)}
.bluebg{background:var(--blue);color:var(--paper)}

/* manifesto */
.manifesto p{font:400 clamp(30px,4.3vw,76px)/1.08 var(--sans);letter-spacing:-.045em;max-width:22ch}
.manifesto p em{font-family:var(--serif);letter-spacing:-.015em}
.manifesto-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(60px,8vw,130px)}
.manifesto-foot div{border-top:1px solid var(--paper-line);padding-top:18px}
.manifesto-foot b{display:block;font:500 22px/1.2 var(--sans);letter-spacing:-.02em;margin:10px 0 8px}
.manifesto-foot p{font-size:15.5px;color:#4a4945;max-width:30ch}

/* ---------- services (horizontal) ---------- */
.services{padding:0;overflow:hidden}
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:clamp(100px,11vw,180px) var(--pad) clamp(36px,4vw,60px)}
.svc-head p{max-width:32ch;color:var(--grey-d);font-size:17px}
.svc-track{display:flex;gap:clamp(16px,1.6vw,28px);padding:0 var(--pad) clamp(70px,8vw,120px);width:max-content}
.svc-card{position:relative;width:min(78vw,1080px);height:min(70vh,660px);min-height:520px;border-radius:28px;background:var(--ink-2);border:1px solid var(--ink-line);display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden}
.svc-copy{padding:clamp(28px,3vw,48px);display:flex;flex-direction:column}
.svc-num{font:400 15px var(--mono);color:var(--grey-d)}
.svc-card h3{font:500 clamp(40px,4.4vw,78px)/.95 var(--sans);letter-spacing:-.055em;margin-top:auto}
.svc-card h3 em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;color:var(--blue-2)}
.svc-card p{color:#B9B7B1;font-size:clamp(16px,1.2vw,18.5px);max-width:34ch;margin-top:18px}
.svc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.svc-tags span{font:450 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:999px;border:1px solid var(--ink-line);color:#D8D6D0}
.svc-visual{position:relative;margin:14px;border-radius:20px;overflow:hidden;background:var(--ink-3);border:1px solid var(--ink-line)}
.svc-progress{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(30px,3.6vw,52px);height:1px;background:var(--ink-line)}
.svc-progress span{display:block;height:100%;background:var(--paper);transform-origin:left;transform:scaleX(0)}

/* service visuals */
.vis-agents svg{width:100%;height:100%}
.orbit-node{fill:var(--ink-2);stroke:rgba(241,239,234,.22)}
.orbit-label{fill:#D8D6D0;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.orbit-line{stroke:rgba(241,239,234,.16);stroke-dasharray:3 5}
.pulse{fill:var(--blue-2)}
.vis-app{padding:18px;display:grid;grid-template-columns:62px 1fr;gap:14px}
.vis-app .side{border-radius:14px;background:var(--ink-2);display:flex;flex-direction:column;gap:12px;padding:14px 12px}
.vis-app .side i{display:block;height:8px;border-radius:4px;background:rgba(241,239,234,.14)}
.vis-app .side i:first-child{width:26px;height:26px;border-radius:8px;background:var(--blue)}
.vis-app .main{display:grid;grid-template-rows:auto 1fr auto;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpis div{border-radius:14px;background:var(--ink-2);padding:14px;font:450 11px var(--mono);letter-spacing:.06em;color:var(--grey-d);text-transform:uppercase}
.kpis b{display:block;font:500 24px var(--sans);letter-spacing:-.03em;color:var(--paper);margin-top:6px;text-transform:none}
.chart{border-radius:14px;background:var(--ink-2);position:relative;overflow:hidden}
.chart svg{position:absolute;inset:0;width:100%;height:100%}
.rows{display:grid;gap:8px}
.rows i{display:block;height:10px;border-radius:5px;background:rgba(241,239,234,.1)}
.vis-web video,.vis-web img{width:100%;height:100%;object-fit:cover}
.vis-web .chrome{position:absolute;left:14px;right:14px;top:14px;height:34px;border-radius:12px;background:rgba(11,11,12,.55);backdrop-filter:blur(10px);display:flex;align-items:center;gap:6px;padding:0 12px;z-index:2}
.vis-web .chrome i{width:8px;height:8px;border-radius:50%;background:rgba(241,239,234,.35)}
.vis-web .chrome span{margin-left:10px;font:450 11px var(--mono);color:#E8E6E0;letter-spacing:.04em}
.vis-flow svg{width:100%;height:100%}
.flow-box{fill:var(--ink-2);stroke:rgba(241,239,234,.2)}
.flow-txt{fill:#E8E6E0;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.flow-path{fill:none;stroke:rgba(241,239,234,.2);stroke-width:1.5}
.flow-dot{fill:var(--blue-2)}
.vis-data{padding:22px;display:flex;flex-direction:column;gap:16px}
.bars{flex:1;display:flex;align-items:flex-end;gap:10px}
.bars i{flex:1;height:100%;border-radius:8px 8px 3px 3px;background:rgba(241,239,234,.13);transform-origin:bottom;transform:scaleY(.6)}
.bars i.hi{background:var(--blue)}
.data-cap{display:flex;justify-content:space-between;font:450 11px var(--mono);color:var(--grey-d);letter-spacing:.06em;text-transform:uppercase}

/* ---------- demo ---------- */
.demo{padding-top:clamp(40px,5vw,80px)}
.demo-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,90px);align-items:center}
.demo-copy p{color:#B9B7B1;font-size:18px;max-width:34ch;margin-top:24px}
.demo-copy .note{margin-top:30px;color:var(--grey-d)}
.console{border-radius:24px;background:var(--ink-2);border:1px solid var(--ink-line);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.45)}
.console-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--ink-line);color:var(--grey-d)}
.console-bar .live{display:inline-flex;align-items:center;gap:8px;color:#9EE6B8}
.console-bar .live i{width:7px;height:7px;border-radius:50%;background:#3DDC84;box-shadow:0 0 10px #3DDC84}
.console-body{padding:26px 24px 30px;min-height:430px;display:flex;flex-direction:column;gap:14px;font-size:16px}
.c-user{align-self:flex-end;max-width:82%;background:var(--paper);color:var(--ink);padding:14px 18px;border-radius:18px 18px 4px 18px;min-height:52px}
.c-user .caret{display:inline-block;width:2px;height:1.1em;background:var(--blue);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.c-steps{display:grid;gap:10px;margin-top:6px}
.c-step{display:flex;align-items:center;gap:12px;font:450 14px var(--mono);letter-spacing:.02em;color:#D8D6D0;opacity:0;transform:translateY(8px)}
.c-step .ic{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(241,239,234,.25);display:grid;place-items:center;flex:none;position:relative}
.c-step .ic::after{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--blue-2);border-top-color:transparent;animation:spin .7s linear infinite}
.c-step.done .ic{border-color:var(--blue-2);background:var(--blue)}
.c-step.done .ic::after{animation:none;border:0;width:9px;height:5px;border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);border-radius:0;transform:rotate(-45deg) translate(1px,-1px)}
@keyframes spin{to{transform:rotate(360deg)}}
.c-answer{margin-top:8px;background:linear-gradient(135deg,rgba(34,54,255,.28),rgba(34,54,255,.08));border:1px solid rgba(85,102,255,.45);padding:16px 18px;border-radius:18px 18px 18px 4px;opacity:0;transform:translateY(10px);max-width:88%}
.c-answer b{font-weight:500}
.console-foot{display:flex;justify-content:flex-end;padding:0 24px 22px}
.replay{color:var(--grey-d);display:inline-flex;gap:8px;align-items:center}
.replay:hover{color:var(--paper)}

/* ---------- process (stacking) ---------- */
.steps{display:grid;gap:28px;margin-top:clamp(50px,6vw,90px)}
.step{position:sticky;top:calc(13vh + var(--i) * 26px);min-height:min(62vh,560px);border-radius:28px;background:var(--paper-2);border:1px solid var(--paper-line);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,70px);padding:clamp(28px,3.6vw,60px);transform-origin:center top;overflow:hidden}
.step:nth-child(2){background:#E2DFD7}.step:nth-child(3){background:#DAD6CD}
.step:nth-child(4){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.step-num{font:400 clamp(90px,13vw,240px)/.8 var(--serif);letter-spacing:-.04em;font-style:italic}
.step:nth-child(4) .step-num{color:var(--blue-2)}
.step h3{font:500 clamp(36px,4vw,68px)/.95 var(--sans);letter-spacing:-.05em}
.step p{font-size:clamp(17px,1.3vw,20px);max-width:36ch;margin-top:22px;color:#46453F}
.step:nth-child(4) p{color:#B9B7B1}
.step-meta{align-self:end;text-align:right;color:var(--grey);max-width:18ch}
.step:nth-child(4) .step-meta{color:var(--grey-d)}

/* ---------- name story ---------- */
.naam{overflow:hidden}
.naam .sec-label{border-color:rgba(241,239,234,.25);color:rgba(241,239,234,.9)}
.nm-stage{position:relative;display:grid;gap:clamp(10px,2vw,30px)}
.nm-word{display:flex;align-items:baseline;gap:clamp(16px,3vw,50px);flex-wrap:wrap}
.nm-word b{font:500 clamp(90px,19vw,360px)/.8 var(--sans);letter-spacing:-.075em}
.nm-word.vento{justify-content:flex-end;text-align:right}
.nm-word.vento b{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em}
.nm-def{max-width:26ch;font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:rgba(241,239,234,.85)}
.nm-def .mono{display:block;margin-bottom:8px;color:var(--paper)}
.nm-sum{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,70px);align-items:center;margin-top:clamp(60px,8vw,130px);padding-top:34px;border-top:1px solid rgba(241,239,234,.25)}
.nm-sum svg{width:clamp(120px,14vw,220px);height:auto}
.nm-sum p{font:500 clamp(30px,3.6vw,62px)/1.02 var(--sans);letter-spacing:-.05em;max-width:18ch}
.nm-sum p em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,110px);align-items:start}
.portrait{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--paper-2)}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter 1s var(--ease),transform 1.4s var(--ease);transform:scale(1.04)}
.portrait:hover img{filter:grayscale(0) contrast(1);transform:scale(1)}
/* founder card: typographic until a real photo is available */
.portrait.founder{background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:space-between}
.founder-art{position:absolute;inset:0}
.founder-art svg{position:absolute;inset:0;width:100%;height:100%;transform:translateY(-16%)}
.founder-art path{fill:none;stroke:rgba(241,239,234,.28);stroke-width:1.4}
.founder-art path.b{stroke:var(--blue-2);stroke-width:2.4}
.founder-mono{position:absolute;left:8%;top:9%;font:700 clamp(120px,15vw,230px)/.8 var(--sans);letter-spacing:-.07em;color:var(--paper)}
.founder-mono i{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--blue-2);letter-spacing:-.03em}
.portrait.founder blockquote{position:absolute;left:8%;right:8%;bottom:96px;font:400 clamp(26px,2.6vw,36px)/1.08 var(--serif);font-style:italic;letter-spacing:-.02em;color:var(--paper)}

.portrait figcaption{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(241,239,234,.86);backdrop-filter:blur(10px);color:var(--ink)}
.portrait figcaption b{font:500 17px var(--sans);letter-spacing:-.02em}
.about-copy .h2{max-width:13ch}
.about-copy .lead{font-size:clamp(19px,1.6vw,25px);line-height:1.42;letter-spacing:-.015em;max-width:36ch;margin-top:30px;color:#2a2926}
.principles{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,48px);margin-top:clamp(40px,5vw,70px)}
.principles li{border-top:1px solid var(--paper-line);padding:20px 0 24px}
.principles b{display:flex;align-items:baseline;gap:12px;font:500 21px var(--sans);letter-spacing:-.02em}
.principles b .mono{color:var(--blue);font-size:12px}
.principles p{margin-top:8px;color:#55534E;font-size:15.5px;max-width:32ch}

/* ---------- contact ---------- */
.contact .h2{font-size:clamp(56px,9vw,170px);max-width:12ch}
.contact .ct-sub{max-width:52ch;margin-top:clamp(20px,2.4vw,32px);font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:#cfcdc7}
.about-copy .lead+.lead{margin-top:18px}
.principles a,.offer-band a.ob-link{text-decoration:underline;text-underline-offset:3px}
.offer-band .ob-meta{margin-top:26px;margin-bottom:0}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,110px);margin-top:clamp(50px,6vw,100px)}
.contact-links{display:grid;gap:0;align-content:start}
.contact-links a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-top:1px solid var(--ink-line);font:500 clamp(20px,1.8vw,28px) var(--sans);letter-spacing:-.025em;transition:padding .5s var(--ease),color .3s}
.contact-links a:last-child{border-bottom:1px solid var(--ink-line)}
.contact-links a:hover{padding-left:14px;color:var(--blue-2)}
.contact-links a small{display:block;font:450 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grey-d);margin-bottom:6px}
.contact-links a svg{width:22px;height:22px;flex:none}
form.cf{display:grid;gap:22px}
.cf .row{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.cf label{display:grid;gap:8px}
.cf label>span{font:450 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grey-d)}
.cf input,.cf textarea{font:400 19px var(--sans);color:var(--paper);background:transparent;border:0;border-bottom:1px solid var(--ink-line);padding:10px 0 12px;border-radius:0;transition:border-color .3s}
.cf input:focus,.cf textarea:focus{outline:0;border-bottom-color:var(--blue-2);box-shadow:0 1px 0 var(--blue-2)}
.cf input::placeholder,.cf textarea::placeholder{color:#8F8D88}
.cf textarea{min-height:110px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:inline-flex;position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chips label span{font:400 15px var(--sans);letter-spacing:0;text-transform:none;color:var(--paper);padding:10px 16px;border-radius:999px;border:1px solid var(--ink-line);transition:background .3s,border-color .3s,color .3s}
.chips label:hover span{border-color:var(--paper)}
.chips input:checked+span{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.chips input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.cf-note{font-size:13.5px;color:var(--grey-d)}
.cf-note a{text-decoration:underline;text-underline-offset:3px}
.cf .field{display:grid;gap:8px}
.cf-req{margin:0;font-size:13.5px;color:var(--grey-d)}
.cf-set{border:0;margin:0;padding:0;min-width:0}
.cf-set legend{padding:0;font:450 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grey-d)}
.cf-set .chips{margin-top:10px}
.cf [aria-invalid="true"]{border-bottom-color:#FF5A5A;box-shadow:0 1px 0 #FF5A5A}
.cf [aria-invalid="true"]:focus{border-bottom-color:var(--blue-2);box-shadow:0 1px 0 var(--blue-2)}
.cf-err{margin:0;font:400 14px/1.4 var(--sans);color:#FF5A5A}

/* ---------- footer ---------- */
.foot{position:relative;background:var(--ink);color:var(--paper);padding:clamp(60px,7vw,110px) var(--pad) 26px;overflow:hidden}
.foot-wind{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.foot>*:not(.foot-wind){position:relative;z-index:1}
.foot-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
.foot-cols h2{font:450 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--grey-d);margin-bottom:14px}
.foot-cols li{padding:3px 0}
.foot-cols a{transition:color .3s}
.foot-cols a:hover{color:var(--blue-2)}
.foot-claim{font:500 clamp(24px,2.2vw,34px)/1.1 var(--sans);letter-spacing:-.035em;max-width:16ch}
.foot-claim em{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.foot-word{display:flex;justify-content:space-between;margin-top:clamp(50px,7vw,110px);font:500 clamp(70px,21.5vw,420px)/.78 var(--sans);letter-spacing:-.07em;user-select:none}
.foot-word span{display:inline-block;will-change:transform}
.foot-word span.g{color:var(--blue)}
.foot-word.pre span{opacity:0}                                 /* foot.js: the word blows in when it comes into view */
.foot-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:30px;padding-top:18px;border-top:1px solid var(--ink-line);color:var(--grey-d)}
.foot-legal a:hover{color:var(--paper)}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:150;pointer-events:none;width:0;height:0;--c-bg:var(--ink);--c-fg:var(--paper)}
html[data-ui="dark"] .cursor,html[data-ui="blue"] .cursor{--c-bg:var(--paper);--c-fg:var(--ink)}
.cursor i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--c-bg);transition:transform .45s var(--ease),background .3s}
.cursor.is-hover i{transform:scale(3.2);opacity:.9}
.cursor.has-label i{transform:scale(8.4)}
.cursor b{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-fg);opacity:0;white-space:nowrap;transition:opacity .3s}
.cursor.has-label b{opacity:1}
.cursor.is-hover i{mix-blend-mode:normal}

/* ---------- motion toggle ("Animaties pauzeren") ---------- */
[data-motion-wrap][hidden],[data-motion-toggle][hidden]{display:none!important}
.motion-toggle{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* paused: nothing moves, state changes are instant (a transition in flight jumps to its end) */
html.motion-off *,html.motion-off *::before,html.motion-off *::after{animation:none!important;transition:none!important}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
  .hero-eyebrow .dot,.scroll-cue i,.c-user .caret{animation:none}
  .portrait img{transition:none}
  *{scroll-behavior:auto!important}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .site-head{grid-template-columns:1fr auto}
  .nav,.head-time{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .site-head .btn-sm{display:none}
  .svc-card{grid-template-columns:1fr;height:auto;min-height:0}
  .svc-visual{height:340px}
  .demo-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .about-grid .portrait{max-width:520px}
  .step{grid-template-columns:auto 1fr}
  .step-meta{display:none}
}
@media (max-width:899px){
  .services{overflow:visible}
  .svc-head{flex-direction:column;align-items:flex-start;padding-top:110px}
  .svc-track{flex-direction:column;width:auto}
  .svc-card{width:100%}
  .svc-progress{display:none}
}
@media (max-width:720px){
  body{font-size:16px}
  .hero{padding-top:100px}
  .hero-title .line+.line{padding-left:0}
  .hero-bottom{grid-template-columns:1fr}
  .hero-meta .meta-time{display:none}
  .hero-meta{flex-wrap:wrap;row-gap:10px}
  .hero-meta>span{white-space:nowrap}
  .hero-meta:has([data-motion-wrap]:not([hidden])) .scroll-cue{display:none}
  .hero-skip{top:80px}
  .manifesto-foot{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;min-height:0;top:calc(10vh + var(--i) * 18px)}
  .step-num{font-size:84px}
  .nm-word.vento{justify-content:flex-start;text-align:left}
  .nm-sum{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr}
  .cf .row{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-cols>div:first-child{grid-column:1/-1}
  .console-body{min-height:400px;padding:22px 18px}
  .c-step{font-size:12.5px}
}

/* fallbacks: no pinned horizontal ride without motion / without JS libs */
@media (prefers-reduced-motion:reduce){.svc-track{flex-direction:column;width:auto}.svc-card{width:100%}.svc-progress{display:none}}
.no-motion .svc-track{flex-direction:column;width:auto}
.no-motion .svc-card{width:100%}
.no-motion .svc-progress,.no-motion .hero-skip{display:none}

/* ---------- gust hover (letters blow out, a fresh word blows in) ---------- */
[data-gust]{position:relative;display:inline-flex;overflow:hidden;vertical-align:top}
[data-gust] .sr{text-transform:none}
.gust-a,.gust-b{display:inline-flex;white-space:pre}
.gust-b{position:absolute;left:0;top:0}
.gust-a i,.gust-b i{font-style:normal;display:inline-block;transition:transform .62s cubic-bezier(.65,0,.25,1),opacity .5s cubic-bezier(.65,0,.25,1);transition-delay:calc(var(--i) * 24ms)}
.gust-b i{transform:translateX(-1.3em) skewX(-14deg);opacity:0}
a:hover [data-gust] .gust-a i,a:focus-visible [data-gust] .gust-a i{transform:translateX(1.3em) skewX(-14deg);opacity:0}
a:hover [data-gust] .gust-b i,a:focus-visible [data-gust] .gust-b i{transform:none;opacity:1}

/* ---------- labs teaser (home) ---------- */
.lt-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:40px;align-items:end;margin-bottom:clamp(36px,5vw,70px)}
.lt-head p{max-width:40ch;color:#3a3936;font-size:clamp(17px,1.3vw,20px)}
.lt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lt{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:300px;padding:28px;border-radius:26px;background:var(--paper-2);transition:transform .6s var(--ease);overflow:hidden}
.lt-img{display:block;margin:-28px -28px 0;aspect-ratio:16/10;overflow:hidden}
.lt-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.lt:hover .lt-img img{transform:scale(1.045)}
.lt:hover{transform:translateY(-6px)}
.lt.ink{background:var(--ink);color:var(--paper)}
.lt.blue{background:var(--blue);color:var(--paper)}
.lt .mono{color:var(--grey)}
.lt.ink .mono,.lt.blue .mono{color:rgba(241,239,234,.9)}
.lt b{font:500 clamp(28px,2.6vw,42px)/.98 var(--sans);letter-spacing:-.05em;max-width:12ch}
.lt b em{font-family:var(--serif);font-weight:400}
.lt i{position:absolute;right:22px;top:18px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);font:400 26px/1 var(--sans);font-style:normal;transition:transform .45s var(--ease)}
.lt:hover i{transform:translateX(4px) rotate(-45deg)}
@media (max-width:899px){.lt-head,.lt-grid{grid-template-columns:1fr}.lt{min-height:220px}}

/* ---------- offer band (home) ---------- */
.offer-band{padding:clamp(80px,10vw,150px) var(--pad)}
.offer-band .ob-in{max-width:1100px}
.offer-band .mono{color:rgba(241,239,234,.9);margin-bottom:22px}
.offer-band .h2 em{font-family:var(--serif);font-weight:400}
.offer-band .ob-sub{max-width:46ch;margin-top:24px;font-size:clamp(17px,1.4vw,21px);color:rgba(241,239,234,.9)}
.offer-band .ob-btn{margin-top:34px}
.offer-band .btn-ink::before{background:var(--paper)}
.offer-band .btn-ink:hover{color:var(--ink)}
.nw{white-space:nowrap}

/* ---------- page transition: the gust wipe (all pages; vt.js names the header + threads and sets the type) ----------
   A gust front of 7 streamline bands (the gust bar of the logo) sweeps in from the left. Its blue tips erase the
   old page, which is pushed downwind (from 120 ms, once the front has passed the near edge, so no strip opens).
   10vw behind the front the new page arrives through the same bands, with thin blue streaks between them, and
   glides the last 2.5vw into place: a scaleX anchored at the far edge, so the far edge never moves and no strip
   of backdrop can open up there (no seam). Back/forward is mirrored ("gust-back").
   Opt-in only without reduced motion; with "Animaties pauzeren" vt.js skips the transition. The masks are inline:
   a separate file could still be loading on the first transition and keep the new page invisible.
   Geometry (mask 320% of the page wide, so 1 unit = 1vw): solid body 140 units, band tips up to 232, the erasing
   front 10 units ahead. Start 110% (every tip still left of the page), end 0. The new page's solid body passes
   the far edge at ~84% of the sweep (~340 ms), before the ease-out tail, so no gaps linger. */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
html:active-view-transition-type(gust,gust-back)::view-transition{background:var(--blue)}
html:active-view-transition-type(gust,gust-back)::view-transition-old(root),
html:active-view-transition-type(gust,gust-back)::view-transition-new(root){mix-blend-mode:normal}
html:active-view-transition-type(gust)::view-transition-old(root){mask:url("data:image/svg+xml,%3Csvg%20xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20320%20100'%20preserveAspectRatio='none'%3E%3Crect%20width='150'%20height='100'%2F%3E%3Crect%20y='0.0'%20width='214'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='14.2'%20width='188'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='28.4'%20width='242'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='42.6'%20width='202'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='56.8'%20width='230'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='71.0'%20width='180'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='85.2'%20width='220'%20height='14.8'%20rx='6.4'%2F%3E%3C%2Fsvg%3E") no-repeat 110.0% 0/320% 100%,linear-gradient(#000,#000);mask-composite:exclude;animation:gust-erase .62s cubic-bezier(.33,1,.68,1) .06s both,gust-push .42s cubic-bezier(.55,0,.75,.2) .12s both}
html:active-view-transition-type(gust-back)::view-transition-old(root){mask:url("data:image/svg+xml,%3Csvg%20xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20320%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='matrix(-1%200%200%201%20320%200)'%3E%3Crect%20width='150'%20height='100'%2F%3E%3Crect%20y='0.0'%20width='214'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='14.2'%20width='188'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='28.4'%20width='242'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='42.6'%20width='202'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='56.8'%20width='230'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='71.0'%20width='180'%20height='14.2'%20rx='6.4'%2F%3E%3Crect%20y='85.2'%20width='220'%20height='14.8'%20rx='6.4'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat -10.0% 0/320% 100%,linear-gradient(#000,#000);mask-composite:exclude;animation:gust-erase-back .62s cubic-bezier(.33,1,.68,1) .06s both,gust-push-back .42s cubic-bezier(.55,0,.75,.2) .12s both}
html:active-view-transition-type(gust)::view-transition-new(root){mask:url("data:image/svg+xml,%3Csvg%20xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20320%20100'%20preserveAspectRatio='none'%3E%3Crect%20width='140'%20height='100'%2F%3E%3Crect%20y='0.7'%20width='204'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='14.9'%20width='178'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='29.1'%20width='232'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='43.3'%20width='192'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='57.5'%20width='220'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='71.7'%20width='170'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='85.9'%20width='210'%20height='12.9'%20rx='6.4'%2F%3E%3C%2Fsvg%3E") no-repeat 110.0% 0/320% 100%;transform-origin:100% 50%;animation:gust-in .62s cubic-bezier(.33,1,.68,1) .06s both,gust-glide .62s cubic-bezier(.16,1,.3,1) .06s both}
html:active-view-transition-type(gust-back)::view-transition-new(root){mask:url("data:image/svg+xml,%3Csvg%20xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20320%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='matrix(-1%200%200%201%20320%200)'%3E%3Crect%20width='140'%20height='100'%2F%3E%3Crect%20y='0.7'%20width='204'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='14.9'%20width='178'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='29.1'%20width='232'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='43.3'%20width='192'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='57.5'%20width='220'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='71.7'%20width='170'%20height='12.9'%20rx='6.4'%2F%3E%3Crect%20y='85.9'%20width='210'%20height='12.9'%20rx='6.4'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat -10.0% 0/320% 100%;transform-origin:0 50%;animation:gust-in-back .62s cubic-bezier(.33,1,.68,1) .06s both,gust-glide .62s cubic-bezier(.16,1,.3,1) .06s both}
@keyframes gust-erase{from{mask-position:110.0% 0,0 0}to{mask-position:0 0,0 0}}
@keyframes gust-erase-back{from{mask-position:-10.0% 0,0 0}to{mask-position:100% 0,0 0}}
@keyframes gust-push{to{transform:translateX(6vw) skewX(-2.5deg)}}
@keyframes gust-push-back{to{transform:translateX(-6vw) skewX(2.5deg)}}
@keyframes gust-in{from{mask-position:110.0% 0}to{mask-position:0 0}}
@keyframes gust-in-back{from{mask-position:-10.0% 0}to{mask-position:100% 0}}
@keyframes gust-glide{from{transform:scaleX(1.025)}}
/* the header holds still while its colour cross-fades */
html:active-view-transition-type(gust,gust-back)::view-transition-group(site-head){animation-duration:.68s}
html:active-view-transition-type(gust,gust-back)::view-transition-old(site-head),
html:active-view-transition-type(gust,gust-back)::view-transition-new(site-head){animation-duration:.3s}
/* threads (home <-> website.html): "Zie het / Bezit het / Meet het" grow into the headline, the price glides
   into place. They set off with the gust front (60 ms), 50 ms apart. The upscaled old raster leaves fast, so
   mostly the crisp new text is seen. */
html:active-view-transition-type(gust,gust-back)::view-transition-group(promise-1),
html:active-view-transition-type(gust,gust-back)::view-transition-group(promise-2),
html:active-view-transition-type(gust,gust-back)::view-transition-group(promise-3),
html:active-view-transition-type(gust,gust-back)::view-transition-group(price){animation-duration:.62s;animation-delay:.06s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both}
html:active-view-transition-type(gust,gust-back)::view-transition-group(promise-2){animation-delay:.11s}
html:active-view-transition-type(gust,gust-back)::view-transition-group(promise-3){animation-delay:.16s}
html:active-view-transition-type(gust,gust-back)::view-transition-group(price){animation-duration:.56s;animation-delay:.06s}
html:active-view-transition-type(gust,gust-back)::view-transition-old(promise-1),
html:active-view-transition-type(gust,gust-back)::view-transition-old(promise-2),
html:active-view-transition-type(gust,gust-back)::view-transition-old(promise-3),
html:active-view-transition-type(gust,gust-back)::view-transition-old(price){animation-duration:.16s}
html:active-view-transition-type(gust,gust-back)::view-transition-new(promise-1),
html:active-view-transition-type(gust,gust-back)::view-transition-new(promise-2),
html:active-view-transition-type(gust,gust-back)::view-transition-new(promise-3),
html:active-view-transition-type(gust,gust-back)::view-transition-new(price){animation-duration:.24s}
/* into home the promises shrink (headline -> mono label): the crisp old text holds, and the small label (upscaled
   at the start of the flight) only takes over once it is near its own size; the two always add up to full opacity */
html:has(.manifesto-foot):active-view-transition-type(gust,gust-back)::view-transition-old(promise-1),
html:has(.manifesto-foot):active-view-transition-type(gust,gust-back)::view-transition-old(promise-2),
html:has(.manifesto-foot):active-view-transition-type(gust,gust-back)::view-transition-old(promise-3){animation:thread-hold .5s linear both}
html:has(.manifesto-foot):active-view-transition-type(gust,gust-back)::view-transition-new(promise-1),
html:has(.manifesto-foot):active-view-transition-type(gust,gust-back)::view-transition-new(promise-2),
html:has(.manifesto-foot):active-view-transition-type(gust,gust-back)::view-transition-new(promise-3){animation:thread-late .5s linear both}
@keyframes thread-hold{0%,60%{opacity:1}to{opacity:0}}
@keyframes thread-late{0%,60%{opacity:0}to{opacity:1}}
/* a thread whose twin is not on screen on the other page leaves with the old page (no hole in it) */
html:active-view-transition-type(gust)::view-transition-old(promise-1):only-child,
html:active-view-transition-type(gust)::view-transition-old(promise-2):only-child,
html:active-view-transition-type(gust)::view-transition-old(promise-3):only-child,
html:active-view-transition-type(gust)::view-transition-old(price):only-child{animation:gust-push .42s cubic-bezier(.55,0,.75,.2) both,gust-fade .24s cubic-bezier(.4,0,.6,1) .06s both}
html:active-view-transition-type(gust-back)::view-transition-old(promise-1):only-child,
html:active-view-transition-type(gust-back)::view-transition-old(promise-2):only-child,
html:active-view-transition-type(gust-back)::view-transition-old(promise-3):only-child,
html:active-view-transition-type(gust-back)::view-transition-old(price):only-child{animation:gust-push-back .42s cubic-bezier(.55,0,.75,.2) both,gust-fade .24s cubic-bezier(.4,0,.6,1) .06s both}
@keyframes gust-fade{to{opacity:0}}
/* safety net: html.motion-off * does not reach the transition pseudo-elements */
html.motion-off::view-transition-group(*),html.motion-off::view-transition-image-pair(*),html.motion-off::view-transition-old(*),html.motion-off::view-transition-new(*){animation:none!important}
/* home: the intro plays once per session (vt.js marks a repeat view before the first paint) */
.intro-seen .hero-skip{display:none}