:root{--bg:#f5f5ed;--text:#111210;--muted:#69705f;--lime:#d6fc52;--line:#d3d7c9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2.1875rem}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',Arial,sans-serif;font-size:1rem;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:0.1875rem solid var(--lime);outline-offset:0.4375rem}.wrap{max-width:91rem;margin:auto;padding-left:5.4%;padding-right:5.4%}.header{height:7.25rem;display:flex;align-items:center;justify-content:space-between;gap:1.875rem}.logo{font-size:2.25rem;letter-spacing:-0.14375rem;font-weight:700;white-space:nowrap}.logo-dot{font-size:0.8125rem;vertical-align:top;display:inline-block;margin:0.5rem 0 0 0.25rem;letter-spacing:0;color:var(--lime)}nav{display:flex;gap:2rem;font-size:0.875rem}.header nav a:hover,.text-link:hover{color:var(--lime)}.nav-contact{border-bottom:0.0625rem solid #777a6c;padding:0.75rem 0;font-size:0.875rem}.nav-contact span{margin-left:1.875rem}.hero{padding-top:4.1875rem;padding-bottom:5rem}.eyebrow{font-size:0.8125rem;letter-spacing:0.0875rem;font-weight:550;display:flex;align-items:center;gap:0.75rem}.asterisk{font-size:1.4375rem;color:var(--lime)}h1,h2,h3,p{margin:0}h1{font-size:clamp(3.5rem,7.8vw,7rem);line-height:1.04;letter-spacing:-.065em;font-weight:500;margin:1.8125rem 0 2.5rem}h1>span{color:var(--lime)}.hero-bottom{display:flex;align-items:center;gap:2.5rem}.hero-bottom p{max-width:23.125rem;color:#5f6655;line-height:1.65}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:3rem;padding:1.25rem 1.5rem;border-radius:0.375rem;font-weight:600;white-space:nowrap;transition:transform .2s,background .2s}.button:hover{transform:translateY(-0.1875rem);background:#e5ff8e}.lime{background:var(--lime);color:var(--bg)}.scroll-link{margin-left:auto;color:#606854;font-size:0.875rem;display:flex;gap:1.875rem;align-items:center}.scroll-link span{display:grid;place-items:center;width:2.625rem;height:2.625rem;border:0.0625rem solid var(--line);border-radius:50%}.ticker{border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line);overflow:hidden;padding:1.5625rem 0}.ticker>div{white-space:nowrap;width:max-content;min-width:100%;display:flex;align-items:center;justify-content:space-around;gap:3.75rem;font-size:1.375rem;letter-spacing:-0.03125rem}.ticker span{color:var(--lime);font-size:1.875rem}.section{padding-top:6.5625rem;padding-bottom:6.875rem}.section-top{display:flex;justify-content:space-between;gap:1.5625rem;font-size:0.875rem;margin-bottom:3.125rem}.muted{color:var(--muted)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:4.0625rem;margin-bottom:3.4375rem}h2{font-size:clamp(2.25rem,4.4vw,4rem);letter-spacing:-.055em;line-height:1.08;font-weight:500}.section-heading p{color:#5f6655;max-width:19.375rem;line-height:1.7}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.125rem}.service{background:#ecefe5;border:0.0625rem solid #d6dccb;border-radius:0.625rem;padding:1.875rem 1.75rem;display:flex;flex-direction:column;align-items:flex-start}.service-icon{font-size:2.75rem;color:var(--lime);height:5.625rem}.code-icon{font-size:2rem;padding-top:0.5rem}.small-label{font-size:0.75rem;letter-spacing:0.05rem;color:#69725c}h3{font-size:1.6875rem;letter-spacing:-0.05625rem;font-weight:500;margin:0.75rem 0 1rem}.service p{color:#5f6655;line-height:1.65;margin-bottom:1.875rem}.tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:auto}.tags span{font-size:0.75rem;color:#4a563b;border:0.0625rem solid #c4cdb4;border-radius:1.875rem;padding:0.4375rem 0.625rem}.approach{background:var(--lime);color:var(--bg)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.875rem;margin-top:3.875rem}.steps article{border-top:0.0625rem solid #869e32;padding-top:1.375rem}.step-number{font-size:0.875rem}.steps h3{margin-top:1.875rem}.steps p{line-height:1.65;color:#3d471c;max-width:20rem}.about{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}.about-visual{position:relative;border:0.0625rem solid #30332a;border-radius:0.75rem;overflow:hidden;background:#000;aspect-ratio:1}.about-visual img{display:block;width:100%;height:100%;object-fit:cover}.visual-note{position:absolute;bottom:1.5rem;left:1.625rem;font-size:0.75rem;letter-spacing:0.1125rem;color:#c8cabc}.about-copy h2{margin:1.75rem 0}.accent{color:var(--lime)}.about-copy p{color:#5f6655;line-height:1.7;margin:0 0 1.125rem}.text-link{display:inline-flex;gap:3.125rem;padding:0.625rem 0;border-bottom:0.0625rem solid #757966;margin-top:0.75rem}.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:4.375rem;padding-top:1.25rem}.faq h2{margin-top:1.5625rem}details{border-bottom:0.0625rem solid var(--line)}summary{cursor:pointer;list-style:none;padding:1.5rem 0;display:flex;gap:1.5625rem;justify-content:space-between;align-items:center;font-size:1.125rem;line-height:1.4}summary::-webkit-details-marker{display:none}summary>span{font-size:1.625rem;font-weight:400;color:var(--lime)}details[open] summary>span{transform:rotate(45deg)}details p{color:#5f6655;line-height:1.7;padding:0 1.875rem 1.5625rem 0}.contact{background:var(--lime);color:var(--bg);padding:4.375rem 0 3.125rem}.contact-title{position:relative;display:block;font-size:clamp(4.125rem,10vw,9.0625rem);line-height:1;letter-spacing:-.065em;margin:2.1875rem 0 2.8125rem;font-weight:500}.contact-arrow{position:absolute;right:0;top:0;font-size:1.3em;line-height:.95}.contact-title:hover .contact-arrow{transform:translate(0.3125rem,-0.3125rem)}.contact-arrow{transition:transform .2s}.contact-bottom{display:flex;align-items:flex-end;justify-content:space-between;border-top:0.0625rem solid #99b637;padding-top:1.6875rem}.contact-bottom p{line-height:1.6}.contact-bottom a{font-size:1.5rem;letter-spacing:-0.0375rem}.contact-bottom a span{margin-left:1.75rem}footer{display:flex;align-items:center;gap:2.5rem;padding-top:2.25rem;padding-bottom:2.25rem}footer span:not(.logo-dot),footer>a:last-child{color:#646c59;font-size:0.8125rem}footer>a:last-child{margin-left:auto}.menu-toggle{display:none}.mobile-nav[hidden]{display:none}.skip{position:absolute;left:1.25rem;top:-6.25rem;padding:0.9375rem;background:var(--lime);color:var(--bg);z-index:5}.skip:focus{top:0.625rem}::selection{background:var(--lime);color:var(--bg)}.contact a:focus-visible,.approach a:focus-visible{outline-color:var(--bg)}
@media(min-width:1600px){.wrap{padding-left:4.875rem;padding-right:4.875rem}}@media(max-width:1000px){.header nav{gap:1.25rem}.hero-bottom{gap:1.5625rem}.scroll-link{display:none}.service{padding:1.625rem 1.25rem}.small-label{min-height:2rem}.about{gap:2.5rem}.faq{gap:2.5rem}.section-heading{gap:2.5rem}.section{padding-top:4.6875rem;padding-bottom:4.6875rem}.faq{padding-top:0.625rem}}@media(max-width:700px){.wrap{padding-left:6%;padding-right:6%}.header{height:5.625rem}.logo{font-size:2rem}.header nav,.nav-contact{display:none}.menu-toggle{display:flex;gap:1.25rem;background:none;color:var(--text);border:0.0625rem solid var(--line);border-radius:0.3125rem;padding:0.625rem 0.8125rem}.mobile-nav{display:flex;flex-direction:column;gap:0;padding-bottom:1.25rem}.mobile-nav a{padding:0.875rem 0;border-bottom:0.0625rem solid var(--line)}.hero{padding-top:2.25rem;padding-bottom:3.125rem}h1{font-size:clamp(3rem,9.6vw,4.25rem);letter-spacing:-.055em;line-height:1.07;margin:1.625rem 0 1.75rem}h1>span{display:block;max-width:95%}.eyebrow{font-size:0.75rem;letter-spacing:0.071875rem}.hero-bottom{align-items:flex-start;flex-direction:column;gap:1.5625rem}.hero-bottom p{max-width:21.25rem}.button{padding:1.125rem 1.375rem}.ticker{padding:1.125rem 0}.ticker>div{font-size:1rem;gap:1.875rem}.ticker span{font-size:1.5rem}.section{padding-top:3.75rem;padding-bottom:3.75rem}.section-top{margin-bottom:2rem}.section-top>span:last-child:not(:first-child){display:none}.section-heading{display:block;margin-bottom:1.875rem}h2{font-size:2.5rem}.section-heading p{margin-top:1.5625rem;max-width:100%}.service-grid{grid-template-columns:1fr;gap:0.75rem}.service{padding:1.75rem}.service-icon{height:4.375rem}.small-label{min-height:0}.service p{margin-bottom:1.5rem}.steps{grid-template-columns:1fr;gap:2rem;margin-top:2.375rem}.steps h3{margin-top:1.125rem}.steps p{max-width:100%}.about{grid-template-columns:1fr;gap:2.1875rem}.about-visual{max-width:28.125rem;width:100%}.about-copy h2{font-size:3rem}.faq{grid-template-columns:1fr;gap:1.25rem;padding-top:0.9375rem}.faq h2{margin-top:1.125rem}summary{font-size:1.0625rem}.contact{padding:3.125rem 0 2.1875rem}.contact-title{font-size:clamp(3.875rem,13vw,5.625rem);margin:1.75rem 0 2.1875rem}.contact-arrow{font-size:.9em;top:0.25rem}.contact-bottom{align-items:flex-start;gap:1.5rem;flex-direction:column}.contact-bottom a{font-size:1.5rem}footer{flex-wrap:wrap;gap:1.25rem;padding-top:1.75rem;padding-bottom:1.75rem}footer .logo{width:100%}footer>a:last-child{margin-left:0}footer span:not(.logo-dot){font-size:0.75rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* Webtaste identity and motion */
html{scroll-padding-top:7.375rem}.header-shell{position:sticky;top:0;z-index:50;background:transparent;transition:background .35s,box-shadow .35s;isolation:isolate}.header-shell.scrolled{background:rgb(17 18 16 / 78%);backdrop-filter:blur(1.125rem);-webkit-backdrop-filter:blur(1.125rem);box-shadow:0 0.0625rem 0 rgb(255 255 255 / 8%)}.header{height:6rem}.logo{display:inline-flex;align-items:center;flex-shrink:0;letter-spacing:normal}.logo svg{display:block;width:10.875rem;height:auto;overflow:visible}.logo .brand-spark{transform-box:fill-box;transform-origin:center;transition:rotate .5s}.logo:hover .brand-spark{rotate:90deg}.header nav{gap:1.75rem;white-space:nowrap}.header nav a{color:#454c3d}.header nav a:hover{color:var(--lime)}.nav-contact{white-space:nowrap;transition:background .3s,color .3s,border-color .3s;padding:0.75rem 1rem;border-radius:0.3125rem}.nav-contact span{display:inline-block;margin-left:1.125rem;transition:transform .3s}.scrolled .nav-contact{background:var(--lime);color:var(--bg);border-color:transparent}.nav-contact:hover span{transform:translate(0.125rem,-0.125rem)}.mobile-nav{background:rgb(17 18 16 / 96%)}
.hero .button{position:relative;overflow:hidden;isolation:isolate;min-height:4rem;gap:2.125rem;transform:translate3d(var(--mag-x,0rem),var(--mag-y,0rem),0);transition:transform .24s ease,box-shadow .3s,background .3s}.hero .button::before{content:"";position:absolute;inset:0;background:#ecffb1;clip-path:circle(0% at var(--pointer-x,50%) var(--pointer-y,50%));transition:clip-path .45s;z-index:-1}.hero .button:hover::before,.hero .button:focus-visible::before{clip-path:circle(145% at var(--pointer-x,50%) var(--pointer-y,50%))}.hero .button:hover{box-shadow:0 0.5rem 2rem rgb(214 252 82 / 18%)}.hero .button:active{scale:.97}.cta-arrow{display:block;position:relative;width:1.625rem;height:1.625rem;overflow:hidden;font-size:1.5625rem;line-height:1.625rem}.cta-arrow>span{position:absolute;inset:0;transition:transform .4s cubic-bezier(.2,.7,.2,1)}.cta-arrow>span:last-child{transform:translate(-110%,110%)}.button:hover .cta-arrow>span:first-child,.button:focus-visible .cta-arrow>span:first-child{transform:translate(110%,-110%)}.button:hover .cta-arrow>span:last-child,.button:focus-visible .cta-arrow>span:last-child{transform:translate(0,0)}
.motion-band{position:relative;padding-bottom:2.1875rem}.ticker{padding:2.1875rem 0;overflow:hidden}.ticker>.ticker-track{display:flex;min-width:0;width:max-content;gap:0;justify-content:flex-start;will-change:transform}.ticker-set{display:flex;align-items:center;gap:3.5rem;flex-shrink:0;padding-right:3.5rem;white-space:nowrap;font-size:1.5625rem;letter-spacing:-0.0375rem}.ticker-set>span{display:inline-block;rotate:var(--spark-turn,0deg)}.orbit-badge{position:absolute;width:7.5rem;height:7.5rem;right:5.4%;top:-0.625rem;background:var(--lime);color:var(--bg);border-radius:50%;border:0.3125rem solid var(--bg);display:grid;place-items:center;box-shadow:0 0 0 0.5rem var(--bg);transition:scale .3s}.orbit-badge:hover{scale:1.06}.orbit-text{position:absolute;inset:0;width:100%;height:100%;animation:orbit-spin 22s linear infinite}.orbit-text text{fill:currentColor;font-size:0.6875rem;font-weight:600;letter-spacing:0.0625rem}.orbit-badge>span{font-size:2.125rem;transition:rotate .3s}.orbit-badge:hover>span{rotate:45deg}.motion-toggle{position:absolute;right:5.4%;bottom:0;background:none;border:0;padding:0.5rem 0 0;color:#5f6655;font-size:0.75rem;cursor:pointer}.motion-toggle:hover{color:var(--lime)}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr));perspective:75rem}.service{min-width:0;position:relative;overflow:hidden;transform:perspective(56.25rem) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .35s ease,border-color .35s,box-shadow .35s;isolation:isolate}.service::before{content:"";position:absolute;inset:0;background:radial-gradient(21.875rem circle at var(--spot-x,50%) var(--spot-y,20%),rgb(214 252 82 / 9%),transparent 70%);opacity:0;transition:opacity .35s;z-index:-1}.service:hover{border-color:#6a7844;box-shadow:0 1rem 2.5rem rgb(0 0 0 / 15%)}.service:hover::before{opacity:1}.service-icon{transition:transform .45s cubic-bezier(.2,.8,.2,1)}.service:hover .service-icon{transform:translate(0.3125rem,-0.3125rem) rotate(-8deg)}.service:nth-child(3):hover .service-icon{transform:rotate(90deg)}.service h3{font-size:clamp(1.5rem,2.2vw,1.875rem);overflow-wrap:break-word}.service .small-label{line-height:1.5;min-height:2.25rem}.service p{font-size:1rem}.service.entering{animation:card-enter .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--enter-delay,0ms)}
.about-visual{perspective:62.5rem}.art-float{width:100%;height:100%;animation:art-float 9s ease-in-out infinite;will-change:transform}.about-visual img{transform:translate3d(0,var(--art-y,0rem),0) scale(1.07) rotate(var(--art-turn,0deg));will-change:transform}.about-visual .visual-note{z-index:2;pointer-events:none}.motion-paused .orbit-text,.motion-paused .art-float{animation-play-state:paused}.motion-paused .service.entering{animation:none}.motion-paused .ticker-track{will-change:auto}
@keyframes orbit-spin{to{transform:rotate(360deg)}}@keyframes art-float{0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}50%{transform:translateY(-0.625rem) rotate(1.5deg) scale(1.025)}}@keyframes card-enter{from{opacity:0;translate:0 2.25rem}to{opacity:1;translate:0 0}}
@media(max-width:1100px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service:last-child{grid-column:1/-1}.service:last-child p{max-width:37.5rem}.service:last-child .small-label{min-height:0}}
@media(max-width:920px){.header nav,.header .nav-contact{display:none}.header{height:5.125rem}.menu-toggle{display:flex;gap:1.25rem;background:rgb(17 18 16 / 25%);color:var(--text);border:0.0625rem solid #74786a;border-radius:0.3125rem;padding:0.625rem 0.8125rem}.mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:0;padding-bottom:1.25rem}.mobile-nav a{padding:0.875rem 0;border-bottom:0.0625rem solid var(--line)}.header-shell:has(.mobile-nav:not([hidden])){background:var(--bg)}.logo svg{width:9.875rem}.hero{padding-top:2.8125rem}.hero-bottom{flex-wrap:wrap}.hero-bottom p{flex:1 1 16.875rem}.orbit-badge{width:6.25rem;height:6.25rem;top:0}.ticker-set{font-size:1.375rem;gap:2.5rem;padding-right:2.5rem}.about{gap:2.1875rem}}
@media(max-width:620px){.service-grid{grid-template-columns:1fr}.service:last-child{grid-column:auto}.service .small-label{min-height:0}.service h3{font-size:1.75rem}.ticker-set{font-size:1.1875rem;gap:1.875rem;padding-right:1.875rem}.ticker{padding:1.9375rem 0}.orbit-badge{width:5.5rem;height:5.5rem;top:0.125rem;right:6%}.orbit-badge>span{font-size:1.75rem}.motion-toggle{right:6%}.hero-bottom p{flex:auto}.hero .button{gap:2.5rem}.about{grid-template-columns:1fr}.logo svg{width:9.625rem}footer .logo{width:100%}html{scroll-padding-top:6.5rem}}
@media(prefers-reduced-motion:reduce){.ticker-track,.about-visual img,.hero .button,.service{transform:none!important}.service.entering{animation:none!important}.orbit-text,.art-float{animation:none!important}.motion-toggle{display:none}.logo .brand-spark{rotate:none!important}}
/* Scroll-written code */
.service .code-icon{font-size:clamp(1rem,1.7vw,1.4375rem);height:5.625rem;padding-top:0.5rem;width:100%;display:flex;align-items:flex-start}.live-code{display:flex;align-items:center;min-height:2.375rem;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-0.04375rem}.code-typed{color:var(--lime)}.code-caret{width:0.125rem;height:1.1em;background:var(--lime);margin-left:0.1875rem;flex-shrink:0}.code-complete .code-caret{opacity:.35}.service:hover .code-icon{transform:none}
/* A real reflective 3D canvas */
.model-viewer{position:relative;background:#030403;aspect-ratio:1;isolation:isolate}.model-viewer .model-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none!important;will-change:auto;transition:opacity .3s}.model-canvas{position:absolute;inset:0 0 3.75rem;cursor:grab;touch-action:pan-y;outline-offset:-0.3125rem}.model-canvas.dragging{cursor:grabbing}.model-canvas canvas{display:block;width:100%;height:100%;opacity:0}.model-ready .model-canvas canvas{opacity:1}.model-ready .model-fallback{opacity:0;pointer-events:none}.model-toolbar{position:absolute;inset:auto 1.0625rem 2.75rem;display:flex;justify-content:space-between;align-items:center;gap:0.625rem;font-size:0.75rem;color:#5c684b;z-index:2;pointer-events:none}.model-toolbar[hidden]{display:none}.model-toolbar>div{display:flex;gap:0.3125rem;pointer-events:auto}.model-toolbar button{min-width:2.1875rem;height:2.1875rem;padding:0 0.625rem;font-size:0.8125rem;background:#151911;border:0.0625rem solid #424b32;border-radius:1.25rem;color:#e8f0dc;cursor:pointer}.model-toolbar button:hover{background:var(--lime);color:#111210}.model-viewer .visual-note{bottom:1.0625rem;left:1.25rem;font-size:0.6875rem}.model-status{position:absolute;bottom:2.8125rem;left:1.25rem;right:1.25rem;font-size:0.75rem;color:#c1c7b7;background:#030403}.model-status:empty{display:none}
/* Invitation and durable contact form */
.contact{padding:4.75rem 0}.contact-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:4.375rem;margin-top:2.1875rem;align-items:start}.contact-intro h2{font-size:clamp(3.625rem,6.8vw,5.875rem);line-height:1.02;letter-spacing:-.065em}.contact-intro>p{font-size:1.125rem;line-height:1.65;max-width:24.375rem;margin-top:1.875rem}.contact-mail{font-size:0.875rem;line-height:1.6;display:block;margin-top:2.25rem}.contact-mail span{display:block;font-size:1.3125rem;margin-top:0.4375rem;letter-spacing:-0.03125rem}.contact-form{background:#efffc5;border:0.0625rem solid #c1e840;padding:2rem;border-radius:0.75rem;box-shadow:0 0.75rem 1.875rem rgb(59 79 9 / 6%);display:flex;flex-direction:column;gap:0.6875rem}.form-kicker{font-size:0.75rem;letter-spacing:0.0875rem;margin-bottom:0.9375rem}.contact-form label{font-size:0.9375rem;font-weight:600}.contact-form label span{font-weight:400;color:#5b6840}.contact-form input,.contact-form textarea{width:100%;min-width:0;font:inherit;line-height:1.5;background:#fbfff2;border:0.0625rem solid #abb68e;border-radius:0.375rem;color:#111210;padding:0.8125rem 0.9375rem;margin-bottom:0.75rem}.contact-form textarea{resize:vertical;min-height:5.9375rem;max-height:15.625rem}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#70795f}.contact-form input:focus,.contact-form textarea:focus{outline:0.125rem solid #111210;outline-offset:0.125rem}.contact-submit{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;background:#111210;color:#f1f7e3;border:0;border-radius:0.375rem;padding:1.125rem 1.25rem;font-size:1rem;cursor:pointer;transition:background .25s,transform .25s}.contact-submit>span:last-child{font-size:1.5rem;transition:transform .25s}.contact-submit:hover{background:#2b351c}.contact-submit:hover>span:last-child{transform:translate(0.1875rem,-0.1875rem)}.contact-submit:active{transform:scale(.98)}.contact-submit:disabled{cursor:wait;opacity:.6}.contact-submit:focus-visible{outline:0.125rem solid #111210;outline-offset:0.1875rem}.contact-form .form-note{font-size:0.75rem;line-height:1.5;color:#54613b;margin-top:0.1875rem}.form-status{font-size:0.9375rem;line-height:1.5;color:#254300}.form-status:empty{display:none}.form-status.is-error{color:#9b1e13}.form-trap{position:absolute;left:-625rem;width:0.0625rem;height:0.0625rem;overflow:hidden}.contact-form noscript{font-size:0.875rem}
@media(max-width:920px){.contact-layout{gap:2.1875rem;grid-template-columns:1fr}.contact-intro h2{font-size:clamp(3.625rem,10vw,5.25rem)}.contact-intro>p{max-width:31.25rem}.contact-mail{margin-top:1.375rem}.contact-form{max-width:40rem;width:100%}.service .code-icon{font-size:1.25rem}.about{grid-template-columns:1fr}.model-viewer{max-width:38.75rem;width:100%}}
@media(max-width:620px){.contact{padding:3.4375rem 0}.contact-layout{margin-top:1.75rem;gap:1.875rem}.contact-intro>p{font-size:1rem;margin-top:1.375rem}.contact-form{padding:1.4375rem 1.25rem}.contact-submit{padding:1.0625rem 0.9375rem;font-size:0.9375rem}.model-toolbar{font-size:0.6875rem;left:0.75rem;right:0.75rem}.model-toolbar button{min-width:2rem;padding:0 0.5rem}.model-toolbar>span{max-width:6.875rem;line-height:1.4}.model-viewer .visual-note{font-size:0.625rem}.service .code-icon{height:4.6875rem;font-size:clamp(0.9375rem,4.5vw,1.375rem)}}
/* Light Webtaste palette and quieter accents */
body{color-scheme:light}.header-shell.scrolled{background:rgb(245 245 237 / 82%);box-shadow:0 0.0625rem 0 rgb(17 18 16 / 9%)}.mobile-nav,.header-shell:has(.mobile-nav:not([hidden])){background:rgb(245 245 237 / 97%)}.menu-toggle{background:rgb(245 245 237 / 25%);color:var(--text);border-color:#b5bda6}.nav-contact,.text-link{border-color:#9ca88a}.scrolled .nav-contact,.lime,.approach,.contact,.skip{color:var(--text)}.logo .brand-spark,.logo:hover .brand-spark{rotate:none;transition:none;stroke:#627e17}.header nav a:hover,.text-link:hover{color:#4c6610}h1>span,.accent{color:var(--lime);-webkit-text-stroke:clamp(0.0625rem,.025em,0.15625rem) #111210;paint-order:stroke fill}.asterisk,.service-icon,.code-typed,summary>span,.ticker span{color:#627e17}.button:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:#607b15}.contact a:focus-visible,.approach a:focus-visible{outline-color:#111210}.service{border-color:#d3dcc4;box-shadow:none}.service:hover{border-color:#9bab77;box-shadow:0 0.75rem 2.1875rem rgb(59 78 23 / 8%)}.service::before{background:radial-gradient(21.875rem circle at var(--spot-x,50%) var(--spot-y,20%),rgb(165 210 60 / 17%),transparent 70%)}.tags span{border-color:#bdc8ab;color:#4d5c3c}.model-viewer{background:#e9ede1;border-color:#ced6be}.model-viewer .model-fallback{object-fit:contain;padding:12%;background:#e9ede1}.model-viewer .visual-note{color:#5b6947}.model-toolbar button{color:#324122;border-color:#c2ceb0;background:#f9fbf4}.model-toolbar button:hover{background:#d6fc52;color:#111210}.model-status{background:#e9ede1;color:#4a5937}.motion-band{padding-bottom:0}.logo svg{overflow:visible}::selection{background:#d6fc52;color:#111210}.code-caret,.code-complete .code-caret{background:#627e17;opacity:1;animation:caret-blink 1.1s steps(1,end) infinite}.hero .button{animation:soft-heartbeat 3.8s ease-in-out infinite}.hero .button:hover,.hero .button:focus-visible{animation-play-state:paused}
@keyframes caret-blink{0%,48%{opacity:1}49%,100%{opacity:0}}@keyframes soft-heartbeat{0%,45%,100%{scale:1;box-shadow:0 0 0 0 rgb(136 178 30 / 0)}54%{scale:1.022;box-shadow:0 0 0 0.625rem rgb(136 178 30 / 7%)}63%{scale:1}72%{scale:1.012;box-shadow:0 0 0 0.9375rem rgb(136 178 30 / 0)}82%{scale:1}}
.pointer-glow{position:fixed;left:0;top:0;width:30rem;height:30rem;border-radius:50%;background:radial-gradient(circle,rgb(184 219 86 / 24%),rgb(184 219 86 / 9%) 35%,transparent 68%);pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;will-change:transform}main,footer,.header-shell{position:relative;z-index:1}.header-shell{position:sticky;z-index:50}.pointer-glow.active{opacity:1}
@media(hover:hover) and (pointer:fine){body,body a,body button,body summary,.model-canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 16h22M16 5v22M8 8l16 16M8 24L24 8' fill='none' stroke='%23f5f5ed' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M5 16h22M16 5v22M8 8l16 16M8 24L24 8' fill='none' stroke='%23111210' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 16 16,auto}body input,body textarea{cursor:text}.model-canvas.dragging{cursor:grabbing}}
@media(prefers-reduced-motion:reduce){.hero .button,.code-caret{animation:none!important}.pointer-glow{display:none}}
/* Prominent header invitation, consistent interactive colour */
.header .header-cta{display:inline-flex;background:var(--lime);color:#111210;gap:1.375rem;border:0;padding:0.9375rem 1.1875rem;min-height:3.25rem;border-radius:0.375rem;font-size:0.875rem;position:relative;overflow:hidden;flex-shrink:0}.header-cta .cta-arrow{margin:0;width:1.5rem;height:1.625rem}.header-cta .cta-arrow>span{margin:0}.header .header-cta:hover{background:#bde936;box-shadow:0 0.3125rem 1.375rem rgb(122 163 22 / 16%)}.tags span{transition:background .25s,color .25s,border-color .25s,box-shadow .25s}.tags span:hover{background:var(--lime);color:#111210;border-color:#a9cc39;box-shadow:0 0.1875rem 0.75rem rgb(112 151 20 / 10%)}button:not(:disabled):hover,.menu-toggle:hover,.model-toolbar button:hover{background:var(--lime);border-color:#a9cc39;color:#111210}.contact-submit:not(:disabled):hover{background:#34431c;color:#fff}.hero .button:hover{background:#bde936}.hero .button:hover::before{background:#bde936}.text-link:hover,.scroll-link:hover{color:#4c6610}.scroll-link:hover>span{background:var(--lime);border-color:#a9cc39;color:#111210}button:focus-visible,.tags span:focus-visible{outline-color:#607b15}
.code-waiting .live-code{opacity:0;transform:translateY(1rem)}.code-revealed .live-code{animation:code-arrive .65s cubic-bezier(.16,1,.3,1) both}.live-code{white-space:nowrap}.code-icon{overflow:visible}@keyframes code-arrive{from{opacity:0;transform:translateY(1rem);filter:blur(0.1875rem)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
#over.about{grid-template-columns:1fr;gap:3.625rem}#over .model-viewer{width:100%;max-width:62.5rem;margin-inline:auto;aspect-ratio:2/1;min-height:21.875rem;background:#e9ede5}#over .about-copy{width:100%;max-width:46.25rem;margin-inline:auto}.model-toolbar{bottom:2.625rem;left:1.5rem;right:1.5rem}.model-viewer .visual-note{left:1.625rem}
@media(max-width:1100px){.header nav{display:none}.header .header-cta{margin-left:auto}.menu-toggle{display:flex;gap:0.875rem;background:transparent;color:var(--text);border:0.0625rem solid #b5bda6;border-radius:0.3125rem;padding:0.75rem}.header{gap:1.125rem}}@media(max-width:620px){.header{flex-wrap:wrap;gap:0.625rem;justify-content:space-between;height:auto;min-height:7.5rem;padding-top:0.75rem;padding-bottom:0.75rem}.header .logo{order:0}.header .menu-toggle{order:1}.header .header-cta{order:2;flex-basis:100%;justify-content:center;min-height:2.625rem;padding:0.625rem 0.9375rem;margin-left:0;font-size:0.875rem}.header .header-cta .cta-arrow{font-size:1.375rem;height:1.5rem;line-height:1.5rem}html{scroll-padding-top:9.875rem}#over .model-viewer{aspect-ratio:1.2;min-height:17.5rem}#over.about{gap:2rem}.model-toolbar{left:0.875rem;right:0.875rem}}@media(prefers-reduced-motion:reduce){.code-waiting .live-code{opacity:1;transform:none}.code-revealed .live-code{animation:none!important}}
@media(min-width:621px) and (max-width:1100px){.mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:0;padding-bottom:1.25rem}.mobile-nav a{padding:0.875rem 0;border-bottom:0.0625rem solid var(--line)}}

/* Stable service illustrations and unified header controls. */
.service,.service:hover{transform:none}
.service .service-icon,.service:hover .service-icon,.service:nth-child(3):hover .service-icon{transform:none;transition:none}
.design-icon svg{width:3.25rem;height:3.25rem;stroke:currentColor;stroke-width:2;overflow:visible}
.design-guide{opacity:.18;stroke-width:1;stroke-dasharray:3 4}
.design-arrow{stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.service:hover .design-arrow{animation:draw-design .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes draw-design{from{stroke-dashoffset:100;opacity:.25}to{stroke-dashoffset:0;opacity:1}}
.spinning-star{display:grid;place-items:center;width:3rem;height:3rem;line-height:1;transform-origin:50% 50%;animation:star-spin 12s linear infinite}
@keyframes star-spin{to{transform:rotate(360deg)}}
.header .header-cta,.header .menu-toggle{height:2.875rem;min-height:2.875rem;padding:0 1.125rem;align-items:center;justify-content:center}
.header .header-cta{user-select:none;box-shadow:none}
.header .header-cta:hover{transform:none;box-shadow:none;background:#bde936}
.header .header-cta span,.header .header-cta span:hover{background:transparent;box-shadow:none}
.header .header-cta::before{content:none}
.header .header-cta .cta-label{margin:0;transform:none}
.code-revealed .live-code{animation:code-arrive .95s cubic-bezier(.16,1,.3,1) both}
@keyframes code-arrive{from{opacity:0;transform:translateY(1.5rem);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.spinning-star,.service:hover .design-arrow{animation:none}.code-waiting .live-code{opacity:1;transform:none}}

/* Our process: bold outlines and crisp offset shadows. */
#werkwijze{background:var(--bg);color:var(--text);border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line)}
#werkwijze .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.875rem;margin-top:3.375rem;padding-right:0.5rem;padding-bottom:0.5rem}
#werkwijze .steps article{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:1.875rem 1.625rem 2rem;border:0.125rem solid #171815;border-radius:1.25rem;background:var(--lime);box-shadow:0.5rem 0.5rem 0 #171815}
#werkwijze .steps article:nth-child(2){background:#f1f0e8}
#werkwijze .step-number{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:#343830;color:var(--lime);font-size:0.875rem;font-weight:700;letter-spacing:0}
#werkwijze .steps article:nth-child(2) .step-number{color:#f1f0e8}
#werkwijze .steps h3{margin:4rem 0 1.25rem;font-size:clamp(1.6875rem,2.6vw,2.375rem);font-weight:600;line-height:1.12;letter-spacing:-.045em;max-width:11ch}
#werkwijze .steps p{max-width:none;color:#34392a;font-size:1rem;line-height:1.65}
@media(max-width:1000px){#werkwijze .steps{gap:1.5rem}#werkwijze .steps article{padding:1.5625rem 1.25rem}#werkwijze .steps h3{margin-top:2.75rem;font-size:1.75rem}}
@media(max-width:800px){#werkwijze .steps{grid-template-columns:1fr;gap:1.625rem;margin-top:2.25rem}#werkwijze .steps article{padding:1.75rem;border-radius:1.125rem;box-shadow:0.375rem 0.375rem 0 #171815}#werkwijze .steps h3{max-width:none;margin-top:2.375rem;font-size:2rem}#werkwijze .steps p{max-width:52ch}}

/* Floating navigation islands, adapted to the Webtaste palette. */
.header-shell,.header-shell.scrolled,.header-shell:has(.mobile-nav:not([hidden])){background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.header{height:6.25rem;gap:0.75rem}
.header .logo{margin-right:auto}
.header nav{display:flex;align-items:center;gap:0;background:#111210;padding:0.5rem;border-radius:1rem;min-height:3.5rem}
.header nav a{display:flex;align-items:center;justify-content:center;min-height:2.5rem;padding:0 1.125rem;border-radius:0.625rem;color:#f5f5ed;font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;transition:background .2s,color .2s}
.header nav a:hover,.header nav a:focus-visible{background:#2c3025;color:var(--lime)}
.header .header-cta,.header .menu-toggle{height:3.5rem;min-height:3.5rem;border:0;border-radius:1rem;background:#111210;color:#f5f5ed;padding:0.5rem 0.625rem 0.5rem 1.375rem;font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;gap:1.125rem}
.header .header-cta:hover,.header .header-cta:focus-visible,.header .menu-toggle:hover{background:#262b20;color:#f5f5ed;box-shadow:none;transform:none}
.header .header-cta .cta-arrow,.header .header-cta:hover .cta-arrow{display:block;flex-shrink:0;width:2.375rem;height:2.375rem;line-height:2.375rem;font-size:1.625rem;border-radius:0.625rem;background:var(--lime);color:#111210;margin:0}
.header .header-cta .cta-arrow>span{display:grid;place-items:center;margin:0;background:transparent}
.header .menu-toggle{display:none;padding:0.5rem 1.125rem}
.header .menu-toggle>span{display:grid;place-items:center;width:1.75rem;height:1.75rem;background:var(--lime);color:#111210;border-radius:0.5rem;font-size:1.25rem}
.header-shell .mobile-nav:not([hidden]){background:#111210;color:#f5f5ed;border-radius:1rem;margin:0 5.4% 0.75rem;padding:0.625rem 1.375rem;box-shadow:0 0.5rem 1.25rem rgb(17 18 16 / 10%)}
.header-shell .mobile-nav a{border-color:#363b2d;padding:1rem 0;font-size:0.875rem;font-weight:600}
.header-shell .mobile-nav a:last-child{border-bottom:0}
.header-shell .mobile-nav a:hover{color:var(--lime)}
@media(max-width:1100px){.header nav{display:none}.header .menu-toggle{display:flex}.header .header-cta{margin-left:auto}.header .logo{margin-right:0}}
@media(max-width:620px){.header{height:auto;min-height:8.625rem;gap:0.625rem;padding-top:0.75rem;padding-bottom:0.75rem}.header .header-cta{flex-basis:100%;justify-content:space-between;margin:0;padding-left:1.25rem}.header .header-cta,.header .menu-toggle{height:3.125rem;min-height:3.125rem;border-radius:0.8125rem}.header .header-cta .cta-arrow{height:2.125rem;width:2.125rem;line-height:2.125rem;font-size:1.5rem;border-radius:0.5rem}.header-shell .mobile-nav:not([hidden]){margin-left:6%;margin-right:6%}}

/* A contrasting ticker and a transparent, page-following 3D backdrop. */
.motion-band .ticker{background:#111210;color:#f5f5ed;border-color:#30362a}
.motion-band .ticker span{color:var(--lime)}
.pointer-glow.on-dark{z-index:2;background:radial-gradient(circle,rgb(214 252 82 / 28%),rgb(214 252 82 / 8%) 35%,transparent 68%);clip-path:inset(max(0rem,calc(var(--band-top) - var(--glow-top))) 0 max(0rem,calc(var(--glow-top) + 30rem - var(--band-bottom))) 0)}
.code-icon .live-code,.code-waiting .live-code,.code-revealed .live-code{animation:none;opacity:1;transform:none;filter:none;clip-path:none}
body>.background-model{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;min-height:0;aspect-ratio:auto;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;z-index:0;pointer-events:none;opacity:.16}
.background-model .model-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;touch-action:pan-y}
.background-model .model-fallback{background:transparent;object-fit:contain;padding:8%}
.background-model .visual-note{display:none}
.background-model .model-toolbar{opacity:0;pointer-events:none}
.background-model:focus-within .model-toolbar{opacity:1;pointer-events:auto}
.background-model .model-status:empty{display:none}
#over.about{display:block}#over .about-copy{position:relative}
.scrolled .logo{background:rgb(245 245 237 / 90%);border-radius:0.75rem;box-shadow:0 0 0 0.625rem rgb(245 245 237 / 90%)}
@media(hover:hover) and (pointer:fine){.motion-band,.motion-band *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M5 16h22M16 5v22M8 8l16 16M8 24L24 8' fill='none' stroke='%23111210' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M5 16h22M16 5v22M8 8l16 16M8 24L24 8' fill='none' stroke='%23d6fc52' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 16 16,auto}}

/* Opaque header keeps all navigation readable above moving page content. */
.header-shell,.header-shell.scrolled,.header-shell:has(.mobile-nav:not([hidden])){background:var(--bg);box-shadow:0 0.0625rem 0 var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.scrolled .logo{background:none;box-shadow:none}
.service .arrow-viewer{position:relative;width:5.625rem;height:5.625rem;min-height:5.625rem;max-width:none;margin:0;background:transparent;border:0;border-radius:0;overflow:visible;aspect-ratio:1;box-shadow:none}
.arrow-viewer .model-canvas{position:absolute;inset:0;width:5.625rem;height:5.625rem;touch-action:pan-y}
.arrow-viewer .model-canvas canvas{display:block;width:100%;height:100%}
.arrow-viewer .arrow-fallback{position:absolute;inset:0.75rem;display:grid;place-items:center}
.arrow-viewer.model-ready .arrow-fallback{display:none}
.arrow-viewer .model-toolbar,.arrow-viewer .model-status{display:none}
@media(max-width:700px){.service .arrow-viewer{height:4.6875rem;min-height:4.6875rem}.arrow-viewer .model-canvas{width:5rem;height:4.6875rem}}

/* The wordmark belongs to the hero, with its own space and full contrast. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2rem;align-items:center}
.hero>.eyebrow{grid-column:1/-1}
.hero h1{font-size:clamp(3rem,4.8vw,4.625rem);line-height:1.08;letter-spacing:-.055em;margin:2rem 0}
.hero h1>span{display:block;max-width:12ch}
.hero .hero-model{position:relative;inset:auto;width:100%;height:20rem;min-height:0;max-width:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:1;pointer-events:auto;overflow:visible}
.hero-model .model-canvas{inset:0 0 2.625rem;pointer-events:auto}
.hero-model .model-fallback{background:transparent;object-fit:contain;padding:6%}
.hero-model .model-toolbar{bottom:0;left:0.5rem;right:0.5rem;opacity:1}
.hero-model .visual-note{display:none}
.hero-model .model-status{bottom:2.5rem;background:var(--bg);color:var(--text)}
.hero>.hero-bottom{grid-column:1/-1;margin-top:1.5rem}
@media(max-width:1100px){.hero{grid-template-columns:1fr;gap:0}.hero h1{font-size:clamp(3rem,7.5vw,5rem);margin-bottom:0.625rem}.hero h1>span{max-width:none}.hero .hero-model{height:16.25rem;max-width:53.125rem;justify-self:center}.hero>.hero-bottom{margin-top:1.875rem}}
@media(max-width:620px){.hero h1{font-size:clamp(2.625rem,9vw,3.625rem)}.hero .hero-model{height:12.1875rem;margin-top:0.5rem}.hero-model .model-toolbar{font-size:0.75rem}.hero-model .model-toolbar>span{max-width:none}.hero>.hero-bottom{margin-top:1.5rem}}

/* A square transparent drawing surface leaves room for every rotation. */
.hero{position:relative;isolation:isolate;overflow:visible}
.hero .hero-model{z-index:0;isolation:auto;overflow:visible}
.hero .hero-model .model-canvas{inset:auto 0 auto;top:calc(50% - 1.3125rem);width:100%;height:auto;aspect-ratio:1;transform:translateY(-50%);overflow:visible}
.hero>.eyebrow,.hero>h1,.hero>.hero-bottom{position:relative;z-index:2}
.hero-model .model-toolbar{z-index:3}

/* Lead the hero with the interactive wordmark on every screen size. */
.hero{grid-template-columns:minmax(0,1fr)}
.hero .hero-model{grid-column:1/-1;max-width:62.5rem;justify-self:center;margin-top:1.375rem;height:17.5rem}
.hero h1{grid-column:1/-1;font-size:clamp(3rem,7.5vw,6.25rem);margin-top:2.125rem}
.hero h1>span{max-width:none}
@media(max-width:1100px){.hero .hero-model{height:16.25rem}}
@media(max-width:620px){.hero .hero-model{height:12.1875rem;margin-top:1rem}.hero h1{font-size:clamp(2.625rem,9vw,3.625rem);margin-top:1.75rem}}

/* Only the transparent logo drawing surface reaches the window edges. */
.hero .hero-model .model-canvas{left:50%;right:auto;width:var(--scene-width,100vw);height:var(--scene-height,100vh);aspect-ratio:auto;transform:translate(-50%,-50%)}

.hero .hero-model .model-canvas{transform:translate(-50%,calc(-50% + var(--scroll-drift,0rem)))}

/* Continue the contact colour through the full-width footer. */
.footer-shell{position:relative;z-index:1;background:var(--lime)}
.footer-shell footer{color:#111210;background:transparent}
.footer-shell footer span:not(.logo-dot),.footer-shell footer>a:last-child{color:#344020}
.footer-shell .logo .brand-spark{stroke:#344020}
.footer-shell footer>a:last-child:hover{color:#111210;text-decoration:underline;text-underline-offset:0.25rem}

/* A spacious closing section with an oversized, outlined brand asset. */
.footer-shell{overflow:hidden}
.footer-shell .spacious-footer{display:block;padding-top:3.4375rem;padding-bottom:0}
.footer-top{display:flex;justify-content:space-between;gap:3.75rem;border-top:0.0625rem solid rgb(17 18 16 / 22%);padding-top:2.75rem}
.footer-about{max-width:26.25rem}
.footer-about .logo{width:auto}
.footer-about p{font-size:1.125rem;line-height:1.6;margin:1.5rem 0 1.125rem;color:#28321b}
.footer-mail{display:inline-block;font-size:1.125rem;border-bottom:0.0625rem solid #344020;padding-bottom:0.3125rem}
.footer-shell .footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:0.875rem;min-width:12.5rem;font-size:1.0625rem}
.footer-shell .footer-nav .footer-label{font-size:0.75rem;letter-spacing:0.0875rem;color:#344020;margin-bottom:0.5rem}
.footer-nav a:hover,.footer-mail:hover{color:#344020;text-decoration:underline;text-underline-offset:0.3125rem}
.footer-meta{display:flex;align-items:center;gap:1.75rem;margin-top:6.5625rem;padding-bottom:1.875rem;font-size:0.8125rem}
.footer-meta>a{margin-left:auto;color:#344020}
.footer-meta>a:hover{text-decoration:underline;text-underline-offset:0.25rem}
.footer-wordmark{width:112%;margin-left:-6%;margin-bottom:-1.3vw;line-height:0;color:#111210;opacity:.16;pointer-events:none}
.footer-wordmark svg{display:block;width:100%;height:auto}
.footer-wordmark .brand-spark{stroke:currentColor}
@media(max-width:700px){.footer-shell .spacious-footer{padding-top:1.5rem}.footer-top{gap:2.1875rem;padding-top:1.875rem;flex-direction:column}.footer-about p{font-size:1rem}.footer-shell .footer-nav{gap:0.75rem;font-size:1rem}.footer-meta{flex-wrap:wrap;gap:1rem;margin-top:3.4375rem;padding-bottom:1.875rem}.footer-meta>a{margin-left:0;flex-basis:100%}.footer-wordmark{width:116%;margin-left:-8%;margin-bottom:-1vw}}

/* Shared alignment and typography, with a distinct spacious footer. */
.footer-shell .spacious-footer{padding-top:3.5rem}
.footer-top{display:block;padding-top:3rem}
.footer-about{max-width:40rem}
.footer-about p{margin:0 0 1.75rem;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.25;letter-spacing:-.035em;color:#111210}
.footer-mail{font-size:1.125rem}
.footer-meta{margin-top:8.75rem}
@media(max-width:620px){.footer-shell .spacious-footer{padding-top:2rem}.footer-top{padding-top:2rem}.footer-about p{font-size:1.625rem}.footer-meta{margin-top:5.625rem}}

/* Footer height follows its contents, including when browser zoom changes the viewport. */
.footer-shell .spacious-footer{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding-top:0}
.footer-top{padding-top:clamp(3rem,8vh,6rem);border-top:0}
.footer-meta{margin-top:auto;padding-top:6.25rem;flex-shrink:0}
.footer-wordmark{flex-shrink:0}
@media(max-width:620px){.footer-top{padding-top:2.5rem}.footer-meta{margin-top:auto;padding-top:4.5rem}}

/* Stack footer credits along the right content edge. */
.footer-shell .footer-meta{flex-direction:column;align-items:flex-end;flex-wrap:nowrap;gap:0.625rem;text-align:right}
.footer-shell .footer-meta>a{margin-left:0;flex-basis:auto}

/* The same substantial cards across services and process. */
#diensten .service-grid{gap:1.75rem}
#diensten .service{border:0.125rem solid #171815;border-radius:1.25rem;background:#f1f0e8;box-shadow:0.5rem 0.5rem 0 #171815;padding:1.875rem 1.625rem 2rem}
#diensten .service:hover{border-color:#171815;box-shadow:0.5rem 0.5rem 0 #171815}
#diensten .service::before{content:none}
#werkwijze .steps article,#werkwijze .steps article:nth-child(2){background:#f1f0e8;transition:background-color .25s ease}
#werkwijze .steps article:hover,#werkwijze .steps article:focus-within{background:var(--lime)}
#werkwijze .steps .step-number,#werkwijze .steps article:nth-child(2) .step-number{color:#f1f0e8}
#werkwijze .steps article:hover .step-number{color:var(--lime)}
/* One integrated contact footer, with the brand mark as its closing edge. */
.footer-shell .spacious-footer>.contact{padding:clamp(3.5rem,7vw,6rem) 0 0;background:transparent;width:100%}
.footer-shell .contact-layout{gap:clamp(2rem,5vw,4.375rem)}
.footer-shell .contact .eyebrow{font-size:0.8125rem;color:#111210}
.footer-shell .contact .contact-mail span{font-size:1.3125rem;color:#111210}
.footer-shell .contact-submit>span{color:#f1f7e3;font-size:1rem}
.footer-shell .contact-submit>span:last-child{font-size:1.5rem}
.footer-shell .contact-form label span{font-size:0.9375rem;color:#5b6840}
.footer-shell .footer-meta{padding-top:4rem;padding-bottom:2rem}
@media(max-width:620px){#diensten .service{padding:1.75rem 1.375rem;border-radius:1.125rem;box-shadow:0.375rem 0.375rem 0 #171815}.footer-shell .spacious-footer>.contact{padding-top:3rem}.footer-shell .footer-meta{padding-top:3rem}}
@media(prefers-reduced-motion:reduce){#werkwijze .steps article{transition:none}}

/* Compact contact composition with the closing links alongside it. */
.footer-shell .spacious-footer{display:grid;grid-template-columns:minmax(0,1fr) 10rem;column-gap:2rem;align-content:start;align-items:start}
.footer-shell .spacious-footer>.contact{max-width:none;min-width:0;justify-self:stretch;padding-top:4rem}
.footer-shell .contact-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center}
.footer-shell .contact-intro h2{font-size:clamp(2.5rem,4.5vw,4rem)}
.footer-shell .contact-form{min-width:0;padding:1.625rem}
.footer-shell .footer-meta{margin:0;padding:4rem 0 0;align-self:center}
.footer-shell .footer-wordmark{grid-column:1/-1;margin-top:3rem}
.footer-shell footer .contact-submit>span{color:#f1f7e3}
@media(max-width:1000px){.footer-shell .spacious-footer{grid-template-columns:minmax(0,1fr)}.footer-shell .footer-meta{padding-top:2rem}.footer-shell .contact-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:700px){.footer-shell .contact-layout{grid-template-columns:minmax(0,1fr);gap:1.75rem}.footer-shell .spacious-footer>.contact{padding-top:3rem}.footer-shell .contact-intro h2{font-size:clamp(2.875rem,9vw,4rem)}.footer-shell .contact-form{padding:1.4375rem 1.25rem}.footer-shell .footer-wordmark{margin-top:2rem}}

/* Align the footer copy and closing credits to the form edges. */
.footer-shell .contact-layout{align-items:start}
.footer-shell .spacious-footer>.contact{padding-bottom:0}
.footer-shell .footer-contact-inner>.eyebrow{position:relative;top:0.75rem}
.footer-shell .footer-meta{align-self:end;padding:0;margin:0;line-height:1.3}
@media(max-width:1000px){.footer-shell .footer-meta{padding-top:2rem}}

#over .about-copy{margin-inline:0}
#diensten .service{transition:background-color .25s ease}
#diensten .service:hover,#diensten .service:focus-within{background:var(--lime)}
.hero-heading{position:relative;z-index:2;grid-column:1/-1;margin-top:2.125rem}
.hero .hero-heading h1{margin:0}
.hero-heading>.button{position:absolute;right:0;top:0.5rem;gap:1.75rem;padding:1.125rem 1.375rem}
.service .star-viewer{position:relative;width:5.625rem;height:5.625rem;min-height:5.625rem;margin:0;border:0;background:transparent;box-shadow:none;overflow:visible}
.star-viewer .model-canvas{position:absolute;inset:0;width:5.625rem;height:5.625rem;touch-action:pan-y}
.star-viewer canvas{display:block;width:100%;height:100%}
.star-viewer .model-toolbar,.star-viewer .model-status,.star-viewer.model-ready .star-fallback{display:none}
.cursor-sculpture{position:fixed;left:0;top:0;width:2.5rem;height:2.5rem;z-index:10000;pointer-events:none;display:none;filter:drop-shadow(0 0 0.0625rem #111210)}
.cursor-sculpture.active{display:block}
@media(hover:hover) and (pointer:fine){html.has-3d-cursor body,html.has-3d-cursor body *{cursor:none}html.has-3d-cursor input,html.has-3d-cursor textarea{cursor:text}}
@media(max-width:900px){.hero-heading>.button{position:static;margin-top:1.75rem}.hero-heading{margin-top:1.75rem}}
/* A small double pulse, followed by a long quiet pause. */
.hero .hero-heading>.button{animation:cta-heartbeat 4.8s ease-in-out infinite;transform-origin:center}
.hero .hero-heading>.button:hover,.hero .hero-heading>.button:focus-visible{animation-play-state:paused}
@keyframes cta-heartbeat{0%,6%,18%,100%{scale:1}3%{scale:1.025}11%{scale:1.018}}
#diensten .service .arrow-viewer,#diensten .service .star-viewer{align-self:center;margin-inline:auto}
#diensten .service .arrow-viewer .model-canvas,#diensten .service .star-viewer .model-canvas{width:100%;height:100%}
/* Keep cards in one equal-height swipeable row on tablet and phone. */
@media(max-width:1100px){
 #diensten .service-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(18.75rem,46%);overflow-x:auto;gap:1.75rem;padding:0.125rem 0.75rem 1rem 0.125rem;scroll-snap-type:x proximity;scroll-padding-inline:0.125rem;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#69705f transparent}
 #diensten .service,#diensten .service:last-child{grid-column:auto;min-width:0;scroll-snap-align:start}
 #diensten .service:last-child .small-label{min-height:2.5rem}
 #diensten .model-canvas{touch-action:pan-x pan-y}
}
@media(max-width:620px){#diensten .service-grid{grid-auto-columns:86%;gap:1.375rem}}
/* Preserve the form and bottom-aligned credits side by side on tablets. */
@media(min-width:801px) and (max-width:1000px){
 .footer-shell .spacious-footer{grid-template-columns:minmax(0,1fr) 8.75rem;column-gap:1.375rem}
 .footer-shell .contact-layout{gap:1.375rem}
 .footer-shell .contact-form{padding:1.25rem}
 .footer-shell .contact-intro h2{font-size:2.25rem}
 .footer-shell .contact-intro p{font-size:1rem}
 .footer-shell .contact .contact-mail span{font-size:1.125rem}
 .footer-shell .footer-meta{padding:0;font-size:0.75rem}
}
@media(prefers-reduced-motion:reduce){.hero .hero-heading>.button{animation:none}}

/* Closing credits become a single balanced row below the contact content. */
@media(max-width:800px){
 .footer-shell .footer-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:0.75rem;width:100%;text-align:center;font-size:clamp(0.625rem,1.65vw,0.8125rem);padding-top:1.75rem}
 .footer-shell .footer-meta>a{text-align:left}
 .footer-shell .footer-meta>span:last-child{text-align:right}
}
@media(max-width:1100px){
 #werkwijze .steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(18.75rem,46%);overflow-x:auto;gap:1.75rem;padding:0.125rem 0.75rem 1rem 0.125rem;scroll-snap-type:x proximity;scroll-padding-inline:0.125rem;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#69705f transparent}
 #werkwijze .steps article{scroll-snap-align:start;grid-column:auto}
}
@media(max-width:620px){#werkwijze .steps{grid-auto-columns:86%;gap:1.375rem}}

/* A left-to-right route from the first conversation to launch. */
.process-route{margin-top:3.375rem;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#69705f transparent;padding-bottom:1.125rem;scroll-snap-type:x proximity}
.process-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto 5rem repeat(3,auto);gap:1rem;min-width:70rem;padding:0.125rem 0.625rem 0.625rem 0.125rem;background:repeating-linear-gradient(to right,transparent 0,transparent calc(20% - 0.0625rem),#daddce calc(20% - 0.0625rem),#daddce 20%)}
.process-phase{padding:0.75rem 0.5rem;background:#ebece2;border-radius:0.375rem;text-align:center;font-size:0.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.5rem}
.route-step{position:relative;padding:1.5625rem 1.25rem;border:0.125rem solid #171815;border-radius:1.25rem;background:#f1f0e8;box-shadow:0.375rem 0.375rem 0 #171815;align-self:start;scroll-snap-align:start;transition:background-color .25s ease}
.route-step:hover,.route-step:focus-visible{background:var(--lime)}
.route-step .step-number{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:#171815;color:var(--lime);font-size:0.75rem;margin-bottom:1.375rem}
.route-step h3{font-size:1.5625rem;line-height:1.1;letter-spacing:-.04em;font-weight:600;margin:0 0 1.125rem}
.route-step p{font-size:0.9375rem;line-height:1.6;color:#34392a;margin:0;max-width:40ch}
.route-step-1{grid-column:1;grid-row:2/4}
.route-step-2{grid-column:2/4;grid-row:3}
.route-step-3{grid-column:3;grid-row:4}
.route-step-4{grid-column:4;grid-row:4}
.route-step-5{grid-column:4;grid-row:5}
.route-step-6{grid-column:5;grid-row:5}
@media(max-width:700px){.process-route{margin-top:2.25rem}.process-track{min-width:86.25rem}.route-step h3{font-size:1.6875rem}.route-step p{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.route-step{transition:none}}
/* Keep the complete route height inside the usable viewport. */
.process-route{--route-height:clamp(18.75rem,calc(100svh - var(--site-header-height,6.25rem) - 7.5rem),36.25rem);margin-top:1.875rem}
.process-track{height:var(--route-height);box-sizing:border-box;grid-template-rows:2.125rem 2.25rem repeat(3,minmax(0,1fr));gap:0.625rem;min-width:77.5rem}
.process-phase{margin-bottom:0;padding:0.5625rem 0.375rem;font-size:0.625rem;line-height:0.875rem}
.route-step{box-sizing:border-box;padding:0.8125rem 0.9375rem;border-radius:0.875rem;box-shadow:0.25rem 0.25rem 0 #171815;height:100%;overflow-y:auto}
.route-step .step-number{float:right;width:1.5rem;height:1.5rem;font-size:0.625rem;margin:0 0 0.3125rem 0.5rem}
.route-step h3{font-size:1.25rem;line-height:1.1;margin:0 0 0.5625rem}
.route-step p{font-size:0.8125rem;line-height:1.4;max-width:52ch}
.route-step-1{grid-row:2/4}
@media(max-width:700px){.process-route{margin-top:1.5rem}.process-track{min-width:90.625rem}.route-step h3{font-size:1.25rem}.route-step p{font-size:0.8125rem}}
/* On short landscape screens the same sequence becomes one compact row. */
@media(max-height:700px){
 .process-route{--route-height:calc(100svh - var(--site-header-height,6.25rem) - 4rem)}
 .process-track{min-width:0;grid-template-columns:none;grid-template-rows:minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:minmax(17.5rem,32vw);background:none}
 .process-phase{display:none}
 .route-step{grid-column:auto;grid-row:1;padding:1rem}
 .route-step h3{font-size:1.25rem}.route-step p{font-size:0.8125rem}
}
.reading-progress{position:absolute;top:0;left:0;width:100%;height:0.1875rem;background:var(--lime);transform:scaleX(0);transform-origin:left;pointer-events:none;z-index:5}
.process-route.custom-scrollbar{scrollbar-width:none}
.process-route.custom-scrollbar::-webkit-scrollbar{display:none}
.route-scrollbar{display:block;appearance:none;-webkit-appearance:none;width:100%;height:1.375rem;padding:0;margin:0;background:transparent;border:0;accent-color:#69705f}
.route-scrollbar[hidden]{display:none}
.route-scrollbar::-webkit-slider-runnable-track{height:0.3125rem;background:#daddce;border-radius:0.3125rem}
.route-scrollbar::-webkit-slider-thumb{-webkit-appearance:none;width:4.5rem;height:0.4375rem;margin-top:-0.0625rem;background:#69705f;border-radius:0.3125rem}
.route-scrollbar::-moz-range-track{height:0.3125rem;background:#daddce;border-radius:0.3125rem}
.route-scrollbar::-moz-range-thumb{width:4.5rem;height:0.4375rem;background:#69705f;border:0;border-radius:0.3125rem}
html.has-3d-cursor .route-scrollbar,html.has-3d-cursor .route-scrollbar::-webkit-slider-thumb{cursor:none}

.reading-progress{height:0.3125rem;box-sizing:border-box;border:0.0625rem solid #111210}
.route-scrollbar{position:relative;touch-action:none;user-select:none}
.route-scrollbar::before{content:"";position:absolute;left:0;right:0;top:0.5625rem;height:0.3125rem;background:#daddce;border-radius:0.3125rem}
.route-scrollbar>span{position:absolute;top:0.5rem;height:0.4375rem;background:#69705f;border-radius:0.3125rem}
/* Equal first-row cards and enough width for all copy without inner scrolling. */
.process-track{min-width:100rem;grid-template-rows:2.125rem 1rem repeat(3,minmax(0,1fr))}
.route-step{overflow:visible}
.route-step-1{grid-row:3}
@media(max-width:700px){.process-track{min-width:100rem}}
@media(max-height:700px){.process-track{min-width:0;grid-template-rows:minmax(0,1fr);grid-auto-columns:minmax(21.25rem,36vw)}.route-step-1{grid-row:1}}
/* Scrollable content reaches both viewport edges. */
#werkwijze .process-route{width:var(--page-width,100vw);margin-left:calc((100% - var(--page-width,100vw))/2)}
@media(max-width:1100px){#diensten .service-grid{width:var(--page-width,100vw);margin-left:calc((100% - var(--page-width,100vw))/2)}}
.header .header-cta.cta-reveal{clip-path:inset(calc(50% - 1rem) 0 calc(50% - 1rem) calc(100% - 0.25rem) round 0.125rem);transition:clip-path .6s cubic-bezier(.22,1,.36,1),background .3s;animation:header-hint 3.8s ease-in-out infinite}
.header .header-cta.cta-reveal.is-revealed,.header .header-cta.cta-reveal:focus-visible{clip-path:inset(0 round 1rem);animation:none}
@keyframes header-hint{0%,35%,100%{opacity:.65}12%,24%{opacity:1}18%{opacity:.8}}
@media(prefers-reduced-motion:reduce){.header .header-cta.cta-reveal{animation:none;transition:none}}

/* The initial gutter scrolls away together with the cards. */
#werkwijze .process-track{margin-left:var(--route-start,5.4vw)}
@media(max-width:1100px){#diensten .service-grid{padding-left:var(--services-start,5.4vw);scroll-padding-left:0}}

/* Shared icon dimensions and diagonal rollover. */
.header .menu-toggle>.menu-symbol,.hero .hero-heading>.button .cta-arrow{position:relative;display:block;flex-shrink:0;width:2.375rem;height:2.375rem;line-height:2.375rem;font-size:1.625rem;border-radius:0.625rem;overflow:hidden;margin:0}
.header .menu-toggle>.menu-symbol>span,.hero .hero-heading>.button .cta-arrow>span{display:grid;place-items:center;position:absolute;inset:0;margin:0}
.menu-toggle:hover .menu-symbol>span:first-child,.menu-toggle:focus-visible .menu-symbol>span:first-child{transform:translate(110%,-110%)}
.menu-toggle:hover .menu-symbol>span:last-child,.menu-toggle:focus-visible .menu-symbol>span:last-child{transform:translate(0,0)}
@media(max-width:620px){.header .menu-toggle>.menu-symbol,.hero .hero-heading>.button .cta-arrow{width:2.125rem;height:2.125rem;line-height:2.125rem;font-size:1.5rem;border-radius:0.5rem}}
@media(prefers-reduced-motion:reduce){.menu-symbol>span,.hero .hero-heading>.button .cta-arrow>span{transition:none}}

/* A rotating menu symbol and an inverted hero arrow tile. */
.header .menu-toggle .menu-symbol>span:last-child{display:none}
.header .menu-toggle .menu-symbol>span:first-child{transform:rotate(0);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.header .menu-toggle:hover .menu-symbol>span:first-child,.header .menu-toggle:focus-visible .menu-symbol>span:first-child{transform:rotate(180deg)}
.header .menu-toggle[aria-expanded="true"] .menu-symbol>span:first-child{transform:rotate(225deg)}
.hero .hero-heading>.button .cta-arrow{background:#111210;color:var(--lime)}
.hero .hero-heading>.button .cta-arrow>span{color:var(--lime)}
.route-scrollbar>span::after{content:"";position:absolute;right:0;top:50%;width:0.5625rem;height:0.5625rem;border-top:0.125rem solid #69705f;border-right:0.125rem solid #69705f;transform:translateY(-50%) rotate(45deg);pointer-events:none}
@media(prefers-reduced-motion:reduce){.header .menu-toggle .menu-symbol>span:first-child{transition:none}}

/* Dropdown floats below the header without changing its height. */
.header-shell .mobile-nav:not([hidden]){position:absolute;top:100%;left:5.4%;right:5.4%;margin:0;max-height:calc(100dvh - var(--site-header-height,6.25rem) - 1rem);overflow-y:auto;z-index:10}
@media(max-width:700px){.header-shell .mobile-nav:not([hidden]){left:6%;right:6%}}
#diensten .service-grid.custom-scrollbar{scrollbar-width:none}
#diensten .service-grid.custom-scrollbar::-webkit-scrollbar{display:none}
.route-scrollbar.at-end>span::after{transform:translateY(-50%) rotate(-135deg)}

/* Hide the invitation completely until it is needed. */
.header .header-cta.cta-reveal{animation:none;opacity:0;pointer-events:none;clip-path:inset(0 0 0 100%);transition:clip-path .6s cubic-bezier(.22,1,.36,1),opacity .25s}
.header .header-cta.cta-reveal.is-revealed{opacity:1;pointer-events:auto;clip-path:inset(0 round 1rem)}
.header .menu-toggle>.menu-label{display:block;width:auto;height:auto;background:transparent;font-size:0.8125rem;line-height:1;max-width:3.75rem;overflow:hidden;opacity:1;transition:max-width .4s,opacity .25s}
.header .menu-toggle{transition:padding .4s,gap .4s}
.header .menu-toggle.compact-menu{padding:0.5rem 0.625rem;gap:0}
.header .menu-toggle.compact-menu>.menu-label{max-width:0;opacity:0}
.route-scrollbar.at-end>span::after{right:50%;border-color:#f5f5ed;transform:translate(50%,-50%) rotate(-135deg)}
@media(prefers-reduced-motion:reduce){.header .header-cta.cta-reveal,.header .menu-toggle,.header .menu-toggle>.menu-label{transition:none}}
.header .menu-toggle>.menu-label{color:#f5f5ed}
/* Keep the same CTA components at every breakpoint. */
.header .header-cta{display:inline-flex;background:#111210;color:#f5f5ed;border-radius:1rem;white-space:nowrap}
.header .header-cta .cta-arrow,.header .header-cta:hover .cta-arrow{width:2.375rem;height:2.375rem;line-height:2.375rem;font-size:1.625rem;border-radius:0.625rem;background:var(--lime);color:#111210}
.header .menu-toggle>.menu-symbol{width:2.375rem;height:2.375rem;line-height:2.375rem;font-size:1.625rem;border-radius:0.625rem}
.hero .hero-heading>.button .cta-arrow{width:2.375rem;height:2.375rem;line-height:2.375rem;font-size:1.625rem;border-radius:0.625rem}
@media(max-width:620px){
 .header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:2.625rem 3.5rem;min-height:8.375rem;height:auto;gap:0.625rem;padding-top:0.75rem;padding-bottom:0.875rem;align-items:center}
 .header .logo{grid-column:1/-1;grid-row:1;justify-self:start}
 .header .header-cta{grid-column:1;grid-row:2;order:0;flex-basis:auto;width:100%;min-width:0;margin:0;height:3.5rem;min-height:3.5rem;padding:0.5rem 0.625rem 0.5rem 0.875rem;gap:0.625rem;justify-content:space-between;font-size:clamp(0.6875rem,2.9vw,0.8125rem)}
 .header .menu-toggle{grid-column:2;grid-row:2;order:0;height:3.5rem;min-height:3.5rem;border-radius:1rem;padding:0.5rem 0.625rem;gap:0.5rem}
 .header .menu-toggle>.menu-label{font-size:0.6875rem}
 .header .menu-toggle.compact-menu{padding:0.5rem 0.625rem;gap:0}
}
/* Text-style leading for reading sizes; display headings use optical spacing below. */
:root{--leading-title:1.205882;--leading-heading:1.2;--leading-body:1.294118;--leading-caption:1.333333}
body{line-height:var(--leading-body)}
.hero h1,h2,.footer-shell .contact-intro h2{line-height:clamp(1.06em,calc(1em + .5rem),1.205882em)}
h3,#werkwijze .route-step h3{line-height:var(--leading-heading)}
.section-heading p,.service p,.about-copy p,details p,.contact-intro>p,.footer-about p,.route-step p{line-height:var(--leading-body)}
summary,.contact-mail,.contact-form input,.contact-form textarea,.form-status{line-height:var(--leading-body)}
.eyebrow,.service .small-label,.process-phase,.contact-form .form-note,.footer-shell .footer-meta{line-height:var(--leading-caption)}

/* Use font-relative sizes so browser zoom scales type and controls together.
   Breakpoints change the layout only where the available space requires it. */
.hero h1{font-size:5rem}
h2{font-size:3.5rem}
.service h3{font-size:1.875rem}
.service .code-icon{font-size:1.25rem}
.footer-shell .contact-intro h2{font-size:3rem}
@media(max-width:900px){
 .hero h1{font-size:3.75rem}
 h2,.about-copy h2{font-size:2.5rem}
 .footer-shell .contact-intro h2{font-size:2.5rem}
}
@media(max-width:620px){
 .hero h1{font-size:2.625rem}
 .header .header-cta{font-size:.75rem}
 .footer-shell .footer-meta{font-size:.75rem}
}

/* Sections follow the viewport instead of stopping at a fixed desktop width. */
.wrap{width:100%;max-width:none;padding-inline:5.4%}
main>section,.section-heading>*,.about>*,.faq>*,.footer-shell .spacious-footer>*,.footer-shell .contact-layout>*{min-width:0}
.footer-shell .spacious-footer{height:auto;min-height:0;align-content:start}
.footer-shell .footer-wordmark{width:100%;max-width:100%;margin-inline:0;margin-bottom:0}
@media(max-width:700px){.wrap{padding-inline:6%}}

@media(min-width:1001px){
 .footer-shell .spacious-footer{grid-template-columns:minmax(0,1fr) minmax(10rem,14%)}
}

/* One desktop design scale for typography, spacing, controls and cards.
   Up to 1440px keep the existing mobile/tablet sizes; beyond it scale together. */
@media(min-width:1440px){
 html{font-size:calc(100vw / 90)}
}

/* Keep the header on one row; buttons never absorb spare width. */
@media(max-width:620px){
 .header{display:flex;flex-wrap:nowrap;min-height:4.75rem;height:auto;gap:.5rem;padding-block:.625rem}
 .header .logo{flex:0 0 9.625rem;min-width:9.625rem;margin-right:auto;order:0}
 .header .logo svg{display:block;width:100%;height:auto}
 .header .header-cta{flex:0 0 auto;width:max-content;margin:0;order:1;justify-content:center;gap:.625rem;padding:.5rem .625rem;height:3.5rem;min-height:3.5rem;font-size:.75rem}
 .header .menu-toggle{flex:0 0 auto;order:2;margin:0;padding:.5rem;gap:0}
 .header .menu-toggle>.menu-label{display:none}
 .header .menu-toggle.compact-menu{padding:.5rem}
}
@media(max-width:520px){
 .header.wrap{padding-inline:.75rem;gap:.375rem}
 .header .logo{flex-basis:9.625rem}
 .header .header-cta{font-size:.6875rem;gap:.375rem;padding:.5rem;height:3rem;min-height:3rem}
 .header .header-cta .cta-label{max-width:6rem;white-space:normal;text-align:left}
 .header .header-cta .cta-arrow,.header .header-cta:hover .cta-arrow,.header .menu-toggle>.menu-symbol{width:2rem;height:2rem;line-height:2rem;font-size:1.5rem}
 .header .menu-toggle{height:3rem;min-height:3rem}
}

/* Reserve the logo's full width; compact the actions instead. */
@media(max-width:520px){
 .header .header-cta{font-size:.6875rem;padding:.375rem;gap:.25rem;height:2.75rem;min-height:2.75rem}
 .header .header-cta .cta-label{max-width:5rem;line-height:1.2}
 .header .header-cta .cta-arrow,.header .header-cta:hover .cta-arrow,.header .menu-toggle>.menu-symbol{width:1.75rem;height:1.75rem;line-height:1.75rem;font-size:1.375rem}
 .header .menu-toggle,.header .menu-toggle.compact-menu{height:2.75rem;min-height:2.75rem;padding:.5rem}
}
@media(max-width:360px){
 .header .header-cta{width:2.75rem;gap:0}
 .header .header-cta .cta-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Vector symbols cannot be replaced by a phone's emoji font. */
.ui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex-shrink:0;pointer-events:none}
.cta-arrow>span .ui-icon{width:1em;height:1em;margin:auto}
.asterisk .ui-icon,.star-fallback .ui-icon{display:block}
.model-toolbar button .ui-icon{vertical-align:middle}

/* A dark closing panel, with a welcoming opening and the existing contact form. */
.footer-shell{margin:1rem;background:#111210;color:#f5f5ed;border-radius:1.75rem;overflow:hidden}
.footer-shell .spacious-footer{display:block;width:100%;min-height:0;height:auto;padding:4rem 5.4% 1.5rem}
.footer-shell .spacious-footer>.contact{width:100%;max-width:none;padding:0;background:transparent;color:inherit}
.footer-shell .contact .eyebrow{color:var(--lime);font-size:.8125rem;line-height:1.4}
.footer-shell .footer-contact-inner>.eyebrow{position:static}
.footer-shell .contact-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:4rem;margin-top:2.25rem}
.footer-shell .contact-intro h2{font-size:3rem;line-height:1.12;color:#f5f5ed;letter-spacing:-.05em}
.footer-shell .contact-intro>p{color:#c4c7ba;max-width:34ch;font-size:1.125rem;line-height:1.5;margin-top:1.75rem}
.footer-shell .contact .contact-mail{margin-top:2.5rem;color:#c4c7ba;font-size:.875rem}
.footer-shell .contact .contact-mail span{display:block;color:#f5f5ed;font-size:1.75rem;line-height:1.3;margin-top:.625rem;overflow-wrap:anywhere}
.footer-shell .contact-mail:hover span{color:var(--lime)}
.footer-shell .contact-form{width:100%;max-width:none;margin:0;padding:1.75rem;background:#efffc5;color:#111210;border:1px solid #c1e840;border-radius:1rem;box-shadow:none}
.footer-shell .contact-form .form-kicker{color:#46552d}
.footer-shell .footer-meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin:3.5rem 0 0;padding:0 0 1.5rem;width:100%;border-bottom:1px solid #3c4035;text-align:left;line-height:1.4;font-size:.8125rem}
.footer-shell .footer-meta>span,.footer-shell .footer-meta>a{font-size:inherit;color:#b9bfad;margin:0;flex-basis:auto}
.footer-shell .footer-meta>span:last-child{order:-1}
.footer-shell .footer-meta>a{order:1}
.footer-shell .footer-meta>a:hover{color:var(--lime)}
.footer-shell .footer-wordmark{width:100%;max-width:100%;margin:1.75rem 0 0;opacity:1;color:#f5f5ed}
.footer-shell .footer-wordmark svg{display:block;width:100%;height:auto}
@media(max-width:800px){
 .footer-shell .contact-layout{grid-template-columns:minmax(0,1fr);gap:2rem}
 .footer-shell .contact-intro h2{font-size:2.5rem}
 .footer-shell .contact-intro>p{max-width:40ch}
 .footer-shell .spacious-footer{padding-top:2.5rem}
 .footer-shell .footer-meta{margin-top:2.5rem}
}
@media(max-width:520px){
 .footer-shell{margin:.5rem;border-radius:1.25rem}
 .footer-shell .spacious-footer{padding:2rem 1.25rem 1rem}
 .footer-shell .contact-intro h2{font-size:2rem}
 .footer-shell .contact-intro>p{font-size:1rem}
 .footer-shell .contact .contact-mail span{font-size:1.375rem}
 .footer-shell .contact-form{padding:1.25rem}
 .footer-shell .footer-meta{gap:.875rem;font-size:.75rem}
 .footer-shell .footer-meta>span:nth-child(2){display:none}
 .footer-shell .footer-wordmark{margin-top:1.25rem}
}

/* Keep the new footer composition in the original Webtaste palette. */
.footer-shell{background:var(--lime);color:#111210}
.footer-shell .contact .eyebrow,.footer-shell .contact-intro h2{color:#111210}
.footer-shell .contact-intro>p,.footer-shell .contact .contact-mail{color:#34392a}
.footer-shell .contact .contact-mail span{color:#111210}
.footer-shell .contact-mail:hover span{color:#46552d}
.footer-shell .footer-meta{border-color:rgb(17 18 16 / 22%)}
.footer-shell .footer-meta>span,.footer-shell .footer-meta>a{color:#34392a}
.footer-shell .footer-meta>a:hover{color:#111210}
.footer-shell .footer-wordmark{color:#111210;opacity:.16}

/* Equal visual rows and stronger contrast on the service cards. */
#diensten .service .service-icon{height:10rem;min-height:10rem;flex-shrink:0;margin-bottom:.75rem;display:flex;align-items:center;justify-content:center}
#diensten .service .star-viewer .model-canvas{height:5.625rem;top:50%;transform:translateY(-50%)}
#diensten .service .code-icon{width:100%;padding-top:0}
#diensten .service .laptop-visual{width:100%;overflow:hidden;border-radius:.75rem;background:#161817}
#diensten .service .laptop-visual img{display:block;width:100%;height:100%;object-fit:cover}
#diensten .service:hover .tags span,#diensten .service:focus-within .tags span{background:var(--text);color:var(--lime);border-color:var(--text);box-shadow:none}

#diensten .service .laptop-visual{position:relative;background:transparent;overflow:visible}
.laptop-canvas{position:absolute;inset:0;width:100%;height:100%}
.laptop-canvas canvas{display:block;width:100%;height:100%}
#diensten .laptop-ready>img{visibility:hidden}

#diensten .service .laptop-visual .mockup-stage{position:relative;width:100%;max-width:15rem;aspect-ratio:1024/682;flex-shrink:0;overflow:hidden;border-radius:.5rem;background:#fff}
#diensten .service .laptop-visual .mockup-stage>img{display:block;width:100%;height:100%;object-fit:contain}
.mockup-screen{position:absolute;left:13.5%;top:12%;width:63%;height:56.7%;transform-origin:0 0;transform:matrix(1,-.039,.049,1,0,0);overflow:hidden;border-radius:.2rem;clip-path:polygon(0 0,43.5% 0,43.5% 2.3%,55.8% 2.3%,55.8% 0,100% 0,100% 100%,0 100%)}
.mockup-screen canvas{display:block;width:100%;height:100%}

/* Reveal the card through the area outside the laptop silhouette. */
#diensten .service .laptop-visual .mockup-stage{background:transparent;border-radius:0}
#diensten .service .laptop-visual .mockup-stage>img{clip-path:polygon(13.7% 8.9%,75.5% 5.7%,76.5% 5.9%,77.2% 6.8%,77.6% 8.4%,80% 67%,93.7% 85.9%,94.1% 87%,94.1% 88.1%,93.6% 88.8%,92.4% 89.2%,25.3% 95.2%,23% 95.3%,21.7% 94.8%,20.8% 93.7%,14.4% 74.8%,13.8% 73%,13.5% 70.5%,11.8% 13.2%,11.9% 11.5%,12.5% 9.9%)}

/* Use the designed menu at every viewport width. */
.header nav{display:none}
.header .menu-toggle{display:flex;flex-shrink:0}
.header .header-cta{margin-left:auto}
.mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:0;padding-bottom:1.25rem}
.mobile-nav a{padding:.875rem 0;border-bottom:.0625rem solid var(--line)}
.hero{overflow:clip}

/* Alternating oversized typography behind the introduction card. */
#over.about{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:none;margin:0;padding:5.5rem 5.4%;background:var(--text)}
.about-marquee{position:absolute;inset:-1rem 0;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none;z-index:-1;user-select:none}
.about-marquee-row{overflow:visible;line-height:.95;font-size:clamp(4.5rem,9vw,9rem);font-weight:700;letter-spacing:-.055em;color:rgb(214 252 82 / 22%)}
.about-marquee-row:nth-child(even){color:rgb(245 245 237 / 12%)}
.about-marquee-track{display:flex;width:max-content;animation:about-text-drift 55s linear infinite;animation-play-state:paused}
.about-marquee-track>span{flex:none;white-space:nowrap}
.about-marquee-row:nth-child(odd) .about-marquee-track{animation-direction:reverse}
#over.marquee-visible .about-marquee-track{animation-play-state:running}
#over .about-copy{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4rem;max-width:80rem;width:100%;margin:0 auto;padding:3.75rem;background:var(--bg);border:1px solid var(--line);border-radius:1.5rem;box-shadow:.625rem .625rem 0 rgb(214 252 82 / 18%)}
#over .about-title h2{font-size:3.6rem;line-height:1.12;margin:1.75rem 0 0}
#over .about-story p{max-width:none;font-size:1.125rem;margin:0 0 1.5rem}
#over .about-story .text-link{margin-top:.75rem;max-width:100%}
@keyframes about-text-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:800px){#over.about{padding:4rem 6%}#over .about-copy{grid-template-columns:1fr;gap:2rem;padding:2rem}#over .about-title h2{font-size:2.7rem}#over .about-story p{font-size:1rem}.about-marquee-row{font-size:6rem}}
@media(prefers-reduced-motion:reduce){#over .about-marquee-track{animation:none}}

#over .about-copy{box-shadow:none}
#over + .faq{padding-top:clamp(3.5rem,6vw,6rem)}
.process-scroll-stage{position:relative;margin-top:1.875rem}
.process-scroll-pin{display:flow-root}
.process-scroll-stage.scroll-linked .process-scroll-pin{position:sticky;top:var(--process-pin-top);background:var(--bg)}
#werkwijze .process-scroll-pin .process-route{margin-top:0;scroll-snap-type:none;scroll-behavior:auto}

/* Show the flat logo only if WebGL fails, never during initial loading. */
.hero-model .model-fallback{visibility:hidden;transition:none}
.hero-model.model-error .model-fallback{visibility:visible;opacity:1}