@font-face{font-family:'Poppins';font-style:normal;font-weight:200;font-display:swap;src:url('/assets/fonts/poppins-200-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:200;font-display:swap;src:url('/assets/fonts/poppins-200-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/poppins-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/poppins-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --ink:#000000; --ink-2:#070707; --line:#1C1C1C; --line-2:#282828;
  --paper:#F3F1EC; --mid:#98968F; --dim:#66645F;
  --font:'Poppins','Helvetica Neue',Helvetica,Arial,sans-serif;
  --e:cubic-bezier(.16,.84,.24,1);      /* entrance, expo-out */
  --io:cubic-bezier(.72,0,.24,1);       /* ease-in-out */
  --pad:64px;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--font);
  font-size:16px; line-height:1.8; font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; cursor:pointer; }
img{ max-width:100%; }
:focus-visible{ outline:1px solid var(--paper); outline-offset:6px; }

/* ---------- type ---------- */
.d1{ font-weight:200; font-size:clamp(44px,7.2vw,112px); line-height:.94; letter-spacing:-.05em; margin:0; }
.d2{ font-weight:200; font-size:clamp(30px,4.4vw,64px); line-height:1.02; letter-spacing:-.045em; margin:0; }
.d3{ font-weight:300; font-size:clamp(21px,2.1vw,29px); line-height:1.22; letter-spacing:-.03em; margin:0; }
.lede{ font-weight:300; font-size:clamp(16px,1.35vw,19px); line-height:1.68; letter-spacing:-.012em; color:#D3D0C9; }
.txt{ font-weight:300; font-size:15px; line-height:1.85; color:var(--mid); }
.lab{ font-weight:400; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); }
.lab-b{ color:#A8A6A0; }
.num{ font-weight:400; font-size:10px; letter-spacing:.2em; color:var(--paper); }
.lit{ font-weight:400; }
.hair{ height:1px; background:var(--line); border:0; margin:0; }
.grain{ position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"); }

/* ---------- reveal engine ---------- */
.rv{ --d:0ms; }
.rv-up{ opacity:0; transform:translateY(36px);
  transition:opacity 1.05s var(--e) var(--d), transform 1.25s var(--e) var(--d); }
.rv.in .rv-up, .rv-up.in{ opacity:1; transform:none; }
.rv-fade{ opacity:0; transition:opacity 1.3s var(--e) var(--d); }
.rv.in .rv-fade, .rv-fade.in{ opacity:1; }
.rule{ height:1px; background:var(--line-2); transform:scaleX(0); transform-origin:left;
  transition:transform 1.5s var(--e) var(--d); }
.rv.in .rule, .rule.in{ transform:none; }

/* word-by-word title reveal */
.ttl .w{ display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.16em; margin-bottom:-.16em; }
.ttl .w > i{ display:inline-block; font-style:inherit; font-weight:inherit;
  transform:translateY(115%) rotate(2.4deg); transform-origin:left top;
  transition:transform 1.15s var(--e) var(--d); }
.ttl.in .w > i{ transform:none; }

/* ---------- animated underline ---------- */
.u{ position:relative; display:inline-block; padding-bottom:4px; }
.u::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .75s var(--io); }
.u:hover::after, .u.on::after{ transform:scaleX(1); transform-origin:left; }
/* ---------- knop: pil met witte lichtrand en een pijl die blijft doorlopen ---------- */
.btn{ display:inline-flex; align-items:center; gap:14px; position:relative; isolation:isolate;
  font-weight:400; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--paper); padding:16px 28px; border-radius:999px; background:transparent;
  transition:color .55s var(--io); cursor:pointer; }
.btn > span, .btn > .arw{ position:relative; z-index:1; }
.btn .edge{ position:absolute; inset:0; border-radius:999px; border:1px solid #26241F;
  pointer-events:none; z-index:0; }
.btn .beam{ position:absolute; inset:0; border-radius:999px; overflow:hidden;
  pointer-events:none; z-index:0; }
.btn .beam::before{ content:''; position:absolute; top:50%; left:50%;
  width:300%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, rgba(239,237,232,0) 0deg, rgba(239,237,232,0) 250deg,
    rgba(239,237,232,.95) 316deg, rgba(239,237,232,0) 360deg);
  animation:beamspin 3.4s linear infinite; }
.btn .beam::after{ content:''; position:absolute; inset:1px; border-radius:999px; background:var(--ink); }
@keyframes beamspin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.btn:hover .beam::before{ animation-duration:1.5s; }
.btn:hover{ color:#fff; }
.btn:focus-visible{ outline:2px solid var(--paper); outline-offset:4px; }
/* de pijl: twee pijlen in een venster, zo loopt hij naadloos rond */
.btn .arw{ display:block; width:26px; height:14px; overflow:hidden; flex:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 34%, #000 66%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 34%, #000 66%, transparent 100%); }
.btn .arwrun{ display:flex; width:52px; animation:march 1.9s linear infinite; }
.btn .arwrun i{ font-style:normal; width:26px; flex:none; text-align:center;
  font-size:13px; line-height:14px; letter-spacing:0; }
@keyframes march{ from{ transform:translateX(-26px); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){
  .btn .arwrun, .btn .beam::before{ animation:none; }
  .btn .beam::before{ background:rgba(239,237,232,.55); }
}

/* ---------- header ---------- */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:70; display:flex; align-items:center;
  justify-content:space-between; padding:22px var(--pad);
  background:linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,0)); }
.mark{ display:block; line-height:0; }
.mark img{ height:55px; width:auto; display:block; transition:opacity .6s var(--io); }
.mark:hover img{ opacity:.6; }
.nav{ display:flex; gap:36px; }
.nav a{ font-size:10px; font-weight:400; letter-spacing:.24em; text-transform:uppercase;
  color:#B9B7B1; position:relative; padding-bottom:4px; transition:color .5s var(--io); }
.nav a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .7s var(--io); }
.nav a:hover{ color:#fff; } .nav a:hover::after, .nav a.on::after{ transform:scaleX(1); transform-origin:left; }
.nav a.on{ color:#fff; }
.lang{ display:flex; gap:12px; font-size:9px; letter-spacing:.2em; color:#94918B; }
.lang b{ color:#FFFFFF; font-weight:400; }
.lang{ font-weight:400; }
.lang a{ color:inherit; font-weight:400; font-size:inherit; letter-spacing:inherit;
  transition:color .5s var(--io); }
.lang a:hover{ color:var(--paper); }
.burger{ display:none; flex-direction:column; gap:6px; cursor:pointer; }
.burger i{ width:22px; height:1px; background:var(--paper); display:block; }
.burger i:last-child{ width:13px; opacity:.5; }

/* ---------- page transition ---------- */
.swipe{ position:fixed; inset:0; z-index:95; pointer-events:none; transform:scaleY(0); transform-origin:bottom;
  background:#000000; }
.swipe.go{ animation:sw .82s var(--io) forwards; }
@keyframes sw{ 0%{transform:scaleY(0);transform-origin:bottom} 48%{transform:scaleY(1);transform-origin:bottom}
  49%{transform:scaleY(1);transform-origin:top} 100%{transform:scaleY(0);transform-origin:top} }
.view{ display:none; } .view.on{ display:block; }

/* ---------- hero ---------- */
.open{ position:relative; height:100vh; min-height:600px; overflow:hidden; background:#000; }
.open video, .open img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* het openingsbeeld: uitsnede rond de appel, en een heel trage drift zodat het leeft */
.open .heropic{ display:block; }
/* boven-midden uitgelijnd en van bovenaf ingezoomd, zo blijft de appel altijd
   heel in beeld en snijdt de trage inzoom alleen onderaan bij */
.open .heroimg{ object-position:50% 0%; transform-origin:50% 0%; }
@keyframes heroDrift{ from{ transform:scale(1); } to{ transform:scale(1.05); } }
/* De trage inzoom vergroot het beeld en maakt het dus zachter. Alleen op
   schermen waar we pixels over hebben laten we hem lopen; op een 4K-scherm of
   een scherm met hoge pixeldichtheid staat het beeld stil en dus haarscherp. */
@media (max-width:1599px) and (max-resolution:1.49dppx){
  .open .heroimg{ animation:heroDrift 34s cubic-bezier(.45,0,.55,1) infinite alternate; } }
@media (max-width:820px){
  @keyframes heroDrift{ from{ transform:scale(1); } to{ transform:scale(1.03); } } }
@media (prefers-reduced-motion:reduce){ .open .heroimg{ animation:none; } }
@media (prefers-reduced-motion:reduce){ .open .heroimg{ animation:none; } }
.open .veil{ position:absolute; inset:0; background:none; }
/* op telefoon een verloop achter de tekst, zodat de kop leesbaar blijft */
@media (max-width:820px){ .open .veil{ background:linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,.30) 48%, rgba(0,0,0,0) 68%); } }
.open .in-box{ position:absolute; left:var(--pad); right:var(--pad); bottom:88px; z-index:3; }
.open .lab{ color:#EFEDE8; text-shadow:0 1px 22px rgba(0,0,0,.65); }
.cue{ position:absolute; left:var(--pad); bottom:34px; z-index:4; display:flex; align-items:center; gap:14px; }
.cue .l{ width:62px; height:1px; background:#EFEDE8; transform-origin:left; animation:cueL 2.6s var(--io) infinite; }
.cue span{ color:#EFEDE8; }
@keyframes cueL{ 0%,100%{ transform:scaleX(.2); opacity:.45 } 50%{ transform:scaleX(1); opacity:1 } }

/* ---------- THE TURN : projects that rotate in on their vertical axis ---------- */
.reel{ padding:60px 0 40px; }
.proj{ position:relative; padding:0 var(--pad); margin-bottom:190px; }
.proj .frame{ position:relative; display:block; max-width:1180px; }
.proj.r .frame{ margin-left:auto; }
.proj .frame img{ display:block; width:100%; height:auto; }   /* nooit bijgesneden */
.turn{ transform-origin:left center; backface-visibility:hidden; }
.proj.r .turn{ transform-origin:right center; }
@keyframes turnL{ from{ transform:perspective(2200px) rotateY(-46deg) translateZ(-80px); opacity:.18; }
                    to{ transform:perspective(2200px) rotateY(0deg) translateZ(0); opacity:1; } }
@keyframes turnR{ from{ transform:perspective(2200px) rotateY(46deg) translateZ(-80px); opacity:.18; }
                    to{ transform:perspective(2200px) rotateY(0deg) translateZ(0); opacity:1; } }
@supports (animation-timeline: view()){
  .turn{ animation-name:turnL; animation-fill-mode:both; animation-duration:auto;
    animation-timing-function:cubic-bezier(.16,.84,.24,1);
    animation-timeline:view(); animation-range:entry 2% cover 36%; }
  .proj.r .turn{ animation-name:turnR; }
}
@supports not (animation-timeline: view()){
  .turn{ transform:perspective(2200px) rotateY(-40deg); opacity:.2;
    transition:transform 1.5s var(--e), opacity 1.2s var(--e); }
  .proj.r .turn{ transform:perspective(2200px) rotateY(40deg); }
  .rv.in .turn{ transform:none; opacity:1; }
}
.proj .meta{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px;
  max-width:1180px; margin:26px 0 0; flex-wrap:wrap; }
.proj.r .meta{ margin-left:auto; }
.proj .name{ font-weight:200; font-size:clamp(28px,3.6vw,54px); letter-spacing:-.045em; line-height:1.04; }
.proj .idx{ position:absolute; top:-42px; font-weight:200; font-size:13px; letter-spacing:.3em; color:var(--dim); }
.proj.r .idx{ right:var(--pad); } .proj.l .idx{ left:var(--pad); }

/* ---------- sectie met een uitgesneden figuur, om en om links/rechts ---------- */
.cutsec{ position:relative; display:grid; grid-template-columns:1.05fr 1fr; align-items:center;
  gap:40px; min-height:680px; max-height:880px; padding:60px var(--pad); overflow:hidden; }
.cutsec .body{ position:relative; z-index:2; max-width:56ch; }
.cutsec .art{ position:absolute; bottom:0; top:34px; z-index:1; pointer-events:none;
  display:flex; align-items:flex-end; }
.cutsec .art img{ height:100%; width:auto; display:block; filter:grayscale(1) contrast(1.05); }

/* beeld rechts, tekst links */
.cutsec.artright .art{ right:calc(var(--pad) * -0.35); }
/* beeld links, tekst rechts */
.cutsec.artleft  .art{ left:calc(var(--pad) * -0.35); }
.cutsec.artleft  .body{ grid-column:2; }
.cutsec.tall{ min-height:760px; }

@media (max-width:900px){
  .cutsec, .cutsec.artleft{ grid-template-columns:1fr; min-height:0; max-height:none;
    padding:50px var(--pad) 0; }
  .cutsec .body, .cutsec.artleft .body{ grid-column:1; max-width:100%; }
  .cutsec .art, .cutsec.artleft .art, .cutsec.artright .art{ position:static; margin:24px auto 0;
    width:70vw; top:auto; }
  .cutsec .art img{ height:auto; width:100%; }
}

/* ---------- gecentreerde figuur, type eromheen ---------- */
.midsec{ position:relative; height:min(820px, 94vh); min-height:660px; overflow:hidden;
  padding:56px var(--pad); }
.midsec .art{ position:absolute; left:50%; transform:translateX(-50%); top:30px; bottom:0;
  display:flex; align-items:flex-end; z-index:1; pointer-events:none; }
.midsec .art img{ height:100%; width:auto; display:block; filter:grayscale(1) contrast(1.05); }
.midsec .lo{ position:absolute; left:var(--pad); top:96px; max-width:min(34ch, 34vw); z-index:2; }
.midsec .ro{ position:absolute; right:var(--pad); bottom:74px; max-width:min(36ch, 30vw);
  text-align:right; z-index:2; }
.midsec .ro .rule{ margin-left:auto; }
@media (max-width:1100px){
  .midsec .lo{ max-width:40vw; } .midsec .ro{ max-width:36vw; }
}
@media (max-width:900px){
  .midsec{ height:auto; min-height:0; padding:50px var(--pad) 0; }
  .midsec .art{ position:static; transform:none; margin:26px auto 0; width:64vw; }
  .midsec .art img{ height:auto; width:100%; }
  .midsec .lo, .midsec .ro{ position:static; max-width:100%; text-align:left; margin:0; }
  .midsec .ro{ margin-top:24px; } .midsec .ro .rule{ margin-left:0; }
}

/* ---------- abonnementen ---------- */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
.plan{ border-top:1px solid var(--line); padding:26px 0 0; }
.plan .num{ font-size:10px; letter-spacing:.2em; color:#38352F; margin-bottom:18px; }
.plan h3{ font-weight:200; font-size:clamp(24px,2.6vw,34px); line-height:1.05;
  letter-spacing:-.02em; margin:0 0 16px; color:var(--paper); }
.plan p{ margin:0; max-width:40ch; font-size:14px; }
@media (max-width:900px){ .plans{ grid-template-columns:1fr; gap:0; }
  .plan{ padding:22px 0 26px; } }

/* ---------- hero-band bij de dienstpagina's ---------- */
.svchero{ position:relative; width:min(100% - 2*var(--pad), 1180px); margin:14px auto 6px;
  aspect-ratio:16 / 9; overflow:hidden; background:transparent; }
.svchero img{ width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.04); opacity:0;
  transition:transform 1.5s cubic-bezier(.16,1,.3,1), opacity 1.1s ease; }
.svchero.in img{ transform:scale(1); opacity:1; }
.svchero::after{ content:none; }
@media (max-width:900px){ .svchero{ width:calc(100% - 2*var(--pad)); margin:10px auto 6px; } }
/* op desktop staat het beeld naast de aanpak-tekst, zacht uitgevaagd zonder kader */
@media (min-width:901px){ .svcart{ display:none; } }
.svcart{ position:relative; min-height:460px; align-self:stretch; }
.svcart img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block;
  -webkit-mask-image:radial-gradient(ellipse farthest-side at 50% 50%,
      #000 14%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.28) 66%, transparent 84%);
          mask-image:radial-gradient(ellipse farthest-side at 50% 50%,
      #000 14%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.28) 66%, transparent 84%);
  opacity:0; transform:scale(1.07);
  transition:opacity 1.2s var(--io), transform 1.6s var(--io); }
.svcart.in img{ opacity:1; transform:scale(1); }
@media (max-width:900px){ .svcart{ display:none; } }

/* ---------- C: split screen ---------- */
.splitsec{ display:grid; grid-template-columns:1fr 1fr; height:min(820px,94vh); min-height:640px;
  overflow:hidden; view-timeline-name:--look; view-timeline-axis:block; }
.splitsec .paneel{ position:relative; background:#000; border-right:1px solid #151515;
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.figstack{ position:relative; height:95%; aspect-ratio:1022 / 1536; max-width:100%; }
.figstack img{ position:absolute; inset:0; width:100%; height:100%; display:block;
  filter:grayscale(1) contrast(1.05); }
.splitsec .nr{ position:absolute; left:34px; top:86px; z-index:2; }
.splitsec .body{ display:flex; flex-direction:column; justify-content:center; padding:56px var(--pad); }
@media (max-width:900px){
  .splitsec{ display:flex; flex-direction:column; height:auto; min-height:0; padding:64px 0 46px; }
  .splitsec .body{ display:contents; }
  .splitsec .body > h2{ order:1; padding:0 var(--pad); margin:0; }
  .splitsec .paneel{ order:2; height:56vh; border-right:0; border-top:1px solid #151515;
    border-bottom:1px solid #151515; margin:28px 0 0; }
  .splitsec .txtwrap{ order:3; padding:26px var(--pad) 0; }
  .splitsec .txtwrap .rule{ width:200px !important; margin:0 0 20px !important; }
  .splitsec .nr{ left:var(--pad); top:22px; }
}

/* ---------- B: overlap ---------- */
.overlapsec{ position:relative; height:min(840px,94vh); min-height:700px; overflow:hidden;
  padding:96px var(--pad) 64px; display:flex; flex-direction:column; justify-content:space-between; }
.overlapsec .kop{ position:relative; z-index:1; max-width:min(62%, 22ch); }
.overlapsec .vlijn{ position:absolute; left:calc(var(--pad) + 30vw); top:0; bottom:0; width:1px;
  background:#171717; z-index:0; }
.overlapsec .art{ position:absolute; right:4vw; top:26px; bottom:0; z-index:2;
  display:flex; align-items:flex-end; pointer-events:none; }
.overlapsec .art img{ height:100%; width:auto; display:block; filter:grayscale(1) contrast(1.05); }
.overlapsec .onder{ position:relative; z-index:3; max-width:min(50%, 46ch); }
@media (max-width:1100px){ .overlapsec .onder{ max-width:44%; } .overlapsec .kop{ max-width:52%; } }
@media (max-width:900px){
  .overlapsec{ height:auto; min-height:0; padding:50px var(--pad) 0; display:block; }
  .overlapsec .vlijn{ display:none; }
  .overlapsec .art{ position:static; margin:24px auto 0; width:66vw; }
  .overlapsec .art img{ height:auto; width:100%; }
  .overlapsec .onder{ max-width:100%; margin-top:24px; }
  .overlapsec .kop{ max-width:100%; }
}

/* ---------- lichtkrant: schijnwerper in het midden, stil bij aanwijzen ---------- */
.mq{ position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 11%,#000 89%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 11%,#000 89%,transparent); }
.marquee{ display:flex; width:max-content; padding:21px 0; }
.mq.ready .marquee{ animation:slide 62s linear infinite; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.mq .set{ display:block; white-space:nowrap;
  font-size:11px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; }
.mq a{ position:relative; padding:0 20px; color:#5C5952; transition:color .45s var(--io); }
.mq i{ font-style:normal; color:#2B2924; padding:0 1px; }
.mq a::after{ content:''; position:absolute; left:20px; right:20px; bottom:-8px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--io); }
/* de schijnwerper: een tweede, witte laag die alleen in het midden zichtbaar is */
.mq .lift{ position:absolute; inset:0; display:flex; align-items:center; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 32%,#000 45%,#000 55%,transparent 68%);
          mask-image:linear-gradient(90deg,transparent 32%,#000 45%,#000 55%,transparent 68%); }
.mq .lift a{ color:var(--paper); } .mq .lift i{ color:#7E7C76; }
/* stil bij aanwijzen, en de naam onder de muis wordt een ingang */
.mq:hover .marquee{ animation-play-state:paused; }
.mq:hover a{ color:#6E6B64; }
.mq:hover a:hover{ color:var(--paper); }
.mq:hover a:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:900px){ .mq .set{ font-size:10px; letter-spacing:.2em } .mq a{ padding:0 14px } }
@media (prefers-reduced-motion: reduce){ .mq.ready .marquee{ animation:none } }

/* ---------- horizontal act : live sites ---------- */
.act{ --trackw:5400px; position:relative; height:560vh; view-timeline-name:--act; view-timeline-axis:block; }
.act .stick{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; }
.track{ display:flex; width:max-content; gap:70px; padding:0 8vw; align-items:center; }
@keyframes panX{ from{ transform:translateX(0) } to{ transform:translateX(calc(-1 * var(--travel, 0px))) } }
@keyframes panY{ from{ transform:translateY(0) } to{ transform:translateY(var(--ph)) } }
@supports (animation-timeline: view()){
  .track{ animation-name:panX; animation-fill-mode:both; animation-timing-function:linear;
    animation-timeline:--act; animation-range:contain 0% contain 100%; }
  .port img{ animation-name:panY; animation-fill-mode:both;
    animation-timing-function:cubic-bezier(.42,0,.58,1);
    animation-timeline:--act; }
  .barfill{ animation-name:grow; animation-fill-mode:both; animation-timing-function:linear;
    animation-timeline:--act; animation-range:contain 0% contain 100%; }
}
@keyframes grow{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@supports not (animation-timeline: view()){
  .act{ height:auto; } .act .stick{ position:static; height:auto; }
  .track{ overflow-x:auto; scroll-snap-type:x mandatory; padding:60px 24px; }
  .brw{ scroll-snap-align:center; }
}
.brw{ width:min(880px, 76vw); flex:none; }
.brw .chrome{ display:flex; align-items:center; gap:8px; height:38px; padding:0 16px;
  background:#0B0B0B; border:1px solid var(--line-2); border-bottom:0; border-radius:8px 8px 0 0; }
.brw .dot{ width:8px; height:8px; border-radius:50%; background:#33333D; display:block; }
.brw .url{ margin-left:14px; font-size:10px; letter-spacing:.14em; color:#77756F; }
.port{ height:520px; overflow:hidden; border:1px solid var(--line-2); background:#fff; position:relative; }
.port img{ display:block; width:100%; height:auto; }
.port img.creep{ animation-name:creepY; animation-timing-function:linear;
  animation-iteration-count:infinite; animation-direction:alternate; animation-fill-mode:both; }
@keyframes creepY{ from{ transform:translateY(0) } to{ transform:translateY(var(--ph,0px)) } }
@media (prefers-reduced-motion: reduce){ .port img.creep{ animation:none } }
.brw .cap{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; gap:18px; }
.brw .cap .nm{ font-weight:300; font-size:clamp(15px,1.35vw,19px); letter-spacing:-.02em;
  white-space:nowrap; flex:0 0 auto; }
.brw .cap .lab{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; text-align:right; }
.brw{ cursor:pointer; }
.rail.drag .brw{ cursor:grabbing; }
.hud{ position:absolute; left:0; right:0; bottom:26px; z-index:6; padding:0 var(--pad);
  display:flex; align-items:center; gap:26px; pointer-events:none; }
.hud .bar{ flex:1; height:1px; background:#1F1F1F; position:relative; }
.barfill{ position:absolute; inset:0; background:var(--paper); transform-origin:left; transform:scaleX(0); }

/* ---------- lichttafel: galerij voor 3D en fotografie ---------- */
.gal{ padding:10px 0 40px; }
.galstage{ position:relative; height:min(66vh,620px); display:flex; align-items:center;
  justify-content:center; padding:0 var(--pad); }
.galstage .frame{ position:relative; height:100%; display:flex; align-items:center; justify-content:center; }
.galstage img{ max-height:100%; max-width:100%; width:auto; height:auto; display:block;
  box-shadow:0 60px 140px -50px rgba(255,255,255,.16);
  opacity:0; transform:scale(.985); transition:opacity .7s var(--io), transform 1.1s var(--e); }
.galstage img.on{ opacity:1; transform:none; position:relative; }
.galstage img:not(.on){ position:absolute; inset:auto; pointer-events:none; }
.galzone{ position:absolute; top:0; bottom:0; width:22%; z-index:4; cursor:pointer; }
.galzone.l{ left:0 } .galzone.r{ right:0 }
.galbar{ display:flex; align-items:center; gap:24px; padding:26px var(--pad) 0; flex-wrap:wrap; }
.galcount{ font-weight:200; font-size:22px; letter-spacing:-.02em; min-width:76px; }
.galcap{ flex:1 1 220px; min-width:0; color:var(--mid); font-size:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.galthumbs{ display:flex; gap:10px; overflow-x:auto; padding:20px var(--pad) 4px;
  scrollbar-width:none; }
.galthumbs::-webkit-scrollbar{ display:none }
.galthumbs button{ flex:none; width:84px; height:58px; padding:0; border:1px solid var(--line);
  background:#000; cursor:pointer; overflow:hidden; opacity:.42;
  transition:opacity .5s var(--io), border-color .5s var(--io); }
.galthumbs button img{ width:100%; height:100%; object-fit:cover; display:block; }
.galthumbs button:hover{ opacity:.8 }
.galthumbs button.on{ opacity:1; border-color:var(--paper); }
.galfull{ position:fixed; inset:0; z-index:96; background:#000; display:none;
  align-items:center; justify-content:center; padding:40px; cursor:zoom-out; }
.galfull.on{ display:flex }
.galfull img{ max-width:100%; max-height:100%; width:auto; height:auto; }
.galfull .x{ position:absolute; top:26px; right:32px; width:26px; height:26px; }
.galfull .x:before,.galfull .x:after{ content:''; position:absolute; top:12px; left:0; width:26px;
  height:1px; background:var(--paper); }
.galfull .x:before{ transform:rotate(45deg) } .galfull .x:after{ transform:rotate(-45deg) }
@media (max-width:900px){
  .galstage{ height:44vh; padding:0 16px; }
  .galthumbs button{ width:64px; height:46px }
  .galcount{ font-size:18px; min-width:64px }
}

/* ---------- veegbare rail ---------- */
.railwrap{ position:relative; }
.rail{ display:flex; gap:40px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  padding:6px var(--pad) 26px; scroll-behavior:smooth; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; cursor:grab; }
.rail::-webkit-scrollbar{ display:none; }
.rail.drag{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
.rail > *{ scroll-snap-align:center; flex:none; }
.railbar{ display:flex; align-items:center; gap:22px; padding:0 var(--pad) 0; }
.railbar .track{ flex:1; height:1px; background:#1F1F1F; position:relative; overflow:hidden;
  display:block; width:auto; animation:none; }
.railbar .track i{ position:absolute; top:0; bottom:0; left:0; width:22%; background:var(--paper);
  transition:transform .18s linear; }
.railnav{ display:flex; gap:10px; }
.railnav button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2);
  background:transparent; color:var(--paper); cursor:pointer; font-size:14px; line-height:1;
  transition:border-color .5s var(--io), background .5s var(--io), opacity .4s; font-family:var(--font); }
.railnav button:hover{ border-color:var(--paper); background:#0C0C0C; }
.railnav button[disabled]{ opacity:.28; cursor:default; }
@media (max-width:900px){ .rail{ gap:20px; padding:6px var(--pad) 22px; } .railnav{ display:none; } }

/* ---------- index rows ---------- */
.row{ display:grid; grid-template-columns:54px 1fr 320px 28px; gap:34px; align-items:baseline;
  padding:32px 0; border-top:1px solid var(--line); position:relative;
  transition:padding-left .8s var(--io); }
.row::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--paper);
  transform:scaleX(0); transform-origin:right; transition:transform .85s var(--io); }
.row:hover{ padding-left:22px; }
.row:hover::after{ transform:scaleX(1); transform-origin:left; }
.row .ttl2{ font-weight:200; font-size:clamp(24px,2.9vw,40px); letter-spacing:-.042em;
  transition:opacity .5s var(--io); }
.row .ar{ opacity:.2; transition:transform .8s var(--io), opacity .5s var(--io); }
.row:hover .ar{ transform:translateX(14px); opacity:1; }

/* ---------- media tiles (uncropped) ---------- */
.plate{ display:block; background:#000000; border:1px solid var(--line); overflow:hidden; }
.plate img{ display:block; width:100%; height:auto; transition:transform 1.4s var(--io), opacity .8s var(--io); }
.plate:hover img{ transform:scale(1.025); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
.spec{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); }
.spec > div{ padding:32px 32px 36px 0; border-right:1px solid var(--line); }
.spec > div + div{ padding-left:32px; }
.spec > div:last-child{ border-right:0; padding-right:0; }
.stat{ font-weight:200; font-size:clamp(64px,9vw,132px); line-height:.86; letter-spacing:-.06em; }
.mail{ font-weight:200; font-size:clamp(28px,5vw,60px); letter-spacing:-.045em; display:inline-block;
  padding-bottom:14px; border-bottom:1px solid var(--line-2); transition:border-color .8s var(--io), color .6s var(--io); }
.mail:hover{ color:#fff; border-color:var(--paper); }
.fld{ display:block; width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--paper); font-family:var(--font); font-weight:300; font-size:17px; padding:16px 0; margin-bottom:26px;
  transition:border-color .7s var(--io); }
.fld:focus{ outline:none; border-color:var(--paper); }
.fld::placeholder{ color:var(--dim); }
.fld:disabled{ opacity:.45; }
/* honeypot: onzichtbaar voor mensen, onweerstaanbaar voor bots */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.cfbox{ margin:26px 0 4px; min-height:0; }
.cform button.btn{ border:0; -webkit-appearance:none; appearance:none; font-family:inherit; }
.cform.busy{ opacity:.6; pointer-events:none; }
#sent.bad{ color:#C9C6BF; }
.sidx a{ display:flex; gap:16px; align-items:baseline; padding:13px 0; border-top:1px solid var(--line);
  color:var(--mid); font-size:13px; transition:color .6s var(--io), padding-left .7s var(--io); }
.sidx a:hover{ color:#fff; padding-left:12px; } .sidx a.on{ color:#fff; }
.pn{ display:flex; align-items:baseline; gap:24px; padding:38px 0; border-top:1px solid var(--line);
  transition:padding-left .8s var(--io); }
.pn:hover{ padding-left:18px; }
.pn .t{ font-weight:200; font-size:clamp(26px,3.4vw,46px); letter-spacing:-.045em; }
.g12{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px; }

/* ---------- project zonder screenshot ---------- */
.noshot{ border:1px solid var(--line-2); padding:90px 60px; text-align:center; background:#000000; }
.noshot .d2{ font-weight:200; font-size:clamp(30px,4.4vw,64px); letter-spacing:-.045em; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); }
.ftop{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:44px; padding:80px var(--pad) 60px; }
.fcol .fl{ display:block; font-size:13px; color:var(--mid); padding:5px 0; width:fit-content;
  transition:color .6s var(--io); }
.fcol .fl:hover{ color:#fff; }
.fbot{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding:26px var(--pad) 34px; border-top:1px solid var(--line); }

/* verwijzing naar de live site op een projectpagina, opent in een nieuw venster */
.exlink{ color:inherit; text-decoration:none; display:inline-flex; align-items:baseline; gap:7px;
  border-bottom:1px solid rgba(239,237,232,.22); padding-bottom:2px;
  transition:color .5s var(--io), border-color .5s var(--io); }
.exlink i{ font-style:normal; font-size:.82em; opacity:.5;
  transition:transform .45s var(--io), opacity .45s var(--io); }
.exlink:hover{ color:var(--paper); border-bottom-color:var(--paper); }
.exlink:hover i{ transform:translate(2px,-2px); opacity:1; }
.exlink:focus-visible{ outline:2px solid var(--paper); outline-offset:4px; }

/* ---------- mobiel menu ---------- */
.menu{ position:fixed; inset:0; z-index:80; background:#000000; display:flex; flex-direction:column;
  justify-content:center; padding:0 var(--pad); clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--io); }
.menu.on{ clip-path:inset(0 0 0 0); }
.menu a{ display:block; font-weight:200; font-size:clamp(34px,9vw,58px); letter-spacing:-.045em;
  padding:14px 0; border-bottom:1px solid var(--line); opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--e) var(--d,0ms), transform .9s var(--e) var(--d,0ms); }
.menu.on a{ opacity:1; transform:none; }
/* de taalkeuze in het mobiele menu volgt de kleine labelmaat, niet de menuregels */
.menu .lang a{ display:inline; font-size:9px; font-weight:400; letter-spacing:.2em;
  padding:0; border:0; opacity:1; transform:none; color:inherit; }
.menu .lang b{ font-size:9px; letter-spacing:.2em; }
.menu .foot{ margin-top:40px; opacity:0; transition:opacity .8s var(--e) .5s; }
.menu.on .foot{ opacity:1; }
.mclose{ position:absolute; top:24px; right:var(--pad); width:26px; height:26px; cursor:pointer; }
.mclose:before,.mclose:after{ content:''; position:absolute; top:12px; left:0; width:26px; height:1px;
  background:var(--paper); }
.mclose:before{ transform:rotate(45deg) } .mclose:after{ transform:rotate(-45deg) }
body.locked{ overflow:hidden; }

/* ---------- service detail ---------- */
.applist{ column-count:2; column-gap:44px; }
.applist div{ break-inside:avoid; padding:11px 0; border-top:1px solid var(--line);
  font-size:14px; color:var(--mid); }
.rel{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }

@media (max-width:900px){
  :root{ --pad:22px; }
  .nav,.lang{ display:none; } .burger{ display:flex; }
  .mark img{ height:52px; }
  .d3{ font-size:clamp(30px,7.4vw,40px) !important; line-height:1.04; letter-spacing:-.045em; }
  .g12{ grid-template-columns:1fr; gap:24px; }
  .g12 > *{ grid-column:1 / -1 !important; }
  .grid2,.grid3{ grid-template-columns:1fr; }
  .spec{ grid-template-columns:1fr; }
  .spec > div{ border-right:0; border-bottom:1px solid var(--line); padding:22px 0 24px !important; }
  .row{ grid-template-columns:32px 1fr 18px; gap:12px; padding:22px 0; }
  .row .desc{ display:none; }
  .proj{ margin-bottom:110px; }
  .proj .idx{ top:-30px; }
  .brw{ width:82vw; } .port{ height:50vh; }
  .brw .cap .nm{ font-size:15px; }
  .brw .cap .lab{ font-size:9px; }
  .track{ gap:26px; padding:0 8vw; }
  .act{ --trackw:calc(84vw * 4 + 100px); height:400vh; }
  .two{ grid-template-columns:1fr !important; }
  .ftop{ grid-template-columns:1fr 1fr; gap:26px 22px; padding:52px var(--pad) 32px; }
  .fbrand{ grid-column:1 / -1; }
  .fbrand p{ margin-top:18px !important; }
  .fcol .fl{ padding:3px 0; font-size:12.5px; }
  .fcol .lab{ margin-bottom:12px !important; }
  .fbot{ padding:20px var(--pad) 28px; gap:12px; }
  .fcol .txt{ line-height:1.75 !important; font-size:12.5px !important; }
  .fcol:last-child{ grid-column:1 / -1; }
  .applist{ column-count:1; }
  .rel{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv-up,.rv-fade{ opacity:1 !important; transform:none !important; }
  .ttl .w > i{ transform:none !important; }
  .turn{ opacity:1 !important; transform:none !important; }
}


/* ---- process steps ---- */
.stepwrap{ position:relative; padding-left:110px; }
.stepwrap .spine{ position:absolute; left:38px; top:0; bottom:0; width:1px; background:var(--line); }
.stepwrap .spine i{ position:absolute; inset:0; background:var(--paper); transform:scaleY(0); transform-origin:top; }
@supports (animation-timeline: view()){
  .stepwrap .spine i{ animation-name:growY; animation-fill-mode:both; animation-timing-function:linear;
    animation-timeline:view(); animation-range:entry 30% exit 40%; } }
@keyframes growY{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
.stp{ position:relative; padding:44px 0; border-top:1px solid var(--line); }
.stp:first-child{ border-top:0; }
.stp .k{ position:absolute; left:-110px; top:48px; font-weight:200; font-size:13px; letter-spacing:.28em; color:var(--dim); }
.stp ul{ list-style:none; margin:20px 0 0; padding:0; }
.stp li{ padding:9px 0; border-top:1px solid var(--line); font-size:14px; color:var(--mid); display:flex; gap:14px; }
.stp li b{ font-size:9px; letter-spacing:.16em; color:#CFCCC5; font-weight:400; }

/* ---- work index ---- */
.filters{ display:flex; gap:26px; flex-wrap:wrap; }
.filters button{ background:none; border:0; padding:0 0 6px; cursor:pointer; font-family:var(--font);
  font-size:10px; font-weight:400; letter-spacing:.26em; text-transform:uppercase; color:var(--dim);
  position:relative; transition:color .5s var(--io); }
.filters button::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .7s var(--io); }
.filters button:hover{ color:#CFCCC5; }
.filters button:hover::after, .filters button.on::after{ transform:scaleX(1); transform-origin:left; }
.filters button.on{ color:#fff; }
.ix{ display:grid; grid-template-columns:58px 1fr 220px 26px; gap:30px; align-items:baseline;
  padding:26px 0; border-top:1px solid var(--line); position:relative; transition:padding-left .8s var(--io); }
.ix::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--paper);
  transform:scaleX(0); transform-origin:right; transition:transform .85s var(--io); }
.ix:hover{ padding-left:24px; } .ix:hover::after{ transform:scaleX(1); transform-origin:left; }
.ix .nm{ font-weight:200; font-size:clamp(22px,2.5vw,34px); letter-spacing:-.042em; }
.ix .ct{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); }
.ix .ar{ opacity:.2; transition:transform .8s var(--io), opacity .5s var(--io); }
.ix:hover .ar{ transform:translateX(14px); opacity:1; }
.ix.hide{ display:none; }
.ixthumb{ display:none; }
#peek{ position:fixed; top:0; left:0; width:330px; z-index:60; pointer-events:none; opacity:0;
  transition:opacity .55s var(--io); will-change:transform; }
#peek img{ display:block; width:100%; height:230px; object-fit:cover; object-position:top center;
  border:1px solid var(--line-2); }
#peek.on{ opacity:1; }

/* ---- telefoon onder het bureaubladvenster ---- */
.scanm{ position:relative; height:300vh; view-timeline-name:--scanm; view-timeline-axis:block; }
.scanm .stick{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; }
.phone{ width:300px; position:relative; }
.phone .shell{ position:relative; border:1px solid #2C2C2C; border-radius:38px; padding:11px;
  background:#0A0A0A; box-shadow:0 50px 120px -40px rgba(255,255,255,.10); }
.phone .notch{ position:absolute; left:50%; transform:translateX(-50%); top:19px; width:92px; height:22px;
  border-radius:12px; background:#000; z-index:3; }
.phoneport{ height:min(56vh,540px); overflow:hidden; border-radius:28px; background:#fff; position:relative; }
.phoneport img{ display:block; width:100%; height:auto; }
.phone .side{ position:absolute; right:-2px; top:110px; width:2px; height:60px; background:#242424;
  border-radius:2px; }
.scanm .cap{ display:flex; align-items:center; gap:16px; }
.scanm .bar{ width:180px; height:1px; background:#1F1F1F; position:relative; }
.scanm .bar i{ position:absolute; inset:0; background:var(--paper); transform-origin:left; transform:scaleX(0); }
@supports (animation-timeline: view()){
  .scan.dual .phoneport img, .scan.dual .phone .bar i{ animation-timeline:--scan; }
  .phoneport img{ animation-name:panY; animation-fill-mode:both;
    animation-timing-function:cubic-bezier(.38,0,.62,1);
    animation-timeline:--scanm; animation-range:contain 0% contain 100%; }
  .scanm .bar i{ animation-name:grow; animation-fill-mode:both; animation-timing-function:linear;
    animation-timeline:--scanm; animation-range:contain 0% contain 100%; }
}
@supports not (animation-timeline: view()){
  .scanm{ height:auto } .scanm .stick{ position:static; height:auto; padding:50px 0 }
  .phoneport{ height:auto }
}
@media (max-width:900px){ .phone{ width:74vw } .phoneport{ height:52vh } }

/* ---- bureaublad en telefoon naast elkaar ---- */
.pair{ display:flex; align-items:center; justify-content:center; width:100%;
  gap:clamp(18px,2.6vw,46px); padding:0 var(--pad); }
/* het venster groeit niet mee, zo staat het duo als geheel gecentreerd en
   plakt de telefoon niet tegen de rechterrand */
.pair .brw{ flex:0 1 auto; min-width:0; width:min(1000px, 60vw); max-width:1000px; }
.scan.dual .phone{ flex:0 0 auto; width:clamp(210px,17vw,290px); display:flex;
  flex-direction:column; align-items:center; gap:16px; margin-inline:auto; }
.scan.dual .phoneport{ height:min(58vh,560px); }
.scan.dual .cap{ display:flex; align-items:center; gap:12px; }
.scan.dual .bar{ width:90px; height:1px; background:#1F1F1F; position:relative; }
.scan.dual .bar i{ position:absolute; inset:0; background:var(--paper);
  transform-origin:left; transform:scaleX(0); }
@media (max-width:1000px){
  .pair{ flex-direction:column; align-items:center; gap:22px; }
  .pair .brw{ width:100%; max-width:none; margin-inline:auto; }
  .scan.dual .scanport{ height:32vh; }
  .scan.dual .phone{ width:min(52vw,240px); align-self:center; }
  .scan.dual .phoneport{ height:30vh; }
  /* onder elkaar horen ze niet tegelijk te lopen: eerst het bureaubladvenster,
     daarna de telefoon */
  .scan.dual .scanport img,  .scan.dual .scanbar i{
    animation-range: contain 0% contain 46%; }
  .scan.dual .phoneport img, .scan.dual .phone .bar i{
    animation-range: contain 54% contain 100%; }
}

/* ---- case : het scrollende venster ---- */
.scan{ position:relative; height:360vh; view-timeline-name:--scan; view-timeline-axis:block; }
.scan .stick{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; }
.scan .brw{ width:min(1020px, 78vw); }
.scanport{ height:min(62vh,620px); overflow:hidden; border:1px solid var(--line-2); background:#fff; }
.scanport img{ display:block; width:100%; height:auto; }
@supports (animation-timeline: view()){
  .scanport img{ animation-name:panY; animation-fill-mode:both;
    animation-timing-function:cubic-bezier(.38,0,.62,1);
    animation-timeline:--scan; animation-range:contain 0% contain 100%; }
  .scanbar i{ animation-name:grow; animation-fill-mode:both; animation-timing-function:linear;
    animation-timeline:--scan; animation-range:contain 0% contain 100%; } }
@supports not (animation-timeline: view()){
  .scan{ height:auto } .scan .stick{ position:static; height:auto; padding:60px 0 }
  .scanport{ height:auto } }
.scanbar{ position:relative; height:1px; background:#22222A; margin-top:22px; }
.scanbar i{ position:absolute; inset:0; background:var(--paper); transform-origin:left; transform:scaleX(0); }

@media (max-width:900px){
  .stepwrap{ padding-left:52px } .stepwrap .spine{ left:8px } .stp .k{ left:-52px; font-size:11px }
  .ix{ grid-template-columns:34px 1fr 20px; gap:12px; padding:18px 0 }
  .ix .ct{ display:none } #peek{ display:none }
  .scan .brw{ width:88vw } .scanport{ height:52vh }
}

/* ---------- 14 sep 2026: dienstbeeld naast de aanpak-tekst i.p.v. de volle band ----------
   Op desktop verdwijnt de uitgerekte band op dienstpagina's en staat hetzelfde beeld
   rechts naast "One team, one through-line.". Pagina's zonder dat blok (contact, studio)
   houden hun band. Onder 900px blijft alles zoals het was: band aan, zijbeeld uit. */
@media (min-width:901px){
  body:has(.svcart) .svchero{ display:block; }
  .svcart{ display:none; }
  .svcart{ position:relative; min-height:0; align-self:start; aspect-ratio:4 / 5;
    margin-top:6px; overflow:hidden; background:#000; }
  .svcart img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    display:block;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 14%, #000 100%),
                       linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right, transparent 0, #000 14%, #000 100%),
                       linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-composite:intersect;
    opacity:0; transform:scale(1.05);
    transition:opacity 1.2s var(--io), transform 1.6s var(--io); }
  .svcart.in img{ opacity:1; transform:scale(1); }
}


/* ---------- kopbalk krijgt bij scrollen een vaste achtergrond (desktop) ---------- */
@media (min-width:901px){
  .hdr{ transition:background .45s var(--io), border-color .45s var(--io); border-bottom:1px solid transparent; }
  .hdr.sc{ background:#0B0B0A; border-bottom-color:rgba(255,255,255,.10); }
  html:not([data-theme="dark"]) .hdr.sc{ background:#EBE8E2; border-bottom-color:#D4D0C7; }
}

/* ---------- Experience Center-knop in de header ---------- */
.hdr{ gap:26px; }
.hdr .nav{ margin-left:auto; margin-right:auto; }
.hdr .xcbtn{ position:relative; isolation:isolate; display:inline-flex; align-items:center;
  justify-content:center; height:34px; padding:0 19px; border-radius:999px; overflow:hidden;
  flex:0 0 auto; color:var(--paper); font-weight:400; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; line-height:1; white-space:nowrap;
  transition:color .55s var(--io); }
.hdr .xcbtn > span{ position:relative; z-index:1; }
.hdr .xcbtn::before{ content:''; position:absolute; top:50%; left:50%; z-index:-2;
  width:340%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, rgba(239,237,232,0) 0deg, rgba(239,237,232,0) 250deg,
    rgba(239,237,232,.95) 316deg, rgba(239,237,232,0) 360deg);
  animation:beamspin 3.4s linear infinite; }
.hdr .xcbtn::after{ content:''; position:absolute; inset:1px; width:auto; height:auto;
  z-index:-1; border-radius:999px; background:var(--ink); opacity:1; transform:none; }
.hdr .xcbtn:hover{ color:#fff; }
.hdr .xcbtn:hover::before{ animation-duration:1.5s; }
.hdr .xcbtn:focus-visible{ outline:2px solid var(--paper); outline-offset:4px; }
@media (prefers-reduced-motion: reduce){
  .hdr .xcbtn::before{ animation:none; background:rgba(239,237,232,.55); }
}
@media (max-width:900px){
  .hdr{ gap:16px; }
  .hdr .nav{ margin:0; }
  .hdr .xcbtn{ margin-left:auto; height:32px; padding:0 15px; font-size:9px; letter-spacing:.14em; }
}
@media (max-width:420px){
  .hdr .xcbtn{ height:30px; padding:0 12px; letter-spacing:.1em; }
}

/* ==========================================================================
   Platinum — lichte variant van de site. Aan te zetten met de knop in de
   header; de keuze blijft in localStorage staan (bxp-theme).
   ========================================================================== */
.thbtn{ position:relative; flex:0 0 auto; width:30px; height:30px; padding:0; margin:0;
  border:1px solid var(--line-2); border-radius:50%; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; -webkit-appearance:none; appearance:none;
  transition:border-color .45s var(--io), transform .45s var(--io); }
.thbtn:hover{ border-color:var(--paper); }
.thbtn:active{ transform:scale(.94); }
.thbtn i{ display:block; width:13px; height:13px; border-radius:50%;
  border:1px solid var(--paper); background:linear-gradient(90deg, var(--paper) 0 50%, transparent 50% 100%);
  transition:background .5s var(--io), border-color .5s var(--io); }
.thbtn:focus-visible{ outline:1px solid var(--paper); outline-offset:4px; }

html:not([data-theme="dark"]){
  --ink:#EBE8E2; --ink-2:#E3E0D9; --line:#D4D0C7; --line-2:#C2BDB2;
  --paper:#1A1917; --mid:#5E5C56; --dim:#7A776F;
}
html:not([data-theme="dark"]) body{
  background:
    radial-gradient(120% 80% at 50% 0%, #F4F2EE 0%, rgba(244,242,238,0) 60%),
    linear-gradient(180deg, #EEEBE5 0%, #E6E3DC 100%);
  background-attachment:fixed; color:var(--paper);
}
html:not([data-theme="dark"]) .grain{ mix-blend-mode:multiply; opacity:.055; }
html:not([data-theme="dark"]) .lede{ color:#3C3A36; }
html:not([data-theme="dark"]) .lab-b{ color:#494742; }
html:not([data-theme="dark"]) .txt{ color:#5E5C56; }

/* header */
html:not([data-theme="dark"]) .hdr,
html:not([data-theme="dark"]) .lp-hdr{
  background:linear-gradient(to bottom, rgba(238,235,229,.88), rgba(238,235,229,0)); }
html:not([data-theme="dark"]) .mark img{ filter:none; background:#000;
  box-sizing:content-box; padding:13px; margin:-13px; }
html:not([data-theme="dark"]) footer .mark img{ padding:12px; margin:-12px; }
@media (max-width:900px){
  html:not([data-theme="dark"]) .mark img{ padding:12px; margin:-12px; } }
html:not([data-theme="dark"]) .lang{ color:#6E6C66; }
html:not([data-theme="dark"]) .lang b{ color:#15140F; }
html:not([data-theme="dark"]) .nav a:hover,
html:not([data-theme="dark"]) .nav a.on,
html:not([data-theme="dark"]) .mail:hover,
html:not([data-theme="dark"]) .sidx a:hover,
html:not([data-theme="dark"]) .sidx a.on,
html:not([data-theme="dark"]) .fcol .fl:hover,
html:not([data-theme="dark"]) .filters button.on{ color:#0E0D0B; }
html:not([data-theme="dark"]) .burger i{ background:var(--paper); }

/* knoppen met lichtrand */
html:not([data-theme="dark"]) .btn .beam::before,
html:not([data-theme="dark"]) .hdr .xcbtn::before{
  background:conic-gradient(from 0deg, rgba(26,25,23,0) 0deg, rgba(26,25,23,0) 250deg,
    rgba(26,25,23,.80) 316deg, rgba(26,25,23,0) 360deg); }
html:not([data-theme="dark"]) .btn .edge{ border-color:var(--line-2); }
html:not([data-theme="dark"]) .btn:hover{ color:#000; }
html:not([data-theme="dark"]) .hdr .xcbtn:hover{ color:#EFEDE8; }
html:not([data-theme="dark"]) .thbtn i{
  background:linear-gradient(90deg, transparent 0 50%, var(--paper) 50% 100%); }

/* vlakken die hard zwart waren */
html:not([data-theme="dark"]) .swipe{ background:var(--ink-2); }
html:not([data-theme="dark"]) .menu{ background:var(--ink); }
html:not([data-theme="dark"]) .splitsec .paneel{ background:var(--ink-2); border-right-color:var(--line); }
html:not([data-theme="dark"]) .plate,
html:not([data-theme="dark"]) .noshot,
html:not([data-theme="dark"]) .galthumbs button{ background:var(--ink-2); }
html:not([data-theme="dark"]) .galfull{ background:rgba(20,19,17,.94); }

/* hero in platinum: het lichte beeld, donkere tekst */
html:not([data-theme="dark"]) .open{
  background:#ECEAE4 url('/assets/img/hero-light-1600.webp?v=5') 56% 50% / cover no-repeat; }
html:not([data-theme="dark"]) .open .heroimg{ opacity:0 !important; }
html:not([data-theme="dark"]) .open .veil{
  background:linear-gradient(to right, rgba(238,236,231,.98) 0%, rgba(238,236,231,.94) 30%,
    rgba(238,236,231,.72) 44%, rgba(238,236,231,.18) 66%, rgba(238,236,231,.10) 100%),
    linear-gradient(to top, rgba(236,234,228,.96) 0%, rgba(236,234,228,.30) 26%, rgba(236,234,228,0) 58%); }
html:not([data-theme="dark"]) .open .lab{ color:#5E5C56; text-shadow:none; }
html:not([data-theme="dark"]) .open .d1,
html:not([data-theme="dark"]) .open .d2{ color:#15140F; }
html:not([data-theme="dark"]) .open .lede{ color:#3C3A36; }
html:not([data-theme="dark"]) .open .rule{ background:#1A1917 !important; }
html:not([data-theme="dark"]) .open .cue,
html:not([data-theme="dark"]) .open .lab-b{ color:#5E5C56; }
@media (max-width:820px){
  html:not([data-theme="dark"]) .open{
    background:#EEECE7 url('/assets/img/hero-light-p.webp?v=3') 50% 0% / cover no-repeat; }
  html:not([data-theme="dark"]) .open .veil{
    background:linear-gradient(to top, rgba(238,236,231,1) 0%, rgba(238,236,231,.99) 30%,
      rgba(238,236,231,.86) 40%, rgba(238,236,231,.18) 54%, rgba(238,236,231,0) 66%); }
}
html:not([data-theme="dark"]) .svchero,
html:not([data-theme="dark"]) .svcart{ background:transparent; }


/* Experience Center in platinum */
html:not([data-theme="dark"]) .xc-stage{ background:var(--ink); }
html:not([data-theme="dark"]) .xc-bg::after{
  background:linear-gradient(to right, #EBE8E2 0, #EBE8E2 26%, rgba(235,232,226,.90) 40%,
    rgba(235,232,226,.52) 56%, rgba(235,232,226,.18) 74%, rgba(235,232,226,.44) 100%),
    linear-gradient(to bottom, rgba(235,232,226,.70) 0, rgba(235,232,226,0) 26%,
    rgba(235,232,226,0) 62%, rgba(235,232,226,.86) 100%); }
html:not([data-theme="dark"]) .xc-panel .xc-body p{ color:#3C3A36; }
html:not([data-theme="dark"]) .xc-row{ background:rgba(255,255,255,.45); }
html:not([data-theme="dark"]) .xc-bar{ background:var(--ink-2); }
html:not([data-theme="dark"]) .xc-veil{ background:#0C0C0B; }
html:not([data-theme="dark"]) .xc-type{ color:#F3F1EC; }
html:not([data-theme="dark"]) .xc-line{ background:#F3F1EC; }

/* Experience Center: geen achtergrondfoto op mobiel */
@media (max-width:700px){
  .xc-bg{display:none}
  .xc-stage{min-height:auto;padding:120px var(--pad) 88px;background:#000}
}