/* VOXON premium v3 — art-directed refinement based on the approved visual concept.
   Loaded after premium-v2.css. Intentionally keeps CMS content editable while
   changing composition, density, imagery and product-led storytelling. */

:root{
  --v3-ink:#111a2b;
  --v3-ink-2:#202b3d;
  --v3-muted:#637084;
  --v3-blue:#2d63ea;
  --v3-blue-2:#2354cf;
  --v3-paper:#fff;
  --v3-canvas:#f7f8fa;
  --v3-warm:#f5f1e9;
  --v3-line:rgba(17,26,43,.09);
  --v3-line-strong:rgba(17,26,43,.14);
  --v3-shadow:0 22px 64px rgba(17,26,43,.10);
  --v3-shadow-soft:0 10px 30px rgba(17,26,43,.065);
  --v3-radius:20px;
  --v3-radius-lg:26px;
  --v3-shell:min(1180px,calc(100vw - 64px));
}

body{
  background:var(--v3-canvas);
  color:var(--v3-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container,.vx-shell{width:var(--v3-shell)}

.site-header{
  min-height:68px;
  background:rgba(255,255,255,.91);
  border-bottom:1px solid rgba(17,26,43,.055);
  backdrop-filter:blur(18px);
}
.header-inner{min-height:68px}
.brand img{width:104px}
.main-nav{gap:22px}
.main-nav a{font-size:12.5px;font-weight:650;letter-spacing:-.01em}
.button--header{min-height:38px;padding:0 17px;font-size:12px}

/* ---------- Global composition ---------- */
.cms-page .cms-section{padding-block:clamp(68px,7vw,106px)}
.cms-page h1{
  max-width:11ch;
  font-size:clamp(3.4rem,5.25vw,5.35rem);
  line-height:.96;
  letter-spacing:-.058em;
  text-wrap:balance;
}
.cms-page h2{
  max-width:14ch;
  font-size:clamp(2.35rem,3.75vw,3.8rem);
  line-height:1;
  letter-spacing:-.05em;
  text-wrap:balance;
}
.cms-page h3{letter-spacing:-.035em}
.cms-page p{letter-spacing:-.008em}
.cms-intro{max-width:650px;font-size:16px;line-height:1.62}
.cms-theme--warm{background:var(--v3-warm)}
.cms-theme--blue{background:linear-gradient(135deg,#2f67eb 0%,#265bd9 100%)}
.cms-theme--dark{background:#0f1a2b}

/* ---------- Header-level hero: editorial split + product proof ---------- */
.cms-hero{
  padding-top:clamp(52px,6vw,84px)!important;
  padding-bottom:clamp(70px,7vw,104px)!important;
}
.cms-hero-grid{
  grid-template-columns:minmax(0,.84fr) minmax(460px,1.16fr);
  gap:clamp(42px,5vw,72px);
}
.cms-hero .cms-copy>p{
  max-width:575px;
  margin-top:22px;
  font-size:16px;
  line-height:1.62;
}
.cms-hero .vx-actions{margin-top:26px}
.cms-hero-media{
  min-height:500px;
  border-radius:var(--v3-radius-lg);
  background:#e8ecf2;
  box-shadow:0 20px 55px rgba(17,26,43,.11);
}
.cms-hero-media>img{
  filter:saturate(.88) contrast(1.015);
}
.cms-page--home .cms-hero-media>img{object-position:52% center}
.cms-page--product .cms-hero-media>img{object-position:50% center}
.cms-page--oplossingen .cms-hero-media>img{object-position:50% 40%}
.cms-page--pilot .cms-hero-media>img{object-position:50% 45%}

.cms-hero-product-overlay{
  left:auto;
  right:-26px;
  bottom:-24px;
  width:min(300px,48%);
  transform:rotate(-1.2deg);
}
.cms-hero-product-overlay .vx-phone{
  border:1px solid rgba(17,26,43,.10);
  box-shadow:0 30px 74px rgba(17,26,43,.22);
}
.cms-page--product .cms-hero-product-overlay::after{
  content:"Conceptverslag\A S · Subjectief\A O · Objectief";
  white-space:pre;
  position:absolute;
  right:-44px;
  bottom:28px;
  width:190px;
  padding:15px 16px;
  border:1px solid rgba(17,26,43,.08);
  border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 45px rgba(17,26,43,.14);
  color:#22304a;
  font-size:11px;
  line-height:1.7;
  font-weight:650;
  transform:rotate(2.2deg);
}
.cms-hero-review-overlay{
  left:auto;
  right:-22px;
  bottom:-26px;
  width:min(410px,67%);
}
.cms-hero-route-overlay{
  left:-30px;
  right:24px;
  bottom:-30px;
}

/* ---------- Home: fewer template cards, more product narrative ---------- */
.cms-page--home>.cms-statement{
  padding-block:54px!important;
  background:#0f1a2b;
}
.cms-page--home>.cms-statement>.vx-shell{
  grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);
  gap:48px;
}
.cms-page--home>.cms-statement h2{
  max-width:17ch;
  font-size:clamp(2rem,3.3vw,3.35rem);
}
.cms-page--home>.cms-statement p{font-size:15px}

.cms-page--home>.cms-steps .cms-step-list{
  position:relative;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:44px;
  border-top:1px solid var(--v3-line);
}
.cms-page--home>.cms-steps .cms-step{
  min-height:230px;
  padding:28px 26px 24px 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.cms-page--home>.cms-steps .cms-step+ .cms-step{padding-left:26px;border-left:1px solid var(--v3-line)}
.cms-page--home>.cms-steps .cms-step>span{
  width:38px;height:38px;
  display:grid;place-items:center;
  margin-bottom:auto;
  border-radius:50%;
  background:#eef3ff;
  color:var(--v3-blue);
  font-size:10px;
}
.cms-page--home>.cms-steps .cms-step h3{font-size:18px}
.cms-page--home>.cms-steps .cms-step p{font-size:13px;line-height:1.55}
.cms-page--home>.cms-steps .cms-step:hover{transform:none;box-shadow:none}

.cms-page--home>.cms-split .cms-split-grid{
  grid-template-columns:minmax(0,.78fr) minmax(480px,1.22fr);
  gap:72px;
}
.cms-page--home .cms-media--product-context{
  min-height:430px;
  box-shadow:none;
  background:linear-gradient(145deg,#fbfaf6,#ece9e1)!important;
}
.cms-page--home>.cms-features .cms-card-grid{
  gap:10px;
}
.cms-page--home>.cms-features .cms-card{
  min-height:178px;
  padding:22px 22px 20px;
  border-top:1px solid var(--v3-line-strong);
  background:#fff;
}
.cms-page--home>.cms-features .cms-card>span{margin-bottom:26px}
.cms-page--home>.cms-features .cms-card h3{margin-top:0;font-size:17px}

/* ---------- Product: page behaves like a walkthrough, not a SaaS card grid ---------- */
.cms-page--product>.cms-statement{
  padding-block:58px!important;
}
.cms-page--product>.cms-statement>.vx-shell{
  grid-template-columns:minmax(0,1fr) auto;
  gap:40px;
  align-items:center;
}
.cms-page--product>.cms-statement h2{font-size:clamp(2.25rem,3.5vw,3.4rem);max-width:15ch}
.cms-page--product>.cms-statement p{
  padding:12px 16px;
  border-radius:999px;
  background:#eef3ff;
  color:#305fc6;
  font-size:13px;
  font-weight:700;
}

.cms-page--product>.cms-steps .cms-step-list{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:42px;
}
.cms-page--product>.cms-steps .cms-step{
  position:relative;
  display:grid;
  grid-template-columns:56px minmax(0,.72fr) minmax(250px,.55fr);
  align-items:center;
  min-height:118px;
  padding:18px 20px;
  border:1px solid var(--v3-line);
  border-radius:18px;
  background:#fff;
  box-shadow:none;
}
.cms-page--product>.cms-steps .cms-step>span{
  width:36px;height:36px;
  display:grid;place-items:center;
  margin:0;
  border-radius:50%;
  background:#f1f5ff;
}
.cms-page--product>.cms-steps .cms-step h3{font-size:17px}
.cms-page--product>.cms-steps .cms-step p{max-width:500px}
.cms-product-step-preview{
  justify-self:end;
  width:min(250px,100%);
  min-height:70px;
  display:grid;
  align-content:center;
  gap:3px;
  box-sizing:border-box;
  padding:13px 15px;
  border:1px solid rgba(17,26,43,.08);
  border-radius:13px;
  background:linear-gradient(180deg,#fbfcfe,#f4f6fa);
  color:#53617a;
  font-size:11px;
  line-height:1.38;
}
.cms-product-step-preview small{
  color:#7b8798;
  font-size:9px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.cms-product-step-preview strong{font-size:11px;letter-spacing:-.01em;color:#26344a}
.cms-product-step-preview span{font-size:10px;color:#69768a}
.cms-product-step-preview--capture{
  grid-template-columns:auto repeat(5,3px) 1fr;
  align-items:center;
  gap:5px;
}
.cms-product-step-preview--capture span{font-variant-numeric:tabular-nums}
.cms-product-step-preview--capture i{display:block;width:3px;border-radius:999px;background:var(--v3-blue);height:13px}
.cms-product-step-preview--capture i:nth-of-type(2){height:24px}
.cms-product-step-preview--capture i:nth-of-type(3){height:18px}
.cms-product-step-preview--capture i:nth-of-type(4){height:29px}
.cms-product-step-preview--capture i:nth-of-type(5){height:16px}
.cms-product-step-preview--capture strong{justify-self:end}

.cms-page--product>.cms-product-visual .cms-split-grid{
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
}
.cms-page--product>.cms-product-visual .cms-visual-frame{
  border:1px solid rgba(17,26,43,.06);
  border-radius:22px;
}
.cms-page--product>.cms-split.cms-theme--blue .cms-media--product-context{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.18);
}

/* ---------- Voor de zorg: make audience cards visual and recognisable ---------- */
.cms-page--oplossingen>.cms-hero + .cms-features .cms-card-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.cms-page--oplossingen>.cms-hero + .cms-features .cms-card{
  min-height:330px;
  overflow:hidden;
  padding:164px 20px 20px;
  background:#fff;
  border-top:1px solid var(--v3-line);
}
.cms-page--oplossingen>.cms-hero + .cms-features .cms-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:144px;
  background-size:cover;
  background-position:center;
  filter:saturate(.86) contrast(1.02);
}
.cms-page--oplossingen>.cms-hero + .cms-features .cms-card:nth-child(1)::before{background-image:url("/assets/img/voxon-caregiver-mobile-20260910.webp")}
.cms-page--oplossingen>.cms-hero + .cms-features .cms-card:nth-child(2)::before{background-image:url("/assets/img/voxon-caregiver-nurse-review-20260910.webp")}
.cms-page--oplossingen>.cms-hero + .cms-features .cms-card:nth-child(3)::before{background-image:url("/assets/img/voxon-nurse-workspace.webp")}
.cms-page--oplossingen>.cms-hero + .cms-features .cms-card:nth-child(4)::before{background-image:url("/assets/img/samenwerken_aan_betere_zorg.webp")}
.cms-page--oplossingen>.cms-hero + .cms-features .cms-card>span{
  position:absolute;
  top:14px;left:14px;
  z-index:2;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  color:#315fc6;
}
.cms-page--oplossingen>.cms-hero + .cms-features .cms-card h3{margin:0 0 9px;font-size:17px}
.cms-page--oplossingen>.cms-hero + .cms-features .cms-card p{font-size:12.5px;line-height:1.52}
.cms-page--oplossingen>.cms-split .cms-media{min-height:400px}
.cms-page--oplossingen>.cms-features.cms-theme--dark .cms-card{min-height:160px}

/* ---------- Safety: turn it into an understandable technical story ---------- */
.cms-page--veiligheid>.cms-steps .cms-step-list{
  position:relative;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  margin-top:46px;
}
.cms-page--veiligheid>.cms-steps .cms-step{
  min-height:210px;
  padding:24px 22px;
  border-radius:0;
  border-width:1px 0 1px 1px;
  box-shadow:none;
}
.cms-page--veiligheid>.cms-steps .cms-step:first-child{border-radius:18px 0 0 18px}
.cms-page--veiligheid>.cms-steps .cms-step:last-child{border-right-width:1px;border-radius:0 18px 18px 0}
.cms-page--veiligheid>.cms-steps .cms-step>span{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:#eef3ff;margin-bottom:28px;
}
.cms-page--veiligheid>.cms-product-visual .cms-visual-frame{background:#fff}
.cms-page--veiligheid>.cms-features.cms-theme--dark .cms-card-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
}
.cms-page--veiligheid>.cms-features.cms-theme--dark .cms-card{
  min-height:174px;
  padding:20px;
  background:rgba(255,255,255,.045);
}
.cms-page--veiligheid>.cms-split .cms-media--data-route{
  min-height:360px;
}

/* ---------- Pilot: compact journey and clear decision blocks ---------- */
.cms-page--pilot>.cms-steps .cms-step-list{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:44px;
  border-top:1px solid var(--v3-line);
}
.cms-page--pilot>.cms-steps .cms-step{
  min-height:200px;
  padding:28px 24px 20px 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.cms-page--pilot>.cms-steps .cms-step+ .cms-step{padding-left:24px;border-left:1px solid var(--v3-line)}
.cms-page--pilot>.cms-steps .cms-step>span{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;background:#eef3ff;
}
.cms-page--pilot>.cms-features.cms-theme--dark .cms-card{min-height:160px}

/* ---------- FAQ: editorial utility page, not oversized marketing page ---------- */
.cms-page--veelgestelde-vragen .cms-hero{
  padding-top:58px!important;
  padding-bottom:54px!important;
}
.cms-page--veelgestelde-vragen .cms-hero h1{
  font-size:clamp(3rem,4.5vw,4.6rem);
}
.cms-page--veelgestelde-vragen .vx-faq-grid{
  grid-template-columns:minmax(220px,.35fr) minmax(0,1fr);
  gap:72px;
}
.cms-page--veelgestelde-vragen .vx-faq-item{
  margin-bottom:8px;
  border:1px solid var(--v3-line);
  box-shadow:none;
}
.cms-page--veelgestelde-vragen .vx-faq-item summary{font-size:14px;font-weight:680}
.cms-page--veelgestelde-vragen .cms-booking-card{
  position:relative;
  overflow:hidden;
  grid-template-columns:minmax(0,1fr) auto 250px;
}
.cms-page--veelgestelde-vragen .cms-booking-card::after{
  content:"";
  width:250px;
  align-self:stretch;
  min-height:170px;
  margin:-38px -42px -38px 0;
  background:url("/assets/img/voxon-caregiver-mobile-20260910.webp") center/cover no-repeat;
}

/* ---------- Booking + footer ---------- */
.cms-booking{padding-block:58px!important}
.cms-booking-card{
  padding:34px 38px;
  border-radius:22px;
  box-shadow:0 12px 34px rgba(17,26,43,.06);
}
.cms-booking-card h2{font-size:clamp(2.1rem,3.2vw,3.15rem)}
.site-footer{padding-top:66px}
.footer-nav{padding:36px 0}

/* ---------- Mobile is recomposed, not shrunk ---------- */
@media (max-width:1050px){
  .cms-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(390px,1.1fr)}
  .cms-page--veiligheid>.cms-features.cms-theme--dark .cms-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cms-page--oplossingen>.cms-hero + .cms-features .cms-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--v3-shell:min(100% - 44px,1180px)}
  .cms-hero-grid{grid-template-columns:1fr}
  .cms-hero-media{min-height:460px}
  .cms-page--home>.cms-split .cms-split-grid,
  .cms-page--product>.cms-product-visual .cms-split-grid{grid-template-columns:1fr}
  .cms-page--home>.cms-steps .cms-step-list,
  .cms-page--veiligheid>.cms-steps .cms-step-list,
  .cms-page--pilot>.cms-steps .cms-step-list{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
  .cms-page--home>.cms-steps .cms-step,
  .cms-page--pilot>.cms-steps .cms-step{border:1px solid var(--v3-line)!important;padding:22px!important}
  .cms-page--veiligheid>.cms-steps .cms-step{border:1px solid var(--v3-line);border-radius:16px!important}
  .cms-page--product>.cms-steps .cms-step{grid-template-columns:48px 1fr}
  .cms-product-step-preview{grid-column:2;margin-top:12px;justify-self:stretch;width:100%}
  .cms-page--veelgestelde-vragen .vx-faq-grid{grid-template-columns:1fr;gap:28px}
  .cms-page--veelgestelde-vragen .cms-booking-card{grid-template-columns:1fr}
  .cms-page--veelgestelde-vragen .cms-booking-card::after{display:none}
}
@media (max-width:600px){
  :root{--v3-shell:min(100% - 40px,1180px)}
  .site-header,.header-inner{min-height:62px}
  .brand img{width:96px}
  .cms-page .cms-section{padding-block:62px}
  .cms-page h1{font-size:clamp(2.6rem,12vw,3.55rem);max-width:12ch}
  .cms-page h2{font-size:clamp(2rem,9vw,2.7rem);max-width:16ch}
  .cms-hero{padding-top:42px!important;padding-bottom:68px!important}
  .cms-hero-media{min-height:380px;border-radius:20px}
  .cms-hero-product-overlay{right:8px;bottom:-20px;width:58%;transform:none}
  .cms-page--product .cms-hero-product-overlay::after{display:none}
  .cms-page--home>.cms-statement>.vx-shell,
  .cms-page--product>.cms-statement>.vx-shell{grid-template-columns:1fr;gap:20px}
  .cms-page--home>.cms-steps .cms-step-list,
  .cms-page--veiligheid>.cms-steps .cms-step-list,
  .cms-page--pilot>.cms-steps .cms-step-list,
  .cms-page--oplossingen>.cms-hero + .cms-features .cms-card-grid,
  .cms-page--veiligheid>.cms-features.cms-theme--dark .cms-card-grid{grid-template-columns:1fr}
  .cms-page--home>.cms-steps .cms-step,
  .cms-page--pilot>.cms-steps .cms-step{min-height:0}
  .cms-page--oplossingen>.cms-hero + .cms-features .cms-card{min-height:305px}
  .cms-page--product>.cms-steps .cms-step{grid-template-columns:42px 1fr;padding:17px}
  .cms-product-step-preview{grid-column:1/-1}
  .cms-page--veelgestelde-vragen .cms-hero{padding-top:42px!important}
  .cms-booking-card{padding:26px 22px}
}