/* A bold, warm, typographic studio: one visual language on every page. */
:root{--paper:#f6f3ea;--ink:#201f1c;--muted:#68655e;--line:#201f1c40;--space:clamp(22px,3vw,60px)}
body{background:var(--paper);color:var(--ink)}
.masthead{padding-block:24px;align-items:center;min-height:78px}.wordmark{font-size:24px;font-weight:900;letter-spacing:-.065em;text-transform:uppercase}.wordmark sup{font-size:10px;vertical-align:top;letter-spacing:0;margin-left:3px}.desktop-nav{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.025em}.menu-toggle{margin-top:0;text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:.025em;min-height:44px}.desktop-nav a:hover{text-decoration:none}.desktop-nav a:hover{opacity:.6}
.stage{background:var(--paper);height:100svh;min-height:620px;border-bottom:1px solid var(--ink)}
.hero-title{left:var(--space);top:19%;width:59%;max-width:none}.hero-title .kicker{font:11px/1.3 'Courier New',monospace;font-weight:700;letter-spacing:.055em;margin-bottom:22px}.hero-title h1{font-size:clamp(88px,min(11.8vw,18svh),200px);font-weight:900;line-height:.83;letter-spacing:-.075em;max-width:none;text-transform:uppercase}.hero-title h1 span{display:block}.hero-title h1 span+span::before{content:none}.hero-title h1 b{font-size:.62em;font-weight:900;display:inline-block;vertical-align:top;line-height:.7;margin:.08em 0 0 .09em}.hero-title .intro{display:block;max-width:360px;margin-top:30px;font-size:15px;font-weight:500;line-height:1.4;letter-spacing:-.01em}
.character-area canvas{filter:none}.floor-shadow{opacity:.65}.hero-footer{bottom:26px;gap:24px;align-items:center}.hero-actions{display:flex;gap:12px;align-items:center;flex-shrink:0}.hero-process{margin-left:auto;font:700 10px/1.4 'Courier New',monospace;text-transform:uppercase;letter-spacing:.04em;display:flex;gap:14px;white-space:nowrap}.hero-controls{gap:0}.hero-controls .hint{display:none}.motion-control{border:1px solid var(--line);width:36px;height:36px}
.cta,.work .cta{--cta-ink:var(--ink);--cta-paper:var(--paper);font-family:'Courier New',monospace!important;font-weight:700!important;text-transform:uppercase;letter-spacing:-.03em!important}.cta .cta-arrow{font-family:var(--sans);font-size:19px}.hero-actions .cta{min-height:46px!important;font-size:12px!important;padding:12px 24px 12px 17px!important;gap:20px}.hero-actions .hero-secondary{background:transparent;color:var(--ink);border-color:var(--ink)!important;clip-path:none}
:is(.contact,.mobile-menu) .cta{--cta-ink:var(--paper);--cta-paper:var(--ink)}.project-detail.cta{margin-top:22px}.kicker,.section-top,.case-breadcrumb,.case-subtitle>span,.case-page figcaption,.studio-facts dt,.contact-bottom,.case-footer>div{font-family:'Courier New',monospace;font-weight:700;letter-spacing:0;text-transform:uppercase}.section-top{font-size:11px}.section-word,.studio-word{font-weight:900;letter-spacing:-.075em}.section-word{font-size:clamp(100px,18vw,330px);margin:36px 0 58px}.work{background:var(--paper);color:var(--ink);padding-top:42px}.work-layout{grid-template-columns:1.12fr 1fr;gap:6%;align-items:start}.project-list{gap:0}.project-tab{border-bottom:1px solid var(--line);padding:20px 0!important;color:#767268;font-weight:850;text-transform:uppercase}.project-tab:first-child{border-top:1px solid var(--line)}.project-tab span{font-size:clamp(32px,4.45vw,85px);line-height:.94;letter-spacing:-.06em}.project-tab:is(:hover,[data-active=true]){color:var(--ink)}.project-tab small{font-family:'Courier New',monospace;font-size:11px;font-weight:700;letter-spacing:0}.preview-image{aspect-ratio:1/1;background:#e9e5dc;max-height:650px}.preview-meta{font-size:12px}.preview-meta .year{font-family:'Courier New',monospace}.preview-image:focus-visible{outline-color:var(--ink)!important}.preview-type{background:#e9e5dc}.work-visual{background:#e9e5dc}
.services{border-top:1px solid var(--ink);padding-top:38px}.services-intro h2,.service h3,.studio-statement,.contact h2,.case-story h2,.case-next-link h2{font-weight:850;text-transform:uppercase;letter-spacing:-.06em}.services-intro h2{font-size:clamp(40px,6vw,105px);line-height:.9}.services-intro p{font-size:16px;line-height:1.5}.service summary{padding-block:26px}.service h3{font-size:clamp(26px,3.3vw,60px);line-height:1.02}.service-body{padding-bottom:36px}.service-number{font-family:'Courier New',monospace;font-weight:700}.service .plus::before,.service .plus::after{height:2px}.studio{border-top:1px solid var(--ink);padding-top:38px}.studio-grid{grid-template-columns:1fr 2.4fr;gap:8%;padding-block:55px}.studio-grid h2{font-family:'Courier New',monospace;font-size:13px;font-weight:700;letter-spacing:0;line-height:1.4}.studio-statement{font-size:clamp(32px,4.2vw,76px);line-height:1.01}.studio-facts dd{font-size:14px}.contact{background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}.contact h2{font-size:clamp(48px,8.5vw,148px);line-height:.89}.contact-content{grid-template-columns:1.65fr 1fr;gap:7%}.contact-word{margin-top:60px}.contact-word text{font-weight:900}.mobile-menu{background:var(--ink)}.menu-top{font-weight:850;text-transform:uppercase}.mobile-menu nav a{font-weight:900;text-transform:uppercase;line-height:.96}.mobile-menu>p{font-family:'Courier New',monospace;font-size:11px;text-transform:uppercase}
.case-intro h1{font-weight:900;text-transform:uppercase;letter-spacing:-.065em;font-size:clamp(56px,7.5vw,140px);line-height:.88;margin-top:44px}.case-release .case-intro h1{max-width:9em}.case-subtitle{margin-top:28px}.case-story h2{font-size:clamp(38px,4.7vw,80px);line-height:.97}.case-next{background:var(--paper);color:var(--ink)}.case-next .next-category{color:var(--muted)}.case-next-link h2{font-size:clamp(42px,6.2vw,115px);line-height:.95}.case-copy{font-size:clamp(16px,1.2vw,20px)}
@media(min-width:761px) and (max-height:720px){.hero-title{top:18%}.hero-title .kicker{margin-bottom:14px}.hero-title .intro{margin-top:20px;font-size:14px}}
@media(max-width:1000px) and (min-width:761px){.hero-process{display:none}.work-layout{gap:4%}.hero-title h1{font-size:11.8vw}.hero-title{top:22%}.hero-title .intro{max-width:270px}}
@media(max-width:760px){
 :root{--space:20px}.masthead{padding-block:12px;min-height:66px}.wordmark{font-size:21px}.stage{min-height:0;height:100svh;max-height:100svh}.hero-title{top:92px;width:calc(100% - 40px);max-width:none}.hero-title .kicker{font-size:10px;margin-bottom:16px}.hero-title h1{font-size:clamp(58px,17.7vw,105px);line-height:.83;letter-spacing:-.065em}.hero-title h1 span{display:block}.hero-title .intro{display:none}.hero-footer{bottom:16px;display:grid;grid-template-columns:1fr 36px;gap:12px 10px}.hero-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero-actions .cta{width:100%;gap:8px;min-height:44px!important;font-size:11px!important;padding:11px 18px 11px 12px!important}.hero-process{margin:0;font-size:9px;gap:10px;display:flex}.hero-controls{justify-self:end}.hero-footer .motion-control{width:32px;height:32px}.section-word{margin-block:30px 34px;font-size:28vw}.work{padding-top:28px}.work-layout{grid-template-columns:1fr;gap:28px;padding-bottom:28px}.project-tab{padding-block:17px!important}.project-tab span{font-size:clamp(28px,8.4vw,62px)}.preview-image{aspect-ratio:4/3;max-height:none}.services,.studio{padding-top:28px}.services-intro{padding-block:34px;gap:22px}.services-intro h2{font-size:clamp(37px,10vw,66px)}.service summary{gap:14px;padding-block:21px;grid-template-columns:22px 1fr 22px}.service h3{font-size:clamp(23px,6.1vw,38px)}.service-body{padding:0 8px 28px 36px;gap:18px}.studio-grid{grid-template-columns:1fr;gap:25px;padding-block:35px}.studio-statement{font-size:clamp(30px,8.4vw,52px)}.contact-content{grid-template-columns:1fr;gap:30px}.contact h2{font-size:clamp(44px,12vw,84px)}.contact-action p{max-width:320px}.case-intro h1{font-size:clamp(40px,11vw,80px);margin-top:28px;overflow-wrap:anywhere}.case-story h2{font-size:clamp(34px,9vw,56px)}.case-next-link h2{font-size:clamp(34px,8.8vw,62px)}
}
@media(max-width:760px) and (max-height:650px){.hero-title{top:78px}.hero-title .kicker{display:none}.hero-title h1{font-size:min(16vw,11svh)}.hero-footer{bottom:10px;gap:7px}.hero-process{font-size:8px}.hero-actions .cta{min-height:42px!important}}
@media(min-width:761px) and (max-height:500px){.stage{min-height:480px}.hero-title{top:20%}.hero-title h1{font-size:80px}.hero-title .intro{display:none}}
/* A shared bold stroke for open/close; pointer focus has no browser box. */
.menu-toggle,.menu-top button[data-close]{width:44px;height:44px;min-height:44px;display:grid;place-items:center;padding:0;margin:0;border:0;background:transparent;box-shadow:none;border-radius:0;-webkit-tap-highlight-color:transparent}
.menu-icon{width:28px;height:28px;display:block;pointer-events:none}
.menu-icon path{stroke:currentColor;stroke-width:3.2;stroke-linecap:square;stroke-linejoin:miter}
.menu-toggle:focus,.menu-top button[data-close]:focus{outline:none;box-shadow:none}
.menu-toggle:focus-visible .menu-icon,.menu-top button[data-close]:focus-visible .menu-icon{outline:2px solid currentColor;outline-offset:5px}
.mobile-menu{outline:none}.menu-toggle:active,.menu-top button[data-close]:active{opacity:.65}
@media(max-width:760px){.menu-top{align-items:center}.mobile-menu{padding-top:12px}}
/* Match the service accordion's rotating line movement. */
.menu-stroke.first{transform-origin:14px 9px}.menu-stroke.second{transform-origin:14px 19px}
.menu-toggle,.menu-top button[data-close]{position:relative}
.menu-toggle:focus-visible,.menu-top button[data-close]:focus-visible,.menu-toggle:focus-visible .menu-icon,.menu-top button[data-close]:focus-visible .menu-icon{outline:none!important;box-shadow:none!important}
.menu-toggle:focus-visible::after,.menu-top button[data-close]:focus-visible::after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:currentColor;bottom:0;left:calc(50% - 2px)}
.mobile-menu:focus,.mobile-menu:focus-visible{outline:none!important;box-shadow:none!important}
/* Header and open-menu header share the exact same grid and geometry. */
:root{--header-height:92px;--header-pad:24px;--brand-size:24px}
.masthead{height:var(--header-height);min-height:var(--header-height);padding:var(--header-pad) var(--space);grid-template-columns:1fr 1fr 44px;align-items:center}
.masthead .wordmark,.menu-top .wordmark{font-family:var(--sans);font-size:var(--brand-size);font-weight:900;letter-spacing:-.065em;line-height:1.15;text-transform:uppercase}
.mobile-menu{padding:0 var(--space) 24px}
.mobile-menu .menu-top{display:grid;grid-template-columns:1fr 1fr 44px;grid-column:1/-1;height:var(--header-height);min-height:var(--header-height);align-items:center;padding:var(--header-pad) 0;gap:0;line-height:1.15}
.menu-top .wordmark{grid-column:1;justify-self:start}.menu-top button[data-close]{grid-column:3;justify-self:end}
.mobile-menu[open]{grid-template-rows:var(--header-height) 1fr auto;animation:menu-uncover 360ms cubic-bezier(.16,1,.3,1) both;translate:none}
.mobile-menu.closing[open]{animation:menu-cover 350ms cubic-bezier(.4,0,.8,.2) both;translate:none}
@keyframes menu-uncover{from{clip-path:inset(0 0 calc(100% - var(--header-height)) 0)}to{clip-path:inset(0)}}
@keyframes menu-cover{from{clip-path:inset(0)}to{clip-path:inset(0 0 calc(100% - var(--header-height)) 0)}}
html{scroll-padding-top:0}#werk,#diensten,#studio{scroll-margin-top:0}
@media(max-width:760px){
 :root{--header-height:68px;--header-pad:12px;--brand-size:21px}
 .masthead,.mobile-menu .menu-top{grid-template-columns:1fr 44px}
 .menu-top button[data-close]{grid-column:2}
 .mobile-menu{padding:0 var(--space) 24px}
 .mobile-menu[open]{grid-template-rows:var(--header-height) 1fr auto auto}
}
/* Desktop uses the direct navigation; mobile retains the menu control. */
@media(min-width:761px){
 .masthead{grid-template-columns:1fr auto}
 .masthead .menu-toggle{display:none}
 .masthead .desktop-nav{display:flex;justify-self:end;font-weight:900}
 .masthead .desktop-nav a{font-size:var(--brand-size);font-weight:900;line-height:1.15}
}

@media(prefers-reduced-motion:reduce){.studio-statement .reading-word{color:var(--ink)!important}}
@media print{.studio-statement .reading-word{color:#000!important}}