/* Cross-document view transition: the language toggle navigates between the
   prerendered /  and /en/ pages, so let the browser cross-fade instead of blink.
   Ignored by browsers that do not support it. */
@view-transition{navigation:auto}
html,body{margin:0;height:100%;overflow:hidden;background:#efede7;font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes radar{0%{transform:scale(.35);opacity:.85}70%{opacity:0}100%{transform:scale(1);opacity:0}}
@keyframes drawNl{from{stroke-dashoffset:4200}to{stroke-dashoffset:0}}
@keyframes drawWater{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}

/* brand wordmark — stacked webstudio/alex with a blinking cursor block.
   Cursor proportions follow the design's small (email-signature) lockup:
   width ≈ .41em, height ≈ .76em of the wordmark size. */
.logo{display:flex;flex-direction:column;gap:2px}
.logo .logo-top{display:flex;align-items:baseline;gap:4px;min-height:1.05em;font:800 23px/1.05 Archivo,sans-serif;letter-spacing:-0.03em;color:#191813}
.logo .logo-line{display:flex;align-items:baseline;gap:4px;min-height:1.05em;font:800 23px/1.05 Archivo,sans-serif;letter-spacing:-0.03em;color:#c4562e}
.logo .logo-cursor{width:9px;height:17px;background:#c4562e;animation:blink 1.1s steps(1) infinite}
/* intro typing: the cursor holds steady while "typing" and only blinks at rest */
.logo.typing .logo-cursor{animation:none}
.logo .logo-cursor-ink{background:#191813}

/* ---------- desktop scene ---------- */
.scene{position:fixed;inset:0;background:#efede7;overflow:hidden;perspective:1200px;perspective-origin:50% 45%}
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 10%,rgba(255,255,255,.75) 0%,rgba(239,237,231,0) 60%)}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transition:transform .8s cubic-bezier(.2,.8,.2,1)}

/* map of the Netherlands */
.nl-map{position:absolute;right:5.5vw;top:50%;height:min(84vh,660px);aspect-ratio:390.6/462;transform:translateY(-50%) translateZ(14px);transform-style:preserve-3d;pointer-events:none}
.nl-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.place{position:absolute;width:0;height:0;pointer-events:auto;transform-style:preserve-3d;z-index:2}
.place:hover{z-index:3}
.place .ping{position:absolute;left:-27px;top:-27px;width:54px;height:54px;border:1px solid #c4562e;border-radius:50%;animation:radar 3s ease-out infinite;pointer-events:none}
.place .hit{position:absolute;left:-27px;top:-27px;width:54px;height:54px;border-radius:50%;cursor:default}
.place .dot{position:absolute;left:-4.5px;top:-4.5px;width:9px;height:9px;background:#c4562e;border-radius:50%;box-shadow:0 0 0 4px rgba(196,86,46,.16);pointer-events:none}
.place .tip{position:absolute;right:16px;top:-13px;display:flex;flex-direction:column;gap:3px;width:max-content;max-width:min(230px,22vw);padding:9px 13px;background:#191813;color:#faf9f6;text-align:right;box-shadow:0 18px 34px -16px rgba(25,24,19,.5);opacity:0;transform:translateX(8px) translateZ(0);transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.place:hover .tip{opacity:1;transform:translateX(0) translateZ(190px)}
.place .tip .city{font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#e8926d}
.place .tip .note{font:600 13.5px/1.3 Archivo,sans-serif;letter-spacing:-0.01em}

.masthead{position:absolute;left:7vw;top:4.5vh;transform:translateZ(30px);display:flex}

.polaroid{position:absolute;left:7vw;top:20vh;width:min(215px,15vw);transform:translateZ(50px) rotate(-3deg);background:#fff;padding:10px 10px 30px;box-shadow:0 26px 50px -18px rgba(25,24,19,.3)}
.polaroid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.polaroid .caption{position:absolute;left:12px;bottom:9px;font:400 9.5px/1 'IBM Plex Mono',monospace;color:#a29d90}

.contacts{position:absolute;left:7vw;top:calc(20vh + min(215px,15vw) * 1.333 + 58px);width:min(215px,15vw);transform:translateZ(38px);display:flex;flex-direction:column;gap:9px}
.contacts .email{font:500 clamp(11px,0.85vw,14px)/1 'IBM Plex Mono',monospace;color:#191813;border-bottom:1px solid #c4562e;padding-bottom:4px;align-self:flex-start;transition:color .2s}
.contacts .email:hover{color:#c4562e}
.contacts .linkedin{font:500 clamp(11px,0.85vw,14px)/1 'IBM Plex Mono',monospace;color:#6b675e;align-self:flex-start;transition:color .2s}
.contacts .linkedin:hover{color:#191813}
.contacts .coords{margin-top:6px;font:400 clamp(9.5px,0.72vw,12px)/1.8 'IBM Plex Mono',monospace;color:#a29d90}
.contacts .cta{font:400 clamp(11px,0.9vw,14px)/1.55 Archivo,sans-serif;color:#5d594f;text-wrap:pretty;margin-bottom:2px}

.main-col{position:absolute;left:calc(7vw + min(215px,15vw) + 5.5vw);top:13.5vh;bottom:max(44px,5.5vh);width:min(55vw,780px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(16px,2.4vh,36px);transform-style:preserve-3d}
.hero{flex:0 1 auto;min-height:0;transform:translateZ(90px);pointer-events:none}
.kicker{font:500 clamp(10px,0.78vw,13px)/1 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#c4562e}
.hero h1{margin:clamp(12px,1.4vh,20px) 0 0;font:800 clamp(30px,3.6vw,58px)/0.97 Archivo,sans-serif;letter-spacing:-0.035em;color:#191813;text-wrap:balance}
.hero .story{margin:clamp(12px,1.8vh,24px) 0 0;font:400 clamp(13px,1.12vw,18px)/1.62 Archivo,sans-serif;color:#5d594f;max-width:46ch;text-wrap:pretty}
.hero .offer{margin:clamp(10px,1.4vh,16px) 0 0;font:400 clamp(12px,1vw,16px)/1.62 Archivo,sans-serif;color:#8a857a;max-width:46ch;text-wrap:pretty}

.work{flex:0 0 auto;transform:translateZ(40px);display:flex;flex-direction:column;gap:clamp(12px,1.6vh,18px)}
.work-head{display:flex;align-items:center;gap:14px;font:500 clamp(15px,1.3vw,20px)/1 'IBM Plex Mono',monospace;letter-spacing:.15em;color:#6b675e}
.work-head::after{content:'';flex:1 1 auto;height:1px;background:#ddd9cd}
.cards{display:flex;flex-wrap:wrap;gap:clamp(12px,1.2vw,18px);align-items:stretch}
.card{flex:1 1 0;min-width:0;max-width:280px;background:#fff;padding:clamp(8px,0.7vw,11px);box-shadow:0 26px 44px -20px rgba(25,24,19,.32);display:flex;flex-direction:column;align-items:stretch;gap:clamp(8px,1.2vh,12px);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.card:hover{transform:translateY(-10px);box-shadow:0 40px 58px -22px rgba(25,24,19,.42)}
.card:nth-child(even){box-shadow:0 30px 48px -20px rgba(25,24,19,.32)}
.card:nth-child(even):hover{box-shadow:0 44px 62px -22px rgba(25,24,19,.42)}
.card .shot{position:relative;flex:none;width:100%;aspect-ratio:16/9;max-height:clamp(80px,11vh,128px);background:#f2f0ea;overflow:hidden}
.card .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card .meta{flex:none;min-width:0;display:flex;flex-direction:column;gap:4px;padding:2px clamp(3px,0.4vw,6px) clamp(4px,0.6vh,8px) 2px}
.card .num{font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#c4562e}
.card .title{font:700 clamp(15px,1.35vw,20px)/1.1 Archivo,sans-serif;letter-spacing:-0.02em;color:#191813}
.card .desc{font:400 clamp(10px,0.8vw,12px)/1.45 'IBM Plex Mono',monospace;color:#8a857a;text-wrap:pretty}

/* resume overlay */
.cv-dim{position:absolute;inset:-50vh -50vw;transform:translateZ(150px);background:rgba(25,24,19,.34);opacity:0;pointer-events:none;transition:opacity .5s ease}
.cv-dim.open{opacity:1;pointer-events:auto}
.cv-panel{position:absolute;left:50%;top:50%;width:min(880px,84vw);height:min(680px,80vh);margin:0;transform:translate(-50%,-50%) translateZ(230px) scale(.9);opacity:0;pointer-events:none;transition:transform .6s cubic-bezier(.2,.85,.2,1),opacity .45s ease;background:#faf9f6;box-shadow:0 60px 90px -40px rgba(25,24,19,.55);display:flex;flex-direction:column}
.cv-panel.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) translateZ(230px) scale(1)}
.cv-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:clamp(22px,2.6vw,36px) clamp(22px,2.6vw,36px) clamp(14px,1.6vw,20px);border-bottom:1px solid #e2ded2}
.cv-id{display:flex;flex-direction:column;gap:7px}
.cv-name{font:800 clamp(22px,2vw,32px)/1 Archivo,sans-serif;letter-spacing:-0.025em;color:#191813}
.cv-role{font:500 clamp(10px,0.78vw,12px)/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#c4562e}
.cv-mail{font:400 clamp(10px,0.76vw,12px)/1.7 'IBM Plex Mono',monospace;color:#8a857a}
.cv-close{flex:0 0 auto;font:500 clamp(10px,0.78vw,12px)/1 'IBM Plex Mono',monospace;letter-spacing:.12em;background:none;border:1px solid #ddd9cd;border-radius:99px;padding:9px 15px;cursor:pointer;color:#6b675e;transition:color .2s,border-color .2s}
.cv-close:hover{color:#191813;border-color:#191813}
.cv-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:clamp(18px,2vw,28px) clamp(22px,2.6vw,36px) clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px)}
.cv-sec{display:grid;grid-template-columns:minmax(96px,15%) 1fr;gap:clamp(14px,1.8vw,28px);align-items:start}
.cv-label{font:500 clamp(9.5px,0.74vw,11.5px)/1.5 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#a29d90;padding-top:3px}
.cv-items{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.cv-item{display:flex;flex-direction:column;gap:4px}
.cv-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.cv-h{font:600 clamp(14px,1.15vw,18px)/1.25 Archivo,sans-serif;color:#191813}
.cv-when{font:400 clamp(9.5px,0.74vw,11.5px)/1 'IBM Plex Mono',monospace;color:#c4562e}
.cv-note{font:400 clamp(11px,0.86vw,13.5px)/1.6 Archivo,sans-serif;color:#5d594f;max-width:62ch;text-wrap:pretty}

/* pricing */
.panel-fit{height:auto;max-height:min(680px,80vh)}
.tier-label{font:500 clamp(9.5px,0.74vw,11px)/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#c4562e}
.tier-price{font:800 clamp(24px,2vw,32px)/1 Archivo,sans-serif;letter-spacing:-0.02em;color:#191813}
.tier-unit{font:400 clamp(10px,0.76vw,12px)/1.4 'IBM Plex Mono',monospace;color:#a29d90}
.tier-note{font:400 clamp(11.5px,0.88vw,13.5px)/1.6 Archivo,sans-serif;color:#5d594f;text-wrap:pretty}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px)}
.tier-col{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,14px)}
.tier-col-head{font:500 clamp(9.5px,0.74vw,11px)/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#a29d90}
.tier{flex:1 1 auto;border:1px solid #eceadf;background:#fff;padding:clamp(16px,1.6vw,24px);display:flex;flex-direction:column;gap:9px;box-shadow:0 22px 40px -26px rgba(25,24,19,.28)}
.tier-hero{border-top:3px solid #c4562e}
.tier-hero .tier-price{font-size:clamp(30px,2.7vw,44px)}
.price-hero{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 32px}
.price-hero .tier-note{flex:1 1 260px}
.ticks{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ticks li{position:relative;padding-left:21px;font:400 clamp(11.5px,0.88vw,13.5px)/1.5 Archivo,sans-serif;color:#5d594f;text-wrap:pretty}
.ticks li::before{content:'';position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:#c4562e;box-shadow:0 0 0 3px rgba(196,86,46,.12)}

/* how it works — the process as a route, echoing the map pins */
.steps{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);padding:2px 0}
.step{position:relative;padding-left:38px}
.step::before{content:'';position:absolute;left:5px;top:5px;width:9px;height:9px;border-radius:50%;background:#c4562e;box-shadow:0 0 0 4px rgba(196,86,46,.14)}
.step:not(:last-child)::after{content:'';position:absolute;left:9px;top:21px;bottom:calc(-1*clamp(18px,2vw,26px) - 1px);border-left:1px dashed #d0cabb}
.step-head{display:flex;align-items:baseline;gap:12px}
.step-num{font:500 clamp(10px,0.8vw,12px)/1.5 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#c4562e}
.step .cv-note{margin-top:3px}
.step-ping{position:absolute;left:9.5px;top:9.5px;width:46px;height:46px;margin:-23px 0 0 -23px;border:1px solid #c4562e;border-radius:50%;animation:radar 3s ease-out infinite;pointer-events:none}
.cv-panel .step{opacity:0}
.cv-panel.open .step{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.cv-panel.open .step:nth-child(2){animation-delay:.07s}
.cv-panel.open .step:nth-child(3){animation-delay:.14s}
.cv-panel.open .step:nth-child(4){animation-delay:.21s}
.cv-panel.open .step:nth-child(5){animation-delay:.28s}
.cv-panel.open .step:nth-child(6){animation-delay:.35s}
.steps-cta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;border-top:1px solid #e2ded2;padding-top:clamp(14px,1.4vw,18px);font:400 clamp(11.5px,0.9vw,14px)/1.6 Archivo,sans-serif;color:#5d594f}
.steps-cta a{font:500 clamp(11px,0.85vw,13px)/1 'IBM Plex Mono',monospace;color:#191813;border-bottom:1px solid #c4562e;padding-bottom:2px;transition:color .2s}
.steps-cta a:hover{color:#c4562e}

/* top-right actions */
.actions{position:absolute;right:7vw;top:4vh;display:flex;gap:9px;align-items:center}
.price-btn{font:500 clamp(10px,0.78vw,13px)/1 'IBM Plex Mono',monospace;letter-spacing:.12em;background:#c4562e;border:1px solid #c4562e;border-radius:99px;padding:9px 16px;cursor:pointer;color:#faf9f6;transition:opacity .2s}
.price-btn:hover{opacity:.85}
.hero-ctas{pointer-events:auto;margin-top:clamp(12px,1.8vh,22px);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hero-ctas .price-btn,.hero-ctas .how-btn{padding:9px 17px}
.how-btn{font:500 clamp(10px,0.78vw,13px)/1 'IBM Plex Mono',monospace;letter-spacing:.12em;background:#fff;border:1px solid #191813;border-radius:99px;cursor:pointer;color:#191813;transition:background .2s,color .2s}
.how-btn:hover{background:#191813;color:#faf9f6}
.cv-btn{font:500 clamp(10px,0.78vw,13px)/1 'IBM Plex Mono',monospace;letter-spacing:.12em;background:#191813;border:1px solid #191813;border-radius:99px;padding:9px 16px;cursor:pointer;color:#faf9f6;transition:opacity .2s}
.cv-btn:hover{opacity:.82}
.lang-btn{font:500 clamp(10px,0.78vw,13px)/1 'IBM Plex Mono',monospace;letter-spacing:.12em;background:#fff;border:1px solid #ddd9cd;border-radius:99px;padding:9px 15px;cursor:pointer;color:#6b675e;transition:color .2s,border-color .2s}
.lang-btn:hover{color:#191813;border-color:#191813}

/* ---------- mobile layout ---------- */
.m-page{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:#efede7;padding:26px 22px 44px;box-sizing:border-box;display:flex;flex-direction:column;gap:26px;perspective:900px}
.m-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.m-header .id{display:flex;flex-direction:column;gap:5px}
.m-header .logo .logo-top,.m-header .logo .logo-line{font-size:20px}
.m-header .logo .logo-cursor{width:8px;height:15px}
.m-actions{display:flex;gap:8px;align-items:center}
.m-lang-btn{flex:0 0 auto;font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;background:#fff;border:1px solid #ddd9cd;border-radius:99px;padding:11px 16px;cursor:pointer;color:#6b675e;transition:transform .15s ease}
.m-cv-btn{flex:0 0 auto;font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;background:#191813;border:1px solid #191813;border-radius:99px;padding:11px 16px;cursor:pointer;color:#faf9f6;transition:transform .15s ease}
.m-lang-btn:active,.m-cv-btn:active{transform:scale(.94)}
.m-polaroid{position:relative;align-self:flex-start;width:54%;max-width:230px;background:#fff;padding:9px 9px 26px;box-shadow:0 20px 40px -16px rgba(25,24,19,.28);transform:rotate(-3deg);transition:transform .25s ease-out;will-change:transform}
.m-motion{position:absolute;right:-12px;bottom:-14px;transform:rotate(3deg);font:500 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;background:#191813;color:#faf9f6;border:none;border-radius:99px;padding:10px 14px;box-shadow:0 12px 24px -10px rgba(25,24,19,.5);cursor:pointer}
.m-polaroid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.m-intro{display:flex;flex-direction:column;gap:14px}
.m-ctas{display:flex;flex-wrap:wrap;gap:9px;padding-top:2px}
.m-how-btn{font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;background:#fff;border:1px solid #191813;border-radius:99px;padding:12px 18px;cursor:pointer;color:#191813;transition:transform .15s ease}
.m-price-btn{font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;background:#c4562e;border:1px solid #c4562e;border-radius:99px;padding:12px 18px;cursor:pointer;color:#faf9f6;transition:transform .15s ease}
.m-how-btn:active,.m-price-btn:active{transform:scale(.94)}
.m-intro .kicker{font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.14em}
.m-intro h1{margin:0;font:800 clamp(32px,9.4vw,46px)/1.0 Archivo,sans-serif;letter-spacing:-0.03em;color:#191813;text-wrap:balance}
.m-intro .story{margin:0;font:400 15px/1.6 Archivo,sans-serif;color:#5d594f;text-wrap:pretty}
.m-intro .offer{margin:0;font:400 14px/1.6 Archivo,sans-serif;color:#8a857a;text-wrap:pretty}
.m-cards{display:flex;flex-direction:column;gap:14px}
/* recent work: center-focused infinite loop (Splide). The active card sits
   centered, both neighbours peek in from the full-bleed gutters, and the
   strip wraps around. Track padding gives the card shadows room; the arrows
   are the map-tooltip ink chips; the dots echo the map-pin rings. */
.m-splide{position:relative;margin:0 -22px}
.m-splide .splide__track{padding:2px 0 24px}
.car-btn{position:absolute;top:50%;transform:translateY(-70%);z-index:2;width:38px;height:38px;background:#191813;border:none;color:#e8926d;font:500 15px/1 'IBM Plex Mono',monospace;cursor:pointer;box-shadow:0 18px 34px -16px rgba(25,24,19,.5);transition:background .2s,color .2s}
.car-btn:hover{background:#c4562e;color:#faf9f6}
.car-btn:focus-visible{outline:2px solid #c4562e;outline-offset:2px}
.car-prev{left:10px}
.car-next{right:10px}
.m-splide .splide__pagination{display:flex;justify-content:center;gap:9px;list-style:none;margin:0;padding:0}
.m-splide .splide__pagination li{display:flex}
.m-splide .splide__pagination__page{width:8px;height:8px;border-radius:50%;border:none;padding:0;background:#d0cabb;cursor:pointer;transition:background .2s,box-shadow .2s}
.m-splide .splide__pagination__page.is-active{background:#c4562e;box-shadow:0 0 0 3px rgba(196,86,46,.14)}
.m-cards-head{display:flex;align-items:center;gap:12px;font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#a29d90}
.m-cards-head::after{content:'';flex:1 1 auto;height:1px;background:#ddd9cd}
.m-card{background:#fff;padding:10px;box-shadow:0 18px 36px -18px rgba(25,24,19,.3);display:flex;flex-direction:column;align-items:stretch;gap:0;transition:transform .18s ease}
.m-card .shot{position:relative;flex:none;width:100%;aspect-ratio:16/10;background:#f2f0ea;overflow:hidden}
.m-card .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.m-card .meta{flex:none;min-width:0;display:flex;flex-direction:column;gap:5px;padding:12px 4px 4px}
.m-card .num{font:500 9.5px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#c4562e}
.m-card .title{font:700 19px/1.1 Archivo,sans-serif;letter-spacing:-0.02em;color:#191813}
.m-card .desc{font:400 11.5px/1.45 'IBM Plex Mono',monospace;color:#8a857a;text-wrap:pretty}
.m-cv-sec{display:flex;flex-direction:column;gap:12px}
.m-cv-label{font:500 9.5px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#c4562e}
.m-cv-item{display:flex;flex-direction:column;gap:4px}
.m-cv-h{font:600 16px/1.25 Archivo,sans-serif;color:#191813}
.m-cv-when{font:400 10.5px/1 'IBM Plex Mono',monospace;color:#8a857a}
.m-cv-note{font:400 13px/1.6 Archivo,sans-serif;color:#5d594f;text-wrap:pretty}
.m-how{display:flex;flex-direction:column;gap:16px}
.m-step{display:flex;gap:14px;align-items:baseline}
.m-step .step-num{flex:0 0 auto;font:500 11px/1.5 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#c4562e}
.m-price{display:flex;flex-direction:column;gap:14px}
.m-price-group{font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#a29d90;padding-top:6px}
.m-tier{background:#fff;padding:16px;box-shadow:0 18px 36px -18px rgba(25,24,19,.3);display:flex;flex-direction:column;gap:7px}
.m-footer{display:flex;flex-direction:column;gap:14px;padding-top:4px;border-top:1px solid #ddd9cd}
.m-footer .cta{font:400 14px/1.55 Archivo,sans-serif;color:#5d594f;text-wrap:pretty;padding-top:12px}
.m-footer .email{align-self:flex-start;font:500 14px/1 'IBM Plex Mono',monospace;color:#191813;border-bottom:1px solid #c4562e;padding:2px 0 6px}
.m-footer .linkedin{align-self:flex-start;font:500 14px/1 'IBM Plex Mono',monospace;color:#6b675e;padding:6px 0 12px}
.m-footer .coords{font:400 10.5px/1.9 'IBM Plex Mono',monospace;color:#a29d90}

/* mobile: scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* mobile: NL map section (cloned from the desktop scene by JS) */
.m-map{position:relative;width:min(78vw,340px);aspect-ratio:390.6/462;align-self:center;margin:6px 0 2px}
.m-map-tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transition:transform .25s ease-out}
.m-map-tilt svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m-map:not(.in) svg *{animation-play-state:paused!important}
.place.on .tip{opacity:1;transform:translateX(0) translateZ(190px)}
.place.on{z-index:3}

/* mobile: resume bottom sheet */
.m-sheet-layer{display:none}
.sheet-dim{position:fixed;inset:0;background:rgba(25,24,19,.4);opacity:0;pointer-events:none;transition:opacity .4s ease;z-index:20}
.sheet-dim.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:82vh;max-height:82dvh;background:#faf9f6;border-radius:20px 20px 0 0;box-shadow:0 -24px 60px -24px rgba(25,24,19,.5);transform:translateY(102%);transition:transform .5s cubic-bezier(.2,.85,.2,1);display:flex;flex-direction:column;z-index:21}
.sheet.open{transform:translateY(0)}
.sheet-grab{flex:0 0 auto;padding:12px 0 6px;display:flex;justify-content:center;cursor:grab;touch-action:none}
.sheet-grab span{width:42px;height:4px;border-radius:2px;background:#ddd9cd}
.sheet-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:6px 22px 16px;border-bottom:1px solid #e2ded2;touch-action:none}
.sheet-name{font:800 22px/1 Archivo,sans-serif;letter-spacing:-0.025em;color:#191813}
.sheet-role{margin-top:6px;font:500 10px/1.5 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#c4562e}
.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 22px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .m-map svg *,.nl-map svg *{animation:none!important}
  .ping,.step-ping{display:none}
  .logo .logo-cursor{animation:none}
  .cv-panel .step{opacity:1}
  .cv-panel.open .step{animation:none}
}

/* ---------- breakpoint switch (mirrors the design's matchMedia) ---------- */
.m-page{display:none}
@media (max-width:760px), ((pointer:coarse) and (max-width:900px)){
  .scene{display:none}
  .m-page{display:flex}
  .m-sheet-layer{display:block}
}

/* ---------- arriving via the language toggle ----------
   The map paths carry inline load animations (drawNl 3s, drawWater 2.1s, fadeUp
   1.6s) and the mobile column fades in on scroll. On a first visit that is the
   intro; on a language switch it is a 4s replay of something the visitor just
   watched. `no-intro` is set by an inline <head> script before first paint so
   the map is simply already drawn. `restoring` is transient: it suppresses the
   open/close transitions for the one frame in which we reinstate whichever
   panel or sheet was open, then it is removed so normal interaction animates. */
html.no-intro .nl-map path,html.no-intro .m-map-tilt path{animation:none!important}
html.no-intro .reveal{opacity:1;transform:none;transition:none}
html.restoring .cv-panel,html.restoring .cv-dim,html.restoring .sheet,
html.restoring .sheet-dim,html.restoring .tilt{transition:none!important}
/* A restored panel was already open before the switch, so its steps should not
   stagger in again. The marker is cleared when the panel closes, so opening it
   again later on the same page still animates normally.
   `opacity:1` is not optional: .cv-panel .step is opacity:0 and only becomes
   visible via fadeUp's `both` fill mode, so suppressing the animation alone
   leaves the steps invisible. Same pairing as the reduced-motion block above. */
.cv-panel.no-step-intro .step{animation:none;opacity:1}