/* Afmaakronde: same authored world, refined states and transitions. */
/* Icons have their shape on first paint, even before JavaScript arrives. */
i[data-icon]{background:transparent}
i[data-icon="arrow-up-right"]{--icon:url(assets/icons/arrow-up-right.svg);background:currentColor}
i[data-icon="arrow-right"]{--icon:url(assets/icons/arrow-right.svg);background:currentColor}
i[data-icon="arrow-left"]{--icon:url(assets/icons/arrow-left.svg);background:currentColor}
i[data-icon="arrow-down"]{--icon:url(assets/icons/arrow-down.svg);background:currentColor}
i[data-icon="phone"]{--icon:url(assets/icons/phone.svg);background:currentColor}
i[data-icon="plus"]{--icon:url(assets/icons/plus.svg);background:currentColor}
i[data-icon="x"]{--icon:url(assets/icons/x.svg);background:currentColor}
i[data-icon="chevron-down"]{--icon:url(assets/icons/chevron-down.svg);background:currentColor}
i[data-icon="pause"]{--icon:url(assets/icons/pause.svg);background:currentColor}
i[data-icon="play"]{--icon:url(assets/icons/play.svg);background:currentColor}
i[data-icon="grid-2x2"]{--icon:url(assets/icons/grid-2x2.svg);background:currentColor}
i[data-icon="maximize-2"]{--icon:url(assets/icons/maximize-2.svg);background:currentColor}
.nav-link{font-size:14px;white-space:nowrap}
.work-dropdown{left:50%;translate:-50% 0;top:calc(100% + 13px);width:310px;padding:22px 24px;background:rgba(246,247,243,.97);box-shadow:0 18px 48px #102c3417;border:1px solid #ffffffc9;border-radius:6px;transform-origin:top center;backdrop-filter:blur(24px)}
.work-dropdown:before{content:"";position:absolute;left:0;right:0;height:22px;bottom:100%}
.work-dropdown .eyebrow{font-size:10px;letter-spacing:.1em;margin-bottom:7px}
.work-dropdown>button{padding:13px 0;border-color:#24313a12}
.work-dropdown>button span{font-size:16px}
.work-dropdown>button i{width:16px;height:16px;color:var(--blue);transition:translate .4s var(--ease)}
.work-dropdown>button:hover i{translate:3px -3px}
.work-dropdown small{font-size:11px;margin-top:2px;color:#697578}
.work-dropdown>a{font-size:12px;padding-top:16px}
@media(min-width:761px){
 .navigation{display:grid;grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr)}
 .desktop-nav{position:static;transform:none;margin:0;gap:32px}
 .nav-call{justify-self:end;margin:0}
}
@media(min-width:761px) and (max-width:1050px){
 .desktop-nav{gap:24px}
 .nav-call span{display:none}
 .nav-call{width:48px;height:44px;padding:0;justify-content:center}
}
/* The photographic player, not the decorative seam, owns these animations. */
.hero-image,.hero-image.active{transition:none;transform:none;will-change:auto}
.hero-player{position:relative}
.hero-foot{bottom:78px}
.hero-notch{--cut-step:20px;--cut-end:37px;width:42%;height:57px;clip-path:polygon(0 0,calc(68% - var(--cut-step)) 0,68% var(--cut-step),calc(100% - var(--cut-end)) var(--cut-step),100% 100%,0 100%)}
.hero-notch .small-cross{top:29px}
.hero:after{content:"";position:absolute;bottom:0;right:0;width:12%;height:12px;background:var(--paper);clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)}
/* Keep the accepted stair exactly; reveal each tread instead of moving the block. */
.manifesto h2>.title-row{display:block;padding-left:0;overflow:hidden;line-height:1.12}
.manifesto h2>.title-row:nth-child(3){padding-left:8vw}
.manifesto h2>.title-row:nth-child(4){padding-left:18vw;line-height:1.28;margin-top:-.04em}
.title-row>span,.title-row>em{display:block;white-space:nowrap}
.title-row>em{color:var(--blue);font-size:1.23em}
.js .manifesto-title.reveal{opacity:1;transform:none}
.js .manifesto-title .title-row>*{transform:translateY(112%) rotate(2deg);transform-origin:left;transition:transform 1.25s var(--ease)}
.js .manifesto-title.visible .title-row>*{transform:none}
.title-row:nth-child(2)>*{transition-delay:90ms!important}
.title-row:nth-child(3)>*{transition-delay:180ms!important}
.title-row:nth-child(4)>*{transition-delay:280ms!important}
.js .material-window.reveal{opacity:1;transform:none}
.js .material-window:after{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleY(1);transform-origin:bottom;transition:transform 1.35s var(--ease);pointer-events:none}
.js .material-window.visible:after{transform:scaleY(0)}
.js .material-window img{scale:1.07;transition:scale 1.7s var(--ease)}
.js .material-window.visible img{scale:1}
.js .work-heading.reveal,.js .contact-heading.reveal{transform:translateY(24px);transition-duration:1.1s}
.js .work-heading.visible,.js .contact-heading.visible{transform:none}
.js .work-card.reveal{opacity:1;transform:none}
.js .work-card.reveal .card-image{clip-path:inset(18% 0 0 0);opacity:0;transition:clip-path 1.3s var(--ease),opacity .8s}
.js .work-card.visible .card-image{clip-path:inset(0);opacity:1}
.js .work-card.reveal .card-caption{opacity:0;translate:0 15px;transition:opacity .7s .18s,translate 1s .18s var(--ease)}
.js .work-card.visible .card-caption{opacity:1;translate:0 0}
/* Two photographs, two scales: making it, and the person behind it. */
.craft-composition{position:relative;padding:0 0 180px}
.craft-image img{height:440px}
.craft-image figcaption{max-width:50%;line-height:1.7;align-items:flex-start;gap:15px}
.craft-portrait{position:absolute;right:-20px;bottom:0;width:42%;padding:9px;background:var(--paper)}
.craft-portrait>img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.craft-portrait figcaption{display:flex;gap:15px;padding:15px 3px 0;font-size:13px;line-height:1.6}
.craft-portrait figcaption .small-cross{margin-top:5px}
.craft-portrait figcaption em{font-size:21px;color:var(--blue);line-height:1.2}
.craft-services{align-self:center}
/* Exhibition: photos stay in the same blue space while entering/leaving. */
.gallery::backdrop{background:#082e4380}
.gallery-ghost{position:absolute;object-fit:contain;pointer-events:none;z-index:2;filter:drop-shadow(0 24px 32px #00395540)}
.gallery-main{z-index:3;pointer-events:none}
.gallery-main>img{backface-visibility:hidden}
.gallery-side{transition:opacity .7s,transform 1s var(--ease);will-change:auto}
.gallery-floor{transition:translate 1.4s var(--ease);translate:var(--floor-shift,0px) 0}
.gallery-gridlines:after{background:radial-gradient(ellipse at 40% 20%,#94e2f044,transparent 65%);animation:atelier-light 18s ease-in-out infinite alternate}
@keyframes atelier-light{from{translate:-5% -2%;opacity:.55}to{translate:6% 5%;opacity:1}}
.gallery-title-row{transition:opacity .35s}
/* A laying plan: asymmetric tiles over the same blueprint, source order intact. */
.gallery-overview{background:linear-gradient(135deg,#086a9eaf,#087bb4d9);grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:62px;gap:18px;padding:32px var(--gutter) 70px;align-items:stretch;isolation:isolate;scrollbar-width:thin;scrollbar-color:#c6eaff80 transparent}
.gallery-overview:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#d7f2ff0c 1px,transparent 1px),linear-gradient(90deg,#d7f2ff0c 1px,transparent 1px);background-size:calc((100vw - 2 * var(--gutter)) / 6) 80px;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.gallery-overview button{grid-column:span 2;grid-row:span 4;position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:0;outline-offset:5px;transition:translate .7s var(--ease)}
.gallery-overview button:nth-child(6n+1){grid-column:span 3;grid-row:span 5}
.gallery-overview button:nth-child(6n+2){grid-column:span 2;grid-row:span 4;margin-top:35px}
.gallery-overview button:nth-child(6n+3){grid-column:span 1;grid-row:span 3}
.gallery-overview button:nth-child(6n+4){grid-column:span 2;grid-row:span 4;margin-top:30px}
.gallery-overview button:nth-child(6n+5){grid-column:span 3;grid-row:span 5}
.gallery-overview button:nth-child(6n+6){grid-column:span 1;grid-row:span 3;margin-top:40px}
.gallery-overview img{width:100%;height:calc(100% - 28px);min-height:0;object-fit:cover;box-shadow:0 15px 40px #003e6640;transition:filter .5s,transform .8s var(--ease)}
.gallery-overview button span{font-size:11px;letter-spacing:.08em;margin-top:9px;display:flex;justify-content:space-between;align-items:center;color:#e1f4fb}
.gallery-overview button span:after{content:"";width:14px;height:14px;background:currentColor;mask:url(assets/icons/arrow-up-right.svg) center/contain no-repeat}
.gallery-overview button:hover img{transform:translateY(-4px);filter:brightness(1.08)}
.gallery-overview button[aria-current=true] img{box-shadow:0 0 0 2px #d1f0fb,0 20px 45px #00395540}
@media(max-width:1100px){
 .craft-composition{padding-bottom:175px}
 .craft-image img{height:360px}
 .craft-portrait{right:-10px;width:47%}
 .gallery-overview{grid-auto-rows:46px;gap:14px}
}
@media(max-width:760px){
 .hero-notch{--cut-step:14px;--cut-end:26px;width:57%;height:40px}
 .hero-notch .small-cross{top:20px}
 .hero:after{width:15%;height:8px;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%)}
 .hero-foot{bottom:60px}
 .mobile-menu{background:linear-gradient(135deg,#f3f3ee,#e8efee);transform-origin:top}
 .mobile-menu:before{content:"";position:absolute;top:100px;bottom:25px;right:24px;width:1px;background:#087fbc18;pointer-events:none}
 .mobile-menu nav a{position:relative}
 .mobile-menu nav a i{width:20px;height:20px}
 .menu-toggle i{transition:transform .65s var(--ease)}
 .manifesto h2>.title-row:nth-child(3){padding-left:9vw}
 .manifesto h2>.title-row:nth-child(4){padding-left:21vw}
 .craft-composition{width:100%;padding-bottom:190px}
 .craft-image img{height:330px}
 .craft-portrait{right:-7px;width:46%;max-width:250px}
 .craft-image figcaption{font-size:12px;max-width:48%}
 .craft-portrait figcaption{font-size:12px;gap:10px;padding-top:12px}
 .craft-portrait figcaption em{font-size:20px}
 .gallery-overview{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:45px;gap:14px;padding:22px 24px 45px}
 .gallery-overview button:nth-child(n){grid-column:span 1;grid-row:span 3;margin-top:0}
 .gallery-overview button:nth-child(4n+1){grid-column:span 2;grid-row:span 4}
 .gallery-overview button:nth-child(4n+2){margin-top:25px}
 .gallery-overview button:nth-child(4n+3){margin-top:20px}
 .gallery-overview button:nth-child(4n+4){grid-column:span 2;grid-row:span 4}
 .gallery-overview:before{background-size:calc((100vw - 48px) / 3) 59px}
 .gallery-overview img{height:calc(100% - 26px)}
}
@media(max-width:360px){
 .manifesto h2>.title-row:nth-child(4){padding-left:17vw}
 .craft-composition{padding-bottom:165px}
 .craft-image img{height:290px}
 .gallery-overview{grid-auto-rows:36px;gap:12px;padding-left:20px;padding-right:20px}
}
@media(max-height:650px) and (min-width:761px){
 .gallery-overview{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:35px;gap:12px;padding:18px 28px 45px}
 .gallery-overview button:nth-child(n){grid-column:span 1;grid-row:span 3;margin:0}
 .gallery-overview button:nth-child(4n+1){grid-column:span 2;grid-row:span 4}
 .gallery-overview button:nth-child(4n+4){grid-column:span 2;grid-row:span 4}
}
@media(prefers-reduced-motion:reduce){
 .js .reveal,.js .work-heading.reveal,.js .contact-heading.reveal{opacity:1;transform:none}
 .js .manifesto-title .title-row>*{transform:none}
 .js .material-window.reveal,.js .work-card.reveal .card-image{clip-path:none;opacity:1}
 .js .material-window img{scale:1}
 .js .material-window:after{display:none}
 .js .work-card.reveal .card-caption{opacity:1;translate:0 0}
 .gallery-gridlines:after{animation:none}
}
/* Short phone landscape also needs a side composition, not a 5px photo slot. */
@media(max-height:650px) and (min-width:600px) and (max-width:760px){
 .gallery-top{top:12px;left:24px;right:24px}
 .gallery-title-row{top:85px;left:24px;right:auto;width:145px}
 .gallery-title-row h2{font-size:27px;line-height:1.15}
 .gallery-title-row>span{font-size:10px}
 .gallery-stage{top:72px;bottom:75px;left:175px;right:40px}
 .gallery-main{left:12%;right:12%}
 .gallery-side{width:23%}
 .gallery-side.left{left:4px;width:16%}
 .gallery-side.right{right:-12%}
 .gallery-collection-nav{top:auto;left:12px;right:auto;bottom:78px;flex-direction:column;align-items:flex-start}
 .gallery-collection-nav button{min-height:34px;padding:7px 12px}
 .gallery-bottom{bottom:15px}
 .gallery-hint{display:none}
 .gallery-overview{inset:80px 0 75px 175px;grid-auto-rows:30px;padding:15px 24px 40px}
}