@font-face{font-family:'Instrument Serif';src:url('assets/fonts/instrument-serif.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/instrument-serif-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url('assets/fonts/geist.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--paper:#f6f4ef;--plane:#e9e5dc;--ink:#242925;--muted:#72756d;--patina:#7fc5b8;--line:#d9d6ce;--gutter:clamp(2rem,7.778vw,10rem);--serif:'Instrument Serif',Georgia,serif;--sans:Geist,Arial,sans-serif;--header:7.5rem;--footer:4rem}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:0.875rem;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:0.125rem solid #458f80;outline-offset:0.3125rem}::selection{background:var(--patina);color:var(--ink)}h1,h2,p,figure{margin:0}h1,h2{font-family:var(--serif);font-weight:400}h1 em,h2 em{font-weight:400}p{line-height:1.75}button{cursor:pointer}.skip-link{position:fixed;top:-6.25rem;left:1.25rem;padding:0.75rem;background:var(--paper);z-index:100}.skip-link:focus{top:0.625rem}
.site-header{height:var(--header);margin:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;border-bottom:0.0625rem solid var(--line);gap:3rem;position:relative;z-index:5;background:var(--paper)}.brand{display:flex;align-items:center;gap:0.75rem;flex:none}.brand img{filter:grayscale(1) brightness(.48)}.brand-mark{width:2.0625rem;height:2.0625rem}.brand-word{width:8.25rem;height:auto}.nav{display:flex;align-items:center;gap:2.1875rem}.nav a{font-size:0.75rem;position:relative;padding:0.75rem 0}.nav a:after{content:'';height:0.0625rem;position:absolute;left:0;right:0;bottom:0.3125rem;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s}.nav a:hover:after,.nav a[aria-current=page]:after{transform:scaleX(1)}
.pill{isolation:isolate;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;border:0.0625rem solid #8ebbb0;border-radius:6.25rem;padding:1.1875rem 1.6875rem;background:#7fc5b833;color:var(--ink);font-size:0.75rem;font-weight:450;white-space:nowrap;cursor:pointer;min-height:3.375rem}.pill .liquid{position:absolute;z-index:-1;inset:-55% -10%;background:var(--patina);border-radius:43% 48% 44% 46%;transform:translateX(-115%);pointer-events:none}.pill .arrow{display:none}.site-footer{height:var(--footer);margin:0 var(--gutter);border-top:0.0625rem solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:0.5625rem;color:var(--muted);position:relative;z-index:3}.site-footer a{color:var(--ink);text-underline-offset:0.25rem}.site-footer a:hover{text-decoration:underline}.site-footer:after{content:'Aandacht maakt het verschil.';font-family:var(--serif);font-style:italic;font-size:1rem;color:#767c70}
/* The fixed stage holds complete page faces between the header and footer. */
.screen-stage{height:calc(100dvh - var(--header) - var(--footer));position:relative;isolation:isolate;overflow:hidden}.page-screen{position:absolute;inset:0;overflow:hidden;transform-style:preserve-3d}.screen-body{height:100%;transform-origin:50% 50%;backface-visibility:hidden}.page-screen[hidden]{display:none}.page-screen main{height:100%;min-height:0}.page-screen.is-leaving{pointer-events:none}.home,.about,.contact,.page{margin:0 var(--gutter);height:calc(100dvh - var(--header) - var(--footer))}
.home{display:grid;grid-template-columns:21.875rem minmax(0,1fr);gap:3.75rem;position:relative;align-items:center}.home-copy{position:relative;z-index:2;padding-bottom:0.625rem}.home h1{font-size:clamp(4.125rem,5.8vw,5.6875rem);line-height:1.015;letter-spacing:-.035em;margin-top:1.875rem;white-space:nowrap}.home-intro{font-size:0.8125rem;color:#686f64;line-height:1.9;max-width:19.375rem;margin-top:1.8125rem}.home-copy>.pill{margin-top:1.75rem}.studio-note{font-size:0.625rem;color:var(--muted);line-height:1.8;margin-top:2.25rem;padding-left:1.8125rem;position:relative}.studio-note:before{content:'';position:absolute;top:0.5rem;left:0;width:1.125rem;height:0.0625rem;background:#9fa79b}.screen-frame{display:block;position:relative;aspect-ratio:16/10;border:0.25rem solid #fdfcf9;outline:0.0625rem solid #bcb8a477;background:#eeeae1;box-shadow:0.125rem 0.3125rem 0.4375rem #504c3a0d,0.4375rem 1.0625rem 1.4375rem #504c3a16,0.9375rem 2.375rem 2.625rem -1rem #504c3a19;transition:box-shadow .7s}.screen-frame img,.screen-frame video{display:block;width:100%;height:100%;object-fit:contain;aspect-ratio:16/10}.screen-frame video{position:absolute;inset:0}.screen-frame:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#fff0 30%,#333d2420);opacity:.27}
.page{padding-top:2.625rem}.page>h1{font-size:3.75rem;line-height:1.04;letter-spacing:-.025em;margin-top:1.25rem}.page-intro{max-width:36.25rem;margin-top:1.125rem;color:var(--muted);font-size:0.75rem}.examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8125rem 2.125rem;margin-top:1.8125rem}.work-card{margin:0;min-width:0}.concept-link{display:block}.work-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;border:0.25rem solid #fcfbf7;outline:0.0625rem solid #d9d6ce;box-shadow:0.125rem 0.5rem 1.125rem #504c3a0d;transition:transform .65s,box-shadow .65s}.work-card a:hover img{transform:translateY(-0.1875rem);box-shadow:0.1875rem 0.9375rem 1.625rem #504c3a1a}.work-caption{display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;padding-top:0.75rem;font-size:0.8125rem;line-height:1.4}.work-sector{font-size:0.5625rem;color:var(--muted)}.view-concept{display:flex;align-items:center;gap:0.5625rem;width:fit-content;margin-top:0.375rem;font-size:0.5625rem;line-height:1.5;color:#69715f}.view-concept>span{font-size:0.75rem}.view-concept:hover{text-decoration:underline}
.about{padding-top:2.9375rem;display:flex;flex-direction:column}.about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:6.25rem;margin-top:2.125rem}.about h1{font-size:4.125rem;line-height:1.04;letter-spacing:-.025em}.about-copy>p{margin-top:1.5rem;max-width:26.875rem;font-size:0.8125rem;color:var(--muted);line-height:1.85}.about-copy>.pill{margin-top:1.75rem}.founder-story{display:grid;grid-template-columns:8.75rem minmax(0,1fr);column-gap:1.75rem;align-content:center}.founder-figure{grid-column:1/-1;display:flex;align-items:end;gap:1.25rem;margin-bottom:1.75rem}.founder-portrait{display:grid;place-items:center;width:7.5rem;aspect-ratio:4/5;background:linear-gradient(135deg,#eae7de,#dddcd1);color:#737e6d;font-family:var(--serif);font-size:3.875rem;letter-spacing:-.045em}.founder-figure figcaption{font-size:0.5625rem;color:var(--muted);padding-bottom:0.125rem}.founder-text{grid-column:1/-1}.founder-story h2{font-size:2.1875rem;line-height:1.12;letter-spacing:-.015em;margin-bottom:1.375rem}.founder-story p{font-size:0.75rem;color:var(--muted);line-height:1.85;margin-top:0.875rem;max-width:24.375rem}.about-colophon{display:flex;justify-content:space-between;border-top:0.0625rem solid var(--line);margin-top:auto;padding:1.375rem 0 1.875rem;font-size:0.5625rem;color:var(--muted)}.about-colophon a{color:var(--ink)}
.contact{display:grid;grid-template-columns:21.875rem minmax(0,1fr);gap:4.375rem;align-items:center}.contact-copy{padding-bottom:1.75rem}.contact h1{font-size:4.5rem;line-height:1.03;letter-spacing:-.03em;margin-top:1.75rem}.contact h1 em{display:block}.contact-invitation{margin-top:1.6875rem}.contact-invitation>p{color:var(--muted);font-size:0.75rem;line-height:1.9;max-width:19.375rem}.contact-email{display:block;font-family:var(--serif);font-size:2.125rem;letter-spacing:-.025em;margin-top:1.875rem;width:fit-content;border-bottom:0.0625rem solid #b2b8a9;padding-bottom:0.1875rem}.contact-phone{font-size:1.8125rem;margin-top:0.75rem;border:0}.contact-email:hover{color:#5d7f6f}.booking{padding:1.5625rem 1.5625rem 1.125rem;border:0.0625rem solid var(--line);background:var(--paper);min-width:0}.booking-heading{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.25rem}.booking h2{font-size:1.875rem;line-height:1.1}.booking-heading>p{color:var(--muted);font-size:0.75rem;white-space:nowrap}.booking iframe{display:block;width:100%;height:25rem;border:0;background:var(--paper)}.booking-preview-note{font-size:0.75rem;color:var(--muted);margin:0 0 0.75rem;max-width:34.375rem;line-height:1.7}
/* All legal text is preserved in its source document. */
.privacy{columns:3;column-gap:2.375rem;padding-top:1.75rem;padding-bottom:1.5rem;column-fill:auto}.privacy h1{font-size:2.8125rem;margin:0 0 1rem;line-height:1}.privacy h2{font-size:1.5rem;margin:1.25rem 0 0.5625rem;break-after:avoid}.privacy p,.privacy li,.privacy td,.privacy th{font-size:0.625rem;line-height:1.6}.privacy .lead{font-size:0.6875rem}.privacy ul{padding-left:0.9375rem;margin:0.625rem 0}.privacy li{margin:0.375rem 0}.privacy a{text-decoration:underline;text-underline-offset:0.125rem;overflow-wrap:anywhere}.privacy table{width:100%;border-collapse:collapse;table-layout:fixed;break-inside:avoid}.privacy th,.privacy td{text-align:left;vertical-align:top;padding:0.4375rem 0.5rem 0.4375rem 0;border-bottom:0.0625rem solid var(--line)}.privacy .upd{font-size:0.5625rem;color:var(--muted);margin-top:0.875rem}
.viewer-open{overflow:hidden}
.concept-viewer{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:var(--ink)}
.concept-viewer::backdrop{background:rgba(36,41,37,.45)}
.viewer-surface{position:absolute;inset:5dvh 5vw;display:grid;grid-template-rows:4rem minmax(0,1fr);background:var(--paper);border:0.0625rem solid #a6aaa0;border-radius:0.75rem;box-shadow:0 1.125rem 4.375rem #111b1a40;overflow:hidden;transform-origin:0 0}
.viewer-bar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0.5rem 1.125rem 0.5rem 1.5rem;border-bottom:0.0625rem solid var(--line);background:var(--paper)}
.viewer-heading{display:flex;align-items:baseline;gap:1rem;min-width:0}
.viewer-name{font-family:var(--serif);font-size:1.625rem;font-weight:400;white-space:nowrap}
.viewer-sector{font-size:0.75rem;color:#5e655d}
.viewer-controls{display:flex;align-items:center;gap:0.75rem;flex:none}
.viewer-controls button{border:0.0625rem solid var(--line);border-radius:0.375rem;background:#fff9;padding:0 1rem;font-size:0.8125rem;cursor:pointer;min-height:2.75rem}
.viewer-controls button:hover{background:#e5e9e1}
.viewer-controls .viewer-close{margin-left:0.75rem;background:var(--ink);border-color:var(--ink);color:var(--paper)}
.viewer-controls .viewer-close:hover{background:#414c43}
.viewer-controls button:focus-visible{outline:0.1875rem solid #458f80;outline-offset:0.1875rem}
.viewer-content{position:relative;min-height:0;background:var(--paper);isolation:isolate}
.viewer-viewport{position:absolute;inset:0;width:100%;height:100%}
.viewer-note{display:none;position:absolute;left:0;width:100%;text-align:center;font-size:0.5625rem;color:var(--muted);white-space:nowrap;pointer-events:none}
.is-desktop-preview .viewer-viewport{overflow:hidden}
@media(orientation:portrait){.is-desktop-preview .viewer-note{display:block}}
.viewer-frame{position:absolute;z-index:3;inset:0;display:block;width:100%;height:100%;min-height:0;border:0;background:var(--paper);opacity:0}
.viewer-poster{position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top;transform-origin:0 0;background:var(--paper);pointer-events:none}
.viewer-poster[hidden]{display:none}
.concept-viewer.is-moving .viewer-surface{overflow:visible;background:transparent;border-color:transparent;box-shadow:none}
.concept-viewer.is-moving .viewer-bar,.concept-viewer.is-moving .viewer-frame,.concept-viewer.is-moving .viewer-note{visibility:hidden}
.concept-viewer.is-moving .viewer-viewport{overflow:visible}
.concept-viewer.is-moving .viewer-content{background:transparent}
.is-viewer-source .screen-frame,.work-card .is-viewer-source>img{visibility:hidden}
@media(max-width:700px){
 .viewer-surface{grid-template-rows:6.5rem minmax(0,1fr)}
 .viewer-bar{flex-wrap:wrap;gap:0.25rem;padding:0.375rem 0.75rem}
 .viewer-heading{width:100%;gap:0.75rem}
 .viewer-sector{font-size:0.625rem}
 .viewer-controls{width:100%;gap:0.5rem}
 .viewer-controls button{padding:0 0.625rem;font-size:0.75rem}
 .viewer-controls .viewer-close{margin-left:auto}
}
@media(min-width:1600px){.home{grid-template-columns:25.625rem minmax(0,1fr);gap:5.625rem}.home-intro{font-size:0.875rem;max-width:21.25rem}.about h1{font-size:4.875rem}.about-grid{gap:8.75rem}.contact{grid-template-columns:25rem minmax(0,1fr);gap:6.25rem}}
@media(min-width:901px) and (max-height:800px){:root{--header:6rem;--footer:3rem}.home h1{font-size:4.3125rem}.home h1,.contact h1{margin-top:1.25rem}.home-intro{margin-top:1.25rem}.home-copy>.pill{margin-top:1.25rem}.studio-note{margin-top:1.5rem}.page{padding-top:1.6875rem}.page>h1{font-size:3.0625rem;margin-top:1rem}.page-intro{margin-top:0.8125rem}.examples-grid{gap:1.25rem 1.875rem;margin-top:1.375rem}.examples-grid img{max-height:11rem}.about{padding-top:1.875rem}.about-grid{margin-top:1.5625rem;gap:4.375rem}.about h1{font-size:3.5rem}.about-copy>p{font-size:0.75rem;margin-top:1.125rem}.about-copy>.pill{margin-top:1.25rem}.founder-figure{margin-bottom:1.4375rem}.founder-portrait{width:6.25rem;font-size:3rem}.founder-story h2{font-size:1.875rem;margin-bottom:0.875rem}.founder-story p{font-size:0.6875rem}.about-colophon{padding:1rem 0 1.25rem}.booking iframe{height:21.875rem}.contact h1{font-size:3.875rem}.contact-email{font-size:1.875rem}.privacy{column-gap:1.625rem}.privacy p,.privacy li,.privacy td,.privacy th{font-size:0.5625rem}.privacy h2{margin-top:0.875rem;font-size:1.3125rem}}
@media(max-width:1200px) and (min-width:901px){:root{--gutter:4rem}.home{grid-template-columns:19.375rem minmax(0,1fr);gap:1.875rem}.home h1{font-size:4.375rem}.about-grid{gap:3.4375rem}.about h1{font-size:3.6875rem}.contact{grid-template-columns:18.75rem minmax(0,1fr);gap:2.1875rem}.contact h1{font-size:3.875rem}.booking{padding:1.25rem}.booking-heading{display:block}.booking-heading>p{margin-top:0.625rem}.work-caption{display:block}.work-sector{display:block;margin-top:0.1875rem}}
@media(max-width:900px){:root{--gutter:2.25rem;--header:6.25rem;--footer:3.75rem}.screen-stage{height:auto;min-height:calc(100dvh - var(--header) - var(--footer));overflow:clip}.page-screen{position:relative;inset:auto;overflow:clip}.page-screen.is-leaving{position:absolute;inset:0}.screen-body,.page-screen main{height:auto}.home,.about,.contact,.page{height:auto;min-height:calc(100dvh - var(--header) - var(--footer))}.home{grid-template-columns:18.75rem minmax(0,1fr);gap:1.125rem;min-height:40.625rem}.home h1{font-size:4.125rem}.home-intro{font-size:0.75rem}.nav{gap:1.5625rem}.site-footer:after{display:none}.about-grid{gap:2.5rem}.about h1{font-size:3.3125rem}.founder-portrait{width:6.875rem}.founder-figure{display:block}.founder-figure figcaption{margin-top:0.75rem}.about-colophon{margin-top:2.5rem}.contact{grid-template-columns:17.5rem minmax(0,1fr);gap:2.1875rem;padding:2.8125rem 0}.contact h1{font-size:3.5625rem}.contact-email{font-size:1.75rem}.contact-phone{font-size:1.5625rem}.booking-heading{display:block}.booking-heading>p{margin-top:0.75rem}.booking{padding:1.375rem}.booking iframe{height:36.25rem}.examples-grid{padding-bottom:2.8125rem;gap:1.875rem 1.5rem}.work-caption{display:block}.work-sector{display:block;font-size:0.5625rem;margin-top:0.1875rem}.privacy{columns:2;padding-bottom:2.5rem}.privacy p,.privacy li,.privacy td,.privacy th{font-size:0.75rem}}
@media(max-width:700px){:root{--gutter:1.5rem;--header:7.75rem;--footer:3.625rem}.site-header{flex-direction:column;justify-content:center;align-items:flex-start;gap:0.75rem}.header-right{width:100%}.nav{width:100%;justify-content:space-between;gap:0.875rem}.nav a{font-size:0.6875rem}.brand-mark{width:1.625rem;height:1.625rem}.brand-word{width:6.75rem}.brand{gap:0.5rem}.home{display:block;padding-top:2.625rem}.home h1{font-size:4.375rem;margin-top:1.5rem}.home h1 br:nth-child(2){display:none}.home h1 em{display:block}.home-intro{max-width:19.375rem;font-size:0.75rem;margin-top:1.4375rem}.home-copy>.pill{margin-top:1.4375rem}.studio-note{margin-top:1.5625rem;font-size:0.5625rem}.site-footer{font-size:0.5rem;min-height:3.625rem}.about{padding-top:2.1875rem}.about-grid{display:block;margin-top:1.5625rem}.about h1{font-size:3.3125rem}.about-copy>p{font-size:0.75rem;margin-top:1.25rem}.founder-story{margin-top:2.8125rem;display:block}.founder-figure{display:flex;gap:1.25rem;margin-bottom:1.75rem}.founder-portrait{width:6.875rem}.founder-story h2{font-size:2.25rem}.founder-story p{font-size:0.75rem;max-width:100%}.about-colophon{font-size:0.5rem;gap:1.25rem;padding-bottom:1.75rem}.about-colophon>span:nth-child(2){display:none}.page{padding-top:2.1875rem}.page>h1{font-size:3rem}.page-intro{font-size:0.75rem}.examples-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6875rem 1rem;margin-top:1.5625rem}.work-card img{border-width:0.1875rem}.work-caption{font-size:0.75rem;padding-top:0.625rem}.work-sector{font-size:0.5rem}.view-concept{font-size:0.5rem}.contact{display:block;padding-top:2.1875rem}.contact h1{font-size:4.0625rem}.contact-copy{padding-bottom:2.1875rem}.contact-invitation>p{max-width:100%}.contact-email{font-size:2.1875rem}.contact-phone{font-size:1.8125rem}.booking{margin-bottom:2.1875rem;padding:1.375rem 0.875rem}.booking h2{font-size:1.9375rem}.booking-preview-note{font-size:0.5625rem}.booking iframe{height:43.75rem}.privacy{columns:1;padding:2rem 0 2.5rem}.privacy p,.privacy li,.privacy td,.privacy th{font-size:0.8125rem}.privacy h1{font-size:3.25rem}.privacy h2{font-size:1.8125rem;margin-top:1.8125rem}.privacy table{break-inside:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}.booking-preview-note a{text-decoration:underline;text-underline-offset:0.1875rem;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.screen-frame{border-width:0.1875rem}}



/* r66 pair proportions and vertical stagger, framed in the existing light paper. */
.hero-media{position:relative;min-width:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:0.75rem}
.preview-stage{position:relative;width:min(100%,calc((100dvh - var(--header) - var(--footer) - 5rem)/1.15));aspect-ratio:1/1.15;isolation:isolate}
.preview-pair{position:absolute;inset:0;background:var(--paper)}
.preview-pair[hidden]{display:none}
.preview-pair figure{position:absolute;margin:0}
.preview-large{width:89%;left:0;bottom:0}
.preview-small{width:68%;right:0;top:0}
.preview-pair .screen-frame{border-width:0.25rem;aspect-ratio:auto;padding:0}
.preview-pair .screen-frame img{height:auto;aspect-ratio:16/10}
.preview-pair .screen-frame video{aspect-ratio:16/10;height:100%}
.preview-pair video[hidden]{display:none}
.preview-caption{display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;min-height:1.875rem;padding-top:0.625rem;font-size:0.6875rem;line-height:1.5}
.preview-caption>span{font-size:0.5625rem;color:var(--muted)}
/* Desktop pages occupy exactly the space between the persistent header and footer.
   Natural content is measured by screen-turn.js, then reduced only if it needs it. */
@media(min-width:901px){
 html,body{height:100%;overflow:hidden}
 .screen-stage{height:calc(100dvh - var(--header) - var(--footer));min-height:0;background:var(--paper)}
 .page-screen{background:var(--paper)}
 .screen-body{display:flex;align-items:center;justify-content:center;min-height:0;background:var(--paper)}
 .page-screen main{height:auto;min-height:0;width:calc(100% - 2 * var(--gutter));margin:0;flex:none;transform:scale(var(--content-scale,1));transform-origin:center}
 .home{grid-template-columns:clamp(18.75rem,25vw,25.625rem) minmax(0,1fr);gap:clamp(1.75rem,3.5vw,4.375rem);padding:1.125rem 0}
 /* Both complete screens share the header/footer grid, with a clear gap. */
 .home .hero-media{width:100%;align-items:flex-end}
 .home .preview-stage{--pair-height:calc(100dvh - var(--header) - var(--footer) - 6.5rem);--large-width:min(100%,calc((var(--pair-height) - 5.875rem)/1.03125));width:100%;height:var(--pair-height);aspect-ratio:auto}
 .home .preview-large{width:var(--large-width);left:0;top:0;bottom:auto}
 .home .preview-small{width:calc(var(--large-width)*.65);right:0;bottom:0;top:auto}
 .home .preview-small .preview-caption{width:100%;margin:0;text-align:left;display:flex}
 .home .preview-small .preview-caption>span{display:inline}
 .home-copy{padding-bottom:0}
 .home h1{font-size:clamp(4rem,min(6.6vw,11dvh),6.5rem);margin-top:0}
 .home-intro{font-size:clamp(0.75rem,1.5dvh,0.875rem);margin-top:clamp(1.125rem,2.8dvh,1.8125rem)}
 .home-copy>.pill{margin-top:clamp(1.125rem,2.7dvh,1.75rem)}
 .studio-note{margin-top:clamp(1.25rem,3.4dvh,2.25rem)}
 .page{padding:clamp(1.125rem,3dvh,2.125rem) 0}
 .page>h1{font-size:clamp(2.75rem,6.5dvh,3.75rem);margin-top:0}
 .page-intro{margin-top:clamp(0.75rem,2dvh,1.125rem)}
 .examples-grid{margin-top:clamp(1rem,2.5dvh,1.5625rem);gap:clamp(1rem,2.5dvh,1.8125rem) 2.125rem}
 .examples-grid img{max-height:none;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain}
 .work-caption{padding-top:clamp(0.5rem,1.3dvh,0.75rem)}
 .about{padding:clamp(1.125rem,3dvh,2.125rem) 0}
 .about-grid{margin-top:0;gap:clamp(2.5rem,6vw,6.25rem);align-items:center}
 .about h1{font-size:clamp(3rem,min(5vw,7.4dvh),4.875rem)}
 .about-copy>p{font-size:clamp(0.75rem,1.45dvh,0.8125rem);margin-top:clamp(1rem,2.5dvh,1.5rem)}
 .about-copy>.pill{margin-top:clamp(1.125rem,2.8dvh,1.75rem)}
 .founder-figure{margin-bottom:clamp(1.125rem,2.8dvh,1.75rem)}
 .founder-portrait{width:clamp(5.3125rem,12dvh,7.5rem);font-size:clamp(2.875rem,6.5dvh,3.875rem)}
 .founder-story h2{font-size:clamp(1.75rem,3.9dvh,2.1875rem);margin-bottom:clamp(0.75rem,2dvh,1.375rem)}
 .founder-story p{font-size:clamp(0.6875rem,1.4dvh,0.75rem);margin-top:clamp(0.625rem,1.6dvh,0.875rem)}
 .about-colophon{margin-top:clamp(1.5rem,4dvh,2.5rem);padding:clamp(0.875rem,2dvh,1.375rem) 0 0;gap:1rem}
 .contact{padding:0;grid-template-columns:clamp(18.75rem,25vw,25rem) minmax(0,1fr);gap:clamp(2.1875rem,4.8vw,6.25rem)}
 .contact-copy{padding-bottom:0}
 .contact h1{font-size:clamp(3.375rem,8dvh,4.5rem);margin-top:0}
 .contact-invitation{margin-top:clamp(1.125rem,3dvh,1.6875rem)}
 .contact-email{font-size:clamp(1.75rem,3.8dvh,2.125rem);margin-top:clamp(1.25rem,3.3dvh,1.875rem)}
 .contact-phone{font-size:clamp(1.5625rem,3.3dvh,1.8125rem);margin-top:0.75rem}
 .booking{padding:clamp(0.25rem,calc(10dvh - 4.25rem),1.5rem) 1rem}
 .booking-heading{gap:0.75rem;margin-bottom:0.5rem;flex-wrap:wrap}
 .booking h2{font-size:clamp(1.625rem,3.5dvh,1.875rem)}
 .booking iframe{height:32.5rem;min-height:22.5rem}
 .booking.is-live iframe{min-height:32.5rem}
 /* Keep the complete legal text on the same screen, in three reading columns. */
 .page-screen main.privacy{height:calc(100% - 2.25rem);max-width:none;columns:3;column-gap:2rem;column-fill:balance;overflow:visible;padding:0;transform:none;scrollbar-gutter:auto}
 .privacy p,.privacy li,.privacy td,.privacy th,.privacy .lead{font-size:clamp(0.625rem,1.3dvh,0.75rem);line-height:1.5}
 .privacy h1{font-size:2.75rem;margin-top:0}
 .privacy h2{font-size:clamp(1.25rem,2.6dvh,1.5625rem);margin-top:0.75rem}
 .privacy h2:has(+table){break-before:column}
 .privacy ul{margin-block:0.5rem}
 .privacy li{margin-block:0.25rem}
 .privacy th,.privacy td{padding:0.25rem 0.5rem 0.25rem 0}
}
@media(max-width:900px){
 .hero-media{margin:2.1875rem 0 2.5rem}
 .preview-stage{width:min(100%,36.25rem)}
 .preview-caption{font-size:0.6875rem}
 .preview-caption>span{font-size:0.5625rem}
}
@media(max-width:450px){
 .preview-stage{aspect-ratio:1/1.4}
 .preview-caption{display:block;min-height:2.75rem;font-size:0.625rem}
 .preview-caption>span{display:block;font-size:0.5rem}
 .home h1{font-size:clamp(3.3125rem,16vw,4.375rem)}
}

/* Werkwijze: five quiet columns, aligned with the page gutter. */
.approach{padding-block:clamp(0.75rem,calc(4.45dvh - 1.25rem),1.875rem)}
.approach>h1{font-size:clamp(2.5rem,calc(7.78dvh - 1rem),3.75rem);line-height:1.04;letter-spacing:-.025em;margin-top:0}
.approach .page-intro{max-width:none;margin-top:clamp(0.625rem,calc(3.34dvh - 0.875rem),1.125rem);font-size:clamp(0.75rem,calc(1.12dvh + 0.25rem),0.875rem);line-height:1.6}
.step-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:1fr;gap:0;list-style:none;padding:0;margin:clamp(1.125rem,calc(6.67dvh - 1.875rem),2.25rem) 0 0;border:0;background:transparent}
.step-panel{display:grid;grid-template-rows:auto 1fr auto;min-width:0;padding:clamp(0.75rem,calc(4.45dvh - 1.25rem),1.625rem) clamp(0.875rem,1.53vw,1.625rem)}
.step-panel+.step-panel{border-left:0.0625rem solid #2429251f}

.step-panel h2{font-size:clamp(1.625rem,calc(2.23dvh + 0.625rem),2rem);line-height:1.1;letter-spacing:-.025em;margin:0 0 clamp(0.625rem,calc(2.23dvh - 0.375rem),1.25rem)}
.step-panel>p{font-size:clamp(0.6875rem,1.4dvh,0.8125rem);line-height:1.65}
.step-panel .deliverable{min-height:calc(3.3em + clamp(0.625rem,calc(2.23dvh - 0.375rem),1.125rem) + 0.0625rem);border-top:0.0625rem solid #2429251f;padding-top:clamp(0.625rem,calc(2.23dvh - 0.375rem),1.125rem);margin-top:clamp(0.75rem,calc(3.34dvh - 0.75rem),1.5rem)}

.approach-bottom{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.875rem;margin-top:clamp(1.125rem,calc(6.67dvh - 1.875rem),2.4375rem)}
.approach-bottom h2{font-size:clamp(1.625rem,calc(2.23dvh + 0.625rem),2rem);line-height:1.1;letter-spacing:-.025em}
.approach-bottom p{margin-top:clamp(0.4375rem,1dvh,0.5625rem);font-size:clamp(0.6875rem,1.4dvh,0.8125rem);line-height:1.6;color:var(--muted)}
@media(min-width:901px){
 /* Match the page height even before the navigation controller wraps the main. */
 .approach.page{height:auto;min-height:calc(100dvh - var(--header) - var(--footer));display:flex;flex-direction:column;justify-content:center}
 /* Natural height leaves room for all five steps and the price/action row. */
 .page-screen main.approach{min-height:0;transform-origin:left center}
 .approach>*{flex-shrink:0}
 .approach .step-grid{min-height:0}
}
@media(max-width:900px){
 .approach{padding-block:2.1875rem 2.5rem}
 .approach>h1{font-size:clamp(2.625rem,6.5vw,3.75rem)}
 .approach .page-intro{font-size:0.875rem;margin-top:1.4375rem}
 .step-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2.0625rem}
 .step-panel{padding:1.625rem}
 .step-panel:nth-child(odd){border-left:0}
 .step-panel:nth-child(n+3){border-top:0.0625rem solid var(--line)}
 .step-panel h2{font-size:2rem;margin:1rem 0 1.25rem}
 .step-panel>p{font-size:0.875rem}
 .step-panel .deliverable{padding-top:1.125rem;margin-top:1.5rem}
 
 .approach-bottom{align-items:flex-start;flex-direction:column;gap:1.5rem;margin-top:2rem}
 .approach-bottom p{font-size:0.8125rem}
}
@media(max-width:700px){
 .approach .page-intro br{display:none}
 .step-grid{grid-template-columns:minmax(0,1fr)}
 .step-panel+.step-panel{border-left:0;border-top:0.0625rem solid var(--line)}
}

/* Keep the descriptor's first-frame metrics on every direct-entry page. */
.site-header{gap:1.5rem}
.brand-descriptor,.brand:not(:has(.brand-descriptor)):after{font:400 0.625rem/1.5 var(--sans);color:var(--muted);white-space:nowrap;margin-left:0.75rem}
.brand:not(:has(.brand-descriptor)):after{content:'Webdesignstudio in Amsterdam'}
.headline-plane{display:inline-block;position:relative}
.home h1 em.headline-plane{display:inline-block}
/* The contact action stays above the projected planes and never moves. */
.home-copy>.pill{z-index:10}
.intro-plane{background:transparent;backface-visibility:hidden;transform-origin:0 50%;will-change:transform}
.intro-active .headline-plane,.intro-active .home-intro{background:none;box-shadow:none;border:0;outline:0;backdrop-filter:none;will-change:transform,text-shadow}
.intro-active .intro-plane:before{content:'';position:absolute;left:-0.625rem;top:12%;bottom:12%;width:0.125rem;background:var(--patina);pointer-events:none;animation:intro-edge 5s linear both}
.intro-active .preview-pair .intro-plane:before{left:-0.125rem;top:0;bottom:1.875rem}
@keyframes intro-edge{0%,50%{opacity:1}72%,100%{opacity:0}}
.intro-active .preview-pair{background:transparent}
.intro-active .preview-pair .screen-frame{transition:none}
@media(max-width:1100px){
 .brand{display:grid;grid-template-columns:auto auto;column-gap:0.75rem;row-gap:0.0625rem}
 .brand-mark{grid-row:1/3}
 .brand-descriptor,.brand:not(:has(.brand-descriptor)):after{grid-column:2;margin-left:0;font-size:0.5625rem}
}
@media(max-width:700px){.site-header{gap:0.75rem}.home h1 br:nth-child(2){display:initial}}

/* Studio story and quiet principles, with Moreno in the right column. */
.about-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr)}
.about-copy>p{max-width:33.75rem}
.principles{list-style:none;margin:clamp(1.25rem,3dvh,1.875rem) 0 0;padding:0}
.principles li{border-top:0.0625rem solid var(--line);padding:clamp(0.5625rem,1.4dvh,0.875rem) 0;font-size:0.875rem;line-height:1.5}
.principles li:last-child{border-bottom:0.0625rem solid var(--line)}
.about .founder-story{display:flex;flex-direction:column;align-items:flex-start;padding-left:clamp(1.5rem,3vw,3.125rem);border-left:0.0625rem solid var(--line)}
.about .founder-figure{display:block;margin-bottom:1.5rem}
.about .founder-portrait{width:clamp(7.5rem,17dvh,11.25rem);font-size:clamp(3.875rem,8dvh,5.125rem);overflow:hidden}
.founder-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.about .founder-story h2{font-size:clamp(1.625rem,3.6dvh,2.125rem);margin:0;line-height:1.2}
.founder-story h2>span{display:block;font:400 0.75rem/1.6 var(--sans);color:var(--muted);margin-top:0.375rem}
.about .founder-story p{font-size:0.8125rem;max-width:17.5rem;margin-top:1.125rem}
.founder-email{font-size:0.8125rem;border-bottom:0.0625rem solid var(--line);padding-bottom:0.25rem;margin-top:1.5rem}
@media(min-width:901px){
 .about h1{font-size:clamp(2.875rem,min(4.8vw,7dvh),4.5rem)}
 .about-copy>p{font-size:clamp(0.75rem,1.45dvh,0.8125rem);margin-top:clamp(0.875rem,2dvh,1.25rem);line-height:1.75}
 .examples.page>h1{font-size:clamp(2.375rem,5.5dvh,3.25rem)}
 .examples-grid{margin-top:clamp(0.875rem,2dvh,1.25rem)}
}
@media(max-width:700px){
 .about .founder-story{padding:1.875rem 0 0;border-left:0;border-top:0.0625rem solid var(--line)}
 .about h1{font-size:clamp(2.625rem,7.5vw,3.3125rem)}
}
@media(min-width:901px){
 /* Size the gallery from the available height so captions keep their type size. */
 .examples,.page-screen main.examples{width:min(calc(100% - 2 * var(--gutter)),calc((100dvh - var(--header) - var(--footer) - clamp(15.625rem,32dvh,20.625rem))*2.4 + 4.25rem));margin-inline:auto}
}

/* Shared camera; the rigid cube below supplies the depth and turn. */
@media(min-width:901px){
 .screen-viewport{height:calc(100dvh - var(--header) - var(--footer));overflow:hidden;position:relative}
 .screen-stage{height:100%;perspective:112.5rem;perspective-origin:50% 50%;transform-style:preserve-3d;overflow:visible;isolation:auto}
 /* Real boxes preserve the cube's scene; each body flattens its entire page
    and shade into one face, including transformed content and both columns. */
 .page-screen{display:block;position:absolute;inset:0;overflow:visible;background:transparent;transform-style:preserve-3d}
 .screen-body{position:absolute;inset:0;overflow:hidden;transform-style:flat;transform:translateZ(0);transform-origin:50% 50% 0;backface-visibility:hidden}
 .screen-shade{display:block;position:absolute;inset:0;z-index:20;pointer-events:none;opacity:0;background:var(--ink);backface-visibility:hidden}
}
.screen-shade{pointer-events:none}
/* Preserve the measured image box, borders and captions when motion is added. */
.tile-media{display:block;position:relative}
.tile-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border:0.25rem solid #fcfbf7;pointer-events:none}
.tile-video,.screen-frame video{opacity:0;transition:opacity 180ms ease}
.tile-video.is-playing,.screen-frame video.is-playing{opacity:1}
.work-card a:hover .tile-media{transform:translateY(-0.1875rem)}
.work-card a:hover .tile-media img{transform:none}
.tile-media{transition:transform .65s}
.is-viewer-source .tile-media{visibility:hidden}
.booking-calendar{position:relative;background:var(--paper)}
.booking-calendar iframe{position:relative;opacity:0;transition:opacity 180ms ease}
.booking-calendar.is-ready iframe{opacity:1}
.booking-skeleton{position:absolute;inset:0;padding:1.5rem;opacity:1;transition:opacity 180ms ease;pointer-events:none}
.is-ready .booking-skeleton{opacity:0;visibility:hidden;transition:opacity 180ms ease,visibility 0s 180ms}
.booking-skeleton i,.skeleton-month{display:block;background:#dcded4;border-radius:1.25rem}
.skeleton-month{width:38%;height:1.125rem;margin-bottom:1.5625rem}
.skeleton-week,.skeleton-days{display:grid;grid-template-columns:repeat(5,1fr);justify-items:center;gap:1.125rem 0.75rem}
.skeleton-week{margin-bottom:1.25rem}
.skeleton-week i{width:1.375rem;height:0.5rem;opacity:.65}
.skeleton-days i{width:1.875rem;height:1.875rem;border-radius:50%;opacity:.65}
.skeleton-times{display:flex;gap:0.625rem;flex-wrap:wrap;margin-top:1.625rem}
.skeleton-times i{width:4.25rem;height:1.75rem;opacity:.55}
@media(max-width:700px){.tile-video{border-width:0.1875rem}}
@media(prefers-reduced-motion:reduce){.tile-video{display:none}.screen-frame video{opacity:0}.screen-shade{display:none}}

/* Proof belongs to the examples; the portrait slot has the proportions of a photo. */
.studio-note{font-size:0.75rem;max-width:21.875rem;padding-left:0}
.studio-note span{white-space:nowrap}
.studio-note:before{display:none}
.studio-note a{border-bottom:0.0625rem solid var(--line);padding-bottom:0.25rem;box-decoration-break:clone}
.studio-note a:hover{border-color:var(--ink)}
.about .founder-portrait{width:clamp(9.5rem,22dvh,14rem);position:relative;background:#e9e5dc;border:0.0625rem solid #2429251f;box-shadow:inset 0 0 0 0.5rem var(--paper)}
.founder-portrait img{position:absolute;inset:0}

/* Job 13: the 1440 × 900 composition grows with both viewport dimensions. */
:root{font-size:16px}
@media(min-width:1441px){
 :root{font-size:clamp(16px,min(1.111111vw,1.777778dvh),28.8px)}
 .home{grid-template-columns:25rem minmax(0,1fr);gap:3.15rem}
}
.viewer-frame{transform-origin:0 0}
@media(max-width:900px){
 .viewer-surface{inset:0;border:0;border-radius:0;box-shadow:none}
 .viewer-bar{flex-shrink:0}
 .viewer-heading{min-height:44px;align-items:center}
 /* A portrait tablet uses its full width for the two complete previews. */
 .home{grid-template-columns:minmax(0,1fr);align-content:center;gap:2.5rem;min-height:calc(100dvh - var(--header) - var(--footer));padding-block:2.5rem}
 .home-copy{max-width:100%}
 .home h1{font-size:clamp(4.125rem,8.5vw,5.75rem)}
 .home-intro{max-width:26rem}
 .hero-media{margin:0;align-items:flex-end}
 .preview-stage{width:100%;aspect-ratio:1/1.04}
 .preview-large{width:89%;top:0;bottom:auto}
 .preview-small{width:65%;top:auto;bottom:0}
 a[href],button{min-height:44px;min-width:44px}
 .brand,.nav a,.site-footer a,.founder-email,.contact-email,.booking-preview-note a,.privacy a,.studio-note a{display:inline-flex;align-items:center}
 .nav a{justify-content:center}
 .site-footer a{padding-inline:.5rem;margin-inline:-.25rem}
 .studio-note a{display:block;padding-block:.65rem}
 .booking-preview-note a,.privacy a{padding-block:.25rem}
 .contact-email{max-width:100%;overflow-wrap:anywhere}
}
@media(min-width:701px) and (max-width:900px){
 .home-copy{display:grid;grid-template-columns:1.15fr 1fr;column-gap:2rem;align-items:center}
 .home h1{grid-row:1/4;font-size:clamp(3.5rem,8vw,4.25rem)}
 .home-intro,.home-copy>.pill,.studio-note{margin-top:0}
 .home-copy>.pill{justify-self:start;margin-top:1rem}
 .studio-note{margin-top:1rem}
 .home .preview-caption{min-height:44px}
 .home .preview-stage{aspect-ratio:1/1.07}
}
@media(max-width:700px){
 .site-header{gap:.25rem}
 .nav{gap:0}
 .nav a{padding-inline:.375rem;font-size:.6875rem}
 .home{padding-top:2.625rem;display:block}
 .home h1{font-size:clamp(3.3125rem,16vw,4.375rem)}
 .hero-media{margin:2rem 0 2.5rem}
 .preview-stage{aspect-ratio:1/1.4}
 .preview-large{width:89%}
 .preview-small{width:68%}
 .viewer-controls button{min-width:44px;min-height:44px}
 .privacy a{display:inline-flex}
}

/* Captions appear when the intro lands: no caption is crossed by a travelling plane. */
html.intro-active .preview-caption{opacity:0}
.preview-caption{transition:opacity .45s ease}

/* Job 15: paired home actions, a rigid cube and two viewer viewport modes. */
.home-actions{display:flex;align-items:stretch;gap:18px;margin-top:clamp(1.125rem,2.7dvh,1.75rem);position:relative;z-index:10}
.home-actions .pill{margin:0;font-size:.6875rem;padding-inline:1.125rem;min-height:max(44px,3.375rem)}
.pill-secondary{background:transparent;border-color:var(--line)}
@media(hover:hover){.pill-secondary:hover{border-color:var(--ink)}}
.pill-secondary:focus-visible{border-color:var(--ink)}
@media(min-width:901px){
 .home{grid-template-columns:clamp(28rem,35vw,34rem) minmax(0,1fr)}
 .screen-stage{perspective:2200px;perspective-origin:50% 50%}
 .screen-cube{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%}
 .is-turning .screen-cube{will-change:transform}
 .is-turning .screen-body{will-change:transform}
 .screen-body:after{content:'';position:absolute;inset:0 auto 0 0;width:1px;background:#ffffff40;pointer-events:none;opacity:0}
 .is-turning .screen-body:after{opacity:1}
 .is-turning[data-direction="1"] .is-leaving .screen-body:after,.is-turning[data-direction="-1"] .page-screen:not(.is-leaving) .screen-body:after{left:auto;right:0}
 .screen-shade{background:var(--ink)}
}
.tile-video{transition:none}
.viewer-modes{display:flex;flex:none;border:1px solid var(--line);border-radius:.375rem;overflow:hidden}
.viewer-modes button{min-width:44px;min-height:44px;border:0;border-radius:0;padding:0 .75rem;background:transparent;font-size:.75rem}
.viewer-modes button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.viewer-modes button:focus-visible{outline-offset:-4px}
.is-mobile-preview .viewer-content{background:var(--plane)}
.is-mobile-preview .viewer-viewport{overflow:hidden;border-radius:24px;box-shadow:0 0 0 2px var(--ink),0 12px 30px #24292526}
.is-native-phone .viewer-viewport{border-radius:0;box-shadow:none}
@media(max-width:1100px){
 .viewer-heading{gap:.5rem;flex-direction:column;align-items:flex-start}
 .viewer-bar{gap:.75rem}
 .viewer-sector{font-size:.625rem}
}
@media(min-width:701px) and (max-width:900px){
 .home-copy{display:block}
 .home-intro{margin-top:1.25rem}
}
@media(max-width:700px){
 .home-actions{flex-direction:column;gap:16px;margin-top:1.4375rem}
 .home-actions .pill{width:100%}
 .viewer-surface{grid-template-rows:9.5rem minmax(0,1fr)}
 .viewer-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 .5rem;padding:.375rem .75rem}
 .viewer-heading{width:auto;gap:.125rem}
 .viewer-name{font-size:1.5rem}
 .viewer-modes button{font-size:11px;padding:0 .625rem}
 .viewer-controls{grid-column:1/-1;gap:.375rem}
 .is-mobile-preview.is-native-phone .viewer-content{background:var(--paper)}
}

.approach{text-align:left}
.step-panel:first-child{padding-left:0}
.step-panel h2{font-size:clamp(1.375rem,2.8dvh,1.875rem)}
@media(max-width:900px){.step-panel{padding-left:0;padding-right:1.5rem}.step-panel:nth-child(even){padding-left:1.5rem}.step-panel h2{font-size:2rem}}
@media(max-width:700px){.step-panel:nth-child(n){padding-inline:0}}
@media(min-width:901px){
 .step-grid{grid-template-rows:auto 1fr auto;grid-auto-rows:auto}
 .step-panel{grid-row:span 3;grid-template-rows:subgrid}
}

/* Job 17: phone layouts only; the desktop and tablet compositions stay intact. */
@media(max-width:600px){
 :root{--gutter:clamp(1rem,5vw,1.5rem);--header:clamp(6.5rem,14dvh,7.25rem);--footer:3rem}
 .site-header{gap:0;justify-content:center}
 .brand{min-height:44px}
 .nav a{min-height:44px;font-size:clamp(.6875rem,2.9vw,.8125rem);padding-inline:.25rem}
 .site-footer{min-height:var(--footer);height:var(--footer)}
 .site-footer p{display:flex;align-items:center;gap:.25rem;line-height:1.3;flex-wrap:wrap}
 .site-footer a{min-height:44px;min-width:44px}
 .screen-stage{min-height:calc(100dvh - var(--header) - var(--footer))}
 .page-screen,.screen-body{transform-style:flat}
 .page-screen:has(main.home),.page-screen:has(main.examples){height:calc(100dvh - var(--header) - var(--footer))}
 .home,.page-screen main.home{height:calc(100dvh - var(--header) - var(--footer));min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:clamp(.75rem,2dvh,1.5rem);padding-block:clamp(.75rem,2dvh,1.375rem);align-items:stretch}
 .home-copy{padding:0}
 .home h1{font-size:clamp(2.875rem,min(12vw,8.5dvh),4rem);line-height:1.015;margin:0}
 .home-intro{font-size:.75rem;line-height:1.6;max-width:27rem;margin-top:clamp(.5rem,1.5dvh,.875rem)}
 .home-actions{flex-flow:row wrap;gap:.5rem;margin-top:clamp(.625rem,1.8dvh,1rem)}
 .home-actions .pill{flex:1 0 auto;width:auto;min-height:44px;padding:.5rem;font-size:.6875rem}
 .home .hero-media{min-height:0;margin:0;justify-content:center;align-items:center}
 .home .preview-stage{width:min(100%,calc((100dvh - var(--header) - var(--footer) - 17rem)*1.6));height:auto;aspect-ratio:auto;padding-bottom:1.5rem}
 .home .preview-stage:before{content:'';display:block;aspect-ratio:16/10}
 .home .preview-pair{display:contents;background:transparent}
 .home .preview-pair[hidden]{display:none}
 .home .preview-pair figure{display:none;inset:0 auto auto 0;width:100%;margin:0}
 .home .hero-media:not([data-phone-ready]) .preview-pair:first-child .preview-large,
 .home .preview-pair figure[data-phone-visible="true"]{display:block}
 .home .preview-pair .screen-frame{aspect-ratio:16/10;border-width:3px;box-shadow:0 .5rem 1.25rem #504c3a12}
 .home .preview-pair .screen-frame img{height:100%;aspect-ratio:auto}
 .home .preview-caption{display:flex;align-items:center;justify-content:flex-start;gap:.5rem;min-height:0;height:1.5rem;padding-top:.25rem;font-size:.6875rem;line-height:1.2;transition:none}
 .home .preview-caption>span{display:none}
 .home .screen-frame video,.examples .tile-video{display:none}
 .examples.page,.page-screen main.examples{height:calc(100dvh - var(--header) - var(--footer));min-height:0;padding:clamp(.625rem,1.5dvh,.875rem) 0 0}
 .examples.page>h1{font-size:clamp(2.25rem,6dvh,3rem);line-height:1.04;margin:0}
 .examples-grid{width:min(100%,calc((100dvh - var(--header) - var(--footer) - 11rem)*1.066667 + .75rem));grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.5rem,1.5dvh,.875rem) .75rem;margin-top:clamp(.625rem,1.6dvh,1rem);padding-bottom:0}
 .work-card .concept-link{min-height:44px}
 .work-card .tile-media{aspect-ratio:16/10}
 .work-card img{width:100%;height:100%;max-height:none;aspect-ratio:16/10;border-width:2px}
 .work-caption{display:block;font-size:.75rem;line-height:1.3;padding-top:.375rem}
 .work-sector,.view-concept{display:none}
 .work-card a:hover .tile-media{transform:none}
 .approach.page{padding-block:1.25rem 2rem;text-align:left}
 .approach>h1{font-size:clamp(2.25rem,9vw,3rem);line-height:1.08}
 .approach .page-intro{font-size:.8125rem;line-height:1.7;margin-top:1rem}
 .step-grid{display:block;margin-top:1.5rem;border-top:1px solid var(--line)}
 .step-panel:nth-child(n){display:block;padding:1.25rem 0;border-left:0;border-bottom:1px solid var(--line);border-top:0}
 .step-panel h2{font-family:var(--serif);font-size:1.875rem;line-height:1.1;margin:0 0 .625rem}
 .step-panel>p{font-size:.8125rem;line-height:1.7}
 .step-panel .deliverable{min-height:0;border:0;padding:0;margin-top:.75rem;font-size:.75rem;line-height:1.6;color:var(--muted)}
 .approach-bottom{gap:1.125rem;margin-top:1.5rem}
 .approach-bottom h2{font-size:1.875rem}
 .approach-bottom p{font-size:.75rem;line-height:1.7;max-width:22rem}
 .approach-bottom .pill{min-height:44px}
 .founder-email,.about-colophon a,.contact-phone{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
}

/* The stage is part of the 3D context: a background on it is an opaque plane at the screen surface that hides every cube part rotating behind it. The body supplies the paper. */
@media (min-width:901px){.screen-stage{background:transparent}}

/* Job 19: centred viewer modes and legal links within the existing page frame. */
.viewer-surface{grid-template-rows:auto minmax(0,1fr)}
.viewer-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.75rem;padding:.5rem 1.125rem}
.viewer-heading{width:auto;justify-self:start}
.viewer-modes{justify-self:center}
.viewer-controls{width:auto;justify-self:end}
.site-footer p{display:flex;align-items:center;gap:.5rem}
.footer-legal{display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
@media(max-width:1200px){
 .viewer-bar{grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem}
 .viewer-heading{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;gap:.125rem;min-width:0}
 .viewer-controls{grid-column:2;grid-row:1;gap:.375rem}
 .viewer-modes{grid-column:1/-1;grid-row:2}
 .viewer-controls .viewer-close{margin-left:0}
}
@media(max-width:700px){
 :root{--footer:5rem}
 .site-footer{height:var(--footer);min-height:var(--footer)}
 .site-footer p{flex-direction:column;align-items:flex-start;gap:0;font-size:.625rem;line-height:1.3}
 .footer-legal{gap:.375rem}
 .site-footer a{padding-inline:0;margin-inline:0}
 .viewer-bar{grid-template-columns:minmax(0,1fr);padding:.375rem .75rem;gap:.25rem}
 .viewer-heading{grid-row:1;grid-column:1;flex-direction:row;align-items:baseline;gap:.5rem;min-height:0}
 .viewer-sector{font-size:.625rem}
 .viewer-controls{grid-row:2;grid-column:1;justify-self:end}
 .viewer-modes{grid-row:3;grid-column:1}
}
@media(max-width:600px){
 .home .preview-stage{width:100%;padding-bottom:2.75rem}
 .home .preview-stage:before{aspect-ratio:3.2/1;width:calc(100% - .75rem)}
 .home .preview-pair figure{width:calc((100% - .75rem)/2);left:0;right:auto}
 .home .preview-pair figure[data-phone-slot="1"]{left:calc((100% + .75rem)/2)}
 .home .hero-media:not([data-phone-ready]) .preview-pair:first-child .preview-small{display:block;left:calc((100% + .75rem)/2)}
 .home .preview-caption{height:2.75rem;min-height:44px}
}
@media(min-width:901px){
 .page-screen main.privacy{columns:auto;overflow:hidden}
 .legal-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
 .legal-text{columns:3;column-gap:2rem;column-fill:balance;padding-bottom:.5rem}
}
.brand,.nav a,.skip-link,.founder-email,.contact-email,.privacy a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}

.privacy-retention{break-inside:avoid}
.privacy-retention h2{break-before:auto}
@media(min-width:701px){.footer-legal:before{content:'·';margin-right:.125rem}}
@media(min-width:901px){.legal-text.legal-brief{columns:1;max-width:42rem}}

/* Full-viewport cube (r67c round 4). */
.app-shell{position:relative;background:var(--paper);transform-origin:50% 50% 0;backface-visibility:hidden}
.cube-shade{position:absolute;inset:0;z-index:50;pointer-events:none;opacity:0;background:var(--ink)}
.app-shell.cube-ghost{position:fixed;inset:0;z-index:40}
html.cube-turning,html.cube-turning body{background:#d9d5cc;overflow:hidden}
html.cube-turning body{perspective-origin:50% 50%;transform-style:preserve-3d}
html.cube-turning .app-shell{will-change:transform}

/* Job 20: liquid stays on its own layer; the outline action uses a pale tint. */
.pill .liquid{will-change:transform}
.pill-secondary .liquid{background:#7fc5b833}
@media(min-width:901px){.approach .step-panel{will-change:transform,opacity}}
/* Preserve frame geometry; the fixed border overlays the clipped media. */
@media(min-width:601px) and (hover:hover) and (pointer:fine){
 .examples .concept-link,.home .preview-pair .concept-link{will-change:transform;transition:transform 280ms ease-out}
 .examples .tile-media{overflow:hidden;outline:.0625rem solid #d9d6ce;box-shadow:.125rem .5rem 1.125rem #504c3a0d;will-change:transform,box-shadow;transition:box-shadow 280ms ease-out}
 .examples .tile-media::after{content:'';position:absolute;inset:0;pointer-events:none;border:.25rem solid #fcfbf7}
 .examples .tile-media img,.examples .tile-video{border-color:transparent;transform-origin:center;will-change:transform;transition:transform 280ms ease-out;box-shadow:none;outline:0}
 .examples .concept-link:is(:hover,:focus-visible),.home .preview-pair .concept-link:is(:hover,:focus-visible){transform:translateY(-4px)}
 .examples .concept-link:is(:hover,:focus-visible) .tile-media{transform:none;box-shadow:.1875rem .75rem 1.5rem #504c3a20}
 .examples .concept-link:is(:hover,:focus-visible) .tile-media :is(img,video){transform:scale(1.03);box-shadow:none}
 .home .preview-pair .screen-frame{will-change:box-shadow;transition:box-shadow 280ms ease-out}
 .home .preview-pair .concept-link:is(:hover,:focus-visible) .screen-frame{box-shadow:.125rem .375rem .5rem #504c3a12,.4375rem 1.25rem 1.625rem #504c3a20,.9375rem 2.5rem 2.875rem -1rem #504c3a20}
}
@media(min-width:601px) and (max-width:700px) and (hover:hover) and (pointer:fine){.examples .tile-media::after{border-width:.1875rem}}
@media(hover:none){.work-card a:hover img{transform:none;box-shadow:.125rem .5rem 1.125rem #504c3a0d}.work-card a:hover .tile-media{transform:none}}
@media(prefers-reduced-motion:reduce){
 .pill .liquid,.approach .step-panel,.examples .concept-link,.examples .tile-media,.examples .tile-media img,.examples .tile-video,.home .preview-pair .concept-link,.home .preview-pair .screen-frame{will-change:auto;transition:none}
 .examples .concept-link:is(:hover,:focus-visible),.home .preview-pair .concept-link:is(:hover,:focus-visible),.examples .concept-link:is(:hover,:focus-visible) .tile-media :is(img,video){transform:none}
}

/* r67c5 · Website Lead review olb-review-2 fixes. */
/* 1. Email and phone always on their own lines, 12 px apart. */
.contact-email,.contact-phone{display:block;min-width:0}
.contact-email+.contact-phone{margin-top:12px}
/* 2. Legal links stay inline in the sentence; the tap size comes from padding. */
.privacy a{display:inline;min-height:0;min-width:0;padding-block:calc((44px - 1em) / 2);margin-block:calc((44px - 1em) / -2);overflow-wrap:anywhere}
/* 3. Footer legal links: equal gaps around the dots. */
.site-footer .footer-legal a{min-width:0;padding-inline:0}
/* 5. Over ons body text at AA contrast. */
.about-copy>p,.founder-story p,.founder-figure figcaption{color:#55584f}
@media(min-width:601px){
 /* 6. Portfolio heading and grid on the site edge. */
 .examples,.page-screen main.examples{margin-left:var(--gutter);margin-right:auto}
}
@media(min-width:901px){
 /* 7. Legal pages: same space under the header rule as Portfolio. */
 .page-screen main.privacy{padding-top:clamp(1.125rem,3dvh,2.125rem)}
}
@media(max-width:600px){
 /* 4. Phone viewer: one control row (modes, arrows, close). */
 .viewer-bar{grid-template-columns:auto 1fr auto;gap:.25rem .375rem}
 .viewer-heading{grid-row:1;grid-column:1/-1}
 .viewer-modes{grid-row:2;grid-column:1}
 .viewer-controls{grid-row:2;grid-column:3;justify-self:end;gap:.375rem}
 .viewer-controls .viewer-label{display:none}
 .viewer-controls :is(.viewer-previous,.viewer-next){width:44px;padding:0;justify-content:center}
}

/* r67c7 · B review 3. */
/* 1. Privacy: one screen, no inner scroll; each heading stays with its text. */
.legal-text :is(p,li,tr){break-inside:avoid}
/* Each heading travels with its first paragraph or list item (works in WebKit too). */
.legal-text .keep{break-inside:avoid}
.legal-text .keep>ul{margin-bottom:0}
.legal-text ul.cont{margin-top:0}
.legal-text:not(.legal-brief) p+p:not(.upd){margin-top:.6em}
/* Retention as a list (same wording as the former table) so it flows like the rest. */
.privacy-retention{break-inside:auto}
.privacy ul.retention{list-style:none;padding-left:0}
.privacy ul.retention li{padding-left:0}
.privacy ul.retention li::before{content:none}
.privacy h2:has(+table){break-before:auto}
/* 4b. Cookiebeleid: reading size, short measure. */
@media(min-width:901px){
 .legal-text.legal-brief{max-width:60ch}
 .legal-text.legal-brief :is(p,li){font-size:clamp(15px,.85vw,16px);line-height:1.6;max-width:60ch}
 .legal-text.legal-brief p+p{margin-top:1em}
}
@media(min-width:901px){
 /* 2. Portfolio spans the full site edge (gutter to gutter). Tiles keep their
    height-fitted size, so the page never scrolls; the columns share the width. */
 .examples,.page-screen main.examples{width:calc(100% - 2 * var(--gutter));margin-left:var(--gutter);margin-right:auto}
 .examples-grid{grid-template-columns:repeat(3,min(calc((100% - 4.25rem) / 3),calc((100dvh - var(--header) - var(--footer) - clamp(15.625rem,32dvh,20.625rem)) * .8)));justify-content:space-between}
}
@media(min-width:901px){
 /* 3b. Home pair: the small tile sits 12 px under the large tile's hover caption
    (was ~28 px plus slack); sizes and horizontal overlap unchanged, pair re-centred. */
 .home .preview-stage{height:calc(var(--pair-height) - 1.375rem)}
 .home .preview-small{top:calc((var(--pair-height) - 5.875rem) / 1.03125 * .625 + 2.625rem);bottom:auto}
}
@media(max-width:600px){
 /* 3a. Phone Home: the example pair sits 32 px under the buttons, not mid-gap. */
 .home,.page-screen main.home{gap:32px}
 .home .hero-media{justify-content:flex-start;align-items:flex-start;align-content:flex-start}
}
@media(min-width:1600px) and (min-height:900px){
 /* 4a. Werkwijze on large screens: the step rhythm keeps growing with the height
    (the base clamps stop at ~900 px, which left the lower half empty). */
 .step-grid{margin-top:clamp(2.25rem,calc(6.67dvh - 1.875rem),4.5rem)}
 .step-panel{padding-block:clamp(1.625rem,calc(4.45dvh - 1.25rem),3.25rem)}
 .step-panel h2{margin-bottom:clamp(1.25rem,calc(3dvh - .75rem),2.25rem)}
 .step-panel>p{line-height:1.8}
 .step-panel .deliverable{padding-top:clamp(1.125rem,calc(3dvh - .75rem),2rem);margin-top:clamp(.875rem,calc(3dvh - 1rem),2rem)}
 .approach-bottom{margin-top:clamp(2.4375rem,calc(8dvh - 2.5rem),5rem)}
}
/* r67c8 · Address (Moreno, via Overseer): contact details under the phone number. */
.contact-address{margin-top:1rem;font-size:14px;line-height:1.55;color:#55584f}
@media(min-width:1600px){
 /* r67c8 · Portfolio on wide screens: fixed 72 px gaps, tiles up to the height
    limit, the leftover width centred (heading aligned with the grid). */
 .examples,.page-screen main.examples{--tile:calc((100dvh - var(--header) - var(--footer) - clamp(15.625rem,32dvh,20.625rem)) * .8);width:min(calc(100% - 2 * var(--gutter)),calc(3 * var(--tile) + 144px));margin-inline:auto}
 .examples-grid{grid-template-columns:repeat(3,minmax(0,var(--tile)));column-gap:72px;justify-content:start}
}
@media(max-width:600px) and (min-height:830px){
 /* r67c8 · Tall phones: the pair fills the band as on desktop. The large tile
    leads, the small one sits offset beneath it, to the right. */
 .home .preview-stage{padding-bottom:2.75rem}
 .home .preview-stage:before{aspect-ratio:auto;width:100%;padding-top:calc(90% + 8px)}
 .home .preview-pair figure{width:86%;left:0;right:auto;top:0;bottom:auto}
 .home .preview-pair .screen-frame{position:relative}
 .home .preview-pair .screen-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
 .home .preview-pair figure[data-phone-slot="1"],
 .home .hero-media:not([data-phone-ready]) .preview-pair:first-child .preview-small{width:58%;left:auto;right:0;top:auto;bottom:0}
}
/* r67c8 · Contact intro at reading size in the body tone. */
.contact-invitation>p{font-size:15px;line-height:1.6;color:#55584f;max-width:22rem}
@media(min-width:901px){
 /* r67c8 · Privacy: title and intro fixed on the left; one reading column at
    15-16 px scrolls inside its frame and fades out at the bottom edge. */
 .privacy .legal-text:has(>.legal-head){columns:auto;height:auto;max-width:none;display:grid;grid-template-columns:minmax(15rem,21rem) minmax(0,560px);column-gap:clamp(3rem,7vw,8rem);align-items:start;padding-bottom:0}
 .privacy .legal-head{position:sticky;top:0}
 .privacy .legal-head .lead{font-size:15px;line-height:1.6;color:#55584f}
 .privacy .legal-head .upd{margin-top:1.5rem}
 .privacy .legal-body{padding-bottom:3.5rem}
 .privacy .legal-body :is(p,li){font-size:clamp(15px,calc(.4vw + 9.5px),16px);line-height:1.65}
 .privacy .legal-body h2{margin-top:1.75rem}
 .privacy .legal-body>.keep:first-child h2{margin-top:0}
 /* Keyboard: the scroll frame is focusable (tabindex 0, aria-label); the mask
    would fade its own outline, so the visible focus ring sits on the page box. */
 .page-screen main.privacy:has(.legal-scroll:focus-visible){outline:2px solid #458f80;outline-offset:12px;border-radius:6px}
 .legal-scroll:focus{outline:none}
 .page-screen main.privacy .legal-scroll{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 3rem),transparent)}
}
/* r67c9 · Over ons: Trustoo rating line under the story. */
.about-copy>p.about-proof{font-size:.75rem;color:#55584f}
.about-proof a{text-decoration:underline;text-underline-offset:.2em}
/* r67c10 · Portfolio tiles: the desktop still is the clip’s first frame (phones keep the payoff still). */
.tile-media picture{display:contents}
/* r67c11 · Founder portrait (Moreno approved v6) fills the 4:5 frame. */
.founder-portrait img{object-fit:cover;object-position:center top}
/* r67c12 · Phone held landscape (short screens): one compact viewer row so the example keeps the height. */
.viewer-close-label{display:inline}
@media(max-height:500px){
 .viewer-bar{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;height:48px;min-height:0;padding:2px 12px}
 .viewer-heading{flex:1 1 auto;min-width:0;display:block}
 .viewer-name{font-size:1.125rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .viewer-sector{display:none}
 .viewer-modes{flex:none;order:0}
 .viewer-modes button{min-height:44px;font-size:11px;padding:0 .625rem}
 .viewer-controls{flex:none;width:auto;gap:.375rem;margin:0}
 .viewer-controls button{min-height:44px}
 .viewer-controls .viewer-label,.viewer-controls .viewer-close-label{display:none}
 .viewer-controls :is(.viewer-previous,.viewer-next,.viewer-close){width:44px;min-width:44px;padding:0;justify-content:center}
 .viewer-controls .viewer-close{margin-left:0}
}

/* Booker air (Moreno 22 Oct "more padding"): ~36 px on desktops >= 1301x761 (the real portal booker needs the full frame below that), ~24 px tablet, ~20 px phone. */
@media(min-width:1301px) and (min-height:761px){.booking{padding:clamp(1.5rem,calc(10dvh - 2.5rem),2.25rem) 2rem}}
@media(max-width:900px) and (min-width:701px){.booking{padding:1.5rem 1.25rem}}
@media(max-width:700px){.booking{padding:1.25rem 1rem}}