/* Pagina Boeidelen — aanvullend op styles.css */
.hero-page { min-height: auto; max-height: none; }
.hero-page .hero-body { padding-top: 300px; }
.hero-page .hero-drawing { bottom: clamp(170px, 24vh, 250px); width: min(54vw, 860px); }
.statement-grid p.label { font-family: var(--display); font-stretch: 125%; font-size: 12px; font-weight: 600; letter-spacing: 0.25em; line-height: 1.6; }
.main-nav a[aria-current="page"] { color: var(--signal); }

/* Doorsnede */
.opbouw { border-top: 1px solid rgba(237, 234, 227, 0.12); }
.opbouw-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.opbouw-drawing { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.drawing-scroll { overflow-x: auto; }
.opbouw-drawing svg { display: block; width: 100%; height: auto; background: var(--ink); border: 1px solid var(--line-dark); }
.opbouw-drawing figcaption { font-size: 14px; color: var(--faint-on-dark); }
.legend { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line-dark); }
.legend li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--line-dark); }
.legend .key { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 14px; border: 1px solid rgba(237, 234, 227, 0.5); color: var(--text-on-dark); background: var(--slate); }
.legend .is-ours .key { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.legend div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.legend strong { font-family: var(--display); font-stretch: 108%; font-size: 20px; font-weight: 600; }
.legend span:not(.key) { font-size: 16px; line-height: 1.55; color: var(--muted-on-dark); }

/* Vragen */
.vragen { border-top: 1px solid rgba(237, 234, 227, 0.12); }
.vragen-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 96px; align-items: start; }
.vragen-grid .head-title { display: flex; flex-direction: column; gap: 20px; }
.faq { border-bottom: 1px solid var(--line-dark); }
.faq details { border-top: 1px solid var(--line-dark); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-family: var(--display); font-stretch: 108%; font-size: 22px; font-weight: 600; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font-family: var(--body); font-weight: 400; font-size: 28px; line-height: 1; color: var(--signal); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--signal); }
.faq p { margin: 0; padding: 0 0 26px; max-width: 40em; font-size: 17px; line-height: 1.65; color: var(--muted-on-dark); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

.field textarea::placeholder { color: var(--faint-on-dark); }

@media (max-width: 1180px) {
  .opbouw-grid { gap: 40px; }
  .vragen-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 860px) {
  .hero-page .hero-body { padding-top: 220px; }
  .hero-page .hero-drawing { width: 130%; right: -18%; bottom: 330px; opacity: 0.45; }
  .opbouw-grid { grid-template-columns: 1fr; gap: 28px; }
  .opbouw-drawing svg { min-width: 560px; }
  .legend strong { font-size: 18px; }
  .legend span:not(.key) { font-size: 15px; }
  .vragen-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq summary { font-size: 19px; padding: 20px 0; }
  .faq p { font-size: 16px; }
}