/*
Theme Name: IntercomDirect
Description: Hand-coded theme for new.intercomdirect.nl (replaces Astra + Elementor for content-managed pages while keeping the "project" CPT mu-plugin and existing menus/media library intact).
Author: IntercomDirect B.V.
Version: 3.12.26
*/

/* Self-hosted fonts (3.7.0): Open Sans + Rubik, latin, variable weight (OFL). Replaces the Google Fonts call,
   whose old v1 URL only ever loaded Open Sans, so Rubik headings/buttons fell back to Helvetica. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('/s/t/intercomdirect/fonts/open-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500 700;font-display:swap;src:url('/s/t/intercomdirect/fonts/rubik-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --blue:#0077FF;
  --blue-dark:#005FCC;
  --orange:#F36B12;
  --navy:#0A1B33;
  --ink:#111826;
  --muted:#5B6472;
  --bg-alt:#F5F7FA;
  --white:#ffffff;
  --border:#E4E8EE;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 12px 32px rgba(10,27,51,0.10);
  --container:1200px;
  /* Matches intercomdirect.nl (the live production site) exactly, not a new custom typeface:
     Open Sans for body copy/hero headline, Rubik for section headings/buttons. */
  --font-body:'Open Sans', Arial, sans-serif;
  --font-heading:Rubik, Helvetica, Arial, Lucida, sans-serif;

  /* ===== Design tokens (3.7.0). Use ONLY these for type, spacing and buttons; no one-off sizes. ===== */
  /* Type scale: small / body / lead + H1-H6. Headings grow fluidly between 360px and 1440px. */
  --fs-small:0.875rem;                                   /* 14px  meta, labels, chips, footer */
  --fs-body:1rem;                                        /* 16px  all running text */
  --fs-lead:clamp(1rem, 0.95rem + 0.3vw, 1.125rem);     /* 16 -> 18px  hero intro */
  --fs-h6:1rem;                                          /* 16px  small card titles */
  --fs-h5:1.125rem;                                      /* 18px  card titles, FAQ questions */
  --fs-h4:1.25rem;                                       /* 20px  large card titles */
  --fs-h3:clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);        /* 20 -> 24px */
  --fs-h2:clamp(1.625rem, 1.3rem + 1.35vw, 2.25rem);     /* 26 -> 36px  section headings */
  --fs-h1:clamp(2rem, 1.6rem + 1.6vw, 2.75rem);          /* 32 -> 44px  one per page */
  --lh-body:1.65;
  --lh-heading:1.2;
  --measure:66ch;                                        /* ~60-75 characters per line */
  /* Spacing scale */
  --space-1:0.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-section:clamp(3rem, 2.4rem + 2.6vw, 5rem);     /* 48 -> 80px  vertical padding of every section */
  --space-hero:clamp(2rem, 1.5rem + 2.4vw, 4rem);        /* 32 -> 64px  top padding of heroes */
  --space-head:clamp(2rem, 1.6rem + 1.6vw, 3rem);        /* 32 -> 48px  gap under a section heading */
  --gap:clamp(1rem, 0.7rem + 1.2vw, 1.75rem);            /* 16 -> 28px  every card grid */
  --gap-split:clamp(1.5rem, 0.8rem + 3vw, 3.5rem);       /* 24 -> 56px  image/text splits */
  /* Buttons: one size; primary = orange, secondary = blue outline */
  --btn-h:44px;
  --btn-h-sm:40px;
  --btn-px:1.375rem;
}

*,*::before,*::after{box-sizing:border-box;}
/* 3.8.3: no global scroll-behavior:smooth. custom.js already animates anchor/back-to-top scrolls (jQuery); the CSS rule
   turned every animation frame into its own smooth scroll, and Safari stalled or stopped half-way (froze /projecten/). */
/* Elementor's global kit sets its OWN font-family/size/weight directly on `.elementor-kit-4`
   (a class WordPress leaves on <body> from the old page-builder setup) — a class selector beats
   a plain `body{...}` type selector on specificity, so without !important every element that
   doesn't explicitly set its own font (paragraphs, nav links, anything relying on inheritance)
   was silently inheriting Elementor's cached "Bricolage Grotesque" instead of ours. */
body{
  margin:0;
  font-family:var(--font-body) !important;
  font-size:var(--fs-body) !important;
  font-weight:400 !important;
  color:var(--ink);
  background:var(--white);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
/* Elementor's still-active global kit CSS ships its OWN `.elementor-kit-4 h1{font-family,
   font-size, font-weight, line-height, letter-spacing, color, ...}` rule (and h2-h6 equivalents),
   at the exact same specificity (one class + one element) as a plain `h1{...}` or `.hero h1{...}`
   rule here, loaded LATER in the page (post-4.css). On a specificity tie the later stylesheet
   wins, so every one of these properties needs !important below or Elementor's cached
   "Bricolage Grotesque / 48px / weight 500" values silently win instead — confirmed by pulling
   the actual kit CSS file, not assumed.
   Section headings (h2) use Rubik/700, matching production's "Projecten"/"Overige diensten"
   headings; h1 and h3 are overridden back to Open Sans since production keeps the hero headline
   and card titles in the body font, not the heading font. */
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;line-height:var(--lh-heading) !important;font-weight:700 !important;font-family:var(--font-heading) !important;letter-spacing:normal !important;text-transform:none !important;}
h1{font-family:var(--font-body) !important;}
h3{font-family:var(--font-body) !important;font-weight:600 !important;}
h1{font-size:var(--fs-h1);} h2{font-size:var(--fs-h2);} h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);} h5{font-size:var(--fs-h5);} h6{font-size:var(--fs-h6);}
p{margin:0 0 1em;color:var(--muted);line-height:var(--lh-body);}

/* Elementor's still-active global kit CSS (.elementor-kit-4 h1..h6{color:accent-1}) force-colors every
   heading blue site-wide. Override deliberately: section headings read as ink/black (matching
   intercomdirect.nl's real hierarchy), only card-level h3 titles and the hero h1 stay blue. */
body h1, body h2, body h4, body h5, body h6{color:var(--ink) !important;}
body h3{color:var(--ink) !important;} /* 3.11.2: headings dark (was blue), blue only as accent */
/* Hero heading reads as ink with just the key product/brand phrase picked out in blue (the
   ".accent" span each hero h1 wraps around it), rather than the whole line being flat blue —
   closer to how camerainstallatie.nl and elektricien-louwmans.nl highlight one phrase per headline. */
body .hero h1{color:var(--navy) !important;}
body .hero h1 .accent{color:var(--blue) !important;}
/* Headings on a solid-color band must stay white, overriding the ink default above */
body .band-blue h2, body .closing-cta h2, body .section-dark h2,
body .band-blue h1, body .closing-cta h1{color:#fff !important;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* ---------- Buttons (3.7.0): ONE size, two styles ----------
   .btn-accent  = primary (orange): the one main action per screen.
   .btn-outline / .btn-primary = secondary (blue outline). .btn-outline-white = secondary on a blue band.
   .btn-link    = tertiary text link with arrow, for cards. Height 44px = comfortable tap target, not oversized. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:var(--btn-h);padding:0 var(--btn-px);border-radius:999px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-body);line-height:1.2;
  border:2px solid transparent;cursor:pointer;transition:background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;text-decoration:none;
}
.btn-accent{background:var(--orange) !important;color:#fff !important;}
.btn-accent:hover{background:#d95e0c !important;}
.btn-primary,.btn-outline{background:transparent !important;color:var(--blue) !important;border-color:var(--blue) !important;box-shadow:none;}
.btn-primary:hover,.btn-outline:hover{background:var(--blue) !important;color:#fff !important;}
.btn-outline-white{background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.7) !important;}
.btn-outline-white:hover{background:#fff !important;color:var(--blue) !important;}
.btn:focus-visible{outline:3px solid rgba(0,119,255,.35);outline-offset:2px;}
.btn-link{display:inline-flex;align-items:center;gap:6px;min-height:var(--btn-h);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-body);color:var(--blue) !important;background:none !important;border:0;padding:0;box-shadow:none;}
.btn-link svg{transition:transform .2s ease;}
.btn-link:hover svg{transform:translateX(4px);}
.btn-group{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;}

/* ---------- Utility bar ---------- */
.utility-bar{background:var(--blue);color:#eaf2ff;font-size:var(--fs-small);}
.utility-bar .container{display:flex;justify-content:space-between;align-items:center;height:40px;}
.utility-bar a{color:#fff;font-weight:600;}
.utility-bar .u-left{display:flex;gap:22px;align-items:center;}
.utility-bar .u-right{font-weight:600;color:#eaf2ff;}
.utility-bar .u-left svg{vertical-align:-3px;margin-right:6px;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:999;background:#fff;box-shadow:0 2px 16px rgba(10,27,51,.08);transition:box-shadow .2s ease;}
.site-header.is-scrolled{box-shadow:0 8px 24px rgba(10,27,51,.14);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:84px;gap:32px;}
/* Logo trimmed down from its native 52px and nav links bumped up in weight/size so the two hold
   an even visual balance instead of the logo dominating a row of thin, small nav text. */
.site-logo img{height:42px;width:auto;}
.main-nav{display:flex;align-items:center;gap:30px;}
.main-nav ul{display:flex;gap:26px;align-items:center;}
.main-nav > ul > li{position:relative;}
.main-nav a{font-weight:600;font-size:var(--fs-small);letter-spacing:normal;color:var(--ink);padding:8px 2px;}
.main-nav > ul > li > a:hover{color:var(--blue);}
.main-nav .sub-menu{
  display:none;position:absolute;top:100%;left:0;background:#fff;min-width:240px;
  border-radius:12px;box-shadow:var(--shadow);padding:10px;border:1px solid var(--border);
}
.main-nav li:hover > .sub-menu{display:block;}
.main-nav .sub-menu li a{display:block;padding:10px 12px;border-radius:8px;font-weight:500;}
.main-nav .sub-menu li a:hover{background:var(--bg-alt);color:var(--blue);}
.header-actions{display:flex;align-items:center;gap:18px;}
.header-phone{font-weight:700;color:var(--navy);font-size:var(--fs-body);}
/* Elementor's still-active global kit CSS (.elementor-kit-4 button{...}) outranks a single
   class selector on specificity, so the button background below is set with !important. */

/* Last two Hoofdmenu items are the phone number + CTA button (added as plain menu items) */
.main-nav > ul > li:nth-last-child(2){margin-left:8px;}
.main-nav > ul > li:nth-last-child(2) > a{font-weight:800;color:var(--navy);}
.main-nav > ul > li:last-child > a{
  display:inline-flex;align-items:center;min-height:var(--btn-h-sm);
  background:var(--orange);color:#fff;padding:0 var(--btn-px);border-radius:999px;font-family:var(--font-heading);
}
.main-nav > ul > li:last-child > a:hover{background:#d95e0c;}

/* ---------- Mobile nav toggle: real SVG-style animated hamburger, sized to match the logo ---------- */
.nav-toggle{
  display:none;width:48px;height:48px;flex:none;background:#fff !important;border:2px solid var(--border);
  border-radius:10px;cursor:pointer;position:relative;z-index:1002;
  align-items:center;justify-content:center;padding:0;
}
.hamburger-box{position:relative;width:22px;height:16px;display:inline-block;}
.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{
  position:absolute;left:0;width:22px;height:2.5px;border-radius:2px;background:var(--navy);
  transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.hamburger-inner{top:7px;}
.hamburger-inner::before{content:"";top:-7px;}
.hamburger-inner::after{content:"";top:7px;}
.nav-toggle.is-open .hamburger-inner{background:transparent;}
.nav-toggle.is-open .hamburger-inner::before{top:0;transform:rotate(45deg);background:var(--navy);}
.nav-toggle.is-open .hamburger-inner::after{top:0;transform:rotate(-45deg);background:var(--navy);}

.nav-close{
  display:none;position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border);background:#fff !important;font-size:var(--fs-h4);line-height:1;color:var(--navy) !important;cursor:pointer;
}

.nav-overlay{display:none;position:fixed;inset:0;background:rgba(10,27,51,.45);z-index:999;opacity:0;transition:opacity .25s ease;}
.nav-overlay.is-open{display:block;opacity:1;}
body.nav-locked{overflow:hidden;}

@media (max-width:1024px){
  .nav-toggle{display:inline-flex;}
  .header-phone{display:none;}
  .utility-bar .u-right{display:none;}

  .main-nav{
    display:block;position:fixed;top:0;right:0;height:100vh;width:min(320px,86vw);
    background:#fff;box-shadow:-12px 0 32px rgba(10,27,51,.18);
    transform:translateX(100%);transition:transform .25s ease;z-index:1000;
    overflow-y:auto;padding:90px 24px 24px;
  }
  .main-nav.nav-open{transform:translateX(0);}
  .nav-close{display:block;}
  .main-nav > ul{display:flex;flex-direction:column;gap:4px;align-items:stretch;}
  .main-nav > ul > li{width:100%;}
  .main-nav > ul > li > a{display:block;padding:14px 4px;border-bottom:1px solid var(--border);}
  .main-nav .sub-menu{position:static;display:block;box-shadow:none;border:none;padding:0 0 0 14px;margin-top:4px;}
  .main-nav li:hover > .sub-menu{display:none;}
  .main-nav li.menu-item-has-children > .sub-menu{display:none;}
  .main-nav li.submenu-open > .sub-menu{display:block;}
  .main-nav > ul > li:nth-last-child(2){margin-left:0;}
  .main-nav > ul > li:last-child{margin-top:12px;}
  .main-nav > ul > li:last-child > a{display:inline-block;}
}
@media (min-width:1025px){
  .main-nav{display:flex;}
}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,#F7FAFF 0%, #FFFFFF 60%);padding:var(--space-hero) 0 var(--space-section);position:relative;overflow:hidden;}
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:var(--gap-split);align-items:center;}
/* Faint drifting field of intercom/camera/shield/wifi line-icons behind the hero copy — an ambient
   texture (not a literal photo) that reads as "security tech" without competing with the heading. */
.hero::before{
  content:"";position:absolute;inset:-15% -15%;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%230A1B33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='18' y='22' width='34' height='50' rx='6'/><circle cx='35' cy='38' r='7'/><line x1='27' y1='56' x2='43' y2='56'/><line x1='27' y1='63' x2='43' y2='63'/><rect x='150' y='38' width='40' height='26' rx='6'/><circle cx='170' cy='51' r='8'/><path d='M190 46 l14 -8 v26 l-14 -8z'/><path d='M60 148 l24 -10 24 10 v26c0 18 -12 30 -24 34 -12 -4 -24 -16 -24 -34z'/><path d='M74 166 l8 8 16 -18'/><path d='M150 190a34 34 0 0 1 60 0'/><path d='M162 202a18 18 0 0 1 36 0'/><circle cx='180' cy='214' r='3.2' fill='%230A1B33'/></g></svg>");
  background-repeat:repeat;background-size:240px 240px;opacity:.05;
  animation:heroDrift 60s linear infinite;
}
@keyframes heroDrift{from{transform:translate(0,0);}to{transform:translate(-240px,-240px);}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none;}}
/* Exact match to intercomdirect.nl's real hero headline: Open Sans/700/34px/line-height:1 */
.hero h1{font-size:var(--fs-h1) !important;font-weight:700 !important;letter-spacing:normal !important;line-height:var(--lh-heading) !important;}
.hero .lead{color:var(--muted);font-size:var(--fs-lead);line-height:var(--lh-body);max-width:var(--measure);}
.trust-checks{display:flex;flex-direction:column;gap:10px;margin:22px 0 28px;}
.trust-checks li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:var(--fs-body);}
.trust-checks .tick{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);flex:none;}
.hero-ctas{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3);}
.trust-badge{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 18px;max-width:420px;box-shadow:var(--shadow);}
.trust-badge .score{font-size:var(--fs-h3);font-weight:800;color:var(--blue);}
.trust-badge .stars{color:var(--orange);letter-spacing:2px;font-size:var(--fs-small);}
.trust-badge .tb-text{font-size:var(--fs-small);color:var(--muted);line-height:1.3;}
.trust-badge .tb-text strong{display:block;color:var(--ink);font-size:var(--fs-small);}

.hero-media{position:relative;}
.hero-media img,.hero-media video{border-radius:var(--radius);width:100%;aspect-ratio:5/4;object-fit:cover;box-shadow:var(--shadow);}
.hero-media .hero-video-mobile{display:none;}
@media (max-width:640px){
  .hero-media .hero-video-desktop{display:none;}
  .hero-media .hero-video-mobile{display:block;aspect-ratio:3/4;}
}
.hero-float{
  position:absolute;left:-24px;bottom:-24px;background:#fff;color:var(--ink);border-radius:14px;
  padding:16px 20px;box-shadow:var(--shadow);min-width:190px;border:1px solid var(--border);
}
.hero-float .big{font-size:var(--fs-h3);font-weight:800;color:var(--orange);}
.hero-float .small{font-size:var(--fs-small);color:var(--muted);}

@media (max-width:1024px){
  .hero .container{grid-template-columns:minmax(0,1fr);}
  .hero-media img,.hero-media video{aspect-ratio:4/3;}
}

/* ---------- Generic section scaffolding ---------- */
.section{padding:var(--space-section) 0;}
.section-tight{padding-bottom:0 !important;}
.band-overlap{padding-bottom:calc(var(--space-section) + 40px) !important;}
.section-alt{background:var(--bg-alt);}
.section-dark{background:var(--navy);color:#fff;}
.section-head{max-width:calc(var(--measure) + 4rem);margin:0 auto var(--space-head);text-align:center;}
.section-head h2{font-size:var(--fs-h2) !important;}
.section-head p{color:var(--muted);font-size:var(--fs-small);}
.section-dark .section-head p{color:#b9c6db;}
.eyebrow{display:inline-block;color:var(--blue);font-weight:700;font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;}

/* Bold solid-blue band, matching intercomdirect.nl's high-contrast rhythm (not muted navy) */
.band-blue{background:var(--blue);color:#fff;text-align:center;}
.band-blue .eyebrow{color:#cfe3ff;}
.band-blue h2{color:#fff;}
.band-blue p{color:#dbe9ff;max-width:var(--measure);margin:0 auto var(--space-3);}
/* This specific heading is long enough that it wraps awkwardly (only the last word onto its
   own line) at the 40px Elementor-kit default it was otherwise inheriting — sized down and
   locked to one line on desktop, where the container is wide enough to fit it comfortably. */
.nowrap-heading{font-size:var(--fs-h2) !important;}
@media (min-width:1025px){.nowrap-heading{white-space:nowrap;}}

/* White card that overlaps the bottom edge of a .band-blue section above it */
.floating-wrap{margin-top:-64px;position:relative;z-index:2;}
.floating-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:36px;}

/* ---------- single-project.php hero — reuses the site's standard light .hero pattern (same
   drifting-icon background, hero-copy/hero-media grid) instead of a bespoke solid-blue band, so
   a case-study page feels like part of the same site rather than a one-off template. ---------- */
.project-hero .back-link{
  display:inline-flex;align-items:center;gap:8px;color:var(--blue) !important;font-weight:700;
  font-size:var(--fs-small);margin-bottom:18px;
}
.fact-chips{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 8px;}
.fact-chip{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);
  border-radius:999px;padding:9px 16px 9px 14px;font-weight:700;font-size:var(--fs-small);color:var(--ink);
  box-shadow:var(--shadow);
}
.fact-chip svg{color:var(--blue);flex:none;}
.hero-media .phf-badge{
  position:absolute;left:24px;bottom:-24px;background:#fff;color:var(--ink);border-radius:14px;
  padding:16px 22px;box-shadow:var(--shadow);display:flex;gap:24px;z-index:1;
}
.phf-badge strong{display:block;font-size:var(--fs-h3);font-weight:800;color:var(--blue);line-height:1.1;}
.phf-badge span{font-size:var(--fs-small);color:var(--muted);font-weight:600;}

/* ---------- single-project.php content: narrative + sticky facts sidebar ---------- */
.project-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gap-split);align-items:start;}
.project-narrative h3{font-size:var(--fs-h3);margin-top:1.5em;}
.project-narrative h3:first-child{margin-top:0;}
.project-narrative p{font-size:var(--fs-body);}
.project-highlights{margin:28px 0;display:flex;flex-direction:column;gap:12px;}
.project-highlights li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:var(--fs-body);color:var(--ink);}
.project-highlights svg{flex:none;color:var(--blue);background:rgba(0,119,255,.1);border-radius:50%;padding:3px;width:22px;height:22px;box-sizing:border-box;}
.project-sidebar{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px;}
.project-specs{background:var(--bg-alt);border-radius:var(--radius);padding:24px 26px;}
.project-specs h4{font-size:var(--fs-small);margin-bottom:16px !important;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.project-specs dl{margin:0;display:flex;flex-direction:column;gap:14px;}
.project-specs dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--border);padding-bottom:12px;}
.project-specs dl > div:last-child{border-bottom:none;padding-bottom:0;}
.project-specs dt{font-size:var(--fs-small);color:var(--muted);font-weight:600;}
.project-specs dd{margin:0;font-weight:800;font-size:var(--fs-body);color:var(--ink);text-align:right;}
.project-specs-cta{background:var(--navy);color:#fff;}
.project-specs-cta h4{color:#9db3d1;}
.project-specs-cta p{color:#c7d4e8;font-size:var(--fs-small);margin-bottom:16px;}
@media (max-width:900px){
  .project-content-grid{grid-template-columns:minmax(0,1fr);}
  .project-sidebar{position:static;flex-direction:row;flex-wrap:wrap;}
  .project-sidebar > div{flex:1 1 260px;}
}
@media (max-width:640px){.project-sidebar{flex-direction:column;}}

/* Branded gradient fallback for a related-project card with no photo yet — never a fake photo */
.pc-photo-empty{aspect-ratio:4/3;background:linear-gradient(135deg,var(--blue),var(--blue-dark));position:relative;border-radius:var(--radius) var(--radius) 0 0;}
@media (max-width:640px){.floating-wrap{margin-top:-40px;}.floating-card{padding:24px;}}

/* Intro split */
.intro-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-split);align-items:stretch;}
.intro-split > img{border-radius:var(--radius);width:100%;height:100%;min-height:320px;max-height:560px;aspect-ratio:auto;object-fit:cover;}
.intro-split > div{align-self:center;max-width:var(--measure);}
@media (max-width:1024px){.intro-split{grid-template-columns:minmax(0,1fr);}.intro-split > img{height:auto;min-height:0;aspect-ratio:4/3;}}

/* System cards (3) */
.card-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.system-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.system-card img{height:180px;object-fit:cover;}
.system-card .sc-inner{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1;}
.sci-icon{
  width:54px;height:54px;border-radius:15px;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex:none;
}
.sci-icon svg{width:27px;height:27px;}
.sci-icon-alt{background:var(--orange);}
.system-card h3{font-size:var(--fs-h4) !important;}
.system-card ul{margin:16px 0 20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.system-card ul li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:var(--muted);}
.system-card ul li::before{content:"✓";color:var(--blue);font-weight:800;}
.system-card .btn{align-self:flex-start;}
@media (max-width:900px){.card-grid-3{grid-template-columns:minmax(0,1fr);}}

/* ---------- Icon quick-links strip (under the hero) ---------- */
.quick-links-strip{background:#fff;border-bottom:1px solid var(--border);}
/* Full-bleed on purpose — unlike the rest of the page's sections, this strip is not capped by
   `.container`'s 1200px max-width, so it reads as a distinct utility band spanning the whole
   viewport (matching the icon-shortcut band pattern on elektricien-louwmans.nl). */
.qls-wrap{width:100%;padding:0 32px;}
.qls-row{display:flex;flex-wrap:wrap;}
.qls-item{
  flex:1 1 0;min-width:150px;display:flex;align-items:center;gap:12px;padding:22px 16px;
  border-left:1px solid var(--border);transition:background .15s ease;
}
.qls-item:first-child{border-left:none;}
.qls-item:hover{background:var(--bg-alt);}
.qls-icon{
  flex:none;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.qls-icon svg{width:22px;height:22px;}
.qls-icon-alt{background:var(--orange);}
/* Labels stay on a single line — the row is now full-width so every item has enough room for
   its whole label; min-width:0 lets the flex item shrink instead of forcing the row wider than
   the viewport on the rare narrow-desktop width where it's still tight. */
.qls-text{flex:1;min-width:0;white-space:nowrap;font-weight:700;font-size:var(--fs-body);color:var(--ink);line-height:1.3;}
.qls-arrow{flex:none;color:var(--muted);transition:transform .2s ease, color .2s ease;}
.qls-item:hover .qls-arrow{color:var(--blue);transform:translateX(3px);}
@media (max-width:900px){
  .qls-item{flex:1 1 50%;border-left:none;border-top:1px solid var(--border);}
  .qls-item:nth-child(odd){border-right:1px solid var(--border);}
  .qls-text{font-size:var(--fs-small);}
}
@media (max-width:480px){
  .qls-item{flex:1 1 100% !important;border-right:none !important;}
  .qls-text{white-space:normal;}
}

/* Project filters + wider grid (Projecten landing page) */
.project-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px;}
.pf-btn{
  background:#fff !important;border:1.5px solid var(--border);color:var(--ink) !important;font-weight:600;font-size:var(--fs-small);
  padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.pf-btn:hover{border-color:var(--blue);}
.pf-btn.is-active{background:var(--blue) !important;border-color:var(--blue);color:#fff !important;}
.project-grid-wide{grid-template-columns:repeat(4,minmax(0,1fr));}
.project-grid-wide .project-card[hidden]{display:none;}
@media (max-width:1024px){.project-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.project-grid-wide{grid-template-columns:minmax(0,1fr);}}

/* Contact page: form + info cards */
.form-notice{border-radius:12px;padding:16px 20px;margin-bottom:28px;font-weight:600;font-size:var(--fs-body);}
.form-notice-success{background:#e6f4ea;color:#1e7a34;border:1px solid #b7e0c3;}
.form-notice-error{background:#fdecec;color:#b3261e;border:1px solid #f5c2c0;}

.contact-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap-split);align-items:start;}
.contact-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;}
.contact-form .form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
.contact-form label{display:block;font-size:var(--fs-small);font-weight:700;color:var(--ink);margin-bottom:16px;}
.contact-form input,.contact-form textarea{
  display:block;width:100%;margin-top:6px;padding:12px 14px;border:1.5px solid var(--border);
  border-radius:10px;font:inherit;font-weight:400;color:var(--ink);background:#fff;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--blue);}
.contact-form textarea{resize:vertical;}

.contact-info-cards{display:flex;flex-direction:column;gap:18px;}
.info-card{background:var(--bg-alt);border-radius:var(--radius);padding:22px 24px;}
.info-card-main{display:block;font-size:var(--fs-h4);font-weight:800;color:var(--blue);margin:6px 0 8px;}
.info-card p{margin:0;font-size:var(--fs-small);}
@media (max-width:900px){.contact-layout{grid-template-columns:minmax(0,1fr);}.contact-form .form-row{grid-template-columns:minmax(0,1fr);}}

/* Team grid (Over Ons) — clean initial-badge avatars since no real staff photos exist in the media library yet */
.team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);}
.team-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px 16px;text-align:center;box-shadow:var(--shadow);}
.team-avatar{
  width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:var(--fs-lead);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.team-card h4{font-size:var(--fs-h6) !important;margin-bottom:4px;}
.team-card p{font-size:var(--fs-small);margin:0;}
@media (max-width:1024px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:640px){.team-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}

/* Services cross-nav grid (used on Over Ons + bottom of every service page) — same interactive
   treatment as the project cards: photo zoom on hover, card lift, animated CTA arrow. */
.services-nav-card{
  display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:visible;
  box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.services-nav-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(10,27,51,.16);border-color:var(--blue);}
.services-nav-card .snc-photo{overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;}
.services-nav-card .snc-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s ease;}
.services-nav-card:hover .snc-photo img{transform:scale(1.1);}
.snc-body h4{font-size:var(--fs-h6) !important;margin:0 0 6px;color:var(--ink);}
.snc-cta{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:700;color:var(--blue);}
.snc-cta svg{transition:transform .2s ease;}
.services-nav-card:hover .snc-cta svg{transform:translateX(4px);}

/* Pricing/bundle card (service pages) */
.pricing-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px;text-align:center;}
.pricing-card h3{font-size:var(--fs-h3) !important;margin-top:4px;}
.pricing-amount{font-size:var(--fs-h4);color:var(--ink);margin:10px 0 22px;}
.pricing-amount strong{color:var(--blue);font-size:var(--fs-h3);font-weight:800;}
.pricing-amount span{color:var(--muted);font-size:var(--fs-small);}
.pricing-items{display:inline-flex;flex-direction:column;gap:10px;text-align:left;margin:0 auto 26px;}
.pricing-items li{display:flex;gap:8px;font-size:var(--fs-body);color:var(--ink);}
.pricing-items li::before{content:"✓";color:var(--blue);font-weight:800;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start;}
.pricing-grid .pricing-card{padding:32px 26px;}
.pricing-grid .pricing-card .btn{width:100%;}
@media (max-width:900px){.pricing-grid{grid-template-columns:minmax(0,1fr);max-width:420px;margin:0 auto;}}

/* template-landing.php block renderer — a bordered highlight card for a single important note
   (e.g. the AVG/privacy caveat on the camera-security landing page), distinct from prose. */
.info-callout{background:var(--bg-alt);border-left:3px solid var(--blue);border-radius:var(--radius-sm);padding:22px 26px;}
.info-callout strong{display:block;font-family:var(--font-heading);font-size:var(--fs-h5);margin-bottom:8px;color:var(--ink);}
.info-callout p{margin:0;color:var(--muted);font-size:var(--fs-body);}
/* The 'steps'/'compare' block renderers set an inline grid-template-columns (column count varies
   per block, e.g. 2, 3 or 4 items) — inline style beats .steps/.card-grid-3's own responsive rules
   regardless of media query, so those need re-asserting here with !important at the same breakpoints. */
@media (max-width:1024px){.steps[style]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;}}
@media (max-width:900px){.card-grid-3[style]{grid-template-columns:minmax(0,1fr) !important;}}
@media (max-width:600px){.steps[style]{grid-template-columns:minmax(0,1fr) !important;}}

/* Checklist band */
.checklist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 32px;}
.checklist-grid li{display:flex;gap:8px;font-size:var(--fs-body);color:var(--ink);padding:8px 0;border-bottom:1px dashed var(--border);}
.checklist-grid li::before{content:"✓";color:var(--blue);font-weight:800;}
@media (max-width:900px){.checklist-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:600px){.checklist-grid{grid-template-columns:minmax(0,1fr);}}

/* Projects — portfolio-style interactive cards: photo zoom on hover, card lift, location badge
   overlapping the photo (same proven pattern as the daily-services cards), chip-style stats,
   and a real CTA button with an animated arrow, so the whole card reads as clickable. */
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.project-card{
  display:block;border-radius:var(--radius);overflow:visible;box-shadow:var(--shadow);background:#fff;border:1px solid var(--border);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.project-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(10,27,51,.18);border-color:var(--blue);}
/* .pc-photo itself stays overflow:visible so the .pc-tag location badge (offset -16px below
   the photo) never gets sliced off; the zoom-on-hover clipping happens one level down, on
   .pc-photo-clip, which wraps only the <img> — same fix pattern already used for .sc-badge. */
.project-card .pc-photo{position:relative;overflow:visible;}
.project-card .pc-photo-clip{overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;}
.project-card .pc-photo-clip img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s ease;}
.project-card:hover .pc-photo-clip img{transform:scale(1.09);}
.project-card .pc-tag{
  position:absolute;left:16px;bottom:-16px;background:var(--blue);color:#fff;font-weight:700;font-size:var(--fs-small);
  padding:8px 16px;border-radius:999px;box-shadow:0 8px 18px rgba(0,119,255,.35);white-space:nowrap;z-index:2;
}
.project-card .pc-tags{position:absolute;left:16px;top:16px;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 32px);}
.project-card .pc-tags span{background:rgba(10,27,51,.8);color:#fff;font-size:var(--fs-small);font-weight:700;padding:5px 10px;border-radius:999px;} /* 3.8.3: no backdrop-filter: a blur layer per card stalled Safari rendering while scrolling */
.project-card .pc-body{padding:28px 22px 22px;}
.pc-kicker{display:block;font-size:var(--fs-small);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.project-card h3{font-size:var(--fs-h4) !important;margin-bottom:14px;}
.project-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;}
.project-meta span{
  display:inline-flex;align-items:center;gap:5px;background:var(--bg-alt);border-radius:999px;
  padding:6px 12px;font-size:var(--fs-small);font-weight:600;color:var(--ink);
}
.pc-cta{display:inline-flex;align-items:center;gap:8px;}
.pc-cta svg{transition:transform .2s ease;}
.project-card:hover .pc-cta svg{transform:translateX(4px);}
.section-foot-link{text-align:center;margin-top:36px;}
@media (max-width:900px){.project-grid{grid-template-columns:minmax(0,1fr);}}

/* City band */
.city-band{text-align:center;}
.city-band .lead{max-width:560px;margin:0 auto 24px;color:#b9c6db;}
.city-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:920px;margin:32px auto 0;}
.city-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 18px;font-size:var(--fs-small);font-weight:600;color:#e7edf6;}
.city-chip::before{content:"📍";margin-right:6px;font-size:var(--fs-small);}

/* Plain city list inside a floating white card, matching intercomdirect.nl (no pill chips there) */
.city-grid-plain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 24px;text-align:left;}
.city-grid-plain span{display:block;padding:6px 0;font-size:var(--fs-body);font-weight:600;color:var(--ink);}
.city-grid-plain span::before{content:"📍";color:var(--blue);margin-right:8px;font-size:var(--fs-small);}
@media (max-width:900px){.city-grid-plain{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:600px){.city-grid-plain{grid-template-columns:minmax(0,1fr);}}

/* Daily services grid (9) — real photo + solid-blue label badge overlapping the photo, matching intercomdirect.nl.
   The image itself is rounded (not a clipping parent), so the badge — positioned relative to .sc-photo — can
   overlap below the photo edge without being clipped, no matter how many lines its text wraps to. */
.card-grid-9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--gap) + 12px) var(--gap);}
.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:visible;box-shadow:var(--shadow);}
.service-card .sc-photo{position:relative;}
.service-card .sc-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--radius) var(--radius) 0 0;}
.service-card .sc-badge{
  position:absolute;left:16px;bottom:-18px;background:var(--blue);color:#fff;font-weight:700;
  font-size:var(--fs-body);line-height:1.3;padding:10px 16px;border-radius:10px;box-shadow:0 8px 18px rgba(0,119,255,.35);
  max-width:calc(100% - 32px);
}
.service-card .sc-body{padding:34px 22px 22px;}
.service-card h4{font-size:var(--fs-h5) !important;margin-bottom:8px;display:none;}
.service-card p{font-size:var(--fs-small);color:var(--muted);margin:0;}
@media (max-width:900px){.card-grid-9{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:600px){.card-grid-9{grid-template-columns:minmax(0,1fr);}}

/* Partners */
.partners-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-split);align-items:center;}
.logo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:center;}
.logo-grid img,.brand-grid img{height:52px;max-height:52px;width:100%;object-fit:contain;display:block;margin:0 auto;filter:grayscale(1);opacity:.75;transition:opacity .15s, filter .15s;}
.logo-grid img:hover,.brand-grid img:hover{filter:none;opacity:1;}
/* Text wordmark fallback for the 2 brands (Comelit, Ericsson) with no logo file in the media library —
   kept visually consistent with the real logo images rather than leaving a broken <img>. */
.brand-text-badge{display:flex;align-items:center;justify-content:center;height:52px;margin:0;font-family:var(--font-heading);font-weight:700 !important;font-size:var(--fs-h6);color:var(--muted);opacity:.75;text-align:center;transition:opacity .15s,color .15s;}
.brand-text-badge:hover{opacity:1;color:var(--ink);}

/* template-brand.php hero logo card — deliberately its own class, NOT .hero-media, because most
   real logo files are wide/short banners (e.g. a 1024x147 Aiphone PNG) and `.hero-media img`'s
   sitewide aspect-ratio:5/4 + object-fit:cover rule would crop them down to a few letters. */
.brand-hero-logo img{max-width:70%;max-height:120px;width:auto;height:auto;object-fit:contain;}
.callout-box{background:var(--bg-alt);border-radius:var(--radius);padding:24px;margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
@media (max-width:900px){.partners-split{grid-template-columns:minmax(0,1fr);}}

/* Werkwijze steps — each step draws its own connecting segment to the NEXT step's circle
   (rather than one long line across the whole row guessed via percentages, which didn't
   actually line up with the circles: they sit at the left edge of each grid column, not its
   center, so a percentage-based inset was always going to drift off-target at some widths).
   A segment starts at exactly this circle's right edge (44px = its own diameter) and runs
   calc(100% - 2px) — column width, plus the fixed 20px gap and next circle's 22px radius,
   minus this circle's own 44px width, nets out to "-2px" — landing exactly on the next
   circle's center regardless of how wide each responsive column actually renders. */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);}
.step{text-align:left;position:relative;}
.step .num{
  position:relative;z-index:2;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-lead);margin-bottom:14px;
}
.step h4{font-size:var(--fs-h5) !important;}
.step p{font-size:var(--fs-small);color:var(--muted);}
@media (min-width:1025px){
  .step:not(:last-child)::before,
  .step:not(:last-child)::after{
    content:"";position:absolute;top:22px;left:44px;width:calc(100% - 2px);height:2px;z-index:1;
  }
  .step:not(:last-child)::before{background:var(--border);}
  .step:not(:last-child)::after{
    background:var(--blue);transform:scaleX(0);transform-origin:left center;
    transition:transform .6s cubic-bezier(.4,0,.2,1);
  }
  .steps.in-view .step:not(:last-child)::after{transform:scaleX(1);}
  .steps .reveal-item:nth-child(1){transition-delay:0s;}
  .steps .reveal-item:nth-child(1)::after{transition-delay:.1s;}
  .steps .reveal-item:nth-child(2){transition-delay:.15s;}
  .steps .reveal-item:nth-child(2)::after{transition-delay:.25s;}
  .steps .reveal-item:nth-child(3){transition-delay:.3s;}
  .steps .reveal-item:nth-child(3)::after{transition-delay:.4s;}
  .steps .reveal-item:nth-child(4){transition-delay:.45s;}
  .steps .reveal-item:nth-child(4)::after{transition-delay:.55s;}
  .steps .reveal-item:nth-child(5){transition-delay:.6s;}
}
@media (max-width:1024px){.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:600px){.steps{grid-template-columns:minmax(0,1fr);}}

/* Brand logos */
.brand-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
@media (max-width:900px){.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* Testimonials */
.testi-head{display:flex;align-items:center;gap:16px;justify-content:center;margin-bottom:40px;}
.testi-head .g-badge{font-size:var(--fs-h3);font-weight:800;color:var(--blue);}
.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.testi-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);}
.testi-card .stars{color:var(--orange);letter-spacing:2px;margin-bottom:10px;display:block;}
.testi-card p{font-size:var(--fs-body);color:var(--ink);}
.testi-card .who{font-weight:700;font-size:var(--fs-small);color:var(--muted);margin-top:14px;}
@media (max-width:900px){.testi-grid{grid-template-columns:minmax(0,1fr);}}

/* FAQ */
.faq-list{max-width:800px;margin:0 auto;}
.faq-list details{border-bottom:1px solid var(--border);padding:18px 0;}
.faq-list summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-h5);}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+";font-size:var(--fs-h4);color:var(--blue);}
.faq-list details[open] summary::after{content:"–";}
.faq-list p{margin-top:12px;color:var(--muted);font-size:var(--fs-body);}

/* Closing CTA */
.closing-cta{background:var(--blue);border-radius:var(--radius);padding:clamp(2rem,1.2rem + 3vw,3.5rem);text-align:center;color:#fff;}
.closing-cta h2{font-size:var(--fs-h2) !important;}
.closing-cta p{color:#dbe9ff;max-width:var(--measure);margin:0 auto var(--space-3);}
.closing-ctas{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap;}

/* Blog teasers */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.blog-card h4{font-size:var(--fs-h5) !important;}
.blog-card p{font-size:var(--fs-small);color:var(--muted);}
.blog-card a{color:var(--blue);font-weight:700;font-size:var(--fs-small);}
@media (max-width:900px){.blog-grid{grid-template-columns:minmax(0,1fr);}}

/* ---------- Footer: white, matching intercomdirect.nl exactly (blue trust-line above, blue bottom bar below) ---------- */
.site-footer{background:#fff;color:var(--ink);}
.footer-trustline{background:var(--blue);color:#fff;font-weight:700;font-size:var(--fs-small);text-align:center;padding:14px 24px;}
.footer-trustline span{margin:0 10px;}
.footer-main{padding-top:var(--space-4);padding-bottom:var(--space-4);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:32px;border-bottom:1px solid var(--border);}
.footer-main h5{color:var(--blue);font-size:var(--fs-h6);margin-bottom:18px;}
.footer-main ul{display:flex;flex-direction:column;gap:12px;}
.footer-main a{font-size:var(--fs-small);color:var(--ink);}
.footer-main a:hover{color:var(--blue);}
.footer-logo img{height:40px;margin-bottom:16px;}
.footer-main p{color:var(--muted);font-size:var(--fs-small);}
.footer-socials{display:flex;gap:10px;margin-top:18px;}
.footer-socials a{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--blue);color:var(--blue) !important;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;
}
.footer-socials a:hover{background:var(--blue);color:#fff !important;}
.footer-bottom{background:var(--blue);}
.footer-bottom-inner{padding:18px 24px;font-size:var(--fs-small);color:#eaf2ff;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media (max-width:900px){.footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media (max-width:600px){.footer-main{grid-template-columns:minmax(0,1fr);}}

@media (max-width:640px){
  .steps{grid-template-columns:minmax(0,1fr);}
  .hero-float{position:static;margin-top:16px;}
}

/* ---------- Scroll-reveal + back-to-top (progressive enhancement, see custom.js) ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-stagger.in-view .reveal-item{opacity:1;transform:translateY(0);}
.reveal-item{opacity:0;transform:translateY(24px);transition:opacity .5s ease, transform .5s ease;}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-item{opacity:1 !important;transform:none !important;transition:none !important;}
}

.back-to-top{
  position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;
  background:var(--blue) !important;color:#fff !important;border:none;box-shadow:0 10px 24px rgba(0,119,255,.35);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:900;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--blue-dark) !important;}

/* ---------- Mobile sticky call/quote bar (lead-conversion aid, phones only) ---------- */
.mobile-cta-bar{display:none;}
@media (max-width:767px){
  .mobile-cta-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:950;gap:var(--space-1);
    background:#fff;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(10,27,51,.12);border-top:1px solid var(--border);
  }
  .mcb-call{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:var(--btn-h);padding:0 16px;border-radius:999px;border:2px solid var(--blue);color:var(--blue) !important;font-weight:600;font-size:var(--fs-body);font-family:var(--font-heading);
  }
  .mcb-quote{flex:1;margin:0;min-height:var(--btn-h);}
  body{padding-bottom:64px;}
  .back-to-top{bottom:76px;}
}

/* ---------- Generic page/post content (page.php, single.php, single-project.php) ---------- */
.page-content h2,.page-content h3{margin-top:1.2em;}
.page-content p,.page-content li{color:var(--muted);max-width:var(--measure);}
.container-text{max-width:calc(var(--measure) + 48px);}
.page-content ul,.page-content ol{margin:0 0 1em;padding-left:1.4em;list-style:revert;color:var(--muted);}
.page-content img{border-radius:var(--radius-sm);}
.page-content a{color:var(--blue);text-decoration:underline;}
/* 3.6.2 one grid rule: every fr track is minmax(0,Xfr), so long words or images can never push a column
   wider than the container (cause of the 360px overflow in .services-nav-grid and others). */
.services-nav-card,.project-card,.blog-card{min-width:0;}
h1,h2,h3,h4{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;} /* long Dutch compounds (intercomsystemen) on 360px */
.snc-body h4,.pc-body h3,.blog-card h4{overflow-wrap:break-word;hyphens:auto;}

/* Migrated content (3.6.1): blog posts and former Divi pages are plain HTML in the editor.
   .id-cols is the one content grid: columns side by side from 768px, stacked below, tops aligned. */
.page-content img{max-width:100%;height:auto;}
.page-content table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:var(--fs-body);display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.page-content th,.page-content td{border:1px solid var(--border);padding:8px 12px;text-align:left;vertical-align:top;}
.page-content th{background:var(--bg-alt);color:var(--ink);}
.page-content .id-section{margin:0 0 8px;}
.page-content .id-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;margin:0 0 16px;}
@media (min-width:768px){.page-content .id-cols{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);}}
.page-content .id-col{min-width:0;}
.page-content .id-col > :first-child{margin-top:0;}
.page-content .id-figure{margin:0 0 16px;}
.page-content .id-figure img{width:100%;display:block;}
.page-content .id-button{margin:8px 0 16px;}
.page-content .id-button .btn{text-decoration:none;color:#fff;white-space:normal;max-width:100%;text-align:center;}
.page-content .id-toggle{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;margin:0 0 10px;background:#fff;}
.page-content .id-toggle summary{cursor:pointer;font-weight:700;color:var(--ink);}
.page-content .id-toggle[open] summary{margin-bottom:8px;}
.page-content .id-video{position:relative;aspect-ratio:16/9;margin:0 0 16px;}
.page-content .id-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--radius-sm);}

/* ---------- 3.7.0 customer journey: hero actions, task choices, next-step bar ---------- */
.text-small{font-size:var(--fs-small);}
.text-muted{color:var(--muted);}
.hero-actions{margin:var(--space-3) 0 var(--space-2);}
.hero-actions.is-center{text-align:center;}
.hero-actions.is-center .btn-group,.hero-actions.is-center .hero-choices{justify-content:center;}
.hero-choices-label{font-size:var(--fs-small);color:var(--muted);margin:var(--space-3) 0 var(--space-1);}
.hero-choices{display:flex;flex-wrap:wrap;gap:var(--space-1);}
.hero-choices a{
  display:inline-flex;align-items:center;gap:6px;min-height:var(--btn-h-sm);padding:0 14px;
  background:#fff;border:1px solid var(--border);border-radius:999px;font-size:var(--fs-small);font-weight:600;color:var(--ink);
  transition:border-color .15s ease,color .15s ease;
}
.hero-choices a svg{color:var(--blue);flex:none;}
.hero-choices a:hover{border-color:var(--blue);color:var(--blue);}
@media (max-width:767px){
  .hero-actions .btn-group .btn{flex:1 1 100%;}
  .hero-choices a{min-height:var(--btn-h);}
}
/* Compact "next step" bar for articles, archives and contact (template-parts/next-step.php) */
.next-step{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin:var(--space-2) 0 var(--space-3);}
.next-step p{margin:0;color:var(--ink);font-weight:600;max-width:42ch;}
.next-step .btn-group{gap:var(--space-1);}
@media (max-width:767px){.next-step .btn{flex:1 1 100%;}}
.page-header{padding:var(--space-hero) 0 0;}
.page-header h1{margin-bottom:var(--space-1);}
.post-meta{display:block;font-size:var(--fs-small);color:var(--muted);margin-bottom:var(--space-1);}
/* Blog archive cards + article image (3.7.0): same card pattern as projects, 16:9 photos, tops aligned */
.post-hero-image img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin:0 0 var(--space-3);}
.blog-grid{align-items:stretch;}
a.blog-card{display:flex;flex-direction:column;padding:0;overflow:hidden;color:inherit;transition:border-color .2s ease, box-shadow .2s ease;}
a.blog-card:hover{border-color:var(--blue);box-shadow:var(--shadow);}
.blog-card-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.blog-card-body{display:flex;flex-direction:column;flex:1;padding:var(--space-3);}
.blog-card-body p{font-size:var(--fs-small);flex:1;}
.blog-card-title{font-size:var(--fs-h5) !important;font-family:var(--font-body) !important;color:var(--ink) !important;margin-bottom:var(--space-1);}
.archive-intro{color:var(--muted);max-width:var(--measure);margin-bottom:var(--space-2);}
.pagination{margin-top:var(--space-4);}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--space-1);justify-content:center;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:var(--btn-h);min-height:var(--btn-h);padding:0 12px;border:1px solid var(--border);border-radius:999px;font-weight:600;font-size:var(--fs-small);}
.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff;}
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.container-page{max-width:calc(960px + 48px);}
/* 3.7.0 balance: text never wider than the measure; on desktop the hero photo/logo card is as tall as the text
   column (no small image next to a tall text block). */
.container > p,.section-head p,.faq-list{max-width:var(--measure);}
.faq-list{margin-left:auto;margin-right:auto;}
.brand-hero-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:clamp(1.5rem,1rem + 3vw,3.75rem);aspect-ratio:4/3;}
.brand-hero-card.is-text{background:var(--blue);}
.brand-hero-wordmark{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h2);color:#fff;}
@media (min-width:1025px){
  .hero .container{align-items:stretch;}
  .hero .hero-copy{align-self:center;}
  .hero-media{display:flex;flex-direction:column;}
  .hero-media > img,.hero-media > video{flex:1;height:100%;min-height:380px;aspect-ratio:auto;}
  .hero-media > .brand-hero-card{flex:1;height:100%;aspect-ratio:auto;min-height:380px;}
}

/* 3.7.0 mobile: the sticky call/quote bar only slides in once the page's own hero actions are scrolled away,
   so the first screen never shows the same two buttons twice. Without JS the bar is always visible. */
@media (max-width:767px){
  body.mcb-auto .mobile-cta-bar{transform:translateY(110%);transition:transform .25s ease;}
  body.mcb-auto.mcb-show .mobile-cta-bar{transform:none;}
}
.hero-actions + .trust-checks{margin-top:var(--space-3);}

/* ---------- 3.8.0 ---------- */
/* Service cards: one row on the container width, centred, any count (cols-N set by the template).
   Equal heights per row, titles reserve 2 lines, the link is pinned to the bottom. */
.services-nav-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);}
.services-nav-grid > .services-nav-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;}
.services-nav-grid.cols-5 > .services-nav-card{max-width:calc((100% - 4 * var(--gap)) / 5);}
.services-nav-grid.cols-4 > .services-nav-card{max-width:calc((100% - 3 * var(--gap)) / 4);}
.snc-body{display:flex;flex-direction:column;flex:1;padding:var(--space-2) var(--space-2) var(--space-3);}
.snc-body h4{min-height:calc(2em * 1.2);margin:0 0 var(--space-1);}
.snc-body p{font-size:var(--fs-small);color:var(--muted);margin:0 0 var(--space-2);}
.snc-cta{margin-top:auto;min-height:var(--btn-h-sm);}
@media (max-width:1024px){
  .services-nav-grid > .services-nav-card{flex:1 1 calc((100% - 2 * var(--gap)) / 3);max-width:calc((100% - 2 * var(--gap)) / 3) !important;}
  .services-nav-grid.cols-4 > .services-nav-card{flex-basis:calc((100% - var(--gap)) / 2);max-width:calc((100% - var(--gap)) / 2) !important;}
}
@media (max-width:640px){
  .services-nav-grid > .services-nav-card{flex-basis:calc((100% - var(--gap)) / 2);max-width:calc((100% - var(--gap)) / 2) !important;}
}
/* Same pattern for the other card grids: equal heights, link at the bottom. */
.project-card{display:flex;flex-direction:column;}
.project-card .pc-body{display:flex;flex-direction:column;flex:1;}
.project-card h3{min-height:calc(2em * 1.2);}
.project-card .pc-cta{margin-top:auto;}
.system-card .btn-link{margin-top:auto;}

/* City links: real links, clear hover/focus, whole row is the tap target, pins aligned */
.city-grid-plain{list-style:none;margin:0;padding:0;}
.city-grid-plain li{margin:0;}
.city-grid-plain a,.city-grid-plain span{display:flex;align-items:center;gap:8px;min-height:var(--btn-h);padding:0 8px;margin:0 -8px;border-radius:var(--radius-sm);font-size:var(--fs-body);font-weight:600;color:var(--ink);}
.city-grid-plain span::before,.city-grid-plain a::before{content:"";flex:none;width:16px;height:16px;margin:0;background:var(--blue);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center/contain no-repeat;}
.city-grid-plain a{transition:background .15s ease,color .15s ease;}
.city-grid-plain a:hover{background:var(--bg-alt);color:var(--blue);}
.city-grid-plain a:focus-visible{outline:3px solid rgba(0,119,255,.35);outline-offset:0;color:var(--blue);}
.city-grid-plain a::after{content:"\203A";margin-left:auto;color:var(--muted);font-size:var(--fs-h5);line-height:1;}
.city-grid-plain a:hover::after{color:var(--blue);}
.floating-wrap{margin-bottom:var(--space-head);}

/* Compact repair banner (template-parts/repair-banner.php) */
.section-compact{padding:var(--space-4) 0;}
.repair-banner{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-left:4px solid var(--orange);border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow);}
.section-alt .repair-banner{background:#fff;}
.rb-icon{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(243,107,18,.12);color:var(--orange);display:flex;align-items:center;justify-content:center;}
.rb-text{flex:1 1 320px;min-width:0;}
.rb-title{font-size:var(--fs-h4) !important;margin:0 0 4px;}
.rb-text p{margin:0;}
@media (max-width:767px){.repair-banner .btn-group{width:100%;}.repair-banner .btn{flex:1 1 100%;}}

/* Reviews (template-parts/testimonials.php) */
.reviews-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap-split);align-items:center;margin-bottom:var(--space-head);}
.reviews-intro p{max-width:var(--measure);}
.reviews-score{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-3);text-align:center;}
.rs-brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-small);color:var(--ink);}
.rs-row{display:flex;align-items:baseline;justify-content:center;gap:2px;margin:var(--space-1) 0 4px;font-family:var(--font-heading);color:var(--ink);}
.rs-num{font-size:calc(var(--fs-h1) * 1.25);font-weight:700;line-height:1;}
.rs-of{font-size:var(--fs-h4);color:var(--muted);font-weight:600;}
.rs-count{font-size:var(--fs-small);margin:var(--space-1) 0 var(--space-1);}
.stars-meter{position:relative;display:inline-block;line-height:0;vertical-align:middle;}
.stars-meter svg{width:var(--star,18px);height:var(--star,18px);margin-right:2px;}
.stars-meter .stars-bg svg{fill:#d9dee6;}
.stars-meter .stars-fg{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;}
.stars-meter .stars-fg svg{fill:#fbbc04;}
.stars-meter.is-large{--star:30px;}
.stars-meter.is-small{--star:16px;}
.reviews-body.has-featured{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gap);align-items:start;}
.reviews-masonry{columns:2 260px;column-gap:var(--gap);}
.reviews-body:not(.has-featured) .reviews-masonry{columns:3 260px;}
.review-card{break-inside:avoid;margin:0 0 var(--gap);background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow);}
.review-card.is-featured{margin:0;border-top:4px solid var(--blue);}
.review-card.is-featured blockquote{font-size:var(--fs-lead);color:var(--ink);}
.review-top{display:flex;align-items:center;gap:12px;margin-bottom:var(--space-1);}
.review-top figcaption{flex:1;min-width:0;line-height:1.3;}
.review-top strong{display:block;color:var(--ink);font-size:var(--fs-body);}
.review-date{font-size:var(--fs-small);color:var(--muted);}
.review-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--font-heading);}
.review-avatar.is-blue{background:var(--blue);}
.review-avatar.is-orange{background:var(--orange);}
.review-avatar.is-navy{background:var(--navy);}
.review-card blockquote{margin:var(--space-1) 0 0;color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);}
@media (max-width:900px){.reviews-head,.reviews-body.has-featured{grid-template-columns:minmax(0,1fr);}}
/* Phones: the highlighted review + 2 more; the rest is one tap away on Google */
@media (max-width:767px){.reviews-masonry .review-card:nth-child(n+3){display:none;}.reviews-featured{margin-bottom:var(--gap);}}
/* Titles that can wrap to 3 lines: reserve 3 lines so the text below starts on one line in every row */
@media (max-width:640px){.snc-body h4{font-size:var(--fs-small) !important;-webkit-hyphens:manual;hyphens:manual;min-height:calc(2em * 1.2);}}
.blog-card h4,.blog-card-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(3em * 1.2);}
@media (max-width:400px){.snc-body h4{min-height:calc(3em * 1.2);}}

/* ---------- 3.8.1 footer: clearly styled navy footer between the blue trust line and blue bottom bar ----------
   (production's footer is a solid brand colour too). Side gutters come from .container (the old
   `padding:56px 0 40px` on the same element removed them, so on phones the footer text touched x=0). */
.site-footer .footer-main{background:var(--navy);max-width:none;border-bottom:0;
  padding-left:max(24px, calc((100% - var(--container)) / 2 + 24px));padding-right:max(24px, calc((100% - var(--container)) / 2 + 24px));
  padding-top:var(--space-section);padding-bottom:var(--space-4);}
.site-footer .footer-main h5{color:#fff !important;font-size:var(--fs-h6);margin-bottom:var(--space-1);}
.site-footer .footer-main p{color:#b9c6db;}
.site-footer .footer-main a{color:#e7edf6;font-size:var(--fs-small);display:inline-flex;align-items:center;min-height:var(--btn-h-sm);}
.site-footer .footer-main a:hover,.site-footer .footer-main a:focus-visible{color:#fff;text-decoration:underline;}
.site-footer .footer-main li{color:#b9c6db;font-size:var(--fs-small);}
.site-footer .footer-main ul{gap:0;}
.site-footer .footer-logo img{background:#fff;border-radius:8px;padding:6px 8px;height:44px;}
.site-footer .footer-socials a{border-color:rgba(255,255,255,.6);color:#fff !important;width:44px;height:44px;}
.site-footer .footer-socials a:hover{background:#fff;color:var(--navy) !important;}
.site-footer .fc-btn{gap:8px;}
.site-footer .footer-bottom{background:var(--blue);}
@media (max-width:767px){
  .site-footer .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3) var(--space-2);
    grid-template-areas:"contact contact" "services company" "about about";padding-top:var(--space-4);}
  .site-footer .footer-contact{grid-area:contact;}
  .site-footer .footer-services{grid-area:services;}
  .site-footer .footer-company{grid-area:company;}
  .site-footer .footer-about{grid-area:about;}
  .site-footer .footer-main .footer-logo{display:none;}   /* the header logo is already on screen */
  .site-footer .footer-contact ul{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-1);}
  .site-footer .footer-contact .fc-btn{width:100%;min-height:var(--btn-h);justify-content:center;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;font-size:var(--fs-body);font-weight:600;color:#fff;}
  .site-footer .footer-contact li:last-child{text-align:center;}
  .site-footer .footer-main a{min-height:var(--btn-h);}
  /* trust line: compact ticks instead of a long "|"-separated sentence */
  .footer-trustline{font-size:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:12px 16px;}
  .footer-trustline span{font-size:var(--fs-small);margin:0;}
  .footer-trustline span::before{content:"\2713\00a0";}
  /* the sticky call/quote bar must never cover the last footer lines (incl. iOS safe area) */
  body{padding-bottom:0 !important;}
  .footer-bottom-inner{padding-bottom:calc(18px + 64px + env(safe-area-inset-bottom)) !important;flex-direction:column;}
}
/* Off-canvas menu: no shadow (and not focusable) while closed. Its -12px shadow used to bleed in as a grey
   strip down the right edge of every phone/tablet screen. */
@media (max-width:1024px){
  .main-nav{box-shadow:none;visibility:hidden;transition:transform .25s ease, visibility 0s linear .25s;}
  .main-nav.nav-open{box-shadow:-12px 0 32px rgba(10,27,51,.18);visibility:visible;transition:transform .25s ease, visibility 0s;}
}
/* Touch screens (phones and iPads): every footer link is a full 44px target */
@media (pointer:coarse){.site-footer .footer-main a{min-height:var(--btn-h);}}

/* ---------- 3.8.2 device QA fixes (real iPhone/iPad/Android profiles) ---------- */
/* Touch screens: no endless background drift in the hero (battery + it starved scroll/reveal work in Safari) */
@media (pointer:coarse), (max-width:1024px){.hero::before{animation:none;}}
/* Tap targets >= 44px on touch screens */
@media (pointer:coarse){
  .utility-bar .container{height:44px;}
  .utility-bar a{display:inline-flex;align-items:center;min-height:44px;}
  .project-hero .back-link{min-height:44px;}
  .info-card-main{display:inline-flex !important;align-items:center;min-height:44px;}
  .pf-btn{min-height:44px;}
  body .elementor-button{min-height:44px !important;display:inline-flex !important;align-items:center;justify-content:center;}
}
.site-logo{display:inline-flex;align-items:center;min-height:44px;}
@media (max-width:1024px){.main-nav > ul > li:last-child > a{min-height:var(--btn-h);}}
/* iOS zooms into inputs under 16px: all form fields use the body size */
.contact-form input,.contact-form textarea,.contact-form select{font-size:var(--fs-body);}
/* 3.8.2: iPad (touch, >=768px) — task chips and FAQ questions are full 44px targets too */
@media (pointer:coarse){
  .hero-choices a{min-height:var(--btn-h);}
  .faq-list summary,.page-content .id-toggle summary{min-height:var(--btn-h);display:flex;align-items:center;}
}
/* 3.8.3: Elementor form fields (/offerte/) at 16px on every width, so iOS/iPadOS never zooms into the form */
body .elementor-field-group .elementor-field,body .elementor-field-group select,body .elementor-field-group textarea{font-size:16px !important;}

/* ========== 3.9.0 centring system (hard gate: tools/qa/centre-check.js must report 0) ==========
   1. One way to centre a section: .is-centered (replaces every inline text-align:center). Every block inside a
      centred context is centred as a BLOCK too (margin-inline:auto), so a width-capped paragraph or list never
      sits left of the heading's axis. Left-aligned contexts keep margin-inline 0. */
.is-centered,.text-center{text-align:center;}
.text-center{margin-left:auto;margin-right:auto;}
.container-narrow{max-width:820px;}
.is-centered > *,.is-centered .hero-copy,.is-centered .hero-copy > *,.section-head > *,.band-blue > .container > *,.closing-cta > *,.pricing-card > *{margin-left:auto;margin-right:auto;}
.is-centered .hero-copy .hero-actions .btn-group,.is-centered .hero-choices{justify-content:center;}
/* 2. Checklists: a centred flex block; the column count follows the item count (2x2 for 4, 2 for 2, else 3 with a
      centred last row). Tick and text stay aligned inside each item. */
.checklist-grid{display:flex !important;flex-wrap:wrap;justify-content:center;gap:10px 32px;margin-left:auto;margin-right:auto;text-align:left;padding:0;}
.checklist-grid > li{flex:0 0 calc((100% - 2 * 32px) / 3);min-width:0;margin:0;}
.checklist-grid:has(> li:nth-child(4):last-child),.checklist-grid:has(> li:nth-child(2):last-child){max-width:720px;}
.checklist-grid:has(> li:nth-child(4):last-child) > li,.checklist-grid:has(> li:nth-child(2):last-child) > li{flex-basis:calc((100% - 32px) / 2);}
@media (max-width:900px){.checklist-grid > li,.checklist-grid:has(> li:nth-child(4):last-child) > li{flex-basis:calc((100% - 32px) / 2);}}
@media (max-width:600px){.checklist-grid > li,.checklist-grid:has(> li:nth-child(4):last-child) > li{flex-basis:100%;}}
/* 3. Steps (werkwijze): centred row, columns follow the count; connector line spans exactly to the next circle */
.steps{display:flex !important;flex-wrap:wrap;justify-content:center;gap:var(--gap);}
.steps > .step{flex:1 1 0;min-width:0;max-width:calc((100% - 4 * var(--gap)) / 5);}
.steps:has(> .step:nth-child(3):last-child) > .step{max-width:calc((100% - 2 * var(--gap)) / 3);}
.steps:has(> .step:nth-child(4):last-child) > .step{max-width:calc((100% - 3 * var(--gap)) / 4);}
@media (min-width:1025px){.step:not(:last-child)::before,.step:not(:last-child)::after{width:calc(100% + var(--gap) - 22px);}}
@media (max-width:1024px){.steps > .step,.steps:has(> .step:nth-child(3):last-child) > .step,.steps:has(> .step:nth-child(4):last-child) > .step{flex:0 0 calc((100% - var(--gap)) / 2);max-width:none;}}
@media (max-width:600px){.steps > .step,.steps:has(> .step:nth-child(3):last-child) > .step,.steps:has(> .step:nth-child(4):last-child) > .step{flex-basis:100%;}}
/* 4. Logo rows: centred incomplete last row */
.logo-grid{display:flex !important;flex-wrap:wrap;justify-content:center;gap:20px;}
.logo-grid > *{flex:0 0 calc((100% - 2 * 20px) / 3);}
.brand-grid > *{flex-basis:calc((100% - 5 * 20px) / 6);}
@media (max-width:900px){.brand-grid > *{flex-basis:calc((100% - 2 * 20px) / 3);}}
/* 5. Price card: list centred as a block (ticks aligned), CTA below the list, centred, last element; dark title */
.pricing-items{display:flex !important;flex-direction:column;width:fit-content;max-width:100%;margin:0 auto var(--space-3) !important;}
.pricing-card > .btn{display:flex;width:fit-content;}
body .pricing-card h3{color:var(--ink) !important;}
/* 6. Headings: whole words on tablet/desktop, balanced lines; hyphenation only as a last resort on small phones */
h1,h2,h3,h4{-webkit-hyphens:manual;hyphens:manual;text-wrap:balance;}
@media (max-width:480px){h1,h2,h3,h4{-webkit-hyphens:auto;hyphens:auto;}}
/* 7. More centred rows (same rule everywhere: an incomplete last row is centred, never a lone left item) */
.section-foot-link{max-width:none;margin-left:auto;margin-right:auto;text-align:center;}
.logo-grid > *,.logo-grid img,.brand-grid img{margin:0 !important;min-width:0;}   /* auto margins override justify-content in flex */
.card-grid-9,.team-grid,.blog-grid{display:flex !important;flex-wrap:wrap;justify-content:center;gap:calc(var(--gap) + 12px) var(--gap);}
.card-grid-9 > *,.blog-grid > *{flex:0 0 calc((100% - 2 * var(--gap)) / 3);min-width:0;}
.team-grid > *{flex:0 0 calc((100% - 4 * var(--gap)) / 5);min-width:0;}
@media (max-width:1024px){.team-grid > *{flex-basis:calc((100% - 2 * var(--gap)) / 3);}}
@media (max-width:900px){.card-grid-9 > *,.blog-grid > *{flex-basis:calc((100% - var(--gap)) / 2);}}
@media (max-width:640px){.team-grid > *{flex-basis:calc((100% - var(--gap)) / 2);}}
@media (max-width:600px){.card-grid-9 > *,.blog-grid > *{flex-basis:100%;}}
/* 8. Service/project/blog cards (shared component): no border colour on hover (no layout shift), subtle lift +
      shadow; consistent padding; clearer CTA */
.services-nav-card,.project-card,a.blog-card{border:1px solid var(--border);}
.services-nav-card:hover,.project-card:hover,a.blog-card:hover{border-color:var(--border) !important;}
.services-nav-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(10,27,51,.14);}
.services-nav-card .snc-photo img{aspect-ratio:4/3;object-fit:cover;}
.snc-body{padding:var(--space-3) var(--space-3) var(--space-3);}
.snc-cta{font-size:var(--fs-small);font-weight:700;color:var(--blue);gap:8px;}
.services-nav-card:hover .snc-cta{text-decoration:underline;text-underline-offset:3px;}
/* audio page: the Comelit audio panel sits on the right of the photo */
.img-focus-right{object-position:78% center !important;}
/* 9. Footer partner block (Intercom-Lease) + credit */
.footer-partner{background:var(--navy);border-top:1px solid rgba(255,255,255,.12);}
.footer-partner-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);padding-top:var(--space-3);padding-bottom:var(--space-3);text-align:left;}
.footer-partner .fp-logo{display:inline-flex;align-items:center;background:#fff;border-radius:8px;padding:6px 10px;min-height:44px;}
.footer-partner .fp-logo img{width:180px;height:auto;display:block;}
.footer-partner p{margin:0;color:#b9c6db;font-size:var(--fs-small);max-width:52ch;}
.footer-partner p strong{color:#fff;}
.footer-credit{font-size:var(--fs-small);opacity:.85;}
.footer-credit a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
@media (max-width:767px){.footer-partner-inner{flex-direction:column;text-align:center;}.footer-partner .btn{width:100%;}}
/* 10. Onderhoud section (synced pattern): core buttons in the brand button styles */
.onderhoud-block .blk-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-3);}
.onderhoud-block .blk-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding:0 var(--btn-px);border-radius:999px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-body);background:var(--orange);color:#fff;border:2px solid var(--orange);text-decoration:none;}
.onderhoud-block .is-style-outline .blk-button__link{background:transparent;color:var(--blue);border-color:var(--blue);}
.onderhoud-block .blk-button__link:hover{filter:brightness(.95);}
.onderhoud-block h2{margin-left:auto;margin-right:auto;}
.onderhoud-block p{max-width:var(--measure);margin-left:auto;margin-right:auto;}

/* ========== 3.9.2 headings: size per breakpoint + automatic fit, never a broken word ==========
   Measured worst letter width of any heading word on the site (Open Sans/Rubik 700, Chromium + WebKit): 0.66em.
   1. Type tokens per view (Zawar: <=360 / 361-390 / 391-480 / 481-767 / 768-1023 / 1024-1279 / 1280+). */
:root{--fs-h1:26px;--fs-h2:22px;--fs-h3:19px;}
@media (min-width:361px){:root{--fs-h1:28px;--fs-h2:23px;--fs-h3:19px;}}
@media (min-width:391px){:root{--fs-h1:30px;--fs-h2:24px;--fs-h3:20px;}}
@media (min-width:481px){:root{--fs-h1:34px;--fs-h2:26px;--fs-h3:21px;}}
@media (min-width:768px){:root{--fs-h1:38px;--fs-h2:30px;--fs-h3:22px;}}
@media (min-width:1024px){:root{--fs-h1:42px;--fs-h2:32px;--fs-h3:23px;}}
@media (min-width:1280px){:root{--fs-h1:46px;--fs-h2:36px;--fs-h3:24px;}}
h1,h2,h3,h4,h5,h6{-webkit-hyphens:none !important;hyphens:none !important;text-wrap:balance;}
/* 2. Fit: headings whose longest word is long carry style="--chars:N" (added server-side). They are capped so that
      word always fits the column: font-size <= column width / (N x 0.68em). */
/* Query containers ONLY on elements whose width always comes from their parent. (3.9.2 also had them on .hero-copy
   etc.: size containment gives an intrinsic width of 0, and a centred grid item with auto margins then shrank to 0
   -> "Contact" rendered one letter per line on /contact/.) */
.container,.page-content{container-type:inline-size;}
h1[style*="--chars"]{font-size:min(var(--fs-h1), calc(100cqi / (var(--chars) * 0.68))) !important;}
h2[style*="--chars"]{font-size:min(var(--fs-h2), calc(100cqi / (var(--chars) * 0.68))) !important;}
h3[style*="--chars"]{font-size:min(var(--fs-h3), calc(100cqi / (var(--chars) * 0.68))) !important;}

/* ========== 3.9.2 phones: shorter hero, one step per section, nicer cities ========== */
.city-more{display:none;}
@media (max-width:767px){
  /* hero: 3-line lead, compact trust row, choices as one swipeable chip row, no vertical video (saves a screen + data) */
  .hero{padding-bottom:var(--space-4);}
  .hero .lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:var(--space-2);}
  .hero-actions{margin:var(--space-2) 0 0;}
  .hero-actions .btn-group{gap:var(--space-1);}
  .hero-choices-label{margin:var(--space-2) 0 6px;}
  .hero-choices{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:6px;margin:0 -24px;padding-left:24px;padding-right:24px;scrollbar-width:none;}
  .hero-choices::-webkit-scrollbar{display:none;}
  .hero-choices li{flex:none;scroll-snap-align:start;}
  .hero-choices a{white-space:nowrap;}
  .trust-checks{flex-direction:row;flex-wrap:wrap;gap:6px 14px;margin:var(--space-2) 0 0;}
  .trust-checks li{font-size:var(--fs-small);gap:6px;}
  .trust-checks .tick{width:18px;height:18px;font-size:11px;}
  .hero-media video,.hero-media > img{display:none;}
  .hero-media .hero-float{position:static;display:inline-flex;align-items:baseline;gap:8px;margin-top:var(--space-2);padding:8px 14px;min-width:0;box-shadow:none;}
  .hero-media .hero-float .big{font-size:var(--fs-h4);}
  .hero .container{gap:0;}
  /* long card lists: one swipeable row instead of a 9-screen column */
  .card-grid-9,.section .project-grid:not(.project-grid-wide),.section:not(.page-header) .blog-grid{display:flex !important;flex-wrap:nowrap !important;justify-content:flex-start !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:var(--space-2) !important;margin:0 -24px;padding:4px 24px 12px;scrollbar-width:none;}
  .card-grid-9::-webkit-scrollbar,.project-grid::-webkit-scrollbar,.blog-grid::-webkit-scrollbar{display:none;}
  .card-grid-9 > *,.section .project-grid:not(.project-grid-wide) > *,.section:not(.page-header) .blog-grid > *{flex:0 0 82% !important;max-width:none !important;scroll-snap-align:start;}
  /* cities: 2-column tap tiles, 8 shown, the rest behind "Toon alle 24 steden" (links always in the HTML) */
  .city-grid-plain{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:8px !important;}
  .city-grid-plain a,.city-grid-plain span{margin:0;padding:0 12px;background:var(--bg-alt);border-radius:999px;font-size:var(--fs-small);}
  .city-grid-plain a::after{display:none;}
  .city-grid-plain.is-collapsible:not(.is-expanded) li:nth-child(n+9){display:none;}
  .city-more{display:flex;width:100%;margin-top:var(--space-2);}
}
@media (pointer:coarse){.footer-credit a{display:inline-flex;align-items:center;min-height:44px;}}

/* 3.9.3 centring safety: a centred block child never shrinks to min-content (grid/flex items with auto margins
   shrink-to-fit); it keeps the full width of its column and is capped by its own max-width. */
.is-centered > div,.is-centered > .hero-copy,.is-centered > section,.is-centered > form,.is-centered > figure,.is-centered > ul,.is-centered > ol,
.section-head,.closing-cta > div{width:100%;}
.is-centered > .hero-copy{justify-self:center;}
.nowrap{white-space:nowrap;}
/* 3.9.3 phones: the 5 service cards as one swipe row (2 narrow columns broke titles like "Camerabeveiliging") */
@media (max-width:640px){
  .services-nav-grid{flex-wrap:nowrap !important;justify-content:flex-start !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding-inline:24px;margin:0 -24px;padding:4px 24px 12px;scrollbar-width:none;}
  .services-nav-grid::-webkit-scrollbar{display:none;}
  .services-nav-grid > .services-nav-card,.services-nav-grid.cols-4 > .services-nav-card,.services-nav-grid.cols-5 > .services-nav-card{flex:0 0 72% !important;max-width:none !important;scroll-snap-align:start;} /* 3.9.4: cols-4 rule (0,3,0) capped the cards at 50% */
  .snc-body h4{font-size:var(--fs-h6) !important;min-height:calc(2em * 1.2);}
}
/* 3.9.3 mobile menu: CTA text vertically centred; close button one clean ring (no browser focus ring next to the border) */
@media (max-width:1024px){
  .main-nav > ul > li:last-child > a{display:inline-flex !important;align-items:center;justify-content:center;padding:0 var(--btn-px) !important;border-bottom:0 !important;}
  .nav-close{display:flex;align-items:center;justify-content:center;padding:0;outline:none;-webkit-tap-highlight-color:transparent;}
  .nav-close:focus{outline:none;}
  .nav-close:focus-visible{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,119,255,.25);}
}

/* 3.9.3 footer trust band: one line. Phones/tablets: seamless CSS marquee (duplicate list is aria-hidden),
   pauses on hover/touch; static scrollable line under prefers-reduced-motion. Wide screens: one static line. */
.footer-trustline{display:block !important;font-size:var(--fs-small) !important;padding:12px 0 !important;overflow:hidden;text-align:center;}
.ft-track{display:flex;width:max-content;margin:0 auto;}
.ft-group{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0;}
.ft-group li{white-space:nowrap;padding:0 18px;font-weight:700;}
.ft-group li::before{content:"\2713\00a0";}
.ft-dup{display:none;}
@media (max-width:1199px){
  .ft-track{margin:0;animation:ft-marquee 28s linear infinite;}
  .ft-dup{display:flex;}
  .footer-trustline:hover .ft-track,.footer-trustline:active .ft-track,.footer-trustline:focus-within .ft-track{animation-play-state:paused;}
}
@keyframes ft-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:1199px) and (prefers-reduced-motion:reduce){
  .footer-trustline{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ft-track{animation:none;}
  .ft-dup{display:none;}
}
/* 3.9.3 home hero on phones: trust items as 3 equal compact columns (tick above short text); chip row reads as
   scrollable (right-edge fade + snap + edge padding) */
@media (max-width:767px){
  .trust-checks{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:var(--space-3) 0 var(--space-2) !important;}
  .trust-checks li{flex-direction:column;align-items:center;text-align:center;gap:4px;font-size:var(--fs-small);line-height:1.3;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 6px;}
  .hero-choices{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 48px),transparent);scroll-padding-left:24px;scroll-snap-type:x mandatory;}
  .hero-media .hero-float{margin-top:var(--space-2);}
}
@media (max-width:767px){
  .trust-checks li{display:block !important;}
  .trust-checks .tick{display:flex !important;margin:0 auto 4px;}
}
/* no stray divider + oversized white gap right above the footer band */
.faq-list details:last-child{border-bottom:0;}
body > section:last-of-type{padding-bottom:var(--space-4);}
/* 3.9.3 menu: one close button only (the hamburger turned into a second X on top of the open panel) */
@media (max-width:1024px){body.nav-locked .nav-toggle{visibility:hidden;}}
/* 3.9.3 hero on phones: first screen shows the start of the next section */
@media (max-width:390px){:root{--fs-h1:26px;}}
@media (max-width:767px){
  .hero{padding-top:var(--space-3);}
  .hero .lead{-webkit-line-clamp:2;}
  .hero-choices-label{display:none;}
  .hero-choices{margin-top:var(--space-2);}
  .hero-media .hero-float{display:none;}
}
/* trust items on phones: one line, seamless continuous marquee (duplicate list is aria-hidden), pauses on touch */
.tm-dup{display:none !important;}
@media (max-width:767px){
  .trust-marquee{overflow:hidden;margin:var(--space-2) -24px 0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to right,transparent 0,#000 20px,#000 calc(100% - 20px),transparent);}
  .tm-track{display:flex;width:max-content;animation:ft-marquee 22s linear infinite;}
  .trust-marquee:active .tm-track{animation-play-state:paused;}
  .tm-dup{display:flex !important;}
  .trust-marquee .trust-checks{display:flex !important;flex-wrap:nowrap !important;gap:0 !important;margin:0 !important;padding:0;}
  .trust-marquee .trust-checks li{display:inline-flex !important;align-items:center;flex-direction:row !important;gap:6px;white-space:nowrap;background:none !important;border:0 !important;padding:0 20px 0 0 !important;}
  .trust-marquee .trust-checks .tick{margin:0 !important;}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.trust-marquee{overflow-x:auto;}.tm-track{animation:none;}.tm-dup{display:none !important;}}
@media (max-width:767px){.hero:not(.project-hero) .hero-media{display:none !important;}}

/* ===== 3.9.4 block-editor service pages (template "Dienstpagina (blokken)") ===== */
.intro-split > figure{margin:0;}
.intro-split > figure img{border-radius:var(--radius);width:100%;height:100%;min-height:320px;max-height:560px;object-fit:cover;display:block;}
.intro-split > .blk-group{align-self:center;max-width:var(--measure);}
p.eyebrow{margin-top:0;}
.step p.num{margin-top:0;}
.section .blk-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3);}
.section-head .blk-buttons,.is-centered .blk-buttons{justify-content:center;}
.section .blk-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding:0 var(--btn-px);border-radius:999px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-body);background:var(--orange);color:#fff;border:2px solid var(--orange);text-decoration:none;}
.section .is-style-outline .blk-button__link{background:transparent;color:var(--blue);border-color:var(--blue);}
.form-card{width:100%;max-width:760px;margin:0 auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4);}
.form-fallback{text-align:center;}
.form-fallback p{margin:0 auto var(--space-2);max-width:var(--measure);}
.form-fallback .btn-group{justify-content:center;margin-bottom:0;}
@media (max-width:600px){.form-card{padding:var(--space-3) 18px;}}
@media (max-width:1024px){.intro-split > figure img{height:auto;min-height:0;aspect-ratio:4/3;}}

/* ===== 3.9.4 webshop configurator (concept, template "Webshop-configurator (concept)") ===== */
.page-template-template-configurator .mobile-cta-bar{display:none !important;}
.hero-compact{padding-bottom:0;}
.cfg-section{padding-top:var(--space-4);}
.cfg-progress{list-style:none;margin:0 0 var(--space-4);padding:0;display:flex;gap:6px;counter-reset:none;}
.cfg-pstep{flex:1 1 0;min-width:0;}
.cfg-pstep button{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;}
.cfg-pstep button:disabled{cursor:default;opacity:.55;}
.cfg-pstep button::before{content:"";display:block;width:100%;height:4px;border-radius:4px;background:var(--line, #e3e8ef);}
.cfg-pstep.is-done button::before,.cfg-pstep.is-current button::before{background:var(--blue);}
.cfg-pnum{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-small);background:#fff;border:2px solid var(--line, #e3e8ef);}
.cfg-pstep.is-current .cfg-pnum{background:var(--blue);border-color:var(--blue);color:#fff;}
.cfg-pstep.is-done .cfg-pnum{border-color:var(--blue);color:var(--blue);}
.cfg-pstep.is-current .cfg-plabel{color:var(--ink);font-weight:700;}
.cfg-plabel{font-size:var(--fs-small);text-align:center;line-height:1.2;}
.cfg-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--gap);align-items:start;}
.cfg-panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4);}
.cfg-stepno{margin:0 0 6px;font-size:var(--fs-small);color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.cfg-title{margin:0 0 8px;}
.cfg-title:focus{outline:none;}
.cfg-note{color:var(--muted);margin:0 0 var(--space-3);max-width:var(--measure);}
.cfg-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);}
.cfg-card,.cfg-apt{position:relative;display:flex;flex-direction:column;border:2px solid var(--line, #e3e8ef);border-radius:var(--radius);background:#fff;cursor:pointer;overflow:hidden;transition:border-color .15s, box-shadow .15s;}
.cfg-card input,.cfg-apt input{position:absolute;opacity:0;pointer-events:none;}
.cfg-card:hover,.cfg-apt:hover{border-color:rgba(0,119,255,.45);}
.cfg-card.is-selected,.cfg-apt.is-selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,119,255,.15);}
.cfg-card:focus-within,.cfg-apt:focus-within{outline:3px solid rgba(0,119,255,.35);outline-offset:2px;}
.cfg-card.is-selected::after{content:"\2713";position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}
.cfg-visual{aspect-ratio:4/3;background:linear-gradient(160deg,#eef4ff,#f6f8fb);display:flex;align-items:flex-end;justify-content:center;position:relative;}
.cfg-visual::before{content:"";position:absolute;left:50%;top:14%;transform:translateX(-50%);width:28%;height:66%;border-radius:12px;background:#1d2a3a;box-shadow:inset 0 0 0 6px #2c3d52;}
.cfg-visual-binnenwit::before,.cfg-visual-binnenzwart::before{width:54%;height:46%;top:20%;border-radius:10px;}
.cfg-visual-binnenwit::before{background:#fff;box-shadow:inset 0 0 0 6px #e6ebf2, inset 0 0 0 14px #fff, inset 0 0 0 999px #cfe1ff;}
.cfg-visual-binnenzwart::before{background:#1d2a3a;box-shadow:inset 0 0 0 6px #2c3d52, inset 0 0 0 14px #1d2a3a, inset 0 0 0 999px #33506f;}
.cfg-visual-note{position:relative;margin:0 0 10px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.85);padding:2px 10px;border-radius:999px;}
.cfg-card-body{display:flex;flex-direction:column;gap:4px;padding:var(--space-2) var(--space-3) var(--space-3);}
.cfg-card-name{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h6, 1.1rem);color:var(--ink);}
.cfg-card-sub{color:var(--muted);font-size:var(--fs-small);}
.cfg-card-price{margin-top:6px;font-weight:700;color:var(--blue);}
.cfg-card-price.is-open{color:var(--orange);}
.cfg-apts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;}
.cfg-apt{align-items:center;justify-content:center;padding:18px 6px;text-align:center;}
.cfg-apt-n{font-family:var(--font-heading);font-weight:800;font-size:28px;line-height:1;color:var(--ink);}
.cfg-apt-l{font-size:12px;color:var(--muted);margin-top:4px;}
.cfg-apt.is-more .cfg-apt-n{color:var(--orange);}
.cfg-callout{margin:var(--space-3) 0 0;padding:var(--space-3);border-radius:var(--radius-sm);background:#fff6ef;border:1px solid rgba(243,107,18,.3);}
.cfg-callout p{margin:0 0 var(--space-2);}
.cfg-nav{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap;}
.cfg-nav .btn-accent{margin-left:auto;}
.cfg-nav button:disabled,.cfg-orderform button:disabled{opacity:.5;cursor:not-allowed;}
.cfg-summary{position:sticky;top:96px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-3);}
.cfg-summary-toggle{display:none;}
.cfg-sum-apts{margin:0 0 var(--space-2);font-weight:700;}
.cfg-sum-lines{list-style:none;margin:0;padding:0;}
.cfg-sum-lines li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line, #e3e8ef);font-size:var(--fs-small);}
.csl-price{white-space:nowrap;font-weight:600;}
.cfg-sum-total{margin:var(--space-2) 0 0;}
.cfg-sum-total > div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;}
.cfg-sum-total dt,.cfg-sum-total dd{margin:0;}
.cfg-sum-total .is-main{font-weight:800;font-size:var(--fs-lead);color:var(--ink);}
.cfg-sum-total dd{white-space:nowrap;}
.cfg-sum-note{margin:var(--space-2) 0 0;font-size:12px;color:var(--muted);}
.cfg-orderform{margin-top:var(--space-4);display:grid;gap:12px;max-width:480px;}
.cfg-orderform h3{margin:0;}
.cfg-field{display:grid;gap:4px;font-size:var(--fs-small);font-weight:600;}
.cfg-field input{min-height:44px;border:1px solid var(--line, #d6dde6);border-radius:var(--radius-sm);padding:0 12px;font:inherit;background:#f6f8fb;}
.cfg-orderform .btn{justify-self:start;}
.cfg-noscript{padding:var(--space-3);background:#fff;border-radius:var(--radius);}
@media (max-width:1024px){
  .cfg-layout{grid-template-columns:minmax(0,1fr);}
  .cfg-summary{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;border-radius:var(--radius) var(--radius) 0 0;padding:0;box-shadow:0 -8px 30px rgba(10,27,51,.18);}
  .cfg-summary-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 24px calc(10px + env(safe-area-inset-bottom));background:none;border:0;font:inherit;cursor:pointer;color:var(--ink);}
  .cst-label{font-weight:700;}
  .cst-total{margin-left:auto;font-weight:800;color:var(--blue);}
  .cst-chev{width:10px;height:10px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(-45deg);margin-top:4px;transition:transform .15s;}
  .cfg-summary.is-open .cst-chev{transform:rotate(135deg);margin-top:-4px;}
  .cfg-summary-body{display:none;max-height:60vh;overflow:auto;padding:0 24px 20px;}
  .cfg-summary.is-open .cfg-summary-body{display:block;}
  .page-template-template-configurator .site-footer{padding-bottom:70px;}
}
@media (max-width:600px){
  .cfg-panel{padding:var(--space-3) 18px;}
  .cfg-options{grid-template-columns:minmax(0,1fr);}
  .cfg-apts{grid-template-columns:repeat(3,minmax(0,1fr));}
  .cfg-plabel{display:none;}
  .cfg-pstep.is-current .cfg-plabel{display:none;}
  .cfg-nav .btn{flex:1 1 auto;}
}

/* 3.9.4 team cards on narrow phones: "Projectcoördinator" fits its card (16px side padding left 114px at 360) */
@media (max-width:420px){.team-card{padding-left:8px;padding-right:8px;}}
/* 3.9.4 configurator on phones: option cards as compact rows, so all choices of a step fit on one screen */
@media (max-width:600px){
  .cfg-card{flex-direction:row;align-items:stretch;}
  .cfg-card .cfg-visual{flex:0 0 96px;aspect-ratio:auto;min-height:112px;}
  .cfg-card .cfg-visual-note{display:none;}
  .cfg-card-body{padding:14px 44px 14px 14px;justify-content:center;}
  .cfg-card.is-selected::after{top:10px;right:10px;width:24px;height:24px;font-size:13px;}
}

/* ===== 3.9.5 heroes without media: ONE centred column at every width =====
   .hero .container is a 2-column grid (copy + media). Without media the copy sat in column 1 (configurator: H1 centred
   on x=432 of 1440), and with an inline "1fr" the track grew to the copy's max-width (/prijzen/ at 390px: 760px wide,
   text cut off). minmax(0,1fr) + !important beats both the base grid and the inline styles. */
.hero .container.hero-nomedia,.hero .container.is-centered,.hero .container:not(:has(> .hero-media)){grid-template-columns:minmax(0,1fr) !important;}
.hero .container.hero-nomedia > .hero-copy,.hero .container.is-centered > .hero-copy,.hero .container:not(:has(> .hero-media)) > .hero-copy{justify-self:center;width:100%;max-width:46rem;margin-inline:auto;text-align:center;}
.hero .container:not(:has(> .hero-media)) .lead,.hero .container.is-centered .lead{margin-inline:auto;}
.hero .container:not(:has(> .hero-media)) :is(.btn-group,.hero-ctas,.hero-choices,.trust-checks),.hero .container.is-centered :is(.btn-group,.hero-ctas,.hero-choices,.trust-checks){justify-content:center;}
.hero .container:not(:has(> .hero-media)) .hero-choices-label{text-align:center;}
/* 3.9.5 /projecten/ filter buttons: never wrap inside a word (WebKit measured "Deurintercom" 2px wider than its box) */
.pf-btn{white-space:nowrap;width:auto;min-width:max-content;}
/* 3.9.5 configurator placeholders: the 5-inch outdoor station is drawn smaller than the 7-inch one */
.cfg-visual-buiten5::before{width:22%;height:50%;top:22%;}
/* 3.9.5 configurator: overview step has no sidebar -> one centred column; narrower placeholder on phones */
.cfg-layout:has(> .cfg-summary[hidden]){grid-template-columns:minmax(0,1fr);max-width:820px;margin-inline:auto;}
@media (max-width:600px){.cfg-card .cfg-visual{flex-basis:72px;min-height:96px;}.cfg-card-body{padding-right:40px;}}

/* ===== 3.10.0 happy-flow sections for block pages ===== */
/* Phone hero strip (proposal): a compact cropped photo under the intro instead of no photo at all */
.hero-strip{display:none;}
@media (max-width:767px){
  .hero-strip{display:block;margin:var(--space-2) 0 var(--space-3);border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:16/7;background:var(--bg-alt);}
  .hero-strip picture,.hero-strip img{display:block;width:100%;height:100%;object-fit:cover;}
}
.hero-media picture{display:block;height:100%;}
.hero-media picture img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block;}
/* Projects in pictures */
.ps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.ps-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s;}
.ps-card:hover{transform:translateY(-3px);}
.ps-photo{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);}
.ps-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
.ps-card:hover .ps-photo img{transform:scale(1.05);}
.ps-body{display:flex;flex-direction:column;gap:4px;padding:var(--space-2) var(--space-3) var(--space-3);}
.ps-title{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h6);line-height:1.3;}
.ps-meta{font-size:var(--fs-small);color:var(--muted);}
.ps-more{text-align:center;margin:var(--space-4) 0 0;}
@media (max-width:1024px){.ps-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){
  .ps-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;margin:0 -24px;padding:4px 24px 12px;scrollbar-width:none;}
  .ps-grid::-webkit-scrollbar{display:none;}
  .ps-grid > .ps-card{flex:0 0 78%;scroll-snap-align:start;}
}
@media (prefers-reduced-motion:reduce){.ps-card,.ps-photo img{transition:none;}}
/* FAQ built from Details blocks */
.faq-list .blk-details{border-bottom:1px solid var(--border);padding:18px 0;margin:0;}
.faq-list .blk-details summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:var(--fs-h5);}
.faq-list .blk-details summary::-webkit-details-marker{display:none;}
.faq-list .blk-details summary::after{content:"+";flex:none;font-size:var(--fs-h4);color:var(--blue);}
.faq-list .blk-details[open] summary::after{content:"\2212";}
.faq-list .blk-details > :not(summary){margin:12px 0 0;color:var(--muted);}
.faq-list .blk-details:last-child{border-bottom:0;}
/* Checklist from a List block */
ul.blk-list.checklist-grid{list-style:none;padding:0;}
.section .checklist-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4);max-width:900px;margin:0 auto;}
/* Plain text section from blocks */
.text-block{max-width:var(--measure);margin:0 auto;}
.text-block > h2{text-align:center;}
/* 3.10.0 text-with-photo from blocks: photo first on phones/tablets, whichever side it is on desktop */
@media (max-width:1024px){.intro-split > figure{order:-1;}}
.werkwijze-section .steps{margin-top:0;}

/* ===== 3.10.1 short pages on phones ===== */
@media (max-width:767px){
  /* steps as a compact numbered list */
  .steps > .step,.steps:has(> .step:nth-child(3):last-child) > .step,.steps:has(> .step:nth-child(4):last-child) > .step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start;flex-basis:100%;}
  .steps > .step > .num{grid-row:span 2;width:36px;height:36px;margin:0;font-size:var(--fs-body);}
  .steps > .step > h4{margin:4px 0 2px;}
  .steps > .step > p{margin:0;}
  .steps > .step::after{display:none !important;}
  .steps{row-gap:18px;}
  /* checklists: two short columns */
  .checklist-grid{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;}
  .checklist-grid li{font-size:var(--fs-small);padding:6px 0;}
  /* reviews: a swipe row, long texts clamped */
  .reviews-masonry{columns:auto !important;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;gap:var(--gap);margin:0 -24px;padding:4px 24px 12px;scrollbar-width:none;}
  .reviews-masonry::-webkit-scrollbar{display:none;}
  .reviews-masonry > .review-card{flex:0 0 82%;margin:0;scroll-snap-align:start;}
  .review-card blockquote{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}
  /* "Lees verder": long text blocks folded (custom.js adds .is-folded and the button; without JS all text shows) */
  .is-clamped{max-height:19rem;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);}
  .fold-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--blue);font:inherit;font-weight:700;cursor:pointer;}
  .fold-more::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);}
}
/* 3.10.1 html sitemap */
.html-sitemap ul{columns:3 220px;column-gap:var(--gap);padding-left:1.1em;margin:0 0 var(--space-4);}
.html-sitemap li{break-inside:avoid;margin:0 0 6px;}

/* ===== 3.10.1 mega menu (desktop panel, mobile accordion) ===== */
.mm-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;}
.main-nav .sub-menu .sub-menu a{display:flex !important;align-items:center;gap:10px;}
@media (min-width:1025px){
  .main-nav > ul > li.is-mega{position:static;}
  .main-nav > ul > li.is-mega > .sub-menu{align-items:start;left:50%;transform:translateX(-50%);width:min(980px,calc(100vw - 48px));padding:24px;display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px;top:calc(100% - 6px);}
  .main-nav > ul > li.is-mega:hover > .sub-menu,.main-nav > ul > li.is-mega:focus-within > .sub-menu{display:grid;}
  .main-nav li.mm-col > a{font-family:var(--font-heading);font-size:12px !important;font-weight:700 !important;letter-spacing:.08em;text-transform:uppercase;color:var(--blue) !important;padding:6px 12px !important;pointer-events:none;background:none !important;}
  .main-nav li.mm-col > .sub-menu{display:block !important;position:static;box-shadow:none;border:0;padding:0;min-width:0;}
  .main-nav li.mm-col > .sub-menu a{padding:8px 12px !important;}
  .main-nav > ul > li.is-mega > .sub-menu > li:not(.mm-col){grid-column:1 / -1;border-top:1px solid var(--border);margin-top:8px;padding-top:8px;}
  .main-nav > ul > li.is-mega > .sub-menu > li:not(.mm-col) > a{font-weight:700;color:var(--blue);}
  .main-nav li:focus-within > .sub-menu{display:block;}
}
@media (max-width:1024px){
  .main-nav li.mm-col > a{font-size:12px !important;font-weight:700 !important;letter-spacing:.08em;text-transform:uppercase;color:var(--blue) !important;pointer-events:none;border-bottom:0 !important;padding-top:14px !important;}
  .main-nav li.mm-col > .sub-menu{display:block !important;padding-left:0 !important;}
  .main-nav li.mm-col > .sub-menu a{padding:8px 0 !important;}
  .mm-thumb{width:32px;height:32px;}
}
.hub-grid{justify-content:center;}

/* ===== 3.10.1 footer with an "Oplossingen" column and real legal links ===== */
.site-footer .footer-main{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:32px 40px;}
.site-footer .footer-main li,.site-footer .footer-main a{overflow-wrap:anywhere;}
.site-footer .footer-main a{line-height:1.35;}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;}
.footer-legal ul{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;}
.footer-legal a{color:#eaf2ff;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:32px;}
.footer-legal a:hover{color:#fff;}
@media (min-width:768px) and (max-width:1199px){
  .site-footer .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"about services company" "solutions solutions contact";}
  .site-footer .footer-about{grid-area:about;}.site-footer .footer-services{grid-area:services;}.site-footer .footer-company{grid-area:company;}
  .site-footer .footer-solutions{grid-area:solutions;}.site-footer .footer-contact{grid-area:contact;}
}
@media (max-width:767px){
  .site-footer .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"contact contact" "services company" "solutions solutions" "about about";}
  .site-footer .footer-solutions{grid-area:solutions;}
  .footer-legal{justify-content:center;}
  .footer-legal a{min-height:44px;}
}
/* 3.10.1 gate fixes: centred block sections, odd checklists, long card titles, long URLs in legal text */
.blk-group.section > .container > p,.blk-group.section > .container > .blk-buttons,.ps-more{margin-left:auto;margin-right:auto;}
.ps-more{max-width:none;}
.blk-group.section.is-centered > .container > .blk-buttons{justify-content:center;}
@media (max-width:599px){
  .checklist-grid{grid-template-columns:minmax(0,1fr) !important;}
}
@media (min-width:600px) and (max-width:767px){
  .checklist-grid li:last-child:nth-child(odd){grid-column:1 / -1;}
}
@media (max-width:767px){
  .related-strip .services-nav-grid > .services-nav-card{flex-basis:84% !important;}
  .related-strip .snc-body{padding:var(--space-2) 16px var(--space-3);}
}
.page-content p,.page-content li{overflow-wrap:anywhere;}
/* 3.10.1 hero H1 beside a photo gets about half the container: the long-word fit uses that width */
@media (min-width:1025px){.hero .container:has(> .hero-media) h1[style*="--chars"]{font-size:min(var(--fs-h1), calc(100cqi * 0.5 / (var(--chars) * 0.68))) !important;}}
/* related cards: 2 per row on tablets (3 left too little room for long titles such as "Duurzaamheidsoplossingen") */
@media (min-width:641px) and (max-width:1024px){.related-strip .services-nav-grid > .services-nav-card{flex-basis:calc((100% - var(--gap)) / 2) !important;max-width:calc((100% - var(--gap)) / 2) !important;}}

/* ===== 3.10.2 Zawar 17-19.png ===== */
/* footer: every row on one container; Intercom-Lease row starts at the container edge */
.footer-partner-inner{justify-content:flex-start;}
.footer-partner-inner > .btn{margin-left:auto;}
@media (max-width:767px){.footer-partner-inner > .btn{margin-left:0;}}
/* system cards: all three icon tiles orange with white icons; titles in the standard card heading (dark Rubik); equal title height */
.sci-icon,.sci-icon-alt{background:var(--orange) !important;color:#fff !important;}
.system-card h3{font-family:var(--font-heading) !important;color:var(--ink) !important;font-weight:700 !important;font-size:var(--fs-h5) !important;line-height:1.25 !important;}
@media (min-width:768px){.card-grid-3 .system-card h3{min-height:2.5em;display:flex;align-items:flex-end;}}
/* cities: intro + map + CTA beside region groups of city chips */
.cities-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--gap-split);align-items:center;}
.cities-intro p{max-width:34em;}
.cities-map{max-width:280px;margin:var(--space-3) 0;}
.nl-map{width:100%;height:auto;display:block;}
.nl-land{fill:rgba(0,119,255,.07);stroke:rgba(0,119,255,.35);stroke-width:1.5;stroke-linejoin:round;}

.cities-groups{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-2) var(--space-4);}
.city-region{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px var(--space-2);align-items:start;padding:var(--space-2) 0;}
.city-region + .city-region{border-top:1px solid var(--border);}
.city-region-title{font-family:var(--font-heading) !important;font-size:var(--fs-small) !important;font-weight:700 !important;color:var(--blue) !important;margin:0;line-height:40px !important;}
.city-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.city-chips li::before,.city-chips li::after{content:none !important;display:none !important;}
.city-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1.5px solid var(--border);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:var(--fs-small);text-decoration:none;transition:border-color .15s,color .15s,background .15s;}
.city-chip svg{color:var(--blue);flex:none;}
a.city-chip:hover,a.city-chip:focus-visible{border-color:var(--blue);color:var(--blue);background:rgba(0,119,255,.04);}
@media (max-width:1024px){.cities-layout{grid-template-columns:minmax(0,1fr);}.cities-intro{text-align:center;}.cities-intro p{margin-inline:auto;}.cities-map{margin:var(--space-3) auto;max-width:220px;}}
@media (max-width:600px){.cities-groups{padding:var(--space-1) 16px;}.city-region{grid-template-columns:minmax(0,1fr);gap:8px;}.city-region-title{line-height:1.3 !important;}.cities-map{max-width:160px;}.city-chip{min-height:44px;padding:0 12px;}}
@media (prefers-reduced-motion:reduce){.city-chip{transition:none;}}
.city-chip::before,.city-chip::after{content:none !important;display:none !important;}
.intro-split .checklist-grid{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;}
@media (max-width:599px){.intro-split .checklist-grid{grid-template-columns:minmax(0,1fr) !important;}}
@media (max-width:767px){.phf-badge{display:none !important;}} /* 3.10.2: the floating facts badge covered the hero chips on phones; the same facts show as chips above */
.text-block .checklist-grid,.checklist-card .checklist-grid{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;}
@media (max-width:599px){.text-block .checklist-grid,.checklist-card .checklist-grid{grid-template-columns:minmax(0,1fr) !important;}}
.intro-split .checklist-grid li:last-child:nth-child(odd),.text-block .checklist-grid li:last-child:nth-child(odd),.checklist-card .checklist-grid li:last-child:nth-child(odd){grid-column:1 / -1;}

/* 3.10.3 map pins: orange dots with a soft pulsing halo; a hovered/focused city chip enlarges its dot */
.nl-pin{--pin-scale:1;}
.nl-dot{fill:var(--orange);stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:center;transform:scale(var(--pin-scale));transition:transform .2s ease;}
.nl-halo{fill:rgba(243,107,18,.28);transform-box:fill-box;transform-origin:center;animation:nl-pulse 2.6s ease-out infinite;}
.nl-pin:nth-child(3n) .nl-halo{animation-delay:.9s;}
.nl-pin:nth-child(3n+1) .nl-halo{animation-delay:1.7s;}
@keyframes nl-pulse{0%{transform:scale(.45);opacity:.9;}70%{transform:scale(1.25);opacity:0;}100%{transform:scale(1.25);opacity:0;}}
@media (prefers-reduced-motion:reduce){.nl-halo{animation:none;transform:scale(.8);opacity:.45;}.nl-dot{transition:none;}}
/* chip hover/focus -> matching map dot (generated with the map; same slugs as data-city on the chips) */
.cities-layout:has(.city-chip[data-city="amsterdam"]:is(:hover,:focus-visible)) .nl-pin[data-city="amsterdam"],
.cities-layout:has(.city-chip[data-city="haarlem"]:is(:hover,:focus-visible)) .nl-pin[data-city="haarlem"],
.cities-layout:has(.city-chip[data-city="rotterdam"]:is(:hover,:focus-visible)) .nl-pin[data-city="rotterdam"],
.cities-layout:has(.city-chip[data-city="dordrecht"]:is(:hover,:focus-visible)) .nl-pin[data-city="dordrecht"],
.cities-layout:has(.city-chip[data-city="groningen"]:is(:hover,:focus-visible)) .nl-pin[data-city="groningen"],
.cities-layout:has(.city-chip[data-city="maastricht"]:is(:hover,:focus-visible)) .nl-pin[data-city="maastricht"],
.cities-layout:has(.city-chip[data-city="arnhem"]:is(:hover,:focus-visible)) .nl-pin[data-city="arnhem"],
.cities-layout:has(.city-chip[data-city="utrecht"]:is(:hover,:focus-visible)) .nl-pin[data-city="utrecht"],
.cities-layout:has(.city-chip[data-city="den-haag"]:is(:hover,:focus-visible)) .nl-pin[data-city="den-haag"],
.cities-layout:has(.city-chip[data-city="leiden"]:is(:hover,:focus-visible)) .nl-pin[data-city="leiden"],
.cities-layout:has(.city-chip[data-city="zwolle"]:is(:hover,:focus-visible)) .nl-pin[data-city="zwolle"],
.cities-layout:has(.city-chip[data-city="enschede"]:is(:hover,:focus-visible)) .nl-pin[data-city="enschede"],
.cities-layout:has(.city-chip[data-city="eindhoven"]:is(:hover,:focus-visible)) .nl-pin[data-city="eindhoven"],
.cities-layout:has(.city-chip[data-city="nijmegen"]:is(:hover,:focus-visible)) .nl-pin[data-city="nijmegen"],
.cities-layout:has(.city-chip[data-city="breda"]:is(:hover,:focus-visible)) .nl-pin[data-city="breda"],
.cities-layout:has(.city-chip[data-city="zoetermeer"]:is(:hover,:focus-visible)) .nl-pin[data-city="zoetermeer"],
.cities-layout:has(.city-chip[data-city="leeuwarden"]:is(:hover,:focus-visible)) .nl-pin[data-city="leeuwarden"],
.cities-layout:has(.city-chip[data-city="apeldoorn"]:is(:hover,:focus-visible)) .nl-pin[data-city="apeldoorn"],
.cities-layout:has(.city-chip[data-city="tilburg"]:is(:hover,:focus-visible)) .nl-pin[data-city="tilburg"],
.cities-layout:has(.city-chip[data-city="den-bosch"]:is(:hover,:focus-visible)) .nl-pin[data-city="den-bosch"],
.cities-layout:has(.city-chip[data-city="almere"]:is(:hover,:focus-visible)) .nl-pin[data-city="almere"],
.cities-layout:has(.city-chip[data-city="amersfoort"]:is(:hover,:focus-visible)) .nl-pin[data-city="amersfoort"],
.cities-layout:has(.city-chip[data-city="hilversum"]:is(:hover,:focus-visible)) .nl-pin[data-city="hilversum"],
.cities-layout:has(.city-chip[data-city="hengelo"]:is(:hover,:focus-visible)) .nl-pin[data-city="hengelo"]{--pin-scale:1.6;}

/* ===== 3.10.4 Gravity Forms in the house style (forms on /repareren/, /klantenservice/, ...) ===== */
.form-card .gform_wrapper.gform-theme,.form-card .gform-theme--framework{
  --gf-color-primary:#f36b12;--gf-color-primary-rgb:243,107,18;--gf-color-primary-contrast:#fff;--gf-color-primary-darker:#d95e0c;--gf-color-primary-lighter:#f7883f;
  --gf-color-in-ctrl-primary:#f36b12;--gf-ctrl-border-color-focus:#0077ff;--gf-ctrl-outline-color-focus:rgba(0,119,255,.25);
  --gf-radius:10px;--gf-ctrl-radius:10px;--gf-ctrl-size:48px;
  --gf-font-family-base:'Open Sans',Arial,sans-serif;--gf-ctrl-btn-font-family:Rubik,Helvetica,Arial,sans-serif;
  --gf-ctrl-btn-radius:999px;--gf-ctrl-btn-font-weight:600;--gf-ctrl-btn-padding-x:28px;
}
.form-card .gform_wrapper .gsection_title{font-family:var(--font-heading) !important;color:var(--ink) !important;font-size:var(--fs-h5) !important;}
.form-card .gform_wrapper .gform_footer input[type=submit],.form-card .gform_wrapper .gform_footer .gform_button{min-height:var(--btn-h);border-radius:999px !important;background:var(--orange) !important;font-family:var(--font-heading) !important;font-weight:600 !important;padding:0 32px !important;}
.form-card .gform_wrapper .gform-theme-button--secondary,.form-card .gform_wrapper .gform_button_select_files{border-radius:999px !important;}
.form-card .gform_wrapper .gfield-image-choice-wrapper-outer img,.form-card .gform_wrapper .gfield--type-image_choice img{object-fit:contain;padding:18px;}
@media (max-width:767px){
  .form-card .gform_wrapper .gfield--type-image_choice .gfield_radio,.form-card .gform_wrapper .gfield--type-image_choice .gfield_checkbox{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}
  .form-card .gform_wrapper .gfield--type-image_choice .gchoice{width:auto !important;max-width:none !important;margin:0 !important;}
  .form-card .gform_wrapper .gfield--type-image_choice img{max-height:84px;padding:10px;}
}
@media (max-width:767px){
  .form-card .gform_wrapper .gfield--type-image_choice .gchoice,.form-card .gform_wrapper .gfield--type-image_choice .gchoice > *,.form-card .gform_wrapper .gfield--type-image_choice .gfield-image-choice-wrapper-outer{min-width:0 !important;width:100% !important;max-width:100% !important;box-sizing:border-box;}
  .form-card .gform_wrapper .gfield--type-image_choice .gfield-image-choice-wrapper-inner{aspect-ratio:4/3;height:auto !important;}
}
.pricing-wrap{max-width:640px;margin:0 auto;}
/* 3.11.0 converted service pages: same alignment as the old PHP templates */
.blk-group.container-narrow{margin-left:auto;margin-right:auto;width:100%;}
.band-blue .blk-buttons,.pricing-card .blk-buttons,.is-centered .blk-buttons{justify-content:center;}
.pricing-card > .blk-buttons{margin-top:var(--space-3);}

/* ===== 3.11.1 team review 23-10, prio 1 (site-wide) ===== */
/* Colour rule: blue = brand, ORANGE = every CTA button (quote, call, action). Text links stay blue. */
.btn-primary,.btn-outline{color:var(--orange) !important;border-color:var(--orange) !important;}
.btn-primary:hover,.btn-outline:hover{background:var(--orange) !important;color:#fff !important;}
.section .is-style-outline .blk-button__link,.onderhoud-block .is-style-outline .blk-button__link{color:var(--orange) !important;border-color:var(--orange) !important;background:transparent !important;}
.section .is-style-outline .blk-button__link:hover,.onderhoud-block .is-style-outline .blk-button__link:hover{background:var(--orange) !important;color:#fff !important;}
.btn-outline-white{background:#fff !important;color:var(--orange) !important;border-color:#fff !important;}
.btn-outline-white:hover{background:var(--orange) !important;color:#fff !important;border-color:var(--orange) !important;}
.mobile-cta-bar a:first-child{color:var(--orange) !important;border-color:var(--orange) !important;}
.mobile-cta-bar a:first-child svg{color:var(--orange);}
.form-card .gform_wrapper .gform_button_select_files{background:var(--orange) !important;border-color:var(--orange) !important;}
/* Header phone: a button with a blue border, white background, normal weight */
.main-nav > ul > li:nth-last-child(2) > a{display:inline-flex !important;align-items:center;min-height:var(--btn-h-sm);padding:0 18px !important;border:1.5px solid var(--blue);border-radius:999px;background:#fff;color:var(--blue) !important;font-weight:500 !important;}
.main-nav > ul > li:nth-last-child(2) > a:hover{background:rgba(0,119,255,.06);}
@media (max-width:1024px){.main-nav > ul > li:nth-last-child(2) > a{justify-content:center;margin-top:8px;border-bottom:1.5px solid var(--blue) !important;}}
/* Blue blocks: one shape everywhere = full width. The closing CTA is no longer a narrow rounded box. */
section:has(> .container > .closing-cta){background:var(--blue) !important;}
.closing-cta{background:transparent !important;border-radius:0 !important;padding:0 !important;}
/* Thin blue lines: one weight (3px) everywhere */
:root{--line-blue:3px;}
.steps .step:not(:last-child)::before,.steps .step:not(:last-child)::after{height:var(--line-blue) !important;}
.info-callout{border-left-width:var(--line-blue) !important;}
.review-card.is-featured{border-top:1px solid var(--border) !important;} /* the blue top line looked "selected" */
/* Footer: no blue bars; the bottom bar is a darker navy */
.site-footer .footer-bottom{background:#071426 !important;border-top:1px solid rgba(255,255,255,.08);}
.site-footer .footer-logo img{background:none !important;padding:0 !important;height:44px;width:auto;}
.footer-partner .fp-logo img{background:none;padding:0;}
.footer-partner .fp-logo{background:none !important;padding:0 !important;}

/* ===== 3.11.2 team review: EXAMPLE pages (home, video service page, project detail) — for Zawar's review ===== */
/* Blue top bar centred */
.utility-bar .container{justify-content:center !important;gap:28px;}
/* Overige diensten: photo + text with service chips (replaces the blue band with a floating card) */
.other-services .intro-split > img{max-height:520px;}
@media (min-width:1025px){.intro-split.is-reversed-desktop > img{order:2;}}
.os-chips{list-style:none;margin:var(--space-3) 0 var(--space-4);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;}
.os-chips li{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--border);border-radius:12px;background:#fff;font-weight:600;font-size:var(--fs-small);color:var(--ink);}
.os-chips svg{flex:none;color:var(--blue);}
@media (max-width:420px){.os-chips{grid-template-columns:minmax(0,1fr);}}
/* Daily services: label centred on the photo edge, text centred */
.service-card .sc-badge{left:50% !important;transform:translateX(-50%);white-space:nowrap;}
.service-card .sc-body,.service-card > p{text-align:center;}
/* Project cards: title in the standard dark heading */
.project-card h3{color:var(--ink) !important;font-family:var(--font-heading) !important;}
/* City chips: white, blue 2px border and blue letters, red pin (map dots stay orange) */
.city-chip{border:2px solid var(--blue) !important;color:var(--blue) !important;background:#fff !important;}
.city-chip svg{color:#d92d20 !important;}
a.city-chip:hover,a.city-chip:focus-visible{background:var(--blue) !important;color:#fff !important;}
a.city-chip:hover svg,a.city-chip:focus-visible svg{color:#fff !important;}
/* Partners: logo carousel (pauses on hover/focus; static under reduced motion) */
.partners-split{grid-template-columns:minmax(0,1fr) !important;}
.partner-carousel{overflow:hidden;margin-top:var(--space-4);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.pcar-track{display:flex;width:max-content;animation:pcar 28s linear infinite;}
.partner-carousel:hover .pcar-track,.partner-carousel:focus-within .pcar-track{animation-play-state:paused;}
.pcar-group{display:flex;align-items:center;gap:56px;list-style:none;margin:0;padding:0 28px;}
.pcar-group img{height:46px;width:auto;max-width:170px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s;}
.pcar-group img:hover{filter:none;opacity:1;}
@keyframes pcar{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.pcar-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;}.pcar-group[aria-hidden]{display:none;}.pcar-group{flex-wrap:wrap;justify-content:center;}}
/* Reviews as neat, clickable cards of equal height */
.reviews-body.is-cards .reviews-masonry{columns:auto !important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.reviews-body.is-cards .review-link{display:block;color:inherit;text-decoration:none;border-radius:var(--radius);}
.reviews-body.is-cards .review-card{height:100%;margin:0;transition:transform .2s,box-shadow .2s;}
.reviews-body.is-cards .review-link:hover .review-card,.reviews-body.is-cards .review-link:focus-visible .review-card{transform:translateY(-3px);box-shadow:0 16px 40px rgba(10,27,51,.14);}
.reviews-body.is-cards .review-card blockquote{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}
@media (max-width:1024px){.reviews-body.is-cards .reviews-masonry{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:767px){.reviews-body.is-cards .reviews-masonry{display:flex;grid-template-columns:none;}.reviews-body.is-cards .reviews-masonry > .review-link{flex:0 0 82%;scroll-snap-align:start;}}
/* FAQ in two columns on desktop */
@media (min-width:1025px){.faq-list.faq-two-col{max-width:none;columns:2;column-gap:56px;}.faq-list.faq-two-col details{break-inside:avoid;}.faq-list.faq-two-col details:last-child{border-bottom:1px solid var(--border);}}
/* Mega menu: full width under the header, inviting cards */
@media (min-width:1025px){
  .main-nav > ul > li.is-mega > .sub-menu{position:absolute;left:0 !important;right:0;top:100%;transform:none !important;width:auto !important;border-radius:0 0 18px 18px;border:0;border-top:1px solid var(--border);box-shadow:0 24px 48px rgba(10,27,51,.14);padding:28px max(24px, calc((100% - var(--container)) / 2 + 24px)) 32px !important;gap:8px 32px;background:#fff;}
  .main-nav li.mm-col > a{font-size:13px !important;color:var(--ink) !important;border-bottom:0 !important;padding:0 0 6px !important;margin:0 12px 10px;display:inline-block !important;}
  .main-nav li.mm-col > .sub-menu a{border-radius:12px;padding:10px 12px !important;font-weight:600;}
  .main-nav li.mm-col > .sub-menu a:hover{background:rgba(0,119,255,.07) !important;color:var(--blue) !important;}
  .main-nav li.mm-col > .sub-menu a:hover .mm-thumb{box-shadow:0 0 0 2px var(--blue);}
  .mm-thumb{width:44px;height:44px;}
  .main-nav > ul > li.is-mega > .sub-menu > li:not(.mm-col) > a{display:inline-flex !important;align-items:center;min-height:var(--btn-h-sm);padding:0 22px !important;border-radius:999px;background:var(--orange);color:#fff !important;}
}
/* Project detail (example): breadcrumbs, facts bar, story + photo gallery, light CTA */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--muted);margin:0 0 var(--space-2);}
.breadcrumbs a{color:var(--blue);text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline;}
.breadcrumbs [aria-current]{color:var(--ink);font-weight:600;}
.project-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 var(--space-4);background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.project-facts > div{padding:var(--space-3);border-left:var(--line-blue) solid var(--blue);}
.project-facts > div + div{border-left:1px solid var(--border);}
.project-facts dt{font-size:var(--fs-small);color:var(--muted);margin:0 0 4px;}
.project-facts dd{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h5);color:var(--ink);}
@media (max-width:767px){.project-facts{grid-template-columns:repeat(2,minmax(0,1fr));}.project-facts > div:nth-child(3){border-left:var(--line-blue) solid var(--blue);}.project-facts > div:nth-child(n+3){border-top:1px solid var(--border);}}
.project-story{max-width:820px;margin:0 auto;}
.project-story .project-gallery{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:var(--space-3) 0 0;}
.project-story .project-gallery figure{margin:0 !important;width:auto !important;}
.project-story .project-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);display:block;}
@media (max-width:600px){.project-story .project-gallery{grid-template-columns:minmax(0,1fr);}}
.project-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);max-width:820px;margin:var(--space-5, 3rem) auto 0;padding:var(--space-4);background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);}
.project-cta h2{font-size:var(--fs-h4) !important;margin:0 0 6px;}
.project-cta p{margin:0;color:var(--muted);}
@media (max-width:767px){.project-cta{flex-direction:column;align-items:stretch;text-align:center;}.project-cta .btn-group{justify-content:center;}}
/* /oplossingen/ hub: 4 cards per row on desktop, 2 on tablets, wide swipe cards on phones */
.hub-grid > .services-nav-card{flex:0 0 calc((100% - 3 * var(--gap)) / 4) !important;max-width:calc((100% - 3 * var(--gap)) / 4) !important;}
@media (min-width:641px) and (max-width:1024px){.hub-grid > .services-nav-card{flex-basis:calc((100% - var(--gap)) / 2) !important;max-width:calc((100% - var(--gap)) / 2) !important;}}
@media (max-width:640px){.hub-grid > .services-nav-card{flex:0 0 84% !important;max-width:none !important;}.hub-grid .snc-body{padding:var(--space-2) 16px var(--space-3);}}
@media (min-width:1025px){.hub-grid .snc-body{padding-left:18px;padding-right:18px;}}
/* 3.11.2 heading rule (team review): headings are dark; blue only as an accent word (.accent). On blue/dark bands they stay white. */
.page-content :is(h2,h3,h4),.project-narrative :is(h2,h3,h4),.section :is(h2,h3,h4):not(.band-blue *):not(.closing-cta *):not(.site-footer *){color:var(--ink);}

/* ===== 3.11.3 Zawar's review of the examples ===== */
/* Mega menu: line icons instead of photos; JS-controlled open state with a hover bridge (no gap) */
.mm-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:10px;background:rgba(0,119,255,.08);color:var(--blue);}
.mm-ico .svc-icon{width:20px;height:20px;}
@media (min-width:1025px){
  .main-nav > ul > li.is-mega.js-mega:hover > .sub-menu,.main-nav > ul > li.is-mega.js-mega:focus-within > .sub-menu{display:none;}
  .main-nav > ul > li.is-mega.js-mega.is-open > .sub-menu{display:grid !important;}
  .main-nav > ul > li.is-mega > .sub-menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px;} /* hover bridge: only the strip between the nav links and the panel (never over the links); the 300 ms close delay covers the rest */
  .main-nav li.mm-col > .sub-menu a:hover .mm-ico{background:var(--blue);color:#fff;}
  .main-nav > ul > li.is-mega > a::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s;}
  .main-nav > ul > li.is-mega.is-open > a::after{transform:rotate(-135deg) translateY(-1px);}
}
@media (max-width:1024px){.mm-ico{width:30px;height:30px;border-radius:8px;}.mm-ico .svc-icon{width:17px;height:17px;}}
/* Google reviews badge (one component: hero, reviews header, Over ons) */
.google-badge{display:inline-flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 32px rgba(10,27,51,.14);padding:14px 18px;color:var(--ink);text-decoration:none;min-width:200px;}
a.google-badge:hover,a.google-badge:focus-visible{box-shadow:0 16px 40px rgba(10,27,51,.2);}
.gb-head{display:flex;align-items:center;gap:8px;}
.gb-g{flex:none;}
.gb-brand{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-small);color:#5f6368;}
.gb-row{display:flex;align-items:center;gap:10px;}
.gb-score{font-family:var(--font-heading);font-weight:800;font-size:28px;line-height:1;color:#202124;}
.gb-stars{--star:20px;}
.gb-stars svg{width:20px;height:20px;}
.gb-stars .stars-bg svg{fill:#dadce0 !important;}
.gb-stars .stars-fg svg{fill:#FBBC04 !important;}
.gb-count{font-size:var(--fs-small);color:#5f6368;}
.hero-media .google-badge.gb-float{position:absolute;left:-28px;bottom:-24px;z-index:3;}
.google-badge.gb-card{padding:20px 24px;align-self:start;}
.google-badge.gb-card .gb-score{font-size:40px;}
@media (max-width:1024px){.hero-media .google-badge.gb-float{left:16px;bottom:16px;}}
/* Text + photo: on desktop the photo is as tall as the text column (equal columns, cover, rounded) — every intro-split */
@media (min-width:1025px){
  .intro-split{align-items:stretch !important;}
  .intro-split > img,.intro-split > figure,.intro-split > figure img,.other-services .intro-split > img{height:100% !important;max-height:none !important;min-height:360px;}
  .intro-split > figure{display:flex;}
  .intro-split > img,.intro-split > figure img{width:100%;object-fit:cover;border-radius:var(--radius);}
  .intro-split > div,.intro-split > .blk-group{align-self:center;}
}
/* Project tiles: clean photo, label below with a small red pin, title, facts as icons, link; equal heights */
.ptile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:stretch;}
.ptile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s;}
.ptile:hover,.ptile:focus-visible{transform:translateY(-3px);box-shadow:0 18px 40px rgba(10,27,51,.14);}
.pt-photo{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);}
.pt-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
.ptile:hover .pt-photo img{transform:scale(1.04);}
.pt-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:var(--space-3);}
.pt-meta{display:flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:600;color:var(--muted);}
.pt-meta svg{color:#d92d20;flex:none;}
.pt-title{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h5);line-height:1.25;color:var(--ink);}
.pt-facts{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-small);color:var(--ink);}
.pt-facts > span{display:inline-flex;align-items:center;gap:6px;}
.pt-facts svg{color:var(--blue);flex:none;}
.pt-link{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-heading);font-weight:600;color:var(--blue);}
@media (max-width:1024px){.ptile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.ptile-grid{grid-template-columns:minmax(0,1fr);}}
@media (prefers-reduced-motion:reduce){.ptile,.pt-photo img{transition:none;}}
/* Blog cards: neutral fallback instead of a repeated-title cover; equal title size; 3-line excerpt */
.blog-card-photo.is-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:16/9;background:linear-gradient(135deg,#f3f6fa,#e9eef5);color:#7d8a9c;}
.blog-card-photo.is-fallback span{font-family:var(--font-heading);font-weight:600;font-size:var(--fs-small);letter-spacing:.04em;text-transform:uppercase;}
.blog-card-title{font-size:var(--fs-h5) !important;line-height:1.3 !important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.blog-card-body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* Service cards (services overview + /oplossingen/ hub): equal, centred, icon + title + one line + link; no swipe */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap);}
.svc-grid:has(> .svc-card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr));}
.svc-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:var(--space-4) var(--space-3);background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;}
.svc-card:hover,.svc-card:focus-visible{transform:translateY(-3px);border-color:rgba(0,119,255,.35);box-shadow:0 18px 40px rgba(10,27,51,.12);}
.svc-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:rgba(0,119,255,.08);color:var(--blue);}
.svc-ico .svc-icon{width:28px;height:28px;}
.svc-card:hover .svc-ico{background:var(--blue);color:#fff;}
.svc-title{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h6);line-height:1.3;color:var(--ink);}
.svc-line{font-size:var(--fs-small);color:var(--muted);line-height:1.5;}
.svc-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-small);color:var(--blue);}
@media (max-width:1024px){.svc-grid,.svc-grid:has(> .svc-card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:420px){.svc-card{padding:var(--space-3) 14px;}.svc-line{display:none;}}
@media (prefers-reduced-motion:reduce){.svc-card{transition:none;}}
/* Top bar: slim navy bar on desktop, contact left, 3 USPs with ticks right, aligned to the container; hidden on phones */
.utility-bar{background:#0a1b33 !important;color:#c9d6e8 !important;font-size:13px !important;}
.utility-bar .container{display:flex;align-items:center;justify-content:space-between !important;gap:24px;min-height:36px;padding-top:0;padding-bottom:0;}
.utility-bar .u-left{display:flex;align-items:center;gap:22px;}
.utility-bar a{display:inline-flex;align-items:center;gap:7px;color:#e7eef8 !important;text-decoration:none;font-weight:500;}
.utility-bar a:hover{color:#fff !important;text-decoration:underline;}
.utility-bar .u-right{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0;font-weight:500;color:#c9d6e8 !important;}
.utility-bar .u-right li{display:inline-flex;align-items:center;gap:6px;}
.utility-bar .u-right svg{color:#4fd18b;}
@media (max-width:767px){.utility-bar{display:none !important;}}
@media (min-width:768px) and (max-width:1024px){.utility-bar .u-right li:nth-child(3){display:none;}}
/* blog card titles: one size everywhere (beats the long-word fit style), standard card heading */
.blog-card h3.blog-card-title{font-family:var(--font-heading) !important;font-size:var(--fs-h5) !important;font-weight:700 !important;}
/* ===== 3.11.4 landing pages: one alignment rule, reading measure, related cards ===== */
/* Alignment rule (Zawar): a short section is fully centred (eyebrow, heading, text, button); a long section is fully
   left-aligned, normally as text + photo. Never a centred heading over a left body or button. The gate checks it
   (centre-check.js check 9 "mixed-alignment"). The converter marks short text sections .text-block.is-short. */
.text-block > h2,.text-block > h3{text-align:left;}
.text-block.is-short,.text-block.is-short > *{text-align:center;margin-left:auto;margin-right:auto;}
.text-block.is-short .blk-buttons{justify-content:center;}
.text-block:not(.is-short) .blk-buttons{justify-content:flex-start;}
/* reading: max ~68 characters per line, comfortable line height, air between paragraphs, subheadings */
.text-block{max-width:68ch;}
.text-block p,.text-block li,.intro-split > .blk-group > p:not(.eyebrow),.intro-split > .blk-group li{line-height:1.7;}
.text-block > p,.intro-split > .blk-group > p:not(.eyebrow){max-width:68ch;margin-bottom:1em;}
.text-block > h3,.intro-split > .blk-group > h3{margin:1.4em 0 .4em;font-size:var(--fs-h5);}
.intro-split > .blk-group > .checklist-grid{margin:.4em 0 1.2em;}
/* related solutions: the services/hub card with a fixed 3:2 photo, equal heights, 3-line text, link at the bottom */
.svc-grid.svc-grid-photo{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;}
.svc-grid.svc-grid-photo:has(> .svc-card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr));}
.svc-card.has-photo{padding:0 0 var(--space-3);overflow:hidden;gap:10px;}
.svc-card.has-photo .svc-photo{display:block;width:100%;aspect-ratio:3/2;overflow:hidden;background:#eef2f7;}
.svc-card.has-photo .svc-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.svc-card.has-photo:hover .svc-photo img{transform:scale(1.04);}
.svc-card.has-photo .svc-title{margin-top:var(--space-2);padding:0 var(--space-3);}
.svc-card.has-photo .svc-line{padding:0 var(--space-3);display:-webkit-box !important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.svc-card.has-photo .svc-link{padding:0 var(--space-3);}
@media (max-width:1024px){.svc-grid.svc-grid-photo:has(> .svc-card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:767px){.svc-grid.svc-grid-photo{grid-template-columns:minmax(0,1fr);}.svc-card.has-photo .svc-photo{aspect-ratio:16/9;}}
@media (prefers-reduced-motion:reduce){.svc-card.has-photo .svc-photo img{transition:none;}}
/* "Lees verder" on larger screens too, only for very long SEO text (custom.js) */
@media (min-width:768px){
  .is-clamped{max-height:30rem;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent);}
  .fold-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--blue);font:inherit;font-weight:700;cursor:pointer;}
  .fold-more::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);}
}
/* 3.11.4 service cards: a wrapping row whose last row is centred (5 cards on landing pages, 5-7 in hub columns) */
.svc-grid:not(.svc-grid-photo){display:flex;flex-wrap:wrap;justify-content:center;}
.svc-grid:not(.svc-grid-photo) > .svc-card{flex:0 1 calc((100% - 3 * var(--gap)) / 4);min-width:0;}
@media (min-width:1280px){.svc-grid:not(.svc-grid-photo):has(> .svc-card:nth-child(5):last-child) > .svc-card{flex-basis:calc((100% - 4 * var(--gap)) / 5);}}
@media (min-width:1025px) and (max-width:1279px){.svc-grid:not(.svc-grid-photo):has(> .svc-card:nth-child(5):last-child) > .svc-card{flex-basis:calc((100% - 2 * var(--gap)) / 3);}}
@media (max-width:1024px){.svc-grid:not(.svc-grid-photo) > .svc-card,.svc-grid:not(.svc-grid-photo):has(> .svc-card:nth-child(5):last-child) > .svc-card{flex-basis:calc((100% - var(--gap)) / 2);}}
/* offer card beside a form (production's price column, e.g. valdetectie): centred card component, form on the right */
.offer-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-split);align-items:start;}
.offer-card{background:var(--blue);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4);text-align:center;}
.offer-card > *{margin-left:auto;margin-right:auto;}
.offer-card .offer-pre{color:#dbe9ff;margin:0;font-weight:600;}
.offer-card .offer-price{font-family:var(--font-heading);font-weight:800;font-size:var(--fs-h3);line-height:1.2;color:#fff;margin:4px 0 var(--space-3);}
.offer-card .offer-list{display:block !important;text-align:left;max-width:22rem;margin-top:0;}
.offer-card .offer-list li{color:#fff;border-color:rgba(255,255,255,.25) !important;grid-column:auto !important;}
.offer-card .offer-list li::before{color:#fff !important;}
@media (max-width:1024px){.offer-split{grid-template-columns:minmax(0,1fr);}.offer-card{max-width:560px;width:100%;margin:0 auto;}}
/* project tiles on tablets: 3 tiles = 2 + the third centred under them */
@media (min-width:641px) and (max-width:1024px){.ptile-grid > :last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc((100% - var(--gap)) / 2);}}
/* text beside a form: text column left, form card right (stacked on tablets/phones) */
.intro-split.form-split{align-items:start !important;}
.intro-split.form-split > .blk-group:first-child{align-self:start;}
/* ===== 3.11.5 ===== */
/* checklist band: the white card inside the blue band, button under the list */
.band-checklist .band-card{max-width:1000px;margin:var(--space-4) auto var(--space-4);text-align:left;}
.band-checklist .band-card .checklist-grid{margin:0;}
/* USPs: one tidy row directly under the hero buttons, on every hero (the top bar is gone) */
.hero-actions .hero-usps{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:18px 0 4px;padding:0;list-style:none;}
.hero-actions .hero-usps li{font-size:var(--fs-small);font-weight:600;gap:8px;color:var(--ink);}
.hero-actions .hero-usps .tick{width:20px;height:20px;font-size:11px;}
.hero-actions.is-center .hero-usps,.is-centered .hero-actions .hero-usps{justify-content:center;}
@media (max-width:767px){.hero-actions .hero-usps{margin:var(--space-2) 0 var(--space-1) !important;}}
/* brands: equal boxes, 7 per row on desktop (21 logos = 3 full rows), centred last row elsewhere, grey -> colour */
.brand-grid-v2{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;list-style:none;margin:0 auto;padding:0;}
.brand-grid-v2 > .brand-box{flex:0 0 calc((100% - 6 * 14px) / 7);display:flex;align-items:center;justify-content:center;height:96px;padding:12px 16px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);margin:0;}
.brand-grid-v2 img{display:block;max-width:100%;height:auto;filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s;}
.brand-grid-v2 > .brand-box:hover img{filter:none;opacity:1;}
@media (max-width:1024px){.brand-grid-v2 > .brand-box{flex-basis:calc((100% - 3 * 14px) / 4);}}
@media (max-width:640px){.brand-grid-v2{gap:10px;}.brand-grid-v2 > .brand-box{flex-basis:calc((100% - 2 * 10px) / 3);height:76px;padding:10px;}}
@media (prefers-reduced-motion:reduce){.brand-grid-v2 img{transition:none;}}
/* ===== animated werkwijze (3.11.5): progress line + steps light up in turn + illustrations + brand strip ===== */
.ww .section-head{margin-bottom:var(--space-4);}
.ww-track{position:relative;}
.ww-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);position:relative;z-index:1;}
.ww-step{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0;padding:0;}
.ww-step::before{display:none !important;}
.ww-ill{width:80px;height:80px;margin:0 auto 14px;}
.ww-ill svg{display:block;width:80px;height:80px;overflow:visible;}
.ww-num{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-body);box-shadow:0 0 0 6px #fff;margin:0 auto 14px;position:relative;z-index:2;}
.section-alt .ww-num{box-shadow:0 0 0 6px var(--bg-alt,#f5f7fb);}
.ww-title{font-size:var(--fs-h5) !important;margin:0 0 6px;}
.ww-step p{font-size:var(--fs-small);color:var(--muted);margin:0;max-width:30ch;}
/* the line runs through the centres of the number circles (illustration 80 + 14 gap + half of 40) */
.ww-line{position:absolute;top:114px;left:10%;right:10%;height:4px;border-radius:2px;background:var(--border);z-index:0;}
.ww-fill{display:block;height:100%;width:100%;border-radius:2px;background:var(--blue);transform-origin:left center;}
/* brand strip in step 4 */
.ww-brands{margin-top:14px;width:100%;}
.ww-brands-label{font-size:12px !important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue) !important;margin:0 0 6px !important;}
.ww-marquee{display:flex;overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);}
.ww-logos{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0 9px;flex:none;}
.ww-logos li{margin:0;padding:0;flex:none;display:flex;align-items:center;height:34px;}
.ww-logos li::before{display:none !important;}
.ww-logos img{display:block;height:auto;max-width:none;filter:grayscale(1);opacity:.75;}
/* sequence: only with JS (.js-ww); before .is-on the steps wait dimmed */
@media (prefers-reduced-motion:no-preference){
  .ww.js-ww .ww-fill{transform:scaleX(0);}
  .ww.js-ww .ww-step{opacity:.35;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;}
  .ww.js-ww .ww-num{background:#b9c3d1;transition:background .4s ease;}
  .ww.js-ww.is-on .ww-fill{animation:wwFill 3.6s cubic-bezier(.4,0,.2,1) .2s forwards;}
  .ww.js-ww.is-on .ww-step{opacity:1;transform:none;}
  .ww.js-ww.is-on .ww-num{background:var(--blue);}
  .ww.js-ww.is-on .ww-step:nth-child(1),.ww.js-ww.is-on .ww-step:nth-child(1) .ww-num{transition-delay:.2s;}
  .ww.js-ww.is-on .ww-step:nth-child(2),.ww.js-ww.is-on .ww-step:nth-child(2) .ww-num{transition-delay:1.05s;}
  .ww.js-ww.is-on .ww-step:nth-child(3),.ww.js-ww.is-on .ww-step:nth-child(3) .ww-num{transition-delay:1.9s;}
  .ww.js-ww.is-on .ww-step:nth-child(4),.ww.js-ww.is-on .ww-step:nth-child(4) .ww-num{transition-delay:2.75s;}
  .ww.js-ww.is-on .ww-step:nth-child(5),.ww.js-ww.is-on .ww-step:nth-child(5) .ww-num{transition-delay:3.6s;}
  /* small illustration moves, each when its step lights up */
  .ww.js-ww .ww-a{opacity:0;}
  .ww.js-ww.is-on .ww-a{animation:wwPop .5s ease forwards;}
  .ww.js-ww.is-on .ww-step:nth-child(1) .ww-a{animation-delay:.6s;}
  .ww.js-ww.is-on .ww-step:nth-child(2) .ww-a{animation:wwDrop .7s cubic-bezier(.3,1.4,.5,1) 1.4s forwards;}
  .ww.js-ww.is-on .ww-step:nth-child(3) .ww-a{animation-delay:2.3s;}
  .ww.js-ww.is-on .ww-step:nth-child(4) .ww-screw{transform-origin:50px 58px;animation:wwPop .3s ease 3.1s forwards,wwTurn 1.2s ease-in-out 3.4s 2;}
  .ww.js-ww.is-on .ww-step:nth-child(4) .ww-spark{animation:wwBlink 1.2s ease 3.4s 3 forwards;}
  .ww.js-ww.is-on .ww-step:nth-child(5) .ww-a{animation-delay:4s;}
  .ww .ww-draw{stroke-dasharray:60;}
  .ww.js-ww .ww-draw{stroke-dashoffset:60;}
  .ww.js-ww.is-on .ww-draw{opacity:1;animation-name:wwDraw;animation-duration:.8s;}
  /* the logo strip cycles slowly (pauses on hover) */
  .ww-logos{animation:wwMarquee 38s linear infinite;}
  .ww-marquee:hover .ww-logos{animation-play-state:paused;}
}
@keyframes wwFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes wwPop{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:none;}}
@keyframes wwDrop{0%{opacity:0;transform:translateY(-14px);}100%{opacity:1;transform:none;}}
@keyframes wwDraw{to{stroke-dashoffset:0;}}
@keyframes wwTurn{0%,100%{transform:rotate(0);}50%{transform:rotate(-14deg);}}
@keyframes wwBlink{0%,100%{opacity:1;}50%{opacity:.2;}}
@keyframes wwMarquee{from{transform:translateX(0);}to{transform:translateX(-100%);}}
.ww .ww-a{transform-box:fill-box;transform-origin:center;}
/* reduced motion: static, all steps shown, logos as a wrapped list */
@media (prefers-reduced-motion:reduce){
  .ww-marquee{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none;}
  .ww-logos{flex-wrap:wrap;justify-content:center;gap:10px 14px;}
  .ww-logos[aria-hidden="true"]{display:none;}
}
/* tablets: steps in a 3 + 2 grid without the horizontal line */
@media (max-width:1024px){
  .ww-steps{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:var(--space-4);}
  .ww-step{grid-column:span 2;}
  .ww-step:nth-child(4){grid-column:2 / span 2;}
  .ww-step:nth-child(5){grid-column:4 / span 2;}
  .ww-line{display:none;}
}
/* phones: a vertical timeline, the line fills downwards */
@media (max-width:767px){
  .ww-steps{display:flex;flex-direction:column;gap:var(--space-3);}
  .ww-step{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:start;text-align:left;}
  .ww-num{grid-column:1;grid-row:1 / span 4;margin:8px 0 0;width:40px;height:40px;justify-self:center;align-self:start;}
  .ww-ill{grid-column:2;width:56px;height:56px;margin:0 0 6px;}
  .ww-ill svg{width:56px;height:56px;}
  .ww-title{grid-column:2;margin-top:0;}
  .ww-step p,.ww-brands{grid-column:2;max-width:none;}
  .ww-line{display:block;top:28px;bottom:28px;left:26px;right:auto;width:4px;height:auto;}
  .ww-fill{transform-origin:center top;}
  @media (prefers-reduced-motion:no-preference){
    .ww.js-ww .ww-fill{transform:scaleY(0);}
    .ww.js-ww.is-on .ww-fill{animation-name:wwFillV;}
  }
}
@keyframes wwFillV{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.ww .section-head .eyebrow{color:var(--blue) !important;}
/* onderhoud section: left text + photo (3.11.5) */
.onderhoud-block .intro-split .blk-buttons{justify-content:flex-start !important;}
.onderhoud-block .intro-split.no-photo{grid-template-columns:minmax(0,1fr);max-width:68ch;margin:0 auto;}
.hero-actions .hero-usps{gap:6px 16px;}
.hero-actions .hero-usps li{font-size:14px;white-space:nowrap;}
/* brand pages: text left, logo card right (the "no .hero-media = centred" rule stacked them, 3.11.5) */
@media (min-width:1025px){
  .hero .container:has(> .brand-hero-logo){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) !important;align-items:center;}
  .hero .container:has(> .brand-hero-logo) > .hero-copy{justify-self:stretch !important;text-align:left !important;max-width:none !important;margin:0 !important;}
  .hero .container:has(> .brand-hero-logo) .hero-copy .lead{margin-left:0 !important;}
  .hero .container:has(> .brand-hero-logo) :is(.btn-group,.hero-choices,.hero-usps){justify-content:flex-start !important;}
}
.brand-hero-logo .brand-hero-card{max-width:520px;margin:0 auto;aspect-ratio:16/10;}
@media (max-width:1024px){.brand-hero-logo .brand-hero-card{max-width:420px;aspect-ratio:16/9;padding:var(--space-3);}}
.text-block > .eyebrow{display:inline-block;}
/* project page: facts bar, story, gallery and CTA share one 680 px reading column (3.11.5, edges were misaligned) */
.single-project .project-facts,.single-project .project-story,.single-project .project-cta{max-width:680px;margin-left:auto;margin-right:auto;}
.single-project .project-story p,.single-project .project-story li{max-width:none;}
/* Elementor pages that remain (offerte, bedankt): content on the container width and orange submit button (3.11.5);
   the form itself is unchanged (forms -> Odoo is Zawar's decision) */
.page-template-elementor_header_footer .e-con.e-parent > .e-con.e-child{max-width:calc(var(--container) - 48px);width:100%;margin-left:auto;margin-right:auto;}
.page-template-elementor_header_footer .e-con.e-parent{padding-left:24px;padding-right:24px;}
.page-template-elementor_header_footer .elementor-form .elementor-button{background:var(--orange) !important;border-radius:999px !important;font-family:var(--font-heading);font-weight:700;}
.page-template-elementor_header_footer .elementor-widget-heading .elementor-heading-title{font-family:var(--font-heading) !important;}
@media (max-width:767px){.hero-actions .hero-usps li{white-space:normal;font-size:var(--fs-small);}}

/* ==========================================================================================================
   3.12.0 quality pass (25-10): one heading colour, one eyebrow colour, breadcrumbs, team, photo-led projects,
   equal review cards, steps for any count, hero left edge, thank-you pages. Component level, every page.
   ========================================================================================================== */
/* --- Headings: always ink (#111826). Blue only for .accent in the H1, eyebrows and links; white on dark bands. */
body .hero h1,body h1,body h2,body h3,body h4,body h5,body h6{color:var(--ink) !important;}
body .hero h1 .accent{color:var(--blue) !important;}
body :is(.band-blue,.section-dark,.closing-cta,.site-footer,.lightbox) :is(h1,h2,h3,h4,h5,h6){color:#fff !important;}
body :is(.band-blue,.section-dark) :is(.floating-card,.band-card,.checklist-card) :is(h2,h3,h4,h5,h6){color:var(--ink) !important;}
.page-content :is(h2,h3,h4),.project-story :is(h2,h3,h4),.entry-content :is(h2,h3,h4){font-family:var(--font-heading) !important;font-weight:700 !important;color:var(--ink) !important;}
.page-content h2{font-size:var(--fs-h3) !important;}
.page-content h3{font-size:var(--fs-h4) !important;}
.page-content h4{font-size:var(--fs-h5) !important;}
/* every H3 on the site in the heading face (some content H3s rendered in Open Sans 600) */
h3,h4,h5,h6{font-family:var(--font-heading) !important;font-weight:700 !important;}
/* --- Eyebrows: one colour (brand blue) everywhere; light blue on blue bands */
.eyebrow,p.eyebrow,.blk-group .eyebrow,.section-head .eyebrow{color:var(--blue) !important;}
.band-blue .eyebrow,.section-dark .eyebrow{color:#cfe3ff !important;}
/* city region labels are labels, not headings (3.12.0 markup: p.city-region-title) */
.city-region-title{display:block;font-family:var(--font-heading);font-size:var(--fs-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin:0;line-height:40px;}
@media (max-width:767px){.city-region-title{line-height:1.3;}}
/* section heads: a readable measure so a centred H2 never wraps into 3 short lines */
.section-head{max-width:min(100%,52rem);}
.section-head h2{text-wrap:balance;}

/* --- Breadcrumbs (template-parts/breadcrumbs.php): under the header, left on the container, above the H1 */
.crumbbar{background:#F7FAFF;padding:14px 0 0;position:relative;z-index:1;}
.crumbbar + .hero,.crumbbar + .section{padding-top:var(--space-3);}
.breadcrumbs{margin:0;font-size:var(--fs-small);color:var(--muted);}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;list-style:none;margin:0;padding:0;}
.breadcrumbs li{display:inline-flex;align-items:center;min-width:0;max-width:100%;}
.breadcrumbs .bc-sep{color:#9aa4b2;margin:0 6px;flex:none;}
.breadcrumbs a{color:var(--muted);text-decoration:none;border-radius:4px;padding:2px 0;white-space:nowrap;}
.breadcrumbs a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.breadcrumbs a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.breadcrumbs [aria-current]{color:var(--ink);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.breadcrumbs .bc-mid a{display:block;max-width:18rem;overflow:hidden;text-overflow:ellipsis;}
@media (pointer:coarse){.breadcrumbs a{display:inline-flex;align-items:center;min-height:44px;}.crumbbar{padding-top:2px;}}
@media (max-width:767px){
  .breadcrumbs ol{flex-wrap:nowrap;}
  .breadcrumbs .bc-mid a{max-width:7.5rem;}
  .breadcrumbs .bc-current{flex:1 1 0;}
  .crumbbar + .hero{padding-top:var(--space-2);}
}
/* the old project-only crumb inside the hero is gone; the project hero starts with its eyebrow */
.hero-copy > .breadcrumbs{display:none;}

/* --- Hero left edge (Zawar 53.png): every hero child starts on the container content edge */
.hero-copy > *,.hero-actions > *{margin-left:0;}
.hero-actions .hero-usps{padding:0;margin-left:0;}
.hero-actions .hero-usps li{padding-left:0;margin-left:0;}
.hero-choices{padding-left:0;margin-left:0;list-style:none;}
.hero-choices li{margin:0;}
@media (max-width:767px){
  /* swipe row: first chip border on the text edge, may bleed to the right screen edge only */
  .hero-choices{margin:0 -24px 0 0 !important;padding:0 24px 6px 0 !important;scroll-padding-left:0 !important;scroll-padding-inline:0 !important;}
  .hero-actions .hero-usps{justify-items:stretch;}
}
.hero .container:not(:has(> .hero-media)) .hero-choices,.hero .container.is-centered .hero-choices{margin-left:auto;margin-right:auto;}

/* --- Steps component: 2-6 steps fill the container and sit on the page axis (47.png / 48.png) */
.steps,.blk-group.steps{display:grid !important;grid-template-columns:repeat(var(--steps,5),minmax(0,1fr)) !important;gap:var(--gap);max-width:100%;margin-left:auto;margin-right:auto;}
.steps:has(> .step:nth-child(2):last-child){--steps:2;max-width:46rem;}
.steps:has(> .step:nth-child(3):last-child){--steps:3;max-width:62rem;}
.steps:has(> .step:nth-child(4):last-child){--steps:4;}
.steps:has(> .step:nth-child(6):last-child){--steps:6;}
.steps > .step,.steps:has(> .step:nth-child(3):last-child) > .step,.steps:has(> .step:nth-child(4):last-child) > .step{max-width:none !important;flex:none !important;min-width:0;}
.steps .step h3,.steps .step h4{font-size:var(--fs-h5) !important;}
@media (max-width:1024px){.steps,.blk-group.steps{grid-template-columns:repeat(2,minmax(0,1fr)) !important;max-width:46rem;}
  .steps:has(> .step:nth-child(3):last-child) > .step:last-child{grid-column:1 / -1;justify-self:center;width:calc((100% - var(--gap)) / 2);}}
@media (max-width:600px){.steps,.blk-group.steps{grid-template-columns:minmax(0,1fr) !important;}
  .steps:has(> .step:nth-child(3):last-child) > .step:last-child{grid-column:auto;width:auto;justify-self:stretch;}}

/* --- Reviews: equal cards everywhere (no masonry) */
.reviews-masonry{columns:auto !important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:stretch;}
.reviews-masonry > .review-link{display:flex;color:inherit;text-decoration:none;border-radius:var(--radius);}
.reviews-masonry > .review-link > .review-card,.reviews-masonry > .review-card{height:100%;width:100%;margin:0;display:flex;flex-direction:column;}
.review-card blockquote{flex:1;}
@media (max-width:1024px){.reviews-masonry{grid-template-columns:repeat(2,minmax(0,1fr));}.reviews-masonry > :nth-child(n+5){display:none;}}
@media (max-width:767px){.reviews-masonry{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;gap:var(--gap);margin:0 -24px;padding:4px 24px 12px;scrollbar-width:none;}
  .reviews-masonry > *{flex:0 0 84%;scroll-snap-align:start;}.reviews-masonry > :nth-child(n+5){display:flex;}}

/* --- Team (wp-admin > Team): 4 per row on desktop, 2 on phones, equal photo cards */
.team-grid.team-grid-photo{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);list-style:none;margin:0;padding:0;}
.team-grid-photo > .team-card{flex:none !important;min-width:0;display:flex;flex-direction:column;padding:0;overflow:hidden;text-align:left;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;}
.team-grid-photo > .team-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(10,27,51,.14);}
.team-photo{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-alt);}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;transition:transform .5s;}
.team-card:hover .team-photo img{transform:scale(1.03);}
.team-body{display:flex;flex-direction:column;gap:2px;padding:var(--space-2) var(--space-3) var(--space-3);flex:1;}
.team-name{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h5);color:var(--ink);line-height:1.25;}
.team-role{font-size:var(--fs-small);color:var(--muted);line-height:1.45;}
@media (max-width:1024px){.team-grid.team-grid-photo{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:767px){.team-grid.team-grid-photo{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.team-body{padding:12px 12px 14px;}.team-name{font-size:var(--fs-body);}}
@media (min-width:768px) and (max-width:1024px){.team-grid.team-grid-photo > :last-child:nth-child(3n+2){grid-column:auto;}}
@media (prefers-reduced-motion:reduce){.team-grid-photo > .team-card,.team-photo img{transition:none;}}

/* --- Project tiles: photo first, photo count badge, portfolio grid on /projecten/ */
.pt-photo{position:relative;}
.pt-count{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:rgba(10,27,51,.72);color:#fff;font-size:12px;font-weight:600;line-height:1;}
.ptile-grid.is-portfolio .pt-photo{aspect-ratio:4/3;}
.ptile[hidden]{display:none !important;}
.projects-portfolio .project-filters{margin-bottom:var(--space-4);}
.pf-btn.is-active{background:var(--blue) !important;}
@media (max-width:767px){.project-filters{gap:8px;}.pf-btn{padding-inline:14px;}}

/* --- Single project, photo-led */
.project-hero .container{align-items:center;}
.project-hero-photo{display:block !important;}
.project-hero-photo a{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.project-hero-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s;}
.project-hero-photo a:hover img{transform:scale(1.02);}
.project-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:12px;margin:var(--space-3) 0;padding:0;}
.project-stats > div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;}
.project-stats .ps-ico{grid-row:1 / 3;width:44px;height:44px;border-radius:12px;background:#EAF3FF;color:var(--blue);display:flex;align-items:center;justify-content:center;}
.project-stats dt{font-size:12px;color:var(--muted);margin:0;line-height:1.3;}
.project-stats dd{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h5);color:var(--ink);line-height:1.2;overflow-wrap:anywhere;}
.project-hero .btn-group{margin-top:var(--space-2);}
@media (max-width:767px){.project-hero .container{display:flex;flex-direction:column-reverse;gap:var(--space-3);}.project-hero-photo{width:100%;}.project-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
.project-gallery-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.project-gallery-grid li{margin:0;}
.project-gallery-grid a{display:block;border-radius:var(--radius-sm);overflow:hidden;position:relative;background:var(--bg-alt);}
.project-gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s;}
.project-gallery-grid a:hover img{transform:scale(1.04);}
.project-gallery-grid a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.project-gallery-grid.pg-count-2,.project-gallery-grid.pg-count-4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:62rem;margin-inline:auto;}
@media (max-width:767px){.project-gallery-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;margin:0 -24px;padding:0 24px;scrollbar-width:none;}
  .project-gallery-grid::-webkit-scrollbar{display:none;}.project-gallery-grid li{flex:0 0 82%;scroll-snap-align:start;}}
.single-project .project-story-wrap{max-width:46rem;margin:0 auto var(--space-4);}
.single-project .project-cta{max-width:46rem;}
.section-head.is-left{text-align:left;margin-left:0;}
.project-story.is-collapsed{max-height:15.5rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent);}
.story-toggle{margin-top:var(--space-2);background:none;border:0;padding:10px 0;min-height:44px;font:600 var(--fs-body)/1 var(--font-heading);color:var(--blue);cursor:pointer;}
.story-toggle:hover{text-decoration:underline;text-underline-offset:3px;}
/* lightbox */
dialog.lightbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(6,14,28,.94);color:#fff;}
dialog.lightbox::backdrop{background:rgba(6,14,28,.94);}
.lb-figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 72px 64px;}
.lb-img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;border-radius:8px;}
.lb-cap{margin-top:12px;font-size:var(--fs-small);color:#cbd5e1;text-align:center;max-width:60ch;}
.lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.lb-btn:hover,.lb-btn:focus-visible{background:rgba(255,255,255,.24);outline:none;}
.lb-close{top:14px;right:14px;}.lb-prev{left:14px;top:50%;transform:translateY(-50%);}.lb-next{right:14px;top:50%;transform:translateY(-50%);}
.lb-count{position:absolute;top:24px;left:24px;margin:0;font-size:var(--fs-small);color:#cbd5e1;}
@media (max-width:767px){.lb-figure{padding:56px 8px 72px;}.lb-prev,.lb-next{top:auto;bottom:14px;transform:none;}}
html.lb-open{overflow:hidden;}

/* --- Thank-you pages (template-bedankt.php) */
.thanks-hero .hero-copy{max-width:44rem;}
.thanks-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#EAF3FF;color:var(--blue);margin:0 auto var(--space-3);box-shadow:0 0 0 8px #F2F7FF;}
.thanks-hero .btn-group{justify-content:center;margin-top:var(--space-3);}
.contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);max-width:62rem;margin:0 auto;}
.contact-cards > .blk-group{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-3);text-align:center;}
.contact-cards h2,.contact-cards h3{font-size:var(--fs-h5) !important;margin-bottom:8px;}
.contact-cards p{margin:0;color:var(--muted);font-size:var(--fs-small);line-height:1.7;}
.contact-cards p a{font-weight:600;font-size:var(--fs-body);}
@media (max-width:767px){.contact-cards{grid-template-columns:minmax(0,1fr);}}

/* --- Micro-interactions with reduced-motion support */
.svc-card,.ptile,.review-link .review-card,.service-card{transition:transform .2s ease,box-shadow .2s ease;}
:is(.svc-card,.ptile,.review-link,.pf-btn,.btn,.hero-choices a):focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;}.svc-card,.ptile,.review-link .review-card,.service-card,.project-gallery-grid img,.project-hero-photo img{transition:none !important;}}
/* werkwijze brand strip under the whole timeline (3.12.0) */
.ww-brands.ww-brands-wide{margin:var(--space-4) auto 0;max-width:100%;text-align:center;grid-column:auto !important;}
.ww-brands-wide .ww-brands-label{text-align:center;margin-bottom:12px !important;}
.ww-brands-wide .ww-logos{gap:40px;padding:0 20px;}
.ww-brands-wide .ww-logos li{height:44px;}
@media (max-width:767px){.ww-brands-wide .ww-logos{gap:24px;}}

/* --- Gravity Forms (all forms, 3.12.0): image choices as brand icon cards with a clear selected state,
   one button style, calm field spacing. Display only: fields, IDs and feeds are untouched. */
.gform_wrapper.gravity-theme .gfield--type-image_choice .gfield_radio,.gform_wrapper .gfield--type-image_choice .gfield_radio,.gform_wrapper .gfield--type-image_choice .gfield_checkbox{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:12px !important;}
.gform_wrapper .gfield--type-image_choice .gchoice{width:auto !important;max-width:none !important;margin:0 !important;}
.gform_wrapper .gfield--type-image_choice .gfield-image-choice-wrapper-outer{position:relative;display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;min-height:128px;padding:18px 10px 14px !important;background:#fff !important;border:2px solid var(--border) !important;border-radius:var(--radius-sm) !important;box-shadow:none !important;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s;}
.gform_wrapper .gfield--type-image_choice .gfield-choice-image-wrapper{width:64px !important;height:64px !important;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#EAF3FF;margin:0 !important;aspect-ratio:auto !important;}
.gform_wrapper .gfield--type-image_choice .gfield-choice-image-wrapper img,.form-card .gform_wrapper .gfield--type-image_choice img{width:36px !important;height:36px !important;max-height:none !important;padding:0 !important;object-fit:contain;filter:invert(32%) sepia(96%) saturate(2900%) hue-rotate(205deg) brightness(101%) contrast(104%);}
.gform_wrapper .gfield--type-image_choice .gfield-image-choice-wrapper-inner{aspect-ratio:auto !important;height:auto !important;display:flex;align-items:center;justify-content:center;gap:6px;}
.gform_wrapper .gfield--type-image_choice .gfield-choice-input{position:absolute !important;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;}
.gform_wrapper .gfield--type-image_choice .gform-field-label--type-inline{font-family:var(--font-heading);font-weight:600;font-size:var(--fs-body) !important;color:var(--ink);margin:0 !important;text-align:center;}
.gform_wrapper .gfield--type-image_choice .gfield-image-choice-wrapper-outer:hover{border-color:#9cc7ff !important;}
.gform_wrapper .gfield--type-image_choice .gfield-image-choice-wrapper-outer:has(.gfield-choice-input:focus-visible){box-shadow:0 0 0 3px rgba(0,119,255,.25) !important;}
.gform_wrapper .gfield--type-image_choice .gfield-image-choice-wrapper-outer:has(.gfield-choice-input:checked){border-color:var(--blue) !important;background:#F2F8FF !important;}
.gform_wrapper .gfield--type-image_choice .gfield-image-choice-wrapper-outer:has(.gfield-choice-input:checked)::after{content:"";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;}
@media (max-width:767px){.gform_wrapper .gfield--type-image_choice .gfield_radio,.gform_wrapper .gfield--type-image_choice .gfield_checkbox{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media (prefers-reduced-motion:reduce){.gform_wrapper .gfield--type-image_choice .gfield-image-choice-wrapper-outer{transition:none;}}
.gform_wrapper .gform_fields{row-gap:20px !important;}
.gform_wrapper .gfield_label,.gform_wrapper legend.gfield_label{font-family:var(--font-heading) !important;font-weight:600 !important;font-size:var(--fs-body) !important;color:var(--ink) !important;margin-bottom:8px !important;}
.gform_wrapper .gsection{border-bottom:1px solid var(--border) !important;padding-bottom:10px !important;margin-top:8px;}
.gform_wrapper .gform_footer .gform_button,.gform_wrapper .gform_page_footer .gform_button,.gform_wrapper input[type=submit].gform_button,.gform_wrapper .gform_next_button,.gform_wrapper .gform_previous_button{min-height:var(--btn-h) !important;padding:0 var(--btn-px) !important;border-radius:999px !important;font:600 16px/1 var(--font-heading) !important;background:var(--orange) !important;border:2px solid var(--orange) !important;color:#fff !important;}
.gform_wrapper .gform_previous_button{background:#fff !important;color:var(--orange) !important;}
.gform_wrapper .gform_button_select_files{min-height:var(--btn-h-sm) !important;font:600 15px/1 var(--font-heading) !important;border-radius:999px !important;}
/* hero USP tiles (phones): equal height, same top, content from the top */
.hero-actions .hero-usps{align-items:stretch !important;}
@media (max-width:767px){.hero-actions .hero-usps li{justify-content:flex-start !important;height:100%;}}
/* contact cards and pricing as block content (3.12.0) */
.info-card .eyebrow{margin-bottom:4px;}
p.info-card-main{margin:6px 0 8px;font-size:var(--fs-h4);}
p.info-card-main a{font-weight:800;color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.pricing-grid{align-items:stretch;}
.pricing-grid > .pricing-card{display:flex;flex-direction:column;text-align:center;}
.pricing-grid > .pricing-card .pricing-items{flex:1;}
.pricing-grid > .pricing-card .blk-buttons{margin-top:auto;justify-content:center;}
.pricing-grid > .pricing-card .blk-button,.pricing-grid > .pricing-card .blk-button__link{width:100%;}
.pricing-note{max-width:var(--measure);margin:var(--space-3) auto 0;text-align:center;font-size:var(--fs-small);color:var(--muted);}
/* home blocks (3.12.0): checks on the service chips, system-card links at the bottom */
.os-chips{list-style:none;padding:0;}
.os-chips li::before{content:"";display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-3px;background:var(--blue);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;}
.system-card .sc-inner > p:last-child{margin-top:auto;margin-bottom:0;}
.callout-box > .blk-group p{margin:0;}
/* service icon cards on phones (3.12.0): one column, icon left, so long Dutch words never overflow the card */
@media (max-width:560px){
  .svc-grid:not(.svc-grid-photo),.svc-grid:not(.svc-grid-photo):has(> .svc-card:nth-child(4):last-child){grid-template-columns:minmax(0,1fr) !important;gap:10px;}
  .svc-grid:not(.svc-grid-photo) > .svc-card{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;row-gap:2px;align-items:center;text-align:left;padding:14px 16px;}
  .svc-grid:not(.svc-grid-photo) > .svc-card .svc-ico{grid-row:1 / span 3;width:48px;height:48px;border-radius:14px;align-self:start;}
  .svc-grid:not(.svc-grid-photo) > .svc-card > :not(.svc-ico){grid-column:2;}
  .svc-grid:not(.svc-grid-photo) > .svc-card .svc-title{overflow-wrap:break-word;}
  .svc-grid:not(.svc-grid-photo) > .svc-card .svc-link{justify-self:start;}
}
.svc-title{overflow-wrap:break-word;}
/* /offerte/ (Elementor Pro form, backend untouched): the same field style as the Gravity Forms forms (3.12.0) */
.elementor-form .elementor-field-group > label,.elementor-form .elementor-field-label{font-family:var(--font-heading) !important;font-weight:600 !important;font-size:15px !important;color:var(--ink) !important;margin-bottom:6px !important;}
.elementor-form .elementor-field-textual,.elementor-form select.elementor-field,.elementor-form .elementor-field-textual::placeholder{font-family:var(--font-body) !important;font-size:var(--fs-body) !important;color:var(--ink) !important;}
.elementor-form .elementor-field-textual::placeholder{color:#8a94a3 !important;}
.elementor-form .elementor-field-textual,.elementor-form select.elementor-field{min-height:48px !important;border:1px solid #cfd6df !important;border-radius:10px !important;background:#fff !important;padding:10px 14px !important;}
.elementor-form .elementor-field-textual:focus,.elementor-form select.elementor-field:focus{border-color:var(--blue) !important;box-shadow:0 0 0 3px rgba(0,119,255,.18) !important;outline:none !important;}
.elementor-form .elementor-select-wrapper::before{color:var(--ink) !important;}
.elementor-form .elementor-button,.elementor-form button[type=submit]{min-height:var(--btn-h) !important;border-radius:999px !important;background:var(--orange) !important;font:600 16px/1 var(--font-heading) !important;color:#fff !important;padding:0 28px !important;}
.elementor-form .elementor-field-subgroup .elementor-field-option label{color:var(--ink) !important;}
.crumbbar + .page-header{padding-top:var(--space-3);}
.crumbbar:has(+ .page-header){background:transparent;}
.callout-box{background:#fff !important;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-3) !important;}
/* cards: the link always sits on the bottom line of the card, so links in a row align */
.svc-card .svc-link{margin-top:auto;}
.svc-card .svc-line{margin-bottom:4px;}
/* form controls and filter chips use the site fonts (Arial fallback showed on buttons) */
button,input,select,textarea{font-family:inherit;}
.pf-btn{font-family:var(--font-heading) !important;font-weight:600;}
/* post content (migrated): no hyphen breaks in headings, code samples wrap inside the reading column */
.nobr{white-space:nowrap;}
.page-content pre,.page-content code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%;}
.page-content pre{overflow-x:auto;background:var(--bg-alt);border-radius:var(--radius-sm);padding:var(--space-2);font-size:var(--fs-small);}
.page-content table{display:block;max-width:100%;overflow-x:auto;}

/* 3.12.0 round 2 */
@media (max-width:560px){.svc-grid:not(.svc-grid-photo) > .svc-card,.svc-grid:not(.svc-grid-photo):has(> .svc-card:nth-child(5):last-child) > .svc-card{flex-basis:100% !important;max-width:none;}}
.project-gallery-grid img,.project-hero-photo img{height:auto !important;}
.hero .container:has(> .brand-hero-logo) .hero-choices-label{text-align:left !important;}
.single-project .project-story{max-width:none !important;margin:0 !important;padding:0 !important;}
.project-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.project-stats:has(> div:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
.project-stats dd{overflow-wrap:normal !important;word-break:normal;font-size:var(--fs-h6);}
@media (max-width:420px){.project-stats:has(> div:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr)) !important;}.project-stats:has(> div:nth-child(3):last-child) > div:last-child{grid-column:1 / -1;}}
.contact-cards p a{color:var(--blue);text-decoration:none;}.contact-cards p a:hover{text-decoration:underline;}
.svc-grid-photo > .svc-card.has-photo{display:grid !important;grid-template-rows:auto auto 1fr auto;justify-items:center;align-content:stretch;}
.svc-grid-photo > .svc-card.has-photo .svc-link{align-self:end;margin-top:8px;}
.svc-grid-photo > .svc-card.has-photo .svc-line{align-self:start;}
/* breadcrumbs on phones: the current page shrinks with an ellipsis, the trail never overflows */
.breadcrumbs .bc-current{min-width:0;overflow:hidden;flex:1 1 0;}
.breadcrumbs .bc-current > span{min-width:0;flex:1 1 auto;display:block;}
.breadcrumbs ol{min-width:0;max-width:100%;}
@media (max-width:400px){.svc-grid:not(.svc-grid-photo) > .svc-card .svc-title{font-size:15px;}}
/* team: 4 per row on desktop, 2 below 1025 px (8 people = full rows everywhere) */
@media (max-width:1024px){.team-grid.team-grid-photo{grid-template-columns:repeat(2,minmax(0,1fr)) !important;max-width:46rem;margin-inline:auto;}}
.gform_wrapper .gfield--type-image_choice .gfield_radio,.gform_wrapper .gfield--type-image_choice .gfield_checkbox{width:100% !important;}
.gform_wrapper .gfield--type-image_choice .gchoice{min-width:0 !important;width:100% !important;}
.gform_wrapper .gfield--type-image_choice .gfield-image-choice-wrapper-outer{width:100% !important;max-width:none !important;min-width:0 !important;box-sizing:border-box;inline-size:auto !important;}
.gform_wrapper .gfield--type-image_choice .gfield-choice-image-wrapper{border-radius:50% !important;overflow:hidden;}
.breadcrumbs a,.breadcrumbs .bc-mid a{display:inline-block;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:18rem;line-height:1.5;}
.breadcrumbs [aria-current]{vertical-align:middle;line-height:1.5;}
@media (pointer:coarse){.breadcrumbs a,.breadcrumbs .bc-mid a{min-height:44px;line-height:44px;}.breadcrumbs [aria-current]{line-height:44px;}}
@media (max-width:767px){.breadcrumbs .bc-mid a{max-width:7.5rem;}}
/* images: no upscaling (3.12.0 gate check 16) */
.service-card .sc-photo img{width:100%;height:auto !important;aspect-ratio:3/2;object-fit:cover;display:block;}
@media (max-width:1024px){.intro-split > figure img,.intro-split > img,.intro-split .blk-image img{aspect-ratio:16/10 !important;max-width:640px;height:auto !important;}}
@media (min-width:1025px){.intro-split > figure,.intro-split > .blk-image{align-self:stretch;}
  .intro-split > figure img,.intro-split > .blk-image img{position:sticky;top:110px;height:min(100%,720px) !important;max-height:720px !important;}}
.page-content p,.page-content li{overflow-wrap:break-word;}
@media (min-width:1025px){.ww-step .ww-title{min-height:2.4em;display:flex;align-items:flex-start;justify-content:center;}}
.page-content p > code:only-child{display:inline;}
/* small source photos (narrower than 1000 px) are never stretched or cropped up: shown at most at their own size */
figure.img-small img,.img-small img{width:auto !important;max-width:100% !important;height:auto !important;max-height:none !important;aspect-ratio:auto !important;object-fit:contain !important;position:static !important;}
@media (min-width:1025px){.intro-split > figure.img-small{align-self:center;}}
:is(.blk-image,.intro-split,.page-content,.text-block) img.img-small-src{width:auto !important;max-width:100% !important;height:auto !important;max-height:none !important;aspect-ratio:auto !important;object-fit:contain !important;position:static !important;}
@media (min-width:1025px){.intro-split > figure:has(img.img-small-src){align-self:center;}}
:is(.blk-image,.intro-split,.page-content,.text-block) img.img-small-src{min-height:0 !important;}
.back-to-top{translate:0 var(--btt-lift,0px);}
/* small source photos inside text+photo: never stretched (specific enough to beat the stretch rule) */
.intro-split > figure.img-small img,.intro-split > figure img.img-small-src{min-height:0 !important;width:auto !important;height:auto !important;max-width:100% !important;}
/* inline code in migrated posts is a markdown leftover: show it as normal text (no padding sticking out of the column) */
.page-content :is(p,li) code{background:none !important;padding:0 !important;font:inherit !important;color:inherit !important;white-space:normal !important;border:0 !important;}
/* long compound words in content headings: the heading-fit (--chars) wins over the content heading size */
.page-content h2[style*="--chars"]{font-size:min(var(--fs-h3), calc(100cqi / (var(--chars) * 0.72))) !important;}
.page-content h3[style*="--chars"]{font-size:min(var(--fs-h4), calc(100cqi / (var(--chars) * 0.72))) !important;}
figure.img-small img,:is(.blk-image,.intro-split,.page-content,.text-block) img.img-small-src{align-self:center !important;flex:none !important;justify-self:center;margin-inline:auto;}
/* migrated posts: inline colour spans inside headings follow the heading colour (ink) */
.page-content :is(h1,h2,h3,h4,h5,h6) :not(a){color:inherit !important;}
/* project CTA on phones: left aligned, buttons full width (long labels like "Meer over video-intercomsysteem" wrap) */
.project-cta .btn{white-space:normal;max-width:100%;text-align:center;}
@media (max-width:767px){.project-cta{text-align:left !important;align-items:stretch !important;padding:var(--space-3) !important;}.project-cta .btn-group{justify-content:flex-start !important;}.project-cta .btn{width:100%;}}
/* project facts on phones: one column, so long types ("Video-intercomsysteem") never run into the next fact */
@media (max-width:480px){.project-stats,.project-stats:has(> div:nth-child(3):last-child){grid-template-columns:minmax(0,1fr) !important;}.project-stats:has(> div:nth-child(3):last-child) > div:last-child{grid-column:auto;}}
/* small source photos in project heroes, galleries and post headers: never shown above their own size */
.project-hero-photo img.img-small-src,.post-hero-image img.img-small-src{width:auto !important;max-width:100% !important;height:auto !important;aspect-ratio:auto !important;margin-inline:auto;display:block;}
.project-hero-photo a:has(img.img-small-src){background:var(--bg-alt);display:flex;justify-content:center;}
.project-gallery-grid img.img-small-src{object-fit:contain !important;background:var(--bg-alt);}
/* a heading that is entirely a link stays a dark heading; the blue underline shows it is clickable */
.page-content :is(h2,h3,h4) > a:only-child{color:inherit !important;text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px;}
.page-content :is(h2,h3,h4) > a:only-child:hover{color:var(--blue) !important;}
/* project gallery: incomplete last row centred on the axis */
@media (min-width:768px){.project-gallery-grid{display:flex !important;flex-wrap:wrap;justify-content:center;}
  .project-gallery-grid > li{flex:0 0 calc((100% - 24px) / 3);}
  .project-gallery-grid.pg-count-2 > li,.project-gallery-grid.pg-count-4 > li{flex-basis:calc((100% - 12px) / 2);}}

/* ===== 3.12.20 project page, photo-led (Zawar 25-10: photos first, equal tiles, story in the site's card style) ===== */
/* hero: one crop for every hero photo (small sources too), no letterbox */
.project-hero .project-hero-photo a,.project-hero .project-hero-photo a:has(img.img-small-src){display:block;background:var(--bg-alt);}
.project-hero .project-hero-photo img,.project-hero .project-hero-photo img.img-small-src{width:100% !important;max-width:none !important;height:auto !important;aspect-ratio:4/3 !important;object-fit:cover !important;margin:0 !important;}
.project-hero .project-stats{margin-bottom:var(--space-2);}
/* gallery: fixed layouts per count, every tile the same crop */
.pgal{list-style:none;margin:0 auto;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));}
.pgal > li{margin:0;min-width:0;position:relative;}
.pgal > li[hidden]{display:none !important;}
.pgal a{display:block;position:relative;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-alt);}
.pgal img,.pgal img.img-small-src{position:absolute;inset:0;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;aspect-ratio:auto !important;object-fit:cover !important;margin:0 !important;transition:transform .4s;}
.pgal a:hover img{transform:scale(1.04);}
.pgal a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.pgal-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,27,51,.55);color:#fff;font:700 var(--fs-h5)/1.2 var(--font-heading);}
@media (min-width:768px){
  .pgal-n1{grid-template-columns:minmax(0,1fr);max-width:62rem;}
  .pgal-n1 a{aspect-ratio:16/9;}
  .pgal-n2,.pgal-n4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:62rem;}
  .pgal-n3{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
  .pgal-n5{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);}
  .pgal-n3 > li:first-child,.pgal-n5 > li:first-child{grid-row:span 2;}
  .pgal-n3 > li:first-child a,.pgal-n5 > li:first-child a{aspect-ratio:auto;height:100%;}
  .pgal-n6{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:767px){
  .pgal{gap:8px;}
  .pgal-odd > li:first-child{grid-column:1 / -1;}
  .pgal-odd > li:first-child a{aspect-ratio:16/10;}
}
@media (prefers-reduced-motion:reduce){.pgal img{transition:none;}}
/* story: one card per heading (situatie -> aanpak -> resultaat), the site's card + icon style */
.pstory-cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);grid-template-columns:repeat(3,minmax(0,1fr));}
.pstory-cards.pstory-c2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:62rem;margin-inline:auto;}
.pstory-cards.pstory-c4{grid-template-columns:repeat(4,minmax(0,1fr));}
.pstory-card{position:relative;margin:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;padding:var(--space-4) var(--space-3);background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0;}
.pstory-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:rgba(0,119,255,.08);color:var(--blue);flex:none;}
.pstory-card.is-last .pstory-ico{background:var(--blue);color:#fff;}
.pstory-num{font:700 var(--fs-h4)/1 var(--font-heading);}
.pstory-card h3{font-size:var(--fs-h5) !important;margin:0;}
.pstory-text p,.pstory-text li{font-size:var(--fs-body);margin:0 0 .75em;max-width:none;}
.pstory-text > :last-child{margin-bottom:0;}
@media (min-width:1025px){
  .pstory-card:not(.is-last)::after{content:"";position:absolute;top:calc(var(--space-4) + 16px);right:calc(-0.5 * var(--gap) - 12px);width:24px;height:24px;border-radius:50%;z-index:2;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;border:1px solid var(--border);}
}
@media (max-width:1024px){.pstory-cards,.pstory-cards.pstory-c4{grid-template-columns:minmax(0,1fr);max-width:46rem;margin-inline:auto;}.pstory-cards.pstory-c2{grid-template-columns:minmax(0,1fr);max-width:46rem;}}
@media (max-width:1024px){.pstory-card{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:6px;align-items:start;}.pstory-ico{grid-row:span 2;}.pstory-card h3{align-self:center;}}
@media (max-width:420px){.pstory-card{grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:var(--space-3) 16px;}.pstory-ico{width:44px;height:44px;border-radius:12px;}.pstory-ico svg{width:22px;height:22px;}}
/* story without headings: text + photo rows, photo sides alternate, photo top-aligned and sticky with the text */
.pstory-rows{display:flex;flex-direction:column;gap:var(--space-section);}
.pstory-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-split);align-items:start;}
.pstory-row.no-photo{grid-template-columns:minmax(0,1fr);max-width:46rem;margin-inline:auto;}
.pstory-row:nth-child(even) .pstory-photo{order:-1;}
.pstory-copy{min-width:0;max-width:var(--measure);}
.pstory-copy .section-head{margin-bottom:var(--space-3);}
.pstory-copy h3{font-size:var(--fs-h4) !important;margin:0 0 .6em;}
.pstory-copy p{max-width:none;}
.pstory-copy > :last-child{margin-bottom:0;}
.pstory-photo{position:sticky;top:104px;min-width:0;}
.pstory-photo a{display:block;position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);}
.pstory-photo img,.pstory-photo img.img-small-src{position:absolute;inset:0;width:100% !important;height:100% !important;max-width:none !important;aspect-ratio:auto !important;object-fit:cover !important;margin:0 !important;}
@media (max-width:1024px){
  .pstory-rows{gap:var(--space-4);}
  .pstory-row{grid-template-columns:minmax(0,1fr);max-width:46rem;margin-inline:auto;gap:var(--space-3);}
  .pstory-row .pstory-photo,.pstory-row:nth-child(even) .pstory-photo{order:-1;position:static;}
  .pstory-row:first-child .pstory-photo{order:0;}
  .pstory-copy{max-width:none;}
}
.project-story-section .project-cta{margin-top:var(--space-section);}

/* ===== 3.12.20 footer bottom bar: every text on one baseline, clean stack on phones (Zawar 25-10 "text alignments?") ===== */
.footer-bottom-inner{align-items:center;line-height:1.4;}
.footer-bottom-inner > div{display:flex;align-items:center;flex-wrap:wrap;min-height:32px;margin:0;}
.footer-bottom-inner .footer-copy span,.footer-legal .fl-kvk,.footer-legal a,.footer-credit span,.footer-credit a{display:inline-flex;align-items:center;min-height:32px;line-height:1.4;}
.footer-credit{gap:0 .3em;}
.footer-legal ul li{display:flex;align-items:center;}
@media (pointer:coarse){.footer-legal a,.footer-credit a{min-height:44px;}}
@media (max-width:767px){
  .footer-bottom-inner{flex-direction:column;align-items:center;text-align:center;gap:4px;}
  .footer-bottom-inner > div{justify-content:center;}
  .footer-legal{flex-direction:column;gap:0;}
  .footer-legal ul{display:grid;grid-template-columns:auto auto;justify-content:center;justify-items:center;column-gap:28px;row-gap:0;}
  .footer-legal a{min-height:44px;}
}
/* 3.12.20 project facts: chips sized to their content (long place names never overflow); phones: place full width, numbers side by side */
.project-hero .project-stats{display:flex;flex-wrap:wrap;gap:12px;}
.project-hero .project-stats > div{flex:1 1 auto;min-width:0;}
.project-hero .project-stats dd{overflow-wrap:normal;}
@media (max-width:767px){
  .project-hero .project-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .project-hero .project-stats > div:first-child,.project-hero .project-stats > div:last-child:nth-child(2){grid-column:1 / -1;}
  .project-hero .project-stats > div{padding:10px 12px;}
  .project-hero .project-stats .ps-ico{width:40px;height:40px;}
}
/* 3.12.20 header: 6 menu items + phone + CTA on one line from 1025 px (labels never wrap, tighter gaps below 1280) */
@media (min-width:1025px){
  .main-nav a,.main-nav button,.header-phone{white-space:nowrap;}
  .main-nav > ul > li > a{display:inline-flex;align-items:center;}
}
@media (min-width:1025px) and (max-width:1279px){
  .main-nav{gap:14px;}
  .main-nav > ul{gap:14px;}
  .main-nav > ul > li:nth-last-child(2){margin-left:0;}
  .main-nav > ul > li:nth-last-child(2) > a,.main-nav > ul > li:last-child > a{padding-left:14px !important;padding-right:14px !important;}
}
/* 3.12.20 photo boxes: equal boxes; when the crop would upscale a small source (> 1.15x), gallery.js adds .is-contain:
   the whole photo at most 1.1x its size, centred over a blurred fill of itself */
.project-hero .project-hero-photo a{position:relative;aspect-ratio:4/3;}
.project-hero .project-hero-photo a img.pg-main{position:absolute;inset:0;height:100% !important;aspect-ratio:auto !important;}
.pg-blur{display:none;position:absolute;inset:-24px;overflow:hidden;}
.pg-blur img{width:100% !important;height:100% !important;max-width:none !important;object-fit:cover !important;filter:blur(18px) saturate(.9) brightness(.92);transform:none !important;position:static !important;}
.is-contain .pg-blur{display:block;}
a.pg-open.is-contain img.pg-main{inset:auto !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;width:min(100%,calc(var(--w) * 1.1)) !important;height:min(100%,calc(var(--h) * 1.1)) !important;object-fit:contain !important;z-index:1;transition:none;}
a.pg-open.is-contain:hover img.pg-main{transform:translate(-50%,-50%) !important;}
/* ===== 3.12.20 text + photo splits: equal height, crop <= 10 % (custom.js "fit-split"); phones/tablets: own ratio ===== */
@media (min-width:1025px){
  .fit-split{align-items:start !important;}
  .fit-split > *{align-self:start !important;}
  .fit-split > :is(figure,img,.pstory-photo,.blk-image,.blk-image){height:var(--fit-h) !important;min-height:0 !important;max-height:none !important;position:relative !important;top:auto !important;overflow:hidden;border-radius:var(--radius);display:block;}
  .fit-split > figure img,.fit-split > .pstory-photo a,.fit-split > :is(.blk-image,.blk-image) img{height:100% !important;width:100% !important;min-height:0 !important;max-height:none !important;aspect-ratio:auto !important;object-fit:cover !important;position:static !important;}
  .fit-split > img{object-fit:cover !important;width:100% !important;aspect-ratio:auto !important;}
  .fit-split > .pstory-photo a img.pg-main{position:absolute !important;inset:0 !important;}
  .fit-split.fit-open > :is(figure,img,.pstory-photo,.blk-image,.blk-image){position:sticky !important;top:110px !important;}
  .fit-split .fit-clamped{overflow:hidden;position:relative;}
  .fit-split .fit-clamped > .fit-more{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-start;gap:6px;min-height:88px;padding:0 0 4px;border:0;cursor:pointer;color:var(--blue);font:700 var(--fs-body)/1.2 var(--font-heading);background:linear-gradient(rgba(255,255,255,0),var(--fit-bg,#fff) 60%);}
  .section-alt .fit-split .fit-clamped > .fit-more{--fit-bg:var(--bg-alt);}
  .fit-split .fit-more::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);margin-left:6px;}
}
@media (max-width:1024px){
  .intro-split > figure img,.intro-split > img,.intro-split :is(.blk-image,.blk-image) img{aspect-ratio:auto !important;height:auto !important;min-height:0 !important;max-height:none !important;}
}
/* phone hero photo: 3:2 instead of a 16:7 strip (a third of every photo was cut away) */
@media (max-width:767px){.hero-strip{aspect-ratio:3/2;margin:var(--space-2) 0;}}
/* 3.12.20 baseline gate: chips of different heights start their text on one line; phone steps: title centred on the number */
.os-chips li{align-items:flex-start;}
@media (max-width:767px){.steps > .step > h4{margin:7px 0 2px;}}
/* 3.12.21 "Overige diensten" chip band: long checklists moved out of the text column, full width under the split */
.chips-band{margin-top:var(--space-4);text-align:center;}
.chips-band > .eyebrow{display:block;margin:0 0 12px;}
.chips-band .os-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 12px;margin:0;padding:0;max-width:none;}
.chips-band .os-chips li{justify-content:flex-start;text-align:left;margin:0;}
@media (max-width:1024px){.chips-band .os-chips{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:600px){.chips-band .os-chips{grid-template-columns:repeat(2,minmax(0,1fr));}.chips-band .os-chips li:last-child:nth-child(odd){grid-column:1 / -1;}}
/* 3.12.21 fit-split: small sources fill their (narrowed) box like the rest; stacked rows; phone story photos at their own ratio */
@media (min-width:1025px){
  .fit-split > figure img.img-small-src,.fit-split > :is(.blk-image,.blk-image) img.img-small-src,.fit-split > img.img-small-src{width:100% !important;height:100% !important;object-fit:cover !important;max-width:none !important;}
  .intro-split.fit-stack{grid-template-columns:minmax(0,1fr) !important;max-width:62rem;margin-inline:auto;gap:var(--space-3) !important;}
  .intro-split.fit-stack > :is(figure,img,.blk-image,.blk-image){max-width:560px;width:100%;justify-self:start;}
  .intro-split.fit-stack > :is(figure,img,.blk-image,.blk-image){order:-1 !important;}
  .intro-split.fit-stack img{height:auto !important;min-height:0 !important;max-height:none !important;object-fit:contain !important;aspect-ratio:auto !important;position:static !important;}
}
@media (max-width:1024px){
  .pstory-photo a{aspect-ratio:auto !important;}
  .pstory-photo img.pg-main{position:static !important;width:100% !important;height:auto !important;}
  .pstory-photo .pg-blur{display:none !important;}
}
.os-chips li::before{flex:none;}
/* ===== 3.12.22 brand hub + "Andere merken": equal cards, logo, name, link (pattern "Merkenlogo's") ===== */
.brand-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--gap);}
.brand-cards > li{margin:0;min-width:0;display:flex;}
.brand-card{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:var(--space-3) var(--space-2);background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;}
a.brand-card:hover,a.brand-card:focus-visible{transform:translateY(-3px);border-color:rgba(0,119,255,.35);box-shadow:0 18px 40px rgba(10,27,51,.12);}
.bc-logo{display:flex;align-items:center;justify-content:center;height:72px;width:100%;}
.bc-logo img{max-width:100%;height:auto;object-fit:contain;}
.bc-name{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h6);line-height:1.3;color:var(--ink);}
.bc-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-small);color:var(--blue);}
@media (max-width:1024px){.brand-cards{grid-template-columns:repeat(var(--cols-t,3),minmax(0,1fr));}}
@media (max-width:600px){.brand-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.brand-cards > li:last-child:nth-child(odd){grid-column:1 / -1;}.bc-logo{height:56px;}}
@media (prefers-reduced-motion:reduce){.brand-card{transition:none;}}
.brand-box > a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
/* 3.12.22 crop rule (<= 10 %): post/page hero photos at their own ratio; a single gallery tile 3:2 */
.post-hero-image img{aspect-ratio:auto !important;height:auto !important;object-fit:initial !important;}
@media (min-width:768px){.pgal-n1 a{aspect-ratio:3/2;}}
/* 3.12.22 phones: project tiles as a swipe row (like the articles), service chips in two columns */
@media (max-width:640px){
  .projects-strip .ptile-grid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -24px;padding:4px 24px 12px;scrollbar-width:none;}
  .projects-strip .ptile-grid::-webkit-scrollbar{display:none;}
  .projects-strip .ptile-grid > .ptile{flex:0 0 82%;scroll-snap-align:start;}
  .os-chips{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
  .os-chips li{padding:8px 10px !important;font-size:13px !important;}
  .os-chips li:last-child:nth-child(odd){grid-column:1 / -1;}
}
/* 3.12.22 "Lees verder" without a fade: the rest of a long text in a FAQ-style item under its row / at the end of its block */
.fit-rest{margin:var(--space-3) 0 0;border-top:1px solid var(--border);}
.fit-rest .blk-details,.fit-rest details{border-bottom:1px solid var(--border);padding:14px 0;}
.fit-rest summary{font-size:var(--fs-body) !important;color:var(--ink);}
.fit-rest-body{padding-top:12px;}
.fit-rest-body > *{max-width:68ch;}
.fit-rest-body > :last-child{margin-bottom:0;}
@media (max-width:640px){.os-chips li{overflow-wrap:anywhere;hyphens:auto;}}
/* 3.12.22 project story rows: the stacked fallback (photo above the text at its own ratio) */
@media (min-width:1025px){
  .pstory-row.fit-stack{grid-template-columns:minmax(0,1fr) !important;max-width:46rem;margin-inline:auto;gap:var(--space-3);}
  .pstory-row.fit-stack .pstory-photo{order:-1 !important;position:static;max-width:560px;width:100%;}
  .pstory-row.fit-stack .pstory-photo a{aspect-ratio:auto !important;}
  .pstory-row.fit-stack .pstory-photo img.pg-main{position:static !important;width:100% !important;height:auto !important;transform:none !important;}
  .pstory-row.fit-stack .pg-blur{display:none !important;}
  .pstory-row.fit-stack .pstory-copy{max-width:none;}
}
.faq-list.fit-rest{max-width:none;width:100%;}
/* 3.12.23 split headings at most 32 px (a 36 px H2 of 70+ characters ran to 4 lines in a half column and broke the equal-height split); "Lees verder" text 75ch */
.intro-split :is(h2,.blk-heading:is(h2)){font-size:min(var(--fs-h2),2rem) !important;}
.fit-rest-body > *{max-width:75ch;}
/* 3.12.24 contact person card ([id_contactpersoon]): small round photo beside the text, centred; phones stacked */
.contact-card{display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--space-4);align-items:center;max-width:52rem;margin:0 auto;padding:var(--space-4);background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.cc-photo{display:block;width:160px;height:160px;border-radius:50%;overflow:hidden;background:var(--bg-alt);box-shadow:0 0 0 6px #EAF3FF;}
.cc-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;}
.cc-body h2{font-size:var(--fs-h3) !important;margin:0 0 6px;}
.cc-name{margin:0 0 8px;color:var(--ink);}
.cc-body p{max-width:none;}
.cc-body .btn-group{margin-top:var(--space-2);}
@media (max-width:640px){.contact-card{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:var(--space-3);}.cc-photo{width:128px;height:128px;}.cc-body .btn-group{justify-content:center;}.cc-body .btn-group .btn{width:100%;}}
/* 3.12.25 brand cards: centred wrap, so a shorter last row sits in the middle (column count still per number of brands) */
.brand-cards{display:flex !important;flex-wrap:wrap;justify-content:center;}
.brand-cards > li{flex:0 0 calc((100% - (var(--cols,4) - 1) * var(--gap)) / var(--cols,4));}
@media (max-width:1024px){.brand-cards > li{flex-basis:calc((100% - (var(--cols-t,3) - 1) * var(--gap)) / var(--cols-t,3));}}
@media (max-width:600px){.brand-cards{gap:12px;}.brand-cards > li{flex-basis:calc((100% - 12px) / 2);}.brand-cards > li:last-child:nth-child(odd){flex-basis:calc((100% - 12px) / 2);}}
.ww-logos a{display:flex;align-items:center;}
/* 3.12.25 phone steps: any heading level centres on the number; tablet hero photos 16:10 (a 4:3 box upscaled wide photos) */
@media (max-width:767px){.steps > .step > :is(h3,h4,h5){margin:7px 0 2px;}}
@media (min-width:768px) and (max-width:1024px){.hero:not(.project-hero) .hero-media :is(img,video){aspect-ratio:16/10 !important;}}
/* 3.12.26 compact page head (information pages): H1 + intro, centred, less padding; content starts directly */
.hero.hero-compact{padding:var(--space-4) 0 var(--space-3);}
.hero.hero-compact .hero-copy{max-width:46rem;margin-inline:auto;}
.hero.hero-compact h1{margin-bottom:var(--space-2);}
.hero.hero-compact .lead{margin-inline:auto;margin-bottom:0;}
.hero-compact-cta{margin:var(--space-2) 0 0;}
.hero.hero-compact + .section{padding-top:var(--space-4);}
/* 3.12.26 tablets: the stacked hero photo at most 560 px wide, so the page's own content starts within 1.2 screens */
@media (min-width:768px) and (max-width:1024px){.hero:not(.project-hero) .hero-media{max-width:480px;width:100%;}.hero:not(.project-hero){padding-bottom:var(--space-4);}}