@font-face{font-family:Onest;src:url('/assets/fonts/onest-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--paper:#f5f3ed;--ink:#182021;--blue:#2546f3;--blue-dark:#1535dc;--muted:#555d59;--line:#cdcec6;--white:#fff;--gutter:clamp(22px,4.2vw,72px);--max:1536px;--ease:cubic-bezier(.2,.75,.2,1)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 Onest,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}button{color:inherit}button:not(:disabled),summary{cursor:pointer}img,svg{display:block;max-width:100%}img{height:auto}h1,h2,h3,p,ul,ol,figure{margin:0}h1,h2,h3{font-weight:500;line-height:1.05;letter-spacing:-.055em}h1{font-size:clamp(3.2rem,7.8vw,8rem)}h2{font-size:clamp(2.3rem,4.6vw,5rem)}h3{font-size:clamp(1.35rem,2.2vw,2rem);letter-spacing:-.035em}p+p{margin-top:1em}em{font-style:normal;color:var(--blue)}::selection{background:var(--blue);color:var(--paper)}:focus-visible{outline:3px solid var(--blue);outline-offset:5px}button:disabled{cursor:wait;opacity:.65}main{min-height:45vh}.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}.section{padding-block:clamp(72px,8.5vw,142px)}.lead{font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.5;letter-spacing:-.025em}.caption{font-size:.8rem;line-height:1.6;color:var(--muted)}.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:550;display:flex;gap:1.2rem;align-items:center;margin-bottom:2rem;line-height:1.5}.eyebrow>span{color:var(--blue);display:inline-flex;align-items:center;gap:.7rem}.eyebrow>span:before{content:'';width:6px;height:6px;background:currentColor;border-radius:50%}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.skip-link{position:fixed;z-index:1000;left:16px;top:12px;background:var(--ink);color:white;padding:12px 20px;transform:translateY(-160%)}.skip-link:focus{transform:none}[hidden]{display:none!important}
.demo-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px var(--gutter);font-size:.65rem;line-height:1.5;letter-spacing:.03em;border-bottom:1px solid var(--line);color:var(--muted)}.demo-strip>span:first-child{color:var(--blue);font-weight:600}.site-header{position:relative;z-index:20;background:var(--paper)}.header-inner{height:112px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:block;flex-shrink:0;width:230px}.brand img{width:100%;height:auto}.site-header nav{display:flex;align-items:center;gap:clamp(24px,3.5vw,56px);font-size:.9rem}.site-header nav>a{text-decoration:none;transition:color .2s}.site-header nav>a:hover,.site-header nav>a[aria-current]{color:var(--blue)}.site-header .nav-contact{display:flex;align-items:center;gap:25px;border-bottom:1px solid var(--ink);padding-block:9px}.nav-contact span{font-size:1.6rem;line-height:1}.menu-toggle{display:none;border:0;background:transparent;padding:8px 0;gap:12px;align-items:center}.menu-lines{width:25px;height:16px;display:block;border-top:1px solid;border-bottom:1px solid;position:relative}.menu-lines:before{content:'';position:absolute;left:0;right:0;top:7px;border-top:1px solid}.menu-toggle[aria-expanded=true] .menu-lines{border-color:transparent}.menu-toggle[aria-expanded=true] .menu-lines:before,.menu-toggle[aria-expanded=true] .menu-lines:after{content:'';position:absolute;left:0;right:0;top:7px;border-top:1px solid;transform:rotate(45deg)}.menu-toggle[aria-expanded=true] .menu-lines:after{transform:rotate(-45deg)}
.button{display:inline-flex;justify-content:space-between;align-items:center;gap:30px;min-height:56px;padding:16px 23px;background:var(--blue);color:white;border:1px solid var(--blue);font-size:.85rem;line-height:1.4;font-weight:500;text-decoration:none;transition:background .25s,color .25s,transform .25s var(--ease)}.button svg,.text-link svg,.email-link svg{width:23px;height:23px;flex:none}.button:hover{background:var(--blue-dark);transform:translateY(-2px)}.button.light{color:var(--ink);background:var(--paper);border-color:var(--paper)}.button.light:hover{background:#fff}.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;text-decoration:none;border-bottom:1px solid var(--line);padding-block:12px;font-size:.85rem}.text-link:hover{color:var(--blue);border-color:currentColor}.text-link svg,.button svg{transition:transform .25s var(--ease)}.text-link:hover svg,.button:hover svg{transform:translateX(4px)}
.hero{padding-top:45px;padding-bottom:24px}.hero-meta{display:flex;justify-content:space-between;gap:15px;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:65px}.hero-meta p+p{margin:0}.hero-meta p:last-child{display:flex;gap:30px}.hero-main{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:clamp(30px,5vw,90px);align-items:start}.hero-title h1{font-size:clamp(4rem,8.7vw,9.2rem);line-height:.98;letter-spacing:-.065em;margin-left:-.055em}.hero-title h1>span{color:var(--blue)}.hero-intro{margin-top:42px;max-width:610px}.hero-intro>p{max-width:515px;font-size:clamp(1.08rem,1.55vw,1.38rem);line-height:1.5;letter-spacing:-.02em}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:28px;flex-wrap:wrap}.hero-symbol{height:210px;position:relative;display:grid;place-items:center;margin-top:5px}.hero-symbol img{width:150px;position:relative;z-index:1}.orbital{position:absolute;inset:10px 4px;border:1px solid #bfc7d2;border-radius:50%;transform:rotate(-25deg)}.orbital-b{inset:4px 30px;transform:rotate(35deg)}.hero-aside>p{margin-top:25px;font-size:.85rem;line-height:1.55}.aside-rule{display:block;width:34px;height:2px;background:var(--blue);margin-top:20px}.hero-bottom{margin-top:85px;border-top:1px solid var(--line);padding-top:19px;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:.67rem;color:var(--muted)}.hero-bottom a{text-decoration:none;color:var(--ink)}.hero-bottom a span{font-size:1.5rem;margin-left:24px}.hero-bottom p{letter-spacing:.02em}
.section-heading{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start;margin-bottom:58px}.section-heading>.eyebrow{margin-top:9px}.section-heading>div{display:flex;justify-content:space-between;gap:30px;align-items:end}.section-heading h2{flex:1}.section-heading>div>p{max-width:260px;font-size:.92rem;line-height:1.6}.work-section{padding-top:90px}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:55px 30px}.project-image{position:relative;display:block;overflow:hidden;background:var(--project-bg);padding:52px 38px 48px;text-decoration:none;min-width:0}.project-card:nth-child(even) .project-image{border-top-left-radius:130px}.project-card:nth-child(odd) .project-image{border-top-right-radius:130px}.project-tag{position:absolute;left:23px;top:18px;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;font-weight:550;background:rgba(245,243,237,.92);padding:5px 9px;z-index:2}.screen-frame{background:#fff;box-shadow:0 15px 30px #18202115;overflow:hidden;transition:transform .65s var(--ease);border-radius:5px 5px 0 0;position:relative}.project-image .screen-frame{aspect-ratio:1.48;transform:translateY(5px)}.project-image .screen-frame img{width:100%;height:100%;object-fit:cover;object-position:top}.browser-dots{height:19px;background:#f1f0ed;display:flex;align-items:center;gap:4px;padding-left:9px;border-bottom:1px solid #d9d9d3}.browser-dots i{display:block;width:4px;height:4px;border-radius:50%;background:#b6b8b2}.round-arrow{position:absolute;right:18px;bottom:16px;width:43px;height:43px;border-radius:50%;background:var(--paper);display:grid;place-items:center;transition:transform .3s}.round-arrow svg{width:21px;height:21px}.project-image:hover .screen-frame{transform:translateY(-5px) scale(1.025)}.project-image:hover .round-arrow{transform:rotate(45deg)}.project-caption{display:grid;grid-template-columns:1fr;gap:12px;padding-top:21px}.project-number{font-size:.65rem;text-transform:uppercase;letter-spacing:.055em;color:var(--muted)}.project-caption h3{margin-top:9px;font-size:clamp(1.5rem,2.3vw,2.3rem)}.project-caption h3 a{text-decoration:none}.project-caption p{font-size:.87rem;max-width:450px;line-height:1.55;color:var(--muted)}.section-end{margin-top:36px;display:flex;justify-content:flex-end}
.services-section{border-top:1px solid var(--line)}.service-rows{border-top:1px solid var(--line)}.service-row{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(230px,.7fr) 40px;gap:25px;align-items:center;padding:33px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .2s}.service-index{font-size:.7rem;color:var(--muted)}.service-row h3{font-size:clamp(1.6rem,2.8vw,2.8rem);line-height:1.15;letter-spacing:-.05em}.service-row p{font-size:.87rem;color:var(--muted);line-height:1.5;max-width:350px}.service-arrow svg{width:28px;height:28px;transition:transform .3s}.service-row:hover{color:var(--blue)}.service-row:hover .service-arrow svg{transform:rotate(45deg)}.service-note{font-size:.78rem;color:var(--muted);margin-top:25px;max-width:550px;margin-left:95px}
.demo-section{background:#e8e9e1}.demo-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(35px,7vw,120px);align-items:center}.demo-copy>p:not(.eyebrow){max-width:445px;margin-top:25px}.demo-copy .caption{max-width:360px!important}.demo-switch{display:inline-flex;gap:4px;border:1px solid #adb3a7;padding:4px;margin-top:28px;max-width:100%}.demo-switch button{border:0;background:transparent;color:var(--ink);font-size:.78rem;line-height:1.4;padding:12px 18px;min-height:44px}.demo-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.demo-canvas{background:var(--paper);box-shadow:0 18px 50px #18202112;transform:rotate(-2deg);transition:transform .6s var(--ease)}.demo-canvas:hover{transform:rotate(0)}.demo-browser{display:flex;justify-content:space-between;gap:10px;padding:14px 23px;font-size:.6rem;letter-spacing:.06em;border-bottom:1px solid var(--line)}.demo-browser>span:last-child{letter-spacing:3px;font-size:.5rem}.demo-preview{padding:32px 28px 25px;overflow:hidden;transition:background .5s,color .5s;background:var(--blue);color:var(--paper)}.demo-preview-top{display:flex;justify-content:space-between;font-size:.6rem;letter-spacing:.05em;margin-bottom:40px}.demo-title{font-size:clamp(1.85rem,3.4vw,3.4rem);line-height:1.04;letter-spacing:-.065em;font-weight:550}.demo-title>span{opacity:.65}.demo-preview>p{font-size:.73rem;line-height:1.5;margin-top:20px}.demo-bottom{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-top:35px}.demo-faux-cta{display:flex;gap:25px;align-items:center;border-bottom:1px solid #a3b2ff;padding-block:8px;font-size:.63rem;white-space:nowrap}.demo-arch{position:relative;display:flex;gap:7px;width:130px;height:95px;flex:none;overflow:hidden}.demo-arch i{display:block;width:40px;height:95px;border:1px solid #c5cdff;border-bottom:0;border-radius:50px 50px 0 0;transform:translateY(15px);transition:transform .5s var(--ease)}.demo-arch i:nth-child(2){transform:translateY(0)}.demo-arch i:nth-child(3){transform:translateY(30px)}.demo-caption{display:flex;justify-content:space-between;padding:12px 20px;font-size:.55rem;color:var(--muted);gap:10px}.demo-canvas[data-design=structure] .demo-preview{background:#f6f6f6;color:#333}.demo-canvas[data-design=structure] .demo-title{font-family:Arial,sans-serif;font-size:clamp(1.5rem,2.5vw,2.5rem);letter-spacing:0;line-height:1.3;font-weight:400}.demo-canvas[data-design=structure] .demo-title>span{opacity:1}.demo-canvas[data-design=structure] .demo-faux-cta{border:1px solid #888;padding:8px;font-family:Arial,sans-serif}.demo-canvas[data-design=structure] .demo-arch{border:1px dashed #888;background:#ddd}.demo-canvas[data-design=structure] .demo-arch i{border-color:#888;border-radius:0;transform:none;background:#eee}.demo-canvas[data-design=structure] .demo-kicker{font-family:Arial,sans-serif;letter-spacing:0}
.about-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(50px,9vw,160px);align-items:center}.about-layout>div>p:not(.eyebrow){margin-top:25px;max-width:580px}.about-layout .text-link,.about-layout .button{margin-top:30px}.personal-art{position:relative;background:#e4e4da;min-height:450px;overflow:hidden;padding:25px;display:flex;flex-direction:column;justify-content:space-between}.art-index,.art-caption{font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;position:relative;z-index:2}.art-arch{position:absolute;width:70%;height:115%;left:15%;top:17%;border-radius:300px 300px 0 0;background:var(--blue);color:var(--paper);display:grid;place-items:center}.art-arch:before{content:'';position:absolute;inset:22px;border-radius:inherit;border:1px solid #ffffff40}.art-arch>span{font-size:15rem;letter-spacing:-.12em;line-height:1;font-weight:450;transform:translate(-8px,-20px)}.art-caption{align-self:flex-end;writing-mode:vertical-rl;margin-top:245px}.process-section{border-top:1px solid var(--line)}.process-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:35px;margin-top:60px}.process-list li{border-top:1px solid var(--ink);padding-top:20px}.step-num{font-size:.7rem;color:var(--blue);letter-spacing:.06em;display:block;margin-bottom:36px}.process-list h3{font-size:1.55rem;letter-spacing:-.04em;margin-bottom:15px;line-height:1.2}.process-list p{font-size:.86rem;line-height:1.65;color:var(--muted)}.faq-section{padding-top:20px}.faq-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}.faqs{border-top:1px solid var(--line)}.faqs details{border-bottom:1px solid var(--line)}.faqs summary{list-style:none;display:flex;gap:20px;justify-content:space-between;padding:23px 0;line-height:1.5;font-size:1rem}.faqs summary::-webkit-details-marker{display:none}.faqs summary>span{font-size:1.5rem;line-height:1;flex:none;color:var(--blue);transition:transform .2s}.faqs details[open] summary>span{transform:rotate(45deg)}.faqs details>p{font-size:.9rem;color:var(--muted);padding:0 30px 25px 0;line-height:1.7}
.contact-band{padding-block:clamp(65px,8vw,125px);background:var(--blue);color:var(--paper);position:relative;overflow:hidden}.contact-band .eyebrow>span{color:var(--paper)}.contact-band h2{font-size:clamp(3rem,5.1vw,5.5rem);line-height:1.03;letter-spacing:-.06em}.contact-band p:not(.eyebrow){max-width:440px;margin-top:28px}.outline-word{color:#c8d0ff}.contact-band .email-link{margin-top:35px;color:var(--paper);font-size:clamp(.8rem,1.3vw,1rem);word-break:break-word}.email-link{display:inline-flex;align-items:center;gap:15px;border-bottom:1px solid currentColor;padding-block:12px;text-decoration:none}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,8vw,130px);align-items:start}.contact-band .contact-form{background:var(--paper);color:var(--ink);padding:32px}.contact-band .contact-form p{margin-top:0;max-width:none}.cta-layout{display:grid;grid-template-columns:1fr 270px;gap:80px;align-items:center}.cta-layout .button{display:flex;max-width:230px;margin-top:30px}.cta-mark img{width:250px;opacity:.8}.contact-form{display:flex;flex-direction:column;gap:19px;min-width:0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field label{font-size:.75rem;font-weight:550;line-height:1.5}.field label>span{font-weight:400;color:var(--muted);font-size:.65rem}.field input,.field select,.field textarea{border:1px solid #81887e;border-radius:0;box-shadow:none;background:transparent;color:var(--ink);width:100%;min-width:0;padding:11px 12px;font-size:.85rem;min-height:48px;line-height:1.5}.field input::placeholder,.field textarea::placeholder{color:#626861;opacity:1}.field textarea{resize:vertical;min-height:120px}.field small{font-size:.65rem;line-height:1.5;color:var(--muted)}.form-privacy{font-size:.69rem;line-height:1.6;margin:0!important;color:var(--muted)}.form-status{font-size:.82rem;line-height:1.6;margin:0!important}.form-status:empty{display:none}.form-status:not(:empty){padding:15px;border-left:3px solid var(--blue);background:#e6e9fb}.form-status.is-error{border-color:#a12c19;background:#f5e4dc;color:#701a0b}.demo-notice{font-size:.69rem;line-height:1.6;background:#e6e8e1;padding:12px;margin:0!important}.honeypot{display:none}.contact-form .button{align-self:flex-start}
.footer{padding:55px 0 25px;background:var(--ink);color:var(--paper)}.footer-top{display:grid;grid-template-columns:1fr .8fr 1fr;gap:30px;align-items:center;border-bottom:1px solid #454b48;padding-bottom:45px}.footer-brand{width:235px;display:block}.footer-top>p{font-size:.8rem;color:#c7cac4}.footer-top>.text-link{justify-self:end;border-color:#555d57}.footer-top>.text-link:hover{color:var(--paper)}.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-top:25px;font-size:.65rem;line-height:1.6;color:#c7cac4}.footer-bottom nav{display:flex;gap:25px}.footer-bottom a{text-decoration:none}.footer-bottom a:hover{color:#fff}.footer :focus-visible,.contact-band :focus-visible{outline-color:#d4df37}.contact-band .contact-form :focus-visible{outline-color:var(--blue)}
.page-hero{padding-top:65px;padding-bottom:80px}.page-hero>.eyebrow{margin-bottom:45px}.page-hero h1{max-width:1150px;font-size:clamp(3rem,7vw,7.2rem);line-height:1.04;letter-spacing:-.06em}.page-lead{max-width:715px;font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.5;letter-spacing:-.025em;margin-top:35px}.page-hero>.button{margin-top:32px}.work-list{padding-top:20px}.project-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:38px}.project-filters button{background:transparent;border:1px solid #9ba198;min-height:45px;padding:11px 18px;display:flex;align-items:center;gap:20px;font-size:.76rem;line-height:1.4}.project-filters button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.project-filters button>span{font-size:.6rem;opacity:.8}.work-explanation{margin-top:30px}.back-link{display:inline-block;font-size:.75rem;text-decoration:none;margin-bottom:45px}.case-hero{padding-bottom:40px}.case-hero>.eyebrow{margin-bottom:20px}.case-hero h1{font-size:clamp(3rem,6.5vw,6.7rem)}.case-meta{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-top:60px;padding-top:25px;border-top:1px solid var(--line)}.case-meta>div{max-width:35%}.case-meta span{font-size:.67rem;color:var(--muted);display:block;margin-bottom:8px}.case-meta strong{font-size:.85rem;font-weight:450}.case-meta>a{display:flex;align-items:center;gap:25px;font-size:.8rem;text-decoration:none}.case-meta>a>svg{width:23px;height:23px}.case-main-image{background:var(--project-bg);padding:clamp(25px,6vw,90px);border-top-right-radius:clamp(60px,10vw,150px)}.case-main-image .screen-frame{max-width:1100px;margin:auto}.case-main-image img{width:100%}.case-main-image figcaption{font-size:.7rem;line-height:1.6;color:#364440;max-width:850px;margin:25px auto 0}.case-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:end}.case-intro h2{font-size:clamp(2rem,3.2vw,3.3rem);line-height:1.2}.case-intro>.lead{font-size:1.15rem}.case-choices,.principles{background:#e8e9e1}.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px}.choice-grid article{border-top:1px solid #a4aaa0;padding-top:22px}.choice-grid h3{font-size:1.7rem;line-height:1.2;margin-bottom:18px}.choice-grid p{font-size:.9rem;color:var(--muted);line-height:1.7}.choice-grid .step-num{margin-bottom:30px}.device-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(50px,10vw,170px);align-items:center}.mobile-device{width:300px;max-width:100%;margin-inline:auto;border:7px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:16px 25px 0 #e0e2d8;background:var(--ink);color:var(--paper)}.mobile-device img{width:100%;height:auto}.mobile-device figcaption{font-size:.65rem;text-align:center;padding:13px;background:var(--ink);color:var(--paper)}.device-layout>div>p:not(.eyebrow){margin-top:24px;max-width:540px}.device-layout h3{font-size:1.1rem;margin-top:35px;letter-spacing:-.02em}.device-layout .text-link{margin-top:25px}.next-project{border-top:1px solid var(--line);padding-block:55px}.next-project-link{display:flex;justify-content:space-between;align-items:center;gap:25px;text-decoration:none;font-size:clamp(2rem,4vw,4rem);letter-spacing:-.055em;line-height:1.2}.next-project-link svg{width:45px;height:45px;flex:none}
.service-context{padding-block:35px;background:#e8e9e1}.context-layout{display:grid;grid-template-columns:1fr 2fr;gap:40px}.context-layout>.eyebrow{margin:0}.context-layout>p:last-child{font-size:clamp(1.1rem,1.8vw,1.5rem);max-width:800px;line-height:1.5}.service-detail-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(50px,8vw,130px);align-items:start}.service-detail-layout>div:first-child>p:last-child{font-size:.9rem;color:var(--muted);max-width:350px;margin-top:25px}.service-details article{border-top:1px solid var(--line);padding:25px 0 35px}.service-details .step-num{margin-bottom:18px}.service-details h3{font-size:1.6rem;margin-bottom:18px}.service-details p{font-size:.93rem;color:var(--muted)}.scope-section{background:var(--ink);color:var(--paper)}.scope-section .eyebrow>span{color:#a5b6ff}.scope-section em{color:#a5b6ff}.scope-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px}.scope-layout p:not(.eyebrow){font-size:.9rem;color:#c7cac4;max-width:400px;margin-top:25px}.scope-list{list-style:none;padding:0}.scope-list li{padding:19px 0;border-bottom:1px solid #515a51;display:flex;gap:30px;font-size:1rem}.scope-list li>span{color:#a5b6ff}.preparation{max-width:1000px}.preparation>.lead{margin-top:35px;max-width:700px}.preparation .text-link{margin-top:25px}.related{padding-block:40px;border-top:1px solid var(--line)}.related .eyebrow{margin-bottom:15px}.related-links{display:flex;gap:50px;flex-wrap:wrap}.related-links .text-link{min-width:220px}.contact-page{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,8vw,130px);padding-top:65px;padding-bottom:110px}.contact-intro h1{font-size:clamp(3rem,5.4vw,5.8rem);line-height:1.05}.contact-intro>.lead{margin-top:35px;max-width:500px;font-size:1.3rem}.contact-intro>p:not(.eyebrow){margin-top:25px;font-size:.95rem;max-width:430px}.contact-intro .email-link{margin-top:30px;font-size:.9rem;max-width:100%;overflow-wrap:anywhere}.contact-page>.contact-intro{min-width:0}.contact-page>div:last-child{padding-top:15px}.prose{max-width:1000px;padding-top:0}.prose h2{font-size:1.8rem;margin-top:45px;margin-bottom:20px;letter-spacing:-.035em}.prose p{font-size:1rem;color:var(--muted)}
@media(min-width:1700px){.hero-main{grid-template-columns:minmax(0,1fr) 290px}.hero-symbol{height:250px}.hero-symbol img{width:180px}}
@media(max-width:1100px){.header-inner{height:95px}.brand{width:205px}.site-header nav{gap:24px;font-size:.8rem}.hero{padding-top:35px}.hero-main{grid-template-columns:minmax(0,1fr) 180px;gap:25px}.hero-title h1{font-size:8.6vw}.hero-symbol{height:160px}.hero-symbol img{width:115px}.hero-aside>p{font-size:.75rem}.hero-meta{margin-bottom:45px}.hero-bottom{margin-top:60px}.section-heading{grid-template-columns:.65fr 1.35fr;gap:30px}.section-heading>div{display:block}.section-heading>div>p{margin-top:25px;max-width:400px}.project-image{padding:55px 22px 35px}.project-card:nth-child(even) .project-image{border-top-left-radius:85px}.project-card:nth-child(odd) .project-image{border-top-right-radius:85px}.service-row{grid-template-columns:40px minmax(0,1fr) minmax(200px,.7fr) 30px;gap:20px}.service-note{margin-left:60px}.about-layout{gap:65px}.personal-art{min-height:400px}.process-list{gap:24px}.process-list h3{font-size:1.25rem}.faq-layout{gap:40px}.contact-band .contact-form{padding:25px}.form-row{grid-template-columns:1fr;gap:18px}.contact-layout{gap:45px}.footer-top{grid-template-columns:1fr 1fr}.footer-top>.text-link{justify-self:start}.footer-top>p{justify-self:end}.case-intro{gap:45px}.choice-grid{gap:30px}.choice-grid h3{font-size:1.45rem}.scope-layout{gap:50px}.contact-page{gap:50px}}
@media(max-width:767px){:root{--gutter:23px}html{scroll-padding-top:25px}body{font-size:16px}.demo-strip{font-size:.58rem;padding-block:6px}.header-inner{height:auto;min-height:87px;position:relative;flex-wrap:wrap;padding-block:13px;gap:5px}.brand{width:206px}.site-header nav{width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:18px;padding:12px 0 6px;font-size:.8rem}.site-header .nav-contact{border-bottom:0;padding:0}.site-header[data-menu-ready] .menu-toggle{display:flex;font-size:.72rem}.site-header[data-menu-ready] nav{display:none;flex-direction:column;align-items:flex-start;padding:25px 0;gap:22px;font-size:1.2rem}.site-header[data-menu-ready] nav.is-open{display:flex}.site-header[data-menu-ready] .nav-contact{color:var(--blue);font-size:1rem}.hero{padding-top:25px;padding-bottom:20px}.hero-meta{font-size:.58rem;margin-bottom:38px;line-height:1.5}.hero-meta p:last-child{display:none}.hero-main{grid-template-columns:1fr;position:relative;gap:0}.hero-title h1{font-size:clamp(3rem,10.7vw,5.2rem);line-height:1.02;letter-spacing:-.065em}.hero-intro{margin-top:28px;max-width:550px}.hero-intro>p{font-size:1.05rem;line-height:1.55;max-width:380px}.hero-actions{gap:20px;margin-top:24px;align-items:center}.button{font-size:.77rem;padding:14px 17px;gap:20px;min-height:52px}.text-link{font-size:.77rem;gap:14px;padding-block:10px}.button svg,.text-link svg{width:20px;height:20px}.hero-aside{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:38px;padding-top:20px;gap:25px}.hero-symbol{order:2;width:120px;height:100px;flex:none;margin:0}.hero-symbol img{width:70px}.orbital{inset:10px 0}.orbital-b{inset:0 20px}.hero-aside>p{font-size:.75rem;margin:0;line-height:1.5}.aside-rule{display:none}.hero-bottom{margin-top:25px;font-size:.57rem;line-height:1.6;align-items:start}.hero-bottom>p{max-width:170px}.hero-bottom>a{white-space:nowrap}.hero-bottom>a>span{margin-left:10px;font-size:1.1rem}.section{padding-block:70px}.eyebrow{font-size:.63rem;gap:12px;margin-bottom:26px}.section-heading{display:block;margin-bottom:32px}.section-heading>.eyebrow{margin-bottom:25px}.section-heading>div>p{font-size:.9rem;margin-top:23px}.section-heading h2,h2{font-size:clamp(2.25rem,8vw,3.8rem);line-height:1.08;letter-spacing:-.055em}.work-section{padding-top:55px}.project-grid{grid-template-columns:1fr;gap:44px}.project-image{padding:58px 25px 35px}.project-card:nth-child(odd) .project-image{border-top-right-radius:85px}.project-card:nth-child(even) .project-image{border-top-left-radius:85px}.project-tag{font-size:.56rem;left:18px;top:18px}.project-caption{padding-top:16px;gap:10px}.project-number{font-size:.57rem}.project-caption h3{font-size:1.8rem;line-height:1.1}.project-caption p{font-size:.82rem}.round-arrow{width:36px;height:36px}.round-arrow svg{width:18px;height:18px}.section-end{justify-content:flex-start;margin-top:30px}.service-row{grid-template-columns:28px minmax(0,1fr) 25px;gap:12px;padding:25px 0}.service-row h3{font-size:1.55rem;line-height:1.15}.service-row>p{grid-column:2;grid-row:2;font-size:.8rem;max-width:400px}.service-arrow{grid-column:3;grid-row:1}.service-arrow svg{width:23px;height:23px}.service-index{font-size:.6rem}.service-note{margin-left:40px;font-size:.71rem}.demo-layout{grid-template-columns:1fr;gap:40px}.demo-copy>p:not(.eyebrow){font-size:.92rem}.demo-copy .caption{font-size:.73rem!important}.demo-switch{margin-top:25px}.demo-switch button{font-size:.74rem;padding:11px 14px}.demo-canvas{transform:rotate(-1deg);margin-inline:4px}.demo-preview{padding:26px 22px}.demo-title{font-size:clamp(1.9rem,6vw,2.7rem)}.demo-preview-top{margin-bottom:30px}.demo-bottom{margin-top:27px}.demo-arch{width:105px;height:85px;gap:5px}.demo-arch i{width:32px;height:85px}.demo-canvas[data-design=structure] .demo-title{font-size:1.75rem}.demo-caption{padding:10px 13px;font-size:.5rem}.about-layout{grid-template-columns:1fr;gap:40px}.personal-art{min-height:330px;max-width:450px;width:100%;padding:20px}.art-caption{margin-top:200px}.art-arch{height:125%;width:65%;left:18%}.art-arch>span{font-size:13rem;transform:translate(-6px,-30px)}.about-layout>div>p:not(.eyebrow){font-size:.94rem;margin-top:22px}.about-layout>div>.lead{font-size:1.15rem}.about-layout .text-link{margin-top:20px}.process-list{grid-template-columns:1fr 1fr;gap:35px 25px;margin-top:40px}.step-num{margin-bottom:24px}.process-list h3{font-size:1.2rem}.process-list p{font-size:.79rem}.faq-layout{grid-template-columns:1fr;gap:30px}.faq-section{padding-top:10px}.faqs summary{font-size:.9rem;padding-block:22px}.faqs details>p{font-size:.82rem}.contact-band{padding-block:65px}.contact-layout,.cta-layout{grid-template-columns:1fr;gap:40px}.contact-band h2{font-size:clamp(2.75rem,9vw,4.5rem)}.contact-band p:not(.eyebrow){font-size:.92rem;margin-top:23px}.contact-band .email-link{font-size:.79rem;margin-top:23px;gap:10px;max-width:100%}.contact-band .contact-form{padding:24px 21px}.contact-band .contact-form p{margin-top:0;font-size:.69rem}.form-row{grid-template-columns:1fr}.contact-form{gap:18px}.field label{font-size:.73rem}.field label>span{font-size:.64rem}.field input,.field select,.field textarea{font-size:16px;padding:10px 11px}.field small{font-size:.62rem}.contact-band .form-status{font-size:.78rem!important}.cta-mark{display:none}.footer{padding-top:40px}.footer-top{grid-template-columns:1fr;gap:22px;padding-bottom:35px}.footer-top>p{justify-self:start;font-size:.78rem}.footer-brand{width:220px}.footer-top>.text-link{font-size:.76rem}.footer-bottom{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:.6rem}.footer-bottom nav{gap:17px;flex-wrap:wrap}.footer-bottom .back-top{justify-self:end}.page-hero{padding-top:38px;padding-bottom:50px}.page-hero>.eyebrow{margin-bottom:30px}.page-hero h1{font-size:clamp(2.6rem,10vw,4.8rem);line-height:1.08;overflow-wrap:normal}.page-lead{font-size:1.08rem;margin-top:25px}.page-hero>.button{margin-top:25px}.work-list{padding-top:10px}.project-filters{gap:7px;margin-bottom:30px}.project-filters button{font-size:.67rem;padding:10px 11px;gap:10px}.work-explanation{font-size:.7rem}.case-hero{padding-bottom:30px}.back-link{font-size:.68rem;margin-bottom:30px}.case-hero h1{font-size:clamp(2.5rem,9.3vw,4rem)}.case-meta{flex-wrap:wrap;gap:25px;margin-top:35px;padding-top:23px}.case-meta>div{max-width:100%;flex:1 1 40%}.case-meta strong{font-size:.76rem}.case-meta span{font-size:.58rem}.case-meta>a{font-size:.75rem}.case-main-image{padding:38px 20px 25px;border-top-right-radius:65px}.case-main-image figcaption{font-size:.62rem;margin-top:20px}.case-intro{grid-template-columns:1fr;gap:30px}.case-intro h2{font-size:1.9rem;line-height:1.2}.case-intro>.lead{font-size:1rem}.choice-grid{grid-template-columns:1fr;gap:35px}.choice-grid h3{font-size:1.5rem}.choice-grid p{font-size:.87rem}.choice-grid .step-num{margin-bottom:20px}.device-layout{grid-template-columns:1fr;gap:55px}.mobile-device{width:260px}.device-layout>div>p:not(.eyebrow){font-size:.9rem}.device-layout h3{margin-top:30px}.next-project{padding-block:40px}.next-project-link{font-size:1.9rem}.next-project-link svg{width:30px;height:30px}.context-layout{grid-template-columns:1fr;gap:18px}.context-layout>p:last-child{font-size:1.1rem}.service-detail-layout{grid-template-columns:1fr;gap:35px}.service-detail-layout>div:first-child>p:last-child{font-size:.87rem}.service-details h3{font-size:1.45rem}.service-details p{font-size:.88rem}.scope-layout{grid-template-columns:1fr;gap:30px}.scope-list li{font-size:.9rem;gap:20px}.preparation>.lead{font-size:1rem;margin-top:25px}.related-links{gap:20px;flex-direction:column}.related-links .text-link{font-size:.8rem}.contact-page{grid-template-columns:1fr;gap:35px;padding-top:38px;padding-bottom:75px}.contact-intro h1{font-size:clamp(2.8rem,10vw,4.5rem)}.contact-intro>.lead{font-size:1.1rem}.contact-intro>p:not(.eyebrow){font-size:.88rem}.contact-intro .email-link{font-size:.8rem}.contact-page>div:last-child{padding-top:10px}.prose h2{font-size:1.55rem;margin-top:32px}.prose p{font-size:.9rem}}
@media(max-width:359px){:root{--gutter:19px}.brand{width:180px}.header-inner{min-height:80px}.menu-toggle{gap:9px}.demo-strip{font-size:.52rem;gap:8px}.hero-title h1{font-size:10.5vw}.hero-actions{gap:14px}.hero-actions .text-link{font-size:.7rem;gap:10px}.hero-actions .button{padding:13px;font-size:.7rem;gap:13px}.contact-band .contact-form{padding:20px 16px}.project-filters{gap:6px}.project-filters button{padding-inline:9px;font-size:.62rem}.demo-faux-cta{font-size:.56rem;gap:10px}.demo-arch{width:90px}.demo-arch i{width:27px}.footer-bottom{grid-template-columns:1fr}.footer-bottom .back-top{justify-self:start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.demo-canvas{transform:none}.project-image:hover .screen-frame{transform:none}}

/* Joshua Boermans — Atelier, tweede ontwerpeditie.
   Gedeelde paginafundering staat in styles.css. Deze laag bevat de artdirection. */
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/instrument-serif-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/instrument-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
:root{--max:1600px;--gutter:clamp(24px,4.2vw,80px);--ease:cubic-bezier(.2,.8,.2,1);--night:#202426}
body{font-weight:400}
h1,h2,h3{font-weight:450}
h2{font-size:clamp(2.8rem,5.1vw,5.2rem);letter-spacing:-.065em;line-height:1.02}
h1 em,h2 em,.footer-signature em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.035em;color:inherit}
.eyebrow{font-size:.64rem;font-weight:450;letter-spacing:.09em}
.eyebrow>span:before{border-radius:0;width:5px;height:5px}
.section{padding-block:clamp(80px,9vw,145px)}
.demo-strip{font-size:.59rem;padding-block:4px;background:#eae9e2}
.header-inner{height:91px}
.brand{width:212px}
.site-header nav{font-size:.79rem;gap:35px}
.site-header .nav-contact{border:1px solid var(--ink);border-radius:60px;padding:11px 19px;gap:18px}
.site-header .nav-contact:hover{background:var(--ink);color:var(--paper)}
.nav-contact span{font-size:1.15rem}
.button{border-radius:50px;padding:15px 22px;min-height:54px;font-size:.78rem;gap:25px;font-weight:450}
.button:hover{transform:none}
.text-link{font-size:.79rem}
.button svg,.text-link svg{width:21px;height:21px}
.opening-meta{display:flex;justify-content:space-between;gap:25px;align-items:center;border-top:1px solid var(--line);padding-top:24px;font-size:.63rem;line-height:1.5;letter-spacing:.055em;text-transform:uppercase}
.opening-meta p{display:flex;align-items:center;gap:10px;margin:0}
.tiny-mark{width:7px;height:7px;background:var(--blue);border-radius:50%}
.atelier-hero{overflow:hidden;padding-top:8px;padding-bottom:32px}
.opening-grid{display:grid;grid-template-columns:1.06fr 1fr;gap:20px;align-items:center;min-height:545px;padding-top:30px}
.opening-copy{position:relative;z-index:2;padding-block:26px 55px;min-width:0}
.opening-copy h1{font-size:clamp(4.3rem,7.65vw,8rem);line-height:.99;letter-spacing:-.069em;white-space:normal;margin-left:-.045em}
.opening-copy h1 em{display:inline-block;color:var(--blue);font-size:1.07em;letter-spacing:-.045em;line-height:.98}
.opening-intro{margin-top:34px;max-width:430px}
.opening-intro>p{font-size:1.02rem;line-height:1.6;letter-spacing:-.02em;max-width:390px}
.opening-intro .hero-actions{margin-top:26px;gap:25px}
.opening-art{height:510px;position:relative;isolation:isolate;min-width:0;perspective:1100px}
.opening-art:before{content:'';position:absolute;inset:12% 3% 8% 5%;background:radial-gradient(ellipse at 60% 80%,#d9dcd7 0,transparent 68%);z-index:-2}
.art-registration{position:absolute;top:0;right:3%;font-size:.5rem;letter-spacing:.15em;writing-mode:vertical-rl;line-height:1.4;color:var(--muted)}
.hero-ribbon{position:absolute;width:85%;max-width:none;height:auto;left:-11%;bottom:-13%;transform:rotate(-8deg);z-index:-1;pointer-events:none}
.hero-screen{position:absolute;width:93%;top:12%;left:-3%;border:6px solid #333b3f;border-radius:9px;overflow:hidden;background:#1c272b;box-shadow:3px 6px 0 #b0b6b7,5px 10px 0 #7c8588,12px 23px 37px #18202138;transform:translate3d(var(--move-x,0px),var(--move-y,0px),0) rotate(-7deg) rotateY(-5deg);transition:transform .65s var(--ease);z-index:1}
.hero-screen>img{width:100%;height:auto;display:block}
.hero-screen .browser-dots{height:19px;background:#d5d9db;gap:4px;border:0}
.browser-dots span{font:400 8px/1 Onest,Arial,sans-serif;letter-spacing:.02em;color:#536269;margin-left:auto;margin-right:12px}
.hero-phone{position:absolute;width:24%;top:35%;right:0;border:6px solid #202426;border-radius:19px;overflow:hidden;box-shadow:4px 6px 0 #a2aaad,14px 16px 24px #18202133;transform:translate3d(calc(var(--move-x,0px) * -.4),calc(var(--move-y,0px) * -.4),0) rotate(9deg);transition:transform .7s var(--ease);z-index:2}
.hero-phone img{display:block;width:100%;height:auto}
.hero-art-caption{position:absolute;bottom:4%;left:28%;right:10%;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.61rem;line-height:1.5;letter-spacing:.03em;text-decoration:none;z-index:4}
.hero-art-caption strong{display:block;font-size:1.05rem;font-weight:450;letter-spacing:-.035em;margin-top:5px}
.art-arrow{width:42px;height:42px;display:grid;place-items:center;border:1px solid #9ba29c;border-radius:50%;font-size:1.2rem;transition:background .2s,color .2s}
.hero-art-caption:hover .art-arrow{background:var(--ink);color:white}
.art-side-label{position:absolute;bottom:0;left:-3%;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.55rem;letter-spacing:.08em;color:var(--muted)}
.opening-foot{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:25px;padding-block:24px 0;border-top:1px solid var(--line);font-size:.63rem;line-height:1.6;color:var(--muted)}
.opening-foot p{margin:0}
.opening-foot .disciplines{text-align:right}
.scroll-note{justify-self:center;display:flex;gap:25px;align-items:center;text-decoration:none;color:var(--ink)}
.scroll-note>span{border:1px solid #c0c3bc;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem}

/* Werk heeft het grootste beeldvlak, met een eigen scène voor elke case. */
.work-section{background:var(--night);color:var(--paper);margin-top:40px;padding-top:90px;border-radius:0}
.work-heading{display:grid;grid-template-columns:.55fr 1.35fr .7fr;gap:30px;align-items:end;margin-bottom:85px}
.work-heading .eyebrow{align-self:start;margin-top:13px;color:#c0c5c4}
.work-section .eyebrow>span{color:#b5bfff}
.work-heading h2{font-size:clamp(3.3rem,6.8vw,6.8rem);line-height:1.02}
.work-heading h2 em{color:#bdc7ff}
.work-heading>p:last-child{font-size:.86rem;line-height:1.65;padding-bottom:10px;color:#c0c5c4}
.work-gallery{display:grid;gap:100px}
.project-feature{min-width:0}
.project-topline{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:17px;line-height:1.5}
.project-topline .project-number{font-size:.6rem;color:inherit;opacity:.8}
.project-status{border:1px solid #75807d;padding:6px 10px;font-size:.59rem;line-height:1.4;letter-spacing:.04em}
.project-stage{position:relative;min-height:200px;aspect-ratio:1.95;background:#b9c8cf;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:65px 9% 70px;color:var(--ink)}
.project-stage:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(130deg,#e4e9e6 0,transparent 60%),linear-gradient(180deg,#c0ced2,#a7bcc4);opacity:.8}
.project-ghost{position:absolute;bottom:-.18em;left:2%;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(150px,23vw,380px);letter-spacing:-.06em;line-height:1;color:#f5f3ed6b;z-index:-1;user-select:none}
.project-display{width:100%;height:100%;display:grid;place-items:center;min-height:0;z-index:1}
.desktop-preview{width:100%;box-shadow:0 28px 50px #17252b33;border:1px solid #6b7a7c66;border-radius:6px;overflow:hidden;transform:perspective(1300px) rotateX(3deg) rotateY(-5deg) rotateZ(-2deg);transition:transform .7s var(--ease)}
.desktop-preview>img{width:100%;height:auto;object-fit:contain}
.desktop-preview .browser-dots{height:24px;background:#e6e9e6;padding-left:12px}
.desktop-preview .browser-dots i{width:5px;height:5px}
.desktop-preview .browser-dots span{font-size:9px}
.project-stage:hover .desktop-preview{transform:perspective(1300px) rotateX(0) rotateY(0) rotateZ(0)}
.phone-preview{height:100%;max-height:465px;max-width:220px;width:auto;border:6px solid #1d2426;border-radius:22px;overflow:hidden;box-shadow:9px 17px 25px #18202138;transform:rotate(3deg)}
.phone-preview>img{height:100%;width:100%;object-fit:contain;object-position:top}
.project-stage[data-project-view=mobile]{padding-block:25px 65px}
.project-tools{position:absolute;bottom:18px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;gap:15px;z-index:3}
.project-tools>span{font-size:.58rem;letter-spacing:.025em}
.view-switch{padding:3px;border:1px solid #768582;border-radius:40px;display:flex;gap:3px;background:#f5f3edcc;backdrop-filter:blur(10px)}
.view-switch button{font-size:.62rem;border:none;border-radius:30px;padding:8px 15px;min-height:35px;background:transparent;line-height:1.4;color:var(--ink)}
.view-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.project-caption{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;padding-top:25px}
.project-caption h3{font-size:clamp(1.7rem,2.7vw,2.6rem);font-weight:430;letter-spacing:-.05em;line-height:1.15;margin:0}
.project-caption p{max-width:510px;font-size:.8rem;color:inherit;opacity:.8;margin-top:12px;line-height:1.7}
.project-case-link{display:flex;align-items:center;gap:22px;text-decoration:none;border-bottom:1px solid #858e88;padding-block:7px 10px;font-size:.66rem;line-height:1.5}
.project-case-link svg{width:23px;height:23px;transition:transform .25s}
.project-case-link:hover svg{transform:translateX(5px)}
.project-feature.concept{width:86%;justify-self:end}
.project-feature.concept .project-stage{background:#d7d6c9;aspect-ratio:1.7;padding:65px 8% 70px}
.project-feature.concept .project-stage:before{background:linear-gradient(135deg,#f2f0e4,transparent 65%),linear-gradient(180deg,#d9d9cd,#c4c7b8)}
.project-feature.concept .desktop-preview{transform:perspective(1200px) rotateY(5deg) rotateZ(2deg)}
.project-feature.concept .project-stage:hover .desktop-preview{transform:none}
.project-feature.concept .project-ghost{font-size:clamp(180px,25vw,400px);left:3%;bottom:-.13em;color:#f9f8ef99}
.project-feature.concept .project-stage[data-project-view=mobile]{padding-block:25px 65px}
.project-feature[data-project-slug=boermans-digital] .project-stage:before{background:linear-gradient(135deg,#e4eadb,transparent 65%),linear-gradient(180deg,#bdcdb5,#92ac9b)}
.project-feature[data-project-slug=pelektro] .project-stage:before{background:linear-gradient(135deg,#edf0e9,transparent 65%),linear-gradient(180deg,#d6ddd9,#adbdb9)}
.project-feature[data-project-slug=pelektro] .project-ghost{font-size:clamp(120px,18vw,280px)}
@media(min-width:768px){
 .project-feature[data-format=tall] .project-stage{aspect-ratio:1.5}
}
.work-section .section-end{border-top:1px solid #59605b;margin-top:70px;padding-top:20px}
.work-section .text-link{color:var(--paper);border-color:#7b837d}
.work-section :focus-visible{outline-color:#b8c5ff}
.work-list .work-gallery{gap:100px}
.work-list .project-caption p{color:var(--muted);opacity:1}
.work-list .project-filters{margin-bottom:48px}
.project-filters button{border-radius:40px;padding-inline:20px}

/* Diensten als rustige redactionele spread. */
.services-section{border:0}
.services-editorial{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,7vw,120px)}
.services-intro{position:sticky;top:40px;align-self:start}
.services-intro .eyebrow{flex-wrap:wrap;row-gap:8px}
.services-intro h2{font-size:clamp(2.8rem,4.45vw,4.6rem);line-height:1.05}
.services-intro h2 em{color:var(--blue)}
.services-intro>p:not(.eyebrow){font-size:.9rem;line-height:1.7;max-width:360px;margin-top:28px;color:var(--muted)}
.service-disc{width:120px;height:120px;border-radius:50%;background:var(--blue);color:white;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-decoration:none;margin-top:35px;transition:transform .3s var(--ease)}
.service-disc>span{font-size:.58rem;text-align:center;line-height:1.4}
.service-disc>svg{width:28px;height:28px}
.service-disc:hover{transform:rotate(-8deg)}
.service-row{grid-template-columns:32px minmax(0,1fr) 27px;column-gap:18px;row-gap:15px;align-items:start;padding:30px 0}
.service-row h3{font-size:clamp(1.45rem,2vw,2rem);line-height:1.15;letter-spacing:-.045em}
.service-row>p{grid-column:2;grid-row:2;font-size:.79rem;max-width:380px;line-height:1.7}
.service-arrow{grid-column:3;grid-row:1}
.service-arrow svg{width:25px;height:25px}
.service-index{font-size:.61rem;padding-top:5px}
.service-note{margin-left:50px;font-size:.71rem;line-height:1.7}

/* Ontwerpdemo: twee weergaven van dezelfde inhoud. */
.demo-section{background:#e8e7df;position:relative;overflow:hidden}
.demo-section:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#18202109 1px,transparent 1px),linear-gradient(90deg,#18202109 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.demo-layout{position:relative;gap:6vw;grid-template-columns:.8fr 1.2fr}
.demo-copy h2{font-size:clamp(2.8rem,4.5vw,4.5rem)}
.demo-copy>p:not(.eyebrow){font-size:.87rem;line-height:1.75}
.demo-copy .caption{font-size:.7rem!important;color:#565e58}
.demo-switch{border-radius:30px;border-color:#828981;background:#f5f3ed}
.demo-switch button{border-radius:25px;min-height:42px;font-size:.7rem}
.demo-canvas{transform:rotate(-3deg);border:1px solid #c9c8be;box-shadow:10px 22px 0 #d3d4ca,18px 35px 45px #18202114;min-width:0}
.demo-browser{padding:16px 23px;font-size:.55rem;letter-spacing:.14em}
.demo-preview{background:#f0e4d0;color:#392c23;padding:35px 32px 27px;position:relative;min-height:330px}
.demo-preview-top{margin-bottom:38px;position:relative;z-index:1}
.demo-title{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(2.8rem,4.5vw,4.7rem);line-height:.94;letter-spacing:-.035em;position:relative;z-index:1}
.demo-title>span{font-style:italic;opacity:1;color:#895331}
.demo-preview>p{font-size:.68rem;position:relative;z-index:1;max-width:190px}
.demo-bottom{position:relative;z-index:1}
.demo-faux-cta{border-color:#8f735c;font-size:.61rem}
.demo-arch{width:130px;height:110px;transform:rotate(-16deg);gap:0;overflow:visible}
.demo-arch i{width:48px;height:105px;border:none;background:linear-gradient(90deg,#80583b,#c99b70 55%,#aa744e);box-shadow:8px 7px 15px #392c2333;border-radius:60px 60px 10px 10px;transform:rotate(20deg) translateY(15px)}
.demo-arch i:nth-child(2){transform:rotate(-12deg);background:linear-gradient(90deg,#9c6c49,#ebc599 50%,#bd8d62);z-index:2}
.demo-arch i:nth-child(3){transform:rotate(18deg) translateY(28px);margin-left:-6px}
.demo-canvas[data-design=structure] .demo-title{font:400 clamp(1.5rem,2.5vw,2.5rem)/1.3 Arial,sans-serif;letter-spacing:0}
.demo-canvas[data-design=structure] .demo-title>span{font-style:normal;color:#333}
.demo-canvas[data-design=structure] .demo-arch{transform:none;overflow:hidden}
.demo-canvas[data-design=structure] .demo-arch i{background:#eee;box-shadow:none;border:1px solid #888;transform:none;margin:0}
.demo-canvas[data-design=structure] .demo-preview>p{max-width:none}

/* Persoonlijke sectie: typografische signatuur, zonder fictief portret. */
.about-editorial{display:grid;grid-template-columns:.72fr 1.28fr;gap:9vw;align-items:center}
.maker-note{border:1px solid #d4d5cc;min-height:410px;position:relative;padding:24px;background:#ecece3;overflow:hidden;transform:rotate(-3deg)}
.maker-note:before{content:'';position:absolute;width:80px;height:25px;background:#e0dfcfb3;left:40%;top:-8px;transform:rotate(5deg);border:1px solid #d1d0c469}
.maker-note .eyebrow{font-size:.6rem;margin:0;position:relative;z-index:2}
.maker-initials{font:italic 400 clamp(180px,22vw,320px)/.8 'Instrument Serif',Georgia,serif;color:var(--blue);letter-spacing:-.13em;padding:10px 0 35px 6%;transform:rotate(-5deg);margin-top:35px}
.maker-initials span{display:inline-block;transform:translateY(12px)}
.maker-caption{position:absolute;bottom:22px;right:22px;left:22px;font-size:.6rem;border-top:1px solid #bac0b5;padding-top:13px;letter-spacing:.025em}
.about-statement h2{font-size:clamp(3rem,5.7vw,6rem);line-height:1.03}
.about-statement h2 em{color:var(--blue)}
.about-bottom{display:grid;grid-template-columns:1fr;gap:18px;margin-top:35px;max-width:450px}
.about-bottom>p{font-size:.87rem;color:var(--muted);line-height:1.75}
.about-bottom .text-link{justify-self:start}
.personal-art{background:#e5e7df}
.art-arch{background:none;border-radius:0;inset:0;width:100%;height:100%;position:absolute;background-image:url('/assets/art/ribbon.webp');background-size:100% auto;background-position:center;background-repeat:no-repeat}
.art-arch:before{display:none}
.art-arch>span{display:none}
.art-caption{margin-top:260px;writing-mode:horizontal-tb;font-size:.55rem}
.process-section{background:#eeeee7;border:0}
.process-section .section-heading>div{display:block}
.process-section .section-heading>div>p{margin-top:22px;max-width:430px;font-size:.85rem}
.process-list{gap:35px;margin-top:65px}
.process-list li{border-color:#b2b9af;padding-top:18px}
.process-list .step-num{font:italic 400 4.5rem/1 'Instrument Serif',Georgia,serif;letter-spacing:-.06em;color:var(--blue);margin-bottom:38px}
.process-list h3{font-size:1.35rem}
.process-list p{font-size:.8rem;line-height:1.75}
.faq-section{padding-top:100px}
.faq-layout{grid-template-columns:.9fr 1.1fr}
.faqs summary{font-size:.91rem;padding:24px 0}
.faqs details>p{font-size:.83rem;line-height:1.75}
.contact-band{background:#2546f3;overflow:hidden}
.contact-band h2{font-size:clamp(3.4rem,5.7vw,6rem);font-weight:430;line-height:1.04}
.outline-word{font:italic 400 1.14em/1 'Instrument Serif',Georgia,serif;color:#fff;letter-spacing:-.035em}
.contact-band .contact-form{border-radius:3px;box-shadow:15px 15px 0 #132fa8;padding:34px}
.contact-band p:not(.eyebrow){font-size:.9rem;line-height:1.7}
.contact-band .contact-form p{font-size:.69rem;line-height:1.6}
.contact-band .contact-layout>div:first-child{position:sticky;top:40px}
.contact-band .eyebrow{color:#e0e5ff}
.contact-band .email-link{font-size:.82rem}
.field input,.field select,.field textarea{border-color:#7d857b;border-radius:3px}
.contact-form .button{font-size:.76rem}
.footer{background:var(--night);padding-top:55px;overflow:hidden}
.footer-top{border-bottom:0;padding-bottom:25px}
.footer-brand{width:210px}
.footer-top>p{font-size:.73rem}
.footer-signature{font-size:clamp(3rem,9.5vw,9.5rem);font-weight:430;letter-spacing:-.07em;line-height:1.2;padding:30px 0 45px;margin:0;white-space:nowrap;border-bottom:1px solid #59605b}
.footer-signature em{font-size:1.1em;color:var(--paper);letter-spacing:-.05em}
.footer-bottom{font-size:.6rem;color:#c9cfca}
.page-hero{border-top:1px solid var(--line);padding-top:55px;padding-bottom:75px}
.page-hero h1{font-size:clamp(3.4rem,7.4vw,7.4rem);font-weight:430;line-height:1.03}
.page-hero h1 em{color:var(--blue)}
.page-lead{font-size:clamp(1.05rem,1.75vw,1.5rem);line-height:1.6}
.case-hero h1{font-size:clamp(3.1rem,7vw,7.2rem)}
.case-meta{margin-top:45px}
.case-main-image{border-radius:0;padding:65px 8% 30px;position:relative;background:linear-gradient(135deg,#e5e9e3,var(--project-bg))}
.case-main-image .screen-frame{border-radius:5px;box-shadow:10px 20px 35px #18202125;transform:rotate(-1deg)}
.case-main-image figcaption{font-size:.66rem;color:#344642;margin-top:28px}
.case-intro h2{font-size:clamp(2rem,3.7vw,3.7rem);line-height:1.12}
.case-choices .section-heading>h2,.principles .section-heading>h2{font-size:clamp(2.8rem,5vw,4.8rem)}
.choice-grid .step-num{font:italic 400 3.2rem/1 'Instrument Serif',Georgia,serif;color:var(--blue)}
.choice-grid h3{font-size:1.7rem;line-height:1.15}
.choice-grid p{font-size:.83rem;line-height:1.8}
.service-context{background:#e8e9e1}
.service-details article{display:grid;grid-template-columns:45px 1fr;column-gap:20px;row-gap:5px;padding-block:25px 35px}
.service-details .step-num{grid-row:1 / 3;font-size:.64rem;padding-top:6px;margin:0}
.service-details p{grid-column:2;font-size:.86rem}
.service-details h3{font-size:1.7rem;line-height:1.15}
.scope-section{background:var(--night)}
.scope-section em{color:#c2cbff}
.scope-list li{font-size:.9rem}
.contact-intro h1{font-weight:430;line-height:1.04}
.contact-intro h1 em{color:var(--blue)}
.contact-page{border-top:1px solid var(--line)}
.contact-page>div:last-child{background:#eaece3;padding:28px}
.prose h2{font-family:Onest,Arial,sans-serif;letter-spacing:-.04em;font-size:1.8rem}

@media(min-width:1700px){.opening-art{height:580px}.opening-grid{min-height:620px}.opening-copy h1{font-size:8.3rem}}
@media(max-width:1100px){
 .opening-grid{grid-template-columns:1.03fr 1fr;min-height:490px}
 .opening-copy h1{font-size:7.55vw}
 .opening-art{height:410px}
 .opening-intro>p{font-size:.91rem;max-width:330px}
 .opening-intro .hero-actions{gap:18px}
 .opening-intro .button{font-size:.7rem;padding:14px 17px;gap:12px}
 .opening-intro .text-link{font-size:.7rem;gap:12px}
 .hero-phone{border-width:5px;border-radius:15px}
 .hero-screen{border-width:4px;top:18%}
 .hero-ribbon{bottom:-5%}
 .hero-art-caption{left:27%;right:5%;bottom:4%}
 .hero-art-caption strong{font-size:.9rem}
 .work-heading{grid-template-columns:.6fr 1.4fr;gap:20px;margin-bottom:60px}
 .work-heading>p:last-child{grid-column:2;font-size:.82rem}
 .work-heading>p:last-child br{display:none}
 .work-heading h2{font-size:6.6vw}
 .project-stage{aspect-ratio:1.75;padding:55px 8% 70px}
 .project-feature.concept{width:91%}
 .project-feature.concept .project-stage{aspect-ratio:1.55;padding:55px 7% 70px}
 .project-caption{grid-template-columns:1fr;gap:16px}
 .project-case-link{justify-self:start}
 .project-stage[data-project-view=mobile] .phone-preview{max-height:360px;max-width:170px}
 .services-editorial{grid-template-columns:.9fr 1.1fr;gap:45px}
 .services-intro h2{font-size:4.7vw}
 .service-row{column-gap:13px;grid-template-columns:25px 1fr 25px}
 .service-row h3{font-size:1.5rem}
 .service-note{margin-left:38px}
 .demo-layout{grid-template-columns:.9fr 1.1fr;gap:35px}
 .demo-copy h2{font-size:4.9vw}
 .demo-preview{padding:30px 24px;min-height:320px}
 .demo-arch{width:100px}
 .demo-title{font-size:4.7vw}
 .about-editorial{gap:7vw;grid-template-columns:.8fr 1.2fr}
 .maker-note{min-height:350px;padding:20px}
 .maker-initials{font-size:25vw}
 .about-statement h2{font-size:5.8vw}
 .process-list{gap:24px}
 .process-list .step-num{font-size:3.8rem}
 .process-list h3{font-size:1.2rem}
 .contact-band .contact-form{padding:26px;box-shadow:10px 10px 0 #132fa8}
 .contact-band h2{font-size:5.8vw}
 .footer-signature{font-size:9.2vw}
}
@media(max-width:767px){
 :root{--gutter:23px}
 .section{padding-block:75px}
 h2{font-size:clamp(2.6rem,9vw,4rem);line-height:1.04}
 .eyebrow{font-size:.57rem;margin-bottom:25px}
 .demo-strip{font-size:.52rem;gap:10px;min-height:23px}
 .header-inner{min-height:81px;height:auto;padding-block:12px}
 .brand{width:193px}
 .site-header .nav-contact{padding:10px 0;border:0;border-radius:0}
 .site-header[data-menu-ready] .nav-contact:hover{background:transparent;color:var(--blue)}
 .site-header[data-menu-ready] nav{padding-bottom:12px}
 .menu-toggle{min-height:44px;min-width:60px;justify-content:flex-end}
 .menu-toggle>span:first-child{font-size:.65rem}
 .button{min-height:51px;padding:14px 18px;font-size:.73rem;gap:17px}
 .atelier-hero{padding-top:0;padding-bottom:22px}
 .opening-meta{padding-top:18px;font-size:.52rem;letter-spacing:.045em}
 .opening-meta p:last-child{display:none}
 .opening-grid{grid-template-columns:1fr;gap:15px;padding-top:37px;min-height:0}
 .opening-copy{padding:0;z-index:2}
 .opening-copy h1{font-size:clamp(3.45rem,12.5vw,6rem);white-space:normal;line-height:1.01;letter-spacing:-.065em}
 .opening-copy h1 em{font-size:1.13em;line-height:1.03;letter-spacing:-.05em}
 .opening-intro{margin-top:23px;max-width:none}
 .opening-intro>p{font-size:.92rem;line-height:1.65;max-width:370px}
 .opening-intro .hero-actions{margin-top:23px;gap:22px;flex-wrap:wrap}
 .opening-intro .button{font-size:.72rem;min-height:50px;padding:13px 17px;gap:18px}
 .opening-intro .text-link{font-size:.72rem;gap:14px}
 .opening-art{height:auto;aspect-ratio:1.04;max-width:520px;width:100%;margin:10px auto 0;perspective:800px}
 .hero-screen{width:89%;top:15%;left:0;border-width:4px;transform:rotate(-6deg);box-shadow:2px 4px 0 #a6aeb0,4px 7px 0 #7b8587,8px 16px 26px #18202133}
 .hero-screen .browser-dots{height:14px}
 .hero-screen .browser-dots span{font-size:6px}
 .hero-phone{width:25%;top:35%;right:1%;border-width:4px;border-radius:14px;transform:rotate(8deg);box-shadow:3px 4px 0 #a2aaad,7px 10px 17px #18202133}
 .hero-ribbon{width:90%;left:-8%;bottom:-11%}
 .hero-art-caption{font-size:.51rem;left:31%;right:7%;bottom:1%;gap:12px}
 .hero-art-caption strong{font-size:.9rem;margin-top:3px}
 .art-arrow{width:35px;height:35px;font-size:1rem}
 .art-registration{font-size:.42rem;top:0;right:0}
 .art-side-label{left:-2%;font-size:.45rem;bottom:1%}
 .opening-foot{grid-template-columns:1fr auto;padding-top:20px;margin-top:20px;gap:20px;font-size:.56rem}
 .opening-foot .disciplines{display:none}
 .scroll-note{font-size:.53rem;gap:10px;justify-self:end}
 .scroll-note>span{width:30px;height:30px;font-size:.9rem}
 .work-section{margin-top:25px;padding-block:65px 60px}
 .work-heading{display:block;margin-bottom:40px}
 .work-heading .eyebrow{margin-top:0;margin-bottom:25px}
 .work-heading h2{font-size:clamp(3.2rem,12vw,5rem);line-height:1.03}
 .work-heading>p:last-child{font-size:.8rem;margin-top:25px;max-width:260px}
 .work-heading>p:last-child br{display:none}
 .work-gallery,.work-list .work-gallery{gap:55px}
 .project-topline{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px}
 .project-topline .project-number{font-size:.54rem}
 .project-status{font-size:.53rem;padding:5px 8px}
 .project-stage,.project-feature.concept .project-stage{aspect-ratio:1.1;padding:45px 7% 64px;min-height:290px}
 .project-feature.concept{width:100%}
 .desktop-preview{transform:rotate(-4deg);border-radius:3px;box-shadow:0 17px 23px #1820212b}
 .project-feature.concept .desktop-preview{transform:rotate(3deg)}
 .desktop-preview .browser-dots{height:15px;padding-left:7px}
 .desktop-preview .browser-dots i{width:3px;height:3px}
 .desktop-preview .browser-dots span{font-size:6px;margin-right:6px}
 .project-ghost{font-size:31vw;bottom:.04em;left:3%;letter-spacing:-.05em}
 .project-feature.concept .project-ghost{font-size:58vw;bottom:-.13em;left:6%}
 .project-tools{left:14px;right:14px;bottom:14px;gap:10px}
 .project-tools>span{max-width:72px;font-size:.49rem;line-height:1.5}
 .view-switch{gap:0;padding:2px}
 .view-switch button{font-size:.58rem;min-height:42px;padding:10px 11px}
 .project-stage[data-project-view=mobile],.project-feature.concept .project-stage[data-project-view=mobile]{padding:14px 20px 64px}
 .project-stage[data-project-view=mobile] .phone-preview{max-height:220px;max-width:108px;min-height:0;border-width:4px;border-radius:12px}
 .project-caption{padding-top:20px;gap:15px}
 .project-caption h3{font-size:1.65rem;line-height:1.12;letter-spacing:-.045em}
 .project-caption p{font-size:.76rem;line-height:1.7;margin-top:12px}
 .project-case-link{font-size:.62rem;gap:15px;padding-bottom:8px;min-height:44px}
 .project-case-link svg{width:20px;height:20px}
 .work-section .section-end{margin-top:45px;padding-top:18px}
 .services-editorial{grid-template-columns:1fr;gap:40px}
 .services-intro{position:static}
 .services-intro h2{font-size:clamp(2.6rem,9.7vw,4.2rem)}
 .services-intro>p:not(.eyebrow){font-size:.85rem;max-width:335px;margin-top:23px}
 .service-disc{width:93px;height:93px;float:right;margin-top:-25px;margin-bottom:5px;margin-left:16px}
 .service-disc>span{font-size:.49rem}
 .service-disc>svg{width:22px;height:22px}
 .service-rows{clear:both}
 .service-row{grid-template-columns:25px 1fr 24px;gap:13px;padding:24px 0}
 .service-row h3{font-size:1.45rem}
 .service-row>p{font-size:.77rem;line-height:1.7}
 .service-note{font-size:.68rem;margin-left:38px}
 .demo-layout{grid-template-columns:1fr;gap:44px}
 .demo-copy h2{font-size:clamp(2.6rem,9.5vw,4rem)}
 .demo-copy>p:not(.eyebrow){font-size:.84rem}
 .demo-switch button{font-size:.67rem}
 .demo-canvas{margin:0 6px 10px;transform:rotate(-2deg);box-shadow:7px 12px 0 #d3d4ca,12px 20px 25px #18202114}
 .demo-browser{padding:12px 16px;font-size:.49rem}
 .demo-preview{padding:25px 23px;min-height:300px}
 .demo-preview-top{margin-bottom:30px;font-size:.5rem}
 .demo-title{font-size:clamp(2.6rem,10vw,4.1rem)}
 .demo-preview>p{font-size:.63rem;margin-top:20px}
 .demo-bottom{margin-top:28px}
 .demo-arch{width:100px;height:80px;gap:0}
 .demo-arch i{height:80px;width:35px;flex:none}
 .demo-faux-cta{font-size:.55rem;gap:13px}
 .demo-caption{font-size:.47rem;padding:11px 15px}
 .about-editorial{display:flex;flex-direction:column;gap:45px;align-items:stretch}
 .maker-note{min-height:310px;max-width:330px;width:90%;padding:20px;align-self:center;order:2}
 .maker-initials{font-size:250px;margin-top:25px;padding-bottom:25px;padding-left:5%}
 .maker-caption{font-size:.54rem}
 .about-statement h2{font-size:clamp(2.8rem,10.4vw,4.5rem)}
 .about-bottom{margin-top:25px;gap:14px}
 .about-bottom>p{font-size:.84rem}
 .process-section .section-heading{margin-bottom:20px}
 .process-section .section-heading>div>p{font-size:.83rem;margin-top:22px}
 .process-list{grid-template-columns:1fr;gap:28px;margin-top:35px}
 .process-list li{display:grid;grid-template-columns:48px 1fr;gap:10px 20px;padding-top:20px}
 .process-list .step-num{font-size:2.6rem;grid-row:1 / 3;margin:0;line-height:.95}
 .process-list h3{font-size:1.2rem;margin:0}
 .process-list p{grid-column:2;font-size:.77rem;line-height:1.75}
 .faq-layout{grid-template-columns:1fr;gap:30px}
 .faq-section{padding-block:75px}
 .faqs summary{font-size:.84rem;line-height:1.6;padding:21px 0}
 .faqs details>p{font-size:.8rem;line-height:1.7}
 .contact-band{padding-block:65px}
 .contact-band .contact-layout>div:first-child{position:static}
 .contact-band h2{font-size:clamp(3.1rem,10.7vw,4.5rem);line-height:1.06}
 .contact-band p:not(.eyebrow){font-size:.85rem}
 .contact-band .email-link{font-size:.74rem;margin-top:24px;gap:8px}
 .contact-band .contact-form{padding:23px 19px;box-shadow:7px 9px 0 #132fa8}
 .contact-layout{gap:35px}
 .contact-band .contact-form p{font-size:.65rem}
 .field label{font-size:.7rem}
 .field small{font-size:.61rem}
 .footer{padding-top:42px}
 .footer-top{grid-template-columns:1fr;gap:20px;padding-bottom:5px}
 .footer-brand{width:200px}
 .footer-top>p{font-size:.73rem}
 .footer-signature{font-size:clamp(2.9rem,12.5vw,6rem);line-height:1.03;white-space:normal;padding-block:35px}
 .footer-signature em{display:block;font-size:1.2em;margin-top:3px}
 .footer-bottom{font-size:.56rem;gap:20px}
 .page-hero{padding-block:40px 50px}
 .page-hero h1{font-size:clamp(2.6rem,10vw,4.7rem);line-height:1.06;letter-spacing:-.055em;overflow-wrap:break-word}
 .page-hero>.eyebrow{margin-bottom:27px}
 .page-lead{font-size:1.02rem;line-height:1.6;max-width:100%}
 .work-list .project-filters{margin-bottom:30px}
 .project-filters button{font-size:.62rem;gap:12px;padding:10px 12px}
 .case-hero h1{font-size:clamp(2.6rem,9.6vw,4rem)}
 .case-main-image{padding:30px 17px 25px;border-radius:0}
 .case-main-image figcaption{font-size:.62rem;line-height:1.7;margin-top:20px}
 .case-intro h2{font-size:2rem;line-height:1.15}
 .case-choices .section-heading>h2,.principles .section-heading>h2{font-size:2.7rem}
 .choice-grid .step-num{font-size:2.6rem;margin-bottom:20px}
 .choice-grid h3{font-size:1.5rem}
 .choice-grid p{font-size:.83rem}
 .service-details article{grid-template-columns:28px 1fr;gap:9px 13px;padding:24px 0}
 .service-details h3{font-size:1.45rem;margin-bottom:10px;line-height:1.18}
 .service-details p{font-size:.83rem;line-height:1.75}
 .service-details .step-num{font-size:.59rem;padding-top:3px}
 .contact-page{padding-top:38px;gap:30px}
 .contact-page>div:last-child{padding:23px 19px}
 .contact-intro h1{font-size:clamp(2.8rem,10.6vw,4.5rem)}
 .prose h2{font-size:1.55rem}
}
@media(max-width:359px){
 :root{--gutter:18px}
 .brand{width:174px}
 .opening-meta{font-size:.47rem}
 .opening-copy h1{font-size:12.4vw}
 .opening-intro>p{font-size:.86rem}
 .opening-intro .hero-actions{gap:14px}
 .opening-intro .button{font-size:.65rem;gap:11px;padding-inline:14px}
 .opening-intro .text-link{font-size:.65rem;gap:9px}
 .opening-foot{font-size:.5rem;gap:12px}
 .scroll-note{font-size:.48rem;gap:7px}
 .opening-art{margin-top:18px;aspect-ratio:1}
 .hero-art-caption{left:30%;bottom:0}
 .hero-art-caption strong{font-size:.8rem}
 .art-arrow{width:30px;height:30px}
 .project-stage,.project-feature.concept .project-stage{min-height:270px}
 .project-tools{left:11px;right:11px}
 .project-tools>span{font-size:.46rem}
 .view-switch button{font-size:.54rem;padding-inline:10px}
 .services-intro h2{font-size:9.5vw}
 .service-disc{float:none;margin-top:25px}
 .service-row h3{font-size:1.3rem}
 .demo-preview{padding:23px 18px}
 .demo-title{font-size:10.6vw}
 .demo-faux-cta{font-size:.51rem;gap:8px}
 .demo-arch{width:85px}
 .demo-arch i{width:29px}
 .contact-band h2{font-size:11vw}
 .contact-band .email-link{font-size:.66rem}
 .contact-band .contact-form{padding:20px 16px}
 .maker-initials{font-size:220px}
 .maker-note{min-height:280px}
 .footer-bottom{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:no-preference){
 .opening-copy{animation:atelier-enter .75s var(--ease) both}
 .hero-screen{animation:screen-enter 1.1s var(--ease) both}
 .hero-phone{animation:phone-enter 1.2s var(--ease) both}
 @keyframes atelier-enter{from{transform:translateY(14px)}to{transform:translateY(0)}}
 @keyframes screen-enter{from{translate:12px 22px;rotate:3deg}to{translate:0 0;rotate:0deg}}
 @keyframes phone-enter{from{translate:-8px 30px;rotate:-5deg}to{translate:0 0;rotate:0deg}}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .hero-screen{transform:rotate(-7deg)}
 .hero-phone{transform:rotate(9deg)}
 .desktop-preview,.project-feature.concept .desktop-preview,.project-stage:hover .desktop-preview{transform:none}
 .service-disc:hover{transform:none}
 .demo-canvas{transform:none}
}
/* Leesbare lopende tekst; kleine labels blijven ondersteunend. */
.project-caption p,.service-row>p,.about-bottom>p,.demo-copy>p:not(.eyebrow),.process-list p,.choice-grid p,.service-details p{font-size:.94rem}
.project-status{font-size:.67rem}
.project-case-link{font-size:.74rem}
.project-tools>span{font-size:.65rem}
.view-switch button{font-size:.7rem;min-height:42px}
.field label{font-size:.8rem}
.faqs summary{font-size:1rem}
.faqs details>p{font-size:.94rem}
.contact-band .contact-form p{font-size:.75rem}
@media(max-width:767px){
 .opening-intro>p{font-size:1rem}
 .project-caption p,.service-row>p,.about-bottom>p,.demo-copy>p:not(.eyebrow),.process-list p,.choice-grid p,.service-details p,.faqs details>p{font-size:.94rem;line-height:1.7}
 .project-topline .project-number{font-size:.62rem}
 .project-status{font-size:.65rem}
 .project-case-link{font-size:.73rem}
 .project-tools>span{font-size:.57rem}
 .view-switch button{font-size:.67rem}
 .services-intro>p:not(.eyebrow){font-size:.94rem}
 .service-note{font-size:.78rem}
 .faqs summary{font-size:.97rem}
 .contact-band p:not(.eyebrow){font-size:.96rem}
 .contact-band .contact-form p{font-size:.75rem}
 .contact-band .form-status{font-size:.86rem!important}
 .field label{font-size:.79rem}
}

/* Consent controls: equal choices, no overlay or forced decision. */
.cookie-panel{position:fixed;z-index:1000;bottom:20px;left:20px;right:20px;max-width:780px;margin-left:auto;background:#f5f3ed;color:#182021;border:1px solid #182021;padding:24px;box-shadow:0 12px 48px #18202133;font-size:15px;max-height:85dvh;overflow:auto}
.cookie-panel[hidden]{display:none}.cookie-panel h2{font-family:Onest,sans-serif;font-size:22px;line-height:1.25;letter-spacing:-.5px;margin:0 0 12px}.cookie-panel p{font-size:14px;line-height:1.6;margin:0 0 10px;max-width:none}.cookie-panel a{text-decoration:underline}.cookie-actions{display:flex;gap:12px;margin-top:18px}.cookie-actions button{background:#182021;color:#fff;border:1px solid #182021;min-height:46px;padding:10px 22px;font:inherit;cursor:pointer;flex:1}.cookie-actions button:hover{background:#2546f3}.cookie-settings{background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;padding:0}.cookie-panel button:focus-visible,.cookie-settings:focus-visible{outline:3px solid #2546f3;outline-offset:4px}@media(max-width:479px){.cookie-panel{left:12px;right:12px;bottom:12px;padding:18px}.cookie-panel h2{font-size:20px}.cookie-actions{gap:8px}.cookie-actions button{padding:10px}}