/* =========================================================
   LUNARIS CLINICS - 2026 homepage, refined
   Rimowa-inspired editorial - sharper execution
   ========================================================= */

:root {
  --ink:        #1a1410;
  --ink-soft:   #4a3f37;
  --brown:      #381b0d;
  --cream:      #f3ede2;
  --cream-soft: #faf7f1;
  --paper:      #ffffff;
  --line:       rgba(26,20,16,0.12);
  --line-soft:  rgba(26,20,16,0.06);

  /* Accent - tweakable. Defaults to the brand gold. */
  --accent:      #BC3265;   /* gold-deep   */
  --accent-soft: #D86E9C;   /* gold        */

  --sans:    "Inter", system-ui, -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --display: "Newsreader", Georgia, "Times New Roman", serif;

  --max:    1320px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --rhythm: 1;   /* density multiplier - tweakable */

  --t-hero:  clamp(52px, 8.4vw, 132px);
  --t-h2:    clamp(30px, 4vw, 60px);
  --t-h3:    clamp(20px, 1.7vw, 27px);
  --t-body:  clamp(15px, 1.05vw, 17px);

  --hero-veil: 0.42;   /* tweakable hero darkness */

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
.display {
  font-family: var(--display);
  font-weight: 380;
  letter-spacing: -0.018em;
  line-height: 1.02;
}
h2 { font-family: var(--display); font-weight: 400; font-size: var(--t-h2); letter-spacing: -0.018em; line-height: 1.05; }
h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.006em; line-height: 1.25; }
em { font-style: italic; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow::before {
  content: none;
}
.eyebrow--on-dark { color: var(--kicker-color, #ffffff); opacity: var(--kicker-opacity, .78); }
.lead { font-size: clamp(17px, 1.35vw, 22px); line-height: 1.5; color: var(--ink-soft); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section  { padding: calc(clamp(64px, 9vw, 150px) * var(--rhythm)) 0; }
.section--tight { padding: calc(clamp(44px, 6vw, 96px) * var(--rhythm)) 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--cream-soft);
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover { background: var(--brown); border-color: var(--brown); transform: translateY(-1px); }
.btn--light { background: var(--cream-soft); color: var(--ink); border-color: var(--cream-soft); }
.btn--light:hover { background: #fff; border-color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream-soft); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn .arr { transition: transform .28s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--accent);
  transition: gap .22s var(--ease);
}
.link-arrow:hover { gap: 15px; }
.link-arrow .arr { transition: transform .22s var(--ease); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  padding: 20px 0;
  color: #fff;
  transition: background .35s var(--ease), color .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.hdr__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px;
}
.hdr__brand { display: inline-flex; align-items: center; }
.hdr__brand img { height: 58px; width: auto; transition: height .35s var(--ease); }
.brand-dark  { display: none; }
.brand-light { display: block; filter: brightness(0) invert(1); }
/* logo-white.svg ships without a fill; render it truly white on dark surfaces */
.mega__top img, .ftr__brand img, .site-footer__brand img { filter: brightness(0) invert(1); }

.hdr__nav { display: flex; justify-content: center; gap: clamp(8px, 1vw, 18px); }
.hdr__nav a {
  position: relative; padding: 8px 0;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
  opacity: .92;
}
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.hdr__nav a:hover::after { transform: scaleX(1); }

.hdr__right { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.hdr__cta { padding: 11px 20px; font-size: 11px; }

/* lang switch */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em;
  border: 1px solid currentColor; opacity: .9;
  transition: opacity .2s var(--ease), background .2s var(--ease);
}
.lang__btn:hover { opacity: 1; }
.lang__btn .flag { border-radius: 2px; }
.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  min-width: 168px; box-shadow: 0 16px 44px rgba(26,20,16,.16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 5;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 7px; font-size: 13px;
  transition: background .18s var(--ease);
}
.lang__menu a:hover { background: var(--cream); }
.lang__menu a.is-active { font-weight: 600; }

/* menu trigger */
.menu-btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 16px 10px 18px; border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.menu-btn:hover { background: #fff; color: var(--ink); }
.hdr.is-solid .menu-btn:hover { background: var(--ink); color: var(--cream-soft); }
.menu-btn__lines { display: inline-flex; flex-direction: column; gap: 3.5px; width: 16px; }
.menu-btn__lines span { height: 1.5px; background: currentColor; border-radius: 2px; display: block; }
.menu-btn__lines span:nth-child(2) { width: 11px; }

/* solid (scrolled / subpage) header */
.hdr.is-solid {
  background: var(--cream-soft); color: var(--ink);
  box-shadow: 0 1px 0 var(--line); padding: 12px 0;
}
.hdr.is-solid .brand-dark { display: block; }
.hdr.is-solid .brand-light { display: none; }
.hdr.is-solid .lang__btn { border-color: var(--line); }

/* Hide the appointment CTA on mid-width screens to make room for the full nav */
@media (max-width: 1180px) {
  .hdr__cta { display: none; }
  .hdr__nav { gap: clamp(6px, 0.9vw, 14px); }
  .hdr__nav a { font-size: 10.5px; letter-spacing: 0.02em; }
}
/* Below this, collapse the nav into the Menu button (nav only fits comfortably ≥1100px) */
@media (max-width: 1100px) {
  .hdr__nav { display: none; }
  .hdr__inner { grid-template-columns: 1fr auto; }
  .hdr__brand img { height: 50px; }
}

/* ============================================================
   MOBILE MENU (hamburger + full-screen overlay)
   ============================================================ */
.hdr__burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.hdr__burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .28s var(--ease), opacity .2s var(--ease); }
body.menu-open .hdr__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .hdr__burger span:nth-child(2) { opacity: 0; }
body.menu-open .hdr__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1100px) { .hdr__burger { display: inline-flex; } }

.mobile-menu {
  position: fixed; inset: 0; z-index: 120;
  background: var(--ink); color: var(--cream-soft);
  display: none; flex-direction: column; justify-content: center;
  padding: 96px clamp(28px, 7vw, 64px) 40px;
}
body.menu-open .mobile-menu { display: flex; }
body.menu-open { overflow: hidden; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu__nav a {
  font-family: var(--display); font-weight: 400; font-size: clamp(30px, 8vw, 48px);
  letter-spacing: -0.02em; line-height: 1.2; color: var(--cream-soft);
  padding: 10px 0; border-bottom: 1px solid rgba(247,242,238,.12); transition: color .2s var(--ease);
}
.mobile-menu__nav a:hover { color: var(--accent-soft); }
.mobile-menu__foot { margin-top: clamp(32px, 6vw, 56px); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mobile-menu__spoed { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.mobile-menu__spoed svg { color: #D8352F; }

/* ============================================================
   MEGA MENU OVERLAY  (all pages, organised)
   ============================================================ */
.mega {
  position: fixed; inset: 0; z-index: 120;
  background: var(--ink); color: var(--cream-soft);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .42s var(--ease), visibility .42s;
  overflow-y: auto;
}
body.mega-open .mega { opacity: 1; visibility: visible; }
body.mega-open { overflow: hidden; }
.mega__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px var(--gutter); border-bottom: 1px solid rgba(255,255,255,.12);
  position: sticky; top: 0; background: var(--ink); z-index: 2;
}
.mega__top img { height: 50px; }
.mega__close {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,.8); padding: 10px 16px; border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; transition: background .2s var(--ease), color .2s var(--ease);
}
.mega__close:hover { background: #fff; color: var(--ink); }

.mega__inner { max-width: var(--max); margin: 0 auto; width: 100%; padding: clamp(36px, 5vw, 72px) var(--gutter) 80px; }

/* priority quick links inside mega */
.mega__priority {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
@media (max-width: 900px) { .mega__priority { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mega__priority { grid-template-columns: 1fr; } }
.mega__pri {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  background: rgba(255,255,255,.03);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.mega__pri:hover { background: rgba(255,255,255,.07); border-color: var(--accent-soft); transform: translateY(-2px); }
.mega__pri-ic { width: 30px; height: 30px; color: var(--accent-soft); }
.mega__pri-ic svg { width: 100%; height: 100%; }
.mega__pri b { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.mega__pri span { font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.45; margin-top: -6px; }
.mega__pri .arr { margin-top: auto; color: var(--accent-soft); font-size: 14px; }

.mega__cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 56px);
}
@media (max-width: 900px) { .mega__cols { grid-template-columns: 1fr 1fr; gap: 36px 28px; } }
@media (max-width: 520px) { .mega__cols { grid-template-columns: 1fr; } }
.mega__col h4 {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-soft); padding-bottom: 16px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.mega__col ul { list-style: none; margin: 0; padding: 0; }
.mega__col li { border-bottom: 1px solid rgba(255,255,255,.07); }
.mega__col a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; font-family: var(--display); font-size: 19px; letter-spacing: -0.01em;
  color: rgba(255,255,255,.86);
  transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.mega__col a .m-arr { opacity: 0; transform: translateX(-6px); color: var(--accent-soft); transition: opacity .2s var(--ease), transform .2s var(--ease); font-size: 15px; }
.mega__col a:hover { color: #fff; padding-left: 8px; }
.mega__col a:hover .m-arr { opacity: 1; transform: translateX(0); }

.mega__foot {
  margin-top: clamp(40px, 5vw, 72px); padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between;
  font-size: 13px; color: rgba(255,255,255,.6);
}
.mega__foot a { border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 1px; }
.mega__foot a:hover { color: #fff; }

/* ============================================================
   HERO
   ============================================================ */
/* hero leaves room so the quick-actions strip is visible within the first screen */
.hero { position: relative; min-height: calc(100svh - var(--quick-h, 120px)); color: #fff; overflow: hidden; isolation: isolate; }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 220px; z-index: -1; background: linear-gradient(180deg, rgba(20,14,9,.52) 0%, rgba(20,14,9,0) 100%); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,14,9,calc(var(--hero-veil) + .12)) 0%, rgba(20,14,9,calc(var(--hero-veil) - .2)) 38%, rgba(20,14,9,calc(var(--hero-veil) + .26)) 100%);
}
.hero__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  min-height: calc(100svh - var(--quick-h, 120px)); display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(26px, 3.5vh, 84px); padding-top: clamp(98px, 12vh, 132px);
}
.hero__title { font-size: var(--t-hero); line-height: 0.96; letter-spacing: -0.035em; font-weight: 340; max-width: 13ch; }
.hero__title em { font-style: italic; color: var(--accent-soft); }
.hero__sub { margin-top: clamp(14px, 2vh, 26px); max-width: 50ch; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.55; color: rgba(255,255,255,.9); }
.hero__actions { margin-top: clamp(18px, 2.6vh, 36px); display: flex; gap: 12px; flex-wrap: wrap; }

/* quick actions strip - sits over the bottom of the hero */
.quick {
  position: relative; z-index: 3; margin-top: -1px; margin-bottom: -1px;
  background: var(--ink); color: var(--cream-soft);
  padding-bottom: 4px;
}
.quick__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) { .quick__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .quick__grid { grid-template-columns: 1fr; } }
.quick__item {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(24px, 3.2vh, 42px) clamp(18px, 2vw, 30px);
  border-right: 1px solid rgba(255,255,255,.1);
  transition: background .25s var(--ease);
}
.quick__item:last-child { border-right: 0; }
.quick__item:hover { background: rgba(255,255,255,.05); }
.quick__ic { flex-shrink: 0; width: 30px; height: 30px; color: var(--accent-soft); }
.quick__ic svg { width: 100%; height: 100%; }
.quick__tx b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.quick__tx span { display: block; font-size: 11.5px; color: rgba(255,255,255,.58); letter-spacing: 0.04em; margin-top: 2px; }
.quick__item .arr { margin-left: auto; color: var(--accent-soft); opacity: 0; transform: translateX(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease); }
.quick__item:hover .arr { opacity: 1; transform: translateX(0); }
@media (max-width: 980px) {
  .quick__item:nth-child(2n) { border-right: 0; }
  .quick__item { border-bottom: 1px solid rgba(255,255,255,.1); }
}

/* ============================================================
   EDITORIAL
   ============================================================ */
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.editorial--reverse > :first-child { order: 2; }
@media (max-width: 820px) { .editorial { grid-template-columns: 1fr; gap: 36px; } .editorial--reverse > :first-child { order: 0; } }
.editorial__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--cream); }
.editorial__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.editorial__media:hover img { transform: scale(1.04); }
.editorial__copy h2 { margin: 16px 0 22px; max-width: 15ch; }
.editorial__copy p { color: var(--ink-soft); font-size: 17px; line-height: 1.7; max-width: 50ch; }
.editorial__copy p + p { margin-top: 14px; }
.editorial__copy .btn, .editorial__copy .link-arrow { margin-top: 30px; }

/* ============================================================
   MAP / LOCATIONS
   ============================================================ */
.locations { background: var(--cream); }
.locations__head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
@media (max-width: 820px) { .locations__head { grid-template-columns: 1fr; } }
.locations__head h2 { max-width: 13ch; margin-top: 16px; }
.locations__head p { color: var(--ink-soft); max-width: 48ch; }

.map-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: stretch; }
@media (max-width: 900px) { .map-wrap { grid-template-columns: 1fr; } }
.nl-map { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: clamp(20px, 3vw, 44px); min-height: 480px; }
.nl-map svg { width: 100%; height: 100%; max-height: 680px; display: block; }
.nl-map .nl-provinces path {
  fill: #e3d8be; stroke: rgba(26,20,16,.18); stroke-width: 0.35; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; transition: fill .25s var(--ease);
}
.nl-map .nl-provinces path:hover { fill: #d8c9a4; }
.nl-map .nl-label { font-size: 4.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; fill: var(--accent); opacity: .65; pointer-events: none; font-family: var(--sans); }
.nl-map .nl-label--soft { opacity: .4; }
.nl-map .pin { cursor: pointer; }
.nl-map .pin .pin-shape {
  fill: var(--brown); stroke: #ffffff; stroke-width: 1.5; stroke-linejoin: round; paint-order: stroke;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.25));
  transition: fill .2s var(--ease), transform .2s var(--ease);
  transform-box: fill-box; transform-origin: 50% 100%;
}
.nl-map .pin .pin-hole { fill: #f5ebd6; pointer-events: none; }
.nl-map .pin .halo { fill: var(--accent-soft); opacity: 0; transition: opacity .25s var(--ease), r .25s var(--ease); }
.nl-map .pin text { font-size: 4.4px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--ink); pointer-events: none; font-family: var(--sans); }
.nl-map .pin:hover .pin-shape, .nl-map .pin.is-active .pin-shape { fill: var(--accent); transform: scale(1.18); }
.nl-map .pin:hover .halo, .nl-map .pin.is-active .halo { opacity: .4; r: 9; }

.loc-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.loc-item {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: padding .25s var(--ease), background .25s var(--ease);
}
.loc-item:hover, .loc-item.is-active { background: var(--cream-soft); padding-left: 18px; padding-right: 18px; margin: 0 -18px; }
.loc-item__num { font-family: var(--display); font-size: 24px; color: var(--accent); }
.loc-item__name { font-family: var(--display); font-size: 25px; letter-spacing: -0.01em; }
.loc-item__addr { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.loc-item__arr { width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 999px; display: grid; place-items: center; transition: background .2s var(--ease), color .2s var(--ease); }
.loc-item:hover .loc-item__arr, .loc-item.is-active .loc-item__arr { background: var(--ink); color: var(--cream-soft); }

/* ============================================================
   VALUES (dark band)
   ============================================================ */
.values { background: var(--ink); color: var(--cream-soft); }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .values__grid { grid-template-columns: 1fr 1fr; } }
.values__item { padding: clamp(40px, 5vw, 72px) clamp(22px, 3vw, 40px); border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.values__item:last-child { border-right: 0; }
.values__num { font-family: var(--display); font-size: clamp(44px, 5vw, 76px); letter-spacing: -0.02em; line-height: 1; color: var(--accent-soft); }
.values__label { margin-top: 14px; font-size: 13.5px; letter-spacing: 0.02em; color: rgba(255,255,255,.72); max-width: 22ch; }

/* ============================================================
   TREATMENT PILLARS
   ============================================================ */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 860px) { .tcards { grid-template-columns: 1fr; } }
.tcard { background: var(--cream-soft); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 18px; min-height: 300px; transition: background .25s var(--ease); }
.tcard:hover { background: var(--paper); }
.tcard__num { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.tcard h3 { font-family: var(--display); font-size: clamp(23px, 2vw, 30px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.12; }
.tcard p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; flex: 1; }

/* ============================================================
   REFERRER RIBBON / SUPPLEMENTS / TESTIMONIAL
   ============================================================ */
.ribbon { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ribbon__row { display: grid; grid-template-columns: 1fr auto; gap: 28px 48px; align-items: center; padding: clamp(40px, 5vw, 64px) 0; }
@media (max-width: 780px) { .ribbon__row { grid-template-columns: 1fr; } }
.ribbon h3 { font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; margin: 12px 0 10px; line-height: 1.18; }
.ribbon h3 em { color: var(--ink-soft); }
.ribbon p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 58ch; }

.quote { text-align: center; }
.quote__mark { font-family: var(--display); font-size: 72px; line-height: 0; color: var(--accent); display: block; height: 30px; }
.quote p { font-family: var(--display); font-size: clamp(24px, 3vw, 40px); font-weight: 380; line-height: 1.3; letter-spacing: -0.015em; max-width: 20ch; margin: 28px auto 0; }
.quote .cite { margin-top: 24px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

/* news teaser */
.news__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 4vw, 56px); }
.news__head h2 { margin-top: 14px; max-width: 16ch; }
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .news__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .news__grid { grid-template-columns: 1fr; } }
.news__card { display: flex; flex-direction: column; padding: 26px 0 0; border-top: 1px solid var(--line); transition: border-color .25s var(--ease); }
.news__card:hover { border-top-color: var(--accent); }
.news__meta { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.news__cat { color: var(--accent); }
.news__card h3 { font-family: var(--display); font-size: 22px; font-weight: 400; line-height: 1.22; letter-spacing: -0.01em; }
.news__card p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin: 12px 0 18px; flex: 1; }
.news__more { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: 8px; align-items: center; }

/* final cta */
.cta-final { background: var(--ink); color: var(--cream-soft); text-align: center; }
.cta-final h2 { color: var(--cream-soft); max-width: 16ch; margin: 0 auto; }
.cta-final p { color: rgba(255,255,255,.74); margin: 18px auto 0; max-width: 50ch; font-size: 17px; line-height: 1.6; }
.cta-final__row { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: var(--cream); padding: clamp(60px, 8vw, 100px) 0 120px; }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
@media (max-width: 800px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; opacity: .7; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { font-size: 14px; opacity: .85; transition: opacity .2s var(--ease); }
.site-footer a:hover { opacity: 1; }
.site-footer__brand img { height: 64px; }
.site-footer__brand p { margin-top: 14px; opacity: .7; max-width: 36ch; font-size: 14px; line-height: 1.6; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; opacity: .6; }
.site-footer__social { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 24px; }
.site-footer__social-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; margin-right: 8px; }
.site-footer__social a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.85; transition: opacity .2s var(--ease), gap .2s var(--ease); }
.site-footer__social a:hover { opacity: 1; gap: 10px; }
.site-footer__social a svg { display: block; }
.site-footer__support { margin-top: 18px; font-size: 12px; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: rgba(247,242,234,0.55); }
.site-footer__support a { color: var(--accent-soft); border-bottom: 1px solid rgba(216,110,156,0.45); padding-bottom: 1px; opacity: 1; transition: color .2s var(--ease), border-color .2s var(--ease); }
.site-footer__support a:hover { color: var(--cream); border-color: var(--accent-soft); }
.site-footer__support .arr { font-size: 11px; opacity: .8; }

/* ============================================================
   LUNA chatbot - identical to inner pages (aiva.js powered)
   ============================================================ */
.aiva-prompt {
  position: fixed; right: 102px; bottom: calc(34px + var(--aiva-lift, 0px)); z-index: 79;
  transition: transform .25s var(--ease), opacity .3s var(--ease), box-shadow .25s var(--ease), bottom .35s var(--ease);
  background: #fff; border: 1px solid var(--accent-soft);
  padding: 15px 52px 15px 24px; border-radius: 24px;
  box-shadow: 0 12px 32px rgba(26,20,16,.16);
  font-family: var(--display); font-style: italic; font-size: 16.5px; line-height: 1; color: var(--ink-soft);
  white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center;
  transition: transform .25s var(--ease), opacity .3s var(--ease), box-shadow .25s var(--ease);
  animation: aivaPromptIn .6s cubic-bezier(.2,.7,.2,1) .8s both;
}
.aiva-prompt::after {
  content: ""; position: absolute; right: -8px; top: 50%;
  width: 16px; height: 16px; background: #fff;
  border-right: 1px solid var(--accent-soft); border-top: 1px solid var(--accent-soft);
  transform: translateY(-50%) rotate(45deg);
}
.aiva-prompt:hover { background: var(--cream-soft); box-shadow: 0 16px 38px rgba(26,20,16,.2); }
.aiva-prompt:hover::after { background: var(--cream-soft); }
.aiva-prompt__close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--ink-soft); cursor: pointer;
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; opacity: .6;
  transition: opacity .2s ease, background .2s ease;
}
.aiva-prompt__close svg { width: 13px; height: 13px; }
.aiva-prompt__close:hover { opacity: 1; background: rgba(26,20,16,.06); }
.aiva-prompt.is-hidden { opacity: 0; pointer-events: none; transform: translateX(20px); animation: none; }
@keyframes aivaPromptIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (max-width: 620px) {
  .aiva-prompt { display: none; }
  /* Op de telefoon: schermvullend en meebewegend met het toetsenbord.
     JS (aiva.js) zet top/height precies op het zichtbare deel zodat het
     typeveld altijd boven het toetsenbord blijft. */
  .aiva-panel {
    left: 0; right: 0; width: 100%;
    top: auto; bottom: 0;
    height: min(560px, 88dvh);
    max-height: 100dvh;
    border-radius: 14px 14px 0 0;
    transform: translateY(14px);
  }
  .aiva-panel.is-open { transform: translateY(0); }
}

.aiva-toggle {
  position: fixed; right: 24px; bottom: calc(24px + var(--aiva-lift, 0px)); z-index: 80;
  width: 64px; height: 64px; border-radius: 999px;
  background: var(--cream) url('assets/aiva-avatar.png') center/cover no-repeat;
  border: 2px solid var(--cream); color: transparent; font-size: 0;
  display: grid; place-items: center; box-shadow: 0 12px 32px rgba(0,0,0,.18);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), bottom .35s var(--ease); overflow: hidden;
}
.aiva-toggle:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.aiva-toggle svg { display: none; }
.aiva-toggle::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 1px solid var(--accent-soft); opacity: .4;
  animation: aivaRing 2.5s ease-in-out infinite;
}
@keyframes aivaRing { 0%, 100% { transform: scale(1); opacity: .4; } 50% { transform: scale(1.12); opacity: 0; } }

.aiva-panel {
  position: fixed; right: 24px; bottom: calc(100px + var(--aiva-lift, 0px)); z-index: 81;
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 140px));
  background: var(--cream-soft); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18); display: flex; flex-direction: column;
  transform-origin: bottom right; transform: scale(.92) translateY(8px); opacity: 0;
  pointer-events: none; transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.aiva-panel.is-open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }

.aiva-head {
  padding: 18px 20px; border-bottom: 1px solid var(--line);
  background: var(--ink); color: var(--cream); border-radius: 12px 12px 0 0;
  display: flex; align-items: center; gap: 12px;
}
.aiva-avatar {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--cream) url('assets/aiva-avatar.png') center/cover no-repeat;
  border: 1px solid var(--accent-soft); color: transparent; font-size: 0;
  flex-shrink: 0; overflow: hidden;
}
.aiva-meta { flex: 1; }
.aiva-meta strong { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: -0.005em; }
.aiva-meta span { display: block; font-size: 11px; opacity: .7; margin-top: 2px; }
.aiva-meta span::before {
  content: ""; display: inline-block; width: 6px; height: 6px; background: #6ad36a;
  border-radius: 999px; margin-right: 6px; vertical-align: middle;
}
.aiva-close { color: var(--cream); width: 32px; height: 32px; border-radius: 999px; opacity: .7; display: grid; place-items: center; transition: opacity .2s var(--ease); }
.aiva-close:hover { opacity: 1; }

.aiva-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.aiva-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; animation: aivaPop .3s var(--ease); }
@keyframes aivaPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.aiva-msg--bot { background: var(--paper); border: 1px solid var(--line); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.aiva-msg--bot a { color: var(--accent); border-bottom: 1px solid var(--accent-soft); }
.aiva-msg--user { background: var(--ink); color: var(--cream); align-self: flex-end; border-bottom-right-radius: 4px; }
.aiva-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius: 4px; }
.aiva-typing span { width: 6px; height: 6px; background: var(--ink-soft); border-radius: 999px; animation: dot 1.2s ease-in-out infinite; }
.aiva-typing span:nth-child(2) { animation-delay: .15s; }
.aiva-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

.aiva-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 8px; }
.aiva-suggestions button { font-size: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.aiva-suggestions button:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.aiva-input { border-top: 1px solid var(--line); padding: 12px 14px; display: flex; gap: 8px; align-items: center; }
.aiva-input input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 14px; outline: none; color: var(--ink); }
.aiva-input button { width: 36px; height: 36px; border-radius: 999px; background: var(--ink); color: var(--cream); display: grid; place-items: center; cursor: pointer; transition: background .2s var(--ease); }
.aiva-input button:hover { background: var(--brown); }

/* ============================================================
   REVEAL
   ============================================================ */
/* reveals only hide when JS is healthy (html.js) - content never gets stuck invisible */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
/* elements already on screen at load: visible instantly, no transition race */
.js .reveal.shown { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* density attribute hooks (set by tweak) */
body[data-density="compact"] { --rhythm: 0.74; }
body[data-density="comfy"]   { --rhythm: 1.16; }

/* ===== Tweaks panel + settings gear - available on EVERY page ===== */
#twk { position: fixed; left: 20px; bottom: 20px; z-index: 300; width: 268px; max-height: calc(100vh - 40px); overflow-y: auto; background: rgba(250,247,241,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(26,20,16,.20); padding: 14px 16px 16px; font-family: var(--sans); color: var(--ink); }
#twk[hidden] { display: none; }
.twk__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.twk__hd h4 { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.twk__x { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--ink-soft); cursor: pointer; }
.twk__x:hover { background: rgba(0,0,0,.06); }
.twk__row { margin-bottom: 14px; }
.twk__row:last-child { margin-bottom: 0; }
.twk__lab { font-size: 10.5px; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 8px; display: block; text-transform: uppercase; }
.twk__seg { display: flex; gap: 3px; background: rgba(26,20,16,.06); border-radius: 9px; padding: 3px; }
.twk__seg button { flex: 1; font-size: 12px; font-weight: 500; padding: 8px 6px; border-radius: 7px; color: var(--ink-soft); cursor: pointer; transition: background .18s, color .18s; }
.twk__seg button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.twk__sw { display: flex; gap: 10px; flex-wrap: wrap; }
.twk__sw button { width: 32px; height: 32px; border-radius: 999px; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: border-color .18s, transform .18s; }
.twk__sw button:hover { transform: scale(1.06); }
.twk__sw button.on { border-color: var(--ink); }
.twk__slider { display: flex; align-items: center; gap: 10px; }
.twk__slider input[type=range] { flex: 1; accent-color: var(--accent); height: 4px; }
.twk__val { font-size: 12px; color: var(--ink-soft); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
/* settings / admin gear - always reachable */
.twk-fab { position: fixed; left: 20px; bottom: 20px; z-index: 299; width: 46px; height: 46px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(36,31,34,.16); display: grid; place-items: center; color: var(--ink); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.twk-fab:hover { transform: rotate(35deg); box-shadow: 0 12px 30px rgba(36,31,34,.22); }
.twk-fab[hidden] { display: none; }
body[data-theme="dark"] #twk { background: rgba(28,21,12,.95); }
body[data-theme="dark"] .twk-fab { background: #221b11; }

/* accent hue slider (glijdende kleurenschaal) */
.twk__hue { margin-top: 10px; }
.twk__hue input[type=range] { width: 100%; height: 12px; border-radius: 999px; -webkit-appearance: none; appearance: none; cursor: pointer; background: linear-gradient(90deg,#ff0040,#ff8a00,#ffe000,#37d300,#00d3c2,#0080ff,#5e36e8,#d600c2,#ff0040); }
.twk__hue input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
.twk__hue input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }

/* ===== live open/closed status pill (status.js) ===== */
.status-pill.is-open .dot { background: #1F8A5B; box-shadow: 0 0 0 0 rgba(31,138,91,.5); animation: mcg-pulse 2.2s infinite; }
.status-pill.is-closed .dot { background: #C8841E; box-shadow: 0 0 0 4px rgba(200,132,30,.16); animation: none; }
@keyframes mcg-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,138,91,.5); } 70% { box-shadow: 0 0 0 7px rgba(31,138,91,0); } 100% { box-shadow: 0 0 0 0 rgba(31,138,91,0); } }
@media (prefers-reduced-motion: reduce) { .status-pill.is-open .dot { animation: none; box-shadow: 0 0 0 4px rgba(31,138,91,.16); } }
/* hero variant - sits on the dark photo */
.status-pill--hero { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .01em; }

.hero__actions { align-items: center; }

/* ===== staff login + Beheer (admin.js) ===== */
/* tweaks gear only for logged-in owner */
body:not(.is-admin) .twk-fab { display: none !important; }
.adm-modal { position: fixed; inset: 0; z-index: 400; display: none; place-items: center; padding: 20px; background: rgba(26,20,16,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.adm-modal.is-open { display: grid; }
.adm-card { position: relative; width: 100%; max-width: 420px; background: var(--paper); color: var(--ink); border-radius: 14px; box-shadow: 0 30px 80px rgba(26,20,16,.32); padding: clamp(26px,4vw,38px); font-family: var(--sans); }
.adm-card--wide { max-width: 540px; max-height: calc(100vh - 40px); overflow-y: auto; }
.adm-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-soft); }
.adm-x:hover { background: rgba(0,0,0,.06); }
.adm-title { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: -.01em; margin: 0; }
.adm-sub { margin: 6px 0 22px; font-size: 14px; color: var(--ink-soft); }
.adm-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.adm-field > span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.adm-field input { font: inherit; font-size: 15px; color: var(--ink); background: var(--cream-soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; outline: none; transition: border-color .2s var(--ease); }
.adm-field input:focus { border-color: var(--accent); }
.adm-err { display: none; margin: 0 0 14px; font-size: 13.5px; color: #D8352F; }
.adm-err.show { display: block; }
.adm-note { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.adm-sec { padding: 22px 0; border-top: 1px solid var(--line); }
.adm-sec:first-of-type { border-top: 0; padding-top: 6px; }
.adm-sec h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
.adm-hint { margin: 10px 0 14px; font-size: 12.5px; color: var(--ink-soft); }
.adm-hours { display: flex; flex-direction: column; gap: 8px; }
.adm-hrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.adm-hday { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); min-width: 130px; }
.adm-hday input { width: 17px; height: 17px; accent-color: var(--accent); }
.adm-htime { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.adm-htime input { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--cream-soft); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
.adm-htime input:disabled { opacity: .45; }
.adm-sec--foot { display: flex; justify-content: flex-end; }
.adm-logout { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #D8352F; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(216,53,47,.4); }
.adm-logout:hover { background: rgba(216,53,47,.08); }
/* footer staff login link */
.site-footer__login { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ===== "Moet ik naar de dokter?" zelf-check banner ===== */
.mind { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: clamp(18px,2vw,24px) clamp(20px,2.4vw,30px); box-shadow: 0 8px 24px rgba(26,20,16,.08); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.mind:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(26,20,16,.14); }
.mind__ic { flex: none; width: 48px; height: 48px; border-radius: 10px; background: var(--mcg-magenta-soft, #FBEDF3); display: grid; place-items: center; color: var(--accent); }
.mind__ic svg { width: 26px; height: 26px; }
.mind__tx { display: flex; flex-direction: column; gap: 3px; min-width: 200px; flex: 1; }
.mind__tx strong { font-family: var(--display); font-weight: 400; font-size: clamp(19px,1.8vw,24px); letter-spacing: -.01em; color: var(--ink); }
.mind__tx span { font-size: 14.5px; color: var(--ink-soft); }
.mind__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: background .25s var(--ease); }
.mind:hover .mind__btn { background: var(--accent-deep, #8E2049); }
.mind__btn .arr { transition: transform .25s var(--ease); }
.mind:hover .mind__btn .arr { transform: translateX(4px); }
@media (max-width: 640px) { .mind__btn { margin-left: 0; width: 100%; justify-content: center; } }

/* "Moet ik naar de dokter?" inside the hero (above the fold) */
.mind--hero { margin-top: clamp(14px, 2vh, 30px); max-width: 660px; padding-top: clamp(14px, 1.7vw, 22px); padding-bottom: clamp(14px, 1.7vw, 22px); transform: translateY(var(--mind-shift, 0px)); }
.mind--hero:hover { transform: translateY(calc(var(--mind-shift, 0px) - 2px)); }
@media (max-width: 980px) { .mind--hero { max-width: 100%; } }

/* whole hero content block shift (tweak: Positie heroblok) */
.hero__inner { transform: translateY(var(--hero-shift, 0px)); }

/* ===== header utilities: search + patiëntenportaal ===== */
.hdr__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; color: inherit; opacity: .9; transition: opacity .2s var(--ease), background .2s var(--ease); }
.hdr__icon:hover { opacity: 1; background: rgba(127,127,127,.16); }
.hdr__portaal { display: inline-flex; align-items: center; gap: 7px; margin-right: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: inherit; opacity: .9; white-space: nowrap; }
.hdr__portaal:hover { opacity: 1; }
@media (max-width: 1180px) { .hdr__portaal span { display: none; } }
@media (max-width: 820px) { .hdr__portaal, .hdr__icon { display: none; } }

/* ===== breadcrumb ===== */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 18px; }
.crumbs a { color: var(--ink-soft); border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--accent); border-color: var(--accent); }
.crumbs span { opacity: .6; }

/* ===== option/hub card "Bekijk →" ===== */
.optioncard__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.optioncard__more .arr { transition: transform .2s var(--ease); }
.optioncard:hover .optioncard__more .arr { transform: translateX(4px); }

/* ===== footer address + social ===== */
.site-footer__addr { font-style: normal; margin-top: 14px; font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.72); }
.site-footer__addr a { color: rgba(255,255,255,.72); border-bottom: 1px solid rgba(255,255,255,.25); }
.site-footer__addr a:hover { color: #fff; }
.site-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.site-footer__social .soc { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; transition: background .2s var(--ease), transform .2s var(--ease); }
.site-footer__social .soc:hover { background: var(--accent); transform: translateY(-2px); }

/* ===== site search overlay ===== */
.srch { position: fixed; inset: 0; z-index: 300; display: none; justify-content: center; align-items: flex-start; padding: 13vh 20px 20px; background: rgba(26,20,16,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.srch.is-open { display: flex; }
.srch__box { width: 100%; max-width: 600px; background: var(--paper); border-radius: 14px; box-shadow: 0 30px 80px rgba(26,20,16,.32); overflow: hidden; }
.srch__bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.srch__bar .srch__ic { color: var(--accent); flex: none; }
.srch__bar input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--ink); }
.srch__close { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; background: none; cursor: pointer; }
.srch__results { list-style: none; margin: 0; padding: 8px; max-height: 54vh; overflow-y: auto; }
.srch__results .srch__hint { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding: 10px 12px 4px; }
.srch__results li a { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 11px 12px; border-radius: 9px; transition: background .15s var(--ease); }
.srch__results li a:hover { background: var(--cream); }
.srch__results .t { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.srch__results .d { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--ink-soft); }
.srch__results .go { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--accent); }
.srch__results .srch__empty { padding: 18px 12px; color: var(--ink-soft); font-size: 14px; }
.srch__results .srch__empty a { color: var(--accent); border-bottom: 1px solid var(--accent); }

/* spoed control: plain icon + label, no chip */
.aiva-spoed { padding: 0; background: none; }

/* keep header icons at full size - never let flex squeeze or webfont reflow shrink them */
.aiva-spoed { flex: 0 0 auto; }
.aiva-spoed svg { flex: 0 0 auto; width: var(--spoed-size, 27px); height: calc(var(--spoed-size, 27px) * 0.86); color: var(--spoed-color, currentColor); }
.hdr__icon svg, .hdr__portaal svg { flex: 0 0 auto; }
.hdr__right { flex-wrap: nowrap; }


/* ===== Rechts-naar-links (Arabisch) ===== */
[dir="rtl"]{direction:rtl;}
[dir="rtl"] .wrap,[dir="rtl"] .section,[dir="rtl"] .pagehero,[dir="rtl"] .hero__inner,[dir="rtl"] .editorial__copy{text-align:right;}
[dir="rtl"] .m-arr,[dir="rtl"] .link-arrow,[dir="rtl"] .linkarrow svg{transform:scaleX(-1);}


/* ===== Aiva spraak-knoppen ===== */
.aiva-mic{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;transition:color .2s,border-color .2s,background .2s;}
.aiva-mic:hover{color:var(--accent);border-color:var(--accent);}
.aiva-mic.is-live{background:var(--accent);border-color:var(--accent);color:#fff;animation:aivaPulse 1.2s infinite;}
.aiva-speaker{display:inline-grid;place-items:center;width:30px;height:30px;margin-left:auto;margin-right:6px;border:none;background:transparent;color:var(--ink-soft);cursor:pointer;transition:color .2s;}
.aiva-speaker:hover{color:var(--accent);}
.aiva-speaker.is-on{color:var(--accent);}
.aiva-speaker .wave{opacity:.25;transition:opacity .2s;}
.aiva-speaker.is-on .wave{opacity:1;}
@keyframes aivaPulse{0%,100%{box-shadow:0 0 0 0 rgba(188,50,101,.45);}50%{box-shadow:0 0 0 7px rgba(188,50,101,0);}}


/* ===== Afspraak-CTA in de header ===== */
.hdr__cta{display:inline-flex;align-items:center;padding:10px 20px;border-radius:999px;background:var(--mcg-ink,#241F22);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;transition:background .2s,color .2s;}
.hdr__cta:hover{background:var(--accent);color:#fff;}
@media(max-width:980px){.hdr__cta{display:none;}}

/* Vast logo + Home-link als terugval wanneer het header-script niet draait
   (bv. lokaal doorklikken). partials.js vervangt de hele slot als het wel draait. */
.hdr-fallback { position: fixed; top: 20px; left: var(--gutter); z-index: 85; display: inline-flex; }
.hdr-fallback img { height: 50px; width: auto; }

/* =====================================================================
   KOP — het logo mag NOOIT wegvallen of platgedrukt worden
   Oorzaak van het verdwenen logo: logo + menu + knoppen pasten niet in de
   kop (begrensd op 1320px). De browser drukte dan het enige samendrukbare
   onderdeel samen: het logo (img met max-width:100%), tot 0px breed. Op een
   telefoon werd het om dezelfde reden platgedrukt.
   Nu: (1) het logo houdt altijd zijn eigen breedte, (2) de kop mag breder
   zijn dan de inhoud (max 1600px), en (3) app.js meet hoeveel ruimte de kop
   écht nodig heeft en kiest de eerste stap hieronder waarbij alles past.
   ===================================================================== */
.hdr__inner { max-width: 1600px; grid-template-columns: auto 1fr auto; }
.hdr__brand { flex: none; min-width: max-content; }
.hdr__brand img { max-width: none; width: auto; flex: none; }
.hdr__brand .brand-dark  { aspect-ratio: 260 / 129; }
.hdr__brand .brand-light { aspect-ratio: 300 / 147; }
@media (max-width: 1100px) { .hdr__inner { grid-template-columns: auto 1fr; } }

/* tijdens het meten geen animaties, anders meet je een tussenstand */
.hdr.hdr--measuring, .hdr.hdr--measuring * { transition: none !important; }

/* stap s1: Patiëntenportaal alleen als slotje, iets krappere ruimtes */
.hdr.hdr--s1 .hdr__inner { gap: 18px; }
.hdr.hdr--s1 .hdr__nav { gap: clamp(8px, 0.9vw, 14px); }
.hdr.hdr--s1 .hdr__right { gap: 10px; }
.hdr.hdr--s1 .hdr__portaal { margin-right: 0; }
.hdr.hdr--s1 .hdr__portaal span { display: none; }
/* stap s2: knop "Afspraak maken" uit de kop (staat ook in de snelbalk en het menu) */
.hdr.hdr--s2 .hdr__cta { display: none; }
/* compact: menu achter de hamburgerknop */
.hdr.hdr--compact .hdr__nav { display: none; }
.hdr.hdr--compact .hdr__burger { display: inline-flex; }
.hdr.hdr--compact .hdr__inner { grid-template-columns: auto 1fr; }
/* c3: zoeken en portaal alleen nog via het menu */
.hdr.hdr--c3 .hdr__icon, .hdr.hdr--c3 .hdr__portaal { display: none; }
/* c4: smalle telefoons — logo iets kleiner (in verhouding!) en krappere ruimtes */
.hdr.hdr--c4 .hdr__brand img { height: 42px; }
.hdr.hdr--c4 .hdr__inner { gap: 12px; }
.hdr.hdr--c4 .hdr__right { gap: 8px; }
/* c5: taalknop alleen met vlag */
.hdr.hdr--c5 #langBtnLabel { display: none; }
.hdr.hdr--c5 .lang__btn { padding: 8px 10px; gap: 5px; }
/* c6: heel smalle schermen — Spoed alleen als (rood) icoon */
.hdr.hdr--c6 .aiva-spoed span { display: none; }

/* open menu: de kop blijft erboven, zodat logo en sluitknop (X) zichtbaar blijven */
body.menu-open .hdr { z-index: 130; }
.mobile-menu__util { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; color: var(--cream-soft); cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.mobile-menu__util:hover { opacity: 1; color: #fff; }

/* =====================================================================
   ZORG-BLOKKEN — altijd volle rijen, nooit een leeg grijs vak
   (12 kolommen; 3 per rij; een rest van 2 wordt 2 halve blokken; een rest
   van 1 wordt een heel blok; precies 7 blokken = 4 + 3)
   ===================================================================== */
@media (min-width: 861px) {
  .tcards { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tcards > * { grid-column: span 4; }
  .tcards > :nth-child(3n+1):nth-last-child(2),
  .tcards > :nth-child(3n+2):last-child { grid-column: span 6; }
  .tcards > :nth-child(3n+1):last-child { grid-column: span 12; }
}
@media (min-width: 1100px) {
  .tcards > :first-child:nth-last-child(7),
  .tcards > :first-child:nth-last-child(7) ~ * { grid-column: span 3; }
  .tcards > :first-child:nth-last-child(7) ~ :nth-child(n+5) { grid-column: span 4; }
}