.legal-page .page { max-width: 1220px; height: auto; min-height: 100svh; padding: 0 44px; }
.legal-page main { display: flex; flex-direction: column; justify-content: center; min-height: auto; max-height: none; margin: 0; gap: 0; padding: 56px 0 70px; }
.skip-link { position: absolute; z-index: 20; top: -70px; left: 24px; padding: 14px 20px; border-radius: 8px; background: var(--wine); color: white; }
.skip-link:focus { top: 16px; }
.back-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #766b71; font-size: 12px; }
.back-link:hover { color: var(--wine); }
.legal-intro { margin-bottom: 40px; }
.legal-page:not(.company-page) .legal-intro { margin-bottom: 20px; }
.legal-eyebrow { margin: 0 0 18px; color: var(--wine); font-size: 9px; font-weight: 600; letter-spacing: 2px; }
.legal-intro h1 { font-size: clamp(48px, 5.5vw, 76px); line-height: 1.12; letter-spacing: -1.8px; }
.legal-intro h1 span { color: var(--wine); }
.legal-intro > p:last-child { margin: 22px 0 0; color: #82787e; font-size: 13px; line-height: 1.9; }
.legal-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.legal-card { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 10px 18px; text-align: center; border-radius: 12px; }
.legal-visual { position: relative; display: grid; place-items: center; width: 100%; height: 184px; margin-bottom: 20px; isolation: isolate; }
.legal-visual img { display: block; width: min(100%, 176px); height: 100%; object-fit: contain; filter: drop-shadow(0 7px 7px #38222d08); }
.legal-card h2 { font-family: Inter, sans-serif; font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -.5px; line-height: 1.3; }
.legal-card:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; }
.legal-card p { max-width: 280px; margin: 12px 0 20px; font-size: 12px; line-height: 1.8; color: #766b71; }
.company-details a { color: var(--wine); text-decoration: underline; text-underline-offset: 4px; }
.company-page .legal-intro h1 { font-size: clamp(40px, 5vw, 66px); }
.company-details { max-width: 800px; padding: 32px; border: 1px solid #e6dfe1; border-radius: 16px; background: #fffdf8; }
.company-details h2 { font-family: Inter, sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -.4px; }
.company-details dl { margin: 22px 0 0; }
.company-details dl > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 17px 0; border-top: 1px solid #e6dfe1; font-size: 13px; line-height: 1.7; }
.company-details dt { color: #82787e; }
.company-details dd { margin: 0; overflow-wrap: anywhere; }
.legal-page footer { flex-wrap: wrap; }
.legal-page .legal-copyright { display: inline-flex; align-items: center; min-height: 44px; color: #998b93; font-size: 8px; letter-spacing: .8px; }
.legal-page .legal-copyright:hover { color: var(--wine); }
.legal-page .footer-home { display: inline-flex; align-items: center; min-height: 44px; color: #766b71; font-size: 11px; }
@media (max-width: 900px) {
  .legal-choices { gap: 20px; }
  .legal-card { padding-inline: 0; }
  .legal-visual { height: 168px; }
}
@media (max-width: 760px) {
  .legal-page .page { padding: 0 20px; }
  .legal-page main { justify-content: flex-start; padding: 36px 0 40px; }
  .back-link { gap: 7px; font-size: 11px; }
  .legal-intro { margin-bottom: 28px; }
  .legal-page:not(.company-page) .legal-intro { margin-bottom: 16px; }
  .legal-intro h1 { font-size: clamp(44px, 9vw, 62px); letter-spacing: -1.2px; }
  .legal-intro > p:last-child { font-size: 12px; }
  .legal-choices { grid-template-columns: 1fr; gap: 28px; }
  .legal-card { padding: 0 10px 12px; }
  .legal-visual { height: 154px; margin-bottom: 12px; }
  .legal-visual img { width: 152px; max-width: 100%; }
  .legal-card h2 { font-size: 21px; }
  .legal-card p { margin-bottom: 20px; }
  .company-page .legal-intro h1 { font-size: clamp(38px, 8.5vw, 54px); }
  .company-details { padding: 24px; }
  .company-details dl > div { grid-template-columns: 1fr; gap: 5px; padding: 15px 0; }
}

/* Keep legal headers aligned with /toekomst while bounding their content. */
.legal-page .page { max-width: 1440px; }
.legal-page main { width: 100%; max-width: 1132px; align-self: center; }
.legal-page .legal-intro > .back-link { margin-bottom: 16px; }
@media (min-width: 761px) {
  .legal-page .page { padding: 0 clamp(25px, 3vw, 48px); }
}
@media (max-width: 360px) {
  .legal-page .page { padding-inline: 14px; }
}

/* Chooser: centred intro and subtle artwork along the page edges. */
.legal-page.legal-chooser .legal-intro { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 44px; }
.legal-chooser::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/juridisch/juridisch-background-v1.webp') center / cover no-repeat; opacity: .3; }
@media (max-width: 760px) { .legal-page.legal-chooser .legal-intro { margin-bottom: 28px; } .legal-chooser::before { opacity: .18; } }