/* =========================================================
   INSPECTIVE — NOIR DESIGN SYSTEM v3
   ========================================================= */

:root {
  --ink:         #080706;
  --ink-light:   #110f0d;
  --ink-mid:     #181512;
  --ink-warm:    #1c1916;
  --paper:       #f2ead8;
  --paper-dark:  #e8ddc4;
  --red:         #9b1c1c;
  --red-bright:  #c0392b;
  --gold:        #c9a84c;
  --gold-dim:    #8a6d2f;
  --gold-strong: #d4b55a;
  --smoke:       #5a5048;
  --line:        rgba(201,168,76,.14);
  --line-strong: rgba(201,168,76,.28);
  --max:         1240px;
  --ring:        0 0 0 3px rgba(201,168,76,.22);
  --type-display:'Playfair Display', Georgia, serif;
  --type-body:   'Crimson Pro', Georgia, serif;
  --type-stamp:  'Bebas Neue', 'Arial Narrow', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--type-body);
  font-size:18px;
  color:var(--paper);
  background:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Subtle grain */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9998;opacity:.22;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--ring);border-radius:2px}

.container,.wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto}

/* ---- TYPOGRAPHY ---- */
.h1{margin:0 0 14px;font-family:var(--type-display);font-size:clamp(34px,4vw,68px);line-height:1.03;font-weight:900;font-style:italic;letter-spacing:-.02em;text-wrap:balance;color:var(--paper)}
.h2{margin:0 0 12px;font-family:var(--type-display);font-size:clamp(24px,3vw,44px);line-height:1.08;font-weight:700;font-style:italic;letter-spacing:-.015em;text-wrap:balance;color:var(--paper)}
.h3{margin:0 0 8px;font-family:var(--type-display);font-size:clamp(18px,1.8vw,24px);line-height:1.2;font-weight:700;color:var(--paper)}
.lead{margin:0;font-size:clamp(16px,1.5vw,19px);color:rgba(242,234,216,.75);max-width:64ch;font-weight:300;line-height:1.7}
p.lead{padding-bottom:14px}
.muted{color:rgba(242,234,216,.68)}
.small{color:rgba(242,234,216,.55);font-size:15px}
.label{font-family:var(--type-stamp);font-size:12px;letter-spacing:2px;color:var(--gold-dim)}

.kicker,.kickerLine{display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;font-family:var(--type-stamp);font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--gold)}
.kicker::before,.kickerLine::before{content:'';width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));flex-shrink:0}

.section{position:relative;padding:72px 0}
.sectionTight{padding:32px 0}
.sectionDivider{border-top:1px solid var(--line)}
.sectionHead{margin:0 0 28px}

/* ---- BUTTONS ---- */
.btnRow,.ctaRow{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 26px;border:1px solid transparent;font-family:var(--type-stamp);font-size:14px;letter-spacing:2.5px;font-weight:400;transition:transform .16s,background .18s,border-color .18s,box-shadow .18s;cursor:pointer;user-select:none;border-radius:0;text-transform:uppercase}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btnPrimary{color:var(--paper);background:var(--red);border-color:var(--red)}
.btnPrimary:hover{background:var(--red-bright);border-color:var(--red-bright)}
.btnGhost{color:var(--paper);background:transparent;border-color:rgba(242,234,216,.35)}
.btnGhost:hover{border-color:var(--gold);color:var(--gold)}

.pill{display:inline-flex;align-items:center;padding:3px 12px;font-family:var(--type-stamp);font-size:11px;letter-spacing:2px;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.22);color:var(--gold);white-space:nowrap}

/* ---- HEADER / NAV ---- */
.siteHeader{
  position:sticky;top:0;z-index:300;
  background:var(--red);
  height:66px;display:flex;align-items:center;
  box-shadow:0 2px 24px rgba(0,0,0,.5);
}
.headerInner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brandLogo{height:34px;width:auto;filter:brightness(10)}
.brandName{font-family:var(--type-display);font-size:20px;font-weight:900;font-style:italic;color:var(--paper)}
.mainNav{display:flex;align-items:center}
.mainNav a{padding:6px 16px;font-family:var(--type-stamp);font-size:13px;letter-spacing:2px;color:rgba(242,234,216,.85);text-transform:uppercase;position:relative;transition:color .2s}
.mainNav a::after{content:'';position:absolute;bottom:-2px;left:16px;right:16px;height:2px;background:var(--paper);transform:scaleX(0);transition:transform .25s;border-radius:1px}
.mainNav a:hover{color:var(--paper)}
.mainNav a:hover::after,.mainNav a.active::after{transform:scaleX(1)}
.mainNav a.active{color:var(--paper)}

.navToggle{display:none;background:rgba(0,0,0,.25);border:1px solid rgba(242,234,216,.3);color:var(--paper);padding:8px 12px;cursor:pointer;align-items:center;justify-content:center}
.navToggleBars{display:block;width:22px;height:2px;background:var(--paper);position:relative}
.navToggleBars span{display:block;width:22px;height:2px;background:var(--paper);position:absolute;left:0}
.navToggleBars span:first-child{top:-7px}
.navToggleBars span:last-child{top:7px}
.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---- HERO SPLIT (homepage) ---- */
.hero-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:86vh;
  background:var(--ink);
  overflow:hidden;
}
.hero-split-left{
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 56px 80px 72px;
  position:relative;z-index:2;
  background:var(--ink);
}
.hero-split-left::after{
  content:'';position:absolute;top:0;right:-1px;width:120px;height:100%;
  background:linear-gradient(to right,var(--ink),transparent);
  z-index:3;
}
.hero-split-right{position:relative;overflow:hidden}
.hero-split-right img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) sepia(.15);display:block}
.hero-split-right::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,var(--ink) 0%,rgba(8,7,6,.5) 30%,transparent 65%);
}
.hero-split-right::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:200px;z-index:2;
  background:linear-gradient(to bottom,transparent,var(--ink));
}

/* Hero content animation */
.hero-split-left > *{opacity:0;transform:translateY(18px);animation:hFade .8s ease forwards}
.hero-split-left > *:nth-child(1){animation-delay:.1s}
.hero-split-left > *:nth-child(2){animation-delay:.26s}
.hero-split-left > *:nth-child(3){animation-delay:.4s}
.hero-split-left > *:nth-child(4){animation-delay:.54s}
@keyframes hFade{to{opacity:1;transform:none}}

.hero-eyebrow{font-family:var(--type-stamp);font-size:12px;letter-spacing:5px;color:var(--gold);display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hero-eyebrow::before{content:'';width:32px;height:1px;background:var(--gold)}
.hero-split-left h1{font-family:var(--type-display);font-size:clamp(46px,5.5vw,84px);font-weight:900;font-style:italic;line-height:1.0;color:var(--paper);margin-bottom:26px}
.hero-split-left h1 em{color:var(--red-bright);font-style:italic;display:block}
.hero-sub{font-size:18px;color:rgba(242,234,216,.7);max-width:420px;margin-bottom:42px;font-weight:300;line-height:1.75}

/* ---- CTA CARDS ---- */
.heroCtas{background:var(--ink-light);border-bottom:1px solid var(--line)}
.ctaGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--line)}

.ctaCard{display:flex;align-items:center;gap:16px;padding:24px 28px;background:var(--ink-light);transition:background .25s;text-decoration:none;border:none;text-align:left}
.ctaCard:hover{background:var(--ink-mid)}
.ctaCard + .ctaCard{border-left:1px solid var(--line)}
.ctaIcon{font-size:26px;flex-shrink:0}
.ctaText{flex:1;min-width:0}
.ctaTitle{font-family:var(--type-display);font-size:17px;font-weight:700;color:var(--paper);margin-bottom:2px}
.ctaSub{font-size:13px;color:rgba(242,234,216,.5);font-weight:300;line-height:1.4}
.ctaAction{font-family:var(--type-stamp);font-size:12px;letter-spacing:2px;color:var(--gold);flex-shrink:0;white-space:nowrap}

/* ---- SECTION TRANSITION (geen fingerprint) ---- */
.section-divide{
  height:80px;
  background:linear-gradient(to bottom,var(--ink) 0%,var(--ink-light) 100%);
  position:relative;overflow:hidden;
}
.section-divide::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:1px;height:40px;
  background:linear-gradient(to bottom,transparent,rgba(201,168,76,.5));
}

/* ---- INNER PAGE HERO (categorie-pagina's) ---- */
/* Split hero: tekst links, foto rechts — zelfde stijl als homepage */
.pageHeroSplit{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:480px;
  background:var(--ink);
  overflow:hidden;
  position:relative;
}
.pageHeroSplitLeft{
  display:flex;flex-direction:column;justify-content:center;
  padding:72px 52px 72px 0;
  position:relative;z-index:2;
}
.pageHeroSplitLeft::after{
  content:'';position:absolute;top:0;right:0;width:80px;height:100%;
  background:linear-gradient(to right,transparent,transparent);
  z-index:3;
}
.pageHeroSplitRight{position:relative;overflow:hidden}
.pageHeroSplitRight img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) sepia(.2);display:block;min-height:420px}
.pageHeroSplitRight::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,var(--ink) 0%,rgba(8,7,6,.45) 28%,transparent 60%);
}
.pageHeroSplitRight::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:160px;z-index:2;
  background:linear-gradient(to bottom,transparent,var(--ink));
}
/* Animate in */
.pageHeroSplitLeft > *{opacity:0;transform:translateY(16px);animation:hFade .7s ease forwards}
.pageHeroSplitLeft > *:nth-child(1){animation-delay:.05s}
.pageHeroSplitLeft > *:nth-child(2){animation-delay:.18s}
.pageHeroSplitLeft > *:nth-child(3){animation-delay:.3s}
.pageHeroSplitLeft > *:nth-child(4){animation-delay:.42s}

/* ---- GAME DETAIL HERO (spel-pagina's) ---- */
.gameHero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:520px;
  background:var(--ink);
  overflow:hidden;
}
.gameHeroLeft{
  display:flex;flex-direction:column;justify-content:center;
  padding:72px 52px 72px 0;
  position:relative;z-index:2;
}
.gameHeroRight{
  position:relative;overflow:hidden;
  background:var(--ink-warm);
}
/* Main image */
.gameHeroImg{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.65) sepia(.15);
  display:block;
  transition:opacity .35s ease;
}
/* Gradient links */
.gameHeroRight::before{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(to right,var(--ink) 0%,rgba(8,7,6,.4) 25%,transparent 55%);
  pointer-events:none;
}
/* Thumbnails strip aan onderkant */
.gameThumbStrip{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;gap:3px;padding:12px;
  background:linear-gradient(to top,rgba(8,7,6,.9),transparent);
}
.gameThumb{
  width:72px;height:52px;flex-shrink:0;
  object-fit:cover;
  filter:brightness(.6) sepia(.2);
  cursor:pointer;
  transition:filter .22s,transform .22s;
  border:2px solid transparent;
}
.gameThumb:hover{filter:brightness(.9) sepia(.05);transform:translateY(-2px)}
.gameThumb.active{border-color:var(--gold);filter:brightness(.9) sepia(.05)}

/* Animate game hero left */
.gameHeroLeft > *{opacity:0;transform:translateY(16px);animation:hFade .7s ease forwards}
.gameHeroLeft > *:nth-child(1){animation-delay:.05s}
.gameHeroLeft > *:nth-child(2){animation-delay:.18s}
.gameHeroLeft > *:nth-child(3){animation-delay:.3s}
.gameHeroLeft > *:nth-child(4){animation-delay:.42s}

/* ---- DARK CONTENT SECTION ---- */
.darkContentSection{
  background:var(--ink-mid);
  padding:52px 0;
  border-bottom:1px solid var(--line);
}

/* ---- PAPER PAGE (dark parchment) ---- */
.paperPage{
  background:var(--ink-warm);
  border-top:1px solid var(--line);
  padding:52px 0 80px;
}
.paperPage .card{background:rgba(242,234,216,.04);border:1px solid var(--line)}
.paperPage .card::before{display:none}
.paperPage .h2,.paperPage .h3,.paperPage .price{color:var(--paper)}
.paperPage .muted{color:rgba(242,234,216,.65)}
.paperPage .small{color:rgba(242,234,216,.55)}
.paperPage .btnGhost{background:transparent;color:var(--paper);border-color:rgba(242,234,216,.28)}
.paperPage .btnGhost:hover{border-color:var(--gold);color:var(--gold)}
.paperPage .pill{background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.2);color:var(--gold-dim)}
.paperPage .dot{background:rgba(201,168,76,.2)}
.paperPage .dot.filled{background:var(--red)}
.paperPage .starsText{color:var(--gold)}
.paperPage .ratingText{color:rgba(242,234,216,.6)}
.paperPage .evidenceLevel{border-top:1px solid rgba(201,168,76,.08)}
.paperPage .evidenceLevel:first-child{border-top:0}
.paperPage .price{font-weight:700;color:var(--gold);font-size:20px}

/* ---- FEATURE PHOTOS ---- */
.featurePhotos{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:48px}
.featurePhotoCard{background:var(--ink-light);border:1px solid var(--line);overflow:hidden;transition:border-color .3s}
.featurePhotoCard:hover{border-color:var(--line-strong)}
.featurePhotoMedia{overflow:hidden;aspect-ratio:4/3}
.featurePhotoMedia img{width:100%;height:100%;object-fit:cover;filter:brightness(.7) sepia(.18);transition:transform .5s,filter .3s}
.featurePhotoCard:hover .featurePhotoMedia img{transform:scale(1.04);filter:brightness(.82) sepia(.1)}
.featurePhotoBody{padding:28px 24px 32px}
.featurePhotoBody .h3{margin-bottom:10px}
.featurePhotoBody .muted{margin-bottom:18px;display:block}

/* ---- CARDS ---- */
.card{position:relative;background:var(--ink-light);border:1px solid var(--line);overflow:hidden;transition:border-color .3s,transform .25s}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .3s}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.card:hover::before{opacity:1}
.cardBody{padding:24px}
.cardMeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cardMedia{overflow:hidden;margin:12px 0;aspect-ratio:4/3}
.cardMedia img{width:100%;height:100%;object-fit:cover;filter:brightness(.78) sepia(.18);transition:transform .45s;cursor:zoom-in}
.card:hover .cardMedia img{transform:scale(1.04)}
.cardBottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:14px;border-top:1px solid var(--line);margin-top:14px}
.cardBottomStack{flex-direction:column;align-items:stretch}
.cardCtaWide{width:100%}
.price{font-family:var(--type-display);font-size:21px;font-weight:700;color:var(--paper)}

.ratingLine{display:flex;align-items:center;gap:8px}
.starsText{color:var(--gold);font-size:15px;letter-spacing:.05em}
.ratingText{color:rgba(242,234,216,.6);font-size:13px}

.microHighlights{list-style:none;margin:8px 0;padding:0}
.evidenceLevel{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-top:1px solid var(--line)}
.evidenceLevel:first-child{border-top:0}
.evidenceLevel .label{font-family:var(--type-stamp);font-size:11px;letter-spacing:2px;color:var(--smoke)}
.dots{display:flex;gap:5px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(201,168,76,.18);border:none;padding:0}
.dot.filled{background:var(--red)}

.featureScore{margin:5px 0}
.featureLabel{font-family:var(--type-stamp);font-size:11px;letter-spacing:2px;color:var(--smoke);display:block;margin-bottom:3px}
.featureTrack{height:3px;background:rgba(201,168,76,.12);border-radius:2px;overflow:hidden}
.featureFill{display:block;height:100%;background:var(--red);border-radius:2px}
.featureFill.is-1{width:20%}.featureFill.is-2{width:40%}.featureFill.is-3{width:60%}.featureFill.is-4{width:80%}.featureFill.is-5{width:100%}

/* ---- GRIDS ---- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.gameCardMedia{width:100%;aspect-ratio:4/3;margin:12px 0;background-size:cover;background-position:center;filter:brightness(.75) sepia(.18);transition:filter .3s}
.card:hover .gameCardMedia{filter:brightness(.88) sepia(.08)}

/* ---- FAQ ---- */
.faqSection{background:var(--ink-light)}
.faqGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.faqItem{background:var(--ink-light);border:1px solid var(--line);overflow:hidden}
.faqQ{width:100%;background:none;border:none;color:var(--paper);font-family:var(--type-display);font-size:17px;font-weight:700;text-align:left;padding:20px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .2s}
.faqQ:hover{color:var(--gold)}
.faqQ::after{content:'+';font-family:var(--type-stamp);font-size:22px;color:var(--gold);flex-shrink:0;transition:transform .25s}
.faqItem.isOpen .faqQ::after{transform:rotate(45deg)}
.faqA{display:none;padding:0 22px 20px;color:rgba(242,234,216,.65);font-size:16px;font-weight:300;line-height:1.7;border-top:1px solid var(--line)}
.faqA a{color:var(--gold);text-decoration:underline}
.faqItem.isOpen .faqA{display:block}

/* ---- TRUST / RATINGS ---- */
.trustScore{font-family:var(--type-display);font-size:54px;font-weight:900;font-style:italic;color:var(--paper);line-height:1}
.trustLabel{font-family:var(--type-stamp);font-size:11px;letter-spacing:2px;color:var(--smoke);margin-top:4px}
.stars{color:var(--gold);font-size:20px;letter-spacing:.1em}
.trustTop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}

/* ---- LIGHTBOX ---- */
.lightboxOverlay,.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,7,6,.93);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lightboxOverlay.isOpen,.lightbox.isOpen{opacity:1;pointer-events:all}
.lightboxDialog,.lightboxPanel{position:relative;max-width:92vw;max-height:92vh}
.lightboxImg{max-height:90vh;max-width:90vw;object-fit:contain}
.lightboxClose{position:absolute;top:-46px;right:0;background:none;border:1px solid var(--line);color:var(--paper);padding:7px 16px;font-family:var(--type-stamp);font-size:13px;letter-spacing:2px;cursor:pointer;transition:background .2s}
.lightboxClose:hover{background:var(--red)}

/* ---- FOOTER ---- */
.siteFooter{background:var(--ink);border-top:1px solid var(--line);padding:72px 0 0}
.footerGrid{display:grid;grid-template-columns:2fr 1.5fr 1fr;gap:56px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.footerBrand{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.footerLogo{height:36px;width:auto}
.footerBrandName{font-family:var(--type-display);font-size:19px;font-weight:900;font-style:italic;color:var(--paper)}
.footerBrandTag{font-family:var(--type-stamp);font-size:11px;letter-spacing:2px;color:var(--smoke);margin-top:2px}
.footerBrandText{display:flex;flex-direction:column}
.footerText{color:rgba(242,234,216,.42);font-size:15px;line-height:1.8;font-weight:300;max-width:300px;margin:0 0 24px}
.footerTextSmall{font-size:14px;color:rgba(242,234,216,.42);font-style:italic;line-height:1.6;margin:10px 0;font-family:var(--type-display)}
.footerNavTitle{font-family:var(--type-stamp);font-size:11px;letter-spacing:3px;color:var(--gold);margin-bottom:18px;text-transform:uppercase}
.footerNavGrid{display:flex;flex-direction:column;gap:9px}
.footerNavGrid a{color:rgba(242,234,216,.48);font-size:15px;transition:color .2s}
.footerNavGrid a:hover{color:var(--paper)}
.footerNavSection{margin-bottom:28px}
.footerTrust .footerTrustCard{background:rgba(242,234,216,.04);border:1px solid var(--line);padding:24px}
.footerGamePhoto{aspect-ratio:16/9;overflow:hidden;margin:10px 0}
.footerGamePhoto img{width:100%;height:100%;object-fit:cover;filter:brightness(.65) sepia(.2)}
.footerMiniCtas{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.footerBottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;flex-wrap:wrap;gap:12px}
.footerCopy{font-family:var(--type-stamp);font-size:12px;letter-spacing:1px;color:rgba(242,234,216,.28)}
.footerLegal{display:flex;gap:20px}
.footerLegal a{font-size:13px;color:rgba(242,234,216,.28);transition:color .2s}
.footerLegal a:hover{color:rgba(242,234,216,.7)}

/* ---- MISC ---- */
.noScroll{overflow:hidden}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* ---- CONTACT FORM ---- */
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fieldFull{grid-column:1/-1}
.hpWrap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.spamRow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.spamPrompt{padding:10px 14px;border:1px solid rgba(201,168,76,.22);background:rgba(242,234,216,.04);color:var(--gold);font-family:var(--type-stamp);letter-spacing:2px;font-size:14px;white-space:nowrap}
.formNotice{margin-top:12px;padding:12px 14px;border:1px solid rgba(242,234,216,.18);background:rgba(242,234,216,.04);color:var(--paper);display:none}
.formNotice.isError{border-color:var(--red-bright)}.formNotice.isSuccess{border-color:var(--gold)}
.modalOverlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:18px;z-index:9999}
.modalOverlay.isOpen{display:flex}
.modalDialog{width:min(540px,100%);border:1px solid var(--line);background:var(--ink-light);padding:40px;position:relative}
.modalClose{position:absolute;right:16px;top:16px;background:none;border:1px solid var(--line);color:var(--paper);width:36px;height:36px;cursor:pointer;font-size:18px}
.modalClose:hover{background:var(--red)}
.contactForm input,.contactForm textarea,.contactForm select{width:100%;background:rgba(242,234,216,.05);border:1px solid rgba(242,234,216,.16);color:var(--paper);padding:13px 16px;font-family:var(--type-body);font-size:16px;margin-bottom:12px;outline:none;transition:border-color .2s;border-radius:0;-webkit-appearance:none}
.contactForm input::placeholder,.contactForm textarea::placeholder{color:rgba(242,234,216,.28)}
.contactForm input:focus,.contactForm textarea:focus{border-color:rgba(201,168,76,.42)}
.contactForm label{display:block;font-family:var(--type-stamp);font-size:11px;letter-spacing:3px;color:var(--gold-dim);margin-bottom:5px;text-transform:uppercase}
.pageHeroContact{background:url('assets/img/og-image.jpg') center/cover no-repeat;min-height:320px;filter:brightness(.55) sepia(.22)}

/* =============================================
   RESPONSIVE — MOBILE FIRST
   ============================================= */

/* Tablet */
@media(max-width:1000px){
  .footerGrid{grid-template-columns:1fr 1fr}
  .footerTrust{grid-column:1/-1}
  .featurePhotos{grid-template-columns:1fr 1fr}
  .hero-split{min-height:70vh}
  .hero-split-left{padding:60px 36px 60px 36px}
  .pageHeroSplit{grid-template-columns:1fr 1fr;min-height:380px}
  .pageHeroSplitLeft{padding:52px 36px 52px 0}
  .gameHero{grid-template-columns:1fr 1fr;min-height:420px}
  .gameHeroLeft{padding:52px 36px 52px 0}
}

/* Mobile */
@media(max-width:768px){
  /* NAV */
  .navToggle{display:flex}
  .mainNav{
    display:none;position:fixed;
    top:66px;left:0;right:0;bottom:0;
    background:rgba(8,7,6,.98);
    flex-direction:column;align-items:flex-start;
    padding:28px 24px;gap:0;z-index:299;
    overflow-y:auto;border-top:1px solid var(--line);
  }
  .mainNav.isOpen{display:flex}
  .mainNav a{width:100%;padding:16px 0;font-size:16px;border-bottom:1px solid var(--line)}
  .mainNav a::after{display:none}

  /* HERO SPLIT → stack: foto boven, tekst onder */
  .hero-split{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .hero-split-right{
    height:52vw;min-height:240px;max-height:380px;
    order:-1;
  }
  .hero-split-right::before{
    background:linear-gradient(to bottom,transparent 40%,var(--ink) 100%);
  }
  .hero-split-right::after{height:80px}
  .hero-split-left{
    padding:36px 20px 52px;
    background:var(--ink);
  }
  .hero-split-left::after{display:none}
  .hero-split-left h1{font-size:clamp(36px,9vw,52px)}
  .hero-sub{font-size:16px;max-width:100%}

  /* PAGE HERO SPLIT → stack op mobiel */
  .pageHeroSplit{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .pageHeroSplitRight{
    height:52vw;min-height:220px;max-height:340px;
    order:-1;
  }
  .pageHeroSplitRight::before{
    background:linear-gradient(to bottom,transparent 30%,var(--ink) 100%);
  }
  .pageHeroSplitRight::after{height:60px}
  .pageHeroSplitLeft{
    padding:32px 20px 48px;
  }
  .pageHeroSplitLeft::after{display:none}

  /* GAME HERO → stack op mobiel */
  .gameHero{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .gameHeroRight{
    height:56vw;min-height:240px;max-height:360px;
    order:-1;
  }
  .gameHeroRight::before{
    background:linear-gradient(to bottom,transparent 30%,var(--ink) 100%);
  }
  .gameHeroImg{min-height:240px}
  .gameHeroLeft{padding:28px 20px 48px}
  .gameThumbStrip{padding:8px;gap:4px}
  .gameThumb{width:56px;height:40px}

  /* GRIDS */
  .grid3{grid-template-columns:1fr 1fr}
  .ctaGrid{grid-template-columns:1fr}
  .ctaCard + .ctaCard{border-left:none;border-top:1px solid var(--line)}
  .faqGrid{grid-template-columns:1fr}
  .featurePhotos{grid-template-columns:1fr}
  .formGrid{grid-template-columns:1fr}

  /* SECTIONS */
  section{padding:48px 0}
  .darkContentSection{padding:40px 0}
  .paperPage{padding:40px 0 60px}

  /* FOOTER */
  .footerGrid{grid-template-columns:1fr;gap:28px}
  .footerBottom{flex-direction:column;text-align:center}
  .footerText{max-width:100%}

  /* MISC */
  .quote-band{padding:52px 20px!important}
}

/* Extra small */
@media(max-width:480px){
  .grid3{grid-template-columns:1fr}
  .hero-split-right{height:60vw;min-height:200px}
  .pageHeroSplitRight{height:60vw;min-height:200px}
  .gameHeroRight{height:65vw;min-height:220px}
  .gameThumb{width:44px;height:32px}
  .hero-split-left h1{font-size:clamp(32px,10vw,46px)}
}

/* ============================================================
   FIX v3.1 — Game hero layout + victim thumbnails
   ============================================================ */

/* GAME HERO: force side-by-side, tekst echt links, foto rechts */
.gameHero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 520px;
  background: var(--ink);
  overflow: hidden;
  align-items: stretch;
}

/* Left panel: volle hoogte, tekst verticaal gecentreerd */
.gameHeroLeft {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 64px 48px 64px max(20px, calc((100vw - 1240px) / 2 + 20px)) !important;
  background: var(--ink);
  position: relative;
  z-index: 2;
}

/* Right panel: foto vult volledig */
.gameHeroRight {
  position: relative !important;
  overflow: hidden !important;
  background: var(--ink-warm);
  min-height: 480px;
}

.gameHeroImg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  filter: brightness(.62) sepia(.12) !important;
  transition: opacity .28s ease !important;
}

/* Gradient van rechts naar links over de foto */
.gameHeroRight::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to right,
    var(--ink) 0%,
    rgba(8,7,6,.35) 22%,
    transparent 55%
  );
  pointer-events: none;
}

/* Thumbnail strip — onderin de foto */
.gameThumbStrip {
  position: absolute !important;
  bottom: 0; left: 0; right: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  gap: 4px !important;
  padding: 14px 16px !important;
  background: linear-gradient(to top, rgba(8,7,6,.88), transparent) !important;
  flex-wrap: wrap;
}

.gameThumb {
  width: 68px !important;
  height: 50px !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
  filter: brightness(.55) sepia(.2) !important;
  cursor: pointer !important;
  transition: filter .2s, transform .2s, border-color .2s !important;
  border: 2px solid transparent !important;
  display: block !important;
}

.gameThumb:hover {
  filter: brightness(.88) sepia(.05) !important;
  transform: translateY(-2px) !important;
}

.gameThumb.active {
  border-color: var(--gold) !important;
  filter: brightness(.9) sepia(.05) !important;
}

/* ---- VICTIM THUMBNAILS (slachtoffers) ---- */
.victimGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 240px)) !important;
  gap: 16px !important;
  justify-content: start !important;
  margin-top: 20px !important;
}

.victimThumb {
  display: block !important;
  overflow: hidden !important;
  cursor: zoom-in !important;
  text-decoration: none !important;
  border: 1px solid var(--line) !important;
  transition: border-color .25s, transform .25s !important;
  background: var(--ink-light) !important;
}

.victimThumb:hover {
  border-color: var(--gold) !important;
  transform: translateY(-3px) !important;
}

.victimThumb img {
  display: block !important;
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  object-position: top center !important;
  filter: brightness(.85) sepia(.1) !important;
  transition: transform .35s, filter .25s !important;
}

.victimThumb:hover img {
  transform: scale(1.04) !important;
  filter: brightness(.95) sepia(.05) !important;
}

.victimName {
  display: block !important;
  padding: 10px 14px !important;
  font-family: var(--type-stamp) !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  color: var(--gold-dim) !important;
  text-align: center !important;
  border-top: 1px solid var(--line) !important;
}

/* Three/four victim variants */
.victimGridThree {
  grid-template-columns: repeat(3, minmax(0, 200px)) !important;
}
.victimGridFour {
  grid-template-columns: repeat(4, minmax(0, 180px)) !important;
}

/* ---- MOBILE FIXES ---- */
@media (max-width: 768px) {
  .gameHero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .gameHeroRight {
    height: 56vw !important;
    min-height: 240px !important;
    max-height: 380px !important;
    order: -1 !important;
    position: relative !important;
  }
  .gameHeroImg {
    position: absolute !important;
  }
  .gameHeroRight::before {
    background: linear-gradient(
      to bottom,
      transparent 30%,
      var(--ink) 100%
    ) !important;
  }
  .gameHeroLeft {
    padding: 28px 20px 48px !important;
  }
  .gameThumb {
    width: 52px !important;
    height: 38px !important;
  }

  .victimGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
  }
  .victimGridThree,
  .victimGridFour {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .victimThumb img {
    height: 180px !important;
  }
}

@media (max-width: 480px) {
  .gameHeroRight {
    height: 62vw !important;
  }
  .gameThumb {
    width: 42px !important;
    height: 30px !important;
  }
  .victimGrid,
  .victimGridThree,
  .victimGridFour {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .victimThumb img {
    height: 150px !important;
  }
}

/* ============================================================
   FIX v3.2 — Kleinere media foto's + compacte slachtoffers
   ============================================================ */

/* TWOCOL LAYOUT: tekst links, foto's rechts */
.twoCol {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}

/* MEDIA STACK: foto's rechts gestapeld, compact */
.mediaStack {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.mediaCard {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--ink-mid) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.mediaCard img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  filter: brightness(.78) sepia(.12) !important;
  transition: transform .35s, filter .25s !important;
}

.mediaCard:hover img {
  transform: scale(1.03) !important;
  filter: brightness(.9) sepia(.06) !important;
  cursor: zoom-in !important;
}

/* VICTIM GRID: kleine compacte politiefoto's, gecentreerd */
.victimGrid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: flex-start !important;
  margin-top: 24px !important;
  max-width: 100% !important;
}

.victimThumb {
  display: block !important;
  width: 160px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  cursor: zoom-in !important;
  text-decoration: none !important;
  border: 1px solid var(--line) !important;
  transition: border-color .22s, transform .22s !important;
  background: var(--ink-light) !important;
  border-radius: 0 !important;
}

.victimThumb:hover {
  border-color: var(--gold) !important;
  transform: translateY(-3px) !important;
}

.victimThumb img {
  display: block !important;
  width: 160px !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: top center !important;
  filter: brightness(.88) sepia(.08) !important;
  transition: transform .3s, filter .22s !important;
}

.victimThumb:hover img {
  transform: scale(1.04) !important;
  filter: brightness(.98) sepia(.03) !important;
}

/* Naam label onder de foto */
.victimName {
  display: block !important;
  padding: 7px 10px !important;
  font-family: var(--type-stamp) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  color: var(--gold-dim) !important;
  text-align: center !important;
  border-top: 1px solid var(--line) !important;
  background: var(--ink-light) !important;
}

/* MOBILE */
@media (max-width: 768px) {
  .twoCol {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .mediaStack {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .mediaCard {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 140px !important;
  }
  .mediaCard img {
    height: 150px !important;
  }
  .victimThumb {
    width: 130px !important;
  }
  .victimThumb img {
    width: 130px !important;
    height: 162px !important;
  }
}

@media (max-width: 480px) {
  .victimThumb {
    width: calc(50% - 8px) !important;
  }
  .victimThumb img {
    width: 100% !important;
    height: 140px !important;
  }
  .mediaCard img {
    height: 120px !important;
  }
}

/* ---- Victim grid: gecentreerd ---- */
.victimGrid {
  justify-content: center !important;
}