/* CTXR — palet-voorstel "Rozerood monochroom" (v5: rozerood uit de kubus + blush, geel voor de primaire actie, lettertype Urbanist) (alleen homepage)
   Eén kleurfamilie in tinten van het rozerood, plus één signaal: het merk-geel,
   alléén voor de primaire actie (Gratis sandbox / Claim je space). */
body:has(main.page-home-v2) {
	--ink:    #2e0f22;   /* donkerste tint: tekst op licht, donkere banden */
	--wine:   #5e1e43;   /* rozerood uit de kubus */
	--rose:   #8f6f84;   /* secundaire tekst, iconen, lijnen */
	--blush:  #f1e6ec;   /* lichte band */
	--paper:  #fbf7f9;   /* basis */
	--line:   #e2d2db;   /* haarlijnen, kaartranden */
	--signal: #ffde17;   /* merk-geel: alleen de primaire actie */
	background: var(--paper);
	color: var(--ink);
}

/* koppen: niet meer roze en niet meer zo zwaar */
body:has(main.page-home-v2) main h1,
body:has(main.page-home-v2) main h2,
body:has(main.page-home-v2) main h3 { color: inherit !important; font-weight: 600 !important; letter-spacing: -.012em; }
body:has(main.page-home-v2) main h2 { line-height: 1.15; }
body:has(main.page-home-v2) .kicker { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; font-size: .95rem !important; color: var(--rose) !important; opacity: 1 !important; }

/* header: wijnkleur, logo geel, hamburger en menulinks wit (zelfde als de rest van de site) */
body:has(main.page-home-v2) header#top { background: var(--wine) !important; color: var(--paper) !important; border-bottom: 1px solid var(--wine) !important; }
/* op mobiel (onder 768px): sticky, en verbergen bij scrollen omlaag / terug bij scrollen omhoog (klasse header-hidden van site.js) */
@media (max-width: 767px) {
	body:has(main.page-home-v2) header#top { position: sticky !important; top: 0 !important; z-index: 250 !important; transition: transform .25s ease, margin-bottom .25s ease !important; }
	body.header-hidden:has(main.page-home-v2) header#top:not(.menu-open) { transform: translateY(-100%) !important; margin-bottom: calc(-1 * var(--hdr-h, 100px)) !important; }
}
body:has(main.page-home-v2) header#top::before,
body:has(main.page-home-v2) header#top::after { display: none !important; }
body:has(main.page-home-v2) header#top a { color: var(--paper) !important; }
body:has(main.page-home-v2) header#top svg,
body:has(main.page-home-v2) header#top svg path { fill: var(--signal) !important; color: var(--signal) !important; }
body:has(main.page-home-v2) header#top nav:not(.float-nav) > ul[data-node-id="menu"] > li:last-child a { background: var(--signal); color: var(--ink) !important; padding: .45em 1em; border-radius: 999px; }
body:has(main.page-home-v2) header#top nav:not(.float-nav) > ul[data-node-id="menu"] > li + li::before { opacity: .35; }
body:has(main.page-home-v2) header#top button.nav-toggle { color: var(--paper) !important; }
body:has(main.page-home-v2) header#top button.nav-toggle span { background-color: var(--paper) !important; color: var(--paper) !important; }

/* mobiel menu geopend: het volledige scherm (nav) is wijnkleur, alle tekst en iconen wit, links 25% groter */
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) > nav,
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) nav { background: var(--wine) !important; color: var(--paper) !important; }
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) { background: var(--wine) !important; border-bottom-color: var(--wine) !important; }
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) nav a,
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) nav span,
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) nav figcaption,
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) nav p,
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) nav div { color: var(--paper) !important; }
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) nav a { font-size: 1.25em !important; }
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) nav li.nav-pipe { color: var(--rose-soft, #d9bfcc) !important; }
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) nav * { border-color: var(--paper) !important; }
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) button.nav-toggle { background: transparent !important; color: var(--paper) !important; }
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) button.nav-toggle span { background-color: var(--paper) !important; color: var(--paper) !important; }
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) svg,
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) svg path { fill: var(--paper) !important; color: var(--paper) !important; }
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) nav:not(.float-nav) > ul[data-node-id="menu"] > li:last-child a { background: transparent !important; border: 1px solid var(--paper) !important; color: var(--paper) !important; }
body:has(main.page-home-v2) header#top:has(button.nav-toggle[aria-expanded="true"]) nav:not(.float-nav) > ul[data-node-id="menu"] > li:last-child a span { color: var(--paper) !important; }

/* banden: tinten in plaats van geel/blauw/bruin */
body:has(main.page-home-v2) .band--brown  { --bg: var(--ink);   --fg: var(--paper); }
body:has(main.page-home-v2) .band--yellow { --bg: var(--blush); --fg: var(--ink); }
body:has(main.page-home-v2) .band--blue   { --bg: var(--paper); --fg: var(--ink); }
body:has(main.page-home-v2) .band { background-color: var(--bg) !important; color: var(--fg) !important; background-image: none !important; }
body:has(main.page-home-v2) .band::before,
body:has(main.page-home-v2) .band::after { display: none !important; }
body:has(main.page-home-v2) .hv-hero { background: var(--wine) !important; }
body:has(main.page-home-v2) .hv-close { --bg: var(--wine); --fg: var(--paper); }

/* hero: stadsplattegrond van bovenaf (gebouwen als footprints, straten, park, rivier); tone-op-tone rozerood op wijn; geladen als losse SVG */
body:has(main.page-home-v2) .band.hv-hero {
	position: relative !important;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--wine) !important;
	background-image: none !important;
}
body:has(main.page-home-v2) .band.hv-hero::before {
	display: block !important;
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url('/theme/static/img/hero-stad-bovenaf.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
body:has(main.page-home-v2) .band--brown { background-image: none !important; }
body:has(main.page-home-v2) .band--blue { background-image: none !important; }
/* wijn (afsluiting): effen */
body:has(main.page-home-v2) .band.hv-close { background-color: var(--wine) !important; background-image: none !important; }

/* routelijn met knooppunten: in de blush-secties met een lijst, altijd volle breedte en evenredig geschaald */
/* 'Zo werkt het' (stappen): groot */
body:has(main.page-home-v2) .band.hv-how {
	background-color: var(--blush) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='360' viewBox='0 0 1200 360'%3E%3Cpath d='M40 300 C200 300 220 120 380 120 S560 300 700 240 S900 60 1160 90' fill='none' stroke='%235e1e43' stroke-opacity='.22' stroke-width='4' stroke-dasharray='12 10' stroke-linecap='round'/%3E%3Cg fill='%235e1e43' fill-opacity='.14' stroke='%235e1e43' stroke-opacity='.45' stroke-width='3'%3E%3Ccircle cx='40' cy='300' r='16'/%3E%3Ccircle cx='380' cy='120' r='16'/%3E%3Ccircle cx='700' cy='240' r='16'/%3E%3Ccircle cx='1160' cy='90' r='16'/%3E%3C/g%3E%3C/svg%3E") !important;
	background-size: 100% auto !important;
	background-position: center bottom !important;
	background-repeat: no-repeat !important;
}
/* 'Waarom CTXR' (lijst van pijlers): 300% groter, in het midden van de sectie, gecropt op de breedte */
body:has(main.page-home-v2) .band.hv-why {
	background-color: var(--blush) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200'%3E%3Cpath d='M0 150 C200 150 260 60 420 60 S640 150 800 110 S1020 30 1200 50' fill='none' stroke='%235e1e43' stroke-opacity='.22' stroke-width='3' stroke-dasharray='10 8' stroke-linecap='round'/%3E%3Cg fill='%235e1e43' fill-opacity='.14' stroke='%235e1e43' stroke-opacity='.45' stroke-width='2'%3E%3Ccircle cx='60' cy='150' r='10'/%3E%3Ccircle cx='420' cy='60' r='10'/%3E%3Ccircle cx='800' cy='110' r='10'/%3E%3Ccircle cx='1140' cy='50' r='10'/%3E%3C/g%3E%3C/svg%3E") !important;
	background-size: 300% auto !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* hero: de zin 'online makers en creative tech specialisten' krijgt één gele onderstreping over alle regels; die komt na de tekst geleidelijk in beeld */
body:has(main.page-home-v2) .hv-hero h1 { color: var(--paper) !important; font-weight: 600 !important; }
body:has(main.page-home-v2) .hv-hero h1 i {
	color: inherit !important; display: inline !important; white-space: normal !important; font-style: normal;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: .08em;
	text-underline-offset: .14em;
	animation: ctxr-hero-ul .8s 1.1s ease both;
}
@keyframes ctxr-hero-ul { from { text-decoration-color: transparent; } to { text-decoration-color: var(--signal); } }
@media (prefers-reduced-motion: reduce) { body:has(main.page-home-v2) .hv-hero h1 i { animation: none; text-decoration-color: var(--signal); } }
body:has(main.page-home-v2) .hv-hero h1 i::after { display: none !important; }
body:has(main.page-home-v2) .hv-hero .lead, body:has(main.page-home-v2) .hv-hero p { color: #efdbe1 !important; }
body:has(main.page-home-v2) .hv-hero .lead .hv-ul { color: #fff !important; }
body:has(main.page-home-v2) .hero-tag { border-width: 1px !important; border-color: rgba(255,255,255,.35) !important; color: #efdbe1 !important; font-weight: 500 !important; }

/* hero-illustratie: AR-laag, badge, pin en 'Oud havenkantoor' in wijn en blush (geen magenta) */
body:has(main.page-home-v2) .hv-layer--ar { border-color: var(--rose) !important; background-color: var(--blush) !important; }
body:has(main.page-home-v2) .hv-ar-badge { background: var(--wine) !important; color: var(--paper) !important; border-color: var(--wine) !important; }
body:has(main.page-home-v2) .hv-ar-pin { background: var(--wine) !important; border-color: var(--paper) !important; }
body:has(main.page-home-v2) .hv-layer--ar strong, body:has(main.page-home-v2) .hv-media strong { color: var(--wine) !important; }

/* kaartjes: wit met haarlijn, geen toon-op-toon vormen meer */
body:has(main.page-home-v2) .hv-card,
body:has(main.page-home-v2) .hv-steps li,
body:has(main.page-home-v2) .hv-who li { background: #fff !important; background-image: none !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: none !important; border-radius: 10px !important; }
body:has(main.page-home-v2) .band--brown .hv-card { background: rgba(255,255,255,.06) !important; color: var(--paper) !important; border-color: rgba(255,255,255,.16) !important; }
body:has(main.page-home-v2) .hv-ico { color: var(--rose) !important; }
body:has(main.page-home-v2) .hv-card p, body:has(main.page-home-v2) .hv-steps p, body:has(main.page-home-v2) .hv-who p { color: #5b3a45 !important; opacity: 1 !important; }
body:has(main.page-home-v2) .hv-steps li::after { color: var(--line) !important; }

/* knoppen: primair geel (de enige felle kleur), secundair als lijn */
body:has(main.page-home-v2) .cta { background: var(--signal) !important; color: var(--ink) !important; box-shadow: none !important; border-radius: 999px !important; font-weight: 600 !important; }
body:has(main.page-home-v2) .cta span { color: var(--ink) !important; }
body:has(main.page-home-v2) .cta::before, body:has(main.page-home-v2) .cta::after { display: none !important; }
body:has(main.page-home-v2) .cta.cta--ghost, body:has(main.page-home-v2) .button { background: transparent !important; color: inherit !important; border: 1px solid currentColor !important; border-radius: 999px !important; }
body:has(main.page-home-v2) .cta.cta--ghost span { color: inherit !important; }

/* slider-tijdslijn en bolletjes in de nieuwe tinten */
body:has(main.page-home-v2) .hs-time { background: var(--line) !important; }
body:has(main.page-home-v2) .hs-time > i { background: var(--wine) !important; }
body:has(main.page-home-v2) .hs-dot.on { background: var(--wine) !important; border-color: var(--wine) !important; }
/* navigatie van de slider 'Diversiteit aan toepassingen' op desktop: de bolletjes zijn er weer
   (cards.css verbergt .hs-dots op muis-schermen; hier alleen voor deze sectie teruggezet) */
html body:has(main.page-home-v2) .hv-apps .hs-dots { display: flex !important; margin: .4em 0 0; }
body:has(main.page-home-v2) .hv-apps .hs-dot { border: 2px solid var(--wine) !important; background: transparent !important; opacity: .6; }
body:has(main.page-home-v2) .hv-apps .hs-dot.on { background: var(--wine) !important; border-color: var(--wine) !important; opacity: 1; }

/* portfolio-kubus: koppen en tekst in het palet; de titelkaart blijft geel met wijnrode tekst */
body:has(main.page-home-v2) #xr .cc-title, body:has(main.page-home-v2) #xr h2 { color: var(--paper) !important; }
body:has(main.page-home-v2) #xr h4 { color: var(--paper) !important; }
body:has(main.page-home-v2) #xr .cc-hint { color: #e6cfd9 !important; }
body:has(main.page-home-v2) #xr .cc-card--title { background: var(--signal) !important; }
body:has(main.page-home-v2) #xr .cc-card--title * { color: var(--wine) !important; }
/* titelkaart van de kubus: de tekst zit in .cc-title-text, wijnrood op geel */
body:has(main.page-home-v2) #xr .cc-title-text, body:has(main.page-home-v2) #xr .cc-title-text * { color: var(--wine) !important; text-shadow: none !important; }
body:has(main.page-home-v2) #xr .cc-title-text .cc-hint { color: var(--wine) !important; }
body:has(main.page-home-v2) #xr .cc-btn { background: var(--signal) !important; color: var(--ink) !important; }
body:has(main.page-home-v2) #xr .cc-btn span { color: var(--ink) !important; }
/* 'Alle cases' op de gele titelkaart: wijn, zodat de knop zichtbaar blijft */
body:has(main.page-home-v2) #xr .cc-btn--all { background: var(--wine) !important; color: var(--signal) !important; }
body:has(main.page-home-v2) #xr .cc-btn--all span { color: var(--signal) !important; }
body:has(main.page-home-v2) #xr .cc-body { background: var(--wine) !important; }
body:has(main.page-home-v2) .hv-pin { background: var(--blush) !important; }

/* footer: witte, volledig zichtbare tekst en grotere paragrafen (ook de foto-band 'Zoek je een oplossing op maat?') */
body:has(main.page-home-v2) footer { background: var(--ink) !important; color: #ffffff !important; }
body:has(main.page-home-v2) footer :is(h1, h2, h3, h4, p, li, span, small, div, a, label, dt, dd) { color: #ffffff !important; opacity: 1 !important; }
body:has(main.page-home-v2) footer h2, body:has(main.page-home-v2) footer h3 { font-weight: 600 !important; }
body:has(main.page-home-v2) footer h2 span { color: var(--signal) !important; }
body:has(main.page-home-v2) footer p { font-size: 1.2rem !important; line-height: 1.5 !important; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
body:has(main.page-home-v2) footer p.closure { font-size: .95rem !important; }
body:has(main.page-home-v2) footer a.cta, body:has(main.page-home-v2) footer a.cta span { color: var(--ink) !important; }

/* resterende felle accenten temperen */
body:has(main.page-home-v2) .hv-hero .kicker { color: #dcb8c3 !important; }
body:has(main.page-home-v2) .hv-stack, body:has(main.page-home-v2) .hv-media figure, body:has(main.page-home-v2) .hv-media svg { filter: grayscale(1) sepia(.35) hue-rotate(-45deg) saturate(1.4) brightness(1.05); }
body:has(main.page-home-v2) .hv-steps li > span, body:has(main.page-home-v2) .hv-steps .hv-num, body:has(main.page-home-v2) .hv-steps li::before { color: var(--line) !important; }
body:has(main.page-home-v2) .latest-news-bar { background-color: var(--blush) !important; border-bottom: 1px solid var(--line); }
body:has(main.page-home-v2) .latest-news-bar a, body:has(main.page-home-v2) .latest-news-bar .sep { color: var(--ink) !important; }
body:has(main.page-home-v2) .latest-news-bar .news-icon, body:has(main.page-home-v2) .latest-news-bar .arrow-icon { fill: var(--rose) !important; }
body:has(main.page-home-v2) footer svg, body:has(main.page-home-v2) footer img { filter: grayscale(1) brightness(1.6); }
body:has(main.page-home-v2) .hv-steps li::before { color: var(--rose) !important; opacity: .35 !important; font-weight: 600 !important; }
body:has(main.page-home-v2) .hv-phone { filter: grayscale(1) sepia(.35) hue-rotate(-45deg) saturate(1.4) brightness(1.05); }
body:has(main.page-home-v2) .latest-news-bar, body:has(main.page-home-v2) .hero-tags.is-band { border-color: var(--line) !important; }
body:has(main.page-home-v2) .hv-steps li + li::after { background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px) !important; }
body:has(main.page-home-v2) footer#bottom { background: var(--ink) !important; color: #ffffff !important; }
body:has(main.page-home-v2) footer#bottom svg, body:has(main.page-home-v2) footer#bottom img { filter: grayscale(1) brightness(2.2) opacity(.85); }

/* lettertype (voorstel): Urbanist, variabel gewicht, zelf gehost */
@font-face { font-family: 'Urbanist'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/theme/static/fonts/urbanist/urbanist-latin-wght-normal.woff2') format('woff2'); }
body:has(main.page-home-v2),
body:has(main.page-home-v2) :is(h1, h2, h3, h4, p, li, a, button, input, label, span, small, dt, dd, figcaption, summary) { font-family: 'Urbanist', system-ui, sans-serif !important; }
body:has(main.page-home-v2) main h1 { font-weight: 650 !important; letter-spacing: -.02em; }
body:has(main.page-home-v2) main h2 { font-weight: 650 !important; letter-spacing: -.015em; }
body:has(main.page-home-v2) main p, body:has(main.page-home-v2) main li { font-weight: 450; }