:root{
    --orange: #f08020;
    --orange-2: #d9631a;
    --purple: #5a1f78;
    --purple-2: #3b1254;
    --dark: #2d242a;
    --card: #2e272b;
    --cream: #ffffff;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:#2a1238;color:var(--cream);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  /* Browser automatic hyphenation uit voor alle body tekst */
  html,body,p,li,span{-webkit-hyphens:manual;hyphens:manual}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1600px;margin:0 auto;padding:0 40px;position:relative}

  /* ======================================== */
  /* NAV - same pattern as main page */
  /* ======================================== */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;
    padding:40px 48px 24px;
    background:rgba(20,8,32,0);backdrop-filter:blur(0);
    transition:background .25s ease, backdrop-filter .25s ease, padding .25s ease, box-shadow .25s ease;
  }
  .nav.scrolled{
    background:linear-gradient(95deg, rgba(90,26,138,.92) 0%, rgba(125,34,144,.92) 20%, rgba(180,61,122,.92) 48%, rgba(226,90,42,.92) 78%, rgba(240,128,32,.92) 100%);
    backdrop-filter:blur(14px) saturate(1.2);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    padding:40px 48px 32px;
    box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 10px 32px rgba(0,0,0,.28);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1200 120'><path d='M 0 0 L 1200 0 L 1200 90 Q 600 130 0 90 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1200 120'><path d='M 0 0 L 1200 0 L 1200 90 Q 600 130 0 90 Z' fill='black'/></svg>");
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  .nav-left{display:flex;gap:40px;align-items:center;justify-content:flex-end}
  .nav-right{display:flex;gap:40px;align-items:center;justify-content:flex-start}
  .nav a.link{
    font-family:'Conduit ITC','Archivo Black',sans-serif;font-weight:900;
    font-size:22px;letter-spacing:.02em;text-transform:uppercase;color:#fff;
    transition:color .2s;
  }
  .nav a.link:hover{color:var(--orange)}
  .nav .logo{display:block;width:180px;height:auto;flex-shrink:0;transition:width .25s ease}
  .nav .logo img{display:block;width:100%;height:auto}
  .nav.scrolled .logo{width:144px}

  .hamburger{
    display:none;position:absolute;top:50%;right:14px;transform:translateY(-50%);
    background:transparent;border:0;cursor:pointer;padding:6px;
    width:32px;height:32px;flex-direction:column;justify-content:center;align-items:center;gap:4px;z-index:55;
  }
  .hamburger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease, opacity .2s ease}
  .nav.menu-open .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav.menu-open .hamburger span:nth-child(2){opacity:0}
  .nav.menu-open .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  @media (max-width:750px){
    .nav{grid-template-columns:1fr auto 1fr;padding:8px 14px;gap:0}
    .nav.scrolled{padding:6px 14px 14px}
    .nav .logo{width:108px;margin:0 auto}
    .nav.scrolled .logo{width:92px}
    .nav-left{display:none}
    .nav-right{display:none}
    .hamburger{display:flex;right:10px;padding:6px;width:32px;height:32px;gap:4px}
    .hamburger span{width:18px}
    .nav.menu-open{background:transparent!important;backdrop-filter:none!important;box-shadow:none!important;-webkit-mask-image:none!important;mask-image:none!important}
  }

  /* mobile drawer - full slide (matches frontpage) */
  .mobile-drawer{
    position:fixed;inset:0;z-index:49;opacity:0;pointer-events:none;
    background:rgba(10,5,20,.6);backdrop-filter:blur(6px);
    transition:opacity .3s ease;overflow:hidden;
  }
  .mobile-drawer.open{opacity:1;pointer-events:auto}
  .mobile-drawer-inner{
    position:absolute;top:0;right:0;bottom:0;width:100%;
    background:linear-gradient(170deg, #5a1a8a 0%, #7d2290 35%, #b43d7a 68%, #e25a2a 100%);
    padding:108px 28px 28px;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:flex-start;
    transform:translateX(100%);transition:transform .36s cubic-bezier(.2,.8,.2,1);
  }
  .mobile-drawer.open .mobile-drawer-inner{transform:translateX(0)}
  .mobile-drawer a{
    font-family:'Conduit ITC','Archivo Black',sans-serif;font-weight:900;
    font-size:30px;letter-spacing:.01em;text-transform:uppercase;color:#fff;
    padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);
    width:100%;max-width:440px;text-align:center;
    transition:transform .2s ease, color .2s ease;
  }
  .mobile-drawer a:hover{transform:scale(1.04);color:#ffd8a0}
  .mobile-drawer-socials{
    display:flex;gap:22px;margin-top:22px;align-items:center;justify-content:center;
  }
  .mobile-drawer-socials a{
    border:none;padding:0;width:36px;height:36px;display:grid;place-items:center;background:transparent;
  }
  .mobile-drawer-socials a svg{width:22px;height:22px;fill:#fff}

  /* ======================================== */
  /* HERO - same gradient language as az-band */
  /* ======================================== */
  .hero{
    position:relative;min-height:56vh;display:flex;align-items:center;justify-content:center;
    padding:160px 0 110px;overflow:hidden;text-align:center;
    background:linear-gradient(95deg, #5a1a8a 0%, #7d2290 22%, #b43d7a 50%, #e25a2a 80%, #f08020 100%);
  }
  .hero::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(ellipse 60% 60% at 18% 30%, rgba(255,255,255,.08) 0%, transparent 60%),
      radial-gradient(ellipse 70% 80% at 85% 85%, rgba(0,0,0,.2) 0%, transparent 65%);
  }
  .hero .wrap{z-index:2}
  .hero .hero-inner{max-width:900px;margin:0 auto;text-align:center}
  .hero h1{
    font-family:'Conduit ITC','Archivo Black',sans-serif;font-weight:900;
    font-size:clamp(56px,9vw,128px);line-height:.88;letter-spacing:-.02em;
    text-transform:uppercase;color:#fff;
    text-shadow:0 6px 40px rgba(0,0,0,.2);
  }
  .hero .lede{
    max-width:680px;margin:24px auto 0;
    font-family:'Inter',sans-serif;font-weight:400;font-size:15px;line-height:1.65;color:#fff;
  }
  .hero-meta{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;
    letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.95;
  }
  .hero-meta .dot{width:4px;height:4px;border-radius:50%;background:#fff;opacity:.6}

  /* curved section mask - hero bottom dips toward center, like main site */
  .hero-curve{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:120px;z-index:3;display:block}

  /* ======================================== */
  /* BODY - flowing prose, PDF-style           */
  /* ======================================== */
  .body{
    position:relative;
    background:linear-gradient(180deg, #2a1238 0%, #1f0d2a 55%, #1a0820 100%);
    padding:80px 0 140px;
  }
  .body::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(ellipse 80% 35% at 50% 0%, rgba(240,128,32,.14) 0%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 100% 20%, rgba(226,90,42,.08) 0%, transparent 65%),
      radial-gradient(ellipse 40% 55% at 0% 70%, rgba(90,31,120,.4) 0%, transparent 70%);
  }
  .doc{max-width:100%;margin:0 auto;position:relative}

  /* Eyebrow + subtitle above first heading */
  .doc .eyebrow{
    font-family:'Archivo',sans-serif;font-weight:800;font-size:11px;
    letter-spacing:.34em;text-transform:uppercase;color:var(--orange);margin-bottom:14px;
  }
  .doc > h2{
    font-family:'Conduit ITC','Archivo Black',sans-serif;font-weight:900;
    font-size:clamp(34px,4.4vw,54px);line-height:.95;letter-spacing:.005em;
    text-transform:uppercase;color:#fff;margin:56px 0 22px;
  }
  .doc > h2:first-of-type{margin-top:0}
  .doc > h2 .accent{color:#fff}
  /* Styling for rendered Page content (page.php uses the_content()) */
  .doc.doc-page .page-content h2{
    font-family:'Conduit ITC','Archivo Black',sans-serif;font-weight:900;
    font-size:clamp(34px,4.4vw,54px);line-height:.95;letter-spacing:.005em;
    text-transform:uppercase;color:#fff;margin:56px 0 22px;
  }
  .doc.doc-page .page-content h2:first-child{margin-top:0}
  .doc.doc-page .page-content p{
    font-family:'Inter',sans-serif;font-weight:400;font-size:15px;line-height:1.65;
    color:#fff;margin-bottom:18px;
  }
  .doc.doc-page .page-content ul{
    font-family:'Inter',sans-serif;font-weight:400;font-size:15px;line-height:1.65;
    color:#fff;margin:0 0 18px;padding-left:22px;
  }
  .doc.doc-page .page-content li{margin-bottom:6px}
  .doc.doc-page .page-content a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
  .doc.doc-page .page-content a:hover{color:#fff}
  .doc.doc-page .page-content strong{color:#fff;font-weight:700}
  .doc.doc-page .page-content em{opacity:.7;font-style:normal;font-size:14px;letter-spacing:.05em}
  .doc p{
    font-family:'Inter',sans-serif;font-weight:400;font-size:15px;line-height:1.65;
    color:#fff;margin-bottom:18px;text-wrap:pretty;
  }
  .doc p strong{color:#fff;font-weight:700}
  .doc .divider{
    border:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
    margin:48px 0;
  }
  .doc ul.pill-list{
    list-style:none;padding:0;margin:4px 0 22px;
    display:flex;flex-wrap:wrap;gap:8px;
  }
  .doc ul.pill-list li{
    font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
    letter-spacing:.14em;text-transform:uppercase;
    padding:7px 14px;border-radius:999px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.9);
  }

  /* CTA knoppen voor buurt-pagina (en vergelijkbare pages) */
  .buurt-cta{display:flex;flex-wrap:wrap;gap:16px;margin:32px 0 12px}
  .doc.doc-page .page-content .buurt-btn{
    display:inline-flex;align-items:center;gap:12px;
    padding:14px 28px;border:2px solid #fff;border-radius:999px;
    background:transparent;color:#fff;text-decoration:none;
    font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;
    letter-spacing:.22em;text-transform:uppercase;
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }
  .doc.doc-page .page-content .buurt-btn:hover{
    background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-2px);
  }
  .doc.doc-page .page-content .buurt-btn .arrow{
    width:24px;height:24px;border-radius:50%;background:#fff;color:var(--orange);
    display:grid;place-items:center;transition:background .2s ease, color .2s ease;
  }
  .doc.doc-page .page-content .buurt-btn:hover .arrow{background:#fff;color:var(--orange)}
  .doc.doc-page .page-content .buurt-btn .arrow svg{width:10px;height:10px}
  @media (max-width:600px){
    .buurt-cta{flex-direction:column;align-items:stretch}
    .doc.doc-page .page-content .buurt-btn{justify-content:space-between}
  }

  /* Final CTA band - mimic main page band language */
  .cta-band{
    position:relative;margin-top:80px;padding:56px 40px;border-radius:20px;
    background:linear-gradient(95deg, #5a1a8a 0%, #7d2290 30%, #b43d7a 65%, #e25a2a 100%);
    text-align:center;overflow:hidden;
  }
  .cta-band h3{
    font-family:'Conduit ITC','Archivo Black',sans-serif;font-weight:900;
    font-size:clamp(36px,5vw,64px);line-height:.95;letter-spacing:.01em;
    text-transform:uppercase;margin-bottom:14px;color:#fff;
  }
  .cta-band p{color:rgba(255,255,255,.92);max-width:520px;margin:0 auto 26px;font-size:15px;line-height:1.55}
  .cta-band .btn{
    display:inline-flex;align-items:center;gap:12px;
    padding:14px 26px;border:2px solid #fff;border-radius:999px;
    font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;
    letter-spacing:.14em;text-transform:uppercase;color:#fff;
    transition:all .2s;
  }
  .cta-band .btn:hover{background:#fff;color:var(--orange)}
  .cta-band .btn .arrow{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--orange);display:grid;place-items:center}
  .cta-band .btn:hover .arrow{background:var(--orange);color:#fff}
  .cta-band .btn .arrow svg{width:10px;height:10px}

  /* ======================================== */
  /* FOOTER - match main site                  */
  /* ======================================== */
  .site-footer{background:#1a0820;border-top:1px solid rgba(255,255,255,.06);padding:40px 0 30px;color:rgba(255,255,255,.55);position:relative}
  .foot-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .foot-logo img{width:90px;height:auto;opacity:.8;display:block}
  .foot-links{display:flex;gap:28px;flex-wrap:wrap;font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
  .foot-links a{color:rgba(255,255,255,.7);transition:color .2s}
  .foot-links a:hover{color:var(--orange)}
  .foot-copy{font-family:'Archivo',sans-serif;font-weight:700;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.4)}
  .foot-copy a{color:rgba(255,255,255,.55);transition:color .2s}
  .foot-copy a:hover{color:var(--orange)}

  @media (max-width:720px){
    .wrap{padding:0 20px}
    .hero{padding:140px 0 70px;min-height:52vh}
    .body{padding:80px 0 100px}
    .cta-band{padding:40px 24px}
    .foot-inner{justify-content:center;text-align:center;gap:20px}
    .doc > h2{margin:44px 0 16px}
  }