@charset "UTF-8";

/* ============================================================================
   OneWayOfWork® — stylesheet
   ----------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography helpers
   5.  Buttons
   6.  Header & navigation
   7.  Hero
   8.  Trust bar
   9.  Problem grid
   10. Growth band
   11. Approach steps
   12. About / origin
   13. Outcomes grid
   14. CTA band
   15. Footer
   16. Motion
   ========================================================================== */

/* ============================================================================
   1. Tokens
   ========================================================================== */
:root{
  /* — Brand ——————————————————————————————— */
  --blue:        #1F56D8;
  --blue-hover:  #1746B4;
  --blue-deep:   #12327E;
  --blue-soft:   #EDF2FE;
  --blue-line:   #D7E2FB;

  /* — Groen ————————————————————————————————
     Alleen voor OWOW365. Dat is een eigen product en mag zich van de rest
     onderscheiden; overal elders blijft merkblauw de enige accentkleur.
     --green draagt witte tekst op 5,4:1 — ruim AA. */
  --green:       #0F7A4A;
  --green-hover: #0C6540;
  --green-deep:  #08492E;
  --green-soft:  #E9F6EF;
  --green-line:  #C3E5D5;

  /* — Neutrals ————————————————————————————— */
  --ink:         #0B0B0B;   /* headings                       */
  --ink-2:       #344054;   /* strong body                    */
  --muted:       #667085;   /* body — 4.95:1 on white (AA)    */
  --line:        #E8EBF1;
  /* Formulierranden hebben een eigen, donkerdere lijn nodig: --line haalt tegen
     wit ~1.3:1 en WCAG eist 3:1 voor de rand van een invoerveld. */
  --field-line:  #8A94A6;
  --surface:     #F7F9FC;
  --white:       #FFFFFF;

  /* — Radii ———————————————————————————————— */
  --r-btn:       6px;
  --r-card:      14px;
  --r-lg:        20px;
  --r-pill:      999px;

  /* — Spacing scale ———————————————————————— */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* Vertical rhythm between sections */
  --section-y:   clamp(64px, 8vw, 120px);

  /* — Grid ————————————————————————————————— */
  --container:   1320px;
  --gutter:      clamp(20px, 4vw, 56px);
  --header-h:    80px;      /* fallback — JS measures the real height */
  /* Distance from content edge to viewport edge — powers full-bleed elements */
  --edge:        max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));

  /* — Elevation ———————————————————————————— */
  --shadow-sm:   0 1px 2px rgba(16,24,40,.06);
  --shadow-card: 0 2px 4px rgba(16,24,40,.03), 0 12px 32px -8px rgba(16,24,40,.12);
  --shadow-lift: 0 4px 8px rgba(16,24,40,.04), 0 20px 44px -10px rgba(31,86,216,.20);
  --shadow-photo:0 24px 60px -24px rgba(16,24,40,.28);

  /* — Motion ———————————————————————————————
     Duur drukt afstand en gevolg uit:
       feedback  100-150ms  directe bevestiging van een handeling
       state     150-300ms  gewone statuswissel
       layout    300-500ms  overlay, layout- of viewwissel
       focal     500-800ms  één bewust geregisseerde entree
     Afsluiten mag sneller dan openen. --ease-out is een natuurlijke
     afremming voor zelfverzekerde aankomsten; geen bounce of elastic. */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dur-feedback:.14s;
  --dur-state:   .24s;
  --dur-layout:  .4s;
  --dur-focal:   .7s;
  --dur:         var(--dur-state);   /* alias voor bestaande regels */
}

/* ============================================================================
   2. Reset & base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;   /* keeps anchor targets clear of the sticky header */
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
/* figure/blockquote/figcaption dragen in browsers een UA-margin van 1em 40px —
   die sprong anders ongemerkt door in elke kaart die deze elementen gebruikt. */
h1,h2,h3,h4,p,figure,blockquote,figcaption{ margin:0; }

/* [hidden] komt uit de UA-stylesheet met specificiteit 0 en wordt dus verslagen
   door elke eigen display-regel. Zonder deze regel blijft een element met het
   hidden-attribuut gewoon zichtbaar zodra het ergens display:grid/flex krijgt. */
[hidden]{ display:none !important; }

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:var(--r-btn);
}

.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Keyboard-only skip link */
.skip-link{
  position:absolute; top:-100px; left:var(--gutter);
  z-index:200;
  padding:12px 20px;
  background:var(--blue); color:var(--white);
  border-radius:0 0 var(--r-btn) var(--r-btn);
  font-size:15px; font-weight:500;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{ top:0; }

/* ============================================================================
   3. Layout primitives
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:var(--section-y); }

/* Card grids.
   .grid--3   — 6 items, a plain 3-column grid fills both rows exactly.
   .grid--3-2 — 5 items. Flexbox rather than grid so the short last row centres
                itself (3 on top, 2 centred below) instead of leaving a hole. */
.grid{
  --gap:clamp(16px, 1.8vw, 24px);
  gap:var(--gap);
}

.grid--3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.grid--3-2{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.grid--3-2 > li{
  display:flex;                                        /* let the card fill it */
  flex:0 1 calc((100% - 2 * var(--gap)) / 3);
}
.grid--3-2 > li > *{ width:100%; }

@media (max-width:1024px){
  .grid--3-2 > li{ flex-basis:calc((100% - var(--gap)) / 2); }
}
@media (max-width:900px){
  .grid--3{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:600px){
  .grid--3{ grid-template-columns:1fr; }
  .grid--3-2 > li{ flex-basis:100%; }
}

/* ============================================================================
   4. Typography helpers
   ========================================================================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 12px;
  background:var(--blue-soft);
  border:1px solid var(--blue-line);
  border-radius:var(--r-pill);
  font-size:12.5px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue);
}
.eyebrow::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 3px rgba(31,86,216,.16);
}

.section-head{
  max-width:64ch;
  margin-bottom:clamp(36px, 4.5vw, 64px);
}
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }

.section-title{
  margin-top:clamp(16px, 2vw, 24px);
  font-size:clamp(1.75rem, 2.9vw, 2.625rem);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.015em;
  text-wrap:balance;
}

.section-lead{
  margin-top:clamp(12px, 1.5vw, 18px);
  max-width:62ch;
  font-size:clamp(1rem, 1.1vw, 1.0625rem);
  line-height:1.7;
  color:var(--muted);
}
.section-head--center .section-lead{ margin-inline:auto; }

/* Reusable icon tile */
.icon-tile{
  display:grid; place-items:center;
  flex-shrink:0;
  width:44px; height:44px;
  border-radius:12px;
  background:var(--blue-soft);
  color:var(--blue);
}
.icon-tile svg{ width:22px; height:22px; }

/* ============================================================================
   5. Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 24px;
  border:1px solid transparent;
  border-radius:var(--r-btn);
  font-size:15px; font-weight:500; line-height:1;
  cursor:pointer;
  transition:background-color var(--dur-feedback) var(--ease),
             border-color var(--dur-feedback) var(--ease),
             color var(--dur-feedback) var(--ease),
             box-shadow var(--dur-feedback) var(--ease),
             transform var(--dur-feedback) var(--ease);
}
.btn:active{ transform:translateY(0); }

.btn--primary{
  background:var(--blue); color:var(--white);
  box-shadow:0 1px 2px rgba(16,24,40,.10), 0 8px 20px -8px rgba(31,86,216,.55);
}
.btn--primary:hover{
  background:var(--blue-hover);
  box-shadow:0 1px 2px rgba(16,24,40,.10), 0 12px 26px -8px rgba(31,86,216,.65);
  transform:translateY(-1px);
}

.btn--ghost{
  background:var(--white); color:var(--blue);
  border-color:var(--blue-line);
  box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{ background:var(--blue-soft); border-color:var(--blue); }

/* On the dark CTA band */
.btn--light{ background:var(--white); color:var(--blue); }
.btn--light:hover{ background:var(--blue-soft); transform:translateY(-1px); }

/* Op het groene OWOW365-vlak. Eigen variant in plaats van .btn--light met een
   kleuroverride erop: twee klassen die om dezelfde eigenschap vechten is vragen
   om verrassingen zodra de volgorde in dit bestand verschuift. */
.btn--on-green{ background:var(--white); color:var(--green); }
.btn--on-green:hover{ background:var(--green-soft); color:var(--green-hover); transform:translateY(-1px); }

.btn--outline-light{
  background:transparent; color:var(--white);
  border-color:rgba(255,255,255,.45);
}
.btn--outline-light:hover{ background:rgba(255,255,255,.12); border-color:var(--white); }

.btn--sm{ padding:11px 18px; font-size:14px; }

.btn__arrow{ width:6px; height:10px; flex-shrink:0; transition:transform var(--dur) var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ============================================================================
   6. Header & navigation
   ========================================================================== */
/* Pinned to the top so the hero photo can run behind it. --header-h is measured
   in JS and written back onto :root; the value here is the pre-JS fallback. */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding-block:clamp(14px, 1.6vw, 20px);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
/* Toggled from JS as soon as the page is scrolled */
.site-header.is-stuck{
  background:var(--white);
  border-bottom-color:var(--line);
  box-shadow:0 1px 3px rgba(16,24,40,.06);
}

.site-header__inner{
  display:flex; align-items:center;
  gap:clamp(18px, 3vw, 44px);
}

.logo{ display:inline-flex; align-items:center; flex-shrink:0; }
.logo picture{ display:block; }
.logo img{
  display:block;
  height:clamp(24px, 2vw, 28px);
  width:auto;
}

.nav{
  display:flex; align-items:center;
  gap:clamp(12px, 2vw, 30px);
  margin-inline:auto;
}
.nav__link{
  display:inline-flex; align-items:center; gap:5px;
  padding-block:6px;
  font-size:15px;
  color:var(--ink-2);
  white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.nav__link:hover{ color:var(--blue); }
.nav__link[aria-current="page"]{ color:var(--blue); font-weight:500; }
.nav__chevron{ width:9px; height:6px; opacity:.5; }

.header-cta{ flex-shrink:0; }

/* — Mobile toggle ——————————————————————————— */
.nav-toggle{
  display:none;
  width:44px; height:44px;   /* 44px blijft de minimale aanraakmaat */
  align-items:center; justify-content:center;
  margin-left:auto;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.nav-toggle__bars{
  display:block; position:relative;
  width:18px; height:1.5px;
  background:var(--ink);
  transition:background-color var(--dur) var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:""; position:absolute; left:0;
  width:18px; height:1.5px; background:var(--ink);
  transition:transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle__bars::before{ top:-6px; }
.nav-toggle__bars::after{  top:6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{  top:0; transform:rotate(-45deg); }

/* — Mobile drawer ——————————————————————————— */
.mobile-nav{
  display:none;
  position:fixed; inset:auto 0 0 0; top:0;
  z-index:99;
  padding:96px var(--gutter) 40px;
  background:var(--white);
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             visibility var(--dur) var(--ease);
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:none; }

.mobile-nav__list{ display:grid; gap:2px; }
.mobile-nav__link{
  display:block;
  padding:14px 4px;
  border-bottom:1px solid var(--line);
  font-size:19px; font-weight:500;
}
.mobile-nav__link:hover{ color:var(--blue); }
.mobile-nav .btn{ width:100%; margin-top:28px; }

/* ============================================================================
   7. Hero
   ========================================================================== */
.hero{
  position:relative;
  isolation:isolate;   /* keeps the z-index:-1 backdrop inside the section */
  padding-top:calc(var(--header-h) + clamp(44px, 5.5vw, 84px));
  padding-bottom:clamp(72px, 8vw, 118px);
  overflow:hidden;
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  align-items:center;
  gap:clamp(28px, 3.5vw, 56px);
}

/* — Backdrop —————————————————————————————————
   Full-height panel pinned to the right edge of the viewport. It sits behind
   the header and dissolves into the page instead of ending on a hard edge:
   white gradients on the left, top and bottom do the blending, so no mask
   compositing is needed and it degrades cleanly everywhere. */
.hero__media{
  position:absolute;
  inset:0 0 0 auto;
  z-index:-1;
  width:min(66%, 1120px);
  margin:0;
  pointer-events:none;
}
.hero__media picture{ display:block; width:100%; height:100%; }
.hero__img{
  width:100%; height:100%;
  max-width:none;
  object-fit:cover;
  object-position:right center;   /* anchor on the people, not the empty half */
}
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,  #fff 0%, rgba(255,255,255,.97) 18%,
                            rgba(255,255,255,.70) 34%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 18%),
    linear-gradient(0deg,   #fff 0%, rgba(255,255,255,0) 24%);
}

.hero__copy{ max-width:620px; }
.hero__copy .eyebrow{ margin-bottom:clamp(18px, 2vw, 26px); }

.hero__title{
  font-size:clamp(2.1rem, 3.6vw, 3.25rem);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.hero__title em{ font-style:normal; color:var(--blue); }

.hero__lead{
  margin-top:clamp(18px, 2.2vw, 26px);
  max-width:46ch;
  font-size:clamp(1rem, 1.15vw, 1.0625rem);
  line-height:1.7;
  color:var(--muted);
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:clamp(26px, 3vw, 40px);
}

.hero__cards{
  display:grid;
  gap:clamp(10px, 1.1vw, 14px);
  justify-self:start;
  width:min(300px, 100%);
  /* pulled over the seam where the photo fades into the page */
  margin-inline-start:clamp(-124px, -8vw, -28px);
}

.f-card{
  display:flex; align-items:center; gap:14px;
  padding:15px 18px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  transition:transform var(--dur-feedback) var(--ease),
             box-shadow var(--dur-feedback) var(--ease);
}
.f-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }

/* — Focal moment ——————————————————————————
   Het enige geregisseerde moment op de pagina: de drie kaarten schuiven van
   links binnen en komen tot stilstand op hun plek. Van links, omdat ze uit de
   kop vandaan komen die het argument maakt; van boven naar beneden gestaffeld,
   zodat je ze leest in de volgorde waarin ze staan.
   Eén keer bij het laden. Nergens anders op de pagina beweegt iets uit zichzelf. */
@media (prefers-reduced-motion:no-preference){
  /* Strikt één voor één: de stap tussen de kaarten (.44s) is groter dan de duur
     van één kaart (.42s), dus elke kaart staat stil voordat de volgende vertrekt.
     Overlappen ze, dan lijken ze tegelijk te komen en verdwijnt de volgorde. */
  /* .f-card IS de <li>, geen kind ervan — nth-child hoort dus op .f-card zelf. */
  .js .hero__cards .f-card{ animation:kaart-schuift-in .42s var(--ease-out) backwards; }
  .js .hero__cards .f-card:nth-child(1){ animation-delay:.10s; }
  .js .hero__cards .f-card:nth-child(2){ animation-delay:.54s; }
  .js .hero__cards .f-card:nth-child(3){ animation-delay:.98s; }
}
@keyframes kaart-schuift-in{
  from{ opacity:0; transform:translateX(-34px); }
  to  { opacity:1; transform:none; }
}

.f-card .icon-tile{ width:38px; height:38px; border-radius:10px; }
.f-card .icon-tile svg{ width:20px; height:20px; }

.f-card__text{
  font-size:14px; font-weight:500;
  line-height:1.4;
  text-wrap:balance;
}

/* ============================================================================
   8. Trust bar
   ========================================================================== */
.trust{
  background:var(--blue);
  color:var(--white);
  padding-block:clamp(30px, 3.4vw, 46px);
  overflow:hidden;
}

.trust__inner{
  display:grid;
  /* 31rem houdt de langste regel (464px) heel; smaller en de zin breekt
     over drie regels in plaats van de bedoelde twee. */
  grid-template-columns:minmax(0, 31rem) minmax(0, 1fr);
  align-items:center;
  gap:clamp(24px, 3vw, 52px);
}

.trust__text{
  font-size:clamp(.9375rem, 1.05vw, 1rem);
  font-weight:500;
  line-height:1.6;
}

/* ---- Logo-marquee -------------------------------------------------------
   Twee identieke groepen naast elkaar; de track is 200% breed en schuift
   -50% op, waardoor de tweede groep precies overneemt waar de eerste begon.
   Randen vervagen via een mask zodat logo's niet hard afkappen.            */
.marquee{
  position:relative;
  overflow:hidden;
  margin-right:calc(-1 * var(--edge));   /* loopt door tot de schermrand */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 88%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 88%, transparent 100%);
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee__track.is-paused{ animation-play-state:paused; }

.marquee__group{
  display:flex;
  align-items:center;
  gap:clamp(40px, 5vw, 76px);
  padding-right:clamp(40px, 5vw, 76px);
}
.marquee__group li{ flex:0 0 auto; }   /* brede logo's niet laten samendrukken */
.marquee__group img{
  --logo-h:clamp(22px, 2vw, 28px);
  /* --logo-ink = welk deel van de viewBox daadwerkelijk inkt is. Delen door die
     factor maakt de ZICHTBARE hoogte overal gelijk; zonder correctie oogt een
     logo met ingebakken witruimte kleiner dan de rest.
     Let op: niet --ink noemen, dat is al het kleurtoken op :root. */
  --logo-ink:1;
  height:calc(var(--logo-h) / var(--logo-ink));
  width:auto;                          /* breedte volgt de verhouding */
  opacity:.9;
  transition:opacity var(--dur) var(--ease);
}
/* gemeten inktverhoudingen per bestand */
.marquee__group img[src*="blijf"]      { --logo-ink:.845; }
.marquee__group img[src*="catalyze"]   { --logo-ink:.933; }
.marquee__group img[src*="hypersolid"] { --logo-ink:.993; }

.marquee__group img:hover{ opacity:1; }

@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ============================================================================
   9. Problem grid
   ========================================================================== */
.problem-card{
  display:flex; flex-direction:column;
  height:100%;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  transition:transform var(--dur-feedback) var(--ease),
             box-shadow var(--dur-feedback) var(--ease),
             border-color var(--dur-feedback) var(--ease);
}
.problem-card:hover{
  transform:translateY(-4px);
  border-color:var(--blue-line);
  box-shadow:var(--shadow-card);
}

/* Photo with the icon badge straddling the photo/body edge */
.problem-card__media{ position:relative; }
.problem-card__media picture{ display:block; }
.problem-card__media img{
  width:100%;
  height:auto;          /* beats the height="" presentational hint */
  aspect-ratio:3 / 2;
  object-fit:cover;
}
.problem-card__badge{
  position:absolute;
  left:clamp(16px, 1.6vw, 20px);
  bottom:-21px;
  display:grid; place-items:center;
  width:42px; height:42px;
  border-radius:50%;
  background:var(--white);
  color:var(--blue);
  box-shadow:0 2px 8px rgba(16,24,40,.14);
}
.problem-card__badge svg{ width:21px; height:21px; }

.problem-card__body{
  display:flex; flex-direction:column; gap:10px;
  padding:34px clamp(18px, 1.8vw, 22px) clamp(20px, 2vw, 26px);
}
.problem-card__title{
  font-size:1.0625rem; font-weight:600;
  line-height:1.35;
  text-wrap:balance;
  /* Dutch compounds ("Verantwoordelijkheden") outrun a 5-column card */
  overflow-wrap:break-word;
  hyphens:auto;
}
.problem-card__text{
  font-size:.9375rem;
  line-height:1.65;
  color:var(--muted);
}

/* Closing statement under the grid */
.callout{
  display:flex; align-items:center; gap:clamp(14px, 2vw, 22px);
  margin-top:clamp(28px, 3.2vw, 44px);
  padding:clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px);
  background:var(--blue-soft);
  border:1px solid var(--blue-line);
  border-radius:var(--r-card);
}
.callout .icon-tile{ background:var(--white); }
.callout__text{
  font-size:clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight:500;
  line-height:1.45;
  color:var(--blue-deep);
  text-wrap:balance;
}

/* ============================================================================
   10. Growth band
   ========================================================================== */
/* ============================================================================
   10a. Image band — full-bleed photo under a blue scrim, white typography.
        The scrim keeps text at AA contrast whatever the photo does underneath.
   ========================================================================== */
.band{
  position:relative;
  isolation:isolate;
  color:var(--white);
}
.band__bg{
  position:absolute; inset:0;
  z-index:-1;
  display:block;
}
.band__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.band__bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(9,26,71,.92) 0%, rgba(12,38,102,.82) 46%, rgba(18,50,126,.62) 100%);
}
.band .section-lead{ color:rgba(255,255,255,.82); }

/* Groene variant, voor OWOW365. Diepere waarde dan de lichte tint erboven,
   zodat de overgang een stap omlaag is en geen groen-op-groen vlak. */
.band--groen{ padding-block:clamp(64px, 7vw, 104px); }
.band__actions{ margin-top:clamp(24px, 3vw, 34px); }
.band--groen .band__bg::after{
  background:
    linear-gradient(100deg, rgba(6,52,33,.94) 0%, rgba(8,73,46,.88) 46%, rgba(10,88,55,.78) 100%);
}
.band__panel{ max-width:min(680px, 100%); }
/* "OneWayOfWork" is één onbreekbaar woord van 12 tekens; op de standaardmaat
   valt de kop net over twee regels. Iets kleiner houdt hem op één regel. */
.band .section-title{ font-size:clamp(1.75rem, 2.6vw, 2.375rem); }

.eyebrow--on-dark{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.28);
  color:var(--white);
}
.eyebrow--on-dark::before{
  background:var(--white);
  box-shadow:0 0 0 3px rgba(255,255,255,.22);
}

/* ============================================================================
   10b. Showcase — full-bleed photo shown (nearly) uncovered. The copy sits on
        a soft white wash: horizontal on desktop, from the top on phones, so it
        never lands on the part of the image that carries the illustration.
   ========================================================================== */
.showcase{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:clamp(540px, 56vw, 740px);
  padding-block:clamp(56px, 6vw, 88px);
  overflow:hidden;
}
.showcase__bg{
  position:absolute; inset:0;
  z-index:-1;
  display:block;
}
.showcase__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
/* De wash staat er voor de leesbaarheid van het tekstblok, dat op elke breedte
   op ~48% van het scherm eindigt. Daarom is hij op 52% volledig weg: de rechter
   helft van de foto blijft onaangeraakt. */
.showcase__bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,
              rgba(255,255,255,.95) 0%,
              rgba(255,255,255,.92) 30%,
              rgba(255,255,255,.68) 42%,
              rgba(255,255,255,0)   52%);
}
.showcase > .container{ width:100%; }
.showcase__panel{ max-width:min(560px, 54%); }

.growth__note{
  margin-top:clamp(18px, 2vw, 26px);
  padding-left:18px;
  border-left:3px solid var(--blue);
  font-size:clamp(1.0625rem, 1.3vw, 1.1875rem);
  font-weight:500;
  line-height:1.5;
  color:var(--blue-deep);
}

.check-list{
  display:grid;
  gap:clamp(10px, 1.1vw, 14px);
  margin-top:clamp(24px, 2.8vw, 36px);
}
.check-list li{
  display:flex; align-items:center; gap:13px;
  padding:clamp(13px, 1.4vw, 16px) clamp(16px, 1.8vw, 20px);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(31,86,216,.16);
  border-radius:var(--r-card);
  font-size:.9375rem; font-weight:500;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.check-list__mark{
  display:grid; place-items:center;
  flex-shrink:0;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--blue);
  color:var(--white);
}
.check-list__mark svg{ width:12px; height:9px; }

/* ============================================================================
   11. Approach steps
   ========================================================================== */
.steps{
  --steps-gap:clamp(20px, 2.4vw, 32px);
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:var(--steps-gap);
}

.step{ position:relative; }
/* Connector drawn per step so it always stops exactly at the last number,
   whatever the column width. Hidden once the steps stack. */
.step::before{
  content:"";
  position:absolute;
  top:22px; left:56px;
  right:calc(-1 * var(--steps-gap));
  height:2px;
  background:var(--blue-line);
}
.step:last-child::before{ display:none; }

.step__num{
  position:relative;
  display:grid; place-items:center;
  width:46px; height:46px;
  margin-bottom:20px;
  border-radius:50%;
  background:var(--blue);
  color:var(--white);
  font-size:.9375rem; font-weight:600;
  box-shadow:0 0 0 6px var(--white), 0 6px 16px -6px rgba(31,86,216,.5);
}
.step__title{
  font-size:1.0625rem; font-weight:600;
  line-height:1.35;
  text-wrap:balance;
}
.step__text{
  margin-top:8px;
  font-size:.9375rem;
  line-height:1.65;
  color:var(--muted);
}

/* ============================================================================
   12. About / origin
   ========================================================================== */
/* Wide enough for "Waarom OneWayOfWork bestaat" to hold one line, and centred
   so the quote reads as part of the block rather than floating beside it. */
.about__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  align-items:center;
  gap:clamp(32px, 4vw, 64px);
}
.about__body{
  display:grid;
  gap:clamp(12px, 1.4vw, 16px);
  max-width:46ch;              /* comfortable measure, not the full column */
}
.about__body p{
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.7;
  color:rgba(255,255,255,.80);
}
.about__body p:first-child{ color:rgba(255,255,255,.94); }

/* Quote + bewijsblok samen in de rechterkolom. */
.about__aside{ display:grid; gap:clamp(20px, 2.4vw, 28px); }

.about__note{
  padding-left:18px;
  border-left:2px solid rgba(255,255,255,.28);
}
.about__note-title{
  margin-bottom:8px;
  font-size:1rem; font-weight:600;
  line-height:1.4;
  color:var(--white);
}
/* .94 bestaat al elders in dit bestand; geen nieuwe alpha introduceren voor
   een probleem dat een bestaande waarde beter oplost. De scrim is hier op z'n
   zwakst, dus ruim boven AA blijven. */
.about__note p{
  font-size:.9375rem;
  line-height:1.65;
  color:rgba(255,255,255,.94);
}
.about__note p + p{ margin-top:10px; }

/* Glass card so the photo stays readable behind the quote */
.quote{
  padding:clamp(24px, 2.3vw, 32px);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-lg);
  color:var(--white);
  box-shadow:0 24px 60px -28px rgba(4,16,48,.6);
}
.quote__mark{
  width:26px; height:20px;
  margin-bottom:14px;
  color:rgba(255,255,255,.45);
}
.quote__text{
  font-size:clamp(1.0625rem, 1.45vw, 1.3125rem);
  font-weight:500;
  line-height:1.42;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.quote__cite{
  display:block;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.20);
  font-size:.8125rem; font-style:normal;
  line-height:1.5;
  color:rgba(255,255,255,.72);
}

/* ============================================================================
   13. Outcomes grid
   ========================================================================== */
.outcome{
  display:flex; flex-direction:column; gap:14px;
  padding:clamp(24px, 2.4vw, 32px);
  height:100%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  transition:transform var(--dur-feedback) var(--ease),
             box-shadow var(--dur-feedback) var(--ease),
             border-color var(--dur-feedback) var(--ease);
}
.outcome:hover{
  transform:translateY(-4px);
  border-color:var(--blue-line);
  box-shadow:var(--shadow-card);
}
.outcome__title{ font-size:1.125rem; font-weight:600; line-height:1.35; }
.outcome__text{ font-size:.9375rem; line-height:1.65; color:var(--muted); }

/* ============================================================================
   14. CTA band
   ========================================================================== */
/* Volledige breedte, zonder radius — loopt direct over in de footer. */
.cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(76px, 9vw, 132px);
  background:linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 62%, #2E68EE 100%);
  color:var(--white);
  text-align:center;
}
.cta::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% -10%,
              rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 62%);
  pointer-events:none;
}
.cta > *{ position:relative; }

.cta__eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);
  border-radius:var(--r-pill);
  font-size:12.5px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
}
.cta__title{
  max-width:22ch;
  margin:clamp(18px, 2vw, 26px) auto 0;
  font-size:clamp(1.625rem, 2.9vw, 2.5rem);
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.cta__lead{
  max-width:56ch;
  margin:clamp(14px, 1.6vw, 20px) auto 0;
  font-size:clamp(1rem, 1.15vw, 1.0625rem);
  line-height:1.7;
  color:rgba(255,255,255,.85);
}
.cta__actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin-top:clamp(28px, 3vw, 40px);
}

/* ============================================================================
   15. Footer
   ========================================================================== */
/* Sluit direct aan op de CTA-band: geen marge, geen scheidingslijn. */
.site-footer{
  padding-top:clamp(48px, 5.5vw, 76px);
}

.footer__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap:clamp(32px, 4vw, 56px);
}

.footer__tagline{
  margin-top:18px;
  max-width:36ch;
  font-size:.9375rem;
  line-height:1.7;
  color:var(--muted);
}

.footer__title{
  margin-bottom:16px;
  font-size:.8125rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink);
}
.footer__links{ display:grid; gap:11px; }
.footer__links a{
  font-size:.9375rem;
  color:var(--muted);
  transition:color var(--dur) var(--ease);
}
.footer__links a:hover{ color:var(--blue); }

.footer__bottom{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:16px 28px;
  margin-top:clamp(40px, 4.5vw, 64px);
  padding-block:26px;
  border-top:1px solid var(--line);
  font-size:.875rem;
  color:var(--muted);
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:16px 24px; margin-left:auto; }

/* Eigen regel binnen de bottom-bar: flex-basis 100% dwingt een wrap, zodat de
   merkregel nooit naast het copyright komt te staan als daar ruimte over is. */
.footer__trademark{
  flex:1 0 100%;
  margin-top:4px;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--muted);
}
.footer__legal a{ transition:color var(--dur) var(--ease); }
.footer__legal a:hover{ color:var(--blue); }

/* ============================================================================
   16. Motion — scroll reveal
   ========================================================================== */
/* Scoped to .js so the content is never hidden when scripting is unavailable. */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--dur-layout) var(--ease-out),
             transform var(--dur-layout) var(--ease-out);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

/* Stap van .14s tegen een duur van .4s: je ziet de items na elkaar aankomen in
   plaats van als één blok. Gecapt op zes, dus de laatste wacht nooit langer dan
   .70s; daarboven voelt een lijst als laden in plaats van als beweging. */
.js .reveal[data-delay="1"]{ transition-delay:0s; }
.js .reveal[data-delay="2"]{ transition-delay:.14s; }
.js .reveal[data-delay="3"]{ transition-delay:.28s; }
.js .reveal[data-delay="4"]{ transition-delay:.42s; }
.js .reveal[data-delay="5"]{ transition-delay:.56s; }
.js .reveal[data-delay="6"]{ transition-delay:.70s; }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .nav{ gap:14px; }
  .nav__link{ font-size:14px; }
  .hero__cards{ width:min(290px, 100%); margin-inline-start:clamp(-48px, -3vw, -12px); }
  .hero__media{ width:min(62%, 900px); }
}

@media (max-width:1180px){
  .steps{ grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
  .step::before{ display:none; }
}

/* Tablet & phone: the five steps become one horizontal, snapping track. Stacking
   them turns a five-beat sequence into five unrelated blocks; scrolling sideways
   keeps the order — and the connector — legible. */
@media (max-width:900px){
  .steps{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* full-bleed track so cards can scroll past the gutter */
    margin-inline:calc(-1 * var(--gutter));
    padding-inline:var(--gutter);
    padding-bottom:14px;
    scroll-padding-inline:var(--gutter);
  }
  .step{
    flex:0 0 min(70vw, 280px);
    scroll-snap-align:start;
  }
  .step::before{ display:block; }   /* connector works again in a row */

  .steps::-webkit-scrollbar{ height:4px; }
  .steps::-webkit-scrollbar-track{ background:var(--line); border-radius:var(--r-pill); }
  .steps::-webkit-scrollbar-thumb{ background:var(--blue-line); border-radius:var(--r-pill); }
  .steps{ scrollbar-width:thin; scrollbar-color:var(--blue-line) var(--line); }
}

@media (max-width:1024px){
  .about__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .showcase__panel{ max-width:min(560px, 64%); }

  /* Het tekstblok loopt hier tot ~60% in plaats van ~48%; de wash schuift mee,
     anders vallen de laatste woorden van elke regel op de kale foto. */
  .showcase__bg::after{
    background:linear-gradient(90deg,
                rgba(255,255,255,.95) 0%,
                rgba(255,255,255,.92) 40%,
                rgba(255,255,255,.70) 56%,
                rgba(255,255,255,0)   68%);
  }
}

/* Tablet: landscape artwork, but the copy moves above it — at this width a
   side-by-side split leaves the text column too narrow. */
@media (max-width:900px){
  .showcase{
    align-items:flex-start;
    min-height:clamp(560px, 78vw, 680px);
    padding-top:clamp(44px, 6vw, 64px);
  }
  .showcase__panel{ max-width:none; }
  .showcase__bg img{ object-position:center bottom; }
  .showcase__bg::after{
    background:linear-gradient(180deg,
                rgba(255,255,255,.95) 0%,
                rgba(255,255,255,.88) 32%,
                rgba(255,255,255,.42) 52%,
                rgba(255,255,255,0)   70%);
  }
}

/* Phones: portrait artwork (706 × 2228).
   Twee ingrepen op het beeld:
   1. de sectie is korter dan de beeldverhouding, dus de losse rotsen onderaan
      vallen weg — net onder de laagste klimmer;
   2. scale() vanaf de bovenrand duwt de klimmers omlaag, zodat de bovenste
      figuur ruim onder het tekstblok uitkomt in plaats van erachter.
   De wash eindigt daardoor ook hoger: het beeld blijft onaangetast. */
@media (max-width:640px){
  .showcase{
    min-height:min(calc(100vw * 2.97), 1250px);
    padding-bottom:0;
  }
  .showcase__bg img{
    object-position:center top;
    transform:scale(1.15);
    transform-origin:top center;
  }
  .showcase__bg::after{
    background:linear-gradient(180deg,
                rgba(255,255,255,.92) 0%,
                rgba(255,255,255,.84) 24%,
                rgba(255,255,255,.38) 38%,
                rgba(255,255,255,0)   48%);
  }
}

@media (max-width:980px){
  .nav, .header-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .mobile-nav{ display:block; }

  /* Lock scroll while the drawer is open */
  body.nav-open{ overflow:hidden; }

  .hero{
    padding-top:calc(var(--header-h) + clamp(24px, 5vw, 48px));
    padding-bottom:clamp(56px, 8vw, 88px);
  }
  /* Backdrop becomes a normal stacked image between the copy and the cards */
  .hero__grid{ grid-template-columns:1fr; gap:0; }
  .hero__copy{ max-width:none; order:1; }
  .hero__media{ order:2; }
  .hero__cards{ order:3; }

  .hero__media{
    position:static;
    width:auto;
    margin-top:clamp(44px, 8vw, 68px);
    margin-inline:calc(-1 * var(--gutter));   /* full-bleed */
  }
  .hero__media::after{ display:none; }        /* no fades on the stacked image */
  .hero__img{
    height:clamp(330px, 50vw, 430px);
  }
  .hero__cards{
    width:auto;
    margin:-38px var(--gutter) 0;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  }
}

/* Tekst boven, logoband eronder — over de volle breedte. */
@media (max-width:820px){
  .trust__inner{
    grid-template-columns:1fr;
    gap:clamp(20px, 3vw, 28px);
  }
  .marquee{
    margin-inline:calc(-1 * var(--edge));
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
}

@media (max-width:640px){
  .callout{ flex-direction:column; align-items:flex-start; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__legal{ margin-left:0; }
}

/* Phones: crop tight on the people — the washed-out left half of the source
   photo is cropped away entirely (cover + right anchor + portrait ratio). */
@media (max-width:560px){
  .hero__img{
    height:auto;
    aspect-ratio:1 / 1.1;
  }
}

@media (max-width:520px){
  .hero__actions .btn,
  .cta__actions .btn{ flex:1 1 100%; }
  .f-card{ padding:14px 16px; }
}

/* Minder beweging betekent mínder en zachter, niet alles uit. Ruimtelijke
   verplaatsing verdwijnt; kleur- en opacitywissels die een handeling bevestigen
   blijven leesbaar, anders weet je niet meer of je knop iets deed. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  /* Geen enkele beweging in de ruimte */
  *,*::before,*::after{ animation:none !important; }
  .btn:hover, .btn:active,
  .f-card:hover, .problem-card:hover, .outcome:hover{ transform:none !important; }
  .btn:hover .btn__arrow{ transform:none !important; }
  .modal__panel{ transform:none !important; }

  /* Feedback blijft, maar rustig: alleen kleur en dekking, en sneller */
  *,*::before,*::after{ transition-duration:.08s !important; }

  .js .reveal{ opacity:1; transform:none; }

  /* De marquee mag niet vanzelf blijven bewegen; hij wordt handmatig
     scrollbaar zodat alle logo's bereikbaar blijven. */
  .marquee__track{ animation:none; width:auto; }
  .marquee{
    overflow-x:auto;
    -webkit-mask-image:none;
            mask-image:none;
  }
}

/* ============================================================================
   11b. AI-volgorde — "Waarom AI alleen niet genoeg is"
   ----------------------------------------------------------------------------
   Twee panelen ónder elkaar met een chevron ertussen. Bewust géén .steps: dat
   is een route van vijf gelijke beats met een doorlopende lijn. Dit is één
   voorwaarde met twee beats, verticaal, zonder nummers en zonder lijn.
   ========================================================================== */
.section--attached{
  padding-top:clamp(40px, 4.5vw, 64px);
  border-top:1px solid var(--line);
}

.order-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  align-items:center;
  gap:clamp(32px, 4.5vw, 72px);
}

/* --order-pad staat op de wrapper zodat de chevron precies onder de icon-tile
   uitlijnt: paneelpadding + (44 - 30) / 2. */
.order{ --order-pad:clamp(20px, 2.4vw, 28px); }

.order__step{
  display:flex; align-items:center; gap:clamp(14px, 1.6vw, 18px);
  padding:clamp(20px, 2.2vw, 26px) var(--order-pad);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
}
.order__text{
  font-size:clamp(.9375rem, 1.05vw, 1.0625rem);
  line-height:1.6;
  color:var(--ink-2);
  text-wrap:balance;
}
/* Zelfde idioom als .hero__title em: nadruk in merkblauw, niet cursief. */
.order__text em{ font-style:normal; font-weight:600; color:var(--blue); }

.order__step--then{ background:var(--blue-soft); border-color:var(--blue-line); }
.order__step--then .icon-tile{ background:var(--white); }
.order__step--then .order__text{
  font-size:clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight:500;
  line-height:1.45;
  color:var(--blue-deep);
}

.order__link{
  display:grid; place-items:center;
  width:30px; height:30px;
  margin:10px 0 10px calc(var(--order-pad) + 7px);
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--blue-line);
  color:var(--blue);
}
.order__link svg{ width:7px; height:11px; transform:rotate(90deg); }

@media (max-width:900px){
  .order-grid{ grid-template-columns:1fr; gap:clamp(28px, 4vw, 40px); }
  .order{ max-width:600px; }
}

/* ============================================================================
   10c. OWOW365 — de werkwijze met een naam
   ----------------------------------------------------------------------------
   Rustige groene tint als vlak, één hard groen blok voor de call-to-action.
   De zes onderdelen staan bewust zonder eigen randen in één omhulsel: dat ís
   de bewering "brengt samen in één manier van werken". Randen zouden er de
   vierde kaartenrij van de pagina van maken.
   ========================================================================== */
.owow{
  background:var(--green-soft);
  border-block:1px solid var(--green-line);
}

/* align-items:start, niet center: de onderdelenkaart klapt uit en groeit dus
   in hoogte. Gecentreerd zou de kaart bij elke klik omhoog kruipen — je klikt
   iets open en de rij die je aanwees schuift onder je muis vandaan. */
.owow__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  align-items:start;
  gap:clamp(32px, 5vw, 72px);
}

.owow__label{
  margin:clamp(24px, 3vw, 32px) 0 12px;
  font-size:.875rem; font-weight:600;
  color:var(--green-deep);
}

/* Pillen — zelfde vorm als .tech__tags op Over ons, in het groen. */
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags li{
  padding:6px 12px;
  border-radius:var(--r-pill);
  font-size:.8125rem; line-height:1.4;
  background:var(--blue-soft);
  border:1px solid var(--blue-line);
  color:var(--blue-deep);
}
.tags--groen li{
  background:var(--white);
  border-color:var(--green-line);
  color:var(--green-deep);
}

.eyebrow--groen{
  background:var(--white);
  border-color:var(--green-line);
  color:var(--green);
}
.eyebrow--groen::before{
  background:var(--green);
  box-shadow:0 0 0 3px rgba(15,122,74,.16);
}

.icon-tile--groen{ background:var(--white); color:var(--green); }

/* — De zes onderdelen —————————————————————— */
.owow__parts{
  display:grid;
  gap:2px;
  padding:clamp(18px, 2vw, 24px);
  background:var(--white);
  border:1px solid var(--green-line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-sm);
}
.owow__parts li + li{ border-top:1px solid var(--line); }
.owow__parts .icon-tile{ width:38px; height:38px; border-radius:10px; }
.owow__parts .icon-tile svg{ width:20px; height:20px; }

/* — Uitklapbaar onderdeel ——————————————————————
   De rij-opmaak zit op de <summary>, niet op de <li>: de summary is het
   klikbare vlak en moet de volle breedte en padding hebben, anders is
   alleen de tekst zelf aan te klikken. */
.part__head{
  display:flex; align-items:center; gap:14px;
  padding:11px 6px;
  font-size:1rem; font-weight:500;
  color:var(--ink);
  cursor:pointer;
  transition:color var(--dur-feedback) var(--ease);
}
/* Twee regels, want de UA-stylesheets zijn het hier niet eens: Safari
   tekent ::-webkit-details-marker, de rest gebruikt display:list-item. */
.part__head{ list-style:none; }
.part__head::-webkit-details-marker{ display:none; }

.part__head:hover{ color:var(--green-deep); }

.part__title{ flex:1; }

.part__chev{
  width:6px; height:10px; flex-shrink:0;
  color:var(--green);
  transform:rotate(90deg);
  transition:transform var(--dur) var(--ease);
}
.part[open] .part__chev{ transform:rotate(-90deg); }

/* Lijnt uit onder de titel: 38px icoon + 14px gap + 6px padding. */
.part__text{
  padding:0 6px 14px 58px;
  font-size:.9375rem; line-height:1.65;
  color:var(--muted);
}

/* Zachte uitklap waar de browser het aankan (Chrome 131+, Safari 18.4+).
   interpolate-size is nodig omdat de hoogte van/naar `auto` animeert;
   browsers zonder ::details-content klappen gewoon direct open. */
.part{ interpolate-size:allow-keywords; }
.part::details-content{
  block-size:0;
  overflow:hidden;
  transition:block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete;
}
.part[open]::details-content{ block-size:auto; }

/* — Groen CTA-blok ————————————————————————— */
.owow__cta{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(18px, 2.5vw, 36px);
  margin-top:clamp(32px, 4vw, 52px);
  padding:clamp(24px, 2.8vw, 34px) clamp(24px, 3vw, 40px);
  background:var(--green);
  border-radius:var(--r-card);
  box-shadow:0 16px 40px -18px rgba(8,73,46,.55);
}
.owow__cta-text{
  flex:1 1 320px;
  font-size:clamp(1rem, 1.3vw, 1.1875rem);
  font-weight:500;
  line-height:1.5;
  color:var(--white);
  text-wrap:balance;
}
.owow__cta-btn{ flex-shrink:0; }

@media (max-width:900px){
  .owow__grid{ grid-template-columns:1fr; gap:clamp(28px, 4vw, 40px); }
}
@media (max-width:520px){
  .owow__cta{
    flex-direction:column; align-items:stretch; text-align:center;
    gap:clamp(16px, 4vw, 22px);
  }
  /* In een kolom is flex-basis de HOOGTE: de 320px uit de rijstand gaf de
     tekst een minimumhoogte van 320px en dus een gat onder de zin. */
  .owow__cta-text{ flex:0 1 auto; }
  .owow__cta-btn{ justify-content:center; }

  /* De inspringing onder het icoon kost hier een vijfde van de regellengte;
     dan wint leesbaarheid van uitlijning. */
  .part__text{ padding-left:6px; }
}

/* ============================================================================
   17. Contact-pop-up
   ----------------------------------------------------------------------------
   Native <dialog>. Nooit `display` zetten zonder [open] erbij: de UA-stylesheet
   houdt een gesloten dialog op display:none, en die regel mogen we niet
   overschrijven — anders staat het venster permanent open.
   ========================================================================== */
.modal{
  width:100%;  max-width:100%;
  height:100%; max-height:100%;
  margin:0;
  padding:clamp(16px, 4vw, 40px);
  border:0;
  background:transparent;
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* Centreren via margin:auto op het paneel, niet via align-items:center.
   Bij inhoud die hoger is dan het scherm duwt centreren de bovenkant buiten
   het scrollbereik — dan zijn titel en sluitknop onbereikbaar. margin:auto
   centreert wél, maar respecteert de startrand zodra het krap wordt. */
.modal[open]{ display:flex; }

.modal::backdrop{
  background:rgba(11, 27, 71, 0);
  transition:background var(--dur-layout) var(--ease-out);
}
.modal.is-open::backdrop{ background:rgba(11, 27, 71, .55); }

body.modal-open{ overflow:hidden; }

/* — Paneel ——————————————————————————————— */
.modal__panel{
  width:min(560px, 100%);
  margin:auto;
  padding:clamp(24px, 3vw, 34px);
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:0 24px 64px -20px rgba(11, 27, 71, .45);

  opacity:0;
  transform:translateY(10px) scale(.99);
  transition:opacity var(--dur-layout) var(--ease-out), transform var(--dur-layout) var(--ease-out);
}
.modal.is-open .modal__panel{ opacity:1; transform:none; }

.modal__head{
  display:flex; align-items:flex-start; gap:16px;
  margin-bottom:10px;
}
.modal__title{
  flex:1;
  font-size:clamp(1.25rem, 2vw, 1.5rem);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.01em;
}
.modal__close{
  flex-shrink:0;
  display:grid; place-items:center;
  width:40px; height:40px;
  margin:-8px -8px 0 0;
  background:none; border:0;
  border-radius:var(--r-btn);
  color:var(--muted);
  cursor:pointer;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal__close:hover{ background:var(--surface); color:var(--ink); }
.modal__close svg{ width:16px; height:16px; }

.modal__lead{
  margin-bottom:clamp(20px, 2.4vw, 26px);
  font-size:.9375rem;
  line-height:1.65;
  color:var(--muted);
}

.modal__form{ display:grid; gap:clamp(16px, 2vw, 20px); }

/* — Velden ——————————————————————————————— */
.fieldset{ margin:0; padding:0; border:0; }
.fieldset__legend{
  padding:0;
  margin-bottom:10px;
  font-size:.875rem; font-weight:500;
  color:var(--ink);
}

.field{ display:grid; gap:var(--sp-2); }
.field__label{
  font-size:.875rem; font-weight:500;
  color:var(--ink);
}

.input,
.textarea{
  width:100%;
  padding:13px 14px;
  font:inherit;
  font-size:.9375rem;
  line-height:1.5;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--field-line);
  border-radius:var(--r-btn);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea{ resize:vertical; min-height:96px; }

.input::placeholder,
.textarea::placeholder{ color:var(--muted); opacity:1; }

.input:hover,
.textarea:hover{ border-color:var(--ink-2); }

/* De globale :focus-visible-regel dekt alleen a/button/summary/[tabindex] —
   invoervelden hebben hier hun eigen, gelijkvormige focusstijl nodig. */
.input:focus-visible,
.textarea:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-color:var(--blue);
}

/* Pas rood ná interactie, niet al bij het openen van een leeg formulier. */
.input:user-invalid,
.textarea:user-invalid{ border-color:#C02626; }

/* — Keuzes (radio + checkbox) —————————————— */
.choice-group{ display:grid; gap:2px; }

.choice{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px;
  margin-inline:-12px;              /* laat de hover-vlek buiten de tekst uitlopen */
  border-radius:var(--r-btn);
  font-size:.9375rem;
  line-height:1.4;
  cursor:pointer;
  transition:background-color var(--dur) var(--ease);
}
.choice:hover{ background:var(--blue-soft); }

.choice input{
  flex-shrink:0;
  width:17px; height:17px;
  margin:0;
  accent-color:var(--blue);         /* houdt de native besturing, in onze kleur */
  cursor:pointer;
}
.choice input:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

/* Telefoonveld dat pas bij het vinkje verschijnt */
.field--reveal{ margin-top:12px; }

/* Honeypot — mag voor niemand zichtbaar of bereikbaar zijn.
   Bewust géén display:none of visibility:hidden: dat is precies waar een bot
   op filtert om nepvelden over te slaan. Off-screen schuiven laat het in de
   DOM een gewoon veld blijven.
   Niet vervangen door .visually-hidden: die klasse is er juist om iets áán
   screenreaders te tonen, en dit veld moet ook daar weg blijven. */
.modal__hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.modal__submit{ width:100%; }
.modal__submit[disabled]{ opacity:.65; cursor:progress; }

/* role="alert" staat in de HTML, dus dit wordt voorgelezen zodra het verschijnt */
.modal__error{
  margin-top:-4px;
  padding:10px 14px;
  border-radius:var(--r-btn);
  background:#FDECEC;
  border:1px solid #F3C2C2;
  color:#8C1D1D;
  font-size:.875rem;
  line-height:1.5;
}

.modal__note{
  margin-top:-4px;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--muted);
}

/* — Bevestiging na verzenden ————————————— */
.modal__done{ display:grid; justify-items:start; gap:12px; }
.modal__done-mark{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--blue);
}
.modal__done-mark svg{ width:20px; height:15px; }
.modal__done-title{ font-size:1.125rem; font-weight:600; line-height:1.35; }
.modal__done-text{
  font-size:.9375rem; line-height:1.65;
  color:var(--muted);
}
.modal__done-text a{ color:var(--blue); text-decoration:underline; }
.modal__done .btn{ margin-top:6px; }

@media (max-width:520px){
  .modal{ padding:0; }
  .modal__panel{
    width:100%;
    min-height:100%;
    margin:0;
    border-radius:0;
  }
}