/* Notariskantoor Zegellak — ivory, near-black and sealing-wax red. Spectral for the voice, Red Hat Text for the rest.
   Signature: a wax seal as the mark, and numbered articles like a deed. */
@font-face { font-family: "Spectral"; src: url("../../fonts/spectral/spectral-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../../fonts/spectral/spectral-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../../fonts/spectral/spectral-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("../../fonts/red-hat-text/red-hat-text-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
:root {
  --bg: #F6F1EA; --paper: #FCF9F4; --ink: #221A17; --muted: #5C514B; --line: #E0D6C8; --wax: #7A1F1F;
  --btn: var(--wax); --on-btn: #FFFFFF; --btn-hover: #5E1616; --focus: var(--ink);
  --display: "Spectral", Georgia, serif; --text: "Red Hat Text", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 400; --display-track: -0.015em; --radius: 0.25rem; --field-radius: 0.25rem; --btn-radius: 0.25rem;
  --menu-font: 400 1.5rem var(--display);
  --k-bg: var(--paper); --k-soft: #F1EBE1; --k-ink: var(--ink); --k-muted: var(--muted); --k-line: var(--line);
  --k-accent: var(--ink); --k-on-accent: #FCF9F4; --k-radius: 0.3rem; --k-font: var(--text);
}
h1 em, h2 em { font-style: italic; color: var(--wax); }
.dx-logo { display: inline-flex; align-items: center; gap: 0.6rem; font: 600 1.5rem/1 var(--display); }
.dx-logo small { font: 500 0.62rem var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.zl-seal { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 47% 53% 50% 48% / 52% 46% 54% 48%; background: radial-gradient(circle at 35% 30%, #A53030, #6A1717 70%); color: #F2D9C9; font: italic 600 1rem/1 var(--display); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.15); }

.zl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
.zl-hero h1 { margin-top: 1rem; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1.02; }
.zl-hero h1 em { display: block; }
.zl-hero__art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 960px) { .zl-hero { grid-template-columns: 1fr; } }

.zl-art { font: 600 0.75rem var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--wax); padding-bottom: 0.75rem; border-bottom: 1px solid var(--ink); margin-bottom: 1rem; }
.zl-lead { margin-top: 1rem; max-width: 52ch; color: var(--muted); }
.zl-deeds { background: var(--paper); }
.zl-list { margin-top: 2.5rem; }
.zl-list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.zl-num { font: italic 400 1.2rem var(--display); color: var(--wax); }
.zl-list h3 { font-size: 1.6rem; font-weight: 400; }
.zl-list p { color: var(--muted); }
.zl-list b { font: 600 1.5rem var(--display); white-space: nowrap; }
@media (max-width: 640px) { .zl-list li { grid-template-columns: 2.5rem minmax(0, 1fr); } .zl-list b { grid-column: 2; } }

.zl-how { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.zl-sub { margin-top: 1.5rem; display: grid; gap: 1rem; }
.zl-sub li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); font-size: 1.1rem; }
.zl-sub span { font: italic 400 1.05rem var(--display); color: var(--wax); }
.zl-how__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 860px) { .zl-how { grid-template-columns: 1fr; } }

.zl-intake { background: var(--paper); }
.zl-office { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.zl-office address { margin-top: 1.5rem; font-size: 1.15rem; line-height: 1.5; }
.zl-office img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 860px) { .zl-office { grid-template-columns: 1fr; } }