/* De Nachtwacht — sectie-stijl uit Bar de Nachtwacht.html */
@import url('https://fonts.cdnfonts.com/css/gilroy-bold');
  :root{
    --ink:        #1d1411;
    --ink-2:      #292524;
    --panel:      #3b2a25;
    --gold:       #c8a96c;
    --gold-deep:  #b3935a;
    --cream:      #eae5da;
    --muted:      #a89e92;
    --red:        #8b1f1b;
    --line:       rgba(234,229,218,0.14);
    --line-gold:  rgba(200,169,108,0.42);
    --serif: "Gilroy", "Montserrat", system-ui, sans-serif;
    --sans: "Gilroy", "Montserrat", system-ui, sans-serif;
    --maxw: 1240px;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:var(--sans);
    background:var(--ink);
    color:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }

  .eyebrow{
    font-size:12px; letter-spacing:.32em; text-transform:uppercase;
    color:var(--gold); font-weight:600;
    display:inline-flex; align-items:center; gap:.8em;
  }
  .eyebrow::before, .eyebrow.center::after{
    content:""; width:34px; height:1px; background:var(--line-gold);
  }

  h1,h2,h3{ font-family:var(--serif); font-weight:700; line-height:1.06; letter-spacing:-0.01em; }

  /* ---------- Logo ---------- */
  .brand{ display:flex; align-items:center; user-select:none; }
  .brand img{ height:62px; width:auto; transition:height .4s ease; }
  .brand-footer img{ height:84px; }

  /* ---------- Header ---------- */
  header{
    position:fixed; inset:0 0 auto 0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 40px;
    transition:background .4s ease, padding .4s ease, border-color .4s ease, backdrop-filter .4s ease;
    border-bottom:1px solid transparent;
  }
  header.solid{
    background:rgba(29,20,17,0.96);
    border-bottom:1px solid var(--line);
    padding:14px 40px;
  }
  header .brand img{ height:72px; }
  header.solid .brand img{ height:52px; }
  nav.main{ display:flex; align-items:center; gap:30px; }
  nav.main a{
    font-size:13.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
    color:var(--cream); opacity:.82; position:relative; padding:4px 0; transition:opacity .25s; white-space:nowrap;
  }
  nav.main a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
    background:var(--gold); transition:width .3s ease;
  }
  nav.main a:hover{ opacity:1; }
  nav.main a:hover::after{ width:100%; }
  nav.main a.btn{ padding:13px 30px; opacity:1; }
  nav.main a.btn::after{ display:none; }
  .btn{
    font-family:var(--sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    font-weight:700; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:.6em;
    transition:transform .2s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  }
  .btn-gold{
    background:var(--gold); color:#1d1411;
    padding:15px 36px; border-radius:9px; border:1px solid var(--gold-deep);
    box-shadow:0 6px 24px rgba(0,0,0,0.35);
  }
  .btn-gold:hover{ background:var(--cream); transform:translateY(-2px); }
  .btn-cta{
    background:var(--red); color:var(--cream);
    padding:15px 36px; border-radius:9px; border:1px solid var(--red);
    box-shadow:0 6px 24px rgba(0,0,0,0.35);
  }
  .btn-cta:hover{ background:#a32621; border-color:#a32621; transform:translateY(-2px); }
  .btn-ghost{
    background:transparent; color:var(--cream); padding:15px 34px;
    border:1px solid var(--line-gold); border-radius:9px;
  }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
  .menu-toggle{ display:none; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative; min-height:100svh; display:flex; flex-direction:column;
    justify-content:center; align-items:center; text-align:center;
    padding:140px 32px 90px;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%; object-fit:cover; object-position:center;
    transform:scale(1.3);
  }
  .hero-scrim{
    content:""; position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(120% 90% at 50% 30%, transparent 0%, rgba(29,20,17,0.55) 70%),
      linear-gradient(to bottom, rgba(29,20,17,0.80) 0%, rgba(29,20,17,0.45) 38%, rgba(29,20,17,0.82) 78%, var(--ink) 100%);
  }
  /* Breed genoeg voor een lange titel op 2 regels (bv. "Waar de dag eindigt,
     begint De Nachtwacht"); fijnregelen kan per sectie via de Stijl-tab. */
  .hero-inner{ position:relative; z-index:2; width:100%; max-width:1160px; }
  .hero .mark{ font-size:26px; margin-bottom:34px; }
  @media(min-width:760px){ .hero .mark{ font-size:34px; } }
  .hero h1{
    font-size:clamp(40px, 6.4vw, 86px);
    letter-spacing:.005em;
    text-wrap:balance;
    margin-bottom:22px;
  }
  .hero h1 em{ font-style:normal; color:var(--gold); font-weight:800; }
  /* Telefoon: dezelfde 2 regels als op desktop ("Waar de dag eindigt," /
     "begint De Nachtwacht") — de titel schaalt zo dat de langste regel op
     één regel past. De titel mag breder dan de rest (negatieve marge tot
     12px van de schermrand), zodat de letters zo groot mogelijk blijven.
     De formule volgt die beschikbare breedte (schermbreedte − 2×12px),
     gedeeld door de breedte van de langste regel in em's. Daarbovenop meet
     denachtwacht.js het echte resultaat en verkleint verder tot max 2 regels. */
  @media(max-width:640px){
    .hero h1{
      margin-left:-20px; margin-right:-20px;
      font-size:clamp(20px, (100vw - 24px)/12.3, 46px);
    }
  }
  .hero p.lead{
    font-size:clamp(16px,1.6vw,19px); color:var(--cream); opacity:.86;
    max-width:560px; margin:0 auto 38px; text-wrap:pretty;
  }
  .hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

  .scrollcue{
    position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
    font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .scrollcue .line{ width:1px; height:42px; background:linear-gradient(var(--gold), transparent);
    animation:cue 2.4s ease-in-out infinite; transform-origin:top; }
  @keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

  /* info strip under hero */
  .strip{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:var(--ink-2);
  }
  .strip .wrap{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  }
  .strip .cell{
    padding:30px 24px; text-align:center;
    border-right:1px solid var(--line);
  }
  .strip .cell:last-child{ border-right:none; }
  .strip .cell .k{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; }
  .strip .cell .v{ font-family:var(--serif); font-size:23px; margin-top:8px; color:var(--cream); }
  .strip .cell .v small{ font-family:var(--sans); font-size:13px; color:var(--muted); display:block; letter-spacing:.04em; }

  /* ---------- Section: welkom ---------- */
  section{ padding:110px 0; }
  .welkom .wrap{
    display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center;
  }
  .welkom .copy h2{ font-size:clamp(32px,4vw,52px); margin:18px 0 22px; }
  .welkom .copy p{ color:var(--muted); font-size:16.5px; margin-bottom:18px; text-wrap:pretty; }
  .welkom .copy p strong{ color:var(--cream); font-weight:600; }
  /* Welkom-beeld in schilderijlijst, gelijk aan Over ons (.frame > .art) */
  .welkom .frame .art{ height:520px; }
  .sig{ margin-top:30px; }

  /* ---------- Section: agenda / sfeer cards ---------- */
  .sfeer{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .sfeer .head{ text-align:center; max-width:640px; margin:0 auto 56px; }
  .sfeer .head h2{ font-size:clamp(32px,4vw,52px); margin-top:16px; }
  .sfeer .head p{ color:var(--muted); margin-top:14px; }
  .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

  /* ---------- Agenda lijst ---------- */
  .agenda-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
    margin-bottom:44px; flex-wrap:wrap;
  }
  .agenda-head h2{ font-size:clamp(32px,4vw,52px); }
  .events{ list-style:none; }
  .event{
    display:grid; grid-template-columns:96px 1fr auto; gap:32px; align-items:center;
    padding:28px 0; border-top:1px solid var(--line);
    transition:padding-left .3s ease;
  }
  .events .event:last-child{ border-bottom:1px solid var(--line); }
  .event:hover{ padding-left:10px; }
  .event .date{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    border:1px solid var(--line-gold); border-radius:3px; padding:12px 0; width:96px;
  }
  .event .date .d{ font-family:var(--serif); font-size:34px; line-height:1; color:var(--cream); }
  .event .date .m{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; margin-top:4px; }
  .event.hot .date{ background:var(--gold); border-color:var(--gold); }
  .event.hot .date .d{ color:#1d1411; }
  .event.hot .date .m{ color:#3b2a25; }
  .event .info h3{ font-size:25px; margin-bottom:6px; }
  .event .info p{ color:var(--muted); font-size:14.5px; max-width:520px; }
  .event .meta{ text-align:right; }
  .event .meta .day{ display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; }
  .event .meta .t{ display:block; font-family:var(--serif); font-size:19px; color:var(--cream); margin-top:4px; }
  .card{
    background:var(--ink); border:1px solid var(--line); border-radius:3px;
    padding:38px 32px; transition:border-color .3s ease, transform .3s ease;
  }
  .card:hover{ border-color:var(--line-gold); transform:translateY(-4px); }
  .card .num{ font-family:var(--sans); font-weight:700; font-size:18px; color:var(--gold-deep); }
  .card h3{ font-size:27px; margin:14px 0 12px; }
  .card p{ color:var(--muted); font-size:15px; }
  .card .when{ margin-top:20px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; }

  /* ---------- Section: openingstijden ---------- */
  .hours .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
  .hours .wrap{ display:block; }
  .hours .copy{ max-width:680px; margin:0 auto 52px; text-align:center; }
  .hours .copy h2{ font-size:clamp(32px,4vw,52px); margin:0 0 20px; }
  .hours .copy p{ color:var(--muted); margin:0 auto 28px; max-width:480px; }
  .hourreel{ max-width:600px; margin:0 auto; }
  .hrow{
    display:flex; justify-content:space-between; align-items:center; gap:24px;
    padding:6px 0; border-bottom:1px solid var(--line);
  }
  .hrow:first-child{ border-top:1px solid var(--line); }
  .hrow .hday{ font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; transition:color .4s ease; }
  .hrow.open .hday{ color:var(--cream); }
  .hrow.today .hday{ color:var(--gold); }
  .hrow.today::after{
    content:"Vandaag geopend"; order:3; font-family:var(--sans); font-size:10px;
    letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--gold-deep);
  }
  .reel{ height:46px; line-height:46px; overflow:hidden; flex:0 0 auto; min-width:200px; text-align:right; }
  .reelstrip{ display:flex; flex-direction:column; transform:translateY(0); }
  .reelstrip.spin{ transition:transform 1.5s cubic-bezier(.13,.9,.2,1); }
  .reel .cell{ height:46px; font-family:var(--sans); font-weight:600; font-size:23px; color:var(--cream); white-space:nowrap; }
  .hrow.open .reel .cell{ color:var(--cream); }
  .hrow.today .reel .cell{ color:var(--gold); }
  .hrow.closed .reel .final{ font-style:italic; font-size:21px; color:var(--muted); }

  /* ---------- Foto galerij (doorlopende band) ---------- */
  .gallery{ background:var(--ink); }
  .gallery-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
  .gallery-head h2{ font-size:clamp(32px,4vw,52px); }
  .gallery-head p{ color:var(--muted); margin-top:14px; }
  .marquee{
    width:100%; overflow:hidden;
    -webkit-mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .marquee-track{
    display:flex; width:max-content; padding:34px 0;
    animation:marquee 48s linear infinite;
  }
  .marquee:hover .marquee-track{ animation-play-state:paused; }
  .polaroid{
    position:relative; flex:0 0 auto; width:326px; margin-right:44px; padding:17px;
    border-radius:3px;
    background:
      linear-gradient(135deg,#e7ca7f 0%,#a07f42 20%,#f2dca6 46%,#7c5d2c 70%,#cfa860 100%);
    box-shadow:
      0 24px 50px rgba(0,0,0,0.62),
      inset 0 0 0 3px rgba(58,38,12,0.6),
      inset 0 0 0 9px rgba(243,219,162,0.5),
      inset 0 0 22px rgba(120,86,38,0.6);
    transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
  }
  /* donkere passe-partout rand rond het 'doek' */
  .polaroid::before{
    content:""; position:absolute; inset:11px; z-index:2; pointer-events:none;
    border:3px solid rgba(34,22,10,0.85);
    box-shadow:inset 0 0 0 1px rgba(243,219,162,0.35);
  }
  .polaroid:nth-child(4n+1){ transform:rotate(-2.4deg); }
  .polaroid:nth-child(4n+2){ transform:rotate(1.8deg); }
  .polaroid:nth-child(4n+3){ transform:rotate(-1.2deg); }
  .polaroid:nth-child(4n+4){ transform:rotate(2.2deg); }
  .polaroid:hover{ transform:rotate(0deg) translateY(-10px) scale(1.04); box-shadow:0 30px 60px rgba(0,0,0,0.7), inset 0 0 0 3px rgba(58,38,12,0.6), inset 0 0 0 9px rgba(243,219,162,0.6); z-index:3; }
  .polaroid image-slot{
    display:block; width:100%; height:248px; background:#1a1209;
    filter:contrast(1.1) saturate(1.12) sepia(0.18) brightness(0.95);
  }
  /* vernis: zachte glans + vignet over het 'schilderij' */
  .polaroid::after{
    content:""; position:absolute; inset:17px; z-index:3; pointer-events:none;
    background:
      radial-gradient(130% 80% at 28% 18%, rgba(255,246,222,0.16), transparent 50%),
      radial-gradient(150% 130% at 50% 55%, transparent 52%, rgba(0,0,0,0.5));
  }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .gallery-cta{ text-align:center; margin-top:52px; padding:0 24px; }

  /* ---------- Instagram feed ---------- */
  .insta{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .insta-head{ text-align:center; max-width:640px; margin:0 auto 52px; }
  .insta-head h2{ font-size:clamp(30px,4vw,50px); margin-top:16px; }
  .insta-head h2 .at{ color:var(--gold); font-weight:800; }
  .insta-head p{ color:var(--muted); margin-top:14px; }
  .insta-head{ text-align:center; max-width:640px; margin:0 auto 46px; }
  .ig-marquee{ width:100%; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
  .ig-track{ display:flex; width:max-content; gap:24px; padding:6px 0; animation:igscroll 52s linear infinite; }
  .ig-marquee:hover .ig-track{ animation-play-state:paused; }
  @keyframes igscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .ig-post{ flex:0 0 auto; width:322px; background:var(--ink-2); border:1px solid var(--line); border-radius:10px; overflow:hidden; transition:transform .35s ease, border-color .35s ease; }
  .ig-post:hover{ transform:translateY(-5px); border-color:var(--line-gold); }
  .ig-post .ph{ display:flex; align-items:center; gap:11px; padding:13px 14px; }
  .ig-post .ph .av{ width:36px; height:36px; border-radius:50%; padding:2px; flex:0 0 auto;
    background:conic-gradient(from 210deg, #f2dca6, #c8a96c, #b3935a, #7c5d2c, #f2dca6); display:flex; align-items:center; justify-content:center; }
  .ig-post .ph .av img{ width:100%; height:100%; border-radius:50%; object-fit:contain; padding:5px; background:var(--ink); }
  .ig-post .ph .who{ display:flex; flex-direction:column; line-height:1.25; }
  .ig-post .ph .who b{ font-family:var(--sans); font-size:13px; font-weight:700; color:var(--cream); letter-spacing:.02em; }
  .ig-post .ph .who span{ font-size:11px; color:var(--muted); }
  .ig-post .ph .dots{ margin-left:auto; color:var(--cream); opacity:.8; letter-spacing:2px; font-weight:700; }
  .ig-post image-slot{ display:block; width:100%; height:auto !important; aspect-ratio:4/5 !important; background:#1a1209; filter:contrast(1.05) saturate(1.08); }
  .ig-post .acts{ display:flex; align-items:center; gap:15px; padding:12px 14px 4px; color:var(--cream); }
  .ig-post .acts svg{ display:block; }
  .ig-post .acts .save{ margin-left:auto; }
  .ig-post .likes{ padding:2px 14px 0; font-family:var(--sans); font-size:13px; font-weight:700; color:var(--cream); }
  .ig-post .cap{ padding:4px 14px 16px; font-size:13px; color:var(--muted); line-height:1.5; }
  .ig-post .cap b{ color:var(--cream); font-weight:700; }
  .insta-cta{ text-align:center; margin-top:46px; }
  @media (prefers-reduced-motion: reduce){ .ig-track{ animation:none; flex-wrap:wrap; justify-content:center; } .ig-marquee{ overflow:visible; -webkit-mask:none; mask:none; } }

  /* ---------- Partners ---------- */
  .partners{ background:var(--ink); }
  .partners .head{ text-align:center; max-width:660px; margin:0 auto 50px; }
  .partners .head h2{ font-size:clamp(30px,4vw,50px); }
  .partners .head p{ color:var(--muted); margin-top:14px; text-wrap:pretty; }
  .pmarquee{ width:100%; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
  .pmarquee-track{ display:flex; width:max-content; gap:22px; padding:4px 0; animation:pmarquee 38s linear infinite; }
  .pmarquee:hover .pmarquee-track{ animation-play-state:paused; }
  @keyframes pmarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .partner-tile{ flex:0 0 auto; width:200px; display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; padding:22px 28px; background:transparent; border:none; opacity:.92; transition:transform .3s ease, opacity .3s ease; }
  .partner-tile:hover{ transform:translateY(-4px); opacity:1; }
  .partner-tile img{ max-width:100%; max-height:66px; width:auto; height:auto; object-fit:contain; }
  .partner-note{ text-align:center; color:var(--muted); margin-top:46px; font-size:15px; }
  .partner-note a{ color:var(--gold); }
  .partner-note a:hover{ text-decoration:underline; }
  @media (prefers-reduced-motion: reduce){ .pmarquee-track{ animation:none; flex-wrap:wrap; justify-content:center; } .pmarquee{ overflow:visible; -webkit-mask:none; mask:none; } }

  /* ---------- Footer ---------- */
  footer{
    background:#160f0c; border-top:1px solid var(--line-gold);
    padding:80px 0 0;
  }
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:48px;
    padding-bottom:64px; border-bottom:1px solid var(--line);
  }
  footer .mark{ font-size:16px; align-items:flex-start; }
  footer .mark .sub{ padding-left:0; }
  .footer-brand p{ color:var(--muted); font-size:14.5px; margin-top:22px; max-width:300px; }
  footer h4{ font-family:var(--sans); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:22px; font-weight:700; }
  footer ul{ list-style:none; }
  footer .fcol li{ margin-bottom:13px; color:var(--muted); font-size:14.5px; }
  footer .fcol a{ transition:color .2s; }
  footer .fcol a:hover{ color:var(--gold); }
  .socials{ display:flex; gap:12px; margin-top:6px; }
  .socials a{
    width:42px; height:42px; border:1px solid var(--line); border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:var(--cream);
    font-size:12px; letter-spacing:.05em; transition:all .25s ease;
  }
  .socials a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
    padding:26px 0 34px; font-size:13px; color:var(--muted); letter-spacing:.04em;
  }
  .footer-bottom a:hover{ color:var(--gold); }
  .footer-bottom .legal{ display:flex; gap:24px; }
  .footer-bottom .legal a{ color:var(--muted); }

  /* ---------- Responsive ---------- */
  @media(max-width:920px){
    .welkom .wrap, .hours .wrap{ grid-template-columns:1fr; gap:48px; }
    .welkom .copy{ text-align:center; }
    .agenda-head{ flex-direction:column; align-items:center; text-align:center; }
    .cards{ grid-template-columns:1fr; }
    .event{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
    .event:hover{ padding-left:0; }
    .event .meta{ text-align:center; align-items:center; }
    .event .info p{ max-width:none; }
    .event .date{ width:84px; }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
    .welkom .frame .art{ height:420px; }
  }
  @media(max-width:1000px){
    header, header.solid{ padding:14px 20px; }
    header .brand img, header.solid .brand img{ height:46px; }
    .wrap{ padding:0 20px; }
    nav.main{
      position:fixed; inset:0; width:100%;
      flex-direction:column; align-items:center; justify-content:center; gap:4px;
      background:linear-gradient(160deg,#241712 0%,#1d1411 72%);
      padding:80px 24px;
      -webkit-clip-path:inset(0 100% 0 0); clip-path:inset(0 100% 0 0);
      transition:-webkit-clip-path .6s cubic-bezier(.76,0,.24,1), clip-path .6s cubic-bezier(.76,0,.24,1);
      border-left:none;
    }
    nav.main.open{ -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); }
    body.nav-open{ overflow:hidden; }
    body.nav-open header, body.nav-open header.solid{ -webkit-backdrop-filter:none; backdrop-filter:none; }
    nav.main a{ font-size:clamp(23px,7vw,32px); letter-spacing:.08em; text-transform:uppercase; text-align:center; color:var(--cream); padding:13px 0; border:none; opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease, color .25s; }
    nav.main a::after{ display:none; }
    nav.main.open a{ opacity:1; transform:translateY(0); }
    nav.main.open a:nth-child(1){ transition-delay:.20s; }
    nav.main.open a:nth-child(2){ transition-delay:.27s; }
    nav.main.open a:nth-child(3){ transition-delay:.34s; }
    nav.main.open a:nth-child(4){ transition-delay:.41s; }
    nav.main.open a:nth-child(5){ transition-delay:.48s; }
    nav.main.open a:nth-child(6){ transition-delay:.55s; }
    nav.main a:hover{ color:var(--gold); }
    .menu-toggle{
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
      width:44px; height:44px; background:none; border:none;
      cursor:pointer; z-index:60;
    }
    .menu-toggle span{ width:22px; height:2px; background:var(--cream); border-radius:2px; transition:.3s; }
    .menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2){ opacity:0; }
    .menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
    .strip .wrap{ grid-template-columns:1fr; }
    .strip .cell{ border-right:none; border-bottom:1px solid var(--line); }
    .strip .cell:last-child{ border-bottom:none; }
    .footer-grid{ grid-template-columns:1fr; text-align:center; gap:34px; }
    .footer-brand{ display:flex; flex-direction:column; align-items:center; }
    .footer-brand .brand{ justify-content:center; }
    .footer-brand p{ margin-left:auto; margin-right:auto; }
    .socials{ justify-content:center; }
    .footer-bottom{ flex-direction:column; justify-content:center; text-align:center; gap:12px; }
    .footer-bottom .legal{ justify-content:center; }
    section{ padding:80px 0; }
    .reel{ min-width:150px; }
    .reel .cell{ font-size:21px; }
    .hrow .hday{ font-size:12px; letter-spacing:.1em; }
  }

  /* ============ LOADER — "Spotlight" intro ============
     Cinematografische intro: het Nachtwacht-schilderij licht op onder een
     warme, bewegende spotlight; het logo schildert zichzelf in en vliegt
     daarna naar het logo in de header (hand-off via JS / FLIP). */
  .loader.dnw-spotlight{
    position:fixed; inset:0; overflow:hidden; z-index:9999;
    background:#0c0806; display:block;
    transition:opacity .8s ease, visibility .8s ease;
  }
  .loader.dnw-spotlight.done{ opacity:0; visibility:hidden; pointer-events:none; }

  .dnw-spotlight .spot-img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 30%;
    transform:scale(1.06); transform-origin:center 42%;
    will-change:transform,opacity;
  }
  .dnw-spotlight .spot-dark{ filter:brightness(.20) contrast(1.05) saturate(.8) sepia(.18); }
  .dnw-spotlight .spot-light{
    filter:brightness(1.02) contrast(1.18) sepia(.78) saturate(1.5) hue-rotate(-6deg);
    opacity:0;
    -webkit-mask-image:radial-gradient(circle 40% at var(--sx,10%) 48%, #000 0%, #000 24%, transparent 62%);
            mask-image:radial-gradient(circle 40% at var(--sx,10%) 48%, #000 0%, #000 24%, transparent 62%);
  }
  .dnw-spotlight .spot-warm{
    position:absolute; inset:0; mix-blend-mode:screen; opacity:0;
    background:radial-gradient(circle 38% at var(--sx,10%) 48%, rgba(214,168,92,0.56), rgba(202,156,86,0.12) 40%, transparent 66%);
  }
  .dnw-spotlight .loader-vignette{
    position:absolute; inset:0; pointer-events:none;
    box-shadow:inset 0 0 220px 70px rgba(0,0,0,0.72);
    background:radial-gradient(130% 130% at 50% 46%, transparent 48%, rgba(7,4,3,0.5) 100%);
  }
  .dnw-spotlight .loader-grain{
    position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
    background-image:var(--grain); background-size:180px 180px;
  }
  .dnw-spotlight .logo-stage{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:6;
  }
  .dnw-spotlight .logo-svg{
    width:min(58vw,720px); height:auto; overflow:visible; display:block;
    filter:drop-shadow(0 10px 40px rgba(0,0,0,0.55));
  }
  @media (max-width:720px){ .dnw-spotlight .logo-svg{ width:82vw; } .dnw-spotlight .spot-img{ object-position:center 32%; } }

  @keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

  /* ============ SCROLL REVEAL ============ */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.d1{ transition-delay:.08s; }
  .reveal.d2{ transition-delay:.16s; }
  .reveal.d3{ transition-delay:.24s; }

  /* ============ HERO ENTRANCE (optie B: kinetisch) ============ */
  .hero h1 span.w{ display:inline-block; opacity:0; transform:translateY(42px) scale(.92); }
  body.ready .hero h1 span.w{ animation:heroSlam .6s cubic-bezier(.2,.8,.2,1) forwards; }
  body.ready .hero h1 span.w:nth-of-type(1){ animation-delay:.10s; }
  body.ready .hero h1 span.w:nth-of-type(2){ animation-delay:.22s; }
  body.ready .hero h1 span.w:nth-of-type(3){ animation-delay:.34s; }
  body.ready .hero h1 span.w:nth-of-type(4){ animation-delay:.46s; }
  body.ready .hero h1 span.w:nth-of-type(5){ animation-delay:.58s; }
  body.ready .hero h1 span.w:nth-of-type(6){ animation-delay:.70s; }
  body.ready .hero h1 span.w:nth-of-type(7){ animation-delay:.82s; }
  .hero-inner .lead, .hero-inner .hero-cta{ opacity:0; }
  body.ready .hero-inner .lead{ animation:fadeUp .8s ease .95s forwards; }
  body.ready .hero-inner .hero-cta{ animation:fadeUp .8s ease 1.1s forwards; }
  @keyframes heroSlam{ to{ opacity:1; transform:translateY(0) scale(1); } }
  /* puls-gloed (optie B) */
  .hero-pulse{ position:absolute; inset:0; z-index:1; pointer-events:none; animation:heroPulse 3.4s ease-in-out infinite; }
  @keyframes heroPulse{ 0%,100%{ box-shadow:inset 0 0 160px rgba(200,169,108,0.10); } 50%{ box-shadow:inset 0 0 250px rgba(139,31,27,0.26); } }
  .hero-bg{ animation:kenburns 32s ease-in-out infinite alternate; }
  @keyframes kenburns{
    0%{ transform:scale(1.3) translate3d(0,0,0); }
    100%{ transform:scale(1.4) translate3d(-1.5%,-1%,0); }
  }

  @media (prefers-reduced-motion: reduce){
    .loader.dnw-spotlight{ display:none !important; }
    .hero-inner > *, .hero-bg, .hero-pulse{ animation:none !important; }
    .marquee-track{ animation:none !important; }
    .marquee{ overflow-x:auto; }
    .hero-inner > *{ opacity:1; transform:none; }
    .hero h1 span.w{ opacity:1; transform:none; }
    .hero-inner .lead, .hero-inner .hero-cta{ opacity:1; }
    .reveal{ opacity:1; transform:none; transition:none; }
  }