@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap");

/* ==========================================================================
   LIVE kit counters (wijzijnopen.com) — the production kit sets 24px inline
   container padding; the -2 conversion pages neutralise it here so the
   semantic classes (.wrap etc.) control spacing. Placed BEFORE the static
   port so class rules (equal specificity, later in file) win.
   ========================================================================== */
:where([data-elementor-type="wp-page"]) .e-con { padding-block-start: 0; padding-block-end: 0; padding-inline-start: 0; padding-inline-end: 0; }
/* ASTRA p-margin counter: Astra sets p{margin-bottom:1.75em}; re-zero at equal specificity (this sheet loads later). Contextual p-margins below still win by document order. */
:where([data-elementor-type="wp-page"]) p { margin: 0; }
/* ASTRA list counter: Astra indents ul/ol (margin 0 0 1.5em 3em); re-zero, contextual list margins below win by doc order. */
:where([data-elementor-type="wp-page"]) ul, :where([data-elementor-type="wp-page"]) ol { margin: 0; }
/* ASTRA root font-size counter: Astra shrinks html font-size at its mobile/tablet breakpoints, scaling every rem. The static root is 100% at all widths. */
html { font-size: 100%; }
/* Poppins — same source + weights as the static site (public_html/includes/header.php) */

/* ==========================================================================
   Wij Zijn Open — child theme stylesheet.
   Ported verbatim from public_html/assets/css/style.css (static source of truth).
   Foundation (tokens, type scale, base/body) + reusable presentational
   components. Header/nav/drawer, forms (Gravity Forms), FAQ accordion and
   legacy/dead blocks are intentionally NOT ported here.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette — one colour per proposition/intent */
  --coral:        #E86F5B;  /* General / "Open voor contact" / primary / CTAs */
  --coral-deep:   #D45F4A;  /* coral hover */
  --burgundy:     #800020;  /* Singles / "Open voor een connectie" (romantic) */
  --burgundy-deep:#5C0017;  /* burgundy hover */
  --green:        #004225;  /* Business / "Open voor ideeën" / B2B */
  --green-deep:   #00301B;  /* green hover */
  --ink:          #25282A;  /* body text & contrast */
  --sand:         #F3E9DC;  /* backgrounds & soft areas */
  --sand-warm:    #EADBC6;  /* deeper sand for layering */
  --paper:        #FFFDF9;  /* Soft White — light base / white space */
  --gold:         #B89B5E;  /* premium accent / details */
  --white:        #FFFFFF;
  /* Back-compat aliases (kept so legacy refs resolve to the new palette) */
  --terracotta:   var(--burgundy);
  --terracotta-deep: var(--burgundy-deep);
  --sage:         var(--green);
  --sage-deep:    var(--green-deep);

  /* Text (contrast-verified on sand) */
  --ink-soft:  rgba(37, 40, 42, 0.74);  /* secondary text, ≥4.5:1 */
  --ink-mute:  rgba(37, 40, 42, 0.58);  /* meta only, never body */
  --ink-line:  rgba(37, 40, 42, 0.13);
  --ink-faint: rgba(37, 40, 42, 0.05);
  --coral-tint: rgba(232, 111, 91, 0.08);

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --gut: 1.5rem;
  --radius-pill: 28px;
  --radius-card: 24px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-input: 12px;

  /* Shadows — soft, warm-tinted */
  --shadow-1: 0 2px 14px rgba(37, 40, 42, 0.05);
  --shadow-2: 0 14px 40px rgba(37, 40, 42, 0.10);
  --shadow-float: 0 22px 60px rgba(37, 40, 42, 0.14);

  /* Easing */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Semantic z-index scale */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-drawer-backdrop: 300;
  --z-drawer: 310;
  --z-skip: 400;

  --maxw: 1180px;
  --prose: 68ch;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  max-width: 100%;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- Type ----------
   Single family: Poppins. 700 hero headlines, 600 section/card titles & CTAs,
   500 labels & nav, 400 body. */
h1, h2, h3, h4 { font-family: var(--font); font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.14; letter-spacing: -0.012em; }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -0.015em; }
h4 { font-size: 1.15rem; }
p { text-wrap: pretty; }

/* Display accent — emotional headline spans. Poppins, no serif/italic. */
.display-em { font-weight: 700; }

.lead { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.6; color: var(--ink-soft); max-width: 56ch; }
.lead--center { margin-inline: auto; }
.coral { color: var(--coral); }
.sage-text { color: var(--sage-deep); }
.terra-text { color: var(--terracotta); }

/* Section label — replaces the banned uppercase eyebrow. Used sparingly. */
.label {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 600; font-size: 0.95rem; color: var(--coral); letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.label::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background: no-repeat center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'%3E%3Cpath d='M 177.7 93.2 A 78 78 0 1 1 144.7 36.1' stroke='%23E86F5B' stroke-width='22' stroke-linecap='round'/%3E%3Ccircle cx='167.5' cy='61' r='11' fill='%23E86F5B'/%3E%3C/svg%3E");
}
.label--sage { color: var(--sage-deep); }
.label--terra { color: var(--terracotta); }
.label--terra::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'%3E%3Cpath d='M 177.7 93.2 A 78 78 0 1 1 144.7 36.1' stroke='%23800020' stroke-width='22' stroke-linecap='round' fill='none'/%3E%3Cpath fill='%23800020' d='M 167.5 73 C 167.5 73, 156 65.5, 156 57.5 C 156 52.8, 159.8 49, 164.5 49 C 166.3 49, 167.5 50, 167.5 50 C 167.5 50, 168.7 49, 170.5 49 C 175.2 49, 179 52.8, 179 57.5 C 179 65.5, 167.5 73, 167.5 73 Z'/%3E%3C/svg%3E");
}
/* Bulb variant — "open voor ideeën" (zakelijk). Scoped so it does not affect the Open Spot sage labels. */
.label--bulb::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'%3E%3Cpath d='M 177.7 93.2 A 78 78 0 1 1 144.7 36.1' stroke='%23004225' stroke-width='22' stroke-linecap='round' fill='none'/%3E%3Cg fill='%23004225'%3E%3Cpath d='M 167.5 48 C 161 48, 156 53, 156 59.5 C 156 63.5, 158 67, 161 68.8 L 161 71.5 L 174 71.5 L 174 68.8 C 177 67, 179 63.5, 179 59.5 C 179 53, 174 48, 167.5 48 Z'/%3E%3Crect x='161' y='72.8' width='13' height='2.4' rx='1.1'/%3E%3Crect x='162.5' y='76' width='10' height='2.4' rx='1.1'/%3E%3C/g%3E%3C/svg%3E");
}

/* Plain uppercase kicker (no symbol) — section eyebrow */
.kicker { display: inline-block; font-family: var(--font); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); margin-bottom: 1rem; }
.kicker--sand { color: rgba(255,255,255,0.7); }
.section-head .kicker { display: block; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 820px; }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section--sand { background: var(--sand); }
.section--warm { background: var(--sand-warm); }
.section--paper { background: var(--paper); }

.section--white { background: var(--white); }

/* ---------- Mission note (non-profit statement) - ported from wzo-home.php section 2b ---------- */
.note { background: var(--sand); border: 1px solid var(--ink-line); border-radius: 24px; padding: clamp(2.25rem, 4.5vw, 3.5rem); text-align: center; box-shadow: var(--shadow-1); }

.note__mark { display: inline-block; width: clamp(52px, 7vw, 66px); margin-bottom: 1.4rem; }

.note__mark svg { width: 100%; height: auto; display: block; }

/* sized to the RENDERED original: on wzo-home.php the .wzo-wrap--narrow h2 rule (48px cap) outranks .wzo-note__title, and .wzo-home p{margin:0} kills the body top margin */
.note__title { font-weight: 600; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; margin: 0; }

.note__body { margin: 0 auto; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.section--green { background: var(--green); color: rgba(255,255,255,0.86); }
.section--green h1, .section--green h2, .section--green h3 { color: #fff; }
.section--green .lead { color: rgba(255,255,255,0.82); }
.section--burgundy { background: var(--burgundy); color: rgba(255,255,255,0.86); }
.section--burgundy h1, .section--burgundy h2, .section--burgundy h3 { color: #fff; }
.section--burgundy .lead { color: rgba(255,255,255,0.82); }
.section--ink { background: var(--ink); color: var(--sand); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }
.section--ink .lead { color: rgba(243, 233, 220, 0.78); }
.section-head { max-width: 680px; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: 1.1rem; }
.section-head--center .lead { margin-inline: auto; }
.clip { overflow: hidden; }

/* ---------- Open-circle motif ---------- */
.motif {
  position: absolute; pointer-events: none; z-index: var(--z-base);
  border: 2px solid var(--coral); border-radius: 50%; opacity: 0.07;
}
.motif--tr { width: clamp(280px, 40vw, 560px); aspect-ratio: 1; top: -14%; right: -8%; }
.motif--bl { width: clamp(240px, 34vw, 460px); aspect-ratio: 1; bottom: -16%; left: -10%; }
.section > .wrap { position: relative; z-index: 2; }
@media (max-width: 620px) { .motif { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-weight: 500; font-size: 1rem; line-height: 1.2;
  border-radius: var(--radius-pill); padding: 0.95rem 1.9rem;
  border: 2px solid transparent; white-space: nowrap; max-width: 100%; text-align: center;
  transition: transform .35s var(--ease), background .2s, box-shadow .35s, color .2s, border-color .2s;
}
@media (max-width: 560px) { .btn { white-space: normal; } }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--lg { padding: 1.1rem 2.3rem; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--coral); color: var(--white); box-shadow: 0 10px 26px rgba(232,111,91,0.30); }
.btn--primary:hover { background: var(--coral-deep); box-shadow: 0 14px 32px rgba(232,111,91,0.38); }
.btn--outline { border-color: var(--coral); color: var(--coral); }
.btn--outline:hover { background: var(--coral-tint); }
.btn--outline-green { border-color: #004225; color: #004225; }
.btn--outline-green:hover { background: rgba(0,66,37,0.08); }
.btn--spot { background: var(--green); color: #fff; }
.btn--spot:hover { background: var(--green-deep); color: #fff; }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: #000; }
.btn--ghost { border-color: rgba(255,255,255,0.45); color: var(--white); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn--on-coral { background: var(--white); color: var(--coral); box-shadow: 0 10px 28px rgba(0,0,0,0.14); }
.btn--on-coral:hover { background: var(--ink); color: var(--white); }

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- Page header (subpages) ---------- */
.phead { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(1.75rem, 3vw, 2.75rem); position: relative; }
.phead__inner { max-width: 760px; }
.phead h1 { margin: 1rem 0 1.25rem; }
.crumb { font-size: 0.85rem; color: var(--ink-mute); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.crumb a:hover { color: var(--coral); }

/* ---------- Hero v2 (text + photo) ---------- */
.hero-v2 { padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(3rem, 7vw, 6rem); }
.hero-v2 .wrap { position: relative; z-index: 2; }
.hero-v2__panel {
  background: var(--sand-warm); border-radius: clamp(22px, 3vw, 40px);
  padding: clamp(2rem, 4.5vw, 4.5rem); display: grid;
  grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero-v2__content { min-width: 0; }
.hero-v2 h1 { margin-bottom: 1.4rem; font-size: clamp(2.7rem, 5.6vw, 4.8rem); line-height: 1.08; }
.hero-v2 .coral { color: var(--coral); }
.hero-v2__lead { font-family: var(--font); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
.hero-v2__media { position: relative; aspect-ratio: 1 / 1; border-radius: clamp(16px, 2.5vw, 28px); overflow: hidden; box-shadow: var(--shadow-2); }
.hero-v2__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-v2__media .ph { background: linear-gradient(150deg, var(--sand), #E2D2BB); display: grid; place-items: center; }
@media (max-width: 880px) {
  .hero-v2__panel { grid-template-columns: 1fr; }
  .hero-v2__media { order: -1; max-height: 62vh; aspect-ratio: 1 / 1; margin-inline: auto; width: 100%; }
}

/* ---------- Signal rows ---------- */
.signals { border-top: 1px solid var(--ink-line); }
.signal {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center; padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--ink-line); position: relative;
  transition: background .3s var(--ease);
}
.signal:hover { background: var(--coral-tint); }
.signal__mark { width: clamp(58px, 8vw, 84px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; }
.signal--coral .signal__mark { background: rgba(232,111,91,0.10); }
.signal--sage .signal__mark { background: rgba(0,66,37,0.10); }
.signal--terra .signal__mark { background: rgba(128,0,32,0.10); }
.signal__mark svg { width: 56%; }
.signal__body { min-width: 0; }
.signal__intent { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.3rem; }
.signal--coral .signal__intent { color: var(--coral); }
.signal--sage .signal__intent { color: var(--sage-deep); }
.signal--terra .signal__intent { color: var(--terracotta); }
.signal__body h3 { margin-bottom: 0.35rem; }
.signal__body p { color: var(--ink-soft); max-width: 52ch; }
.signal__go {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ink-line);
  display: grid; place-items: center; flex-shrink: 0; transition: border-color .25s, background .25s, transform .35s var(--ease);
}
.signal:hover .signal__go { border-color: var(--coral); background: var(--coral); transform: translateX(4px); }
.signal:hover .signal__go svg path { stroke: #fff; }
.signal__go svg { width: 20px; }
.signal__link-cover { position: absolute; inset: 0; }
@media (max-width: 680px) {
  .signal { grid-template-columns: auto 1fr; }
  .signal__go { display: none; }
}

/* ---------- Three entry points ---------- */
.entries { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.entry {
  background: var(--paper); border-radius: var(--radius-card); padding: clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 0.5rem;
  border-top: 4px solid var(--coral); transition: transform .3s var(--ease), box-shadow .3s;
}
.entry--green { border-top-color: var(--green); }
.entry--burgundy { border-top-color: var(--burgundy); }
.entry:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.entry__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--coral-tint); margin-bottom: 0.5rem; }
.entry--green .entry__icon { background: rgba(0,66,37,0.10); }
.entry--burgundy .entry__icon { background: rgba(128,0,32,0.10); }
.entry__icon svg { width: 24px; height: 24px; }
.entry h3 { margin-bottom: 0.15rem; }
.entry p { color: var(--ink-soft); font-size: 0.97rem; flex-grow: 1; }
.entry__link { margin-top: 0.9rem; font-family: var(--font); font-weight: 600; font-size: 0.95rem; color: var(--coral); display: inline-flex; align-items: center; gap: 0.4rem; }
.entry--green .entry__link { color: var(--green); }
.entry--burgundy .entry__link { color: var(--burgundy); }
.entry__link .arrow { transition: transform .25s var(--ease); }
.entry:hover .entry__link .arrow { transform: translateX(4px); }
@media (max-width: 860px) { .entries { grid-template-columns: 1fr; } }

/* ---------- Intention mark cards (real logos on light bg) ---------- */
.marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.mark-card {
  background: var(--white); border-radius: var(--radius-md); padding: clamp(1.75rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-1); border-top: 4px solid var(--coral);
  display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s;
}
.mark-card--singles { border-top-color: var(--burgundy); }
.mark-card--business { border-top-color: var(--green); }
.mark-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.mark-card__logo { width: 60px; height: 60px; margin-bottom: 1.25rem; }
.mark-card__name { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--coral); }
.mark-card--singles .mark-card__name { color: var(--burgundy); }
.mark-card--business .mark-card__name { color: var(--green); }
.mark-card h3 { margin: 0.3rem 0 0.6rem; }
.mark-card p { color: var(--ink-soft); font-size: 0.98rem; flex-grow: 1; }
.mark-card__link { margin-top: 1.25rem; font-weight: 500; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--coral); }
.mark-card--singles .mark-card__link { color: var(--burgundy); }
.mark-card--business .mark-card__link { color: var(--green); }
.mark-card__link .arrow { transition: transform .25s var(--ease); }
.mark-card:hover .mark-card__link .arrow { transform: translateX(4px); }

/* ---------- Stacked intention cards (Eén symbool. Drie intenties.) ---------- */
.intent-stack { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vw, 2.5rem); }
.intent-card {
  position: sticky; top: 100px;
  border-radius: var(--radius-card); overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch;
  min-height: clamp(320px, 46vh, 460px); color: #fff;
  box-shadow: var(--shadow-2);
}
.intent-card:nth-child(1) { top: 96px; }
.intent-card:nth-child(2) { top: 118px; }
.intent-card:nth-child(3) { top: 140px; }
.intent-card--coral { background: var(--coral); }
.intent-card--burgundy { background: var(--burgundy); }
.intent-card--green { background: var(--green); }
.intent-card__body { padding: clamp(1.75rem, 3.5vw, 3.25rem); display: flex; flex-direction: column; justify-content: center; }
.intent-card__num { display: block; font-family: var(--font); font-weight: 700; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; opacity: 0.92; margin-bottom: 1.1rem; }
.intent-card h3 { color: #fff; margin: 0.55rem 0 0.7rem; font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
.intent-card__intent { display: block; font-family: var(--font); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.intent-card p { color: rgba(255,255,255,0.92); max-width: 48ch; font-size: 1rem; }
.intent-card__media { position: relative; overflow: hidden; }
.intent-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intent-card__mark { position: absolute; top: 1.25rem; right: 1.25rem; width: clamp(54px, 7vw, 80px); aspect-ratio: 1; padding: clamp(9px, 1.1vw, 13px); box-sizing: border-box; background: #fff; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.intent-card__mark svg { display: block; width: 100%; height: 100%; }
@media (max-width: 620px) {
  .intent-card { grid-template-columns: 1fr; min-height: 0; }
  .intent-card:nth-child(1) { top: 76px; }
  .intent-card:nth-child(2) { top: 92px; }
  .intent-card:nth-child(3) { top: 108px; }
  .intent-card__body { padding: clamp(1.4rem, 5vw, 1.9rem); }
  .intent-card__media { aspect-ratio: 16/11; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .intent-card { position: relative; top: auto; }
}

/* ---------- Product feature (Een klein symbool. Grote betekenis.) ---------- */
.feature { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.feature--reverse .feature__media { order: 2; }
.feature__media {
  border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 1; background: var(--sand-warm);
  transform: rotate(-5deg); box-shadow: var(--shadow-float);
  transition: transform .5s var(--ease); will-change: transform; margin: 0.5rem clamp(0.5rem, 2vw, 1.5rem);
}
.feature__media:hover { transform: rotate(0deg) scale(1.01); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); }
.feature__body h2 { margin-bottom: 1.1rem; }
.feature__body p { color: var(--ink-soft); }
.feature__body p + p { margin-top: 1rem; }
.feature__body .actions { margin-top: 1.8rem; }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature--reverse .feature__media { order: 0; }
  .feature__media { transform: none; margin: 0; box-shadow: var(--shadow-2); }
  .feature__media:hover { transform: none; }
  .feature__media img { transform: none; }
}

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { border-radius: var(--radius-lg); aspect-ratio: 4/3; display: grid; place-items: center; background: linear-gradient(150deg, var(--sand-warm), #E2D2BB); position: relative; overflow: hidden; }
.split--paper .split__media { background: linear-gradient(150deg, var(--sand), var(--sand-warm)); }
.split__body h2 + p { margin-top: 1.1rem; }
.split__body p + p { margin-top: 1rem; }
.split__list { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; }
.split__list li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--ink-soft); }
.split__list .tick { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.split__cta { margin-top: 2rem; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.step__num {
  width: 46px; height: 46px; border-radius: 50%; background: var(--coral); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; margin-bottom: 1.1rem;
}
.step--sage .step__num { background: var(--green); color: #fff; }
.step--terra .step__num { background: var(--burgundy); color: #fff; }
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); }

/* ---------- Evidence / stats grid (real sourced data) ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }
.stat { background: var(--white); border-radius: var(--radius-md); padding: clamp(1.25rem, 2.5vw, 1.75rem); box-shadow: var(--shadow-1); }
.stat__num { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; color: var(--coral); line-height: 1; letter-spacing: -0.02em; }
.stat__label { font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.6rem; line-height: 1.45; }
.stat__src { font-size: 0.75rem; color: var(--ink-mute); margin-top: 0.5rem; }
.evidence { display: flex; flex-direction: column; gap: 1.25rem; }
.evidence__item { padding: 1.4rem 0; border-bottom: 1px solid var(--ink-line); }
.evidence__item:first-child { border-top: 1px solid var(--ink-line); }
.evidence__item h3 { margin-bottom: 0.4rem; }
.evidence__item p { color: var(--ink-soft); max-width: 68ch; }
.evidence__item cite { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: var(--ink-mute); font-style: normal; }

/* ---------- Stat grid (serif numbers, one photo card) ---------- */
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.statcard {
  border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(220px, 26vw, 300px);
  background: var(--sand-warm);
}
.statcard--coral { background: var(--coral); color: #fff; }
.statcard--ink { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.statcard--photo { position: relative; overflow: hidden; color: #fff; background: var(--ink); }
.statcard--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; z-index: 0; }
.statcard--photo > *:not(img) { position: relative; z-index: 2; }
.statcard--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(37,40,42,0.25), rgba(37,40,42,0.78)); z-index: 1; }
.statcard__num { font-family: var(--font); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.02em; }
.statcard--coral .statcard__num, .statcard--photo .statcard__num, .statcard--ink .statcard__num { color: #fff; }
.statcard:not(.statcard--coral):not(.statcard--photo):not(.statcard--ink) .statcard__num { color: var(--coral); }
.statcard__label { font-family: var(--font); font-size: 0.95rem; line-height: 1.45; margin-top: 1rem; }
.statcard:not(.statcard--coral):not(.statcard--photo):not(.statcard--ink) .statcard__label { color: var(--ink-soft); }
.statcard--coral .statcard__label, .statcard--photo .statcard__label, .statcard--ink .statcard__label { color: rgba(255,255,255,0.92); }
.statcard__src { font-size: 0.75rem; opacity: 0.7; margin-top: 0.6rem; font-family: var(--font); }
@media (max-width: 760px) { .statgrid { grid-template-columns: 1fr; } .statcard { min-height: 0; } }

/* ---------- Product gallery (photos) ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.product { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s; }
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.product img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; background: var(--sand-warm); }
.product__cap { padding: 1rem 1.1rem 1.15rem; font-weight: 600; font-size: 1rem; }
.product__cap small { display: block; color: var(--ink-mute); font-weight: 400; font-size: 0.85rem; margin-top: 2px; }
.product-hero { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); aspect-ratio: 1; }
.product-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Pricing (partner packages) ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.price-card { background: var(--white); border-radius: var(--radius-md); padding: clamp(1.75rem, 3vw, 2.25rem); box-shadow: var(--shadow-1); border-top: 4px solid var(--green); display: flex; flex-direction: column; text-align: center; }
.price-card--featured { box-shadow: var(--shadow-2); position: relative; }
.price-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); }
.price-card h3 { font-size: 1.25rem; }
.price-card__price { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; color: var(--green); letter-spacing: -0.02em; margin: 0.5rem 0 0.25rem; }
.price-card__price small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ink-mute); letter-spacing: 0; }
.price-card p { color: var(--ink-soft); font-size: 0.96rem; margin: 0.75rem 0 1.5rem; flex-grow: 1; }
@media (max-width: 780px) { .pricing { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ---------- B2B packages (structure, no final pricing) ---------- */
.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 1.75rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.benefit { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-soft); font-size: 0.98rem; }
.benefit svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.package { background: var(--paper); border-radius: var(--radius-card); padding: clamp(1.75rem, 3vw, 2.25rem); box-shadow: var(--shadow-1); border-top: 4px solid var(--green); display: flex; flex-direction: column; }
.package--featured { box-shadow: var(--shadow-2); }
.package__badge { align-self: flex-start; background: rgba(0,66,37,0.1); color: var(--green); font-family: var(--font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); margin-bottom: 1rem; }
.package h3 { font-size: 1.35rem; }
.package__for { font-family: var(--font); color: var(--ink-mute); font-size: 0.9rem; margin: 0.3rem 0 1rem; }
.package__price { font-family: var(--font); font-weight: 600; color: var(--green); font-size: 1.05rem; margin-bottom: 1rem; }
.package ul { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.75rem; flex-grow: 1; }
.package li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink-soft); font-size: 0.95rem; }
.package li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; }
@media (max-width: 860px) { .packages { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---------- What we offer ---------- */
.offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.offer__card { background: var(--paper); border-radius: var(--radius-card); padding: clamp(1.5rem, 2.8vw, 2rem); box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s; }
.offer__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.offer__card h3 { margin-bottom: 0.5rem; }
.offer__card p { color: var(--ink-soft); font-size: 0.97rem; }
.offer__tag { font-family: var(--font); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral); display: block; margin-bottom: 0.6rem; }

/* ---------- Choose how (persoon / locatie / partner) ---------- */
.choose { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); }
.choose__card {
  border-radius: var(--radius-card); padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--sand-warm); display: flex; flex-direction: column; align-items: flex-start;
}
.choose__card--green { background: var(--green); color: #fff; }
.choose__card--green h3 { color: #fff; }
.choose__card h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.5rem; }
.choose__card p { color: var(--ink-soft); max-width: 60ch; margin-bottom: 1.5rem; }
.choose__card--green p { color: rgba(255,255,255,0.9); }

/* ---------- USP image cards (Voor locaties: text left, image right) ---------- */
.uspcards { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vw, 2rem); }
.uspcard {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--paper); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.uspcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.uspcard__body { padding: clamp(1.75rem, 3.5vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.uspcard__body .label { margin-bottom: 0.75rem; }
.uspcard__body h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-bottom: 0.6rem; }
.uspcard__body p { color: var(--ink-soft); max-width: 46ch; }
.uspcard__media { position: relative; min-height: 240px; }
.uspcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .uspcard { grid-template-columns: 1fr; }
  .uspcard__media { order: -1; aspect-ratio: 16/10; min-height: 0; }
}

/* ---------- Kernwaarden (Waar wij voor staan) ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.value-card { background: var(--paper); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-1); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.value-card__media { aspect-ratio: 4/3; background: var(--sand-warm); }
.value-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.value-card__body { padding: clamp(1.5rem, 2.6vw, 2rem); }
.value-card__head { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.6rem; }
.value-card__num { font-family: var(--font); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; color: var(--coral); }
.value-card__head h3 { margin-bottom: 0; }
.value-card__body h3 { margin-bottom: 0.5rem; }
.value-card__body p { color: var(--ink-soft); font-size: 0.97rem; }
.values__coda { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; color: var(--ink); font-weight: 500; }
.values__coda strong { display: block; color: var(--coral); font-weight: 700; margin: 0.6rem 0 0.4rem; }
.values__coda span { display: block; color: var(--ink-soft); font-size: 1rem; font-weight: 400; }
@media (max-width: 800px) { .values { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---------- The Open Code (centered serif statements) ---------- */
.opencode { max-width: 760px; margin-inline: auto; text-align: center; }
.opencode__list { display: flex; flex-direction: column; }
.opencode__item { font-family: var(--font); font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; padding: clamp(1.1rem, 2.5vw, 1.6rem) 0; color: var(--ink); }
.opencode__item:not(:last-child) { border-bottom: 1px solid var(--ink-line); }
.opencode__item em { font-style: normal; font-weight: 700; color: var(--coral); }
.opencode__foot { margin-top: 2rem; color: var(--ink-soft); font-family: var(--font); max-width: 56ch; margin-inline: auto; }

/* ---------- Showcase / mock-ups gallery ---------- */
.showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(0.85rem, 2vw, 1.25rem); }
.shot { border-radius: var(--radius-md); overflow: hidden; position: relative; background: var(--sand-warm); aspect-ratio: 4/5; box-shadow: var(--shadow-1); }
.shot--wide { grid-column: span 2; aspect-ratio: 16/10; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.1rem 1rem; color: #fff; font-family: var(--font); font-weight: 600; font-size: 0.95rem; background: linear-gradient(180deg, transparent, rgba(37,40,42,0.7)); }
@media (max-width: 620px) { .shot--wide { grid-column: span 1; aspect-ratio: 4/5; } }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.chip { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--paper); border-radius: var(--radius-pill); padding: 0.6rem 1.1rem; font-size: 0.92rem; font-weight: 500; box-shadow: var(--shadow-1); }
.chip .dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.dot--coral { background: var(--coral); }
.dot--terra { background: var(--terracotta); }
.dot--sage { background: var(--sage); }

/* ---------- CTA band ---------- */
.cta { background: var(--coral); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta .motif { border-color: #fff; opacity: 0.14; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,0.92); max-width: 52ch; margin: 1.1rem auto 0; }
.cta .actions { justify-content: center; margin-top: 2rem; }

/* ---------- Photo CTA band ---------- */
.cta-photo { position: relative; overflow: hidden; text-align: center; color: #fff; padding-block: clamp(5rem, 14vw, 9rem); }
.cta-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(37,40,42,0.5), rgba(37,40,42,0.72)); z-index: 1; }
.cta-photo .wrap { position: relative; z-index: 2; }
.cta-photo h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); }
.cta-photo p { color: rgba(255,255,255,0.9); max-width: 48ch; margin: 1.1rem auto 0; font-family: var(--font); }
.cta-photo .actions { justify-content: center; margin-top: 2rem; }

/* ---------- Footer (base) ---------- */
.footer { background: var(--sand); border-top: 1px solid rgba(232,111,91,0.22); padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(1.75rem, 3vw, 2.75rem); }
.footer__brand img { height: 51px; margin-bottom: 1.1rem; }
.footer__brand p { font-size: 0.95rem; max-width: 300px; color: var(--ink-soft); }
.footer__brand .mline { color: var(--coral); font-weight: 500; font-style: italic; margin-top: 1rem; }
.footer__col h4 { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1rem; font-weight: 600; }
.footer__col a { display: block; color: var(--ink-soft); font-size: 0.95rem; padding: 0.35rem 0; transition: color .2s; }
.footer__col a:hover { color: var(--coral); }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: var(--ink-mute); }
.footer__social { display: flex; gap: 1.25rem; }
.footer__social a { color: var(--ink-soft); transition: color .2s; }
.footer__social a:hover { color: var(--coral); }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Coral footer (override) ---------- */
.footer { background: var(--coral); border-top: none; color: #fff; padding-top: clamp(3.5rem, 6vw, 5rem); padding-bottom: 2.25rem; }
.footer__logo { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font); font-size: 1.3rem; font-weight: 600; color: #fff; margin-bottom: 1rem; }
.footer__brand p { color: rgba(255,255,255,0.88); max-width: 320px; }
.footer__brand .footer__social { margin-top: 1.25rem; }
.footer__social { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer__social a { color: #fff; font-family: var(--font); font-weight: 500; font-size: 0.92rem; opacity: 0.9; transition: opacity .2s; }
.footer__social a:hover { opacity: 1; text-decoration: underline; }
.footer__col h4 { font-family: var(--font); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 1rem; font-weight: 600; }
.footer__col a { display: block; color: rgba(255,255,255,0.92); font-size: 0.95rem; padding: 0.35rem 0; transition: opacity .2s; }
.footer__col a:hover { color: #fff; text-decoration: underline; }
.footer__bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.25); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-start; font-size: 0.85rem; }
.footer__legal { display: flex; flex-direction: column; gap: 0.5rem; max-width: 60ch; color: rgba(255,255,255,0.85); }
.footer__reg { font-size: 0.8rem; color: rgba(255,255,255,0.72); line-height: 1.5; }
.footer__links { display: flex; gap: 1.25rem; }
.footer__links a { color: rgba(255,255,255,0.88); transition: opacity .2s; }
.footer__links a:hover { color: #fff; text-decoration: underline; }

/* ---------- Prose ---------- */
.prose { max-width: var(--prose); }
.prose p { color: var(--ink-soft); margin-bottom: 1.25rem; }
.prose h2 { margin: 2.5rem 0 1rem; }
.prose h3 { margin: 2rem 0 0.75rem; }
.prose ul { margin: 1rem 0 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.prose ul li { padding-left: 1.75rem; position: relative; color: var(--ink-soft); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border: 2px solid var(--coral); border-radius: 50%; }
.pullquote { font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-style: italic; color: var(--coral); margin: 2rem 0; font-weight: 500; line-height: 1.4; text-wrap: balance; }

/* ---------- Utilities ---------- */
.skip { position: absolute; left: 1rem; top: -60px; background: var(--ink); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; z-index: var(--z-skip); transition: top .2s; font-weight: 500; }
.skip:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Motion ---------- */
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-anim > * { animation: fade-up .7s var(--ease) both; }
  .hero-anim > *:nth-child(1) { animation-delay: .05s; }
  .hero-anim > *:nth-child(2) { animation-delay: .12s; }
  .hero-anim > *:nth-child(3) { animation-delay: .19s; }
  .hero-anim > *:nth-child(4) { animation-delay: .26s; }
  .hero-anim > *:nth-child(5) { animation-delay: .33s; }
}
.rise { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .rise.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   MaxiBlocks integration
   The Style Card schema (v2.2.0) has no button border-radius field, so the
   brand pill radius is enforced here as the default for MaxiBlocks buttons.
   No !important: per-block border settings still override.
   ========================================================================== */
.maxi-button-block__button { border-radius: 28px; }

/* ==========================================================================
   Header chrome — ported from public_html/assets/css/style.css (.nav* / .drawer*)
   for the FSE header template part (parts/header.html). Buttons reuse .btn--*.
   ========================================================================== */

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(243,233,220,0.84);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.nav.is-scrolled { border-bottom-color: var(--ink-line); box-shadow: 0 6px 28px rgba(37,40,42,0.05); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 1.5rem; }
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 40px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__link { font-weight: 500; font-size: 0.95rem; position: relative; padding: 0.4rem 0; transition: color .2s; }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--coral); transition: width .3s var(--ease); }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--coral); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 0.75rem; }

.nav__item { position: relative; }
.nav__item--menu > .nav__link { display: inline-flex; align-items: center; gap: 0.32rem; }
.nav__chev { width: 11px; height: 11px; transition: transform .25s; }
.nav__menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--paper); border-radius: 16px; box-shadow: var(--shadow-float);
  padding: 0.6rem; min-width: 270px; opacity: 0; visibility: hidden;
  transition: opacity .22s, transform .22s; border: 1px solid var(--ink-faint); z-index: var(--z-dropdown);
}
.nav__item--menu:hover .nav__menu, .nav__item--menu:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__item--menu:hover .nav__chev { transform: rotate(180deg); }
.nav__menu a { display: flex; gap: 0.8rem; padding: 0.7rem 0.85rem; border-radius: 11px; transition: background .18s; align-items: flex-start; }
.nav__menu a:hover { background: var(--sand); }
.nav__menu .dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 0.45rem; flex-shrink: 0; }
.nav__menu strong { font-weight: 600; font-size: 0.95rem; display: block; }
.nav__menu span small, .nav__menu .sub { font-size: 0.82rem; color: var(--ink-mute); line-height: 1.4; display: block; }

.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; }
.nav__burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }

@media (max-width: 1000px) {
  .nav__links, .nav__cta .btn--outline { display: none; }
  .nav__burger { display: flex; }
}
@media (max-width: 560px) {
  .nav__cta .btn--primary { display: none; }
  .nav__inner { height: 66px; }
  .nav__logo img { height: 36px; }
  .nav__burger { padding: 8px 4px 8px 12px; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--sand);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease);
  display: flex; flex-direction: column; padding: 1.5rem; overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; height: 44px; margin-bottom: 1.75rem; }
.drawer__close { background: none; border: none; font-size: 2rem; line-height: 1; padding: 0 8px; }
.drawer__links { display: flex; flex-direction: column; }
.drawer__links a { font-size: 1.35rem; font-weight: 600; padding: 0.75rem 0; border-bottom: 1px solid var(--ink-faint); }
.drawer__links a small { display: block; font-size: 0.85rem; font-weight: 400; color: var(--ink-mute); margin-top: 2px; }
.drawer__cta { margin-top: auto; padding-top: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* ==========================================================================
   Header colour pinning.
   The FSE header part is emitted through do_blocks(), which wraps it as a
   MaxiBlocks block (.maxi-block--use-sc). The active Style Card paints links
   with the coral link palette, which would otherwise repaint the nav links and
   the button labels. Pin the header's intended colours here.
   ========================================================================== */
.nav .nav__link { color: var(--ink) !important; }
.nav .nav__link:hover, .nav .nav__link[aria-current="page"] { color: var(--coral) !important; }
.btn--primary, .btn--spot, .btn--ink, .btn--ghost { color: #fff !important; }
.btn--on-coral { color: var(--coral) !important; }
.btn--on-coral:hover { color: #fff !important; }
.btn--outline { color: var(--coral) !important; }
.btn--outline-green { color: #004225 !important; }

/* ==========================================================================
   Footer — Warm Sand brand SKILL footer (FSE part parts/footer.html).
   Overrides the earlier coral footer block. Link colours are pinned !important
   because the footer is emitted via do_blocks() (MaxiBlocks SC would repaint
   links coral otherwise).
   ========================================================================== */
.footer { background: var(--sand); border-top: 1px solid rgba(232,111,91,0.20); color: var(--ink); padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: clamp(1.75rem, 3vw, 2.75rem); }
.footer__brand { max-width: 320px; }
.footer__logo { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font); font-size: 1.3rem; font-weight: 600; color: var(--ink) !important; margin-bottom: 1rem; }
.footer__logo svg { width: 34px; height: 34px; flex-shrink: 0; }
.footer__mline { color: var(--coral); font-family: var(--font); font-weight: 500; font-style: italic; max-width: 320px; margin: 0; }
.footer__col h4 { font-family: var(--font); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1rem; font-weight: 600; }
.footer__col a { display: block; color: var(--ink) !important; font-family: var(--font); font-weight: 400; font-size: 0.95rem; padding: 0.35rem 0; transition: color .2s; }
.footer__col a:hover { color: var(--coral) !important; }
.footer__bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--ink-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer__copy { font-family: var(--font); font-size: 0.8rem; color: var(--ink-mute); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* mline must stay coral over the obsolete .footer__brand p coral-footer rule */
.footer__brand .footer__mline { color: var(--coral) !important; }

/* ==========================================================================
   Footer — native-block bridge.
   The footer is now a locked core-block tree (group/site-logo/heading/list).
   Neutralise core layout gaps and restyle list links to match .footer__col a.
   ========================================================================== */
.footer .wp-block-group { margin: 0; }
/* ASTRA list counter: Astra indents ul/ol (margin 0 0 1.5em 3em); re-zero, contextual list margins below win by doc order. */
:where([data-elementor-type="wp-page"]) ul, :where([data-elementor-type="wp-page"]) ol { margin: 0; }
/* ASTRA root font-size counter: Astra shrinks html font-size at its mobile/tablet breakpoints, scaling every rem. The static root is 100% at all widths. */
html { font-size: 100%; }
.footer__grid > *, .footer__col > *, .footer__brand > *, .footer__bottom > * { margin-block-start: 0 !important; }
.footer .footer__links { list-style: none; margin: 0; padding: 0; }
.footer .footer__links li { margin: 0; padding: 0; }
.footer .footer__logo { display: block; margin: 0 0 1rem; }
.footer .footer__logo a { display: inline-block; }
.footer .footer__logo img, .footer .footer__logo .custom-logo { width: 160px; height: auto; max-width: 100%; }
.footer__mline { margin: 0; }
.footer__copy { margin: 0; }

/* Footer native-block: force grid + list-flow over theme/SC overrides */
.footer .footer__grid { display: grid !important; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr !important; }
.footer .footer__links { display: block !important; }
.footer .footer__links li { display: block !important; margin: 0 !important; padding: 0 !important; }
.footer .footer__col a { display: block; white-space: nowrap; }
@media (max-width:900px){ .footer .footer__grid { grid-template-columns: 1fr 1fr 1fr !important; } }
@media (max-width:560px){ .footer .footer__grid { grid-template-columns: 1fr 1fr !important; } }

/* ==========================================================================
   Header — native-block bridge.
   The header is now a locked core-block tree: site-logo + core/navigation +
   core/buttons. Restyle core markup back to .nav__link / .btn--*.
   ========================================================================== */
.nav .wp-block-group { margin: 0; }
/* ASTRA list counter: Astra indents ul/ol (margin 0 0 1.5em 3em); re-zero, contextual list margins below win by doc order. */
:where([data-elementor-type="wp-page"]) ul, :where([data-elementor-type="wp-page"]) ol { margin: 0; }
/* ASTRA root font-size counter: Astra shrinks html font-size at its mobile/tablet breakpoints, scaling every rem. The static root is 100% at all widths. */
html { font-size: 100%; }
.nav .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav .nav__logo { display: flex; align-items: center; }
.nav .nav__logo a { display: inline-block; }
.nav .nav__logo img, .nav .nav__logo .custom-logo { height: 40px; width: auto; max-width: none; }

/* --- desktop nav (core/navigation) --- */
.nav .nav__links { flex: 0 1 auto; }
.nav .nav__links .wp-block-navigation__container { gap: 1.9rem; align-items: center; }
.nav .nav__links .wp-block-navigation-item__content {
  font-family: var(--font); font-weight: 500 !important; font-size: 0.95rem; color: var(--ink) !important;
  padding: 0.4rem 0; position: relative; text-decoration: none;
}
.nav .nav__links .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--coral); transition: width .3s var(--ease);
}
.nav .nav__links .wp-block-navigation-item:hover .wp-block-navigation-item__content { color: var(--coral) !important; }
.nav .nav__links .wp-block-navigation-item:hover .wp-block-navigation-item__content::after { width: 100%; }
/* submenu dropdown -> paper card */
.nav .nav__links .wp-block-navigation__submenu-container {
  background: var(--paper); border: 1px solid var(--ink-faint); border-radius: 16px;
  box-shadow: var(--shadow-float); padding: 0.6rem; min-width: 250px;
}
.nav .nav__links .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.6rem 0.85rem; border-radius: 11px; }
.nav .nav__links .wp-block-navigation__submenu-container .wp-block-navigation-item:hover .wp-block-navigation-item__content { background: var(--sand); }
.nav .nav__links .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }

/* --- CTA buttons (core/buttons -> .btn--*) --- */
.nav .nav__cta { gap: 0.75rem; align-items: center; margin: 0; }
.nav .nav__cta .wp-block-button__link {
  font-family: var(--font); font-weight: 500; font-size: 1rem; line-height: 1.2;
  border-radius: 28px; padding: 0.85rem 1.7rem; border: 2px solid transparent; text-decoration: none;
  transition: transform .35s var(--ease), background .2s, box-shadow .35s, color .2s, border-color .2s;
}
.nav .nav__cta .btn--outline .wp-block-button__link { background: transparent; border-color: var(--coral); color: var(--coral); }
.nav .nav__cta .btn--outline .wp-block-button__link:hover { background: var(--coral-tint); }
.nav .nav__cta .btn--primary .wp-block-button__link { background: var(--coral); color: #fff; box-shadow: 0 10px 26px rgba(232,111,91,0.30); }
.nav .nav__cta .btn--primary .wp-block-button__link:hover { background: var(--coral-deep); }

/* --- mobile: core/navigation responsive overlay on Warm Sand --- */
@media (max-width: 1000px) {
  .nav .nav__cta .btn--outline { display: none; }
}
.nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--sand); padding: 2rem 1.5rem; }
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--ink) !important; font-size: 1.35rem; font-weight: 600; }
.nav .wp-block-navigation__responsive-container-open,
.nav .wp-block-navigation__responsive-container-close { color: var(--ink); }

/* ==========================================================================
   Hero pattern (wzo-child/wzo-hero) — core-block wrapper accommodations.
   The static .hero-v2__media held a bare <img>; the editable core/image adds a
   <figure> wrapper, so one semantic rule makes it fill the 1:1 media square.
   All other hero styling is the verbatim static CSS in .hero-v2* above.
   ========================================================================== */
.hero-v2__media .wp-block-image { margin: 0; height: 100%; width: 100%; }
.hero-v2__media .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Elementor integration bridges (semantic, no element IDs).
   Converted sections carry the static classes; these rules keep Elementor's
   kit/widget defaults from overriding the static type system.
   ========================================================================== */
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h1.elementor-heading-title { color: var(--ink); font-weight: 700; }
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h2.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h3.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h4.elementor-heading-title { color: var(--ink); font-weight: 600; }
/* eyebrow kicker: pin unitless line-height (theme/kit sets an absolute one) */
.kicker { line-height: 1.75; }
/* image widget fills the 1:1 media frame, like the bare static <img> */
.hero-v2__media .elementor-widget-image { margin: 0; width: 100%; height: 100%; }
.hero-v2__media .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Elementor bridges II — media frames, heading line-height, utilities (semantic only) */
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h2.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h3.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h4.elementor-heading-title { line-height: 1.18; }
.value-card__media .elementor-widget-image, .intent-card__media .elementor-widget-image,
.feature__media .elementor-widget-image, .shot .elementor-widget-image { width: 100%; height: 100%; margin: 0; }
.value-card__media .elementor-widget-image img, .intent-card__media .elementor-widget-image img,
.feature__media .elementor-widget-image img, .shot .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wzo-center { text-align: center; }
.package__list-wrap { flex-grow: 1; }

/* Elementor bridges III: widgets re-establish the static unitless line-height
   (the kit body typography inherits an absolute px value into unclassed text). */
:where([data-elementor-type="wp-page"]) .elementor-widget-text-editor, :where([data-elementor-type="wp-page"]) .elementor-widget-html { line-height: 1.75; }

/* Elementor bridges IV: flex-row children keep natural width; framed media fills its aspect frame */
.value-card__head > .elementor-element { width: auto; }
.feature__media { position: relative; }
.feature__media .elementor-widget-image { position: absolute; inset: 0; }

/* Elementor bridges V: restore class margins Elementor's element reset strips; badge span blockifies like a flex item */
.e-con.feature__media { margin: 0.5rem clamp(0.5rem, 2vw, 1.5rem); }
@media (max-width: 860px) { .e-con.feature__media { margin: 0; } }
.package__badge { display: inline-block; }

/* Elementor bridges VI: e-con defaults vs static flex/grid semantics */
/* class sets display:flex and relies on the default row direction; e-con defaults to column */
.e-con.value-card__head { flex-direction: row; }
/* child containers get --width:100%; framed media must size as a grid item (column minus margins) */
.e-con.feature__media { width: auto; }

/* Elementor bridges VII: widget wrapper of the (hidden) signal arrow leaves the grid on mobile */
@media (max-width: 680px) { .signal .signal__go-wrap { display: none; } }

/* ==========================================================================
   Elementor bridges VIII - ASTRA compat counters (live only).
   Astra ships .elementor-widget-heading hN.elementor-heading-title{line-height:1.4em}
   and .elementor-heading-title{margin:0}, out-specifying the static class rules.
   Generic tag clones first, section contexts after (doc order wins at equal spec).
   ========================================================================== */
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h1.elementor-heading-title { line-height: 1.14; }
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h2.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h3.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h4.elementor-heading-title { line-height: 1.18; }
.phead h1.elementor-heading-title { margin: 1rem 0 1.25rem; }
.hero-v2 h1.elementor-heading-title { margin-bottom: 1.4rem; line-height: 1.08; }
.signal__body h3.elementor-heading-title { margin-bottom: 0.35rem; }
.entry h3.elementor-heading-title { margin-bottom: 0.15rem; }
.mark-card h3.elementor-heading-title { margin: 0.3rem 0 0.6rem; }
.intent-card h3.elementor-heading-title { margin: 0.55rem 0 0.7rem; }
.feature__body h2.elementor-heading-title { margin-bottom: 1.1rem; }
.split__body h2.elementor-heading-title + p { margin-top: 1.1rem; }
.step h3.elementor-heading-title { margin-bottom: 0.5rem; }
.evidence__item h3.elementor-heading-title { margin-bottom: 0.4rem; }
.offer__card h3.elementor-heading-title { margin-bottom: 0.5rem; }
.choose__card h3.elementor-heading-title { margin-bottom: 0.5rem; }
.uspcard__body h3.elementor-heading-title { margin-bottom: 0.6rem; }
.value-card__head h3.elementor-heading-title { margin-bottom: 0; }
.value-card__body h3.elementor-heading-title { margin-bottom: 0.5rem; }
.footer__col h4.elementor-heading-title { margin-bottom: 1rem; }
.prose h2.elementor-heading-title { margin: 2.5rem 0 1rem; }
.prose h3.elementor-heading-title { margin: 2rem 0 0.75rem; }

/* ==========================================================================
   Elementor bridges IX - converter utilities + framed media for subpages.
   ========================================================================== */
.wzo-mt16{margin-top:1rem}.wzo-mt24{margin-top:1.5rem}.wzo-mt28{margin-top:1.75rem}.wzo-mt32{margin-top:2rem}.wzo-mt40{margin-top:2.5rem}.wzo-mt48{margin-top:3rem}
.wzo-mb40{margin-bottom:2.5rem}.wzo-mb56{margin-bottom:3.5rem}
.wzo-jcc{justify-content:center}.wzo-maxw700{max-width:700px}
.wzo-ar43{aspect-ratio:4/3}.wzo-ar1{aspect-ratio:1}.wzo-p0{padding:0!important}
/* framed media on subpages: image-widget wrapper must fill the frame */
.product-hero{position:relative}
.split__media .elementor-widget-image, .product-hero .elementor-widget-image, .founder__photo .elementor-widget-image { position:absolute; inset:0; width:100%; height:100%; margin:0; }
.split__media .elementor-widget-image img, .product-hero .elementor-widget-image img, .founder__photo .elementor-widget-image img { width:100%; height:100%; object-fit:cover; display:block; }

/* ==========================================================================
   Subpage blocks ported from the static stylesheet (founder, manifesto, FAQ,
   forms) - excluded from the homepage port, required by the -2 subpages.
   ========================================================================== */
/* ---------- Manifesto ---------- */
.mani { max-width: 720px; margin-inline: auto; }
.mani p { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.85; margin-bottom: 1.5rem; }
.mani__accent { font-weight: 700; color: var(--coral); text-align: center; font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.25; margin-block: 2.5rem; letter-spacing: -0.02em; }
.mani__lines { margin-block: 2rem; }
.mani__lines p { font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.5; margin-bottom: 0.35rem; font-weight: 500; }
.mani__lines--center { text-align: center; }
.section--ink .mani p { color: rgba(243,233,220,0.92); }


/* ---------- Founder ---------- */
.founder { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.founder__photo { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; position: relative; background: linear-gradient(155deg, var(--sand-warm), #D9C6AB); display: grid; place-items: center; box-shadow: var(--shadow-1); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.founder__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(232,111,91,0.55) 0%, rgba(232,111,91,0.18) 45%, rgba(37,40,42,0.35) 100%); mix-blend-mode: multiply; pointer-events: none; }
.founder__quote { color: var(--coral); font-size: clamp(1.3rem, 2.6vw, 1.85rem); font-weight: 600; line-height: 1.32; letter-spacing: -0.02em; margin-bottom: 1.5rem; text-wrap: balance; }
.founder__story p { color: var(--ink-soft); }
.founder__story p + p { margin-top: 1rem; }
.founder__sign { margin-top: 1.6rem; font-weight: 600; }
.founder__sign small { display: block; font-weight: 400; color: var(--ink-mute); font-size: 0.9rem; margin-top: 2px; }
@media (max-width: 820px) { .founder { grid-template-columns: 1fr; } .founder__photo { max-width: 340px; } }


/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--ink-line); }
.faq__item:first-child { border-top: 1px solid var(--ink-line); }
.faq__q { width: 100%; text-align: left; background: none; border: none; padding: 1.6rem 3rem 1.6rem 0; font-weight: 600; font-size: 1.15rem; line-height: 1.4; position: relative; color: var(--ink); }
.faq__q::after {
  content: ""; position: absolute; right: 0; top: 1.85rem; width: 18px; height: 18px;
  background: no-repeat center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='%23E86F5B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform .3s var(--ease);
}
.faq__item.is-open .faq__q::after { transform: rotate(135deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__a-inner { padding-bottom: 1.6rem; color: var(--ink-soft); max-width: 68ch; }
.faq__a-inner p + p { margin-top: 0.75rem; }


/* ---------- Forms ---------- */
.formcard { background: var(--paper); border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 2.75rem); box-shadow: var(--shadow-1); }
.tabs { display: flex; gap: 0.4rem; background: var(--sand); padding: 0.4rem; border-radius: var(--radius-pill); margin-bottom: 2rem; }
/* .tabs .tab (not bare .tab): the Elementor kit paints <button> globally (.elementor-kit-6 button, 0-1-1) which outranked .tab (0-1-0) and rendered the inactive tab as a coral pill. */
.tabs .tab { flex: 1; border: none; background: transparent; box-shadow: none; font-family: inherit; line-height: 1.4; padding: 0.8rem 1rem; border-radius: var(--radius-pill); font-weight: 500; font-size: 0.95rem; color: var(--ink-soft); transition: background .2s, color .2s; transform: none; }

.tabs .tab:hover, .tabs .tab:focus { background: transparent; color: var(--ink); box-shadow: none; transform: none; }
.tabs .tab.is-active, .tabs .tab.is-active:hover, .tabs .tab.is-active:focus { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }
.panel { display: none; }
.panel.is-active { display: block; animation: fade-up .4s var(--ease); }
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 500; font-size: 0.95rem; margin-bottom: 0.45rem; }
.field label .opt { color: var(--ink-mute); font-weight: 400; font-size: 0.85rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--sand); border: 2px solid transparent; border-radius: var(--radius-input); padding: 0.85rem 1rem;
  transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--coral); background: var(--paper); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field .hint { font-size: 0.85rem; color: var(--ink-mute); margin-top: 0.4rem; }
.field--error input, .field--error textarea, .field--error select { border-color: var(--terracotta); }
.field__msg { font-size: 0.85rem; color: var(--terracotta); margin-top: 0.4rem; display: none; }
.field--error .field__msg { display: block; }
.check { display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; }
.check input { width: auto; margin-top: 0.35rem; accent-color: var(--coral); }
.check span { font-size: 0.95rem; color: var(--ink-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.success { display: none; text-align: center; padding: 1rem 0; }
.success.is-visible { display: block; animation: fade-up .5s var(--ease); }
.success__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--coral-tint); display: grid; place-items: center; margin: 0 auto 1.25rem; }
.success h3 { color: var(--coral); margin-bottom: 0.5rem; }


/* ==========================================================================
   Elementor bridges X - flex containers do not collapse margins.
   phead: a label/logo widget's bottom margin + h1 top margin double up (static
   block flow collapsed them); crumb (first child) must keep the h1 top margin.
   split: the h2+p adjacent rule cannot cross widget wrappers.
   ========================================================================== */
.phead .elementor-widget-html:not(:first-child) + .elementor-widget-heading h1.elementor-heading-title { margin-top: 0; }
.split__body .elementor-widget-heading + .elementor-widget-text-editor > p:first-child:not([style*="margin"]) { margin-top: 1.1rem; }

/* ==========================================================================
   Elementor bridges XI - heading line-height hard clones (double-class beats
   Astra's responsive compat rules at any breakpoint) + text-wrap balance +
   classed image-widget margins (Elementor strips class margins on elements).
   ========================================================================== */
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h1.elementor-heading-title.elementor-heading-title { line-height: 1.14; text-wrap: balance; }
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h2.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h3.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h4.elementor-heading-title.elementor-heading-title { line-height: 1.18; text-wrap: balance; }
/* contextual line-height exceptions re-stated ABOVE the generics in specificity */
:where([data-elementor-type="wp-page"]) .hero-v2 h1.elementor-heading-title.elementor-heading-title { line-height: 1.08; }
/* classed image widgets: restore class margins stripped by element-level resets */
:where([data-elementor-type="wp-page"]) .elementor-widget-image.mark-card__logo { margin: 0 0 1.25rem; }

/* ==========================================================================
   Elementor bridges XII - kit letter-spacing counters (kit fixes -0.8px on h1,
   the static scale is elastic em-based; identical at desktop sizes, different
   wrap points at mobile sizes) + classed image margins at (0,3,0).
   ========================================================================== */
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h1.elementor-heading-title.elementor-heading-title { letter-spacing: -0.012em; }
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h2.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h4.elementor-heading-title.elementor-heading-title { letter-spacing: -0.02em; }
:where([data-elementor-type="wp-page"]) .elementor-widget-heading h3.elementor-heading-title.elementor-heading-title { letter-spacing: -0.015em; }
:where([data-elementor-type="wp-page"]) .elementor-widget-image.mark-card__logo.mark-card__logo { margin: 0 0 1.25rem; }

/* bridges XIII v2: spans that are flex-item-blockified in the static markup become block inside their text widget (kills the widget strut without touching font metrics) */
.elementor-widget-text-editor > span.mark-card__name { display: block; }

/* bridges XIV: Astra adds .ast-container side padding at its mobile breakpoints (desktop is 0 via the full-width layout meta) */
.ast-container { padding-inline: 0; }
/* uspcard media frame: absolute-fill the image widget like the other frames */
.uspcard__media .elementor-widget-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.uspcard__media .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* bridges XV: the kit styles <button> globally; restate the FAQ question button */
button.faq__q { width: 100%; text-align: left; background: none; border: none; padding: 1.6rem 3rem 1.6rem 0; font-family: var(--font); font-weight: 600; font-size: 1.15rem; line-height: 1.4; position: relative; color: var(--ink); border-radius: 0; }

/* ==========================================================================
   Elementor bridges XVI - Gravity Forms (Orbital theme) skinned to the static
   .field design. Ported from the proven wzo-contact.php sandbox skin,
   re-scoped to the conversion pages' .formcard. !important is required: the
   GF theme framework loads after this sheet and is var-driven.
   ========================================================================== */
.formcard .gform_wrapper{margin:0;}
.formcard .gform_required_legend, .formcard .gfield_required{display:none!important;}
.formcard .gform_wrapper .gform_validation_errors{display:none!important;}
.formcard .gform_wrapper .gform_fields{grid-row-gap:1.25rem;row-gap:1.25rem;}
.formcard .gform_wrapper .gfield{margin:0!important;padding:0!important;}
.formcard .gfield_label{font-family:var(--font)!important;font-weight:500!important;font-size:.95rem!important;line-height:1.75!important;margin:0 0 .45rem!important;color:var(--ink)!important;padding:0!important;}
.formcard .gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.formcard .gform_wrapper select,
.formcard .gform_wrapper textarea{
  width:100%!important;font-family:var(--font)!important;font-size:1rem!important;color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  background:var(--sand)!important;border:2px solid transparent!important;border-radius:12px!important;
  padding:.85rem 1rem!important;box-shadow:none!important;line-height:normal!important;height:auto!important;
  transition:border-color .2s,background .2s;
}
.formcard .gform_wrapper select{
  appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;
  height:auto!important;min-height:0!important;
  background-color:var(--sand)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2325282A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 1rem center!important;background-size:14px!important;
  padding-right:2.75rem!important;
}
.formcard .gform_wrapper select:focus{background-color:var(--paper)!important;}
.formcard .gform_wrapper select option{color:var(--ink)!important;background:var(--paper)!important;-webkit-text-fill-color:var(--ink)!important;}
.formcard .gform_wrapper textarea{height:110px!important;min-height:110px!important;resize:vertical!important;}
.formcard .gform_wrapper input:not([type=submit]):focus,
.formcard .gform_wrapper select:focus,
.formcard .gform_wrapper textarea:focus{
  border-color:var(--coral)!important;background:var(--paper)!important;outline:none!important;box-shadow:none!important;
}
.formcard .gform_wrapper input::placeholder,.formcard .gform_wrapper textarea::placeholder{color:var(--ink-mute)!important;opacity:1;}
.formcard .gform_footer{margin:1.25rem 0 0!important;padding:0!important;}
.formcard .gform_wrapper .gform_footer .gform_button{
  display:flex!important;width:100%!important;justify-content:center!important;align-items:center!important;gap:.55rem;
  font-family:var(--font)!important;font-weight:500!important;font-size:1.0625rem!important;line-height:1.2!important;
  border-radius:28px!important;padding:1.1rem 2.3rem!important;border:2px solid transparent!important;
  background:var(--coral)!important;color:#fff!important;box-shadow:0 10px 26px rgba(232,111,91,.30)!important;
  transition:transform .35s var(--ease),background .2s,box-shadow .35s!important;cursor:pointer!important;
}
.formcard .gform_wrapper .gform_footer .gform_button:hover{background:var(--coral-deep)!important;transform:translateY(-2px)!important;box-shadow:0 14px 32px rgba(232,111,91,.38)!important;}
/* bridges XVI-c: locatie form (GF id 3) submits in brand green - static .btn--spot */
.formcard #gform_3 .gform_footer .gform_button{background:var(--green)!important;box-shadow:0 10px 26px rgba(0,66,37,.30)!important;}

.formcard #gform_3 .gform_footer .gform_button:hover{background:var(--green-deep)!important;box-shadow:0 14px 32px rgba(0,66,37,.38)!important;}

.formcard .gform_wrapper .gfield_error input,.formcard .gform_wrapper .gfield_error textarea,.formcard .gform_wrapper .gfield_error select{border-color:var(--burgundy)!important;}
.formcard .gform_wrapper .gfield_error .gfield_label{color:var(--ink)!important;}
.formcard .gform_wrapper .validation_message,.formcard .gform_wrapper .gfield_validation_message{color:var(--burgundy)!important;background:transparent!important;border:0!important;padding:.3rem 0 0!important;font-size:.85rem!important;font-weight:400!important;}
/* bridges XVI-b: GF select fixed control height (static = 56px at all widths); checkbox choices match the static .check row */
.formcard .gform_wrapper select{height:56px!important;}
.formcard .gform_wrapper .gfield--type-checkbox .gfield_checkbox label{font-family:var(--font)!important;font-size:.95rem!important;line-height:1.75!important;color:var(--ink-soft)!important;font-weight:400!important;}
.formcard .gform_wrapper .gfield-choice-input{accent-color:var(--coral)!important;width:16px!important;height:16px!important;margin-top:.35rem!important;}
.formcard .gform_wrapper .gchoice{display:flex!important;gap:.7rem!important;align-items:flex-start!important;}

/* bridges XVI-d: GF Orbital repaints the checkbox itself (appearance:none + icon-font check in its default blue #204CE5), so accent-color never applies; restate the static coral look: coral fill, white check */
.formcard .gform_wrapper .gfield-choice-input{background:var(--paper)!important;border:1px solid rgba(37,40,42,.4)!important;border-radius:4px!important;}

.formcard .gform_wrapper .gfield-choice-input:checked{background:var(--coral)!important;border-color:var(--coral)!important;}

.formcard .gform_wrapper .gfield-choice-input:checked::before{color:#fff!important;}

.formcard .gform_wrapper .gfield-choice-input:focus{box-shadow:0 0 0 2px rgba(232,111,91,.35)!important;outline:none!important;}

/* ==========================================================================
   Elementor bridges XVII - Elementor gives every widget wrapper position:
   relative, hijacking the containing block of absolutely-positioned
   decorations (intent-card mark, shot captions, section motifs) so they
   render outside their frame and get clipped. Make those wrappers static so
   the decoration positions against its real frame, as in the static markup.
   ========================================================================== */
.intent-card__media .elementor-widget-html { position: static; }
.shot .elementor-widget-text-editor { position: static; }
.phead > .elementor-widget-html:first-child,
.section > .elementor-widget-html:first-child,
.hero-v2 > .elementor-widget-html:first-child,
.cta-photo > .elementor-widget-html:first-child { position: static; }

/* ==========================================================================
   Elementor bridges XVIII - photo-background frames (cta-photo, statcard),
   white headings on colored sections, FAQ hover vs kit button styles.
   ========================================================================== */
:where([data-elementor-type="wp-page"]) .cta-photo .elementor-widget-image, :where([data-elementor-type="wp-page"]) .statcard--photo .elementor-widget-image { position: static; z-index: 0; }
:where([data-elementor-type="wp-page"]) .cta h2.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .cta-photo h2.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .section--green h1.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .section--green h2.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .section--green h3.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .section--burgundy h1.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .section--burgundy h2.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .section--burgundy h3.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .section--ink h1.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .section--ink h2.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .section--ink h3.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .intent-card h3.elementor-heading-title.elementor-heading-title,
:where([data-elementor-type="wp-page"]) .choose__card--green h3.elementor-heading-title.elementor-heading-title { color: #fff; }
button.faq__q:hover, button.faq__q:focus { background: none; color: var(--ink); box-shadow: none; transform: none; }