/* ============================================================================
   Hello Sally — globals.css
   All design tokens + every class/style for the marketing site live here.
   Built on the Hello Sally design system (direction D · Warm × Editorial).
   Sections:
     1. Tokens (colors, type, spacing, radii, shadows, motion)
     2. Base / reset
     3. Layout helpers (wrap, section, sechead, kicker, eyebrow)
     4. Buttons & form controls
     5. Navigation
     6. Hero
     7. Character grid
     8. Timeline (playful horizontal path)
     9. Beauty & Brains
    10. Memory note
    11. Telefoontjes
    12. Pricing
    13. Ask / contact
    14. Footer
    15. Modals
    16. Thank-you page
    17. Reduced motion
============================================================================ */

/* ── 1. Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Brand: Sally Coral */
  --coral-50:#FFF1EC; --coral-100:#FFE0D5; --coral-200:#FFC4B1; --coral-300:#FF9E83;
  --coral-400:#FF7755; --coral-500:#FF5C39; --coral-600:#ED4421; --coral-700:#C8330F;
  --coral-800:#9C2A0F; --coral-900:#762512;

  /* Warm ink (neutrals — never pure grey/black) */
  --ink-900:#211C18; --ink-800:#322A24; --ink-700:#4A413A; --ink-600:#6B6058;
  --ink-500:#8A7E74; --ink-400:#A99D92; --ink-300:#C9BFB4; --ink-200:#E3DBD0;
  --ink-100:#F0E9DF; --ink-50:#F8F3EB;

  /* Paper / surfaces (warm cream — never pure white as page bg) */
  --paper:#FBF6EF; --paper-sunken:#F3ECE1; --surface:#FFFFFF; --surface-alt:#FDFAF5;

  /* Accents */
  --mint-50:#E5F7F0; --mint-100:#C6EFE0; --mint-300:#6FD8B5; --mint-500:#1FB98C; --mint-600:#129974; --mint-700:#0E7A5B;
  --sky-500:#2E90C9; --sky-700:#1C6A98;
  --butter-500:#FFC24B;
  --berry-500:#E5484D;

  /* Borders */
  --border-hairline:var(--ink-200);
  --border-strong:var(--ink-300);

  /* Fonts */
  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Type scale */
  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.875rem; --text-md:1rem;
  --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem;
  --text-4xl:3rem; --text-5xl:4rem; --text-6xl:5.25rem;

  /* Line heights & letter spacing */
  --lh-tight:1.05; --lh-snug:1.18; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tighter:-0.03em; --ls-tight:-0.015em; --ls-wide:0.04em; --ls-caps:0.08em;

  /* Spacing (4px grid) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* Radii */
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px;
  --radius-xl:28px; --radius-2xl:40px; --radius-pill:999px;

  /* Shadows (warm-tinted) */
  --shadow-xs:0 1px 2px rgba(33,28,24,.06);
  --shadow-sm:0 1px 3px rgba(33,28,24,.07),0 1px 2px rgba(33,28,24,.05);
  --shadow-md:0 4px 12px rgba(33,28,24,.08),0 2px 4px rgba(33,28,24,.05);
  --shadow-lg:0 12px 28px rgba(33,28,24,.10),0 4px 10px rgba(33,28,24,.06);
  --shadow-xl:0 28px 60px rgba(33,28,24,.14),0 8px 20px rgba(33,28,24,.07);
  --shadow-coral:0 4px 24px rgba(255,92,57,.30);

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;

  /* Focus ring */
  --ring:0 0 0 3px var(--coral-200);

  /* Layout */
  --container:1180px;
  --pad-x:40px;
}

/* ── 2. Base / reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body {
  margin:0; font-family:var(--font-sans); font-size:var(--text-md);
  line-height:var(--lh-normal); font-weight:400; color:var(--ink-800);
  background:var(--paper); -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5 {
  font-family:var(--font-display); font-weight:700; color:var(--ink-900);
  line-height:var(--lh-snug); letter-spacing:var(--ls-tight); margin:0;
}
p { margin:0; }
img,svg { display:block; max-width:100%; }
a { color:var(--coral-600); text-decoration:none; }
ul,ol { margin:0; padding:0; list-style:none; }
::selection { background:var(--coral-200); color:var(--ink-900); }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm); }

/* ── 3. Layout helpers ────────────────────────────────────────────────── */
.wrap { max-width:var(--container); margin:0 auto; padding-inline:var(--pad-x); }

.section { padding:96px 0; }
.section--sunken { background:var(--paper-sunken); }

.sechead { max-width:640px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.sechead--center { margin-inline:auto; text-align:center; align-items:center; }
.sectitle { font-size:40px; line-height:1.08; letter-spacing:var(--ls-tighter); font-weight:800; }
.secsub { font-size:18px; line-height:1.55; color:var(--ink-600); }

.kicker {
  font-family:var(--font-mono); font-size:12px; letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--coral-500);
  display:inline-flex; align-items:center; gap:12px;
}
.kicker::before { content:''; width:30px; height:1px; background:var(--coral-500); }
.sechead--center .kicker::after { content:''; width:30px; height:1px; background:var(--coral-500); }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:14px; font-weight:600; color:var(--coral-700);
  background:var(--coral-50); border:1px solid var(--coral-100);
  padding:7px 14px; border-radius:var(--radius-pill);
}

/* ── 4. Buttons & form controls ───────────────────────────────────────── */
.btn {
  font-family:var(--font-sans); font-weight:700; font-size:15px; cursor:pointer;
  border:0; border-radius:var(--radius-md); padding:0 20px; height:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  white-space:nowrap; transition:background var(--dur-base) var(--ease-out),
  transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn--lg { height:54px; font-size:16px; padding:0 26px; }
.btn--block { width:100%; }
.btn--primary { background:var(--coral-500); color:#fff; box-shadow:var(--shadow-coral); }
.btn--primary:hover { background:var(--coral-600); }
.btn--secondary { background:var(--surface); color:var(--ink-800); box-shadow:inset 0 0 0 1.5px var(--border-strong); }
.btn--secondary:hover { box-shadow:inset 0 0 0 1.5px var(--coral-400); color:var(--coral-700); }

.field { display:flex; flex-direction:column; gap:6px; }
.field label {
  font-size:12px; font-weight:700; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--ink-500);
}
.input {
  font-family:var(--font-sans); font-size:16px; color:var(--ink-900);
  height:50px; padding:0 16px; border-radius:var(--radius-md);
  border:1.5px solid var(--ink-200); background:var(--surface);
  outline:none; width:100%;
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.input::placeholder { color:var(--ink-400); }
.input:focus { border-color:var(--coral-400); box-shadow:var(--ring); }
.input--icon { padding-left:42px; }
.inputwrap { position:relative; }
.inputwrap__icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:15px; }

.check { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink-700); line-height:1.45; }
.check input { margin-top:2px; width:18px; height:18px; accent-color:var(--coral-500); flex:none; }

/* ── 5. Navigation ────────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:100; background:rgba(251,246,239,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-hairline);
}
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.brand img:first-child { border-radius:10px; flex:none; }
.brand__logo { height:56px; width:auto; display:block; margin-top:12px; }
.nav__links { display:flex; align-items:center; gap:30px; }
.navlink { font-size:15px; font-weight:600; color:var(--ink-700); transition:color var(--dur-fast) var(--ease-out); }
.navlink:hover { color:var(--coral-600); }
.nav__cta { display:flex; align-items:center; gap:12px; }
.nav__burger {
  display:none; width:42px; height:42px; border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; align-items:center;
}
.nav__burger span { width:22px; height:2px; background:var(--ink-800); border-radius:2px; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* Full-page overlay menu (mobile). Sits below the sticky header (z-index 100)
   so the burger/X in the header stays clickable to close it. */
.nav__drawer {
  position:fixed; inset:0; z-index:90;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:calc(80px + 28px) var(--pad-x) 48px;
  background:rgba(251,246,239,.98);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.nav__drawer[hidden] { display:none; } /* beats the .nav__drawer display:flex above */
.nav__drawer-link { font-size:24px; font-weight:600; color:var(--ink-800); padding:10px 8px; }
.nav__drawer-link:hover { color:var(--coral-600); }
.nav__drawer .btn { margin-top:22px; min-width:220px; } /* knop onder het menu, extra ruimte */

@media (max-width:900px) {
  .nav__links { display:none; }
  .nav__burger { display:inline-flex; }
  .nav__cta > .btn { display:none; } /* "Bestellen" zit in het menu; header houdt alleen de burger/X */
}
@media (min-width:901px) { .nav__drawer { display:none !important; } }

/* ── 6. Hero ──────────────────────────────────────────────────────────── */
.hero { padding:56px 0 92px; }
.hero__grid { display:grid; grid-template-columns:1.04fr .96fr; gap:60px; align-items:center; }

.hero__title { font-size:54px; line-height:1.04; letter-spacing:var(--ls-tighter); font-weight:800; margin-top:20px; }
.hero__wink { display:inline; font-style:normal; color:var(--coral-600); }

.card {
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl); padding:24px 26px 26px; box-shadow:var(--shadow-md);
}
.hero__form-card { margin-top:28px; max-width:480px; }
.card__head { display:flex; align-items:baseline; gap:10px; }
.card__num { font-family:var(--font-mono); font-size:13px; color:var(--coral-600); font-weight:600; }
.card__title { font-size:20px; font-weight:800; white-space:nowrap; }
.card__sub { font-size:14px; line-height:1.5; color:var(--ink-600); margin:7px 0 16px; }

.lead-form__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lead-form .field { margin-top:14px; }
.lead-form .lead-form__row .field { margin-top:0; }
.lead-form__row + .field { margin-top:14px; }

.submit {
  margin-top:18px; height:56px; border:0; border-radius:var(--radius-md);
  background:var(--coral-500); color:#fff; font-family:var(--font-sans);
  font-weight:700; font-size:16px; cursor:pointer; display:flex;
  align-items:center; justify-content:space-between; gap:9px; width:100%;
  padding:0 12px 0 22px; box-shadow:var(--shadow-coral); transition:background var(--dur-base) var(--ease-out);
}
.submit:hover { background:var(--coral-600); }
.submit:hover .submit__arrow { transform:translateX(3px); }
.submit__label { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.submit__meta { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; white-space:nowrap; }
.submit__meta > span:first-child { opacity:.85; }
.submit__arrow {
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center; font-size:18px;
  transition:transform var(--dur-base) var(--ease-out);
}
.lead-form__fine { font-size:12.5px; color:var(--ink-400); margin-top:12px; display:flex; align-items:center; gap:7px; }
.lead-form__status { margin-top:12px; font-size:14px; font-weight:600; padding:11px 14px; border-radius:var(--radius-md); }
.lead-form__status.is-ok { background:var(--mint-50); color:var(--mint-700); }
.lead-form__status.is-err { background:var(--berry-50,#FCE7E8); color:var(--berry-500); }

/* hero stage: photo + balloon + chips */
.hero__stage { position:relative; }
.hero__photo {
  position:relative; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-xl);
  border:6px solid var(--surface); aspect-ratio:4/4.4;
}
.hero__photo img { width:100%; height:100%; object-fit:cover; }
.hero__blob { position:absolute; border-radius:50%; z-index:-1; }
.hero__blob--coral { right:-44px; top:-34px; width:220px; height:220px; background:var(--coral-100); }
.hero__blob--mint { left:-38px; bottom:-26px; width:150px; height:150px; background:var(--mint-100); }

/* Anchored to its bottom-right corner with PERCENTAGES of the photo, so the
   tail keeps pointing at roughly the same spot (Sally's face) no matter how
   wide/tall the photo renders. The bubble grows up-and-to-the-left as the
   typed text gets longer — extra lines are added on top, not below.
   right: 54% → right edge (and tail) sits ~46% from the left of the photo.
   bottom: 82% → bottom edge (and tail) sits ~18% down from the photo top. */
.balloon { position:absolute; top:auto; bottom:82%; left:auto; right:calc(54% - 16px); z-index:4; max-width:230px; animation:float 5.5s ease-in-out infinite; }
.balloon__inner {
  position:relative; background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:20px 20px 6px 20px; padding:15px 18px; box-shadow:var(--shadow-lg);
  color:var(--ink-800); font-size:15.5px; line-height:1.5; font-weight:500;
}
.balloon__inner::after {
  content:''; position:absolute; right:22px; bottom:-9px; width:18px; height:18px;
  background:var(--surface); border-right:1px solid var(--border-hairline);
  border-bottom:1px solid var(--border-hairline); transform:rotate(45deg);
}
.balloon__name {
  display:flex; align-items:center; justify-content:flex-end; gap:9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:var(--ls-caps);
  text-transform:uppercase; margin-bottom:7px; font-weight:600; color:var(--coral-600);
}
.balloon__text { min-height:1.5em; }
.dot {
  width:8px; height:8px; border-radius:50%; background:var(--mint-500);
  box-shadow:0 0 0 0 rgba(31,185,140,.55); animation:pulse-dot 1.8s ease-out infinite;
}
@keyframes pulse-dot {
  0% { box-shadow:0 0 0 0 rgba(31,185,140,.55); }
  70% { box-shadow:0 0 0 6px rgba(31,185,140,0); }
  100% { box-shadow:0 0 0 0 rgba(31,185,140,0); }
}
.balloon__text::after {
  content:''; display:inline-block; width:2px; height:1.05em; vertical-align:-.18em;
  margin-left:2px; background:currentColor; animation:blink 1s steps(1) infinite;
}

.chip {
  position:absolute; z-index:5; display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; padding:9px 18px; border-radius:var(--radius-pill);
  background:var(--surface); box-shadow:var(--shadow-lg); white-space:nowrap;
}
.chip--mint { color:var(--mint-700); }
.chip--coral { color:var(--coral-700); }
.chip--a { bottom:38px; right:-22px; }
.chip--b { bottom:-14px; left:30px; }

@keyframes float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
/* small-screen variant: same float but shifted left so the bubble overhangs the photo edge */
@keyframes float-x { 0%,100%{ transform:translate(-16px,0); } 50%{ transform:translate(-16px,-12px); } }
@keyframes blink { 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }

/* ── 7. Character grid ────────────────────────────────────────────────── */
.char-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; }
.char-card {
  /* background:var(--surface); */ 
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg); padding:26px;
  transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.char-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.char-card__icon {
  width:46px; height:46px; border-radius:13px; background:var(--coral-50);
  display:inline-flex; align-items:center; justify-content:center; font-size:22px;
}
.char-card__title { font-size:19px; font-weight:800; margin-top:18px; }
.char-card__desc { font-size:15px; line-height:1.55; color:var(--ink-600); margin-top:8px; }

/* ── 8. Timeline (cards in a row, icon-circle below; cards light in turn) ── */
.tl { position:relative; margin-top:64px; padding-bottom:44px; }

.tl__track { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; position:relative; z-index:1; align-items:stretch; }
.tl__step { position:relative; }

.tl__card {
  position:relative; height:100%; background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg); padding:22px 15px 30px; box-shadow:var(--shadow-sm); text-align:center;
  transition:border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.tl__card.is-lit { border-color:var(--coral-400); box-shadow:0 0 0 2px var(--coral-200), var(--shadow-md); }

/* circle hangs just below the card, overlapping its bottom edge a little */
.tl__node {
  position:absolute; top:100%; left:50%; margin-top:-14px; transform:translateX(-50%);
  width:52px; height:52px; border-radius:50%; background:var(--coral-500); color:#fff;
  box-shadow:var(--shadow-coral); display:flex; align-items:center; justify-content:center; z-index:2;
}
.tl__num {
  position:absolute; top:-7px; left:-7px; width:24px; height:24px; border-radius:50%;
  background:var(--surface); color:var(--coral-700); font-family:var(--font-display);
  font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); border:1px solid var(--coral-100);
}
.tl__emoji { font-size:23px; line-height:1; }
.tl__title { font-size:16px; font-weight:800; margin-top:2px; }
.tl__desc { font-size:13.5px; line-height:1.45; color:var(--ink-600); margin-top:6px; }

/* ── 9. Beauty & Brains ───────────────────────────────────────────────── */
.bb__grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; }
.bb__media { position:relative; }
.bb__photo {
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  border:6px solid var(--surface); box-shadow:var(--shadow-xl); aspect-ratio:1/1;
}
.bb__photo img { width:100%; height:100%; object-fit:cover; }
.bb__blob { right:auto; top:auto; left:-34px; bottom:-30px; width:170px; height:170px; }
/* match the kicker/title/sub rhythm of the centred section heads (.sechead, 16px) */
.bb__copy .sectitle, .ask__copy .sectitle { margin-top:16px; }
.bb__copy .secsub, .ask__copy .secsub { margin-top:16px; }
.bb__list { margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.bb__item { display:flex; align-items:center; gap:12px; font-size:16px; color:var(--ink-700); line-height:1.45; }
.bb__icon {
  width:36px; height:36px; border-radius:50%; background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center; font-size:17px; flex:none;
}
.bb__actions { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }

/* ── 10. Memory note ──────────────────────────────────────────────────── */
.note {
  margin:52px auto 0; max-width:720px; background:var(--surface);
  border:1px solid var(--border-hairline); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.note__bar {
  display:flex; align-items:center; gap:12px; padding:14px 20px;
  background:var(--paper-sunken); border-bottom:1px solid var(--border-hairline);
}
.note__dots { display:inline-flex; gap:6px; }
.note__dots i { width:11px; height:11px; border-radius:50%; background:var(--ink-300); display:block; }
.note__dots i:first-child { background:var(--coral-400); }
.note__label { font-family:var(--font-mono); font-size:12px; letter-spacing:var(--ls-wide); color:var(--ink-500); text-transform:uppercase; }
/* Editable example area — typed text is not saved (demo only). The native
   text caret is hidden; the orange blinking block (.note__caret) is the cursor,
   kept at the end by note.js so typing always continues from there. */
.note__body { padding:26px 30px 30px; position:relative; font-size:16px; line-height:1.7; color:var(--ink-700); }
.note__line { font-size:16px; line-height:1.7; color:var(--ink-700); }
.note__line--greeting { font-weight:700; color:var(--ink-900); margin-bottom:6px; }
.note__caret { display:inline-block; width:9px; height:20px; background:var(--coral-400); margin-top:4px; animation:blink 1.1s steps(1) infinite; vertical-align:middle; }

/* ── 11. Telefoontjes ─────────────────────────────────────────────────── */
.calls__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.calls__col {
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl); padding:30px;
}
.calls__heading { font-size:21px; font-weight:800; display:flex; align-items:center; gap:10px; }
.calls__badge { font-size:20px; }
.calls__sub { font-size:15px; color:var(--ink-600); line-height:1.5; margin-top:10px; }
.calls__list { margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.calls__bubble {
  background:var(--paper-sunken); border-radius:16px 16px 16px 4px; padding:13px 16px;
  font-size:15px; color:var(--ink-800); line-height:1.4; position:relative;
}
.calls__col--want .calls__bubble { background:#e8f3fb; }

/* ── 12. Pricing ──────────────────────────────────────────────────────── */
.plans { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px; align-items:start; }
.plan {
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl); padding:26px 24px; position:relative;
  display:flex; flex-direction:column; height:100%;
}
.plan--featured { border-color:var(--coral-300); box-shadow:var(--shadow-lg); }
.plan__tag {
  position:absolute; top:-12px; left:24px; background:var(--coral-500); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:var(--ls-wide); text-transform:uppercase;
  padding:5px 12px; border-radius:var(--radius-pill);
}
.plan__name { font-size:20px; font-weight:800; }
.plan__for { font-size:13.5px; color:var(--ink-500); margin-top:2px; }
.plan__calls { font-size:14px; color:var(--ink-600); margin-top:14px; }
.plan__calls strong { color:var(--ink-900); font-weight:700; }
.plan__price { display:flex; align-items:baseline; gap:2px; margin:8px 0 2px; min-height:48px; }
.plan__cur { font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--ink-900); }
.plan__amt { font-family:var(--font-display); font-weight:800; font-size:40px; color:var(--ink-900); letter-spacing:var(--ls-tight); }
.plan__custom { font-family:var(--font-display); font-weight:800; font-size:30px; color:var(--ink-900); }
.plan__note { font-size:13px; color:var(--ink-500); }
.plan__feats { margin:20px 0 22px; display:flex; flex-direction:column; gap:10px; }
.plan__feat { display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--ink-700); }
.plan__feat.is-off { color:var(--ink-400); }
.plan__check {
  width:18px; height:18px; border-radius:50%; flex:none; display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:800;
  background:var(--mint-100); color:var(--mint-700); margin-top:1px;
}
.plan__feat.is-off .plan__check { background:var(--ink-100); color:transparent; }
.plan .btn { margin-top:auto; }

/* ── 13. Ask / contact ────────────────────────────────────────────────── */
.ask__grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.ask__media { position:relative; }
.ask__photo {
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  border:6px solid var(--surface); box-shadow:var(--shadow-xl); aspect-ratio:1/1;
}
.ask__photo img { width:100%; height:100%; object-fit:cover; }
.ask__chip { bottom:18px; right:-14px; }
.ask__body { font-size:16px; line-height:1.6; color:var(--ink-700); margin-top:14px; max-width:46ch; }
.ask__call {
  display:inline-flex; align-items:center; gap:16px; margin-top:28px;
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-pill); padding:8px 22px 8px 8px; box-shadow:var(--shadow-md);
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ask__call:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.ask__call-btn {
  display:inline-flex; align-items:center; gap:9px; background:var(--coral-500); color:#fff;
  font-weight:700; font-size:16px; padding:13px 20px; border-radius:var(--radius-pill);
  box-shadow:var(--shadow-coral);
}
.ask__call-num { font-family:var(--font-mono); font-size:18px; font-weight:600; color:var(--ink-900); letter-spacing:.01em; }


/* ── 14. Footer ───────────────────────────────────────────────────────── */
.foot { background:var(--ink-900); color:rgba(251,246,239,.7); padding:64px 0 30px; }
.foot__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
.foot__tagline { font-size:14.5px; line-height:1.55; margin-top:14px; max-width:30ch; color:rgba(251,246,239,.6); }
.foot__col h3 {
  font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:rgba(251,246,239,.45); margin-bottom:14px;
}
.foot__col a { display:block; font-size:14.5px; color:rgba(251,246,239,.78); margin-bottom:10px; transition:color var(--dur-fast) var(--ease-out); }
.foot__col a:hover { color:#fff; }
.foot__text { display:block; font-size:14.5px; color:rgba(251,246,239,.78); margin-bottom:10px; }
.foot__legal {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; color:rgba(251,246,239,.5); flex-wrap:wrap;
}
.foot__legal a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.foot__legal a:hover { color:rgba(251,246,239,.85); }

/* ── 15. Modals ───────────────────────────────────────────────────────── */
.modal { position:fixed; inset:0; z-index:1100; display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; }
.modal[hidden] { display:none; }
.modal__overlay { position:fixed; inset:0; background:rgba(33,28,24,.55); backdrop-filter:blur(3px); }
.modal__dialog {
  position:relative; z-index:1; width:100%; max-width:520px; background:var(--surface);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); padding:34px 34px 30px;
  margin:auto; animation:modal-in var(--dur-slow) var(--ease-spring);
}
.modal__close {
  position:absolute; top:16px; right:18px; width:36px; height:36px; border:0;
  background:var(--paper-sunken); border-radius:50%; cursor:pointer; font-size:22px;
  line-height:1; color:var(--ink-600); display:inline-flex; align-items:center; justify-content:center;
}
.modal__close:hover { background:var(--ink-100); color:var(--ink-900); }
.modal__title { font-size:30px; font-weight:800; letter-spacing:var(--ls-tighter); margin-top:10px; }
.modal__sub { font-size:15px; color:var(--ink-600); line-height:1.5; margin-top:8px; }
.modal__form { margin-top:22px; display:flex; flex-direction:column; gap:14px; }
.modal__form .lead-form__row { gap:12px; }
.modal__form.lead-form .field { margin-top:0; }
@keyframes modal-in { from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
body.modal-open { overflow:hidden; }

/* Bel-bevestiging overlay */
.modal__dialog--center { max-width:460px; }
.callstate { text-align:center; padding:8px 4px 4px; display:flex; flex-direction:column; align-items:center; }
.callstate .kicker { margin-top:22px; }
.callstate .modal__title { margin-top:8px; }
.callstate .modal__sub { margin-top:10px; max-width:36ch; }

/* Consent/bevestig-stap — only shown in the confirm state. */
.callconsent { display:none; width:100%; margin-top:24px; text-align:left; }
.callstate.is-confirm .callconsent { display:block; }
.callconsent__lead { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--ink-500); margin-bottom:14px; }
.callconsent__list { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:14px; }
.cc-item { display:flex; align-items:center; gap:13px; }
.cc-item__ic { flex:none; width:40px; height:40px; border-radius:50%; background:var(--coral-50); color:var(--coral-500); display:inline-flex; align-items:center; justify-content:center; font-size:19px; }
.cc-item__txt { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cc-item__txt strong { font-size:14.5px; font-weight:700; color:var(--ink-800); line-height:1.25; }
.cc-item__txt em { font-style:normal; font-size:12.5px; color:var(--ink-500); line-height:1.3; }
.callconsent__privacy { font-size:12px; color:var(--ink-500); line-height:1.5; background:var(--paper-sunken); border-radius:var(--radius-md); padding:11px 13px; margin-bottom:16px; }
.check--sm { font-size:12.5px; color:var(--ink-600); align-items:flex-start; line-height:1.4; margin-bottom:18px; }
.callconsent .btn[disabled] { background:var(--ink-200); color:var(--ink-500); box-shadow:none; cursor:not-allowed; }
.callconsent .btn[disabled]:hover { background:var(--ink-200); }
.callstate__orb {
  width:74px; height:74px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--coral-200), var(--coral-500) 72%);
  box-shadow:0 0 0 0 var(--coral-300);
  animation:callorb-pulse 1.5s var(--ease-spring) infinite;
}
.callstate.is-done .callstate__orb {
  background:radial-gradient(circle at 32% 30%, var(--mint-100), var(--mint-500) 72%);
  animation:none; box-shadow:0 8px 22px -8px var(--mint-500);
}
.callstate.is-error .callstate__orb {
  background:radial-gradient(circle at 32% 30%, #F7B5B7, var(--berry-500) 74%);
  animation:none; box-shadow:0 8px 22px -8px var(--berry-500);
}
@keyframes callorb-pulse {
  0%   { box-shadow:0 0 0 0 rgba(255,92,57,.45); }
  70%  { box-shadow:0 0 0 18px rgba(255,92,57,0); }
  100% { box-shadow:0 0 0 0 rgba(255,92,57,0); }
}

/* ── 16. Thank-you page ───────────────────────────────────────────────── */
.thanks { padding:120px 0; }
.thanks__inner { max-width:680px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; }
.thanks__mark img { border-radius:20px; box-shadow:var(--shadow-lg); }
.thanks__title { font-size:44px; font-weight:800; letter-spacing:var(--ls-tighter); line-height:1.08; }
.thanks__lead { font-size:18px; line-height:1.6; color:var(--ink-600); max-width:52ch; }
.thanks__steps { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:10px 0 6px; }
.thanks__step { background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--radius-pill); padding:10px 18px; font-size:14.5px; color:var(--ink-700); box-shadow:var(--shadow-sm); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1040px) {
  .char-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:960px) {
  .hero__grid { grid-template-columns:1fr; gap:44px; }
  .hero { padding:40px 0 64px; }
  .hero__form-card { max-width:none; }
  .bb__grid, .ask__grid { grid-template-columns:1fr; gap:40px; }
  .bb__media, .ask__media { max-width:460px; }
  .plans { grid-template-columns:repeat(2,1fr); }
  /* let the balloon spill a little past the photo's left edge on small screens.
     (auto-width clamps the left edge to the photo edge, so we nudge with a
     transform — baked into the float keyframes so they don't conflict) */
  .balloon { right:54%; animation-name:float-x; }
}
@media (max-width:820px) {
  /* timeline → stacked cards, icon-circle below each card */
  .tl { padding-bottom:0; }
  .tl__track { grid-template-columns:1fr; gap:50px; max-width:380px; margin-inline:auto; }
  .tl__card { height:auto; padding-top:44px; } /* ruimte voor de cirkel die half over de bovenrand valt */
  .tl__node { top:0; margin:0; transform:translate(-50%,-50%); } /* cirkel half boven de kaart, gecentreerd */
  .calls__grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  :root { --pad-x:22px; }
  .section { padding:64px 0; }
  .sectitle { font-size:30px; }
  .hero__title { font-size:36px; }
  .modal__title { font-size:26px; }
  .thanks { padding:84px 0; }
  .thanks__title { font-size:32px; }
}
@media (max-width:560px) {
  .char-grid { grid-template-columns:1fr; }
  .plans { grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .foot__grid { grid-template-columns:1fr 1fr; gap:30px; }
  .foot__brand { grid-column:1 / -1; }
  .lead-form__row { grid-template-columns:1fr; }
  .submit__meta > span:first-child { display:none; }
  /* Stapel als "bel-kaart": nummer prominent bovenaan, knop als volledige CTA eronder. */
  .ask__call { display:flex; flex-direction:column-reverse; align-items:stretch; text-align:center; gap:14px; border-radius:var(--radius-xl); padding:18px 16px 16px; }
  .ask__call-btn { justify-content:center; padding:15px 20px; font-size:17px; }
  .ask__call-num { font-size:22px; letter-spacing:.02em; }
}

/* ── 16b. Lucide icons (inline SVG) ───────────────────────────────────── */
/* Icons render at 1em and inherit colour via currentColor; size/colour is
   tuned per context below. */
.ic { width:1em; height:1em; display:inline-block; vertical-align:-0.125em; flex:none; }

.eyebrow .ic { color:var(--coral-600); }

/* hero form */
.inputwrap__icon { color:var(--ink-400); font-size:17px; }
.submit__label .ic { font-size:18px; }
.lead-form__fine .ic { color:var(--ink-400); font-size:14px; }

/* floating chips */
.chip .ic { font-size:15px; }

/* character cards */
.char-card__icon { color:var(--coral-600); font-size:23px; }

/* beauty list */
.bb__icon { color:var(--coral-600); font-size:18px; }

/* timeline node */
.tl__emoji { color:#fff; font-size:25px; }

/* telefoontjes badges */
.calls__badge { color:var(--coral-600); font-size:20px; }
.calls__col--want .calls__badge { color:#4391ca; }

/* memory note */
.note__line { display:flex; gap:10px; }
.note__line--greeting { display:block; }
.note__dash { color:var(--coral-500); flex:none; font-weight:600; }

/* ask / contact */
.ask__chip .ic { font-size:15px; }
.ask__call-btn .ic { font-size:17px; }

/* pricing check bullets */
.plan__check .ic { width:12px; height:12px; stroke-width:2.5; }

/* thank-you page */
.thanks__pop { color:var(--coral-500); width:.85em; height:.85em; vertical-align:-0.05em; }
.thanks__step .ic { color:var(--coral-500); font-size:16px; margin-right:2px; vertical-align:-0.15em; }

/* ── 16b. Hoor Sally — audio-demo (dark band) ─────────────────────────── */
.listen { background:#1E1915; color:#fff; }
.listen__grid {
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
/* Collapse to one column on mobile. Staat hier (ná de basisregel) zodat het de
   2-koloms basis overschrijft — anders blijft het 2 koloms en ontstaat er een
   lege strook rechts door de overlopende soundwave. */
@media (max-width:960px) {
  .listen__grid { grid-template-columns:1fr; gap:40px; }
}
.listen__copy .kicker { color:var(--coral-400); }
.listen__copy .kicker::before { background:var(--coral-500); }
.listen__copy .sectitle { color:#fff; margin-top:16px; }
.listen__copy .secsub { color:#C9BFB4; margin-top:16px; max-width:42ch; }

.player {
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-xl); padding:26px 30px 28px;
  box-shadow:var(--shadow-xl);
}
.player__top { display:flex; align-items:center; gap:20px; }

.player__play {
  flex:none; width:60px; height:60px; border:0; border-radius:50%; cursor:pointer;
  background:var(--coral-500); color:#fff; box-shadow:var(--shadow-coral);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.player__play:hover { background:var(--coral-600); transform:scale(1.05); }
.player__icon { display:none; }
.player__icon .ic { width:24px; height:24px; }
.player__icon--play .ic { margin-left:2px; } /* optisch centreren van de driehoek */
.player:not(.is-playing) .player__icon--play { display:flex; }
.player.is-playing .player__icon--pause { display:flex; }

.player__meter { flex:1; min-width:0; display:flex; flex-direction:column; gap:11px; }

/* Soundwave: smalle balkjes met variërende hoogtes, gecentreerd om de
   middenlijn. Twee identieke lagen liggen exact over elkaar; de coral laag
   wordt van links naar rechts onthuld (--progress) als een voice-recorder. */
.player__bars { position:relative; width:100%; height:38px; }
.player__wave {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:space-between;
}
.player__wave i {
  width:2px; flex:none; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.20);
}
.player__wave--fill {
  clip-path:inset(0 calc(100% - var(--progress, 0%)) 0 0);
  transition:clip-path 110ms linear;
}
.player__wave--fill i { background:var(--coral-400); }

.player__meta {
  font-family:var(--font-mono); font-size:12px; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:#9C9087;
}
.player__meta [data-audio-time] { color:#C9BFB4; }

.player__quote {
  margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
  font-size:17px; line-height:1.6; font-style:italic; color:#E3DBD0;
}
.player__quote strong { color:#fff; font-weight:700; }

/* ── 17. FAQ accordion ────────────────────────────────────────────────── */
.faq { background:var(--paper-sunken); }
.faq .sechead { max-width:none; }

.faq__list {
  margin:0; padding:0;
  margin-top:48px;
  max-width:760px; margin-inline:auto;
  display:flex; flex-direction:column; gap:0;
}

.faq__item {
  border-bottom:1px solid var(--ink-200);
}
.faq__item:first-child { border-top:1px solid var(--ink-200); }

.faq__btn {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:22px 4px;
  background:none; border:none; cursor:pointer;
  text-align:left;
  color:var(--ink-900);
}
.faq__btn:focus-visible {
  outline:2px solid var(--coral-400); outline-offset:2px; border-radius:4px;
}

.faq__label {
  font-size:17px; font-weight:600; line-height:1.4;
}
@media (max-width:600px) { .faq__label { font-size:15px; } }

.faq__icon {
  flex-shrink:0; width:22px; height:22px; color:var(--coral-500);
  transition:transform .25s ease;
}
.faq__btn[aria-expanded="true"] .faq__icon {
  transform:rotate(180deg);
}

.faq__a {
  margin:0; padding:0 4px 22px;
  overflow:hidden;
}
.faq__a[hidden] { display:none; }

.faq__body {
  margin:0; font-size:16px; line-height:1.7; color:var(--ink-600);
}

/* ── 18. Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .balloon { animation:none; }
  .balloon__text::after, .note__caret { animation:none; }
  .dot { animation:none; }
  .modal__dialog { animation:none; }
  * { transition-duration:.01ms !important; }
}
/* keep the small-screen balloon overhang even when motion is reduced */
@media (prefers-reduced-motion:reduce) and (max-width:960px) {
  .balloon { transform:translateX(-16px); }
}