/* ===========================================================================
   Magische Fotospiegel — eigentijds, conversiegericht ontwerp (donker premium)
   Merk: rood #DA2A3D · goud/champagne #D8B45C · Montserrat
   =========================================================================== */
:root{
  --sp-primary:#DA2A3D;--sp-primary-contrast:#fff;--sp-primary-dark:#b21f30;
  --gold:#D8B45C;--gold-soft:#e6cf95;
  --sp-secondary:#1A2023;
  --sp-bg:#1B2225;--sp-surface:#232B2F;--sp-surface-2:#2D373C;
  --sp-line:rgba(255,255,255,.11);--sp-line-strong:rgba(255,255,255,.2);
  --sp-text:#CDD3D7;--sp-muted:#9AA1A6;--sp-heading:#fff;
  --cream:#F5F2EA;
  --sp-radius:20px;--sp-btn-radius:999px;
  --sp-shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --sp-font:"Montserrat",system-ui,sans-serif;--sp-font-heading:"Montserrat",system-ui,sans-serif;
  --sp-container:1220px;--sp-gutter:24px;
}
html{scroll-behavior:smooth}
body{background:var(--sp-bg);color:var(--sp-text);-webkit-font-smoothing:antialiased}
::selection{background:var(--sp-primary);color:#fff}
h1,h2,h3,h4{color:var(--sp-heading);font-weight:800;letter-spacing:-.02em}
h1{font-weight:800}
a{color:var(--gold-soft)}a:hover{color:var(--gold)}
img{display:block}

/* ---- eyebrow / kicker ---- */
.eyebrow,.sp-w-heading .sp-subtitle{display:inline-flex;align-items:center;gap:.6em;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 .9rem}
.sp-heading.sp-accent::after{background:linear-gradient(90deg,var(--sp-primary),var(--gold));height:3px;width:64px}

/* =============================== HEADER =============================== */
.topbar{background:linear-gradient(90deg,var(--sp-primary),var(--sp-primary-dark));color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.02em}
.topbar .sp-container{display:flex;justify-content:center;gap:2rem;align-items:center;min-height:38px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;opacity:.95}.topbar a:hover{opacity:1}
.topbar .dot{opacity:.5}

.site-header{position:sticky;top:0;z-index:100;background:rgba(15,18,19,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--sp-line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:80px;gap:2rem}
.site-logo img{height:50px;width:auto}
.header-right{display:flex;align-items:center;gap:1.75rem}
.site-nav .sp-menu{display:flex;gap:.15rem;list-style:none;margin:0;padding:0}
.site-nav .sp-menu>li>a{display:block;color:#EAEDEE;font-size:.9rem;font-weight:600;padding:.55em 1.05em;border-radius:999px;text-decoration:none;transition:.15s}
.site-nav .sp-menu>li>a:hover{color:#fff;background:rgba(255,255,255,.06)}
.site-nav .sp-menu>li.is-active>a{color:#fff;background:rgba(218,42,61,.16);box-shadow:inset 0 0 0 1px rgba(218,42,61,.4)}
.header-phone{color:#fff;font-weight:700;text-decoration:none;font-size:.92rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.5em}
.header-phone svg{width:18px;height:18px;color:var(--gold)}
.header-cta{white-space:nowrap;background:var(--sp-primary);color:#fff;font-size:.88rem;font-weight:700;padding:.75em 1.6em;border-radius:999px;text-decoration:none;box-shadow:0 8px 24px -8px rgba(218,42,61,.8);transition:.15s}
.header-cta:hover{background:var(--sp-primary-dark);color:#fff;transform:translateY(-1px)}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.menu-btn span{width:26px;height:2px;background:#fff;border-radius:2px;transition:.2s}
@media(max-width:960px){
  .header-phone{display:none}.menu-btn{display:flex}
  .header-inner{height:68px}.site-logo img{height:42px}
  .site-nav{position:fixed;inset:68px 0 0;background:var(--sp-bg);padding:1.5rem;transform:translateX(100%);transition:.28s;z-index:99;overflow:auto}
  .site-nav.is-open{transform:none}
  .site-nav .sp-menu{flex-direction:column;align-items:stretch;gap:.25rem}
  .site-nav .sp-menu>li>a{padding:1em 1.1em;font-size:1.05rem;border-radius:12px}
  body.menu-open{overflow:hidden}
}

/* =============================== BUTTONS =============================== */
.sp-btn{font-weight:700;font-size:.92rem;letter-spacing:.01em;padding:1em 2.1em;border-radius:var(--sp-btn-radius);box-shadow:none;transition:.16s;text-transform:none}
.sp-btn-primary{background:var(--sp-primary);color:#fff;box-shadow:0 12px 30px -12px rgba(218,42,61,.8)}
.sp-btn-primary:hover{background:var(--sp-primary-dark);transform:translateY(-2px)}
.sp-btn-secondary,.sp-btn-outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px var(--sp-line-strong)}
.sp-btn-secondary:hover,.sp-btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold);transform:translateY(-2px)}
.sp-btn-l{font-size:1rem;padding:1.1em 2.4em}
.sp-btnrow{display:flex;gap:1rem;flex-wrap:wrap}
.sp-btnrow .sp-widget{margin:0!important}
.sp-text-center .sp-btnrow,.sp-col.sp-text-center.sp-btnrow{justify-content:center}

/* =============================== SECTIONS =============================== */
.sp-pad-m{padding:5.5rem 0}.sp-pad-l{padding:7.5rem 0}.sp-pad-s{padding:3rem 0}.sp-pad-xl{padding:9rem 0}
@media(max-width:768px){.sp-pad-m{padding:3.5rem 0}.sp-pad-l{padding:4.5rem 0}.sp-pad-xl{padding:5rem 0}}
.section-tint{background:var(--sp-surface)}
.section-gradient{background:radial-gradient(120% 100% at 50% 0,rgba(218,42,61,.09),transparent 60%),var(--sp-bg)}
/* lichte sectie voor variatie (warm cream) */
.section-light{background:var(--cream);color:#4a5155}
.section-light h1,.section-light h2,.section-light h3,.section-light h4{color:#1b1f21}
.section-light .eyebrow,.section-light .sp-w-heading .sp-subtitle{color:var(--sp-primary)}
.section-light p,.section-light .sp-w-text{color:#525a5e}
.section-light .sp-iconbox{background:#fff;border-color:#eae5da;box-shadow:0 14px 34px -22px rgba(0,0,0,.35)}
.section-light .sp-iconbox:hover{border-color:rgba(216,180,92,.6)}
.section-light .sp-iconbox-title{color:#1b1f21}
.section-light .sp-iconbox-text{color:#5c6367}
.section-light .sp-w-text ul li{color:#3f4649}

/* =============================== HERO =============================== */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;padding:7.5rem 0 5.5rem}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,26,29,.5) 0%,rgba(20,26,29,.35) 40%,rgba(27,34,37,.94) 100%);z-index:1}
.hero>.sp-container{position:relative;z-index:2;max-width:var(--sp-container);margin:0 auto;padding:0 var(--sp-gutter)}
.hero .sp-heading{font-size:clamp(2.6rem,6vw,4.8rem);line-height:1.04;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.5);margin-bottom:1.4rem}
.hero .sp-w-heading .sp-subtitle{color:var(--gold)}
.hero .sp-w-text{max-width:54ch;font-size:1.18rem;color:#E4E7E9;margin-bottom:2.2rem}
.hero-badges{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;color:#fff;font-weight:600;font-size:.92rem}
.hero-badges .stars{color:var(--gold);letter-spacing:.1em}
.hero .sp-w-button{display:inline-block;margin:.4rem 1rem .4rem 0}
.hero .sp-w-text.hero-badges{max-width:none;margin:2.4rem 0 0;font-size:.92rem}
.hero-badges p{margin:0}
@media(max-width:768px){.hero{min-height:auto;text-align:center;padding:5rem 0 3.5rem}.hero .sp-heading{margin-inline:auto}.hero .sp-w-text{margin-inline:auto}.hero .sp-w-button{margin-inline:.35rem}.hero-badges{justify-content:center}}

/* =============================== nieuwe blokken =============================== */
/* volle-breedte sfeerband met parallax */
.image-band{position:relative;min-height:52vh;display:flex;align-items:center;overflow:hidden}
.image-band::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,26,29,.82),rgba(20,26,29,.45));z-index:1}
.image-band>.sp-container{position:relative;z-index:2;max-width:var(--sp-container);margin:0 auto;padding:0 var(--sp-gutter)}
.image-band .sp-heading{font-size:clamp(1.8rem,4vw,3rem);max-width:20ch}
.image-band .sp-w-text{max-width:46ch;color:#E4E7E9}
/* split: beeld naast tekst met checklist */
.split-media .sp-figure img{border-radius:var(--sp-radius);box-shadow:var(--sp-shadow)}
/* genummerde stappen */
.steps .sp-iconbox{counter-increment:step;position:relative}
.steps .sp-iconbox .sp-iconbox-icon::after{content:counter(step);position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%;background:var(--sp-primary);color:#fff;font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.steps{counter-reset:step}
/* faq-teaser smaller */
.faq-narrow{max-width:820px;margin:0 auto}

/* =============================== STATS =============================== */
.sp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;text-align:center}
.sp-stats-cards .sp-stat{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:2rem 1rem}
.sp-stats-divided .sp-stat+.sp-stat{border-left:1px solid var(--sp-line)}
.sp-stat-num{font-family:var(--sp-font-heading);font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:#fff;letter-spacing:-.03em}
.sp-stat-pre,.sp-stat-suf{color:var(--gold)}
.sp-stat-label{margin-top:.6rem;color:var(--sp-muted);font-size:.9rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase}

/* =============================== ICON-BOX (event cards) =============================== */
.sp-iconbox{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:2.2rem;height:100%;transition:.2s}
.sp-iconbox:hover{transform:translateY(-6px);border-color:rgba(216,180,92,.5);box-shadow:var(--sp-shadow)}
.sp-iconbox-icon{width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(135deg,rgba(218,42,61,.22),rgba(216,180,92,.16));color:var(--gold);margin-bottom:1.2rem}
.sp-iconbox-icon .sp-icon{width:26px;height:26px}
.sp-iconbox-title{color:#fff;font-size:1.15rem;margin-bottom:.5rem}
.sp-iconbox-text{color:var(--sp-muted);font-size:.94rem;line-height:1.6}
.sp-iconbox-left{display:flex;gap:1.1rem;align-items:flex-start}.sp-iconbox-left .sp-iconbox-icon{margin-bottom:0;flex:none}

/* =============================== PRICING =============================== */
.sp-pricing{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius);box-shadow:none;padding:2.6rem;height:100%;transition:.2s}
.sp-pricing:hover{border-color:var(--sp-line-strong)}
.sp-pricing-title{color:#fff;font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold)}
.sp-pricing-price{margin:.4rem 0 .3rem}
.sp-pricing-cur{color:var(--gold);opacity:1;font-weight:700}
.sp-pricing-amount{color:#fff;font-size:3.2rem;font-weight:800;letter-spacing:-.03em}
.sp-pricing-period{color:var(--sp-muted)}
.sp-pricing-features{margin-top:1.4rem;border-top:1px solid var(--sp-line);padding-top:1.4rem}
.sp-pricing-features li{color:var(--sp-text);font-size:.94rem}
.sp-pricing-features .sp-icon{color:var(--gold)}
.sp-pricing-btn .sp-btn{width:100%;justify-content:center;display:flex}
.sp-pricing-featured{border:1.5px solid var(--sp-primary);box-shadow:0 30px 70px -30px rgba(218,42,61,.6);transform:scale(1.03)}
.sp-pricing-featured .sp-pricing-tag{background:linear-gradient(90deg,var(--sp-primary),var(--sp-primary-dark))}
@media(max-width:820px){.sp-pricing-featured{transform:none}}

/* =============================== TESTIMONIALS =============================== */
.sp-quote{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:2rem;position:relative}
.sp-quote::before{content:'★★★★★';display:block;color:var(--gold);letter-spacing:.15em;margin-bottom:1rem;font-size:.95rem}
.sp-quote p{color:#E4E7E9;font-style:normal;font-size:1rem;line-height:1.7}
.sp-quote footer{margin-top:1.2rem;display:flex;align-items:center;gap:.8rem}
.sp-quote cite{color:#fff;font-weight:700;font-style:normal}
.sp-quote cite+span,.sp-quote footer span{color:var(--sp-muted);font-size:.85rem}
.sp-quote-img{width:44px;height:44px;border-radius:50%;object-fit:cover}

/* =============================== GALLERY =============================== */
.sp-gallery-item{border-radius:14px;overflow:hidden;background:var(--sp-surface-2)}
.sp-gallery-item img{transition:transform .5s,filter .3s;filter:saturate(1.02)}
.sp-gallery-item a:hover img{transform:scale(1.06)}

/* =============================== CTA band =============================== */
.sp-cta{border-radius:calc(var(--sp-radius) + 6px);padding:3.5rem;background:
   radial-gradient(120% 140% at 100% 0,rgba(216,180,92,.22),transparent 55%),
   linear-gradient(120deg,var(--sp-primary),var(--sp-primary-dark));color:#fff;box-shadow:var(--sp-shadow)}
.sp-cta h3{font-size:clamp(1.6rem,3vw,2.4rem);color:#fff}
.sp-cta p{opacity:.92}
.sp-cta .sp-btn-light,.sp-cta .sp-btn{background:#fff;color:var(--sp-primary-dark)}
.sp-cta .sp-btn:hover{background:var(--gold);color:#1a1a1a}
.cta-band{background:radial-gradient(90% 120% at 50% 0,rgba(218,42,61,.12),transparent 60%)}

/* =============================== FAQ / accordion =============================== */
.sp-accordion .sp-acc-item{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:14px;margin-bottom:.75rem;overflow:hidden}
.sp-acc-title{color:#fff;font-weight:600;padding:1.15rem 1.3rem}
.sp-acc-title:hover{color:var(--gold)}
.sp-acc-body{color:var(--sp-muted)}

/* =============================== FORM =============================== */
.sp-form{--fw:1}
.sp-form label{color:#EAEDEE;font-size:.85rem;font-weight:600}
.sp-form input,.sp-form textarea,.sp-form select{background:var(--sp-surface-2);color:#fff;border:1px solid var(--sp-line);border-radius:12px;padding:.85em 1em}
.sp-form input:focus,.sp-form textarea:focus,.sp-form select:focus{outline:none;border-color:var(--sp-primary);box-shadow:0 0 0 3px rgba(218,42,61,.2)}
.sp-form input::placeholder,.sp-form textarea::placeholder{color:var(--sp-muted)}
.sp-form .sp-choices label,.sp-form .sp-check{color:var(--sp-text);font-weight:500}
.sp-form.sp-card{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:2.2rem}
.sp-form-message.ok{color:var(--gold)}

/* page hero for interne pagina's */
.page-hero{position:relative;padding:6rem 0 2.5rem;background:radial-gradient(90% 140% at 50% 0,rgba(218,42,61,.14),transparent 60%)}
.page-hero .eyebrow{color:var(--gold)}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:0}

/* rich text lists */
.sp-w-text ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem;margin:1rem 0}
.sp-w-text ul li{padding-left:1.8em;position:relative;color:var(--sp-text)}
.sp-w-text ul li::before{content:'';position:absolute;left:0;top:.45em;width:1.05em;height:1.05em;background:
  no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8B45C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}

/* =============================== FOOTER =============================== */
.site-footer{background:#141A1C;color:var(--sp-muted);padding:5rem 0 2rem;border-top:1px solid var(--sp-line)}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .9fr;gap:3rem}
.footer-brand img{height:60px;margin-bottom:1.2rem}
.footer-brand p{max-width:38ch;font-size:.92rem;line-height:1.7}
.site-footer h4{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.2rem}
.footer-contact,.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;font-size:.92rem}
.footer-contact a,.footer-links a{color:var(--sp-text);text-decoration:none}
.footer-contact a:hover,.footer-links a:hover{color:var(--gold)}
.footer-social{display:flex;gap:.7rem;margin-top:1.4rem}
.footer-social a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.06);color:#fff;transition:.15s}
.footer-social a:hover{background:var(--sp-primary)}
.footer-social svg{width:19px;height:19px}
.footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--sp-line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--sp-muted)}
.footer-bottom a{color:var(--sp-muted);text-decoration:none;margin-left:1.2rem}.footer-bottom a:hover{color:#fff}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:2rem}}

/* cookiebanner past bij thema */
.sp-cookies-box{background:var(--sp-surface);color:var(--sp-text);border:1px solid var(--sp-line)}