/*
 * Winq overrides — loaded AFTER Reforma stylesheets in head.njk.
 * Source of truth: DESIGN.md (leidend bij conflicten met context/brand).
 */

/* ============================================================
   @font-face — Winq font stack
   All files live in assets/fonts/, served via Eleventy passthrough.
   font-display: swap zodat tekst direct zichtbaar is met fallback.
   ============================================================ */

/* Inter VF — variable font, full weight range (UI / structure) */
@font-face {
  font-family: "Inter VF";
  src: url("/fonts/inter-vf.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter VF";
  src: url("/fonts/inter-vf-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* BDO Grotesk VF — variable font (personality / buttons / body) */
@font-face {
  font-family: "BDO Grotesk VF";
  src: url("/fonts/bdo-grotesk-vf.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Editorsnote — static weights (editorial display only, 100px+) */
@font-face {
  font-family: "Editorsnote";
  src: url("/fonts/editorsnote-extralight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Editorsnote";
  src: url("/fonts/editorsnote-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Editorsnote";
  src: url("/fonts/editorsnote-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Roboto Mono VF — variable font (detail / code / mono labels) */
@font-face {
  font-family: "Roboto Mono VF";
  src: url("/fonts/roboto-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono VF";
  src: url("/fonts/roboto-mono-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     Surfaces
     ============================================================ */
  --color-paper: #f8f7f3;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-accent: #f3350c; /* Winq Red — alleen dots/micro, NOOIT vlakken */
  --color-off-bg: #f1efed; /* Grey 50 — secondary button bg */

  /* ============================================================
     Grey scale (warm, trending) — 11 tinten per DESIGN.md
     ============================================================ */
  --grey-900: #0a0a0a;
  --grey-800: #0f0f0f;
  --grey-700: #171717;
  --grey-600: #292929;
  --grey-500: #4d4d4d;
  --grey-400: #666666;
  --grey-300: #707070;
  --grey-250: #808080;
  --grey-200: #b6b6b6;
  --grey-100: #dddddd;
  --grey-50: #f1efed;

  /* ============================================================
     White opacity scale — voor tekst op donkere surfaces
     ============================================================ */
  --white-80: rgba(255, 255, 255, 0.8);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-10: rgba(255, 255, 255, 0.1);

  /* Functional */
  --cta-block-bg: #000000;
  --faq-accent-line: #011d3f;

  /* ============================================================
     Typography — families, weights, tracking
     ============================================================ */
  --font-primary: "Inter VF", "Inter", Arial, sans-serif; /* UI / structure */
  --font-body:
    "BDO Grotesk VF", "BDO Grotesk", Arial, sans-serif; /* personality / buttons */
  --font-display:
    "Editorsnote", "Editor's Note", "Times New Roman", serif; /* editorial drama */
  --font-mono: "Roboto Mono VF", "Roboto Mono", monospace; /* detail / code */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-tight: -0.02em; /* baseline op alle type */
  --tracking-body: -0.32px;

  /* ============================================================
     Border radius
     ============================================================ */
  --radius-tiny: 0.125rem; /* 2px  */
  --radius-xxsmall: 0.25rem; /* 4px  */
  --radius-xsmall: 0.5rem; /* 8px  */
  --radius-card: 0.75rem; /* 12px — standaard cards */
  --radius-medium: 1rem; /* 16px — newsletter button */
  --radius-large: 1.125rem; /* 18px */
  --radius-cta: 1.25rem; /* 20px — CTA blokken */
  --radius-xxlarge: 1.5rem; /* 24px */
  --radius-huge: 1.75rem; /* 28px */
  --radius-xhuge: 2rem; /* 32px */
  --radius-xxhuge: 2.5rem; /* 40px */
  --radius-ultra: 3rem; /* 48px */
  --radius-pill: 144px; /* full pill buttons */
  --radius-circle: 50%;

  /* ============================================================
     Spacing (rem-based)
     ============================================================ */
  --spacer-tiny: 0.125rem; /* 2px  */
  --spacer-xxsmall: 0.25rem; /* 4px  */
  --spacer-xsmall: 0.5rem; /* 8px  */
  --spacer-small: 1rem; /* 16px */
  --spacer-cust-1: 1.25rem; /* 20px */
  --spacer-cust-2: 1.5rem; /* 24px */
  --spacer-medium: 2rem; /* 32px */
  --spacer-cust-3: 2.5rem; /* 40px */
  --spacer-large: 3rem; /* 48px */
  --spacer-xlarge: 4rem; /* 64px */
  --spacer-xxlarge: 5rem; /* 80px */
  --spacer-huge: 6rem; /* 96px */
  --spacer-xhuge: 8rem; /* 128px */
  --spacer-xxhuge: 12rem; /* 192px */

  /* Section padding scale */
  --section-xsmall: 4rem; /* 64px  */
  --section-small: 6rem; /* 96px  */
  --section-medium: 8rem; /* 128px */
  --section-large: 10rem; /* 160px */
  --section-xlarge: 12rem; /* 192px */
  --section-xxlarge: 13rem; /* 208px */

  /* ============================================================
     Reforma font-family swap — DESIGN.md mapping:
     Sentient Variable   → Inter VF       (H1/H2/H4-H6 per DESIGN hierarchy;
                                           Editorsnote is display-only 100px+
                                           en wordt contextueel toegepast,
                                           niet via root variable)
     Google Sans Flex    → Inter VF       (body, heading-alternative)
     Google Sans Flex    → BDO Grotesk VF (buttons — DESIGN.md button rule)
     Fragment Mono       → Roboto Mono VF (labels / detail)
     Raveo Display       → BDO Grotesk VF (waar Reforma Raveo rechtstreeks gebruikt)
     Weights blijven intact — visuele tuning volgt na QA.
     ============================================================ */
  --_🔠-typography---font--heading: var(--font-primary);
  --_🔠-typography---font--heading-alternative: var(--font-primary);
  --_🔠-typography---font--body: var(--font-primary);
  --_🔠-typography---font--button: var(--font-body);
  --_🔠-typography---font--label: var(--font-mono);

  /* ============================================================
     Reforma color override — DESIGN.md palette:
     Reforma light-100 (#f7f6f5, warm paper) → Winq paper (#f8f7f3)
     Reforma dark-100  (#241018, purple-black) → Winq black (#0a0a0a)
     Reforma accent     (#90ff00 green)       → Winq red (#f3350c)

     `--base--light-100` flows down naar `tokens---background--base`
     en `tokens---tone--weak` etc. via Reforma's eigen token chain, dus
     body background + subtle variants updaten vanzelf.

     Opacity varianten (dark-88/64/48/32/16/8/4/0) opnieuw berekend
     met Winq black (#0a0a0a) als basis, zelfde alpha waarden.

     Accent wordt alleen nog voor dots/micro gebruikt (DESIGN.md): de
     enige baseline Reforma usage is `.color.color_four` swatch
     (style-guide demo, niet in prod pagina's).
     ============================================================ */
  --_🎨-color--base---base--light-100: #f8f7f3;
  --_🎨-color--base---base--dark-100: #0a0a0a;
  --_🎨-color--base---accent--primary: #f3350c;

  /* Dark opacity scale — herberekend met #0a0a0a basis, alphas intact */
  --_🎨-color--base---base--dark-88: #0a0a0ae0;
  --_🎨-color--base---base--dark-64: #0a0a0aa3;
  --_🎨-color--base---base--dark-48: #0a0a0a7a;
  --_🎨-color--base---base--dark-32: #0a0a0a52;
  --_🎨-color--base---base--dark-16: #0a0a0a29;
  --_🎨-color--base---base--dark-8: #0a0a0a14;
  --_🎨-color--base---base--dark-4: #0a0a0a0a;
  --_🎨-color--base---base--dark-0: #0a0a0a00;

  /* Light opacity scale — herberekend met #f8f7f3 basis */
  --_🎨-color--base---base--light-88: #f8f7f3e0;
  --_🎨-color--base---base--light-64: #f8f7f3a3;
  --_🎨-color--base---base--light-48: #f8f7f37a;
  --_🎨-color--base---base--light-32: #f8f7f352;
  --_🎨-color--base---base--light-16: #f8f7f329;
  --_🎨-color--base---base--light-8: #f8f7f314;
  --_🎨-color--base---base--light-4: #f8f7f30a;
  --_🎨-color--base---base--light-0: #f8f7f300;

  /* Depth (subtiele borders/dividers) — blijven warm maar consistent */
  --_🎨-color--base---depth--light: #f1efed; /* Winq grey-50 */
  --_🎨-color--base---depth--dark: #0a0a0a;
  --_🎨-color--base---lift--light: #ffffff;
  --_🎨-color--base---lift--dark: #171717; /* Winq grey-700 */
}

/* ============================================================
   Editorsnote — editorial <em> in headings
   DESIGN.md: Editorsnote 300 voor display (100px+) italics.
   Reforma's .heading-alternative class + alle h1/h2 em's.
   ============================================================ */
h1 em,
h2 em,
.heading-style-h5 em {
  font-family: "Editorsnote", "Editor's Note", Georgia, serif !important;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.001em;
}

/* Visually-hidden but present in the DOM/textContent. Used to inject a real
   space character between the hero's two <em> accent words: Webflow's
   loader-heading script sets the h1 aria-label from textContent, so this keeps
   the accessible name / SEO text as "obvious choice." while the VISIBLE gap is
   produced by margin (below), not by this space. position:absolute keeps it
   out of layout so it adds zero visible width. */
.u-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Home hero word-spacing around <em> accent words — MARGIN-BASED ON PURPOSE.
   The GSAP SplitText loader wraps every word in its own inline-block and is
   unreliable with VISIBLE whitespace text nodes next to/inside an <em>: it
   strips in-<em> spaces outright, and bare inter-element spaces can collapse in
   some engines (notably iOS Safari). So the visible word-space is NOT a
   whitespace text node — it is this margin, which SplitText cannot touch. The
   readable space lives in a .u-vh span instead (zero visible width). Scoped to
   the home-a hero. */
.headline_hero-home-a h1 em {
  margin-left: 0.22em;
}

/* When an <em> starts a line (it directly follows the <br>, as the EN hero's
   "obvious" does), its left margin would push that centered line off-centre.
   Zero it there. The NL hero has no <br> before its em ("...kunt <em>negeren
   </em>"), so this never matches and that word-space margin stays intact. */
.headline_hero-home-a h1 br + em {
  margin-left: 0;
}

/* Home hero video seam fix. The hero/video stack (.home-top_wrap and its
   children) is transparent and sits over the Paper (#F8F7F3) <body>. The dark
   scroll-reveal video's bottom edge meets the dark .section_approach right at a
   CSS-pixel boundary. On fractional device-pixel ratios (e.g. Windows display
   scaling at 125%/150% → DPR 1.5) that boundary maps between device pixels, and
   a 1-device-pixel row of the transparent parent — i.e. the Paper body — shows
   through as a thin light seam. (Not reproducible at DPR 1, which is why it
   looks fine on a 100% display but not on a scaled one.)
   Two layers of defence:
   1. Dark backdrop behind the video box, so nothing light sits directly behind
      the video itself. */
.section_hero-home-a .video_cover {
  background-color: #0a0a0a;
}

/* 2. A dark bar that STRADDLES the static hero/section boundary. .home-top_wrap
   (position:relative, overflow:visible) ends at the fractional CSS pixel where
   .section_approach begins; it contains the video, so its ::after paints above
   both the video's bottom edge AND the section below. Anchoring to this STATIC
   container (not the sticky video box, which travels with scroll) keeps the bar
   exactly on the boundary at all times. The 4px height with bottom:-2px covers
   ~2px either side, so no fractional device-pixel row is left uncovered at any
   DPR. High z-index so it wins over any positioned video layer. */
.home-top_wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background-color: #0a0a0a;
  pointer-events: none;
  z-index: 50;
}

/* Footer marquee logo — Reforma's 86rem is voor breed SVG wordmark,
   Winq-Logo-2 is compacter, 60rem past beter */
.logo_marquee-footer {
  width: 42rem;
}

.master_video-text > div:nth-child(1) {
  margin-left: 36%;
  margin-right: 36%;
  border-radius: 15px;
}

.locale_switcher {
  grid-column-gap: 0.2rem;
  grid-row-gap: 0.2rem;
  background-color: var(--grey-50);
  border: 1px solid var(--_🎨-color--base---base--dark-8);
  border-radius: var(--radius-pill);
  align-items: center;
  padding: 0.2rem;
  display: flex;
}

.locale_switcher.mobile {
  display: none;
}

.locale_switcher-link {
  min-width: 2.25rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  justify-content: center;
  align-items: center;
  font-family: "BDO Grotesk VF", "BDO Grotesk", Arial, sans-serif;
  color: var(--grey-500);
  font-size: 0.72rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.3s;
  display: inline-flex;
}

.locale_switcher-link:hover {
  background-color: var(--color-white);
  color: var(--grey-900);
  text-decoration: none;
}

.locale_switcher-link:focus-visible {
  outline: 2px solid var(--grey-900);
  outline-offset: 2px;
}

.locale_switcher-link.is-active {
  background-color: var(--grey-900);
  color: var(--color-paper);
  pointer-events: none;
}

.nav-menu_locale {
  display: none;
}

@media screen and (max-width: 991px) {
  .locale_switcher.desktop {
    display: none;
  }

  .nav-menu_locale {
    display: block;
    width: 100%;
  }

  .locale_switcher.mobile {
    width: 100%;
    display: flex;
  }

  .locale_switcher.mobile .locale_switcher-link {
    flex: 1;
  }

  .nav-menu_locale {
    padding: 0 var(--spacing--space-md);
  }
}
.master-footer {
  grid-row-gap: var(--spacing--space-sm);
}

.card_cta-content {
  display: grid;
  gap: var(--spacing--space-2xs);
}

.card_cta-content .tone-medium {
  padding-top: 20px;
}

.card_cta .cta_tertiary {
  margin-top: var(--spacing--space-sm);
}

@media screen and (max-width: 991px) {
  .card_cta {
    height: auto;
    min-height: 15rem;
  }
}

/* Direct font-family override — CSS variable chain faalt op iOS Safari
   doordat Reforma dezelfde variabelen herdeclareert in media queries.
   font-family direct op elementen is de enige betrouwbare fix. */
h1,
h2,
h3,
h4,
h5,
h6,
.heading-style-h0,
.heading-style-h1,
.heading-style-h2,
.heading-style-h3,
.heading-style-h4,
.heading-style-h5,
.heading-style-h6,
.heading-alternative {
  font-family: "Inter VF", "Inter", Arial, sans-serif !important;
  font-weight: 525;
}

body,
p,
li,
td,
th,
dd,
dt,
blockquote,
.text-style-b1,
.text-style-b2,
.text-style-b3 {
  font-family: "Inter VF", "Inter", Arial, sans-serif !important;
}

a.button,
.button,
.w-button,
[class*="button-style"] {
  font-family: "BDO Grotesk VF", "BDO Grotesk", Arial, sans-serif !important;
}

.label,
.text-style-label,
[class*="label-style"] {
  font-family: "Roboto Mono VF", "Roboto Mono", monospace !important;
}

/* Reforma hard-codes "Raveo Display" op `.cta_sales` en `.text-sales-card`
   (sales/explore widgets uit template docs — niet in prod pagina's, maar
   overschrijven voor consistentie). */
.cta_sales,
.text-sales-card {
  font-family: var(--font-body);
}

/* Nav CTA desktop: video background behind existing content */
.nav-cta_desktop {
  position: relative;
  overflow: hidden;
}
.nav-cta_desktop > .nav-cta_top-tile,
.nav-cta_desktop > .cta_primary {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Client logo marquee — img sizing
   Original Reforma used inline SVGs; we use <img> tags.
   ============================================================ */
.marquee-logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
  opacity: 0.5;
  filter: grayscale(100%);
  transition:
    opacity 0.3s ease,
    filter 0.3s ease;
}
.marquee-logo img:hover {
  opacity: 0.8;
  filter: grayscale(0%);
}

/* ============================================================
   Responsive font overrides — Reforma re-declares its font
   variables inside media queries, overriding our :root swap.
   We must repeat the overrides at each breakpoint.
   ============================================================ */
@media screen and (max-width: 991px) {
  :root {
    --_🔠-typography---font--heading: var(--font-primary);
    --_🔠-typography---font--heading-alternative: var(--font-primary);
    --_🔠-typography---font--body: var(--font-primary);
    --_🔠-typography---font--button: var(--font-body);
    --_🔠-typography---font--label: var(--font-mono);
  }
}
@media screen and (max-width: 767px) {
  :root {
    --_🔠-typography---font--heading: var(--font-primary);
    --_🔠-typography---font--heading-alternative: var(--font-primary);
    --_🔠-typography---font--body: var(--font-primary);
    --_🔠-typography---font--button: var(--font-body);
    --_🔠-typography---font--label: var(--font-mono);
  }
}
@media screen and (max-width: 479px) {
  :root {
    --_🔠-typography---font--heading: var(--font-primary);
    --_🔠-typography---font--heading-alternative: var(--font-primary);
    --_🔠-typography---font--body: var(--font-primary);
    --_🔠-typography---font--button: var(--font-body);
    --_🔠-typography---font--label: var(--font-mono);
  }
}

/* ============================================================
   Nav blur overlay fix — Reforma IX2 open/close animations
   can leave .nav_bg stuck at partial opacity on fast hover.
   CSS :has() ties blur state directly to dropdown open class,
   overriding any stale IX2 inline styles.
   ============================================================ */
.nav_bg {
  transition: opacity 0.25s ease !important;
}
.master_navigation:not(:has(.w-dropdown-list.w--open)) > .nav_bg {
  opacity: 0 !important;
}

/* ============================================================
   "Meer" dropdown text/panel sync — on a fast hover in-out the
   IX2 timeline that fades the menu text IN can fire late, after
   the white panel has started fading OUT, so the text briefly
   appears with no background ("hanging" text). Force the text
   hidden whenever the dropdown isn't actually open, overriding
   the stray IX2 inline opacity. No transition here: IX2 already
   fades the text out fast (~70ms) on a normal close, so adding a
   transition only makes the text lag behind the panel.
   ============================================================ */
.master_navigation:not(:has(.w-dropdown-list.w--open)) .dropdown_inner {
  opacity: 0 !important;
}

/* ============================================================
   Over Ons — team-foto tussen bodyParagraphs en stats.
   Default Reforma gap (--space-xxl = 10rem) maakt een hol
   gat met onze kortere NL-tekst, dus halveer naar --lg
   en plaats een foto in de ademruimte. Foto matcht breedte
   van .about_text-halves zodat de kolom uitlijnt.
   ============================================================ */
.master_about-c-features {
  grid-row-gap: var(--spacing--space-lg);
  gap: var(--spacing--space-lg);
}
.about_team-image {
  max-width: var(--width--8-columns);
  width: 100%;
  margin: 0 auto;
  border-radius: var(--_🔘-radius---general--large);
  overflow: hidden;
}
.about_team-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Over Ons — IX2 reveal fallback. Body paragraphs, stats, kern-
   waarden en teamcards starten met inline opacity:0 en wachten
   op een scroll trigger. Als die niet vuurt (mobile, snelle
   scroll, headless) blijven hele secties leeg → grote witte/
   zwarte vlakken tussen content. Forceer altijd zichtbaar;
   we verliezen alleen de subtiele fade-in slide.
   ============================================================ */
.section_about-features [style*="opacity: 0"],
.section_about-features [style*="opacity:0"],
.section_about-listing [style*="opacity: 0"],
.section_about-listing [style*="opacity:0"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Cookie notice: hide once the visitor has dismissed it (set by winq-cookie.js) */
html.cookie-ack .master_cookies {
  display: none !important;
}

/* ============================================================
   Service detail (diensten) — image-rich editorial layout.
   Feature image band, two-column intro, selected-work gallery.
   New sections use [data-winq-reveal] (gsap.from) so they render
   visible without inline opacity:0 — no IX2 blank-section risk.
   ============================================================ */
.section_service-feature {
  padding-top: 0.5rem;
}
.dienst-feature {
  margin: 0;
}
.dienst-feature_img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  object-fit: cover;
}

/* Two-column editorial intro (headline left, body right) */
.dienst-intro.service_tile {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.dienst-intro_head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dienst-intro_body {
  max-width: 65ch;
}
@media (max-width: 991px) {
  .dienst-intro.service_tile {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* Selected-work gallery — masonry columns keep natural aspect (no crop) */
.section_service-work {
  padding-top: clamp(2rem, 5vw, 4rem);
}
.dienst-work_head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.dienst-work_grid {
  columns: 3 300px;
  column-gap: 1.25rem;
}
.dienst-work_grid.is-2 {
  columns: 2;
}
@media (max-width: 600px) {
  .dienst-work_grid {
    columns: 1 !important;
  }
}
.dienst-work_item {
  break-inside: avoid;
  margin: 0 0 1.25rem;
}
.dienst-work_media {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-off-bg);
}
.dienst-work_img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.dienst-work_item:hover .dienst-work_img {
  transform: scale(1.03);
}
.dienst-work_cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.1rem 0;
}
.dienst-work_title {
  font-weight: 500;
  letter-spacing: -0.02em;
}
.dienst-work_meta {
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ============================================================
   MOBILE OPTIMIZATION PASS (2026-05-31)
   De Reforma layout is mobiel structureel gezond (geen overflow,
   single-column, 16px gutters). Dit blok pakt de verfijningen aan
   die de mobiele ervaring "top" maken: leesbare body-tekst,
   iOS-zoom-proof formulieren, fatsoenlijke tap-targets en een
   leesbare video-CTA. Bewust geen !important op `p` (dat zou de
   12px labels/cookie-tekst opblazen) — alleen waar Webflow's eigen
   specificiteit of de iOS-zoom-bug het echt vereist.
   ============================================================ */

/* --- 1. Body-tekst terug naar 16px op mobiel ---
   Reforma laat body/`.text-size-regular`/`.text-size-medium` op
   ≤991px naar 14px/20 zakken — kleiner dan desktop (16px) en onder
   de leesbaarheidsondergrens. Terug naar 16px/1.5 (== desktop, dus
   nooit groter dan desktop). `.text-size-small` (12px labels) en
   `.label-large` houden hun eigen, hogere specificiteit → ongemoeid. */
@media (max-width: 991px) {
  p,
  .text-size-regular,
  .text-size-medium,
  .text-rich-text {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Intro/quote-tekst boven body houden voor hiërarchie */
  .text-size-large {
    font-size: 18px;
    line-height: 1.45;
  }
}

/* --- 2. Formulieren: iOS focus-zoom killen + tap-hoogte ---
   iOS Safari zoomt automatisch in op elk veld met font-size < 16px.
   16px is hier een harde eis (geen enkel veld mag kleiner), dus
   !important is veilig en gegarandeerd. Velden ook ≥44px hoog. */
@media (max-width: 991px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(
      [type="button"]
    ),
  textarea,
  select,
  .w-input,
  .w-select {
    font-size: 16px !important;
  }

  input.w-input,
  select.w-select {
    min-height: 44px;
  }

  /* Webflow custom checkbox van 13px → 20px (comfortabeler aantikken;
     het label is ook klikbaar via .w-checkbox) */
  .w-checkbox-input--inputType-custom,
  .w-checkbox-input {
    width: 20px !important;
    height: 20px !important;
  }
}

/* --- 3. Tap-targets ≥44px (WCAG 2.5.5) ---
   Groter maken kan nooit iets breken, dus !important waar Webflow's
   nav-specificiteit anders zou winnen. */
@media (max-width: 991px) {
  /* Hamburger: 38×30 → 44×44, icoon gecentreerd */
  .menu-button {
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Nav-CTA pill ("Neem contact op"): 28px → comfortabele hoogte */
  .cta-small {
    min-height: 40px;
  }

  /* Inline tekst-links met pijl ("Bekijk diensten" etc.): 20px →
     44px tap-zone. Ze staan onderaan kaarten/secties, dus de extra
     verticale ruimte valt netjes weg. */
  .cta_tertiary {
    min-height: 44px;
  }

  /* Footer-links: 24px (AA-minimum) → ruimer voor de duim */
  .link_footer {
    padding-block: 8px;
  }
}

/* --- 4. Video-CTA leesbaarheid (alle schermen) ---
   De laatste CTA ("Klaar om de vanzelfsprekende keuze te worden?")
   zet near-white tekst (#F8F7F3) direct op een achtergrondvideo
   zonder scrim → "keuze" valt weg op lichte frames. Donkere gradient
   tussen video (z-index:-100) en de statische .content_cta. z-index:-1
   houdt 'm boven de video maar onder de tekst. Sluit aan op het
   donkere-CTA-blok idiom uit DESIGN.md. */
.video_cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.12) 0%,
    rgba(10, 10, 10, 0.5) 100%
  );
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
}

/* ============================================================
   Cases listing — uniforme 3-up onderbouw
   ------------------------------------------------------------
   De /cases/ listing houdt rij 1 als "featured" 2-up (native
   .grid_cases flex-row, ongewijzigd). Alle overige cases vallen
   in één .grid_cases.cases-rest blok dat 3-up wrapt, zodat elke
   kaart even breed is en een losse laatste kaart op 1/3 blijft
   (i.p.v. de oude 4-up-gepropte rij). Reveal via [data-winq-reveal]
   (winq-reveal.js) i.p.v. de brittle IX2 data-w-id timelines.
   ============================================================ */
.section_body-cases .grid_cases.cases-rest {
  flex-wrap: wrap;
}
.section_body-cases .grid_cases.cases-rest > .item_cases {
  flex: 0 0 calc((100% - 2 * var(--layout-grid--gutter)) / 3);
  max-width: calc((100% - 2 * var(--layout-grid--gutter)) / 3);
  width: auto;
}
/* De native :hover { width:150% } grow zou in een wrap-rij de
   layout laten verspringen; in dit blok vaste breedte houden. */
.section_body-cases .grid_cases.cases-rest > .item_cases:hover {
  width: auto;
}
/* Tablet: 2-up */
@media screen and (max-width: 991px) {
  .section_body-cases .grid_cases.cases-rest > .item_cases {
    flex-basis: calc((100% - var(--layout-grid--gutter)) / 2);
    max-width: calc((100% - var(--layout-grid--gutter)) / 2);
  }
}
/* Mobiel (≤479px): native .grid_cases wordt een kolom; reset de
   basis zodat kaarten netjes full-width stacken. */
@media screen and (max-width: 479px) {
  .section_body-cases .grid_cases.cases-rest > .item_cases {
    flex: 0 1 auto;
    max-width: none;
    width: 100%;
  }
}