/* =========================================================================
   FTW Advocaten - redesign-site.css
   Reskin van het gedeelde ftw-* systeem naar de nieuwe huisstijl
   (koel-licht + blauw, Hanken Grotesk, pill-knoppen, pill-header, navy footer).
   Geladen NA styles.css, alleen wanneer SITE_REDESIGN aan staat.
   Bronwaarheid voor visuele waarden: redesign.css (preview).
   ========================================================================= */

/* ---- 1. Tokens: kleuren + type. Cascadeert door het hele ftw-* systeem ---- */
:root{
  /* Koele neutralen */
  --color-paper:#ffffff;
  --color-cream:#ffffff;        /* page-bg + tekst op donker (wit) */
  --color-cream-2:#f1f5fc;      /* koele rust-blokken */
  --color-ink:#13213a;
  --color-ink-soft:#3b4a64;
  --color-muted:#6b7894;
  --color-rule:#e5ebf4;

  /* Merk: navy + EEN blauw accent */
  --color-anchor:#13213a;
  --color-anchor-deep:#11203b;
  --color-anchor-darker:#0c1730;
  --color-anchor-bright:#2458d6;
  --color-anchor-soft:#e6eefb;
  --color-anchor-mute:#6b7894;
  --color-anchor-mute-soft:#cfd9e8;

  /* Accent = blauw (we gebruiken EEN accent; signal + accent beide blauw) */
  --color-signal:#2458d6;
  --color-signal-hover:#1c47b4;
  --color-signal-soft:#e6eefb;
  --color-signal-deep:#1f4cc0;
  --color-accent:#2458d6;
  --color-accent-deep:#1c47b4;
  --color-accent-soft:#e6eefb;

  /* Surfaces */
  --surface-base:#ffffff;
  --surface-soft:#f1f5fc;
  --surface-anchor:#11203b;

  /* States: succes wordt blauw-neutraal i.p.v. groen (een accent) */
  --color-success:#1f4cc0;

  /* Focus */
  --color-focus:#2458d6;
  --focus-ring:0 0 0 3px rgba(36,88,214,.30);

  /* Fonts -> Hanken (koppen + body) */
  --font-display:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Knoppen pill */
  --radius-pill:999px;
}

body{ background:#ffffff; color:var(--color-ink); }

/* ---- 2. Koppen: Hanken bold, strakke tracking ---- */
.ftw-display-xl,.ftw-display-lg,.ftw-display-md,.ftw-display-sm,
.ftw-h1,.ftw-h2,.ftw-h3,.ftw-h4{ font-weight:700; letter-spacing:-.022em; }

/* ---- 3. Knoppen: pill, niet afbreken, juiste tekstkleur op blauw ---- */
.ftw-btn{ border-radius:999px; white-space:nowrap; }
.ftw-btn--primary{ background:var(--color-signal); color:#fff; }
.ftw-btn--primary:hover{ background:var(--color-signal-hover); }
.ftw-btn--phone-urgent{ background:var(--color-signal); color:#fff; }
.ftw-btn--anchor{ background:var(--color-anchor); color:#fff; }
.ftw-btn--secondary{ background:#fff; color:var(--color-ink); border-color:var(--color-rule); }

/* ---- 4. Accent-tekst + eyebrow blauw ---- */
.ftw-text--anchor{ color:var(--color-signal); }
.ftw-eyebrow{ color:var(--color-signal-deep); letter-spacing:.13em; }

/* ---- 5. Header: schone balk bovenaan, zwevende pill bij scrollen ---- */
.ftw-header{ background:rgba(255,255,255,.86); backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--color-rule); }
.ftw-header__inner{ border:1px solid transparent; transform:translateZ(0); transition:max-width .35s ease, margin .35s ease, padding .35s ease, border-radius .35s ease, box-shadow .35s ease, background-color .35s ease, border-color .35s ease; }
.ftw-nav__link:hover, .ftw-nav__link[aria-current="page"]{ color:var(--color-anchor); }
/* Zwevende pill bij scrollen — op ELKE breedte inset van de schermranden, zodat de
   ronde hoeken nooit tegen de rand worden afgesneden (geen full-bleed-balk meer).
   width = min(1080px, schermbreedte - 2 gutters); margin:auto centreert op brede schermen. */
.ftw-header.is-scrolled{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; box-shadow:none; padding-top:clamp(10px,1.2vw,12px); }
.ftw-header.is-scrolled .ftw-header__inner{ max-width:min(1080px, calc(100% - 2 * var(--gutter-mobile))); margin-inline:auto; background:#ffffff; border-color:var(--color-rule); border-radius:999px; box-shadow:0 18px 44px -22px rgba(18,40,90,.55); padding-inline:clamp(16px,2vw,26px); }

/* ---- 6. Footer: navy (via tokens) + koele tekst ---- */
.ftw-footer__address, .ftw-footer__list a, .ftw-footer__membership-name{ color:rgba(233,238,247,.82); }
.ftw-footer__list a:hover{ color:#fff; }

/* ---- 7. Expertise-content: meer kleur + leesritme (prose + FAQ) ---- */
/* Subkoppen krijgen een blauwe accent-streep zodat de tekst in blokken leest */
.ftw-article-body h2{ position:relative; padding-top:var(--space-3); margin-top:var(--space-8); }
.ftw-article-body h2::before{ content:""; display:block; width:44px; height:3px; border-radius:2px; background:var(--color-signal); margin-bottom:var(--space-4); }
.ftw-article-body h3{ color:var(--color-signal-deep); }
/* Chunked content-pagina's hadden twee scheidingsgebaren op elke H2 (een
   full-width grijze haarlijn én een los zwevend blauw streepje). Dat leest
   dubbel. Voeg ze samen tot één dunne regel die links opent met een kort
   blauw accent: brand-kleur blijft, ruis weg. */
.ftw-article-body--chunked > h2{ border-top:none; padding-top:0; }
.ftw-article-body--chunked > h2::before{
  width:100%; height:2px; border-radius:0; margin-bottom:var(--space-6);
  background:linear-gradient(to right, var(--color-signal) 0 48px, var(--color-rule) 48px);
}
.ftw-article-body--chunked > h2:first-child::before{ display:none; }
/* Opsommingen met blauwe stippen i.p.v. grijze disc */
.ftw-article-body ul{ list-style:none; padding-left:0; }
.ftw-article-body ul li{ position:relative; padding-left:1.7em; }
.ftw-article-body ul li::before{ content:""; position:absolute; left:.15em; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--color-signal); }
/* Citaat als zachte gekleurde kaart i.p.v. losse regel */
.ftw-article-body blockquote{ background:var(--color-cream-2); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); font-size:var(--fs-h3); }

/* FAQ: gekleurd accordeon i.p.v. lap tekst */
.ftw-faq__item{ transition:border-color .2s, box-shadow .2s, background .2s; }
.ftw-faq__item:hover{ border-color:var(--color-anchor-soft); }
.ftw-faq__item[open]{ border-color:var(--color-signal); box-shadow:0 14px 34px -22px rgba(36,88,214,.45); }
.ftw-faq__summary{ font-size:var(--fs-h4); }
.ftw-faq__summary:hover{ background:var(--color-cream-2); }
.ftw-faq__item[open] .ftw-faq__summary{ color:var(--color-signal-deep); }
.ftw-faq__summary::after{ border-right-color:var(--color-signal); border-bottom-color:var(--color-signal); }
/* FAQ-sectie als eigen, duidelijk afwijkende blauwe zone (witte kaarten poppen) */
#faq{ background:linear-gradient(180deg,#e8eefb,#dde7fb); border-top:1px solid var(--color-anchor-soft); }
#faq .ftw-faq__item{ background:#fff; border-color:rgba(36,88,214,.14); }

/* =========================================================================
   HOMEPAGE (home-v2) - eigen sectie-classes. Palet-vars met eigen namen
   (botsen niet met de ftw-token-override). Sectie-padding via .rd-sec.
   ========================================================================= */
:root{
  --paper:#ffffff; --paper-2:#f1f5fc; --panel:#eaf1fb; --blue-soft:#e6eefb;
  --ink:#13213a; --ink-2:#3b4a64; --muted:#6b7894; --line:#e5ebf4; --line-2:#d0d9e8;
  --blue:#2458d6; --blue-deep:#1c47b4; --blue-ink:#1f4cc0; --navy:#11203b; --err:#c1402a;
  --r:12px; --r-btn:8px; --maxw:1240px; --gut:clamp(20px,5vw,56px); --sp:clamp(40px,5vw,72px);
  --shadow:0 14px 40px -22px rgba(18,40,90,.30); --shadow-sm:0 6px 20px -14px rgba(18,40,90,.28);
}
.rd-home h1,.rd-home h2,.rd-home h3,.rd-home h4{ font-family:var(--font-display); color:var(--ink); }
.rd-home h2{ line-height:1.06; }
.rd-sec{ padding-block:var(--sp); }
.rd-home .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.kicker{ font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-ink);margin:0; }
.lead{ font-size:clamp(1.1rem,1.5vw,1.26rem);line-height:1.55;color:var(--ink-2);max-width:56ch; }
.btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:inherit;font-size:1.02rem;font-weight:600;line-height:1;white-space:nowrap;padding:1.02em 1.6em;border:1.5px solid transparent;border-radius:999px;cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; }
.btn svg{width:16px;height:16px}
.btn--primary{ background:var(--blue);color:#fff }
.btn--primary:hover{ background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(36,88,214,.7) }
.btn--lg{ font-size:1.07rem;padding:1.12em 1.9em }
.btn--block{ width:100% }
.tlink{ font-weight:600;font-size:1rem;text-decoration:none;color:var(--blue-ink);display:inline-flex;align-items:center;gap:.5em }
.tlink svg{ width:16px;height:16px;transition:transform .2s }
.tlink:hover svg{ transform:translateX(4px) }

/* hero */
.hero{ padding-top:clamp(40px,6vw,84px);padding-bottom:0;position:relative;overflow:hidden }
.hero::before{ content:"";position:absolute;top:-35%;right:-14%;width:62%;height:92%;background:radial-gradient(closest-side,rgba(36,88,214,.14),transparent 70%);pointer-events:none }
.hero-grid{ position:relative;display:grid;gap:clamp(30px,4vw,60px);align-items:center }
@media(min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr} }
.hero-copy{ padding-bottom:clamp(6px,2vw,18px) }
.hero h1{ font-size:clamp(3rem,7vw,5.6rem);font-weight:700;margin:.32em 0 .34em;letter-spacing:-.035em;line-height:.94 }
.hero h1 .hl{ color:var(--blue) }
.hero .lead{ max-width:44ch;font-size:clamp(1.12rem,1.5vw,1.32rem) }
.hero-actions{ display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:34px }
.hero-reassure{ margin-top:22px;font-size:.96rem;color:var(--muted);display:flex;align-items:center;gap:.6em }
.hero-reassure svg{ width:18px;height:18px;color:var(--blue);flex-shrink:0 }
.hero-figure{ position:relative;margin:0 }
.hero-figure img{ width:100%;height:clamp(380px,52vw,620px);object-fit:cover;object-position:50% 35%;border-radius:var(--r);box-shadow:var(--shadow) }
.hero-figure figcaption{ position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.86);backdrop-filter:saturate(150%) blur(8px);-webkit-backdrop-filter:saturate(150%) blur(8px);border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:9px 16px;font-size:.85rem;font-weight:600;color:var(--ink);box-shadow:0 10px 30px -14px rgba(18,40,90,.5) }
.hero-figure figcaption span:last-child{ color:var(--muted);font-weight:500 }
.hero-figure figcaption span:last-child::before{ content:"\00B7";margin-right:8px;color:var(--line-2) }
@media(prefers-reduced-motion:no-preference){
  .hero-copy>*{ animation:rd-rise .72s cubic-bezier(.16,1,.3,1) both }
  .hero-copy>*:nth-child(2){animation-delay:.08s}
  .hero-copy>*:nth-child(3){animation-delay:.16s}
  .hero-copy>*:nth-child(4){animation-delay:.24s}
  .hero-copy>*:nth-child(5){animation-delay:.32s}
  .hero-figure{ animation:rd-figin .95s cubic-bezier(.16,1,.3,1) .14s both }
  @keyframes rd-rise{ from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
  @keyframes rd-figin{ from{opacity:0;transform:translateY(26px) scale(.985)} to{opacity:1;transform:none} }
}

/* trust band */
/* Trust-balk: navy-paneel à la advisor-card. Afgerond blok in diep navy met
   een cobalt-gloed in de hoek (zelfde truc als .ftw-advisor-card). Vier gelijke,
   uitgelijnde pijlers: icoon-chip + vette kop + één regel uitleg. */
.trust{ background:var(--paper); margin-top:clamp(40px,6vw,72px); padding-bottom:clamp(20px,3vw,34px) }
.trust-card{ position:relative; overflow:hidden; border-radius:24px; color:#fff;
  padding:clamp(26px,3vw,34px) clamp(28px,4vw,44px); background:var(--color-anchor);
  box-shadow:0 18px 46px -18px rgba(20,42,85,.55), inset 0 1px 0 rgba(255,255,255,.08) }
.trust-card::before{ content:""; position:absolute; inset:-45% -8% auto auto; width:52%; height:200%;
  pointer-events:none; background:radial-gradient(closest-side,rgba(36,88,214,.42),transparent 70%) }
.trust-card > *{ position:relative }

.trust-cols{ display:grid; grid-template-columns:1fr; gap:20px }
.trust-col{ display:flex; align-items:flex-start; gap:13px }
.trust-ico{ width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18) }
.trust-ico svg{ width:20px;height:20px;color:#fff }
.trust-t{ display:flex;flex-direction:column;gap:3px;min-width:0 }
.trust-lab{ font-weight:600;font-size:1.04rem;color:#fff;line-height:1.2 }
.trust-sub{ font-size:.86rem;color:#aab8d2;line-height:1.3 }
@media(min-width:680px){ .trust-cols{ grid-template-columns:1fr 1fr;gap:24px 36px } }
@media(min-width:1024px){ .trust-cols{ grid-template-columns:repeat(4,1fr);column-gap:30px } }

/* section head */
.shead{ max-width:62ch;margin-bottom:clamp(36px,5vw,60px) }
.shead h2{ font-size:clamp(2.1rem,4.2vw,3.3rem);margin-top:.5em;max-width:20ch }
.shead .sub{ margin-top:18px }
.shead.tight{ margin-bottom:clamp(26px,3vw,40px) }

/* rechtsgebieden (samengevoegd) */
.rg-head{ display:grid;gap:18px;margin-bottom:clamp(30px,4vw,48px) }
@media(min-width:820px){ .rg-head{grid-template-columns:1fr auto;align-items:end;gap:32px} }
.rg-head .lead{ margin-top:14px }
/* Kaart-raster (geen foto's): 4 naast elkaar op desktop, 2 op tablet, 1 op mobiel */
.rg-grid{ display:grid;grid-template-columns:1fr;gap:clamp(14px,1.4vw,18px) }
@media(min-width:640px){ .rg-grid{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .rg-grid{grid-template-columns:repeat(4,1fr)} }
.rg-card{ display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,1.8vw,26px);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s }
.rg-card:hover{ transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent }
/* Navy advisor-chip (zelfde truc als .trust-card / .ftw-advisor-card): diep navy
   met een cobalt-gloed in de hoek, wit icoon, subtiele edge-highlight. Vervangt
   het pastel-vierkantje (de generieke line-icon-in-soft-square look). */
.rg-card__icon{ position:relative; overflow:hidden; width:52px;height:52px;border-radius:14px;
  background:var(--color-anchor,#11203b); color:#fff; display:grid;place-items:center;margin-bottom:4px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 26px -14px rgba(20,42,85,.6), inset 0 1px 0 rgba(255,255,255,.10);
  transition:box-shadow .2s }
.rg-card__icon::before{ content:""; position:absolute; inset:-50% -35% auto auto; width:95%; height:170%;
  pointer-events:none; opacity:.85; transition:opacity .2s;
  background:radial-gradient(closest-side,rgba(36,88,214,.55),transparent 70%) }
.rg-card__icon svg{ position:relative; z-index:1; width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.75 }
.rg-card:hover .rg-card__icon{ box-shadow:0 16px 32px -14px rgba(20,42,85,.72), inset 0 1px 0 rgba(255,255,255,.14) }
.rg-card:hover .rg-card__icon::before{ opacity:1 }
.rg-card__title{ font-size:clamp(1.2rem,1.5vw,1.4rem);font-weight:700;letter-spacing:-.02em;line-height:1.18 }
.rg-card__desc{ font-size:.96rem;color:var(--ink-2);line-height:1.5;flex:1 }
.rg-card__cta{ margin-top:6px;font-size:.92rem;font-weight:700;color:var(--blue-ink);display:inline-flex;align-items:center;gap:.4em }
.rg-card__cta svg{ width:16px;height:16px;transition:transform .2s }
.rg-card:hover .rg-card__cta svg{ transform:translateX(4px) }

/* quote band */
.quote{ position:relative;background:var(--navy);color:#fff;overflow:hidden }
.quote::after{ content:"";position:absolute;top:-30%;right:-10%;width:50%;height:90%;background:radial-gradient(closest-side,rgba(94,138,240,.16),transparent 70%);pointer-events:none }
.quote-grid{ position:relative;display:grid;gap:clamp(28px,4vw,56px);align-items:center;padding-block:clamp(34px,4.5vw,64px) }
@media(min-width:740px){ .quote-grid{grid-template-columns:auto 1fr} }
.quote-portrait{ display:block;width:clamp(150px,18vw,224px);aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;border:4px solid rgba(255,255,255,.14) }
/* Lichte gecentreerde zoom naar de bovenkant: portret wordt hoofd-tot-borst i.p.v.
   hele zittende foto (anders staat het hoofd hoog/raar bij staande portretten). */
.quote-portrait img{ width:100%;height:100%;object-fit:cover;object-position:50% 10%;transform:scale(1.2);transform-origin:50% 10%;transition:transform .5s ease }
.quote-portrait:hover img{ transform:scale(1.24) }
.quote blockquote{ margin:0;max-width:30ch;font-size:clamp(1.25rem,2.5vw,1.85rem);font-weight:600;line-height:1.32;letter-spacing:-.015em }
/* Woord-reveal: woorden starten gedimd en lichten op naar wit tijdens het scrollen (JS zet de kleur per woord). */
/* Initiële dim van de word-reveal via opacity (JS animeert 'm omhoog tijdens
   scrollen). Opacity i.p.v. vaste kleur, zodat elk woord zijn eigen tekstkleur
   houdt: wit op de donkere home-quote, navy op de lichte expertise-quote. */
.qword{ opacity:.22; }
.quote .by{ margin-top:24px;font-size:.96rem;font-weight:500;color:#b9c6dc }
.quote .by b{ color:#fff;font-weight:600 }
.quote .by a{ text-decoration:none }
.quote .by a:hover b{ text-decoration:underline }

/* team */
.team-grid{ display:grid;gap:clamp(20px,2.4vw,30px);grid-template-columns:repeat(2,1fr) }
@media(min-width:620px){ .team-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:920px){ .team-grid{grid-template-columns:repeat(4,1fr)} }
.member figure{ margin:0;overflow:hidden;background:var(--paper-2);border-radius:var(--r) }
.member img{ width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%;transition:transform .6s ease }
.member:hover img{ transform:scale(1.035) }
.member .ph{ aspect-ratio:1/1;display:grid;place-items:center;color:var(--blue);font-size:2.4rem;font-weight:700;background:var(--blue-soft) }
.member .name{ font-size:clamp(1.02rem,1.1vw,1.18rem);font-weight:700;letter-spacing:-.015em;margin-top:12px }
.member .role{ font-size:.92rem;font-weight:600;color:var(--blue-ink);margin-top:4px }
.team-cta{ margin-top:clamp(32px,4vw,48px) }

/* bereikbaarheid */
.reach-band{ position:relative;overflow:hidden;margin:0 }
.reach-band img{ width:100%;height:clamp(280px,38vw,480px);object-fit:cover;object-position:50% 52% }
.reach-band .tag{ position:absolute;left:var(--gut);bottom:22px;font-size:.84rem;font-weight:600;color:#fff;background:rgba(17,32,59,.62);backdrop-filter:blur(3px);padding:9px 15px;border-radius:var(--r-btn) }
.reach-inner{ display:grid;gap:clamp(24px,4vw,56px);padding-top:clamp(46px,6vw,74px) }
@media(min-width:840px){ .reach-inner{grid-template-columns:.82fr 1.18fr;align-items:start} }
.reach-inner h2{ font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:16px }
.chips{ display:flex;flex-wrap:wrap;gap:10px }
.chips a{ font-size:.95rem;font-weight:500;text-decoration:none;color:var(--ink-2);background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;transition:.18s }
.chips a:hover{ color:#fff;background:var(--blue);border-color:var(--blue);transform:translateY(-2px) }

/* inzichten */
.ins-grid{ display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:1fr }
@media(min-width:680px){ .ins-grid{grid-template-columns:1fr 1fr} }
.ins{ text-decoration:none;color:inherit;display:grid;grid-template-columns:128px 1fr;gap:18px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px;transition:transform .2s,box-shadow .2s,border-color .2s }
.ins:hover{ transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:transparent }
.ins figure{ margin:0;overflow:hidden;border-radius:8px;aspect-ratio:1/1 }
.ins img{ width:100%;height:100%;object-fit:cover;transition:transform .6s ease }
.ins:hover img{ transform:scale(1.05) }
.ins-body{ min-width:0 }
.ins .meta{ font-size:.8rem;font-weight:600;color:var(--muted);display:flex;gap:12px;align-items:center;flex-wrap:wrap }
.ins .meta b{ color:var(--blue-ink);font-weight:700 }
.ins h3{ font-size:clamp(1.1rem,1.5vw,1.32rem);font-weight:700;letter-spacing:-.015em;margin-top:7px;line-height:1.25 }
.ins .more{ margin-top:10px;font-size:.92rem;font-weight:600;color:var(--blue-ink);display:inline-flex;align-items:center;gap:.45em }
.ins .more svg{ width:15px;height:15px;transition:transform .2s }
.ins:hover .more svg{ transform:translateX(4px) }
@media(max-width:430px){ .ins{grid-template-columns:92px 1fr;gap:14px} }

/* reveal + stagger. Verbergen alleen als JS markeert: .rv-on op <html> (main.js,
   live) of .pre (redesign.js op /preview/). Zonder JS blijft alles zichtbaar. */
.rv{ transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(min(var(--i,0),5)*70ms) }
.rv.pre,
.rv-on .rv{ opacity:0;transform:translateY(18px) }
.rv-on .rv.is-in{ opacity:1;transform:none }
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reach-band img{ animation:rd-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 36% }
    @keyframes rd-zoom{ from{transform:scale(1.06)} to{transform:scale(1)} }
  }
}
@media(prefers-reduced-motion:reduce){ .rv.pre,.rv-on .rv{opacity:1;transform:none} .hero-copy>*,.hero-figure{animation:none!important} }

/* =========================================================================
   8. Mobiel + leesbaarheid (expertise / onderwerp / stad-hub)
   ========================================================================= */

/* 8.1 Duidelijker sectie-ritme: iets diepere koele tint + crisp grenslijn,
   zodat opeenvolgende secties op mobiel niet samenvloeien. */
:root{ --surface-soft:#eaf1fb; --color-cream-2:#eaf1fb; --paper-2:#eaf1fb; }
.ftw-section--soft, .ftw-section--alt{ border-top:1px solid #d9e3f2; }

/* Titels breken gebalanceerd af (geen los wees-woord) wanneer ze tóch wrappen. */
.ftw-display-xl, .ftw-display-lg, .ftw-display-md, .ftw-display-sm, .ftw-h1, .ftw-h2{ text-wrap:balance; }

/* 8.2 Sticky mobiele balk: WhatsApp/Bellen-knop = witte tekst op blauw
   (stond op donkere ink na de reskin -> te weinig contrast). */
.ftw-mobile-bar__btn--primary{ color:#fff; }
.ftw-mobile-bar__btn--primary .ftw-icon{ color:#fff; }

/* 8.2b Compacter advocaat-blok zodat de sticky-zijbalk op elk scherm past
   (kleinere knoppen en marges) i.p.v. afkappen of half-zichtbaar.
   Fotogrootte staat bewust gelijk aan styles.css (één bron van waarheid),
   zodat een wijziging daar ook live doorkomt. */
.ftw-advisor-card{ padding:var(--space-6) var(--space-5); text-align:center; }
.ftw-advisor-card__head{ flex-direction:column; align-items:center; text-align:center; gap:var(--space-3); margin-bottom:var(--space-5); }
.ftw-advisor-card__photo{ width:104px; height:104px; }
.ftw-advisor-card__id{ flex:0 1 auto; min-width:0; }
.ftw-advisor-card__actions{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--space-2); }
.ftw-advisor-card__actions .ftw-btn{ padding:.55em .35em; font-size:.8rem; gap:.3em; white-space:nowrap; min-width:0; }
.ftw-advisor-card__actions .ftw-icon{ width:15px; height:15px; }
.ftw-advisor-card__reassure{ margin-top:var(--space-4); font-size:var(--fs-micro); }

/* Floatende mini-CTA (desktop): verschijnt zodra het advocaat-blok uit beeld is */
.ftw-advisor-float{ position:fixed; right:24px; bottom:24px; z-index:60; display:flex; align-items:center; gap:16px; background:#13213a; color:#fff; opacity:1; border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:12px 16px; box-shadow:0 22px 60px -18px rgba(8,18,40,.7); max-width:400px; transform:translateY(calc(100% + 32px)); pointer-events:none; transition:transform .38s cubic-bezier(.16,1,.3,1); }
.ftw-advisor-float.is-visible{ transform:translateY(0); pointer-events:auto; }
.ftw-advisor-float__id{ display:flex; align-items:center; gap:12px; min-width:0; }
.ftw-advisor-float__photo{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid rgba(255,255,255,.2); display:grid; place-items:center; font-weight:700; font-size:.85rem; }
.ftw-advisor-float__txt{ display:flex; flex-direction:column; min-width:0; }
.ftw-advisor-float__label{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#9db8f0; }
.ftw-advisor-float__name{ font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ftw-advisor-float__actions{ display:flex; gap:8px; flex-shrink:0; }
.ftw-advisor-float__btn{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); color:#fff; text-decoration:none; transition:background .18s, border-color .18s; }
.ftw-advisor-float__btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.55); }
.ftw-advisor-float__btn.is-primary{ background:#fff; color:var(--color-anchor); border-color:#fff; }
.ftw-advisor-float__btn.is-primary:hover{ background:#eaf1fb; }
.ftw-advisor-float__btn .ftw-icon{ width:19px; height:19px; stroke:currentColor; fill:none; }
@media (max-width:1024px){ .ftw-advisor-float{ display:none !important; } }
@media (prefers-reduced-motion:reduce){ .ftw-advisor-float{ transition:none; } }

/* Subtiele puls op de WhatsApp-knop (advocaat-blok + float) zodat 'ie de aandacht trekt */
@media (prefers-reduced-motion:no-preference){
  @keyframes ftw-wa-attn{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(36,88,214,0); } 50%{ transform:scale(1.06); box-shadow:0 0 0 7px rgba(36,88,214,.20); } }
  .ftw-advisor-card__actions .ftw-btn--primary,
  .ftw-advisor-float__btn.is-primary{ animation:ftw-wa-attn 2.6s ease-in-out infinite; }
  .ftw-advisor-card__actions .ftw-btn--primary:hover,
  .ftw-advisor-float__btn.is-primary:hover{ animation:none; }
}

/* 8.3 Tabellen op smal mobiel: gestapelde kaartjes met de kolomkop als label
   per waarde (geen horizontaal scrollen, koppen blijven leesbaar). De cellen
   krijgen data-label van de renderer mee. */
@media (max-width: 560px) {
  .ftw-table-wrap { overflow: visible; border: 0; background: transparent; margin: var(--space-6) 0; }
  .ftw-table-wrap > table.ftw-table,
  .ftw-table-wrap > table.ftw-table tbody,
  .ftw-table-wrap > table.ftw-table tr,
  .ftw-table-wrap > table.ftw-table td { display: block; width: auto; }
  .ftw-table-wrap > table.ftw-table thead { display: none; }
  .ftw-table-wrap > table.ftw-table tr {
    background: #fff; border: 1px solid var(--color-rule); border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-3);
  }
  .ftw-table-wrap > table.ftw-table tr:last-child { margin-bottom: 0; }
  .ftw-table-wrap > table.ftw-table td { padding: 0; border: 0; margin: 0; }
  /* eerste cel = kop van het kaartje */
  .ftw-table-wrap > table.ftw-table td:first-child {
    font-weight: 700; color: var(--color-anchor-deep); font-size: var(--fs-body);
    margin-bottom: var(--space-3); padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-rule);
  }
  /* overige cellen: kolomkop als label boven de waarde */
  .ftw-table-wrap > table.ftw-table td:not(:first-child) {
    font-size: var(--fs-body-sm); color: var(--color-ink); padding: var(--space-2) 0 0;
  }
  .ftw-table-wrap > table.ftw-table td:not(:first-child)::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    color: var(--color-muted); font-weight: 600;
  }
}

/* reCAPTCHA v3-badge (rechtsonder) verbergen. Toegestaan zolang de
   reCAPTCHA-brandingtekst zichtbaar in het formulier blijft staan
   (zie contact-formulier.php: "Beveiligd met reCAPTCHA ..."). */
.grecaptcha-badge { visibility: hidden !important; }