@font-face { font-family: Poppins; src: url('/assets/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url('/assets/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Poppins; src: url('/assets/fonts/poppins-800.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }
:root {
  color-scheme: light;
  --navy: #07152f;
  --navy-2: #102345;
  --ink: #101b31;
  --blue: #315cf6;
  --blue-dark: #2348ce;
  --mint: #4adfc9;
  --mint-dark: #159d8b;
  --cloud: #f2f5f9;
  --line: #dce2ea;
  --muted: #59657b;
  --white: #fff;
  --page: 80rem;
  font-family: Inter, Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; }
svg { display: block; }
h1, h2, h3, h4, h5, h6, .site-header, .pill, .outline-link { font-family: Poppins, Inter, Arial, sans-serif; }
.page-width { width: min(var(--page), calc(100% - 3.5rem)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .8rem 1rem; border-radius: 999px; background: var(--white); color: var(--navy); }
.skip-link:focus { top: 1rem; }
:where(a, button, input, textarea, select):focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }

.kicker { margin: 0 0 1rem; font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.kicker.light { color: #d7deeb; }
.kicker.blue { color: var(--blue); }
.kicker.mint { color: var(--mint); }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand strong { color: var(--navy); font-size: 1.55rem; font-weight: 900; letter-spacing: -.06em; }
.brand-logo { display: block; width: clamp(9rem, 13vw, 11rem); height: auto; }
.mark { display: block; width: 2.5rem; height: 2.5rem; flex: none; object-fit: contain; }

.site-header { position: absolute; z-index: 10; top: 2rem; left: 50%; width: min(calc(100% - 3rem), 82rem); min-height: 5.4rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: .75rem .9rem .75rem 1.3rem; border-radius: 1.8rem; background: rgb(255 255 255 / 96%); box-shadow: 0 1rem 3rem rgb(0 8 25 / 18%); transform: translateX(-50%); }
.site-header nav { display: flex; align-items: center; gap: clamp(.9rem, 1.7vw, 2rem); }
.site-header nav a { position: relative; color: #26344e; font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-header nav a::after { content: ""; position: absolute; left: 0; bottom: -.45rem; width: 0; height: 2px; border-radius: 4px; background: var(--blue); transition: width .2s ease; }
.site-header nav a:hover::after { width: 100%; }
.header-button { justify-self: end; display: inline-flex; min-height: 3.7rem; align-items: center; gap: .7rem; padding: .85rem 1.5rem; border-radius: 999px; background: var(--blue); color: var(--white); font-size: .85rem; font-weight: 800; text-decoration: none; text-transform: uppercase; transition: background .2s ease, transform .2s ease; }
.header-button:hover { background: var(--blue-dark); transform: translateY(-2px); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: .65rem; }
.mobile-menu-toggle { position: relative; z-index: 72; display: none; width: 3.35rem; height: 3.35rem; place-content: center; gap: .28rem; padding: 0; border: 0; border-radius: 50%; background: var(--navy); cursor: pointer; }
.mobile-menu-toggle span { width: 1.25rem; height: 2px; border-radius: 1rem; background: var(--white); transition: transform .2s ease, opacity .2s ease; }
.mobile-menu-toggle.open span:nth-child(1) { transform: translateY(.38rem) rotate(45deg); }
.mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-.38rem) rotate(-45deg); }
.site-header .mobile-menu { display: none; }
.menu-backdrop { display: none; }

.hero { position: relative; min-height: 58rem; display: flex; align-items: center; overflow: hidden; background-color: var(--navy); background-image: url("/assets/images/xenid-hero-kantoor-01-aug2026.webp"); background-position: center; background-size: cover; color: var(--white); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 16 37 / 98%) 0%, rgb(5 16 37 / 83%) 33%, rgb(5 16 37 / 20%) 66%, rgb(5 16 37 / 5%) 100%), linear-gradient(0deg, rgb(5 16 37 / 58%) 0%, transparent 40%); }
.hero-content { position: relative; z-index: 2; padding-top: 8rem; }
.hero-content h1 { max-width: 50rem; margin: 0; font-size: clamp(3.4rem, 5.5vw, 5.85rem); font-weight: 700; line-height: 1.08; letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.hero-lead { max-width: 42rem; margin: 2rem 0 2.3rem; color: #d5dce9; font-size: 1.08rem; line-height: 1.75; }
.hero-actions, .promise-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pill { display: inline-flex; min-height: 3.45rem; align-items: center; justify-content: center; gap: .85rem; padding: .8rem 1.55rem; border-radius: 999px; font-size: .82rem; font-weight: 850; letter-spacing: .015em; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; }
.pill:hover { transform: translateY(-2px); }
.pill-mint { background: var(--mint); color: var(--navy); }
.pill-mint:hover { background: #6be7d6; }
.pill-blue { background: var(--blue); color: var(--white); }
.pill-blue:hover { background: var(--blue-dark); }
.hero-link { display: inline-flex; align-items: center; gap: .7rem; padding: .8rem 1rem; color: var(--white); font-size: .84rem; font-weight: 800; text-decoration: none; }
.hero-link span { color: var(--mint); }
.hero-caption { position: absolute; z-index: 2; right: 3rem; bottom: 2rem; display: flex; align-items: center; gap: 1.4rem; color: rgb(255 255 255 / 72%); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-caption::before { content: ""; width: 3.5rem; height: 1px; background: rgb(255 255 255 / 45%); }
.hero-caption b { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border: 1px solid rgb(255 255 255 / 35%); border-radius: 50%; color: var(--white); font-size: .65rem; }

.promise { position: relative; overflow: hidden; padding: 7.5rem 0; background: var(--navy); color: var(--white); }
.promise::after { content: ""; position: absolute; width: 36rem; height: 36rem; right: -20rem; top: -18rem; border: 1px solid rgb(74 223 201 / 20%); border-radius: 50%; box-shadow: 0 0 0 5rem rgb(74 223 201 / 3%), 0 0 0 10rem rgb(74 223 201 / 2%); }
.promise-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 7rem; }
.promise h2, .service-banner h2 { margin: 0; font-size: clamp(2.5rem, 3.9vw, 4.15rem); font-weight: 700; line-height: 1.05; letter-spacing: -.05em; text-transform: uppercase; }
.promise-copy > p { margin: 0 0 2.2rem; color: #b5c0d4; font-size: 1rem; line-height: 1.8; }
.outline-link { display: inline-flex; min-height: 3.45rem; align-items: center; padding: .72rem 1.5rem; border: 1px solid rgb(255 255 255 / 44%); border-radius: 999px; color: var(--white); font-size: .8rem; font-weight: 800; text-decoration: none; text-transform: uppercase; transition: background .2s ease, border-color .2s ease; }
.outline-link:hover { border-color: var(--white); background: rgb(255 255 255 / 8%); }
.outline-link.dark { border-color: #b8c0cc; color: var(--ink); }
.outline-link.dark:hover { border-color: var(--ink); background: var(--cloud); }

.services { padding: 8rem 0 9rem; background: var(--white); }
.section-top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3rem; margin-bottom: 3rem; }
.section-top h2, .why h2, .process h2, .contact h2 { max-width: 50rem; margin: 0; color: var(--navy); font-size: clamp(2.5rem, 4vw, 4.25rem); font-weight: 700; line-height: 1.04; letter-spacing: -.055em; text-transform: uppercase; }
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.service-card { min-width: 0; overflow: hidden; border-radius: 1.6rem; background: var(--cloud); }
.service-art { position: relative; height: 19rem; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #dfe6ff, #315cf6); }
.service-art::before { content: ""; position: absolute; width: 18rem; height: 18rem; border: 1px solid rgb(255 255 255 / 28%); border-radius: 50%; box-shadow: 0 0 0 4rem rgb(255 255 255 / 6%), 0 0 0 8rem rgb(255 255 255 / 4%); }
.website-window { position: relative; z-index: 1; width: 72%; height: 66%; padding: 1.2rem; border: 1px solid rgb(255 255 255 / 45%); border-radius: 1rem; background: rgb(255 255 255 / 94%); box-shadow: 0 1.5rem 3.5rem rgb(6 20 67 / 24%); transform: rotate(-3deg); }
.website-window i { display: inline-block; width: .42rem; height: .42rem; margin-right: .22rem; border-radius: 50%; background: #c3cbda; }
.website-window span { display: block; width: 2.8rem; height: .35rem; margin: 1.4rem 0 .8rem; border-radius: 1rem; background: var(--mint); }
.website-window b { display: block; width: 84%; height: .68rem; margin-bottom: .45rem; border-radius: 1rem; background: var(--navy); }
.website-window b.short { width: 58%; }
.website-window small { display: block; width: 70%; height: .3rem; margin-top: 1rem; border-radius: 1rem; background: #c2cad8; }
.server-art { background: linear-gradient(150deg, #0e2145, #173c84); }
.server-rack { position: relative; z-index: 1; width: 65%; display: grid; gap: .65rem; padding: 1.4rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.1rem; background: rgb(6 17 42 / 76%); box-shadow: 0 1.5rem 4rem rgb(0 5 20 / 32%); }
.server-rack span { position: relative; height: 3rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: .55rem; background: linear-gradient(90deg, #183261, #102143); }
.server-rack span::before { content: ""; position: absolute; width: .55rem; height: .55rem; left: .9rem; top: 1.2rem; border-radius: 50%; background: var(--mint); box-shadow: 1.15rem 0 0 #315cf6; }
.server-rack span::after { content: ""; position: absolute; width: 34%; height: 3px; right: 1rem; top: 1.35rem; border-radius: 4px; background: rgb(255 255 255 / 22%); }
.uptime-badge { position: absolute; z-index: 2; right: 1rem; bottom: 1.1rem; display: flex; align-items: center; gap: .5rem; padding: .65rem .8rem; border-radius: 999px; background: var(--white); color: var(--navy); font-size: .65rem; font-weight: 800; box-shadow: 0 .8rem 2rem rgb(0 5 20 / 26%); }
.uptime-badge i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 .2rem rgb(74 223 201 / 20%); }
.care-art { background: linear-gradient(145deg, #d9fff8, #49dec9); }
.care-circle { position: relative; z-index: 1; display: grid; width: 10rem; height: 10rem; place-content: center; border: 1px solid rgb(7 21 47 / 16%); border-radius: 50%; background: rgb(255 255 255 / 52%); box-shadow: 0 0 0 2.5rem rgb(255 255 255 / 14%); text-align: center; }
.care-circle span { color: var(--navy); font-size: 2.2rem; font-weight: 900; letter-spacing: -.07em; }
.care-circle small { color: #35655e; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.care-lines { position: absolute; right: 1rem; bottom: 1.3rem; display: flex; align-items: end; gap: .25rem; }
.care-lines i { width: .35rem; height: 1.4rem; border-radius: 1rem; background: var(--navy); opacity: .5; }
.care-lines i:nth-child(2) { height: 2.1rem; }
.care-lines i:nth-child(3) { height: 1.7rem; }
.care-lines i:nth-child(4) { height: 2.8rem; }
.service-card-content { position: relative; min-height: 23rem; padding: 2rem 2rem 4rem; border-top: 1px solid rgb(16 27 49 / 6%); }
.service-icon { display: grid; width: 3.1rem; height: 3.1rem; place-items: center; margin-bottom: 1.5rem; border-radius: 50%; background: var(--white); color: var(--blue); box-shadow: 0 .5rem 1.5rem rgb(20 36 70 / 8%); }
.service-icon svg { width: 1.55rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { margin: 0; color: var(--navy); font-size: 1.55rem; line-height: 1.15; letter-spacing: -.04em; text-transform: uppercase; }
.service-card p { margin: 1rem 0; color: var(--muted); font-size: .9rem; }
.service-card .service-price { display: grid; gap: .2rem; margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid #dce2ea; }
.service-price strong { color: var(--navy); font: 750 1rem Poppins, sans-serif; letter-spacing: -.025em; }
.service-price span { color: #7a879a; font-size: .64rem; }
.service-card-content > a { position: absolute; left: 2rem; bottom: 1.8rem; display: flex; align-items: center; gap: .6rem; color: var(--navy); font-size: .75rem; font-weight: 850; text-decoration: none; text-transform: uppercase; }
.service-card-content > a span { color: var(--blue); }

.why { padding: 9rem 0; background: var(--cloud); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7rem; }
.why-intro { max-width: 41rem; margin: 1.8rem 0 2.4rem; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.benefit-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.benefit-list li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.3rem; padding: 1.45rem 0; border-bottom: 1px solid var(--line); }
.benefit-list li > span { color: var(--blue); font-size: .75rem; font-weight: 900; letter-spacing: .1em; }
.benefit-list strong { display: block; color: var(--navy); font-size: 1.05rem; line-height: 1.35; }
.benefit-list p { margin: .25rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.why-visual { position: relative; min-height: 35rem; display: grid; place-items: center; overflow: hidden; border-radius: 1.8rem; background: linear-gradient(145deg, var(--blue), #172f74); }
.why-visual::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgb(255 255 255 / 12%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 12%) 1px, transparent 1px); background-size: 3.5rem 3.5rem; }
.dashboard { position: relative; z-index: 1; width: 77%; overflow: hidden; border: 1px solid rgb(255 255 255 / 22%); border-radius: 1.2rem; background: rgb(7 21 47 / 92%); box-shadow: 0 2rem 5rem rgb(3 11 33 / 38%); transform: rotate(2deg); }
.dash-top { min-height: 3.8rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.3rem; border-bottom: 1px solid rgb(255 255 255 / 10%); color: #9baccc; font-size: .6rem; font-weight: 850; letter-spacing: .13em; }
.dash-top i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 .25rem rgb(74 223 201 / 15%); }
.dash-main { display: grid; grid-template-columns: 1fr 1.4fr; align-items: end; gap: 1.2rem; padding: 2.3rem 1.5rem; }
.score span, .score small { display: block; }
.score span { color: var(--white); font-size: 2.5rem; font-weight: 850; letter-spacing: -.07em; }
.score small { color: #8294b5; font-size: .65rem; }
.bars { height: 7rem; display: flex; align-items: end; gap: .4rem; }
.bars i { flex: 1; height: 38%; border-radius: .25rem .25rem 0 0; background: #2f57df; }
.bars i:nth-child(2) { height: 54%; }
.bars i:nth-child(3) { height: 48%; }
.bars i:nth-child(4) { height: 73%; }
.bars i:nth-child(5) { height: 66%; }
.bars i:nth-child(6) { height: 86%; background: var(--mint); }
.bars i:nth-child(7) { height: 79%; }
.dash-bottom { display: flex; gap: 1.4rem; padding: 1rem 1.4rem; border-top: 1px solid rgb(255 255 255 / 10%); color: #a9b5cb; font-size: .6rem; }
.dash-bottom span { display: flex; align-items: center; gap: .4rem; }
.dash-bottom i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--mint); }
.visual-label { position: absolute; z-index: 2; right: 1.2rem; bottom: 1.2rem; display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-radius: 999px; background: var(--white); color: var(--navy); font-size: .7rem; font-weight: 850; box-shadow: 0 .7rem 2rem rgb(0 8 28 / 25%); }
.visual-label span { display: grid; width: 1.2rem; height: 1.2rem; place-items: center; border-radius: 50%; background: var(--mint); font-size: .65rem; }

.process { position: relative; overflow: hidden; padding: 8rem 0; background: var(--navy); color: var(--white); }
.process::after { content: ""; position: absolute; width: 42rem; height: 42rem; right: -25rem; top: -20rem; border: 1px solid rgb(74 223 201 / 17%); border-radius: 50%; }
.process-heading { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .45fr; align-items: end; gap: 3rem; margin-bottom: 4rem; }
.process-heading .kicker { grid-column: 1 / -1; margin-bottom: -1.7rem; }
.process h2 { color: var(--white); }
.process-heading > p:last-child { margin: 0; color: #aebbd1; }
.process-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgb(255 255 255 / 16%); }
.process-grid article { min-height: 15rem; padding: 2rem 1.6rem 1rem 0; border-right: 1px solid rgb(255 255 255 / 12%); }
.process-grid article:not(:first-child) { padding-left: 1.6rem; }
.process-grid article:last-child { border-right: 0; }
.process-grid .process-icon { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: 2.3rem; border: 1px solid rgb(74 223 201 / 48%); border-radius: 50%; color: var(--mint); }
.process-icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.process-grid h3 { margin: 0; color: var(--white); font-size: 1rem; text-transform: uppercase; }
.process-grid p { max-width: 14rem; margin: .7rem 0 0; color: #8e9db9; font-size: .8rem; }

.service-banner { min-height: 38rem; display: flex; align-items: center; background: linear-gradient(90deg, rgb(5 16 37 / 96%), rgb(5 16 37 / 75%) 54%, rgb(5 16 37 / 25%)), url("/assets/images/xenid-hero-kantoor-02-aug2026.webp") center 55% / cover; color: var(--white); }
.service-banner-inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4rem; }
.service-banner h2 { max-width: 48rem; }
.service-banner p:not(.kicker) { max-width: 39rem; margin: 1.4rem 0 0; color: #c9d2e1; }

.online-services { padding: 8rem 0; background: var(--cloud); }
.online-services-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; gap: 7rem; }
.online-services h2 { margin: 0; color: var(--navy); font-size: clamp(2.5rem, 3.9vw, 4.15rem); line-height: 1.05; letter-spacing: -.05em; text-transform: uppercase; }
.online-services-grid > div:first-child > p:not(.kicker) { margin: 1.4rem 0 2rem; color: var(--muted); line-height: 1.8; }
.online-service-options { border-top: 1px solid var(--line); }
.online-service-options article { display: grid; grid-template-columns: 3rem 1fr; gap: 1.3rem; padding: 1.7rem 0; border-bottom: 1px solid var(--line); }
.online-service-options article > span { color: var(--blue); font-size: .75rem; font-weight: 900; letter-spacing: .1em; }
.online-service-options h3 { margin: 0; color: var(--navy); font-size: 1.1rem; text-transform: uppercase; }
.online-service-options p { margin: .4rem 0 0; color: var(--muted); font-size: .94rem; line-height: 1.75; }

.audience { border-bottom: 1px solid var(--line); background: var(--white); }
.audience-inner { min-height: 9rem; display: grid; grid-template-columns: .45fr 1.55fr; align-items: center; gap: 3rem; }
.audience-inner > p { margin: 0; color: var(--muted); font-size: .82rem; font-weight: 800; text-transform: uppercase; }
.audience-inner > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.audience-inner span { color: #46536b; font-size: .82rem; font-weight: 800; }
.audience-inner span::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .6rem; border-radius: 50%; background: var(--mint); vertical-align: .08rem; }

.contact { padding: 8rem 0; background: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1fr .6fr; align-items: end; gap: 6rem; }
.contact-copy > p { margin: 0 0 2rem; color: var(--muted); line-height: 1.8; }

.site-footer { background: var(--navy); color: #9ba8bf; }
.footer-main { display: grid; grid-template-columns: 1.7fr repeat(3, .7fr); gap: 4rem; padding: 5rem 0; }
.footer-brand .brand-logo { width: 10.5rem; }
.footer-brand-block > p { max-width: 25rem; margin: 1.2rem 0 0; color: #7788a7; font-size: .82rem; }
.footer-main > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; font-size: .8rem; }
.footer-main h3 { margin: .35rem 0 .6rem; color: var(--white); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-main a { color: #a9b5c9; text-decoration: none; }
.footer-main a:hover { color: var(--white); }
.footer-main span { color: #687996; }
.footer-bottom { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgb(255 255 255 / 9%); color: #667796; font-size: .7rem; }
.footer-bottom div { display: flex; align-items: center; gap: 1.4rem; }
.footer-bottom a { text-decoration: none; }
.back-to-top { position: fixed; z-index: 60; right: 1.5rem; bottom: 1.5rem; display: grid; min-width: 6.5rem; min-height: 3rem; place-items: center; padding: .72rem 1.05rem; border: 1px solid rgb(255 255 255 / 52%); border-radius: 999px; background: var(--blue); color: var(--white); font: 800 .68rem/1 Poppins, sans-serif; text-decoration: none; text-transform: uppercase; box-shadow: 0 1rem 2.8rem rgb(7 21 47 / 24%); opacity: 0; visibility: hidden; transform: translateY(.75rem); transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background .2s ease; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--blue-dark); transform: translateY(-3px); }

/* Afspraak maken */
.booking-page { background: var(--cloud); }
.booking-hero { min-height: 41rem; display: flex; align-items: end; padding: 14rem 0 6rem; background: radial-gradient(circle at 82% 22%, rgb(74 223 201 / 22%), transparent 28rem), linear-gradient(135deg, var(--navy), #173a7e); color: var(--white); }
.booking-hero-grid { display: grid; grid-template-columns: 1.15fr .55fr; align-items: end; gap: 6rem; }
.booking-hero h1 { max-width: 58rem; margin: 0; font-size: clamp(3rem, 5vw, 5.25rem); line-height: 1; letter-spacing: -.055em; text-transform: uppercase; }
.booking-hero-grid > div:first-child > p:last-child { max-width: 45rem; margin: 1.7rem 0 0; color: #c5d0e1; font-size: 1rem; line-height: 1.8; }
.booking-points { display: grid; gap: .9rem; padding-bottom: .6rem; }
.booking-points span { display: flex; align-items: center; gap: .75rem; color: #d1daea; font-size: .82rem; }
.booking-points i { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; background: var(--mint); color: var(--navy); font-style: normal; font-size: .7rem; font-weight: 900; }
.booking-section { padding: 6rem 0 8rem; }
.booking-form { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid #e0e5ec; border-radius: 1.8rem; background: var(--white); box-shadow: 0 1.2rem 4rem rgb(24 45 82 / 8%); }
.booking-step { min-width: 0; padding: 3.25rem; }
.booking-date-step { background: #eef2f7; }
.booking-details-step { border-left: 1px solid #e1e6ed; }
.booking-step-title { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.booking-step-title > span { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: 50%; background: var(--blue); color: var(--white); font-size: .68rem; font-weight: 800; }
.booking-step-title p { margin: 0; color: var(--blue); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.booking-step-title h2 { margin: .15rem 0 0; color: var(--navy); font-size: 1.35rem; letter-spacing: -.035em; }
.date-options { max-width: 100%; display: flex; gap: .55rem; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 0 .75rem; scrollbar-color: #bdc6d5 transparent; scrollbar-width: thin; }
.date-options button { flex: 0 0 5.15rem; min-width: 0; display: grid; place-items: center; min-height: 6.65rem; padding: .7rem; border: 1px solid #dbe1e9; border-radius: .9rem; background: var(--white); color: #79869a; cursor: pointer; transition: border .2s ease, transform .2s ease; }
.date-options button:hover { border-color: var(--blue); transform: translateY(-2px); }
.date-options button.selected { border-color: var(--blue); background: var(--blue); color: var(--white); box-shadow: 0 .8rem 1.8rem rgb(49 92 246 / 20%); }
.date-options span, .date-options small { font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.date-options strong { color: var(--navy); font-family: Poppins, sans-serif; font-size: 1.45rem; }
.date-options button.selected strong { color: var(--white); }
.time-choice-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.time-choice-heading p { margin: 0; color: var(--blue); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.time-choice-heading strong { display: block; margin-top: .2rem; color: var(--navy); font: 700 .82rem Poppins, sans-serif; text-transform: capitalize; }
.time-choice-heading > span { flex: none; color: #69758a; font-size: .65rem; font-weight: 700; }
.time-options { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .85rem; }
.time-options button { min-width: 0; width: 100%; min-height: 3.55rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border: 1px solid #d9dfe8; border-radius: .75rem; background: var(--white); color: var(--navy); font: 800 .76rem Poppins, sans-serif; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.time-options button:hover { border-color: var(--blue); transform: translateY(-1px); }
.time-options button small { color: #1c9a83; font: 700 .55rem Inter, sans-serif; text-transform: uppercase; }
.time-options button.selected { border-color: var(--mint-dark); background: #f3fffc; box-shadow: inset 0 0 0 1px var(--mint-dark); }
.time-options button:disabled { background: #e5e9ef; color: #a7b0bf; cursor: not-allowed; }
.time-options button:disabled small { color: #a7b0bf; }
.booking-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.booking-fields label { display: grid; gap: .35rem; color: #6d798d; font-size: .68rem; font-weight: 700; }
.booking-fields input, .booking-fields textarea { min-width: 0; width: 100%; padding: .75rem .85rem; border: 1px solid #d8dee7; border-radius: .65rem; background: var(--white); color: var(--navy); font: .8rem Inter, sans-serif; outline: none; }
.booking-fields input { min-height: 3rem; }
.booking-fields input:focus, .booking-fields textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(49 92 246 / 10%); }
.booking-note { grid-column: 1 / -1; }
.booking-contact-method { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.booking-contact-method legend { margin-bottom: .45rem; color: #6d798d; font-size: .68rem; font-weight: 700; }
.contact-method-options { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.contact-method-options label { position: relative; min-width: 0; display: block; cursor: pointer; }
.contact-method-options input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contact-method-options label > span { min-height: 5.4rem; display: flex; justify-content: center; flex-direction: column; padding: .85rem 1rem .85rem 2.8rem; border: 1px solid #d8dee7; border-radius: .75rem; background: var(--white); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.contact-method-options label > span::before { content: ""; position: absolute; left: 1rem; top: 50%; width: 1rem; height: 1rem; border: 2px solid #b9c2d0; border-radius: 50%; transform: translateY(-50%); }
.contact-method-options label > span::after { content: ""; position: absolute; left: 1.3rem; top: 50%; width: .4rem; height: .4rem; border-radius: 50%; background: var(--white); opacity: 0; transform: translateY(-50%); }
.contact-method-options label:hover > span { border-color: #aab9ec; }
.contact-method-options input:focus-visible + span { box-shadow: 0 0 0 3px rgb(49 92 246 / 14%); }
.contact-method-options input:checked + span { border-color: var(--blue); background: #f3f6ff; box-shadow: inset 0 0 0 1px var(--blue); }
.contact-method-options input:checked + span::before { border-color: var(--blue); background: var(--blue); }
.contact-method-options input:checked + span::after { opacity: 1; }
.contact-method-options strong, .contact-method-options small { display: block; }
.contact-method-options strong { color: var(--navy); font-size: .72rem; }
.contact-method-options small { margin-top: .25rem; color: #8490a3; font-size: .6rem; font-weight: 500; line-height: 1.45; }
.booking-consent { display: flex; align-items: flex-start; gap: .65rem; margin-top: 1.2rem; color: #7a8698; font-size: .68rem; line-height: 1.5; }
.booking-consent input { margin-top: .2rem; accent-color: var(--blue); }
.booking-error, .agenda-error { margin: 1rem 0 0; padding: .7rem .8rem; border-radius: .6rem; background: #fff0ef; color: #b33d35; font-size: .7rem; }
.booking-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e9ef; }
.booking-summary > div span, .booking-summary > div strong { display: block; }
.booking-summary > div span { color: #8b96a7; font-size: .62rem; text-transform: uppercase; }
.booking-summary > div strong { margin-top: .2rem; color: var(--navy); font-size: .75rem; }
.booking-summary button, .booking-confirmation button { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: .8rem; padding: .75rem 1.25rem; border: 0; border-radius: 999px; background: var(--blue); color: var(--white); font: 800 .67rem Poppins, sans-serif; text-align: center; text-transform: uppercase; cursor: pointer; }
.booking-summary button:disabled { opacity: .55; cursor: wait; }
.booking-confirmation { max-width: 45rem; margin: 0 auto; padding: 4.5rem; border-radius: 1.8rem; background: var(--white); text-align: center; box-shadow: 0 1.2rem 4rem rgb(24 45 82 / 8%); }
.booking-confirmation > span { display: grid; width: 4rem; height: 4rem; place-items: center; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--mint); color: var(--navy); font-size: 1.4rem; font-weight: 900; }
.booking-confirmation h1, .booking-confirmation h2 { margin: 0; color: var(--navy); font-size: 2.4rem; letter-spacing: -.045em; text-transform: uppercase; }
.booking-confirmation > p:not(.kicker) { color: var(--muted); }
.booking-confirmation-actions { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.4rem; flex-wrap: wrap; }
.booking-confirmation-actions button { margin: 0; }
.booking-confirmation-actions a { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; padding: .75rem 1.25rem; border: 1px solid #bfc8d5; border-radius: 999px; color: var(--navy); font: 800 .67rem Poppins, sans-serif; text-decoration: none; text-transform: uppercase; transition: border-color .2s ease, background .2s ease; }
.booking-confirmation-actions a:hover { border-color: var(--navy); background: var(--cloud); }
.booking-empty a { color: var(--blue); font-weight: 800; }

/* Portfolio */
.portfolio-hero { min-height: 43rem; display: flex; align-items: end; padding: 14rem 0 6.5rem; background: radial-gradient(circle at 80% 15%, rgb(74 223 201 / 24%), transparent 27rem), linear-gradient(135deg, #07152f, #173777); color: var(--white); }
.portfolio-hero-grid { display: grid; grid-template-columns: 1.25fr .55fr; align-items: end; gap: 6rem; }
.portfolio-hero h1 { max-width: 58rem; margin: 0; font-size: clamp(3.2rem, 5.4vw, 5.7rem); line-height: 1; letter-spacing: -.055em; text-transform: uppercase; }
.portfolio-hero-grid > p { margin: 0 0 .7rem; color: #c3cee0; font-size: 1rem; line-height: 1.85; }
.portfolio-list { padding: 8rem 0 9rem; }
.portfolio-intro { display: grid; grid-template-columns: 1fr .52fr; gap: 2rem 6rem; margin-bottom: 4rem; }
.portfolio-intro .kicker { grid-column: 1 / -1; margin-bottom: -.6rem; }
.portfolio-intro h2 { max-width: 49rem; margin: 0; color: var(--navy); font-size: clamp(2.45rem, 3.9vw, 4.1rem); line-height: 1.05; letter-spacing: -.05em; text-transform: uppercase; }
.portfolio-intro > p:last-child { margin: 0; align-self: end; color: var(--muted); line-height: 1.8; }
.portfolio-grid { display: grid; gap: 1.5rem; }
.portfolio-card { display: grid; grid-template-columns: 1.25fr .75fr; overflow: hidden; border-radius: 1.8rem; background: var(--cloud); }
.portfolio-card:nth-child(even) { grid-template-columns: .75fr 1.25fr; }
.portfolio-card:nth-child(even) .portfolio-preview { order: 2; }
.portfolio-preview { position: relative; min-height: 32rem; display: grid; place-items: center; overflow: hidden; }
.portfolio-blue { background: linear-gradient(145deg, #6683ff, #2348ce); }
.portfolio-mint { background: linear-gradient(145deg, #c3fff3, #35c9b5); }
.portfolio-navy { background: linear-gradient(145deg, #1a3566, #07152f); }
.portfolio-preview::before { content: ""; position: absolute; width: 31rem; height: 31rem; border: 1px solid rgb(255 255 255 / 22%); border-radius: 50%; box-shadow: 0 0 0 5rem rgb(255 255 255 / 5%); }
.preview-browser { position: relative; z-index: 1; width: 74%; overflow: hidden; border-radius: 1rem; background: var(--white); box-shadow: 0 2rem 5rem rgb(4 16 51 / 28%); transform: rotate(-2deg); }
.portfolio-card:nth-child(2) .preview-browser { transform: rotate(2deg); }
.preview-bar { height: 2.5rem; display: flex; align-items: center; gap: .35rem; padding: 0 1rem; border-bottom: 1px solid #e9edf3; }
.preview-bar i { width: .48rem; height: .48rem; border-radius: 50%; background: #d0d6e1; }
.preview-page { min-height: 16rem; padding: 2.2rem; }
.preview-page span { display: block; width: 2.8rem; height: .42rem; margin-bottom: 1.7rem; border-radius: 1rem; background: var(--mint); }
.preview-page b { display: block; width: 80%; height: .9rem; margin-bottom: .55rem; border-radius: 1rem; background: var(--navy); }
.preview-page b:nth-of-type(2) { width: 58%; }
.preview-page small { display: block; width: 70%; height: .35rem; margin-top: 1.4rem; border-radius: 1rem; background: #cbd2de; }
.preview-page em { display: block; width: 5.5rem; height: 1.9rem; margin-top: 2rem; border-radius: 999px; background: var(--blue); }
.project-number { position: absolute; z-index: 2; right: 1.5rem; bottom: 1.5rem; padding: .65rem .9rem; border-radius: 999px; background: rgb(255 255 255 / 92%); color: var(--navy); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-card-copy { display: flex; flex-direction: column; justify-content: center; padding: 4rem; }
.portfolio-card-copy > p { margin: 0 0 1rem; color: var(--blue); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-card-copy h3 { margin: 0 0 1.3rem; color: var(--navy); font-size: clamp(2rem, 3vw, 3rem); line-height: 1.08; letter-spacing: -.045em; text-transform: uppercase; }
.portfolio-card-copy > span { color: var(--muted); line-height: 1.8; }
.portfolio-cta { padding: 7rem 0; background: var(--navy); color: var(--white); }
.portfolio-cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4rem; }
.portfolio-cta h2 { max-width: 50rem; margin: 0; font-size: clamp(2.5rem, 4vw, 4.2rem); line-height: 1.04; letter-spacing: -.05em; text-transform: uppercase; }

/* Privacy en voorwaarden */
.legal-page { background: var(--cloud); }
.legal-hero { min-height: 34rem; display: flex; align-items: end; padding: 13rem 0 5rem; background: radial-gradient(circle at 82% 12%, rgb(74 223 201 / 24%), transparent 25rem), linear-gradient(135deg, #07152f, #173777); color: var(--white); }
.legal-hero h1 { max-width: 54rem; margin: 0; font-size: clamp(3rem, 5vw, 5.2rem); line-height: 1; letter-spacing: -.055em; text-transform: uppercase; }
.legal-hero p:last-child { max-width: 47rem; margin: 1.5rem 0 0; color: #c3cee0; line-height: 1.8; }
.legal-content { padding: 5rem 0 7rem; }
.legal-content article { width: min(53rem, 100%); padding: clamp(1.7rem, 5vw, 4rem); border-radius: 1.5rem; background: var(--white); box-shadow: 0 1rem 3rem rgb(17 34 68 / 7%); }
.legal-content h2 { margin: 2.5rem 0 .7rem; scroll-margin-top: 7rem; color: var(--navy); font-size: 1.45rem; letter-spacing: -.03em; }
.legal-content h2:first-of-type { margin-top: 1.5rem; }
.legal-content p { color: var(--muted); }
.legal-content a { color: var(--blue); font-weight: 700; }
.legal-content ul, .legal-content ol { color: var(--muted); }
.legal-content li { overflow-wrap: anywhere; }
.legal-content li + li { margin-top: .45rem; }
.legal-content strong { color: var(--ink); }
.cookie-table-wrap { overflow-x: auto; margin: 1rem 0 1.25rem; border: 1px solid var(--line); border-radius: 1rem; }
.cookie-table { width: 100%; min-width: 42rem; border-collapse: collapse; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.cookie-table th, .cookie-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cookie-table th { background: #f3f6fa; color: var(--navy); font: 800 .68rem Poppins, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.cookie-table tr:last-child td { border-bottom: 0; }
.cookie-table code { color: var(--navy); font-size: .78rem; overflow-wrap: normal; white-space: nowrap; }
.privacy-choice { margin-top: 1.3rem; padding: 1.2rem; border: 1px solid #cfe7e2; border-radius: 1rem; background: #effaf7; }
.privacy-choice > p { margin: .35rem 0 .9rem; color: #466863; }
.privacy-choice > div { display: flex; flex-wrap: wrap; gap: .65rem; }
.privacy-choice button { min-height: 2.8rem; padding: .7rem 1rem; border: 1px solid var(--navy); border-radius: 999px; background: var(--navy); color: var(--white); cursor: pointer; font: 800 .67rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.privacy-choice button[hidden] { display: none; }
.privacy-choice small { display: block; margin-top: .85rem; color: #5e7773; }
.legal-status { display: inline-flex; margin: 0; padding: .55rem .8rem; border-radius: 999px; background: #eafaf6; color: #118b78 !important; font-size: .7rem; font-weight: 800; }
.legal-draft-note { margin: 1.5rem 0 2rem; padding: 1.25rem 1.35rem; border: 1px solid #f0d69b; border-radius: 1rem; background: #fff8e8; }
.legal-draft-note p { margin: .35rem 0 0; color: #6d5a2d; }
.legal-toc { margin: 2rem 0 3rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--cloud); }
.legal-toc h2 { margin: 0 0 1rem; }
.legal-toc ol { columns: 2; column-gap: 2.5rem; margin: 0; padding-left: 1.3rem; }
.legal-toc li { break-inside: avoid; margin: 0 0 .5rem; }
.legal-toc a { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.legal-open-items { margin-top: 3.5rem; padding: 1.6rem; border-radius: 1rem; background: var(--navy); color: var(--white); }
.legal-open-items h2 { margin-top: 0; color: var(--white); }
.legal-open-items p, .legal-open-items ol { color: #cbd5e5; }
.legal-open-items strong { color: var(--white); }
.legal-contact { margin-top: 2rem; }
.booking-consent a { color: var(--blue); font-weight: 800; }

/* Beheeromgeving */
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 17rem 1fr; background: #f4f6fa; font-family: Inter, Arial, sans-serif; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 2rem 1.35rem 1.5rem; background: var(--navy); color: var(--white); }
.admin-brand { display: flex; align-items: center; gap: .7rem; color: var(--white); text-decoration: none; }
.admin-brand strong { font-family: Poppins, sans-serif; font-size: 1.5rem; letter-spacing: -.05em; }
.admin-sidebar > p { margin: .8rem 0 2.5rem 3.2rem; color: #7184a8; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.admin-sidebar nav { display: grid; gap: .4rem; }
.admin-sidebar nav button { display: flex; min-height: 3rem; align-items: center; gap: .8rem; padding: .65rem .8rem; border: 0; border-radius: .7rem; background: transparent; color: #9eacc4; font: 600 .84rem Inter, sans-serif; text-align: left; cursor: pointer; }
.admin-sidebar nav button > span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid rgb(255 255 255 / 12%); border-radius: .5rem; font-size: .8rem; }
.admin-sidebar nav button:hover, .admin-sidebar nav button.active { background: rgb(49 92 246 / 19%); color: var(--white); }
.admin-sidebar nav button.active > span { border-color: var(--blue); background: var(--blue); }
.admin-sidebar-bottom { display: grid; gap: 1rem; margin-top: auto; }
.admin-sidebar-bottom a { display: flex; align-items: center; justify-content: space-between; padding: .8rem; border-top: 1px solid rgb(255 255 255 / 9%); color: #b6c1d5; font-size: .78rem; text-decoration: none; }
.admin-sidebar-bottom small { padding-left: .8rem; color: #536586; font-size: .65rem; }
.admin-content { min-width: 0; padding: 0 2.5rem 4rem; }
.admin-topbar { min-height: 8.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid #e0e5ec; }
.admin-topbar p, .admin-card-title p, .day-card-title p { margin: 0 0 .25rem; color: #8490a5; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.admin-topbar .admin-greeting { margin: 0 0 .35rem; color: var(--blue); font-size: .82rem; font-weight: 750; letter-spacing: 0; text-transform: none; }
.admin-topbar h1 { margin: 0; color: var(--navy); font-size: clamp(1.65rem, 2.5vw, 2.25rem); letter-spacing: -.045em; }
.demo-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border: 1px solid #cfd7e4; border-radius: 999px; background: var(--white); color: #647189; font-size: .7rem; }
.demo-badge i { width: .5rem; height: .5rem; border-radius: 50%; background: #f2a93b; }
.admin-view { padding-top: 2.5rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.metric-card { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: 1.5rem; border: 1px solid #e1e6ed; border-radius: 1rem; background: var(--white); box-shadow: 0 .5rem 1.5rem rgb(19 38 75 / 3%); }
.metric-card span, .metric-card strong { display: block; }
.metric-card span { color: #7c889b; font-size: .72rem; }
.metric-card strong { margin-top: .5rem; color: var(--navy); font-family: Poppins, sans-serif; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.1; }
.metric-card small { padding: .25rem .5rem; border-radius: 999px; background: #e5faf5; color: #118b78; font-size: .65rem; font-weight: 800; }
.admin-grid-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .8fr); gap: 1rem; margin-top: 1rem; }
.admin-grid-bottom { display: grid; grid-template-columns: .75fr 1.25fr; gap: 1rem; margin-top: 1rem; }
.admin-card { min-width: 0; padding: 1.5rem; border: 1px solid #e1e6ed; border-radius: 1rem; background: var(--white); box-shadow: 0 .5rem 1.5rem rgb(19 38 75 / 3%); }
.admin-card-title, .day-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.admin-card-title h2, .day-card-title h2 { margin: 0; color: var(--navy); font-size: 1.05rem; letter-spacing: -.025em; }
.admin-card-title > span { color: #77849a; font-size: .68rem; }
.admin-card-title button, .traffic-heading > button { padding: .55rem .8rem; border: 1px solid #d8dee8; border-radius: .55rem; background: var(--white); color: #526078; font: 700 .67rem Inter, sans-serif; cursor: pointer; }
.chart-wrap { position: relative; display: grid; grid-template-columns: 2.2rem 1fr; align-items: stretch; }
.chart-values { display: flex; flex-direction: column; justify-content: space-between; padding: .2rem 0 .8rem; color: #9ba5b6; font-size: .6rem; }
.chart-wrap svg { width: 100%; min-height: 15rem; overflow: visible; background-image: linear-gradient(#edf0f5 1px, transparent 1px); background-size: 100% 25%; }
.chart-area { fill: url(#area); }
.chart-line { fill: none; stroke: var(--blue); stroke-linecap: round; stroke-width: 4; }
.chart-wrap circle { fill: var(--white); stroke: var(--blue); stroke-width: 3; }
.chart-days { display: grid; grid-template-columns: repeat(7, 1fr); padding: .6rem 0 0 2.2rem; color: #8c97aa; font-size: .62rem; text-align: center; }
.traffic-card-large { margin-top: 1rem; }
.traffic-card-large .chart-wrap svg { min-height: 20rem; }
.appointment-row { width: 100%; display: grid; grid-template-columns: 3rem .4rem 1fr auto; align-items: center; gap: .75rem; padding: 1rem 0; border: 0; border-top: 1px solid #edf0f4; background: transparent; text-align: left; cursor: pointer; }
.appointment-row:hover strong, .appointment-row:focus-visible strong { color: var(--blue); }
.appointment-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.appointment-row time { color: var(--navy); font-size: .72rem; font-weight: 800; }
.appointment-row > i { width: .4rem; height: 2.4rem; border-radius: 1rem; background: var(--mint); }
.appointment-row strong, .appointment-row small { display: block; }
.appointment-row strong { color: var(--navy); font-size: .78rem; }
.appointment-row small { margin-top: .15rem; color: #8a95a6; font-size: .65rem; }
.appointment-row > b { color: var(--blue); font-size: .62rem; text-transform: uppercase; }
.source-row { margin-top: 1rem; }
.source-row > div { display: flex; justify-content: space-between; color: #68758a; font-size: .7rem; }
.source-row strong { color: var(--navy); }
.source-row > i { display: block; height: .42rem; margin-top: .45rem; overflow: hidden; border-radius: 1rem; background: #edf0f5; }
.source-row > i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #6382fa); }
.table-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .85rem 0; border-top: 1px solid #edf0f4; color: #768298; font-size: .72rem; }
.table-row strong { color: var(--navy); }
.table-head { padding-top: 0; border-top: 0; color: #9aa4b4; font-size: .62rem; text-transform: uppercase; }
.traffic-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.traffic-heading h2 { margin: 0; color: var(--navy); font-size: 2rem; letter-spacing: -.045em; }
.traffic-heading > div > span { color: #7d899c; font-size: .82rem; }
.admin-eyebrow { margin: 0 0 .3rem; color: var(--blue); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.agenda-layout { display: grid; grid-template-columns: minmax(30rem, 1.35fr) minmax(20rem, .65fr); gap: 1rem; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.calendar-header h2 { margin: 0; color: var(--navy); font-size: 1.15rem; }
.calendar-header button { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 1px solid #dce2ea; border-radius: 50%; background: var(--white); color: var(--navy); cursor: pointer; }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.weekdays { margin-bottom: .5rem; color: #98a2b3; font-size: .62rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.calendar-grid { gap: .35rem; }
.calendar-grid button { position: relative; aspect-ratio: 1.18; border: 0; border-radius: .7rem; background: #f7f8fb; color: #4c5a72; font: 700 .72rem Inter, sans-serif; cursor: pointer; }
.calendar-grid button:hover:not(:disabled) { background: #edf1ff; color: var(--blue); }
.calendar-grid button.muted { color: #c8ced8; cursor: default; }
.calendar-grid button.selected { background: var(--blue); color: var(--white); box-shadow: 0 .6rem 1.2rem rgb(49 92 246 / 22%); }
.calendar-grid button > i { position: absolute; width: .35rem; height: .35rem; left: 50%; bottom: .45rem; border-radius: 50%; background: var(--mint); transform: translateX(-50%); }
.day-card-title > span { padding: .3rem .55rem; border-radius: 999px; background: #eef1f6; color: #67748a; font-size: .62rem; }
.day-appointments { display: grid; gap: .55rem; }
.day-appointment { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .7rem; padding: .85rem; border-radius: .7rem; background: #f6f8fb; }
.day-appointment time { color: var(--blue); font-size: .68rem; font-weight: 800; }
.day-appointment strong, .day-appointment span { display: block; }
.day-appointment strong { color: var(--navy); font-size: .72rem; }
.day-appointment span { color: #909bad; font-size: .6rem; }
.day-appointment-actions { display: flex; align-items: center; gap: .35rem; }
.day-appointment-actions .appointment-open { padding: .42rem .55rem; border: 0; border-radius: .45rem; background: #e8edff; color: var(--blue); font: 700 .58rem Inter, sans-serif; cursor: pointer; }
.day-appointment-actions .appointment-open:hover { background: #dce4ff; }
.day-appointment-actions .appointment-delete { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 0; background: transparent; color: #a2acba; font-size: 1.1rem; cursor: pointer; }
.appointment-detail-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1.5rem; overflow-y: auto; background: rgb(3 13 34 / 66%); backdrop-filter: blur(4px); }
.appointment-detail-modal { width: min(46rem, 100%); overflow: hidden; border-radius: 1.2rem; background: var(--white); box-shadow: 0 2rem 6rem rgb(0 10 34 / 35%); }
.appointment-detail-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.7rem 1.8rem; background: var(--navy); color: var(--white); }
.appointment-detail-modal header p { margin: 0 0 .25rem; color: var(--mint); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.appointment-detail-modal header h2 { margin: 0; color: var(--white); font-size: 1.45rem; }
.appointment-detail-modal header span { display: block; margin-top: .35rem; color: #c4cfe0; font-size: .72rem; text-transform: capitalize; }
.appointment-detail-modal header button { flex: none; display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 1px solid rgb(255 255 255 / 22%); border-radius: 50%; background: rgb(255 255 255 / 7%); color: var(--white); font-size: 1.25rem; cursor: pointer; }
.appointment-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: 1.6rem 1.8rem; }
.appointment-detail-item { min-width: 0; padding: 1rem; border-radius: .7rem; background: #f5f7fa; }
.appointment-detail-item > span, .appointment-detail-item > strong { display: block; }
.appointment-detail-item > span, .appointment-detail-note > span { color: #8b96a8; font-size: .6rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.appointment-detail-item > strong { margin-top: .3rem; overflow-wrap: anywhere; color: var(--navy); font-size: .72rem; }
.appointment-detail-item a { color: var(--blue); text-decoration: none; }
.appointment-detail-note { grid-column: 1 / -1; padding: 1.1rem; border: 1px solid #dfe4eb; border-radius: .7rem; }
.appointment-detail-note p { margin: .45rem 0 0; white-space: pre-wrap; color: #536178; font-size: .75rem; line-height: 1.65; }
.appointment-detail-modal > footer { display: flex; justify-content: flex-end; padding: 1rem 1.8rem 1.4rem; border-top: 1px solid #e7ebf1; }
.appointment-detail-modal > footer button { min-height: 2.7rem; padding: .6rem 1rem; border: 0; border-radius: 999px; background: var(--blue); color: var(--white); font: 800 .63rem Poppins, sans-serif; text-transform: uppercase; cursor: pointer; }
.empty-agenda { padding: 1.2rem; border: 1px dashed #d9e0e9; border-radius: .7rem; color: #8b96a8; font-size: .72rem; text-align: center; }
.appointment-form { display: grid; gap: .8rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid #e7ebf1; }
.appointment-form h3 { margin: 0; color: var(--navy); font-size: .85rem; }
.appointment-form label { display: grid; gap: .3rem; color: #7e899c; font-size: .62rem; font-weight: 700; }
.appointment-form input { width: 100%; min-height: 2.55rem; padding: .5rem .7rem; border: 1px solid #dce2ea; border-radius: .55rem; background: var(--white); color: var(--navy); font: .72rem Inter, sans-serif; }
.appointment-form > button { display: flex; min-height: 2.7rem; align-items: center; justify-content: space-between; padding: .6rem .8rem; border: 0; border-radius: .6rem; background: var(--blue); color: var(--white); font: 700 .7rem Inter, sans-serif; cursor: pointer; }
.empty-overview { margin: 1rem 0 0; padding: 1.4rem; border: 1px dashed #dbe1e9; border-radius: .7rem; color: #8995a7; font-size: .72rem; text-align: center; }
.website-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.website-summary-grid article, .website-summary-grid > .overview-summary-link { padding: 1.35rem; border: 1px solid #e1e6ed; border-radius: 1rem; background: var(--white); }
.website-summary-grid span, .website-summary-grid strong, .website-summary-grid small { display: block; }
.website-summary-grid span { color: #7c889b; font-size: .68rem; }
.website-summary-grid strong { margin: .45rem 0 .3rem; color: var(--navy); font-family: Poppins, sans-serif; font-size: 1.65rem; }
.website-summary-grid small { color: #8a96a8; font-size: .62rem; }
.website-summary-grid small.green { color: #118b78; }
.overview-summary-link { position: relative; width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.overview-summary-link:hover, .overview-summary-link:focus-visible { border-color: rgb(49 92 246 / 48%); box-shadow: 0 .65rem 1.5rem rgb(5 24 55 / 8%); outline: none; transform: translateY(-2px); }
.server-hostname { overflow-wrap: anywhere; font-size: clamp(.9rem, 1.45vw, 1.3rem) !important; }
.website-list { display: grid; gap: 1rem; }
.traffic-chart-card { margin-bottom: 1rem; }
.traffic-periods { display: flex; flex-wrap: wrap; gap: .4rem; }
.traffic-periods button { min-height: 2.2rem; padding: .45rem .7rem; border: 1px solid #d8dee8; border-radius: 999px; background: var(--white); color: #66748a; font: 750 .62rem Inter, sans-serif; cursor: pointer; }
.traffic-periods button:hover, .traffic-periods button.active { border-color: var(--blue); background: var(--blue); color: var(--white); }
.traffic-chart { min-height: 15rem; display: grid; grid-template-columns: repeat(14, minmax(1.7rem, 1fr)); align-items: stretch; gap: .5rem; padding-top: 1rem; overflow-x: auto; }
.traffic-chart.wide { grid-template-columns: repeat(24, minmax(1.55rem, 1fr)); }
.traffic-bar-column { min-height: 13.5rem; display: grid; grid-template-rows: 1.3rem 1fr 1.4rem; align-items: end; gap: .35rem; text-align: center; }
.traffic-bar-column > span { color: #7c889b; font-size: .56rem; }
.traffic-bar-column > i { width: 100%; min-height: 2px; align-self: end; border-radius: .35rem .35rem 0 0; background: linear-gradient(180deg, #4adfc9, var(--blue)); }
.traffic-bar-column > i.level-0 { height: 2px; background: #dfe5ee; }
.traffic-bar-column > i.level-1 { height: 10%; }.traffic-bar-column > i.level-2 { height: 20%; }.traffic-bar-column > i.level-3 { height: 30%; }.traffic-bar-column > i.level-4 { height: 40%; }.traffic-bar-column > i.level-5 { height: 50%; }
.traffic-bar-column > i.level-6 { height: 60%; }.traffic-bar-column > i.level-7 { height: 70%; }.traffic-bar-column > i.level-8 { height: 80%; }.traffic-bar-column > i.level-9 { height: 90%; }.traffic-bar-column > i.level-10 { height: 100%; }
.traffic-bar-column > small { min-height: 1rem; color: #8e99aa; font-size: .55rem; white-space: nowrap; }
.traffic-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.traffic-list-card { min-height: 15rem; }
.traffic-list { display: grid; }
.traffic-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.5rem; align-items: center; gap: .75rem; padding: .72rem 0; border-top: 1px solid #edf0f4; }
.traffic-list > div:first-child { border-top: 0; }
.traffic-list span { overflow: hidden; color: #647188; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.traffic-list strong { color: var(--navy); font-size: .7rem; }
.traffic-list small { color: #8c97a8; font-size: .6rem; text-align: right; }
.traffic-donut-card { min-height: 15rem; }
.traffic-donut-layout { min-height: 10rem; display: grid; grid-template-columns: minmax(8rem, .85fr) 1.15fr; align-items: center; gap: 1.2rem; }
.traffic-donut { position: relative; display: grid; place-items: center; }
.traffic-donut svg { width: min(10rem, 100%); overflow: visible; transform: rotate(-90deg); }
.traffic-donut-track, .traffic-donut-segment { fill: none; stroke-width: 16; }
.traffic-donut-track { stroke: #edf1f6; }
.traffic-donut-segment { stroke-linecap: butt; }
.traffic-donut > div { position: absolute; display: grid; place-items: center; text-align: center; }
.traffic-donut > div strong { color: var(--navy); font: 800 1.25rem Poppins, sans-serif; }
.traffic-donut > div span { color: #8b96a8; font-size: .56rem; text-transform: uppercase; }
.traffic-donut-legend { display: grid; gap: .65rem; }
.traffic-donut-legend > div { min-width: 0; display: grid; grid-template-columns: .65rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.traffic-donut-legend i { width: .55rem; height: .55rem; border-radius: 50%; }
.traffic-donut-legend span { overflow: hidden; color: #647188; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.traffic-donut-legend strong { color: var(--navy); font-size: .64rem; }
circle.traffic-donut-color-0 { stroke: #315cf6; } i.traffic-donut-color-0 { background: #315cf6; }
circle.traffic-donut-color-1 { stroke: #4adfc9; } i.traffic-donut-color-1 { background: #4adfc9; }
circle.traffic-donut-color-2 { stroke: #f4b84a; } i.traffic-donut-color-2 { background: #f4b84a; }
circle.traffic-donut-color-3 { stroke: #8e6df2; } i.traffic-donut-color-3 { background: #8e6df2; }
circle.traffic-donut-color-4 { stroke: #ee7185; } i.traffic-donut-color-4 { background: #ee7185; }
circle.traffic-donut-color-5 { stroke: #4f83a8; } i.traffic-donut-color-5 { background: #4f83a8; }
.traffic-privacy-note { margin: 1rem 0; padding: 1rem 1.2rem; border: 1px solid #d9e7e4; border-radius: .8rem; background: #effaf7; color: #4f6c68; font-size: .67rem; line-height: 1.6; }
.traffic-privacy-note strong { color: #246c61; }
.traffic-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1.1rem 1.25rem; border: 1px solid #e1e6ed; border-radius: 1rem; background: var(--white); }
.traffic-toolbar p, .traffic-toolbar h2 { margin: 0; }
.traffic-toolbar p { color: var(--blue); font-size: .56rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.traffic-toolbar h2 { margin-top: .2rem; color: var(--navy); font-size: 1rem; }
.traffic-exclusion-card { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(28rem, 1.2fr); gap: 1.5rem; margin-bottom: 1rem; border-color: #cce9e2; background: linear-gradient(135deg, #f3fbf8, #fff); }
.traffic-exclusion-copy p, .traffic-exclusion-copy h2 { margin: 0; }
.traffic-exclusion-copy p { color: #118b78; font-size: .58rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.traffic-exclusion-copy h2 { margin-top: .3rem; color: var(--navy); font-size: 1rem; line-height: 1.35; }
.traffic-exclusion-copy span { display: block; margin-top: .6rem; color: #61736f; font-size: .66rem; line-height: 1.6; }
.traffic-exclusion-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; border: 1px solid #d9ebe7; border-radius: .8rem; background: rgb(255 255 255 / 75%); }
.traffic-exclusion-metrics > div { min-width: 0; padding: .9rem; border-right: 1px solid #e2efec; }
.traffic-exclusion-metrics > div:last-child { border-right: 0; }
.traffic-exclusion-metrics span, .traffic-exclusion-metrics strong { display: block; }
.traffic-exclusion-metrics span { color: #78908a; font-size: .55rem; }
.traffic-exclusion-metrics strong { margin-top: .35rem; overflow-wrap: anywhere; color: var(--navy); font-size: .72rem; }
.traffic-exclusion-card > small { grid-column: 1 / -1; color: #6f827e; font-size: .58rem; line-height: 1.5; }
.traffic-marketplace-card { display: grid; grid-template-columns: minmax(17rem, 1fr) minmax(31rem, 1.35fr); gap: 1.4rem; align-items: center; margin-bottom: 1rem; border-color: #163a68; background: linear-gradient(135deg, #071735, #112d57); color: #fff; }
.traffic-marketplace-copy p, .traffic-marketplace-copy h2 { margin: 0; }
.traffic-marketplace-copy p { color: var(--aqua); font-size: .58rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.traffic-marketplace-copy h2 { margin-top: .3rem; color: #fff; font-size: 1.05rem; line-height: 1.35; }
.traffic-marketplace-copy > span { display: block; margin-top: .55rem; color: #bed0e7; font-size: .64rem; line-height: 1.55; }
.traffic-marketplace-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-top: .85rem; }
.traffic-marketplace-link input { min-width: 0; padding: .65rem .75rem; border: 1px solid rgb(255 255 255 / 22%); border-radius: .65rem; background: rgb(255 255 255 / 8%); color: #eaf2ff; font: inherit; font-size: .56rem; }
.traffic-marketplace-link button { padding: .65rem .85rem; border: 0; border-radius: .65rem; background: var(--aqua); color: var(--navy); font: 800 .57rem Poppins, sans-serif; cursor: pointer; }
.traffic-marketplace-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgb(255 255 255 / 14%); border-radius: .8rem; background: rgb(255 255 255 / 6%); }
.traffic-marketplace-metrics > div { min-width: 0; padding: 1rem .8rem; border-right: 1px solid rgb(255 255 255 / 12%); }
.traffic-marketplace-metrics > div:last-child { border-right: 0; }
.traffic-marketplace-metrics span, .traffic-marketplace-metrics strong { display: block; }
.traffic-marketplace-metrics span { color: #a9bdd8; font-size: .54rem; }
.traffic-marketplace-metrics strong { margin-top: .35rem; color: #fff; font: 800 clamp(.95rem, 1.7vw, 1.35rem) Poppins, sans-serif; }
.traffic-live { display: grid; grid-template-columns: auto auto; align-items: center; gap: .05rem .45rem; padding-right: 1rem; border-right: 1px solid #e4e8ef; }
.traffic-live i { width: .55rem; height: .55rem; border-radius: 50%; background: #1fbc9f; box-shadow: 0 0 0 .25rem rgb(31 188 159 / 12%); }
.traffic-live strong { color: var(--navy); font-size: .85rem; }
.traffic-live span { grid-column: 1 / -1; color: #8490a3; font-size: .55rem; }
.traffic-periods button:disabled { opacity: .55; cursor: wait; }
.traffic-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.traffic-metric-grid article { min-width: 0; padding: 1.1rem; border: 1px solid #e1e6ed; border-radius: .9rem; background: var(--white); }
.traffic-metric-grid span, .traffic-metric-grid strong, .traffic-metric-grid small, .traffic-metric-grid em { display: block; }
.traffic-metric-grid span { overflow: hidden; color: #78859a; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.traffic-metric-grid strong { margin: .4rem 0 .35rem; color: var(--navy); font: 800 clamp(1.1rem, 2vw, 1.55rem) Poppins, sans-serif; }
.traffic-metric-grid small { min-height: 1.4rem; font-size: .54rem; line-height: 1.35; }
.traffic-metric-grid em { margin-top: .25rem; color: #98a2b2; font-size: .52rem; font-style: normal; }
.traffic-change.positive { color: #118b78; }.traffic-change.negative { color: #b14b45; }.traffic-change.neutral { color: #8a96a8; }
.traffic-chart-legend { display: flex; flex-wrap: wrap; gap: .8rem; color: #758196; font-size: .59rem; }
.traffic-chart-legend span { display: flex; align-items: center; gap: .35rem; }
.traffic-chart-legend i { width: .65rem; height: .65rem; border-radius: .18rem; }.traffic-chart-legend i.views { background: var(--blue); }.traffic-chart-legend i.sessions { background: var(--mint); }
.traffic-series-chart { min-height: 15rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr)); align-items: stretch; gap: .45rem; padding-top: 1rem; overflow-x: auto; }
.traffic-series-column { min-width: 2rem; min-height: 13.5rem; display: grid; grid-template-rows: 1.3rem 1fr 1.4rem; gap: .35rem; text-align: center; }
.traffic-series-column > span, .traffic-series-column > small { color: #8b96a8; font-size: .54rem; }.traffic-series-column > small { align-self: end; white-space: nowrap; }
.traffic-series-column > div { display: flex; align-items: end; justify-content: center; gap: 2px; }
.traffic-series-bar { width: min(45%, .9rem); min-height: 2px; border-radius: .25rem .25rem 0 0; }.traffic-series-bar.views { background: var(--blue); }.traffic-series-bar.sessions { background: var(--mint); }
.traffic-series-bar.level-0 { height: 2px; opacity: .25; }.traffic-series-bar.level-1 { height: 10%; }.traffic-series-bar.level-2 { height: 20%; }.traffic-series-bar.level-3 { height: 30%; }.traffic-series-bar.level-4 { height: 40%; }.traffic-series-bar.level-5 { height: 50%; }.traffic-series-bar.level-6 { height: 60%; }.traffic-series-bar.level-7 { height: 70%; }.traffic-series-bar.level-8 { height: 80%; }.traffic-series-bar.level-9 { height: 90%; }.traffic-series-bar.level-10 { height: 100%; }
.traffic-dashboard-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; margin-bottom: 1rem; }
.traffic-table-card { min-width: 0; margin-bottom: 1rem; }
.traffic-dashboard-grid > .traffic-table-card { margin-bottom: 0; }
.traffic-data-table { overflow-x: auto; }
.traffic-data-table > div { min-width: 32rem; display: grid; align-items: center; gap: .8rem; padding: .72rem 0; border-top: 1px solid #edf0f4; }
.traffic-data-table.traffic-columns-3 > div { grid-template-columns: minmax(12rem, 1fr) repeat(2, minmax(4rem, auto)); }
.traffic-data-table.traffic-columns-4 > div { grid-template-columns: minmax(12rem, 1fr) repeat(3, minmax(4rem, auto)); }
.traffic-data-table.traffic-columns-5 > div { grid-template-columns: minmax(12rem, 1fr) repeat(4, minmax(4rem, auto)); }
.traffic-data-table > div > span { min-width: 0; }.traffic-data-table > div > span strong, .traffic-data-table > div > span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traffic-data-table > div > span strong { color: #536178; font-size: .67rem; }.traffic-data-table > div > span small { margin-top: .18rem; color: #98a2b2; font-size: .53rem; }
.traffic-data-table b { color: var(--navy); font-size: .65rem; text-align: right; }
.traffic-data-table .traffic-table-head { border-top: 0; color: #8b96a8; font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.traffic-table-head span:not(:first-child) { text-align: right; }
.traffic-funnel { display: grid; gap: .65rem; }
.traffic-funnel > div { display: grid; grid-template-columns: minmax(8rem, 1fr) auto minmax(7rem, 1fr) 2.8rem; align-items: center; gap: .65rem; }
.traffic-funnel span { color: #647188; font-size: .65rem; }.traffic-funnel strong { color: var(--navy); font-size: .66rem; }.traffic-funnel small { color: #8793a6; font-size: .56rem; text-align: right; }
.traffic-funnel > div > div { height: .48rem; overflow: hidden; border-radius: 999px; background: #edf1f6; }.traffic-funnel i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--mint)); }
.traffic-funnel i.level-0 { width: 0; }.traffic-funnel i.level-1 { width: 10%; }.traffic-funnel i.level-2 { width: 20%; }.traffic-funnel i.level-3 { width: 30%; }.traffic-funnel i.level-4 { width: 40%; }.traffic-funnel i.level-5 { width: 50%; }.traffic-funnel i.level-6 { width: 60%; }.traffic-funnel i.level-7 { width: 70%; }.traffic-funnel i.level-8 { width: 80%; }.traffic-funnel i.level-9 { width: 90%; }.traffic-funnel i.level-10 { width: 100%; }
.traffic-performance-card { margin-top: 1rem; }
.traffic-performance-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.traffic-performance-grid > div { padding: .9rem; border-radius: .7rem; background: #f5f7fa; }.traffic-performance-grid span, .traffic-performance-grid strong, .traffic-performance-grid small { display: block; }
.traffic-performance-grid span { color: #7d899c; font-size: .57rem; }.traffic-performance-grid strong { margin: .35rem 0; color: var(--navy); font-size: .76rem; }.traffic-performance-grid small { color: #98a2b2; font-size: .52rem; line-height: 1.4; }
@media (max-width: 1250px) { .traffic-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.traffic-performance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .traffic-toolbar { grid-template-columns: 1fr auto; }.traffic-toolbar .traffic-periods { grid-column: 1 / -1; }.traffic-exclusion-card, .traffic-marketplace-card { grid-template-columns: 1fr; }.traffic-exclusion-card > small { grid-column: auto; }.traffic-dashboard-grid { grid-template-columns: 1fr; }.traffic-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.traffic-performance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .traffic-toolbar { grid-template-columns: 1fr; }.traffic-live { padding: 0 0 .8rem; border-right: 0; border-bottom: 1px solid #e4e8ef; }.traffic-toolbar .traffic-periods { grid-column: auto; }.traffic-exclusion-metrics { grid-template-columns: 1fr 1fr; }.traffic-exclusion-metrics > div:nth-child(2) { border-right: 0; }.traffic-exclusion-metrics > div:nth-child(-n+2) { border-bottom: 1px solid #e2efec; }.traffic-marketplace-link { grid-template-columns: 1fr; }.traffic-marketplace-metrics { grid-template-columns: 1fr 1fr; }.traffic-marketplace-metrics > div { border-bottom: 1px solid rgb(255 255 255 / 12%); }.traffic-marketplace-metrics > div:nth-child(2n) { border-right: 0; }.traffic-marketplace-metrics > div:last-child { grid-column: 1 / -1; border-bottom: 0; }.traffic-metric-grid, .traffic-performance-grid { grid-template-columns: 1fr; }.traffic-funnel > div { grid-template-columns: minmax(7rem, 1fr) auto; }.traffic-funnel > div > div { grid-column: 1 / -1; }.traffic-funnel small { display: none; } }
.managed-site-card { padding: 0; overflow: hidden; }
.managed-site-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.6rem; border-bottom: 1px solid #e8ecf2; }
.site-avatar { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border-radius: .85rem; background: linear-gradient(145deg, var(--blue), #173a7e); color: var(--white); font-family: Poppins, sans-serif; font-size: 1.2rem; font-weight: 800; }
.managed-site-head p { margin: 0; color: #8792a4; font-size: .64rem; text-transform: uppercase; }
.managed-site-head h2 { margin: .1rem 0; color: var(--navy); font-size: 1.2rem; }
.managed-site-head a { color: var(--blue); font-size: .65rem; text-decoration: none; }
.site-status { display: flex; align-items: center; gap: .45rem; padding: .5rem .75rem; border-radius: 999px; background: #fff8e7; color: #9c6d0e; font-size: .65rem; font-weight: 800; }
.site-status i { width: .45rem; height: .45rem; border-radius: 50%; background: #e6a82c; }
.site-health-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #e8ecf2; }
.site-health-grid > div { padding: 1.35rem 1.6rem; border-right: 1px solid #e8ecf2; }
.site-health-grid > div:last-child { border-right: 0; }
.site-health-grid span, .site-health-grid strong, .site-health-grid small { display: block; }
.site-health-grid > div > span { color: #929cad; font-size: .62rem; text-transform: uppercase; }
.site-health-grid strong { margin: .45rem 0 .15rem; color: var(--navy); font-size: .76rem; }
.site-health-grid small { color: #929cad; font-size: .6rem; }
.status-dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; }
.status-dot.green { background: var(--mint-dark); }
.site-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1.6rem; }
.site-detail-block { padding: 1.15rem; border-radius: .8rem; background: #f7f8fb; }
.site-detail-block h3 { margin: 0 0 .9rem; color: var(--navy); font-size: .76rem; }
.site-detail-block dl { margin: 0; }
.site-detail-block dl > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .55rem 0; border-top: 1px solid #e6eaf0; font-size: .62rem; }
.site-detail-block dt { color: #8b96a8; }
.site-detail-block dd { margin: 0; color: #48566e; font-weight: 700; text-align: right; }
.pending-label { padding: .22rem .4rem; border-radius: .35rem; background: #fff0cf; color: #9d6c09; font-size: .55rem; }
.availability-layout { display: grid; grid-template-columns: minmax(28rem, .9fr) minmax(30rem, 1.1fr); align-items: start; gap: 1rem; }
.availability-form { display: grid; gap: 1.5rem; }
.availability-range { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.availability-form label { display: grid; gap: .4rem; color: #79869a; font-size: .67rem; font-weight: 800; }
.availability-form input { width: 100%; min-height: 2.8rem; padding: .6rem .75rem; border: 1px solid #d8dee8; border-radius: .6rem; background: var(--white); color: var(--navy); font: 700 .72rem Inter, sans-serif; }
.availability-form fieldset { min-width: 0; margin: 0; padding: 1.1rem; border: 1px solid #e1e6ed; border-radius: .75rem; }
.availability-form legend { padding: 0 .35rem; color: var(--navy); font-size: .72rem; font-weight: 800; }
.weekday-options { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.weekday-options button { min-height: 2.7rem; border: 1px solid #dbe1e9; border-radius: .55rem; background: #f7f8fb; color: #7b8799; font: 800 .68rem Inter, sans-serif; cursor: pointer; }
.weekday-options button.selected { border-color: var(--blue); background: var(--blue); color: var(--white); box-shadow: 0 .45rem .9rem rgb(49 92 246 / 15%); }
.chosen-times { display: flex; flex-wrap: wrap; gap: .5rem; }
.chosen-times button { display: inline-flex; min-height: 2.45rem; align-items: center; gap: .65rem; padding: .45rem .65rem; border: 1px solid #cfd8e5; border-radius: 999px; background: #f5f8fc; color: var(--navy); cursor: pointer; }
.chosen-times strong { font-size: .68rem; }
.chosen-times span { color: #9aa5b5; font-size: 1rem; }
.add-time { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: .8rem; }
.add-time button { padding: .6rem .8rem; border: 1px solid var(--blue); border-radius: .6rem; background: var(--white); color: var(--blue); font: 800 .65rem Inter, sans-serif; cursor: pointer; }
.availability-save { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; padding: .7rem .9rem; border: 0; border-radius: .65rem; background: var(--blue); color: var(--white); font: 800 .7rem Poppins, sans-serif; text-transform: uppercase; cursor: pointer; }
.availability-save:disabled { opacity: .6; cursor: wait; }
.availability-success { margin: 0; padding: .75rem .85rem; border-radius: .6rem; background: #e5faf5; color: #118b78; font-size: .68rem; font-weight: 700; line-height: 1.5; }
.availability-days { display: grid; gap: .8rem; }
.availability-day { display: grid; grid-template-columns: minmax(11rem, .8fr) 1.2fr; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid #e8ecf2; }
.availability-day:first-child { padding-top: 0; border-top: 0; }
.availability-day > div:first-child strong, .availability-day > div:first-child span { display: block; }
.availability-day > div:first-child strong { color: var(--navy); font-size: .72rem; text-transform: capitalize; }
.availability-day > div:first-child span { margin-top: .2rem; color: #929cad; font-size: .6rem; }
.availability-day > div:last-child { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .4rem; }
.availability-day button { display: inline-flex; align-items: center; gap: .5rem; padding: .42rem .58rem; border: 1px solid #d7deea; border-radius: .45rem; background: #f7f9fc; color: var(--navy); cursor: pointer; }
.availability-day button span { font-size: .65rem; font-weight: 800; }
.availability-day button small { color: #9aa5b5; font-size: .7rem; }
.availability-day button:hover:not(:disabled) { border-color: #e4a9a4; background: #fff4f3; }
.availability-day button.booked { border-color: #b9eadf; background: #eafaf6; cursor: default; }
.availability-day button.booked small { color: #118b78; font-size: .52rem; text-transform: uppercase; }
.availability-more { margin: 1rem 0 0; color: #7f8b9e; font-size: .65rem; text-align: center; }

@media (max-width: 1160px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header > nav:not(.mobile-menu) { display: none; }
  .mobile-menu-toggle { display: grid; }
  .site-header .mobile-menu { position: fixed; z-index: 71; top: 1rem; right: 1rem; width: min(27rem, calc(100vw - 2rem)); min-height: calc(100vh - 2rem); display: flex; align-items: stretch; flex-direction: column; justify-content: center; gap: .35rem; padding: 6rem 2rem 2rem; border-radius: 1.6rem; background: var(--white); box-shadow: 0 1.5rem 5rem rgb(0 8 25 / 28%); opacity: 0; pointer-events: none; transform: translateX(110%); transition: opacity .22s ease, transform .22s ease; }
  .site-header .mobile-menu.open { opacity: 1; pointer-events: auto; transform: translateX(0); }
  .site-header .mobile-menu a { padding: .85rem 0; border-bottom: 1px solid var(--line); color: var(--navy); font-size: clamp(1.1rem, 3vw, 1.45rem); text-decoration: none; }
  .site-header .mobile-menu a::after { display: none; }
  .site-header .mobile-menu .mobile-booking-link { min-height: 3.6rem; display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding: .75rem 1.1rem; border: 0; border-radius: 999px; background: var(--blue); color: var(--white); font-size: .85rem; text-transform: uppercase; }
  .menu-backdrop { position: fixed; z-index: 70; inset: 0; display: none; border: 0; background: rgb(2 10 25 / 56%); }
  .menu-backdrop.open { display: block; }
  .promise-grid, .why-grid { gap: 4rem; }
  .service-card-content { padding-inline: 1.5rem; }
  .service-card-content > a { left: 1.5rem; }
  .footer-main { grid-template-columns: 1.5fr repeat(2, 1fr); }
  .footer-main > div:last-child { grid-column: 2; }
}

@media (max-width: 1100px) {
  .admin-shell { grid-template-columns: 13.5rem 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .admin-grid-main, .agenda-layout { grid-template-columns: 1fr; }
  .website-summary-grid, .site-health-grid { grid-template-columns: 1fr 1fr; }
  .site-health-grid > div:nth-child(2) { border-right: 0; }
  .site-health-grid > div:nth-child(-n+2) { border-bottom: 1px solid #e8ecf2; }
  .site-details-grid { grid-template-columns: 1fr; }
  .availability-layout { grid-template-columns: 1fr; }
  .traffic-insight-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .page-width { width: min(100% - 2rem, var(--page)); }
  .site-header { top: 1rem; width: calc(100% - 2rem); min-height: 4.6rem; border-radius: 1.3rem; }
  .brand-logo { width: 8.75rem; }
  .mark { width: 2.2rem; height: 2.2rem; }
  .brand strong { font-size: 1.35rem; }
  .header-button { min-height: 3.1rem; padding: .7rem 1rem; font-size: .72rem; }
  .hero { min-height: 50rem; background-position: 62% center; }
  .hero-overlay { background: linear-gradient(90deg, rgb(5 16 37 / 98%), rgb(5 16 37 / 72%) 74%, rgb(5 16 37 / 35%)); }
  .hero-content { padding-top: 6rem; }
  .hero-content h1 { max-width: 41rem; font-size: clamp(3.3rem, 10vw, 5rem); }
  .hero-caption { display: none; }
  .promise-grid, .section-top, .why-grid, .process-heading, .service-banner-inner, .online-services-grid, .contact-grid { grid-template-columns: 1fr; }
  .promise-grid, .contact-grid { gap: 2.5rem; }
  .service-cards { grid-template-columns: 1fr; }
  .service-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .service-art { height: auto; min-height: 23rem; }
  .process-heading .kicker { margin-bottom: -1.7rem; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-grid article:nth-child(2) { border-right: 0; }
  .process-grid article:nth-child(n+3) { border-top: 1px solid rgb(255 255 255 / 12%); }
  .service-banner { min-height: 35rem; }
  .service-banner-inner .pill { justify-self: start; }
  .online-services-grid { gap: 3rem; }
  .audience-inner { grid-template-columns: 1fr; gap: 1.2rem; padding-block: 2rem; }
  .audience-inner > div { justify-content: flex-start; flex-wrap: wrap; gap: 1rem 2rem; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; }
  .footer-brand-block { grid-column: 1 / -1; }
  .footer-main > div:last-child { grid-column: auto; }
  .booking-hero-grid, .booking-form { grid-template-columns: 1fr; }
  .booking-hero-grid { gap: 3rem; }
  .booking-step { padding: 2.5rem; }
  .booking-details-step { border-top: 1px solid #e1e6ed; border-left: 0; }
  .date-options { padding-bottom: .5rem; }
  .portfolio-hero-grid, .portfolio-intro, .portfolio-card, .portfolio-card:nth-child(even), .portfolio-cta-inner { grid-template-columns: 1fr; }
  .portfolio-card:nth-child(even) .portfolio-preview { order: 0; }
  .portfolio-card-copy { padding: 3rem; }
  .admin-shell { grid-template-columns: 5rem 1fr; }
  .admin-sidebar { padding-inline: .8rem; }
  .admin-brand strong, .admin-sidebar > p, .admin-sidebar nav button:not(.active) { font-size: 0; }
  .admin-sidebar nav button { justify-content: center; padding-inline: .3rem; }
  .admin-sidebar nav button.active { font-size: 0; }
  .admin-sidebar-bottom a { justify-content: center; font-size: 0; }
  .admin-sidebar-bottom a span { font-size: .9rem; }
  .admin-sidebar-bottom small { display: none; }
  .admin-content { padding-inline: 1.25rem; }
  .admin-topbar { min-height: 7rem; }
  .admin-grid-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .header-button span { display: none; }
  .hero { min-height: 46rem; background-position: 68% center; }
  .hero-overlay { background: linear-gradient(90deg, rgb(5 16 37 / 98%) 0%, rgb(5 16 37 / 88%) 62%, rgb(5 16 37 / 54%) 100%); }
  .hero-content { padding-top: 6.5rem; }
  .hero-content h1 { font-size: clamp(2.9rem, 15vw, 4.1rem); }
  .hero-lead { font-size: .95rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .promise, .services, .why, .process, .online-services, .contact { padding-block: 5.5rem; }
  .promise h2, .service-banner h2, .section-top h2, .why h2, .process h2, .contact h2 { font-size: 2.45rem; }
  .section-top { align-items: start; }
  .section-top > .outline-link { justify-self: start; }
  .service-card { display: block; }
  .service-art { min-height: 18rem; }
  .service-card-content { min-height: 23rem; }
  .why-visual { min-height: 25rem; }
  .dashboard { width: 88%; }
  .dash-main { grid-template-columns: 1fr; }
  .bars { height: 4.5rem; }
  .process-heading .kicker { margin-bottom: -1rem; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid article, .process-grid article:not(:first-child) { min-height: auto; padding: 1.6rem 0; border-right: 0; border-top: 1px solid rgb(255 255 255 / 12%); }
  .process-grid article:first-child { border-top: 0; }
  .process-grid .process-icon { margin-bottom: 1.3rem; }
  .service-banner { min-height: 32rem; background-position: 70% center; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-bottom { min-height: auto; align-items: flex-start; flex-direction: column; gap: .7rem; padding-block: 1.5rem; }
  .footer-bottom div { align-items: flex-start; flex-wrap: wrap; }
  .back-to-top { right: 1rem; bottom: 1rem; }
  .header-actions .header-button { display: none; }
  .mobile-menu-toggle { width: 3rem; height: 3rem; }
  .site-header .mobile-menu { top: .5rem; right: .5rem; width: calc(100vw - 1rem); min-height: calc(100vh - 1rem); }
  .portfolio-hero { min-height: 39rem; padding-top: 11rem; }
  .portfolio-hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .portfolio-list { padding-block: 5.5rem; }
  .portfolio-preview { min-height: 22rem; }
  .portfolio-card-copy { padding: 2.2rem 1.5rem; }
  .portfolio-cta { padding-block: 5rem; }
  .legal-hero { min-height: 31rem; padding: 10.5rem 0 4rem; }
  .legal-hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .legal-content { padding-block: 3rem 5rem; }
  .legal-toc ol { columns: 1; }
  .legal-open-items { padding: 1.3rem; }
  .booking-hero { min-height: 38rem; padding: 10.5rem 0 4.5rem; }
  .booking-hero h1 { font-size: clamp(2.6rem, 12vw, 3.7rem); }
  .booking-section { padding-block: 3.5rem 5rem; }
  .booking-step { padding: 1.6rem 1.2rem; }
  .booking-fields { grid-template-columns: 1fr; }
  .booking-note { grid-column: auto; }
  .booking-contact-method { grid-column: auto; }
  .contact-method-options { grid-template-columns: 1fr; }
  .time-options { grid-template-columns: 1fr 1fr; }
  .booking-summary { align-items: stretch; flex-direction: column; }
  .booking-summary button { justify-content: space-between; }
  .booking-confirmation { padding: 3rem 1.5rem; }
  .booking-confirmation h1, .booking-confirmation h2 { font-size: 2rem; }
  .booking-confirmation-actions { align-items: stretch; flex-direction: column; }
  .booking-confirmation-actions button, .booking-confirmation-actions a { width: 100%; }
  .admin-shell { display: block; }
  .admin-sidebar { position: static; width: 100%; height: auto; display: grid; grid-template-columns: auto 1fr; align-items: center; padding: .8rem 1rem; }
  .admin-sidebar > p, .admin-sidebar-bottom { display: none; }
  .admin-sidebar nav { display: flex; justify-content: flex-end; }
  .admin-sidebar nav button, .admin-sidebar nav button.active, .admin-sidebar nav button:not(.active) { width: 2.6rem; min-height: 2.6rem; padding: .3rem; font-size: 0; }
  .admin-sidebar nav button > span { width: 1.8rem; height: 1.8rem; }
  .admin-content { padding: 0 1rem 3rem; }
  .admin-topbar { align-items: flex-start; flex-direction: column; justify-content: center; gap: .6rem; }
  .metric-grid { grid-template-columns: 1fr; }
  .traffic-heading { align-items: flex-start; flex-direction: column; }
  .calendar-card { padding-inline: .7rem; }
  .calendar-grid { gap: .18rem; }
  .calendar-grid button { border-radius: .5rem; }
  .day-appointment { grid-template-columns: 2.6rem 1fr; }
  .day-appointment-actions { grid-column: 2; justify-content: space-between; }
  .appointment-detail-backdrop { align-items: start; padding: .75rem; }
  .appointment-detail-grid { grid-template-columns: 1fr; padding: 1rem; }
  .appointment-detail-note { grid-column: auto; }
  .appointment-detail-modal > header { padding: 1.3rem; }
  .appointment-detail-modal > footer { padding-inline: 1rem; }
  .website-summary-grid, .site-health-grid { grid-template-columns: 1fr; }
  .site-health-grid > div { border-right: 0; border-bottom: 1px solid #e8ecf2; }
  .managed-site-head { grid-template-columns: auto 1fr; }
  .site-status { grid-column: 1 / -1; justify-self: start; }
  .site-details-grid { padding: 1rem; }
  .availability-range, .availability-day { grid-template-columns: 1fr; }
  .availability-day > div:last-child { justify-content: flex-start; }
  .weekday-options { grid-template-columns: repeat(4, 1fr); }
  .add-time { grid-template-columns: 1fr; }
}

/* Website APK scan en rapport */
.apk-scan-hero { padding-block: clamp(7rem, 10vw, 10rem) clamp(4.5rem, 8vw, 7rem); }
.apk-scan-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(22rem, .7fr); align-items: center; gap: clamp(2.5rem, 7vw, 7rem); }
.apk-hero-points { display: grid; gap: .6rem; margin: 1.7rem 0 0; padding: 0; list-style: none; }
.apk-hero-points li { position: relative; padding-left: 1.25rem; color: #d9e2ef; font-size: .82rem; line-height: 1.55; }
.apk-hero-points li::before { content: ""; position: absolute; width: .48rem; height: .48rem; left: 0; top: .43rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 .22rem rgb(74 223 201 / 12%); }
.apk-scan-card { padding: clamp(1.6rem, 3vw, 2.5rem); border: 1px solid rgb(255 255 255 / 17%); border-radius: 1.4rem; background: rgb(255 255 255 / 96%); box-shadow: 0 2rem 5rem rgb(0 8 25 / 26%); }
.apk-scan-card h2 { margin: .55rem 0 .8rem; color: var(--navy); font-size: clamp(1.55rem, 2.5vw, 2.25rem); }
.apk-scan-card > p:not(.kicker) { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.apk-scan-card > small { display: block; margin-top: 1rem; color: #77869b; font-size: .62rem; line-height: 1.55; }
.apk-scan-form { display: grid; gap: .7rem; margin-top: 1.35rem; }
.apk-scan-form > label, .apk-order-form > label:not(.apk-checkbox), .apk-order-fields label { color: var(--navy); font-size: .68rem; font-weight: 800; }
.apk-url-field { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid #cfd8e7; border-radius: .8rem; background: #f9fbfd; }
.apk-url-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 .2rem rgb(49 92 246 / 10%); }
.apk-url-field span { padding-left: 1rem; color: #78879d; font-size: .82rem; }
.apk-url-field input, .apk-order-form input[type="text"], .apk-order-form input[type="email"] { width: 100%; min-width: 0; min-height: 3.45rem; padding: .85rem 1rem; border: 0; background: transparent; color: var(--navy); font: 500 .88rem Inter, Arial, sans-serif; outline: none; }
.apk-order-form input[type="text"], .apk-order-form input[type="email"] { border: 1px solid #cfd8e7; border-radius: .75rem; background: #fbfcfe; }
.apk-order-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 .2rem rgb(49 92 246 / 10%); }
.apk-scan-form .services-primary-button, .apk-order-form .services-primary-button { width: 100%; border: 0; cursor: pointer; }
.apk-scan-form button:disabled, .apk-order-form button:disabled { opacity: .58; cursor: not-allowed; }
.apk-form-status { min-height: 1.5em; margin: 0; color: #748399; font-size: .65rem; line-height: 1.5; }
.apk-form-status.is-error { color: #a63f36; }.apk-form-status.is-success { color: #087967; }
.apk-results-section { scroll-margin-top: 2rem; padding: clamp(5rem, 8vw, 8rem) 0; background: var(--cloud); }
.apk-results-section[hidden] { display: none; }
.apk-result-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.apk-result-heading h2 { max-width: 50rem; margin: .55rem 0 0; color: var(--navy); }
.apk-result-heading > p { margin: 0 0 .35rem; color: var(--muted); font-size: .72rem; }
.apk-score-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 1rem; }
.apk-score-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.4rem; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: 1.25rem; background: var(--white); box-shadow: 0 1rem 3rem rgb(14 36 75 / 6%); }
.apk-score-ring { --apk-score: 0deg; width: 8.6rem; height: 8.6rem; display: grid; place-content: center; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--white) 56%, transparent 58%), conic-gradient(var(--mint-dark) var(--apk-score), #e7edf6 0); text-align: center; }
.apk-score-ring strong, .apk-score-ring span { display: block; }.apk-score-ring strong { color: var(--navy); font: 800 2.6rem/1 Poppins, Arial, sans-serif; }.apk-score-ring span { margin-top: .35rem; color: #7b899e; font-size: .58rem; text-transform: uppercase; }
.apk-score-card > div:last-child > p { margin: 0; color: var(--blue); font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.apk-score-card h3 { margin: .45rem 0; color: var(--navy); font-size: 1.15rem; }
.apk-score-card small { color: var(--muted); font-size: .68rem; line-height: 1.55; }
.apk-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.apk-category-grid article { display: grid; align-content: center; gap: .75rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--white); }
.apk-category-grid article > div { display: flex; justify-content: space-between; gap: .7rem; }
.apk-category-grid strong { color: var(--navy); font-size: .68rem; text-transform: uppercase; }.apk-category-grid span { color: var(--blue); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.apk-category-grid i { height: .45rem; overflow: hidden; border-radius: 999px; background: #e9eef6; }.apk-category-grid b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--mint-dark)); transition: width .5s ease; }
.apk-finding-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.apk-finding-grid > article { padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 1.2rem; background: var(--white); }
.kicker.orange { color: #d46045; }
.apk-finding-list { display: grid; gap: .7rem; margin-top: 1rem; }
.apk-finding-list article { position: relative; padding: .95rem 1rem .95rem 1.5rem; border-radius: .75rem; background: #f6f8fc; }
.apk-finding-list article::before { content: ""; position: absolute; width: .45rem; height: .45rem; left: .65rem; top: 1.12rem; border-radius: 50%; background: var(--mint-dark); }
.apk-finding-grid > article:last-child .apk-finding-list article::before { background: #d46045; }
.apk-finding-list strong, .apk-finding-list small { display: block; }.apk-finding-list strong { color: var(--navy); font-size: .7rem; text-transform: uppercase; }.apk-finding-list small { margin-top: .25rem; color: var(--muted); font-size: .66rem; line-height: 1.55; }
.apk-result-disclaimer { margin: 1rem 0 0; color: #718098; font-size: .65rem; line-height: 1.6; }
.apk-paid-report-section { scroll-margin-top: 2rem; padding: clamp(5rem, 9vw, 8rem) 0; background: linear-gradient(135deg, #07152f, #102b5d); }
.apk-paid-report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .78fr); align-items: center; gap: clamp(2.5rem, 7vw, 7rem); }
.apk-paid-report-copy h2 { max-width: 48rem; margin: .65rem 0 1.2rem; color: var(--white); }
.apk-paid-report-copy > p:not(.kicker) { color: #cad5e5; line-height: 1.75; }
.apk-paid-report-copy > ul { display: grid; gap: .65rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.apk-paid-report-copy > ul li { position: relative; padding-left: 1.2rem; color: #e2e8f2; font-size: .8rem; line-height: 1.55; }.apk-paid-report-copy > ul li::before { content: ""; position: absolute; width: .45rem; height: .45rem; left: 0; top: .44rem; border-radius: 50%; background: var(--mint); }
.apk-credit-note { padding: 1rem 1.15rem; border: 1px solid rgb(74 223 201 / 34%); border-radius: .8rem; background: rgb(74 223 201 / 8%); }
.apk-credit-note strong, .apk-credit-note p { display: block; margin: 0; }.apk-credit-note strong { color: var(--mint); font-size: .68rem; text-transform: uppercase; }.apk-credit-note p { margin-top: .35rem; color: #c9d6e7; font-size: .7rem; line-height: 1.6; }
.apk-order-card { overflow: hidden; border-radius: 1.25rem; background: var(--white); box-shadow: 0 2rem 5rem rgb(0 5 20 / 27%); }
.apk-order-price { padding: 1.5rem 1.7rem; background: var(--cloud); }.apk-order-price small, .apk-order-price strong, .apk-order-price span { display: block; }.apk-order-price small { color: var(--blue); font-size: .6rem; font-weight: 800; text-transform: uppercase; }.apk-order-price strong { margin-top: .45rem; color: var(--navy); font: 800 2.8rem/1 Poppins, Arial, sans-serif; }.apk-order-price span { margin-top: .4rem; color: var(--muted); font-size: .65rem; }
.apk-order-form { display: grid; gap: .65rem; padding: 1.5rem 1.7rem 1.7rem; }
.apk-order-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.apk-order-fields > div { display: grid; align-content: start; gap: .35rem; min-width: 0; }
.apk-order-fields .apk-order-wide { grid-column: 1 / -1; }
.apk-order-fields label small { color: var(--muted); font: inherit; font-weight: 500; }
.apk-checkbox { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .65rem; margin-top: .25rem; color: #56667d; font-size: .63rem; line-height: 1.55; }.apk-checkbox input { width: 1.05rem; height: 1.05rem; margin: .08rem 0 0; accent-color: var(--blue); }.apk-checkbox a { color: var(--blue); font-weight: 700; }
.apk-four-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.apk-manual-section { background: var(--white); }
.apk-manual-price { display: flex; align-items: baseline; gap: .55rem; margin: 1.35rem 0 1rem; }.apk-manual-price strong { color: var(--navy); font: 800 2rem/1 Poppins, Arial, sans-serif; }.apk-manual-price span { color: var(--muted); font-size: .66rem; text-transform: uppercase; }
.apk-order-status-hero { min-height: 70vh; display: grid; place-items: center; padding: clamp(8rem, 12vw, 12rem) 0; }
.apk-order-status-wrap { max-width: 58rem; text-align: center; }.apk-order-status-wrap h1 { margin: .7rem auto 1.2rem; color: var(--white); }.apk-order-status-wrap > p:not(.kicker) { max-width: 48rem; margin-inline: auto; color: #d3ddeb; line-height: 1.75; }.apk-order-status-wrap .website-service-actions { justify-content: center; }.apk-order-status-wrap > small { display: block; margin-top: 1.5rem; color: #9cacbf; font-size: .64rem; }.apk-status-credit { max-width: 42rem; margin: 2rem auto 0; text-align: left; }

@media (max-width: 1040px) {
  .apk-scan-hero-grid, .apk-paid-report-grid { grid-template-columns: 1fr; }
  .apk-scan-card, .apk-order-card { max-width: 42rem; }
  .apk-four-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .apk-score-layout, .apk-finding-grid { grid-template-columns: 1fr; }
  .apk-result-heading { align-items: flex-start; flex-direction: column; gap: .6rem; }
}
@media (max-width: 560px) {
  .apk-scan-hero { padding-block: 7rem 4rem; }
  .apk-scan-hero-grid { gap: 2rem; }
  .apk-scan-card { padding: 1.25rem; border-radius: 1rem; }
  .apk-url-field { grid-template-columns: 1fr; padding-top: .65rem; }.apk-url-field span { padding-inline: .85rem; }.apk-url-field input { min-height: 2.8rem; padding-top: .4rem; font-size: 1rem; }
  .apk-score-card { grid-template-columns: 1fr; text-align: center; }.apk-score-ring { width: 7.7rem; height: 7.7rem; margin-inline: auto; }
  .apk-category-grid, .apk-four-grid { grid-template-columns: 1fr; }
  .apk-paid-report-section { padding-block: 4.5rem; }.apk-paid-report-grid { gap: 2rem; }.apk-order-form, .apk-order-price { padding-inline: 1.2rem; }
  .apk-order-form input[type="text"], .apk-order-form input[type="email"] { min-height: 3.2rem; font-size: 1rem; }
  .apk-order-fields { grid-template-columns: 1fr; }
  .apk-order-fields .apk-order-wide { grid-column: auto; }
}

/* cPanel/PHP runtime additions */
.booking-loading { min-height: 18rem; display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 9rem 1.5rem 5rem; background: var(--cloud); }
.admin-login-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem; background: radial-gradient(circle at 80% 10%, rgb(74 223 201 / 18%), transparent 25rem), var(--navy); }
.admin-login-card { min-width: 0; width: min(31rem, 100%); padding: clamp(2rem, 6vw, 3.5rem); border-radius: 1.5rem; background: var(--white); box-shadow: 0 2rem 6rem rgb(0 0 0 / 28%); }
.admin-login-card > .brand { margin-bottom: 2.5rem; }
.admin-login-card h1 { margin: 0; color: var(--navy); font: 700 clamp(2rem, 7vw, 3rem)/1 Poppins, sans-serif; letter-spacing: -.05em; }
.admin-login-card > p:not(.kicker):not(.booking-error) { color: var(--muted); }
.admin-login-form { display: grid; gap: 1rem; margin-top: 1.7rem; }
.admin-login-form label { display: grid; gap: .4rem; color: #657187; font-size: .72rem; font-weight: 750; }
.admin-login-form input { min-width: 0; width: 100%; min-height: 3.3rem; padding: .75rem .9rem; border: 1px solid #d8dee7; border-radius: .7rem; color: var(--navy); font: 1rem Poppins, sans-serif; }
.admin-login-form input:focus { border-color: var(--blue); outline: 3px solid rgb(49 92 246 / 12%); }
.admin-login-form button { min-height: 3.4rem; display: flex; align-items: center; justify-content: center; padding: .8rem 1.2rem; border: 0; border-radius: 999px; background: var(--blue); color: var(--white); font: 800 .75rem Poppins, sans-serif; text-transform: uppercase; cursor: pointer; }
.admin-login-options { display: grid; gap: .85rem; margin-top: 1.15rem; }
.admin-login-options > a:first-child { justify-self: center; color: #526078; font-size: .72rem; font-weight: 750; text-decoration: underline; text-underline-offset: .2rem; }
.admin-password-button { min-width: 0; min-height: 3.25rem; display: flex; align-items: center; justify-content: center; padding: .75rem 1.1rem; border: 1px solid #cbd5e4; border-radius: 999px; background: var(--white); color: var(--navy); font: 800 .72rem Poppins, sans-serif; overflow-wrap: anywhere; text-align: center; text-decoration: none; text-transform: uppercase; white-space: normal; }
.admin-password-button:hover, .admin-password-button:focus-visible { border-color: var(--blue); color: var(--blue); outline: none; }
.admin-password-button-standalone { margin-top: 1.25rem; }
.admin-form-success { margin: 1rem 0 0; padding: .75rem .85rem; border-radius: .65rem; background: #e8f8f4; color: #087763 !important; font-size: .7rem; line-height: 1.55; }
.admin-back-link { display: inline-block; margin-top: 1.5rem; color: #657187; font-size: .75rem; font-weight: 700; text-decoration: none; }
.admin-date { text-align: right; }.admin-date span,.admin-date strong { display:block; }.admin-date span { color:#8b96a8;font-size:.62rem;text-transform:uppercase; }.admin-date strong{color:var(--navy);font-size:.78rem;text-transform:capitalize;}
.admin-sidebar-bottom form { padding: 0 .8rem; }.admin-sidebar-bottom form button { width:100%;padding:.7rem;border:1px solid rgb(255 255 255 / 12%);border-radius:.6rem;background:transparent;color:#b6c1d5;cursor:pointer; }
.status-online { color:#118b78 !important;font-weight:800; }.empty-state{margin:2rem 0;color:#8c97a9;font-size:.75rem;text-align:center;}
.appointment-detail{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.appointment-detail>div{min-width:0;padding:1rem;border-radius:.7rem;background:#f5f7fa}.appointment-detail>div.full{grid-column:1/-1}.appointment-detail span,.appointment-detail strong,.appointment-detail a{display:block}.appointment-detail span{color:#8b96a8;font-size:.58rem;font-weight:750;text-transform:uppercase}.appointment-detail strong,.appointment-detail a{margin-top:.25rem;overflow-wrap:anywhere;color:var(--navy);font-size:.72rem;text-decoration:none}.appointment-detail p{margin:.35rem 0 0;white-space:pre-wrap;color:#526078;font-size:.72rem}
.appointment-list{display:grid;gap:.5rem}.appointment-list button{width:100%;display:grid;grid-template-columns:3.3rem 1fr;align-items:center;gap:.75rem;padding:.75rem;border:1px solid #e1e6ed;border-radius:.7rem;background:#fafbfc;color:var(--navy);text-align:left;cursor:pointer}.appointment-list button.active{border-color:var(--blue);background:rgb(49 92 246 / 6%)}.appointment-list button>span{font-weight:850}.appointment-list strong,.appointment-list small{display:block}.appointment-list small{color:#8b96a8;font-size:.6rem;text-transform:capitalize}.delete-appointment{border-color:#efc4c1!important;color:#ad3c35!important}
.website-data-table{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}.website-data-table>div{display:grid;grid-template-columns:.8fr 1.2fr;gap:1rem;padding:1rem 0;border-top:1px solid #e7ebf1}.website-data-table span{color:#8b96a8;font-size:.64rem}.website-data-table strong,.website-data-table a{color:var(--navy);font-size:.7rem;text-decoration:none;overflow-wrap:anywhere}.website-external-link{display:inline-flex;align-items:center;width:fit-content;text-decoration-thickness:1px;text-underline-offset:.22rem}.website-external-link:hover,.website-external-link:focus-visible{color:var(--blue);text-decoration:underline;outline:none}.admin-card-title h2 .website-heading-link{color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit}
.weekday-options label{cursor:pointer}.weekday-options input{position:absolute;opacity:0;pointer-events:none}.weekday-options span{min-height:2.7rem;display:grid;place-items:center;border:1px solid #dbe1e9;border-radius:.55rem;background:#f7f8fb;color:#7b8799;font-weight:800}.weekday-options input:checked+span{border-color:var(--blue);background:var(--blue);color:var(--white)}
.time-chip-editor{display:grid;gap:.75rem}.time-chip-editor>div:first-child{display:flex;flex-wrap:wrap;gap:.4rem}.time-chip-editor [data-time-remove]{padding:.45rem .6rem;border:1px solid #cdd7e4;border-radius:999px;background:#f6f8fb;color:var(--navy);font-weight:800;cursor:pointer}.time-chip-editor>div:last-child{display:grid;grid-template-columns:1fr auto;gap:.6rem}.time-chip-editor #add-time{padding:.6rem .85rem;border:1px solid var(--blue);border-radius:.6rem;background:var(--white);color:var(--blue);font-weight:800;cursor:pointer}
@media(max-width:760px){.appointment-detail,.website-data-table{grid-template-columns:1fr}.appointment-detail>div.full{grid-column:auto}.website-data-table>div{grid-template-columns:1fr;gap:.25rem}.admin-date{text-align:left}.admin-sidebar nav{overflow-x:auto;justify-content:flex-start}}

@media(max-width:760px){.traffic-heading{align-items:flex-start;flex-direction:column;gap:1rem}.traffic-insight-grid{grid-template-columns:1fr}.traffic-chart{grid-template-columns:repeat(14,minmax(1.8rem,1fr))}.traffic-chart.wide{grid-template-columns:repeat(24,minmax(1.8rem,1fr))}}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Grafisch Xenid-serverbeheer */
.server-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; padding: 1.35rem 1.5rem; border: 1px solid #dce3ed; border-radius: 1rem; background: var(--white); }
.server-toolbar p, .server-toolbar h2, .server-toolbar span { margin: 0; }
.server-toolbar p { color: var(--blue); font-size: .59rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.server-toolbar h2 { margin-top: .2rem; color: var(--navy); font-size: 1.15rem; letter-spacing: -.025em; }
.server-toolbar span { display: block; margin-top: .35rem; color: #7f8b9e; font-size: .65rem; line-height: 1.5; }
.server-toolbar button { min-height: 2.8rem; flex: none; padding: .65rem 1rem; border: 1px solid #cad4e3; border-radius: .7rem; background: #f8faff; color: var(--navy); font: 800 .67rem Inter, sans-serif; cursor: pointer; }
.server-toolbar button:hover, .server-toolbar button:focus-visible { border-color: var(--blue); color: var(--blue); outline: none; }
.server-toolbar button:disabled { opacity: .6; cursor: wait; }
.server-error { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid #eec9c6; border-radius: .75rem; background: #fff4f3; color: #9c3c36; font-size: .7rem; }
.server-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.25rem; }
.server-summary-grid article { min-width: 0; padding: 1.1rem 1.2rem; border: 1px solid #e0e5ed; border-radius: .9rem; background: var(--white); }
.server-summary-grid span, .server-summary-grid strong, .server-summary-grid small { display: block; }
.server-summary-grid span { color: #7b879a; font-size: .61rem; }
.server-summary-grid strong { margin: .35rem 0; overflow-wrap: anywhere; color: var(--navy); font: 800 1.05rem Poppins, sans-serif; }
.server-summary-grid small { color: #97a1b1; font-size: .56rem; }
.server-loading { display: grid; min-height: 10rem; place-items: center; color: #68758a; font-size: .75rem; }
.server-action-section { margin-top: 1.4rem; }
.server-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.server-section-heading p, .server-section-heading h2 { margin: 0; }
.server-section-heading p { color: #8792a4; font-size: .56rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.server-section-heading h2 { margin-top: .18rem; color: var(--navy); font-size: 1rem; }
.server-section-heading > span { padding: .34rem .55rem; border-radius: 999px; background: #e9edf3; color: #69768a; font-size: .56rem; font-weight: 800; }
.server-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.server-action-card { position: relative; min-width: 0; min-height: 6rem; display: grid; grid-template-columns: 2.55rem minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .95rem 1rem; overflow: hidden; border: 1px solid #dfe5ed; border-radius: .85rem; background: var(--white); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.server-action-card::before { position: absolute; content: ""; inset: 0 auto 0 0; width: .22rem; background: #315cf6; }
.server-action-card.kind-danger::before { background: #c44c45; }
.server-action-card:hover, .server-action-card:focus-visible { border-color: rgb(49 92 246 / 45%); box-shadow: 0 .7rem 1.5rem rgb(5 24 55 / 7%); outline: none; transform: translateY(-1px); }
.server-action-card:disabled { opacity: .6; cursor: wait; transform: none; }
.server-action-icon { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; border-radius: .65rem; background: #0b2144; color: var(--white); }
.server-action-icon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.server-action-card > span:nth-child(2) { min-width: 0; }
.server-action-card strong, .server-action-card small { display: block; }
.server-action-card strong { color: var(--navy); font-size: .7rem; }
.server-action-card small { margin-top: .3rem; color: #7d899b; font-size: .58rem; line-height: 1.45; }
.server-action-card > b { align-self: start; padding: .32rem .5rem; border-radius: 999px; background: #edf2ff; color: #315cf6; font-size: .51rem; white-space: nowrap; }
.server-action-card.kind-danger > b { background: #fff0ef; color: #ad3e38; }
.server-security-note { margin: 1.25rem 0 0; padding: .9rem 1rem; border: 1px solid #dde4ec; border-radius: .75rem; background: #f7f9fb; color: #788599; font-size: .61rem; line-height: 1.55; }
.server-security-note strong { color: #4d5c73; }
.server-dialog { width: min(45rem, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; overflow: hidden; border: 0; border-radius: 1.15rem; background: var(--white); box-shadow: 0 2rem 6rem rgb(0 10 34 / 35%); }
.server-dialog::backdrop { background: rgb(3 13 34 / 68%); backdrop-filter: blur(4px); }
.server-dialog-shell { max-height: calc(100vh - 2rem); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.server-dialog-shell > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.45rem 1.55rem; background: var(--navy); color: var(--white); }
.server-dialog-shell header p, .server-dialog-shell header h2 { margin: 0; }
.server-dialog-shell header p { color: var(--mint); font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.server-dialog-shell header h2 { margin-top: .25rem; color: var(--white); font-size: 1.2rem; letter-spacing: -.025em; }
.server-dialog-shell header button { width: 2.2rem; height: 2.2rem; flex: none; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 22%); border-radius: 50%; background: rgb(255 255 255 / 7%); color: var(--white); font-size: 1.2rem; cursor: pointer; }
.server-dialog-body { padding: 1.35rem 1.55rem; overflow-y: auto; }
.server-dialog-intro { margin: 0 0 1.1rem; color: #637087; font-size: .72rem; line-height: 1.6; }
.server-dialog-shell > footer { display: flex; justify-content: flex-end; gap: .65rem; padding: 1rem 1.55rem 1.2rem; border-top: 1px solid #e7ebf1; }
.server-dialog-shell > footer button { min-height: 2.65rem; padding: .6rem 1rem; border: 1px solid #d6dde8; border-radius: .65rem; background: var(--white); color: #59677d; font: 800 .63rem Inter, sans-serif; cursor: pointer; }
.server-dialog-shell > footer .server-primary { border-color: var(--blue); background: var(--blue); color: var(--white); }
.server-dialog-shell > footer .server-primary.danger { border-color: #b7433d; background: #b7433d; }
.server-form { display: grid; gap: .9rem; }
.server-field { display: grid; gap: .38rem; color: #66738a; font-size: .64rem; font-weight: 750; }
.server-field input, .server-field select { width: 100%; min-height: 3rem; padding: .65rem .75rem; border: 1px solid #d8dfe9; border-radius: .65rem; background: var(--white); color: var(--navy); font: .72rem Inter, sans-serif; }
.server-field input:focus, .server-field select:focus { border-color: var(--blue); outline: 3px solid rgb(49 92 246 / 10%); }
.server-checkbox { position: relative; cursor: pointer; }
.server-checkbox > input { position: absolute; opacity: 0; pointer-events: none; }
.server-checkbox > span { min-height: 3rem; display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border: 1px solid #d8dfe9; border-radius: .65rem; color: #59677e; font-size: .66rem; font-weight: 750; line-height: 1.45; }
.server-checkbox i { width: 1.15rem; height: 1.15rem; flex: none; display: grid; place-items: center; border: 1px solid #b8c3d2; border-radius: .3rem; }
.server-checkbox input:checked + span { border-color: #9eb0f5; background: #f5f7ff; color: #253d91; }
.server-checkbox input:checked + span i { border-color: var(--blue); background: var(--blue); }
.server-checkbox input:checked + span i::after { content: ""; width: .48rem; height: .25rem; border: solid var(--white); border-width: 0 0 .13rem .13rem; transform: translateY(-.06rem) rotate(-45deg); }
.server-checkbox input:focus-visible + span { outline: 3px solid rgb(49 92 246 / 12%); }
.server-form-error { margin: 0; padding: .75rem; border-radius: .6rem; background: #fff1f0; color: #a83e38; font-size: .66rem; }
.server-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-bottom: 1rem; }
.server-review > div { min-width: 0; padding: .8rem .9rem; border-radius: .65rem; background: #f5f7fa; }
.server-review span, .server-review strong { display: block; }
.server-review span { color: #8994a6; font-size: .55rem; font-weight: 750; text-transform: uppercase; }
.server-review strong { margin-top: .3rem; overflow-wrap: anywhere; color: var(--navy); font-size: .67rem; }
.server-warning { display: grid; gap: .25rem; margin-bottom: 1rem; padding: .8rem .9rem; border: 1px solid #ead2a0; border-radius: .65rem; background: #fff9ed; }
.server-warning strong { color: #825b0b; font-size: .62rem; text-transform: uppercase; }
.server-warning span { color: #806b40; font-size: .65rem; line-height: 1.5; }
.server-confirm-field { margin-bottom: .1rem; }
.server-confirm-field > span strong { color: #a23f39; }
.server-job-state { min-height: 12rem; display: grid; place-items: center; align-content: center; gap: .55rem; text-align: center; }
.server-job-state strong { color: var(--navy); font-size: .8rem; }
.server-job-state small { max-width: 28rem; color: #7c899d; font-size: .62rem; line-height: 1.5; }
.server-spinner { width: 2.2rem; height: 2.2rem; display: block; margin-bottom: .35rem; border: .22rem solid #dce4fb; border-top-color: var(--blue); border-radius: 50%; animation: server-spin .8s linear infinite; }
@keyframes server-spin { to { transform: rotate(360deg); } }
.server-result { display: grid; gap: .25rem; padding: .85rem .95rem; border: 1px solid #c9e7df; border-radius: .7rem; background: #f0faf7; }
.server-result strong { color: #087763; font-size: .72rem; }
.server-result span, .server-result p { margin: 0; color: #5c7d75; font-size: .63rem; line-height: 1.5; }
.server-result.failed { border-color: #edcbc8; background: #fff5f4; }
.server-result.failed strong { color: #a43d37; }
.server-result.failed span, .server-result.failed p { color: #84605d; }
.server-output { max-height: min(26rem, 48vh); margin: 1rem 0 0; padding: 1rem; overflow: auto; border-radius: .7rem; background: #07152f; color: #d9e5f8; font: .65rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .server-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .server-action-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .server-toolbar { align-items: stretch; flex-direction: column; gap: 1rem; }
  .server-toolbar button { width: 100%; }
  .server-action-card { grid-template-columns: 2.55rem minmax(0, 1fr); }
  .server-action-card > b { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) {
  .server-summary-grid, .server-review { grid-template-columns: 1fr; }
  .server-dialog { width: calc(100% - 1rem); max-height: calc(100vh - 1rem); }
  .server-dialog-shell { max-height: calc(100vh - 1rem); }
  .server-dialog-shell > header, .server-dialog-body, .server-dialog-shell > footer { padding-inline: 1rem; }
  .server-dialog-shell > footer { align-items: stretch; flex-direction: column-reverse; }
  .server-dialog-shell > footer button { width: 100%; }
}

/* Persoonlijke werkomgeving */
.work-overview-card { margin-bottom: 1rem; padding: 0; overflow: hidden; border-color: #193766; background: linear-gradient(135deg, #07152f, #123265); color: var(--white); box-shadow: 0 1.1rem 2.8rem rgb(7 21 47 / 13%); }
.work-overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.6rem 1.7rem; }
.work-overview-heading p, .work-toolbar p { margin: 0 0 .35rem; color: var(--mint); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.work-overview-heading h2 { margin: 0; color: var(--white); font-size: 1.35rem; letter-spacing: -.035em; }
.work-overview-heading span { display: block; margin-top: .4rem; color: #aebdd3; font-size: .75rem; }
.work-overview-heading > button, .work-primary-button { min-height: 2.85rem; flex: none; padding: .7rem 1.05rem; border: 0; border-radius: .7rem; background: var(--mint); color: var(--navy); font: 800 .7rem Inter, sans-serif; cursor: pointer; }
.work-overview-card.work-error { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; }
.work-overview-card.work-error p { margin: 0; color: var(--mint); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.work-overview-card.work-error h2 { margin: .25rem 0; color: var(--white); font-size: 1.05rem; }
.work-overview-card.work-error span { color: #b9c6d9; font-size: .72rem; }

.work-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; padding: 1.45rem 1.6rem; overflow: hidden; border-radius: 1rem; background: linear-gradient(135deg, #07152f, #163b75); color: var(--white); box-shadow: 0 .8rem 2rem rgb(7 21 47 / 11%); }
.work-toolbar h2 { margin: 0; color: var(--white); font-size: 1.35rem; letter-spacing: -.035em; }
.work-toolbar span { display: block; margin-top: .4rem; color: #b9c6d9; font-size: .75rem; }
.work-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.work-summary-grid article { min-width: 0; padding: 1.2rem 1.3rem; border: 1px solid #e1e6ed; border-radius: 1rem; background: var(--white); box-shadow: 0 .5rem 1.5rem rgb(19 38 75 / 3%); }
.work-summary-grid span, .work-summary-grid strong, .work-summary-grid small { display: block; }
.work-summary-grid span { color: #7c889b; font-size: .67rem; }
.work-summary-grid strong { margin: .4rem 0 .3rem; color: var(--navy); font: 700 1.7rem Poppins, sans-serif; }
.work-summary-grid small { min-height: 1.8em; color: #8a96a8; font-size: .61rem; line-height: 1.45; }
.work-subnav { display: flex; gap: .35rem; margin-bottom: 1rem; padding: .35rem; overflow-x: auto; border: 1px solid #e1e6ed; border-radius: .8rem; background: var(--white); }
.work-subnav button { min-height: 2.5rem; flex: none; padding: .55rem .9rem; border: 0; border-radius: .55rem; background: transparent; color: #68758b; font: 750 .68rem Inter, sans-serif; cursor: pointer; }
.work-subnav button:hover, .work-subnav button.active { background: #eef2ff; color: var(--blue); }
.work-layout { display: grid; grid-template-columns: minmax(30rem, 1fr) minmax(19rem, .36fr); align-items: start; gap: 1rem; }
.work-list-card { padding: 1.25rem; }
.work-task-list { display: grid; gap: .65rem; }
.work-task { position: relative; min-width: 0; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: start; border: 1px solid #e2e7ee; border-radius: .8rem; background: #fff; box-shadow: 0 .35rem 1rem rgb(19 38 75 / 2%); }
.work-task::before { content: ""; position: absolute; inset: .7rem auto .7rem 0; width: .18rem; border-radius: 1rem; background: #cfd7e4; }
.work-task.priority-high::before { background: #e35e57; }
.work-task.priority-low::before { background: #79baa9; }
.work-task.overdue { border-color: #efc7c4; background: #fffafa; }
.work-task.completed { background: #f7f9fb; opacity: .78; }
.work-task-complete { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; margin: .95rem 0 0 .75rem; border: 1px solid #bfc9d7; border-radius: 50%; background: transparent; color: transparent; cursor: pointer; }
.work-task-complete:hover, .work-task-complete:focus-visible { border-color: var(--mint-dark); color: var(--mint-dark); outline: none; }
.work-task-complete[aria-pressed="true"] { border-color: var(--mint-dark); background: var(--mint-dark); color: var(--white); }
.work-task-complete span { font-size: .72rem; font-weight: 900; }
.work-task-main { min-width: 0; display: grid; grid-template-columns: minmax(11rem, 1fr) auto; align-items: center; gap: 1.2rem; padding: .85rem .9rem .85rem .35rem; border: 0; background: transparent; color: var(--navy); text-align: left; cursor: pointer; }
.work-task-main:hover .work-task-title strong, .work-task-main:focus-visible .work-task-title strong { color: var(--blue); }
.work-task-main:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.work-task-title { min-width: 0; }
.work-task-title strong, .work-task-title small { display: block; }
.work-task-title strong { color: var(--navy); font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
.work-task.completed .work-task-title strong { text-decoration: line-through; text-decoration-color: #9da7b6; }
.work-task-title small { display: -webkit-box; margin-top: .25rem; overflow: hidden; color: #77849a; font-size: .65rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.work-task-meta { display: flex; max-width: 24rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .35rem; }
.work-task-meta small, .work-task-meta b { padding: .27rem .45rem; border-radius: 999px; background: #f0f3f7; color: #68758a; font-size: .56rem; font-style: normal; font-weight: 750; white-space: nowrap; }
.work-task-meta .work-status { background: #eaf0ff; color: #315cf6; }
.work-task-meta .status-in_progress { background: #fff4dc; color: #946719; }
.work-task-meta .status-waiting { background: #f2eafa; color: #735098; }
.work-task-meta .status-completed { background: #e4f6f1; color: #118b78; }
.work-task-meta .work-overdue { background: #fde9e7; color: #b44039; }
.work-task-checklist { grid-column: 2; display: grid; gap: .35rem; padding: 0 .9rem .85rem .35rem; }
.work-task-checklist button { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem 0; border: 0; background: transparent; color: #5f6d82; font: 650 .65rem/1.45 Inter, sans-serif; text-align: left; cursor: pointer; }
.work-task-checklist i { width: .95rem; height: .95rem; flex: none; margin-top: .02rem; border: 1px solid #bdc8d7; border-radius: .25rem; background: var(--white); }
.work-task-checklist button.done { color: #98a2b1; text-decoration: line-through; }
.work-task-checklist button.done i { border-color: var(--mint-dark); background: var(--mint-dark); box-shadow: inset 0 0 0 .2rem var(--white); }
.work-side { display: grid; gap: 1rem; }
.work-week-list { display: grid; }
.work-week-list > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid #edf0f4; }
.work-week-list > div:first-child { padding-top: 0; border-top: 0; }
.work-week-list span strong, .work-week-list span small { display: block; }
.work-week-list span strong { color: var(--navy); font-size: .67rem; text-transform: capitalize; }
.work-week-list span small { margin-top: .15rem; color: #8a95a6; font-size: .58rem; }
.work-week-list b { color: #53627a; font-size: .62rem; }
.work-activity-list { display: grid; gap: .75rem; }
.work-activity-list > div { display: grid; grid-template-columns: .55rem 1fr; gap: .65rem; }
.work-activity-list i { width: .48rem; height: .48rem; margin-top: .25rem; border-radius: 50%; background: var(--mint-dark); box-shadow: 0 0 0 .2rem rgb(21 157 139 / 10%); }
.work-activity-list strong, .work-activity-list small { display: block; }
.work-activity-list strong { color: var(--navy); font-size: .65rem; }
.work-activity-list small { margin-top: .15rem; color: #8793a5; font-size: .57rem; line-height: 1.45; }

.work-dialog { width: min(52rem, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; overflow: hidden; border: 0; border-radius: 1.1rem; background: var(--white); box-shadow: 0 2rem 6rem rgb(0 0 0 / 28%); }
.work-dialog::backdrop { background: rgb(4 13 31 / 66%); backdrop-filter: blur(3px); }
.work-dialog-shell { max-height: calc(100vh - 2rem); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.work-dialog header, .work-dialog footer { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.5rem; }
.work-dialog header { justify-content: space-between; border-bottom: 1px solid #e3e8ef; }
.work-dialog header p { margin: 0 0 .2rem; color: var(--blue); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.work-dialog header h2 { margin: 0; color: var(--navy); font-size: 1.2rem; }
.work-dialog header button { width: 2.2rem; height: 2.2rem; border: 1px solid #dbe1e9; border-radius: 50%; background: var(--white); color: #637087; font-size: 1.2rem; cursor: pointer; }
.work-form-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.4rem 1.5rem; overflow-y: auto; }
.work-form-body label { min-width: 0; display: grid; align-content: start; gap: .38rem; color: #5f6c81; font-size: .67rem; font-weight: 750; }
.work-form-body label > span { color: var(--navy); }
.work-form-body input, .work-form-body select, .work-form-body textarea { width: 100%; min-width: 0; padding: .72rem .8rem; border: 1px solid #ced7e3; border-radius: .65rem; background: #fbfcfe; color: var(--navy); font: .82rem Inter, sans-serif; }
.work-form-body input, .work-form-body select { min-height: 2.9rem; }
.work-form-body textarea { line-height: 1.55; resize: vertical; }
.work-form-body input:focus, .work-form-body select:focus, .work-form-body textarea:focus { border-color: var(--blue); outline: 3px solid rgb(49 92 246 / 10%); }
.work-form-body label > small { color: #8a96a8; font-size: .57rem; font-weight: 500; }
.work-form-body .work-field-full, .work-form-error { grid-column: 1 / -1; }
.work-dialog footer { justify-content: flex-end; border-top: 1px solid #e3e8ef; background: #f8f9fb; }
.work-dialog footer > span { flex: 1; }
.work-dialog footer button { min-height: 2.7rem; padding: .65rem .9rem; border: 1px solid #ccd5e1; border-radius: .65rem; background: var(--white); color: #5f6d82; font: 750 .66rem Inter, sans-serif; cursor: pointer; }
.work-dialog footer .work-primary-button { border-color: var(--blue); background: var(--blue); color: var(--white); }
.work-dialog footer .work-delete-button { border-color: #efc4c1; color: #ad3c35; }
.work-dialog button:disabled { cursor: wait; opacity: .6; }

@media (max-width: 1100px) {
  .work-summary-grid { grid-template-columns: 1fr 1fr; }
  .work-layout { grid-template-columns: 1fr; }
  .work-side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .work-toolbar, .work-overview-heading { align-items: flex-start; flex-direction: column; }
  .work-toolbar .work-primary-button, .work-overview-heading > button { width: 100%; }
  .work-task-main { grid-template-columns: 1fr; gap: .6rem; }
  .work-task-meta { justify-content: flex-start; }
  .work-side { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .work-summary-grid { grid-template-columns: 1fr; }
  .work-list-card { padding: .85rem; }
  .work-task { grid-template-columns: 2.35rem minmax(0, 1fr); }
  .work-task-complete { margin-left: .55rem; }
  .work-task-main { padding-right: .65rem; }
  .work-task-meta small, .work-task-meta b { white-space: normal; }
  .work-form-body { grid-template-columns: 1fr; padding: 1rem; }
  .work-form-body .work-field-full, .work-form-error { grid-column: auto; }
  .work-dialog header, .work-dialog footer { padding: 1rem; }
  .work-dialog footer { flex-wrap: wrap; }
  .work-dialog footer > span { display: none; }
  .work-dialog footer button { flex: 1; }
  .work-dialog footer .work-delete-button { flex-basis: 100%; }
}


/* Design update: compactere koppen en uitgebreide contentpagina's */
.hero h1 { font-size: clamp(2.75rem, 6vw, 5.35rem); line-height: .96; }
.portfolio-hero h1, .booking-hero h1, .page-hero h1 { font-size: clamp(2.35rem, 5vw, 4.6rem); line-height: 1.02; }
h2, .promise h2, .services h2, .why h2, .process h2, .online-services h2, .contact h2, .portfolio-intro h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.08; }
h3 { line-height: 1.22; }
.page-hero { background: var(--navy, #102f43); color: #fff; padding: 9rem 0 6rem; position: relative; overflow: hidden; }
.page-hero::after { content:""; position:absolute; width:28rem; height:28rem; border-radius:50%; right:-8rem; bottom:-13rem; background:rgba(119,220,188,.12); }
.page-hero-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(17rem,.65fr); gap:5rem; align-items:end; position:relative; z-index:1; }
.page-lead { font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.75; max-width:48rem; color:rgba(255,255,255,.8); margin:1.6rem 0 2rem; }
.page-hero-note { background:#fff; color:#173448; padding:2rem; border-radius:1.5rem; box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.14); }
.page-hero-note strong { font-size:1.35rem; display:block; margin-bottom:.75rem; }
.page-hero-note p { line-height:1.65; color:#536873; }
.page-hero-note span { display:block; border-top:1px solid #dfe8e5; margin-top:1.25rem; padding-top:1rem; color:#287b68; font-weight:700; font-size:.88rem; }
.detailed-services { padding:7rem 0; background:#f7f8f5; }
.detailed-service { display:grid; grid-template-columns:5rem 1fr; gap:2.25rem; max-width:68rem; padding:3.25rem 0; border-bottom:1px solid #d8e0dc; }
.detailed-service:first-child { padding-top:0; }
.detailed-service:last-child { border:0; padding-bottom:0; }
.service-number { width:3.7rem; height:3.7rem; border-radius:50%; background:#c7f2df; color:#173448; display:grid; place-items:center; font-weight:800; }
.detailed-service h2 { max-width:47rem; margin:.4rem 0 1.25rem; }
.detailed-service p { max-width:52rem; color:#536873; line-height:1.8; font-size:1.06rem; }
.service-facts { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.service-facts span { background:#fff; border:1px solid #dce6e1; border-radius:1rem; padding:1rem 1.2rem; color:#536873; }
.service-facts strong { color:#173448; display:block; margin-bottom:.2rem; }
.text-link { display:inline-flex; gap:.45rem; margin-top:1rem; color:#166a88; font-weight:800; text-decoration:none; }
.soft-cta { background:#e9f6f0; padding:5.5rem 0; }
.soft-cta-inner { display:flex; justify-content:space-between; align-items:end; gap:3rem; }
.soft-cta h2 { margin:.4rem 0 1rem; }
.soft-cta p { color:#536873; line-height:1.7; max-width:44rem; }
.workflow-steps { background:#f7f8f5; padding:6rem 0; }
.workflow-steps article { display:grid; grid-template-columns:8rem minmax(0,1fr); gap:2rem; padding:3.5rem 0; border-bottom:1px solid #d8e0dc; }
.workflow-steps article:first-child { padding-top:0; }
.workflow-steps article:last-child { border:0; padding-bottom:0; }
.workflow-steps article>span { font-size:3.2rem; font-weight:800; color:#b8d8ce; }
.workflow-steps h2 { margin:.35rem 0 1rem; max-width:48rem; }
.workflow-steps p { max-width:53rem; line-height:1.8; color:#536873; font-size:1.06rem; }
.workflow-principles { padding:6rem 0; }
.principle-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.principle-grid article { background:#f1f6f3; border-radius:1.2rem; padding:1.6rem; }
.principle-grid strong { font-size:1.1rem; color:#173448; }
.principle-grid p { color:#60717a; line-height:1.65; margin:.75rem 0 0; }
.application-showcase { padding:6rem 0; background:#f7f8f5; }
.application-feature { display:grid; grid-template-columns:minmax(0,.92fr) minmax(25rem,1.08fr); gap:4.5rem; align-items:center; padding:4.5rem 0; border-bottom:1px solid #d8e0dc; }
.application-feature.reverse .application-copy { order:2; }
.application-feature.reverse .product-shot { order:1; }
.application-copy h3, .managed-copy h3 { font-size:clamp(1.8rem,3vw,2.75rem); line-height:1.1; margin:.75rem 0 1.25rem; color:#173448; }
.application-copy p, .managed-copy p { color:#536873; line-height:1.75; }
.feature-label { display:inline-block; padding:.5rem .85rem; border-radius:999px; background:#c7f2df; color:#205d50; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.custom-note { background:#fff; border-left:4px solid #6ccbae; padding:1rem 1.2rem; border-radius:0 .8rem .8rem 0; }
.product-shot { background:#fff; border:10px solid #fff; border-radius:1.6rem; box-shadow:0 1.8rem 4rem rgba(21,52,72,.16); overflow:hidden; }
.shot-top { height:3rem; display:flex; align-items:center; justify-content:space-between; padding:0 1rem; background:#173448; color:#fff; font-size:.85rem; font-weight:700; }
.shot-top i { width:.65rem; height:.65rem; border-radius:50%; background:#80dfbf; }
.calendar-mock { padding:1.5rem; }
.calendar-head { display:flex; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.calendar-head span { color:#6d7e87; font-size:.84rem; }
.calendar-days { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; }
.calendar-days span { text-align:center; padding:.75rem .35rem; background:#f0f5f2; border-radius:.7rem; color:#6d7e87; line-height:1.7; }
.calendar-days .active { background:#c7f2df; color:#173448; }
.time-slots { display:flex; gap:.7rem; padding:1.2rem 0; }
.time-slots span { border:1px solid #d7e1dc; border-radius:.6rem; padding:.55rem .85rem; }
.time-slots .selected { background:#1c6d88; color:#fff; border-color:#1c6d88; }
.mock-button { background:#173448; color:#fff; padding:.8rem 1rem; border-radius:.7rem; text-align:center; font-weight:700; }
.insights-shot { padding-bottom:1.25rem; }
.metric-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:1.3rem; }
.metric-row>div { background:#f0f5f2; border-radius:.8rem; padding:1rem; }
.metric-row small,.metric-row strong,.metric-row em { display:block; }
.metric-row strong { font-size:1.7rem; color:#173448; margin:.3rem 0; }
.metric-row em { color:#248263; font-style:normal; font-size:.8rem; }
.chart-mock { height:9rem; display:flex; align-items:end; gap:.55rem; padding:0 1.4rem; border-bottom:1px solid #dce5e1; }
.chart-mock i { flex:1; background:linear-gradient(#6ccbae,#277893); border-radius:.35rem .35rem 0 0; }
.insight-bottom { display:flex; gap:1.5rem; align-items:center; padding:1.2rem 1.4rem 0; }
.donut { width:5rem; height:5rem; border-radius:50%; background:conic-gradient(#173448 0 54%,#6ccbae 54% 93%,#d7e4df 93%); position:relative; }
.donut::after { content:""; position:absolute; inset:1.25rem; background:#fff; border-radius:50%; }
.insight-bottom p { display:grid; gap:.35rem; font-size:.8rem; color:#60717a; }
.managed-websites { padding:7rem 0; }
.managed-project { display:grid; grid-template-columns:minmax(18rem,.72fr) minmax(0,1.28fr); gap:4rem; align-items:start; margin-top:3rem; }
.managed-copy ul { padding:0; list-style:none; display:grid; gap:.65rem; margin:1.5rem 0 2rem; }
.managed-copy li::before { content:"✓"; color:#287b68; font-weight:900; margin-right:.65rem; }
.site-gallery { display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:1fr 1fr; gap:1rem; }
.site-gallery a { position:relative; overflow:hidden; border-radius:1.2rem; min-height:12rem; background:#eee; }
.site-gallery a:first-child { grid-row:1/3; min-height:25rem; }
.site-gallery img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.site-gallery a:hover img { transform:scale(1.03); }
.site-gallery span { position:absolute; left:.8rem; right:.8rem; bottom:.8rem; padding:.65rem .8rem; border-radius:.65rem; background:rgba(255,255,255,.92); color:#173448; font-weight:700; font-size:.82rem; }
@media (max-width: 900px) {
  .page-hero-grid,.application-feature,.managed-project { grid-template-columns:1fr; gap:2.5rem; }
  .application-feature.reverse .application-copy,.application-feature.reverse .product-shot { order:initial; }
  .principle-grid { grid-template-columns:1fr 1fr; }
  .page-hero { padding:7.5rem 0 4.5rem; }
}
@media (max-width: 640px) {
  .hero h1 { font-size:clamp(2.45rem,12vw,3.45rem); }
  .portfolio-hero h1,.booking-hero h1,.page-hero h1 { font-size:clamp(2.15rem,10vw,3rem); }
  h2,.promise h2,.services h2,.why h2,.process h2,.online-services h2,.contact h2,.portfolio-intro h2 { font-size:clamp(1.8rem,8vw,2.5rem); }
  .detailed-service { grid-template-columns:1fr; gap:1rem; }
  .workflow-steps article { grid-template-columns:3.5rem minmax(0,1fr); gap:1rem; }
  .workflow-steps article>span { font-size:1.7rem; }
  .principle-grid { grid-template-columns:1fr; }
  .soft-cta-inner { display:block; }
  .soft-cta .pill { margin-top:1.5rem; }
  .application-feature { grid-template-columns:1fr; padding:3rem 0; }
  .product-shot { border-width:6px; }
  .site-gallery { grid-template-columns:1fr; grid-template-rows:auto; }
  .site-gallery a,.site-gallery a:first-child { grid-row:auto; min-height:15rem; }
  .service-facts { display:grid; }
}


/* Verfijning augustus 2026: compactere koppen */
.hero h1{font-size:clamp(2.35rem,5vw,4.45rem)}
.portfolio-hero h1,.booking-hero h1,.page-hero h1,.about-hero h1{font-size:clamp(2.05rem,4.15vw,3.75rem)}
.services-heading h2,.why-copy h2,.process-heading h2,.managed-websites h2,.application-showcase h2,.about-intro h2,.about-work h2{font-size:clamp(1.75rem,2.9vw,2.9rem)}

/* Dit zijn wij */
.about-hero{padding:7.5rem 0 5rem;background:linear-gradient(135deg,#f7faf8 0%,#edf5f1 100%)}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(30rem,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.about-hero-copy>p:not(.kicker){max-width:42rem;font-size:1.15rem;line-height:1.8;color:var(--text-soft);margin:1.5rem 0 2rem}
.about-hero-photo,.about-work figure{margin:0;position:relative}
.about-hero-photo img{width:100%;aspect-ratio:1.42;object-fit:cover;border-radius:2.2rem;box-shadow:0 2rem 5rem rgba(12,50,73,.16)}
.about-hero-photo figcaption,.about-work figcaption{position:absolute;left:1rem;bottom:1rem;padding:.55rem .8rem;border-radius:999px;background:rgba(255,255,255,.92);color:var(--navy);font-size:.78rem;font-weight:700}
.about-intro{padding:6rem 0 3rem;background:#fff}
.about-intro-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,7vw,7rem)}
.about-intro-grid>div:last-child{font-size:1.08rem;line-height:1.85;color:var(--text-soft)}
.about-intro-grid>div:last-child p+ p{margin-top:1rem}
.founders{padding:2rem 0 6rem;background:#fff}
.founder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.founder-grid article{overflow:hidden;border:1px solid #dce7e3;border-radius:1.75rem;background:#f8fbfa}
.founder-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center}
.founder-content{padding:1.8rem 2rem 2rem}
.founder-grid h2{margin:.35rem 0 .65rem;font-size:2rem}
.founder-grid article p:not(.kicker){color:var(--text-soft);line-height:1.7}
.founder-note{display:inline-flex;margin-top:1.1rem;padding:.45rem .75rem;border-radius:999px;background:#d8f6e9;color:#075d50;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.about-work{padding:6rem 0;background:#f1f5f3}
.about-work-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.about-work figure img{width:100%;aspect-ratio:1.18;object-fit:cover;border-radius:2rem}
.about-work p:not(.kicker){font-size:1.06rem;line-height:1.8;color:var(--text-soft)}
.about-work ul{display:grid;gap:.75rem;margin:1.5rem 0 1.75rem}
.about-work li{position:relative;padding-left:1.7rem;color:var(--navy);font-weight:700}
.about-work li::before{content:"✓";position:absolute;left:0;color:#0c967d}
.about-cta{margin-top:0}
.why-team-link{display:inline-flex;gap:.6rem;align-items:center;margin:0 0 1.5rem;color:var(--blue);font-weight:800;text-decoration:none}


/* Beschikbaarheid binnen Agenda */
.agenda-subnav{display:inline-flex;gap:.35rem;margin:0 0 1.25rem;padding:.35rem;border:1px solid #d8e1ef;border-radius:.85rem;background:#fff}
.agenda-subnav button{padding:.7rem 1rem;border:0;border-radius:.6rem;background:transparent;color:#60718c;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}
.agenda-subnav button.active{background:#173474;color:#fff}

@media (max-width:900px){
  .about-hero-grid,.about-intro-grid,.about-work-grid{grid-template-columns:1fr}
  .about-hero-grid{gap:2rem}.about-hero-photo{order:-1}.founder-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hero h1{font-size:clamp(2.15rem,11vw,3rem)}
  .portfolio-hero h1,.booking-hero h1,.page-hero h1,.about-hero h1{font-size:clamp(1.95rem,9vw,2.65rem)}
  .about-hero{padding:6rem 0 3.5rem}.about-hero-grid{display:flex;flex-direction:column}
  .about-hero-photo img{border-radius:1.35rem}.about-intro,.about-work{padding:4rem 0}
  .founders{padding-bottom:4rem}.founder-content{padding:1.5rem}
}

.application-copy h3,.managed-copy h3,.service-card h3{font-size:clamp(1.55rem,2.35vw,2.35rem)}
.admin-topbar h1{font-size:clamp(1.8rem,2.5vw,2.25rem)}

/* Websitebrede kopstijl: hoofdletters zonder uitzonderingen */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: Poppins, Inter, Arial, sans-serif;
  text-transform: uppercase !important;
}

.service-card .service-art {
  height: auto;
  min-height: 0;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--navy);
}
.service-card .service-art::before { display: none; }
.service-card .service-art::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: .75rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(242 245 249 / 0), var(--cloud));
}
.service-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.why-photo {
  min-height: 0;
  display: block;
  margin: 0;
  background: transparent;
}
.why-photo::before { display: none; }
.why-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.soft-cta .pill {
  min-width: 14.5rem;
  flex: none;
  padding-inline: 2rem;
  white-space: nowrap;
}

.page-hero-about .page-hero-note span { color: var(--mint); }
.about-hero-photo figcaption,
.about-work figcaption { display: none; }

@media (max-width: 720px) {
  .service-card .service-art { aspect-ratio: 3 / 2; }
  .why-photo img { aspect-ratio: 4 / 3; }
  .soft-cta .pill { width: 100%; min-width: 0; }
}

/* Opdrachten Remco: vaste desktopnavigatie en compacte portfolio-intro */
@media (min-width: 1161px) {
  .site-header { position: fixed; }
  #inhoud section[id] { scroll-margin-top: 8rem; }
}

.portfolio-hero {
  min-height: 0;
  padding: 9rem 0 6rem;
}

/* Portfolio: administratie- en IoT-demonstraties */
.administration-shot,
.iot-shot {
  padding-bottom: 1.25rem;
}

.administration-mock,
.iot-mock {
  padding: 1.25rem;
  background: #f6f8f7;
}

.administration-metrics,
.iot-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.administration-metrics > div,
.iot-metrics > div {
  min-width: 0;
  padding: .9rem;
  border: 1px solid #e0e8e4;
  border-radius: .8rem;
  background: #fff;
}

.administration-metrics small,
.administration-metrics strong,
.administration-metrics span,
.iot-metrics small,
.iot-metrics strong,
.iot-metrics span {
  display: block;
}

.administration-metrics small,
.iot-metrics small {
  overflow: hidden;
  color: #6d7e87;
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.administration-metrics strong,
.iot-metrics strong {
  margin: .25rem 0;
  color: #173448;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.2;
}

.administration-metrics span,
.iot-metrics span {
  color: #248263;
  font-size: .62rem;
  font-weight: 700;
}

.administration-overview,
.iot-chart {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: .8rem;
  background: #fff;
}

.mock-section-title,
.iot-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mock-section-title b,
.iot-status strong {
  color: #173448;
  font-size: .8rem;
}

.mock-section-title > span,
.iot-status small {
  color: #7b8a92;
  font-size: .62rem;
}

.administration-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .75rem;
  padding: .8rem 0;
  border-bottom: 1px solid #e6ece9;
  color: #536873;
  font-size: .66rem;
}

.administration-row:last-child { border-bottom: 0; }
.administration-row > span { min-width: 0; display: flex; align-items: center; gap: .5rem; }
.administration-row > span i { width: .45rem; height: .45rem; flex: none; border-radius: 50%; background: #6ccbae; }
.administration-row strong { color: #287b68; font-size: .62rem; }
.administration-row em { color: #173448; font-style: normal; font-weight: 800; }

.iot-status {
  margin-bottom: 1rem;
  padding: .9rem 1rem;
  border-radius: .8rem;
  background: #173448;
  color: #fff;
}

.iot-status div small,
.iot-status div strong { display: block; }
.iot-status div small { color: #aec0c8; }
.iot-status strong { color: #fff; font-size: .9rem; }
.iot-status > span { display: inline-flex; align-items: center; gap: .45rem; color: #bdf4e1; font-size: .66rem; font-weight: 800; }
.iot-status > span i { width: .5rem; height: .5rem; border-radius: 50%; background: #80dfbf; box-shadow: 0 0 0 .25rem rgb(128 223 191 / 16%); }

.iot-chart svg {
  display: block;
  width: 100%;
  height: 6rem;
  margin-top: .65rem;
  overflow: visible;
}

.iot-grid-line {
  fill: none;
  stroke: #e2e9e6;
  stroke-width: 1;
}

.iot-data-line {
  fill: none;
  stroke: #277893;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iot-alert {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
  padding: .8rem 1rem;
  border: 1px solid #cde9df;
  border-radius: .8rem;
  background: #effaf6;
}

.iot-alert > i { width: .7rem; height: .7rem; flex: none; border-radius: 50%; background: #248263; }
.iot-alert span,
.iot-alert strong,
.iot-alert small { display: block; }
.iot-alert strong { color: #205d50; font-size: .72rem; }
.iot-alert small { color: #6f837c; font-size: .6rem; }

@media (max-width: 900px) {
  .portfolio-hero { padding: 7.5rem 0 4.5rem; }
}

@media (max-width: 560px) {
  .portfolio-hero { min-height: 0; padding: 7.5rem 0 4.5rem; }
  .administration-mock,
  .iot-mock { padding: .85rem; }
  .administration-metrics,
  .iot-metrics { gap: .45rem; }
  .administration-metrics > div,
  .iot-metrics > div { padding: .7rem .55rem; }
  .administration-metrics small,
  .iot-metrics small { font-size: .56rem; }
  .administration-metrics span,
  .iot-metrics span { font-size: .54rem; }
  .administration-row { grid-template-columns: minmax(0, 1fr) auto; }
  .administration-row em { display: none; }
}

/* Afsprakenpagina in de stijl van de actuele homepage */
.booking-refresh-header {
  position: absolute;
  z-index: 80;
  top: 1.4rem;
  left: 0;
  width: 100%;
  font-family: Poppins, Inter, Arial, sans-serif;
}

.booking-refresh-header-inner {
  min-height: 5.15rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: .7rem .85rem .7rem 1.25rem;
  border: 1px solid rgb(218 225 235 / 80%);
  border-radius: 1.55rem;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 1.1rem 3.3rem rgb(0 8 25 / 15%);
  backdrop-filter: blur(14px);
}

.booking-refresh-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.booking-refresh-brand img {
  display: block;
  width: clamp(8.75rem, 14vw, 10.9rem);
  height: auto;
}

.booking-refresh-desktop-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.1rem);
}

.booking-refresh-desktop-nav a {
  position: relative;
  color: #293651;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.booking-refresh-desktop-nav a::after {
  position: absolute;
  bottom: -.45rem;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  content: "";
  transition: width .2s ease;
}

.booking-refresh-desktop-nav a:hover::after,
.booking-refresh-desktop-nav a:focus-visible::after { width: 100%; }

.booking-refresh-header-cta {
  display: inline-flex;
  min-height: 3.55rem;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.45rem;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}

.booking-refresh-header-cta:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
}

.booking-refresh-mobile-nav { display: none; }

.booking-refresh-mobile-nav summary {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-content: center;
  gap: .28rem;
  border-radius: 50%;
  background: var(--navy);
  cursor: pointer;
  list-style: none;
}

.booking-refresh-mobile-nav summary::-webkit-details-marker { display: none; }
.booking-refresh-mobile-nav summary span {
  width: 1.25rem;
  height: 2px;
  border-radius: 1rem;
  background: var(--white);
  transition: transform .2s ease, opacity .2s ease;
}

.booking-refresh-mobile-nav[open] summary span:nth-child(1) { transform: translateY(.38rem) rotate(45deg); }
.booking-refresh-mobile-nav[open] summary span:nth-child(2) { opacity: 0; }
.booking-refresh-mobile-nav[open] summary span:nth-child(3) { transform: translateY(-.38rem) rotate(-45deg); }

.booking-refresh-mobile-nav nav {
  position: absolute;
  top: calc(100% + .85rem);
  right: 0;
  width: min(23rem, calc(100vw - 2rem));
  display: grid;
  gap: .25rem;
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background: var(--white);
  box-shadow: 0 1.3rem 4rem rgb(0 8 25 / 22%);
}

.booking-refresh-mobile-nav nav a {
  padding: .8rem .75rem;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
}

.booking-refresh-mobile-nav nav .booking-refresh-mobile-cta {
  margin-top: .65rem;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: .76rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.booking-refresh-main.booking-page { background: var(--cloud); }

.booking-refresh-main .booking-hero {
  position: relative;
  min-height: 49rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 12.5rem 0 6.5rem;
  background: radial-gradient(circle at 82% 20%, rgb(74 223 201 / 24%), transparent 27rem), linear-gradient(135deg, #07152f 0%, #102b5f 58%, #1b438a 100%);
  color: var(--white);
}

.booking-refresh-main .booking-hero::before {
  position: absolute;
  top: -13rem;
  right: -11rem;
  width: 37rem;
  height: 37rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  box-shadow: 0 0 0 6rem rgb(255 255 255 / 2%), 0 0 0 12rem rgb(74 223 201 / 2%);
  content: "";
}

.booking-refresh-main .booking-hero-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .72fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.booking-refresh-main .booking-hero h1 {
  max-width: 48rem;
  font-size: clamp(3.25rem, 5.7vw, 5.9rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.055em;
  text-transform: none;
  text-wrap: balance;
}

.booking-refresh-main .booking-hero-copy > p:last-child {
  max-width: 46rem;
  margin: 1.8rem 0 0;
  color: #c8d2e3;
  font-size: 1.03rem;
  line-height: 1.8;
}

.booking-hero-card {
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 1.65rem;
  background: rgb(7 21 47 / 58%);
  box-shadow: 0 1.5rem 4rem rgb(0 8 25 / 20%);
  backdrop-filter: blur(13px);
}

.booking-hero-card ol {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-hero-card li {
  display: grid;
  grid-template-columns: 2.55rem 1fr;
  align-items: start;
  gap: .95rem;
}

.booking-hero-card li > span {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--navy);
  font-size: .65rem;
  font-weight: 900;
}

.booking-hero-card strong,
.booking-hero-card small { display: block; }
.booking-hero-card strong { color: var(--white); font: 650 .94rem/1.3 Poppins, sans-serif; }
.booking-hero-card small { margin-top: .25rem; color: #aebbd0; font-size: .74rem; line-height: 1.55; }

.booking-refresh-main .booking-section {
  padding: 7rem 0 8.5rem;
  background: linear-gradient(180deg, #f7f9fc 0%, var(--cloud) 100%);
}

.booking-section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .55fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 6rem);
  margin-bottom: 2.6rem;
}

.booking-section-intro h2 {
  max-width: 49rem;
  margin: 0;
  color: var(--navy);
  font: 700 clamp(2.45rem, 4.5vw, 4.55rem)/1.04 Poppins, sans-serif;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.booking-section-intro > p {
  margin: 0 0 .45rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.8;
}

.booking-refresh-main .booking-form {
  border-color: #dce3ec;
  border-radius: 2rem;
  box-shadow: 0 1.4rem 4.5rem rgb(20 43 81 / 9%);
}

.booking-refresh-main .booking-date-step {
  background: linear-gradient(145deg, #edf2f8, #f8fafc);
}

.booking-refresh-main .booking-step { padding: clamp(2rem, 4vw, 3.4rem); }
.booking-refresh-main .booking-step-title > span { background: var(--blue); box-shadow: 0 .65rem 1.5rem rgb(49 92 246 / 22%); }
.booking-refresh-main .booking-step-title h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.booking-refresh-main .date-options button { border-radius: 1rem; }
.booking-refresh-main .date-options button.selected { box-shadow: 0 .8rem 2rem rgb(49 92 246 / 24%); }
.booking-refresh-main .time-options button { border-radius: .9rem; }
.booking-refresh-main .booking-fields input,
.booking-refresh-main .booking-fields textarea { border-radius: .8rem; background: #fbfcfe; }
.booking-refresh-main .contact-method-options label > span { border-radius: .9rem; background: #fbfcfe; }
.booking-refresh-main .booking-summary button,
.booking-refresh-main .booking-confirmation button { min-height: 3.55rem; background: var(--blue); }

.booking-refresh-footer {
  padding-top: 4.6rem;
  background: #050e21;
  color: #8d9bb4;
}

.booking-refresh-footer-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr .55fr;
  gap: 4rem;
  padding-bottom: 3.6rem;
}

.booking-refresh-footer-grid > div { display: flex; align-items: flex-start; flex-direction: column; gap: .65rem; }
.booking-refresh-footer-grid img { display: block; width: 9rem; height: auto; padding: .25rem .55rem; border-radius: .45rem; background: var(--white); }
.booking-refresh-footer-grid p { max-width: 27rem; margin: .45rem 0 0; font-size: .82rem; line-height: 1.75; }
.booking-refresh-footer-grid a { color: #b7c2d5; font-size: .8rem; text-decoration: none; }
.booking-refresh-footer-grid a:hover { color: var(--white); }
.booking-refresh-footer-grid span { font-size: .74rem; }
.booking-refresh-footer-grid .booking-refresh-footer-title { margin: 0 0 .55rem; color: var(--mint); font: 800 .68rem Poppins, sans-serif; letter-spacing: .12em; text-transform: uppercase; }

.booking-refresh-footer-bottom {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid rgb(255 255 255 / 9%);
  color: #667796;
  font-size: .7rem;
}

@media (min-width: 1161px) {
  .booking-refresh-header { position: fixed; }
}

@media (max-width: 1160px) {
  .booking-refresh-desktop-nav,
  .booking-refresh-header-cta { display: none; }
  .booking-refresh-header-inner { grid-template-columns: 1fr auto; }
  .booking-refresh-mobile-nav { position: relative; display: block; }
}

@media (max-width: 850px) {
  .booking-refresh-header { top: 1rem; }
  .booking-refresh-header-inner { width: min(100% - 2rem, var(--page)); min-height: 4.7rem; border-radius: 1.25rem; }
  .booking-refresh-main .booking-hero { min-height: 0; padding: 10.5rem 0 5rem; }
  .booking-refresh-main .booking-hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .booking-hero-card { max-width: 42rem; }
  .booking-section-intro { grid-template-columns: 1fr; gap: 1.35rem; }
  .booking-section-intro > p { max-width: 42rem; }
  .booking-refresh-footer-grid { grid-template-columns: 1.2fr .8fr; gap: 3rem 2rem; }
}

@media (max-width: 560px) {
  .booking-refresh-header-inner { min-height: 4.3rem; padding: .55rem .6rem .55rem .9rem; }
  .booking-refresh-brand img { width: 8.5rem; }
  .booking-refresh-mobile-nav summary { width: 3rem; height: 3rem; }
  .booking-refresh-mobile-nav nav { right: -.1rem; width: calc(100vw - 2rem); }
  .booking-refresh-main .booking-hero { padding: 9.25rem 0 4rem; }
  .booking-refresh-main .booking-hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
  .booking-refresh-main .booking-hero-copy > p:last-child { font-size: .92rem; }
  .booking-hero-card { padding: 1.35rem; border-radius: 1.25rem; }
  .booking-hero-card li { grid-template-columns: 2.3rem 1fr; }
  .booking-hero-card li > span { width: 2.3rem; height: 2.3rem; }
  .booking-refresh-main .booking-section { padding: 4rem 0 5rem; }
  .booking-section-intro { margin-bottom: 1.8rem; }
  .booking-section-intro h2 { font-size: clamp(2.25rem, 11vw, 3.3rem); }
  .booking-refresh-main .booking-form { border-radius: 1.25rem; }
  .booking-refresh-footer { padding-top: 3.4rem; }
  .booking-refresh-footer-grid { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2.7rem; }
  .booking-refresh-footer-bottom { min-height: 6rem; align-items: flex-start; justify-content: center; flex-direction: column; gap: .35rem; padding-block: 1.4rem; }
}

/* Gedeelde navigatie en voettekst voor alle binnenpagina's */
.shared-site-header {
  position: absolute;
  z-index: 70;
  top: 1.4rem;
  left: 0;
  width: 100%;
  font-family: Poppins, Arial, sans-serif;
}

.shared-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5rem;
  min-height: 5.25rem;
  padding: .7rem 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shared-brand { display: inline-flex; align-items: center; text-decoration: none; }
.shared-brand .brand-logo { width: 14rem; height: auto; }
.shared-desktop-nav { justify-self: center; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }
.shared-desktop-nav a { position: relative; color: var(--white); font-size: 1.15rem; font-weight: 600; text-decoration: none; text-shadow: 0 1px 10px rgb(0 8 25 / 32%); white-space: nowrap; transition: color .2s ease; }
.shared-desktop-nav a:hover, .shared-desktop-nav a:focus-visible { color: var(--mint); }

.shared-header-cta {
  display: inline-flex;
  min-height: 3.35rem;
  align-items: center;
  justify-content: center;
  padding: .78rem 1.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}

.shared-header-cta:hover { background: var(--blue-dark); transform: translateY(-2px); }
.shared-mobile-nav { display: none; }
.shared-mobile-nav summary { width: 3.25rem; height: 3.25rem; display: grid; place-content: center; gap: .28rem; border: 1px solid rgb(255 255 255 / 24%); border-radius: 50%; background: rgb(7 21 47 / 86%); cursor: pointer; list-style: none; }
.shared-mobile-nav summary::-webkit-details-marker { display: none; }
.shared-mobile-nav summary span { width: 1.25rem; height: 2px; border-radius: 1rem; background: var(--white); transition: transform .2s ease, opacity .2s ease; }
.shared-mobile-nav[open] summary span:nth-child(1) { transform: translateY(.38rem) rotate(45deg); }
.shared-mobile-nav[open] summary span:nth-child(2) { opacity: 0; }
.shared-mobile-nav[open] summary span:nth-child(3) { transform: translateY(-.38rem) rotate(-45deg); }
.shared-mobile-nav nav { position: absolute; top: calc(100% + .85rem); right: 0; width: min(23rem, calc(100vw - 2rem)); display: grid; gap: .25rem; padding: 1.3rem; border: 1px solid rgb(255 255 255 / 14%); border-radius: 1.35rem; background: rgb(7 21 47 / 98%); box-shadow: 0 1.3rem 4rem rgb(0 8 25 / 36%); backdrop-filter: blur(12px); }
.shared-mobile-nav nav a { padding: .8rem .75rem; border-bottom: 1px solid rgb(255 255 255 / 12%); color: var(--white); font-size: 1rem; font-weight: 650; text-decoration: none; }
.shared-mobile-nav nav a:hover, .shared-mobile-nav nav a:focus-visible { color: var(--mint); background: rgb(255 255 255 / 10%); }
.shared-mobile-nav nav .shared-mobile-cta { margin-top: .65rem; border: 0; border-radius: 999px; background: var(--blue); color: var(--white); font-size: .76rem; font-weight: 800; text-align: center; text-transform: uppercase; }

.shared-site-footer {
  padding: 4.2rem 0 1.5rem;
  background: rgb(5 14 32);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}
.shared-site-footer .page-width { width: min(var(--page), calc(100% - 3rem)); }
.shared-footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .6fr; gap: 5rem; padding-bottom: 3.5rem; }
.shared-footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.shared-footer-grid img { display: block; width: 9rem; height: auto; padding: .5rem; border-radius: .5rem; background: var(--white); }
.shared-footer-grid > div:first-child p { max-width: 27rem; margin: .7rem 0 0; color: #99a7bd; }
.shared-footer-title { margin: 0 0 .4rem; color: var(--mint); font-family: Poppins, Arial, sans-serif; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.shared-footer-grid a { color: #d6deea; font-size: .9rem; text-decoration: none; }
.shared-footer-grid span { color: #8896ad; font-size: .82rem; }
.shared-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid rgb(255 255 255 / 12%); color: #74839b; font-size: .75rem; }

.cookie-notice { position: fixed; z-index: 80; right: 1.25rem; bottom: 1.25rem; min-width: 0; width: min(44rem, calc(100% - 2rem)); max-width: calc(100vw - 2rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem); align-items: center; gap: 1.2rem; padding: 1.15rem 1.2rem; border: 1px solid rgb(255 255 255 / 15%); border-radius: 1.15rem; background: rgb(5 14 32 / 97%); color: var(--white); box-shadow: 0 1rem 3rem rgb(5 14 32 / 28%); }
.cookie-notice[hidden] { display: none; }
.cookie-notice > div { min-width: 0; }
.cookie-notice strong { font: 700 .82rem Poppins, Arial, sans-serif; }
.cookie-notice p { margin: .25rem 0 0; color: #adbacf; font-size: .72rem; line-height: 1.55; }
.cookie-notice a { color: var(--mint); text-underline-offset: .2rem; }
.cookie-notice button { min-height: 2.75rem; padding: .65rem 1rem; border: 0; border-radius: 999px; background: var(--mint); color: var(--navy); cursor: pointer; font: 800 .68rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.cookie-notice-actions { display: grid; gap: .55rem; }
.cookie-notice .cookie-choice-secondary { border: 1px solid rgb(255 255 255 / 28%); background: transparent; color: var(--white); }
.cookie-notice button[hidden] { display: none; }
body.cookie-notice-visible .back-to-top { bottom: 11rem; }

@media (max-width: 1160px) {
  .shared-desktop-nav, .shared-header-cta { display: none; }
  .shared-header-inner { grid-template-columns: 1fr auto; }
  .shared-mobile-nav { position: relative; display: block; }
}

@media (max-width: 850px) {
  .shared-site-header { top: 1rem; }
  .shared-header-inner { width: min(100% - 2rem, var(--page)); min-height: 4.7rem; border-radius: 1.25rem; }
  .shared-site-footer .page-width { width: min(100% - 2rem, var(--page)); }
  .shared-footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .shared-footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .shared-header-inner { min-height: 4.3rem; padding: .55rem .6rem .55rem .9rem; }
  .shared-brand .brand-logo { width: 10.5rem; }
  .shared-mobile-nav summary { width: 3rem; height: 3rem; }
  .shared-mobile-nav nav { right: -.1rem; width: calc(100vw - 2rem); }
  .shared-footer-grid { grid-template-columns: 1fr; }
  .shared-footer-grid > div:first-child { grid-column: auto; }
  .shared-footer-bottom { flex-direction: column; }
  .admin-login-page { padding: 1rem; }
  .admin-login-card { padding: 1.5rem; border-radius: 1rem; }
  .cookie-notice { right: .6rem; left: .6rem; bottom: .6rem; width: auto; max-width: none; max-height: 45vh; grid-template-columns: minmax(0, 1fr); gap: .65rem; overflow-y: auto; padding: .75rem; border-radius: .9rem; }
  .cookie-notice strong { font-size: .7rem; line-height: 1.35; }
  .cookie-notice p { margin-top: .15rem; font-size: .63rem; line-height: 1.4; }
  .cookie-notice-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .cookie-notice button { width: 100%; min-height: 2.3rem; padding: .45rem .55rem; font-size: .56rem; line-height: 1.25; }
  body.cookie-notice-visible .back-to-top { bottom: 12rem; }
  .cookie-table { min-width: 0; }
  .cookie-table thead { display: none; }
  .cookie-table tbody, .cookie-table tr, .cookie-table td { display: block; }
  .cookie-table tr { padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
  .cookie-table tr:last-child { border-bottom: 0; }
  .cookie-table td { padding: .35rem 0; border: 0; }
  .cookie-table td::before { display: block; margin-bottom: .12rem; color: #8290a5; content: attr(data-label); font: 800 .58rem Poppins, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
  .cookie-table code { overflow-wrap: anywhere; white-space: normal; }
}

/* Contactpagina */
.contact-page-body { background: var(--cloud); }
.contact-page { overflow: hidden; background: var(--cloud); }
.contact-hero {
  position: relative;
  min-height: 32rem;
  display: flex;
  align-items: end;
  padding: 12rem 0 5.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, rgb(74 223 201 / 15%), transparent 25rem),
    linear-gradient(135deg, #07152f 0%, #102345 100%);
  color: var(--white);
}
.contact-hero::after {
  content: "";
  position: absolute;
  width: 30rem;
  height: 30rem;
  right: -12rem;
  bottom: -19rem;
  border: 1px solid rgb(74 223 201 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgb(74 223 201 / 3%), 0 0 0 10rem rgb(74 223 201 / 2%);
}
.contact-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.contact-hero h1 { max-width: 45rem; margin: 0; font-size: clamp(3rem, 5.4vw, 5.5rem); font-weight: 700; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.contact-hero-grid > p { max-width: 34rem; margin: 0 0 .65rem; color: #d0d9e7; font-size: 1.04rem; line-height: 1.85; }

.contact-content { padding: 7rem 0 8rem; }
.contact-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 35rem); column-gap: 4rem; align-items: end; margin-bottom: 2.8rem; }
.contact-intro .kicker { grid-column: 1 / -1; }
.contact-intro h2 { max-width: 46rem; margin: 0; color: var(--navy); font-size: clamp(2.35rem, 4vw, 4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.05em; text-wrap: balance; }
.contact-intro > p:last-child { margin: 0 0 .45rem; color: var(--muted); font-size: .98rem; line-height: 1.8; }

.contact-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 5rem; }
.contact-method-card { min-width: 0; padding: 2rem; border: 1px solid var(--line); border-radius: 1.35rem; background: var(--white); box-shadow: 0 .8rem 2.8rem rgb(18 36 68 / 5%); }
.contact-method-label { color: var(--mint-dark); font: 800 .68rem Poppins, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.contact-method-card h3 { margin: .75rem 0 .65rem; color: var(--navy); font-size: 1.18rem; line-height: 1.3; letter-spacing: -.025em; }
.contact-method-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.75; }
.contact-method-card a { color: var(--blue); font-weight: 750; overflow-wrap: anywhere; text-decoration-thickness: 1px; text-underline-offset: .2rem; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(20rem, .75fr); align-items: start; gap: 1.5rem; }
.contact-form-card { min-width: 0; padding: clamp(2rem, 4vw, 3.6rem); border: 1px solid var(--line); border-radius: 1.75rem; background: var(--white); box-shadow: 0 1.2rem 4rem rgb(18 36 68 / 7%); }
.contact-form-card h2, .contact-planner-card h2 { margin: 0; font-size: clamp(2rem, 3vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.contact-form-card h2 { color: var(--navy); }
.contact-form-intro { max-width: 41rem; margin: 1rem 0 2.3rem; color: var(--muted); line-height: 1.8; }
.contact-message { display: grid; gap: .25rem; margin-bottom: 1.5rem; padding: 1rem 1.1rem; border-radius: .85rem; font-size: .86rem; }
.contact-message strong { color: var(--navy); font-family: Poppins, Arial, sans-serif; }
.contact-message-success { border: 1px solid rgb(21 157 139 / 24%); background: rgb(74 223 201 / 13%); color: #17695e; }
.contact-message-error { border: 1px solid rgb(187 75 75 / 22%); background: #fff1f1; color: #8a3030; }
.contact-form { display: grid; gap: 1.2rem; }
.contact-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.contact-form label { min-width: 0; display: grid; gap: .45rem; color: var(--navy); font: 700 .78rem Poppins, Arial, sans-serif; }
.contact-label-title { color: var(--navy); }
.contact-label-title .contact-required { color: var(--blue); }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-width: 0; border: 1px solid #ccd5e1; border-radius: .8rem; background: #fbfcfe; color: var(--ink); font: 400 .95rem Inter, Arial, sans-serif; }
.contact-form input, .contact-form select { min-height: 3.35rem; padding: .8rem .9rem; }
.contact-field-grid input { height: 3.35rem; }
.contact-form textarea { min-height: 10rem; padding: .9rem; line-height: 1.65; resize: vertical; }
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: #aebacc; }
.contact-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: .35rem; }
.contact-form-footer p { max-width: 31rem; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.contact-form-footer a { color: var(--blue); }
.contact-submit, .contact-planner-button { display: inline-flex; min-height: 3.45rem; align-items: center; justify-content: center; border: 0; border-radius: 999px; font: 800 .73rem Poppins, Arial, sans-serif; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.contact-submit { flex: none; padding: .85rem 1.45rem; background: var(--blue); color: var(--white); cursor: pointer; }
.contact-submit:hover { background: var(--blue-dark); transform: translateY(-2px); }
.contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.contact-planner-card { min-width: 0; padding: clamp(2rem, 3.5vw, 3rem); border-radius: 1.75rem; background: var(--navy); color: var(--white); box-shadow: 0 1.2rem 4rem rgb(7 21 47 / 14%); }
.contact-planner-card p:not(.kicker) { margin: 1.25rem 0; color: #b9c6da; font-size: .92rem; line-height: 1.8; }
.contact-planner-card ul { display: grid; gap: .75rem; margin: 1.4rem 0 2rem; padding: 0; color: #dce4ef; font-size: .84rem; line-height: 1.6; list-style: none; }
.contact-planner-card li { position: relative; padding-left: 1.15rem; }
.contact-planner-card li::before { content: ""; position: absolute; left: 0; top: .66rem; width: .38rem; height: .38rem; border-radius: 50%; background: var(--mint); }
.contact-planner-button { width: 100%; padding: .85rem 1.2rem; background: var(--mint); color: var(--navy); text-align: center; }
.contact-planner-button:hover { background: #6be7d6; transform: translateY(-2px); }

@media (max-width: 900px) {
  .contact-hero-grid, .contact-intro, .contact-grid { grid-template-columns: 1fr; }
  .contact-hero-grid { gap: 2rem; }
  .contact-hero-grid > p { max-width: 42rem; }
  .contact-intro { gap: 1.4rem; }
  .contact-intro > p:last-child { max-width: 44rem; }
  .contact-methods { grid-template-columns: 1fr; }
  .contact-planner-card { max-width: none; }
}

@media (max-width: 560px) {
  .contact-hero { min-height: 0; padding: 9.5rem 0 4rem; }
  .contact-hero .page-width, .contact-content .page-width { width: min(100% - 2rem, var(--page)); }
  .contact-hero h1 { font-size: clamp(2.55rem, 13vw, 3.8rem); }
  .contact-hero-grid > p { font-size: .93rem; }
  .contact-content { padding: 4.5rem 0 5rem; }
  .contact-methods { margin-bottom: 3.5rem; }
  .contact-method-card, .contact-form-card, .contact-planner-card { padding: 1.5rem; border-radius: 1.2rem; }
  .contact-field-grid { grid-template-columns: 1fr; }
  .contact-form-footer { align-items: stretch; flex-direction: column; }
  .contact-submit { width: 100%; }
}

/* Afsprakenplanner op de contactpagina */
.contact-page.booking-refresh-main { background: var(--cloud); }
.contact-booking {
  padding: 7rem 0 3.5rem;
  background: linear-gradient(180deg, #f7f9fc 0%, var(--cloud) 100%);
  scroll-margin-top: 2rem;
}
.contact-booking.contact-booking-simple { padding: 5.5rem 0 7rem; }
.contact-booking-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(21rem, .72fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  margin-bottom: 5rem;
}
.contact-booking-copy h2 {
  max-width: 52rem;
  margin: 0;
  color: var(--navy);
  font: 700 clamp(2.6rem, 4.8vw, 4.9rem)/1.03 Poppins, Arial, sans-serif;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.contact-booking-copy > p:last-child {
  max-width: 48rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.85;
}
.contact-booking .booking-hero-card { background: #07152f; }
.contact-booking-form-intro { margin-bottom: 2.6rem; }
.contact-booking .booking-form {
  border-color: #dce3ec;
  border-radius: 2rem;
  box-shadow: 0 1.4rem 4.5rem rgb(20 43 81 / 9%);
}
.contact-content { padding-top: 3.5rem; }
.contact-form-card { max-width: none; }
.contact-form-card h2 { margin: 0; font-size: clamp(2rem, 3vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.contact-direct-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
  scroll-margin-top: 2rem;
}
.contact-direct-card {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3.25rem);
  border-radius: 1.75rem;
  box-shadow: 0 1.2rem 4rem rgb(7 21 47 / 11%);
}
.contact-direct-card h2 {
  max-width: 34rem;
  margin: 0;
  font: 700 clamp(1.75rem, 3vw, 2.8rem)/1.08 Poppins, Arial, sans-serif;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.contact-direct-card > p:not(.kicker) { max-width: 39rem; margin: 1.2rem 0 2rem; font-size: .93rem; line-height: 1.8; }
.contact-direct-card-whatsapp { background: var(--navy); color: var(--white); }
.contact-direct-card-whatsapp > p:not(.kicker) { color: #c2cee0; }
.contact-direct-card-phone { border: 1px solid var(--line); background: var(--white); color: var(--navy); }
.contact-direct-card-phone > p:not(.kicker) { color: var(--muted); }
.contact-direct-card-phone p a { color: var(--blue); font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: .2rem; }
.contact-direct-button {
  min-height: 3.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  background: var(--mint);
  color: var(--navy);
  font: 800 .73rem Poppins, Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease;
}
.contact-direct-button:hover { background: #6be7d6; transform: translateY(-2px); }
.contact-direct-card-phone .contact-direct-button { background: var(--blue); color: var(--white); }
.contact-direct-card-phone .contact-direct-button:hover { background: var(--blue-dark); }

@media (max-width: 900px) {
  .contact-booking-intro { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-booking .booking-hero-card { max-width: 42rem; }
  .contact-direct-options { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .contact-booking { padding: 4.5rem 0 3rem; }
  .contact-booking.contact-booking-simple { padding: 4.5rem 0 5rem; }
  .contact-booking .page-width { width: min(100% - 2rem, var(--page)); }
  .contact-booking-intro { gap: 2rem; margin-bottom: 3.5rem; }
  .contact-booking-copy h2 { font-size: clamp(2.25rem, 11vw, 3.3rem); }
  .contact-booking-copy > p:last-child { font-size: .92rem; }
  .contact-booking-form-intro { margin-bottom: 1.8rem; }
  .contact-booking .booking-form { border-radius: 1.25rem; }
  .contact-content { padding-top: 3rem; }
  .contact-direct-card { padding: 1.5rem; border-radius: 1.2rem; }
  .contact-direct-button { width: 100%; }
}

/* Vaste openbare kophiërarchie op basis van de homepage */
:root {
  --xenid-public-h1: clamp(2.55rem, 3.5vw, 3.7rem);
  --xenid-public-h2: clamp(2.15rem, 3.6vw, 3.65rem);
  --xenid-public-h3: clamp(1.9rem, 3vw, 3.1rem);
}
.contact-hero h1,
.legal-hero h1,
.portfolio-hero h1,
.booking-hero h1,
.booking-refresh-main .booking-hero h1,
.page-hero h1,
.about-hero h1,
.appointment-service-hero h1,
.website-service-hero h1,
.error-page .booking-confirmation h1 { font-size: var(--xenid-public-h1); }
.contact-booking-copy h2,
.booking-section-intro h2,
.contact-intro h2,
.portfolio-intro h2,
.portfolio-cta h2 { font-size: var(--xenid-public-h2); }
.contact-form-card h2,
.contact-direct-card h2,
.portfolio-card-copy h3 { font-size: var(--xenid-public-h3); }

@media (max-width: 760px) {
  :root {
    --xenid-public-h1: clamp(2.45rem, 10vw, 3.55rem);
    --xenid-public-h2: 2.05rem;
    --xenid-public-h3: 1.9rem;
  }
}

/* Dienstenoverzicht */
.services-overview-page { background: var(--white); }
.services-overview-hero {
  position: relative;
  min-height: 32rem;
  display: flex;
  align-items: end;
  overflow: hidden;
  padding: 12rem 0 5.5rem;
  background:
    radial-gradient(circle at 82% 16%, rgb(74 223 201 / 20%), transparent 24rem),
    linear-gradient(135deg, #07152f, #102b5d);
  color: var(--white);
}
.services-overview-hero::after {
  content: "";
  position: absolute;
  width: 34rem;
  height: 34rem;
  right: -17rem;
  bottom: -24rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgb(255 255 255 / 2.5%), 0 0 0 10rem rgb(255 255 255 / 1.5%);
}
.services-overview-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.services-overview-hero h1 { max-width: 47rem; margin: 0; font-size: var(--xenid-public-h1); font-weight: 700; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.services-overview-hero-copy > p { max-width: 38rem; margin: 0 0 2rem; color: #d0d9e7; font-size: 1.03rem; line-height: 1.85; }
.services-primary-button,
.services-secondary-button,
.services-outline-button {
  display: inline-flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  padding: .78rem 1.3rem;
  border-radius: 999px;
  font: 800 .72rem Poppins, Arial, sans-serif;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.services-primary-button { background: var(--mint); color: var(--navy); }
.services-primary-button:hover { background: #6be7d6; transform: translateY(-2px); }
.services-secondary-button { min-height: 3rem; padding: .65rem 1rem; background: var(--navy); color: var(--white); }
.services-secondary-button:hover { background: var(--blue); transform: translateY(-2px); }
.services-outline-button { border: 1px solid rgb(255 255 255 / 42%); color: var(--white); }
.services-outline-button:hover { border-color: var(--white); background: rgb(255 255 255 / 8%); transform: translateY(-2px); }

.services-intro-section { padding: 7rem 0; background: var(--white); }
.services-intro-grid { display: grid; grid-template-columns: .42fr 1.58fr; align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.services-intro-grid h2 { max-width: 55rem; margin: 0; color: var(--navy); font-size: var(--xenid-public-h2); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.services-intro-grid > div > p { max-width: 54rem; margin: 1.6rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.85; }

.services-detail-section { scroll-margin-top: 2rem; padding: 7.5rem 0; border-top: 1px solid var(--line); background: var(--white); }
.services-detail-section-soft { background: var(--cloud); }
.services-detail-row { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(3.5rem, 7vw, 7rem); }
.services-detail-row-reverse .services-detail-copy { order: 2; }
.services-detail-row-reverse .services-detail-visual { order: 1; }
.services-detail-copy { min-width: 0; }
.services-detail-number { margin: 0 0 1rem; color: var(--blue); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.services-detail-copy h2 { margin: 0; color: var(--navy); font-size: var(--xenid-public-h2); line-height: 1.07; letter-spacing: -.035em; text-wrap: balance; }
.services-detail-copy > p:not(.services-detail-number) { margin: 1.5rem 0 0; color: var(--muted); font-size: .98rem; line-height: 1.8; }
.services-detail-copy ul { display: grid; gap: .7rem; margin: 1.65rem 0 1.8rem; padding: 1.4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.services-detail-copy li { position: relative; padding-left: 1.25rem; color: #455169; font-size: .88rem; line-height: 1.55; }
.services-detail-copy li::before { content: ""; position: absolute; width: .45rem; height: .45rem; left: 0; top: .47rem; border-radius: 50%; background: var(--mint-dark); }
.services-text-link { display: inline-flex; color: var(--blue); font: 800 .78rem/1.45 Poppins, Arial, sans-serif; text-decoration-thickness: 1px; text-underline-offset: .3rem; text-transform: uppercase; }
.services-text-link:hover { color: var(--blue-dark); }
.services-link-group { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; }

.services-detail-visual { min-width: 0; min-height: 31rem; overflow: hidden; border: 1px solid #d8e0eb; border-radius: 1.6rem; background: var(--white); box-shadow: 0 1.5rem 4rem rgb(23 43 80 / 9%); }
.services-photo-visual { position: relative; margin: 0; }
.services-photo-visual img { width: 100%; height: 100%; min-height: 31rem; display: block; object-fit: cover; }
.services-website-visual img { object-fit: contain; background: #f4f7fd; }
.services-dashboard-visual img { object-position: left center; }
.services-iot-visual { background: #07152f; }
.services-iot-visual img { object-fit: contain; }
.services-photo-visual figcaption { position: absolute; right: 1rem; bottom: 1rem; padding: .55rem .8rem; border-radius: 999px; background: rgb(7 21 47 / 92%); color: var(--white); font-size: .65rem; font-weight: 750; }
.services-mock-toolbar { min-height: 3.8rem; display: flex; align-items: center; gap: .38rem; padding: 0 1.3rem; border-bottom: 1px solid var(--line); background: #fafbfd; }
.services-mock-toolbar > span { width: .48rem; height: .48rem; border-radius: 50%; background: #d76e50; }
.services-mock-toolbar > span:nth-child(2) { background: #c9ced7; }
.services-mock-toolbar > span:nth-child(3) { background: var(--mint-dark); }
.services-mock-toolbar strong { margin-left: .35rem; color: var(--navy); font: 700 .72rem Poppins, Arial, sans-serif; }

.services-planner-visual { padding-bottom: 2.25rem; background: linear-gradient(145deg, #eef2ff, #f6fbfa); }
.services-planner-card { width: min(28rem, calc(100% - 3rem)); margin: 2.4rem auto 0; padding: 1.7rem; border: 1px solid #dbe2ec; border-radius: 1.2rem; background: var(--white); box-shadow: 0 1rem 3rem rgb(22 47 89 / 10%); }
.services-planner-card > p { margin: 0 0 1.2rem; color: var(--navy); font: 700 1.1rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.services-planner-days, .services-planner-dates { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; text-align: center; }
.services-planner-days span { color: #5f6a7e; font-size: .6rem; font-weight: 750; text-transform: uppercase; }
.services-planner-dates { margin-top: .5rem; }
.services-planner-dates span, .services-planner-dates strong { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid #dfe5ed; border-radius: .65rem; color: #536078; font-size: .72rem; }
.services-planner-dates strong { border-color: var(--blue); background: var(--blue); color: var(--white); }
.services-planner-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: 1.4rem; }
.services-planner-times span, .services-planner-times strong { padding: .65rem .3rem; border: 1px solid #dfe5ed; border-radius: .6rem; color: #536078; font-size: .66rem; text-align: center; }
.services-planner-times strong { border-color: var(--mint-dark); background: #effcf9; color: var(--navy); }
.services-planner-status { margin-top: 1rem; padding: .75rem; border-radius: .6rem; background: var(--navy); color: var(--mint); font-size: .65rem; font-weight: 800; text-align: center; text-transform: uppercase; }

.services-portal-visual { background: #eef2f7; }
.services-portal-content { padding: 2rem; }
.services-portal-content > p { margin: 0 0 1.2rem; color: var(--navy); font: 700 1.15rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.services-portal-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.services-portal-metrics article { min-width: 0; padding: 1.15rem; border: 1px solid #d9e0ea; border-radius: .9rem; background: var(--white); }
.services-portal-metrics span, .services-portal-metrics strong, .services-portal-metrics small { display: block; overflow-wrap: anywhere; }
.services-portal-metrics span { min-height: 2.2rem; color: #738096; font-size: .58rem; }
.services-portal-metrics strong { color: var(--navy); font: 800 clamp(1rem, 2vw, 1.45rem) Poppins, Arial, sans-serif; letter-spacing: -.04em; }
.services-portal-metrics small { margin-top: .45rem; color: var(--mint-dark); font-size: .55rem; font-weight: 750; }
.services-portal-actions { display: grid; gap: .65rem; margin-top: 1rem; }
.services-portal-actions span { padding: .85rem 1rem; border: 1px solid #d9e0ea; border-radius: .75rem; background: var(--white); color: #455169; font-size: .65rem; font-weight: 750; }

.services-request-visual { background: linear-gradient(145deg, #eef3fb, #f7fbfa); }
.services-request-content { display: grid; gap: .8rem; padding: clamp(1.3rem, 3.5vw, 2.4rem); }
.services-request-message { padding: 1.15rem; border: 1px solid #d9e1ed; border-radius: 1rem; background: var(--white); box-shadow: 0 .8rem 2rem rgb(23 43 80 / 6%); }
.services-request-message small, .services-request-message strong { display: block; }
.services-request-message small { color: var(--blue); font-size: .56rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.services-request-message strong { margin-top: .45rem; color: var(--navy); font: 700 .78rem/1.45 Poppins, Arial, sans-serif; text-transform: uppercase; }
.services-request-message p { margin: .55rem 0 0; color: var(--muted); font-size: .63rem; line-height: 1.55; }
.services-request-checks { display: grid; gap: .6rem; }
.services-request-checks article { min-width: 0; display: grid; grid-template-columns: .65rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .85rem 1rem; border: 1px solid #d9e1ed; border-radius: .85rem; background: var(--white); }
.services-request-checks i { width: .62rem; height: .62rem; border-radius: 50%; background: #db684d; box-shadow: 0 0 0 .22rem rgb(219 104 77 / 10%); }
.services-request-checks i.is-complete { background: var(--mint-dark); box-shadow: 0 0 0 .22rem rgb(21 157 139 / 10%); }
.services-request-checks strong, .services-request-checks small { display: block; }
.services-request-checks strong { color: var(--navy); font: 700 .65rem/1.4 Poppins, Arial, sans-serif; text-transform: uppercase; }
.services-request-checks small { margin-top: .1rem; color: var(--muted); font-size: .56rem; }
.services-request-checks article > span { color: var(--blue); font-size: .52rem; font-weight: 800; text-transform: uppercase; }
.services-request-draft { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-radius: .8rem; background: var(--navy); color: var(--white); }
.services-request-draft span { color: #c3cede; font-size: .58rem; }
.services-request-draft strong { color: var(--mint); font: 700 .58rem Poppins, Arial, sans-serif; text-align: right; text-transform: uppercase; }

.services-apk-visual { background: linear-gradient(145deg, #edf2fa, #f8fafc); }
.services-apk-content { padding: clamp(1.3rem, 3.5vw, 2.5rem); }
.services-apk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.services-apk-head small, .services-apk-head strong { display: block; }
.services-apk-head small { color: var(--blue); font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.services-apk-head strong { margin-top: .35rem; color: var(--navy); font: 700 clamp(.95rem, 2.2vw, 1.3rem)/1.35 Poppins, Arial, sans-serif; text-transform: uppercase; }
.services-apk-head > span { flex: 0 0 auto; padding: .55rem .7rem; border-radius: 999px; background: var(--navy); color: var(--white); font-size: .57rem; font-weight: 800; text-transform: uppercase; }
.services-apk-list { display: grid; gap: .7rem; margin-top: 1rem; }
.services-apk-list article { min-width: 0; display: grid; grid-template-columns: .65rem 1fr auto; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid #d9e1ed; border-radius: .85rem; background: var(--white); }
.services-apk-list strong, .services-apk-list small { display: block; }
.services-apk-list strong { color: var(--navy); font: 700 .7rem/1.4 Poppins, Arial, sans-serif; text-transform: uppercase; }
.services-apk-list small { margin-top: .2rem; color: var(--muted); font-size: .58rem; line-height: 1.45; }
.services-apk-list article > span { color: var(--blue); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.services-apk-dot { width: .62rem; height: .62rem; border-radius: 50%; background: var(--mint-dark); }
.services-apk-dot-now { background: #db684d; }
.services-apk-dot-opportunity { background: var(--blue); }
.services-apk-dot-later { background: var(--mint-dark); }
.services-apk-summary { display: flex; align-items: center; gap: .55rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: .75rem; background: var(--navy); color: var(--white); font-size: .62rem; font-weight: 750; }
.services-apk-summary span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 .2rem rgb(74 223 201 / 14%); }

.services-proof-section { padding: 8rem 0; background: var(--navy); color: var(--white); }
.services-proof-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(3.5rem, 7vw, 7rem); }
.services-proof-grid figure { min-width: 0; margin: 0; overflow: hidden; border-radius: 1.5rem; box-shadow: 0 2rem 5rem rgb(0 4 18 / 35%); }
.services-proof-grid img { width: 100%; height: auto; aspect-ratio: 3 / 2; display: block; object-fit: contain; object-position: top center; }
.services-proof-grid h2, .services-final-cta h2 { margin: 0; color: var(--white); font-size: var(--xenid-public-h2); line-height: 1.07; letter-spacing: -.035em; text-wrap: balance; }
.services-proof-grid > div > p:not(.kicker) { margin: 1.5rem 0 2rem; color: #b7c2d4; line-height: 1.8; }

.services-faq-section { padding: 8rem 0; background: var(--white); }
.services-faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.services-faq-grid h2 { margin: 0; color: var(--navy); font-size: var(--xenid-public-h2); line-height: 1.07; letter-spacing: -.035em; text-wrap: balance; }
.services-faq-list { border-top: 1px solid var(--line); }
.services-faq-list details { border-bottom: 1px solid var(--line); }
.services-faq-list summary { padding: 1.5rem .2rem; color: var(--navy); cursor: pointer; font: 700 .98rem/1.5 Poppins, Arial, sans-serif; list-style: none; text-transform: uppercase; }
.services-faq-list summary::-webkit-details-marker { display: none; }
.services-faq-list summary::after { content: "+"; float: right; margin-left: 1rem; color: var(--blue); font-size: 1.25rem; line-height: 1; }
.services-faq-list details[open] summary::after { content: "−"; }
.services-faq-list details p { max-width: 48rem; margin: -.3rem 0 1.7rem; color: var(--muted); line-height: 1.75; }

.services-final-cta { padding: 7.5rem 0; background: linear-gradient(135deg, #0c2148, #315cf6); color: var(--white); }
.services-final-cta-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.services-final-cta-grid > div:last-child > p { max-width: 38rem; margin: 0 0 2rem; color: #dbe3f2; line-height: 1.8; }

@media (max-width: 980px) {
  .services-overview-hero-grid, .services-detail-row, .services-proof-grid, .services-faq-grid, .services-final-cta-grid { grid-template-columns: 1fr; }
  .services-overview-hero-grid { gap: 2.2rem; }
  .services-overview-hero-copy > p { max-width: 48rem; }
  .services-detail-row { gap: 2.5rem; }
  .services-detail-row-reverse .services-detail-copy, .services-detail-row-reverse .services-detail-visual { order: initial; }
  .services-detail-copy { max-width: 48rem; }
  .services-detail-visual { min-height: 27rem; }
  .services-photo-visual img { min-height: 27rem; }
  .services-proof-grid > div { max-width: 48rem; }
}

@media (max-width: 760px) {
  .services-overview-hero { min-height: 0; padding: 9.5rem 0 4rem; }
  .services-intro-section, .services-detail-section, .services-proof-section, .services-faq-section, .services-final-cta { padding: 5rem 0; }
  .services-intro-grid { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 560px) {
  .services-overview-hero .page-width,
  .services-overview-page > section .page-width,
  .services-detail-list .page-width { width: min(100% - 2rem, var(--page)); }
  .services-overview-hero h1 { overflow-wrap: anywhere; }
  .services-overview-hero-copy > p { font-size: .93rem; }
  .services-primary-button, .services-outline-button { width: 100%; }
  .services-detail-copy h2, .services-intro-grid h2, .services-proof-grid h2, .services-faq-grid h2, .services-final-cta h2 { overflow-wrap: anywhere; }
  .services-detail-visual { min-height: 0; border-radius: 1.15rem; }
  .services-photo-visual img { min-height: 20rem; }
  .services-iot-visual img { min-height: 16rem; }
  .services-planner-card { width: calc(100% - 1.5rem); margin-top: 1.4rem; padding: 1rem; }
  .services-planner-visual { padding-bottom: 1.4rem; }
  .services-planner-times { grid-template-columns: 1fr; }
  .services-portal-content { padding: 1.15rem; }
  .services-portal-metrics { grid-template-columns: 1fr; }
  .services-portal-metrics span { min-height: 0; }
  .services-request-content { padding: 1.15rem; }
  .services-request-checks article { grid-template-columns: .65rem minmax(0, 1fr); }
  .services-request-checks article > span { grid-column: 2; }
  .services-request-draft { align-items: flex-start; flex-direction: column; }
  .services-request-draft strong { text-align: left; }
  .services-link-group { align-items: stretch; flex-direction: column; }
  .services-link-group > a { width: 100%; }
  .services-faq-list summary { padding-right: 0; font-size: .88rem; }
}

/* Afsprakenplanner als afzonderlijke dienst */
.appointment-service-page { background: var(--white); }
.appointment-service-hero {
  position: relative;
  min-height: 38rem;
  display: flex;
  align-items: end;
  overflow: hidden;
  padding: 12rem 0 5.5rem;
  background:
    radial-gradient(circle at 78% 18%, rgb(74 223 201 / 22%), transparent 24rem),
    linear-gradient(135deg, #07152f, #102b5d);
  color: var(--white);
}
.appointment-service-hero::after { content: ""; position: absolute; width: 30rem; height: 30rem; right: -15rem; bottom: -21rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; box-shadow: 0 0 0 5rem rgb(255 255 255 / 2.5%), 0 0 0 10rem rgb(255 255 255 / 1.5%); }
.appointment-service-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, .78fr); align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.appointment-service-hero-copy { min-width: 0; }
.appointment-service-hero h1 { max-width: 48rem; margin: 0; font-weight: 700; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.appointment-service-hero-copy > p:not(.kicker) { max-width: 45rem; margin: 1.7rem 0 0; color: #d0d9e7; font-size: 1.03rem; line-height: 1.85; }
.appointment-service-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.appointment-service-text-link { color: var(--white); font: 800 .75rem/1.45 Poppins, Arial, sans-serif; text-decoration-thickness: 1px; text-underline-offset: .3rem; text-transform: uppercase; }
.appointment-service-text-link:hover { color: var(--mint); }
.appointment-service-preview { min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 24%); border-radius: 1.5rem; background: var(--white); box-shadow: 0 2rem 5rem rgb(0 4 18 / 28%); }
.appointment-service-preview-content { padding: 1.6rem; }
.appointment-service-preview-step { margin: 0 0 1rem; color: var(--blue); font: 800 .68rem/1.4 Poppins, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.appointment-service-preview-month { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.appointment-service-preview-month strong { color: var(--navy); font: 700 1.05rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.appointment-service-preview-month span { color: #5f6a7e; font-size: .62rem; font-weight: 700; }

.appointment-service-intro { padding: 7rem 0; background: var(--white); }
.appointment-service-intro-grid { display: grid; grid-template-columns: .42fr 1.58fr; align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.appointment-service-intro h2,
.appointment-service-heading h2,
.appointment-service-example-copy h2,
.appointment-service-fit h2,
.appointment-service-live h2 { margin: 0; color: var(--navy); font-size: var(--xenid-public-h2); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.appointment-service-intro-grid > div > p { max-width: 54rem; margin: 1.5rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.85; }

.appointment-service-benefits { padding: 7.5rem 0; border-top: 1px solid var(--line); background: var(--cloud); }
.appointment-service-heading { display: grid; grid-template-columns: 1.05fr .75fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); margin-bottom: 3.5rem; }
.appointment-service-heading > p { max-width: 38rem; margin: 0; color: var(--muted); line-height: 1.8; }
.appointment-service-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.appointment-service-benefit-grid article { padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--white); }
.appointment-service-icon { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; margin-bottom: 1.5rem; border-radius: .9rem; background: #e8fbf8; color: var(--mint-dark); }
.appointment-service-icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.appointment-service-benefit-grid h3,
.appointment-service-option-grid h3,
.appointment-service-fit-list h3 { margin: 0; color: var(--navy); font-size: 1rem; line-height: 1.45; }
.appointment-service-benefit-grid p,
.appointment-service-option-grid p,
.appointment-service-fit-list p { margin: .75rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.75; }

.appointment-service-example { padding: 8rem 0; background: var(--white); }
.appointment-service-example-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center; gap: clamp(3.5rem, 7vw, 7rem); }
.appointment-service-example-panel { min-width: 0; overflow: hidden; border: 1px solid #d8e0eb; border-radius: 1.6rem; background: #f3f6fb; box-shadow: 0 1.5rem 4rem rgb(23 43 80 / 9%); }
.appointment-service-example-content { display: grid; gap: .75rem; padding: 2rem; }
.appointment-service-example-status { display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid #dbe2ec; border-radius: .9rem; background: var(--white); }
.appointment-service-example-status > span { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--mint); font: 800 .72rem Poppins, Arial, sans-serif; }
.appointment-service-example-status p, .appointment-service-example-status strong, .appointment-service-example-status small { display: block; margin: 0; }
.appointment-service-example-status strong { color: var(--navy); font: 700 .78rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.appointment-service-example-status small { margin-top: .22rem; color: var(--muted); font-size: .7rem; }
.appointment-service-example-status.active { border-color: var(--mint-dark); background: #effcf9; }
.appointment-service-example-copy > p:not(.kicker) { margin: 1.5rem 0 0; color: var(--muted); line-height: 1.8; }
.appointment-service-example-copy ul { display: grid; gap: .7rem; margin: 1.65rem 0 1.8rem; padding: 1.4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.appointment-service-example-copy li { position: relative; padding-left: 1.25rem; color: #455169; font-size: .88rem; line-height: 1.55; }
.appointment-service-example-copy li::before { content: ""; position: absolute; width: .45rem; height: .45rem; left: 0; top: .47rem; border-radius: 50%; background: var(--mint-dark); }

.appointment-service-options { padding: 8rem 0; border-top: 1px solid var(--line); background: var(--cloud); }
.appointment-service-heading-centered { grid-template-columns: 1fr; justify-items: center; max-width: 58rem; margin-inline: auto; text-align: center; }
.appointment-service-heading-centered > p { max-width: 47rem; }
.appointment-service-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 1.4rem; overflow: hidden; background: var(--white); }
.appointment-service-option-grid article { min-width: 0; padding: 2rem; }
.appointment-service-option-grid article:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
.appointment-service-option-grid article:nth-child(n + 4) { border-top: 1px solid var(--line); }
.appointment-service-integration-note { max-width: 66rem; margin: 1.5rem auto 0; color: var(--muted); font-size: .82rem; line-height: 1.75; text-align: center; }
.appointment-service-integration-note strong { color: var(--navy); }
.appointment-service-scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.appointment-service-scenario-grid article { min-width: 0; padding: 2rem; border-radius: 1.25rem; background: var(--navy); color: var(--white); }
.appointment-service-scenario-grid .kicker { margin-bottom: 1rem; color: var(--mint); }
.appointment-service-scenario-grid h3 { margin: 0; color: var(--white); font-size: 1rem; line-height: 1.45; }
.appointment-service-scenario-grid article > p:not(.kicker) { margin: .75rem 0 0; color: #b7c2d4; font-size: .9rem; line-height: 1.75; }

.appointment-service-fit { padding: 8rem 0; background: var(--navy); color: var(--white); }
.appointment-service-fit-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: clamp(3.5rem, 8vw, 8rem); }
.appointment-service-fit h2 { color: var(--white); }
.appointment-service-fit-grid > div:first-child > p:not(.kicker) { margin: 1.5rem 0 0; color: #b7c2d4; line-height: 1.8; }
.appointment-service-fit-list { border-top: 1px solid rgb(255 255 255 / 18%); }
.appointment-service-fit-list article { padding: 1.5rem 0; border-bottom: 1px solid rgb(255 255 255 / 18%); }
.appointment-service-fit-list h3 { color: var(--white); }
.appointment-service-fit-list p { color: #aebbd0; }

.appointment-service-live { padding: 7.5rem 0; background: var(--white); }
.appointment-service-live-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.appointment-service-live-grid > div:last-child > p { max-width: 48rem; margin: .25rem 0 0; color: var(--muted); line-height: 1.85; }
.appointment-service-live-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.appointment-service-inline-link { color: var(--blue); font: 800 .75rem/1.45 Poppins, Arial, sans-serif; text-decoration-thickness: 1px; text-underline-offset: .3rem; text-transform: uppercase; }
.appointment-service-inline-link:hover { color: var(--blue-dark); }
.appointment-service-faq { border-top: 1px solid var(--line); }

@media (max-width: 980px) {
  .appointment-service-hero-grid,
  .appointment-service-heading,
  .appointment-service-example-grid,
  .appointment-service-fit-grid,
  .appointment-service-live-grid { grid-template-columns: 1fr; }
  .appointment-service-hero-grid { align-items: start; }
  .appointment-service-preview { max-width: 42rem; }
  .appointment-service-heading { align-items: start; gap: 1.5rem; }
  .appointment-service-heading > p { max-width: 48rem; }
  .appointment-service-benefit-grid { grid-template-columns: 1fr; }
  .appointment-service-scenario-grid { grid-template-columns: 1fr; }
  .appointment-service-example-copy { order: 1; max-width: 48rem; }
  .appointment-service-example-panel { order: 2; max-width: 46rem; }
  .appointment-service-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-service-option-grid article:not(:nth-child(3n + 1)) { border-left: 0; }
  .appointment-service-option-grid article:nth-child(n + 4) { border-top: 0; }
  .appointment-service-option-grid article:nth-child(even) { border-left: 1px solid var(--line); }
  .appointment-service-option-grid article:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .appointment-service-hero { min-height: 0; padding: 9.5rem 0 4rem; }
  .appointment-service-intro,
  .appointment-service-benefits,
  .appointment-service-example,
  .appointment-service-options,
  .appointment-service-fit,
  .appointment-service-live { padding: 5rem 0; }
  .appointment-service-intro-grid { grid-template-columns: 1fr; gap: 1rem; }
  .appointment-service-heading { margin-bottom: 2.5rem; }
}

@media (max-width: 560px) {
  .appointment-service-page > section .page-width { width: min(100% - 2rem, var(--page)); }
  .appointment-service-hero h1,
  .appointment-service-intro h2,
  .appointment-service-heading h2,
  .appointment-service-example-copy h2,
  .appointment-service-fit h2,
  .appointment-service-live h2 { overflow-wrap: anywhere; }
  .appointment-service-hero-copy > p:not(.kicker) { font-size: .93rem; }
  .appointment-service-actions { align-items: stretch; flex-direction: column; }
  .appointment-service-actions > a,
  .appointment-service-live-actions > a { width: 100%; }
  .appointment-service-preview { border-radius: 1.15rem; }
  .appointment-service-preview-content,
  .appointment-service-example-content { padding: 1rem; }
  .appointment-service-preview .services-planner-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .appointment-service-preview-month { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .appointment-service-benefit-grid article { padding: 1.5rem; }
  .appointment-service-scenario-grid article { padding: 1.5rem; }
  .appointment-service-example-panel { border-radius: 1.15rem; }
  .appointment-service-example-status { grid-template-columns: 2.2rem 1fr; padding: .85rem; }
  .appointment-service-example-status > span { width: 2.2rem; height: 2.2rem; }
  .appointment-service-option-grid { grid-template-columns: 1fr; }
  .appointment-service-option-grid article:nth-child(even) { border-left: 0; }
  .appointment-service-option-grid article:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .appointment-service-live-actions { align-items: stretch; flex-direction: column; }
}

/* Maatwerkwebsite als afzonderlijke dienst */
.website-service-page { background: var(--white); }
.website-service-hero {
  position: relative;
  min-height: 38rem;
  display: flex;
  align-items: end;
  overflow: hidden;
  padding: 12rem 0 5.5rem;
  background:
    radial-gradient(circle at 82% 16%, rgb(74 223 201 / 21%), transparent 24rem),
    linear-gradient(135deg, #07152f, #102b5d);
  color: var(--white);
}
.website-service-hero::after { content: ""; position: absolute; width: 30rem; height: 30rem; right: -15rem; bottom: -21rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; box-shadow: 0 0 0 5rem rgb(255 255 255 / 2.5%), 0 0 0 10rem rgb(255 255 255 / 1.5%); }
.website-service-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(23rem, .82fr); align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.website-service-hero-copy { min-width: 0; }
.website-service-hero h1 { max-width: 50rem; margin: 0; font-weight: 700; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.website-service-hero-copy > p:not(.kicker) { max-width: 47rem; margin: 1.7rem 0 0; color: #d0d9e7; font-size: 1.03rem; line-height: 1.85; }
.website-service-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.website-service-text-link, .website-service-inline-link { color: var(--white); font: 800 .75rem/1.45 Poppins, Arial, sans-serif; text-decoration-thickness: 1px; text-underline-offset: .3rem; text-transform: uppercase; }
.website-service-text-link:hover { color: var(--mint); }
.website-service-preview { min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 24%); border-radius: 1.5rem; background: var(--white); box-shadow: 0 2rem 5rem rgb(0 4 18 / 28%); }
.website-service-preview-content { padding: 1.2rem; }
.website-service-preview-nav { display: flex; align-items: center; gap: 1rem; padding: .25rem .3rem 1rem; color: #8b96a8; font-size: .57rem; font-weight: 700; }
.website-service-preview-nav strong { margin-right: auto; color: var(--navy); font: 700 .75rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.website-service-preview-main { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 13rem; overflow: hidden; border-radius: 1rem; background: linear-gradient(145deg, #eef3fb, #dfe8f7); }
.website-service-preview-main > div:first-child { padding: 1.65rem 1.4rem; }
.website-service-preview-main p { margin: 0 0 .75rem; color: var(--blue); font: 800 .56rem/1.4 Poppins, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.website-service-preview-main b { display: block; width: 92%; height: .65rem; margin-bottom: .45rem; border-radius: 1rem; background: var(--navy); }
.website-service-preview-main b.short { width: 62%; }
.website-service-preview-main i { display: inline-block; width: 2.8rem; height: .36rem; margin: 1.3rem .25rem 0 0; border-radius: 1rem; background: #b6c3d8; }
.website-service-preview-main i:first-of-type { background: var(--mint); }
.website-service-preview-modules { display: grid; align-content: center; gap: .55rem; padding: 1rem; background: var(--navy); }
.website-service-preview-modules span { display: grid; grid-template-columns: 1.65rem 1fr; align-items: center; gap: .65rem; padding: .65rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: .65rem; background: rgb(255 255 255 / 6%); color: var(--mint); }
.website-service-preview-modules svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.website-service-preview-modules small { color: var(--white); font: 700 .56rem/1.35 Poppins, Arial, sans-serif; text-transform: uppercase; }
.website-service-preview-status { display: flex; align-items: center; gap: .5rem; margin: .85rem .2rem .1rem; color: #6f7b8f; font-size: .62rem; font-weight: 700; }
.website-service-preview-status span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint-dark); box-shadow: 0 0 0 .2rem rgb(21 157 139 / 12%); }

.website-service-intro { padding: 7rem 0; background: var(--white); }
.website-service-intro-grid { display: grid; grid-template-columns: .42fr 1.58fr; align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.website-service-intro h2,
.website-service-heading h2,
.website-service-foundation-copy h2,
.website-service-fit h2,
.website-service-proof h2,
.website-service-care h2 { margin: 0; color: var(--navy); font-size: var(--xenid-public-h2); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.website-service-intro-grid > div > p { max-width: 54rem; margin: 1.5rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.85; }

.website-service-benefits { padding: 7.5rem 0; border-top: 1px solid var(--line); background: var(--cloud); }
.website-service-heading { display: grid; grid-template-columns: 1.05fr .75fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); margin-bottom: 3.5rem; }
.website-service-heading > p { max-width: 38rem; margin: 0; color: var(--muted); line-height: 1.8; }
.website-service-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.website-service-benefit-grid article { padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--white); }
.website-service-icon, .website-service-option-icon { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; margin-bottom: 1.5rem; border-radius: .9rem; background: #e8fbf8; color: var(--mint-dark); }
.website-service-icon svg, .website-service-option-icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.website-service-benefit-grid h3,
.website-service-option-grid h3,
.website-service-fit-list h3 { margin: 0; color: var(--navy); font-size: 1rem; line-height: 1.45; }
.website-service-benefit-grid p,
.website-service-option-grid p,
.website-service-fit-list p { margin: .75rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.75; }

.website-service-foundation { padding: 8rem 0; background: var(--white); }
.website-service-foundation-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center; gap: clamp(3.5rem, 7vw, 7rem); }
.website-service-foundation-visual { min-width: 0; padding: clamp(1rem, 4vw, 3rem); border-radius: 1.6rem; background: linear-gradient(145deg, #e9eef8, #f7f9fc); }
.website-service-foundation-browser { min-width: 0; overflow: hidden; border: 1px solid #d6deea; border-radius: 1.35rem; background: var(--white); box-shadow: 0 1.5rem 4rem rgb(23 43 80 / 10%); }
.website-service-foundation-screen { position: relative; display: grid; grid-template-columns: 1fr .28fr 1fr; align-items: center; min-height: 20rem; padding: 2rem; background: #f5f7fb; }
.website-service-foundation-site { padding: 1.5rem; border-radius: 1rem; background: var(--white); box-shadow: 0 1rem 2.5rem rgb(23 43 80 / 8%); }
.website-service-foundation-site span { display: block; width: 3rem; height: .4rem; margin-bottom: 1.2rem; border-radius: 1rem; background: var(--mint); }
.website-service-foundation-site b { display: block; width: 88%; height: .65rem; margin-bottom: .45rem; border-radius: 1rem; background: var(--navy); }
.website-service-foundation-site b:nth-of-type(2) { width: 62%; }
.website-service-foundation-site i { display: block; height: 4rem; margin-top: 1.2rem; border-radius: .65rem; background: linear-gradient(145deg, #315cf6, #8ca4ff); }
.website-service-foundation-connectors { display: grid; align-content: center; gap: 2.4rem; }
.website-service-foundation-connectors span { height: 1px; background: #aebbd0; }
.website-service-foundation-apps { display: grid; gap: .75rem; }
.website-service-foundation-apps span { padding: 1rem; border: 1px solid #d8e0eb; border-radius: .8rem; background: var(--white); color: var(--navy); font: 700 .67rem/1.4 Poppins, Arial, sans-serif; text-align: center; text-transform: uppercase; }
.website-service-foundation-copy > p:not(.kicker) { margin: 1.5rem 0 0; color: var(--muted); line-height: 1.8; }
.website-service-foundation-copy ul, .website-service-proof-copy ul { display: grid; gap: .7rem; margin: 1.65rem 0 1.8rem; padding: 1.4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.website-service-foundation-copy li, .website-service-proof-copy li { position: relative; padding-left: 1.25rem; color: #455169; font-size: .88rem; line-height: 1.55; }
.website-service-foundation-copy li::before, .website-service-proof-copy li::before { content: ""; position: absolute; width: .45rem; height: .45rem; left: 0; top: .47rem; border-radius: 50%; background: var(--mint-dark); }

.website-service-options { padding: 8rem 0; border-top: 1px solid var(--line); background: var(--cloud); }
.website-service-heading-centered { grid-template-columns: 1fr; justify-items: center; max-width: 58rem; margin-inline: auto; text-align: center; }
.website-service-heading-centered > p { max-width: 47rem; }
.website-service-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.website-service-option-grid article { min-width: 0; display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--white); }
.website-service-option-grid p { flex: 1; }
.website-service-option-grid a { margin-top: 1.2rem; color: var(--blue); font: 800 .71rem/1.5 Poppins, Arial, sans-serif; text-decoration-thickness: 1px; text-underline-offset: .25rem; text-transform: uppercase; }
.website-service-option-grid a:hover { color: var(--blue-dark); }

.website-service-fit { padding: 8rem 0; background: var(--navy); color: var(--white); }
.website-service-fit-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: clamp(3.5rem, 8vw, 8rem); }
.website-service-fit h2 { color: var(--white); }
.website-service-fit-grid > div:first-child > p:not(.kicker) { margin: 1.5rem 0 0; color: #b7c2d4; line-height: 1.8; }
.website-service-fit-list { border-top: 1px solid rgb(255 255 255 / 18%); }
.website-service-fit-list article { padding: 1.5rem 0; border-bottom: 1px solid rgb(255 255 255 / 18%); }
.website-service-fit-list h3 { color: var(--white); }
.website-service-fit-list p { color: #aebbd0; }

.website-service-packages { padding: 8rem 0; background: var(--white); }
.website-service-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.website-service-package-grid article { min-width: 0; padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--cloud); }
.website-service-package-grid article.featured { border-color: #2855e7; background: var(--navy); color: var(--white); }
.website-service-package-grid h3 { margin: 0; color: var(--navy); font-size: 1.5rem; line-height: 1.2; text-transform: uppercase; }
.website-service-package-grid .featured h3 { color: var(--white); }
.website-service-package-grid article > p:last-child { margin: 1rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.75; }
.website-service-package-grid .featured > p:last-child { color: #b7c2d4; }
.website-service-package-action { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.5rem; }
.website-service-package-action p { margin: 0; color: var(--muted); font-size: .78rem; }

.website-service-proof { padding: 8rem 0; background: var(--navy); color: var(--white); }
.website-service-proof-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(3.5rem, 7vw, 7rem); }
.website-service-proof h2 { color: var(--white); }
.website-service-proof-copy > p:not(.kicker) { margin: 1.5rem 0 0; color: #b7c2d4; line-height: 1.8; }
.website-service-proof-copy ul { border-color: rgb(255 255 255 / 16%); }
.website-service-proof-copy li { color: #c2ccdc; }
.website-service-proof-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.website-service-inline-link:hover { color: var(--mint); }
.website-service-proof-image { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.6rem; background: #e8edf5; box-shadow: 0 2rem 5rem rgb(0 4 18 / 28%); }
.website-service-proof-image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top center; }
.website-service-proof-image > span { position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem; border-radius: 999px; background: rgb(255 255 255 / 95%); color: var(--navy); font: 800 .62rem/1.4 Poppins, Arial, sans-serif; text-transform: uppercase; }
.website-service-proof-image i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--mint-dark); box-shadow: 0 0 0 .2rem rgb(21 157 139 / 14%); }

.website-service-care { padding: 7.5rem 0; background: var(--cloud); }
.website-service-care-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.website-service-care-grid > div:last-child > p { max-width: 48rem; margin: .25rem 0 2rem; color: var(--muted); line-height: 1.85; }
.website-service-faq { border-top: 1px solid var(--line); }

/* Website APK */
.website-apk-hero { background: radial-gradient(circle at 84% 16%, rgb(74 223 201 / 21%), transparent 24rem), radial-gradient(circle at 68% 96%, rgb(49 92 246 / 24%), transparent 28rem), linear-gradient(135deg, #07152f, #102b5d); }
.apk-hero-report-content { padding: 1.15rem; }
.apk-report-title { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .35rem .3rem 1rem; border-bottom: 1px solid var(--line); }
.apk-report-title small, .apk-report-title strong { display: block; }
.apk-report-title small { color: var(--blue); font-size: .53rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.apk-report-title strong { margin-top: .3rem; color: var(--navy); font: 700 .82rem/1.35 Poppins, Arial, sans-serif; text-transform: uppercase; }
.apk-report-title > span { padding: .45rem .55rem; border-radius: 999px; background: #edf2ff; color: var(--blue); font-size: .48rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.apk-report-checks { display: grid; gap: .55rem; margin-top: .8rem; }
.apk-report-checks article { min-width: 0; display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .65rem; padding: .75rem; border: 1px solid var(--line); border-radius: .7rem; background: #fbfcfe; }
.apk-check-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .55rem; background: #e8fbf8; color: var(--mint-dark); }
.apk-check-icon svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.apk-report-checks strong, .apk-report-checks small { display: block; }
.apk-report-checks strong { color: var(--navy); font: 700 .57rem/1.35 Poppins, Arial, sans-serif; text-transform: uppercase; }
.apk-report-checks small { margin-top: .18rem; color: var(--muted); font-size: .49rem; line-height: 1.4; }
.apk-report-checks i { color: var(--mint-dark); font-size: .49rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.apk-report-footer { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; padding: .65rem .75rem; border-radius: .6rem; background: var(--navy); color: var(--white); font-size: .53rem; font-weight: 750; }
.apk-report-footer span { width: .48rem; height: .48rem; border-radius: 50%; background: var(--mint); }
.apk-check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.apk-report-panel { overflow: hidden; padding: 0; border: 1px solid #d8e0eb; background: var(--white); box-shadow: 0 1.5rem 4rem rgb(23 43 80 / 9%); }
.apk-report-panel-head { padding: 1.5rem 1.7rem; background: var(--navy); }
.apk-report-panel-head small, .apk-report-panel-head strong { display: block; }
.apk-report-panel-head small { color: var(--mint); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.apk-report-panel-head strong { margin-top: .35rem; color: var(--white); font: 700 1.2rem/1.4 Poppins, Arial, sans-serif; text-transform: uppercase; }
.apk-priority-list { display: grid; gap: .75rem; padding: 1.4rem; }
.apk-priority-list article { display: grid; grid-template-columns: .7rem 1fr; gap: .85rem; padding: 1rem; border: 1px solid var(--line); border-radius: .85rem; background: var(--cloud); }
.apk-priority-list strong, .apk-priority-list small { display: block; }
.apk-priority-list strong { color: var(--navy); font: 700 .77rem/1.4 Poppins, Arial, sans-serif; text-transform: uppercase; }
.apk-priority-list small { margin-top: .25rem; color: var(--muted); font-size: .7rem; line-height: 1.55; }
.apk-priority-dot { width: .65rem; height: .65rem; margin-top: .18rem; border-radius: 50%; }
.apk-priority-now { background: #db684d; }
.apk-priority-opportunity { background: var(--blue); }
.apk-priority-later { background: var(--mint-dark); }
.apk-report-panel-summary { padding: 1.15rem 1.7rem 1.4rem; border-top: 1px solid var(--line); }
.apk-report-panel-summary span, .apk-report-panel-summary strong { display: block; }
.apk-report-panel-summary span { color: var(--blue); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.apk-report-panel-summary strong { margin-top: .35rem; color: var(--navy); font: 700 .85rem/1.5 Poppins, Arial, sans-serif; text-transform: uppercase; }
.apk-package-section { padding: 8rem 0; background: var(--navy); color: var(--white); }
.apk-package-heading h2 { color: var(--white); }
.apk-package-heading > p { color: #bac5d7; }
.apk-package-card { display: grid; grid-template-columns: .55fr 1.15fr .8fr; align-items: center; overflow: hidden; border: 1px solid rgb(255 255 255 / 16%); border-radius: 1.5rem; background: rgb(255 255 255 / 5%); }
.apk-package-card > div { min-width: 0; padding: clamp(1.6rem, 3vw, 2.5rem); }
.apk-package-card > div + div { border-left: 1px solid rgb(255 255 255 / 15%); }
.apk-package-price small, .apk-package-price strong, .apk-package-price span { display: block; }
.apk-package-price small { color: var(--mint); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.apk-package-price strong { margin-top: .65rem; color: var(--white); font: 800 clamp(2.4rem, 5vw, 4rem)/1 Poppins, Arial, sans-serif; letter-spacing: -.055em; }
.apk-package-price span { margin-top: .45rem; color: #9faec5; font-size: .62rem; text-transform: uppercase; }
.apk-package-includes h3 { margin: 0; color: var(--white); font-size: 1rem; }
.apk-package-includes ul { display: grid; gap: .65rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.apk-package-includes li { position: relative; padding-left: 1.15rem; color: #d0d8e5; font-size: .82rem; line-height: 1.55; }
.apk-package-includes li::before { content: ""; position: absolute; width: .42rem; height: .42rem; left: 0; top: .46rem; border-radius: 50%; background: var(--mint); }
.apk-package-action p { margin: 0 0 1.3rem; color: #aebbd0; font-size: .78rem; line-height: 1.7; }
.apk-process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.apk-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1rem; }
.apk-package-option { position: relative; min-width: 0; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.8vw, 2.2rem); border: 1px solid rgb(255 255 255 / 16%); border-radius: 1.3rem; background: rgb(255 255 255 / 5%); }
.apk-package-option.featured { border-color: var(--mint); background: linear-gradient(155deg, rgb(74 223 201 / 13%), rgb(255 255 255 / 6%)); box-shadow: 0 1.5rem 4rem rgb(0 5 20 / 20%); }
.apk-package-badge { align-self: flex-start; margin: -3rem 0 1rem; padding: .45rem .7rem; border-radius: 999px; background: var(--mint); color: var(--navy); font: 800 .58rem/1.3 Poppins, Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.apk-package-option-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.apk-package-option-head p, .apk-package-option-head h3 { margin: 0; }
.apk-package-option-head p { color: var(--mint); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.apk-package-option-head h3 { margin-top: .3rem; color: var(--white); font-size: 1.45rem; }
.apk-package-option-head > span { color: var(--white); font: 800 1.6rem/1 Poppins, Arial, sans-serif; white-space: nowrap; }
.apk-package-option-head small { display: block; margin-top: .4rem; color: #9faec5; font: 600 .52rem/1.3 Inter, Arial, sans-serif; text-align: right; text-transform: uppercase; }
.apk-package-option > p { margin: 1.25rem 0 0; color: #b9c5d7; font-size: .78rem; line-height: 1.7; }
.apk-package-option ul { display: grid; gap: .65rem; margin: 1.35rem 0 1.6rem; padding: 0; list-style: none; }
.apk-package-option li { position: relative; padding-left: 1.15rem; color: #e0e6ef; font-size: .75rem; line-height: 1.55; }
.apk-package-option li::before { content: ""; position: absolute; width: .42rem; height: .42rem; left: 0; top: .42rem; border-radius: 50%; background: var(--mint); }
.apk-package-option .services-primary-button { width: 100%; margin-top: auto; border: 0; cursor: pointer; }
.apk-package-scope-note { max-width: 62rem; margin: 1.5rem auto 0; color: #9faec5; font-size: .68rem; line-height: 1.65; text-align: center; }
.apk-request-section { scroll-margin-top: 2rem; padding: clamp(5rem, 9vw, 8rem) 0; background: var(--cloud); }
.apk-request-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(24rem, 1fr); align-items: start; gap: clamp(2.5rem, 7vw, 7rem); }
.apk-request-copy h2 { margin: .65rem 0 1.15rem; color: var(--navy); }
.apk-request-copy > p:not(.kicker) { color: var(--muted); line-height: 1.75; }
.apk-request-steps { display: grid; gap: .7rem; margin-top: 1.7rem; }
.apk-request-steps article { display: grid; grid-template-columns: 2.25rem 1fr; align-items: start; gap: .8rem; padding: .9rem; border: 1px solid var(--line); border-radius: .85rem; background: rgb(255 255 255 / 72%); }
.apk-request-steps article > span { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .7rem; background: var(--navy); color: var(--mint); font: 800 .7rem Poppins, Arial, sans-serif; }
.apk-request-steps strong, .apk-request-steps small { display: block; }
.apk-request-steps strong { color: var(--navy); font: 700 .72rem/1.4 Poppins, Arial, sans-serif; text-transform: uppercase; }
.apk-request-steps small { margin-top: .2rem; color: var(--muted); font-size: .66rem; line-height: 1.55; }
.apk-request-card { overflow: hidden; padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: 1.3rem; background: var(--white); box-shadow: 0 1.5rem 4rem rgb(14 36 75 / 8%); }
.apk-request-card h3 { margin: .55rem 0 0; color: var(--navy); font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.apk-request-card .apk-order-form { padding: 1.5rem 0 0; }
.apk-order-form select, .apk-order-form textarea { width: 100%; min-width: 0; padding: .85rem 1rem; border: 1px solid #cfd8e7; border-radius: .75rem; background: #fbfcfe; color: var(--navy); font: 500 .88rem/1.5 Inter, Arial, sans-serif; outline: none; }
.apk-order-form select { min-height: 3.45rem; }
.apk-order-form textarea { resize: vertical; }
.apk-order-form select:focus, .apk-order-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 .2rem rgb(49 92 246 / 10%); }
.apk-order-form input[readonly] { color: #54647b; background: #f2f5f9; }
.apk-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.apk-boundaries-section { background: linear-gradient(135deg, #07152f, #102b5d); }

@media (max-width: 980px) {
  .website-service-hero-grid,
  .website-service-heading,
  .website-service-foundation-grid,
  .website-service-fit-grid,
  .website-service-proof-grid,
  .website-service-care-grid { grid-template-columns: 1fr; }
  .website-service-hero-grid { align-items: start; }
  .website-service-preview { max-width: 44rem; }
  .website-service-heading { align-items: start; gap: 1.5rem; }
  .website-service-heading > p { max-width: 48rem; }
  .website-service-benefit-grid, .website-service-package-grid { grid-template-columns: 1fr; }
  .website-service-foundation-copy { order: 1; max-width: 48rem; }
  .website-service-foundation-visual { order: 2; max-width: 46rem; }
  .website-service-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apk-package-card { grid-template-columns: 1fr; }
  .apk-package-card > div + div { border-top: 1px solid rgb(255 255 255 / 15%); border-left: 0; }
  .apk-package-grid { grid-template-columns: 1fr; }
  .apk-package-option { max-width: 44rem; }
  .apk-package-badge { margin: 0 0 1rem; }
  .apk-request-grid { grid-template-columns: 1fr; }
  .apk-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .website-service-proof-copy { max-width: 48rem; }
  .website-service-proof-image { max-width: 52rem; }
}

@media (max-width: 760px) {
  .website-service-hero { min-height: 0; padding: 9.5rem 0 4rem; }
  .website-service-intro,
  .website-service-benefits,
  .website-service-foundation,
  .website-service-options,
  .website-service-fit,
  .website-service-packages,
  .website-service-proof,
  .website-service-care { padding: 5rem 0; }
  .apk-package-section { padding: 5rem 0; }
  .apk-request-section { padding: 5rem 0; }
  .website-service-intro-grid { grid-template-columns: 1fr; gap: 1rem; }
  .website-service-heading { margin-bottom: 2.5rem; }
  .website-service-package-action { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .website-service-page > section .page-width { width: min(100% - 2rem, var(--page)); }
  .website-service-hero h1,
  .website-service-intro h2,
  .website-service-heading h2,
  .website-service-foundation-copy h2,
  .website-service-fit h2,
  .website-service-proof h2,
  .website-service-care h2 { overflow-wrap: anywhere; }
  .website-service-hero-copy > p:not(.kicker) { font-size: .93rem; }
  .website-service-actions, .website-service-proof-actions { align-items: stretch; flex-direction: column; }
  .website-service-actions > a, .website-service-proof-actions > a, .website-service-package-action > a { width: 100%; }
  .website-service-preview { border-radius: 1.15rem; }
  .website-service-preview-content { padding: .8rem; }
  .website-service-preview-nav span { display: none; }
  .website-service-preview-main { grid-template-columns: 1fr; }
  .website-service-preview-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .website-service-preview-modules span { grid-template-columns: 1fr; justify-items: center; gap: .4rem; padding: .6rem .3rem; text-align: center; }
  .website-service-benefit-grid article, .website-service-option-grid article { padding: 1.5rem; }
  .website-service-foundation-visual { padding: .75rem; border-radius: 1.15rem; }
  .website-service-foundation-browser { border-radius: 1rem; }
  .website-service-foundation-screen { grid-template-columns: 1fr; gap: .85rem; min-height: 0; padding: 1rem; }
  .website-service-foundation-connectors { display: none; }
  .website-service-foundation-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .website-service-foundation-apps span { padding: .7rem .25rem; font-size: .54rem; }
  .website-service-option-grid { grid-template-columns: 1fr; }
  .apk-process-grid { grid-template-columns: 1fr; }
  .apk-package-option-head { align-items: flex-start; flex-direction: column; }
  .apk-package-option-head small { text-align: left; }
  .apk-request-card { padding: 1.25rem; }
  .apk-report-title { align-items: stretch; flex-direction: column; }
  .apk-report-title > span { align-self: flex-start; }
  .apk-report-checks article { grid-template-columns: 2rem 1fr; }
  .apk-report-checks i { grid-column: 2; }
  .website-service-proof-image { border-radius: 1.15rem; }
  .website-service-proof-image > span { right: .75rem; left: .75rem; justify-content: center; text-align: center; }
}

/* Portalen en bedrijfssoftware als afzonderlijke dienst */
.portal-service-hero {
  background:
    radial-gradient(circle at 84% 12%, rgb(74 223 201 / 25%), transparent 23rem),
    radial-gradient(circle at 68% 88%, rgb(49 92 246 / 25%), transparent 28rem),
    linear-gradient(135deg, #07152f, #102b5d);
}
.portal-service-preview-shell { display: grid; grid-template-columns: 5.4rem 1fr; min-height: 18.5rem; background: #f4f7fb; }
.portal-service-preview-nav { display: flex; flex-direction: column; gap: .55rem; padding: 1rem .65rem; background: var(--navy); }
.portal-service-preview-nav strong { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; margin: 0 auto .5rem; border-radius: .55rem; background: var(--mint); color: var(--navy); font: 800 .8rem Poppins, Arial, sans-serif; }
.portal-service-preview-nav span { padding: .55rem .45rem; border-radius: .45rem; color: #aebbd0; font-size: .47rem; font-weight: 700; }
.portal-service-preview-nav span.active { background: rgb(255 255 255 / 10%); color: var(--white); }
.portal-service-preview-dashboard { min-width: 0; padding: 1rem; }
.portal-service-preview-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.portal-service-preview-top div { display: grid; gap: .15rem; }
.portal-service-preview-top small { color: #8b96a8; font-size: .5rem; }
.portal-service-preview-top b { color: var(--navy); font: 700 .76rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.portal-service-preview-top > span { padding: .45rem .6rem; border-radius: 999px; background: var(--blue); color: var(--white); font: 700 .47rem Poppins, Arial, sans-serif; }
.portal-service-preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .85rem; }
.portal-service-preview-metrics article { min-width: 0; padding: .7rem; border: 1px solid #dbe3ef; border-radius: .65rem; background: var(--white); }
.portal-service-preview-metrics small, .portal-service-preview-metrics i { display: block; color: #7b8799; font-size: .43rem; font-style: normal; line-height: 1.35; }
.portal-service-preview-metrics strong { display: block; margin: .2rem 0; color: var(--navy); font: 700 1.05rem Poppins, Arial, sans-serif; }
.portal-service-preview-metrics i { color: var(--mint-dark); }
.portal-service-preview-lower { display: grid; grid-template-columns: 1.15fr .85fr; gap: .55rem; margin-top: .55rem; }
.portal-service-preview-lower > div { min-width: 0; min-height: 7.2rem; padding: .75rem; border: 1px solid #dbe3ef; border-radius: .65rem; background: var(--white); }
.portal-service-preview-lower b { display: block; margin-bottom: .55rem; color: var(--navy); font: 700 .52rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.portal-service-preview-lower > div:first-child span { display: block; width: var(--portal-level); height: .45rem; margin-top: .48rem; border-radius: 1rem; background: linear-gradient(90deg, var(--blue), #8ca4ff); }
.portal-service-preview-lower .portal-level-68 { --portal-level: 68%; }
.portal-service-preview-lower .portal-level-82 { --portal-level: 82%; }
.portal-service-preview-lower .portal-level-54 { --portal-level: 54%; }
.portal-service-preview-lower .portal-level-91 { --portal-level: 91%; }
.portal-service-preview-lower > div:last-child small { display: block; margin-top: .45rem; padding-bottom: .35rem; border-bottom: 1px solid #edf1f6; color: #6f7b8f; font-size: .44rem; }

.portal-service-process-visual { display: grid; gap: 1rem; }
.portal-service-process-core { display: grid; justify-items: center; padding: 1.4rem; border: 1px solid #d9e1ed; border-radius: 1rem; background: var(--white); box-shadow: 0 1rem 2.5rem rgb(23 43 80 / 8%); text-align: center; }
.portal-service-process-core .website-service-option-icon { margin-bottom: .8rem; }
.portal-service-process-core strong { color: var(--navy); font: 700 .9rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.portal-service-process-core small { margin-top: .25rem; color: var(--muted); }
.portal-service-process-users { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.portal-service-process-users article { display: grid; grid-template-columns: 2.2rem 1fr; align-items: center; gap: .7rem; padding: .8rem; border: 1px solid #d9e1ed; border-radius: .8rem; background: rgb(255 255 255 / 88%); }
.portal-service-process-users article > span { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: .65rem; background: var(--navy); color: var(--mint); font: 800 .68rem Poppins, Arial, sans-serif; }
.portal-service-process-users article div { display: grid; gap: .1rem; }
.portal-service-process-users strong { color: var(--navy); font: 700 .66rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.portal-service-process-users small { color: var(--muted); font-size: .58rem; }
.portal-service-option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.portal-service-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgb(255 255 255 / 18%); }
.portal-service-role-grid article { padding: 1.4rem 1.2rem 1.4rem 0; border-bottom: 1px solid rgb(255 255 255 / 18%); }
.portal-service-role-grid article:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid rgb(255 255 255 / 18%); }
.portal-service-role-grid strong, .portal-service-role-grid span { display: block; }
.portal-service-role-grid strong { color: var(--white); font: 700 .88rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.portal-service-role-grid span { margin-top: .35rem; color: #aebbd0; font-size: .82rem; line-height: 1.65; }

.portal-service-integration-visual { position: relative; min-height: 29rem; display: grid; place-items: center; overflow: hidden; }
.portal-service-integration-visual::before { content: ""; position: absolute; width: 18rem; height: 18rem; border: 1px solid #cbd6e5; border-radius: 50%; box-shadow: 0 0 0 4rem rgb(49 92 246 / 3%), 0 0 0 8rem rgb(49 92 246 / 2%); }
.portal-service-integration-center { position: relative; z-index: 2; width: 8rem; height: 8rem; display: grid; place-content: center; border-radius: 50%; background: var(--navy); box-shadow: 0 1.5rem 3rem rgb(8 25 56 / 22%); text-align: center; }
.portal-service-integration-center strong { color: var(--white); font: 700 1rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.portal-service-integration-center small { margin-top: .25rem; color: var(--mint); font-size: .62rem; }
.portal-service-integration-grid { position: absolute; inset: 1.6rem; }
.portal-service-integration-grid span { position: absolute; z-index: 2; width: 7.5rem; padding: .75rem .5rem; border: 1px solid #d7e0ec; border-radius: .75rem; background: rgb(255 255 255 / 96%); color: var(--navy); box-shadow: 0 .75rem 2rem rgb(23 43 80 / 8%); font: 700 .58rem/1.35 Poppins, Arial, sans-serif; text-align: center; text-transform: uppercase; }
.portal-service-integration-grid span:nth-child(1) { left: 0; top: 0; }
.portal-service-integration-grid span:nth-child(2) { right: 0; top: 0; }
.portal-service-integration-grid span:nth-child(3) { left: 0; top: 36%; }
.portal-service-integration-grid span:nth-child(4) { right: 0; top: 36%; }
.portal-service-integration-grid span:nth-child(5) { left: 0; bottom: 0; }
.portal-service-integration-grid span:nth-child(6) { right: 0; bottom: 0; }
.portal-service-integration-grid span:nth-child(7) { left: 50%; top: 0; transform: translateX(-50%); }
.portal-service-integration-grid span:nth-child(8) { left: 50%; bottom: 0; transform: translateX(-50%); }
.portal-service-technical-note { margin-top: 1.3rem; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.portal-service-technical-note strong { color: var(--navy); }

.portal-service-demos { padding: 8rem 0; border-top: 1px solid var(--line); background: var(--cloud); }
.portal-service-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.portal-service-demo-grid > article { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 1.35rem; background: var(--white); }
.portal-service-demo-screen { min-height: 15rem; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: .65rem; padding: 2rem; background: linear-gradient(145deg, #eef3fb, #dfe8f7); }
.portal-service-demo-screen > div { align-self: start; grid-column: span 2; padding: 1rem; border-radius: .8rem; background: var(--white); box-shadow: 0 .8rem 2rem rgb(23 43 80 / 7%); }
.portal-service-demo-screen div span, .portal-service-demo-screen div strong { display: block; }
.portal-service-demo-screen div span { color: var(--muted); font-size: .62rem; }
.portal-service-demo-screen div strong { margin-top: .25rem; color: var(--navy); font: 700 1.2rem Poppins, Arial, sans-serif; }
.portal-service-demo-screen i { height: var(--portal-demo-level); min-height: 2.5rem; border-radius: .45rem .45rem 0 0; background: var(--blue); }
.portal-service-demo-screen .portal-demo-level-48 { --portal-demo-level: 48%; }
.portal-service-demo-screen .portal-demo-level-72 { --portal-demo-level: 72%; }
.portal-service-demo-screen .portal-demo-level-61 { --portal-demo-level: 61%; background: var(--mint-dark); }
.portal-service-demo-screen .portal-demo-level-86 { --portal-demo-level: 86%; }
.portal-service-demo-screen-bv { align-content: center; align-items: stretch; background: linear-gradient(145deg, #102b5d, #07152f); }
.portal-service-demo-screen-bv > div { align-self: auto; }
.portal-service-demo-screen-bv ul { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.portal-service-demo-screen-bv li { padding: .7rem .4rem; border: 1px solid rgb(255 255 255 / 15%); border-radius: .65rem; background: rgb(255 255 255 / 7%); color: var(--white); font: 700 .58rem Poppins, Arial, sans-serif; text-align: center; text-transform: uppercase; }
.portal-service-demo-copy { padding: 2rem; }
.portal-service-demo-copy h3 { margin: 0; color: var(--navy); font-size: 1.25rem; line-height: 1.35; }
.portal-service-demo-copy > p:not(.kicker) { margin: .85rem 0 1.5rem; color: var(--muted); line-height: 1.75; }

.portal-service-phase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 1.35rem; background: var(--cloud); }
.portal-service-phase-grid article { min-width: 0; padding: 2rem; }
.portal-service-phase-grid article + article { border-left: 1px solid var(--line); }
.portal-service-phase-grid span { display: block; color: #dfe6f2; font: 700 4.5rem/1 Poppins, Arial, sans-serif; }
.portal-service-phase-grid h3 { margin: -1.5rem 0 0; color: var(--navy); font-size: .9rem; line-height: 1.45; }
.portal-service-phase-grid p { margin: .75rem 0 0; color: var(--muted); font-size: .84rem; line-height: 1.7; }
.portal-service-price-note { display: grid; grid-template-columns: .85fr 1.25fr auto; align-items: center; gap: 2rem; margin-top: 1rem; padding: 2rem; border-radius: 1.35rem; background: var(--navy); color: var(--white); }
.portal-service-price-note h3 { margin: 0; color: var(--white); font-size: 1.3rem; line-height: 1.35; }
.portal-service-price-note > p { margin: 0; color: #b7c2d4; font-size: .86rem; line-height: 1.75; }
.portal-service-price-note .services-secondary-button { background: var(--mint); color: var(--navy); }
.portal-service-price-note .services-secondary-button:hover { background: var(--white); }

.portal-service-security-list { display: grid; gap: .65rem; margin: 0 0 1.8rem; padding: 1.4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.portal-service-security-list li { position: relative; padding-left: 1.25rem; color: #455169; font-size: .88rem; line-height: 1.55; }
.portal-service-security-list li::before { content: ""; position: absolute; width: .45rem; height: .45rem; left: 0; top: .47rem; border-radius: 50%; background: var(--mint-dark); }

@media (max-width: 980px) {
  .portal-service-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-service-process-copy { order: 1; max-width: 48rem; }
  .portal-service-process-visual { order: 2; max-width: 46rem; }
  .portal-service-integration-visual { order: 2; max-width: 46rem; }
  .portal-service-demo-grid { grid-template-columns: 1fr; }
  .portal-service-demo-grid > article { display: grid; grid-template-columns: 1fr 1fr; }
  .portal-service-phase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-service-phase-grid article:nth-child(3) { border-left: 0; }
  .portal-service-phase-grid article:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .portal-service-price-note { grid-template-columns: 1fr; }
  .portal-service-price-note .services-secondary-button { justify-self: start; }
}

@media (max-width: 760px) {
  .portal-service-demos { padding: 5rem 0; }
  .portal-service-preview-shell { min-height: 16rem; }
  .portal-service-demo-grid > article { grid-template-columns: 1fr; }
  .portal-service-demo-copy { order: 1; }
  .portal-service-demo-screen { order: 2; }
  .portal-service-demo-screen { min-height: 13rem; }
}

@media (max-width: 560px) {
  .portal-service-hero h1 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .portal-service-preview-shell { grid-template-columns: 3.4rem 1fr; }
  .portal-service-preview-nav { padding: .8rem .4rem; }
  .portal-service-preview-nav span { width: .45rem; height: .45rem; padding: 0; margin: .35rem auto; border-radius: 50%; background: #647189; color: transparent; overflow: hidden; }
  .portal-service-preview-nav span.active { background: var(--mint); }
  .portal-service-preview-metrics { grid-template-columns: 1fr; }
  .portal-service-preview-metrics article:nth-child(n + 2) { display: none; }
  .portal-service-preview-lower { grid-template-columns: 1fr; }
  .portal-service-preview-lower > div:last-child { display: none; }
  .portal-service-process-users { grid-template-columns: 1fr; }
  .portal-service-option-grid { grid-template-columns: 1fr; }
  .portal-service-role-grid { grid-template-columns: 1fr; }
  .portal-service-role-grid article:nth-child(even) { padding-left: 0; border-left: 0; }
  .portal-service-integration-visual { min-height: 26rem; }
  .portal-service-integration-grid { inset: 1rem; }
  .portal-service-integration-grid span { width: 6.2rem; font-size: .5rem; }
  .portal-service-integration-grid span:nth-child(7), .portal-service-integration-grid span:nth-child(8) { display: none; }
  .portal-service-demo-copy { padding: 1.5rem; }
  .portal-service-phase-grid { grid-template-columns: 1fr; }
  .portal-service-phase-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
  .portal-service-price-note { padding: 1.5rem; }
  .portal-service-price-note .services-secondary-button { width: 100%; }
}

/* Dashboards en bezoekersinzichten als afzonderlijke dienst */
.dashboard-service-hero {
  background:
    radial-gradient(circle at 82% 18%, rgb(74 223 201 / 24%), transparent 22rem),
    radial-gradient(circle at 62% 92%, rgb(49 92 246 / 26%), transparent 30rem),
    linear-gradient(135deg, #07152f, #102b5d);
}
.dashboard-service-preview { background: #f4f7fb; }
.dashboard-service-preview-shell { min-height: 19rem; padding: 1rem; background: #f4f7fb; }
.dashboard-service-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dashboard-service-preview-head > div { display: grid; gap: .12rem; }
.dashboard-service-preview-head small { color: #8793a6; font-size: .48rem; }
.dashboard-service-preview-head b { color: var(--navy); font: 700 .78rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.dashboard-service-preview-head > span { padding: .45rem .65rem; border: 1px solid #d6dfec; border-radius: 999px; background: var(--white); color: #647187; font-size: .48rem; font-weight: 700; }
.dashboard-service-preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .8rem; }
.dashboard-service-preview-metrics article { min-width: 0; padding: .7rem; border: 1px solid #dbe3ef; border-radius: .7rem; background: var(--white); }
.dashboard-service-preview-metrics small, .dashboard-service-preview-metrics i { display: block; color: #7e899b; font-size: .44rem; font-style: normal; line-height: 1.35; }
.dashboard-service-preview-metrics strong { display: block; margin: .2rem 0; color: var(--navy); font: 700 .95rem Poppins, Arial, sans-serif; }
.dashboard-service-preview-metrics i { color: var(--mint-dark); }
.dashboard-service-preview-main { display: grid; grid-template-columns: 1.35fr .65fr; gap: .55rem; margin-top: .55rem; }
.dashboard-service-chart, .dashboard-service-sources { min-width: 0; min-height: 8.7rem; padding: .75rem; border: 1px solid #dbe3ef; border-radius: .7rem; background: var(--white); }
.dashboard-service-chart > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dashboard-service-chart b, .dashboard-service-sources > b { color: var(--navy); font: 700 .54rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.dashboard-service-chart small { color: #8a95a7; font-size: .42rem; }
.dashboard-service-chart svg { display: block; width: 100%; height: 6.4rem; margin-top: .3rem; overflow: visible; }
.dashboard-service-chart .dashboard-grid-line { fill: none; stroke: #e8edf4; stroke-width: 1; }
.dashboard-service-chart .dashboard-line-area { fill: rgb(49 92 246 / 10%); }
.dashboard-service-chart .dashboard-line-path { fill: none; stroke: var(--blue); stroke-linecap: round; stroke-width: 4; }
.dashboard-service-chart circle { fill: var(--mint-dark); stroke: var(--white); stroke-width: 3; }
.dashboard-service-sources > b { display: block; margin-bottom: .65rem; }
.dashboard-service-sources > span { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .2rem .35rem; margin-top: .65rem; padding-top: .35rem; }
.dashboard-service-sources i { position: absolute; top: 0; left: 0; width: var(--dashboard-bar); height: .22rem; border-radius: 1rem; background: var(--blue); }
.dashboard-service-sources .dashboard-bar-82 { --dashboard-bar: 82%; }
.dashboard-service-sources .dashboard-bar-64 { --dashboard-bar: 64%; background: var(--mint-dark); }
.dashboard-service-sources .dashboard-bar-47 { --dashboard-bar: 47%; background: #8ca4ff; }
.dashboard-service-sources small, .dashboard-service-sources strong { color: #758196; font-size: .43rem; }
.dashboard-service-sources strong { color: var(--navy); }

.dashboard-service-type-visual { display: grid; gap: 1rem; }
.dashboard-service-type-core { display: grid; justify-items: center; padding: 1.35rem; border-radius: 1rem; background: var(--navy); box-shadow: 0 1.4rem 3rem rgb(8 25 56 / 17%); text-align: center; }
.dashboard-service-type-core strong { color: var(--white); font: 700 .92rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.dashboard-service-type-core small { margin-top: .25rem; color: var(--mint); font-size: .65rem; }
.dashboard-service-type-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.dashboard-service-type-list article { display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; gap: .75rem; padding: .9rem; border: 1px solid #d7e0ec; border-radius: .85rem; background: rgb(255 255 255 / 90%); }
.dashboard-service-type-list article > span { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: .7rem; background: #e9efff; color: var(--blue); font: 800 .61rem Poppins, Arial, sans-serif; }
.dashboard-service-type-list article div { display: grid; gap: .12rem; }
.dashboard-service-type-list strong { color: var(--navy); font: 700 .66rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.dashboard-service-type-list small { color: var(--muted); font-size: .57rem; line-height: 1.4; }
.dashboard-service-option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dashboard-service-source-visual { position: relative; min-height: 29rem; display: grid; place-items: center; overflow: hidden; }
.dashboard-service-source-visual::before { content: ""; position: absolute; width: 18rem; height: 18rem; border: 1px solid #cad5e5; border-radius: 50%; box-shadow: 0 0 0 4rem rgb(49 92 246 / 3%), 0 0 0 8rem rgb(49 92 246 / 2%); }
.dashboard-source-center { position: relative; z-index: 2; width: 8.2rem; height: 8.2rem; display: grid; place-content: center; border-radius: 50%; background: var(--blue); box-shadow: 0 1.5rem 3rem rgb(23 50 130 / 22%); text-align: center; }
.dashboard-source-center strong { color: var(--white); font: 700 .88rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.dashboard-source-center small { max-width: 6rem; margin-top: .25rem; color: #dbe3ff; font-size: .57rem; line-height: 1.35; }
.dashboard-source-grid { position: absolute; inset: 1.6rem; }
.dashboard-source-grid span { position: absolute; z-index: 2; width: 7.2rem; padding: .72rem .45rem; border: 1px solid #d7e0ec; border-radius: .75rem; background: rgb(255 255 255 / 97%); color: var(--navy); box-shadow: 0 .8rem 2rem rgb(23 43 80 / 8%); font: 700 .58rem/1.35 Poppins, Arial, sans-serif; text-align: center; text-transform: uppercase; }
.dashboard-source-grid span:nth-child(1) { left: 0; top: 0; }
.dashboard-source-grid span:nth-child(2) { right: 0; top: 0; }
.dashboard-source-grid span:nth-child(3) { left: 0; top: 38%; }
.dashboard-source-grid span:nth-child(4) { right: 0; top: 38%; }
.dashboard-source-grid span:nth-child(5) { left: 0; bottom: 0; }
.dashboard-source-grid span:nth-child(6) { right: 0; bottom: 0; }
.dashboard-source-grid span:nth-child(7) { left: 50%; top: 0; transform: translateX(-50%); }
.dashboard-source-grid span:nth-child(8) { left: 50%; bottom: 0; transform: translateX(-50%); }

.dashboard-service-traffic { padding: 8rem 0; background: var(--navy); color: var(--white); }
.dashboard-service-traffic-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.dashboard-service-traffic h2 { color: var(--white); }
.dashboard-service-traffic-copy > p:not(.kicker) { margin: 1.5rem 0 0; color: #bac5d6; line-height: 1.82; }
.dashboard-service-traffic-copy ul { display: grid; gap: .65rem; margin: 1.5rem 0; padding: 1.35rem 0; border-top: 1px solid rgb(255 255 255 / 16%); border-bottom: 1px solid rgb(255 255 255 / 16%); list-style: none; }
.dashboard-service-traffic-copy li { position: relative; padding-left: 1.2rem; color: #d0d7e3; font-size: .88rem; line-height: 1.55; }
.dashboard-service-traffic-copy li::before { content: ""; position: absolute; width: .42rem; height: .42rem; left: 0; top: .5rem; border-radius: 50%; background: var(--mint); }
.dashboard-service-traffic-copy .dashboard-service-note { margin-top: 1.2rem; padding: 1rem 1.1rem; border: 1px solid rgb(255 255 255 / 14%); border-radius: .85rem; background: rgb(255 255 255 / 5%); font-size: .8rem; line-height: 1.7; }
.dashboard-service-note strong { color: var(--white); }
.dashboard-service-traffic-preview { min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.35rem; background: #f4f7fb; box-shadow: 0 2rem 5rem rgb(0 4 18 / 25%); }
.dashboard-traffic-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 1.25rem 1.25rem 0; }
.dashboard-traffic-metrics article { padding: 1rem; border: 1px solid #dbe3ef; border-radius: .8rem; background: var(--white); }
.dashboard-traffic-metrics small, .dashboard-traffic-metrics span, .dashboard-traffic-metrics strong { display: block; }
.dashboard-traffic-metrics small { color: #758196; font-size: .58rem; }
.dashboard-traffic-metrics strong { margin: .25rem 0; color: var(--navy); font: 700 1.5rem Poppins, Arial, sans-serif; }
.dashboard-traffic-metrics span { color: var(--mint-dark); font-size: .55rem; font-weight: 700; }
.dashboard-traffic-pages, .dashboard-traffic-funnel { margin: .75rem 1.25rem 0; padding: 1rem; border: 1px solid #dbe3ef; border-radius: .8rem; background: var(--white); }
.dashboard-traffic-pages > b, .dashboard-traffic-funnel > b { color: var(--navy); font: 700 .65rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.dashboard-traffic-pages > span { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .2rem .5rem; margin-top: .75rem; padding-top: .4rem; }
.dashboard-traffic-pages i { position: absolute; top: 0; left: 0; width: var(--traffic-level); height: .28rem; border-radius: 1rem; background: var(--blue); }
.dashboard-traffic-pages .dashboard-traffic-level-91 { --traffic-level: 91%; }
.dashboard-traffic-pages .dashboard-traffic-level-73 { --traffic-level: 73%; background: var(--mint-dark); }
.dashboard-traffic-pages .dashboard-traffic-level-48 { --traffic-level: 48%; background: #8ca4ff; }
.dashboard-traffic-pages small, .dashboard-traffic-pages strong { color: #68758a; font-size: .56rem; }
.dashboard-traffic-pages strong { color: var(--navy); }
.dashboard-traffic-funnel > div { display: grid; grid-template-columns: 1fr .72fr .46fr; align-items: end; gap: .5rem; margin-top: .75rem; }
.dashboard-traffic-funnel span { min-height: 3rem; display: grid; place-items: center; padding: .55rem; border-radius: .55rem; background: #e9efff; color: var(--blue); font: 700 .5rem Poppins, Arial, sans-serif; text-align: center; }
.dashboard-traffic-funnel span:nth-child(2) { min-height: 4rem; background: #dcf8f3; color: #087969; }
.dashboard-traffic-funnel span:nth-child(3) { min-height: 5rem; background: var(--blue); color: var(--white); }
.dashboard-fictitious-label { display: block; padding: .75rem 1.25rem 1.15rem; color: #7f8b9e; font-size: .52rem; }

.dashboard-service-project-note { display: grid; grid-template-columns: .8fr 1.25fr auto; align-items: center; gap: 2rem; margin-top: 1rem; padding: 2rem; border-radius: 1.35rem; background: var(--navy); color: var(--white); }
.dashboard-service-project-note h3 { margin: 0; color: var(--white); font-size: 1.25rem; line-height: 1.35; }
.dashboard-service-project-note > p { margin: 0; color: #b7c2d4; font-size: .86rem; line-height: 1.75; }
.dashboard-service-project-note .services-secondary-button { background: var(--mint); color: var(--navy); }
.dashboard-service-project-note .services-secondary-button:hover { background: var(--white); }

@media (max-width: 980px) {
  .dashboard-service-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-service-types-copy, .dashboard-service-sources-copy { order: 1; max-width: 48rem; }
  .dashboard-service-type-visual, .dashboard-service-source-visual { order: 2; max-width: 46rem; }
  .dashboard-service-traffic-grid { grid-template-columns: 1fr; }
  .dashboard-service-traffic-copy { max-width: 48rem; }
  .dashboard-service-traffic-preview { max-width: 46rem; }
  .dashboard-service-project-note { grid-template-columns: 1fr; }
  .dashboard-service-project-note .services-secondary-button { justify-self: start; }
}

@media (max-width: 760px) {
  .dashboard-service-traffic { padding: 5rem 0; }
}

@media (max-width: 560px) {
  .dashboard-service-hero h1 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .dashboard-service-preview-shell { min-height: 16rem; padding: .75rem; }
  .dashboard-service-preview-metrics { grid-template-columns: 1fr; }
  .dashboard-service-preview-metrics article:nth-child(n + 2) { display: none; }
  .dashboard-service-preview-main { grid-template-columns: 1fr; }
  .dashboard-service-sources { display: none; }
  .dashboard-service-type-list { grid-template-columns: 1fr; }
  .dashboard-service-option-grid { grid-template-columns: 1fr; }
  .dashboard-service-source-visual { min-height: 26rem; }
  .dashboard-source-grid { inset: 1rem; }
  .dashboard-source-grid span { width: 6rem; font-size: .5rem; }
  .dashboard-source-grid span:nth-child(7), .dashboard-source-grid span:nth-child(8) { display: none; }
  .dashboard-service-traffic-preview { border-radius: 1.1rem; }
  .dashboard-traffic-metrics { grid-template-columns: 1fr; }
  .dashboard-traffic-metrics article:nth-child(2) { display: none; }
  .dashboard-traffic-funnel > div { grid-template-columns: 1fr; align-items: stretch; }
  .dashboard-traffic-funnel span, .dashboard-traffic-funnel span:nth-child(2), .dashboard-traffic-funnel span:nth-child(3) { min-height: 0; }
  .dashboard-service-project-note { padding: 1.5rem; }
  .dashboard-service-project-note .services-secondary-button { width: 100%; }
}

/* Hosting en technisch beheer als afzonderlijke dienst */
.hosting-service-hero {
  background:
    radial-gradient(circle at 82% 18%, rgb(74 223 201 / 23%), transparent 22rem),
    radial-gradient(circle at 66% 92%, rgb(49 92 246 / 25%), transparent 30rem),
    linear-gradient(135deg, #07152f, #102b5d);
}
.hosting-service-preview { background: #f4f7fb; }
.hosting-service-preview-shell { min-height: 19rem; padding: 1rem; background: #f4f7fb; }
.hosting-service-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hosting-service-preview-head > div { display: grid; gap: .12rem; }
.hosting-service-preview-head small { color: #8793a6; font-size: .48rem; }
.hosting-service-preview-head b { color: var(--navy); font: 700 .76rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.hosting-service-preview-head > span { display: flex; align-items: center; gap: .4rem; padding: .45rem .65rem; border: 1px solid #d6dfec; border-radius: 999px; background: var(--white); color: #516078; font-size: .48rem; font-weight: 700; }
.hosting-service-preview-head > span i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--mint-dark); box-shadow: 0 0 0 .18rem rgb(21 157 139 / 12%); }
.hosting-service-preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .8rem; }
.hosting-service-preview-metrics article { min-width: 0; display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .55rem; padding: .7rem; border: 1px solid #dbe3ef; border-radius: .7rem; background: var(--white); }
.hosting-preview-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .6rem; background: #e5f8f5; color: var(--mint-dark); font: 800 .65rem Poppins, Arial, sans-serif; }
.hosting-service-preview-metrics article > div { min-width: 0; }
.hosting-service-preview-metrics small, .hosting-service-preview-metrics i { display: block; color: #7e899b; font-size: .42rem; font-style: normal; line-height: 1.35; }
.hosting-service-preview-metrics strong { display: block; margin: .13rem 0; color: var(--navy); font: 700 .72rem Poppins, Arial, sans-serif; }
.hosting-service-preview-metrics i { color: var(--mint-dark); }
.hosting-service-preview-lower { display: grid; grid-template-columns: 1.2fr .8fr; gap: .55rem; margin-top: .55rem; }
.hosting-service-preview-lower > div { min-width: 0; min-height: 8.3rem; padding: .75rem; border: 1px solid #dbe3ef; border-radius: .7rem; background: var(--white); }
.hosting-service-preview-lower b { display: block; margin-bottom: .65rem; color: var(--navy); font: 700 .52rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.hosting-service-preview-lower > div:first-child > span { position: relative; display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: .35rem; margin-top: .65rem; }
.hosting-service-preview-lower small, .hosting-service-preview-lower strong { color: #758196; font-size: .43rem; }
.hosting-service-preview-lower strong { color: var(--navy); }
.hosting-service-preview-lower > div:first-child i { position: relative; height: .28rem; overflow: hidden; border-radius: 1rem; background: #e8edf5; }
.hosting-service-preview-lower > div:first-child i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--hosting-level); border-radius: inherit; background: var(--blue); }
.hosting-service-preview-lower .hosting-level-74 { --hosting-level: 74%; }
.hosting-service-preview-lower .hosting-level-52 { --hosting-level: 52%; }
.hosting-service-preview-lower .hosting-level-38 { --hosting-level: 38%; }
.hosting-service-preview-lower > div:last-child > span { display: grid; grid-template-columns: .45rem 1fr; align-items: center; gap: .45rem; margin-top: .55rem; color: #667389; font-size: .45rem; }
.hosting-service-preview-lower > div:last-child i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--mint-dark); }

.hosting-service-layer-visual { display: grid; place-items: center; }
.hosting-layer-stack { width: min(100%, 29rem); display: grid; gap: .55rem; }
.hosting-layer-stack article { display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; gap: .8rem; margin-inline: var(--layer-inset); padding: .85rem 1rem; border: 1px solid #d7e0ec; border-radius: .8rem; background: var(--white); box-shadow: 0 .7rem 1.8rem rgb(23 43 80 / 6%); }
.hosting-layer-stack article:nth-child(1) { --layer-inset: 3rem; }
.hosting-layer-stack article:nth-child(2) { --layer-inset: 2.25rem; }
.hosting-layer-stack article:nth-child(3) { --layer-inset: 1.5rem; }
.hosting-layer-stack article:nth-child(4) { --layer-inset: .75rem; }
.hosting-layer-stack article:nth-child(5) { --layer-inset: 0rem; background: var(--navy); }
.hosting-layer-stack article > span { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: .65rem; background: #e9efff; color: var(--blue); font: 800 .6rem Poppins, Arial, sans-serif; }
.hosting-layer-stack article:nth-child(5) > span { background: rgb(74 223 201 / 13%); color: var(--mint); }
.hosting-layer-stack article div { display: grid; gap: .12rem; }
.hosting-layer-stack strong { color: var(--navy); font: 700 .68rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.hosting-layer-stack small { color: var(--muted); font-size: .58rem; }
.hosting-layer-stack article:nth-child(5) strong { color: var(--white); }
.hosting-layer-stack article:nth-child(5) small { color: #aebbd0; }
.hosting-service-option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hosting-service-monitoring { padding: 8rem 0; background: var(--navy); color: var(--white); }
.hosting-service-monitoring-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.hosting-service-monitoring h2 { color: var(--white); }
.hosting-service-monitoring-copy > p:not(.kicker) { margin: 1.4rem 0 0; color: #bac5d6; line-height: 1.82; }
.hosting-service-monitoring-copy ul { display: grid; gap: .65rem; margin: 1.5rem 0 0; padding: 1.35rem 0; border-top: 1px solid rgb(255 255 255 / 16%); border-bottom: 1px solid rgb(255 255 255 / 16%); list-style: none; }
.hosting-service-monitoring-copy li { position: relative; padding-left: 1.2rem; color: #d0d7e3; font-size: .88rem; line-height: 1.55; }
.hosting-service-monitoring-copy li::before { content: ""; position: absolute; width: .42rem; height: .42rem; left: 0; top: .5rem; border-radius: 50%; background: var(--mint); }
.hosting-service-monitoring-visual { min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.35rem; background: #f4f7fb; box-shadow: 0 2rem 5rem rgb(0 4 18 / 25%); }
.hosting-monitor-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid #dbe3ef; background: var(--white); }
.hosting-monitor-head > div { display: flex; align-items: center; gap: .55rem; }
.hosting-monitor-head span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--mint-dark); }
.hosting-monitor-head strong { color: var(--navy); font: 700 .68rem Poppins, Arial, sans-serif; }
.hosting-monitor-head small { color: #7e899b; font-size: .58rem; }
.hosting-monitor-timeline { padding: .45rem 1.2rem 0; }
.hosting-monitor-timeline article { display: grid; grid-template-columns: .8rem 1fr auto; align-items: center; gap: .7rem; padding: 1rem 0; border-bottom: 1px solid #dfe6ef; }
.hosting-monitor-timeline article > i { width: .62rem; height: .62rem; border-radius: 50%; background: var(--mint-dark); box-shadow: 0 0 0 .25rem rgb(21 157 139 / 10%); }
.hosting-monitor-timeline article.attention > i { background: var(--coral); box-shadow: 0 0 0 .25rem rgb(220 98 65 / 10%); }
.hosting-monitor-timeline article > div { display: grid; gap: .2rem; }
.hosting-monitor-timeline strong { color: var(--navy); font: 700 .66rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.hosting-monitor-timeline small, .hosting-monitor-timeline time { color: #748095; font-size: .58rem; }
.hosting-monitor-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; padding: 1rem 1.2rem; }
.hosting-monitor-summary > span { display: grid; gap: .15rem; padding: .8rem; border: 1px solid #dbe3ef; border-radius: .7rem; background: var(--white); }
.hosting-monitor-summary strong { color: var(--navy); font: 700 1.1rem Poppins, Arial, sans-serif; }
.hosting-monitor-summary small { color: #748095; font-size: .54rem; }
.hosting-monitor-fictitious { display: block; padding: 0 1.2rem 1rem; color: #7f8b9e; font-size: .52rem; }

.hosting-service-continuity-visual { display: grid; gap: 1rem; }
.hosting-continuity-core { display: grid; justify-items: center; padding: 1.35rem; border-radius: 1rem; background: var(--navy); box-shadow: 0 1.4rem 3rem rgb(8 25 56 / 17%); text-align: center; }
.hosting-continuity-core .website-service-option-icon { margin-bottom: .65rem; background: rgb(74 223 201 / 13%); color: var(--mint); }
.hosting-continuity-core strong { color: var(--white); font: 700 .86rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.hosting-continuity-core small { margin-top: .2rem; color: #aebbd0; font-size: .62rem; }
.hosting-continuity-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.hosting-continuity-steps article { display: grid; grid-template-columns: 2.3rem 1fr; align-items: center; gap: .7rem; padding: .85rem; border: 1px solid #d7e0ec; border-radius: .8rem; background: var(--white); }
.hosting-continuity-steps article > span { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: .65rem; background: #e9efff; color: var(--blue); font: 800 .62rem Poppins, Arial, sans-serif; }
.hosting-continuity-steps article div { display: grid; gap: .12rem; }
.hosting-continuity-steps strong { color: var(--navy); font: 700 .65rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.hosting-continuity-steps small { color: var(--muted); font-size: .56rem; }

.hosting-service-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hosting-service-package-grid > article { min-width: 0; padding: 2rem; border: 1px solid var(--line); border-radius: 1.35rem; background: var(--cloud); }
.hosting-service-package-grid > article.featured { border-color: #2855e7; background: var(--navy); color: var(--white); }
.hosting-service-package-grid h3 { margin: 0; color: var(--navy); font-size: 1.5rem; line-height: 1.25; }
.hosting-service-package-grid .featured h3 { color: var(--white); }
.hosting-service-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.25rem; }
.hosting-service-price strong { color: var(--navy); font: 700 1.85rem Poppins, Arial, sans-serif; }
.hosting-service-price span { color: var(--muted); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.hosting-service-package-grid .featured .hosting-service-price strong { color: var(--white); }
.hosting-service-package-grid .featured .hosting-service-price span { color: #b7c2d4; }
.hosting-service-package-grid ul { display: grid; gap: .6rem; margin: 0; padding: 1.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.hosting-service-package-grid .featured ul { border-color: rgb(255 255 255 / 17%); }
.hosting-service-package-grid li { position: relative; padding-left: 1.2rem; color: #455169; font-size: .85rem; line-height: 1.55; }
.hosting-service-package-grid li::before { content: ""; position: absolute; width: .42rem; height: .42rem; left: 0; top: .48rem; border-radius: 50%; background: var(--mint-dark); }
.hosting-service-package-grid .featured li { color: #d0d7e3; }
.hosting-service-package-grid > article > p:last-child { margin: 1.2rem 0 0; color: var(--muted); font-size: .84rem; line-height: 1.75; }
.hosting-service-package-grid .featured > p:last-child { color: #b7c2d4; }
.hosting-service-exclusions { display: grid; grid-template-columns: 1.15fr .85fr auto; align-items: center; gap: 2rem; margin-top: 1rem; padding: 1.5rem 2rem; border: 1px solid var(--line); border-radius: 1.15rem; background: var(--white); }
.hosting-service-exclusions > div { display: grid; gap: .25rem; }
.hosting-service-exclusions strong { color: var(--navy); font: 700 .72rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.hosting-service-exclusions span, .hosting-service-exclusions > p { color: var(--muted); font-size: .78rem; line-height: 1.65; }
.hosting-service-exclusions > p { margin: 0; }

@media (max-width: 980px) {
  .hosting-service-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hosting-service-foundation-copy, .hosting-service-continuity-copy { order: 1; max-width: 48rem; }
  .hosting-service-layer-visual, .hosting-service-continuity-visual { order: 2; max-width: 46rem; }
  .hosting-service-monitoring-grid { grid-template-columns: 1fr; }
  .hosting-service-monitoring-copy { max-width: 48rem; }
  .hosting-service-monitoring-visual { max-width: 46rem; }
  .hosting-service-exclusions { grid-template-columns: 1fr; }
  .hosting-service-exclusions .services-secondary-button { justify-self: start; }
}

@media (max-width: 760px) {
  .hosting-service-monitoring { padding: 5rem 0; }
  .hosting-service-package-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hosting-service-preview-shell { min-height: 16rem; padding: .75rem; }
  .hosting-service-preview-head > span { padding: .4rem .5rem; font-size: .42rem; }
  .hosting-service-preview-metrics { grid-template-columns: 1fr; }
  .hosting-service-preview-metrics article:nth-child(n + 2) { display: none; }
  .hosting-service-preview-lower { grid-template-columns: 1fr; }
  .hosting-service-preview-lower > div:last-child { display: none; }
  .hosting-layer-stack article { --layer-inset: 0rem !important; }
  .hosting-service-option-grid { grid-template-columns: 1fr; }
  .hosting-monitor-timeline article { grid-template-columns: .7rem 1fr; }
  .hosting-monitor-timeline time { display: none; }
  .hosting-monitor-summary { grid-template-columns: 1fr; }
  .hosting-monitor-summary > span:nth-child(n + 2) { display: none; }
  .hosting-continuity-steps { grid-template-columns: 1fr; }
  .hosting-service-package-grid > article { padding: 1.5rem; }
  .hosting-service-exclusions { padding: 1.5rem; }
  .hosting-service-exclusions .services-secondary-button { width: 100%; }
}

/* IoT-platformen en sensoroplossingen als afzonderlijke dienst */
.iot-service-hero {
  background:
    radial-gradient(circle at 82% 18%, rgb(74 223 201 / 24%), transparent 22rem),
    radial-gradient(circle at 63% 94%, rgb(49 92 246 / 27%), transparent 30rem),
    linear-gradient(135deg, #07152f, #102b5d);
}
.iot-service-preview { background: #f4f7fb; }
.iot-service-preview-shell { min-height: 19rem; padding: 1rem; background: #f4f7fb; }
.iot-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.iot-preview-head > div { display: grid; gap: .12rem; }
.iot-preview-head small { color: #8793a6; font-size: .48rem; }
.iot-preview-head b { color: var(--navy); font: 700 .8rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.iot-preview-head > span { display: flex; align-items: center; gap: .4rem; padding: .45rem .65rem; border: 1px solid #d6dfec; border-radius: 999px; background: var(--white); color: #516078; font-size: .48rem; font-weight: 700; }
.iot-preview-head > span i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--mint-dark); box-shadow: 0 0 0 .18rem rgb(21 157 139 / 12%); }
.iot-preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .8rem; }
.iot-preview-metrics article { min-width: 0; padding: .7rem; border: 1px solid #dbe3ef; border-radius: .7rem; background: var(--white); }
.iot-preview-metrics small, .iot-preview-metrics span { display: block; color: #7e899b; font-size: .42rem; line-height: 1.35; }
.iot-preview-metrics strong { display: block; margin: .2rem 0; color: var(--navy); font: 700 .86rem Poppins, Arial, sans-serif; }
.iot-preview-metrics span { color: var(--mint-dark); }
.iot-preview-chart { min-height: 8rem; margin-top: .55rem; padding: .7rem .75rem .25rem; border: 1px solid #dbe3ef; border-radius: .7rem; background: var(--white); }
.iot-preview-chart > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.iot-preview-chart b { color: var(--navy); font: 700 .52rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.iot-preview-chart small { color: #8490a3; font-size: .42rem; }
.iot-preview-chart svg { display: block; width: 100%; height: 5.5rem; margin-top: .3rem; overflow: visible; }
.iot-preview-chart .iot-chart-grid { fill: none; stroke: #e8edf4; stroke-width: 1; }
.iot-preview-chart .iot-chart-area { fill: rgb(49 92 246 / 8%); }
.iot-preview-chart .iot-chart-line { fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.iot-preview-message { display: grid; grid-template-columns: .5rem 1fr; align-items: center; gap: .55rem; margin-top: .55rem; padding: .65rem .75rem; border: 1px solid #b7ded8; border-radius: .7rem; background: #edf9f7; }
.iot-preview-message > span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint-dark); }
.iot-preview-message > div { display: grid; gap: .08rem; }
.iot-preview-message b { color: var(--navy); font: 700 .5rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.iot-preview-message small { color: #65758b; font-size: .42rem; }

.iot-service-chain-visual { position: relative; display: grid; place-items: center; }
.iot-chain-line { position: absolute; inset: 13% auto 13% 50%; width: 1px; background: #cbd6e5; }
.iot-chain-grid { position: relative; width: min(100%, 31rem); display: grid; gap: .75rem; }
.iot-chain-grid article { display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border: 1px solid #d7e0ec; border-radius: .9rem; background: rgb(255 255 255 / 96%); box-shadow: 0 .8rem 2.2rem rgb(23 43 80 / 7%); }
.iot-chain-grid article > span { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: .75rem; background: #e7fbf7; color: var(--mint-dark); font: 800 .64rem Poppins, Arial, sans-serif; }
.iot-chain-grid article div { display: grid; gap: .15rem; }
.iot-chain-grid strong { color: var(--navy); font: 700 .67rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.iot-chain-grid small { color: var(--muted); font-size: .58rem; line-height: 1.4; }
.iot-service-option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.iot-service-connectivity { padding: 8rem 0; background: var(--navy); color: var(--white); }
.iot-service-connectivity-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.iot-service-connectivity h2 { color: var(--white); }
.iot-service-connectivity-copy > p:not(.kicker) { margin: 1.4rem 0 0; color: #bac5d6; line-height: 1.82; }
.iot-service-connectivity-copy ul { display: grid; gap: .65rem; margin: 1.5rem 0 0; padding: 1.35rem 0; border-top: 1px solid rgb(255 255 255 / 16%); border-bottom: 1px solid rgb(255 255 255 / 16%); list-style: none; }
.iot-service-connectivity-copy li { position: relative; padding-left: 1.2rem; color: #d0d7e3; font-size: .88rem; line-height: 1.55; }
.iot-service-connectivity-copy li::before { content: ""; position: absolute; width: .42rem; height: .42rem; left: 0; top: .5rem; border-radius: 50%; background: var(--mint); }
.iot-connectivity-visual { position: relative; min-height: 34rem; display: grid; place-items: center; overflow: hidden; border: 1px solid rgb(255 255 255 / 14%); border-radius: 1.5rem; background: linear-gradient(145deg, rgb(255 255 255 / 7%), rgb(49 92 246 / 8%)); }
.iot-connectivity-rings { position: absolute; width: 17rem; height: 17rem; border: 1px solid rgb(255 255 255 / 16%); border-radius: 50%; box-shadow: 0 0 0 4rem rgb(74 223 201 / 3%), 0 0 0 8rem rgb(49 92 246 / 4%); }
.iot-connectivity-core { position: relative; z-index: 2; width: 8.5rem; height: 8.5rem; display: grid; place-content: center; border-radius: 50%; background: var(--mint); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 22%); text-align: center; }
.iot-connectivity-core strong { color: var(--navy); font: 800 .82rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.iot-connectivity-core small { max-width: 6.5rem; margin-top: .22rem; color: #17434e; font-size: .55rem; line-height: 1.35; }
.iot-connectivity-nodes { position: absolute; inset: 1.6rem; }
.iot-connectivity-nodes span { position: absolute; z-index: 2; width: 8.5rem; padding: .8rem .55rem; border: 1px solid rgb(255 255 255 / 17%); border-radius: .8rem; background: rgb(8 27 58 / 95%); color: var(--white); box-shadow: 0 .8rem 2rem rgb(0 0 0 / 15%); font: 700 .58rem/1.35 Poppins, Arial, sans-serif; text-align: center; text-transform: uppercase; }
.iot-connectivity-nodes span:nth-child(1) { left: 0; top: 0; }
.iot-connectivity-nodes span:nth-child(2) { right: 0; top: 0; }
.iot-connectivity-nodes span:nth-child(3) { left: 0; top: 43%; }
.iot-connectivity-nodes span:nth-child(4) { right: 0; top: 43%; }
.iot-connectivity-nodes span:nth-child(5) { left: 0; bottom: 0; }
.iot-connectivity-nodes span:nth-child(6) { right: 0; bottom: 0; }
.iot-connectivity-note { position: absolute; z-index: 3; bottom: .9rem; left: 50%; width: 100%; transform: translateX(-50%); color: #8998ae; font-size: .5rem; text-align: center; }

.iot-alerts-visual { min-width: 0; overflow: hidden; border: 1px solid #d7e0ec; border-radius: 1.35rem; background: #f4f7fb; box-shadow: 0 1.5rem 4rem rgb(23 43 80 / 11%); }
.iot-alerts-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid #dbe3ef; background: var(--white); }
.iot-alerts-head > div { display: flex; align-items: center; gap: .5rem; }
.iot-alerts-head > div > span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint-dark); }
.iot-alerts-head strong { color: var(--navy); font: 700 .65rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.iot-alerts-head small { color: #8490a3; font-size: .52rem; }
.iot-alerts-list { padding: .2rem 1.2rem; }
.iot-alerts-list article { display: grid; grid-template-columns: 5.8rem 1fr; gap: .25rem .8rem; padding: 1rem 0; border-bottom: 1px solid #dbe3ef; }
.iot-alerts-list span { grid-row: 1 / 3; align-self: center; color: var(--mint-dark); font: 800 .58rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.iot-alerts-list strong { color: var(--navy); font: 700 .63rem Poppins, Arial, sans-serif; }
.iot-alerts-list small { color: #718098; font-size: .54rem; }
.iot-alerts-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem 1.1rem; }
.iot-alerts-footer span { color: var(--navy); font: 700 .58rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.iot-alerts-footer small { color: #8490a3; font-size: .5rem; }

.iot-service-demo { padding: 8rem 0; background: var(--cloud); }
.iot-service-demo-grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.iot-service-demo-copy > p:not(.kicker) { margin: 1.35rem 0 0; color: var(--muted); line-height: 1.82; }
.iot-service-demo-copy .website-service-text-link { color: var(--blue); }
.iot-service-demo-visual { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d7e0ec; border-radius: 1.4rem; background: var(--white); box-shadow: 0 1.8rem 4rem rgb(23 43 80 / 12%); }
.iot-service-demo-visual img { display: block; width: 100%; height: auto; }
.iot-service-demo-visual figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .55rem .75rem; border-radius: 999px; background: rgb(7 21 47 / 88%); color: var(--white); font-size: .55rem; font-weight: 700; }
.iot-service-security { background: var(--white); }
.iot-service-security > .page-width { border-top: 0; }

.iot-service-phases { padding: 8rem 0; background: var(--cloud); }
.iot-service-phase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1.35rem; background: var(--white); }
.iot-service-phase-grid article { min-width: 0; padding: 2rem; }
.iot-service-phase-grid article + article { border-left: 1px solid var(--line); }
.iot-service-phase-grid span { display: block; margin-bottom: 2.2rem; color: var(--blue); font: 800 .68rem Poppins, Arial, sans-serif; }
.iot-service-phase-grid h3 { margin: 0; color: var(--navy); font-size: 1rem; line-height: 1.35; }
.iot-service-phase-grid p { margin: .75rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.iot-service-scope-note { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; margin-top: 1rem; padding: 1.5rem 2rem; border-radius: 1.15rem; background: var(--navy); }
.iot-service-scope-note > div { display: grid; gap: .3rem; }
.iot-service-scope-note strong { color: var(--white); font: 700 .74rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.iot-service-scope-note span { color: #b8c3d4; font-size: .78rem; line-height: 1.65; }
.iot-service-scope-note .services-secondary-button { background: var(--mint); color: var(--navy); }
.iot-service-scope-note .services-secondary-button:hover { background: var(--white); }

@media (max-width: 980px) {
  .iot-service-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iot-service-foundation-copy, .iot-service-alerts-copy { order: 1; max-width: 48rem; }
  .iot-service-chain-visual, .iot-alerts-visual { order: 2; max-width: 46rem; }
  .iot-service-connectivity-grid { grid-template-columns: 1fr; }
  .iot-service-connectivity-copy { order: 1; max-width: 48rem; }
  .iot-connectivity-visual { order: 2; width: 100%; max-width: 46rem; }
  .iot-service-demo-grid { grid-template-columns: 1fr; }
  .iot-service-demo-copy { order: 1; max-width: 48rem; }
  .iot-service-demo-visual { order: 2; max-width: 46rem; }
  .iot-service-phase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iot-service-phase-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .iot-service-phase-grid article:nth-child(4) { border-top: 1px solid var(--line); }
  .iot-service-scope-note { grid-template-columns: 1fr; }
  .iot-service-scope-note .services-secondary-button { justify-self: start; }
}

@media (max-width: 760px) {
  .iot-service-connectivity, .iot-service-demo, .iot-service-phases { padding: 5rem 0; }
}

@media (max-width: 560px) {
  .iot-service-hero h1 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .iot-service-preview-shell { min-height: 16rem; padding: .75rem; }
  .iot-preview-head > span { padding: .4rem .5rem; font-size: .42rem; }
  .iot-preview-metrics { grid-template-columns: 1fr; }
  .iot-preview-metrics article:nth-child(n + 2) { display: none; }
  .iot-preview-chart > div { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .iot-service-option-grid { grid-template-columns: 1fr; }
  .iot-connectivity-visual { min-height: 31rem; }
  .iot-connectivity-nodes { inset: 1rem; }
  .iot-connectivity-nodes span { width: 6.5rem; padding: .7rem .4rem; font-size: .5rem; }
  .iot-connectivity-core { width: 7.5rem; height: 7.5rem; }
  .iot-connectivity-nodes span:nth-child(5), .iot-connectivity-nodes span:nth-child(6) { bottom: 1.5rem; }
  .iot-alerts-list article { grid-template-columns: 1fr; }
  .iot-alerts-list span { grid-row: auto; }
  .iot-alerts-footer { align-items: flex-start; flex-direction: column; }
  .iot-service-demo-copy .services-primary-button { width: 100%; }
  .iot-service-phase-grid { grid-template-columns: 1fr; }
  .iot-service-phase-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
  .iot-service-scope-note { padding: 1.5rem; }
  .iot-service-scope-note .services-secondary-button { width: 100%; }
}

/* Ons Werk: live projecten en werkende voorbeelden */
.work-page-body { background: var(--white); }
.work-page { overflow: hidden; background: var(--white); }
.work-hero {
  position: relative;
  min-height: 43rem;
  display: flex;
  align-items: end;
  overflow: hidden;
  padding: 12rem 0 5.5rem;
  background:
    radial-gradient(circle at 83% 20%, rgb(74 223 201 / 22%), transparent 25rem),
    radial-gradient(circle at 67% 105%, rgb(49 92 246 / 26%), transparent 32rem),
    linear-gradient(135deg, #07152f, #102b5d);
  color: var(--white);
}
.work-hero::after { content: ""; position: absolute; width: 34rem; height: 34rem; right: -19rem; bottom: -24rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; box-shadow: 0 0 0 5rem rgb(255 255 255 / 2.5%), 0 0 0 10rem rgb(255 255 255 / 1.5%); }
.work-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .88fr) minmax(26rem, 1.12fr); align-items: center; gap: clamp(3.5rem, 7vw, 7rem); }
.work-hero-copy { min-width: 0; }
.work-hero h1 { max-width: 42rem; margin: 0; font-size: var(--xenid-public-h1); font-weight: 700; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.work-hero-copy > p:not(.kicker) { max-width: 46rem; margin: 1.7rem 0 0; color: #d0d9e7; font-size: 1.03rem; line-height: 1.85; }
.work-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.work-text-link { color: var(--white); font: 800 .75rem/1.45 Poppins, Arial, sans-serif; text-decoration-thickness: 1px; text-underline-offset: .3rem; text-transform: uppercase; }
.work-text-link:hover { color: var(--mint); }
.work-hero-board { min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 22%); border-radius: 1.5rem; background: #f4f7fb; box-shadow: 0 2rem 5rem rgb(0 4 18 / 28%); }
.work-board-head, .work-window-head { min-height: 3.7rem; display: flex; align-items: center; gap: .38rem; padding: 0 1.25rem; border-bottom: 1px solid #dce3ed; background: var(--white); }
.work-board-head > span, .work-window-head > span { width: .48rem; height: .48rem; border-radius: 50%; background: #d76e50; }
.work-board-head > span:nth-child(2), .work-window-head > span:nth-child(2) { background: #c9ced7; }
.work-board-head > span:nth-child(3), .work-window-head > span:nth-child(3) { background: var(--mint-dark); }
.work-board-head strong, .work-window-head strong { margin-left: .35rem; color: var(--navy); font: 700 .7rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.work-board-list { display: grid; gap: .7rem; padding: 1.2rem; }
.work-board-item { min-width: 0; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1px solid #dbe3ee; border-radius: .9rem; background: var(--white); }
.work-board-item-featured { border-color: #aee2da; background: #f2fbf9; }
.work-board-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .8rem; background: #e8fbf8; color: var(--mint-dark); }
.work-board-icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.work-board-item > div { min-width: 0; display: grid; gap: .1rem; }
.work-board-item small { color: #7b8799; font-size: .52rem; font-weight: 700; text-transform: uppercase; }
.work-board-item strong { overflow-wrap: anywhere; color: var(--navy); font: 700 .72rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.work-board-item > b { padding: .45rem .6rem; border-radius: 999px; background: #edf2ff; color: var(--blue); font: 800 .49rem Poppins, Arial, sans-serif; text-transform: uppercase; white-space: nowrap; }
.work-board-item-featured > b { background: #ddf7f2; color: #107f70; }
.work-hero-board > p { margin: 0; padding: 0 1.3rem 1.2rem; color: #78869a; font-size: .58rem; }

.work-intro { padding: 7rem 0; background: var(--white); }
.work-intro-grid { display: grid; grid-template-columns: .72fr 1.28fr; align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.work-intro h2, .work-live-case h2, .work-section-heading h2, .work-example-copy h2, .work-principles h2 { margin: 0; color: var(--navy); font-size: var(--xenid-public-h2); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.work-intro-grid > div:last-child { max-width: 52rem; }
.work-intro-grid > div:last-child p { margin: 0; color: var(--muted); line-height: 1.85; }
.work-intro-grid > div:last-child p + p { margin-top: 1.2rem; }

.work-live-case { padding: 8rem 0; background: var(--navy); color: var(--white); }
.work-live-case-kraakkompas { border-top: 1px solid rgb(255 255 255 / 12%); background: #10264f; }
.work-live-case-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(3.5rem, 7vw, 7rem); }
.work-live-case-grid-reverse .work-live-case-copy { order: 2; }
.work-live-case-grid-reverse .work-live-case-showcase { order: 1; justify-content: flex-start; padding-right: 0; padding-left: clamp(0rem, 2vw, 2rem); }
.work-live-case-copy { min-width: 0; }
.work-live-case h2 { color: var(--white); }
.work-live-case-copy > p:not(.kicker) { margin: 1.5rem 0 0; color: #bdc8d9; line-height: 1.82; }
.work-status-label { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.3rem; padding: .55rem .75rem; border: 1px solid rgb(74 223 201 / 28%); border-radius: 999px; background: rgb(74 223 201 / 8%); color: var(--mint); font: 800 .58rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.work-status-label i, .work-live-case-visual > span i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 .2rem rgb(74 223 201 / 13%); }
.work-live-case-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.work-live-case-columns > div { padding: 1.2rem 1.25rem; border: 1px solid rgb(255 255 255 / 15%); border-radius: 1rem; background: rgb(255 255 255 / 5%); }
.work-live-case-columns h3 { margin: 0; color: var(--white); font-size: .78rem; line-height: 1.4; text-transform: uppercase; }
.work-live-case-columns ul, .work-example-copy ul { display: grid; gap: .55rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.work-live-case-columns li, .work-example-copy li { position: relative; padding-left: 1.15rem; color: #bac5d6; font-size: .78rem; line-height: 1.55; }
.work-live-case-columns li::before, .work-example-copy li::before { content: ""; position: absolute; width: .42rem; height: .42rem; left: 0; top: .46rem; border-radius: 50%; background: var(--mint); }
.work-case-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.work-live-case .services-secondary-button { background: rgb(255 255 255 / 10%); }
.work-live-case .services-secondary-button:hover { background: var(--blue); }
.work-live-case-showcase { min-width: 0; width: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: clamp(0rem, 2vw, 2rem); }
.work-live-case-visual { position: relative; width: 100%; max-width: 100%; min-width: 0; display: block; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.55rem; background: #f2f2ec; box-shadow: 0 2rem 5rem rgb(0 4 18 / 31%); }
.work-live-case-visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work-live-case-visual > span { position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .55rem; padding: .68rem .8rem; border-radius: 999px; background: rgb(7 21 47 / 92%); color: var(--white); font: 800 .58rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.work-live-case-visual-mobile { width: min(100%, 30rem); aspect-ratio: auto; border: .55rem solid var(--white); border-radius: 2.2rem; }
.work-live-case-visual-mobile img { position: static; height: auto; aspect-ratio: auto; object-fit: contain; }
.work-live-case-visual-mobile > span { position: static; justify-content: center; border-radius: 0; padding: .75rem .55rem; }

.work-examples-intro { padding: 7.5rem 0 3.5rem; background: var(--white); }
.work-section-heading { display: grid; grid-template-columns: 1.05fr .75fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.work-section-heading > p { max-width: 40rem; margin: 0; color: var(--muted); line-height: 1.82; }
.work-example-section { padding: 5.5rem 0; border-top: 1px solid var(--line); }
.work-example-section-light { background: var(--white); }
.work-example-section-cloud { background: var(--cloud); }
.work-example-row { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(3.5rem, 7vw, 7rem); }
.work-example-row-reverse .work-example-copy { order: 2; }
.work-example-row-reverse .work-example-visual { order: 1; }
.work-example-copy { min-width: 0; }
.work-example-copy > p:not(.kicker) { margin: 1.4rem 0 0; color: var(--muted); line-height: 1.82; }
.work-example-copy ul { padding: 1.25rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.work-example-copy li { color: #455169; font-size: .86rem; }
.work-example-copy li::before { background: var(--mint-dark); }
.work-example-visual { min-width: 0; overflow: hidden; border: 1px solid #d8e0eb; border-radius: 1.5rem; background: var(--white); box-shadow: 0 1.5rem 4rem rgb(23 43 80 / 10%); }
.work-window-head small { margin-left: auto; color: #8995a7; font-size: .5rem; }

.work-appointment-preview { background: #f2f5fb; }
.work-appointment-body { padding: clamp(1.2rem, 3vw, 2rem); }
.work-appointment-body > p { margin: 0 0 1.25rem; color: var(--navy); font: 700 1rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.work-appointment-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.work-appointment-days > span { display: grid; gap: .25rem; place-items: center; padding: .75rem .45rem; border: 1px solid #dbe3ef; border-radius: .75rem; background: var(--white); color: #6d7a90; }
.work-appointment-days span.active { border-color: var(--blue); background: var(--blue); color: var(--white); }
.work-appointment-days small { font-size: .5rem; font-weight: 800; text-transform: uppercase; }
.work-appointment-days b { font: 700 .9rem Poppins, Arial, sans-serif; }
.work-appointment-lower { display: grid; grid-template-columns: .82fr 1.18fr; gap: .8rem; margin-top: .8rem; }
.work-appointment-lower > div { min-width: 0; display: grid; gap: .5rem; padding: 1rem; border: 1px solid #dbe3ef; border-radius: .8rem; background: var(--white); }
.work-appointment-lower small { color: #7b879a; font-size: .54rem; font-weight: 800; text-transform: uppercase; }
.work-appointment-lower > div:first-child span { padding: .52rem; border: 1px solid #dce3ed; border-radius: .55rem; color: #56637a; font-size: .58rem; text-align: center; }
.work-appointment-lower > div:first-child span.active { border-color: #91ddd1; background: #ecfaf7; color: var(--navy); font-weight: 800; }
.work-appointment-lower strong { color: var(--navy); font: 700 .72rem/1.45 Poppins, Arial, sans-serif; text-transform: uppercase; }
.work-appointment-lower p { margin: 0; color: #718096; font-size: .58rem; }
.work-appointment-lower > div:last-child > b { margin-top: .35rem; padding: .7rem; border-radius: .6rem; background: var(--navy); color: var(--mint); font: 800 .52rem Poppins, Arial, sans-serif; text-align: center; text-transform: uppercase; }

.work-admin-preview { background: #eef2f7; }
.work-admin-body { padding: clamp(1.2rem, 3vw, 2rem); }
.work-admin-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.work-admin-summary > div { min-width: 0; padding: 1rem; border: 1px solid #d9e1ec; border-radius: .85rem; background: var(--white); }
.work-admin-summary small, .work-admin-summary strong, .work-admin-summary span { display: block; }
.work-admin-summary small { min-height: 2rem; color: #758196; font-size: .5rem; line-height: 1.35; }
.work-admin-summary strong { color: var(--navy); font: 800 clamp(.9rem, 2vw, 1.3rem) Poppins, Arial, sans-serif; letter-spacing: -.04em; }
.work-admin-summary span { margin-top: .35rem; color: var(--mint-dark); font-size: .48rem; font-weight: 700; }
.work-admin-lower { display: grid; grid-template-columns: 1.15fr .85fr; gap: .7rem; margin-top: .7rem; }
.work-admin-lower > div { min-width: 0; padding: 1rem; border: 1px solid #d9e1ec; border-radius: .85rem; background: var(--white); }
.work-admin-lower > div > small { color: #718096; font-size: .52rem; font-weight: 800; text-transform: uppercase; }
.work-admin-bars { height: 7rem; display: flex; align-items: end; gap: .35rem; margin-top: 1rem; border-bottom: 1px solid #dfe5ee; }
.work-admin-bars i { flex: 1; height: 38%; border-radius: .22rem .22rem 0 0; background: var(--blue); }
.work-admin-bars i:nth-child(2) { height: 54%; }
.work-admin-bars i:nth-child(3) { height: 47%; }
.work-admin-bars i:nth-child(4) { height: 72%; }
.work-admin-bars i:nth-child(5) { height: 66%; background: var(--mint-dark); }
.work-admin-bars i:nth-child(6) { height: 84%; }
.work-admin-lower > div:last-child p { display: grid; grid-template-columns: .5rem 1fr; align-items: center; gap: .5rem; margin: 0; padding: .7rem 0; border-bottom: 1px solid #e1e6ee; color: #526078; font-size: .53rem; }
.work-admin-lower > div:last-child p:last-child { border-bottom: 0; }
.work-admin-lower p i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint-dark); }

.work-iot-preview { position: relative; background: #f4f6f8; }
.work-iot-preview img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }
.work-iot-preview > span { position: absolute; left: 1rem; bottom: 1rem; padding: .65rem .8rem; border-radius: 999px; background: rgb(7 21 47 / 92%); color: var(--white); font: 800 .55rem Poppins, Arial, sans-serif; text-transform: uppercase; }

.work-klantflow-preview { display: block; width: min(100%, 25rem); justify-self: center; padding: .55rem; border-radius: 2rem; background: var(--white); text-decoration: none; }
.work-klantflow-preview img { display: block; width: 100%; height: auto; border-radius: 1.45rem; }
.work-klantflow-preview > span { display: block; padding: .7rem .5rem .2rem; color: var(--muted); text-align: center; font: 700 .75rem/1.45 Poppins, Arial, sans-serif; }

.work-principles { padding: 8rem 0; background: var(--navy); color: var(--white); }
.work-principles-grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: start; gap: clamp(3.5rem, 8vw, 8rem); }
.work-principles h2 { color: var(--white); }
.work-principles-list { border-top: 1px solid rgb(255 255 255 / 16%); }
.work-principles-list article { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; padding: 1.5rem 0; border-bottom: 1px solid rgb(255 255 255 / 16%); }
.work-principles-list article > span { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .85rem; background: rgb(74 223 201 / 10%); color: var(--mint); }
.work-principles-list svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.work-principles-list h3 { margin: 0; color: var(--white); font-size: .92rem; line-height: 1.4; text-transform: uppercase; }
.work-principles-list p { margin: .45rem 0 0; color: #aebbd0; font-size: .86rem; line-height: 1.72; }
.work-final-cta { background: linear-gradient(135deg, #10264f, #315cf6); }

@media (max-width: 980px) {
  .work-hero-grid, .work-live-case-grid, .work-section-heading, .work-example-row, .work-principles-grid { grid-template-columns: 1fr; }
  .work-hero-board, .work-live-case-visual, .work-example-visual { max-width: 50rem; }
  .work-live-case-grid-reverse .work-live-case-copy, .work-live-case-grid-reverse .work-live-case-showcase { order: initial; }
  .work-live-case-grid-reverse .work-live-case-showcase { padding-left: 0; }
  .work-example-row-reverse .work-example-copy, .work-example-row-reverse .work-example-visual { order: initial; }
  .work-example-copy { order: 1; max-width: 48rem; }
  .work-example-visual { order: 2; }
  .work-principles-grid > div:first-child { max-width: 48rem; }
}

@media (max-width: 760px) {
  .work-hero { min-height: 0; padding: 9.5rem 0 4rem; }
  .work-intro, .work-live-case, .work-examples-intro, .work-principles { padding: 5rem 0; }
  .work-example-section { padding: 4.5rem 0; }
  .work-intro-grid { grid-template-columns: 1fr; gap: 1rem; }
  .work-live-case-columns { grid-template-columns: 1fr; }
  .work-examples-intro { padding-bottom: 2.5rem; }
}

@media (max-width: 560px) {
  .work-page > section .page-width, .work-example-list .page-width { width: min(100% - 2rem, var(--page)); }
  .work-hero h1, .work-intro h2, .work-live-case h2, .work-section-heading h2, .work-example-copy h2, .work-principles h2 { overflow-wrap: anywhere; }
  .work-hero-copy > p:not(.kicker) { font-size: .93rem; }
  .work-hero-actions, .work-case-actions { align-items: stretch; flex-direction: column; }
  .work-hero-actions > a, .work-case-actions > a { width: 100%; }
  .work-hero-board, .work-live-case-visual, .work-example-visual { border-radius: 1.15rem; }
  .work-live-case-showcase { display: block; width: 100%; max-width: 30rem; margin-inline: auto; padding-right: 0; }
  .work-live-case-visual-mobile { width: 100%; border-width: .4rem; border-radius: 1.4rem; }
  .work-board-item { grid-template-columns: 2.6rem minmax(0, 1fr); padding: .8rem; }
  .work-board-icon { width: 2.6rem; height: 2.6rem; }
  .work-board-item > b { grid-column: 2; justify-self: start; }
  .work-live-case-columns > div { padding: 1rem; }
  .work-window-head { padding: 0 .8rem; }
  .work-window-head small { display: none; }
  .work-appointment-body, .work-admin-body { padding: .8rem; }
  .work-appointment-days { gap: .35rem; }
  .work-appointment-lower { grid-template-columns: 1fr; }
  .work-admin-summary { grid-template-columns: 1fr; }
  .work-admin-summary > div:nth-child(n + 2) { display: none; }
  .work-admin-lower { grid-template-columns: 1fr; }
  .work-iot-preview > span { right: .65rem; left: .65rem; bottom: .65rem; text-align: center; }
  .work-principles-list article { grid-template-columns: 2.7rem 1fr; }
  .work-principles-list article > span { width: 2.7rem; height: 2.7rem; }
}

/* Praktijkcase Airfryer Bijbel */
.airfryer-case-page { overflow: hidden; background: var(--white); }
.airfryer-case-hero {
  position: relative;
  min-height: 43rem;
  display: flex;
  align-items: end;
  overflow: hidden;
  padding: 12rem 0 5.5rem;
  background:
    radial-gradient(circle at 84% 16%, rgb(74 223 201 / 22%), transparent 25rem),
    radial-gradient(circle at 64% 110%, rgb(49 92 246 / 28%), transparent 33rem),
    linear-gradient(135deg, #07152f, #102b5d);
  color: var(--white);
}
.airfryer-case-hero::after { content: ""; position: absolute; width: 36rem; height: 36rem; right: -21rem; bottom: -25rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; box-shadow: 0 0 0 5rem rgb(255 255 255 / 2.5%), 0 0 0 10rem rgb(255 255 255 / 1.5%); }
.airfryer-case-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .92fr) minmax(27rem, 1.08fr); align-items: center; gap: clamp(3.5rem, 7vw, 7rem); }
.airfryer-case-hero-copy { min-width: 0; }
.airfryer-case-hero h1 { max-width: 47rem; margin: 0; color: var(--white); font-size: var(--xenid-public-h1); font-weight: 700; line-height: 1.03; letter-spacing: -.05em; text-transform: uppercase; text-wrap: balance; }
.airfryer-case-hero-copy > p:not(.kicker) { max-width: 46rem; margin: 1.7rem 0 0; color: #d0d9e7; font-size: 1.03rem; line-height: 1.85; }
.airfryer-case-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.airfryer-case-hero .services-secondary-button { border-color: rgb(255 255 255 / 30%); background: rgb(255 255 255 / 9%); color: var(--white); }
.airfryer-case-hero .services-secondary-button:hover { border-color: var(--blue); background: var(--blue); }
.airfryer-case-hero-visual { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 1.55rem; background: #f2f2ec; box-shadow: 0 2rem 5rem rgb(0 4 18 / 31%); }
.airfryer-case-hero-visual img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top center; }
.airfryer-case-hero-visual > span { position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .55rem; padding: .68rem .8rem; border-radius: 999px; background: rgb(7 21 47 / 92%); color: var(--white); font: 800 .58rem Poppins, Arial, sans-serif; text-transform: uppercase; }
.airfryer-case-hero-visual > span i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 .2rem rgb(74 223 201 / 13%); }

.airfryer-case-summary { padding: 7rem 0; background: var(--white); }
.airfryer-case-summary-grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: start; gap: clamp(3rem, 8vw, 8rem); }
.airfryer-case-summary h2, .airfryer-case-content-platform h2, .airfryer-case-package h2, .airfryer-case-seo h2, .airfryer-case-outcome h2 { margin: 0; color: var(--navy); font-size: var(--xenid-public-h2); line-height: 1.06; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.airfryer-case-summary-copy { max-width: 52rem; }
.airfryer-case-summary-copy p { margin: 0; color: var(--muted); line-height: 1.85; }
.airfryer-case-summary-copy p + p { margin-top: 1.2rem; }
.airfryer-case-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3.5rem; border: 1px solid var(--line); border-radius: 1.35rem; background: var(--cloud); }
.airfryer-case-facts > div { min-width: 0; padding: 1.4rem 1.5rem; }
.airfryer-case-facts > div + div { border-left: 1px solid var(--line); }
.airfryer-case-facts small, .airfryer-case-facts strong { display: block; }
.airfryer-case-facts small { color: var(--blue); font: 800 .58rem/1.4 Poppins, Arial, sans-serif; text-transform: uppercase; }
.airfryer-case-facts strong { margin-top: .45rem; color: var(--navy); font: 700 .82rem/1.5 Poppins, Arial, sans-serif; text-transform: uppercase; }

.airfryer-case-content-platform { padding: 8rem 0; background: var(--cloud); }
.airfryer-case-content-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(3.5rem, 7vw, 7rem); }
.airfryer-case-content-copy { min-width: 0; }
.airfryer-case-content-copy > p:not(.kicker) { margin: 1.5rem 0 0; color: var(--muted); line-height: 1.85; }
.airfryer-case-content-copy ul, .airfryer-case-seo-details ul { display: grid; gap: .65rem; margin: 1.5rem 0 1.8rem; padding: 1.35rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.airfryer-case-content-copy li, .airfryer-case-seo-details li { position: relative; padding-left: 1.25rem; color: #455169; font-size: .86rem; line-height: 1.65; }
.airfryer-case-content-copy li::before, .airfryer-case-seo-details li::before { content: ""; position: absolute; width: .42rem; height: .42rem; left: 0; top: .48rem; border-radius: 50%; background: var(--mint-dark); }
.airfryer-case-content-visual { min-width: 0; display: grid; grid-template-columns: 1.18fr .82fr; align-items: end; gap: 1rem; }
.airfryer-case-recipe { min-width: 0; overflow: hidden; margin: 0 0 1.5rem; border: 1px solid #d9e1ec; border-radius: 1.25rem; background: var(--white); box-shadow: 0 1.5rem 4rem rgb(23 43 80 / 10%); }
.airfryer-case-recipe-large { margin: 1.5rem 0 0; }
.airfryer-case-recipe img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.airfryer-case-recipe figcaption { display: grid; gap: .25rem; padding: 1rem 1.1rem 1.2rem; }
.airfryer-case-recipe small { color: var(--mint-dark); font: 800 .53rem/1.4 Poppins, Arial, sans-serif; text-transform: uppercase; }
.airfryer-case-recipe strong { color: var(--navy); font: 700 .7rem/1.5 Poppins, Arial, sans-serif; text-transform: uppercase; }

.airfryer-case-package { padding: 8rem 0; background: var(--navy); color: var(--white); }
.airfryer-case-package-heading { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.airfryer-case-package h2 { color: var(--white); }
.airfryer-case-package-heading > p { max-width: 43rem; margin: 0; color: #b8c4d6; line-height: 1.85; }
.airfryer-case-package-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3.5rem; border-top: 1px solid rgb(255 255 255 / 16%); border-bottom: 1px solid rgb(255 255 255 / 16%); }
.airfryer-case-package-list article { min-width: 0; display: grid; grid-template-columns: 3.6rem 1fr; gap: 1.25rem; padding: 1.7rem 1.7rem 1.7rem 0; }
.airfryer-case-package-list article:nth-child(even) { padding-left: 1.7rem; border-left: 1px solid rgb(255 255 255 / 16%); }
.airfryer-case-package-list article:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / 16%); }
.airfryer-case-package-list article > span { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; border-radius: 1rem; background: rgb(74 223 201 / 10%); color: var(--mint); }
.airfryer-case-package-list svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.airfryer-case-package-list small { color: var(--mint); font: 800 .54rem/1.4 Poppins, Arial, sans-serif; }
.airfryer-case-package-list h3 { margin: .25rem 0 0; color: var(--white); font-size: .95rem; line-height: 1.45; text-transform: uppercase; }
.airfryer-case-package-list p { margin: .55rem 0 0; color: #aebbd0; font-size: .86rem; line-height: 1.72; }

.airfryer-case-seo { padding: 8rem 0; background: var(--white); }
.airfryer-case-seo-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(3.5rem, 8vw, 8rem); }
.airfryer-case-seo-intro > p:not(.kicker) { margin: 1.4rem 0 0; color: var(--muted); line-height: 1.85; }
.airfryer-case-seo-intro .services-primary-button { margin-top: 1.8rem; }
.airfryer-case-seo-details { border-top: 1px solid var(--line); }
.airfryer-case-seo-details article { padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.airfryer-case-seo-details h3 { margin: 0; color: var(--navy); font-size: .95rem; line-height: 1.45; text-transform: uppercase; }
.airfryer-case-seo-details ul { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1rem 0 0; padding: 0; border: 0; }

.airfryer-case-outcome { padding: 8rem 0; background: var(--cloud); }
.airfryer-case-outcome-grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: start; gap: clamp(3.5rem, 8vw, 8rem); }
.airfryer-case-outcome-copy { max-width: 52rem; }
.airfryer-case-outcome-copy > p { margin: 0; color: var(--muted); line-height: 1.85; }
.airfryer-case-outcome-copy > p + p { margin-top: 1.2rem; }
.airfryer-case-outcome-note { display: grid; gap: .35rem; margin-top: 1.7rem; padding: 1.25rem 1.35rem; border-left: .28rem solid var(--mint-dark); background: var(--white); }
.airfryer-case-outcome-note strong { color: var(--navy); font: 700 .75rem/1.5 Poppins, Arial, sans-serif; text-transform: uppercase; }
.airfryer-case-outcome-note span { color: #617089; font-size: .78rem; line-height: 1.7; }
.airfryer-case-final-cta { background: linear-gradient(135deg, #10264f, #315cf6); }

@media (max-width: 980px) {
  .airfryer-case-hero-grid, .airfryer-case-content-grid, .airfryer-case-package-heading, .airfryer-case-seo-grid, .airfryer-case-outcome-grid { grid-template-columns: 1fr; }
  .airfryer-case-hero-visual, .airfryer-case-content-visual { max-width: 50rem; }
  .airfryer-case-content-copy { max-width: 48rem; }
  .airfryer-case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .airfryer-case-facts > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .airfryer-case-facts > div:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .airfryer-case-hero { min-height: 0; padding: 9.5rem 0 4rem; }
  .airfryer-case-summary, .airfryer-case-content-platform, .airfryer-case-package, .airfryer-case-seo, .airfryer-case-outcome { padding: 5rem 0; }
  .airfryer-case-summary-grid { grid-template-columns: 1fr; gap: 1rem; }
  .airfryer-case-package-list { grid-template-columns: 1fr; }
  .airfryer-case-package-list article, .airfryer-case-package-list article:nth-child(even) { padding: 1.5rem 0; border-left: 0; }
  .airfryer-case-package-list article + article { border-top: 1px solid rgb(255 255 255 / 16%); }
  .airfryer-case-seo-details ul { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .airfryer-case-page > section .page-width { width: min(100% - 2rem, var(--page)); }
  .airfryer-case-hero h1, .airfryer-case-summary h2, .airfryer-case-content-platform h2, .airfryer-case-package h2, .airfryer-case-seo h2, .airfryer-case-outcome h2 { overflow-wrap: anywhere; }
  .airfryer-case-hero-copy > p:not(.kicker) { font-size: .93rem; }
  .airfryer-case-actions { align-items: stretch; flex-direction: column; }
  .airfryer-case-actions > a, .airfryer-case-content-copy > .services-secondary-button, .airfryer-case-seo-intro > .services-primary-button { width: 100%; }
  .airfryer-case-hero-visual { border-radius: 1.15rem; }
  .airfryer-case-facts { grid-template-columns: 1fr; }
  .airfryer-case-facts > div + div, .airfryer-case-facts > div:nth-child(3), .airfryer-case-facts > div:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); }
  .airfryer-case-content-visual { grid-template-columns: 1fr; gap: .8rem; }
  .airfryer-case-recipe, .airfryer-case-recipe-large { margin: 0; }
  .airfryer-case-package-list article { grid-template-columns: 3rem 1fr; gap: 1rem; }
  .airfryer-case-package-list article > span { width: 3rem; height: 3rem; }
}

/* Xenid Monitor */
.monitor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; padding: 1.35rem 1.5rem; border: 1px solid #dce3ed; border-radius: 1rem; background: var(--white); }
.monitor-toolbar p, .monitor-toolbar h2, .monitor-toolbar span { margin: 0; }
.monitor-toolbar p { color: var(--blue); font-size: .59rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.monitor-toolbar h2 { margin-top: .2rem; color: var(--navy); font-size: 1.15rem; letter-spacing: -.025em; }
.monitor-toolbar span { display: block; margin-top: .35rem; color: #7f8b9e; font-size: .65rem; }
.monitor-toolbar button { min-height: 2.8rem; flex: none; padding: .65rem 1rem; border: 1px solid #cad4e3; border-radius: .7rem; background: #f8faff; color: var(--navy); font: 800 .67rem Inter, sans-serif; cursor: pointer; }
.monitor-toolbar button:hover, .monitor-toolbar button:focus-visible { border-color: var(--blue); color: var(--blue); outline: none; }
.monitor-toolbar button:disabled { opacity: .6; cursor: wait; }
.monitor-load-error { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid #eec9c6; border-radius: .75rem; background: #fff4f3; color: #9c3c36; font-size: .7rem; }
.monitor-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.monitor-summary-grid article { position: relative; min-width: 0; overflow: hidden; padding: 1.2rem 1.25rem; border: 1px solid #e0e5ed; border-radius: .9rem; background: var(--white); }
.monitor-summary-grid article::before { position: absolute; content: ""; inset: 0 auto 0 0; width: .26rem; background: #9aa5b5; }
.monitor-summary-grid article.healthy::before { background: #118b78; }.monitor-summary-grid article.warning::before { background: #d49724; }.monitor-summary-grid article.failure::before { background: #c44c45; }.monitor-summary-grid article.unknown::before { background: #8390a3; }
.monitor-summary-grid span, .monitor-summary-grid strong, .monitor-summary-grid small { display: block; }
.monitor-summary-grid span { color: #7b879a; font-size: .62rem; }
.monitor-summary-grid strong { margin: .35rem 0; color: var(--navy); font: 800 1.7rem Poppins, sans-serif; }
.monitor-summary-grid small { min-height: 1.8em; color: #97a1b1; font-size: .56rem; line-height: 1.45; }
.monitor-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.monitor-source { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .25rem .8rem; padding: .95rem 1rem; border: 1px solid #dce5ed; border-radius: .8rem; background: #f8fbfc; }
.monitor-source > span { grid-row: 1 / 3; }.monitor-source strong, .monitor-source small { min-width: 0; display: block; }.monitor-source strong { color: var(--navy); font-size: .71rem; }.monitor-source small { color: #7d899b; font-size: .58rem; line-height: 1.45; }
.monitor-source.missing { border-style: dashed; background: #fafbfc; }
.monitor-channel-notice { display: grid; gap: .25rem; margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid #ead8ae; border-radius: .8rem; background: #fffaf0; }
.monitor-channel-notice strong { color: #7a570f; font-size: .7rem; }.monitor-channel-notice span { color: #8b7445; font-size: .61rem; line-height: 1.5; }
.monitor-badge { display: inline-flex; width: fit-content; align-items: center; gap: .42rem; padding: .42rem .62rem; border-radius: 999px; background: #eef1f5; color: #68758a; font-size: .59rem; font-weight: 850; white-space: nowrap; }
.monitor-badge i { width: .42rem; height: .42rem; flex: none; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .18rem rgb(104 117 138 / 10%); }
.monitor-badge.status-ok { background: #e8f8f4; color: #087763; }.monitor-badge.status-warning { background: #fff4da; color: #946306; }.monitor-badge.status-failure { background: #fff0ef; color: #ad3e38; }.monitor-badge.status-unknown { background: #eef1f5; color: #68758a; }.monitor-badge.status-maintenance, .monitor-badge.status-running { background: #edf2ff; color: #315cf6; }
.monitor-incidents-empty { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; border-color: #cfe9e3; background: linear-gradient(135deg, #f1faf7, #fff); }
.monitor-incidents-empty > span { width: .8rem; height: .8rem; flex: none; border-radius: 50%; background: #118b78; box-shadow: 0 0 0 .3rem rgb(17 139 120 / 10%); }
.monitor-incidents-empty p, .monitor-incidents-empty h2, .monitor-incidents-empty small { margin: 0; }.monitor-incidents-empty p { color: #118b78; font-size: .57rem; font-weight: 850; text-transform: uppercase; }.monitor-incidents-empty h2 { margin-top: .2rem; color: var(--navy); font-size: .85rem; }.monitor-incidents-empty small { display: block; margin-top: .25rem; color: #77877f; font-size: .59rem; }
.monitor-incidents { margin-bottom: 1rem; border-color: #edcbc8; }.monitor-incidents > div:last-child { display: grid; gap: .1rem; }.monitor-incidents > div:last-child > div { display: grid; grid-template-columns: auto minmax(10rem, .7fr) minmax(14rem, 1.3fr); align-items: center; gap: .8rem; padding: .75rem 0; border-top: 1px solid #edf0f4; }.monitor-incidents strong { color: var(--navy); font-size: .69rem; }.monitor-incidents small { color: #7d899c; font-size: .59rem; line-height: 1.45; }
.monitor-server-card { margin-bottom: 1rem; border-left: .27rem solid #8793a5; }.monitor-server-card.status-ok { border-left-color: #118b78; }.monitor-server-card.status-warning { border-left-color: #d49724; }.monitor-server-card.status-failure { border-left-color: #c44c45; }
.monitor-server-card .admin-card-title > div > span { display: block; max-width: 48rem; margin-top: .35rem; color: #7c889b; font-size: .63rem; line-height: 1.5; }
.monitor-server-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
.monitor-server-grid > div { min-width: 0; display: grid; align-content: start; gap: .35rem; padding: .85rem; border-radius: .7rem; background: #f6f8fb; }
.monitor-server-grid span:not(.monitor-badge), .monitor-server-grid strong, .monitor-server-grid small { display: block; }.monitor-server-grid > div > span:first-child { color: #7f8b9d; font-size: .57rem; }.monitor-server-grid strong { min-height: 2.6em; color: var(--navy); font-size: .68rem; overflow-wrap: anywhere; }.monitor-server-grid small { color: #98a2b2; font-size: .52rem; }
.monitor-site-list { display: grid; gap: 1rem; }
.monitor-site-card { padding: 0; overflow: hidden; border-left: .27rem solid #8793a5; }.monitor-site-card.status-ok { border-left-color: #118b78; }.monitor-site-card.status-warning { border-left-color: #d49724; }.monitor-site-card.status-failure { border-left-color: #c44c45; }.monitor-site-card.status-maintenance { border-left-color: #315cf6; }
.monitor-site-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.35rem 1.45rem; border-bottom: 1px solid #e8ecf2; }
.monitor-site-number { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: .75rem; background: #0b2144; color: var(--white); font: 800 .85rem Poppins, sans-serif; }
.monitor-site-card header p, .monitor-site-card header h2, .monitor-site-card header span { margin: 0; }.monitor-site-card header p { color: #8591a3; font-size: .56rem; font-weight: 750; text-transform: uppercase; }.monitor-site-card header h2 { margin-top: .18rem; color: var(--navy); font-size: 1.08rem; }.monitor-site-card header > div:nth-child(2) > span { display: block; max-width: 56rem; margin-top: .35rem; color: #6f7d92; font-size: .62rem; line-height: 1.5; }
.monitor-site-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #e8ecf2; }.monitor-site-metrics > div { min-width: 0; padding: 1rem 1.35rem; border-right: 1px solid #e8ecf2; }.monitor-site-metrics > div:last-child { border-right: 0; }.monitor-site-metrics span, .monitor-site-metrics strong { display: block; }.monitor-site-metrics span { color: #8a96a8; font-size: .55rem; }.monitor-site-metrics strong { margin-top: .35rem; color: var(--navy); font-size: .7rem; overflow-wrap: anywhere; }
.monitor-action { display: grid; gap: .25rem; margin: 1rem 1.35rem 0; padding: .8rem .9rem; border: 1px solid #dde4ee; border-radius: .7rem; background: #f7f9fc; }.monitor-action.status-warning { border-color: #ead8ae; background: #fffaf0; }.monitor-action.status-failure { border-color: #edcbc8; background: #fff5f4; }.monitor-action.status-unknown { border-style: dashed; }.monitor-action span { color: #8692a4; font-size: .54rem; font-weight: 800; text-transform: uppercase; }.monitor-action strong { color: #4e5d74; font-size: .64rem; line-height: 1.5; }
.monitor-technical { padding: .9rem 1.35rem 1.2rem; }.monitor-technical summary { width: fit-content; color: var(--blue); font-size: .62rem; font-weight: 800; cursor: pointer; list-style-position: inside; }.monitor-technical summary span { display: inline-grid; min-width: 1.35rem; height: 1.35rem; place-items: center; margin-left: .25rem; border-radius: 999px; background: #edf2ff; font-size: .54rem; }.monitor-technical > div { margin-top: .75rem; border-top: 1px solid #e8ecf2; }
.monitor-check-row { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) 8rem; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #edf0f4; }.monitor-check-row:last-child { border-bottom: 0; }.monitor-check-row > span { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .2rem .55rem; }.monitor-check-row > span .monitor-badge { grid-row: 1 / 3; font-size: 0; padding: .34rem; }.monitor-check-row > span .monitor-badge i { width: .46rem; height: .46rem; }.monitor-check-row strong, .monitor-check-row small, .monitor-check-row b { min-width: 0; display: block; }.monitor-check-row strong { color: var(--navy); font-size: .65rem; }.monitor-check-row > span small { color: #98a2b2; font-size: .52rem; }.monitor-check-row > b { color: #5f6d83; font-size: .6rem; font-weight: 700; overflow-wrap: anywhere; }.monitor-check-row > small { color: #8c98aa; font-size: .55rem; text-align: right; }
.monitor-privacy-note { margin: 1rem 0 0; padding: .9rem 1rem; border: 1px solid #dde4ec; border-radius: .75rem; background: #f7f9fb; color: #788599; font-size: .61rem; line-height: 1.55; }.monitor-privacy-note strong { color: #4d5c73; }

@media (max-width: 1180px) {
  .monitor-server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-site-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-site-metrics > div:nth-child(2) { border-right: 0; }.monitor-site-metrics > div:nth-child(-n+2) { border-bottom: 1px solid #e8ecf2; }
}
@media (max-width: 820px) {
  .monitor-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-sources { grid-template-columns: 1fr; }
  .monitor-incidents > div:last-child > div { grid-template-columns: auto 1fr; }.monitor-incidents small { grid-column: 2; }
  .monitor-check-row { grid-template-columns: minmax(11rem, 1fr) 1fr; }.monitor-check-row > small { grid-column: 2; text-align: left; }
}
@media (max-width: 560px) {
  .monitor-toolbar { align-items: stretch; flex-direction: column; gap: 1rem; }.monitor-toolbar button { width: 100%; }
  .monitor-summary-grid, .monitor-server-grid, .monitor-site-metrics { grid-template-columns: 1fr; }
  .monitor-site-metrics > div, .monitor-site-metrics > div:nth-child(2) { border-right: 0; border-bottom: 1px solid #e8ecf2; }.monitor-site-metrics > div:last-child { border-bottom: 0; }
  .monitor-site-card > header { grid-template-columns: auto 1fr; }.monitor-site-card > header > .monitor-badge { grid-column: 1 / -1; }
  .monitor-check-row { grid-template-columns: 1fr; gap: .4rem; }.monitor-check-row > small { grid-column: auto; }.monitor-check-row > b { padding-left: 2rem; }.monitor-check-row > small { padding-left: 2rem; }
}

/* Mobiele visuele verfijning september 2026 */
@media (max-width: 560px) {
  :root {
    --xenid-public-h1: clamp(1.6rem, 8.5vw, 2.1rem);
    --xenid-public-h2: clamp(1.55rem, 7.6vw, 1.95rem);
    --xenid-public-h3: clamp(1.35rem, 6.5vw, 1.75rem);
  }

  body h1,
  body h2,
  body h3,
  body h4,
  body h5,
  body h6 {
    word-spacing: .08em;
  }

  .hero h1,
  .contact-hero h1,
  .legal-hero h1,
  .portfolio-hero h1,
  .booking-hero h1,
  .page-hero h1,
  .about-hero h1,
  .services-overview-hero h1,
  .appointment-service-hero h1,
  .website-service-hero h1,
  .portal-service-hero h1,
  .dashboard-service-hero h1,
  .hosting-service-hero h1,
  .iot-service-hero h1,
  .work-hero h1,
  .airfryer-case-hero h1,
  .packages-hero h1,
  .seo-detail-hero h1,
  .error-page .booking-confirmation h1 {
    max-width: 100%;
    font-size: var(--xenid-public-h1);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .button,
  .pill,
  .outline-link,
  .shared-header-cta,
  .shared-mobile-cta,
  .contact-submit,
  .contact-planner-button,
  .seo-detail-primary-button,
  .seo-detail-package-button,
  .packages-primary-button,
  .packages-card-button,
  .hosting-package-button {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    text-align: center;
  }

  .home-proof-grid,
  .home-proof-copy {
    min-width: 0;
    max-width: 100%;
  }

  .booking-step {
    padding-inline: 1rem;
  }

  .date-options {
    gap: .5rem;
    scroll-padding-inline: 0;
    scroll-snap-type: inline mandatory;
  }

  .date-options button {
    flex-basis: calc((100% - 1rem) / 3);
    scroll-snap-align: start;
  }

  .legal-content h2,
  .legal-content p,
  .legal-content li {
    overflow-wrap: anywhere;
  }

  .packages-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .packages-table,
  .packages-table tbody,
  .packages-table tr,
  .packages-table th,
  .packages-table td {
    display: block;
    width: 100%;
  }

  .packages-table {
    min-width: 0;
  }

  .packages-table thead {
    display: none;
  }

  .packages-table tr {
    margin-bottom: .85rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--white);
    box-shadow: 0 .55rem 1.8rem rgb(20 42 80 / 5%);
  }

  .packages-table tbody th {
    width: 100%;
    padding: .8rem 1rem;
    border: 0;
    background: var(--navy);
    color: var(--white);
  }

  .packages-table tbody td {
    display: grid;
    grid-template-columns: 5.3rem minmax(0, 1fr);
    gap: .75rem;
    padding: .78rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--line);
  }

  .packages-table tbody td:last-child {
    border-bottom: 0;
  }

  .packages-table tbody td::before {
    color: var(--blue);
    font: 800 .58rem/1.5 Poppins, Arial, sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .packages-table tbody td:nth-of-type(1)::before { content: "Compact"; }
  .packages-table tbody td:nth-of-type(2)::before { content: "Business"; }
  .packages-table tbody td:nth-of-type(3)::before { content: "Plus"; }
}

/* Website APK raster blijft leidend na de oudere dienstspecifieke regels. */
.apk-four-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .apk-four-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .apk-four-grid { grid-template-columns: 1fr; } }

/* Werkboek 2.0 */
.work-toolbar-v2 { background: linear-gradient(135deg, #07152f 0%, #102b58 68%, #164d69 100%); }
.work-task-v2 .work-task-main { min-height: 4.4rem; }
.work-task-meta .work-blocked { background: #fff0dc; color: #9b5b09; }
.workbook-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; padding: 1.35rem 1.5rem; border-radius: 1rem; background: #eaf0fb; }
.workbook-heading p, .workbook-heading h2, .workbook-heading span { margin: 0; }
.workbook-heading p { color: var(--blue); font-size: .6rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.workbook-heading h2 { margin-top: .25rem; color: var(--navy); font-size: 1.3rem; }
.workbook-heading span { display: block; margin-top: .35rem; color: #728097; font-size: .67rem; }
.workbook-heading > button, .workbook-task-list .admin-card-title > button { min-height: 2.75rem; flex: none; padding: .65rem .9rem; border: 0; border-radius: .7rem; background: var(--blue); color: var(--white); font: 800 .64rem Inter, sans-serif; cursor: pointer; }
.workbook-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.workbook-card { min-width: 0; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 1rem; background: var(--white); box-shadow: 0 .55rem 1.5rem rgb(14 33 67 / 4%); }
.workbook-card.selected { border-color: #315cf6; box-shadow: 0 0 0 .15rem rgb(49 92 246 / 10%); }
.workbook-card > button:first-child { width: 100%; min-height: 11.5rem; display: grid; align-content: start; gap: .55rem; padding: 1.25rem; border: 0; background: transparent; color: var(--navy); text-align: left; cursor: pointer; }
.workbook-card > button:first-child:hover { background: #f9fbff; }
.workbook-card .workbook-state { width: fit-content; padding: .3rem .48rem; border-radius: 999px; background: #e8f7f3; color: #0a826f; font-size: .54rem; font-weight: 850; text-transform: uppercase; }
.workbook-card.status-paused .workbook-state { background: #fff3d9; color: #8a620c; }
.workbook-card.status-completed .workbook-state { background: #edf0f4; color: #657186; }
.workbook-card strong { font: 750 .92rem/1.35 Poppins, sans-serif; }
.workbook-card small { min-height: 3.2em; display: -webkit-box; overflow: hidden; color: #748197; font-size: .63rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.workbook-card > button:first-child > div { display: flex; gap: 1rem; margin-top: .25rem; }
.workbook-card > button:first-child > div span { color: #8792a4; font-size: .57rem; }
.workbook-card > button:first-child > div b { color: var(--navy); font-size: .7rem; }
.workbook-edit { width: 100%; padding: .7rem 1.25rem; border: 0; border-top: 1px solid #e7ebf1; background: #fafbfd; color: #52627a; font: 800 .59rem Inter, sans-serif; text-align: left; cursor: pointer; }
.workbook-edit:hover { color: var(--blue); }
.workbook-task-list { margin-top: 1rem; }

.work-calendar-card { padding: 0; overflow: hidden; }
.work-calendar-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.4rem; border-bottom: 1px solid #e4e9f0; }
.work-calendar-header p, .work-calendar-header h2, .work-calendar-header span { margin: 0; }
.work-calendar-header p { color: var(--blue); font-size: .59rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.work-calendar-header h2 { margin-top: .18rem; color: var(--navy); font-size: 1.2rem; text-transform: capitalize; }
.work-calendar-header span { display: block; margin-top: .3rem; color: #7c899c; font-size: .61rem; }
.work-calendar-header > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.work-calendar-header button { min-height: 2.35rem; padding: .5rem .7rem; border: 1px solid #d3dbe7; border-radius: .55rem; background: var(--white); color: #526078; font: 750 .58rem Inter, sans-serif; cursor: pointer; }
.work-calendar-header button:hover { border-color: var(--blue); color: var(--blue); }
.work-calendar-weekdays, .work-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.work-calendar-weekdays { border-bottom: 1px solid #e6eaf0; background: #f6f8fb; }
.work-calendar-weekdays span { padding: .55rem .7rem; color: #7b8799; font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.work-calendar-grid > article { min-width: 0; min-height: 8.4rem; padding: .55rem; border-right: 1px solid #e6eaf0; border-bottom: 1px solid #e6eaf0; background: var(--white); }
.work-calendar-grid > article:nth-child(7n) { border-right: 0; }
.work-calendar-grid > article.outside { background: #fafbfd; opacity: .55; }
.work-calendar-grid > article.today { box-shadow: inset 0 0 0 .13rem #315cf6; }
.work-calendar-grid article > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.work-calendar-grid article > header strong { color: #69758a; font-size: .61rem; }
.work-calendar-grid article > header button { width: 1.45rem; height: 1.45rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #eef2ff; color: var(--blue); font: 800 .8rem Inter, sans-serif; cursor: pointer; }
.work-calendar-grid article > div { display: grid; gap: .25rem; }
.calendar-task, .calendar-appointment { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .35rem; padding: .34rem .4rem; overflow: hidden; border: 0; border-radius: .35rem; text-align: left; }
.calendar-task { border-left: .18rem solid #315cf6; background: #eef2ff; color: #143bba; cursor: pointer; }
.calendar-task.priority-high { border-left-color: #d6534c; background: #fff0ef; color: #9e332e; }
.calendar-task.priority-low { border-left-color: #159d8b; background: #e9f8f5; color: #087766; }
.calendar-appointment { background: #e9f7f4; color: #087766; }
.calendar-task strong, .calendar-appointment strong { font-size: .48rem; }
.calendar-task span, .calendar-appointment span { min-width: 0; overflow: hidden; font-size: .5rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.work-calendar-legend { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .75rem 1.2rem; color: #7a8799; font-size: .57rem; }
.work-calendar-legend span { width: .55rem; height: .55rem; margin-left: .6rem; border-radius: .16rem; background: #315cf6; }
.work-calendar-legend span.appointment { background: #159d8b; }

.work-detail-dialog { width: min(72rem, calc(100% - 2rem)); }
.work-detail-dialog .work-dialog-shell { grid-template-rows: auto minmax(0, 1fr); }
.work-detail-body { padding: 1.35rem 1.5rem 1.7rem; overflow-y: auto; background: #f5f7fa; }
.work-detail-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid #dfe5ed; border-radius: .8rem; background: var(--white); }
.work-detail-summary > div { display: flex; flex-wrap: wrap; gap: .4rem; }
.work-detail-summary > div span { padding: .3rem .48rem; border-radius: 999px; background: #f0f3f7; color: #637086; font-size: .56rem; font-weight: 750; }
.work-detail-summary > button { min-height: 2.35rem; padding: .5rem .75rem; border: 1px solid #cbd5e2; border-radius: .55rem; background: var(--white); color: var(--navy); font: 800 .59rem Inter, sans-serif; cursor: pointer; }
.work-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .6fr); align-items: start; gap: 1rem; }
.work-detail-copy, .work-detail-grid > aside, .work-log-grid { display: grid; gap: 1rem; }
.work-detail-copy article, .work-detail-grid aside article, .work-log-grid article { padding: 1.05rem 1.15rem; border: 1px solid #dfe5ed; border-radius: .8rem; background: var(--white); }
.work-detail-copy article > p, .work-detail-grid aside article > p, .work-log-grid article > p, .work-report-columns article > p, .work-report-blockers > p, .work-report-log > p { margin: 0 0 .65rem; color: var(--blue); font-size: .58rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.work-detail-copy article > div { color: #56657b; font-size: .69rem; line-height: 1.65; }
.work-blocker-panel { border-color: #ead5ae !important; background: #fffaf0 !important; }
.work-detail-checklist { display: grid; gap: .35rem; }
.work-detail-checklist button { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem 0; border: 0; background: transparent; color: #4e5d74; font: 650 .65rem/1.45 Inter, sans-serif; text-align: left; cursor: pointer; }
.work-detail-checklist i { width: .95rem; height: .95rem; flex: none; border: 1px solid #bcc7d6; border-radius: .24rem; background: var(--white); }
.work-detail-checklist button.done { color: #96a0af; text-decoration: line-through; }
.work-detail-checklist button.done i { border-color: #159d8b; background: #159d8b; box-shadow: inset 0 0 0 .2rem var(--white); }
.work-detail-grid aside article > strong { display: block; color: var(--navy); font: 750 1.05rem Poppins, sans-serif; }
.work-detail-grid aside article > small { display: block; margin-top: .18rem; color: #8994a5; font-size: .57rem; }
.work-time-form, .work-comment-form { display: grid; gap: .55rem; margin-top: .9rem; }
.work-time-chips { display: flex; gap: .35rem; }
.work-time-chips button { padding: .4rem .55rem; border: 1px solid #d0d9e5; border-radius: .45rem; background: #f8faff; color: #526179; font: 750 .55rem Inter, sans-serif; cursor: pointer; }
.work-time-form label { display: grid; gap: .25rem; color: #6d7a8e; font-size: .57rem; font-weight: 700; }
.work-time-form input, .work-comment-form textarea { width: 100%; min-width: 0; padding: .62rem .7rem; border: 1px solid #ced7e3; border-radius: .55rem; background: #fbfcfe; color: var(--navy); font: .67rem Inter, sans-serif; }
.work-time-form > button[type="submit"], .work-comment-form > button { width: fit-content; min-height: 2.3rem; padding: .5rem .7rem; border: 0; border-radius: .55rem; background: var(--blue); color: var(--white); font: 800 .58rem Inter, sans-serif; cursor: pointer; }
.work-time-list { display: grid; gap: .4rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid #e6eaf0; }
.work-time-list > div, .work-report-people > div, .work-report-log > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.work-time-list span strong, .work-time-list span small { display: block; }.work-time-list strong { color: var(--navy); font-size: .59rem; }.work-time-list small { margin-top: .1rem; color: #8792a3; font-size: .51rem; }.work-time-list b { color: #536278; font-size: .57rem; }
.work-log-grid { grid-template-columns: 1fr 1fr; margin-top: 1rem; }
.work-comment-list, .work-history-list { display: grid; gap: .65rem; margin-top: .8rem; }
.work-comment-list > div { padding-top: .65rem; border-top: 1px solid #e6eaf0; }
.work-comment-list strong, .work-comment-list small { display: inline-block; font-size: .56rem; }.work-comment-list strong { color: var(--navy); }.work-comment-list small { margin-left: .4rem; color: #939dad; }.work-comment-list p { margin: .3rem 0 0; color: #56657a; font-size: .63rem; line-height: 1.55; }
.work-history-list > div { display: grid; grid-template-columns: .5rem 1fr; gap: .55rem; }
.work-history-list i { width: .42rem; height: .42rem; margin-top: .2rem; border-radius: 50%; background: #159d8b; }
.work-history-list strong, .work-history-list small, .work-history-list em { display: block; }.work-history-list strong { color: var(--navy); font-size: .59rem; }.work-history-list small { margin-top: .12rem; color: #8c97a7; font-size: .52rem; }.work-history-list em { margin-top: .15rem; color: #657389; font-size: .52rem; font-style: normal; }

.work-report-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e3e8ef; }
.work-report-header p, .work-report-header h2, .work-report-header span { margin: 0; }.work-report-header p { color: var(--blue); font-size: .58rem; font-weight: 850; text-transform: uppercase; }.work-report-header h2 { margin-top: .2rem; color: var(--navy); font-size: 1.15rem; }.work-report-header > div > span { display: block; margin-top: .28rem; color: #7f8b9c; font-size: .61rem; }
.work-report-header label { display: grid; gap: .3rem; color: #69768a; font-size: .57rem; font-weight: 750; }.work-report-header input { min-height: 2.35rem; padding: .4rem .55rem; border: 1px solid #ced7e3; border-radius: .55rem; color: var(--navy); }
.work-report-status { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .9rem 1rem; border-radius: .75rem; background: #eef2ff; }
.work-report-status.closed { background: #eaf7f4; }.work-report-status p, .work-report-status h3, .work-report-status span { margin: 0; }.work-report-status p { color: var(--blue); font-size: .54rem; font-weight: 850; text-transform: uppercase; }.work-report-status h3 { margin-top: .15rem; color: var(--navy); font-size: .78rem; }.work-report-status span { display: block; margin-top: .18rem; color: #758298; font-size: .55rem; }
.work-report-status > div:last-child { display: flex; gap: .45rem; }.work-report-status button { min-height: 2.35rem; padding: .48rem .7rem; border: 1px solid #ccd6e4; border-radius: .55rem; background: var(--white); color: var(--navy); font: 800 .56rem Inter, sans-serif; cursor: pointer; }.work-report-status button.work-primary-button { border: 0; background: var(--blue); color: var(--white); }
.work-report-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }.work-report-metrics article { padding: .9rem 1rem; border: 1px solid #e0e5ed; border-radius: .75rem; background: #fbfcfe; }.work-report-metrics span, .work-report-metrics strong, .work-report-metrics small { display: block; }.work-report-metrics span { color: #7d899c; font-size: .55rem; }.work-report-metrics strong { margin: .25rem 0; color: var(--navy); font: 750 1.15rem Poppins, sans-serif; }.work-report-metrics small { color: #929cad; font-size: .51rem; }
.work-report-columns { display: grid; grid-template-columns: .7fr 1.3fr; gap: 1rem; }.work-report-columns > article, .work-report-blockers, .work-report-log { padding: 1rem; border: 1px solid #e0e5ed; border-radius: .75rem; }
.work-report-people, .work-report-list, .work-report-log { display: grid; gap: .55rem; }.work-report-people > div { padding: .5rem 0; border-top: 1px solid #edf0f4; }.work-report-people > div:first-child { border-top: 0; }.work-report-people strong, .work-report-people small { display: block; }.work-report-people strong { color: var(--navy); font-size: .63rem; }.work-report-people small { margin-top: .1rem; color: #8b96a6; font-size: .52rem; }.work-report-people b { color: #4e5e76; font-size: .62rem; }
.work-report-list button { display: grid; gap: .18rem; padding: .55rem 0; border: 0; border-top: 1px solid #edf0f4; background: transparent; text-align: left; cursor: pointer; }.work-report-list button:first-child { border-top: 0; }.work-report-list strong { color: var(--navy); font-size: .62rem; }.work-report-list small { color: #8894a5; font-size: .52rem; }
.work-report-blockers, .work-report-log { margin-top: 1rem; }.work-report-blockers > div { display: grid; grid-template-columns: minmax(10rem, .45fr) 1fr; gap: 1rem; padding: .55rem 0; border-top: 1px solid #edf0f4; }.work-report-blockers strong { color: var(--navy); font-size: .62rem; }.work-report-blockers span { color: #69778c; font-size: .59rem; line-height: 1.5; }.work-report-log > div { padding: .45rem 0; border-top: 1px solid #edf0f4; }.work-report-log span strong, .work-report-log span small { display: block; }.work-report-log strong { color: var(--navy); font-size: .6rem; }.work-report-log small { margin-top: .1rem; color: #8a95a5; font-size: .51rem; }.work-report-log b { color: #4f5f76; font-size: .59rem; }
.work-report-private { margin: .8rem 0 0; color: #8b96a7; font-size: .53rem; }

/* Website APK-beheer */
.apk-admin-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; margin-bottom: 1rem; padding: 1.25rem 1.4rem; border: 1px solid #dfe5ee; border-radius: 1rem; background: var(--white); }
.apk-admin-status.ready { border-color: #b8e2d9; background: #f4fbf9; }.apk-admin-status.attention { border-color: #ead7af; background: #fffbf2; }
.apk-admin-status p, .apk-admin-status h2, .apk-admin-status span, .apk-admin-status strong, .apk-admin-status small { margin: 0; }
.apk-admin-status p { color: var(--blue); font-size: .58rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.apk-admin-status h2 { margin-top: .18rem; color: var(--navy); font-size: 1.05rem; }.apk-admin-status span { display: block; margin-top: .35rem; color: #6e7d92; font-size: .62rem; line-height: 1.5; }
.apk-admin-status > div:last-child { min-width: 7.5rem; padding-left: 1.25rem; border-left: 1px solid #dfe5ee; }.apk-admin-status strong, .apk-admin-status small { display: block; }.apk-admin-status strong { color: var(--navy); font: 800 1.15rem Poppins, sans-serif; }.apk-admin-status small { margin-top: .12rem; color: #8290a2; font-size: .54rem; }
.apk-admin-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .45fr); align-items: start; gap: 1rem; margin-bottom: 1rem; }
.apk-admin-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }.apk-admin-fields label { display: grid; gap: .3rem; min-width: 0; }.apk-admin-fields label.wide { grid-column: 1 / -1; }.apk-admin-fields label > span { color: #65738a; font-size: .58rem; font-weight: 750; }.apk-admin-fields label small { margin-left: .25rem; color: #8d98a8; font-weight: 500; }
.apk-admin-fields input, .apk-admin-fields select { width: 100%; min-width: 0; min-height: 2.7rem; padding: .62rem .72rem; border: 1px solid #ced7e3; border-radius: .58rem; background: #fbfcfe; color: var(--navy); font: .67rem Inter, sans-serif; }.apk-admin-fields input:focus, .apk-admin-fields select:focus { border-color: var(--blue); outline: .15rem solid rgb(49 92 246 / 10%); }
.apk-admin-profile, .apk-admin-message, .apk-admin-jobs { margin: .9rem 0 0; color: #78869a; font-size: .57rem; line-height: 1.5; }.apk-admin-message.error { color: #a63f36; }
.apk-admin-mail { margin-bottom: 1rem; }.apk-admin-mail > p { margin: 0 0 1rem; color: #657389; font-size: .64rem; line-height: 1.6; }.apk-admin-mail-state { align-self: center; padding: .36rem .55rem; border-radius: 999px; background: #fff7e6; color: #8b6212; font-size: .55rem; font-weight: 800; }.apk-admin-mail-state.ready { background: #eaf8f4; color: #087968; }.apk-admin-mail-message { margin: .8rem 0 0; color: #78869a; font-size: .57rem; line-height: 1.5; }.apk-admin-mail-message.error { color: #a63f36; }
.apk-admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }.apk-admin-button { min-height: 2.55rem; padding: .58rem .78rem; border: 1px solid #cdd6e3; border-radius: .58rem; background: var(--white); color: var(--navy); font: 800 .57rem Inter, sans-serif; cursor: pointer; }.apk-admin-button.primary { border-color: var(--blue); background: var(--blue); color: var(--white); }.apk-admin-button.danger { border-color: #d8a3a0; color: #a63f36; }.apk-admin-button:disabled { opacity: .45; cursor: not-allowed; }
.apk-admin-activation > p { color: #657389; font-size: .64rem; line-height: 1.6; }.apk-admin-activation dl { display: grid; gap: .65rem; margin: 1rem 0; }.apk-admin-activation dl div { padding-top: .65rem; border-top: 1px solid #e4e9f0; }.apk-admin-activation dt, .apk-admin-activation dd { margin: 0; }.apk-admin-activation dt { color: #8290a3; font-size: .54rem; }.apk-admin-activation dd { margin-top: .2rem; color: var(--navy); font-size: .64rem; font-weight: 750; }
.apk-admin-order-list { display: grid; }.apk-admin-order { display: grid; grid-template-columns: minmax(13rem, 1.3fr) minmax(8rem, .6fr) minmax(10rem, .8fr) auto; align-items: center; gap: 1rem; padding: .8rem 0; border-top: 1px solid #e6eaf0; }.apk-admin-order:first-child { border-top: 0; }.apk-admin-order span strong, .apk-admin-order span b, .apk-admin-order span small { display: block; }.apk-admin-order strong, .apk-admin-order b { color: var(--navy); font-size: .62rem; }.apk-admin-order small { margin-top: .16rem; color: #8390a2; font-size: .53rem; }.apk-admin-order button { padding: .48rem .6rem; border: 1px solid #ccd6e4; border-radius: .48rem; background: var(--white); color: var(--blue); font: 800 .54rem Inter, sans-serif; cursor: pointer; }

@media (max-width: 1100px) {
  .apk-admin-layout { grid-template-columns: 1fr; }
  .apk-admin-order { grid-template-columns: minmax(12rem, 1fr) minmax(8rem, .6fr) minmax(10rem, .7fr); }.apk-admin-order button { grid-column: 1 / -1; width: fit-content; }
  .workbook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-calendar-card { overflow-x: auto; }.work-calendar-header, .work-calendar-weekdays, .work-calendar-grid, .work-calendar-legend { min-width: 52rem; }
  .work-detail-grid { grid-template-columns: 1fr; }.work-log-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .apk-admin-status { grid-template-columns: 1fr; }.apk-admin-status > div:last-child { padding: .75rem 0 0; border-top: 1px solid #dfe5ee; border-left: 0; }.apk-admin-fields { grid-template-columns: 1fr; }.apk-admin-fields label.wide { grid-column: auto; }.apk-admin-actions { display: grid; }.apk-admin-order { grid-template-columns: 1fr 1fr; }.apk-admin-order > span:first-child { grid-column: 1 / -1; }
  .workbook-heading, .work-calendar-header, .work-report-header, .work-report-status { align-items: stretch; flex-direction: column; }
  .workbook-heading > button { width: 100%; }.workbook-grid { grid-template-columns: 1fr; }
  .work-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.work-report-columns { grid-template-columns: 1fr; }
  .work-report-status > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }.work-report-status button { width: 100%; }
}
@media (max-width: 560px) {
  .work-calendar-card { overflow: visible; }.work-calendar-header, .work-calendar-legend { min-width: 0; }.work-calendar-header > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }.work-calendar-header button:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }.work-calendar-header button:first-child { grid-row: 2; }.work-calendar-header button:last-child { grid-row: 2; }
  .work-calendar-weekdays { display: none; }.work-calendar-grid { min-width: 0; display: grid; grid-template-columns: 1fr; }.work-calendar-grid > article { min-height: 0; display: none; border-right: 0; }.work-calendar-grid > article.current, .work-calendar-grid > article.today, .work-calendar-grid > article:has(.calendar-task), .work-calendar-grid > article:has(.calendar-appointment) { display: block; }.work-calendar-grid > article.outside:not(:has(.calendar-task)):not(:has(.calendar-appointment)) { display: none; }
  .calendar-task, .calendar-appointment { grid-template-columns: 3.2rem 1fr; padding: .48rem .55rem; }.calendar-task strong, .calendar-appointment strong, .calendar-task span, .calendar-appointment span { font-size: .58rem; white-space: normal; }
  .work-detail-body { padding: 1rem; }.work-detail-summary { align-items: stretch; flex-direction: column; }.work-detail-summary > button { width: 100%; }.work-log-grid { grid-template-columns: 1fr; }
  .work-report-metrics { grid-template-columns: 1fr 1fr; }.work-report-status > div:last-child { grid-template-columns: 1fr; }.work-report-blockers > div { grid-template-columns: 1fr; gap: .25rem; }
}
@media print {
  body:has(.work-week-report) .admin-sidebar, body:has(.work-week-report) .admin-topbar, body:has(.work-week-report) .work-toolbar, body:has(.work-week-report) .work-subnav { display: none !important; }
  body:has(.work-week-report) .admin-main { margin: 0; padding: 0; }.work-week-report { border: 0; box-shadow: none; }.work-report-status button { display: none; }
}

/* Google Search Console */
.search-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; padding: 1.25rem 1.4rem; border-radius: 1rem; background: linear-gradient(135deg, var(--navy), #15356c); color: var(--white); }
.search-toolbar p, .search-toolbar h2, .search-toolbar span { margin: 0; }.search-toolbar p { color: var(--mint); font-size: .58rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.search-toolbar h2 { margin-top: .2rem; color: var(--white); font-size: 1.25rem; }.search-toolbar span { display: block; margin-top: .35rem; color: #c8d3e7; font-size: .62rem; line-height: 1.55; }
.search-button { display: inline-flex; min-height: 2.55rem; align-items: center; justify-content: center; padding: .58rem .8rem; border: 1px solid #ccd6e4; border-radius: .6rem; background: var(--white); color: var(--navy); font: 800 .57rem Inter, sans-serif; text-align: center; cursor: pointer; }.search-button.primary { border-color: var(--blue); background: var(--blue); color: var(--white); }.search-button.danger { border-color: #d8a3a0; color: #a63f36; }.search-button:disabled, .search-button.loading { opacity: .55; cursor: wait; }.search-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.search-sites-card { margin-bottom: 1rem; }.search-sites-card > .admin-card-title { align-items: center; }.search-sites-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }.search-site-option { min-width: 0; padding: .9rem 1rem; border: 1px solid #dce3ec; border-radius: .75rem; background: #fbfcfe; color: var(--navy); text-align: left; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }.search-site-option:hover, .search-site-option:focus-visible { border-color: #9fb4fb; outline: 0; box-shadow: 0 0 0 .14rem rgb(49 92 246 / 10%); }.search-site-option.active { border-color: var(--blue); background: #eef2ff; }.search-site-option span, .search-site-option strong, .search-site-option small { display: block; }.search-site-option span { color: #728096; font-size: .53rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }.search-site-option strong { margin-top: .32rem; color: var(--navy); font: 750 .84rem Poppins, sans-serif; }.search-site-option small { margin-top: .2rem; color: #7e8b9e; font-size: .52rem; line-height: 1.45; }
.search-periods { display: flex; gap: .35rem; margin-bottom: 1rem; }.search-periods button { min-height: 2.25rem; padding: .45rem .75rem; border: 1px solid #d2dbe7; border-radius: 999px; background: var(--white); color: #64738a; font: 800 .57rem Inter, sans-serif; cursor: pointer; }.search-periods button.active { border-color: var(--blue); background: var(--blue); color: var(--white); }
.search-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }.search-metric-grid article { min-width: 0; padding: 1rem 1.1rem; border: 1px solid #dce3ec; border-radius: .85rem; background: var(--white); }.search-metric-grid span, .search-metric-grid strong, .search-metric-grid small, .search-metric-grid em { display: block; }.search-metric-grid span { color: #78869a; font-size: .57rem; }.search-metric-grid strong { margin: .28rem 0 .2rem; color: var(--navy); font: 800 1.35rem Poppins, sans-serif; }.search-metric-grid em { margin-top: .3rem; color: #8a96a7; font-size: .52rem; font-style: normal; }.search-change { min-height: 1.4em; color: #7c899c; font-size: .51rem; font-weight: 700; }.search-change.positive { color: #087968; }.search-change.negative { color: #a44a42; }
.search-chart-card { margin-bottom: 1rem; overflow: hidden; }.search-chart-card .admin-card-title > span { color: #8290a3; font-size: .54rem; }.search-series-chart { display: flex; min-height: 12rem; align-items: flex-end; gap: .34rem; overflow-x: auto; padding: 1.2rem .2rem .2rem; }.search-series-column { display: grid; width: 1.1rem; min-width: 1.1rem; height: 10rem; grid-template-rows: 1.1rem minmax(1rem, 1fr) 1rem; align-items: end; text-align: center; }.search-series-column > span { overflow: hidden; color: #65748a; font-size: .43rem; }.search-series-column > i { display: block; width: .72rem; min-height: .22rem; margin: 0 auto; border-radius: .3rem .3rem 0 0; background: linear-gradient(180deg, var(--blue), #6283ff); }.search-series-column > i.level-0 { height: .22rem; opacity: .35; }.search-series-column > i.level-1 { height: 10%; }.search-series-column > i.level-2 { height: 20%; }.search-series-column > i.level-3 { height: 30%; }.search-series-column > i.level-4 { height: 40%; }.search-series-column > i.level-5 { height: 50%; }.search-series-column > i.level-6 { height: 60%; }.search-series-column > i.level-7 { height: 70%; }.search-series-column > i.level-8 { height: 80%; }.search-series-column > i.level-9 { height: 90%; }.search-series-column > i.level-10 { height: 100%; }.search-series-column > small { color: #8a96a6; font-size: .43rem; white-space: nowrap; }
.search-opportunity-section { display: grid; grid-template-columns: minmax(13rem, .35fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; padding: 1.3rem 1.4rem; border-radius: 1rem; background: #eaf8f4; }.search-opportunity-section > div:first-child p, .search-opportunity-section > div:first-child h2 { margin: 0; }.search-opportunity-section > div:first-child p { color: #078472; font-size: .58rem; font-weight: 850; text-transform: uppercase; }.search-opportunity-section > div:first-child h2 { margin-top: .25rem; color: var(--navy); font-size: 1.05rem; line-height: 1.25; }.search-opportunity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }.search-opportunity-grid article { min-width: 0; padding: .75rem .8rem; border: 1px solid #c9e7df; border-radius: .65rem; background: rgb(255 255 255 / 72%); }.search-opportunity-grid span, .search-opportunity-grid strong, .search-opportunity-grid small { display: block; }.search-opportunity-grid span { color: #087968; font-size: .5rem; font-weight: 850; text-transform: uppercase; }.search-opportunity-grid strong { overflow: hidden; margin-top: .2rem; color: var(--navy); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }.search-opportunity-grid small { margin-top: .24rem; color: #65758a; font-size: .52rem; line-height: 1.45; }
.search-table-grid, .search-breakdown-grid, .search-index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }.search-table-card { min-width: 0; overflow: hidden; }.search-data-table { overflow-x: auto; }.search-data-table > div { display: grid; min-width: 34rem; grid-template-columns: minmax(12rem, 1fr) repeat(4, 4.2rem); align-items: center; gap: .5rem; padding: .58rem 0; border-top: 1px solid #e7ebf1; }.search-data-table .search-table-head { border-top: 0; color: #8995a6; font-size: .45rem; font-weight: 850; text-transform: uppercase; }.search-data-table > div > span { min-width: 0; overflow: hidden; color: #45556d; font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }.search-data-table > div > b { color: var(--navy); font-size: .55rem; text-align: right; }.search-data-table .search-table-head span:not(:first-child) { text-align: right; }
.search-breakdown-card > div:last-child { display: grid; }.search-breakdown-card > div:last-child > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .65rem; padding: .58rem 0; border-top: 1px solid #e7ebf1; }.search-breakdown-card > div:last-child > span:first-child { border-top: 0; }.search-breakdown-card strong { overflow: hidden; color: var(--navy); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }.search-breakdown-card b { color: #4f5f76; font-size: .56rem; }.search-breakdown-card small { grid-column: 1 / -1; color: #8a96a7; font-size: .51rem; }
.search-status { display: inline-flex; align-items: center; width: fit-content; padding: .34rem .55rem; border-radius: 999px; background: #eef1f5; color: #68768a; font-size: .53rem; font-weight: 850; white-space: nowrap; }.search-status.ready { background: #e8f7f3; color: #087968; }.search-status.attention { background: #fff6e5; color: #88610f; }
.search-sitemap-card > div:last-child { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; border: 1px solid #e2e7ee; border-radius: .65rem; }.search-sitemap-card > div:last-child > span { padding: .8rem; border-left: 1px solid #e2e7ee; }.search-sitemap-card > div:last-child > span:first-child { border-left: 0; }.search-sitemap-card small, .search-sitemap-card strong { display: block; }.search-sitemap-card small { color: #8490a2; font-size: .5rem; }.search-sitemap-card strong { margin-top: .2rem; color: var(--navy); font: 750 .9rem Poppins, sans-serif; }
.search-inspection-list { display: grid; max-height: 22rem; overflow: auto; }.search-inspection-list > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .62rem 0; border-top: 1px solid #e7ebf1; }.search-inspection-list > div:first-child { border-top: 0; }.search-inspection-list span strong, .search-inspection-list span small { display: block; }.search-inspection-list span strong { color: var(--navy); font-size: .6rem; }.search-inspection-list span small { margin-top: .16rem; color: #8591a2; font-size: .5rem; line-height: 1.4; }
.search-setup-card, .search-connection-card { margin-bottom: 1rem; }.search-setup-card > p { max-width: 48rem; color: #637289; font-size: .64rem; line-height: 1.65; }.search-setup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; padding: 0; list-style: none; }.search-setup-steps li { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem; border: 1px solid #dce3ec; border-radius: .72rem; background: #fbfcfe; }.search-setup-steps li > b { display: grid; width: 1.55rem; height: 1.55rem; flex: none; place-items: center; border-radius: 50%; background: var(--navy); color: var(--mint); font-size: .57rem; }.search-setup-steps strong, .search-setup-steps small { display: block; }.search-setup-steps strong { color: var(--navy); font-size: .62rem; }.search-setup-steps small { margin-top: .2rem; color: #77859a; font-size: .53rem; line-height: 1.5; }.search-file-row { display: flex; align-items: flex-end; gap: .65rem; padding-top: .9rem; border-top: 1px solid #e5eaf0; }.search-file-row label { display: grid; max-width: 28rem; flex: 1; gap: .3rem; color: #65738a; font-size: .57rem; font-weight: 750; }.search-file-row input { min-height: 2.55rem; padding: .45rem; border: 1px solid #ced7e3; border-radius: .58rem; background: #fbfcfe; color: #5e6d82; font-size: .57rem; }.search-file-row input::file-selector-button { margin-right: .6rem; padding: .48rem .6rem; border: 0; border-radius: .45rem; background: #e9efff; color: var(--blue); font: 800 .54rem Inter, sans-serif; cursor: pointer; }
.search-connection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1rem 0; border: 1px solid #e2e7ee; border-radius: .72rem; }.search-connection-grid > div { min-width: 0; padding: .8rem; border-left: 1px solid #e2e7ee; }.search-connection-grid > div:first-child { border-left: 0; }.search-connection-grid span, .search-connection-grid strong { display: block; }.search-connection-grid span { color: #8490a2; font-size: .51rem; }.search-connection-grid strong { overflow: hidden; margin-top: .2rem; color: var(--navy); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }.search-connection-grid button { margin-top: .3rem; padding: 0; border: 0; background: none; color: var(--blue); font: 800 .51rem Inter, sans-serif; cursor: pointer; }.search-actions { display: flex; flex-wrap: wrap; gap: .5rem; }.search-connection-error { margin: 0 0 1rem; padding: .7rem .8rem; border-radius: .55rem; background: #fff1ef; color: #9e433a; font-size: .58rem; line-height: 1.5; }.search-action-message { min-height: 1rem; margin: .55rem 0 0; color: #65748a; font-size: .55rem; }

@media (max-width: 1100px) {
  .search-sites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-metric-grid, .search-connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.search-connection-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid #e2e7ee; }.search-connection-grid > div:nth-child(4) { border-top: 1px solid #e2e7ee; }
  .search-setup-steps { grid-template-columns: 1fr; }
  .search-index-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .search-sites-card > .admin-card-title { align-items: stretch; flex-direction: column; }.search-sites-card > .admin-card-title .search-button { width: 100%; }
  .search-toolbar { align-items: stretch; flex-direction: column; }.search-toolbar .search-button { width: 100%; }
  .search-table-grid, .search-breakdown-grid, .search-opportunity-section { grid-template-columns: 1fr; }.search-opportunity-grid { grid-template-columns: 1fr 1fr; }
  .search-file-row { align-items: stretch; flex-direction: column; }.search-file-row .search-button { width: 100%; }
}
@media (max-width: 560px) {
  .search-sites-grid { grid-template-columns: 1fr; }.search-site-option { padding: .8rem .85rem; }
  .search-setup-card .admin-card-title { align-items: flex-start; flex-direction: column; }
  .search-metric-grid, .search-connection-grid, .search-opportunity-grid { grid-template-columns: 1fr; }.search-connection-grid > div { border-top: 1px solid #e2e7ee; border-left: 0; }.search-connection-grid > div:first-child { border-top: 0; }.search-connection-grid > div:nth-child(2) { border-left: 0; }
  .search-periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.search-periods button { width: 100%; }
  .search-sitemap-card > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }.search-sitemap-card > div:last-child > span { border-top: 1px solid #e2e7ee; }.search-sitemap-card > div:last-child > span:nth-child(odd) { border-left: 0; }.search-sitemap-card > div:last-child > span:nth-child(-n+2) { border-top: 0; }
  .search-inspection-list > div { align-items: flex-start; flex-direction: column; }.search-actions { display: grid; }.search-actions .search-button { width: 100%; }
  .search-data-table { overflow: visible; }.search-data-table .search-table-head { display: none; }.search-data-table > div:not(.search-table-head) { min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; padding: .75rem 0; }.search-data-table > div:not(.search-table-head) > span { grid-column: 1 / -1; font-weight: 750; white-space: normal; }.search-data-table > div:not(.search-table-head) > b { display: grid; gap: .12rem; text-align: left; }.search-data-table > div:not(.search-table-head) > b::before { color: #8b96a6; font-size: .42rem; font-weight: 800; text-transform: uppercase; }.search-data-table > div:not(.search-table-head) > b:nth-child(2)::before { content: "Klikken"; }.search-data-table > div:not(.search-table-head) > b:nth-child(3)::before { content: "Vertoningen"; }.search-data-table > div:not(.search-table-head) > b:nth-child(4)::before { content: "CTR"; }.search-data-table > div:not(.search-table-head) > b:nth-child(5)::before { content: "Positie"; }
}

/* Berichten en artikelen */
.posts-page-body,
.post-page-body { background: #f3f6fa; }
.posts-page,
.post-page { overflow: hidden; }

.posts-hero,
.post-hero {
  position: relative;
  min-height: 32rem;
  display: flex;
  align-items: end;
  overflow: hidden;
  padding: 12rem 0 5.5rem;
  background: radial-gradient(circle at 86% 18%, rgb(74 223 201 / 15%), transparent 25rem), linear-gradient(135deg, #07152f 0%, #102345 100%);
  color: var(--white);
}

.posts-hero::after,
.post-hero::after {
  position: absolute;
  width: 34rem;
  height: 34rem;
  right: -17rem;
  bottom: -23rem;
  border: 1px solid rgb(74 223 201 / 18%);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgb(74 223 201 / 3%), 0 0 0 10rem rgb(74 223 201 / 2%);
  content: "";
}

.posts-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; align-items: end; gap: clamp(3rem, 7vw, 7rem); }
.posts-hero h1 { max-width: 47rem; margin: 0; color: var(--white); font-size: var(--xenid-public-h1); font-weight: 700; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.posts-hero-copy > p { max-width: 38rem; margin: 0 0 .65rem; color: #d0d9e7; font-size: 1.03rem; line-height: 1.85; }

.posts-latest { padding: 6.5rem 0 8rem; }
.posts-section-heading { display: grid; grid-template-columns: 1fr .75fr; align-items: end; gap: clamp(2.5rem, 7vw, 7rem); margin-bottom: 2.8rem; }
.posts-section-heading h2 { max-width: 45rem; margin: 0; color: var(--navy); font-size: var(--xenid-public-h2); font-weight: 700; line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; }
.posts-section-heading > p { max-width: 34rem; margin: 0 0 .35rem; color: #64738a; font-size: .96rem; line-height: 1.8; }
.posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.post-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dce3ec; border-radius: 1.4rem; background: var(--white); box-shadow: 0 1rem 3rem rgb(18 42 78 / 7%); }
.post-card-image { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #dfe5ed; }
.post-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.post-card-image:hover img,
.post-card-image:focus-visible img { transform: scale(1.02); }
.post-card-content { min-width: 0; flex: 1; display: flex; flex-direction: column; padding: clamp(1.7rem, 3vw, 2.4rem); }
.post-card-meta,
.post-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .8rem; }
.post-card-meta span,
.post-article-meta span { font: 800 .64rem Poppins, Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.post-card-meta span { color: var(--blue); }
.post-card time { color: #718096; font-size: .77rem; }
.post-card h3 { margin: 1.2rem 0 0; font: 750 clamp(1.4rem, 2vw, 1.75rem)/1.2 Poppins, Arial, sans-serif; letter-spacing: -.035em; }
.post-card h3 a { color: var(--navy); text-decoration: none; }
.post-card h3 a:hover,
.post-card h3 a:focus-visible { color: var(--blue); }
.post-card-content > p { margin: 1rem 0 0; color: #56657a; line-height: 1.75; }

.post-reading-width { position: relative; z-index: 1; width: min(52rem, calc(100% - 3rem)); margin-inline: auto; }
.post-hero-inner { position: relative; z-index: 1; }
.post-article-meta { margin-bottom: 1.25rem; }
.post-article-meta span { color: var(--mint); }
.post-hero .post-article-meta time { margin: 0; color: #c9d5e8; font: 750 .78rem Poppins, Arial, sans-serif; }
.post-hero h1 { max-width: 60rem; margin: 0; color: var(--white); font-size: var(--xenid-public-h1); font-weight: 700; line-height: 1.03; letter-spacing: -.05em; text-wrap: balance; }
.post-hero p { max-width: 46rem; margin: 1.7rem 0 0; color: #c9d5e8; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.8; }
.post-featured-image { width: min(68rem, calc(100% - 3rem)); margin: 3.5rem auto 0; overflow: hidden; border-radius: 1.5rem; background: #dfe5ed; box-shadow: 0 1.4rem 4rem rgb(18 42 78 / 10%); }
.post-featured-image img { width: 100%; height: auto; display: block; }
.post-featured-image figcaption { padding: .75rem 1.2rem; background: #fff; color: #5b6d83; font-size: .82rem; line-height: 1.5; }
.post-content { margin-top: 0; padding: 4rem 0 8rem; color: #33445b; font-size: 1.04rem; line-height: 1.86; }
.post-content p { margin: 0 0 1.4rem; }
.post-content .post-opening { margin-bottom: 1.7rem; color: var(--navy); font: 700 clamp(1.45rem, 2.7vw, 2rem)/1.45 Poppins, Arial, sans-serif; letter-spacing: -.025em; }
.post-content h2 { margin: 4.5rem 0 1.35rem; color: var(--navy); font: 800 clamp(1.8rem, 3.1vw, 2.55rem)/1.13 Poppins, Arial, sans-serif; letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.post-content h3 { margin: 2.5rem 0 1rem; color: var(--navy); font: 750 clamp(1.25rem, 2vw, 1.55rem)/1.3 Poppins, Arial, sans-serif; letter-spacing: -.025em; }
.post-content ul { margin: 0 0 1.7rem; padding-left: 1.3rem; }
.post-content ol { margin: 0 0 1.7rem; padding-left: 1.45rem; }
.post-content li { margin: .48rem 0; padding-left: .25rem; }
.post-content li::marker { color: var(--blue); }
.post-content a { color: #244ed5; font-weight: 700; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.post-content a:hover,
.post-content a:focus-visible { color: #173ba8; }
.post-content code { padding: .12rem .35rem; border-radius: .32rem; background: #e8edf5; color: #18315d; font-size: .92em; }
.post-content blockquote { margin: 2rem 0; padding: 1.25rem 1.4rem; border-left: .32rem solid var(--blue); border-radius: 0 .75rem .75rem 0; background: #f2f6ff; color: #294765; }
.post-content blockquote > :last-child { margin-bottom: 0; }
.post-content pre { overflow-x: auto; margin: 2rem 0; padding: 1.2rem; border-radius: .75rem; background: #102440; color: #f5f8fc; font: 400 .9rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.post-content pre code { padding: 0; background: transparent; color: inherit; }
.post-content mark { padding: .05em .18em; background: #fff2a8; color: inherit; }
.post-content hr { margin: 3rem 0; border: 0; border-top: 2px solid #dfe5ed; }
.post-content table { width: 100%; margin: 2rem 0; border-collapse: collapse; }
.post-content th, .post-content td { padding: .78rem .85rem; border: 1px solid #ced8e4; vertical-align: top; text-align: left; }
.post-content th { background: #edf2ff; color: var(--navy); font-family: Poppins, Arial, sans-serif; font-size: .9rem; }
.post-content tr:nth-child(even) td { background: #f9fbfd; }
.post-content .text-align-left { text-align: left; }
.post-content .text-align-center { text-align: center; }
.post-content .text-align-right { text-align: right; }
.post-content .text-align-justify { text-align: justify; }
.post-content .text-indent-1 { margin-left: 2rem; }
.post-content .text-indent-2 { margin-left: 4rem; }
.post-content .text-indent-3 { margin-left: 6rem; }
.post-example { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; margin: 2rem 0; border: 1px solid #dce3ec; border-radius: 1rem; background: #dce3ec; }
.post-example p { min-width: 0; margin: 0; padding: 1.25rem; background: var(--white); }
.post-example span,
.post-example strong { display: block; }
.post-example span { margin-bottom: .45rem; color: #718096; font: 800 .65rem Poppins, Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.post-example strong { color: var(--navy); font: 700 .9rem/1.55 Poppins, Arial, sans-serif; }
.post-example-single { grid-template-columns: 1fr; }
.post-tool-list a[target="_blank"] { color: #244ed5; }
.post-xenid-section { margin: 4.5rem 0; padding: clamp(1.8rem, 4vw, 3rem); border: 1px solid #bde8e0; border-radius: 1.35rem; background: #eaf9f6; }
.post-xenid-section h2 { margin-top: 0; }
.post-xenid-section p:last-child { margin-bottom: 0; }
.post-contact { margin-top: 4rem; padding: clamp(1.8rem, 4vw, 2.8rem); border-radius: 1.3rem; background: var(--navy); color: var(--white); }
.post-contact p { max-width: 38rem; margin-bottom: 1.3rem; color: #d4ddec; font: 650 1.15rem/1.65 Poppins, Arial, sans-serif; }
.post-contact a { display: inline-flex; min-height: 3.2rem; align-items: center; justify-content: center; padding: .8rem 1.25rem; border-radius: 999px; background: var(--mint); color: var(--navy); font: 800 .72rem Poppins, Arial, sans-serif; text-decoration: none; text-transform: uppercase; }
.post-contact a:hover,
.post-contact a:focus-visible { background: #78ead9; color: var(--navy); }

.post-page .post-content { padding-bottom: 3rem; }
.post-share { box-sizing: border-box; margin: 0 auto 7rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid #d6e2eb; border-radius: 1.35rem; background: #eef5f7; color: #33445b; }
.post-share-kicker { margin: 0 0 .5rem; color: var(--blue); font: 800 .67rem/1.4 Poppins, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.post-share h2 { margin: 0 0 .7rem; color: var(--navy); font: 800 clamp(1.5rem, 3vw, 2rem)/1.2 Poppins, Arial, sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.post-share > p:not(.post-share-kicker) { max-width: 39rem; line-height: 1.7; }
.post-share-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0; }
.post-share-actions button { min-height: 3rem; padding: .7rem 1.2rem; border: 1px solid var(--navy); border-radius: 999px; cursor: pointer; font: 750 .78rem/1.3 Poppins, Arial, sans-serif; }
.post-share-actions button[hidden] { display: none; }
.post-share-primary { background: var(--navy); color: var(--white); }
.post-share-copy { background: var(--white); color: var(--navy); }
.post-share-actions button:hover,
.post-share-actions button:focus-visible { border-color: var(--blue); background: var(--blue); color: var(--white); }
.post-share-platforms { display: flex; flex-wrap: wrap; gap: .65rem; }
.post-share-platforms a { display: inline-flex; min-height: 2.8rem; align-items: center; padding: .55rem 1rem; border: 1px solid #c6d5df; border-radius: 999px; background: var(--white); color: var(--navy); font: 750 .78rem/1.3 Poppins, Arial, sans-serif; text-decoration: none; }
.post-share-platforms a:hover,
.post-share-platforms a:focus-visible { border-color: var(--blue); color: var(--blue); }
.post-share .post-share-note { margin: 1.3rem 0 0; color: #5a6d7f; font-size: .85rem; }
.post-share-status:empty { display: none; }
.post-share .post-share-status { margin: 1rem 0 0; color: var(--navy); font-weight: 700; }

@media (max-width: 980px) {
  .posts-hero-grid,
  .posts-section-heading { grid-template-columns: 1fr; gap: 2rem; }
  .posts-hero-copy > p,
  .posts-section-heading > p { max-width: 48rem; }
  .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .posts-hero,
  .post-hero { min-height: 0; padding: 9.5rem 0 4rem; }
  .posts-latest { padding: 4.5rem 0 5.5rem; }
  .posts-grid { grid-template-columns: 1fr; }
  .post-reading-width { width: min(100% - 2rem, 52rem); }
  .post-content { padding: 4rem 0 5.5rem; font-size: 1rem; line-height: 1.8; }
  .post-content h2 { margin-top: 3.6rem; }
  .post-content table { display: block; overflow-x: auto; white-space: nowrap; }
  .post-content .text-indent-1 { margin-left: 1rem; }
  .post-content .text-indent-2 { margin-left: 2rem; }
  .post-content .text-indent-3 { margin-left: 3rem; }
  .post-example { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .posts-hero h1,
  .post-hero h1 { max-width: 100%; font-size: var(--xenid-public-h1); overflow-wrap: normal; word-break: normal; hyphens: none; }
  .posts-hero-copy > p { font-size: .93rem; }
  .post-card { border-radius: 1.1rem; }
  .post-featured-image { width: min(100% - 2rem, 68rem); margin-top: 2rem; border-radius: 1rem; }
  .post-content { padding-top: 3rem; }
  .post-share { margin-bottom: 5rem; border-radius: 1rem; }
  .post-share-actions button { width: 100%; }
  .post-content h2 { font-size: var(--xenid-public-h2); }
  .post-xenid-section,
  .post-contact { border-radius: 1rem; }
}
.post-content figure { margin: 2rem 0; }
.post-content figure img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: .75rem; }
.post-content figcaption { margin-top: .6rem; color: #64748b; font-size: .82rem; line-height: 1.55; text-align: center; }

/* Topic symbols replace decorative step numbering. */
.xenid-topic-icon { display: block; width: 1.45rem; height: 1.45rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xenid-topic-label { display: flex; align-items: center; gap: .7rem; }
.xenid-topic-label > span { min-width: 0; }

.iot-service-phase-grid .xenid-topic-symbol, .portal-service-phase-grid .xenid-topic-symbol { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.6rem; border: 1px solid #d7e0ec; border-radius: .8rem; background: #eef3ff; color: var(--blue); }
.booking-step-title > .xenid-topic-symbol { flex: 0 0 2.65rem; box-shadow: none; }

/* Header contact actions: one calm, responsive group with a direct WhatsApp link. */
.xenid-header-actions { display: flex; align-items: center; justify-self: end; gap: .65rem; }
.xenid-header-actions > :is(.header-cta, .shared-header-cta) { white-space: nowrap; }
.xenid-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 3.35rem; height: 3.35rem; border: 1px solid transparent; border-radius: 50%;
  background: var(--mint, #42d9c8); color: var(--navy, #07152f); text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.xenid-whatsapp svg { display: block; width: 1.65rem; height: 1.65rem; fill: currentColor; }
.xenid-whatsapp:focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 7px var(--navy, #07152f); }
@media (hover: hover) and (pointer: fine) {
  .xenid-whatsapp:hover { background: #6be7d6; transform: translateY(-2px); }
}
@media (min-width: 1161px) and (max-width: 1500px) {
  :is(.header-inner, .shared-header-inner) { gap: clamp(1rem, 2vw, 2rem); }
  :is(.desktop-nav, .shared-desktop-nav) { gap: clamp(.75rem, 1.35vw, 1.3rem); }
  :is(.desktop-nav, .shared-desktop-nav) a { font-size: clamp(.875rem, 1.15vw, 1.08rem); }
}
@media (max-width: 1160px) {
  :is(.header-inner, .shared-header-inner) { grid-template-columns: 1fr auto auto; gap: .75rem; }
  .xenid-whatsapp { width: 3rem; height: 3rem; }
  .xenid-whatsapp svg { width: 1.5rem; height: 1.5rem; }
}
@media (max-width: 560px) {
  :is(.header-inner, .shared-header-inner) { gap: .6rem; }
  :is(.brand, .shared-brand) { min-width: 0; }
  .brand img, .shared-brand .brand-logo { width: clamp(7rem, 36vw, 10.5rem); max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .xenid-whatsapp { transition: none; }
  .xenid-whatsapp:hover { transform: none; }
}

/* Compact mobile actions float together without a background bar. */
.xenid-mobile-appointment { display: none; }
.xenid-backtop-icon { display: none; }
@media (max-width: 760px) {
  body.has-mobile-appointment {
    padding-bottom: var(--xenid-mobile-bar-height, calc(76px + env(safe-area-inset-bottom, 0px)));
  }
  html:has(body.has-mobile-appointment) {
    scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  .xenid-mobile-appointment:not([hidden]) {
    position: fixed;
    z-index: 72;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    transition: opacity .25s ease, translate .25s ease, visibility .25s;
  }
  .xenid-mobile-appointment-link {
    pointer-events: auto;
    display: flex;
    flex: 0 1 auto;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--blue, #3458ff);
    color: #fff;
    font: 800 .72rem/1.35 Poppins, Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
  }
  .xenid-mobile-appointment .back-to-top {
    pointer-events: auto;
    position: static;
    display: none;
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--blue, #3458ff);
    color: #fff;
    font: 800 .6rem/1.35 Poppins, Arial, sans-serif;
    text-align: center;
    white-space: normal;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  .xenid-mobile-appointment .xenid-backtop-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .xenid-mobile-appointment .xenid-backtop-icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .xenid-mobile-appointment .back-to-top.visible { display: grid; }
  .xenid-mobile-appointment a:focus-visible { outline: 2px solid var(--mint, #43d8c7); outline-offset: 3px; }
  html.xm-intro-boot .xenid-mobile-appointment,
  html.xm-intro-active .xenid-mobile-appointment,
  .xenid-mobile-appointment.is-paused {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .xenid-mobile-appointment { transition: none !important; }
}
@media print { .xenid-mobile-appointment { display: none !important; } }

/* IoT service information without demo screens. */
.iot-content-only,
.iot-content-section > .services-detail-row,
.iot-content-section > .website-service-foundation-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.iot-content-only > .website-service-hero-copy,
.iot-content-section .services-detail-copy,
.iot-content-section .website-service-foundation-copy {
  width: 100%;
  max-width: 58rem;
}

/* The same interactive Klantflow presentation as on the homepage. */
.services-detail-visual.services-klantflow {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  border: 1px solid #d9e1ef;
  border-radius: 22px;
  overflow: hidden;
  background: #f6f7f2;
  box-shadow: 0 22px 64px rgb(7 21 47 / 10%);
}
.services-klantflow-bar {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  background: #07152f;
  color: #fff;
  font-family: Poppins, Arial, sans-serif;
}
.services-klantflow-bar strong { font-size: 1rem; font-weight: 700; }
.services-klantflow-status { display: inline-flex; align-items: center; gap: 7px; font-size: .625rem; font-weight: 700; }
.services-klantflow-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #43d8c7; }
.services-klantflow iframe { display: block; width: 100%; height: 620px; border: 0; background: #f6f7f2; }
.services-klantflow-caption { display: flex; width: 100%; box-sizing: border-box; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 12px 18px; background: #fff; border-top: 1px solid #d9e1ef; }
.services-klantflow-caption p { flex: 1 1 160px; margin: 0; color: #546780; font-size: .75rem; line-height: 1.6; }
.services-klantflow-caption a { display: inline-flex; align-items: center; min-height: 44px; color: #244cff; font: 700 .75rem/1.5 Poppins, Arial, sans-serif; text-decoration: underline; text-underline-offset: .25em; }
.services-klantflow-caption a:focus-visible { outline: 2px solid #244cff; outline-offset: 4px; }
@media (max-width: 760px) {
  .services-detail-visual.services-klantflow { width: 100%; border-radius: 18px; }
  .services-klantflow-bar { padding: 14px; gap: 10px; }
  .services-klantflow-bar strong { font-size: .9rem; }
  .services-klantflow-status { font-size: .58rem; }
  .services-klantflow iframe { height: min(520px, 60svh); min-height: 360px; }
  .services-klantflow-caption { padding: 10px 14px; }
}

/* Align the services demo with the neighbouring copy on desktop. */
@media (min-width: 981px) {
  .services-detail-visual.services-klantflow {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-self: stretch;
  }
  .services-klantflow iframe {
    height: 100%;
    min-height: 0;
  }
}

/* Retain the portrait Klantflow preview, with a little more width on desktop. */
#klantflow .work-klantflow-preview { width: min(100%, 30rem); }
@media (min-width:981px) {
  /* End the portrait preview in the gap after its first complete content card. */
  #klantflow .work-klantflow-preview img {
    height: auto;
    aspect-ratio: 65 / 86;
    object-fit: cover;
    object-position: top center;
  }
}
@media (max-width:760px) {
  #klantflow .work-klantflow-preview { width: min(100%, 25rem); }
}