/* Orditool — front-end polish layer (loaded via mu-plugin) */

:root { --otl-shadow: 0 1px 3px rgba(16,24,40,.06), 0 10px 28px rgba(16,24,40,.07); }

html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------- Buttons */
/* Primary = orange (theme.json default). Only the "Offerte" CTA uses it. */
.wp-block-button__link { transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.wp-block-button:not(.is-style-outline) > .wp-block-button__link { box-shadow: 0 6px 16px rgba(241,110,0,.28); }
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(241,110,0,.34); }

/* Neutral / secondary buttons: ghost with a slate outline (light backgrounds). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--slate);
	border: 2px solid rgba(71,95,101,.35);
	box-shadow: none;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--slate);
	border-color: var(--wp--preset--color--slate);
	color: #fff;
	transform: translateY(-2px);
}
/* On dark (slate hero / cover) backgrounds neutral buttons go light. */
.has-slate-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #fff;
	border-color: rgba(255,255,255,.55);
}
.has-slate-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--slate);
	border-color: #fff;
}

/* ---------------------------------------------------------------- Cards */
.otl-card {
	background: #fff !important;
	border-radius: 14px;
	box-shadow: var(--otl-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
	overflow: hidden;
}
.otl-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(16,24,40,.14); }
/* Long compound domain terms (e.g. "Tachograaf­downloads") wrap, not clip. */
.otl-card :is(h2,h3,h4,p) { overflow-wrap: break-word; hyphens: auto; }

/* ====================================================== Header (white sticky) */
.otl-hdr { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #eaeef0; }
/* Three zones: logo (left) | menu (centered) | utils (right). Equal flex sides centre the menu. */
.otl-hdr__inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .5rem 1.25rem; }
.otl-hdr__left { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.otl-hdr__logo { display: inline-flex; }
.otl-hdr__logo img { width: 190px; height: auto; display: block; }

.otl-nav { flex: 0 0 auto; display: flex; align-items: center; }
.otl-nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.otl-nav__item { position: relative; display: flex; align-items: center; }
.otl-nav__link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: 1rem; color: #1f3338; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; padding: .6rem .7rem; border-radius: 8px; line-height: 1; }
.otl-nav__link:hover, .otl-nav__link:focus-visible { color: var(--wp--preset--color--primary); background: #f5f7f8; }
.otl-caret { width: .45em; height: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); display: inline-block; }

.otl-nav__utils { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: .85rem; }
.otl-hdr__contact { font-weight: 600; font-size: 1rem; color: #1f3338; text-decoration: none; padding: .6rem .3rem; white-space: nowrap; }
.otl-hdr__contact:hover, .otl-hdr__contact:focus-visible { color: var(--wp--preset--color--primary); }
.otl-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--wp--preset--color--primary); color: #fff !important; font-weight: 700; text-decoration: none; padding: .7rem 1.15rem; border-radius: 10px; line-height: 1; box-shadow: 0 6px 16px rgba(241,110,0,.28); transition: transform .15s ease, box-shadow .15s ease; }
.otl-cta:hover, .otl-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(241,110,0,.34); color: #fff !important; }
/* Header utility controls share one height so the NL switcher and CTA line up. */
.otl-nav__utils .otl-cta, .otl-nav__utils .otl-lang__toggle { height: 44px; padding-top: 0; padding-bottom: 0; }

/* Language dropdown */
.otl-lang { position: relative; display: flex; align-items: center; }
.otl-lang__toggle { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; font-weight: 600; font-size: .95rem; line-height: 1; color: #475f65; background: none; border: 1px solid #dfe5e7; border-radius: 8px; cursor: pointer; font-family: inherit; padding: 0 .7rem; }
.otl-lang__toggle .otl-caret { transform: rotate(45deg); }
.otl-lang__globe { flex: 0 0 auto; display: block; }
.otl-lang__toggle:hover, .otl-lang__toggle:focus-visible { border-color: #c2cccf; color: #1f3338; }
.otl-lang__menu { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 160px; background: #fff; border: 1px solid #eaeef0; border-radius: 10px; box-shadow: var(--otl-shadow); list-style: none; margin: 0; padding: .35rem; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 60; }
.otl-lang.otl-open .otl-lang__menu, .otl-lang:focus-within .otl-lang__menu { opacity: 1; visibility: visible; transform: none; }
.otl-lang__menu a { display: block; padding: .5rem .6rem; border-radius: 6px; color: #1f3338; text-decoration: none; font-size: .95rem; }
.otl-lang__menu a:hover, .otl-lang__menu a:focus-visible { background: #f5f7f8; color: var(--wp--preset--color--primary); }
.otl-lang__menu [aria-current="true"] { font-weight: 700; }

/* Oplossingen mega menu */
.otl-mega { position: absolute; left: 50%; top: calc(100% + .5rem); transform: translateX(-50%) translateY(-6px); width: min(720px, 92vw); background: #fff; border: 1px solid #eef1f2; border-radius: 16px; box-shadow: 0 18px 50px rgba(16,24,40,.16); padding: 1rem; opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; z-index: 70; }
.otl-has-mega:hover .otl-mega, .otl-has-mega:focus-within .otl-mega, .otl-has-mega.otl-open .otl-mega { opacity: 1; visibility: visible; transform: translateX(-50%); }
.otl-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.otl-mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.otl-mega__card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "accent name" "accent sub" "accent desc"; column-gap: .75rem; row-gap: .1rem; padding: .8rem; border-radius: 12px; text-decoration: none; color: #1f3338; }
.otl-mega__card:hover, .otl-mega__card:focus-visible { background: #f5f7f8; }
.otl-mega__accent { grid-area: accent; width: 6px; border-radius: 6px; align-self: stretch; }
.otl-mega__name { grid-area: name; font-weight: 700; font-size: 1.02rem; }
.otl-mega__sub { grid-area: sub; font-weight: 600; font-size: .85rem; color: var(--wp--preset--color--primary); }
.otl-mega__desc { grid-area: desc; font-size: .85rem; color: #5a6b70; line-height: 1.45; margin-top: .15rem; }
.otl-mega__all { display: inline-block; margin-top: .5rem; padding: .5rem .8rem; font-weight: 700; color: var(--wp--preset--color--slate); text-decoration: none; }
.otl-mega__all:hover, .otl-mega__all:focus-visible { color: var(--wp--preset--color--primary); }

/* Support dropdown (simple link list) */
.otl-dd { position: absolute; left: 0; top: calc(100% + .5rem); min-width: 200px; background: #fff; border: 1px solid #eef1f2; border-radius: 12px; box-shadow: 0 18px 50px rgba(16,24,40,.16); padding: .4rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; z-index: 70; }
.otl-has-dd:hover .otl-dd, .otl-has-dd:focus-within .otl-dd, .otl-has-dd.otl-open .otl-dd { opacity: 1; visibility: visible; transform: none; }
.otl-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.otl-dd__link { display: block; padding: .6rem .8rem; border-radius: 8px; color: #1f3338; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.otl-dd__link:hover, .otl-dd__link:focus-visible { background: #f5f7f8; color: var(--wp--preset--color--primary); }

.otl-hdr__burger { display: none; }

@media (max-width: 1023px) {
	.otl-hdr__inner { flex-wrap: wrap; gap: .5rem .75rem; }
	.otl-hdr__left { flex: 1 1 auto; }
	.otl-hdr__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 11px; order: 0; }
	.otl-hdr__burger span { display: block; height: 2px; background: #1f3338; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
	.otl-hdr.is-open .otl-hdr__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.otl-hdr.is-open .otl-hdr__burger span:nth-child(2) { opacity: 0; }
	.otl-hdr.is-open .otl-hdr__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Menu + utils wrap to full-width rows below the logo/burger row; shown when open. */
	.otl-nav { flex: 1 1 100%; order: 3; display: none; }
	.otl-nav__utils { flex: 1 1 100%; order: 4; display: none; flex-direction: column; align-items: stretch; gap: .75rem; padding-top: .75rem; border-top: 1px solid #eef1f2; }
	.otl-hdr.is-open .otl-nav { display: flex; }
	.otl-hdr.is-open .otl-nav__utils { display: flex; }
	.otl-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.otl-nav__item { flex-direction: column; align-items: stretch; }
	.otl-nav__link { width: 100%; justify-content: space-between; padding: .9rem .6rem; font-size: 1.05rem; }
	/* Static, full-width panels on mobile. !important beats the desktop open/hover rules that
	   otherwise re-apply translateX(-50%) and push the panel off-screen to the left. */
	.otl-mega, .otl-dd { position: static; transform: none !important; left: auto; width: auto; min-width: 0; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 .5rem .6rem; display: none; }
	.otl-has-mega.otl-open .otl-mega, .otl-has-dd.otl-open .otl-dd { display: block; }
	.otl-mega__grid { grid-template-columns: 1fr; }
	/* Mobile mega menu: keep it compact — product name + subtitle only, drop the descriptions. */
	.otl-mega__desc { display: none; }
	.otl-mega__card { padding: .55rem .6rem; }
	.otl-dd__link { padding: .7rem .6rem; }
	.otl-lang__toggle { width: 100%; justify-content: space-between; }
	.otl-lang__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: .2rem 0 0; display: none; }
	.otl-lang.otl-open .otl-lang__menu { display: block; }
	.otl-cta { width: 100%; padding: .85rem 1rem; }
	.otl-hdr__contact { width: 100%; padding: .9rem .6rem; font-size: 1.05rem; }
}

/* ====================================================== Hero with video bg */
.otl-hero { position: relative; overflow: hidden; isolation: isolate; }
.otl-hero__media, .otl-hero__video { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.otl-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.otl-hero__video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0; }
.otl-hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31,51,56,.55) 0%, rgba(31,51,56,.74) 100%); }
.otl-hero__inner { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: clamp(3.5rem, 9vw, 7rem) 1.25rem; color: #fff; }
.otl-hero__title { color: #fff; font-weight: 800; line-height: 1.08; font-size: clamp(2rem, 5vw, 3.4rem); max-width: 24ch; text-wrap: balance; margin: 0 0 1rem; }
.otl-hero__sub { color: rgba(255,255,255,.92); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 52ch; margin: 0 0 1.75rem; }
.otl-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.otl-cta--lg { padding: .95rem 1.6rem; font-size: 1.05rem; border-radius: 12px; }
.otl-hero__secondary { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 600; text-decoration: none; padding: .9rem 1.25rem; border: 2px solid rgba(255,255,255,.55); border-radius: 12px; transition: background-color .15s ease, border-color .15s ease; }
.otl-hero__secondary:hover, .otl-hero__secondary:focus-visible { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.otl-hero__secondary::after { content: "\2192"; }
@media (prefers-reduced-motion: reduce) { .otl-hero__video { display: none; } }

/* -------------------------------------------- Homepage section flow */
/* The homepage is a stack of full-width colour bands; drop the block-gap
   between them so the bands butt together (no white seams showing the
   body background through the gaps). */
/* Scoped via the hero so it covers all three language homes (only the NL home
   is the site front page / body.home; FR + EN are regular pages). */
body:has(.otl-hero) .entry-content > * { margin-block: 0; }
/* ...and the same block-gap seam between the content and the footer. */
body:has(.otl-hero) .wp-site-blocks > footer { margin-block-start: 0; }

/* ============================================= Home: instrument stat band */
/* Dark dashboard-style band directly under the hero. The background disc is
   a stylised tachograph chart (tick rings) — the artifact Orditool digitises.
   Each stat carries a short orange gradation tick instead of a card. */
.otl-stats { position: relative; overflow: hidden; background: #22343b; color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
.otl-stats::before {
	content: ""; position: absolute; top: 50%; right: -170px; width: 620px; height: 620px;
	transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20560%20560'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%3E%3Ccircle%20cx='280'%20cy='280'%20r='274'%20stroke-opacity='.12'%20stroke-width='2'/%3E%3Ccircle%20cx='280'%20cy='280'%20r='252'%20stroke-opacity='.16'%20stroke-width='18'%20stroke-dasharray='2%2011.2'/%3E%3Ccircle%20cx='280'%20cy='280'%20r='214'%20stroke-opacity='.1'%20stroke-width='2'/%3E%3Ccircle%20cx='280'%20cy='280'%20r='170'%20stroke-opacity='.14'%20stroke-width='12'%20stroke-dasharray='2%2020.26'/%3E%3Ccircle%20cx='280'%20cy='280'%20r='118'%20stroke-opacity='.1'%20stroke-width='2'/%3E%3Ccircle%20cx='280'%20cy='280'%20r='54'%20stroke-opacity='.12'%20stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
	pointer-events: none;
}
.otl-stats__inner {
	position: relative; max-width: 1240px; margin-inline: auto;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(2rem, 4vw, 2.75rem) 1.25rem;
}
.otl-stat::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--wp--preset--color--primary); margin-bottom: .65rem; }
.otl-stat__main { display: block; font-weight: 800; font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem); line-height: 1.15; letter-spacing: -.01em; }
.otl-stat__sub { display: block; margin-top: .35rem; font-size: .95rem; line-height: 1.45; color: rgba(255,255,255,.72); max-width: 26ch; }
/* One stat (integrations) links through to a landing page — style it like the others but signal it's clickable. */
a.otl-stat--link { text-decoration: none; color: inherit; border-radius: 4px; transition: transform .15s ease; }
a.otl-stat--link:hover, a.otl-stat--link:focus-visible { transform: translateY(-2px); }
a.otl-stat--link:hover .otl-stat__main, a.otl-stat--link:focus-visible .otl-stat__main { text-decoration: underline; text-underline-offset: 3px; }
a.otl-stat--link:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }
@media (max-width: 900px) {
	.otl-stats__inner { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
	.otl-stats::before { right: -280px; opacity: .6; }
}
@media (max-width: 479px) { .otl-stat__main { font-size: 1.3rem; } }

/* Oplossingen-pagina: geen aparte introband meer, dus de eerste sectie
   (het kaartenblok) sluit strak onder de header aan i.p.v. met een grote
   witruimte. */
.page-oplossingen .entry-content > .otl-breadcrumb + .wp-block-group {
	/* !important omdat het blok een inline padding-top (spacing-80) meekrijgt */
	padding-top: var(--wp--preset--spacing--40) !important;
}

/* ============================================= Home: solutions grid v2 */
/* Two-up product cards that echo the mega-menu anatomy: a colour-coded
   accent edge per product, wordmark, category title (stretched link),
   check-list and a pinned "Meer over" affordance. */
.otl-prodgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2vw, 1.75rem); }
@media (max-width: 767px) { .otl-prodgrid { grid-template-columns: 1fr; } }
.otl-prodgrid__card {
	position: relative; display: flex; flex-direction: column; gap: .6rem;
	background: #fff; border-radius: 14px; box-shadow: var(--otl-shadow); overflow: hidden;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	padding-left: calc(clamp(1.5rem, 2.5vw, 2rem) + 8px);
	transition: transform .2s ease, box-shadow .2s ease;
}
.otl-prodgrid__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--sol-accent, var(--wp--preset--color--primary)); }
.otl-prodgrid__card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(16,24,40,.14); }
.otl-prodgrid__card:focus-within { outline: 2px solid var(--wp--preset--color--slate); outline-offset: 2px; }
.otl-prodgrid__card--tach  { --sol-accent: var(--wp--preset--color--primary); }
.otl-prodgrid__card--track { --sol-accent: var(--wp--preset--color--cyan); }
.otl-prodgrid__card--fleet { --sol-accent: var(--wp--preset--color--lime); }
.otl-prodgrid__card--sense { --sol-accent: var(--wp--preset--color--magenta); }
.otl-prodgrid__logo { width: 150px; height: auto; margin-bottom: .25rem; }
.otl-prodgrid__title { margin: 0; font-size: clamp(1.25rem, 1.05rem + .5vw, 1.45rem); line-height: 1.2; }
.otl-prodgrid__title a { color: #16252b; text-decoration: none; outline: none; }
.otl-prodgrid__title a::after { content: ""; position: absolute; inset: 0; } /* stretched link: whole card clickable */
.otl-prodgrid__desc { margin: 0; color: #46585e; line-height: 1.55; }
.otl-prodgrid__list { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.otl-prodgrid__list li { position: relative; padding-left: 1.6rem; color: #33454b; }
.otl-prodgrid__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--wp--preset--color--lime); -webkit-text-stroke: .8px var(--wp--preset--color--lime); }
.otl-prodgrid__more { margin-top: auto; padding-top: .85rem; font-weight: 700; color: var(--wp--preset--color--slate); }
.otl-prodgrid__more::after { content: "\2192"; display: inline-block; margin-left: .4rem; transition: transform .2s ease; }
.otl-prodgrid__card:hover .otl-prodgrid__more { color: var(--wp--preset--color--primary); }
.otl-prodgrid__card:hover .otl-prodgrid__more::after { transform: translateX(4px); }

/* ============================================= Home: klantquotes v2 */
/* Quotes are deliberately NOT cards: on the home page cards mean clickable
   (product cards, case publications). A quote is a colour-coded rule +
   attribution; the rule colour names the product the quote is about. */
.otl-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 767px) { .otl-quotes { grid-template-columns: 1fr; } }
.otl-quote { margin: 0; border-left: 3px solid var(--q-accent, var(--wp--preset--color--primary)); padding: .3rem 0 .3rem clamp(1.15rem, 2vw, 1.6rem); }
.otl-quote--tach  { --q-accent: var(--wp--preset--color--primary); }
.otl-quote--track { --q-accent: var(--wp--preset--color--cyan); }
.otl-quote--sense { --q-accent: var(--wp--preset--color--magenta); }
.otl-quote p { margin: 0 0 .7rem; font-size: 1.08rem; line-height: 1.6; color: #33454b; }
.otl-quote__by { font-weight: 700; color: #16252b; font-size: .95rem; }
.otl-quote__prod { font-weight: 600; color: #5a6b70; }

/* Klantverhalen: uniform crop of the publication covers (portrait PDF scans). */
.otl-case__thumb { margin: 0; }
.otl-case__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid #e6ebed; }

@media (prefers-reduced-motion: reduce) {
	.otl-prodgrid__card, .otl-prodgrid__more::after { transition: none; }
	.otl-prodgrid__card:hover { transform: none; }
	.otl-prodgrid__card:hover .otl-prodgrid__more::after { transform: none; }
}

/* ----------------------------------------------------------- Breadcrumbs */
.otl-breadcrumb { background: #f5f7f8; border-bottom: 1px solid #e8edee; font-size: .85rem; }
.otl-breadcrumb__inner { max-width: 1140px; margin: 0 auto; padding: .55rem 1.25rem; color: #6b7a7f; }
.otl-breadcrumb a { color: #6b7a7f; text-decoration: none; }
.otl-breadcrumb a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }
.otl-breadcrumb .breadcrumb_last { color: var(--wp--preset--color--slate); font-weight: 600; }

/* ------------------------------------------------- Feature comparison table */
.otl-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: 0; }
.otl-compare table { min-width: 640px; width: 100%; border-collapse: collapse; }
.otl-compare th, .otl-compare td { border: 1px solid #e3e8ea; padding: .6rem .8rem; text-align: center; vertical-align: middle; }
.otl-compare thead th { background: var(--wp--preset--color--slate); color: #fff; font-weight: 600; }
.otl-compare th[scope="row"] { text-align: left; font-weight: 600; background: #f5f7f8; }
.otl-compare tbody tr:nth-child(even) td { background: #fbfcfc; }
/* Bigger, fatter checkmarks in Orditool green. */
.otl-compare .otl-yes { color: var(--wp--preset--color--lime); font-weight: 900; font-size: 1.6rem; line-height: 1; -webkit-text-stroke: 1.4px var(--wp--preset--color--lime); }
.otl-compare .otl-no  { color: #c4cdd1; }
.otl-compare figcaption { font-size: .85rem; color: #6b7a7f; margin-top: .5rem; }
@media (min-width: 783px) { .otl-compare figcaption { display: none; } }

/* ---------------------------------------------------------------- Header */
.otl-header { position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(16,24,40,.12); }
.otl-header .wp-block-site-logo img { height: auto; }
.otl-lang-switcher a:hover { opacity: 1 !important; }

/* ---------------------------------------------------------------- Footer */
/* Trilingual footer ([otl_footer]); slate ground. */
.otl-foot { position: relative; background: var(--wp--preset--color--slate, #475f65); color: #fff; }
.otl-foot__inner { max-width: 1180px; margin-inline: auto; padding: clamp(2.75rem, 5vw, 4rem) clamp(1.25rem, 5vw, 2.5rem) clamp(1.5rem, 3vw, 2rem); }
.otl-foot__top { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }
.otl-foot__logo img { height: 42px; width: auto; display: block; margin-bottom: 1rem; }
.otl-foot__tag { font-size: .95rem; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 30ch; margin: 0 0 1.25rem; }
.otl-foot__news { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; font-size: .9rem; color: #fff; text-decoration: none; padding: .5rem .95rem; border-radius: 9px; background: transparent; border: 1px solid rgba(255,255,255,.28); transition: background .15s ease, border-color .15s ease; }
.otl-foot__news:hover, .otl-foot__news:focus-visible { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.otl-foot__news span { transition: transform .15s ease; }
.otl-foot__news:hover span { transform: translateX(3px); }
.otl-foot__social { display: flex; gap: .5rem; margin-top: 1.4rem; }
.otl-foot__social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.1); color: #fff; transition: background .15s ease, transform .15s ease; }
.otl-foot__social a:hover, .otl-foot__social a:focus-visible { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.otl-foot__social svg { fill: currentColor; }
.otl-foot__head { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; color: rgba(255,255,255,.6); margin: 0 0 1rem; }
.otl-foot__col ul { list-style: none; margin: 0; padding: 0; }
.otl-foot__col li { margin: 0 0 .6rem; }
.otl-foot__col a { color: rgba(255,255,255,.86); text-decoration: none; font-size: .92rem; transition: color .15s ease; }
.otl-foot__col a:hover, .otl-foot__col a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.otl-foot__addr { font-style: normal; font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 0 .8rem; }
.otl-foot__company { display: block; font-weight: 800; color: #fff; margin-bottom: .3rem; }
.otl-foot__contactlinks { font-size: .9rem; line-height: 1.7; margin: 0; }
.otl-foot__contactlinks a { color: rgba(255,255,255,.86); text-decoration: none; }
.otl-foot__contactlinks a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.otl-foot__bottom { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.16); }
.otl-foot__copy { margin: 0; font-size: 13px; color: rgba(255,255,255,.7); }
.otl-foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }
.otl-foot__legal p { font-size: 13px; color: rgba(255,255,255,.7); }
.otl-foot__legal a { color: rgba(255,255,255,.82); }
.otl-foot__legal a:hover { color: #fff; }
.otl-foot__langs { display: inline-flex; gap: .3rem; }
.otl-foot__lang { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: rgba(255,255,255,.6); text-decoration: none; padding: .2rem .5rem; border-radius: 6px; transition: background .15s ease, color .15s ease; }
.otl-foot__lang:hover { color: #fff; background: rgba(255,255,255,.12); }
.otl-foot__lang.is-current { color: #fff; background: rgba(255,255,255,.16); }
@media (max-width: 880px) {
	.otl-foot__top { grid-template-columns: 1fr 1fr; }
	.otl-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
	.otl-foot__top { grid-template-columns: 1fr; }
	.otl-foot__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------- Misc */
.wp-block-cover { isolation: isolate; }

/* Flush the sticky header against the first full-bleed section (hero) — no gap. */
.wp-site-blocks > main { margin-top: 0 !important; padding-top: 0 !important; }

/* ------------------------------------------------- Migrated legacy pages */
/* Check-mark lists (the old SP Page Builder template rendered content lists
   with a green tick; reproduce that for the imported landing/product pages). */
.otl-checklist { list-style: none; padding-left: 0; }
.otl-checklist li { position: relative; padding-left: 1.9em; margin-bottom: .45em; }
.otl-checklist li::before {
	content: "\2713"; position: absolute; left: 0; top: 0;
	color: #5ea226; font-weight: 900;
}
/* Imported images stay within their column and rounded. */
.otl-legacy img, .wp-block-column .wp-block-image img { height: auto; }
/* Bold green check-mark feature titles (old "ordichecked" paragraphs). */
.otl-check-title {
	position: relative; padding-left: 1.9em;
	font-weight: 700; color: var(--wp--preset--color--slate);
	margin: 1.1em 0 .15em;
}
.otl-check-title::before {
	content: "\2713"; position: absolute; left: 0; top: 0;
	color: #5ea226; font-weight: 900;
}
.otl-check-title + p { margin-top: 0; }
/* Full-width tinted headline band (old "solutiontitle"). */
.otl-title-band h1 { margin: 0; }

/* =================================================== DigiPostPro landing */
/* Hardware product page: dark device hero + a "Zo werkt het" route track
   (the device's real pipeline). Accent = lime, pulled from the device LCD. */
.otl-dpp-hero {
	background: radial-gradient(135% 150% at 82% -10%, #3c5258 0%, var(--wp--preset--color--slate) 58%, #3a4e54 100%);
	color: #fff;
	padding-block: clamp(3rem, 6vw, 5rem);
}
.otl-dpp-hero__cols { align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem) !important; }
.otl-dpp-hero__cols > .wp-block-column:first-child { flex-grow: 1.3; }
.otl-dpp__eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 800; color: var(--wp--preset--color--lime); margin: 0 0 1rem; }
.otl-dpp-hero .otl-dpp__title { color: #fff; font-weight: 800; font-size: clamp(2rem, 1.1rem + 2.7vw, 3.4rem); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 1.1rem; }
.otl-dpp-hero .otl-dpp__sub { color: rgba(255,255,255,.85); font-size: clamp(1rem, .95rem + .3vw, 1.18rem); line-height: 1.6; max-width: 44ch; margin: 0 0 1.8rem; }
.otl-dpp__cta { gap: .8rem; }

/* Device on a white "mounting plate" with a soft lime glow (the LCD colour). */
.otl-dpp__plate { position: relative; background: #fff; border-radius: 22px; padding: clamp(1.5rem, 3vw, 2.6rem); box-shadow: 0 34px 70px -28px rgba(0,0,0,.6); }
.otl-dpp__plate::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 62%; height: 26px; border-radius: 50%; background: var(--wp--preset--color--lime); filter: blur(24px); opacity: .55; }
.otl-dpp__device { margin: 0; position: relative; z-index: 1; }
.otl-dpp__device img { display: block; margin: 0 auto; width: 100%; max-width: 280px; height: auto; }

/* Signature: the route track. */
.otl-dpp-flow { padding-block: clamp(3rem, 6vw, 4.5rem); }
.otl-dpp__h { margin: 0 0 clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.01em; }
.otl-dpp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.2vw, 2.2rem); position: relative; }
.otl-dpp-steps::before { content: ""; position: absolute; top: 78px; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, #d7e6b6, var(--wp--preset--color--lime), #d7e6b6); z-index: 0; }
.otl-dpp__step { position: relative; z-index: 1; text-align: center; }
.otl-dpp__step > * { margin-left: auto; margin-right: auto; }
.otl-dpp__num { font-size: .8rem; font-weight: 800; letter-spacing: .14em; color: var(--wp--preset--color--primary); margin: 0 0 .55rem; }
.otl-dpp__ic { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: #fff; border: 2px solid #e3ecdd; display: grid; place-items: center; }
.otl-dpp__ic::before { content: ""; width: 28px; height: 28px; background-color: var(--wp--preset--color--slate); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.otl-dpp__step--device .otl-dpp__ic::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='3'%20width='16'%20height='14'%20rx='2'/%3E%3Cline%20x1='9'%20y1='21'%20x2='15'%20y2='21'/%3E%3Cline%20x1='12'%20y1='17'%20x2='12'%20y2='21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='3'%20width='16'%20height='14'%20rx='2'/%3E%3Cline%20x1='9'%20y1='21'%20x2='15'%20y2='21'/%3E%3Cline%20x1='12'%20y1='17'%20x2='12'%20y2='21'/%3E%3C/svg%3E"); }
.otl-dpp__step--card .otl-dpp__ic::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='5'%20width='20'%20height='14'%20rx='2'/%3E%3Cline%20x1='2'%20y1='10'%20x2='22'%20y2='10'/%3E%3Cline%20x1='6'%20y1='15'%20x2='10'%20y2='15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='5'%20width='20'%20height='14'%20rx='2'/%3E%3Cline%20x1='2'%20y1='10'%20x2='22'%20y2='10'/%3E%3Cline%20x1='6'%20y1='15'%20x2='10'%20y2='15'/%3E%3C/svg%3E"); }
.otl-dpp__step--wifi .otl-dpp__ic::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012.5a10%2010%200%200%201%2014%200'/%3E%3Cpath%20d='M8.5%2016a5%205%200%200%201%207%200'/%3E%3Cline%20x1='12'%20y1='20'%20x2='12.01'%20y2='20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012.5a10%2010%200%200%201%2014%200'/%3E%3Cpath%20d='M8.5%2016a5%205%200%200%201%207%200'/%3E%3Cline%20x1='12'%20y1='20'%20x2='12.01'%20y2='20'/%3E%3C/svg%3E"); }
.otl-dpp__step--shield .otl-dpp__ic::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3Cpath%20d='M9%2012l2%202%204-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3Cpath%20d='M9%2012l2%202%204-4'/%3E%3C/svg%3E"); }
.otl-dpp__step-t { font-size: 1.05rem; font-weight: 700; margin: 0 0 .3rem; color: var(--wp--preset--color--slate); }
.otl-dpp__step p:last-child { font-size: .92rem; color: #5a6b70; line-height: 1.45; margin: 0; }

/* Quiet supporting benefits + CTA reuse existing styles. */
.otl-dpp-more { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.otl-dpp-more .otl-checklist { columns: 2; column-gap: 2.5rem; max-width: 760px; margin-inline: auto; }
.otl-dpp-more .otl-checklist li { break-inside: avoid; }

@media (max-width: 781px) {
	.otl-dpp-steps { grid-template-columns: 1fr; gap: 1.4rem; max-width: 420px; margin-inline: auto; }
	.otl-dpp-steps::before { display: none; }
	.otl-dpp__step { display: grid; grid-template-columns: 64px 1fr; column-gap: 1rem; text-align: left; align-items: center; }
	.otl-dpp__step > * { margin-left: 0; margin-right: 0; }
	.otl-dpp__num { grid-column: 2; margin: 0; }
	.otl-dpp__ic { grid-row: 1 / 4; margin: 0; }
	.otl-dpp__step-t { grid-column: 2; }
	.otl-dpp__step p:last-child { grid-column: 2; }
	.otl-dpp-more .otl-checklist { columns: 1; }
}

/* ============================================ Solution pages (accent system) */
/* Each product solution page wears its own accent (orange/cyan/lime/magenta)
   threaded through the hero kicker, module check-bullets and compare ticks. */
.otl-sol--primary { --otl-accent: #f16e00; }
.otl-sol--cyan    { --otl-accent: #00aeec; }
.otl-sol--lime    { --otl-accent: #6fa628; }
.otl-sol--magenta { --otl-accent: #bd1a67; }

/* Hero: white, instrument-grade. The product's own logo (a tachograph dial) leads;
   a faint speedometer-tick arc in the product accent, top-right, echoes it. */
.otl-sol-hero { position: relative; overflow: hidden; background: #fff; color: #1f3338; padding-block: clamp(3rem, 6vw, 5rem) !important; border-bottom: 1px solid #eef2f3; }
/* the dial: a ring of ticks (conic gradient masked to a thin ring) + a soft accent glow inside it */
.otl-sol-hero::before { content: ""; position: absolute; top: -48%; right: -7%; width: min(640px, 52%); aspect-ratio: 1; background: repeating-conic-gradient(from 188deg, var(--otl-accent) 0 .5deg, transparent .5deg 5deg); -webkit-mask: radial-gradient(circle, transparent 63%, #000 63.5% 69%, transparent 69.5%); mask: radial-gradient(circle, transparent 63%, #000 63.5% 69%, transparent 69.5%); opacity: .32; pointer-events: none; }
.otl-sol-hero::after { content: ""; position: absolute; top: -26%; right: 3%; width: min(380px, 32%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--otl-accent) 13%, transparent), transparent 64%); pointer-events: none; }
.otl-sol-hero > * { position: relative; z-index: 1; }
.otl-sol-hero__logo { margin: 0 0 1.6rem; }
.otl-sol-hero__logo img { height: clamp(58px, 7.5vw, 84px); width: auto; display: block; }
/* Darken the kicker toward ink for legible contrast on white (esp. cyan/lime). */
.otl-sol-hero__kicker { text-transform: uppercase; letter-spacing: .18em; font-weight: 800; font-size: .82rem; color: var(--otl-accent); color: color-mix(in srgb, var(--otl-accent) 78%, #243a3f); margin: 0 0 .85rem; }
.otl-sol-hero .otl-sol-hero__title { color: #1f3338; font-weight: 800; font-size: clamp(2rem, 1.1rem + 2.8vw, 3.4rem); line-height: 1.07; letter-spacing: -.02em; margin: 0 0 1rem; max-width: 20ch; }
.otl-sol-hero .otl-sol-hero__intro { color: #475f65; font-size: clamp(1rem, .95rem + .3vw, 1.18rem); line-height: 1.6; max-width: 56ch; margin: 0 0 1.7rem; }

/* Split variant: text left, logo framed by its accent dial right. */
.otl-sol-hero--split::before, .otl-sol-hero--split::after { display: none; }
.otl-sol-hero--split .wp-block-columns { align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); margin: 0; }
.otl-sol-hero--split .otl-sol-hero__title { max-width: none; font-size: clamp(1.7rem, 1rem + 1.7vw, 2.4rem); overflow-wrap: break-word; hyphens: auto; }
.otl-sol-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.otl-sol-hero__dial { position: absolute; width: min(440px, 100%); aspect-ratio: 1; background: repeating-conic-gradient(from 0deg, var(--otl-accent) 0 .5deg, transparent .5deg 4.5deg); -webkit-mask: radial-gradient(circle, transparent 70%, #000 70.5% 76%, transparent 76.5%); mask: radial-gradient(circle, transparent 70%, #000 70.5% 76%, transparent 76.5%); opacity: .3; pointer-events: none; }
.otl-sol-hero__glow { position: absolute; width: min(360px, 82%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--otl-accent) 14%, transparent), transparent 62%); pointer-events: none; }
.otl-sol-hero__biglogo { position: relative; max-width: 84%; height: auto; display: block; }
@media (max-width: 781px) { .otl-sol-hero__visual { min-height: 240px; margin-top: 1.5rem; } }

/* Dark-green hero variants (A/B): the colour logo sits on a white plaque so it reads. */
.otl-sol-hero--dark { background: radial-gradient(135% 150% at 85% -20%, #3c5258 0%, var(--wp--preset--color--slate) 60%); color: #fff; border-bottom: 0; }
.otl-sol-hero--dark::before, .otl-sol-hero--dark::after { display: none; }
/* The card is on the img (so the figure can stay full-width and align with the text). */
.otl-sol-hero__plaque { margin: 0 0 1.4rem; }
.otl-sol-hero__plaque img { box-sizing: content-box; display: inline-block; height: 46px; width: auto; background: #fff; padding: .8rem 1.2rem; border-radius: 14px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.42); }
.otl-sol-hero--dark .otl-sol-hero__kicker { color: var(--otl-accent); }
.otl-sol-hero--dark .otl-sol-hero__title { color: #fff; }
.otl-sol-hero--dark .otl-sol-hero__intro { color: rgba(255,255,255,.92); }
/* Demo (outline) button goes light on the dark hero. */
.otl-sol-hero--dark .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
.otl-sol-hero--dark .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--slate); border-color: #fff; }
/* Variant 3 — accent speedometer-tick dial, top-right (glows on dark). */
.otl-sol-hero--dark.otl-hero-dial { overflow: hidden; }
.otl-sol-hero--dark.otl-hero-dial::before { display: block; content: ""; position: absolute; top: -54%; right: -9%; width: min(460px, 38%); aspect-ratio: 1; background: repeating-conic-gradient(from 188deg, var(--otl-accent) 0 .5deg, transparent .5deg 5deg); -webkit-mask: radial-gradient(circle, transparent 63%, #000 63.5% 69%, transparent 69.5%); mask: radial-gradient(circle, transparent 63%, #000 63.5% 69%, transparent 69.5%); opacity: .5; pointer-events: none; }
/* Big white circle (left column) holding logo + tagline, bled off the left edge;
   headline in the right column. The hero clips the circle's left side. */
.otl-sol-hero.otl-hero-seal { overflow: hidden; }
.otl-hero-seal .wp-block-columns { align-items: center; gap: clamp(.5rem, 1.5vw, 1.25rem); }
.otl-hero-seal .wp-block-column { min-width: 0; }
.otl-sol-hero__disc { position: relative; width: min(440px, 130%); aspect-ratio: 1; margin-left: clamp(-340px, -25vw, -170px); border-radius: 50%; background: #fff; box-shadow: 0 24px 60px -18px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: flex-end; padding-right: 13%; box-sizing: border-box; }
/* Fixed-width, centre-aligned block so every logo lands on the same axis regardless
   of how wide its slogan is. */
.otl-sol-hero__seal-in { display: flex; flex-direction: column; align-items: center; text-align: center; width: 56%; }
.otl-sol-hero__seal-logo { height: 54px; width: auto; max-width: 100%; display: block; }
/* Slogan breaks only at an authored soft hyphen (e.g. Bestuurders-kaarten), never mid-word. */
.otl-sol-hero__seal-tag { margin-top: .7rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; font-size: .82rem; line-height: 1.35; color: #46555b; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.otl-sol-hero__seal-tag-accent { color: var(--otl-accent); }
.otl-hero-seal .otl-sol-hero__title { max-width: none; font-size: clamp(1.7rem, 1rem + 1.7vw, 2.5rem); overflow-wrap: break-word; }
/* Stacked (≤781px): a compact, fully-visible centred medallion — no left bleed, so the
   text column can no longer be clipped by the hero's overflow:hidden. */
@media (max-width: 781px) {
	.otl-hero-seal .wp-block-columns { gap: clamp(1.25rem, 4vw, 2rem); }
	.otl-sol-hero__disc { width: min(300px, 70vw); margin-left: auto; margin-right: auto; justify-content: center; padding-right: 0; }
	.otl-sol-hero__seal-in { width: auto; max-width: 80%; }
	.otl-sol-hero__seal-logo { height: 50px; }
	.otl-hero-seal .otl-sol-hero__title { font-size: clamp(1.55rem, 4.5vw, 2rem); }
}

/* --- Image-led hero (otl-hero-shot): real product screenshot in the right
   column, text + both CTAs on the left. Built for fast product comprehension:
   the visitor sees the actual product, not a logo. --- */
.otl-hero-shot .wp-block-columns { align-items: center; gap: clamp(1.75rem, 4.5vw, 3.75rem); }
.otl-hero-shot .wp-block-column { min-width: 0; }
.otl-hero-shot .otl-sol-hero__kicker { font-size: .9rem; margin: 0 0 .55rem; }
.otl-hero-shot .otl-sol-hero__title { max-width: 18ch; }
.otl-sol-hero__shot { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e3eaec; box-shadow: 0 30px 64px -28px rgba(15, 40, 46, .45); }
.otl-sol-hero__shot::before { content: ""; display: block; height: 5px; background: var(--otl-accent); }
.otl-sol-hero__shot img { display: block; width: 100%; height: auto; }
/* Stacked (≤781px): text + CTAs render first (they precede the figure in the DOM),
   then a height-capped screenshot — so both buttons stay above the fold. */
@media (max-width: 781px) {
	.otl-hero-shot { padding-block: clamp(2rem, 7vw, 3rem) !important; }
	.otl-hero-shot .wp-block-columns { gap: clamp(1.25rem, 5vw, 1.75rem); }
	.otl-hero-shot .otl-sol-hero__intro { margin-bottom: 1.25rem; }
	.otl-hero-shot .otl-sol-hero__shot img { max-height: 200px; object-fit: cover; object-position: top center; }
}

/* Brand lockup (logo + slogan) rehomed below the hero. */
.otl-brandmark { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .85rem; padding-block: clamp(1.75rem, 4.5vw, 2.75rem); }
.otl-brandmark__logo { height: clamp(54px, 6.5vw, 70px); width: auto; display: block; }
.otl-brandmark__tag { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: clamp(.85rem, 2.5vw, 1rem); color: #46555b; }
.otl-brandmark__tag-accent { color: var(--otl-accent); }

/* --- Dark "stage" hero (otl-hero-stage): brand-slate backdrop (#475f65) + a
   coded product composition on the right. Used for the Orditrack live console. --- */
.otl-sol-hero--forest { background: radial-gradient(130% 150% at 82% -14%, #547077 0%, #475f65 52%, #3a5056 100%) !important; }
.otl-hero-stage .wp-block-columns { align-items: center; gap: clamp(1.75rem, 4.5vw, 3.75rem); }
.otl-hero-stage .wp-block-column { min-width: 0; }
.otl-hero-stage .otl-sol-hero__kicker { font-size: .9rem; letter-spacing: .2em; margin: 0 0 .6rem; }
.otl-hero-stage .otl-sol-hero__title { max-width: 26ch; text-wrap: balance; font-size: clamp(1.65rem, 1rem + 1.95vw, 2.5rem); overflow-wrap: normal; word-break: normal; hyphens: manual; }
.otl-hero-stage .otl-sol-hero__intro { max-width: 52ch; }

/* Hero visual authored as a self-contained SVG asset (e.g. Orditach digiCentral
   dashboard). Referenced via <img> so its internal CSS animations run and its
   IDs stay scoped. The SVG carries its own light card + shadow. */
.otl-hero-svg { width: 100%; max-width: 600px; margin-inline: auto; }
.otl-hero-svg img { display: block; width: 100%; height: auto; }

/* --- Zonder/Met panels (otl-ps): matched pain/benefit pair. The list marks
   carry the meaning: ✕ = what the manual situation costs, ✓ = what the product
   removes. The "met" panel takes the product accent (falls back to orange). --- */
.otl-ps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: var(--wp--preset--spacing--40); }
@media (max-width: 767px) { .otl-ps { grid-template-columns: 1fr; } }
.otl-ps__panel { border-radius: 14px; padding: clamp(1.4rem, 2.5vw, 2rem); }
.otl-ps__panel--zonder { background: #eef2f3; border: 1px solid #e2e9eb; }
.otl-ps__panel--met { background: #fff; box-shadow: var(--otl-shadow); border-top: 4px solid var(--otl-accent, var(--wp--preset--color--primary)); }
.otl-ps__h { margin: 0 0 .9rem; font-size: 1.2rem; }
.otl-ps__panel--zonder .otl-ps__h { color: #5a6b70; }
.otl-ps__panel--met .otl-ps__h { color: var(--otl-accent, var(--wp--preset--color--primary)); }
.otl-ps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.otl-ps__list li { position: relative; padding-left: 1.7rem; line-height: 1.5; }
.otl-ps__list--x li { color: #5a6b70; }
.otl-ps__list--x li::before { content: "\2715"; position: absolute; left: 0; top: .05em; font-weight: 900; color: #9aa9ad; }
.otl-ps__list--check li { color: #33454b; }
.otl-ps__list--check li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--wp--preset--color--lime); -webkit-text-stroke: .8px var(--wp--preset--color--lime); }

/* --- Feature list (otl-feat): green check-badge + coloured heading + body per
   row. Accent = the darker lime (#6fa628) so a white check stays legible and the
   headings meet contrast on white. Used on the Digicentral landing page. --- */
.otl-feat { list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1.1rem, 2.5vw, 1.6rem); }
.otl-feat__item { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: start; }
.otl-feat__mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: 50%; background: #6fa628; color: #fff; font-weight: 900; font-size: 1.05rem; line-height: 1; box-shadow: 0 2px 6px rgba(111,166,40,.35); }
.otl-feat__body { min-width: 0; }
.otl-feat__h { margin: .15rem 0 .3rem; font-size: 1.15rem; color: #6fa628; }
.otl-feat__p { margin: 0; color: #33454b; line-height: 1.55; }

/* Compacte hero in het groen van de opsomming (otl_hero variant 'green'). Loopt van
   het bullet-groen naar een dieper groen, zodat de witte titel en tekst leesbaar
   blijven. Overschrijft de slate-achtergrond die de hero anders zou krijgen. */
.otl-hero--green { background: linear-gradient(155deg, #6fa628 0%, #47701a 100%) !important; }

/* Orditrack live console (faux dashboard, demo data) */
.otl-otc { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.otl-otc__frame { position: relative; aspect-ratio: 420 / 320; border-radius: 20px; overflow: hidden; background: #18272c; box-shadow: 0 36px 72px -28px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .1); }
.otl-otc__map { display: block; width: 100%; height: 100%; }
@keyframes otcDraw { to { stroke-dashoffset: 0; } }
.otl-otc__route { stroke-dasharray: 1; stroke-dashoffset: 1; animation: otcDraw 1.9s ease .3s forwards; }
@keyframes otcPulse { 0% { transform: scale(.55); opacity: .6; } 70% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }
.otl-otc__pulse { transform-box: fill-box; transform-origin: center; animation: otcPulse 2.6s ease-out infinite; }

/* On-map data tags */
.otl-otc__tag { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; white-space: nowrap; font-weight: 800; font-size: clamp(.6rem, 1.5vw, .72rem); letter-spacing: .01em; padding: .28em .6em; border-radius: 999px; background: rgba(13, 23, 27, .84); color: #fff; border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.otl-otc__tag--speed { left: 78%; top: 64%; color: #d7f1ff; border-color: rgba(0, 174, 236, .55); }
.otl-otc__tag--stop { left: 62%; top: 13%; color: #ffd8b6; border-color: rgba(241, 110, 0, .5); }

/* Floating insight chips */
.otl-otc__chip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: .1rem; padding: .55rem .8rem; border-radius: 13px; background: rgba(20, 34, 39, .86); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.otl-otc__chip--cyan { top: -.6rem; left: -.6rem; border-left: 3px solid #00aeec; }
.otl-otc__chip--orange { bottom: 7%; right: -.7rem; border-left: 3px solid #f16e00; }
.otl-otc__chipk { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: rgba(255, 255, 255, .62); }
.otl-otc__chipv { font-size: 1.02rem; font-weight: 800; color: #fff; line-height: 1.05; }

/* Vehicle detail panel (docked) */
.otl-otc__panel { position: absolute; left: 4.5%; bottom: 5%; z-index: 2; width: clamp(168px, 45%, 232px); padding: .85rem .95rem; border-radius: 14px; background: rgba(15, 26, 30, .82); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; }
.otl-otc__phead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.otl-otc__veh { font-weight: 800; font-size: .92rem; letter-spacing: .01em; }
.otl-otc__status { display: inline-flex; align-items: center; gap: .35em; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #aede7e; }
.otl-otc__status i { width: 7px; height: 7px; border-radius: 50%; background: #6fa628; box-shadow: 0 0 0 3px rgba(111, 166, 40, .28); }
.otl-otc__loc { display: flex; align-items: center; gap: .3em; margin-top: .35rem; font-size: .76rem; color: rgba(255, 255, 255, .82); }
.otl-otc__loc svg { width: 13px; height: 13px; fill: #37c4f5; flex: none; }
.otl-otc__big { margin-top: .6rem; display: flex; flex-direction: column; line-height: 1; }
.otl-otc__bignum { font-size: clamp(1.5rem, 4.6vw, 1.95rem); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.otl-otc__biglbl { margin-top: .2rem; font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: #37c4f5; }
.otl-otc__mini { display: flex; gap: .9rem; margin-top: .7rem; padding-top: .65rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.otl-otc__mini b { display: block; font-size: .82rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.otl-otc__mini span { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .55); }

@media (prefers-reduced-motion: reduce) {
	.otl-otc__route { animation: none; stroke-dashoffset: 0; }
	.otl-otc__pulse { animation: none; opacity: .32; }
}

/* Stacked (≤781px): simplify to map + vehicle + one rijtijd-panel. */
@media (max-width: 781px) {
	.otl-hero-stage { padding-block: clamp(2rem, 7vw, 3rem) !important; }
	.otl-hero-stage .wp-block-columns { gap: clamp(1.5rem, 6vw, 2.25rem); }
	.otl-hero-stage .otl-sol-hero__intro { margin-bottom: 1.25rem; }
	.otl-otc { max-width: 420px; }
	.otl-otc__chip, .otl-otc__tag--stop { display: none; }
	.otl-otc__mini { display: none; }
	.otl-otc__panel { width: clamp(168px, 52%, 220px); }
}

/* --- Orditach compliance console (countdown ring + automatic-download feed).
   Same slate frame as the Orditrack console for product-family consistency;
   orange = brand/active, green = done/compliant. --- */
.otl-ota { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.otl-ota__frame { position: relative; aspect-ratio: 420 / 320; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 120% at 78% 22%, #213339 0%, #18272c 62%); box-shadow: 0 36px 72px -28px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .1); }

/* Countdown ring (top-right) */
.otl-ota__ring { position: absolute; top: 7%; right: 4%; width: 42%; height: auto; }
.otl-ota__ringtrack { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 13; }
.otl-ota__ringprog { fill: none; stroke: #f16e00; stroke-width: 13; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: otaRing 1.7s cubic-bezier(.5, 0, .2, 1) .35s forwards; }
@keyframes otaRing { to { stroke-dashoffset: 60; } }
.otl-ota__ringnum { fill: #fff; font-weight: 800; font-size: 52px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.otl-ota__ringunit { fill: rgba(255, 255, 255, .72); font-weight: 800; font-size: 15px; letter-spacing: .18em; text-anchor: middle; }
.otl-ota__ringsub { fill: #ff9a4d; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; text-anchor: middle; }
.otl-ota__ringtag { position: absolute; top: 3.5%; right: 4%; width: 42%; text-align: center; font-size: clamp(.56rem, 1.4vw, .66rem); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: rgba(255, 255, 255, .6); }

/* Automatic-download feed (docked bottom-left) */
.otl-ota__feed { position: absolute; left: 4%; bottom: 5.5%; z-index: 2; width: clamp(184px, 50%, 250px); padding: .7rem .8rem .8rem; border-radius: 14px; background: rgba(15, 26, 30, .84); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; }
.otl-ota__feedhead { display: flex; align-items: center; gap: .45em; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .66); margin-bottom: .5rem; }
.otl-ota__feedhead i { width: 7px; height: 7px; border-radius: 50%; background: #f16e00; box-shadow: 0 0 0 3px rgba(241, 110, 0, .26); animation: otaBlink 2.4s ease-in-out infinite; }
@keyframes otaBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.otl-ota__feedtime { margin-left: auto; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.otl-ota__row { display: flex; align-items: center; gap: .55rem; padding: .32rem 0; }
.otl-ota__row + .otl-ota__row { border-top: 1px solid rgba(255, 255, 255, .08); }
.otl-ota__ico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .07); }
.otl-ota__ico svg { width: 15px; height: 15px; fill: rgba(255, 255, 255, .8); }
.otl-ota__rmeta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.otl-ota__rmeta b { font-size: .78rem; font-weight: 800; }
.otl-ota__rmeta span { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .5); }
.otl-ota__rstat { margin-left: auto; display: inline-flex; align-items: center; gap: .3em; font-size: .64rem; font-weight: 800; color: #aede7e; text-transform: uppercase; letter-spacing: .05em; }
.otl-ota__chk { width: 14px; height: 14px; fill: #6fa628; }
.otl-ota__row--live .otl-ota__rstat { color: #ffb070; }
.otl-ota__bar { display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.otl-ota__bar i { display: block; height: 100%; width: 72%; border-radius: 3px; background: #f16e00; transform-origin: left; animation: otaFill 1.7s cubic-bezier(.5, 0, .2, 1) .4s both; }
@keyframes otaFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Reassurance chips */
.otl-ota__chip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: .1rem; padding: .55rem .8rem; border-radius: 13px; background: rgba(20, 34, 39, .86); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.otl-ota__chip--ok { top: -.6rem; left: -.6rem; border-left: 3px solid #6fa628; }
.otl-ota__chip--arch { bottom: 7%; right: -.7rem; border-left: 3px solid #f16e00; }
.otl-ota__chipk { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: rgba(255, 255, 255, .62); }
.otl-ota__chipv { font-size: 1.02rem; font-weight: 800; color: #fff; line-height: 1.05; }

@media (prefers-reduced-motion: reduce) {
	.otl-ota__ringprog { animation: none; stroke-dashoffset: 60; }
	.otl-ota__bar i { animation: none; }
	.otl-ota__feedhead i { animation: none; }
}

/* Stacked (≤781px): ring + feed only; drop the floating chips. */
@media (max-width: 781px) {
	.otl-ota { max-width: 420px; }
	.otl-ota__chip { display: none; }
	.otl-ota__feed { width: clamp(196px, 60%, 260px); }
}

/* --- Ordifleet cost console: cost-per-km figure + spend breakdown (top-right) and
   a docked due-dates feed (bottom-left). Lime = brand/active. --- */
.otl-ofl, .otl-ose { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.otl-ofl__frame, .otl-ose__frame { position: relative; aspect-ratio: 420 / 320; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 120% at 78% 22%, #213339 0%, #18272c 62%); box-shadow: 0 36px 72px -28px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .1); }

.otl-ofl__cost { position: absolute; top: 8%; right: 5%; width: 48%; color: #fff; text-align: right; }
.otl-ofl__costlbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 800; color: rgba(255, 255, 255, .6); }
.otl-ofl__costrow { display: flex; align-items: baseline; justify-content: flex-end; gap: .15em; margin-top: .15rem; }
.otl-ofl__costnum { font-size: clamp(1.7rem, 5.2vw, 2.35rem); font-weight: 800; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.otl-ofl__costunit { font-size: .95rem; font-weight: 800; color: rgba(255, 255, 255, .65); }
.otl-ofl__trend { display: flex; align-items: center; justify-content: flex-end; gap: .25em; margin-top: .2rem; font-size: .72rem; font-weight: 800; color: #9bd45f; }
.otl-ofl__trend svg { width: 13px; height: 13px; fill: #9bd45f; }
.otl-ofl__trend span { color: rgba(255, 255, 255, .55); font-weight: 700; }
.otl-ofl__bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; margin-top: .7rem; background: rgba(255, 255, 255, .08); }
.otl-ofl__seg { display: block; height: 100%; }
.otl-ofl__seg--fuel { background: #6fa628; } .otl-ofl__seg--maint { background: #00aeec; } .otl-ofl__seg--ins { background: #f16e00; } .otl-ofl__seg--other { background: #6b8088; }
.otl-ofl__legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .15rem .6rem; margin-top: .5rem; }
.otl-ofl__lg { position: relative; font-size: .58rem; font-weight: 700; color: rgba(255, 255, 255, .66); padding-left: .85em; }
.otl-ofl__lg::before { content: ""; position: absolute; left: 0; top: .32em; width: 7px; height: 7px; border-radius: 2px; }
.otl-ofl__lg--fuel::before { background: #6fa628; } .otl-ofl__lg--maint::before { background: #00aeec; } .otl-ofl__lg--ins::before { background: #f16e00; } .otl-ofl__lg--other::before { background: #6b8088; }

.otl-ofl__feed { position: absolute; left: 4%; bottom: 5.5%; z-index: 2; width: clamp(176px, 46%, 232px); padding: .7rem .8rem .75rem; border-radius: 14px; background: rgba(15, 26, 30, .84); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; }
.otl-ofl__feedhead { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .66); margin-bottom: .5rem; }
.otl-ofl__row { display: flex; align-items: center; gap: .55rem; padding: .34rem 0; }
.otl-ofl__row + .otl-ofl__row { border-top: 1px solid rgba(255, 255, 255, .08); }
.otl-ofl__ico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(111, 166, 40, .16); }
.otl-ofl__ico svg { width: 15px; height: 15px; fill: #9bd45f; }
.otl-ofl__rmeta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.otl-ofl__rmeta b { font-size: .76rem; font-weight: 800; }
.otl-ofl__rmeta span { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .5); }
.otl-ofl__rstat { margin-left: auto; font-size: .68rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

.otl-ofl__chip, .otl-ose__chip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: .1rem; padding: .55rem .8rem; border-radius: 13px; background: rgba(20, 34, 39, .86); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.otl-ofl__chip--lime { top: -.6rem; left: -.6rem; border-left: 3px solid #6fa628; }
.otl-ofl__chip--slate, .otl-ose__chip--slate { bottom: 7%; right: -.7rem; border-left: 3px solid #6b8088; }
.otl-ofl__chipk, .otl-ose__chipk { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: rgba(255, 255, 255, .62); }
.otl-ofl__chipv, .otl-ose__chipv { font-size: 1.02rem; font-weight: 800; color: #fff; line-height: 1.05; }

/* --- Ordisense readout console: a driver card being read (scan sweep + read badge,
   top-right) and a docked brand-independent compatibility panel (bottom-left).
   Magenta = brand. --- */
.otl-ose__card { position: absolute; top: 12%; right: 6%; width: 42%; aspect-ratio: 1.585; border-radius: 11px; overflow: hidden; background: linear-gradient(150deg, #2a3940 0%, #1d2a30 100%); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .7); }
.otl-ose__chipsq { position: absolute; top: 16%; left: 9%; width: 20%; aspect-ratio: 1.3; border-radius: 4px; background: linear-gradient(135deg, #e9c46a, #c98f2e); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.otl-ose__chipsq::after { content: ""; position: absolute; inset: 26% 14%; border: 1px solid rgba(0, 0, 0, .25); border-radius: 1px; }
.otl-ose__band { position: absolute; top: 15%; right: 8%; white-space: nowrap; font-size: clamp(.44rem, 1.2vw, .54rem); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #ff7fb0; text-align: right; line-height: 1.1; }
.otl-ose__line { position: absolute; left: 9%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.otl-ose__line--a { bottom: 30%; width: 56%; } .otl-ose__line--b { bottom: 18%; width: 38%; }
.otl-ose__scan { position: absolute; top: 0; bottom: 0; width: 36%; background: linear-gradient(90deg, transparent, rgba(189, 26, 103, .55), rgba(255, 122, 176, .8), transparent); mix-blend-mode: screen; animation: oseScan 2.6s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes oseScan { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(320%); } }
.otl-ose__read { position: absolute; bottom: 8%; right: 7%; display: inline-flex; align-items: center; gap: .25em; padding: .18em .5em; border-radius: 999px; background: rgba(8, 26, 21, .82); border: 1px solid rgba(111, 166, 40, .5); font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #aede7e; }
.otl-ose__read .otl-ose__chk { width: 12px; height: 12px; fill: #6fa628; }

.otl-ose__panel { position: absolute; left: 4.5%; bottom: 6%; z-index: 2; width: clamp(180px, 48%, 244px); padding: .8rem .9rem; border-radius: 14px; background: rgba(15, 26, 30, .84); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; }
.otl-ose__phead { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: #ff7fb0; margin-bottom: .5rem; }
.otl-ose__crow { display: flex; align-items: center; gap: .45rem; padding: .26rem 0; font-size: .8rem; font-weight: 700; }
.otl-ose__crow + .otl-ose__crow { border-top: 1px solid rgba(255, 255, 255, .08); }
.otl-ose__crow .otl-ose__chk { width: 15px; height: 15px; fill: #6fa628; flex: none; }
.otl-ose__gen { margin-top: .55rem; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .64rem; font-weight: 800; letter-spacing: .06em; color: rgba(255, 255, 255, .62); }
.otl-ose__chip--mag { top: -.6rem; left: -.6rem; border-left: 3px solid #bd1a67; }

@media (prefers-reduced-motion: reduce) {
	.otl-ose__scan { animation: none; opacity: .5; transform: translateX(150%); }
}

/* Stacked (≤781px): main element + docked card only; drop the floating chips. */
@media (max-width: 781px) {
	.otl-ofl, .otl-ose { max-width: 420px; }
	.otl-ofl__chip, .otl-ose__chip { display: none; }
	.otl-ofl__feed { width: clamp(186px, 56%, 250px); }
	.otl-ose__panel { width: clamp(180px, 56%, 240px); }
}

/* --- No "white bars" between full-bleed bands, site-wide. The flow layout adds a
   block-gap margin before every block; between two full-bleed (alignfull) bands that
   shows as a white sliver. Zero it so colored bands butt together everywhere.
   Constrained text keeps its normal rhythm — only alignfull-to-alignfull is zeroed. --- */
.alignfull + .alignfull { margin-top: 0 !important; }
/* Gaps around <main>: the header→main sliver and the main→footer sliver (the footer
   template part is a sibling of <main>, so it isn't covered by the rule above). */
.wp-site-blocks > main,
.wp-site-blocks > main + .wp-block-template-part { margin-top: 0 !important; }

/* --- Solution product pages: also tighten the heavy sections' vertical padding.
   Scoped with :has() to the post content that opens with a coded stage hero. --- */
.wp-block-post-content:has(> .otl-hero-stage) > [style*="spacing--60"] {
	padding-top: clamp(2.75rem, 4.3vw, 3.5rem) !important;
	padding-bottom: clamp(2.75rem, 4.3vw, 3.5rem) !important;
}
.wp-block-post-content:has(> .otl-hero-stage) > .otl-brandmark { padding-block: clamp(1.75rem, 3.2vw, 2.4rem); }

/* Module sections: accent kicker, check-bullets, framed image. */
.otl-sol-mod__kicker { text-transform: uppercase; letter-spacing: .16em; font-weight: 800; font-size: .72rem; color: var(--otl-accent); margin: 0 0 .35rem; }
.otl-sol-mod .otl-sol-mod__h { margin: 0 0 .9rem; font-weight: 800; letter-spacing: -.01em; }
.otl-sol-mod__list { list-style: none; padding-left: 0; }
.otl-sol-mod__list li { position: relative; padding-left: 1.9em; margin-bottom: .5em; line-height: 1.5; }
.otl-sol-mod__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--otl-accent); font-weight: 900; }
.otl-sol-mod__img img { border-radius: 12px; box-shadow: 0 18px 40px -22px rgba(16,24,40,.5); display: block; width: 100%; height: auto; }
/* Transparent product shots (Ordisense devices): no card — float with a shadow that
   follows the device silhouette, at natural size, centred. */
.otl-sol-mod__img--device { text-align: center; }
.otl-sol-mod__img--device img { width: auto; max-width: 100%; max-height: 300px; margin-inline: auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 16px 18px rgba(16,24,40,.22)); }
/* Lead screenshot under the hero on the polished info pages — capped width, centred. */
.otl-lead-img { max-width: 760px; margin-inline: auto; }
.otl-lead-img.otl-sol-mod__img--device { max-width: 420px; }
/* Video button takes the product accent (outline). */
.otl-sol-mod .is-style-outline > .wp-block-button__link { border-color: var(--otl-accent); color: var(--otl-accent); }
.otl-sol-mod .is-style-outline > .wp-block-button__link:hover { background: var(--otl-accent); border-color: var(--otl-accent); color: #fff; }

/* Compare table ticks take the product accent. */
.otl-sol .otl-compare .otl-yes { color: var(--otl-accent); -webkit-text-stroke-color: var(--otl-accent); }
.otl-sol .otl-compare thead th { border-bottom: 2px solid var(--otl-accent); }

/* ----------------------------------------------------------------------------
   Tier matrix ([otl_tiers]) — actionable package comparison. Reads like a
   coverage map: which packages "ping" each capability. One bold spot: the
   recommended column lifts on a white card; everything else stays quiet.
---------------------------------------------------------------------------- */
.otl-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.otl-tiers { --ping: var(--otl-accent); position: relative; padding: clamp(2.6rem, 6vw, 4.5rem) clamp(1rem, 5vw, 3rem); background-color: #eef2f3; background-image: radial-gradient(circle, rgba(71,95,101,.10) 1px, transparent 1.4px); background-size: 22px 22px; }
.otl-tiers__head { max-width: 760px; margin: 0 auto clamp(1.8rem, 4vw, 2.8rem); text-align: center; }
.otl-tiers__eyebrow { text-transform: uppercase; letter-spacing: .18em; font-weight: 800; font-size: .78rem; color: var(--otl-accent); margin: 0 0 .6rem; }
.otl-tiers__title { font-weight: 800; letter-spacing: -.015em; line-height: 1.12; font-size: clamp(1.55rem, 3.4vw, 2.3rem); margin: 0 0 .7rem; color: #1f3338; }
.otl-tiers__intro { margin: 0; color: #475f65; font-size: 1.05rem; line-height: 1.55; }

/* padding-top leaves room for the recommended column's badge, which the scroll
   container would otherwise clip (overflow-x:auto forces overflow-y to clip). */
.otl-tiers__scroll { max-width: 1080px; margin-inline: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; padding-top: 1.7rem; }
.otl-tiers__scroll:focus-visible { outline: 3px solid var(--otl-accent); outline-offset: 3px; }
.otl-tiers__table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; }
.otl-tiers__caption { caption-side: bottom; margin-top: 1rem; font-size: .85rem; color: #6a7f85; }

/* Sticky feature column so labels stay visible while the tiers scroll. */
.otl-tiers__corner, .otl-tiers__feat { position: sticky; left: 0; z-index: 2; background: #eef2f3; text-align: left; }
.otl-tiers__corner { border-bottom: 1px solid #d7e2e7; }
.otl-tiers__feat { font-weight: 600; color: #2b3f44; font-size: .96rem; padding: .85rem 1.4rem .85rem .25rem; border-bottom: 1px solid #e2eaed; }

/* Tier column headers: ideal-for eyebrow, name, prefilled quote button. */
.otl-tiers__tier { vertical-align: bottom; text-align: center; padding: 1.2rem 1rem 1.4rem; border-bottom: 1px solid #d7e2e7; }
.otl-tiers__ideal { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 700; color: #6a7f85; margin-bottom: .45rem; }
.otl-tiers__name { display: block; font-weight: 800; font-size: 1.08rem; color: #1f3338; line-height: 1.2; margin-bottom: .9rem; }
.otl-tiers__cta { display: inline-block; font-weight: 700; font-size: .9rem; line-height: 1; padding: .65rem 1.05rem; border-radius: 999px; text-decoration: none; color: var(--otl-accent); border: 1.5px solid var(--otl-accent); background: #fff; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.otl-tiers__cta:hover, .otl-tiers__cta:focus-visible { background: var(--otl-accent); color: #fff; transform: translateY(-1px); }

/* Cells + the GPS-ping "included" marker / muted "not included" dash. */
.otl-tiers__cell { text-align: center; padding: .85rem 1rem; border-bottom: 1px solid #e2eaed; }
.otl-tiers__ping { box-sizing: border-box; display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--ping); }
/* Manual = half-filled disc (echoes the original fa-adjust): outlined ring, left half filled. */
.otl-tiers__ping.is-manual { border: 2px solid var(--otl-accent); background: linear-gradient(90deg, var(--otl-accent) 0 50%, transparent 50% 100%); }
.otl-tiers__off { display: inline-block; width: 18px; height: 3px; border-radius: 3px; background: #c4ced2; }

/* Marker with a hover/focus tooltip explaining how (manual vs automatic). */
.otl-tiers__mk { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: .45rem; margin: -.45rem; border-radius: 8px; cursor: help; }
.otl-tiers__mk:focus-visible { outline: 2px solid var(--otl-accent); outline-offset: 0; }
.otl-tiers__tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; max-width: 210px; background: #1f3338; color: #fff; font-size: .8rem; line-height: 1.4; text-align: left; padding: .55rem .7rem; border-radius: 9px; box-shadow: 0 10px 28px rgba(16,24,40,.28); opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 6; pointer-events: none; font-weight: 500; }
.otl-tiers__tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1f3338; }
.otl-tiers__mk:hover .otl-tiers__tip, .otl-tiers__mk:focus .otl-tiers__tip { opacity: 1; visibility: visible; transform: translateX(-50%); }

/* Legend: explains the marker shapes. */
.otl-tiers__legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.4rem; list-style: none; margin: 0 auto clamp(1.4rem, 3vw, 2rem); padding: 0; max-width: 1080px; }
.otl-tiers__legend li { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: #475f65; font-weight: 600; }
.otl-tiers__legend-hint { font-weight: 500 !important; font-style: italic; color: #6a7f85 !important; }

/* The recommended column: a white card that lifts out of the tinted map. */
.otl-tiers__tier.is-rec { position: relative; background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 -2px 0 0 var(--otl-accent) inset, -14px 0 24px -22px rgba(16,24,40,.45), 14px 0 24px -22px rgba(16,24,40,.45); }
.otl-tiers__cell.is-rec { background: #fff; }
.otl-tiers__table tbody tr:last-child .otl-tiers__cell.is-rec { border-radius: 0 0 14px 14px; box-shadow: -14px 0 24px -22px rgba(16,24,40,.45), 14px 0 24px -22px rgba(16,24,40,.45); }
.otl-tiers__badge { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); white-space: nowrap; text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; font-weight: 800; color: #fff; background: var(--otl-accent); padding: .3rem .7rem; border-radius: 999px; }
.otl-tiers__tier.is-rec .otl-tiers__cta { background: var(--otl-accent); color: #fff; }
.otl-tiers__tier.is-rec .otl-tiers__cta:hover, .otl-tiers__tier.is-rec .otl-tiers__cta:focus-visible { filter: brightness(1.08); }

.otl-tiers__caption { display: none; }
@media (max-width: 760px) { .otl-tiers__caption { display: table-caption; } }
/* On desktop the table fits without scrolling, so drop the clip and let tooltips escape
   upward. Below this the container scrolls horizontally; markers fall back to title= + tap. */
@media (min-width: 821px) { .otl-tiers__scroll { overflow: visible; } }
@media (prefers-reduced-motion: reduce) { .otl-tiers__cta, .otl-tiers__tip { transition: none; } }

/* ============================================================================
   "Te combineren met" strip onder de pakkettabel — de lightorange-band van de
   oude productiesite, hertekend: een zacht accent-getint paneel met witte
   productkaarten (afbeelding + naam + één regel uitleg).
   ========================================================================== */
.otl-combine { max-width: 1080px; margin-inline: auto; background: color-mix(in srgb, var(--otl-accent) 9%, #fff); border: 1px solid color-mix(in srgb, var(--otl-accent) 24%, #fff); border-radius: 16px; padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1rem, 3vw, 1.7rem); }
.otl-combine__lead { margin: 0 0 .9rem; text-align: center; font-weight: 800; letter-spacing: -.01em; font-size: 1.08rem; color: #1f3338; }
.otl-combine__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.otl-combine__card { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid #eef1f2; border-radius: 14px; box-shadow: var(--otl-shadow); padding: .9rem 1.1rem; text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.otl-combine__card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--otl-accent) 55%, #fff); box-shadow: 0 4px 8px rgba(16,24,40,.08), 0 14px 32px rgba(16,24,40,.10); }
.otl-combine__card:focus-visible { outline: 3px solid var(--otl-accent); outline-offset: 2px; }
.otl-combine__card img { height: 56px; width: auto; flex: 0 0 auto; }
.otl-combine__txt { display: block; min-width: 0; }
.otl-combine__txt strong { display: block; font-size: 1.05rem; color: #1f3338; transition: color .15s ease; }
.otl-combine__card:hover .otl-combine__txt strong { color: var(--otl-accent); }
.otl-combine__txt span { display: block; font-size: .9rem; line-height: 1.4; color: #5b6f75; }
.otl-combine__arrow { margin-left: auto; flex: 0 0 auto; font-size: 1.15rem; color: var(--otl-accent); transition: transform .15s ease; }
.otl-combine__card:hover .otl-combine__arrow { transform: translateX(3px); }
@media (max-width: 640px) { .otl-combine__cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .otl-combine__card, .otl-combine__arrow, .otl-combine__txt strong { transition: none; } .otl-combine__card:hover { transform: none; } }

/* ============================================================================
   Support hub (/nl/support) — service-desk triage board + live status chip.
   ========================================================================== */
.otl-support__eyebrow { text-transform: uppercase; letter-spacing: .18em; font-weight: 800; font-size: .8rem; color: var(--wp--preset--color--primary); margin: 0 0 .7rem; }
/* Live "staffed now" status chip in the slate hero. */
.otl-support__status { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.5rem; padding: .5rem 1rem; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); font-size: .9rem; font-weight: 600; color: #fff; }
.otl-support__dot { width: .62rem; height: .62rem; border-radius: 50%; background: #9aa7ab; flex: 0 0 auto; }
.otl-support__status.is-open .otl-support__dot { background: #3fd39a; animation: otl-support-pulse 2.4s infinite; }
.otl-support__status.is-closed .otl-support__dot { background: #e2a23b; }
@keyframes otl-support-pulse { 0% { box-shadow: 0 0 0 0 rgba(63,211,154,.55); } 70% { box-shadow: 0 0 0 8px rgba(63,211,154,0); } 100% { box-shadow: 0 0 0 0 rgba(63,211,154,0); } }

/* Triage board */
.otl-support__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem); margin-top: 1.7rem; }
.otl-support__card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e7edee; border-radius: 16px; padding: 1.7rem 1.5rem 1.5rem; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.otl-support__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--wp--preset--color--primary); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.otl-support__card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -20px rgba(16,24,40,.4); border-color: #dfe7e8; }
.otl-support__card:hover::before { transform: scaleX(1); }
.otl-support__tag { align-self: flex-start; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; font-weight: 800; color: #5b6b70; background: #eef2f3; padding: .28rem .6rem; border-radius: 999px; margin-bottom: 1.1rem; }
.otl-support__icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: #eef2f3; color: var(--wp--preset--color--slate); margin-bottom: 1rem; transition: background .16s ease, color .16s ease; }
.otl-support__icon svg { width: 26px; height: 26px; }
.otl-support__card:hover .otl-support__icon { background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, #fff); color: var(--wp--preset--color--primary); }
.otl-support__card h3 { margin: 0 0 .4rem; font-size: 1.18rem; line-height: 1.25; }
.otl-support__card > p { margin: 0 0 1.2rem; color: #5b6b70; font-size: .95rem; line-height: 1.5; }
.otl-support__detail { margin-top: auto; display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; }
.otl-support__detail a, .otl-support__route { color: var(--wp--preset--color--slate); font-weight: 700; text-decoration: none; }
.otl-support__detail a:hover, .otl-support__route:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }
.otl-support__route { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; }
.otl-support__route svg { width: 16px; height: 16px; }
.otl-support__more { display: inline-block; margin-top: 1rem; font-weight: 700; font-size: .9rem; color: var(--wp--preset--color--primary); text-decoration: none; }
.otl-support__more:hover { text-decoration: underline; }

/* Secondary "ook handig" links */
.otl-support__links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.otl-support__chip { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 999px; background: #fff; border: 1px solid #dfe7e8; color: var(--wp--preset--color--slate); font-weight: 600; font-size: .92rem; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.otl-support__chip:hover, .otl-support__chip:focus-visible { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }

@media (max-width: 880px) { .otl-support__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .otl-support__status.is-open .otl-support__dot { animation: none; } .otl-support__card, .otl-support__card::before, .otl-support__icon { transition: none; } }

/* ============================================================================
   Contact (/nl/support/contact) — routed contact rows + HQ "tracked location".
   ========================================================================== */
.otl-contact { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.otl-contact__label { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 800; color: #5b6b70; margin: 0 0 1.1rem; }
.otl-contact__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--wp--preset--color--slate); margin: 0 0 1.4rem; }
.otl-contact__route { display: flex; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid #e7edee; }
.otl-contact__route:first-of-type { border-top: 0; padding-top: 0; }
.otl-contact__ricon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #eef2f3; color: var(--wp--preset--color--slate); display: grid; place-items: center; }
.otl-contact__ricon svg { width: 22px; height: 22px; }
.otl-contact__rbody h3 { margin: .15rem 0 .25rem; font-size: 1.05rem; }
.otl-contact__rbody p { margin: 0 0 .35rem; color: #5b6b70; font-size: .9rem; line-height: 1.45; }
.otl-contact__rbody a { color: var(--wp--preset--color--slate); font-weight: 700; text-decoration: none; }
.otl-contact__rbody a:hover, .otl-contact__rbody a:focus-visible { color: var(--wp--preset--color--primary); text-decoration: underline; }
.otl-contact__tel { color: #5b6b70 !important; font-weight: 600 !important; font-size: .9rem; }
.otl-contact__hours { margin-top: 1.5rem; font-size: .92rem; color: #5b6b70; }
.otl-contact__hours strong { color: var(--wp--preset--color--slate); }
.otl-contact__hubline { margin-top: .9rem; font-size: .92rem; }
.otl-contact__hubline a { color: var(--wp--preset--color--primary); font-weight: 700; text-decoration: none; }
.otl-contact__hubline a:hover { text-decoration: underline; }

/* HQ "tracking-screen" card */
.otl-contact__hq { position: relative; border-radius: 18px; overflow: hidden; color: #fff; padding: 1.6rem 1.6rem 1.5rem; background: radial-gradient(120% 120% at 75% -10%, #3c5258 0%, var(--wp--preset--color--slate) 62%); }
.otl-contact__hqlabel { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; font-weight: 800; color: var(--wp--preset--color--primary); margin: 0 0 1rem; }
.otl-contact__map { position: relative; height: 184px; border-radius: 12px; overflow: hidden; background-color: #2b3d42; background-image: linear-gradient(transparent calc(100% - 1px), rgba(255,255,255,.06) calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), rgba(255,255,255,.06) calc(100% - 1px)); background-size: 30px 30px; }
.otl-contact__map--photo { display: block; background: none; }
.otl-contact__map--photo::before { display: none; }
.otl-contact__map--photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.otl-contact__map--photo:hover img, .otl-contact__map--photo:focus-visible img { transform: scale(1.04); }
.otl-contact__map::before { content: ""; position: absolute; inset: 0; background: linear-gradient(58deg, transparent 48.6%, rgba(255,255,255,.11) 48.6% 51.4%, transparent 51.4%), linear-gradient(-24deg, transparent 47.9%, rgba(255,255,255,.07) 47.9% 52.1%, transparent 52.1%); }
.otl-contact__pin { position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%); }
.otl-contact__pin i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--wp--preset--color--primary); box-shadow: 0 0 0 4px rgba(241,110,0,.25); position: relative; z-index: 2; }
.otl-contact__pin::before, .otl-contact__pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid rgba(241,110,0,.6); animation: otl-radar 2.8s infinite; }
.otl-contact__pin::after { animation-delay: 1.4s; }
@keyframes otl-radar { 0% { width: 14px; height: 14px; opacity: .7; } 100% { width: 130px; height: 130px; opacity: 0; } }
.otl-contact__coords { margin-top: 1.05rem; font-size: .84rem; letter-spacing: .05em; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.otl-contact__addr { margin: .45rem 0 1.2rem; font-size: 1.05rem; line-height: 1.45; }
.otl-contact__routebtn { display: inline-flex; align-items: center; gap: .5rem; border: 1.5px solid rgba(255,255,255,.55); color: #fff; font-weight: 700; text-decoration: none; padding: .6rem 1.1rem; border-radius: 10px; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.otl-contact__routebtn:hover, .otl-contact__routebtn:focus-visible { background: #fff; color: var(--wp--preset--color--slate); border-color: #fff; }
.otl-contact__routebtn svg { width: 16px; height: 16px; }

@media (max-width: 880px) { .otl-contact { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .otl-contact__pin::before, .otl-contact__pin::after { animation: none; width: 70px; height: 70px; opacity: .22; } }

/* ============================================================================
   Module screenshots: thumbnail + click-to-zoom lightbox (perf: tiny inline,
   large image loads only on click).
   ========================================================================== */
.otl-sol-mod__zoom { display: block; position: relative; cursor: zoom-in; border-radius: 12px; }
.otl-sol-mod__zoom:focus-visible { outline: 3px solid var(--otl-accent); outline-offset: 3px; }
.otl-sol-mod__zoomhint { position: absolute; right: .7rem; bottom: .7rem; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(31,51,56,.8); color: #fff; opacity: 0; transform: translateY(5px); transition: opacity .15s ease, transform .15s ease; pointer-events: none; }
.otl-sol-mod__zoomhint svg { width: 20px; height: 20px; }
.otl-sol-mod__zoom:hover .otl-sol-mod__zoomhint, .otl-sol-mod__zoom:focus-visible .otl-sol-mod__zoomhint { opacity: 1; transform: translateY(0); }

.otl-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(16,24,40,.85); }
.otl-lightbox.is-open { display: flex; }
.otl-lightbox__fig { margin: 0; max-width: min(1600px, 94vw); }
.otl-lightbox__fig img { display: block; width: auto; max-width: 100%; height: auto; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); background: #fff; }
.otl-lightbox__cap { margin-top: .7rem; color: rgba(255,255,255,.85); font-size: .9rem; text-align: center; }
.otl-lightbox__close { position: absolute; top: 1rem; right: 1.2rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background-color .15s ease; }
.otl-lightbox__close:hover, .otl-lightbox__close:focus-visible { background: rgba(255,255,255,.26); }
body.otl-noscroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .otl-sol-mod__zoomhint { transition: none; } }

/* ============================================================================
   Cookie consent banner (orditool-consent.php) — necessary + analytics/marketing.
   ========================================================================== */
.otl-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; background: var(--wp--preset--color--slate); color: #fff; box-shadow: 0 -10px 30px -12px rgba(0,0,0,.5); }
.otl-consent[hidden] { display: none; }
.otl-consent__inner { max-width: 1160px; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.otl-consent__text { margin: 0; flex: 1 1 360px; font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.92); }
.otl-consent__text a { color: #fff; text-decoration: underline; }
.otl-consent__actions { display: flex; gap: .6rem; flex: 0 0 auto; margin-left: auto; }
.otl-consent__btn { font: inherit; font-weight: 700; font-size: .9rem; padding: .6rem 1.2rem; border-radius: 10px; cursor: pointer; border: 1.5px solid transparent; }
.otl-consent__btn--refuse { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.otl-consent__btn--refuse:hover, .otl-consent__btn--refuse:focus-visible { background: rgba(255,255,255,.12); }
.otl-consent__btn--accept { background: var(--wp--preset--color--primary); color: #fff; }
.otl-consent__btn--accept:hover, .otl-consent__btn--accept:focus-visible { filter: brightness(1.06); }
@media (max-width: 600px) { .otl-consent__actions { width: 100%; } .otl-consent__btn { flex: 1; } }

/* === Smart-tacho-2 deadline timeline (tacho-tijdlijn) === */
.otl-tt { max-width: 900px; margin-inline: auto; }
.otl-tt__svg { display: block; width: 100%; height: auto; font-family: inherit; }
.otl-tt__pulse { transform-box: fill-box; transform-origin: center; animation: ttPulse 2.6s ease-out infinite; }
@keyframes ttPulse { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2); } }
@media (prefers-reduced-motion: reduce) { .otl-tt__pulse { animation: none; opacity: 0; } }

/* === Smart tacho 2 compliance landing (tacho-tijdlijn) === */
.otl-tch-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .97rem; line-height: 1; padding: .9rem 1.5rem; border-radius: 11px; background: var(--wp--preset--color--primary, #f16e00); color: #fff; text-decoration: none; border: 2px solid transparent; transition: filter .15s ease, background-color .15s ease, color .15s ease; }
.otl-tch-btn:hover, .otl-tch-btn:focus-visible { filter: brightness(1.07); }
.otl-tch-btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.otl-tch-btn--ghost:hover, .otl-tch-btn--ghost:focus-visible { background: rgba(127,127,127,.12); filter: none; }
.otl-tch-h2 { font-weight: 800; letter-spacing: -.01em; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin: 0 0 1rem; color: var(--wp--preset--color--slate, #475f65); }
.otl-tch-lead { font-size: 1.05rem; line-height: 1.6; color: #4a5a60; max-width: 70ch; margin: 0 0 1.5rem; }

/* Hero */
.otl-tch-hero { background: radial-gradient(130% 150% at 82% -14%, #547077 0%, #475f65 52%, #3a5056 100%); color: #fff; padding-block: clamp(2.6rem, 5vw, 4.2rem); }
.otl-tch-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.2rem); align-items: center; }
.otl-tch-hero__eyebrow { display: inline-flex; align-items: center; gap: .55rem; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; font-weight: 800; color: #ffd9bf; margin: 0 0 1rem; }
.otl-tch-hero__dot { width: .6rem; height: .6rem; border-radius: 50%; background: #f16e00; box-shadow: 0 0 0 4px rgba(241,110,0,.25); }
.otl-tch-hero__h1 { font-weight: 800; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem); line-height: 1.07; letter-spacing: -.02em; margin: 0 0 1rem; max-width: 18ch; color: #fff; }
.otl-tch-hero__intro { font-size: clamp(1rem, .96rem + .3vw, 1.12rem); line-height: 1.6; color: rgba(255,255,255,.9); margin: 0 0 1rem; max-width: 54ch; }
.otl-tch-hero__sub { font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0 0 1.5rem; max-width: 54ch; }
.otl-tch-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.otl-tch-hero__meta { margin: 1.3rem 0 0; font-size: .82rem; color: rgba(255,255,255,.6); }
.otl-tch-hero__vis { min-width: 0; }
.otl-tch-hero__vis--tl .otl-tt { max-width: 100%; }
.otl-tch-hero__vis--tl .otl-tt__svg { filter: drop-shadow(0 22px 46px rgba(0,0,0,.32)); }
.otl-tch-vis__svg { display: block; width: 100%; height: auto; max-width: 560px; margin-inline: auto; font-family: inherit; }
.otl-tch-vis__blink { animation: tchBlink 1.6s ease-in-out infinite; }
@keyframes tchBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .otl-tch-vis__blink { animation: none; } }

/* Urgency bar */
.otl-tch-urg { background: #fff4ec; border-top: 1px solid #f6d9c4; border-bottom: 1px solid #f6d9c4; padding-block: 1.1rem; }
.otl-tch-urg__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; }
.otl-tch-urg__txt { margin: 0; color: #7a3d12; font-size: 1rem; line-height: 1.5; flex: 1 1 320px; }
.otl-tch-urg__txt strong { color: #c2410c; }

/* Section spacing */
.otl-tch-tl, .otl-tch-scope, .otl-tch-do, .otl-tch-help, .otl-tch-dev-sec, .otl-tch-why, .otl-tch-faq { padding-block: clamp(2.6rem, 4.5vw, 3.8rem); }

/* Timeline cards */
.otl-tch-tl__chart { margin: 0 0 2rem; }
.otl-tch-tl__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.otl-tch-tl__card { background: #fff; border: 1px solid #e7ece9; border-radius: 14px; padding: 1.3rem; }
.otl-tch-tl__card--next { border-color: #f6c9a8; box-shadow: 0 18px 40px -26px rgba(241,110,0,.5); }
.otl-tch-tl__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.otl-tch-tl__date { font-weight: 800; color: var(--wp--preset--color--slate, #475f65); font-size: .98rem; }
.otl-tch-badge { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .28rem .6rem; border-radius: 999px; white-space: nowrap; }
.otl-tch-badge--done { background: #e7f0d8; color: #4f8f1f; }
.otl-tch-badge--next { background: #f16e00; color: #fff; }
.otl-tch-tl__h { font-size: 1.05rem; font-weight: 700; margin: .2rem 0 .4rem; color: #27323a; }
.otl-tch-tl__p { font-size: .92rem; line-height: 1.5; color: #5a6b70; margin: 0; }

/* Scope */
.otl-tch-scope { background: var(--wp--preset--color--base-2, #f5f7f6); }
.otl-tch-scope__cap { font-weight: 700; color: #27323a; margin: 0 0 .6rem; }
.otl-tch-scope__list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .6rem; max-width: 62ch; }
.otl-tch-scope__list li { display: flex; gap: .7rem; align-items: flex-start; color: #3f5147; line-height: 1.45; }
.otl-tch-scope__ic { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #5ea226; color: #fff; display: grid; place-items: center; margin-top: .05rem; }
.otl-tch-scope__ic svg { width: .9rem; height: .9rem; }
.otl-tch-info { background: #fff; border-left: 3px solid #f16e00; border-radius: 0 12px 12px 0; padding: 1.2rem 1.4rem; max-width: 72ch; }
.otl-tch-info p { margin: 0; color: #4a5a60; line-height: 1.55; }
.otl-tch-info__cta { margin-top: 1rem; }

/* What to arrange */
.otl-tch-do__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.otl-tch-do__card { background: #fff; border: 1px solid #e7ece9; border-radius: 14px; padding: 1.4rem; }
.otl-tch-do__ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: #eef3f1; color: var(--wp--preset--color--slate, #475f65); margin-bottom: .9rem; }
.otl-tch-do__ic svg { width: 1.4rem; height: 1.4rem; }
.otl-tch-do__h { font-size: 1.02rem; font-weight: 700; margin: 0 0 .4rem; color: #27323a; }
.otl-tch-do__p { font-size: .9rem; line-height: 1.5; color: #5a6b70; margin: 0; }

/* Commercial help (slate) */
.otl-tch-help { background: var(--wp--preset--color--slate, #475f65); color: #fff; }
.otl-tch-help .otl-tch-h2 { color: #fff; }
.otl-tch-help .otl-tch-lead { color: rgba(255,255,255,.85); }
.otl-tch-help__sub { font-weight: 800; font-size: 1.15rem; margin: 1.6rem 0 1rem; color: #ffd9bf; }
.otl-tch-help__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.otl-tch-help__col { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 1.4rem; }
.otl-tch-help__h { font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; color: #fff; }
.otl-tch-help__p { font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.82); margin: 0 0 1rem; }
.otl-tch-help__link { font-weight: 700; color: #ff9d5c; text-decoration: none; }
.otl-tch-help__link:hover { text-decoration: underline; }

/* Ordisense devices */
.otl-tch-dev__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 0 0 1.6rem; }
.otl-tch-dev { margin: 0; background: #fff; border: 1px solid #e7ece9; border-radius: 14px; padding: 1.1rem .8rem; text-align: center; }
.otl-tch-dev img { display: block; width: 100%; height: 116px; object-fit: contain; margin: 0 auto .7rem; }
.otl-tch-dev figcaption { font-weight: 700; font-size: .86rem; color: #27323a; }

/* Why now */
.otl-tch-why { background: var(--wp--preset--color--base-2, #f5f7f6); }
.otl-tch-why__list { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .7rem; max-width: 62ch; }
.otl-tch-why__list li { position: relative; padding-left: 1.8rem; color: #3f5147; line-height: 1.5; }
.otl-tch-why__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .7rem; border-radius: 50%; background: #f16e00; }

/* FAQ */
.otl-tch-faq__in { max-width: 780px; margin-inline: auto; }
.otl-tch-faq__list { display: grid; gap: .7rem; }
.otl-tch-q { background: #fff; border: 1px solid #e7ece9; border-radius: 12px; overflow: hidden; }
.otl-tch-q summary { cursor: pointer; list-style: none; padding: 1.05rem 1.2rem; font-weight: 700; color: #27323a; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.otl-tch-q summary::-webkit-details-marker { display: none; }
.otl-tch-q__sign { position: relative; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
.otl-tch-q__sign::before, .otl-tch-q__sign::after { content: ""; position: absolute; background: #f16e00; border-radius: 2px; }
.otl-tch-q__sign::before { left: 0; top: .45rem; width: 1.1rem; height: .2rem; }
.otl-tch-q__sign::after { left: .45rem; top: 0; width: .2rem; height: 1.1rem; transition: transform .2s ease; }
.otl-tch-q[open] .otl-tch-q__sign::after { transform: scaleY(0); }
.otl-tch-q__a { padding: 0 1.2rem 1.15rem; }
.otl-tch-q__a p { margin: 0; color: #5a6b70; line-height: 1.6; }

/* Final CTA (orange) */
.otl-tch-final { background: var(--wp--preset--color--primary, #f16e00); color: #fff; padding-block: clamp(2.8rem, 5vw, 4rem); }
.otl-tch-final__in { text-align: center; max-width: 640px; margin-inline: auto; }
.otl-tch-final__h { font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); margin: 0 0 .8rem; color: #fff; }
.otl-tch-final__p { font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.92); margin: 0 0 1.5rem; }
.otl-tch-final__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.otl-tch-final .otl-tch-btn { background: #fff; color: var(--wp--preset--color--primary, #f16e00); }
.otl-tch-final .otl-tch-btn:hover { filter: none; background: rgba(255,255,255,.92); }
.otl-tch-final .otl-tch-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.otl-tch-final .otl-tch-btn--ghost:hover { background: rgba(255,255,255,.14); }

/* Sources */
.otl-tch-src { padding-block: clamp(2rem, 3.5vw, 2.8rem); border-top: 1px solid #e7ece9; }
.otl-tch-src__in { max-width: 780px; margin-inline: auto; }
.otl-tch-src__h { font-size: 1rem; font-weight: 800; color: var(--wp--preset--color--slate, #475f65); margin: 0 0 .5rem; }
.otl-tch-src__p { font-size: .9rem; line-height: 1.55; color: #5a6b70; margin: 0 0 .6rem; }
.otl-tch-src__p a { color: #f16e00; }
.otl-tch-src__note { font-size: .82rem; color: #8a979c; font-style: italic; margin: 0; }

@media (max-width: 900px) {
	.otl-tch-hero__grid { grid-template-columns: 1fr; }
	.otl-tch-tl__cards { grid-template-columns: 1fr; }
	.otl-tch-do__grid { grid-template-columns: repeat(2, 1fr); }
	.otl-tch-help__cols { grid-template-columns: 1fr; }
	.otl-tch-dev__row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
	.otl-tch-do__grid { grid-template-columns: 1fr; }
	.otl-tch-dev__row { grid-template-columns: repeat(2, 1fr); }
	.otl-tch-urg__in { flex-direction: column; align-items: flex-start; }
}

/* === Orditach Digicentral dashboard hero visual (otl-oad) === */
.otl-oad { container-type: inline-size; position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.otl-oad__frame { position: relative; aspect-ratio: 420 / 320; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 120% at 78% 22%, #213339 0%, #18272c 62%); box-shadow: 0 36px 72px -28px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.1); padding: 4cqw; display: flex; flex-direction: column; gap: 3cqw; }
.otl-oad__bar { display: flex; align-items: center; gap: 2.4cqw; padding-bottom: 2.6cqw; border-bottom: 1px solid rgba(255,255,255,.08); }
.otl-oad__bdot { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #f16e00; flex: 0 0 auto; box-shadow: 0 0 0 1.1cqw rgba(241,110,0,.22); }
.otl-oad__brand { font-weight: 800; font-size: 3.5cqw; color: #eef3f4; letter-spacing: -.01em; }
.otl-oad__nav { margin-left: auto; display: flex; gap: 1.4cqw; }
.otl-oad__tab { width: 5.4cqw; height: 2.1cqw; border-radius: 999px; background: rgba(255,255,255,.13); }
.otl-oad__tab--on { background: #f16e00; width: 7cqw; }
.otl-oad__grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 2.8cqw; flex: 1; min-height: 0; }
.otl-oad__panel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 3cqw; padding: 3cqw; display: flex; flex-direction: column; min-height: 0; }
.otl-oad__ph { font-size: 2.4cqw; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8ba0a6; }
.otl-oad__pie .otl-oad__ph { margin-bottom: 2cqw; }
.otl-oad__pierow { display: flex; align-items: center; gap: 2.4cqw; flex: 1; }
.otl-oad__donut { width: 44%; max-width: 130px; height: auto; flex: 0 0 auto; }
.otl-oad__dtrack { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 12; }
.otl-oad__dseg { fill: none; stroke-width: 12; stroke-linecap: round; }
.otl-oad__dseg--ok { stroke: #6fa628; }
.otl-oad__dseg--warn { stroke: #e0a32e; }
.otl-oad__dnum { fill: #fff; font-size: 34px; font-weight: 800; text-anchor: middle; }
.otl-oad__dlbl { fill: #8ba0a6; font-size: 12px; font-weight: 700; text-anchor: middle; text-transform: uppercase; letter-spacing: .14em; }
.otl-oad__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 2cqw; flex: 1; font-size: 2.4cqw; }
.otl-oad__legend li { display: flex; align-items: center; gap: 1.6cqw; color: #b9c7cb; }
.otl-oad__legend b { margin-left: auto; color: #fff; font-weight: 800; }
.otl-oad__ld { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; flex: 0 0 auto; }
.otl-oad__ld--ok { background: #6fa628; }
.otl-oad__ld--warn { background: #e0a32e; }
.otl-oad__ld--late { background: #d9534f; }
.otl-oad__lh { display: flex; align-items: center; gap: 1.6cqw; margin-bottom: 2.4cqw; }
.otl-oad__lh .otl-oad__ph { margin: 0; }
.otl-oad__clock { margin-left: auto; font-size: 2.2cqw; color: #6f8389; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.otl-oad__rows { display: flex; flex-direction: column; gap: 2.4cqw; flex: 1; justify-content: center; }
.otl-oad__row { display: flex; align-items: center; gap: 2cqw; }
.otl-oad__sd { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; flex: 0 0 auto; }
.otl-oad__sd--ok { background: #6fa628; }
.otl-oad__sd--warn { background: #e0a32e; }
.otl-oad__sd--late { background: #d9534f; }
.otl-oad__rm { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.otl-oad__rm b { font-size: 2.7cqw; font-weight: 800; color: #eef3f4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otl-oad__rm span { font-size: 2.1cqw; text-transform: uppercase; letter-spacing: .05em; color: #8499a0; }
.otl-oad__bd { margin-left: auto; font-size: 2.5cqw; font-weight: 800; padding: .7cqw 1.8cqw; border-radius: 999px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.otl-oad__bd--ok { background: rgba(111,166,40,.18); color: #a6d562; }
.otl-oad__bd--warn { background: rgba(224,163,46,.18); color: #f0c264; }
.otl-oad__bd--late { background: rgba(217,83,79,.2); color: #f1938f; }
.otl-oad__chip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: .1rem; padding: .55rem .8rem; border-radius: 13px; background: rgba(20,34,39,.86); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 16px 32px -16px rgba(0,0,0,.6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.otl-oad__chip--ok { top: 31%; left: -.7rem; border-left: 3px solid #6fa628; }
.otl-oad__chip--arch { bottom: 8%; right: -.7rem; border-left: 3px solid #f16e00; }
.otl-oad__chipk { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: rgba(255,255,255,.62); }
.otl-oad__chipv { font-size: 1.02rem; font-weight: 800; color: #fff; line-height: 1.05; }
@media (max-width: 781px) { .otl-oad { max-width: 420px; } .otl-oad__chip { display: none; } }

/* ============================================================================
   Offerte-funnel (/nl/offerte/*, /fr/devis/*, /en/quotation/*) —
   two columns: form card left, reassurance sidebar right.
   ========================================================================== */
.otl-qsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 370px); gap: clamp(1.4rem, 3.5vw, 2.6rem); align-items: start; }
.otl-qsplit > * { margin-block: 0; }

/* Form card */
.otl-qsplit__form { background: #fff; border: 1px solid #e7edee; border-radius: 18px; box-shadow: var(--otl-shadow); padding: clamp(1.4rem, 3vw, 2.3rem); }
.otl-qsplit__form h2 { margin: 0 0 .45rem; }
.otl-qsplit__form .otl-qsplit__lead { margin: 0 0 1.6rem; color: #5b6b70; line-height: 1.55; }

/* Fluent Forms polish, scoped to the card (extra depth so it wins from the plugin css). */
.otl-qsplit .otl-qsplit__form .ff-el-group { margin-bottom: 1.15rem; }
.otl-qsplit .otl-qsplit__form .ff-el-input--label { margin-bottom: .35rem; }
.otl-qsplit .otl-qsplit__form .ff-el-input--label label { font-weight: 700; font-size: .95rem; color: #1f3338; }
.otl-qsplit .otl-qsplit__form .ff-el-is-required.asterisk-right label:after { color: var(--wp--preset--color--primary); }
.otl-qsplit .otl-qsplit__form .ff-el-form-control { width: 100%; border: 1px solid #d5dee1; border-radius: 10px; background: #fff; color: #1f3338; font-family: inherit; font-size: 1rem; padding: .68rem .9rem; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
.otl-qsplit .otl-qsplit__form .ff-el-form-control::placeholder { color: #9aa9ad; }
.otl-qsplit .otl-qsplit__form .ff-el-form-control:focus { outline: none; border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 3px rgba(241,110,0,.13); }
.otl-qsplit .otl-qsplit__form textarea.ff-el-form-control { min-height: 132px; resize: vertical; }
.otl-qsplit .otl-qsplit__form .ff-t-container { display: flex; flex-wrap: wrap; gap: 1rem; }
.otl-qsplit .otl-qsplit__form .ff-t-cell { flex: 1 1 240px; min-width: 0; padding: 0; }
.otl-qsplit .otl-qsplit__form .ff-el-form-check-label { display: inline-flex; align-items: center; gap: .55rem; color: #33454b; }
.otl-qsplit .otl-qsplit__form .ff-el-form-check-input { width: 17px; height: 17px; accent-color: var(--wp--preset--color--primary); }
.otl-qsplit .otl-qsplit__form .ff-btn-submit.ff_btn_style { background-color: var(--wp--preset--color--primary); border: 0; border-radius: 10px; font-weight: 700; font-size: 1.02rem; padding: .8rem 1.7rem; box-shadow: 0 6px 16px rgba(241,110,0,.28); transition: transform .15s ease, box-shadow .15s ease; }
.otl-qsplit .otl-qsplit__form .ff-btn-submit.ff_btn_style:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(241,110,0,.34); }
.otl-qsplit .otl-qsplit__form .otl-form-privacy { color: #7a8a8f; margin-top: .9rem; }

/* Reassurance sidebar (sticky next to the long form on desktop). */
.otl-qside { background: #fff; border: 1px solid #e7edee; border-radius: 18px; box-shadow: var(--otl-shadow); padding: clamp(1.25rem, 2.4vw, 1.7rem); position: sticky; top: 90px; }
.otl-qside__head { font-size: 1.18rem; margin: 0 0 1rem; }
.otl-qside__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.otl-qside__points li { display: flex; gap: .7rem; align-items: flex-start; }
.otl-qside__check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(164,204,100,.3); color: #4c7c15; display: grid; place-items: center; margin-top: .1rem; }
.otl-qside__check svg { width: 12px; height: 12px; }
.otl-qside__pt { display: flex; flex-direction: column; gap: .1rem; }
.otl-qside__pt strong { color: #1f3338; font-size: .98rem; }
.otl-qside__pt span { color: #5b6b70; font-size: .88rem; line-height: 1.4; }
.otl-qside__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid #e7edee; margin-top: 1.25rem; padding-top: 1.1rem; }
.otl-qside__stats b { display: block; font-size: 1.45rem; font-weight: 800; color: var(--wp--preset--color--slate); line-height: 1.1; }
.otl-qside__stats span { display: inline-block; margin-top: .15rem; font-size: .82rem; color: #5b6b70; line-height: 1.35; }
.otl-qside__contact { border-top: 1px solid #e7edee; margin-top: 1.2rem; padding-top: 1.1rem; }
.otl-qside__contact h3 { font-size: 1rem; margin: 0 0 .6rem; }
.otl-qside__contact a { display: flex; align-items: center; gap: .55rem; padding: .22rem 0; color: var(--wp--preset--color--slate); font-weight: 600; font-size: .95rem; text-decoration: none; }
.otl-qside__contact a:hover, .otl-qside__contact a:focus-visible { color: var(--wp--preset--color--primary); text-decoration: underline; }
.otl-qside__contact svg { width: 17px; height: 17px; flex: 0 0 auto; color: #7a8a8f; }
.otl-qside__hours { margin: .55rem 0 0; font-size: .84rem; color: #7a8a8f; }
.otl-qside__ref { margin: 1.2rem 0 0; padding: 1rem 1.1rem; background: #f5f7f8; border-radius: 12px; }
.otl-qside__ref p { margin: 0 0 .55rem; font-style: italic; color: #33454b; font-size: .93rem; line-height: 1.55; }
.otl-qside__ref footer { font-weight: 700; font-size: .88rem; color: #16252b; }

@media (max-width: 880px) {
	.otl-qsplit { grid-template-columns: 1fr; }
	.otl-qside { position: static; }
}