/* =====================================================
Grazy Brandwering — Design System
Brand palette matches grazybrandwering.nl
(signal orange #FF5400 on a warm near-black + paper neutral scale)
===================================================== */
/* Fonts: Inter + Space Grotesk, self-hosted from /assets/fonts (variable woff2, latin + latin-ext).
No request to Google leaves the visitor's browser (AVG/GDPR), and the latin files are
-ed in each page head (build.py) so text renders in the brand font immediately. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url("../fonts/inter-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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url("../fonts/inter-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
src:url("../fonts/space-grotesk-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:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
src:url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* Arabic (the /ar/ mirror): Noto Kufi Arabic, variable weight 100-900, Arabic
subset. Self-hosted on the same terms as the Latin faces — no request leaves
the visitor's browser (AVG/GDPR). A geometric Kufi rather than a Naskh, so it
sits closer to Space Grotesk's constructed feel than a book face would.
SIL Open Font License 1.1; the licence ships next to the font as
assets/fonts/arabic-OFL.txt, which the OFL requires to travel with it.
unicode-range matches Google's own Arabic subset, so browsers fetch this file
only when Arabic text is on the page and the Latin locales never pay for it.
It includes U+200C-200E (ZWNJ/ZWJ/LRM): Arabic is cursive and bidirectional,
and those invisible characters control joining and direction runs. */
@font-face{font-family:'Grazy Arabic';font-style:normal;font-weight:100 900;font-display:swap;
src:url("../fonts/arabic.woff2") format("woff2");
unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;}
/* metric-matched stand-in while Inter loads, so body text doesn't reflow on swap */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');
size-adjust:107%;ascent-override:90%;descent-override:22.4%;line-gap-override:0%;}
:root{
/* ---- Brand: signal orange (exact grazybrandwering.nl accent) ---- */
--primary:#FF5400; /* fills, large UI, brand marks */
--primary-strong:#E84B00; /* hover / pressed on light */
--primary-dark:#D94500; /* legacy alias (referenced by main.js) */
--primary-ink:#C23E00; /* orange that stays legible as body text */
--primary-light:#FF7A33; /* accents on dark */
--primary-300:#FF9E66; /* subtle highlights on dark */
--primary-tint:rgba(255,84,0,.09);
--primary-tint-strong:rgba(255,84,0,.16);
--accent:#FFB020; /* secondary warm accent (ember) */
/* ---- Warm neutral scale (paper → near-black) ---- */
--bg:#ffffff;
--bg-soft:#FAF4EC; /* warm paper, matches brand cream */
--bg-soft-2:#F1E8DA;
--paper-line:#EFE6D6;
--dark:#2A2420; /* warm charcoal (was near-black #0B0A0A — */
--dark-2:#352E28; /* softened so dark sections don't slam */
--dark-raised:#3F362F; /* against white/paper at ~20:1; still */
--dark-3:#483E36; /* ~15:1 on white, plenty for AA text) */
/* ---- Text ---- */
--text:#1A1815; /* ~15.8:1 on white */
--text-muted:#565049; /* ~7.3:1 on white — safe for body copy */
--text-soft:#7C746A; /* ~4.6:1 on white — captions / meta */
--invert:#F6F2EC;
--invert-muted:#B9B2A8;
--invert-soft:#8F887E;
/* ---- Lines & surfaces ---- */
--border:#E8DFD0;
--border-strong:#D9CDB8;
--border-dark:#4C4139;
--border-dark-soft:rgba(255,255,255,.09);
/* ---- Status ---- */
--success:#1F9D55;
--success-ink:#186B3D;
--danger:#D93A0F;
/* ---- Radii ---- */
--radius-xs:6px;
--radius-sm:10px;
--radius-md:16px;
--radius-lg:26px;
--radius-xl:34px;
--radius-pill:999px;
/* ---- Elevation (warm-tinted, layered) ---- */
--shadow-xs:0 1px 2px rgba(26,17,8,.06);
--shadow-sm:0 2px 6px rgba(26,17,8,.06), 0 8px 20px rgba(26,17,8,.05);
--shadow-md:0 4px 12px rgba(26,17,8,.08), 0 18px 40px rgba(26,17,8,.10);
--shadow-lg:0 10px 24px rgba(26,17,8,.12), 0 34px 72px rgba(26,17,8,.18);
--shadow-primary:0 12px 28px rgba(255,84,0,.30);
--ring:0 0 0 3px #fff, 0 0 0 6px rgba(255,84,0,.55);
--ring-invert:0 0 0 3px var(--dark), 0 0 0 6px rgba(255,158,102,.75);
/* ---- Type ---- */
--font-head:'Space Grotesk','Outfit','Segoe UI',system-ui,sans-serif;
--font-body:'Inter','Inter Fallback','Segoe UI',system-ui,-apple-system,sans-serif;
/* Arabic: the webfont when present, then the best system Arabic face. */
--font-arabic:'Grazy Arabic','SF Arabic','Geeza Pro','Segoe UI','Noto Naskh Arabic','Noto Sans Arabic',system-ui,sans-serif;
--step--1:clamp(.82rem,.79rem + .12vw,.9rem);
--step-0:1rem;
--step-1:clamp(1.08rem,1.02rem + .3vw,1.25rem);
--step-2:clamp(1.3rem,1.18rem + .6vw,1.6rem);
--step-3:clamp(1.55rem,1.3rem + 1.1vw,2.1rem);
--step-4:clamp(1.9rem,1.5rem + 1.9vw,2.9rem);
--step-5:clamp(2.05rem,1.5rem + 2.8vw,3.7rem);
/* ---- Rhythm ---- */
--section-y:clamp(64px,4vw + 40px,112px);
--container:1240px;
--gutter:max(clamp(20px,4vw,32px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); /* clears the notch in landscape (viewport-fit=cover) */
/* ---- Motion ---- */
--ease:cubic-bezier(.22,.61,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--dur-1:.14s;
--dur-2:.22s;
--dur-3:.4s;
--z-header:1000;
--z-overlay:1100;
--z-toast:1200;
color-scheme:light;
}
/* ===================== Base ===================== */
*,*::before,*::after{box-sizing:border-box;}
*{min-width:0;}
html{
scroll-behavior:smooth;
scroll-padding-top:96px; /* clears sticky header on anchor jumps */
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
overflow-x:hidden; /* fallback for Safari < 16, which lacks clip */
overflow-x:clip; /* contains the off-canvas mobile nav (fixed, off-screen on the trailing edge — right in LTR, left in RTL) */
-webkit-tap-highlight-color:rgba(255,84,0,.14);
}
body{
margin:0;
font-family:var(--font-body);
font-size:var(--step-0);
color:var(--text);
background:var(--bg);
line-height:1.65;
font-feature-settings:"cv05","ss01";
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
overflow-wrap:break-word; /* long Dutch compounds / e-mail addresses never push the page sideways */
}
img,svg,video{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;}
strong,b{font-weight:600;}
::selection{background:var(--primary);color:#fff;}
::-moz-selection{background:var(--primary);color:#fff;}
/* Skip link: first tab stop on every page, visible only while focused */
.skip-link{
position:absolute;inset-inline-start:max(12px,env(safe-area-inset-left));top:-120px;z-index:calc(var(--z-header) + 10);
background:var(--primary);color:#fff;font-weight:700;font-size:.95rem;
padding:12px 18px;border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
transition:top var(--dur-2) var(--ease-out);
}
.skip-link:focus{top:12px;outline:none;box-shadow:var(--ring-invert);}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
outline:none;
border-radius:var(--radius-xs);
box-shadow:var(--ring);
}
.section-dark :where(a,button):focus-visible,
.hero :where(a,button):focus-visible,
.site-footer :where(a,button):focus-visible,
.main-nav .mega :where(a,button):focus-visible,
.lang-menu :where(a,button):focus-visible,
.lang-note :where(a,button):focus-visible{box-shadow:var(--ring-invert);}
@media(max-width:1340px){
.main-nav :where(a,button):focus-visible{box-shadow:var(--ring-invert);}
}
/* Headings */
h1,h2,h3,h4{
font-family:var(--font-head);
font-weight:600;
line-height:1.12;
letter-spacing:-.02em;
margin:0 0 .5em;
color:var(--text);
text-wrap:balance;
}
h1{font-size:var(--step-5);font-weight:700;letter-spacing:-.03em;}
h2{font-size:var(--step-4);font-weight:600;}
h3{font-size:var(--step-2);}
h4{font-size:var(--step-1);}
p{margin:0 0 1em;color:var(--text-muted);text-wrap:pretty;}
p:last-child{margin-bottom:0;}
/* Layout primitives */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
.container.narrow{max-width:760px;}
.container.narrow > .reveal > p{font-size:var(--step-1);}
section{padding:var(--section-y) 0;}
.section-soft{background:var(--bg-soft);}
.section-dark{background:var(--dark);color:var(--invert);position:relative;z-index:0;}
/* the flat near-black reads harsh right against white/cream neighbours —
ease the top/bottom ~130px toward the softer dark-3 instead of a flat slab.
z-index:0 above (not just position:relative) matters: it makes .section-dark
its own stacking context, so this ::before's z-index:-1 stays local instead of
escaping to the page root and rendering behind the whole site's background. */
.section-dark::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
background:
linear-gradient(to bottom,rgba(250,244,236,.16),transparent 170px),
linear-gradient(to top,rgba(250,244,236,.12),transparent 170px);
}
.section-dark p{color:var(--invert-muted);}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4,
.hero h1,.hero h2,.hero h3,.hero h4,
.pagebanner h1,.pagebanner h2,.pagebanner h3{color:#fff;}
.section-dark a:not(.btn):hover{color:#fff;}
/* Soften the seam where a dark block (hero/pagebanner/section-dark/footer) meets
the lighter section right before or after it: a soft shadow-like wash eases the
jump instead of a flat white-to-black cut, both entering and leaving the block. */
.hero+section:not(.hero):not(.section-dark):not(.pagebanner),
.pagebanner+section:not(.hero):not(.section-dark):not(.pagebanner),
.section-dark+section:not(.hero):not(.section-dark):not(.pagebanner),
section:has(+ .hero):not(.hero):not(.section-dark):not(.pagebanner),
section:has(+ .pagebanner):not(.hero):not(.section-dark):not(.pagebanner),
section:has(+ .section-dark):not(.hero):not(.section-dark):not(.pagebanner),
section:has(+ .site-footer),
main:has(+ .site-footer)>section:last-child{position:relative;z-index:0;}
.hero+section:not(.hero):not(.section-dark):not(.pagebanner)::before,
.pagebanner+section:not(.hero):not(.section-dark):not(.pagebanner)::before,
.section-dark+section:not(.hero):not(.section-dark):not(.pagebanner)::before{
content:"";position:absolute;top:0;left:0;right:0;height:clamp(90px,14vw,220px);
background:linear-gradient(to bottom,rgba(42,36,32,.28),transparent);
pointer-events:none;z-index:-1;
}
section:has(+ .hero):not(.hero):not(.section-dark):not(.pagebanner)::after,
section:has(+ .pagebanner):not(.hero):not(.section-dark):not(.pagebanner)::after,
section:has(+ .section-dark):not(.hero):not(.section-dark):not(.pagebanner)::after,
section:has(+ .site-footer)::after,
main:has(+ .site-footer)>section:last-child::after{
content:"";position:absolute;bottom:0;left:0;right:0;height:clamp(90px,14vw,220px);
background:linear-gradient(to top,rgba(42,36,32,.28),transparent);
pointer-events:none;z-index:-1;
}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font:600 .76rem/1 var(--font-body);letter-spacing:.11em;text-transform:uppercase;
color:var(--primary-ink);background:var(--primary-tint);
padding:8px 14px;border-radius:var(--radius-pill);margin-bottom:18px;
border:1px solid rgba(255,84,0,.14);
}
.eyebrow::before{
content:"";width:13px;height:15px;flex:none;background-color:var(--primary);
-webkit-mask-image:url("../img/brand-mark.png");mask-image:url("../img/brand-mark.png");
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
}
.hero .eyebrow::before,.section-dark .eyebrow::before{background-color:var(--primary-300);}
.section-dark .eyebrow{background:rgba(255,122,51,.14);color:var(--primary-300);border-color:rgba(255,122,51,.22);}
/* the homepage hero sits on a photo + orange glow, not a flat dark fill —
the tinted-orange eyebrow above reads as orange-on-orange there, so it
gets a solid dark chip instead to keep the light text legible */
.hero .eyebrow{background:rgba(42,36,32,.55);color:var(--primary-300);border-color:rgba(255,255,255,.18);}
.section-head{max-width:720px;margin:0 0 clamp(32px,4vw,52px);}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head p{font-size:var(--step-1);}
/* ===================== Buttons ===================== */
.btn{
--_bg:var(--primary);--_fg:#fff;--_bd:transparent;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font:600 .95rem/1 var(--font-body);letter-spacing:.005em;
padding:15px 26px;border-radius:var(--radius-pill);
background:var(--_bg);color:var(--_fg);
border:1.5px solid var(--_bd);cursor:pointer;white-space:nowrap;max-width:100%;
transition:transform var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out),
background-color var(--dur-2) var(--ease),
color var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease);
will-change:transform;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.985);}
.btn svg{width:18px;height:18px;flex:none;transition:transform var(--dur-2) var(--ease-out);}
.btn:hover svg:last-child{transform:translateX(3px);}
.btn-primary{--_bg:var(--primary);--_fg:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{--_bg:var(--primary-strong);box-shadow:var(--shadow-primary);}
.btn-outline{--_bg:transparent;--_fg:var(--text);--_bd:var(--border-strong);}
.btn-outline:hover{--_bg:var(--text);--_fg:#fff;--_bd:var(--text);}
.section-dark .btn-outline,.hero .btn-outline,.cookie-banner .btn-outline{--_fg:#fff;--_bd:rgba(255,255,255,.28);}
.section-dark .btn-outline:hover,.hero .btn-outline:hover,.cookie-banner .btn-outline:hover{--_bg:#fff;--_fg:var(--dark);--_bd:#fff;}
.btn-ghost-invert{--_bg:rgba(255,255,255,.04);--_fg:#fff;--_bd:rgba(255,255,255,.32);}
.btn-ghost-invert:hover{--_bg:#fff;--_fg:var(--dark);--_bd:#fff;}
.btn-sm{padding:10px 18px;font-size:.85rem;gap:8px;}
.btn-sm svg{width:16px;height:16px;}
.btn-block{width:100%;}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none;}
/* ===================== Header ===================== */
.site-header{
--header-h:72px;
position:sticky;top:0;z-index:var(--z-header);
background:var(--bg);
border-bottom:1px solid var(--border);
transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
/* JS adds this once the footer scrolls into view, so the sticky bar stops
parking itself over the last footer links at the bottom of the page.
Narrower than the 640px footer accordion on purpose — see main.js. */
@media(max-width:520px){
.site-header.header-hide{transform:translateY(-100%);}
}
/* JS adds .is-scrolled once the page moves — the bar tightens and lifts */
.site-header.is-scrolled{
--header-h:60px;
background:var(--bg);
border-bottom-color:var(--border-strong);
box-shadow:var(--shadow-sm);
}
/* The page body stays on the 1240px grid, but the header does not have to:
its three children (brand / nav / actions) are sized by their content, and
the translated navs need more than 1240px gives them — the Dutch bar fits in
837px of links, German and French need 890-905px, and the Russian CTA alone
is 233px against the Dutch 154px. Capped at --container, the surplus spilled
over .header-actions and the last links ("Kontakt", "Контакты") rendered
inside the CTA pill. Letting the bar use the viewport on wide screens gives
every locale room for the real menu instead of hiding it behind a burger. */
.header-top{
display:flex;align-items:center;justify-content:space-between;gap:16px;
height:var(--header-h);padding:0 var(--gutter);
max-width:min(1600px,100%);margin:0 auto;
transition:height var(--dur-2) var(--ease);
}
/* ---- Brand ---- */
.brand{display:flex;align-items:center;gap:12px;color:var(--text);border-radius:var(--radius-sm);flex:none;}
.header-logo{
display:block;width:150px;height:auto;flex:none;
filter:drop-shadow(0 4px 10px rgba(255,84,0,.28));
transition:width var(--dur-2) var(--ease),filter var(--dur-2) var(--ease);
}
.is-scrolled .header-logo{width:120px;}
.brand:hover .header-logo{filter:drop-shadow(0 6px 18px rgba(255,84,0,.5));}
.brand--footer{gap:0;}
.footer-logo{display:block;width:200px;height:auto;filter:drop-shadow(0 4px 16px rgba(255,84,0,.20));}
@media(max-width:520px){.footer-logo{width:172px;}}
/* ---- Desktop nav ---- */
.main-nav{display:flex;align-items:center;gap:2px;position:relative;}
.main-nav>ul{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;}
.main-nav>ul>li{flex:none;}
.main-nav a.nav-link{
position:relative;color:var(--text-muted);font-weight:500;font-size:.885rem;white-space:nowrap;
padding:8px 8px;border-radius:var(--radius-sm);
display:flex;align-items:center;gap:4px;
transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease);
}
.main-nav a.nav-link::after{
content:"";position:absolute;left:8px;right:8px;bottom:3px;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--primary),var(--primary-light));
transform:scaleX(0);transform-origin:center;
transition:transform var(--dur-2) var(--ease-out);
}
.main-nav a.nav-link:hover,.main-nav .has-dropdown:hover>a.nav-link{color:var(--text);background:rgba(26,17,8,.05);}
.main-nav a.nav-link:hover::after{transform:scaleX(.55);}
.main-nav a.nav-link.active{color:var(--text);}
.main-nav a.nav-link.active::after{transform:scaleX(1);}
.main-nav .chev{width:13px;height:13px;flex:none;opacity:.65;transition:transform var(--dur-2) var(--ease);}
.main-nav .has-dropdown:hover .chev,
.main-nav .has-dropdown:focus-within .chev,
.main-nav .has-dropdown > a[aria-expanded="true"] .chev{transform:rotate(180deg);}
/* ===================== Nav dropdowns: Diensten / Advies / Sectoren (desktop) ===================== */
/* each trigger is the positioning context for its own panel — previously only
.has-dropdown--anchored (Sectoren) had position:relative, so Diensten's and
Advies & beheer's panels fell back to the whole .main-nav as their anchor
and opened left-aligned under "Home" instead of under their own trigger */
.main-nav .has-dropdown{position:relative;}
.main-nav .mega{
position:absolute;top:calc(100% + 13px);inset-inline-start:0;
width:min(700px,calc(100vw - 300px));
background:var(--dark-2);border:1px solid rgba(255,255,255,.09);
border-radius:var(--radius-md);
box-shadow:0 24px 60px -12px rgba(0,0,0,.55),0 8px 24px -10px rgba(0,0,0,.45);
padding:6px;
opacity:0;visibility:hidden;transform:translateY(9px);
transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out),visibility var(--dur-2);
z-index:5;
}
/* invisible bridge so the pointer can cross the gap from trigger to panel */
.main-nav .mega::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px;}
/* mouse: :hover — keyboard: JS mirrors focus into aria-expanded (see main.js).
:focus-within is the no-JS safety net so tabbed-to links are never invisible. */
.main-nav .has-dropdown:hover .mega,
.main-nav .has-dropdown > a[aria-expanded="true"] + .mega,
.no-js .main-nav .has-dropdown:focus-within .mega{
opacity:1;visibility:visible;transform:translateY(0);
}
.main-nav .mega.mega--sm{width:300px;padding:14px;}
.main-nav .mega.mega--diensten{padding:18px 16px 16px;}
/* Sectoren sits right of centre in the nav, so its panel hangs centred under its own trigger */
.main-nav .has-dropdown--anchored{position:relative;}
.main-nav .mega.mega--sectors{width:640px;inset-inline-start:50%;margin-inline-start:-320px;padding:18px 16px 0;}
.mega-eyebrow{
font-family:var(--font-body);font-weight:600;font-size:.68rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--primary-300);margin:0 0 10px;padding:0 8px;
}
.mega-list{list-style:none;margin:0;padding:0;display:grid;}
.mega-list--2col{grid-template-columns:1fr 1fr;gap:1px;}
.mega-list a{
display:flex;align-items:flex-start;gap:11px;
padding:9px 8px;border-radius:10px;
color:var(--invert-muted);
transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.mega-list a:hover,.mega-list a:focus-visible{background:rgba(255,84,0,.12);color:#fff;}
.mega-ic{
flex:none;display:flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:9px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
color:var(--primary-300);
transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.mega-list a:hover .mega-ic,.mega-list a:focus-visible .mega-ic{
background:rgba(255,84,0,.2);border-color:rgba(255,84,0,.35);color:#fff;
}
.mega-ic svg{width:20px;height:20px;}
.mega-tt{
display:flex;flex-direction:column;gap:2px;min-width:0;
font-weight:600;font-size:.875rem;line-height:1.3;color:#fff;
}
.mega-tt span{font-weight:500;font-size:.775rem;line-height:1.35;color:var(--invert-muted);}
.mega-list a:hover .mega-tt span{color:rgba(255,255,255,.82);}
.mega-all{
display:flex;align-items:center;justify-content:center;gap:8px;
margin-top:12px;padding:11px 14px;border-radius:10px;
background:var(--primary);color:#fff;font-weight:700;font-size:.85rem;
transition:background-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease-out);
}
.mega-all svg{width:17px;height:17px;transition:transform var(--dur-2) var(--ease-out);}
.mega-all:hover,.mega-all:focus-visible{background:var(--primary-strong);}
.mega-all:hover svg{transform:translateX(3px);}
.mega-foot{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin:12px -16px 0;padding:12px 24px;
border-top:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.025);border-radius:0 0 var(--radius-md) var(--radius-md);
}
.mega-foot p{margin:0;font-size:.8rem;line-height:1.4;color:var(--invert-muted);}
.mega-foot p a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,84,0,.6);text-underline-offset:3px;}
.mega-foot p a:hover{text-decoration-color:var(--primary);}
.mega-foot-link{
flex:none;display:inline-flex;align-items:center;gap:6px;
font-weight:700;font-size:.82rem;color:var(--primary-300);white-space:nowrap;
}
.mega-foot-link svg{width:15px;height:15px;transition:transform var(--dur-2) var(--ease-out);}
.mega-foot-link:hover{color:#fff;}
.mega-foot-link:hover svg{transform:translateX(3px);}
@media(prefers-reduced-motion:reduce){
.main-nav .mega,
.main-nav .has-dropdown:hover .mega,
.main-nav .has-dropdown > a[aria-expanded="true"] + .mega,
.no-js .main-nav .has-dropdown:focus-within .mega{transform:none;transition:opacity var(--dur-1) linear,visibility var(--dur-1);}
}
/* ---- Actions ---- */
.header-actions{display:flex;align-items:center;gap:12px;flex:none;}
.header-actions::before{content:"";display:none;width:1px;height:24px;background:var(--border);}
.header-phone{display:none;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:.88rem;white-space:nowrap;transition:color var(--dur-1) var(--ease);}
.header-phone:hover{color:var(--primary-300);}
.header-phone svg{width:18px;height:18px;color:var(--primary-300);flex:none;}
/* ---- Hamburger (animates to an X via aria-expanded) ---- */
.nav-toggle{
display:none;position:relative;width:44px;height:44px;margin:0 -10px 0 0;
align-items:center;justify-content:center;
background:none;border:0;color:var(--text);cursor:pointer;border-radius:var(--radius-sm);
}
.nav-toggle:hover{background:rgba(26,17,8,.05);}
.nav-toggle svg{width:26px;height:26px;overflow:visible;}
.nav-toggle svg line{transition:transform var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease);transform-box:fill-box;transform-origin:center;}
.nav-toggle[aria-expanded="true"] svg line:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] svg line:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] svg line:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
/* ---- In-drawer contact block (built by main.js, mobile only) ---- */
.nav-cta{display:none;}
@media(min-width:1341px){.header-actions::before{display:block;}}
/* between 1201 and 1360px the 8-item nav has no spare room */
@media(min-width:1341px) and (max-width:1420px){
.header-logo{width:132px;}
.is-scrolled .header-logo{width:112px;}
}
/* Below ~1400px the header can't widen any further (it is already at 100vw),
so the room for the longer translated labels has to come from the bar
itself: tighter link padding, no inter-item gap, and a narrower actions
cluster. Dutch has slack to spare here and is unaffected by the squeeze. */
@media(min-width:1341px) and (max-width:1460px){
.main-nav>ul{gap:0;}
.main-nav a.nav-link{padding-inline:5px;}
.main-nav .chev{width:12px;}
.header-actions{gap:8px;}
.header-top{gap:10px;}
}
@media(max-width:1340px){
/* backdrop-filter on the header makes it the containing block for the
fixed drawer, which collapsed it to a sliver — drop it on mobile */
.site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg);}
.site-header.is-scrolled{box-shadow:0 8px 24px -10px rgba(26,17,8,.18);}
.nav-toggle{display:inline-flex;}
.header-actions{gap:8px;}
.header-actions > .btn{display:none;} /* CTA lives in the drawer + hero */
.header-actions > .lang-select{display:none;} /* lives in the drawer instead — top bar is tight enough already */
/* the top bar stays above the drawer sheet that slides in beneath it */
.header-top{position:relative;z-index:calc(var(--z-header) + 2);background:var(--bg);}
/* Scrim */
.nav-scrim{
position:fixed;inset:0;z-index:calc(var(--z-header) - 1);
background:rgba(6,5,5,.55);
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
opacity:0;visibility:hidden;
transition:opacity var(--dur-2) var(--ease),visibility var(--dur-2);
}
.nav-scrim.show{opacity:1;visibility:visible;}
/* Slide-in drawer */
/* The drawer is a child of .header-top, so it can't stack above its own top bar —
it starts *below* the bar instead, keeping logo, call button and the X visible.
Closed: visibility:hidden (after the slide) so its shadow can't bleed onto the page
edge and its links drop out of the tab order. */
.main-nav{
position:fixed;top:var(--header-h);inset-inline-end:0;bottom:0;z-index:var(--z-header);
width:min(87vw,360px);
background:var(--dark);
flex-direction:column;align-items:stretch;
padding:14px max(18px,env(safe-area-inset-right)) max(24px,calc(env(safe-area-inset-bottom) + 16px)) 18px;
overflow-y:auto;overscroll-behavior:contain;
transform:translateX(100%);visibility:hidden; /* RTL: flipped below */
transition:transform var(--dur-3) var(--ease-out),visibility 0s linear var(--dur-3),top var(--dur-2) var(--ease);
border-inline-start:1px solid rgba(255,255,255,.08);
}
.main-nav.open{
transform:translateX(0);visibility:visible;
box-shadow:-28px 0 64px -24px rgba(0,0,0,.65);
transition:transform var(--dur-3) var(--ease-out),visibility 0s,top var(--dur-2) var(--ease);
}
body.nav-open{overflow:hidden;}
body.nav-open .cookie-banner,
body.nav-open .back-to-top{display:none;}
.main-nav>ul{flex-direction:column;align-items:stretch;gap:0;width:100%;}
.main-nav>ul>li{
opacity:0;transform:translateX(14px); /* RTL: flipped below */
transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out);
}
.main-nav>ul>li + li{border-top:1px solid rgba(255,255,255,.06);}
.main-nav.open>ul>li{opacity:1;transform:none;}
/* The drawer and its rows slide in from the trailing edge, which is the
left in RTL — translateX has no logical form, so mirror it explicitly. */
[dir="rtl"] .main-nav{transform:translateX(-100%);}
[dir="rtl"] .main-nav.open{transform:translateX(0);}
[dir="rtl"] .main-nav>ul>li{transform:translateX(-14px);}
[dir="rtl"] .main-nav.open>ul>li{transform:none;}
.main-nav.open>ul>li:nth-child(1){transition-delay:.04s;}
.main-nav.open>ul>li:nth-child(2){transition-delay:.07s;}
.main-nav.open>ul>li:nth-child(3){transition-delay:.10s;}
.main-nav.open>ul>li:nth-child(4){transition-delay:.13s;}
.main-nav.open>ul>li:nth-child(5){transition-delay:.16s;}
.main-nav.open>ul>li:nth-child(6){transition-delay:.19s;}
.main-nav.open>ul>li:nth-child(7){transition-delay:.22s;}
.main-nav.open>ul>li:nth-child(8){transition-delay:.25s;}
.main-nav.open>ul>li:nth-child(n+9){transition-delay:.28s;}
.main-nav a.nav-link{padding:13px 12px;font-size:1rem;border-radius:var(--radius-sm);color:var(--invert-muted);}
.main-nav a.nav-link::after{display:none;}
.main-nav a.nav-link:hover,.main-nav .has-dropdown:hover>a.nav-link{color:#fff;background:rgba(255,255,255,.07);}
.main-nav a.nav-link.active{background:rgba(255,84,0,.14);color:#fff;}
.main-nav .has-dropdown>a.nav-link{justify-content:space-between;}
.main-nav .chev{width:18px;height:18px;opacity:.8;}
/* Mega menu collapses to an in-drawer accordion */
.main-nav .mega,
.main-nav .has-dropdown:hover .mega,
.main-nav .has-dropdown:focus-within .mega{
position:static;width:auto;opacity:1;visibility:visible;transform:none;display:none;
box-shadow:none;border:0;border-radius:0;background:transparent;
margin:0;padding:2px 0 8px;z-index:auto;
}
.main-nav .mega::before{display:none;}
.main-nav .has-dropdown.open .mega{display:block;animation:navDrop var(--dur-2) var(--ease-out);}
.main-nav .has-dropdown.open .chev,
.main-nav .has-dropdown > a[aria-expanded="true"] .chev{transform:rotate(180deg);}
.main-nav .mega.mega--sm,.main-nav .mega.mega--diensten,.main-nav .mega.mega--sectors{width:auto;padding:0;margin:0;}
.main-nav .has-dropdown--anchored{position:static;}
.main-nav .mega-list--2col{grid-template-columns:1fr;margin:0;}
.main-nav .mega-foot{margin:8px 0 0;padding:10px 6px 0;background:transparent;border-radius:0;flex-wrap:wrap;}
.main-nav .mega-eyebrow{margin:10px 0 4px;padding:0 6px;font-size:.64rem;}
.main-nav .mega-list a{padding:10px 6px;border-radius:var(--radius-sm);}
.main-nav .mega-ic{width:30px;height:30px;}
.main-nav .mega-ic svg{width:18px;height:18px;}
.main-nav .mega-tt{font-size:.92rem;}
.main-nav .mega-tt span{font-size:.8rem;}
.main-nav .mega-all{margin-top:10px;padding:12px 14px;font-size:.9rem;}
.nav-cta{
display:flex;flex-direction:column;gap:10px;
margin-top:auto;padding-top:18px;
opacity:0;transform:translateY(10px);
transition:opacity var(--dur-2) var(--ease) .3s,transform var(--dur-2) var(--ease-out) .3s;
border-top:1px solid rgba(255,255,255,.1);
}
.main-nav.open .nav-cta{opacity:1;transform:none;}
.nav-cta .btn{width:100%;}
.nav-cta .header-phone{
display:flex;justify-content:center;padding:11px;
border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);
}
.nav-cta .lang-select{width:100%;}
.nav-cta .lang-btn{
width:100%;justify-content:center;padding:11px;
background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);
color:var(--invert-muted);
}
.nav-cta .lang-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
/* opens upward here — the drawer pins this to the bottom of the screen,
so a downward menu (right for the header) would run off the viewport */
.nav-cta .lang-menu,.nav-cta .lang-note{left:0;right:0;top:auto;bottom:calc(100% + 10px);width:auto;}
}
@keyframes navDrop{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@media(max-width:560px){
.eyebrow{letter-spacing:.06em;}
}
/* ===================== Hero ===================== */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;padding:clamp(88px,10vw,120px) 0 clamp(72px,8vw,96px);}
.hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(760px 460px at 85% 8%,rgba(255,84,0,.38),transparent 62%),
radial-gradient(520px 420px at 12% 105%,rgba(255,176,32,.14),transparent 60%),
linear-gradient(to top,rgba(250,244,236,.12),transparent 170px);
}
.hero-grid{
position:absolute;inset:0;opacity:.32;
background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:clamp(44px,6vw,64px) clamp(44px,6vw,64px);
-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent);
mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent);
}
.hero .container{position:relative;}
.hero-inner{max-width:760px;}
.hero h1{margin-bottom:.35em;}
.hero p.lead{color:var(--invert-muted);font-size:var(--step-1);max-width:600px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}
.hero-small{padding:clamp(56px,7vw,72px) 0 clamp(48px,6vw,60px);}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:clamp(40px,6vw,60px);}
.stat-item{border-inline-start:2px solid rgba(255,255,255,.28);padding-inline-start:16px;}
.stat-item strong{display:block;font-family:var(--font-head);font-weight:600;font-size:clamp(1.4rem,1vw + 1.1rem,1.7rem);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.stat-item span{color:var(--invert-muted);font-size:.85rem;}
@media(max-width:768px){.stat-row{grid-template-columns:repeat(2,1fr);row-gap:26px;}}
@media(min-width:769px){.stat-row--3{grid-template-columns:repeat(3,1fr);}}
/* ===================== Trust bar ===================== */
.trust-bar{background:var(--bg-soft);border-bottom:1px solid var(--border);padding:26px 0;}
.trust-bar .container{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between;}
.trust-label{font:600 .76rem/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.09em;color:var(--text-soft);}
.badge-row{display:flex;gap:12px;flex-wrap:wrap;}
.cert-badge{
display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);
border-radius:var(--radius-pill);padding:9px 16px;font-weight:600;font-size:.85rem;color:var(--text);
box-shadow:var(--shadow-xs);transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease);
}
.cert-badge:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.cert-badge svg{width:19px;height:19px;color:var(--primary);}
/* ===================== Grids & cards ===================== */
.grid{display:grid;gap:clamp(20px,3vw,28px);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
.card{
position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
padding:clamp(24px,3vw,32px);height:100%;
transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--border-strong);}
a.card:focus-visible{box-shadow:var(--ring),var(--shadow-md);}
.card-icon{
width:52px;height:52px;border-radius:14px;background:var(--primary-tint);
display:flex;align-items:center;justify-content:center;margin-bottom:20px;
transition:background-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out);
}
.card:hover .card-icon{background:var(--primary-tint-strong);transform:scale(1.06) rotate(-3deg);}
.card-icon svg{width:26px;height:26px;color:var(--primary);}
.card h3{margin-bottom:10px;font-size:var(--step-1);}
.card p{margin-bottom:14px;font-size:.94rem;}
.card-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--primary-ink);font-size:.9rem;}
.card-link svg{width:16px;height:16px;transition:transform var(--dur-2) var(--ease-out);}
.card:hover .card-link svg{transform:translateX(4px);}
.section-dark .card{background:var(--dark-raised);border-color:var(--border-dark);}
.section-dark .card:hover{border-color:rgba(255,255,255,.16);}
.section-dark .card h3{color:#fff;}
.section-dark .card p{color:var(--invert-muted);}
.tag{display:inline-block;background:var(--bg-soft-2);color:var(--text-muted);font-size:.75rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-pill);margin:0 6px 6px 0;}
.tag-primary{background:var(--primary-tint);color:var(--primary-ink);}
/* Project card */
.project-card{
position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--dark);color:#fff;
min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;
border:1px solid var(--border-dark);
transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease);
}
.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.project-card .pc-bg{position:absolute;inset:0;opacity:.8;z-index:0;transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-3) var(--ease);}
.project-card:hover .pc-bg{transform:scale(1.05);opacity:1;}
.project-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,10,.15) 0%,rgba(11,10,10,.55) 55%,rgba(11,10,10,.96) 100%);z-index:1;}
.project-card .pc-content{position:relative;z-index:2;}
.project-card .pc-client{color:var(--primary-300);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;}
.project-card h3{color:#fff;margin-bottom:8px;}
.project-card p{color:var(--invert-muted);font-size:.9rem;}
.project-card .pc-meta{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.8);}
.project-card .pc-meta svg{width:14px;height:14px;color:var(--primary-300);flex:none;}
/* ===================== Process / timeline ===================== */
.process{counter-reset:step;}
.process-step{position:relative;padding-inline-start:64px;padding-bottom:44px;border-inline-start:2px solid var(--border-strong);margin-inline-start:24px;}
.process-step:last-child{border-color:transparent;padding-bottom:0;}
.process-step::before{
counter-increment:step;content:counter(step);
position:absolute;inset-inline-start:-25px;top:-4px;width:48px;height:48px;border-radius:50%;
background:var(--primary);color:#fff;font-family:var(--font-head);font-weight:600;font-size:1.1rem;
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 6px var(--bg-soft),var(--shadow-sm);
}
.section-soft .process-step::before{box-shadow:0 0 0 6px var(--bg-soft),var(--shadow-sm);}
section:not(.section-soft):not(.section-dark) .process-step::before{box-shadow:0 0 0 6px #fff,var(--shadow-sm);}
.process-step h3{font-size:var(--step-1);margin-bottom:6px;}
/* ===================== Testimonials ===================== */
.testimonial{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:clamp(24px,3vw,32px);height:100%;}
.section-soft .testimonial{background:#fff;}
.testimonial .quote-icon{width:30px;height:30px;color:var(--primary);opacity:.55;margin-bottom:14px;}
.testimonial p.quote{color:var(--text);font-size:1.02rem;line-height:1.6;}
.testimonial .author{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--font-head);flex:none;font-size:.9rem;}
.author strong{display:block;font-size:.92rem;font-weight:600;}
.author span{font-size:.8rem;color:var(--text-soft);}
/* ===================== Team ===================== */
.team-card{text-align:center;}
.team-avatar{width:104px;height:104px;border-radius:50%;margin:0 auto 18px;background:linear-gradient(135deg,var(--dark),var(--dark-3));display:flex;align-items:center;justify-content:center;color:var(--primary-300);font-family:var(--font-head);font-weight:700;font-size:1.6rem;border:3px solid var(--bg-soft-2);}
.team-card h3{margin-bottom:2px;font-size:var(--step-1);}
.team-role{color:var(--primary-ink);font-weight:600;font-size:.85rem;margin-bottom:10px;display:block;}
/* ===================== FAQ accordion ===================== */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
width:100%;text-align:start;background:none;border:0;padding:22px 0;
font:600 1.02rem/1.45 var(--font-head);letter-spacing:-.01em;color:var(--text);
display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;
transition:color var(--dur-1) var(--ease);
}
.faq-q:hover{color:var(--primary-ink);}
.faq-q svg{width:20px;height:20px;flex:none;color:var(--primary);transition:transform var(--dur-2) var(--ease-out);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-3) var(--ease-out);}
.faq-item.open .faq-a{max-height:640px;}
.faq-a p{padding-bottom:22px;margin:0;}
/* ===================== CTA banner ===================== */
.cta-banner{
background:linear-gradient(120deg,var(--primary) 0%,var(--primary-strong) 55%,#B93B00 100%);
border-radius:var(--radius-lg);padding:clamp(36px,5vw,56px);color:#fff;
display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
position:relative;overflow:hidden;box-shadow:var(--shadow-primary);
}
.cta-banner::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.10);}
.cta-banner::before{content:"";position:absolute;left:-40px;bottom:-90px;width:220px;height:220px;border-radius:50%;background:rgba(0,0,0,.08);}
.cta-banner>*{position:relative;z-index:1;}
.cta-banner h2{color:#fff;margin-bottom:6px;}
.cta-banner p{color:rgba(255,255,255,.9);margin:0;}
.cta-banner .btn-primary{--_bg:#fff;--_fg:var(--primary-ink);box-shadow:var(--shadow-md);}
.cta-banner .btn-primary:hover{--_bg:var(--dark);--_fg:#fff;}
/* ===================== Forms ===================== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-grid .full{grid-column:1/-1;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}
label{display:block;font-weight:600;font-size:.85rem;margin-bottom:7px;color:var(--text);}
input,select,textarea{
width:100%;padding:13px 15px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);
font:500 .95rem var(--font-body);background:#fff;color:var(--text);
transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
/* keep control text >=16px on phones so iOS Safari doesn't zoom in on focus */
@media(max-width:560px),(pointer:coarse){
input,select,textarea{font-size:16px;}
}
input::placeholder,textarea::placeholder{color:var(--text-soft);}
input:hover,select:hover,textarea:hover{border-color:var(--text-soft);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-tint);}
textarea{resize:vertical;min-height:130px;}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237C746A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-inline-end:42px;}
input:user-invalid,textarea:user-invalid,select:user-invalid{border-color:var(--danger);}
.form-note{font-size:.8rem;color:var(--text-soft);margin-top:10px;}
.form-note a{color:var(--primary-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.form-success{
display:none;background:rgba(31,157,85,.1);border:1px solid rgba(31,157,85,.3);color:var(--success-ink);
padding:16px 20px;border-radius:12px;font-weight:600;margin-top:16px;
}
.form-success.show{display:flex;align-items:center;gap:10px;}
.form-success svg{color:var(--success);flex:none;}
.form-error{
display:none;background:rgba(217,69,0,.08);border:1px solid rgba(217,69,0,.32);color:var(--primary-ink);
padding:16px 20px;border-radius:12px;font-weight:600;margin-top:16px;
}
.form-error.show{display:flex;align-items:center;gap:10px;}
.form-error svg{color:var(--primary);flex:none;}
.form-error a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
[data-form] [type="submit"][disabled]{opacity:.6;cursor:progress;}
/* Honeypot — off-screen for humans, visible to naive bots */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
/* ===================== Footer ===================== */
.site-footer{background:var(--dark);color:var(--invert-muted);padding:clamp(56px,7vw,80px) 0 0;position:relative;z-index:0;}
.site-footer::before{
content:"";position:absolute;top:0;left:0;right:0;height:170px;pointer-events:none;z-index:-1;
background:linear-gradient(to bottom,rgba(250,244,236,.12),transparent);
}
.footer-accent{position:absolute;top:0;left:0;right:0;height:3px;pointer-events:none;
background:linear-gradient(90deg,var(--primary-strong),var(--primary) 35%,var(--accent) 65%,var(--primary-strong));}
/* One row of five: brand gets a wider first track, the four link groups
(Diensten/Sectoren/Advies & beheer/Bedrijf) split the rest evenly. Contact
lives in its own full-width bar below so this row never has to carry a
tall address+hours block. */
.footer-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:44px 32px;padding-bottom:clamp(32px,4vw,44px);}
@media(max-width:860px){
.footer-grid{grid-template-columns:1fr 1fr;}
.footer-brand{grid-column:1/-1;}
}
.footer-grid h4,.footer-grid summary{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:18px;font-family:var(--font-body);font-weight:700;}
/* Every footer group is a so phones can collapse them — desktop and
tablet just get the toggle chrome switched off and read as plain columns */
.footer-group{border:0;}
.footer-group summary{list-style:none;cursor:default;}
.footer-group summary::-webkit-details-marker{display:none;}
.footer-group summary::marker{content:"";}
.footer-group-ic{display:none;}
.footer-grid ul li{margin-bottom:11px;font-size:.92rem;}
.footer-grid a{position:relative;transition:color var(--dur-1) var(--ease);}
.footer-grid a:hover{color:#fff;}
/* animated underline on nav/service links only — the contact card handles its own hover */
.footer-grid ul a{display:inline-block;}
.footer-grid ul a::after{content:"";position:absolute;inset-inline-start:0;bottom:-3px;width:0;height:1px;background:var(--primary-300);transition:width var(--dur-2) var(--ease-out);}
.footer-grid ul a:hover::after{width:100%;}
/* Phones: one column of accordions for the four link groups (Contact is a
plain bar outside the grid, not a collapsible group). JS (main.js) starts
them closed. The breakpoint matches the one-column switch exactly: at any width where
groups sit side by side there is room to show them open, and at any width
where they stack there must be a toggle. Rules here must come after the
base .footer-group styles above — equal specificity means source order
decides, and this media query needs to win at this width. */
@media(max-width:640px){
.footer-grid{grid-template-columns:1fr;gap:0;}
.footer-brand{text-align:center;display:flex;flex-direction:column;align-items:center;padding-bottom:28px;}
.footer-certs,.footer-social{justify-content:center;}
.footer-group{border-top:1px solid rgba(255,255,255,.09);}
.footer-group summary{
cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 0;margin-bottom:0;
}
.footer-group-ic{display:block;width:18px;height:18px;flex:none;color:var(--primary-300);transition:transform var(--dur-2) var(--ease-out);}
.footer-group[open] .footer-group-ic{transform:rotate(45deg);}
.footer-group[open] summary{color:var(--primary-300);}
.footer-group ul{padding-bottom:16px;}
}
/* "Alle diensten →" style links close each category off, the way a big site's
footer column points at its overview page */
.footer-all{color:var(--primary-300);font-weight:600;display:inline-flex;align-items:center;gap:5px;}
.footer-all-ic{width:14px;height:14px;flex:none;transition:transform var(--dur-2) var(--ease-out);}
.footer-all:hover .footer-all-ic{transform:translateX(3px);}
/* secondary heading inside a group */
.footer-sub{color:var(--invert-soft);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;margin:18px 0 10px;}
.footer-cta{margin-top:0;flex:none;}
/* Full-width bar under the link grid: label + four contact items inline,
CTA button pinned to the end. Keeps contact out of the column count so
the grid above never has to carry a tall address+hours block. */
.footer-contact-card{display:flex;align-items:center;gap:24px 32px;flex-wrap:wrap;padding:24px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);}
.footer-sub--contact{margin:0;flex:none;}
.footer-contact{display:flex;flex-wrap:wrap;gap:14px 28px;flex:1 1 auto;}
.footer-contact li{display:flex;gap:10px;align-items:center;}
.footer-contact li>span:last-child,.footer-contact li>a{min-width:0;}
.footer-contact-ic{width:30px;height:30px;border-radius:50%;background:rgba(255,84,0,.14);display:flex;align-items:center;justify-content:center;flex:none;}
.footer-contact-ic svg{width:14px;height:14px;color:var(--primary-300);}
.footer-brand p{color:var(--invert-muted);max-width:42ch;font-size:.92rem;}
@media(max-width:640px){
.footer-brand p{max-width:340px;}
.footer-contact-card{flex-direction:column;align-items:stretch;gap:16px;}
.footer-contact{flex-direction:column;gap:12px;}
.footer-cta{width:100%;justify-content:center;}
}
.footer-certs{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.footer-cert{display:flex;align-items:center;height:38px;padding:0 10px;background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.28);transition:transform var(--dur-2) var(--ease-out);}
.footer-cert:hover{transform:translateY(-2px);}
.footer-cert img{height:24px;width:auto;object-fit:contain;}
.footer-social{display:flex;gap:10px;margin-top:16px;}
.footer-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out);}
.footer-social a:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-2px);}
.footer-social svg{width:17px;height:17px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:24px 0;font-size:.82rem;color:var(--invert-soft);}
.footer-bottom a{color:var(--invert-soft);transition:color var(--dur-1) var(--ease);}
.footer-bottom a:hover{color:#fff;}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;}
/* ---- Header language selector (also cloned into the mobile drawer) ----
Site content is Dutch-only for now, so picking a language doesn't
translate anything — it surfaces a short note (in that language)
pointing international visitors to phone/email instead. */
.lang-select{position:relative;flex:none;}
.lang-btn{
display:flex;align-items:center;gap:7px;
padding:7px 12px;border-radius:var(--radius-pill);
background:rgba(26,17,8,.04);border:1px solid var(--border);
color:var(--text-muted);font:600 .78rem/1 var(--font-body);letter-spacing:.03em;
transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.lang-btn:hover{background:rgba(26,17,8,.07);color:var(--text);}
.lang-btn svg{width:16px;height:16px;flex:none;}
.lang-menu{
position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:5;min-width:160px;
background:var(--dark-2);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-sm);
box-shadow:0 24px 60px -12px rgba(0,0,0,.55);padding:6px;
}
.lang-menu[hidden]{display:none;}
.lang-menu li+li{margin-top:1px;}
.lang-menu button{
display:block;width:100%;text-align:start;padding:9px 12px;border-radius:7px;
color:var(--invert-muted);font-size:.86rem;background:none;border:0;cursor:pointer;
transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.lang-menu button:hover,.lang-menu button:focus-visible{background:rgba(255,84,0,.14);color:#fff;}
.lang-note{
position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:5;width:max(260px,min(340px,80vw));
background:var(--dark-2);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-sm);
box-shadow:0 24px 60px -12px rgba(0,0,0,.55);padding:14px 16px;
font-size:.84rem;line-height:1.5;color:var(--invert-muted);
}
.lang-note[hidden]{display:none;}
.lang-note a{color:var(--primary-300);font-weight:600;}
/* ---- RTL (/ar/) ---------------------------------------------------------
Layout mirroring is handled by the logical properties used throughout this
stylesheet; only genuinely physical things need a flip here. */
[dir="rtl"]{--font-body:var(--font-arabic);--font-head:var(--font-arabic);}
[dir="rtl"] .lang-btn span{font-family:var(--font-arabic);}
/* Latin-script data keeps its LTR run inside RTL text (phone, email, codes). */
[dir="rtl"] .hero-contact a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate;}
@media(min-width:1341px) and (max-width:1420px){.lang-btn span{display:none;}.lang-btn{padding:9px;}}
/* ===================== Breadcrumb ===================== */
.breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.85rem;color:var(--invert-muted);margin-bottom:18px;}
.breadcrumb a{transition:color var(--dur-1) var(--ease);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb svg{width:14px;height:14px;opacity:.5;}
/* ===================== Back to top ===================== */
.back-to-top{
position:fixed;bottom:26px;inset-inline-end:26px;width:48px;height:48px;border-radius:50%;
background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;
box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(10px);
transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out),visibility var(--dur-2),background-color var(--dur-2) var(--ease);
z-index:900;border:none;cursor:pointer;
}
.back-to-top:hover{background:var(--primary);}
.back-to-top.show{opacity:1;visibility:visible;transform:none;}
.back-to-top svg{width:20px;height:20px;}
/* ===================== Cookie banner ===================== */
.cookie-banner{
position:fixed;left:20px;right:20px;bottom:20px;max-width:520px;background:var(--dark-2);color:#fff;
border:1px solid var(--border-dark);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-lg);
z-index:var(--z-overlay);display:none;
}
.cookie-banner.show{display:block;animation:cookie-in var(--dur-3) var(--ease-out);}
@keyframes cookie-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.cookie-banner p{color:var(--invert-muted);font-size:.87rem;margin-bottom:14px;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}
/* ===================== Misc ===================== */
.divider{height:1px;background:var(--border);border:0;margin:0;}
.center{text-align:center;}
.mt-0{margin-top:0;}
.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,56px);align-items:center;}
@media(max-width:860px){.two-col{grid-template-columns:1fr;}}
.icon-list li{display:flex;gap:12px;margin-bottom:14px;color:var(--text);font-weight:500;}
.section-dark .icon-list li{color:var(--invert);}
.icon-list svg{width:20px;height:20px;color:var(--success);flex:none;margin-top:3px;}
.section-dark .icon-list svg{color:var(--primary-300);}
.icon-list--warn svg{color:var(--primary);}
.blog-card img,.blog-card .thumb{aspect-ratio:16/10;border-radius:var(--radius-sm);}
.thumb{background:linear-gradient(135deg,var(--dark),var(--dark-3));display:flex;align-items:center;justify-content:center;margin-bottom:18px;overflow:hidden;}
.thumb svg{width:40px;height:40px;color:var(--primary-300);opacity:.85;}
.meta-row{display:flex;gap:14px;align-items:center;font-size:.8rem;color:var(--text-soft);margin-bottom:10px;flex-wrap:wrap;}
.meta-row .tag{margin:0;}
.pagebanner{background:var(--dark);color:#fff;padding:clamp(56px,7vw,72px) 0 clamp(48px,6vw,56px);position:relative;overflow:hidden;}
.pagebanner::before{content:"";position:absolute;inset:0;background:
radial-gradient(640px 320px at 90% 0%,rgba(255,84,0,.32),transparent 62%),
linear-gradient(to top,rgba(250,244,236,.12),transparent 170px);}
.pagebanner .container{position:relative;width:100%;} /* also inside the flex overlay on project banners */
.pagebanner h1{margin-bottom:.4em;}
.pagebanner p{color:var(--invert-muted);max-width:620px;font-size:var(--step-1);}
/* Article body */
.article-body{max-width:72ch;}
.article-body h2{margin-top:1.7em;}
.article-body h3{margin-top:1.4em;}
.article-body ul,.article-body ol{margin:0 0 1.2em;padding-inline-start:1.3em;color:var(--text-muted);}
.article-body ul{list-style:disc;}
.article-body ol{list-style:decimal;}
.article-body li{margin-bottom:.5em;}
.article-body li::marker{color:var(--primary);}
.article-body > h2:first-child{margin-top:0;}
.article-body p{font-size:1.05rem;}
.article-body a{color:var(--primary-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur-1) var(--ease);}
.article-body a:hover{color:var(--primary-strong);}
.callout{background:var(--bg-soft);border-inline-start:4px solid var(--primary);padding:20px 24px;border-start-end-radius:12px;border-end-end-radius:12px;margin:24px 0;}
.callout p{margin:0;color:var(--text);}
.table-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--border);border-radius:var(--radius-sm);}
table{width:100%;border-collapse:collapse;font-size:.92rem;}
table th,table td{padding:12px 16px;border-bottom:1px solid var(--border);text-align:start;}
table tr:last-child td{border-bottom:0;}
table th{background:var(--bg-soft);font-family:var(--font-head);font-weight:600;letter-spacing:-.01em;}
table tbody tr:hover{background:var(--bg-soft);}
.legal-content{max-width:76ch;}
.legal-content h2{margin-top:1.9em;}
.legal-content p,.legal-content li{color:var(--text-muted);}
.legal-content ul{padding-inline-start:1.3em;list-style:disc;margin-bottom:1.2em;}
.legal-content a{color:var(--primary-ink);text-decoration:underline;text-underline-offset:2px;}
.small-print{font-size:.78rem;color:var(--text-soft);margin-top:48px;padding-top:24px;border-top:1px solid var(--border);}
.not-found{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px;}
.not-found .code{font-family:var(--font-head);font-weight:700;font-size:clamp(4.5rem,18vw,7rem);color:var(--primary);line-height:1;letter-spacing:-.04em;}
/* ===================== Digitaal logboek — interactive floorplan ===================== */
.floorplan{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(20px,3vw,32px);align-items:start;max-width:960px;margin:0 auto;}
@media(max-width:760px){.floorplan{grid-template-columns:1fr;}}
.floorplan-stage{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);}
.floorplan-stage svg{display:block;width:100%;height:auto;}
.fp-dot{
position:absolute;width:24px;height:24px;padding:0;transform:translate(-50%,-50%);
border-radius:50%;border:3px solid #fff;cursor:pointer;box-shadow:var(--shadow-sm);
transition:transform var(--dur-1) var(--ease-out),opacity var(--dur-2) var(--ease);
}
.fp-dot:hover{transform:translate(-50%,-50%) scale(1.18);}
/* the 480-unit-wide plan shrinks to ~0.7× on a phone — scale room labels back up to a readable ~11px */
@media(max-width:640px){.floorplan-stage svg text{font-size:15px;}}
.fp-dot[aria-pressed="true"]{outline:3px solid var(--primary);outline-offset:2px;}
.fp-dot[data-status="ok"]{background:var(--success);}
.fp-dot[data-status="attention"]{background:var(--accent);}
.fp-dot[data-status="action"]{background:var(--danger);}
.floorplan.filtered .fp-dot[data-status="ok"]{opacity:.2;pointer-events:none;}
.fp-legend{display:flex;gap:14px 18px;flex-wrap:wrap;align-items:center;margin-top:16px;font-size:.82rem;color:var(--text-muted);font-weight:600;}
.fp-legend span{display:inline-flex;align-items:center;gap:7px;}
.fp-legend span::before{content:"";width:12px;height:12px;border-radius:50%;flex:none;}
.fp-legend .fp-ok::before{background:var(--success);}
.fp-legend .fp-attention::before{background:var(--accent);}
.fp-legend .fp-action::before{background:var(--danger);}
.fp-filter{width:auto;background:none;border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);
padding:7px 14px;font:600 .8rem var(--font-body);color:var(--text);cursor:pointer;transition:border-color var(--dur-1),background-color var(--dur-1);}
.fp-filter:hover{border-color:var(--text-soft);}
.fp-filter[aria-pressed="true"]{background:var(--primary-tint);border-color:var(--primary);color:var(--primary-ink);}
.fp-panel{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;min-height:200px;}
.fp-panel h3{margin:10px 0 4px;font-size:var(--step-1);}
.fp-panel .fp-meta{font-size:.82rem;color:var(--text-soft);font-weight:600;margin-bottom:12px;}
.fp-panel p{font-size:.92rem;margin:0;}
.fp-badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-pill);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.fp-badge.fp-ok{background:rgba(31,157,85,.14);color:var(--success-ink);}
.fp-badge.fp-attention{background:rgba(255,176,32,.2);color:#8a5a00;}
.fp-badge.fp-action{background:rgba(217,58,15,.14);color:var(--danger);}
/* logboek preview list (homepage) */
.logboek-list{display:flex;flex-direction:column;gap:2px;}
.logboek-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:.9rem;}
.logboek-list li:last-child{border-bottom:0;}
.logboek-list strong{display:block;font-size:.92rem;}
.logboek-list em{font-style:normal;color:var(--text-soft);font-size:.8rem;}
.logboek-when{color:var(--text-soft);font-size:.78rem;white-space:nowrap;}
.fp-status{width:12px;height:12px;border-radius:50%;flex:none;}
.fp-status.fp-ok{background:var(--success);}
.fp-status.fp-attention{background:var(--accent);}
.fp-status.fp-action{background:var(--danger);}
@media(max-width:420px){.logboek-list li{grid-template-columns:auto 1fr;}.logboek-when{grid-column:2;}}
/* ===================== Brandveiligheid-quickscan wizard ===================== */
.qs{max-width:760px;margin:0 auto;}
.qs-progress{height:6px;background:var(--bg-soft-2);border-radius:var(--radius-pill);overflow:hidden;margin-bottom:30px;}
.qs-progress i{display:block;height:100%;background:var(--primary);border-radius:inherit;transition:width var(--dur-3) var(--ease);}
.qs-steps{border:0;padding:0;margin:0;}
.qs-step{border:0;padding:0;margin:0;display:none;}
.qs-step.active{display:block;}
.qs-q{font-family:var(--font-head);font-weight:600;font-size:var(--step-2);line-height:1.3;margin-bottom:20px;padding:0;}
.qs-q span{display:block;font-family:var(--font-body);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-ink);margin-bottom:8px;}
.qs-options{display:grid;gap:10px;margin-bottom:28px;}
.qs-option{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--border-strong);
border-radius:var(--radius-sm);cursor:pointer;font-weight:500;transition:border-color var(--dur-1),background-color var(--dur-1);}
.qs-option:hover{border-color:var(--text-soft);}
.qs-option.selected{border-color:var(--primary);background:var(--primary-tint);}
.qs-option input{width:auto;flex:none;margin:3px 0 0;accent-color:var(--primary);}
.qs-nav{display:flex;justify-content:space-between;gap:12px;}
.qs-nav .btn{min-width:130px;justify-content:center;}
.qs-result{outline:none;}
.qs-result-head{text-align:center;max-width:560px;margin:0 auto 32px;}
.qs-band{display:inline-block;padding:6px 16px;border-radius:var(--radius-pill);font-weight:700;font-size:.8rem;
text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
.qs-band.low{background:rgba(31,157,85,.14);color:var(--success-ink);}
.qs-band.mid{background:rgba(255,176,32,.2);color:#8a5a00;}
.qs-band.high{background:rgba(217,58,15,.14);color:var(--danger);}
.qs-recs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:32px;}
@media(max-width:640px){.qs-recs{grid-template-columns:1fr;}}
.qs-recs .card{display:block;}
.qs-summary{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;margin-bottom:26px;}
.qs-summary h3{font-size:var(--step-1);margin-bottom:12px;}
.qs-summary ul{margin:0;padding-inline-start:1.2em;list-style:disc;color:var(--text-muted);font-size:.9rem;}
.qs-summary li{margin-bottom:6px;}
.qs-summary li::marker{color:var(--primary);}
.qs-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
/* ===================== Photography ===================== */
.pc-bg img,.thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.blog-card .thumb svg{flex:none;}
.banner-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* service banners: photo sits under a left-to-right darkening so the heading stays readable */
.pagebanner--photo .banner-photo{z-index:0;opacity:.6;}
.pagebanner--photo::before{
z-index:1;
background:
linear-gradient(90deg,rgba(11,10,10,.95) 0%,rgba(11,10,10,.8) 48%,rgba(11,10,10,.45) 100%),
radial-gradient(640px 320px at 90% 0%,rgba(255,84,0,.28),transparent 62%);
}
.pagebanner--photo .container{z-index:2;}
/* homepage hero: photo panel on the right, fading into the dark fill on its left edge */
.hero-photo{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 46%;z-index:0;
filter:brightness(.94) saturate(.55) contrast(1.04);
-webkit-mask-image:linear-gradient(180deg,#000 76%,transparent);
mask-image:linear-gradient(180deg,#000 76%,transparent);
}
@media(max-width:1100px){.hero-photo{display:none;}}
.hero--home::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(100deg,rgba(11,10,10,.94) 0%,rgba(11,10,10,.74) 22%,rgba(11,10,10,.24) 46%,rgba(11,10,10,.04) 62%,transparent 78%),
linear-gradient(180deg,rgba(11,10,10,.06) 0%,transparent 22%,transparent 72%,rgba(11,10,10,.36) 100%);
}
@media(max-width:1100px){.hero--home::after{background:linear-gradient(180deg,rgba(11,10,10,.2),rgba(11,10,10,.55));}}
.hero::before{z-index:1;}
.hero-grid{z-index:2;}
.hero .container{z-index:3;}
.team-avatar{overflow:hidden;}
.team-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;}
.cert-logo{height:76px;display:flex;align-items:center;margin-bottom:18px;}
.cert-logo img{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:6px;}
@media(max-width:760px){
.pagebanner--photo .banner-photo{opacity:.4;}
.pagebanner--photo::before{background:linear-gradient(180deg,rgba(11,10,10,.7),rgba(11,10,10,.92));}
}
@media(max-width:640px){
.cert-logo{height:60px;margin-bottom:14px;}
}
/* ===================== Homepage ===================== */
/* ---- Hero: copy left, certification card right ---- */
.hero--home{padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,72px);}
.home-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,5vw,72px);align-items:center;}
/* shift the cert card left off the photo's focal point, without narrowing it, so the
pipe collar stays visible beside it (desktop only; below 1101px the photo is hidden) */
@media(min-width:1101px){
.hero--home .hero-card{transform:translateX(clamp(-70px,-3.6vw,-34px));}
}
.hero--home .hero-inner{max-width:700px;}
.hero--home h1{font-size:clamp(2rem,1.35rem + 2.3vw,3.15rem);line-height:1.12;letter-spacing:-.01em;}
.h1-accent{
display:block;color:var(--primary-300);
background:linear-gradient(95deg,#FFB27F 0%,#FF7A33 45%,#FF5400 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@media(forced-colors:active){.h1-accent{background:none;-webkit-text-fill-color:currentColor;}}
.hero-contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:24px 0 0;font-size:.9rem;color:var(--invert-muted);}
.hero-contact a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;transition:color var(--dur-1) var(--ease);}
.hero-contact a svg{width:18px;height:18px;color:var(--primary-300);flex:none;}
.hero-contact a:hover{color:var(--primary-300);}
.hero-contact > span:not(.open-status){position:relative;padding-inline-start:18px;}
.hero-contact > span:not(.open-status)::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:4px;height:4px;border-radius:50%;background:var(--invert-soft);transform:translateY(-50%);}
.open-status{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.82rem;color:var(--invert-muted);}
.open-status[hidden]{display:none!important;}
.open-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--invert-soft);flex:none;}
.open-status.is-open{color:#8BE6B2;}
.open-status.is-open::before{background:#3DDC84;box-shadow:0 0 0 4px rgba(61,220,132,.2);animation:openBlink 2.4s var(--ease) infinite;}
@keyframes openBlink{50%{box-shadow:0 0 0 7px rgba(61,220,132,0);}}
.hero-card{
position:relative;border-radius:var(--radius-lg);overflow:hidden;
background:rgba(22,21,20,.78);border:1px solid rgba(255,255,255,.1);
box-shadow:0 30px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,122,51,.06);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.hero-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
background:linear-gradient(90deg,transparent,#FF9E66,#FF5400,#FF9E66,transparent);
opacity:.8;
}
.hero-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--dark-2);}
.hero-card-media img{width:100%;height:100%;object-fit:cover;}
.hero-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,10,10,.88));}
.hero-card-tag{
position:absolute;left:14px;right:14px;bottom:14px;z-index:1;width:max-content;max-width:calc(100% - 28px);
display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:var(--radius-pill);
background:rgba(11,10,10,.72);border:1px solid rgba(255,255,255,.16);
font-size:.78rem;font-weight:600;line-height:1.3;color:#fff;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero-card-tag svg{color:#3DDC84;flex:none;}
.hero-card-body{padding:18px 18px 20px;}
.hero-card-title{font:600 .72rem/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--invert-muted);margin:0 0 14px;}
.cert-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.cert-strip li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.cert-tile{
display:flex;align-items:center;justify-content:center;width:100%;height:76px;padding:9px;
background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.cert-tile img{height:100%;width:auto;max-width:100%;object-fit:contain;}
.cert-name{font-size:.8rem;font-weight:600;color:#fff;line-height:1.25;}
.cert-name small{display:block;font-size:.7rem;font-weight:500;color:var(--invert-muted);margin-top:2px;}
.hero--home .stat-row{margin-top:clamp(40px,5vw,60px);padding-top:clamp(24px,3vw,32px);border-top:1px solid rgba(255,255,255,.09);}
.hero--home .stat-item span{display:block;line-height:1.4;margin-top:2px;}
@media(max-width:1100px){
.home-hero{grid-template-columns:1fr;gap:28px;}
.hero--home .hero-inner{max-width:760px;}
.hero-card{max-width:760px;background:rgba(255,255,255,.04);border-radius:var(--radius-md);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;}
.hero-card-media{display:none;} /* its lazy photo is never fetched while hidden */
.hero-card-body{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;padding:16px 18px;}
.hero-card-title{margin:0;flex:0 1 11em;}
.cert-strip{flex:1 1 260px;min-width:0;}
}
@media(max-width:560px){
.hero--home h1{font-size:clamp(1.85rem,1.2rem + 3.4vw,2.2rem);}
.hero-contact{justify-content:center;margin-top:18px;}
.hero-card-body{padding:14px;}
.hero-card-title{flex-basis:100%;text-align:center;}
.cert-strip{flex-basis:100%;gap:8px;}
.cert-tile{height:60px;padding:6px;border-radius:10px;}
.cert-name small{display:none;}
}
/* ---- Client band: an auto-scrolling marquee of trust cards ---- */
.client-band{background:var(--bg-soft);border-bottom:1px solid var(--border);padding:26px 0 30px;overflow:hidden;}
.client-band-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.client-band-label{margin:0;font:600 .74rem/1.3 var(--font-body);letter-spacing:.11em;text-transform:uppercase;color:var(--text-soft);}
.client-marquee{
position:relative;width:100%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%);
}
.client-track{
display:flex;gap:14px;width:max-content;
animation:client-scroll 34s linear infinite;
}
.client-marquee:hover .client-track{animation-play-state:paused;}
.client-track li{flex:none;}
.client-track a{
display:flex;align-items:center;gap:12px;height:100%;min-width:220px;
padding:14px 20px 14px 14px;border-radius:var(--radius-md);
background:#fff;border:1px solid var(--border);color:var(--text);
transition:border-color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease);
}
.client-mark{
display:flex;align-items:center;justify-content:center;flex:none;
width:38px;height:38px;border-radius:10px;
background:var(--primary-50,rgba(255,84,0,.1));color:var(--primary);
font:700 .82rem/1 var(--font-head);letter-spacing:-.02em;
}
.client-info{display:flex;flex-direction:column;gap:2px;}
.client-info strong{font-family:var(--font-head);font-weight:700;font-size:.98rem;letter-spacing:-.01em;line-height:1.3;}
.client-info span{font-size:.76rem;letter-spacing:.02em;color:var(--text-soft);}
.client-track a:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-sm);color:var(--text);}
@keyframes client-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){
.client-track{animation:none;flex-wrap:wrap;width:100%;}
.client-track li[aria-hidden="true"]{display:none;}
}
@media(max-width:640px){
.client-band{padding:20px 0 24px;}
.client-band-head{margin-bottom:14px;gap:10px 16px;}
.client-marquee{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.client-track a{min-width:198px;padding:12px 16px 12px 12px;}
.client-info strong{font-size:.92rem;}
}
/* ---- Section head with the intro beside the heading ---- */
.section-head--split{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px clamp(32px,5vw,80px);align-items:end;}
.section-head--split h2{margin-bottom:0;}
.section-head--split p{margin-bottom:10px;}
@media(max-width:860px){
/* stacked to one column, it reads as just another intro block — align it
like every other .section-head on the site instead of leaving it the
only left-aligned one on the page */
.section-head--split{grid-template-columns:1fr;align-items:start;text-align:center;margin-inline:auto;}
.section-head--split h2{margin-bottom:.5em;}
.section-head--split .card-link{justify-content:center;}
}
/* ---- Services: photo cards (grid) → compact rows on phones ---- */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px);}
.svc-tile{
position:relative;display:flex;flex-direction:column;height:100%;
background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;
transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),opacity var(--dur-3) var(--ease);
}
.svc-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
.svc-tile:focus-visible{box-shadow:var(--ring),var(--shadow-md);}
.svc-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--dark);}
.svc-media img,.svc-media > svg{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease-out);}
.svc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,10,0) 55%,rgba(11,10,10,.45));pointer-events:none;}
.svc-tile:hover .svc-media img{transform:scale(1.05);}
.svc-ic{
position:absolute;inset-inline-start:14px;bottom:14px;z-index:1;width:42px;height:42px;border-radius:12px;
display:flex;align-items:center;justify-content:center;
background:var(--primary);color:#fff;box-shadow:0 8px 18px -4px rgba(255,84,0,.5);
}
.svc-ic svg{width:22px;height:22px;}
.svc-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;}
.svc-body h3{font-size:var(--step-1);margin-bottom:8px;}
.svc-body p{font-size:.92rem;margin-bottom:16px;}
.svc-body .card-link{margin-top:auto;}
.svc-tile:hover .card-link svg{transform:translateX(4px);}
@media(max-width:1100px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){
/* a scannable 2-up photo grid instead of 8 near-identical stacked rows —
title only, no description: the point here is "see all 8 at a glance
and tap the one you want", the pitch lives on the service page itself */
.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.svc-tile{border-radius:14px;}
.svc-media{aspect-ratio:4/3;}
.svc-ic{inset-inline-start:10px;bottom:10px;width:32px;height:32px;border-radius:9px;}
.svc-ic svg{width:17px;height:17px;}
.svc-body{padding:12px 12px 13px;}
.svc-body h3{font-size:.88rem;line-height:1.3;margin:0;}
.svc-body p,.svc-body .card-link{display:none;}
}
/* ---- Sector panel: intro + a staggered, animated sector card list ---- */
.sector-panel{
display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,4vw,56px);
align-items:start;margin-top:clamp(36px,5vw,56px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--border);
}
.sector-panel-head{position:sticky;top:clamp(84px,10vw,104px);}
.sector-panel-head h3{font-size:var(--step-1);margin:8px 0 10px;}
.sector-panel-head p{font-size:.94rem;margin-bottom:18px;}
.sector-feats{display:flex;flex-direction:column;}
.sector-feat{
position:relative;display:flex;align-items:center;gap:16px;
padding:18px 8px;border-top:1px solid var(--border);
color:var(--text);overflow:hidden;
transition:padding-inline-start var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease);
}
.sector-feats a:last-child{border-bottom:1px solid var(--border);}
.sector-feat::before{
content:"";position:absolute;inset:0;transform:scaleY(0);transform-origin:top;
background:var(--bg-soft);z-index:-1;transition:transform var(--dur-2) var(--ease-out);
}
.sector-feat:hover,.sector-feat:focus-visible{padding-inline-start:18px;}
.sector-feat:hover::before,.sector-feat:focus-visible::before{transform:scaleY(1);}
.sector-feat-num{
flex:none;font-family:var(--font-head);font-weight:700;font-size:.82rem;
color:var(--border-strong);letter-spacing:.02em;transition:color var(--dur-2) var(--ease);
}
.sector-feat:hover .sector-feat-num{color:var(--primary);}
.sector-feat-ic{
flex:none;display:flex;align-items:center;justify-content:center;
width:48px;height:48px;border-radius:12px;background:var(--bg-soft);color:var(--primary);
transition:background-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease);
}
.sector-feat:hover .sector-feat-ic{background:var(--primary);color:#fff;transform:scale(1.08) rotate(-4deg);}
.sector-feat-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.sector-feat-body strong{font-family:var(--font-head);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;}
.sector-feat-body span{font-size:.86rem;color:var(--text-soft);line-height:1.4;}
.sector-feat-go{
flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
border:1px solid var(--border-strong);color:var(--text-soft);
transform:translateX(-6px);opacity:0;
transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.sector-feat:hover .sector-feat-go,.sector-feat:focus-visible .sector-feat-go{
transform:translateX(0);opacity:1;background:var(--primary);border-color:var(--primary);color:#fff;
}
.sector-feat.reveal{transition-delay:calc(var(--i, 0) * 60ms);}
@media(max-width:960px){
.sector-panel{grid-template-columns:1fr;}
.sector-panel-head{position:static;}
}
@media(max-width:640px){
.sector-feat{gap:12px;padding:14px 4px;}
.sector-feat:hover{padding-inline-start:4px;}
.sector-feat-ic{width:40px;height:40px;border-radius:10px;}
.sector-feat-ic svg{width:21px;height:21px;}
.sector-feat-body strong{font-size:.96rem;}
.sector-feat-body span{font-size:.82rem;}
.sector-feat-go{display:none;}
.sector-feat-num{display:none;}
}
/* ---- Lifecycle: three connected steps ---- */
.lifecycle{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,28px);}
.lifecycle::before{content:"";position:absolute;left:12%;right:12%;top:58px;height:2px;background:repeating-linear-gradient(90deg,var(--primary) 0 8px,transparent 8px 16px);opacity:.45;}
.lifecycle-step{
position:relative;z-index:1;display:flex;flex-direction:column;
background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:clamp(24px,3vw,32px);
transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease),opacity var(--dur-3) var(--ease);
}
.lifecycle-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.lifecycle-step h3{font-size:var(--step-1);margin-bottom:10px;}
.lifecycle-step p{font-size:.94rem;margin-bottom:16px;}
.lifecycle-step .card-link{margin-top:auto;}
.lifecycle-step:hover .card-icon{background:var(--primary-tint-strong);}
.lifecycle-num{position:absolute;top:22px;inset-inline-end:24px;font:700 2.6rem/1 var(--font-head);letter-spacing:-.04em;color:var(--bg-soft-2);pointer-events:none;}
.lifecycle-more{margin:clamp(28px,4vw,40px) 0 0;}
@media(max-width:860px){
.lifecycle{grid-template-columns:1fr;}
.lifecycle::before{inset-inline-start:clamp(49px,3vw + 25px,57px);inset-inline-end:auto;top:40px;bottom:40px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--primary) 0 8px,transparent 8px 16px);}
}
@media(max-width:640px){
.lifecycle{gap:16px;}
.lifecycle::before{inset-inline-start:41px;}
.lifecycle-step{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:20px;}
.lifecycle-step > *{grid-column:1 / -1;}
.lifecycle-step > .card-icon{grid-column:1;grid-row:1;width:44px;height:44px;border-radius:12px;margin:0;}
.lifecycle-step > .card-icon svg{width:22px;height:22px;}
.lifecycle-step > h3{grid-column:2;grid-row:1;margin:0;padding-inline-end:36px;}
.lifecycle-step > h3 + p{margin-top:12px;}
.lifecycle-step .card-link{justify-self:start;}
.lifecycle-num{top:50%;inset-inline-end:18px;font-size:1.5rem;transform:translateY(-50%);top:38px;}
}
/* ---- Certifications (dark section) ---- */
.two-col--certs{grid-template-columns:1fr 1fr;}
.cert-cards{display:grid;gap:14px;}
.cert-card{
display:grid;grid-template-columns:136px minmax(0,1fr);gap:20px;align-items:center;padding:16px;
background:var(--dark-raised);border:1px solid var(--border-dark);border-radius:var(--radius-md);
transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out),opacity var(--dur-3) var(--ease);
}
.cert-card:hover{border-color:rgba(255,122,51,.4);transform:translateX(4px);}
.cert-tile--lg{height:100px;padding:12px;border-radius:14px;}
.cert-card h3{font-size:var(--step-1);margin:0;color:#fff;}
.cert-sub{display:block;margin:3px 0 8px;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-300);}
.cert-card p{font-size:.9rem;line-height:1.55;margin:0;}
@media(max-width:860px){.two-col--certs{grid-template-columns:1fr;}}
@media(max-width:480px){
.cert-card{grid-template-columns:92px minmax(0,1fr);gap:14px;padding:12px;}
.cert-tile--lg{height:84px;padding:8px;}
.cert-card p{font-size:.86rem;}
}
/* ---- Logboek preview card ---- */
.logboek-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;}
.logboek-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:16px 22px;background:var(--bg-soft);border-bottom:1px solid var(--border);}
.logboek-card-head strong{font-family:var(--font-head);font-weight:600;font-size:1.02rem;}
.logboek-legend{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:.74rem;font-weight:600;color:var(--text-soft);}
.logboek-legend i{display:inline-block;width:8px;height:8px;margin-inline-start:8px;}
.logboek-legend i:first-child{margin-inline-start:0;}
.logboek-card .logboek-list{padding:4px 22px 8px;}
@media(max-width:420px){.logboek-card-head,.logboek-card .logboek-list{padding-inline:16px;}}
/* ---- Werkgebied: region links + schematic map + NAP card ---- */
.local-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start;}
.region-list{display:grid;gap:8px;margin:24px 0 22px;}
.region-list a{
display:flex;align-items:center;gap:14px;padding:11px 14px;
background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease-out);
}
.region-list a:hover{border-color:var(--primary);background:#FFF8F3;transform:translateX(3px);}
.region-pin{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--primary-tint);color:var(--primary);}
.region-tt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3;}
.region-tt strong{font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--text);}
.region-tt span{font-size:.84rem;color:var(--text-soft);margin-top:1px;}
.region-arrow{flex:none;color:var(--primary);transition:transform var(--dur-2) var(--ease-out);}
.region-list a:hover .region-arrow{transform:translateX(3px);}
.local-aside{display:grid;gap:16px;}
.local-map{
margin:0;padding:14px 14px 10px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
background-color:var(--bg-soft);
background-image:linear-gradient(var(--paper-line) 1px,transparent 1px),linear-gradient(90deg,var(--paper-line) 1px,transparent 1px);
background-size:28px 28px;background-position:-1px -1px;
}
.map-svg{display:block;width:100%;height:auto;max-height:360px;margin:0 auto;}
.map-ring{fill:none;stroke:rgba(26,24,21,.18);stroke-width:1;stroke-dasharray:2 4;}
.map-ring-label{font:600 10px var(--font-body);letter-spacing:.04em;fill:var(--text-soft);}
.map-route{stroke:var(--primary);stroke-width:1.6;stroke-dasharray:5 5;opacity:.75;animation:mapRoute 1.8s linear infinite;}
@keyframes mapRoute{to{stroke-dashoffset:-20;}}
.map-dot{fill:var(--text-soft);}
.map-dot.map-major{fill:var(--dark);stroke:#fff;stroke-width:2;}
.map-label{font:500 11px var(--font-body);fill:var(--text-muted);}
.map-label.map-major{font:600 12.5px var(--font-head);fill:var(--text);}
.map-hub{fill:var(--primary);stroke:#fff;stroke-width:2.5;}
.map-hub-pulse{fill:var(--primary);transform-box:fill-box;transform-origin:center;animation:hubPulse 2.4s var(--ease-out) infinite;}
.map-hub-label.map-major{fill:var(--primary-ink);font-weight:700;}
@keyframes hubPulse{0%{transform:scale(1);opacity:.45;}100%{transform:scale(3.4);opacity:0;}}
.local-map figcaption{margin-top:2px;font-size:.74rem;color:var(--text-soft);text-align:end;}
.nap-card{position:relative;overflow:hidden;background:var(--dark);color:var(--invert);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px);}
.nap-card::before{content:"";position:absolute;right:-90px;top:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,84,0,.34),transparent 70%);pointer-events:none;}
.nap-card > *{position:relative;}
.nap-card h3{color:#fff;font-size:var(--step-1);margin-bottom:14px;}
.nap-card address{font-style:normal;display:grid;gap:10px;}
.nap-card address > a,.nap-hours{display:flex;align-items:flex-start;gap:12px;color:var(--invert);font-size:.94rem;line-height:1.45;}
.nap-card address > a{transition:color var(--dur-1) var(--ease);}
.nap-card address > a:hover{color:var(--primary-300);}
.nap-card address svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--primary-300);}
.nap-hours .open-status{display:flex;margin-top:4px;}
.nap-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.nap-card .btn-outline{--_fg:#fff;--_bd:rgba(255,255,255,.28);}
.nap-card .btn-outline:hover{--_bg:#fff;--_fg:var(--dark);--_bd:#fff;}
.nap-card :where(a,button):focus-visible{box-shadow:var(--ring-invert);}
.nap-reg{margin:16px 0 0;font-size:.76rem;color:var(--invert-soft);}
@media(max-width:960px){
.local-grid{grid-template-columns:1fr;}
.local-aside{grid-template-columns:1fr 1fr;align-items:stretch;}
}
@media(max-width:640px){
.local-aside{grid-template-columns:1fr;}
.region-list a{padding:10px 12px;gap:12px;}
.nap-actions .btn{flex:1 1 0;}
}
/* ---- FAQ: sticky intro beside the accordion ---- */
.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start;}
.faq-intro{position:sticky;top:104px;}
.faq-intro-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.faq-list{border-top:1px solid var(--border);}
@media(max-width:860px){.faq-layout{grid-template-columns:1fr;}.faq-intro{position:static;}}
@media(max-width:560px){.faq-intro-actions .btn{flex:1 1 0;}}
/* ---- Closing CTA ---- */
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;}
.cta-banner .btn-ghost-invert{--_bg:rgba(255,255,255,.1);--_fg:#fff;--_bd:rgba(255,255,255,.55);}
.cta-banner .btn-ghost-invert:hover{--_bg:#fff;--_fg:var(--primary-ink);--_bd:#fff;}
@media(max-width:640px){.cta-actions{width:100%;flex-direction:column;}}
@media(hover:none){
.svc-tile:hover,.lifecycle-step:hover,.cert-card:hover,.region-list a:hover{transform:none;box-shadow:none;}
.svc-tile:hover{border-color:var(--border);}
.svc-tile:hover .svc-media img,.svc-tile:hover .card-link svg,.region-list a:hover .region-arrow{transform:none;}
.svc-tile:active,.region-list a:active{border-color:var(--primary);}
}
/* ===================== Mobile & touch refinements ===================== */
/* Header: a tap-to-call button beside the hamburger (the full CTA + number live in the drawer) */
@media(max-width:1340px){
.header-actions > .header-phone{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;padding:0;gap:0;border-radius:50%;
font-size:0;line-height:0; /* the number stays as the accessible name */
background:rgba(26,17,8,.04);border:1px solid var(--border);
}
.header-actions > .header-phone svg{width:19px;height:19px;color:var(--primary);}
.header-actions > .header-phone:active{background:rgba(255,84,0,.18);}
}
@media(max-width:480px){
.main-nav{width:100%;border-inline-start:0;} /* phones: full-width menu sheet */
}
/* Touch screens: no sticky hover lifts after a tap, a quick press state instead */
@media(hover:none){
.btn:hover,.card:hover,.project-card:hover,.cert-badge:hover,.footer-social a:hover,
.client-track a:hover,.sector-feat:hover{transform:none;}
.card:hover{box-shadow:none;border-color:var(--border);}
.section-dark .card:hover{border-color:var(--border-dark);}
.card:hover .card-icon,.project-card:hover .pc-bg,
.btn:hover svg:last-child,.card:hover .card-link svg{transform:none;}
.sector-feat:hover{padding-inline-start:8px;}
.sector-feat:hover .sector-feat-ic{transform:none;}
.client-track a:hover{box-shadow:none;}
.btn:active{transform:scale(.98);}
a.card:active,.project-card:active{transform:scale(.99);border-color:var(--primary);}
}
/* Coarse pointers: 44px hit areas without changing the visual layout */
@media(pointer:coarse){
.card-link,a.tag{position:relative;}
.card-link::after{content:"";position:absolute;inset:-10px -6px;}
a.tag::after{content:"";position:absolute;inset:-7px 0;}
.fp-dot::after{content:"";position:absolute;inset:-12px;border-radius:50%;}
.fp-filter{min-height:44px;}
.breadcrumb a{padding-block:10px;margin-block:-10px;}
.footer-social a{width:44px;height:44px;}
.footer-grid ul li{margin-bottom:0;}
.footer-grid ul li a{display:inline-block;padding-block:10px;}
.footer-contact li:not(:has(a)){padding-block:10px;}
.footer-legal{column-gap:20px;row-gap:0;}
.footer-legal a{display:inline-block;padding-block:11px;}
.qs-option{padding:15px 16px;}
.qs-option input{width:20px;height:20px;margin:3px 0 0;}
}
@media(max-width:640px){
:root{--section-y:56px;}
html{scroll-padding-top:80px;}
/* only hyphenate genuinely long compounds ("brandveiligheidsoplossingen") — balanced wrapping
would otherwise split words like "toonaangevende" that fit fine on their own line */
h1,h2,h3,h4{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:16 8 6;}
.section-head{margin-bottom:28px;}
.section-head p,.container.narrow > .reveal > p{font-size:1.05rem;}
/* Cards: icon beside the title instead of stacked above it — ~70px shorter per card */
.card{padding:20px;}
.card:has(> .card-icon){display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;align-content:start;}
.card:has(> .card-icon) > *{grid-column:1 / -1;}
.card:has(> .card-icon) > .card-icon{grid-column:1;grid-row:1;width:44px;height:44px;border-radius:12px;margin:0;}
.card:has(> .card-icon) > .card-icon svg{width:22px;height:22px;}
.card:has(> .card-icon) > h3{grid-column:2;grid-row:1;margin:0;}
.card:has(> .card-icon) > h3 + *{margin-top:12px;}
.card:has(> .card-icon) > .card-link{justify-self:start;}
.project-card{min-height:240px;padding:22px;}
.blog-card .thumb{aspect-ratio:2/1;margin-bottom:14px;}
.blog-card .thumb svg{width:32px;height:32px;}
/* Testimonials: a swipeable row with a peek of the next quote */
.grid:has(> .testimonial){
grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(86%,340px);gap:14px;
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 14px;scroll-padding-inline:var(--gutter);
scrollbar-width:none;
}
.grid:has(> .testimonial)::-webkit-scrollbar{display:none;}
.grid:has(> .testimonial) > .testimonial{scroll-snap-align:start;opacity:1;transform:none;}
.process-step{margin-inline-start:18px;padding-inline-start:40px;padding-bottom:34px;}
.process-step::before,
.section-soft .process-step::before{inset-inline-start:-19px;top:-2px;width:36px;height:36px;font-size:.95rem;box-shadow:0 0 0 5px var(--bg-soft),var(--shadow-sm);}
section:not(.section-soft):not(.section-dark) .process-step::before{box-shadow:0 0 0 5px #fff,var(--shadow-sm);}
.cta-banner{padding:30px 22px;gap:22px;border-radius:var(--radius-md);}
.cta-banner .btn{width:100%;}
.cta-banner::after{width:180px;height:180px;right:-50px;top:-50px;}
.faq-q{padding:18px 0;font-size:1rem;gap:14px;}
.faq-item.open .faq-a{max-height:1600px;} /* long answers wrap to many more lines on a phone */
.table-wrap{margin:20px 0;}
table{font-size:.875rem;}
table th,table td{padding:10px 12px;vertical-align:top;}
.callout{padding:16px 18px;}
.form-grid{gap:16px;}
[data-form] [type="submit"]{width:100%;}
input,select{min-height:48px;}
.qs-nav .btn{flex:1 1 0;min-width:0;}
.qs-cta .btn{width:100%;}
.fp-panel{padding:18px;min-height:0;}
.trust-bar{padding:20px 0;}
.trust-bar .container{gap:14px;}
.cert-badge{padding:8px 13px;font-size:.82rem;}
}
@media(max-width:560px){
.site-header{--header-h:64px;}
.site-header.is-scrolled{--header-h:56px;}
.brand{gap:10px;}
.header-logo{width:136px;}
.is-scrolled .header-logo{width:114px;}
.hero{padding:52px 0 48px;}
.hero-small,.pagebanner{padding:40px 0;}
.eyebrow{line-height:1.35;padding:7px 12px;border-radius:14px;max-width:100%;}
.hero-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:26px;}
.hero-actions .btn{width:100%;}
/* Translated CTA labels run 390-400px ("Unsere Vorgehensweise in 5 Schritten
ansehen"), wider than the phone viewport itself — nowrap made them push the
whole page sideways. Let them wrap onto a second line here instead. */
.btn{white-space:normal;text-wrap:balance;}
.hero p.lead,.pagebanner p{font-size:1.05rem;}
.stat-row{gap:22px 16px;}
.stat-item{padding-inline-start:12px;}
.stat-item span{display:block;line-height:1.4;margin-top:2px;}
/* Breadcrumb stays on one line; the current page (already the H1) truncates */
.breadcrumb{flex-wrap:nowrap;white-space:nowrap;font-size:.82rem;}
.breadcrumb a,.breadcrumb svg{flex:none;}
.breadcrumb [aria-current]{overflow:hidden;text-overflow:ellipsis;}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:6px;padding:20px 0 max(20px,env(safe-area-inset-bottom));}
/* Cookie banner: compact, buttons side by side, clear of the home indicator */
.cookie-banner{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));padding:16px;border-radius:14px;}
.cookie-banner p{font-size:.82rem;line-height:1.5;margin-bottom:12px;}
.cookie-actions{flex-wrap:nowrap;gap:8px;}
.cookie-actions .btn{flex:1 1 0;min-width:0;min-height:44px;padding:10px 8px;font-size:.8rem;white-space:normal;text-align:center;line-height:1.2;}
.back-to-top{width:44px;height:44px;inset-inline-end:max(16px,env(safe-area-inset-right));bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px));}
}
@media(max-width:380px){
:root{--gutter:max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));}
.btn{white-space:normal;text-align:center;line-height:1.25;}
.header-logo{width:122px;}
.is-scrolled .header-logo{width:103px;}
}
/* Phones in landscape: reclaim vertical space */
@media(max-height:500px) and (orientation:landscape){
.site-header,.site-header.is-scrolled{--header-h:56px;}
.header-logo,.is-scrolled .header-logo{width:114px;}
html{scroll-padding-top:68px;}
.hero{padding:40px 0 36px;}
.hero-small,.pagebanner{padding:32px 0;}
.main-nav a.nav-link{padding:10px 12px;}
.cookie-banner{max-width:760px;padding:14px 18px;}
.cookie-banner.show{display:flex;align-items:center;gap:18px;}
.cookie-banner p{margin:0;font-size:.8rem;line-height:1.45;}
.cookie-actions{flex:none;flex-wrap:nowrap;}
}
/* ===================== Accessibility & preferences ===================== */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important;
}
.reveal{opacity:1;transform:none;}
}
@media(prefers-contrast:more){
:root{--text-muted:#3d3831;--text-soft:#5a534a;--border:#c9bda6;--border-strong:#b3a488;}
.btn{border-color:currentColor;}
}
/* ===================== Print ===================== */
@media print{
.site-header,.site-footer,.back-to-top,.cookie-banner,.cta-banner,.hero-grid,.trust-bar{display:none!important;}
*{background:#fff!important;color:#000!important;box-shadow:none!important;}
a{text-decoration:underline;}
section{padding:16px 0;}
.card,.testimonial,.table-wrap{border:1px solid #999;}
.reveal{opacity:1!important;transform:none!important;} /* never-scrolled sections would print blank */
.skip-link,.hero-photo,.map-hub-pulse{display:none!important;}
}