/* Only the agreed additions and the new photograph override the live stylesheet. */
@font-face{font-family:'Mozilla Text';font-weight:400;font-style:normal;font-display:swap;src:url('assets/mozilla-400.ttf')}@font-face{font-family:'Mozilla Text';font-weight:700;font-style:normal;font-display:swap;src:url('assets/mozilla-700.ttf')}
a:focus-visible,button:focus-visible,.slider:focus-visible{outline:3px solid #00aaff;outline-offset:4px}.preview-bar{position:absolute;z-index:9;top:8px;right:18px;background:#111c;padding:6px 12px;font-size:12px;border-radius:3px;color:#eee}.preview-bar span{margin:0 5px}.preview-bar a{text-decoration:underline;font-weight:400}
/* Existing full-width hero, fade and intro overlap retained; only crop changes. */
#hero .hero-media{opacity:1;animation:none;transform:none}
#hero .hero-media img{position:absolute;width:149.0677%;height:auto;max-width:none;left:-49.0677%;top:calc(-100vw * 340 / 1019);object-fit:initial}
#hero{max-height:60vw}.section-intro h1{font-size:clamp(2.1rem,1.9rem + 2.4vw,4.6rem)}.section-intro .subtitle{font-size:clamp(20px,2vw,28px);font-weight:400;line-height:1.4;margin:0 0 1.2em}.button-contact{background:#fff;color:#111}.section-highlights .section-inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}.section-highlights .highlight h3{font-size:1.1rem;line-height:1.4;margin-bottom:1rem}.section-highlights .highlight p{font-size:17px}.section-highlights .highlight-head{flex-wrap:wrap}.section-highlights .highlight-creator{border-left-color:#00aaff}.creator-wordmark{font-size:25px;font-weight:700;line-height:1.2;min-height:70px;display:flex;align-items:center}.button-creator{background:#00aaff;color:#fff;border-color:#00aaff}.language-switch .is-active{color:#fff;border-bottom:2px solid #00aaff}
.section-work h2{margin-bottom:.4em}.work-heading{display:flex;gap:24px;justify-content:space-between;align-items:flex-end}.work-heading>div:first-child{max-width:850px}.work-heading p{margin:0}.slider-controls{display:flex;gap:10px;flex-shrink:0}.arrow{width:46px;height:46px;background:#171717;border:1px solid #444;border-radius:50%;color:#fff;cursor:pointer;font:400 25px/1 'Mozilla Text',sans-serif}.arrow:disabled{opacity:.35;cursor:default}.preview-note{font-size:13px;color:#b5b5b5;margin:20px 0 18px}.slider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#777 #171717;padding-bottom:16px;overscroll-behavior-x:contain}.shot{position:relative;flex-shrink:0;height:320px;overflow:hidden;scroll-snap-align:start;background:#242424;font-weight:400}.portrait{width:256px}.landscape{width:400px}.shot-image{height:100%;width:100%;object-fit:cover;display:block}.shot:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.93) 85%,#000);pointer-events:none}.shot-caption{position:absolute;z-index:1;left:22px;right:22px;bottom:20px;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.35}.client-logo{width:135px;height:26px;object-fit:contain;object-position:left}.caption-detail{font-size:14px;color:#ddd}.read-more{font-size:14px;font-weight:700;opacity:0;transition:opacity .18s;min-height:20px}.shot:hover .read-more,.shot:focus-visible .read-more{opacity:1}.text-link{display:inline-block;font-size:16px;border-bottom:2px solid #00aaff;margin-top:22px;padding:6px 0}.section-contact a.large{overflow-wrap:anywhere}.section-contact{scroll-margin-top:30px}
dialog{background:#171717;color:#fff;border:1px solid #444;max-width:min(560px,calc(100% - 40px));padding:30px}dialog::backdrop{background:rgba(0,0,0,.75)}dialog h2{font-size:26px}dialog p{font-size:17px;margin:20px 0 25px}.button-neutral{background:#fff;color:#111;cursor:pointer}
@media(max-width:1100px){.section-highlights .section-inner{grid-template-columns:1fr}.section-highlights .highlight-head{flex-wrap:nowrap}.creator-wordmark{min-height:50px}}
@media(max-width:600px){#hero{height:400px;max-height:none}#hero .hero-media img{width:194.7436%;left:-66.6667%;top:-50px}#main{margin-top:-110px}.preview-bar{font-size:10px;right:10px}.section-intro h1{font-size:34px}.section-highlights .highlight p{font-size:17px}.work-heading{display:block}.slider-controls{margin-top:20px}.slider{gap:16px}.shot{height:min(272px,calc((100vw - 70px)*.8))}.portrait{width:min(217.6px,calc((100vw - 70px)*.64))}.landscape{width:min(340px,calc(100vw - 70px))}.shot-caption{left:18px;right:18px;bottom:16px}.read-more{opacity:1}.section-contact .contacts{grid-template-columns:1fr}.section-contact .contacts-heading p{font-size:18px}.section-contact a.large{font-size:clamp(17px,5vw,24px)}}
@media(hover:none){.read-more{opacity:1}}@media(prefers-reduced-motion:reduce){.read-more{transition:none}}
::selection{background:#b9d9ff;color:#101419}
/* CreatorDeck brand colour and mark from the public product website. */
.section-highlights .highlight-creator{border-left-color:#ff4b19}
.button-creator,.button-creator:hover{background:#ff4b19;border-color:#ff4b19;color:#fff}
.creator-logo{display:flex;align-items:center;gap:12px;font-size:25px;font-weight:700;line-height:1.2;min-height:70px}
.creator-mark{display:grid;place-items:center;background:#ff4b19;border-radius:5px;width:48px;height:48px;flex-shrink:0}
.section-highlights .creator-mark img{width:32px;height:auto}
.panel-pill-creator{top:-1.55rem;right:-.8rem;transform:translate3d(0,var(--pill-parallax-y),0) rotate(10deg)}
.panel-pill-creator .panel-pill-arrow{transform:rotate(55deg)}
@media(max-width:1100px){.creator-logo{min-height:50px}}
@media(max-width:600px){.creator-logo{font-size:24px}.panel-pill-creator{right:.5rem}}
/* Larger project shots, with custom progress instead of a native scrollbar. */
.slider{scrollbar-width:none;-ms-overflow-style:none;padding-bottom:0;gap:24px}
.slider::-webkit-scrollbar{display:none}
.shot{height:480px}.portrait{width:384px}.landscape{width:600px}
.shot-caption{left:28px;right:28px;bottom:28px;font-size:21px;gap:12px}
.client-logo{width:180px;height:44px}.caption-detail{font-size:16px}.read-more{font-size:16px}
.slider-navigation{display:flex;align-items:center;gap:20px;margin-top:24px}
.slider-progress{position:relative;flex:1;height:2px;background:#252525;overflow:hidden}
.slider-progress span{display:block;height:100%;width:var(--visible-part,30%);background:#fff;transform:translateX(var(--progress-offset,0%));transition:transform .15s linear}
.slider-counter{font-size:12px;color:#aaa;font-variant-numeric:tabular-nums;letter-spacing:.08em;min-width:44px;text-align:right}
@media(max-width:600px){.shot{height:min(380px,calc((100vw - 70px)*.8))}.portrait{width:min(304px,calc((100vw - 70px)*.64))}.landscape{width:min(475px,calc(100vw - 70px))}.shot-caption{left:20px;right:20px;bottom:22px;font-size:18px;gap:9px}.client-logo{width:155px;height:36px}.caption-detail,.read-more{font-size:14px}.slider-navigation{margin-top:20px;gap:14px}.slider{gap:20px}}
@media(prefers-reduced-motion:reduce){.slider-progress span{transition:none}}
.section-work .slider{margin-top:30px}
.shot.contain .shot-image{object-fit:contain;object-position:center 20%}
.case-lennmedia{background:#37359b}.case-sparescenter{background:#183342}
.client-logo.logo-light{filter:brightness(0) invert(1)}
.shot .client-logo{height:70px;width:180px;object-fit:contain;object-position:left center}
@media(max-width:600px){.shot .client-logo{height:46px;width:150px}}
@media(max-width:600px){.shot{height:clamp(280px,92vw,360px)}.portrait{width:clamp(224px,73.6vw,288px)}.landscape{width:clamp(350px,115vw,450px)}}

/* Contactgegevens in twee gelijke kolommen met gedeelde rijen. */
.section-contact .contacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px;margin-bottom:0}
.section-contact .contact-item{min-width:0;border-top:1px solid #303030;padding-top:20px}
.section-contact .contacts strong.subtitle{font-size:16px;line-height:1.4;margin-bottom:8px}
.section-contact .contacts a.large{font-size:clamp(18px,1.6vw,24px);line-height:1.45}
@media(max-width:600px){.section-contact .contacts{grid-template-columns:1fr;gap:24px}.section-contact .contact-item{padding-top:16px}}

/* Merkkleuren uit de openbare stylesheets, gecontroleerd 9 oktober 2026. */
.section-highlights .highlight-webandbrand{border-left-color:#617bff}
.button-webandbrand,.button-webandbrand:hover{background:#617bff;border-color:#617bff;color:#fff}
.section-highlights .highlight-drone{border-left-color:#55624a}
.button-drone{background:#55624a;border-color:#55624a;color:#fff}
.button-drone:hover{background:#505d46;border-color:#505d46;color:#fff}

/* Eén item per case; oorspronkelijke bronnen behouden. */
.source-shot .shot-image{object-position:top}
.case-huidhuis{background:#fff}.case-huidhuis .shot-image{object-fit:contain}
.source-logo{object-fit:contain;object-position:left;height:44px;width:150px;background:#fff;border-radius:3px;padding:6px}
.known-names{border-top:1px solid #303030;padding-top:18px;margin:8px 0 24px}
.section-highlights .known-names p{font-size:12px;line-height:1.4;color:#a8a8a8;margin:0 0 12px}
.known-names ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.known-names li{display:flex;align-items:center;gap:12px;min-height:40px;font-size:14px;line-height:1.3;min-width:0}
.name-mark{width:72px;height:40px;padding:5px;background:#fff;border-radius:3px;display:grid;place-items:center;flex-shrink:0}
.name-mark img{width:100%!important;height:100%!important;object-fit:contain}
.name-mark-text{background:transparent}

.name-mark-text{display:none}

.section-highlights .known-names{width:100%;margin-top:auto}
.name-mark{overflow:hidden}
.name-mark img{width:62px!important;height:30px!important;min-width:0;min-height:0;max-width:100%;max-height:30px;display:block}
.name-mark-dark{background:#202020}

/* Oorspronkelijke klantlogo-SVGs uit de bestaande persoonlijke site. */
.known-names .name-mark{position:relative;width:108px;height:44px;padding:0;background:transparent;border-radius:0}
.known-names .name-mark img{position:absolute;width:108px!important;height:108px!important;max-width:none;max-height:none;left:0;top:50%;transform:translateY(-50%);object-fit:contain;filter:brightness(0) invert(1);opacity:.88}
.source-logo[src*="original-client-logos"]{background:transparent;border-radius:0;padding:0;filter:brightness(0) invert(1);object-fit:cover}

/* Afsluitende kaart naar het volledige werkoverzicht. */
.shot-more{background:#617bff;color:#fff;padding:36px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:24px}
.shot-more:after{display:none}
.more-brand{width:110px;height:90px;object-fit:contain;object-position:left}
.more-heading{font-size:clamp(28px,3vw,42px);line-height:1.15;font-weight:700}
.more-domain{font-size:18px;border-bottom:1px solid #ffffff80;padding-bottom:6px}
.shot-more:hover .more-domain,.shot-more:focus-visible .more-domain{border-color:#fff}
@media(max-width:600px){.shot-more{width:100%;padding:24px;gap:16px}.more-brand{width:80px;height:60px}.more-heading{font-size:28px}.more-domain{font-size:16px}}

/* Client logos below the brand buttons, without labels or background tiles. */
.section-highlights .highlight>.button{margin-top:auto}
.section-highlights .known-names{margin:26px 0 0;padding-top:18px;width:100%}
.known-names ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:center}
.known-names li{display:block;min-width:0;min-height:58px}
.known-names .name-mark{display:block;width:100%;height:58px;background:transparent}
.known-names .name-mark img{width:100%!important;height:auto!important;left:0;top:50%;max-width:none;max-height:none}

/* The page slides over a stationary contact footer. */
#wrapper{isolation:isolate}
.page-surface{position:relative;z-index:1;background:#000;display:flow-root}
.contact-reveal{position:relative;z-index:0;background:#111}
.contact-reveal.can-reveal{position:sticky;bottom:0}
.contact-reveal .section-contact{background:transparent}
@media(prefers-reduced-motion:reduce){.contact-reveal.can-reveal{position:relative}}

/* Clip horizontal overflow without creating a sticky scroll container. */
body{overflow-x:clip;overflow-y:visible}

.known-names .name-mark img.autogefuehl-client-logo{filter:url(#client-wordmark-white)}

.known-names .name-mark img.autogefuehl-client-logo{filter:grayscale(1) contrast(3) invert(1);mix-blend-mode:screen}
.known-names .name-mark img.gabby-client-logo{filter:grayscale(1)}

/* Quiet cinematic motion, retaining the existing image crop and brand layout. */
:root{--motion-ease:cubic-bezier(.22,.61,.36,1);--motion-hover:550ms;--motion-enter:850ms}
#hero .hero-media{transform:translate3d(0,clamp(-14px,var(--hero-parallax-y),14px),0);animation:none;opacity:1}
#hero .hero-media img{transform-origin:60% 55%;animation:hero-quiet-zoom 3200ms var(--motion-ease) both}
@keyframes hero-quiet-zoom{from{transform:scale(1.03)}to{transform:scale(1)}}
.section-work h2,.section-contact h2{font-size:clamp(34px,4.2vw,60px);line-height:1.12;letter-spacing:-.035em}
#main>.section-highlights{margin-top:clamp(48px,5vw,72px)}
#main>.section-work{margin-top:clamp(48px,5vw,72px)}
.section-highlights .highlight{transition:background-color var(--motion-hover) var(--motion-ease),transform var(--motion-hover) var(--motion-ease),box-shadow var(--motion-hover) var(--motion-ease)}
.section-highlights .panel-pill{transition:transform 650ms var(--motion-ease)}
.cinema-enter{opacity:0;translate:0 14px;transition:opacity var(--motion-enter) var(--motion-ease),translate var(--motion-enter) var(--motion-ease)}
.cinema-enter.is-visible{opacity:1;translate:0 0}
.shot-image{transition:transform var(--motion-hover) var(--motion-ease);transform:scale(1)}
.shot:after{transition:opacity var(--motion-hover) var(--motion-ease);opacity:.88}
.shot:hover .shot-image,.shot:focus-visible .shot-image{transform:scale(1.03)}
.shot:hover:after,.shot:focus-visible:after{opacity:1}
.read-more{translate:0 6px;transition:opacity var(--motion-hover) var(--motion-ease),translate var(--motion-hover) var(--motion-ease)}
.shot:hover .read-more,.shot:focus-visible .read-more{translate:0 0}
@media(hover:none){.read-more{translate:0 0}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 #hero .hero-media,#hero .hero-media img{animation:none;transform:none;will-change:auto}
 .cinema-enter{opacity:1;translate:none;transition:none}
 .shot-image,.shot:after,.read-more,.section-highlights .highlight,.section-highlights .panel-pill{transition:none}
 .shot:hover .shot-image,.shot:focus-visible .shot-image{transform:none}
 .read-more{translate:none}
 .section-highlights .highlight,.section-highlights .highlight:hover{transform:none}
}

.known-names .name-mark img.autogefuehl-client-logo{filter:grayscale(1) contrast(3) url(#client-wordmark-white);mix-blend-mode:normal}

/* Real supplied footage and the existing CreatorDeck product mockup. */
.brand-visual{position:relative;width:100%;aspect-ratio:16/9;margin:0 0 24px;overflow:hidden;background:#080808}
.brand-visual video,.section-highlights .brand-visual img{display:block;width:100%;height:100%;object-fit:cover}
.section-highlights .brand-visual-mockup img{object-position:center top;animation:product-quiet-zoom 12s var(--motion-ease) infinite alternate;transform-origin:center top}
@keyframes product-quiet-zoom{from{transform:scale(1)}to{transform:scale(1.025)}}
.brand-visual:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#121212);pointer-events:none}
.video-toggle,.mockup-label{position:absolute;z-index:2;right:10px;top:10px;background:#111c;color:#fff;border:1px solid #ffffff40;border-radius:20px;font:400 11px/1.3 'Mozilla Text',sans-serif;padding:6px 10px}
.video-toggle{cursor:pointer}
.video-toggle[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.section-highlights .brand-visual-mockup img{animation:none;transform:none}}

/* Monochrome visuals dissolve into the anthracite brand cards. */
.brand-visual video,.section-highlights .brand-visual img{filter:grayscale(1)}
.brand-visual:after{inset:0;background:linear-gradient(180deg,rgba(18,18,18,.42) 0%,rgba(18,18,18,.48) 35%,rgba(18,18,18,.78) 72%,#121212 100%)}
.section-highlights .highlight:hover{background:#121212}

/* Editorial spacing and a consistent interaction rhythm across the page. */
.section-intro h1{font-size:clamp(42px,6vw,86px);line-height:1.04;letter-spacing:-.045em;text-wrap:balance;margin-bottom:.75em}
.section-intro .subtitle{font-size:clamp(22px,2.3vw,32px);line-height:1.4;max-width:38ch;margin-bottom:1.8em;color:#f2f2f2}
.section-intro>.section-inner>p:not(.subtitle){max-width:66ch;font-size:clamp(18px,1.45vw,21px);line-height:1.8;color:#ccc;margin-bottom:1.6em}
.section-intro .intro-head{margin-bottom:32px}
#main>.section-highlights,#main>.section-work{margin-top:clamp(64px,7vw,104px)}
.section-highlights .highlight h3{font-size:clamp(20px,1.55vw,23px);line-height:1.3;letter-spacing:-.025em;text-wrap:balance;margin:12px 0 24px}
.section-highlights .highlight>p{line-height:1.75;color:#c6c6c6;margin-bottom:36px}
.section-highlights .known-names{margin-top:32px;padding-top:22px}
.section-work h2,.section-contact h2{font-size:clamp(38px,5vw,72px);line-height:1.07;letter-spacing:-.045em;text-wrap:balance}
.work-heading{margin-bottom:36px;gap:32px}
.work-heading p{max-width:52ch;font-size:clamp(18px,1.5vw,22px);line-height:1.65;color:#bfbfbf;margin-top:24px}
.section-work .section-inner{padding-bottom:clamp(90px,9vw,140px)}
.section-contact .section-inner{padding:clamp(48px,6vw,88px) 0}
.section-contact .contacts-heading p{font-size:clamp(18px,1.55vw,23px);line-height:1.7;margin-top:24px;color:#c6c6c6}
.section-contact .contacts{margin-top:48px;gap:36px 48px}
.button{transition:translate var(--motion-hover) var(--motion-ease),box-shadow var(--motion-hover) var(--motion-ease),filter var(--motion-hover) var(--motion-ease)}
.button:hover,.button:focus-visible{translate:0 -3px;filter:brightness(1.08);box-shadow:0 12px 28px #0004}
.arrow{transition:border-color var(--motion-hover) var(--motion-ease),background var(--motion-hover) var(--motion-ease),translate var(--motion-hover) var(--motion-ease)}
.arrow:not(:disabled):hover,.arrow:not(:disabled):focus-visible{border-color:#aaa;background:#292929;translate:0 -2px}
.shot-caption{transition:translate var(--motion-hover) var(--motion-ease)}
.shot:hover .shot-caption,.shot:focus-visible .shot-caption{translate:0 -4px}
.text-link{position:relative;border-bottom-color:#454545;transition:color var(--motion-hover) var(--motion-ease)}
.text-link:after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform var(--motion-hover) var(--motion-ease)}
.text-link:hover:after,.text-link:focus-visible:after{transform:scaleX(1)}
.contact-item{transition:border-color var(--motion-hover) var(--motion-ease)}
.contact-item:hover,.contact-item:focus-within{border-color:#777}
.section-contact .contact-item a{transition:translate var(--motion-hover) var(--motion-ease),color var(--motion-hover) var(--motion-ease)}
.section-contact .contact-item a:hover,.section-contact .contact-item a:focus-visible{translate:4px 0;color:#fff}
.cinema-enter:focus-within{opacity:1;translate:0 0}
@media(max-width:600px){
 .section-intro h1{font-size:42px}
 .section-intro>.section-inner>p:not(.subtitle){line-height:1.75}
 .work-heading{margin-bottom:28px}
 .section-highlights .highlight h3{font-size:22px}
 .section-contact .contacts{gap:28px;margin-top:36px}
}
@media(prefers-reduced-motion:reduce){
 .button,.arrow,.shot-caption,.text-link:after,.contact-item,.section-contact .contact-item a{transition:none}
 .button:hover,.button:focus-visible,.arrow:not(:disabled):hover,.arrow:not(:disabled):focus-visible,.shot:hover .shot-caption,.shot:focus-visible .shot-caption,.section-contact .contact-item a:hover,.section-contact .contact-item a:focus-visible{translate:none}
}

.section-intro .subtitle{max-width:100%;text-wrap:balance}

/* A more compact type scale on phones. */
@media(max-width:600px){
 .section-intro h1{font-size:34px;line-height:1.08}
 .section-intro .subtitle{font-size:19px;line-height:1.5}
 .section-intro>.section-inner>p:not(.subtitle){font-size:15px;line-height:1.75}
 .section-highlights .highlight h3{font-size:18px;line-height:1.35}
 .section-highlights .highlight>p{font-size:15px;line-height:1.7}
 .section-work h2,.section-contact h2{font-size:30px;line-height:1.12}
 .work-heading p,.section-contact .contacts-heading p{font-size:15px;line-height:1.7}
 .section-contact .contacts strong.subtitle{font-size:12px}
 .section-contact .contacts a.large{font-size:17px;line-height:1.5}
 .button{font-size:14px}
 .shot-caption{font-size:16px}
 .caption-detail,.read-more{font-size:12px}
 .more-heading{font-size:24px}
 .more-domain,.text-link{font-size:14px}
}

/* Keep original logo canvases from scaling into clipped tablet wordmarks. */
.known-names .name-mark img{width:min(100%,108px)!important;left:50%;transform:translate(-50%,-50%)}
@media(min-width:601px) and (max-width:1100px){
 .section-highlights .section-inner{max-width:640px;gap:48px}
 .section-highlights .highlight{padding:32px;min-width:0}
 .brand-visual{height:260px;aspect-ratio:auto}
 .section-highlights .highlight-head{width:100%;gap:20px;flex-wrap:wrap}
 .section-highlights .highlight h3{font-size:23px;line-height:1.35}
 .section-highlights .highlight>p{font-size:16px;line-height:1.75;margin-bottom:28px}
 .section-highlights .known-names ul{gap:20px}
 .section-highlights .known-names{margin-top:28px}
 .section-highlights .panel-pill{max-width:calc(100% - 20px)}
 .work-heading{align-items:flex-start}
 .work-heading h2{font-size:clamp(36px,5vw,52px)}
}

/* Four fully clickable, rounded contact tiles. */
.section-contact .contacts{gap:20px}
.section-contact .contact-item{display:flex;align-items:center;gap:20px;min-width:0;min-height:116px;padding:26px 28px;border:1px solid #ffffff12;border-radius:20px;background:#1b1b1b;text-decoration:none;transition:background var(--motion-hover) var(--motion-ease),border-color var(--motion-hover) var(--motion-ease),translate var(--motion-hover) var(--motion-ease)}
.contact-icon{width:32px;height:32px;flex:0 0 32px}
.contact-copy{display:block;min-width:0;flex:1}
.section-contact .contacts .subtitle{font-size:13px;font-weight:400;letter-spacing:.02em;color:#aaa;margin:0 0 7px}
.section-contact .contacts .large{display:block;font-size:clamp(17px,1.55vw,22px);line-height:1.4;font-weight:700;overflow-wrap:anywhere}
.contact-arrow{font-size:22px;color:#999;transition:translate var(--motion-hover) var(--motion-ease),color var(--motion-hover) var(--motion-ease)}
.section-contact .contact-item:hover,.section-contact .contact-item:focus-visible{background:#242424;border-color:#ffffff40;translate:0 -3px}
.contact-item:hover .contact-arrow,.contact-item:focus-visible .contact-arrow{translate:2px -2px;color:#fff}
@media(max-width:600px){
 .section-contact .contacts{gap:12px}
 .section-contact .contact-item{padding:20px;min-height:96px;gap:16px;border-radius:16px}
 .contact-icon{width:28px;height:28px;flex-basis:28px}
 .section-contact .contacts .large{font-size:16px}
 .section-contact .contacts .subtitle{font-size:12px;margin-bottom:5px}
}
@media(prefers-reduced-motion:reduce){.section-contact .contact-item,.contact-arrow{transition:none}.section-contact .contact-item:hover,.section-contact .contact-item:focus-visible,.contact-item:hover .contact-arrow,.contact-item:focus-visible .contact-arrow{translate:none}}
.section-contact .contact-item{color:#f3f3f3}
.contact-item.email .contact-icon,.contact-item.linkedin .contact-icon{color:#6bbfff}
.contact-item.phone .contact-icon{color:#ff8b78}
.contact-item.whatsapp .contact-icon{color:#68d49a}

/* Film windows reach the card edges; text retains its padding. */
.section-highlights .highlight{--card-pad:clamp(1.4rem,2.4vw,2.25rem);padding:var(--card-pad)}
.brand-visual{width:calc(100% + var(--card-pad) + var(--card-pad));margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 24px}
@media(min-width:601px) and (max-width:1100px){.section-highlights .highlight{--card-pad:32px}}

/* Licensed Font Awesome 7 Pro and Brands, served locally. */
@font-face{font-family:'Footer FA7 Pro';font-style:normal;font-weight:900;font-display:block;src:url('assets/fonts/fa7-pro-solid.otf') format('opentype')}
@font-face{font-family:'Footer FA7 Brands';font-style:normal;font-weight:400;font-display:block;src:url('assets/fonts/fa7-brands.woff2') format('woff2')}
.contact-icon{display:grid;place-items:center;font-size:28px;line-height:1;font-style:normal;font-synthesis:none;text-rendering:auto;-webkit-font-smoothing:antialiased}
.contact-icon.fa-solid{font-family:'Footer FA7 Pro';font-weight:900}
.contact-icon.fa-brands{font-family:'Footer FA7 Brands';font-weight:400}
@media(max-width:600px){.contact-icon{font-size:25px}}

/* Shared Font Awesome 7 Pro arrows for navigation and actions. */
.ui-icon{display:inline-block;font-family:'Footer FA7 Pro';font-weight:900;font-style:normal;font-synthesis:none;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased}
.ui-icon.fa-arrow-up-right{rotate:-45deg}
.arrow{display:grid;place-items:center}
.arrow .ui-icon{font-size:18px}
.button .ui-icon{font-size:.8em;margin-left:10px}
.read-more .ui-icon,.more-domain .ui-icon,.text-link .ui-icon{font-size:.8em;margin-left:6px}
.contact-arrow.ui-icon{font-size:18px}

/* White client marks aligned at the top of every project card. */
.shot:after{inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.22) 40%,rgba(0,0,0,.65) 72%,rgba(0,0,0,.95) 100%);opacity:1}
.shot>.client-logo{position:absolute;z-index:2;top:28px;left:28px;width:180px;height:70px;object-fit:contain;object-position:left top;filter:brightness(0) invert(1);background:transparent;border-radius:0;padding:0}
.shot-more:after{display:none}
@media(max-width:600px){.shot>.client-logo{top:20px;left:20px;width:150px;height:46px}}
.shot.case-minispeed>.client-logo{filter:url(#client-wordmark-white)}

/* Slightly larger project logos, retaining consistent top alignment. */
.shot>.client-logo{width:220px;max-width:calc(100% - 56px);height:86px}
@media(max-width:600px){.shot>.client-logo{width:180px;max-width:calc(100% - 40px);height:58px}}
/* Finish each film in the card colour, covering subpixel video edges. */
.brand-visual{background:#121212;flex-shrink:0;overflow:visible}
.brand-visual video{position:absolute;inset:0;mask-image:linear-gradient(to bottom,#000 80%,transparent 96%);-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 96%)}
.brand-visual:after{z-index:1;inset:0 0 -1px;background:linear-gradient(180deg,rgba(18,18,18,.42) 0%,rgba(18,18,18,.48) 35%,rgba(18,18,18,.78) 72%,#121212 92%,#121212 100%)}
.brand-visual:before{content:'';position:absolute;z-index:2;left:0;right:0;bottom:-3px;height:8px;background:#121212;pointer-events:none}

/* Trimmed SVG viewboxes make these sizes apply to the visible logo. */
.shot>.client-logo{width:180px;height:72px;max-width:calc(100% - 56px)}
.case-degieserwildeman>.client-logo{width:100px;height:86px}
.case-underyourskin>.client-logo{width:190px}
@media(max-width:600px){.shot>.client-logo{width:150px;height:60px;max-width:calc(100% - 40px)}.case-degieserwildeman>.client-logo{width:80px;height:70px}.case-underyourskin>.client-logo{width:160px}}
/* Balance heavier wordmarks against the finer client logos. */
.shot.case-sparescenter>.client-logo{width:125px;height:52px}
.shot.case-webwinkelkeur>.client-logo{width:135px;height:54px}
.shot.case-huidhuis>.client-logo{width:135px;height:58px}
.shot.case-minispeed>.client-logo{width:140px;height:52px}
@media(max-width:600px){
 .shot.case-sparescenter>.client-logo{width:105px;height:44px}
 .shot.case-webwinkelkeur>.client-logo{width:115px;height:46px}
 .shot.case-huidhuis>.client-logo{width:115px;height:50px}
 .shot.case-minispeed>.client-logo{width:120px;height:44px}
}

/* Cinemagraph-style sky drift; the foreground keeps the original still. */
#hero .hero-media>.hero-still{animation:none;transform:none}
#hero .hero-sky{position:absolute;width:149.0677%;aspect-ratio:1519/1036;left:-49.0677%;top:calc(-100vw * 340 / 1019);mask:url('assets/hero-sky-mask.svg') center/100% 100% no-repeat;-webkit-mask:url('assets/hero-sky-mask.svg') center/100% 100% no-repeat;pointer-events:none;overflow:hidden}
#hero .hero-media .hero-sky img{position:absolute;inset:0;width:100%;height:100%;left:0;top:0;object-fit:fill;transform-origin:center top;animation:sky-drift 16s ease-in-out infinite alternate}
@keyframes sky-drift{from{transform:scale(1.09) translateX(-2%)}to{transform:scale(1.09) translateX(2%)}}
@media(max-width:600px){#hero .hero-sky{width:194.7436%;left:-66.6667%;top:-50px}}
@media(prefers-reduced-motion:reduce){#hero .hero-sky{display:none}}
/* Mask the source layer too, so drifting sky never carries foreground pixels. */
#hero .hero-media .hero-sky img{mask:url('assets/hero-sky-mask.svg') center/100% 100% no-repeat;-webkit-mask:url('assets/hero-sky-mask.svg') center/100% 100% no-repeat}

/* Approved release: a completely still hero until the film is reviewed. */
#hero .hero-media,#hero .hero-media img{animation:none;transform:none;will-change:auto}

/* Scroll entrances share one rhythm; all content stays visible without JS. */
.cinema-enter{opacity:0;translate:0 24px;transition:opacity 850ms var(--motion-ease) var(--reveal-delay,0ms),translate 850ms var(--motion-ease) var(--reveal-delay,0ms)}
.cinema-enter.is-visible,.cinema-enter:focus-within{opacity:1;translate:0 0}
.reading-progress{position:fixed;top:0;left:0;right:0;z-index:100;height:2px;pointer-events:none;background:linear-gradient(90deg,#617bff,#dce3ff);transform:scaleX(var(--reading-progress,0));transform-origin:left}

/* Keep the contact CTA pill clean and match the other buttons’ hover ring. */
p a.button-contact,.button-contact:hover,.button-contact:focus-visible{border:2px solid transparent;filter:none;transform:none}
.button-contact{background:#fff;color:#111;transition:background-color 400ms var(--motion-ease),translate 400ms var(--motion-ease),box-shadow 400ms var(--motion-ease)}
.button-contact:hover{background:#e8edf5;color:#111;translate:0 -2px;box-shadow:0 10px 24px #0005;outline:3px solid rgba(255,255,255,.24);outline-offset:2px}
.button-contact:focus-visible{outline:2px solid #b4c1ff;outline-offset:5px;translate:0 0}
.language-switch{display:flex;align-items:center;gap:6px}
.language-switch a{min-height:36px;min-width:36px;font-size:12px;padding:0 10px;color:#aeb2bd}
.language-switch a.is-active{color:#fff;background:#ffffff0d;border:1px solid #ffffff30}
@media(max-width:600px){.cinema-enter{translate:0 16px}}
@media(prefers-reduced-motion:reduce){
 .cinema-enter{opacity:1;translate:none;transition:none}
 .reading-progress{display:none}
 .button-contact,.button-contact:hover,.button-contact:focus-visible{transition:none;translate:none;transform:none}
}

/* Rounded cards; floating labels remain outside the brand-card edges. */
.section-highlights .highlight,.shot{--card-radius:24px;border-radius:var(--card-radius)}
.brand-visual{border-radius:var(--card-radius) var(--card-radius) 0 0}
.brand-visual video,.brand-visual:after{border-radius:inherit}
/* Reveals must not add vertical overflow to the horizontal project track. */
.slider{overflow-y:hidden;padding-block:6px}
.slider .shot.cinema-enter{translate:none}
@media(max-width:600px){.section-highlights .highlight,.shot{--card-radius:18px}}

/* Original website visuals in device scenes; preserve the actual page content. */
.shot.case-huidhuis{background:radial-gradient(ellipse at 65% 30%,#608ea0,#1d394a 80%)}
.shot.case-webwinkelkeur{background:radial-gradient(ellipse at 65% 30%,#718f77,#253e37 80%)}
.shot.case-minispeed{background:radial-gradient(ellipse at 65% 30%,#66799b,#202a41 80%)}
.shot.device-case .shot-image{position:absolute;left:-6%;top:13%;width:112%;height:76%;object-fit:contain;object-position:center;transform:perspective(1000px) rotateY(-12deg) rotateZ(-5deg);filter:drop-shadow(0 20px 22px #0007)}
.shot.device-case:hover .shot-image{transform:perspective(1000px) rotateY(-12deg) rotateZ(-5deg) scale(1.03)}
.laptop-mockup{position:absolute;left:12%;top:24%;width:76%;aspect-ratio:1.6;transform:perspective(1000px) rotateY(-12deg) rotateZ(-5deg);filter:drop-shadow(0 20px 22px #0007);transition:transform var(--motion-hover) var(--motion-ease)}
.laptop-screen{display:block;height:100%;padding:4% 2% 3%;background:#101113;border:2px solid #74767a;border-radius:14px 14px 4px 4px;box-shadow:inset 0 0 0 2px #27292c;overflow:hidden}
.laptop-screen:before{content:'';position:absolute;top:3%;left:50%;width:4px;height:4px;border-radius:50%;background:#383a40}
.mockup-screen-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.laptop-base{position:absolute;left:-5%;bottom:-3%;width:110%;height:4%;background:linear-gradient(#c5c6c9,#777b82 40%,#30343b);border-radius:0 0 50% 50%}
.shot:hover .laptop-mockup{transform:perspective(1000px) rotateY(-12deg) rotateZ(-5deg) scale(1.03)}
@media(prefers-reduced-motion:reduce){.shot.device-case:hover .shot-image,.shot:hover .laptop-mockup{transform:perspective(1000px) rotateY(-12deg) rotateZ(-5deg)}}