@charset "UTF-8";
/* =========================================================================
   MK Detailing, ontwerp "De cabine"
   Eigen HTML/CSS. Geen framework, geen CDN, geen externe fonts.
   Kleur afgeleid uit de hero-foto: koel wit hexagonlicht op donkerblauw lak.
   ========================================================================= */

/* ---------- 1. Lettertype (zelf meegeleverd, SIL OFL) -------------------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-var-latin.woff2') format('woff2-variations'),
      url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
  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;
}

/* ---------- 2. Registraties voor animeerbare custom properties ----------- */
@property --lx{syntax:'<length-percentage>';inherits:true;initial-value:50%}
@property --ly{syntax:'<length-percentage>';inherits:true;initial-value:40%}

/* ---------- 3. Ontwerptokens -------------------------------------------- */
:root{
  /* Vlakken. Gemeten contrast staat achter elke tekstkleur. */
  --ink:      #05060A;   /* pagina                                          */
  --ink-2:    #090B12;   /* afwisselende band                               */
  --navy:     #031B56;   /* het blauw van het lak, alleen als vlak          */
  --navy-2:   #08245F;
  --panel:    #0D1017;   /* kaartoppervlak (glas over --ink)                */
  --field:    #0A0C11;   /* formuliervelden                                 */
  --field-b:  #5E6C84;   /* veldrand, 3.68:1 op --field (WCAG 1.4.11)       */

  /* Tekst */
  --txt:      #F2F6FC;   /* 18.67:1 op --ink                                */
  --txt-2:    #B6C3D6;   /* 11.35:1 op --ink                                */
  --txt-3:    #93A2B8;   /*  7.81:1 op --ink                                */

  /* Accent: de kleur van het hexagonlicht in het lak */
  --ice:      #BFD8F5;   /* 13.85:1 op --ink                                */
  --ice-2:    #8FB4E4;   /*  9.47:1 op --ink                                */
  --on-ice:   #05060A;   /* 13.85:1 op --ice                                */
  --err:      #FF9A8B;   /*  9.88:1 op --ink                                */

  --line:     rgba(191,216,245,.12);
  --line-2:   rgba(191,216,245,.22);

  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,.05,.36,1);

  --pad:      clamp(20px,5vw,64px);
  --wrap:     1240px;
  --r-panel:  18px;
  --r-img:    14px;

  --hex:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34.641'%20height='60'%3E%3Cg%20fill='none'%20stroke='%23BFD8F5'%20stroke-width='1'%3E%3Cpath%20d='M0,-20L17.32,-10L17.32,10L0,20L-17.32,10L-17.32,-10Z'/%3E%3Cpath%20d='M17.32,10L34.64,20L34.64,40L17.32,50L0,40L0,20Z'/%3E%3Cpath%20d='M0,40L17.32,50L17.32,70L0,80L-17.32,70L-17.32,50Z'/%3E%3Cpath%20d='M34.64,-20L51.96,-10L51.96,10L34.64,20L17.32,10L17.32,-10Z'/%3E%3Cpath%20d='M34.64,40L51.96,50L51.96,70L34.64,80L17.32,70L17.32,50Z'/%3E%3C/g%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='180'%20height='180'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. Basis ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,dl,dd,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
/* <picture> mag de hoogte van de ouder niet blokkeren voor height:100% op de img */
.totem__img picture,.shot__img picture{display:block;height:100%}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}

html{scroll-behavior:smooth;scroll-padding-top:96px}

body{
  background:var(--ink);
  color:var(--txt-2);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:clamp(15.5px,.42vw + 14.4px,17.5px);
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body.is-locked{overflow:hidden}

h1,h2,h3,.disp,.mark__txt,.card__no,.eyebrow,.btn,.menu__in a{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}

h1,h2{
  color:var(--txt);
  font-weight:300;
  font-variation-settings:'wdth' 112;
  line-height:.95;
  letter-spacing:-.022em;
  text-wrap:balance;
}
h1{font-size:clamp(2.85rem,7.4vw,5.7rem);line-height:.92;letter-spacing:-.028em}
h2{font-size:clamp(2.05rem,4.5vw,3.5rem)}
h3{
  color:var(--txt);font-weight:500;font-variation-settings:'wdth' 106;
  font-size:clamp(1.2rem,1.5vw,1.42rem);line-height:1.2;letter-spacing:-.012em;
}

::selection{background:var(--ice);color:var(--on-ice)}

:focus-visible{
  outline:2px solid var(--ice);
  outline-offset:3px;
  border-radius:3px;
}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:fixed;top:12px;left:12px;z-index:200;
  padding:.7em 1.2em;border-radius:999px;
  background:var(--ice);color:var(--on-ice);font-weight:600;
  transform:translateY(-160%);transition:transform .3s var(--ease);
}
.skip:focus{transform:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- 5. Achtergrondlagen ----------------------------------------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
    contain:layout paint style}

.bg__lattice{
  position:absolute;inset:-10%;
  background-image:var(--hex);
  background-size:69.28px 120px;
  opacity:.055;
}
.bg__spot{
  position:absolute;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;
  background-image:var(--hex);
  background-size:69.28px 120px;
  opacity:.36;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,rgba(0,0,0,.6) 38%,transparent 68%);
  mask-image:radial-gradient(circle at 50% 50%,#000 0%,rgba(0,0,0,.6) 38%,transparent 68%);
  transform:translate3d(-2000px,-2000px,0);
  will-change:transform;
}
.bg__glow{position:absolute;border-radius:50%;filter:blur(110px);will-change:transform}
.bg__glow--a{
  width:min(70vw,760px);aspect-ratio:1;top:-16vh;right:-14vw;
  background:radial-gradient(circle,rgba(11,45,120,.62),transparent 68%);
}
.bg__glow--b{
  width:min(78vw,880px);aspect-ratio:1;top:118vh;left:-22vw;
  background:radial-gradient(circle,rgba(6,32,92,.55),transparent 70%);
}
.bg__grain{
  position:absolute;inset:0;background-image:var(--grain);
  opacity:.038;mix-blend-mode:overlay;
}

.progress{position:fixed;inset:0 0 auto;height:2px;z-index:120;pointer-events:none}
.progress span{
  display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,rgba(143,180,228,.2),var(--ice));
}

/* ---------- 6. Herbruikbaar --------------------------------------------- */
.eyebrow{
  display:flex;align-items:center;gap:.7em;
  color:var(--ice);font-size:.735rem;font-weight:600;
  font-variation-settings:'wdth' 104;
  letter-spacing:.2em;text-transform:uppercase;
}
.eyebrow i{
  width:9px;height:10px;flex:none;background:currentColor;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

.btn{
  --bg:var(--ice);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  padding:1.02em 2.05em;border:0;border-radius:999px;
  background:var(--bg);color:var(--on-ice);
  font-size:.95rem;font-weight:600;font-variation-settings:'wdth' 104;
  letter-spacing:.005em;text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 20px 55px -22px rgba(143,180,228,.75),inset 0 1px 0 rgba(255,255,255,.5);
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease),
             transform .5s var(--ease),color .45s var(--ease);
  will-change:transform;
}
.btn::after{
  content:'';width:0;height:0;
  border:4.5px solid transparent;border-left-color:currentColor;
  margin-left:-.15em;opacity:.75;
  transition:transform .45s var(--ease);
}
.btn--sm{padding:.72em 1.35em;font-size:.85rem}
.btn--wide{width:100%;padding-block:1.15em}
.btn--ghost{
  --bg:transparent;color:var(--txt);
  border:1px solid var(--line-2);
  box-shadow:none;
}
.btn--ghost::after{opacity:.5}

.hero__list,.facts,.reads{font-variant-numeric:tabular-nums}

.lead{color:var(--txt-2);font-size:clamp(1.02rem,1.15vw,1.16rem);line-height:1.6;max-width:56ch}

/* Reveal: gebruikt 'translate' zodat 'transform' vrij blijft voor tilt/parallax */
.r{opacity:0;translate:0 20px;
   transition:opacity .85s var(--ease),translate .85s var(--ease);
   transition-delay:calc(var(--d,0) * 75ms)}
.r.is-in{opacity:1;translate:0 0}

.ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.ln__i{display:block;translate:0 108%;
       transition:translate 1.05s var(--ease);
       transition-delay:calc(var(--d,0) * 95ms)}
.is-in .ln__i{translate:0 0}
.hero__h1.r{opacity:1;translate:0 0}

/* ---------- 7. Header ---------------------------------------------------- */
.hdr{position:fixed;inset:0 0 auto;z-index:100;
     transition:background-color .5s var(--ease),backdrop-filter .5s var(--ease),
                border-color .5s var(--ease);
     border-bottom:1px solid transparent}
.hdr.is-stuck{
  background:rgba(5,6,10,.72);
  border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
.hdr__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(12px,1.6vw,18px) var(--pad);
  display:flex;align-items:center;gap:clamp(14px,3vw,44px);
}

.mark{display:flex;align-items:center;gap:.68em;text-decoration:none;color:var(--txt);
      margin-right:auto}
.mark__hex{position:relative;display:grid;place-items:center;width:34px;height:38px;
           color:var(--ice-2);flex:none}
.mark__hex svg{position:absolute;inset:0;width:100%;height:100%}
.mark__hex b{position:relative;font-family:'Archivo',sans-serif;font-size:.66rem;
             font-weight:700;font-variation-settings:'wdth' 88;letter-spacing:.02em;
             color:var(--txt)}
.mark__hex--lg{width:46px;height:52px}
.mark__hex--lg b{font-size:.86rem}
.mark__txt{font-size:1.02rem;font-weight:400;font-variation-settings:'wdth' 108;
           letter-spacing:.005em}
.mark__txt b{font-weight:700}

.nav ul{display:flex;gap:clamp(16px,2vw,30px)}
.nav a{position:relative;text-decoration:none;color:var(--txt-2);font-size:.92rem;
       padding-block:.4em;transition:color .35s var(--ease)}
.nav a::after{content:'';position:absolute;left:0;bottom:.1em;height:1px;width:100%;
              background:var(--ice);transform:scaleX(0);transform-origin:100% 50%;
              transition:transform .5s var(--ease)}
.nav a:hover,.nav a:focus-visible{color:var(--txt)}
.nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}

.burger{display:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.burger__box{display:grid;gap:6px;place-content:center;height:100%}
.burger__box i{display:block;width:22px;height:1.5px;background:var(--txt);
               transition:transform .45s var(--ease),opacity .3s}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:99;background:rgba(5,6,10,.94);
      -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
      opacity:0;transition:opacity .45s var(--ease)}
.menu.is-open{opacity:1}
.menu__in{height:100%;display:flex;flex-direction:column;justify-content:center;
          gap:.1em;padding:0 var(--pad)}
.menu__in a{display:flex;align-items:baseline;gap:.7em;padding:.42em 0;
            text-decoration:none;color:var(--txt);
            font-size:clamp(2rem,9vw,3rem);font-weight:300;
            font-variation-settings:'wdth' 112;letter-spacing:-.02em;
            opacity:0;translate:0 24px;
            transition:opacity .6s var(--ease),translate .6s var(--ease)}
.menu.is-open .menu__in a{opacity:1;translate:0 0}
.menu.is-open .menu__in a:nth-child(1){transition-delay:.06s}
.menu.is-open .menu__in a:nth-child(2){transition-delay:.12s}
.menu.is-open .menu__in a:nth-child(3){transition-delay:.18s}
.menu.is-open .menu__in a:nth-child(4){transition-delay:.24s}
.menu__in a span{font-size:.7rem;font-weight:600;letter-spacing:.18em;color:var(--ice)}
.menu__foot{margin-top:2.4em;color:var(--txt-3);font-size:.92rem;line-height:1.7}
.menu__in .menu__foot a{
  display:inline;font-family:inherit;font-size:.94rem;font-weight:400;
  letter-spacing:0;color:var(--ice);opacity:1;translate:none;padding:0;
  border-bottom:1px solid rgba(191,216,245,.3);
}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{position:relative;z-index:1;overflow-x:clip;
      padding:clamp(118px,16vh,172px) 0 clamp(58px,8vh,96px)}
.hero__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:grid;gap:clamp(48px,7vw,72px);align-items:center;
}
.hero__copy{max-width:40rem}
.hero__h1{margin:.4em 0 .5em}
.hero__h1 .em{
  color:transparent;
  background:linear-gradient(102deg,var(--ice-2) 0%,#FFFFFF 34%,var(--ice) 72%,var(--ice-2) 100%);
  -webkit-background-clip:text;background-clip:text;
}
.hero__lead{color:var(--txt-2);font-size:clamp(1.02rem,1.2vw,1.18rem);max-width:44ch}
.hero__act{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1em}
.hero__list{display:flex;flex-wrap:wrap;gap:.5em .5em;margin-top:2.6em}
.hero__list li{
  padding:.44em 1em;border:1px solid var(--line);border-radius:999px;
  color:var(--txt-3);font-size:.795rem;letter-spacing:.045em;
  background:rgba(191,216,245,.025);
}

/* --- 3D-podium --- */
.hero__visual{display:flex;justify-content:center;padding-top:44px}
.stage{position:relative;width:min(100%,430px);perspective:1250px;perspective-origin:50% 42%}
.stage__in{position:relative;transform-style:preserve-3d;
           transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

.rig{
  position:absolute;left:50%;top:-8%;width:110%;
  translate:-50% 0;transform:translateZ(-115px);
  color:var(--ice);pointer-events:none;
}
.rig svg{width:100%;height:auto;overflow:visible;
         filter:drop-shadow(0 0 14px rgba(143,180,228,.55))}
.rig .hx{opacity:.16;animation:rigLife 6.5s var(--ease-io) infinite;
         animation-delay:calc(var(--h) * -.42s)}
@keyframes rigLife{
  0%,100%{opacity:.14}
  42%{opacity:.62}
  56%{opacity:.3}
}

.totem{position:relative;transform-style:preserve-3d;margin:0}
.totem__img{
  position:relative;overflow:hidden;border-radius:var(--r-panel);
  background:#0A0D14 url("data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAAAQBACdASoOABYAPsFOoUqnpCMhsAgA8BgJQAAJ1vDTu883hsoGaW1Q4AD+rKe1Bbk9GB/Af8UW/HRuSerwcKfoxGV3Q/64nTDKEYH7zMjXbDTofQSDj1bC+KTG41/noI/3D+ylLz4WOauoh8aC1lZDWTIKYQJ6/ff/lkdrGCMl94n+Vbnc2mTukaFsrA/IAAA=") center/cover;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95),
             0 0 0 1px rgba(191,216,245,.1),
             inset 0 1px 0 rgba(191,216,245,.14);
}
.totem__img{height:min(66svh,560px)}
.totem__img img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;
                filter:saturate(.82) contrast(1.05)}
.totem__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 56% at 50% 4%,rgba(191,216,245,.16),transparent 56%),
    linear-gradient(184deg,rgba(3,27,86,.42) 0%,rgba(3,27,86,.1) 30%,
                    rgba(5,6,10,.18) 62%,rgba(5,6,10,.62) 100%);
}
.totem__sheen{
  position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(214,232,255,.16) 48%,
             rgba(255,255,255,.06) 52%,transparent 62%);
  animation:sheen 9s var(--ease-io) infinite;
}
@keyframes sheen{
  0%,68%{transform:translateX(-58%)}
  100%{transform:translateX(58%)}
}
.totem__cap{
  position:absolute;right:14px;bottom:14px;
  transform:translateZ(46px);
  padding:.5em 1.05em;border-radius:999px;
  background:rgba(5,6,10,.66);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--txt-2);font-size:.735rem;letter-spacing:.06em;white-space:nowrap;
}

.cnr{position:absolute;width:20px;height:20px;transform:translateZ(34px);
     border:1px solid var(--ice-2);opacity:.5}
.cnr--tl{top:-11px;left:-11px;border-right:0;border-bottom:0}
.cnr--tr{top:-11px;right:-11px;border-left:0;border-bottom:0}
.cnr--bl{bottom:-11px;left:-11px;border-right:0;border-top:0}
.cnr--br{bottom:-11px;right:-11px;border-left:0;border-top:0}

.chip{
  position:absolute;display:flex;align-items:center;gap:.5em;
  padding:.55em 1em;border-radius:999px;
  background:rgba(13,16,23,.78);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  color:var(--txt-2);font-size:.72rem;letter-spacing:.075em;white-space:nowrap;
  box-shadow:0 24px 50px -26px rgba(0,0,0,.9);
}
.chip i{width:7px;height:8px;background:var(--ice);
        clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.chip--a{left:6px;top:22%;transform:translateZ(118px);animation:drift 7s ease-in-out infinite}
.chip--b{right:6px;bottom:23%;transform:translateZ(84px);animation:drift 9s ease-in-out -3s infinite}
@keyframes drift{0%,100%{margin-top:0}50%{margin-top:-9px}}

.stage__floor{
  position:absolute;left:50%;bottom:-10%;width:108%;height:130px;translate:-50% 0;
  background:radial-gradient(closest-side,rgba(97,146,214,.34),transparent 76%);
  filter:blur(26px);pointer-events:none;
}

.hero__down{
  display:none;position:absolute;left:50%;bottom:26px;translate:-50% 0;
  width:26px;height:44px;border:1px solid var(--line-2);border-radius:999px;
}
.hero__down span{display:block;width:3px;height:7px;border-radius:2px;background:var(--ice);
                 margin:8px auto 0;animation:wheel 2.1s var(--ease-io) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}
                 35%{opacity:1}
                 100%{opacity:0;transform:translateY(17px)}}

/* ---------- 9. Secties --------------------------------------------------- */
.sec{position:relative;z-index:1;padding:clamp(84px,12vh,150px) 0}
.shead{max-width:44rem;margin-bottom:clamp(44px,6vw,72px)}
.shead--wide{max-width:52rem}
.shead h2{margin:.3em 0 .5em}
.shead__sub{color:var(--txt-2);max-width:50ch}

@media (min-width:960px){
  .shead--split{
    max-width:none;display:grid;align-items:end;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:clamp(40px,6vw,86px);
  }
  .shead--split .eyebrow{grid-column:1;grid-row:1;margin-bottom:.9em}
  .shead--split h2{grid-column:1;grid-row:2;margin:0}
  .shead--split .shead__sub{grid-column:2;grid-row:2;max-width:46ch;padding-bottom:.35em}
}

/* --- Diensten --- */
.sec--diensten{overflow:clip}
/* Licht van boven, zodat het glas van de kaarten iets te vangen heeft. */
.sec--diensten::before{
  content:'';position:absolute;left:50%;z-index:-1;pointer-events:none;
  bottom:clamp(96px,13vh,190px);width:min(1180px,94vw);height:clamp(320px,44vh,480px);
  translate:-50% 0;
  background:radial-gradient(64% 86% at 50% 6%,rgba(27,80,180,.72),rgba(9,32,86,.26) 54%,transparent 78%);
  filter:blur(42px);
}
.cards{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:1fr}
.card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(26px,3vw,36px) clamp(24px,2.6vw,32px) clamp(24px,2.4vw,30px);
  border-radius:var(--r-panel);
  background:linear-gradient(168deg,rgba(191,216,245,.095),rgba(191,216,245,.028) 46%,
             rgba(191,216,245,.045));
  border:1px solid var(--line-2);
  box-shadow:0 34px 70px -44px rgba(0,0,0,.9),inset 0 1px 0 rgba(191,216,245,.14);
  transform:perspective(760px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transform-style:preserve-3d;
  transition:border-color .5s var(--ease),transform .55s var(--ease),
             box-shadow .55s var(--ease),opacity .85s var(--ease),translate .85s var(--ease);
}
.card::before{
  content:'';position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(214,233,255,.65) 28%,
             rgba(214,233,255,.65) 72%,transparent);
  opacity:.55;transition:opacity .5s var(--ease);
}
.card:hover::before{opacity:1}
.card::after{
  content:'';margin-top:auto;height:1px;width:100%;
  background:linear-gradient(90deg,var(--ice),rgba(143,180,228,0) 76%);
  transform:scaleX(.55);transform-origin:0 50%;opacity:.42;
  transition:transform .8s var(--ease),opacity .8s var(--ease);
}
.card:hover::after{transform:scaleX(1);opacity:1}
.card:hover{border-color:rgba(191,216,245,.36);
            box-shadow:0 44px 90px -46px rgba(0,0,0,.95),
                       inset 0 1px 0 rgba(191,216,245,.24)}
.card__glow{
  position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
             rgba(191,216,245,.13),transparent 62%);
  transition:opacity .5s var(--ease);
}
.card:hover .card__glow{opacity:1}
.card__no{
  position:absolute;right:clamp(16px,2vw,26px);top:clamp(10px,1.4vw,16px);
  font-size:clamp(3.6rem,6vw,5rem);font-weight:200;font-variation-settings:'wdth' 125;
  line-height:1;color:rgba(191,216,245,.13);letter-spacing:-.03em;
  transition:color .6s var(--ease);
}
.card:hover .card__no{color:rgba(191,216,245,.22)}
.card__ico{
  display:grid;place-items:center;width:62px;height:70px;margin-bottom:1.45em;
  color:var(--ice);
  background:linear-gradient(158deg,rgba(191,216,245,.46),rgba(143,180,228,.1) 66%);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  filter:drop-shadow(0 8px 22px rgba(143,180,228,.3));
  transition:transform .6s var(--ease),filter .6s var(--ease);
}
.card__ico svg{width:29px;height:29px}
.card:hover .card__ico{transform:translateZ(30px) scale(1.05);
                       filter:drop-shadow(0 12px 30px rgba(143,180,228,.5))}
.card h3{margin-bottom:.55em}
.card p{color:var(--txt-2);font-size:.955rem;max-width:38ch;margin-bottom:1.7em}

/* --- De cabine --- */
.sec--cabine{overflow:clip}
.sec--cabine::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(112% 74% at 50% 0%,var(--navy-2) 0%,rgba(3,27,86,.55) 34%,transparent 74%);
}
.sec--cabine::after{
  content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--line-2) 80%,transparent);
}
.cab{display:grid;gap:clamp(44px,6vw,70px);align-items:center}
.cab__copy h2{margin:.32em 0 .55em}
.cab__copy p + p{margin-top:1.1em;color:var(--txt-3);max-width:52ch}

.reads{margin-top:2.4em;display:grid;gap:.1em}
.reads div{display:grid;grid-template-columns:minmax(0,10.5rem) 1fr;gap:1em;
           padding:.85em 0;border-top:1px solid var(--line)}
.reads dt{color:var(--ice);font-size:.86rem;letter-spacing:.05em}
.reads dd{margin:0;color:var(--txt-2);font-size:.92rem}

.lamp{margin:0;--lx:50%;--ly:40%}
.lamp:not(.is-live):not(.is-off){animation:sweep 17s ease-in-out infinite}
@keyframes sweep{
  0%,100%{--lx:26%;--ly:24%}
  25%{--lx:74%;--ly:33%}
  50%{--lx:64%;--ly:76%}
  75%{--lx:30%;--ly:66%}
}
.lamp__box{
  position:relative;overflow:hidden;border-radius:var(--r-panel);
  background:#04060C;cursor:crosshair;
  box-shadow:0 50px 110px -50px rgba(0,0,0,.95),0 0 0 1px rgba(191,216,245,.1);
}
.lamp__box img{width:100%;aspect-ratio:51/56;object-fit:cover}
.lamp__base{filter:brightness(.4) saturate(.5) contrast(1.06)}
.lamp__lit{
  position:absolute;inset:0;
  filter:brightness(1.1) contrast(1.14) saturate(1.06);
  -webkit-mask-image:radial-gradient(ellipse 33% 30% at var(--lx) var(--ly),
      #000 0%,#000 40%,rgba(0,0,0,.35) 64%,transparent 82%);
  mask-image:radial-gradient(ellipse 33% 30% at var(--lx) var(--ly),
      #000 0%,#000 40%,rgba(0,0,0,.35) 64%,transparent 82%);
}
.lamp__ring{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 27% 25% at var(--lx) var(--ly),
             rgba(191,216,245,.2),transparent 70%);
}
.lamp__cap{margin-top:1.1em;display:flex;justify-content:center}
.lamp__hint{
  display:inline-flex;align-items:center;gap:.6em;
  color:var(--txt-3);font-size:.775rem;letter-spacing:.09em;text-transform:uppercase;
}
.lamp__hint::before{
  content:'';width:9px;height:10px;background:var(--ice);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* --- Werk --- */
/* Kolommen in plaats van een raster: verschillende beeldverhoudingen sluiten
   dan strak op elkaar aan, zonder gaten tussen de rijen. */
.grid{columns:1;column-gap:clamp(18px,2.6vw,34px)}
.shot{margin:0 0 clamp(22px,3vw,38px);break-inside:avoid}
.shot__img{
  position:relative;overflow:hidden;border-radius:var(--r-img);
  background:#0A0D14;
  box-shadow:0 40px 80px -46px rgba(0,0,0,.9),0 0 0 1px rgba(191,216,245,.08);
}
/* De foto schuift binnen zijn eigen lijst, de lijst zelf blijft staan.
   Daarom is het beeld 118% hoog: dan blijft er bij parallax nooit een rand over. */
.shot__img picture{height:110%;margin-top:-5%;will-change:transform}
.shot__img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(178deg,rgba(3,27,86,.2),transparent 42%,rgba(5,6,10,.42));
}
.shot__img img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.72) contrast(1.06) brightness(.92);
  transition:transform 1.1s var(--ease),filter .8s var(--ease);
}
.shot:hover .shot__img img{transform:scale(1.035);filter:saturate(.85) contrast(1.06) brightness(1)}
.shot--tall .shot__img{aspect-ratio:4/5}
.shot--wide .shot__img{aspect-ratio:5/4}
.shot:nth-child(2) .shot__img{aspect-ratio:3/2}   /* liggende bron, minder zijkant weg */
.shot:nth-child(1) img{object-position:52% 42%}
.shot:nth-child(2) img{object-position:50% 46%}
.shot:nth-child(3) img{object-position:52% 44%}
.shot:nth-child(4) img{object-position:44% 26%}
/* De houten werkplaats is warm van kleur; koeler graderen zodat hij
   niet uit het palet valt. Geen inhoudelijke ingreep, alleen kleurtoon. */
.shot:nth-child(4) .shot__img img{filter:saturate(.5) contrast(1.1) brightness(.86)}
.shot:nth-child(4) .shot__img::after{
  background:linear-gradient(178deg,rgba(3,27,86,.4),rgba(3,27,86,.14) 44%,rgba(5,6,10,.5));
}
.shot figcaption{
  position:relative;z-index:1;
  margin-top:1.05em;color:var(--txt-3);font-size:.88rem;line-height:1.55;max-width:40ch;
}
.shot figcaption b{
  display:block;margin-bottom:.25em;color:var(--ice);
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.73rem;
  letter-spacing:.18em;text-transform:uppercase;
}

/* --- Contact --- */
.sec--contact{overflow:clip;padding-bottom:clamp(96px,14vh,170px)}
.sec--contact::before{
  content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);
}
.orb{position:absolute;border-radius:50%;filter:blur(96px);pointer-events:none;z-index:-1}
.orb--1{width:min(72vw,620px);aspect-ratio:1;top:-8%;left:-12%;
        background:radial-gradient(circle,rgba(9,40,110,.72),transparent 68%);
        animation:orb 21s ease-in-out infinite}
.orb--2{width:min(66vw,540px);aspect-ratio:1;bottom:-14%;right:-10%;
        background:radial-gradient(circle,rgba(72,116,186,.34),transparent 70%);
        animation:orb 26s ease-in-out -9s infinite}
@keyframes orb{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  34%{transform:translate3d(52px,-38px,0) scale(1.11)}
  67%{transform:translate3d(-40px,44px,0) scale(.94)}
}

.cta{display:grid;gap:clamp(44px,6vw,72px);align-items:start}
.cta__copy h2{margin:.32em 0 .55em}

.facts{margin-top:2.6em;display:grid;gap:.1em}
.facts li{display:grid;grid-template-columns:minmax(0,8.5rem) 1fr;gap:1em;
          padding:.95em 0;border-top:1px solid var(--line)}
.facts span{color:var(--txt-3);font-size:.775rem;letter-spacing:.13em;text-transform:uppercase}
.facts address{font-style:normal;color:var(--txt-2)}
.facts a{color:var(--ice);text-decoration:none;justify-self:start;
         border-bottom:1px solid rgba(191,216,245,.32);
         transition:border-color .35s var(--ease)}
.facts a:hover{border-bottom-color:var(--ice)}

.formwrap{
  position:relative;padding:clamp(24px,3vw,38px);border-radius:22px;
  background:linear-gradient(168deg,rgba(191,216,245,.075),rgba(191,216,245,.02));
  border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 60px 120px -56px rgba(0,0,0,.95),inset 0 1px 0 rgba(191,216,245,.16);
}
.form{display:grid;gap:1.15rem}
.field{position:relative}
.field input,.field textarea{
  width:100%;padding:1.5em 1.1em .7em;
  background:var(--field);color:var(--txt);
  border:1px solid var(--field-b);border-radius:12px;
  transition:border-color .35s var(--ease),background-color .35s var(--ease),
             box-shadow .35s var(--ease);
  resize:vertical;
}
.field textarea{min-height:7.5em;line-height:1.55}
.field label{
  position:absolute;left:1.15em;top:1.15em;
  color:var(--txt-3);font-size:.95rem;pointer-events:none;
  transform-origin:0 0;
  transition:transform .3s var(--ease),color .3s var(--ease);
}
.field input:focus,.field textarea:focus{
  outline:0;border-color:var(--ice);
  box-shadow:0 0 0 3px rgba(191,216,245,.18);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-.72em) scale(.76);color:var(--ice);
}
.field.has-err input,.field.has-err textarea{border-color:var(--err)}
.err{margin-top:.45em;color:var(--err);font-size:.82rem}
.form__note{color:var(--txt-3);font-size:.8rem;line-height:1.5;margin-top:.2em}
.form__state{
  margin-top:.2em;padding:.9em 1.1em;border-radius:12px;font-size:.88rem;
  background:rgba(191,216,245,.08);border:1px solid var(--line-2);color:var(--txt-2);
}

/* ---------- 10. Footer --------------------------------------------------- */
.ftr{position:relative;z-index:1;border-top:1px solid var(--line);
     padding:clamp(48px,7vh,80px) 0 clamp(26px,4vh,40px)}
.ftr__in{display:grid;gap:clamp(30px,4vw,48px)}
.ftr__brand{display:grid;gap:1em;justify-items:start}
.ftr__brand p{color:var(--txt-3);font-size:.92rem;line-height:1.6}
.ftr__nav{display:flex;flex-wrap:wrap;gap:.4em 1.6em;align-content:start}
.ftr__nav a{color:var(--txt-2);text-decoration:none;font-size:.94rem;
            transition:color .3s var(--ease)}
.ftr__nav a:hover{color:var(--ice)}
.ftr__cta{display:grid;gap:.5em;align-content:start;font-size:.94rem}
.ftr__cta address{font-style:normal;color:var(--txt-3);line-height:1.6;margin-bottom:.4em}
.ftr__cta a{color:var(--ice);text-decoration:none;
            border-bottom:1px solid rgba(191,216,245,.3);justify-self:start}
.ftr__cta a:hover{border-bottom-color:var(--ice)}
.ftr__fine{margin-top:clamp(34px,5vw,56px);padding-top:1.4em;border-top:1px solid var(--line);
           display:grid;gap:.6em;color:var(--txt-3);font-size:.755rem;line-height:1.6}
.ftr__fine p:last-child{max-width:64ch;opacity:.82}

/* ---------- 11. Breekpunten --------------------------------------------- */
@media (max-width:860px){
  .nav,.hdr__cta{display:none}
  .burger{display:block}
}
@media (max-width:560px){
  .hero__act{flex-direction:column;align-items:stretch}
  .hero__act .btn{width:100%}
}
@media (min-width:620px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid{columns:2}
  .shot:nth-child(2){margin-top:clamp(20px,4vw,54px)}
  .ftr__in{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:960px){
  .hero{padding-top:clamp(126px,15vh,178px);min-height:100svh;display:flex;align-items:center}
  .hero__in{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
            gap:clamp(40px,5vw,80px)}
  .hero__visual{justify-content:flex-end;padding-top:0}
  .hero__down{display:block}
  .totem__img{height:min(70svh,720px)}
  .rig{width:118%;top:-19%}
  .stage__floor{width:120%}
  .chip--a{left:-11%}
  .chip--b{right:-9%}
  .cab{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}
  .cab__copy{order:2}
  .cta{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
  .cards{grid-template-columns:repeat(4,1fr)}
  .card p{font-size:.92rem}
}
@media (min-width:1180px){
  .stage{width:min(100%,468px)}
}

/* ---------- 12. Bewegingsvoorkeur ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .r,.hero__h1.r{opacity:1 !important;translate:none !important}
  .ln__i{translate:none !important}
  .menu__in a{opacity:1;translate:none}
  .bg__spot{display:none}
  .totem__sheen,.hero__down{display:none}
  .rig .hx{opacity:.42}
  .stage__in{transform:none !important}
  .card{transform:none !important}
  .shot,.shot__img{transform:none !important}
  .lamp{--lx:50%;--ly:42%}
  .lamp__lit{-webkit-mask-image:none;mask-image:none;
             filter:brightness(1) contrast(1.05) saturate(1)}
  .lamp__base{filter:none}
  .lamp__ring{display:none}
  .lamp__box{cursor:default}
  .lamp__hint{display:none}
}

/* Geen hover-afhankelijke effecten op aanraakschermen */
@media (hover:none){
  .card:hover,.shot:hover .shot__img img{transform:none}
  .card:hover .card__glow{opacity:0}
  .lamp__box{cursor:default}
}