/* ========= Wedding Visions — Editorial design system ========= */
:root{
  --ivory: #F6F2EC;
  --paper: #EBE4D8;
  --ink: #141210;
  --ink-80: #2B2824;
  --ink-60: #5C554C;
  --ink-40: #8E867C;
  --ink-20: #C8C0B4;
  --rule: #D9D1C3;
  --sage: #8A9383;
  /* Brand accent — wine/burgundy */
  --gold: #8E3020;          /* legacy alias, mapped to accent */
  --accent: #8E3020;
  --accent-dark: #6e2317;   /* hover state */
  --accent-light: #fdf2f0;  /* subtle tint */
  --cocoa: #141210;         /* donkere secties (zwart, gelijk aan --ink) */
  --serif: "Playfair Display", "Times New Roman", serif;
  --sans: "Open Sans", system-ui, sans-serif;
  --hand: "Caveat", "Segoe Script", cursive;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}
::-moz-selection{background:var(--accent);color:#fff}
html{accent-color:var(--accent)}

/* Subtle cursor — default cursor stays, ring follows softly */
.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:999px;transform:translate(-50%,-50%);width:20px;height:20px;border:1px solid var(--ink-40);transition:width .4s cubic-bezier(.2,.8,.2,1), height .4s cubic-bezier(.2,.8,.2,1), opacity .3s, background .3s, border-color .3s;mix-blend-mode:difference;opacity:.5}
.cursor-ring.hover{width:44px;height:44px;opacity:.8}
.cursor-ring.view{width:72px;height:72px;opacity:1;background:rgba(255,255,255,.05)}
.cursor-ring.view::after{content:"KIJK";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sans);font-size:9px;letter-spacing:.22em;color:#fff}
@media (hover:none){.cursor-ring{display:none}}

/* Page transition — seamless crossfade covering full viewport */
.curtain{position:fixed;inset:0;z-index:8000;background:var(--ink);pointer-events:none;opacity:0;transition:opacity .45s cubic-bezier(.76,0,.24,1)}
.curtain.in{opacity:1;pointer-events:auto}
.curtain.out{opacity:0;pointer-events:none}

/* Typography */
.h-display{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.015em}
.h-eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--ink-60)}
.h-number{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--ink-40);font-variant-numeric:tabular-nums}
.h-hand{font-family:var(--hand);font-weight:400;line-height:1}
.italic-serif{font-family:var(--serif);font-style:italic;font-weight:400}
.rule{height:1px;background:var(--rule);width:100%}
.rule-dark{height:1px;background:var(--ink-20)}

/* Navigation */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;color:#fff;gap:32px;transition:background .3s, color .3s, border-color .3s}
.nav.solid{color:var(--ink);background:var(--ivory);border-bottom:1px solid var(--rule)}
.nav__logo{display:flex;align-items:center;line-height:1;flex-shrink:0}
.nav__logo-img{height:44px;width:auto;display:block;filter:brightness(0) invert(1);transition:filter .3s}
.nav.solid .nav__logo-img{filter:none}
.nav__links{display:flex;gap:34px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;flex:1;justify-content:center}
.nav__links a{position:relative;padding:6px 0;transition:opacity .25s ease}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:hover::after, .nav__links a.active::after{transform:scaleX(1)}
.nav__links a:hover{opacity:.85}

/* Diensten dropdown */
.nav__item-drop{position:relative;display:flex;align-items:center}
.nav__caret{font-size:8px;opacity:.7;margin-left:2px;display:inline-block;transition:transform .3s}
.nav__item-drop:hover .nav__caret{transform:rotate(180deg)}
.nav__dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:200px;background:var(--ivory);border:1px solid var(--rule);
  padding:8px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 24px 60px rgba(20,18,16,.18);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s, transform .25s;
  z-index:600;
}
.nav__item-drop:hover .nav__dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(2px)}
.nav__dropdown-item{
  text-align:left;padding:11px 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);font-weight:500;transition:background .2s, color .2s;white-space:nowrap;
}
.nav__dropdown-item:hover{background:var(--ink);color:var(--ivory)}

.nav__actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav__cta{font-size:11px;letter-spacing:.26em;text-transform:uppercase;border:1px solid currentColor;padding:11px 20px;border-radius:999px;transition:background .3s, color .3s, border-color .3s, opacity .3s;display:inline-flex;align-items:center;white-space:nowrap;background:transparent}
/* Plan gesprek = filled accent (wine) always — the dominant CTA */
.nav__cta--primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.nav__cta--primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
/* Login = subtle outlined, default behavior */
.nav__cta--secondary{opacity:.7;font-size:10px;padding:9px 16px;letter-spacing:.22em}
.nav__cta--secondary:hover{opacity:1;background:#fff;color:var(--ink);border-color:#fff}
.nav.solid .nav__cta--secondary:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink)}

.nav__mobile-toggle{display:none;background:none;border:none;color:currentColor;font-size:28px;cursor:pointer;line-height:1;padding:0}
@media (max-width:1024px){
  .nav{padding:16px 24px;gap:12px}
  .nav__mobile-toggle{display:block}
  .nav__links, .nav__actions{display:none}
  .nav__logo-img{height:36px}
  .nav.mobile-open{position:fixed;inset:0;background:var(--cocoa);color:#fff;flex-direction:column;align-items:flex-start;padding:80px 32px;justify-content:flex-start;mix-blend-mode:normal;gap:24px}
  .nav.mobile-open .nav__mobile-toggle{position:absolute;top:24px;right:24px}
  .nav.mobile-open .nav__links{display:flex;flex-direction:column;gap:20px;font-size:18px;letter-spacing:.15em;flex:0}
  .nav.mobile-open .nav__item-drop{flex-direction:column;align-items:flex-start;gap:14px}
  .nav.mobile-open .nav__caret{display:none}
  .nav.mobile-open .nav__dropdown{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:none;box-shadow:none;padding:0 0 0 16px;min-width:0;gap:10px;
  }
  .nav.mobile-open .nav__dropdown-item{color:#C8C0B4;font-size:13px;padding:2px 0;letter-spacing:.15em}
  .nav.mobile-open .nav__dropdown-item:hover{background:transparent;color:#fff}
  .nav.mobile-open .nav__actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:12px}
  .nav.mobile-open .nav__cta{display:inline-flex}
  .nav.mobile-open .nav__logo-img{filter:invert(1) brightness(1.3)}
}

/* Footer */
.footer{background:var(--cocoa);color:var(--ivory);padding:120px 40px 40px;position:relative}
.footer .giant{font-family:var(--serif);font-size:clamp(64px,14vw,220px);line-height:.9;letter-spacing:-.03em}
.footer .giant em{font-style:italic;color:var(--accent)}
.footer a:hover{color:var(--ivory)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;font-size:13px;color:#C8C0B4}
.footer-grid h6{font-size:11px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:16px;color:#fff;font-weight:500}
.footer-grid a{display:block;padding:4px 0;color:#C8C0B4;transition:color .3s}
.footer-grid a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;margin-top:60px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8E867C}
.footer-admin{display:inline-flex;align-items:center;color:#5E574E;opacity:.55;transition:opacity .25s,color .25s}
.footer-admin:hover{opacity:1;color:#C8C0B4}

/* Scroll to top knop */
.scrolltop{position:fixed;right:24px;bottom:24px;z-index:450;width:48px;height:48px;border-radius:999px;background:var(--cocoa);color:var(--ivory);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(20,18,16,.28);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .3s,background .3s}
.scrolltop.show{opacity:1;transform:none;pointer-events:auto}
.scrolltop:hover{background:var(--accent)}
@media (max-width:600px){.scrolltop{right:16px;bottom:16px;width:44px;height:44px}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 32px;border-radius:999px;font-size:12px;letter-spacing:.25em;text-transform:uppercase;font-weight:500;transition:transform .4s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, border-color .3s; border:1px solid transparent}
/* Primary = wine accent, the dominant CTA across the site */
.btn-primary{background:var(--accent);color:var(--ivory);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-accent{background:var(--accent);color:var(--ivory);border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
/* Dark fallback in case some text needs to stay ink */
.btn-ink{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.btn-ink:hover{background:var(--ink-80);border-color:var(--ink-80)}
.btn-ghost{border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.btn-ghost-accent{border:1px solid var(--accent);color:var(--accent)}
.btn-ghost-accent:hover{background:var(--accent);color:var(--ivory)}
.btn-ghost-light{border:1px solid var(--ivory);color:var(--ivory)}
.btn-ghost-light:hover{background:var(--ivory);color:var(--ink)}
.btn .arrow{display:inline-block;width:14px;height:1px;background:currentColor;position:relative;transition:width .3s}
.btn .arrow::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translate(2px,-50%) rotate(45deg)}
.btn:hover .arrow{width:22px}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.24s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.32s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.40s}

/* Real image treatment replacing the placeholder */
.img{position:relative;overflow:hidden;background:var(--paper)}
.img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.img.zoom:hover img{transform:scale(1.04)}

/* Hero video */
.hero-video-wrap{position:absolute;inset:0;overflow:hidden;background:#000}
.hero-video-wrap iframe, .hero-video-wrap video, .hero-video-wrap img{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.77vh;transform:translate(-50%,-50%);object-fit:cover;border:0;display:block}
.hero-video-wrap .fallback-img{opacity:1;transition:opacity .5s}
.hero-video-wrap .fallback-img.hidden{opacity:0;pointer-events:none}

/* Containers */
.wrap{max-width:1440px;margin:0 auto;padding:0 40px}
.wrap-wide{max-width:1680px;margin:0 auto;padding:0 40px}

/* Marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:28px 0}
.marquee__track{display:inline-flex;animation:scroll 40s linear infinite;gap:60px;padding-right:60px}
.marquee__track span{font-family:var(--serif);font-size:clamp(32px,4vw,56px);line-height:1;color:var(--ink)}
.marquee__track span em{color:var(--ink-40);font-style:italic}
.marquee__dot{width:8px;height:8px;border-radius:999px;background:var(--ink);align-self:center;flex-shrink:0}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Tag chip */
.chip{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-60)}
.chip::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--sage)}

/* Typewriter caret */
.tw-highlight{display:inline-block; background:var(--accent); color:#fff; padding:.04em .34em; line-height:1.15}
.tw-caret{display:inline-block; margin-left:2px; font-family:var(--serif); font-style:italic; color:#fff; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* Responsive */
@media (max-width:900px){
  .nav{padding:16px 20px}
  .wrap, .wrap-wide{padding:0 20px}
  .footer{padding:80px 20px 30px}
  .footer-grid{grid-template-columns:1fr 1fr;margin-top:60px;gap:32px}
}

/* iPad / tablet: footer in 2 kolommen, ruimere marges */
@media (max-width:1024px) and (min-width:901px){
  .footer{padding:100px 32px 36px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}

/* Mobiel staand: footer in 1 kolom, knoppen en typografie schalen */
@media (max-width:560px){
  .footer{padding:64px 20px 28px}
  .footer-grid{grid-template-columns:1fr;gap:32px;margin-top:48px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px;margin-top:40px}
  .btn{padding:15px 24px;letter-spacing:.18em}
  .nav.mobile-open{padding:72px 24px}
}

/* Liggende telefoon: lage hoogte, compacter hamburgermenu */
@media (orientation:landscape) and (max-height:520px){
  .nav.mobile-open{padding:64px 28px 28px;gap:14px;overflow-y:auto}
  .nav.mobile-open .nav__links{gap:12px;font-size:16px}
  .nav.mobile-open .nav__item-drop{gap:8px}
  .nav.mobile-open .nav__actions{margin-top:8px;gap:8px}
}

/* =================================================================
   RESPONSIVE POLISH — iPad / iPhone / landscape phones
   Added globally (styles.css loads in <head>; component <style> blocks
   and inline style={} attributes win on equal specificity, so we use
   !important where we must override those.)
   ================================================================= */

/* ---- Global safety: prevent horizontal scroll on small screens ---- */
@media (max-width:1024px){
  html,body{max-width:100%;overflow-x:hidden}
  img,video,iframe{max-width:100%}
}

/* ---- Navigation: robust hamburger + room for language toggle ---- */
@media (max-width:1024px){
  /* Keep the toggle a comfortable tap target (>=44px) */
  .nav__mobile-toggle{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:30px}
  /* The dedicated top-bar language toggle (.nav__lang-bar) is shown via shared.jsx;
     here we only keep its buttons comfortable as tap targets. */
  .nav__lang button{min-height:40px;padding:6px 10px;font-size:11px;letter-spacing:.16em}
}
@media (max-width:1024px){
  /* All interactive nav items in the open menu get generous tap targets */
  .nav.mobile-open .nav__links a{padding:8px 0;display:inline-block;min-height:44px;line-height:1.4}
  .nav.mobile-open .nav__cta{padding:14px 24px;min-height:48px}
}

/* iPhone: keep nav compact but tappable */
@media (max-width:640px){
  .nav{padding:14px 18px;gap:10px}
  .nav__logo-img{height:32px}
  .nav.mobile-open{padding:76px 22px}
  .nav.mobile-open .nav__mobile-toggle{top:18px;right:18px}
}

/* ---- iPad portrait/landscape (<=1024px) general spacing ---- */
@media (max-width:1024px){
  .wrap, .wrap-wide{padding:0 28px}
  .footer .giant{font-size:clamp(56px,13vw,160px)}
}

/* ---- iPhone (<=640px): tighten heroes, headings, spacing ---- */
@media (max-width:640px){
  .wrap, .wrap-wide{padding:0 18px}

  /* Clamp any fixed-px display headings that overflow on phones.
     These are set via inline style={} in JSX (pricing cards, service
     cells, small couple labels), so override with !important. */
  .service-cell .h-display{font-size:30px !important;margin-bottom:14px !important}

  /* Footer giant headline never overflows the viewport edge */
  .footer{padding:56px 18px 28px}
  .footer .giant{font-size:clamp(44px,16vw,96px);word-break:break-word}

  /* Generous tap targets for buttons */
  .btn{padding:14px 22px;letter-spacing:.16em}
  /* Primary CTAs go full-width where they sit alone in a column flow */
  .btn-primary, .btn-accent, .btn-ink{max-width:100%}
}

/* Pricing/feature cards: the big fixed-px h-display (48–64px) overflow on
   narrow phones. Scale them down. Scoped to known card containers so we
   never touch desktop. */
@media (max-width:560px){
  .pricing-grid .h-display{font-size:clamp(34px,11vw,48px) !important}
  .cta-grid .h-display{font-size:clamp(30px,9vw,44px) !important}
  .album-teaser .h-display, .shoot-layout .h-display{font-size:clamp(30px,8vw,44px) !important}
}

/* ---- Brochure request modal (.brochure-*) ---- */
@media (max-width:640px){
  .brochure-overlay{padding:14px !important;align-items:flex-start !important}
  .brochure-modal{
    max-height:calc(100dvh - 28px) !important;
    max-height:calc(100vh - 28px) !important;
    padding:40px 22px 30px !important;
    margin-top:14px;
  }
  /* iOS won't zoom on focus when input font-size >= 16px */
  .brochure-field input{font-size:16px !important}
  .brochure-close{width:44px;height:44px;top:10px;right:10px}
}
@media (orientation:landscape) and (max-height:480px){
  .brochure-overlay{align-items:flex-start !important;padding:10px !important}
  .brochure-modal{max-height:calc(100vh - 20px) !important;padding:28px 22px 22px !important}
}

/* ---- Contact form / inputs: 16px to avoid iOS zoom, full-width ---- */
@media (max-width:640px){
  .field input, .field textarea{font-size:16px !important}
  .wv-form{gap:36px}
  .wv-form .btn{width:100%;justify-content:center}
}

/* =================================================================
   DIGITALE BROCHURE READER (route /digitale-brochure)
   The two-page A4 spread auto-scales to fit width via JS
   (scale = min((stageH-48)/1123, (stageW-150)/1588)). On phones the
   spread is small, so we shrink the stage so it hugs the book instead
   of leaving big empty bands, wrap controls, and keep arrows clear.
   All these classes are defined in brochure.jsx <style>, so override
   with !important.
   ================================================================= */

/* iPad: a little shorter + tighter so the spread sits comfortably */
@media (max-width:1024px){
  .reader__stage{height:calc(100vh - 260px) !important;min-height:420px !important;padding:18px !important}
  .reader__nav{width:48px !important;height:48px !important;font-size:24px !important}
  .reader__nav--l{left:10px !important}
  .reader__nav--r{right:10px !important}
  .reader__count{min-width:auto !important}
}

/* iPhone: short stage that hugs the (small) spread, controls wrap,
   arrows pulled to the very edges so they don't overlap the pages */
@media (max-width:640px){
  .reader__bar{gap:10px !important;margin-bottom:14px !important}
  .reader__btn{padding:9px 14px !important;font-size:11px !important}
  .reader__count{min-width:auto !important;font-size:15px !important;flex-basis:100%;order:-1}
  .reader__stage{
    height:auto !important;
    min-height:300px !important;
    max-height:62vh !important;
    padding:12px 6px !important;
  }
  .reader__nav{width:40px !important;height:40px !important;font-size:20px !important}
  .reader__nav--l{left:2px !important}
  .reader__nav--r{right:2px !important}
  .reader__hint{font-size:10px !important;margin-top:12px !important;letter-spacing:.06em !important;padding:0 8px}
  /* Reduce the top/bottom padding the reader section carries */
  .reader__frame{max-width:100%}
}

/* Landscape phones (short height): cap stage to viewport so the spread
   and the download bar/hint stay reachable without being cut off */
@media (orientation:landscape) and (max-height:480px){
  .reader__stage{height:calc(100vh - 150px) !important;min-height:200px !important;max-height:none !important;padding:10px !important}
  .reader__bar{margin-bottom:10px !important}
  .reader__hint{margin-top:8px !important}
  .reader__nav{width:40px !important;height:40px !important}
}

/* ---- Tablet/phone: collapse any remaining multi-column inline grids
   that the component styles didn't already handle at these widths ---- */
@media (max-width:768px){
  /* Generic 2+ column inline grids fall back to single column on phones
     where a component hasn't already specified its own rule. These are
     additive safety nets scoped to known wrappers. */
  .manifest-grid{grid-template-columns:1fr !important}
  .album-hero, .services-hero{grid-template-columns:1fr !important}
}