/* ==========================================================================
   Lustr — one-pager
   ========================================================================== */

:root {
  --bg: #F7EEE5;
  --yellow: #FAEEB5;
  --purple: #3F1E87;
  --purple-light: #8B6BD1;
  --blue: #4DA5DF;
  --text: #071A1A;
  --red-accent: #F8DAD2;
  --purple-accent: #C8C1D8;
  --beige-transparent: #FFFFFF3D;
  --white-transparent: #FFFFFF82;
  --white: #FFFFFF;
  --field-border: #ECE6DE;

  --font-serif: "Lora", Georgia, serif;
  --font-sans: "Source Sans Pro", Arial, sans-serif;

  --container: 1280px;
  --gutter: 32px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }
/* Grid items default to min-width:auto, so they refuse to shrink below
   their content's intrinsic width — the classic cause of a grid column
   quietly overflowing its track on narrow screens. Reset it everywhere
   a two-up grid is used as a layout (not the 4-up card grids, which
   don't hit this in practice and where the default is harmless). */
.about-grid > *, .split > *, .werkwijze-grid > *, .pricing-grid > *,
.faq-columns > *, .form-row > *, .footer-grid > * { min-width: 0; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.65;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; color: var(--text); margin-bottom: 24px; }

h2 {
  font-size: 3.5rem;
  line-height: 3.5rem;
  letter-spacing: -1px;
}
@media (max-width: 1366px) {
  h2 { font-size: 3rem; line-height: 3rem; letter-spacing: -1px; }
}
@media (max-width: 767px) {
  h2 { font-size: 2.6rem; line-height: 2.6rem; letter-spacing: -2px; }
}

em, .accent { font-style: italic; color: var(--purple); }

/* Source Sans Pro sub-heading used under a kicker+H2 pair (not a serif heading) */
.lead {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.kicker {
  display: inline-block;
  background: var(--white-transparent);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.65;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: 1.25rem;
}

.section-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section-head p { margin-top: 1rem; }
.section-head.left { margin-left: 0; text-align: left; }

section { position: relative; padding: 6rem 0; }
.section-tight { padding: 4rem 0; }

/* ==========================================================================
   Legal pages (Algemene voorwaarden / Privacybeleid)
   ========================================================================== */
.legal-intro {
  padding-top: 168px;
  padding-bottom: 1rem;
}
.legal-intro h1 { color: var(--purple); font-size: 2.75rem; line-height: 1.1; }
@media (max-width: 620px) {
  .legal-intro h1 { font-size: 2.2rem; }
}
.legal-intro .lead { max-width: 700px; }

.legal-content { max-width: 760px; margin: 0; }
.legal-content h2 { font-size: 1.5rem; margin-top: 2.75rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.legal-content p { margin-bottom: 1rem; }
.legal-content ul, .legal-content ol { margin: 0 0 1rem; padding-left: 1.4em; display: flex; flex-direction: column; gap: 0.4rem; }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--purple-light); }

.legal-infobox {
  background: var(--beige-transparent);
  border-radius: 24px;
  padding: 24px 28px;
  margin-bottom: 2.75rem;
  font-size: 1.05rem;
  line-height: 1.7;
}
.legal-infobox strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--purple);
  margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
  .legal-intro { padding-top: 128px; padding-bottom: 0.5rem; }
}

/* ---- Scroll reveal ----
   Driven by `animation`, not `transition`. A transition-based reveal can
   be silently overridden: when the same element also carries a component
   class that declares its own `transition` for hover (e.g. .card, .price-card),
   the cascade lets that later, equal-specificity rule replace the whole
   `transition` shorthand — dropping the reveal's opacity fade entirely and
   leaving only an abrupt position snap. `animation` is a separate CSS
   mechanism from `transition`, so it can't be clobbered that way, and it
   keeps its own timing regardless of what a component adds for :hover. */
.reveal { opacity: 0; transform: translateY(22px); }
@keyframes reveal-up { to { opacity: 1; transform: translateY(0); } }
.reveal.is-visible { animation: reveal-up 0.75s var(--ease) forwards; }
.reveal-delay-1.is-visible { animation-delay: 0.1s; }
.reveal-delay-2.is-visible { animation-delay: 0.2s; }
.reveal-delay-3.is-visible { animation-delay: 0.3s; }
.reveal-delay-4.is-visible { animation-delay: 0.4s; }

/* Section headings (kicker + title) are the biggest, most prominent
   element in each section, so they read better with a touch more travel
   and a slightly slower, more deliberate rise than the content beneath
   them — a common cue in premium/agency motion systems: the more
   important the element, the more weight its entrance carries. */
.reveal-heading { opacity: 0; transform: translateY(34px); }
@keyframes reveal-up-heading { to { opacity: 1; transform: translateY(0); } }
.reveal-heading.is-visible { animation: reveal-up-heading 0.95s var(--ease) forwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-heading { opacity: 1; transform: none; animation: none; }
  .hero-content h1, .hero-actions, .hero-social-row {
    opacity: 1; transform: none; animation: none;
  }
  .hero-content p { opacity: 0.92; transform: none; animation: none; }
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1em 2.1em;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
  white-space: nowrap;
}

.btn-primary { background: var(--yellow); color: var(--text); }
.btn-primary:hover { background: var(--red-accent); }

.btn-dark { background: var(--purple); color: var(--white); }
.btn-dark:hover { background: var(--purple-light); }

.btn-outline { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline:hover { background: var(--yellow); color: var(--text); border-color: var(--yellow); }

.btn-whatsapp { background: var(--red-accent); color: var(--text); }
.btn-whatsapp:hover { background: var(--yellow); }

/* ==========================================================================
   Header — floating rounded pill, always fixed, glassmorphism
   ========================================================================== */
.site-header {
  position: fixed;
  top: 12px; left: 0; right: 0;
  z-index: 100;
  padding: 0 var(--gutter);
}
.header-bar {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 50px;
  padding: 6px 6px 6px 24px;
  background: var(--white-transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.logo { display: block; flex: none; }
.logo img { height: 42px; width: auto; display: block; }

.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav ul { display: flex; gap: 0.5rem; }
.main-nav a {
  display: block;
  color: var(--text);
  font-weight: 400;
  font-size: 1.2rem;
  border-radius: 50px;
  padding: 8px 18px;
  transition: background 0.3s var(--ease);
}
.main-nav a:hover, .main-nav a.is-active { background: var(--yellow); }

.header-cta { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.header-btn { padding: 15px 25px; font-size: 1.2rem; }
.header-btn:hover { background: var(--red-accent); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.hamburger-inner { position: relative; width: 38px; height: 10px; }
.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
  width: 38px; height: 2px;
  border-radius: 1px;
  background: var(--purple);
  position: absolute;
  left: 0;
  transition: transform 0.275s var(--ease), top 0.275s var(--ease);
}
.hamburger-inner::before { top: 0; }
.hamburger-inner::after { top: 8px; }
.nav-toggle.is-open .hamburger-inner::before { top: 4px; transform: rotate(45deg); }
.nav-toggle.is-open .hamburger-inner::after { top: 4px; transform: rotate(-45deg); }

/* ---- Mobile off-canvas nav — a sibling of <header>, never nested inside
   the blurred .header-bar (see HTML comment for why) ---- */
.mobile-nav-panel {
  display: none;
}
@media (max-width: 900px) {
  .mobile-nav-panel {
    display: flex;
    position: fixed; inset: 0;
    background: var(--bg);
    justify-content: flex-start;
    padding: 100px 20px 40px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s;
    z-index: 99;
  }
  .mobile-nav-panel.is-open { opacity: 1; visibility: visible; }
  .mobile-nav-panel ul { flex-direction: column; width: 100%; }
  .mobile-nav-panel li { border-bottom: 1px solid var(--purple-accent); }
  .mobile-nav-panel a {
    display: block;
    padding: 35px 0 15px;
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--purple);
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 32px 32px 32px 72px;
  /* margin-top mirrors .site-header's own 12px top offset: 12px above
     the header + the header's own height (~78px above 900px) + 12px
     below it, so the gap above and below the header stay equal. */
  margin: 102px var(--gutter) 0;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center right;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--purple) 0%, rgba(63,30,135,0) 50%);
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 760px; }
.hero-content h1 {
  color: var(--white);
  font-size: 5rem;
  line-height: 4.8rem;
  letter-spacing: -2px;
  margin-bottom: 1.5rem;
}
.hero-content h1 em { color: inherit; }
@media (max-width: 1366px) {
  .hero-content h1 { font-size: 4rem; line-height: 3.8rem; }
}
@media (max-width: 767px) {
  .hero-content h1 { font-size: 3.3rem; line-height: 3rem; }
}
@media (max-width: 620px) {
  .hero-content h1 { font-size: 2.6rem; line-height: 2.5rem; letter-spacing: -1px; }
}
.hero-content p {
  color: var(--white);
  max-width: 520px;
  margin-bottom: 2.25rem;
}
.hero-actions { display: flex; gap: 20px; flex-wrap: wrap; }

.hero-social-row { position: relative; z-index: 2; display: flex; justify-content: flex-end; }
.hero-social { display: flex; gap: 12px; }
.hero-social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease);
}
.hero-social a svg { width: 20px; height: 20px; }
.hero-social a:hover { background: var(--red-accent); }

/* ---- Hero entrance: content is above the fold, so it plays on load
   rather than on scroll — a quick, considered cascade beats one big pop. ---- */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-in-p {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 0.92; transform: translateY(0); }
}
.hero-content h1,
.hero-actions,
.hero-social-row {
  opacity: 0;
  animation: hero-in 0.75s var(--ease) forwards;
}
.hero-content p {
  opacity: 0;
  animation: hero-in-p 0.75s var(--ease) forwards;
}
.hero-content h1 { animation-delay: 0.1s; }
.hero-content p { animation-delay: 0.28s; }
.hero-actions { animation-delay: 0.44s; }
.hero-social-row { animation-delay: 0.56s; }

/* ==========================================================================
   Intro / cards section
   ========================================================================== */
.intro-text { max-width: 700px; margin: 0 auto; text-align: center; }
.intro-text p + p { margin-top: 1.1rem; }

.card-grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.card {
  border-radius: 24px;
  padding: 24px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { transform: translateY(-8px); box-shadow: 0 24px 40px -24px rgba(7,26,26,0.25); }
.card h3 {
  font-style: italic;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2rem;
  letter-spacing: -1px;
}
.card h3 a { color: inherit; transition: color 0.3s var(--ease); }
.card h3 a:hover { color: var(--purple); }
.card p { font-size: 1.2rem; }
.card .card-link {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.card .card-link:hover { color: var(--purple); transform: translateX(5px); }
.card-link-icon { font-size: 0.9em; }
.card--white { background: #FFFFFFB5; }
.card--yellow { background: var(--yellow); }
.card--red { background: var(--red-accent); }
.card--purple { background: var(--purple-accent); }

/* ==========================================================================
   Split / bio section
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split.reverse .split-text { order: 1; }
.split-media img { border-radius: var(--radius-md); width: 100%; height: auto; }
.split-text p + p { margin-top: 1.1rem; }

/* ==========================================================================
   Over Lustr — radial-tinted section, glass-card accordion
   ========================================================================== */
.section-glass-blue {
  background-image: radial-gradient(at center center, rgba(77,165,223,0.56) -100%, var(--bg) 60%);
  padding-top: 100px;
  padding-bottom: 100px;
}

.about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; margin-top: 3.5rem; align-items: start; }

.accordion { display: flex; flex-direction: column; gap: 10px; }
.accordion-item {
  border-radius: 24px;
  padding: 24px;
  background: var(--beige-transparent);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2rem;
  letter-spacing: -1px;
  color: var(--purple);
  transition: color 0.3s var(--ease);
}
.accordion-trigger:hover { color: var(--purple-light); }
.accordion-trigger h3 { margin: 0; font: inherit; color: inherit; }
.accordion-trigger .chevron { flex: none; width: 22px; height: 22px; transition: transform 0.35s var(--ease); }
.accordion-item.is-open .accordion-trigger .chevron { transform: rotate(180deg); }
.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease);
}
.accordion-panel-inner { padding: 1rem 0 0; font-size: 1.05rem; }

.about-side h3 { font-size: 1.8rem; }
.about-side p + p { margin-top: 1rem; }
.about-side .btn { margin-top: 2rem; font-size: 1.2rem; background: var(--red-accent); white-space: normal; text-align: center; }
.about-side .btn:hover { background: var(--yellow); }

/* ==========================================================================
   Quote / full-bleed image section
   ========================================================================== */
.quote-section {
  position: relative;
  margin: 0 var(--gutter);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 175px 72px;
}
.quote-section img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 20%; }
.quote-section::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--purple) 0%, rgba(63,30,135,0) 50%);
}
.quote-section .container { position: relative; z-index: 2; margin: 0; max-width: none; padding: 0; }
.quote-content { max-width: 640px; }
.quote-content p.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.2vw + 0.6rem, 2.25rem);
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 2rem;
}
.quote-content .btn { margin-top: 0.5rem; }

/* ==========================================================================
   Expect section (plain list, matching the real site's default styling)
   ========================================================================== */
.expect-list {
  margin: 0 0 24px;
  padding-left: 1.25em;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.expect-list li { font-size: 1.2rem; }

/* ==========================================================================
   Werkwijze — radial-tinted section, photo + glass CTA overlay
   ========================================================================== */
.section-glass-purple {
  background-image: radial-gradient(at center center, rgba(63,30,135,0.58) -100%, var(--bg) 60%);
  padding-top: 100px;
  padding-bottom: 100px;
}

.werkwijze-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; align-items: center; margin-top: 3.5rem; }
.werkwijze-media { position: relative; border-radius: 24px; overflow: hidden; padding: 32px; display: flex; align-items: flex-end; min-height: 640px; }
.werkwijze-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; z-index: 0; }
.whatsapp-badge {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  background: rgba(63,30,135,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--white);
  padding: 1.5em;
  border-radius: 24px;
}
.whatsapp-badge-title { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--white); }
.whatsapp-badge-text { display: block; margin-bottom: 1.25rem; color: var(--white); opacity: 0.9; }
.whatsapp-badge .btn { background: var(--yellow); color: var(--text); }
.whatsapp-badge .btn:hover { background: var(--purple); color: var(--white); }

.steps { display: flex; flex-direction: column; gap: 10px; }
.step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--beige-transparent);
  border-radius: 24px;
  padding: 24px;
}
.step .num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--purple-light);
  line-height: 1;
  flex: none;
  width: 3rem;
}
.step h3 {
  font-style: italic;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2rem;
  letter-spacing: -1px;
  color: var(--purple);
  transition: transform 0.3s var(--ease);
}
.step:hover h3 { transform: translateX(10px); }
.step p { font-size: 1.05rem; }

/* ==========================================================================
   Persoonlijk gesprek
   ========================================================================== */
/* ==========================================================================
   Tarieven
   ========================================================================== */
.pricing-grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
  align-items: stretch;
}
.price-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 20px;
  padding: 2.75rem 2.25rem;
  border: 1px solid rgba(7,26,26,0.08);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 28px 48px -32px rgba(7,26,26,0.22); border-color: transparent; }
.price-card-icon {
  width: 52px; height: 52px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--purple);
}
.price-card.is-featured { background: var(--purple); color: var(--white); border-color: var(--purple); }
.price-card.is-featured h3, .price-card.is-featured .price { color: var(--white); }
.price-card.is-featured .price-card-icon { background: rgba(255,255,255,0.16); color: var(--white); }
.price-card.is-featured p:not(.price) { opacity: 0.82; }
.price-card h3 { font-size: 1.3rem; }
.price-card .price { font-family: var(--font-serif); font-size: 2.5rem; color: var(--purple); margin: 0.5rem 0 1rem; }
.price-card .price small { font-size: 1rem; font-family: var(--font-sans); }
.price-card p { font-size: 1rem; opacity: 0.8; }
.price-card p:last-child { margin-top: auto; padding-top: 1rem; }

.pricing-cta { margin-top: 3rem; text-align: center; }
.pricing-cta p { margin-bottom: 1.25rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  max-width: 1080px;
  margin: 3rem auto 0;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid rgba(7,26,26,0.12); }
.faq-item:last-child { border-bottom: 1px solid rgba(7,26,26,0.12); }
.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--text);
  transition: color 0.3s var(--ease);
}
.faq-trigger:hover { color: var(--purple); }
.faq-trigger h3 { margin: 0; font: inherit; color: inherit; }
.faq-trigger .chevron { flex: none; width: 20px; height: 20px; transition: transform 0.35s var(--ease); color: var(--purple-light); }
.faq-item.is-open .faq-trigger { color: var(--purple); }
.faq-item.is-open .faq-trigger .chevron { transform: rotate(180deg); }
.faq-panel { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); }
.faq-panel-inner { padding: 0 2.5rem 1.75rem 0; font-size: 1.05rem; }

/* ==========================================================================
   Contact — single centered glass card (not a two-column split)
   ========================================================================== */
.contact-card {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  background: var(--beige-transparent);
  border-radius: 24px;
  padding: 72px;
}
.contact-card h2 { text-align: center; }
.contact-card > p { max-width: 560px; margin: 0 auto 3rem; }

.contact-form { text-align: left; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.field { margin-bottom: 0.625rem; }
.field label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--field-border);
  background: var(--white-transparent);
  color: var(--text);
  border-radius: 24px;
  padding: 0.85em 1.25em;
  font-size: 1.2rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text); opacity: 0.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--purple-light);
  box-shadow: 0 0 0 3px rgba(139,107,209,0.2);
}
.field textarea { resize: vertical; min-height: 120px; border-radius: 24px; }
.contact-form .btn { width: 100%; margin-top: 0.5rem; background: var(--purple); color: var(--white); }
.contact-form .btn:hover { background: var(--yellow); color: var(--text); }
.form-note { margin-top: 1rem; font-size: 0.85rem; opacity: 0.65; text-align: center; }
.form-status {
  margin-top: 1rem;
  padding: 0.85em 1.25em;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}
.form-status[data-state="success"] { background: rgba(63,30,135,0.1); color: var(--purple); }
.form-status[data-state="error"] { background: rgba(248,218,210,0.6); color: var(--text); }
.form-status[data-state="sending"] { background: var(--bg); color: var(--text); opacity: 0.75; }
.contact-form .btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  margin: 12px var(--gutter);
  border-radius: var(--radius-lg);
  padding: 4.5rem 0 0;
  background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple) 100%);
  color: var(--white);
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
}
.footer-logo { margin-bottom: 1.25rem; }
.footer-logo img { height: 44px; width: auto; display: block; filter: brightness(0) invert(1); }
.footer-about p { opacity: 0.85; max-width: 360px; }
.footer-social { display: flex; gap: 12px; margin-top: 1.5rem; }
.footer-social a {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-social a svg { width: 20px; height: 20px; }
.footer-social a:hover { background: var(--red-accent); transform: translateY(-3px); }

.footer-col h2, .footer-col h3, .footer-col h4 { color: var(--white); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-sans); font-weight: 600; margin-bottom: 1.25rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a, .footer-col li { opacity: 0.85; overflow-wrap: break-word; }
.footer-col a:hover { opacity: 1; text-decoration: underline; }

.footer-bottom {
  margin-top: 3.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--white-transparent);
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index: 90;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .werkwijze-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .werkwijze-media { max-width: 480px; }
  .faq-columns { grid-template-columns: 1fr; gap: 0; }
  .contact-card { padding: 50px 5%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid .price-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .header-bar { padding: 8px 8px 8px 20px; }
  .logo img { height: 35px; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-btn { padding: 0.75em 1.4em; font-size: 0.9rem; }
  /* header-bar is shorter below 900px (smaller logo/nav-toggle), so
     the symmetric top/bottom gap around it shrinks to match. */
  .hero { margin-top: 90px; }
}

@media (max-width: 767px) {
  .split, .persoonlijk .split { grid-template-columns: 1fr; gap: 2rem; }
  .split.reverse .split-media, .split.reverse .split-text { order: initial; }

  .form-row { grid-template-columns: 1fr; }

  section { padding: 4.5rem 0; }
  .section-glass-blue, .section-glass-purple { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .quote-section { padding: 120px 40px; }
  /* On mobile the text column spans nearly the full width, so the
     desktop gradient (solid purple fading out by the halfway mark)
     leaves the right half of every line sitting on bare photo. Darken
     it across the full width instead. */
  .quote-section::before {
    background: linear-gradient(90deg, rgba(63,30,135,0.92) 0%, rgba(63,30,135,0.8) 55%, rgba(63,30,135,0.62) 100%);
  }
}

@media (max-width: 620px) {
  :root { --gutter: 12px; }
  section { padding: 3.5rem 0; }
  .section-glass-blue, .section-glass-purple { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .card-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .hero { border-radius: 24px; padding: 20px; min-height: 90vh; }
  .hero-content p { max-width: none; }
  .hero-actions { display: grid; grid-template-columns: max-content; justify-content: flex-start; gap: 14px; }
  .hero-actions .btn { width: 100%; }
  .quote-section { padding: 88px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-card { padding: 40px 24px; }
}