/* imgroot.nl: shared base for every page (EN/NL/IT). Colour tokens first, then the rules all page stylesheets had in common. Page CSS loads after this file. */
:root{
  /* colours from the former inline styles */ --c-banner-ink:#2a1d36; --c-banner-link:#8f0048; --c-teal-ink:#064a51; --c-stone:#f2efe9; --c-slate:#4a4f52; --c-mist:#d6e6e8; --c-lilac-soft:#e6d3ee; --c-grey-light:#c9cdcf; --c-grey-pale:#e4e6e7; --c-grey:#a7adb0; --c-rose-mist:#fbeff3; --c-plum-mute:#5a3d66; --c-purple:#4b1260; --c-purple-deep:#2c0739; --c-lilac-pale:#f1e4f5; --c-paper:#f5f3f6; --c-mauve-grey:#6b6470; --c-dark:#121212; --c-dark-2:#1b1b1b; --c-grey-mid:#a8a8a8; --c-white:#ffffff; 
  
  --c-teal:#7bd6e0; /* Evert Groot accent */
  --c-teal-deep:#0b6e78; /* teal for text on light */
  --c-red:#c8193a; /* Absoluut accent */
  --c-ink:#0b0b0c; /* near-black page colour (Evert Groot) */
  --c-aubergine:#1f0328; /* Absoluut page colour */
  --c-plum-ink:#16121a; /* text on light, DJ pages */
  --c-red-deep:#a8132f; /* hover on red buttons */
  --c-tile-dark:#16061c; /* dark tile and photo preview backdrop */
  --c-overlay:rgba(22,6,28,.72); /* see-through pill on photos and the logo tile */
  --c-overlay-strong:rgba(22,6,28,.92); /* its hover */
  --c-lilac:#d9b5e6; /* soft accent on aubergine */
  --c-line:#e6e1e8; /* hairlines on light */
  --c-pink:#ff9fb2; /* soft red for links on dark */
  --c-blush:#ffd8ea; /* pale pink */
  --c-petrol:#0f3b40; /* Creator band */
  --c-black-soft:#111111; /* text on light, Evert Groot pages */
  --c-body-grey:#4b4550; /* body text on light, DJ pages */
  --c-navy:#17155f; /* legacy base colour, mostly overridden */
  --c-gold:#dbad72; /* legacy accent, mostly overridden */
  --c-periwinkle:#b3afe0; /* legacy muted text */
  --c-lavender:#8e8abf; /* legacy placeholder */
  --c-cream:#fff1e6; /* BOPS block and BOPS case background */
  --c-bops-red:#a62400; /* BOPS accent on cream */
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--c-navy)}
.gut{padding-left:calc(max(0px, (100% - 1360px) / 2) + clamp(20px, 4vw, 48px));padding-right:calc(max(0px, (100% - 1360px) / 2) + clamp(20px, 4vw, 48px))}
[hidden]{display:none !important}
.site-sw{display:inline-grid;grid-template-columns:auto auto;align-items:center;justify-self:start;padding:3px;border:1px solid rgba(255,255,255,0.2);border-radius:999px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.site-sw > *{grid-row:1}
.site-sw a:first-of-type{grid-column:1}
.site-sw a:last-of-type{grid-column:2}
.sw-thumb{grid-column:1;align-self:stretch;border-radius:999px;background:#ffffff;box-shadow:0 2px 10px rgba(0,0,0,0.22)}
.site-sw a{position:relative;z-index:1;display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;font-family:'Baloo Bhai 2',sans-serif;font-size:18px;font-weight:700;letter-spacing:-0.01em;line-height:1;color:var(--c-periwinkle);text-decoration:none;white-space:nowrap;-webkit-user-drag:none;transition:color .25s ease}
.site-sw a:hover{color:#ffffff}
.site-sw.sw-drag{cursor:grabbing}
.site-sw.sw-drag .sw-thumb{transition:none}
.sw-thumb{transition:transform .3s cubic-bezier(.3,.7,.2,1)}
.site-sw.sw-flip a[aria-current]{color:var(--c-periwinkle)}
.site-sw.sw-flip a:not([aria-current]){color:var(--c-navy)}
.hdr-right{display:flex;align-items:center;justify-content:flex-end;justify-self:end;gap:18px;font-size:15px}
.hdr-lang,.mm-lang{display:flex}
.hdr-lang a,.mm-lang a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:44px;font-size:12px;font-weight:800;letter-spacing:0.1em;color:var(--c-lavender);text-decoration:none}
.hdr-lang a[aria-current],.mm-lang a[aria-current]{color:#ffffff}
.hdr-lang a:hover,.mm-lang a:hover{color:var(--c-gold)}
.mm-link[aria-current]{color:var(--c-gold) !important}
.site-sw a::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-right:8px;border-radius:50%}
.site-sw a:first-of-type::before{background:var(--c-teal)}
.site-sw a:last-of-type::before{background:var(--c-red)}
a .bops-mark{transition:background-color .25s ease}
.ft2-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,0.14)}
.ft2-id{display:flex;flex-direction:column;gap:6px}
.ft2-name{font-family:'Baloo Bhai 2',sans-serif;font-size:26px;font-weight:800;letter-spacing:-0.02em;line-height:1.1;color:#ffffff}
.ft2-sub{font-size:14px;line-height:1.5;color:var(--c-periwinkle)}
.ft2-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:22px;font-size:13px;line-height:1.6;color:var(--c-lavender)}
.ft2-bottom > span{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px}
.ft2-bottom a{color:var(--c-periwinkle);text-decoration:none}
.ft2-bottom a:hover,.ft2-bottom a:focus-visible{color:#ffffff;text-decoration:underline;text-underline-offset:3px}
footer.ft2 nav a{color:#ffffff;background:rgba(255,255,255,0.1)}
.hv-ar{display:inline-block;margin-left:.3em;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
footer.ft2 nav a{transition:color .25s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
.skip:focus{top:12px;outline:2px solid var(--hv-acc-l);outline-offset:2px}
main:focus,section[tabindex="-1"]:focus{outline:none} /* sections focused after a glide to them */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ft2-top > nav{flex-wrap:wrap}
::selection{background:var(--hv-acc);color:var(--c-ink)}
.hv-ne{--ar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5'/%3E%3C/svg%3E")}
#mobile-menu:not([hidden]){animation:mm-in .24s cubic-bezier(.2,.7,.2,1) both}
body:has(.hero-cta):not(.hero-cta-out) header:not(.hdr-stuck) :is(.hdr-cta,.hdr-sep){display:none !important}
.field:not(:focus){border-color:rgba(255,255,255,0.5) !important}
.site-sw a:focus-visible{outline:2px solid var(--hv-acc);outline-offset:2px}
img[width][height]{height:auto}
/* footer legal links: a taller tap area without moving anything */
@media (min-width:641px){.ft2-bottom a{padding-block:5px;margin-block:-5px}}
/* sections reached through a link stop a little below the fixed header, so their heading has room */
main > section[id]{scroll-margin-top:24px}

/* SHARED BY EVERY PAGE (moved here from home/dj/press-kit/privacy.css, where they were identical): site switch,
   page transition, header details, footer links */
a{color:#ffffff}
a:hover{color:var(--c-gold)}
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  header .site-sw{view-transition-name:sw}
  header .sw-thumb{view-transition-name:sw-thumb}
  header .site-sw a:first-of-type{view-transition-name:sw-a}
  header .site-sw a:last-of-type{view-transition-name:sw-b}
  ::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
  ::view-transition-group(sw-thumb){z-index:2}
  ::view-transition-group(sw-a),::view-transition-group(sw-b){z-index:3}
  ::view-transition-group(sw-a),::view-transition-group(sw-b){overflow:clip}
  ::view-transition-old(sw-a),::view-transition-new(sw-a),::view-transition-old(sw-b),::view-transition-new(sw-b){width:auto;height:100%;object-fit:none;object-position:left center}
}
@media (max-width: 1240px){
  header{grid-template-columns:auto auto minmax(0,1fr) !important;gap:20px 28px !important}
  .hdr-right{gap:12px}
  .site-sw a{padding:0 13px;font-size:17px}
}
@media (max-width: 1060px){
  .nav-links,.hdr-cta,.hdr-lang,.hdr-sep{display:none !important}
  header{grid-template-columns:minmax(0,1fr) auto !important}
}
@media (max-width: 760px){
  .site-sw a{height:34px;padding:0 12px;font-size:16px}
}
@media (max-width: 360px){
  .site-sw a{padding:0 9px;font-size:15px}
  .site-sw a::before{width:7px;height:7px;margin-right:6px}
}
:is(.btn-solid,.btn-ghost,.hv-2,.hv-tl,.hv-card,.reel,a.case,.svc,footer.ft2 nav a):focus-visible{outline:2px solid var(--hv-acc);outline-offset:3px}
@media (hover:hover){
  .btn-solid:hover,.btn-ghost:hover,.hv-2:hover,footer.ft2 nav a:hover{transform:none !important}
  :is(a,button):hover .hv-ar.hv-ne{transform:translate(3px,-3px)}
}
.btn-solid:focus-visible,.btn-ghost:focus-visible,.hv-2:focus-visible,footer.ft2 nav a:focus-visible{transform:none !important}
:is(a,button):focus-visible .hv-ar.hv-ne{transform:translate(3px,-3px)}
.skip{position:absolute;left:12px;top:-80px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#ffffff;color:var(--c-ink);font-weight:800;text-decoration:none}
@media (min-width: 1061px) and (max-width: 1240px){
  .hdr-lang a{width:28px}
  header{column-gap:18px !important}
  .hdr-right{gap:8px}
}
.hv-ar{display:inline-block;width:.8em;height:.8em;margin-left:.4em;vertical-align:-.04em;overflow:hidden;text-indent:2em;white-space:nowrap;background:currentColor;-webkit-mask:var(--ar) center / contain no-repeat;mask:var(--ar) center / contain no-repeat}
@media (max-width: 640px){
  .ft2-bottom a{display:inline-flex;align-items:center;min-height:44px}
}
.nav-links a:hover,.hdr-lang a:hover,.mm-lang a:hover,.mm-link:hover{color:var(--hv-acc)}
.mm-link[aria-current]{color:var(--hv-acc) !important}
:is(.nav-links a,.hdr-lang a,.mm-link,.mm-lang a):focus-visible{outline:2px solid var(--hv-acc);outline-offset:3px;border-radius:4px}
.hdr-lang a{font-size:13px}
@keyframes mm-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  #mobile-menu:not([hidden]){animation:none}
}
@media (max-width: 1060px){
  .site-sw a{height:44px}
}
@media (max-width: 370px){
  .site-sw a{padding:0 8px;font-size:14px}
  .site-sw a::before{width:6px;height:6px;margin-right:5px}
}
@media (prefers-reduced-motion: reduce){
  .sw-thumb{transition:none !important}
}
.btn-solid:is(:hover,:focus-visible){background-image:linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14));box-shadow:0 8px 22px var(--hv-glow)}
@media (min-width: 641px){
  .ft2-bottom a{display:inline-flex;align-items:center;min-height:44px;margin-block:-11px;margin-block:calc((1lh - 44px) / 2)}
}