:root {
  --yellow:#F5B800;--yd:#C99600;--ydtext:#8C6900;--yl:#FFF8E1;
  --black:#111;--ch:#2D2D2D;--off:#F7F4EE;
  --mu:#5A5A5A;--bd:#DDD5C0;--wa:#25D366;
  --radius-sm:3px;--radius:6px;--radius-round:50%;
  --transition:all 0.2s;
  --serif:'Georgia','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
/* ── FONTS: system-stack with embedded Google Fonts as progressive enhancement ── */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: local('Playfair Display Bold'), local('PlayfairDisplay-Bold');
}
/* Inter is widely available as a system font on modern OS; Playfair is not,
   so we load it via an inline data-uri embedded SVG font trick below.
   For maximum compatibility we use a robust serif fallback. */

*{box-sizing:border-box;margin:0;padding:0;}
/* :root palette + design tokens are prepended by default.nix from shared. Do not duplicate here. */
body{font-family:var(--sans);color:var(--ch);background:#fff;}

/* Legal content — shared by the same-page privacy modal on the homepage
   (.modal-body.legal-body, needs its own padding) and the standalone
   /privacy.html + /privacy-policy.html pages (nested inside .vw-main,
   which already provides the page padding — so no padding of its own
   there, just the h2/p/a typography). */
.legal-body{padding:1.75rem 2rem;line-height:1.7;}
.vw-main .legal-body{padding:0;}
.legal-body h2{font-family:var(--serif);color:#111;font-size:1.15rem;margin-top:1.5rem;margin-bottom:0.5rem;}
.legal-body p{margin-bottom:0.9rem;}
.legal-body a{color:#4f3a00;}
.legal-body .legal-updated{color:var(--mu);font-size:0.85rem;margin-bottom:1.25rem;}
.legal-body .notice{background:#fff4cc;border-left:4px solid var(--yellow);padding:1rem;margin-bottom:1rem;}
.modal.modal-legal{max-width:760px;}
.modal-header-actions{display:flex;align-items:center;gap:0.85rem;}
.legal-standalone-link{color:#fff;font-size:0.8rem;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.4);text-underline-offset:3px;}
.legal-standalone-link:hover{text-decoration-color:#fff;}
/* Prevent orphaned single-word lines. `balance` distributes lines evenly
   (fits short eyebrows and titles); `pretty` only tunes the last line
   which isn't enough when the whole title is short. Browsers without
   support fall back to normal word-wrap. */
h1,h2,h3,h4,.hero-eyebrow,.section-eyebrow{text-wrap:balance;}
p{text-wrap:pretty;}
.site{max-width:100%;overflow-x:hidden;}

/* Default language state: NL visible, EN hidden until JS toggles via setLang().
   Replaces 126 repeated inline style="display:none" attributes (was redundant,
   CSP-unfriendly markup — this single rule does the same job for every element). */
[data-lang="en"]{display:none;}

/* SKIP LINK (accessibility) */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--black);padding:0.75rem 1.25rem;z-index:2000;font-weight:700;border-radius:0 0 4px 0;text-decoration:none;}
.skip-link:focus{left:0;}

/* ANNOUNCEMENT BAR */
.announce-bar{
  background:var(--yellow);color:var(--black);
  font-family:var(--sans);font-weight:700;font-size:0.78rem;
  text-align:center;padding:0.55rem 1rem;
  line-height:1.5;
  border-top:1px solid rgba(0,0,0,0.12);
  letter-spacing:0.2px;
}

/* OVER ONS SECTION */
html{scroll-behavior:smooth;}
.over-ons{background:#F9F9F9;padding:4.5rem 2.5rem;}
.over-ons-inner{max-width:900px;margin:0 auto;text-align:center;}
.over-ons-text{font-size:0.93rem;color:#444;line-height:1.82;margin-bottom:0.85rem;}
.over-ons-kvk{font-size:0.82rem;color:#666;margin-bottom:2.5rem;padding:0.7rem 1rem;background:#fff;border-left:3px solid var(--yellow);border-radius:0 4px 4px 0;display:inline-block;}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem;}
.why-card{background:#fff;border:1.5px solid #E8E4DA;border-radius:10px;padding:1.6rem 1.3rem;text-align:center;transition:var(--transition);}
.why-card:hover{border-color:var(--yellow);transform:translateY(-3px);box-shadow:0 6px 20px rgba(245,184,0,0.12);}
.why-icon{font-size:2rem;margin-bottom:0.75rem;display:block;}
.why-title{font-size:0.9rem;font-weight:700;color:var(--black);margin-bottom:0.45rem;}
.why-desc{font-size:0.8rem;color:var(--mu);line-height:1.6;}

/* TESTIMONIALS SECTION */
.testimonials{background:#fff;padding:4.5rem 2.5rem;border-top:1px solid #EEE;}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:1.5rem;}
.review-card{background:#fff;border:1.5px solid #E8E4DA;border-radius:12px;padding:1.5rem 1.4rem;box-shadow:0 2px 12px rgba(0,0,0,0.05);transition:var(--transition);}
.review-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.09);}
.review-top{display:flex;align-items:center;gap:0.85rem;margin-bottom:0.9rem;}
.review-avatar{width:44px;height:44px;border-radius:var(--radius-round);background:var(--yellow);border:2px solid var(--black);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.9rem;color:var(--black);flex-shrink:0;}
.review-meta h3{margin:0 0 0.2rem 0;font-size:0.88rem;font-weight:700;color:var(--black);}
.review-stars{display:flex;gap:2px;}
.review-stars svg{width:14px;height:14px;fill:var(--yellow);}
.review-text{font-size:0.84rem;color:#555;line-height:1.7;font-style:italic;}
.review-note{text-align:center;font-size:0.8rem;color:#999;margin-top:0.5rem;}

/* WHATSAPP PULSE */
@keyframes wa-pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0.5);}50%{box-shadow:0 0 0 12px rgba(37,211,102,0);}}
.btn-wa-pulse{animation:wa-pulse 2.2s ease-in-out infinite;}

/* HEADER / NAV — single yellow bar. Logo, in-page links, language switch
   and both CTAs all live in one row (`nav-inner`); no separate white nav
   strip and no second bar underneath, so there's no header/hero seam to
   leave whitespace in.

   Nothing on the customer-facing homepage nav is ever tucked behind a
   menu toggle — every link, the language switch and both CTAs stay
   directly visible at every width. `.nav-secondary` (the 4 section
   links + language switch + "Voor ZZP'ers") is `display:contents` at
   desktop, so its children act as ordinary flex children of
   `.nav-inner` — same result as a flat list, just grouped in markup.
   Below 900px it becomes a real, wrapping flex box that drops onto its
   own row under logo + primary CTA, and wraps further internally if
   the language switch / links / "Voor ZZP'ers" still don't fit one line.

   `.nav-panel` / `.nav-burger` are a SEPARATE component: the "Voor
   ZZP'ers" page's own nav (mkZzpNav) still uses a hamburger + sliding
   drawer for its handful of in-page anchors, and shares these class
   names with nothing else on the homepage — the two nav patterns don't
   interact, but keep that sharing in mind before restyling either. */

header{background:var(--yellow);}
nav{background:var(--yellow);border-bottom:3px solid var(--black);}
.nav-inner{display:flex;align-items:center;height:72px;padding:0 2.5rem;gap:1.5rem;}
.logo-wrap{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.logo-icon-outer{position:relative;width:44px;height:44px;flex-shrink:0;}
.logo-shadow{position:absolute;bottom:-4px;right:-4px;width:44px;height:44px;background:var(--black);border-radius:5px;}
.logo-face{position:absolute;top:0;left:0;width:44px;height:44px;background:var(--yellow);border:2.5px solid var(--black);border-radius:5px;display:flex;align-items:center;justify-content:center;}
.logo-text-col{display:flex;flex-direction:column;line-height:1;}
.logo-wordmark{font-family:var(--sans);font-size:1.18rem;font-weight:800;color:var(--black);letter-spacing:1.5px;text-transform:uppercase;}
.logo-underline{height:2.5px;background:var(--black);margin-top:3px;border-radius:1px;}

.nav-secondary{display:contents;}

.nav-links{display:flex;align-items:center;list-style:none;gap:0.25rem;}
.nav-links li a{display:block;padding:0 0.9rem;height:72px;line-height:72px;text-decoration:none;color:rgba(0,0,0,0.72);font-size:0.83rem;font-weight:600;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-3px;transition:var(--transition);}
.nav-links li a:hover{color:var(--black);border-bottom-color:var(--black);}

.nav-controls{display:flex;align-items:center;gap:0.6rem;flex-shrink:0;}

.lang-bar{display:flex;gap:0.4rem;align-items:center;flex-shrink:0;}
.lang-btn{background:transparent;border:1.5px solid rgba(0,0,0,0.3);color:rgba(0,0,0,0.6);font-size:0.72rem;font-weight:700;letter-spacing:1px;padding:0.3rem 0.65rem;min-height:32px;cursor:pointer;transition:var(--transition);border-radius:2px;}
.lang-btn.active{background:var(--black);border-color:var(--black);color:#fff;}
.lang-btn:hover:not(.active){background:rgba(0,0,0,0.1);color:var(--black);}

/* Compact "NL ▾" dropdown — mobile-only stand-in for `.lang-bar`'s two
   separate buttons (see the 899px rules below for the swap). Hidden on
   desktop so the existing lang-bar there is completely untouched. */
.lang-select{display:none;position:relative;flex-shrink:0;}
.lang-select-btn{
  display:flex;align-items:center;gap:0.3rem;
  background:transparent;border:1.5px solid rgba(0,0,0,0.3);color:rgba(0,0,0,0.75);
  font-size:0.72rem;font-weight:700;letter-spacing:0.5px;
  padding:0.32rem 0.6rem;min-height:36px;cursor:pointer;border-radius:2px;
  transition:var(--transition);
}
.lang-select-btn:hover{background:rgba(0,0,0,0.08);}
.lang-select-caret{flex-shrink:0;transition:transform 0.2s ease;}
.lang-select.open .lang-select-caret{transform:rotate(180deg);}
.lang-select-menu{
  display:none;
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:140px;
  background:#fff;border:1.5px solid var(--black);border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  overflow:hidden;
  z-index:200;
}
.lang-select.open .lang-select-menu{display:block;}
.lang-select-option{
  display:block;width:100%;text-align:left;
  background:transparent;border:0;
  padding:0.7rem 0.95rem;font-size:0.85rem;font-weight:600;color:var(--black);
  cursor:pointer;transition:var(--transition);
}
.lang-select-option + .lang-select-option{border-top:1px solid var(--bd);}
.lang-select-option:hover{background:rgba(0,0,0,0.06);}
.lang-select-option.active{background:var(--black);color:#fff;}

.nav-burger{display:none;background:none;border:0;padding:0.5rem;min-width:44px;min-height:44px;cursor:pointer;color:var(--black);align-items:center;justify-content:center;flex-shrink:0;}
.btn-ghost-nav{padding:0.5rem 1rem;min-height:40px;border:1.5px solid var(--black);border-radius:var(--radius-sm);background:transparent;color:var(--black);font-size:0.78rem;font-weight:700;cursor:pointer;transition:var(--transition);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.btn-ghost-nav:hover{background:var(--black);color:#fff;}
.btn-black-nav{padding:0.5rem 1.1rem;min-height:40px;border:1.5px solid var(--black);border-radius:var(--radius-sm);background:var(--black);color:#fff;font-size:0.78rem;font-weight:700;cursor:pointer;transition:var(--transition);white-space:nowrap;flex-shrink:0;}
.btn-black-nav:hover{background:#333;}

/* Desktop row order — both pages: logo, links, secondary controls,
   primary CTA. `.nav-secondary`, `.nav-panel` and `.nav-actions` are
   `display:contents` on desktop, so their children (and grandchildren,
   chained) are addressed via their real DOM parent, not `.nav-inner` —
   `contents` promotes elements into `.nav-inner`'s flex layout without
   changing who their selector-visible parent is. `.nav-panel >
   .nav-links` is shared: the homepage nests its links in a
   `.nav-panel` too (for the mobile hamburger drawer), so one rule
   places both pages' links. The "Voor ZZP'ers" page has no
   `.nav-actions` wrapper — its CTA/burger are direct `.nav-inner`
   children — so both selectors are listed together. */
.nav-inner > .logo-wrap{ order: 1; }
.nav-panel > .nav-links{ order: 2; margin-right: auto; }
.nav-actions > .nav-controls{ order: 3; margin-right: 0.5rem; }
.nav-panel > .btn-ghost-nav{ order: 3; margin-right: 0.5rem; }
/* ZZP/professionals page's own NL/EN switch (.vw-lang-switch, shared
   with the voorwaarden page) — lives inside .nav-panel next to the back
   link since this nav has no .nav-actions wrapper of its own. Same
   order as the back link; DOM order (back link first) breaks the tie. */
.nav-panel > .vw-lang-switch{ order: 3; margin-right: 0.5rem; }
.nav-inner > .btn-black-nav, .nav-actions > .btn-black-nav{ order: 4; }
.nav-inner > .nav-burger, .nav-actions > .nav-burger{ order: 6; }
.nav-panel{display:contents;}
/* On mobile this becomes a real flex box (see below) so the language
   switch, CTA and hamburger wrap to a second row as one unit instead
   of splitting across two lines — `order:2` only takes effect there,
   since `order` has no meaning on a `display:contents` desktop box. */
.nav-actions{display:contents;order:2;}

@media (max-width: 899px) {
  .nav-inner{padding:0 1.15rem;gap:0.5rem;height:auto;min-height:64px;flex-wrap:wrap;}
  .logo-wrap{gap:9px;}
  .logo-icon-outer,.logo-shadow,.logo-face{width:34px;height:34px;}
  .logo-wordmark{font-size:0.88rem;letter-spacing:0.6px;}
  .btn-black-nav{padding:0.5rem 0.8rem;font-size:0.72rem;}

  /* Hamburger + sliding drawer — shared by the homepage's 4 section
     links and the "Voor ZZP'ers" page's own anchors (`.nav-panel` is
     the same component on both pages, see the desktop order comment
     above). */
  .nav-burger{display:flex;}
  .nav-panel{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;top:0;right:0;bottom:0;
    width:85%;max-width:340px;
    background:#fff;
    padding:5rem 1.75rem 2rem;
    box-shadow:-4px 0 24px rgba(0,0,0,0.2);
    transform:translateX(100%);
    transition:transform 0.28s ease;
    z-index:500;
    overflow-y:auto;
  }
  nav.nav-open .nav-panel{transform:translateX(0);}
  nav.nav-open .nav-burger{position:relative;z-index:501;}
  .nav-panel .nav-links{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;margin-right:0;}
  .nav-panel .nav-links li a{height:auto;line-height:1.4;padding:0.95rem 0;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--bd);margin-bottom:0;font-size:1rem;}
  .nav-panel > .btn-ghost-nav{margin:0.75rem 0 0;width:100%;padding:0.85rem 1rem;font-size:0.9rem;min-height:48px;}
  .nav-panel > .vw-lang-switch{margin:0.75rem 0 0;justify-content:center;}

  /* Homepage header: "Voor ZZP'ers" moves down into the hero (see
     `.hero-zzp-btn`) so the header itself only keeps the language
     switch next to the primary CTA and hamburger — grouped in
     `.nav-actions`, a *real* flex box on mobile (unlike its desktop
     `display:contents`), so all three wrap to a second row together
     as one unit if the row is too narrow, rather than splitting
     mid-group. The 4 section links live in the shared drawer above
     instead of a second header row. */
  .nav-actions{display:flex;align-items:center;gap:0.55rem;margin-left:auto;}
  .nav-controls{gap:0.3rem;}
  .nav-controls > .btn-ghost-nav{display:none;}
  /* One compact "NL ▾" dropdown replaces the two separate NL/EN
     buttons here — the full lang-bar is desktop-only. */
  .nav-controls > .lang-bar{display:none;}
  .lang-select{display:block;}
}

/* Logo a touch smaller still on narrow phones — same colours/shapes/
   borders as desktop, just scaled down further. */
@media (max-width: 480px) {
  .nav-inner{min-height:56px;}
  .logo-icon-outer,.logo-shadow,.logo-face{width:30px;height:30px;}
  .logo-wordmark{font-size:0.8rem;}
}

/* Small phones: shrink the primary CTA further so logo + button never
   crowd the row-2 wrap below them on a 360px viewport. */
@media (max-width: 380px) {
  .btn-black-nav{padding:0.45rem 0.6rem;font-size:0.68rem;}
  .logo-wordmark{display:none;}
}

/* ═══════════════════════════════════════════════════════════════
   HERO — video ONLY behind the left text panel
   Right panel (trust cards) keeps its solid yellow background
═══════════════════════════════════════════════════════════════ */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:580px;
  overflow:hidden;
  position:relative;  /* anchor for the full-width video layer */
}

/* ── LEFT panel: contains the video + text content ── */
.hero-left{
  position:relative;
  padding:4.5rem 3.5rem 4.5rem 2.5rem;
  display:flex;flex-direction:column;justify-content:center;
  background:transparent;   /* video comes from parent <section> */
  z-index:1;
}

/* Skewed divider removed — full-width video needs no colour divider */
.hero-left::after{ display:none; }

/* ── VIDEO: full-width behind entire hero section ── */
.hero-video-wrap{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-video-wrap video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

/* Dark overlay over the full video — left side deeper for text, right lighter */
.hero-video-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(8,8,8,0.75) 0%,
    rgba(8,8,8,0.65) 50%,
    rgba(8,8,8,0.55) 100%
  );
  pointer-events:none;
}

/* Fallback when video not loaded */
.hero-video-fallback{
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(135deg,#111 0%,#1c1c08 60%,#2a2200 100%);
}

/* Text content floats above video + overlay */
.hero-content{
  position:relative;
  z-index:2;
}

.hero-eyebrow{font-size:0.68rem;font-weight:600;letter-spacing:2.5px;color:var(--yellow);text-transform:uppercase;margin-bottom:1.2rem;}
.hero-title{
  font-family:var(--serif);font-size:2.8rem;font-weight:700;
  color:#fff;line-height:1.15;margin-bottom:1.3rem;
  text-shadow:0 2px 20px rgba(0,0,0,0.7);
}
.hero-title em{color:var(--yellow);font-style:normal;}
.hero-sub{
  font-size:0.92rem;color:#cdd5e0;line-height:1.78;
  margin-bottom:1.8rem;max-width:370px;
  text-shadow:0 1px 10px rgba(0,0,0,0.6);
}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;}
.btn-ly{
  padding:0.85rem 1.9rem;border-radius:var(--radius-sm);font-size:0.88rem;font-weight:700;
  cursor:pointer;background:var(--yellow);color:var(--black);border:none;
  transition:var(--transition);box-shadow:0 2px 14px rgba(245,184,0,0.4);
}
.btn-ly:hover{background:var(--yd);}
.btn-lo{
  padding:0.85rem 1.9rem;border-radius:var(--radius-sm);font-size:0.88rem;font-weight:600;
  cursor:pointer;background:rgba(255,255,255,0.10);color:#fff;
  border:1.5px solid rgba(255,255,255,0.45);transition:var(--transition);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
}
.btn-lo:hover{background:rgba(255,255,255,0.18);border-color:#fff;}

/* "Voor ZZP'ers" lives in the header nav on desktop; on mobile/tablet
   it moves down here next to the primary hero CTA instead (the header
   only keeps the language switch — see the .nav-controls rules above),
   so it must stay hidden on desktop to avoid showing twice. Same
   899px breakpoint as the header so there's no width range where it's
   missing from both places. */
.hero-zzp-btn{display:none;}
@media (max-width: 899px) {
  .hero-zzp-btn{display:inline-flex;}
  /* Deliberately smaller/quieter than "Bekijk diensten" (.btn-ly) so
     the primary action reads first — tighter padding, smaller text,
     no backdrop weight. `.hero-btns .hero-zzp-btn` (two selectors, not
     one) so this reliably outranks the later `.btn-ly,.btn-lo{...}`
     phone-width rule below, which also targets this same element via
     its shared `.btn-lo` class. */
  .hero-btns .hero-zzp-btn{padding:0.55rem 1.1rem;font-size:0.78rem;min-height:38px;background:transparent;border-color:rgba(255,255,255,0.3);}
  .hero-btns .hero-zzp-btn:hover{background:rgba(255,255,255,0.1);}
}

/* ── RIGHT panel: transparent — video shows through from parent section ── */
.hero-right{
  position:relative;
  padding:3.5rem 2rem 3.5rem 4.5rem;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:0.9rem;
  background:transparent;
  z-index:1;
}
/* Trust cards — original design preserved. Capped width so on wide
   screens the card doesn't stretch across a 1000px+ grid column with a
   sea of empty space to the right of the copy. */
.trust-card{
  background:#fff;
  border:2px solid var(--black);
  border-radius:var(--radius);padding:0.9rem 1.1rem;
  display:flex;align-items:flex-start;gap:0.85rem;
  max-width:520px;
  transition:transform 0.2s,box-shadow 0.2s;
}
.trust-card:hover{transform:translateX(3px);box-shadow:0 4px 16px rgba(0,0,0,0.12);}
.trust-icon{width:32px;height:32px;background:var(--black);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.trust-icon svg{color:var(--yellow);}
.trust-title{font-size:0.82rem;font-weight:700;color:var(--black);margin-bottom:0.15rem;}
.trust-desc{font-size:0.74rem;color:#444;line-height:1.45;}

/* STATS */
.stats-strip{background:var(--black);padding:1.6rem 2.5rem;display:flex;justify-content:space-around;flex-wrap:wrap;gap:1rem;}
.stat{text-align:center;}
.stat-num{font-family:var(--serif);font-size:1.9rem;font-weight:700;color:var(--yellow);}
.stat-label{font-size:0.68rem;color:#AAA;margin-top:0.18rem;text-transform:uppercase;letter-spacing:1px;}

/* USP */
.usp-strip{background:var(--yellow);padding:2rem 2.5rem;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:1.5rem;border-top:3px solid var(--black);border-bottom:3px solid var(--black);}
.usp-item{text-align:center;flex:1;min-width:130px;}
.usp-num{font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--black);}
.usp-label{font-size:0.78rem;color:rgba(0,0,0,0.65);margin-top:0.2rem;font-weight:600;}

/* SECTIONS */
.section{padding:4.5rem 2.5rem;}
.section-alt{background:var(--off);}
.section-header{text-align:center;max-width:600px;margin:0 auto 3rem;}
.section-eyebrow{font-size:0.68rem;font-weight:700;letter-spacing:2.5px;color:var(--ydtext);text-transform:uppercase;margin-bottom:0.75rem;}
.section-title{font-family:var(--serif);font-size:2.1rem;font-weight:700;color:var(--black);line-height:1.2;margin-bottom:0.9rem;}
.section-sub{font-size:0.9rem;color:var(--mu);line-height:1.75;}

/* HOW */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;}
.how-col-label{font-size:0.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--black);margin-bottom:1.4rem;padding-bottom:0.7rem;border-bottom:3px solid var(--yellow);}
.how-step{display:flex;gap:1.1rem;margin-bottom:1.3rem;align-items:flex-start;}
.step-num{width:28px;height:28px;border-radius:var(--radius-round);background:var(--yellow);border:2px solid var(--black);color:var(--black);font-size:0.76rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.step-body h3{margin:0 0 0.25rem 0;font-size:0.86rem;font-weight:700;color:var(--black);}
.step-body p{font-size:0.8rem;color:var(--mu);line-height:1.6;}

/* CATEGORIES */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:0.85rem;}
.cat-card{background:#fff;border:1.5px solid var(--bd);border-radius:8px;padding:1.2rem 0.6rem;text-align:center;cursor:pointer;transition:var(--transition);}
.cat-card:hover{border-color:var(--yellow);background:var(--yl);transform:translateY(-2px);box-shadow:0 4px 12px rgba(245,184,0,0.18);}
.cat-card svg{width:24px;height:24px;color:var(--yd);margin:0 auto 0.55rem;display:block;}
.cat-name{font-size:0.73rem;font-weight:600;color:var(--black);}

.review-grid{display:none!important;}

/* ZZP PAGE */
.zzp-hero{background:linear-gradient(135deg,#111 0%,#1c1c08 60%,#2a2200 100%);color:#fff;}
.zzp-hero-inner{max-width:680px;margin:0 auto;text-align:center;padding:4rem 2.5rem 3rem;}
.zzp-hero .hero-eyebrow{text-align:center;}
.zzp-hero-title{font-family:var(--serif);font-size:2.6rem;font-weight:700;line-height:1.15;margin-bottom:1rem;}
.zzp-hero-sub{font-size:0.95rem;color:#cdd5e0;line-height:1.75;max-width:520px;margin:0 auto 1.8rem;}
.zzp-hero .hero-btns{justify-content:center;}
.zzp-trust-strip{background:var(--black);padding:1.25rem 2.5rem;display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem 2.5rem;border-top:3px solid var(--yellow);}
.zzp-trust-item{display:flex;align-items:center;gap:0.5rem;color:#fff;font-size:0.82rem;font-weight:600;}
.zzp-trust-item svg{color:var(--yellow);flex-shrink:0;}
.how-grid--single{grid-template-columns:1fr;max-width:640px;margin:0 auto;}
.zzp-list{list-style:none;max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:0.9rem;}
.zzp-list li{position:relative;padding-left:1.75rem;font-size:0.9rem;color:var(--ch);line-height:1.6;}
.zzp-list li::before{content:"";position:absolute;left:0;top:0.5em;width:9px;height:9px;background:var(--yellow);border:1.5px solid var(--black);border-radius:2px;}
.zzp-prose{max-width:680px;margin:0 auto;}
.zzp-prose p{font-size:0.92rem;color:var(--ch);line-height:1.8;margin-bottom:1rem;}
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:0.75rem;}
.faq-item{border:1.5px solid var(--bd);border-radius:var(--radius);padding:0.9rem 1.1rem;background:#fff;}
.faq-item summary{cursor:pointer;font-weight:700;font-size:0.92rem;color:var(--black);list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";float:right;font-weight:700;color:var(--yd);}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:0.75rem;font-size:0.85rem;color:var(--mu);line-height:1.7;}

/* VOORWAARDEN PAGE — standalone bilingual legal document (/voorwaarden.html,
   /terms-and-conditions.html). Own light header (logo + back link + NL/EN
   switch) rather than the full site nav — this page has no modals/chatbot
   to wire up, so it stays deliberately simple like the ZZP page's nav. */
.vw-header{background:var(--yellow);border-bottom:3px solid var(--black);}
.vw-header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 2.5rem;gap:1rem;max-width:1100px;margin:0 auto;}
.vw-header-actions{display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
.vw-lang-switch{display:flex;gap:0.4rem;align-items:center;flex-shrink:0;}
.vw-lang-btn{background:transparent;border:1.5px solid rgba(0,0,0,0.3);color:rgba(0,0,0,0.6);font-size:0.72rem;font-weight:700;letter-spacing:1px;padding:0.4rem 0.7rem;min-height:36px;cursor:pointer;transition:var(--transition);border-radius:2px;text-decoration:none;display:inline-flex;align-items:center;}
.vw-lang-btn.active{background:var(--black);border-color:var(--black);color:#fff;}
.vw-lang-btn:hover:not(.active){background:rgba(0,0,0,0.1);color:var(--black);}

.vw-main{max-width:860px;margin:0 auto;padding:3rem 1.5rem 4.5rem;}
.vw-hero{margin-bottom:2.5rem;}
.vw-hero h1{font-family:var(--serif);font-size:2.4rem;font-weight:700;color:var(--black);line-height:1.15;margin-bottom:0.6rem;}
.vw-updated{font-size:0.85rem;color:var(--mu);margin-bottom:1rem;}
.vw-intro-text{font-size:0.95rem;color:var(--ch);line-height:1.7;max-width:640px;}
.vw-notice{margin-top:1.25rem;background:#fff4cc;border-left:4px solid var(--yellow);padding:1rem 1.1rem;font-size:0.85rem;line-height:1.6;color:var(--ch);}

.vw-toc{background:var(--off);border:1.5px solid var(--bd);border-radius:var(--radius);padding:1.5rem 1.75rem;margin-bottom:3rem;}
.vw-toc-heading{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--black);margin-bottom:1rem;}
.vw-toc-group{margin-bottom:1.25rem;}
.vw-toc-group:last-child{margin-bottom:0;}
.vw-toc-group > a{display:block;font-weight:700;font-size:0.92rem;color:var(--black);text-decoration:none;margin-bottom:0.6rem;}
.vw-toc-group > a:hover{color:var(--yd);text-decoration:underline;}
.vw-toc-num{color:var(--ydtext);}
.vw-toc-group ul{list-style:none;columns:2;column-gap:1.5rem;}
.vw-toc-group li{break-inside:avoid;margin-bottom:0.4rem;}
.vw-toc-group li a{font-size:0.8rem;color:var(--mu);text-decoration:none;line-height:1.5;}
.vw-toc-group li a:hover{color:var(--yd);text-decoration:underline;}

.vw-group{margin-bottom:3.5rem;scroll-margin-top:1.5rem;}
.vw-group:last-child{margin-bottom:0;}
.vw-group h2{font-family:var(--serif);font-size:1.6rem;font-weight:700;color:var(--black);border-bottom:3px solid var(--yellow);padding-bottom:0.75rem;margin-bottom:1.5rem;}
.vw-group-num{color:var(--ydtext);}
.vw-intro{background:var(--off);border-radius:var(--radius);padding:1.25rem 1.5rem;margin-bottom:2rem;}
.vw-intro h3{font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--black);margin-bottom:0.6rem;}
.vw-intro p{font-size:0.9rem;color:var(--ch);line-height:1.7;margin-bottom:0.4rem;}
.vw-intro p:last-child{margin-bottom:0;}
.vw-articles{display:flex;flex-direction:column;gap:1.75rem;}
.vw-article{scroll-margin-top:1.5rem;}
.vw-article h3{font-size:0.98rem;font-weight:700;color:var(--black);margin-bottom:0.5rem;line-height:1.4;}
.vw-article-num{color:var(--ydtext);}
.vw-article p{font-size:0.9rem;color:var(--ch);line-height:1.75;margin-bottom:0.6rem;}
.vw-article p:last-child{margin-bottom:0;}

@media (max-width:768px){
  .vw-header-inner{padding:0 1.15rem;height:auto;min-height:64px;flex-wrap:wrap;gap:0.6rem;}
  .vw-main{padding:2rem 1.25rem 3rem;}
  .vw-hero h1{font-size:1.8rem;}
  .vw-toc{padding:1.25rem 1.25rem;}
  .vw-toc-group ul{columns:1;}
}

/* CTA */
.cta-section{background:var(--yellow);padding:4.5rem 2.5rem;text-align:center;border-top:3px solid var(--black);border-bottom:3px solid var(--black);}
.cta-title{font-family:var(--serif);font-size:2.4rem;font-weight:700;color:var(--black);margin-bottom:0.9rem;}
.cta-sub{color:rgba(0,0,0,0.65);font-size:0.9rem;margin:0 auto 2.2rem;max-width:480px;line-height:1.75;}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.75rem;}
.btn-cta-black{padding:0.9rem 2rem;border-radius:var(--radius-sm);font-size:0.88rem;font-weight:700;cursor:pointer;background:var(--black);color:#fff;border:2px solid var(--black);transition:var(--transition);text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;}
.btn-cta-black:hover{background:#333;}
.btn-wa{padding:0.9rem 2rem;border-radius:var(--radius-sm);font-size:0.88rem;font-weight:700;cursor:pointer;background:#25D366;color:#fff;border:2px solid #1DAF57;transition:var(--transition);text-decoration:none;display:inline-flex;align-items:center;gap:0.6rem;}
.btn-wa:hover{background:#1DAF57;}
.btn-cta-outline{padding:0.9rem 2rem;border-radius:var(--radius-sm);font-size:0.88rem;font-weight:700;cursor:pointer;background:#fff;color:var(--black);border:2px solid var(--black);transition:var(--transition);text-decoration:none;display:inline-flex;align-items:center;}
.btn-cta-outline:hover{background:var(--yl);}
.cta-contact{display:flex;justify-content:center;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.cta-ci{display:flex;align-items:center;gap:0.5rem;font-size:0.86rem;font-weight:700;color:var(--black);text-decoration:none;transition:opacity 0.2s;}
.cta-ci:hover{opacity:0.7;}
.cta-ci svg{width:18px;height:18px;flex-shrink:0;}

/* FOOTER */
footer{background:#1A1A1A;padding:3rem 2.5rem;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2rem;}
.footer-logo-wrap{display:flex;align-items:center;gap:10px;margin-bottom:0.85rem;}
.fl-outer{position:relative;width:32px;height:32px;flex-shrink:0;}
.fl-shadow{position:absolute;bottom:-3px;right:-3px;width:32px;height:32px;background:#444;border-radius:4px;}
.fl-face{position:absolute;top:0;left:0;width:32px;height:32px;background:var(--yellow);border-radius:4px;display:flex;align-items:center;justify-content:center;}
.footer-wordmark{font-family:var(--sans);font-size:1rem;font-weight:800;color:#fff;letter-spacing:1.5px;text-transform:uppercase;}
.footer-tagline{font-size:0.8rem;color:#888;line-height:1.65;margin-bottom:1rem;}
.footer-ci a,.footer-ci div{display:flex;align-items:center;gap:0.6rem;font-size:0.8rem;color:#CCC;margin-bottom:0.45rem;font-weight:500;text-decoration:none;transition:color 0.2s;}
.footer-ci a:hover{color:var(--yellow);}
.footer-ci svg{color:var(--yellow);width:14px;height:14px;flex-shrink:0;}
.footer-col h3{font-size:0.67rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#aaa;margin-bottom:1rem;}
.footer-links{list-style:none;}
.footer-links li{margin-bottom:0.5rem;}
/* #777 measured 3.89:1 against the footer's #1A1A1A background — below
   the 4.5:1 AA minimum for this font-size. #888 clears it (4.91:1)
   while staying visually close to the original grey. */
.footer-links a{text-decoration:none;color:#888;font-size:0.8rem;transition:color 0.2s;}
.footer-links a:hover{color:var(--yellow);}
.footer-bottom{border-top:1px solid #2E2E2E;padding-top:1.4rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;}
.footer-bottom p{font-size:0.76rem;color:#444;}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000;align-items:center;justify-content:center;padding:1rem;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:12px;width:100%;max-width:580px;max-height:90vh;overflow-y:auto;position:relative;}
.modal-header{background:var(--black);color:#fff;padding:1.4rem 1.75rem;border-radius:12px 12px 0 0;display:flex;align-items:center;justify-content:space-between;}
.modal-header h3{font-family:var(--serif);font-size:1.3rem;font-weight:700;color:#fff;}
.modal-header span{color:var(--yellow);font-size:0.82rem;font-weight:600;margin-top:0.15rem;}
.modal-close{background:transparent;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:0;line-height:1;}
.modal-body{padding:1.75rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
.form-group{margin-bottom:1rem;}
.form-group label{display:block;font-size:0.78rem;font-weight:700;color:var(--black);margin-bottom:0.4rem;text-transform:uppercase;letter-spacing:0.5px;}
.form-group input,.form-group textarea,.form-group select{width:100%;border:1.5px solid var(--bd);border-radius:4px;padding:0.65rem 0.9rem;font-size:0.85rem;font-family:var(--sans);color:var(--ch);background:#fff;transition:border-color 0.2s;outline:none;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--yellow);}
.form-privacy{font-size:.76rem;line-height:1.5;color:#555;margin:.75rem 0 1rem;}
.form-privacy a{color:#4f3a00;font-weight:700;}
.form-checkbox-group{margin-bottom:1.25rem;}
.form-checkbox{display:flex;align-items:flex-start;gap:0.6rem;font-size:0.82rem;line-height:1.5;color:var(--ch);cursor:pointer;}
.form-checkbox input{margin-top:0.2rem;flex:0 0 auto;width:16px;height:16px;accent-color:var(--yd);cursor:pointer;}
.form-checkbox a{color:#4f3a00;font-weight:700;}
.review-form-card{max-width:780px;margin:2rem auto 0;background:#fff;border:1.5px solid var(--bd);border-radius:12px;padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.review-form-card h3{font-family:var(--serif);font-size:1.45rem;margin-bottom:.5rem}.review-form-card small{display:block;color:#666;margin-top:.35rem}
.review-consent{display:flex;align-items:flex-start;gap:.65rem;font-size:.82rem;line-height:1.5;margin-top:.75rem}.review-consent input{margin-top:.2rem;flex:0 0 auto}
.review-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}.review-date,.review-verified{font-size:.75rem;color:#666}.review-verified{color:#216b36;font-weight:700}
.review-status{margin-top:1rem;padding:.75rem;border-radius:var(--radius);display:none}.review-status.success{display:block;background:#e8f7ec;color:#145c2a}.review-status.pending{display:block;background:#fff4cc;color:#604900}.review-status.error{display:block;background:#fde8e8;color:#8a1c1c}
.testimonials>.review-grid:not(#verifiedReviews){display:none!important}

/* WCAG-visible keyboard focus */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:3px solid #0b57d0;outline-offset:3px;}
.form-group textarea{resize:vertical;min-height:90px;}
.upload-area{border:2px dashed var(--bd);border-radius:var(--radius);padding:1.5rem;text-align:center;cursor:pointer;transition:var(--transition);background:#fafafa;}
.upload-area:hover{border-color:var(--yellow);background:var(--yl);}
.upload-area svg{width:28px;height:28px;color:var(--yd);display:block;margin:0 auto 0.5rem;}
.upload-area p{font-size:0.78rem;color:var(--mu);}
.upload-area input{display:none;}
.upload-preview{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem;}
.upload-preview .thumb{width:56px;height:56px;border-radius:4px;object-fit:cover;border:2px solid var(--yellow);}
.send-method{display:flex;gap:0.75rem;margin-bottom:1.25rem;}
.send-opt{flex:1;border:2px solid var(--bd);border-radius:var(--radius);padding:0.75rem;text-align:center;cursor:pointer;transition:var(--transition);}
.send-opt.selected{border-color:var(--yellow);background:var(--yl);}
.send-opt svg{width:22px;height:22px;display:block;margin:0 auto 0.3rem;}
.send-opt.wa svg{color:#25D366;}
.send-opt.em svg{color:var(--yd);}
.send-opt span{font-size:0.75rem;font-weight:700;color:var(--black);}
.btn-submit{width:100%;padding:1rem;border:none;border-radius:4px;font-size:0.9rem;font-weight:700;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:0.5rem;}
.btn-submit.wa-submit{background:#25D366;color:#fff;}
.btn-submit.wa-submit:hover{background:#1DAF57;}
.btn-submit.em-submit{background:var(--yellow);color:var(--black);}
.btn-submit.em-submit:hover{background:var(--yd);}

/* CHATBOT */
.chat-fab{position:fixed;bottom:24px;right:24px;z-index:900;width:58px;height:58px;border-radius:var(--radius-round);background:var(--yellow);border:3px solid var(--black);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,0.25);transition:var(--transition);}
.chat-fab:hover{transform:scale(1.08);}
.chat-fab svg{width:26px;height:26px;color:var(--black);}
.chat-badge{position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:#E53E3E;border-radius:var(--radius-round);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;border:2px solid #fff;}
.chat-window{position:fixed;bottom:96px;right:24px;z-index:900;width:340px;height:480px;background:#fff;border-radius:12px;border:2px solid var(--black);display:none;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.22);overflow:hidden;}
.chat-window.open{display:flex;}
.chat-head{background:var(--black);padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;}
.chat-head-info{display:flex;align-items:center;gap:0.65rem;}
.chat-avatar{width:34px;height:34px;border-radius:var(--radius-round);background:var(--yellow);display:flex;align-items:center;justify-content:center;}
.chat-avatar svg{width:18px;height:18px;color:var(--black);}
.chat-head h4{font-size:0.9rem;font-weight:700;color:#fff;}
.chat-head p{font-size:0.7rem;color:#AAA;}
.chat-close{background:transparent;border:none;color:#fff;font-size:1.3rem;cursor:pointer;}
.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:0.75rem;background:var(--off);}
.msg{max-width:82%;padding:0.65rem 0.9rem;border-radius:10px;font-size:0.82rem;line-height:1.5;}
.msg.bot{background:#fff;color:var(--ch);border:1px solid var(--bd);align-self:flex-start;border-bottom-left-radius:2px;}
.msg.user{background:var(--yellow);color:var(--black);font-weight:600;align-self:flex-end;border-bottom-right-radius:2px;}
.msg.typing{background:#fff;border:1px solid var(--bd);align-self:flex-start;padding:0.65rem 1rem;}
.typing-dots{display:flex;gap:4px;align-items:center;}
.typing-dots span{width:7px;height:7px;border-radius:var(--radius-round);background:var(--bd);animation:bounce 1.2s infinite;}
.typing-dots span:nth-child(2){animation-delay:0.2s;}
.typing-dots span:nth-child(3){animation-delay:0.4s;}
@keyframes bounce{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-6px);}}
.chat-input-row{display:flex;padding:0.75rem;border-top:1px solid var(--bd);gap:0.5rem;background:#fff;}
.chat-input-row input{flex:1;border:1.5px solid var(--bd);border-radius:var(--radius);padding:0.55rem 0.8rem;font-size:0.82rem;font-family:var(--sans);outline:none;transition:border-color 0.2s;}
.chat-input-row input:focus{border-color:var(--yellow);}
.chat-send{width:36px;height:36px;border-radius:var(--radius);background:var(--yellow);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0;}
.chat-send:hover{background:var(--yd);}
.chat-send svg{width:16px;height:16px;color:var(--black);}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — two content breakpoints (nav has its own at 900px,
   above). 768px = tablet/phone reflow, 480px = small-phone tuning.
   Kept deliberately to these two so no rule has to out-fight another
   at a third, slightly-different width.
═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Prevent horizontal scroll */
  body,html{max-width:100%;overflow-x:hidden;}
  .site{overflow-x:hidden;}

  /* Announce bar */
  .announce-bar{font-size:0.7rem;letter-spacing:0;padding:0.45rem 0.75rem;}

  /* Hero — same colours/fonts/borders as desktop throughout; only sizes
     and spacing shrink so the section stays compact and the video isn't
     stretched taller (and so more heavily cropped by object-fit:cover)
     than it needs to be. */
  .hero{grid-template-columns:1fr;min-height:0;}
  .hero-left{min-height:0;padding:2.25rem 1.25rem 1.5rem;}
  .hero-eyebrow{margin-bottom:0.8rem;}
  .hero-title{font-size:1.9rem;margin-bottom:0.85rem;}
  .hero-sub{font-size:0.9rem;max-width:100%;margin-bottom:1.25rem;}
  /* Row + wrap so "Bekijk diensten" and "Voor ZZP'ers" sit side by side;
     align-items:flex-start overrides the flex container's default
     stretch so neither button fills the full width — they wrap onto
     their own line only if a narrow viewport can't fit both. */
  .hero-btns{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:0.65rem;}
  /* Auto-sized like the desktop pill, not a full-width bar. */
  .btn-ly,.btn-lo{padding:0.8rem 1.6rem;font-size:0.85rem;min-height:44px;}
  .hero-right{padding:0 1.25rem 2rem;align-items:stretch;gap:0.65rem;}
  .trust-card{max-width:100%;}
  /* Video/overlay/fallback used to stretch (inset:0) across the entire
     stacked hero, cards included — on a narrow phone that section can
     run 700px+ tall, so object-fit:cover had to crop a landscape video
     down to a thin vertical sliver to fill it, reading as "zoomed in"
     and cropped differently than the desktop two-column version. Capping
     the video band to a bounded, landscape-proportioned height behind
     the text only crops it much closer to the desktop composition;
     .hero's own background carries the same dark tone below that band
     so the cards don't sit on a hard, jarring edge where the video ends. */
  .hero{background:#111;}
  .hero-video-wrap,.hero-video-overlay,.hero-video-fallback{
    inset:auto;top:0;left:0;right:0;bottom:auto;
    height:min(440px,60vh);
  }
  /* A uniform, slightly darker overlay reads closer to the desktop
     panel's darkest (left, 0.75) edge — the desktop gradient fades to
     0.55 on the right because trust cards sit there on solid white; on
     mobile the video only runs behind the text now, so a left-to-right
     fade would leave one edge visibly brighter/washier for no reason. */
  .hero-video-overlay{background:rgba(8,8,8,0.74);}

  /* ZZP hero */
  .zzp-hero-inner{padding:2.75rem 1.25rem 2rem;}
  .zzp-hero-title{font-size:2rem;}
  .zzp-hero .hero-btns .btn-ly,.zzp-hero .hero-btns .btn-lo{width:auto;}
  .zzp-hero .hero-btns{flex-direction:row;justify-content:center;}
  .zzp-trust-strip{padding:1rem 1.25rem;gap:0.85rem 1.5rem;}

  /* Sections */
  .section{padding:2.75rem 1.25rem;}
  .section-title{font-size:1.65rem;}
  .over-ons{padding:2.75rem 1.25rem;}

  /* Grids */
  .how-grid{grid-template-columns:1fr;gap:2rem;}
  .why-grid{grid-template-columns:1fr;}
  .cat-grid{grid-template-columns:repeat(3,1fr);}

  /* Footer */
  .footer-top{grid-template-columns:1fr;gap:1.75rem;}
  .footer-bottom{flex-direction:column;text-align:center;gap:0.5rem;}
  /* Extra bottom padding reserves room for the fixed chat button so it
     doesn't sit on top of the last footer line once the page is
     scrolled all the way down — the one place a fixed FAB ends up
     permanently over content rather than just transiently while
     scrolling past it. */
  footer{padding:2.5rem 1.25rem calc(2.5rem + 74px);}

  /* USP strip */
  .usp-strip{padding:1.5rem 1.25rem;gap:1.25rem;}
  .usp-num{font-size:1.6rem;}

  /* Stats — same black background and yellow numerals as desktop; a
     fixed 2x2 grid for the 4 items instead of wrapping flex boxes gives
     even columns/rows instead of a layout that shifts with text length. */
  .stats-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 1rem;padding:1.5rem 1.25rem;}
  .stat-num{font-size:1.5rem;}

  /* CTA */
  .cta-section{padding:3rem 1.25rem;}
  .cta-title{font-size:1.8rem;}
  .cta-btns{flex-direction:column;align-items:stretch;}
  .btn-cta-black,.btn-wa,.btn-cta-outline{justify-content:center;width:100%;min-height:48px;}
  .cta-contact{flex-direction:column;gap:0.75rem;}

  /* Form modal */
  .form-row{grid-template-columns:1fr;}
  .modal{border-radius:8px;}
  .modal-body{padding:1.25rem;}
  .send-method{flex-direction:column;}

  /* Chat — respects the safe area on notched/gesture-bar phones so the
     button/window never sit under the OS's own bottom overlay. */
  .chat-fab{bottom:calc(24px + env(safe-area-inset-bottom, 0px));}
  .chat-window{width:calc(100vw - 32px);right:16px;bottom:calc(88px + env(safe-area-inset-bottom, 0px));}
}

/* Tablet: wider than the phone reflow above, narrower than desktop's
   4-column footer / 3-column why-grid feeling cramped. */
@media (min-width:769px) and (max-width:1024px){
  .footer-top{grid-template-columns:1.4fr 1fr 1fr;gap:1.75rem;}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .hero-title{font-size:2.3rem;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  #heroVideo{display:none!important;}
}

/* Small phones */
@media(max-width:480px){
  .hero-title{font-size:1.7rem;}
  .section-title{font-size:1.45rem;}
  .cta-title{font-size:1.55rem;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .zzp-hero-title{font-size:1.65rem;}
  .zzp-hero .hero-btns{flex-direction:column;}
  .zzp-hero .hero-btns .btn-ly,.zzp-hero .hero-btns .btn-lo{width:100%;}
}

/* Photo framing, written by tools/page-builder.
   --frame is x y zoom in the photograph's own coordinates and is the value
   that matters; the declarations after it are derived from it and are what
   the browser obeys. Edit by dragging.

   Concatenated into /styles.css by sitegen/default.nix, so a crop applies to
   every page a photo appears on rather than to the one page that happened to
   hold a <style> block. */
#photo-excavators-demolishing-brick { --frame: 0.5 0.461 1; object-position: 50% 46.1%; }