/* =========================================================
   BrightClub — shared design system
   One stylesheet for the public site, registration and portal.
   ---------------------------------------------------------
   FONTS: swap the two families below for the exact fonts
   used on brightclub.info (set in WordPress > Salient >
   Typography). Everything else inherits from these.
   ========================================================= */

body.prototype-site {
  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;

  /* Brand colours (taken from the current site theme) */
  --sun: #fec624;      /* accent yellow — primary action */
  --sun-deep: #e9ad00;
  --sky: #309bc8;      /* blue — links, info */
  --sea: #21ab97;      /* teal — success, "confirmed" */
  --coral: #f0644f;    /* scarcity, errors */
  --ink: #13294b;      /* navy — headings, footer */
  --text: #212121;
  --muted: #5b6b7a;
  --paper: #ffffff;
  --mist: #eef5f9;     /* quiet section background */
  --line: #d9e4ec;

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 8px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
}

body.prototype-site *, body.prototype-site *::before, body.prototype-site *::after { box-sizing: border-box; }
body.prototype-site { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.prototype-site {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
}
body.prototype-site img { max-width: 100%; display: block; }
body.prototype-site a { color: var(--sky); }
body.prototype-site button { font: inherit; }

body.prototype-site h1, body.prototype-site h2, body.prototype-site h3, body.prototype-site h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
}
body.prototype-site h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; }
body.prototype-site h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; }
body.prototype-site h3 { font-size: 1.2rem; font-weight: 700; }
body.prototype-site h4 { font-size: 1rem; font-weight: 600; }
body.prototype-site p { margin: 0 0 1em; max-width: 68ch; }
body.prototype-site .lead { font-size: 1.15rem; color: var(--muted); }
body.prototype-site .muted { color: var(--muted); }
body.prototype-site .small { font-size: .875rem; }

body.prototype-site :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
body.prototype-site .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body.prototype-site .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
body.prototype-site .section { padding: clamp(56px, 8vw, 96px) 0; }
body.prototype-site .section--mist { background: var(--mist); }
body.prototype-site .section--ink { background: var(--ink); color: #dfe8f1; }
body.prototype-site .section--ink h2, body.prototype-site .section--ink h3 { color: #fff; }
body.prototype-site .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
body.prototype-site .section-head p { margin: 0; }

/* ---------- Buttons ---------- */
body.prototype-site .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
body.prototype-site .btn--sun { background: var(--sun); color: var(--ink); }
body.prototype-site .btn--sun:hover { background: var(--sun-deep); }
body.prototype-site .btn--ink { background: var(--ink); color: #fff; }
body.prototype-site .btn--ink:hover { background: #1d3a66; }
body.prototype-site .btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
body.prototype-site .btn--line:hover { background: var(--ink); color: #fff; }
body.prototype-site .btn--ghost { color: var(--ink); background: transparent; padding-left: 8px; padding-right: 8px; }
body.prototype-site .btn--ghost:hover { text-decoration: underline; }
body.prototype-site .btn--sm { padding: 8px 16px; font-size: .9rem; }
body.prototype-site .btn--block { width: 100%; }
body.prototype-site .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Header ---------- */
body.prototype-site .topbar { background: var(--ink); color: #cfdbe8; font-size: .85rem; }
body.prototype-site .topbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 7px; padding-bottom: 7px; }
body.prototype-site .topbar a { color: #fff; text-decoration: none; }
body.prototype-site .topbar span + span { margin-left: 18px; }
@media (max-width: 700px) { body.prototype-site .topbar .hide-sm { display: none; } }

body.prototype-site .header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
body.prototype-site .header .wrap { display: flex; align-items: center; gap: 24px; height: 76px; }
body.prototype-site .logo img { height: 46px; width: auto; }
body.prototype-site .nav { display: flex; gap: 4px; margin-left: auto; }
  body.prototype-site .nav a { white-space: nowrap;
  font-family: var(--font-head); font-weight: 500; color: var(--ink);
  text-decoration: none; padding: 8px 14px; border-radius: 999px;
}
body.prototype-site .nav a:hover { background: var(--mist); }
body.prototype-site .nav a[aria-current="page"] { background: var(--mist); font-weight: 700; }
body.prototype-site .header-actions { display: flex; gap: 8px; align-items: center; }
body.prototype-site .menu-btn { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
@media (max-width: 1140px) {
  body.prototype-site .nav { display: none; }
  body.prototype-site .header-actions .btn--line { display: none; }
  body.prototype-site .menu-btn { display: block; margin-left: auto; }
  body.prototype-site .header-actions { order: 3; }
  body.prototype-site .nav.open {
    display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0;
    background: #fff; padding: 12px var(--gutter) 20px; border-bottom: 1px solid var(--line);
  }
  body.prototype-site .nav.open a { padding: 12px 8px; font-size: 1.05rem; }
  body.prototype-site .nav.open .nav-portal { display: block; }
}
body.prototype-site .nav-portal { display: none; }
@media (max-width: 480px) { body.prototype-site .header-actions .btn { padding: 9px 14px; font-size: .9rem; } body.prototype-site .logo img { height: 38px; } }

/* ---------- Footer ---------- */
body.prototype-site .footer { background: var(--ink); color: #b9c8d8; padding: 64px 0 28px; font-size: .95rem; }
body.prototype-site .footer a { color: #fff; text-decoration: none; }
body.prototype-site .footer a:hover { text-decoration: underline; }
body.prototype-site .footer h4 { color: #fff; margin-bottom: 14px; }
body.prototype-site .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
body.prototype-site .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
body.prototype-site .footer-logo { background: #fff; display: inline-block; padding: 10px 14px; border-radius: var(--r-md); margin-bottom: 16px; }
body.prototype-site .footer-logo img { height: 40px; }
body.prototype-site .footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 48px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .85rem; }
@media (max-width: 860px) { body.prototype-site .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { body.prototype-site .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Tags & chips ---------- */
body.prototype-site .tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; background: var(--mist); color: var(--ink);
}
body.prototype-site .tag--sea { background: #dcf3ef; color: #127466; }
body.prototype-site .tag--sun { background: #fff3c9; color: #7a5a00; }
body.prototype-site .tag--coral { background: #fde3df; color: #a8321f; }
body.prototype-site .tag--sky { background: #dceffa; color: #1b6b8f; }

body.prototype-site .chips { display: flex; gap: 8px; flex-wrap: wrap; }
body.prototype-site .chip {
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .92rem;
}
body.prototype-site .chip:hover { border-color: var(--ink); }
body.prototype-site .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Media / video ---------- */
body.prototype-site .video-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden;
  border-radius: var(--r-md); background: var(--ink) center/cover no-repeat; border: 0; padding: 0; cursor: pointer;
}
body.prototype-site .video-thumb img { width: 100%; height: 100%; object-fit: cover; }
body.prototype-site .video-thumb .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; background: var(--sun);
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .15s;
}
body.prototype-site .video-thumb:hover .play { transform: translate(-50%, -50%) scale(1.08); }
body.prototype-site .video-thumb .play svg { width: 24px; height: 24px; margin-left: 4px; fill: var(--ink); }
body.prototype-site .video-thumb .dur {
  position: absolute; left: 12px; bottom: 12px; background: rgba(19,41,75,.85); color: #fff;
  font-size: .8rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}

/* ---------- Modal ---------- */
body.prototype-site .modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(10,22,40,.75); }
body.prototype-site .modal.open { display: flex; }
body.prototype-site .modal-box { background: #fff; border-radius: var(--r-lg); width: min(960px, 100%); max-height: 92vh; overflow: auto; position: relative; }
body.prototype-site .modal-box--video { background: #000; overflow: hidden; }
body.prototype-site .modal-box--video iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
body.prototype-site .modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: #fff; color: var(--ink); cursor: pointer; font-size: 1.4rem; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ---------- Forms ---------- */
body.prototype-site .field { display: grid; gap: 6px; margin-bottom: 16px; }
body.prototype-site .field label { font-weight: 600; color: var(--ink); font-size: .95rem; }
body.prototype-site .field .hint { font-size: .85rem; color: var(--muted); }
body.prototype-site .input, body.prototype-site select.input, body.prototype-site textarea.input {
  width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--text);
}
body.prototype-site .input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(48,155,200,.2); }
body.prototype-site .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) { body.prototype-site .grid-2 { grid-template-columns: 1fr; } }
body.prototype-site .check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
body.prototype-site .check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); }

/* ---------- Panels ---------- */
body.prototype-site .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); }
body.prototype-site .panel--mist { background: var(--mist); border-color: transparent; }

/* ---------- Page hero (inner pages) ---------- */
body.prototype-site .page-hero { background: var(--mist); padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); }
body.prototype-site .page-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: .3em; }
body.prototype-site .crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 14px; }
body.prototype-site .crumbs a { color: var(--muted); }

/* ---------- Toast ---------- */
body.prototype-site .toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120px); z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600;
  transition: transform .25s ease, visibility .25s; box-shadow: 0 8px 24px rgba(0,0,0,.25); visibility: hidden;
}
body.prototype-site .toast.show { transform: translateX(-50%) translateY(0); visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  body.prototype-site *, body.prototype-site *::before, body.prototype-site *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Vertical name badge (54 × 86 mm) ---------- */
body.prototype-site .badge-v {
  width: 240px; aspect-ratio: 54 / 86; display: flex; flex-direction: column; background: #fff;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 30px -12px rgba(19,41,75,.35);
  break-inside: avoid; page-break-inside: avoid; margin: 0 auto;
}
body.prototype-site .badge-v-top { background: var(--ink); padding: 14px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
body.prototype-site .badge-v-slot { width: 46px; height: 8px; border-radius: 999px; background: var(--mist); opacity: .9; }
body.prototype-site .badge-v-logo { background: #fff; border-radius: 8px; padding: 5px 10px; }
body.prototype-site .badge-v-logo img { height: 26px; }
body.prototype-site .badge-v-program { color: var(--sun); font-family: var(--font-head); font-weight: 700; font-size: .82rem; }
body.prototype-site .badge-v-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 14px 10px; }
body.prototype-site .badge-v-first { font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 2rem; line-height: 1.05; word-break: break-word; }
body.prototype-site .badge-v-last { color: var(--muted); font-size: .95rem; margin-bottom: 10px; }
body.prototype-site .badge-v-course { font-weight: 700; color: var(--ink); font-size: .8rem; line-height: 1.35; }
body.prototype-site .badge-v-time { font-size: .76rem; color: var(--muted); margin-top: 2px; }
body.prototype-site .badge-v-qr { margin-top: auto; padding-top: 10px; }
body.prototype-site .badge-v-qr .qr { width: 92px; height: 92px; }
body.prototype-site .badge-v-ref { font-size: .7rem; color: var(--muted); letter-spacing: .04em; margin-top: 4px; }
body.prototype-site .badge-v-strip { height: 12px; background: linear-gradient(90deg, var(--sun) 0 25%, var(--sky) 25% 50%, var(--sea) 50% 75%, var(--coral) 75%); }
body.prototype-site .qr { display: grid; grid-template-columns: repeat(11, 1fr); }
body.prototype-site .qr i { background: var(--ink); }
body.prototype-site .qr i.o { background: transparent; }
body.prototype-site .badge-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; justify-items: center; }
@media print {
  body.prototype-site .badge-v { width: 54mm; height: 86mm; aspect-ratio: auto; box-shadow: none; border: .2mm dashed #999; border-radius: 3mm; }
  body.prototype-site .badge-v-first { font-size: 20pt; }
  body.prototype-site .badge-sheet { grid-template-columns: repeat(3, 54mm); gap: 6mm; justify-content: center; }
}

/* ---------- Achievement medal ---------- */
body.prototype-site .medal {
  --s: 56px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--sun); box-shadow: inset 0 0 0 calc(var(--s) * .07) rgba(255,255,255,.55), 0 0 0 calc(var(--s) * .05) var(--sun);
}
body.prototype-site .medal svg { width: 52%; height: 52%; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.prototype-site .medal--sky { background: var(--sky); box-shadow: inset 0 0 0 calc(var(--s) * .07) rgba(255,255,255,.4), 0 0 0 calc(var(--s) * .05) var(--sky); }
body.prototype-site .medal--sea { background: var(--sea); box-shadow: inset 0 0 0 calc(var(--s) * .07) rgba(255,255,255,.4), 0 0 0 calc(var(--s) * .05) var(--sea); }
body.prototype-site .medal--coral { background: var(--coral); box-shadow: inset 0 0 0 calc(var(--s) * .07) rgba(255,255,255,.4), 0 0 0 calc(var(--s) * .05) var(--coral); }
body.prototype-site .medal--ink { background: var(--ink); box-shadow: inset 0 0 0 calc(var(--s) * .07) rgba(255,255,255,.25), 0 0 0 calc(var(--s) * .05) var(--ink); }
body.prototype-site .medal--sky svg, body.prototype-site .medal--sea svg, body.prototype-site .medal--coral svg, body.prototype-site .medal--ink svg { stroke: #fff; }
body.prototype-site .medal.locked { background: var(--mist); box-shadow: inset 0 0 0 2px var(--line); }
body.prototype-site .medal.locked svg { stroke: #a9b8c6; }

/* ---------- Form dialog ---------- */
body.prototype-site .modal-box--form { width: min(560px, 100%); }
body.prototype-site .modal-pad { padding: 28px clamp(20px, 4vw, 32px) 28px; }
body.prototype-site .modal-pad h2 { font-size: 1.4rem; padding-right: 40px; }
body.prototype-site .dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }

/* ---------- Photo grid (portal, admin) ---------- */
body.prototype-site .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
body.prototype-site .photo-grid figure { margin: 0; position: relative; }
body.prototype-site .photo-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-md); background: var(--mist); }
body.prototype-site .photo-grid figcaption { font-size: .85rem; color: var(--muted); margin-top: 6px; line-height: 1.35; }
body.prototype-site .photo-grid figcaption b { color: var(--ink); display: block; font-weight: 600; }
body.prototype-site .dropzone {
  border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 28px; text-align: center; background: #fff; cursor: pointer;
  display: block; color: var(--muted);
}
body.prototype-site .dropzone:hover, body.prototype-site .dropzone.over { border-color: var(--sky); background: #f4fafd; }
body.prototype-site .dropzone b { color: var(--ink); display: block; font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 4px; }
body.prototype-site .dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- Event date tile ---------- */
body.prototype-site .date-tile { background: #fff; border-radius: var(--r-md); text-align: center; padding: 8px 12px; min-width: 64px; font-family: var(--font-head); color: var(--ink); line-height: 1.1; }
body.prototype-site .date-tile b { display: block; font-size: 1.6rem; }
body.prototype-site .date-tile span { font-size: .8rem; }

/* ---------- Award picker (staff) ---------- */
body.prototype-site .award-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
body.prototype-site .award-pick label { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .8rem; font-weight: 600; color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--r-md); padding: 10px 6px; cursor: pointer; line-height: 1.25; }
body.prototype-site .award-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.prototype-site .award-pick label:has(input:checked) { border-color: var(--sea); background: #f2fbf9; }
body.prototype-site .award-pick label:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }

/* =========================================================
   Bright Skills Academy theme
   Built on the shared BrightClub design system
   (../brightclub/assets/styles.css): same components, same
   fonts, Bright Skills colours. Load this file after it.
   ========================================================= */
body.prototype-site {
  --sun: #ffc725;      /* Bright Skills accent */
  --sun-deep: #f0b400;
  --sky: #369bc7;
  --sea: #2baa97;
  --coral: #ef4f73;    /* from the site's pink→green gradient */
  --ink: #414042;      /* Bright Skills charcoal */
  --night: #2e2d30;    /* dark sections */
  --text: #2b2a2c;
  --muted: #66676b;
  --mist: #f3f5f6;
  --line: #e1e4e7;
}

/* ---------- Brand bar linking the two sites ---------- */
body.prototype-site .brandbar { background: var(--night); color: #c9cbd0; font-size: .85rem; }
body.prototype-site .brandbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 7px; padding-bottom: 7px; }
body.prototype-site .brandbar nav { display: flex; gap: 4px; }
body.prototype-site .brandbar nav a { color: #c9cbd0; text-decoration: none; padding: 4px 12px; border-radius: 999px; }
body.prototype-site .brandbar nav a[aria-current="true"] { background: var(--sun); color: var(--night); font-weight: 600; }
body.prototype-site .brandbar nav a:hover:not([aria-current="true"]) { color: #fff; }
body.prototype-site .brandbar .contact a { color: #fff; text-decoration: none; margin-left: 16px; }
@media (max-width: 700px) { body.prototype-site .brandbar .contact { display: none; } }

body.prototype-site .header .logo img { height: 50px; }
body.prototype-site .section--night { background: var(--night); color: #d9dbdf; }
body.prototype-site .section--night h2, body.prototype-site .section--night h3 { color: #fff; }

/* ---------- Program colour chips ---------- */
body.prototype-site .dot-sun, body.prototype-site .dot-coral, body.prototype-site .dot-sky, body.prototype-site .dot-sea { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
body.prototype-site .dot-sun { background: var(--sun); } body.prototype-site .dot-coral { background: var(--coral); } body.prototype-site .dot-sky { background: var(--sky); } body.prototype-site .dot-sea { background: var(--sea); }
body.prototype-site .bar-sun { border-top: 6px solid var(--sun); } body.prototype-site .bar-coral { border-top: 6px solid var(--coral); } body.prototype-site .bar-sky { border-top: 6px solid var(--sky); } body.prototype-site .bar-sea { border-top: 6px solid var(--sea); }

/* ---------- Page hero variant ---------- */
body.prototype-site .page-hero { background: var(--mist); }
body.prototype-site .page-hero.has-img { position: relative; color: #fff; background: var(--night) center/cover; padding: clamp(64px, 10vw, 120px) 0 clamp(48px, 6vw, 72px); isolation: isolate; }
body.prototype-site .page-hero.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(46,45,48,.92) 0%, rgba(46,45,48,.6) 60%, rgba(46,45,48,.25) 100%); z-index: -1; }
body.prototype-site .page-hero.has-img h1, body.prototype-site .page-hero.has-img .crumbs a, body.prototype-site .page-hero.has-img .crumbs { color: #fff; }
body.prototype-site .page-hero.has-img .lead { color: #e4e5e8; }

/* ---------- Package cards ---------- */
body.prototype-site .pkgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.prototype-site .pkg { background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); padding: 24px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; text-align: left; cursor: pointer; font: inherit; color: inherit; }
body.prototype-site .pkg:hover { border-color: var(--ink); }
body.prototype-site .pkg[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
body.prototype-site .pkg[aria-pressed="true"] h3, body.prototype-site .pkg[aria-pressed="true"] .pkg-price { color: #fff; }
body.prototype-site .pkg[aria-pressed="true"] .muted { color: #cfd1d5; }
body.prototype-site .pkg h3 { margin: 0; font-size: 1.1rem; }
body.prototype-site .pkg-price { font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: var(--ink); line-height: 1.1; }
body.prototype-site .pkg-price small { font-size: .9rem; font-weight: 500; font-family: var(--font-body); }
body.prototype-site .pkg .tag { position: absolute; top: -12px; right: 16px; }
@media (max-width: 900px) { body.prototype-site .pkgs { grid-template-columns: 1fr 1fr; } }

body.prototype-site .day-pick { display: flex; gap: 8px; flex-wrap: wrap; }
body.prototype-site .day-pick label { cursor: pointer; }
body.prototype-site .day-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.prototype-site .day-pick span { display: grid; place-items: center; min-width: 64px; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--r-md); font-weight: 700; color: var(--ink); background: #fff; }
body.prototype-site .day-pick input:checked + span { background: var(--sun); border-color: var(--sun); }
body.prototype-site .day-pick input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
body.prototype-site .day-pick input:disabled + span { opacity: .4; cursor: not-allowed; }


  /* ---------- Hero with video and live day timeline ---------- */
  body.prototype-site[data-prototype-page="home"] .hero { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
  body.prototype-site[data-prototype-page="home"] .hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
  body.prototype-site[data-prototype-page="home"] .hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 11ch; }
  body.prototype-site[data-prototype-page="home"] .hero .lead { max-width: 44ch; margin-bottom: 28px; }
  body.prototype-site[data-prototype-page="home"] .when { display: inline-flex; gap: 10px; align-items: center; background: var(--mist); border-radius: 999px; padding: 6px 14px 6px 6px; font-weight: 600; color: var(--ink); font-size: .92rem; margin-bottom: 20px; }
  body.prototype-site[data-prototype-page="home"] .when b { background: var(--sun); border-radius: 999px; padding: 4px 10px; font-size: .85rem; white-space: nowrap; }
  body.prototype-site[data-prototype-page="home"] .ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

  body.prototype-site[data-prototype-page="home"] .stage { position: relative; padding-bottom: 72px; }
  body.prototype-site[data-prototype-page="home"] .frame { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--night); }
  body.prototype-site[data-prototype-page="home"] .frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
  body.prototype-site[data-prototype-page="home"] .frame-ctrl { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(46,45,48,.7); color: #fff; cursor: pointer; display: grid; place-items: center; }
  body.prototype-site[data-prototype-page="home"] .frame-ctrl svg { width: 18px; height: 18px; fill: #fff; }
  body.prototype-site[data-prototype-page="home"] .day-card {
    position: absolute; left: -28px; right: 48px; bottom: 0; background: #fff; border-radius: var(--r-lg);
    box-shadow: 0 24px 60px -24px rgba(46,45,48,.45); padding: 18px 20px 16px;
  }
  body.prototype-site[data-prototype-page="home"] .day-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 12px; flex-wrap: wrap; }
  body.prototype-site[data-prototype-page="home"] .day-card-head h2 { font-size: 1.05rem; margin: 0; }
  body.prototype-site[data-prototype-page="home"] .now { font-size: .85rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
  body.prototype-site[data-prototype-page="home"] .now i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  body.prototype-site[data-prototype-page="home"] .now.live i { background: var(--sea); box-shadow: 0 0 0 4px rgba(43,170,151,.2); }
  body.prototype-site[data-prototype-page="home"] .now.live { color: #1c7f70; }
  body.prototype-site[data-prototype-page="home"] .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  body.prototype-site[data-prototype-page="home"] .stp { border-top: 4px solid var(--line); padding-top: 10px; }
  body.prototype-site[data-prototype-page="home"] .stp time { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: .95rem; }
  body.prototype-site[data-prototype-page="home"] .stp b { display: block; font-size: .9rem; color: var(--ink); line-height: 1.3; margin: 2px 0; }
  body.prototype-site[data-prototype-page="home"] .stp span { font-size: .8rem; color: var(--muted); line-height: 1.4; display: block; }
  body.prototype-site[data-prototype-page="home"] .stp.active { border-color: var(--sun); }
  body.prototype-site[data-prototype-page="home"] .stp.done { border-color: var(--ink); }
  @media (prefers-reduced-motion: no-preference) {
    body.prototype-site[data-prototype-page="home"] .stp { opacity: 0; transform: translateY(8px); animation: stepIn .5s ease forwards; }
    body.prototype-site[data-prototype-page="home"] .stp:nth-child(2) { animation-delay: .15s; } body.prototype-site[data-prototype-page="home"] .stp:nth-child(3) { animation-delay: .3s; }
    @keyframes stepIn { to { opacity: 1; transform: none; } }
  }
  @media (max-width: 960px) {
    body.prototype-site[data-prototype-page="home"] .hero-grid { grid-template-columns: 1fr; }
    body.prototype-site[data-prototype-page="home"] .day-card { left: 12px; right: 12px; }
    body.prototype-site[data-prototype-page="home"] .stage { padding-bottom: 150px; }
  }
  @media (max-width: 560px) { body.prototype-site[data-prototype-page="home"] .steps { grid-template-columns: 1fr; } body.prototype-site[data-prototype-page="home"] .stage { padding-bottom: 0; } body.prototype-site[data-prototype-page="home"] .day-card { position: relative; left: 0; right: 0; margin-top: -40px; margin-left: 12px; margin-right: 12px; } }

  /* ---------- Programs ---------- */
  body.prototype-site[data-prototype-page="home"] .progs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  body.prototype-site[data-prototype-page="home"] .prog { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--line); }
  body.prototype-site[data-prototype-page="home"] .prog-img { position: relative; aspect-ratio: 4/3; background: var(--mist); }
  body.prototype-site[data-prototype-page="home"] .prog-img img { width: 100%; height: 100%; object-fit: cover; }
  body.prototype-site[data-prototype-page="home"] .prog-img .icon { position: absolute; left: 16px; bottom: -22px; width: 56px; height: 56px; border-radius: 16px; background: #fff; padding: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
  body.prototype-site[data-prototype-page="home"] .prog-body { padding: 32px 20px 22px; display: flex; flex-direction: column; flex: 1; }
  body.prototype-site[data-prototype-page="home"] .prog-body small { font-weight: 600; color: var(--muted); }
  body.prototype-site[data-prototype-page="home"] .prog-body h3 { margin: 4px 0 8px; font-size: 1.25rem; }
  body.prototype-site[data-prototype-page="home"] .prog-body p { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }
  body.prototype-site[data-prototype-page="home"] .prog-body .go { margin-top: auto; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
  body.prototype-site[data-prototype-page="home"] .prog:hover .go { text-decoration-color: var(--sun); }
  @media (max-width: 1000px) { body.prototype-site[data-prototype-page="home"] .progs { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { body.prototype-site[data-prototype-page="home"] .progs { grid-template-columns: 1fr; } }

  /* ---------- Packages teaser ---------- */
  body.prototype-site[data-prototype-page="home"] .pk-split { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
  body.prototype-site[data-prototype-page="home"] .pk-split ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 8px; }
  body.prototype-site[data-prototype-page="home"] .pk-split li { padding-left: 28px; position: relative; }
  body.prototype-site[data-prototype-page="home"] .pk-split li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--sun); }
  body.prototype-site[data-prototype-page="home"] .pkg { cursor: default; }
  @media (max-width: 900px) { body.prototype-site[data-prototype-page="home"] .pk-split { grid-template-columns: 1fr; } }

  /* ---------- Workshops ---------- */
  body.prototype-site[data-prototype-page="home"] .wks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  body.prototype-site[data-prototype-page="home"] .wk img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); background: #3b3a3e; }
  body.prototype-site[data-prototype-page="home"] .wk small { display: block; margin-top: 14px; font-weight: 600; color: var(--sun); }
  body.prototype-site[data-prototype-page="home"] .wk h3 { margin: 2px 0 6px; font-size: 1.15rem; }
  body.prototype-site[data-prototype-page="home"] .wk p { color: #c9cbd0; font-size: .93rem; margin: 0; }
  body.prototype-site[data-prototype-page="home"] .rec { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px; align-items: center; }
  body.prototype-site[data-prototype-page="home"] .rec span.tag { background: rgba(255,255,255,.1); color: #fff; padding: 8px 14px; font-size: .9rem; }
  @media (max-width: 1000px) { body.prototype-site[data-prototype-page="home"] .wks { grid-template-columns: 1fr 1fr; } }

  /* ---------- Videos ---------- */
  body.prototype-site[data-prototype-page="home"] .vids { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
  body.prototype-site[data-prototype-page="home"] .vids .side { display: grid; gap: 20px; }
  body.prototype-site[data-prototype-page="home"] .vids h3 { font-size: 1rem; margin: 10px 0 0; }
  body.prototype-site[data-prototype-page="home"] .vids .big .video-thumb .play { width: 84px; height: 84px; }
  @media (max-width: 800px) { body.prototype-site[data-prototype-page="home"] .vids { grid-template-columns: 1fr; } }

  /* ---------- Events + posts ---------- */
  body.prototype-site[data-prototype-page="home"] .two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
  body.prototype-site[data-prototype-page="home"] .ev { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; align-items: center; }
  body.prototype-site[data-prototype-page="home"] .ev .date-tile { background: var(--sun); }
  body.prototype-site[data-prototype-page="home"] .ev h3 { font-size: 1.05rem; margin: 0 0 2px; }
  body.prototype-site[data-prototype-page="home"] .ev p { margin: 0; color: var(--muted); font-size: .9rem; }
  body.prototype-site[data-prototype-page="home"] .ev:hover h3, body.prototype-site[data-prototype-page="home"] .po:hover h3 { text-decoration: underline; }
  body.prototype-site[data-prototype-page="home"] .po { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; align-items: center; }
  body.prototype-site[data-prototype-page="home"] .po img { width: 120px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-md); background: var(--mist); }
  body.prototype-site[data-prototype-page="home"] .po small { color: var(--sky); font-weight: 600; }
  body.prototype-site[data-prototype-page="home"] .po h3 { font-size: 1rem; margin: 2px 0 0; }
  @media (max-width: 860px) { body.prototype-site[data-prototype-page="home"] .two { grid-template-columns: 1fr; } }

  /* ---------- CTA + sister brand ---------- */
  body.prototype-site[data-prototype-page="home"] .cta { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; background: var(--sun); border-radius: 28px; padding: clamp(28px, 5vw, 56px); }
  body.prototype-site[data-prototype-page="home"] .cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
  body.prototype-site[data-prototype-page="home"] .cta p { color: #4a3d00; }
  body.prototype-site[data-prototype-page="home"] .cta .book { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: var(--r-lg); padding: 14px; text-decoration: none; color: inherit; }
  body.prototype-site[data-prototype-page="home"] .cta .book img { width: 84px; border-radius: 8px; background: var(--mist); aspect-ratio: 3/4; object-fit: cover; }
  body.prototype-site[data-prototype-page="home"] .cta .book b { color: var(--ink); display: block; font-family: var(--font-head); }
  body.prototype-site[data-prototype-page="home"] .sister { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 20px 24px; margin-top: 28px; }
  body.prototype-site[data-prototype-page="home"] .sister img { height: 44px; }
  body.prototype-site[data-prototype-page="home"] .sister p { margin: 0; color: var(--muted); }
  @media (max-width: 800px) { body.prototype-site[data-prototype-page="home"] .cta { grid-template-columns: 1fr; } body.prototype-site[data-prototype-page="home"] .sister { grid-template-columns: 1fr; } }


  body.prototype-site[data-prototype-page="inschrijven"] { background: var(--mist); }
  body.prototype-site[data-prototype-page="inschrijven"] .reg { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; padding: 32px 0 80px; }
  @media (max-width: 960px) { body.prototype-site[data-prototype-page="inschrijven"] .reg { grid-template-columns: 1fr; } body.prototype-site[data-prototype-page="inschrijven"] .summary { order: -1; position: static !important; } }
  body.prototype-site[data-prototype-page="inschrijven"] .progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 24px; list-style: none; padding: 0; }
  body.prototype-site[data-prototype-page="inschrijven"] .progress li { font-size: .88rem; font-weight: 600; color: var(--muted); }
  body.prototype-site[data-prototype-page="inschrijven"] .progress li::before { content: ""; display: block; height: 6px; border-radius: 999px; background: var(--line); margin-bottom: 8px; }
  body.prototype-site[data-prototype-page="inschrijven"] .progress li.done, body.prototype-site[data-prototype-page="inschrijven"] .progress li.now { color: var(--ink); }
  body.prototype-site[data-prototype-page="inschrijven"] .progress li.done::before { background: var(--sea); }
  body.prototype-site[data-prototype-page="inschrijven"] .progress li.now::before { background: var(--sun); }
  body.prototype-site[data-prototype-page="inschrijven"] .progs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  body.prototype-site[data-prototype-page="inschrijven"] .prog { border: 2px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit; }
  body.prototype-site[data-prototype-page="inschrijven"] .prog img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--mist); }
  body.prototype-site[data-prototype-page="inschrijven"] .prog span { display: block; padding: 12px 14px 14px; }
  body.prototype-site[data-prototype-page="inschrijven"] .prog b { display: block; font-family: var(--font-head); color: var(--ink); }
  body.prototype-site[data-prototype-page="inschrijven"] .prog small { color: var(--muted); }
  body.prototype-site[data-prototype-page="inschrijven"] .prog[aria-pressed="true"] { border-color: var(--sea); box-shadow: 0 0 0 3px rgba(43,170,151,.2); }
  @media (max-width: 700px) { body.prototype-site[data-prototype-page="inschrijven"] .progs { grid-template-columns: 1fr; } }
  body.prototype-site[data-prototype-page="inschrijven"] .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body.prototype-site[data-prototype-page="inschrijven"] .opt { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; border: 2px solid var(--line); border-radius: var(--r-md); padding: 8px; background: #fff; cursor: pointer; }
  body.prototype-site[data-prototype-page="inschrijven"] .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  body.prototype-site[data-prototype-page="inschrijven"] .opt img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--mist); }
  body.prototype-site[data-prototype-page="inschrijven"] .opt b { color: var(--ink); display: block; line-height: 1.25; }
  body.prototype-site[data-prototype-page="inschrijven"] .opt small { color: var(--muted); }
  body.prototype-site[data-prototype-page="inschrijven"] .opt:has(input:checked) { border-color: var(--sea); background: #effaf8; }
  body.prototype-site[data-prototype-page="inschrijven"] .opt:has(input:disabled:not(:checked)) { opacity: .45; }
  body.prototype-site[data-prototype-page="inschrijven"] .opt:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }
  @media (max-width: 620px) { body.prototype-site[data-prototype-page="inschrijven"] .opts { grid-template-columns: 1fr; } }
  body.prototype-site[data-prototype-page="inschrijven"] .pkgs { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 700px) { body.prototype-site[data-prototype-page="inschrijven"] .pkgs { grid-template-columns: 1fr 1fr; } }
  body.prototype-site[data-prototype-page="inschrijven"] .pkg { padding: 16px; }
  body.prototype-site[data-prototype-page="inschrijven"] .pkg-price { font-size: 1.5rem; }
  body.prototype-site[data-prototype-page="inschrijven"] .subj { display: flex; flex-wrap: wrap; gap: 8px; }
  body.prototype-site[data-prototype-page="inschrijven"] .subj label { cursor: pointer; }
  body.prototype-site[data-prototype-page="inschrijven"] .subj input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  body.prototype-site[data-prototype-page="inschrijven"] .subj span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; font-size: .9rem; color: var(--ink); }
  body.prototype-site[data-prototype-page="inschrijven"] .subj input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
  body.prototype-site[data-prototype-page="inschrijven"] .subj input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
  body.prototype-site[data-prototype-page="inschrijven"] .account { display: flex; gap: 14px; align-items: center; background: #fff8dd; border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 20px; flex-wrap: wrap; }
  body.prototype-site[data-prototype-page="inschrijven"] .account img { height: 26px; }
  body.prototype-site[data-prototype-page="inschrijven"] .account p { margin: 0; flex: 1; font-size: .93rem; min-width: 200px; }
  body.prototype-site[data-prototype-page="inschrijven"] .pay-opt { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px; border: 2px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; cursor: pointer; background: #fff; }
  body.prototype-site[data-prototype-page="inschrijven"] .pay-opt:has(input:checked) { border-color: var(--sea); background: #effaf8; }
  body.prototype-site[data-prototype-page="inschrijven"] .pay-opt input { accent-color: var(--ink); width: 20px; height: 20px; }
  body.prototype-site[data-prototype-page="inschrijven"] .pay-opt b { color: var(--ink); display: block; }
  body.prototype-site[data-prototype-page="inschrijven"] .nav-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
  body.prototype-site[data-prototype-page="inschrijven"] .summary { position: sticky; top: 96px; }
  body.prototype-site[data-prototype-page="inschrijven"] .sum-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: .95rem; }
  body.prototype-site[data-prototype-page="inschrijven"] .sum-line span:last-child { font-weight: 600; text-align: right; }
  body.prototype-site[data-prototype-page="inschrijven"] .sum-total { border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 12px; font-family: var(--font-head); font-size: 1.2rem; color: var(--ink); }
  body.prototype-site[data-prototype-page="inschrijven"] .err { color: #b02a3f; font-weight: 600; font-size: .92rem; margin-top: 12px; display: none; }
  body.prototype-site[data-prototype-page="inschrijven"] .err.show { display: block; }
  body.prototype-site[data-prototype-page="inschrijven"] .done-box { text-align: center; }
  body.prototype-site[data-prototype-page="inschrijven"] .ok { width: 72px; height: 72px; border-radius: 50%; background: var(--sea); display: grid; place-items: center; margin: 0 auto 16px; }
  body.prototype-site[data-prototype-page="inschrijven"] .next-steps { text-align: left; max-width: 460px; margin: 24px auto; display: grid; gap: 10px; counter-reset: n; }
  body.prototype-site[data-prototype-page="inschrijven"] .next-steps div { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; background: var(--mist); border-radius: var(--r-md); padding: 12px; }
  body.prototype-site[data-prototype-page="inschrijven"] .next-steps div::before { counter-increment: n; content: counter(n); width: 28px; height: 28px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; font-weight: 800; color: var(--ink); font-size: .9rem; }


  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .builder { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
  @media (max-width: 960px) { body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .builder { grid-template-columns: 1fr; } }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .b-step { margin-bottom: 32px; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .b-step h3 { display: flex; gap: 12px; align-items: center; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .b-step h3 .n { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .95rem; flex: none; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .act { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; border: 2px solid var(--line); border-radius: var(--r-md); padding: 8px; cursor: pointer; background: #fff; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .act input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .act img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--mist); }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .act b { color: var(--ink); display: block; font-family: var(--font-head); line-height: 1.25; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .act small { color: var(--muted); }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .act:has(input:checked) { border-color: var(--sea); background: #effaf8; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .act:has(input:disabled:not(:checked)) { opacity: .45; cursor: not-allowed; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .act:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }
  @media (max-width: 620px) { body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .acts { grid-template-columns: 1fr; } }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .sum { position: sticky; top: 96px; background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 24px; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .sum h3 { color: #fff; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .sum-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .95rem; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .sum-line span:first-child { color: #c9cbd0; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .sum-total { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; color: var(--sun); margin: 16px 0 4px; line-height: 1; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .sum .hint { color: #c9cbd0; font-size: .85rem; margin-bottom: 16px; }

  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .week { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .wday { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .wday h3 { font-size: 1.1rem; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .wday ul { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 6px; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .wday li { font-size: .93rem; padding: 6px 10px; background: var(--mist); border-radius: 8px; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .wday li.math { background: #fff6d6; font-weight: 600; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 28px; border-radius: var(--r-lg); overflow: hidden; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .tl { padding: 18px 20px; background: #fff; border-right: 1px solid var(--line); }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .tl:last-child { border: 0; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .tl time { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .tl b { display: block; color: var(--ink); margin-top: 2px; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .tl p { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
  @media (max-width: 860px) { body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .week { grid-template-columns: 1fr 1fr; } body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .timeline { grid-template-columns: 1fr; } body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .tl { border-right: 0; border-bottom: 1px solid var(--line); } }

  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: h; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .how div { padding: 24px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .how div::before { counter-increment: h; content: counter(h); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun); font-weight: 800; font-family: var(--font-head); color: var(--ink); margin-bottom: 12px; }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .how p { margin: 0; color: var(--muted); }
  body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .vid-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
  @media (max-width: 860px) { body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .how, body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .vid-split { grid-template-columns: 1fr; } }

body.prototype-site[data-prototype-page="huiswerkbegeleiding"] .is-off { opacity: .5; pointer-events: none; }

  body.prototype-site[data-prototype-page="cursussen"] .seg-tabs { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; flex-wrap: wrap; }
  body.prototype-site[data-prototype-page="cursussen"] .seg-tabs button { border: 0; background: none; padding: 10px 18px; border-radius: 999px; font-weight: 600; color: var(--muted); cursor: pointer; }
  body.prototype-site[data-prototype-page="cursussen"] .seg-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
  body.prototype-site[data-prototype-page="cursussen"] .flt { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 28px; }
  body.prototype-site[data-prototype-page="cursussen"] .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 980px) { body.prototype-site[data-prototype-page="cursussen"] .grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 620px) { body.prototype-site[data-prototype-page="cursussen"] .grid { grid-template-columns: 1fr; } }
  body.prototype-site[data-prototype-page="cursussen"] .cc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
  body.prototype-site[data-prototype-page="cursussen"] .cc .video-thumb { border-radius: 0; }
  body.prototype-site[data-prototype-page="cursussen"] .cc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
  body.prototype-site[data-prototype-page="cursussen"] .cc-body h3 { font-size: 1.2rem; margin: 8px 0 6px; }
  body.prototype-site[data-prototype-page="cursussen"] .cc-body p { color: var(--muted); font-size: .95rem; margin-bottom: 12px; }
  body.prototype-site[data-prototype-page="cursussen"] .flow { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
  body.prototype-site[data-prototype-page="cursussen"] .flow span { font-size: .78rem; font-weight: 600; background: var(--mist); color: var(--ink); padding: 3px 9px; border-radius: 999px; }
  body.prototype-site[data-prototype-page="cursussen"] .meta { font-size: .88rem; color: var(--muted); margin-bottom: 14px; }
  body.prototype-site[data-prototype-page="cursussen"] .meta b { color: var(--ink); font-weight: 600; }
  body.prototype-site[data-prototype-page="cursussen"] .cc-actions { margin-top: auto; display: flex; gap: 8px; }
  body.prototype-site[data-prototype-page="cursussen"] .cc-actions .btn { flex: 1; }
  body.prototype-site[data-prototype-page="cursussen"] .k-tech { border-top: 6px solid var(--sky); } body.prototype-site[data-prototype-page="cursussen"] .k-creative { border-top: 6px solid var(--coral); } body.prototype-site[data-prototype-page="cursussen"] .k-studie { border-top: 6px solid var(--sun); }
  body.prototype-site[data-prototype-page="cursussen"] .school { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--night); color: #d9dbdf; border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); margin-top: 56px; }
  body.prototype-site[data-prototype-page="cursussen"] .school h2 { color: #fff; }
  body.prototype-site[data-prototype-page="cursussen"] .school p { margin: 0; }
  @media (max-width: 700px) { body.prototype-site[data-prototype-page="cursussen"] .school { grid-template-columns: 1fr; } }
  body.prototype-site[data-prototype-page="cursussen"] .detail { display: grid; grid-template-columns: 1.3fr 1fr; }
  body.prototype-site[data-prototype-page="cursussen"] .detail iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; background: #000; }
  body.prototype-site[data-prototype-page="cursussen"] .detail-info { padding: 28px; }
  @media (max-width: 820px) { body.prototype-site[data-prototype-page="cursussen"] .detail { grid-template-columns: 1fr; } }


  body.prototype-site[data-prototype-page="taal"] .lang-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  @media (max-width: 800px) { body.prototype-site[data-prototype-page="taal"] .lang-pick { grid-template-columns: 1fr; } }
  body.prototype-site[data-prototype-page="taal"] .opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
  body.prototype-site[data-prototype-page="taal"] .opt-row label { cursor: pointer; }
  body.prototype-site[data-prototype-page="taal"] .opt-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  body.prototype-site[data-prototype-page="taal"] .opt-row span { display: inline-block; padding: 12px 18px; border: 2px solid var(--line); border-radius: var(--r-md); background: #fff; font-weight: 700; color: var(--ink); }
  body.prototype-site[data-prototype-page="taal"] .opt-row input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
  body.prototype-site[data-prototype-page="taal"] .opt-row input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
  body.prototype-site[data-prototype-page="taal"] .ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 10px; }
  body.prototype-site[data-prototype-page="taal"] .ladder button { border: 0; padding: 14px 0; font-weight: 800; font-family: var(--font-head); background: var(--mist); color: var(--muted); cursor: pointer; }
  body.prototype-site[data-prototype-page="taal"] .ladder button:first-child { border-radius: 10px 0 0 10px; } body.prototype-site[data-prototype-page="taal"] .ladder button:last-child { border-radius: 0 10px 10px 0; }
  body.prototype-site[data-prototype-page="taal"] .ladder button.from { background: var(--ink); color: #fff; }
  body.prototype-site[data-prototype-page="taal"] .ladder button.path { background: #fff3c4; color: var(--ink); }
  body.prototype-site[data-prototype-page="taal"] .ladder button.to { background: var(--sun); color: var(--ink); }
  body.prototype-site[data-prototype-page="taal"] .ladder-legend { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); margin-top: 8px; }
  body.prototype-site[data-prototype-page="taal"] .lp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
  @media (max-width: 900px) { body.prototype-site[data-prototype-page="taal"] .lp { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { body.prototype-site[data-prototype-page="taal"] .lp { grid-template-columns: 1fr; } }
  body.prototype-site[data-prototype-page="taal"] .fast { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  body.prototype-site[data-prototype-page="taal"] .fast div { background: rgba(255,255,255,.06); border-radius: var(--r-lg); padding: 24px; }
  body.prototype-site[data-prototype-page="taal"] .fast b { font-family: var(--font-head); font-size: 2rem; color: var(--sun); display: block; line-height: 1.1; }
  body.prototype-site[data-prototype-page="taal"] .fast h3 { margin: 8px 0 4px; }
  body.prototype-site[data-prototype-page="taal"] .fast p { margin: 0; color: #c9cbd0; }
  body.prototype-site[data-prototype-page="taal"] .feat { columns: 2; padding-left: 20px; }
  body.prototype-site[data-prototype-page="taal"] .feat li { margin-bottom: 6px; }
  @media (max-width: 700px) { body.prototype-site[data-prototype-page="taal"] .fast { grid-template-columns: 1fr; } body.prototype-site[data-prototype-page="taal"] .feat { columns: 1; } }
  body.prototype-site[data-prototype-page="taal"] .result { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 20px 24px; margin-top: 24px; }
  body.prototype-site[data-prototype-page="taal"] .result b { color: var(--sun); font-family: var(--font-head); font-size: 1.4rem; }

@media (max-width: 860px) { body.prototype-site[data-prototype-page="taal"] main .section:last-of-type .wrap { grid-template-columns: 1fr !important; } }

  body.prototype-site[data-prototype-page="evenementen"] .events { display: grid; gap: 20px; }
  body.prototype-site[data-prototype-page="evenementen"] .event {
    display: grid; grid-template-columns: 280px 1fr auto; gap: 24px; align-items: stretch;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  }
  body.prototype-site[data-prototype-page="evenementen"] .event-img { position: relative; background: var(--mist); }
  body.prototype-site[data-prototype-page="evenementen"] .event-img img { width: 100%; height: 100%; object-fit: cover; min-height: 180px; }
  body.prototype-site[data-prototype-page="evenementen"] .event-img .date-tile { position: absolute; left: 14px; top: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
  body.prototype-site[data-prototype-page="evenementen"] .event-body { padding: 22px 0; }
  body.prototype-site[data-prototype-page="evenementen"] .event-body h2 { font-size: 1.35rem; margin-bottom: 6px; }
  body.prototype-site[data-prototype-page="evenementen"] .event-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  body.prototype-site[data-prototype-page="evenementen"] .event-body p { color: var(--muted); margin-bottom: 0; }
  body.prototype-site[data-prototype-page="evenementen"] .event-side { padding: 22px 24px 22px 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 14px; min-width: 200px; }
  body.prototype-site[data-prototype-page="evenementen"] .price { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 1.35rem; text-align: right; line-height: 1.2; }
  body.prototype-site[data-prototype-page="evenementen"] .price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .85rem; color: var(--muted); }
  body.prototype-site[data-prototype-page="evenementen"] .price.free { color: #127466; }
  body.prototype-site[data-prototype-page="evenementen"] .fill { width: 100%; }
  body.prototype-site[data-prototype-page="evenementen"] .fill-bar { height: 8px; background: var(--mist); border-radius: 999px; overflow: hidden; }
  body.prototype-site[data-prototype-page="evenementen"] .fill-bar i { display: block; height: 100%; background: var(--sky); }
  body.prototype-site[data-prototype-page="evenementen"] .fill-bar.hot i { background: var(--coral); }
  body.prototype-site[data-prototype-page="evenementen"] .fill small { color: var(--muted); font-size: .82rem; display: block; margin-top: 4px; text-align: right; }
  @media (max-width: 900px) {
    body.prototype-site[data-prototype-page="evenementen"] .event { grid-template-columns: 1fr; gap: 0; }
    body.prototype-site[data-prototype-page="evenementen"] .event-img img { aspect-ratio: 16/9; min-height: 0; }
    body.prototype-site[data-prototype-page="evenementen"] .event-body { padding: 18px 20px 0; }
    body.prototype-site[data-prototype-page="evenementen"] .event-side { padding: 16px 20px 20px; align-items: stretch; }
    body.prototype-site[data-prototype-page="evenementen"] .price { text-align: left; }
    body.prototype-site[data-prototype-page="evenementen"] .fill small { text-align: left; }
  }
  body.prototype-site[data-prototype-page="evenementen"] .counter { display: flex; align-items: center; gap: 10px; }
  body.prototype-site[data-prototype-page="evenementen"] .counter button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-size: 1.2rem; cursor: pointer; color: var(--ink); }
  body.prototype-site[data-prototype-page="evenementen"] .counter output { min-width: 28px; text-align: center; font-weight: 700; font-size: 1.1rem; color: var(--ink); }
  body.prototype-site[data-prototype-page="evenementen"] .past .event { grid-template-columns: 200px 1fr auto; }
  body.prototype-site[data-prototype-page="evenementen"] .counters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  body.prototype-site[data-prototype-page="evenementen"] .total-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 2px solid var(--ink); margin: 8px 0 16px; font-family: var(--font-head); font-size: 1.15rem; color: var(--ink); }
  body.prototype-site[data-prototype-page="evenementen"] .pay-choice { display: grid; gap: 8px; margin-bottom: 16px; }
  body.prototype-site[data-prototype-page="evenementen"] .pay-choice label { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; }
  body.prototype-site[data-prototype-page="evenementen"] .pay-choice label:has(input:checked) { border-color: var(--sea); background: #f2fbf9; }


  body.prototype-site[data-prototype-page="nieuws"] [hidden] { display: none !important; }
  body.prototype-site[data-prototype-page="nieuws"] .lead-post { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; text-decoration: none; color: inherit; margin-bottom: 56px; }
  body.prototype-site[data-prototype-page="nieuws"] .lead-post img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r-lg); background: var(--mist); }
  body.prototype-site[data-prototype-page="nieuws"] .lead-post h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
  body.prototype-site[data-prototype-page="nieuws"] .lead-post:hover h2, body.prototype-site[data-prototype-page="nieuws"] .post:hover h3 { text-decoration: underline; }
  body.prototype-site[data-prototype-page="nieuws"] .post-meta { font-size: .88rem; color: var(--muted); margin-bottom: 8px; }
  body.prototype-site[data-prototype-page="nieuws"] .post-meta b { color: var(--sky); font-weight: 600; }
  body.prototype-site[data-prototype-page="nieuws"] .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  body.prototype-site[data-prototype-page="nieuws"] .post { text-decoration: none; color: inherit; display: block; }
  body.prototype-site[data-prototype-page="nieuws"] .post img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-md); margin-bottom: 14px; background: var(--mist); }
  body.prototype-site[data-prototype-page="nieuws"] .post p { color: var(--muted); font-size: .95rem; }
  @media (max-width: 900px) { body.prototype-site[data-prototype-page="nieuws"] .lead-post { grid-template-columns: 1fr; } body.prototype-site[data-prototype-page="nieuws"] .posts { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { body.prototype-site[data-prototype-page="nieuws"] .posts { grid-template-columns: 1fr; } }

  body.prototype-site[data-prototype-page="nieuws"] .article { max-width: 760px; margin: 0 auto; }
  body.prototype-site[data-prototype-page="nieuws"] .article h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
  body.prototype-site[data-prototype-page="nieuws"] .article .hero-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-lg); margin: 24px 0 32px; background: var(--mist); }
  body.prototype-site[data-prototype-page="nieuws"] .article .body p { font-size: 1.1rem; line-height: 1.75; max-width: none; }
  body.prototype-site[data-prototype-page="nieuws"] .article .video-thumb { margin: 24px 0; }
  body.prototype-site[data-prototype-page="nieuws"] .share { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 32px; }


  body.prototype-site[data-prototype-page="over-ons"] .statement { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.2; color: var(--ink); max-width: 26ch; letter-spacing: -0.02em; }
  body.prototype-site[data-prototype-page="over-ons"] .vm { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }
  body.prototype-site[data-prototype-page="over-ons"] .vm h3 { font-size: 1.05rem; color: var(--muted); font-weight: 600; }
  body.prototype-site[data-prototype-page="over-ons"] .vm p { font-size: 1.1rem; }
  body.prototype-site[data-prototype-page="over-ons"] .goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  body.prototype-site[data-prototype-page="over-ons"] .goal { background: #fff; border-radius: var(--r-lg); padding: 22px; border: 1px solid var(--line); }
  body.prototype-site[data-prototype-page="over-ons"] .goal h3 { font-size: 1.1rem; margin-bottom: 6px; }
  body.prototype-site[data-prototype-page="over-ons"] .goal p { color: var(--muted); font-size: .95rem; margin: 0; }
  body.prototype-site[data-prototype-page="over-ons"] .who { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
  body.prototype-site[data-prototype-page="over-ons"] .who ul { padding-left: 20px; }
  body.prototype-site[data-prototype-page="over-ons"] .who li { margin-bottom: 8px; }
  body.prototype-site[data-prototype-page="over-ons"] .faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
  body.prototype-site[data-prototype-page="over-ons"] .faq summary { font-family: var(--font-head); font-weight: 600; color: var(--ink); cursor: pointer; font-size: 1.05rem; }
  body.prototype-site[data-prototype-page="over-ons"] .faq details p { margin: 10px 0 0; color: var(--muted); }
  body.prototype-site[data-prototype-page="over-ons"] .jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  body.prototype-site[data-prototype-page="over-ons"] .job { background: rgba(255,255,255,.06); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
  body.prototype-site[data-prototype-page="over-ons"] .job p { color: #c9cbd0; margin: 0 0 8px; font-size: .95rem; }
  body.prototype-site[data-prototype-page="over-ons"] .job .btn { margin-top: auto; align-self: flex-start; }
  @media (max-width: 900px) { body.prototype-site[data-prototype-page="over-ons"] .vm, body.prototype-site[data-prototype-page="over-ons"] .who { grid-template-columns: 1fr; } body.prototype-site[data-prototype-page="over-ons"] .goals { grid-template-columns: 1fr 1fr; } body.prototype-site[data-prototype-page="over-ons"] .jobs { grid-template-columns: 1fr; } }
  @media (max-width: 520px) { body.prototype-site[data-prototype-page="over-ons"] .goals { grid-template-columns: 1fr; } }


  body.prototype-site[data-prototype-page="contact"] .tour { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
  @media (max-width: 900px) { body.prototype-site[data-prototype-page="contact"] .tour { grid-template-columns: 1fr; } }
  body.prototype-site[data-prototype-page="contact"] .cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  body.prototype-site[data-prototype-page="contact"] .cal button { border: 2px solid var(--line); background: #fff; border-radius: var(--r-md); padding: 10px 6px; cursor: pointer; text-align: center; font: inherit; color: var(--ink); }
  body.prototype-site[data-prototype-page="contact"] .cal button b { display: block; font-family: var(--font-head); font-size: 1.4rem; line-height: 1.1; }
  body.prototype-site[data-prototype-page="contact"] .cal button span { font-size: .8rem; color: var(--muted); }
  body.prototype-site[data-prototype-page="contact"] .cal button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  body.prototype-site[data-prototype-page="contact"] .cal button[aria-pressed="true"] span { color: #cfd1d5; }
  body.prototype-site[data-prototype-page="contact"] .times { display: flex; gap: 8px; flex-wrap: wrap; }
  body.prototype-site[data-prototype-page="contact"] .times button { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 16px; font-weight: 600; cursor: pointer; color: var(--ink); }
  body.prototype-site[data-prototype-page="contact"] .times button[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); }
  body.prototype-site[data-prototype-page="contact"] .places { display: grid; gap: 16px; }
  @media (max-width: 520px) { body.prototype-site[data-prototype-page="contact"] .cal { grid-template-columns: repeat(2, 1fr); } }
/* Production adaptations retain the prototype design and isolate private portals. */
body.prototype-site .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.prototype-site .website-honeypot {position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
body.prototype-site .extra-gap {margin-top:24px}
body.prototype-site .normal {font-weight:400}
body.prototype-site .summary-note {margin:10px 0 0}
body.prototype-site .pickup-person {margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:var(--r-md)}
body.prototype-site .pickup-person legend {font-weight:700;padding:0 8px}
body.prototype-site .done-actions {justify-content:center}
body.prototype-site .courses-grid, body.prototype-site .posts-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
body.prototype-site .course img, body.prototype-site .post img {width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);margin-bottom:18px}
body.prototype-site .course .tag {margin:10px 0}
body.prototype-site .course-filters {margin-bottom:24px}
body.prototype-site .courses-grid [hidden] {display:none}
body.prototype-site .events-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:24px 0 48px}
body.prototype-site .event-card {display:grid;grid-template-columns:auto 1fr;gap:20px;color:inherit;text-decoration:none}
body.prototype-site .schedule-panel .day-card {position:static;box-shadow:none}
body.prototype-site .article-reading {max-width:800px;margin:0 auto}
body.prototype-site .article-reading img {width:100%;max-height:440px;object-fit:cover;border-radius:var(--r-lg);margin:0 0 24px}
body.prototype-site .gallery-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
body.prototype-site figure {margin:0;min-width:0}
body.prototype-site .gallery-grid img, body.prototype-site .gallery-grid video {width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
body.prototype-site .site-video-frame {aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-lg);background:var(--mist)}
body.prototype-site .site-video-frame iframe, body.prototype-site .site-video-frame .video-thumb {width:100%;height:100%;border:0;padding:0;border-radius:0}
body.prototype-site figcaption {font-family:var(--font-head);font-weight:600;margin-top:10px}
body.prototype-site .contact-message-wrap {max-width:760px;margin:0 auto}
body.prototype-site .tour .grid-2 {margin-top:24px}
body.prototype-site .times {margin:12px 0 24px}
body.prototype-site .times .btn[aria-pressed=true], body.prototype-site .cal .btn[aria-pressed=true] {background:var(--sun);border-color:var(--sun)}
body.prototype-site .site-text-button {background:none;color:inherit;padding:0;text-decoration:underline}
body.prototype-site .frame > img {width:100%;height:100%;object-fit:cover}
body.prototype-site .pkg {text-decoration:none}
body.prototype-site .section--night .section-head p {color:#c9cbd0}
body.prototype-site .reg, body.prototype-site .reg > div {min-width:0}
body.prototype-site[data-prototype-page=inschrijven] .header ~ #main, body.prototype-site[data-prototype-page=inschrijven] #root {background:var(--mist)}
body.prototype-site .registration-step form {display:block}
body.prototype-site .registration-step .field label {line-height:1.4}
body.prototype-site .registration-step input[type=checkbox],body.prototype-site .registration-step input[type=radio] {flex-shrink:0}
body.prototype-site .registration-step .progs .prog {display:block}
body.prototype-site .registration-step .prog:disabled {cursor:not-allowed}
@media(max-width:900px){body.prototype-site .courses-grid,body.prototype-site .posts-grid,body.prototype-site .gallery-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body.prototype-site .courses-grid,body.prototype-site .posts-grid,body.prototype-site .gallery-grid,body.prototype-site .events-grid {grid-template-columns:1fr}body.prototype-site .brandbar nav a{padding:4px 7px;font-size:.75rem}body.prototype-site .summary {margin-bottom:0}body.prototype-site .sum-line {font-size:.85rem}}
@media(prefers-reduced-motion:reduce){body.prototype-site * {scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Reset legacy portal utility names only on the public prototype. */
body.prototype-site .wrap {flex-wrap:nowrap}
body.prototype-site .muted {padding:0;background:transparent;border:0}
body.prototype-site .header .wrap {gap:24px}
body.prototype-site .header .logo {flex:0 0 auto}
body.prototype-site .header-actions {flex:0 0 auto}
body.prototype-site .progress {margin-top:16px}
body.prototype-site .summary .sum-line span:first-child {flex-shrink:0}
body.prototype-site .header .logo {width:69px;height:auto;display:block}
body.prototype-site .header .logo img {width:69px;height:50px;object-fit:contain}
body.prototype-site .vids > *,body.prototype-site .vids figure,body.prototype-site .site-video-frame {min-width:0;max-width:100%;margin:0}
body.prototype-site .video-thumb {display:block;width:100%;max-width:100%;padding:0;border:0;background:var(--night);position:relative;overflow:hidden;border-radius:var(--r-md)}
body.prototype-site .video-thumb img {width:100%;max-width:100%;object-fit:cover}