/* Digivisor: gedeelde stijl voor alle pagina's.
   Kleuren, letter, header, knoppen, beelden en voettekst. */

@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-400.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-700.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-800.woff2) format('woff2')}

:root{
  color-scheme:dark;
  --nacht:#0E1A33; --nacht-hi:#132142; --papier:#F2EEE6; --wit:#FFFFFF; --zwart:#111214;
  --verm:#E5532D; --mist:#9AA3B8; --mist-2:#6F7A94; --hair:#24304B;
  --ink:#0E1A33; --ink-muted:#4A5470; --ink-body:#3A4460; --papier-hair:#D8D0BF; --wit-hair:#E1E3E8;
  --zacht:#C4CAD8;
  --f:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --fg:#F2EEE6; --on:#0E1A33; --line:rgba(242,238,230,.35);
  --gut:clamp(16px,4vw,56px);
  --hh:72px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--papier);font-family:var(--f);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--verm);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-60px;z-index:200;background:var(--papier);color:var(--ink);padding:10px 16px;font-weight:700;text-decoration:none;border-radius:999px}
.skip:focus{top:12px}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
.a{color:var(--verm)}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}

/* woordmerk: drie i-punten op een lijn, van punt tot punt */
.wm{font-weight:700;letter-spacing:-.045em;line-height:1;white-space:nowrap;display:inline-block;position:relative}
.i{position:relative;display:inline-block}
.i::after{content:"";position:absolute;left:calc(50% + .022em);top:.05em;width:.19em;height:.19em;margin-left:-.095em;border-radius:50%;background:var(--dc,var(--verm));transition:transform .5s var(--ease),opacity .3s}
.seg{position:relative;display:inline-block}
.seg::before{content:"";position:absolute;left:.1em;right:.1em;top:.134em;height:.022em;background:var(--dc,var(--verm));transform-origin:left center;transform:scaleX(var(--rail,1));transition:transform 1.4s var(--ease)}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.hdr.solid,.hdr.always{background:rgba(14,26,51,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--hair)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--hh);gap:24px}
.brand{text-decoration:none;font-size:28px;color:var(--papier)}
.nav{display:flex;align-items:center;gap:34px;font-size:15px;font-weight:500}
.nav a.txt{text-decoration:none;position:relative;padding-block:6px}
.nav a.txt::after{content:"";position:absolute;left:50%;bottom:-2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--verm);transform:scale(0);transition:transform .35s var(--ease)}
.nav a.txt:hover::after,.nav a.txt[aria-current]::after{transform:scale(1)}
.menu{display:none;background:none;border:0;color:var(--papier);font:700 15px var(--f);height:44px;padding:0 4px;cursor:pointer;align-items:center;gap:10px}
.menu .mdots{display:inline-flex;gap:4px}
.menu .mdots i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block}
.menu .mdots i:last-child{background:var(--verm)}

/* knoppen: primair (vermiljoen), secundair (.alt) en tekstlink (.tl) */
.btn{--ox:calc(100% - 29px);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;height:54px;padding:0 58px 0 28px;border:0;border-radius:999px;font:700 16px/1 var(--f);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;background:var(--verm);color:var(--ink);-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease)}
.btn:active{transform:scale(.965)}
.btn:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.btn .fill{position:absolute;inset:0;z-index:1;border-radius:inherit;background:var(--fg);clip-path:circle(4px at var(--ox) 50%);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.btn .t{position:relative;z-index:2;transition:color .3s .12s}
.btn .d{position:absolute;z-index:2;right:25px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--ink);transition:background .3s .15s,transform .5s cubic-bezier(.3,1.6,.4,1)}
.btn:hover .fill,.btn:focus-visible .fill{clip-path:circle(150% at var(--ox) 50%)}
.btn:hover .t,.btn:focus-visible .t{color:var(--on)}
.btn:hover .d,.btn:focus-visible .d{background:var(--verm);transform:scale(1.3)}
.btn.alt{background:var(--fg);color:var(--on)}
.btn.alt .fill{background:var(--verm)}
.btn.alt .d{background:var(--verm)}
.btn.alt:hover .t,.btn.alt:focus-visible .t{color:var(--ink)}
.btn.alt:hover .d,.btn.alt:focus-visible .d{background:var(--ink)}
.btn.sm{height:44px;padding:0 48px 0 22px;font-size:15px;--ox:calc(100% - 25px)}
.btn.sm .d{right:21px}
.btn[disabled]{cursor:wait;opacity:.7}
.tl{position:relative;display:inline-flex;align-items:center;height:54px;padding-bottom:6px;font-weight:700;font-size:17px;letter-spacing:-.015em;text-decoration:none;color:inherit;white-space:nowrap}
.tl::before{content:"";position:absolute;left:0;right:0;bottom:14px;height:1.5px;background:var(--line)}
.tl .ln{position:absolute;left:0;right:0;bottom:14px;height:1.5px;background:var(--verm);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.tl .d{position:absolute;right:-3px;bottom:11.5px;width:7px;height:7px;border-radius:50%;background:var(--verm);transform:scale(0);transition:transform .25s var(--ease)}
.tl:hover .ln,.tl:focus-visible .ln{transform:scaleX(1)}
.tl:hover .d,.tl:focus-visible .d{transform:scale(1);transition:transform .45s cubic-bezier(.3,1.6,.4,1) .42s}
.tl:focus-visible{outline:2px solid var(--fg);outline-offset:4px}

/* secties en titels */
.sec{padding-block:clamp(96px,12vw,172px);position:relative}
.h1p{font-size:clamp(42px,min(7.4vw,12vh),112px);font-weight:800;letter-spacing:-.055em;line-height:.92}
.h2{font-size:clamp(42px,6.4vw,96px);font-weight:800;letter-spacing:-.05em;line-height:.94}
.eb{font-size:14px;font-weight:700;color:var(--mist);margin-bottom:22px;display:block}
.body-l{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--zacht);max-width:58ch}
.wit{background:var(--wit);color:var(--ink);--fg:var(--ink);--on:var(--wit);--line:rgba(14,26,51,.25)}
.wit .eb{color:var(--ink-muted)}
.wit .body-l{color:var(--ink-body)}

/* paginakop voor binnenpagina's */
.pkop{padding-block:clamp(40px,min(9vw,11vh),128px) clamp(48px,6vw,88px)}
.pkop .lead{font-size:clamp(19px,1.7vw,23px);font-weight:500;line-height:1.45;color:var(--zacht);max-width:44ch;margin-top:clamp(22px,2.6vw,34px)}

/* kruimelpad */
.crumbs ol{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:14px;font-weight:500;color:var(--mist)}
.crumbs li{display:flex;align-items:center;gap:12px;min-width:0}
.crumbs li + li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--verm);flex-shrink:0}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--papier)}
.crumbs [aria-current]{color:var(--papier);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:48ch}

/* beeld: duotoon in Nacht en papier, onthuld via een puntenraster */
@property --dr{syntax:'<length>';inherits:false;initial-value:10px}
.ph{position:relative;margin:0;background:var(--nacht);overflow:hidden;isolation:isolate;max-width:100%}
.ph img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(1.03);mix-blend-mode:screen;transition:transform 1.2s var(--ease)}
.ph::after{content:"";position:absolute;inset:0;background:var(--papier);mix-blend-mode:multiply;pointer-events:none}
.ph .pdot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--verm);z-index:2}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .dotin{-webkit-mask-image:radial-gradient(circle,#000 var(--dr),transparent calc(var(--dr) + .5px));mask-image:radial-gradient(circle,#000 var(--dr),transparent calc(var(--dr) + .5px));-webkit-mask-size:14px 14px;mask-size:14px 14px;animation:dotin linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
    .dotin.load{animation:dotin 1.8s cubic-bezier(.6,0,.2,1) .15s both;animation-timeline:auto}
  }
}
@keyframes dotin{from{--dr:0px}to{--dr:10px}}

/* artikelkaarten (homepage en overzicht) */
.pcs{margin-top:clamp(44px,6vw,72px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px}
.pc{display:flex;flex-direction:column;gap:14px;text-decoration:none;min-width:0}
.pc .ph{aspect-ratio:4/3}
.pc:hover .ph img{transform:scale(1.05)}
.pc .cat{font-size:14px;font-weight:700;color:var(--mist-2)}
.pc .tt{font-size:clamp(19px,1.6vw,22px);font-weight:700;letter-spacing:-.025em;line-height:1.25}
.pc .tt span{background:linear-gradient(var(--verm),var(--verm)) 0 100%/0 1.5px no-repeat;transition:background-size .55s cubic-bezier(.7,0,.2,1)}
.pc:hover .tt span,.pc:focus-visible .tt span{background-size:100% 1.5px}
.pc .ex{font-size:15px;line-height:1.5;color:var(--mist)}

/* formuliervelden */
.fld{display:grid;gap:8px}
.fld label{font-size:14px;font-weight:700;color:var(--mist)}
.fld input,.fld textarea,.fld select{background:transparent;border:0;border-bottom:1.5px solid var(--hair);color:var(--papier);font:500 19px var(--f);padding:10px 0;border-radius:0;transition:border-color .3s;width:100%}
.fld input:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--verm)}
.fld textarea{min-height:110px;resize:vertical}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--mist);line-height:1.5}
.chk input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:18px;height:18px;margin:2px 0 0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mist-2);cursor:pointer;transition:background .25s,box-shadow .25s}
.chk input:checked{background:var(--verm);box-shadow:inset 0 0 0 1.5px var(--verm)}
.chk a{color:var(--papier)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* voettekst */
.ftr{background:var(--zwart);color:var(--papier);overflow:hidden;padding-top:clamp(72px,9vw,120px)}
.ftr .big{font-size:clamp(88px,21.5vw,318px);color:var(--papier);margin-left:-.04em;display:block}
.ftr .base{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.03em;margin-top:clamp(20px,2.4vw,34px)}
.ftr .bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;border-top:1px solid #24262B;margin-top:clamp(56px,7vw,96px);padding-block:26px 34px;font-size:14px;color:#8A8C92}
.ftr .bot nav{display:flex;flex-wrap:wrap;gap:24px}
.ftr .bot a{text-decoration:none}
.ftr .bot a:hover{color:var(--papier)}
.ftr.armed .seg::before{--rail:0}
.ftr.armed .i::after{transform:scale(0)}
.ftr .i:nth-of-type(2)::after{transition-delay:.12s}
.ftr .i:nth-of-type(3)::after{transition-delay:.24s}

/* vloeiend scrollen, korrel en volgpuntje */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body::before{content:"";position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.06;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' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.cur{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--verm);pointer-events:none;z-index:100;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .3s;opacity:0;display:flex;align-items:center;justify-content:center;font:700 12px var(--f);color:var(--ink)}
.cur span{opacity:0;transition:opacity .2s}
.cur.on{opacity:1}
.cur.big{width:44px;height:44px;margin:-22px 0 0 -22px;opacity:.28}
.cur.lab{width:76px;height:76px;margin:-38px 0 0 -38px;opacity:1}
.cur.lab span{opacity:1}

/* titels schuiven van onder een lijn op, blokken schuiven licht mee */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .sec .h2{animation:clipup linear both;animation-timeline:view();animation-range:entry 5% entry 75%}
    @keyframes clipup{from{clip-path:inset(0 -10% 100% -10%);transform:translateY(46px)}to{clip-path:inset(-15% -10% -25% -10%);transform:none}}
    .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes rv{from{transform:translateY(40px)}to{transform:none}}
  }
}

/* mobiel menu: schuift van rechts binnen, zoals voorheen */
.drawer-ov{position:fixed;inset:0;z-index:140;background:rgba(6,11,24,.6);opacity:0;transition:opacity .4s var(--ease)}
.drawer-ov.open{opacity:1}
.drawer{position:fixed;top:0;right:0;z-index:150;height:100vh;height:100dvh;width:min(86vw,360px);background:var(--nacht);border-left:1px solid var(--hair);display:flex;flex-direction:column;padding:84px 28px 28px;transform:translateX(100%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s;overflow-y:auto}
.drawer.open{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
.drawer-x{position:absolute;top:8px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:none;box-shadow:inset 0 0 0 1.5px var(--hair);cursor:pointer;transition:box-shadow .3s}
.drawer-x:hover{box-shadow:inset 0 0 0 1.5px var(--mist-2)}
.drawer-x i{position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:var(--papier);transform:rotate(45deg)}
.drawer-x i + i{transform:rotate(-45deg)}
.drawer-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.drawer-links li{border-bottom:1px solid var(--hair)}
.drawer-links a{display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-size:22px;font-weight:700;letter-spacing:-.03em;text-decoration:none}
.drawer-links a::after{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mist-2);transition:all .35s var(--ease)}
.drawer-links a:hover::after,.drawer-links a[aria-current]::after{background:var(--verm);box-shadow:none}
.drawer-cta{align-self:flex-start;margin-top:28px}
.drawer-foot{margin-top:auto;padding-top:24px;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--mist-2)}
.drawer-foot a{text-decoration:none}
.drawer-foot a:hover{color:var(--papier)}

@media (max-width:980px){
  :root{--hh:60px}
  .nav{display:none}
  .menu{display:inline-flex}
  .pcs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:981px){ .drawer,.drawer-ov{display:none} }
@media (max-width:560px){
  .brand{font-size:24px}
  .pcs{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* korte pagina's: bedankt en 404 */
.kort{min-height:calc(100svh - var(--hh));padding-bottom:clamp(96px,12vw,160px)}
.kort .h1p{max-width:18ch}
.kort-acts{display:flex;flex-wrap:wrap;gap:22px 30px;align-items:center;margin-top:clamp(32px,4vw,48px)}
.kort-lijst{margin-top:clamp(64px,8vw,112px);max-width:760px}
.kort-lijst ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.kort-lijst li{border-bottom:1px solid var(--hair)}
.kort-lijst a{display:block;padding:18px 0;font-size:clamp(18px,1.6vw,21px);font-weight:700;letter-spacing:-.02em;text-decoration:none}
.kort-lijst a:hover{text-decoration:underline;text-decoration-color:var(--verm);text-underline-offset:5px}