/* ============================================================
   DIJKRECHT — design system
   Palette: North Sea ink · legal parchment · brass seal
   Type:    Fraunces (display) · Source Serif 4 (body) · IBM Plex Mono (labels)
   Motif:   dike cross-section + NAP datum ticks
   ============================================================ */

:root{
  --ink:      #0b1a20;
  --deep:     #0f232b;
  --deeper:   #0d1f26;
  --line:     rgba(237,230,214,.14);
  --line-soft:rgba(237,230,214,.08);
  --ivory:    #ede6d6;
  --ivory-dim:#cfc7b4;
  --muted:    #98aaa7;
  --brass:    #c6a45e;
  --brass-soft:rgba(198,164,94,.35);
  --water:    #5e8d89;
  --water-deep:#274a4c;
  --danger:   #c07a5b;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --w-max: 1140px;
  --w-text: 720px;
  /* A form control's boundary is a UI component, so WCAG 1.4.11 wants
     3:1 against its own background. --line is 1.45:1 over --deeper,
     which is right for a hairline rule and wrong for an input. */
  --line-control: rgba(237,230,214,.46);
  --r: 2px;

  --space-section: clamp(88px, 12vw, 148px);
  --dur: .55s;
  --ease: cubic-bezier(.22,.61,.28,.98);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  /* The header is sticky at 74px, so a fragment target would otherwise
     land underneath it and read as the wrong section. */
  scroll-padding-top:82px;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory-dim);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--ivory); text-decoration:none; }
a:hover{ color:var(--brass); }

/* Links inside running text must be identifiable without relying on colour
   (WCAG 1.4.1). Chasing this selector by selector kept missing new markup, so
   the rule is now general: underline any link in body text, then opt out the
   chrome and the controls, which are already distinct by position or shape. */
p a, li a, dd a, .note a, figcaption a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--brass-soft);
}
p a:hover, li a:hover, dd a:hover, .note a:hover, figcaption a:hover{
  text-decoration-color:var(--brass);
}
.nav-links a, .f-list a, .footer-legal a, .crumbs a,
.btn, a.service, .plan a, .brand{ text-decoration:none; }

::selection{ background:var(--brass); color:var(--ink); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:520;
  color:var(--ivory);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.6rem, 6vw, 4.35rem); font-variation-settings:"opsz" 72; }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.7rem);  font-variation-settings:"opsz" 40; }
h3{ font-size:1.32rem; font-weight:540; }
p{ margin:0 0 1.15em; }
strong{ color:var(--ivory); font-weight:600; }
.small{ font-size:.92rem; }

.container{ width:min(var(--w-max), 100% - 48px); margin-inline:auto; }
.narrow{ max-width:var(--w-text); }

/* mono eyebrow — engineering-drawing label */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex; align-items:center; gap:14px;
  margin-bottom:22px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--brass-soft); }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:34px; height:1px; background:var(--brass-soft); }

.lede{ font-size:1.16rem; color:var(--muted); max-width:var(--w-text); }

/* ---------- waterline divider (signature, small form) ---------- */
.waterline{
  border:none; height:26px; margin:0; position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 96px) top/100% 9px no-repeat,
    linear-gradient(var(--line-soft), var(--line-soft)) top/100% 1px no-repeat;
}
.waterline::after{
  content:"NAP +0.00" / "";
  position:absolute; top:6px; right:0;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em;
  color:var(--muted); opacity:.65;
}

/* ---------- header ---------- */
/* Service status band. Sits under the sticky header and scrolls away with the page:
   it is a statement of fact, not an alert, and a permanently pinned strip would
   read as one. Reuses .container and .eyebrow rather than inventing a device. */
.status-band{ background:var(--deeper); border-bottom:1px solid var(--line); }
.status-band-in{
  display:flex; gap:8px 18px; align-items:baseline;
  flex-wrap:wrap; padding:11px 0;
}
.status-band .eyebrow{ color:var(--brass); flex:none; margin:0; }
.status-band p{ margin:0; max-width:76ch; color:var(--ivory-dim); font-size:.92rem; line-height:1.55; }
.status-band a{ color:var(--ivory); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:560px){
  .status-band p{ font-size:.88rem; }
}

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(11,26,32,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:border-color .3s;
}
.site-header.scrolled{ border-bottom-color:var(--line); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand svg{ width:34px; height:34px; }
.brand-name{
  font-family:var(--font-display); font-weight:560; font-size:1.28rem;
  color:var(--ivory); letter-spacing:.01em;
}
.brand-name span{ color:var(--brass); }
.nav-links{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ivory-dim);
}
.nav-links a:hover{ color:var(--brass); }
.nav-cta{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink)!important; background:var(--brass);
  padding:11px 18px; border-radius:var(--r);
  transition:background .25s;
}
.nav-cta:hover{ background:#d6b672; color:var(--ink)!important; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:var(--r);
  width:44px; height:44px; cursor:pointer; color:var(--ivory); }
.nav-toggle svg{ margin:auto; }

/* ---------- hero ---------- */
.hero{ padding:calc(var(--space-section)*.72) 0 0; position:relative; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{ margin-bottom:26px; }
.hero .lede{ margin-bottom:36px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--r); border:1px solid transparent;
  cursor:pointer; transition:all .25s var(--ease);
}
.btn-primary{ background:var(--brass); color:var(--ink); }
.btn-primary:hover{ background:#d6b672; color:var(--ink); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--ivory); background:transparent; }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }

.hero-note{
  margin-top:26px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
  color:var(--muted);
}
.hero-note b{ color:var(--brass); font-weight:500; }

/* dike diagram */
.dike-figure{ position:relative; }
.dike-figure svg{ width:100%; height:auto; }
.dike-caption,
.record-caption{
  margin-top:14px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); text-align:right;
}

/* ---------- trust strip ---------- */
.trust-strip{
  margin-top:calc(var(--space-section)*.7);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--deeper);
}
.trust-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.trust-item .t-value{ overflow-wrap:break-word; }
.trust-item{
  padding:30px 26px;
  border-left:1px solid var(--line-soft);
}
.trust-item:first-child{ border-left:none; }
.trust-item .t-label{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin-bottom:8px;
}
.trust-item .t-value{
  font-family:var(--font-display); font-size:1.18rem; color:var(--ivory); line-height:1.3;
}

/* Until there are figures, the record is one honest sentence rather than three
   empty cells. The full .record grid is kept in an HTML comment on index.html. */
.record-band{
  border:1px solid var(--line); background:var(--deeper);
  padding:28px 30px; margin:2em 0 0; max-width:var(--w-text);
  color:var(--ivory-dim);
}

/* ---------- case record (index) ---------- */
.record{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line); background:var(--deeper);
}
.record-item{ padding:34px 28px; border-left:1px solid var(--line-soft); }
.record-item:first-child{ border-left:none; }
.record-label{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin-bottom:20px;
}
.record-value{
  font-family:var(--font-display); font-size:clamp(2.2rem,4.4vw,3rem);
  font-variation-settings:"opsz" 40; color:var(--ivory);
  line-height:1; margin-bottom:10px;
}
/* empty state — the dash is deliberate, not a loading placeholder */
.record-value.is-empty{ color:var(--water); }
.record-state{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
.record-note{ font-size:.93rem; color:var(--muted); margin:0; }
.record-figure{ margin:0; }

/* ---------- sections ---------- */
.section{ padding:var(--space-section) 0; }
.section-head{ max-width:var(--w-text); margin-bottom:56px; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* what we take down */
.services-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.service{
  background:var(--ink); padding:38px 36px;
  transition:background .3s;
}
.service:hover{ background:var(--deeper); }
.service .s-index{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; color:var(--muted);
  margin-bottom:18px;
}
.service h3{ margin-bottom:10px; }
.service p{ color:var(--muted); margin:0; font-size:.98rem; }
/* guide cards are whole-card links, so the <a> has to fill the cell */
a.service{ display:block; }
a.service h3{ color:var(--ivory); }
a.service:hover h3{ color:var(--brass); }

/* ---------- process ---------- */
.process{ background:var(--deeper); border-block:1px solid var(--line-soft); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; counter-reset:step; }
.step{ position:relative; padding-top:26px; }
.step::before{
  content:""; position:absolute; top:0; left:0; right:-40px; height:1px; background:var(--line);
}
.step:last-child::before{ right:0; }
.step::after{
  content:""; position:absolute; top:-4px; left:0; width:1px; height:9px; background:var(--brass);
}
.step-no{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em; color:var(--brass);
  margin-bottom:14px;
}
.step h3{ font-size:1.16rem; margin-bottom:10px; }
.step p{ font-size:.95rem; color:var(--muted); margin:0; }

/* ---------- standard (manifesto) ---------- */
.standard{ position:relative; overflow:hidden; }
.standard-panel{
  border:1px solid var(--line); background:var(--deep);
  padding:clamp(40px,6vw,72px);
  display:grid; grid-template-columns: .9fr 1.1fr; gap:56px;
  align-items:start;
}
/* the left column ends with a link to the eleven steps; push it to the bottom
   so it lines up with the end of the list beside it */
.standard-panel > div:first-child{ display:flex; flex-direction:column; }
.standard-panel > div:first-child > :last-child{ margin-top:auto; }
.standard-list{ list-style:none; margin:0; padding:0; }
.standard-list li{
  padding:22px 0 22px 34px; border-top:1px solid var(--line-soft); position:relative;
  color:var(--ivory-dim);
}
.standard-list li:first-child{ border-top:none; padding-top:0; }
.standard-list li::before{
  content:"§"; position:absolute; left:0; top:22px;
  font-family:var(--font-display); color:var(--brass); font-size:1.05rem;
}
.standard-list li:first-child::before{ top:0; }
.standard-list b{ color:var(--ivory); font-weight:600; display:block; margin-bottom:4px; }
.standard-list span{ font-size:.95rem; color:var(--muted); }

/* ---------- pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.plan{
  border:1px solid var(--line); border-radius:var(--r); background:var(--deeper);
  padding:40px 34px; display:flex; flex-direction:column;
}
.plan.featured{ border-color:var(--brass-soft); background:var(--deep); position:relative; }
.plan h3{ margin-bottom:4px; }
.plan .p-for{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:24px; }
.plan .p-price{ font-family:var(--font-display); font-size:2.35rem; color:var(--ivory); line-height:1; margin-bottom:4px; }
.plan .p-price small{ font-size:1rem; color:var(--muted); font-family:var(--font-body); }
.plan .p-note{ font-size:.85rem; color:var(--muted); margin-bottom:26px; }
.plan ul{ list-style:none; margin:0 0 32px; padding:0; flex:1; }
.plan li{
  padding:10px 0 10px 26px; border-top:1px solid var(--line-soft);
  font-size:.95rem; color:var(--ivory-dim); position:relative;
}
.plan li::before{ content:"—"; position:absolute; left:0; color:var(--brass); }
.plan .btn{ justify-content:center; }
.pricing-foot{
  margin-top:34px; text-align:center; font-size:.92rem; color:var(--muted);
}
.pricing-foot b{ color:var(--brass); font-weight:500; }

/* ---------- FAQ ---------- */
.faq{ max-width:var(--w-text); margin-inline:auto; }
.faq-item{ border-top:1px solid var(--line-soft); }
.faq-item:last-child{ border-bottom:1px solid var(--line-soft); }
.faq-q{
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:24px 4px; text-align:left;
  font-family:var(--font-display); font-size:1.13rem; font-weight:520; color:var(--ivory);
}
.faq-q .faq-icon{
  flex:none; width:26px; height:26px; border:1px solid var(--line); border-radius:var(--r);
  display:grid; place-items:center; color:var(--brass);
  font-family:var(--font-mono); font-size:.9rem; transition:transform .3s var(--ease);
}
.faq-item.open .faq-icon{ transform:rotate(45deg); border-color:var(--brass-soft); }
.faq-a{
  max-height:0; overflow:hidden; visibility:hidden;
  transition:max-height .45s var(--ease), visibility 0s linear .45s;
}
/* visibility, not just clipping, keeps collapsed answers and the links
   inside them out of the tab order and the accessibility tree */
.faq-item.open .faq-a{
  visibility:visible; transition:max-height .45s var(--ease), visibility 0s;
}
.faq-a-inner{ padding:0 4px 26px; color:var(--muted); max-width:640px; }
.faq-a-inner p:last-child{ margin-bottom:0; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--deep); border-block:1px solid var(--line);
  text-align:center;
}
.cta-band .lede{ margin-inline:auto; margin-bottom:36px; }
.cta-mail{
  display:inline-flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:4px 12px; margin-top:22px;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.1em; color:var(--muted);
}
.cta-mail a{ color:var(--brass); }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line-soft); background:var(--deeper); }
.footer-grid{
  display:grid; grid-template-columns:1.6fr repeat(4, minmax(0, 1fr)); gap:44px;
  padding:64px 0 48px;
}
.footer-brand p{ font-size:.92rem; color:var(--muted); max-width:300px; }
.f-head{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin-bottom:18px;
}
.f-list{ list-style:none; margin:0; padding:0; }
.f-list li{ margin-bottom:12px; }
.f-list a, .f-list span{ font-size:.92rem; color:var(--ivory-dim); }
.f-list a:hover{ color:var(--brass); }
.footer-legal{
  border-top:1px solid var(--line-soft);
  padding:26px 0; display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; color:var(--muted);
}
/* The corporate identity block is an <address>, which is the element the spec
   has for exactly this and which arrives italic by default. In a mono legal
   strip that reads as an error, so the default is reset here rather than left
   for somebody to notice on a live page. */
/* Scoped to .f-corp, not to .footer-legal. The first version of this rule was
   scoped to the footer, and a second <address> then went into the body of
   contact.html, where it rendered italic -- one selector short of the exact
   failure the comment above claims to prevent. */
address.f-corp{ font-style:normal; max-width:none; }
.footer-legal a{ color:var(--muted); }
.footer-legal a:hover{ color:var(--brass); }

/* utility classes replacing former inline styles, so the CSP can drop
   'unsafe-inline' from style-src */
.fb-blurb{ margin-top:18px; }
.page-hero-short{ min-height:52vh; }
.hero-actions-sp{ margin-top:34px; }
.copy-row-sp{ margin-top:16px; }

/* ---------- coverage / reporting tables ---------- */
/* DUTCH COMPOUNDS. Auteursrechthandhaving is 22 characters and renders
   321px wide in an h2 whose box is 272px at a 320px viewport; the hero on
   about.html reached 428px. English never produced a word this long here,
   so nothing had ever told a word it could break, and five pages scrolled
   sideways on a phone.

   break-word only acts when a word does not fit, so it changes nothing
   that already fitted. hyphens:auto makes the break a real Dutch
   hyphenation instead of a hard cut, which the browser can do because
   every page declares lang="nl-NL". */
h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th,
caption, figcaption, legend, label, summary, blockquote, address{
  overflow-wrap:break-word;
}
h1, h2, h3{ hyphens:auto; }

.table-wrap{ overflow-x:auto; margin:2em 0; border:1px solid var(--line); }
.matrix{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:520px; }
.matrix caption{
  caption-side:bottom; padding:14px 18px; text-align:left;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); border-top:1px solid var(--line-soft);
}
.matrix th, .matrix td{ padding:14px 18px; text-align:left; vertical-align:top; border-top:1px solid var(--line-soft); }
.matrix thead th{
  border-top:none; background:var(--deeper); color:var(--brass);
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; font-weight:400;
}
.matrix tbody th{ color:var(--ivory); font-weight:600; white-space:nowrap; }
.matrix td{ color:var(--muted); }
.matrix .record-value{ font-size:1.6rem; }
.pill{
  display:inline-block; padding:3px 10px; border:1px solid var(--line);
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
}
.pill.is-yes{ color:var(--brass); border-color:var(--brass-soft); }
.pill.is-maybe{ color:var(--water); border-color:var(--water-deep); }
.pill.is-limited{ color:var(--ivory-dim); }
.pill.is-no{ color:var(--muted); }

/* ---------- breadcrumbs ---------- */
.crumbs{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--deeper); }
.crumbs ol{
  list-style:none; margin:0; padding:14px 0; display:flex; flex-wrap:wrap; gap:10px;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
}
.crumbs li{ display:flex; align-items:center; gap:10px; color:var(--muted); }
.crumbs li + li::before{ content:"/"; color:var(--brass-soft); }
.crumbs a{ color:var(--ivory-dim); }
.crumbs a:hover{ color:var(--brass); }
.crumbs [aria-current="page"]{ color:var(--muted); }

/* ---------- content pages (about / service / legal) ---------- */
.page-hero{ padding:calc(var(--space-section)*.65) 0 calc(var(--space-section)*.45); }
.page-hero h1{ font-size:clamp(2.3rem,5vw,3.6rem); }
.prose{ max-width:var(--w-text); }
.prose h2{ font-size:1.75rem; margin-top:2.4em; }
.prose h3{ margin-top:1.9em; }
.prose ul{ padding-left:22px; }
.prose li{ margin-bottom:10px; }
.std-more{
  margin:26px 0 0; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.doc-date{
  margin-top:3em; padding-top:1.4em; border-top:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.byline{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:20px 0; margin:0 0 2.6em;
}
.byline p{ margin:0; }
.byline-who{ font-size:.95rem; color:var(--ivory-dim); }
.byline-meta{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:10px!important;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.byline-note{ margin-top:12px!important; font-size:.86rem; color:var(--muted); }
.sources{
  margin-top:3.4em; border-top:1px solid var(--line); padding-top:1.8em;
}
.sources h2{ font-size:1.2rem; margin-top:0; }
.sources ul{ margin:1.2em 0; }
.sources li{ font-size:.94rem; color:var(--muted); }
.sources-note{ font-size:.86rem; color:var(--muted); }
.guide-back{
  margin-top:3em; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.prose .note{
  border:1px solid var(--line); border-left:2px solid var(--brass);
  background:var(--deeper); padding:20px 24px; font-size:.95rem; color:var(--muted);
  margin:2em 0;
}
.checklist{ list-style:none; padding:0; margin:1.5em 0; }
.checklist li{
  padding:14px 0 14px 34px; border-top:1px solid var(--line-soft); position:relative; color:var(--ivory-dim);
}
.checklist li::before{
  content:"✓"; position:absolute; left:0; color:var(--brass); font-family:var(--font-mono);
}

/* ---------- contact / intake ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
/* A grid track is sized by the min-content of what it holds, and an email
   address is one unbreakable word. verification@dijkrecht.com is 26 characters
   and at 320px it widened the whole track by 15px, which moved every element
   on the page and read as a broken layout rather than as a long address.
   min-width:0 lets the track shrink; overflow-wrap lets the address itself
   break instead of hanging out of its card. Both are needed. */
.contact-grid > *{ min-width:0; }

/* The same rule, for every other grid on the site.
   A grid item defaults to min-width:auto, which is the min-content width of
   its contents, and overflow-wrap does not reduce min-content. So a Dutch
   compound stretched its track instead of wrapping inside it:
   "verwijderingsverzoek" in a guide card has a min-content width of 321px,
   the track was 272px, and guides.html scrolled sideways at 320px. The
   contact grid already had this fix for the same reason; the rest of the
   site needed it once the words got longer. */
.hero-grid > *, .trust-grid > *, .services-grid > *, .steps > *,
.pricing-grid > *, .footer-grid > *, .record > *, .standard-panel > *,
.field-row > *, .check-grid > *, .radio-group > *{ min-width:0; }
.mail-card a[href^="mailto:"], .first-email a[href^="mailto:"]{
  overflow-wrap:anywhere;
}
/* A first email is a conversation, not a case file. This block sits inside the
   mail card and carries the two things that make one useful: what to say, and
   what not to attach. */
.first-email{ margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.first-email .checklist{ margin:1em 0; }
.fe-warn{
  margin:18px 0 0; padding:14px 16px; border-left:2px solid var(--brass);
  background:var(--deeper); font-size:.92rem; color:var(--ivory-dim);
}
.form-head{ margin:0 0 10px; font-size:1.3rem; }

.mail-card{
  border:1px solid var(--brass-soft); background:var(--deep); border-radius:var(--r);
  padding:36px;
}
.mail-card .m-label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:12px; }
.mail-addr{
  font-family:var(--font-display); font-size:clamp(1.2rem,2.4vw,1.6rem); color:var(--ivory);
  word-break:break-all; margin-bottom:20px;
}
.copy-row{ display:flex; gap:12px; flex-wrap:wrap; }
.template-block{
  margin-top:26px; border:1px solid var(--line-soft); background:var(--ink);
  padding:22px; font-family:var(--font-mono); font-size:.78rem; line-height:1.8; color:var(--ivory-dim);
  white-space:pre-wrap;
}
form.case-form{ display:grid; gap:20px; }
.field label{
  display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.field input, .field textarea, .field select{
  width:100%; background:var(--deeper); border:1px solid var(--line-control); border-radius:var(--r);
  color:var(--ivory); font-family:var(--font-body); font-size:1rem; padding:14px 16px;
  transition:border-color .25s;
}
.field textarea{ min-height:110px; resize:vertical; }
.field select{ appearance:none; cursor:pointer; padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--brass); }
/* only after the browser has actually reported the field, not while typing */
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid{ border-color:#b4645a; }
.check-row{ display:flex; gap:12px; align-items:flex-start; font-size:.9rem; color:var(--muted); }
.check-row input{ margin-top:5px; accent-color:var(--brass); flex:none; }
.form-note{ font-size:.85rem; color:var(--muted); }

/* native date pickers and select popups render light-on-light without this */
.case-form{ color-scheme:dark; }

.template-details{ margin-top:24px; border-top:1px solid var(--line-soft); padding-top:18px; }
.template-details summary{
  cursor:pointer; list-style:none;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.template-details summary::-webkit-details-marker{ display:none; }
.template-details summary::before{ content:"+ "; color:var(--brass); }
.template-details[open] summary::before{ content:"\2212 "; color:var(--brass); }
.template-details summary:hover{ color:var(--brass); }
.template-details summary:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

.field-hint{ font-size:.85rem; color:var(--muted); margin:8px 0 0; }
/* a soft warning, not a rejection: the field is flagged but still submittable */
.is-soft-invalid{ border-color:#b4645a !important; }
.case-ref{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:14px 0 18px;
}
.case-ref strong{ color:var(--brass); }
.fallback-box{ margin-top:24px; border:1px solid var(--line); border-left:2px solid var(--brass); padding:20px; background:var(--deeper); }
.fallback-box label{
  display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.fallback-box textarea{
  width:100%; background:var(--ink); border:1px solid var(--line-control); border-radius:var(--r);
  color:var(--ivory-dim); font-family:var(--font-mono); font-size:.82rem; line-height:1.6;
  padding:14px 16px; resize:vertical;
}

/* ---------- structured case intake ---------- */
.case-form .fs{
  border:none; border-top:1px solid var(--line-soft);
  margin:0; padding:26px 0 0; display:grid; gap:18px;
}
.case-form .fs:first-of-type{ border-top:none; padding-top:0; }
.case-form legend{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass); padding:0; margin-bottom:2px;
}
.case-form .fs-note{ font-size:.88rem; color:var(--muted); margin:-8px 0 0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field-group{ display:grid; gap:18px; }
.field-group[hidden]{ display:none; }
.radio-group{ display:grid; gap:12px; }
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.req{ color:var(--brass); }
.check-ack{
  border:1px solid var(--line); border-left:2px solid var(--brass);
  background:var(--deeper); padding:16px 18px; align-items:flex-start;
}
.form-note-legal{ border-left:1px solid var(--line); padding-left:16px; }
.form-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.form-status{ font-size:.85rem; margin:0; min-height:1.2em; color:var(--muted); }
.form-status.is-ok{ color:var(--water); }
.form-status.is-error{ color:#d08a80; }
/* visually hidden but reachable by assistive tech */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
/* Without this, a JS failure leaves 21 sections of the home page permanently
   invisible. The markup is all there; only the animation needs scripting. */
.no-js .reveal{ opacity:1; transform:none; }
/* Without the script nothing ever adds .faq-item.open, so every answer
   stays clipped and invisible. Leave them all open instead: the page
   becomes long rather than unreadable, and the plus signs would be lying
   about a control that does nothing. */
.no-js .faq-a{ max-height:none; visibility:visible; transition:none; }
.no-js .faq-icon{ display:none; }
.no-js .faq-q{ cursor:default; }
/* The intake form is entirely client-side, so without JS it cannot work.
   Show the explanation and hide the control that would do nothing. */
.nojs-note{ display:none; }
.no-js .nojs-note{
  display:block; margin:0 0 14px; padding:12px 14px;
  border:1px solid var(--line); border-left:2px solid var(--brass);
  background:var(--deeper); color:var(--ivory-dim); font-size:.92rem;
}
.no-js .case-form .form-actions{ display:none; }
.reveal.visible{ opacity:1; transform:none; }

/* water animation in hero diagram */
.water-anim{ animation:waterDrift 9s ease-in-out infinite alternate; }
@keyframes waterDrift{
  from{ transform:translateX(0); }
  to{   transform:translateX(-46px); }
}

/* ---------- focus / a11y ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--brass); outline-offset:3px; border-radius:var(--r);
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--brass); color:var(--ink); padding:10px 18px;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em;
}
.skip-link:focus{ left:16px; top:16px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .water-anim{ animation:none; }
  *{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

/* ---------- responsive ---------- */
/* Six nav items + CTA leave zero clearance next to the wordmark just above
   the mobile breakpoint. Tighten the tracking in that band only. */
@media (max-width:1150px){
  .nav-links{ gap:22px; }
}

@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .dike-figure{ max-width:640px; }
  .trust-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trust-item:nth-child(3){ border-left:none; }
  .trust-item{ border-top:1px solid var(--line-soft); }
  .trust-item:nth-child(-n+2){ border-top:none; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step::before{ right:0; }
  .standard-panel{ grid-template-columns:1fr; gap:36px; }
  .pricing-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
/* two trust columns leave under 100px of text width on a 320px phone */
@media (max-width:430px){
  .trust-grid{ grid-template-columns:1fr; }
  .trust-item{ padding:24px 20px; border-left:none; border-top:1px solid var(--line-soft); }
  .trust-item:first-child{ border-top:none; }
}

/* The matrix has a 520px floor, so on a phone it scrolled inside .table-wrap.
   That technically avoided page overflow, but the off-screen Notes column still
   set the row height: every row rendered ~290px tall and mostly empty, with no
   hint that anything lay to the right. Below 700px the matrix stacks instead:
   one bordered block per platform, no horizontal scrolling at all. The row
   header already carries the platform name, so the column headings become
   redundant and are hidden from sight but left for assistive tech. */
@media (max-width:700px){
  .table-wrap{ overflow-x:visible; border:none; }
  .matrix{ min-width:0; }
  .matrix, .matrix tbody, .matrix tr, .matrix tbody th, .matrix td{
    display:block; width:auto;
  }
  /* clip:rect() needs a positioned element and browsers do not apply it
     reliably to a table-header-group, so these cells were still laid out
     and stuck out to 363px on legal.html at 320px. clip-path is the modern
     equivalent and does work; display:block makes the absolute positioning
     behave. clip is kept for anything old enough to need it. */
  .matrix thead{
    display:block;
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
    white-space:nowrap; border:0;
  }
  .matrix tr{
    border:1px solid var(--line); padding:20px 18px; margin-bottom:-1px;
    background:var(--deeper);
  }
  .matrix tbody th, .matrix td{ padding:0; border-top:none; white-space:normal; }
  .matrix tbody th{
    font-family:var(--font-display); font-size:1.16rem; margin-bottom:12px;
  }
  .matrix td + td{ margin-top:12px; }
  .matrix caption{ display:block; width:100%; margin-bottom:14px; }
}

@media (max-width:760px){
  .field-row, .check-grid{ grid-template-columns:1fr; }
  .form-actions .btn{ width:100%; text-align:center; }
  .record{ grid-template-columns:1fr; }
  .record-item{ border-left:none; border-top:1px solid var(--line-soft); }
  .record-item:first-child{ border-top:none; }
  body{ font-size:16px; }
  .services-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
}

/* THE NAVIGATION COLLAPSES AT 900px, NOT 760px.
   Seven Dutch labels -- Diensten, Werkwijze, Tarieven, Kennisbank,
   Vertrouwen, Over Dijkrecht, Neem contact op -- plus the wordmark need
   about 815px. The English labels they replaced fitted in 768. So at 768px,
   an iPad held upright, all 28 pages scrolled sideways.

   Only the navigation moves. The rest of the 760px block above is type and
   spacing and is right where it is; widening all of it to 900px would
   change the layout of pages that have nothing wrong with them. */
@media (max-width:900px){
  .nav-links{
    position:fixed; inset:74px 0 auto 0; z-index:55;
    max-height:calc(100dvh - 74px); overflow-y:auto; overscroll-behavior:contain;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--deeper); border-bottom:1px solid var(--line);
    padding:10px 24px 24px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  /* The toggle is a script control. Without the script it is a button
     that does nothing, in place of the navigation it was hiding. */
  .no-js .nav-toggle{ display:none; }
  .no-js .nav-links{
    display:flex; position:static; max-height:none; padding:0 0 18px;
    background:none; border:0;
  }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:16px 0; border-bottom:1px solid var(--line-soft); }
  .nav-links .nav-cta{ margin-top:16px; text-align:center; border-bottom:none; }
  .nav-toggle{ display:grid; place-items:center; }
}

/* ---------- authorisation letter (print) ---------- */
.form-lines{ margin:1.6em 0; }
.form-lines dt{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-top:18px;
}
.form-lines dd{ margin:6px 0 0; }
.rule{ border-bottom:1px solid var(--line); height:1.9em; }
.rule-tall{ height:3.6em; }
.rule-inline{ display:inline-block; min-width:14em; border-bottom:1px solid var(--line); }
.checkline .box{
  display:inline-block; width:.95em; height:.95em; border:1px solid var(--line);
  vertical-align:-1px; margin-right:6px;
}
.doc-meta{ color:var(--muted); font-size:.95rem; }
.doc-note{ color:var(--muted); font-size:.88rem; }

@media print{
  /* the letter is meant to be printed and signed, so drop the chrome and
     invert to ink on paper */
  .site-header, .site-footer, .crumbs, .cta-band, .waterline, .skip-link,
  .status-band{ display:none; }
  html, body{ background:#fff; color:#111; }
  h1, h2, h3, strong, dt{ color:#111; }
  a{ color:#111; text-decoration:underline; }
  .page-hero{ padding:0 0 18px; }
  .section{ padding:0; }
  .container{ width:auto; max-width:none; padding:0; }
  .prose{ max-width:none; }
  .rule, .rule-tall, .rule-inline, .checkline .box{ border-color:#111; }
  .note{ border:1px solid #111; background:#fff; color:#111; }
  .doc-meta, .doc-note, .form-lines dt{ color:#333; }
  h2{ break-after:avoid; }
  .form-lines{ break-inside:avoid; }
}

/* Intake status note, above the case form. Same visual family as .prose .note
   but the form is not inside .prose, so it needs its own selector rather than
   a wrapper that would change the form's layout. */
.form-note-panel{
  border:1px solid var(--line); border-left:2px solid var(--brass);
  background:var(--deeper); padding:16px 18px; margin:0 0 22px;
  font-size:.93rem; line-height:1.6; color:var(--ivory-dim);
}
.form-note-panel strong{ color:var(--ivory); }

/* Four routes out of a 404. A dead end is where a search visitor leaves, and
   the Trust Centre and the notice-recipients page are the two most likely
   destinations for the two audiences who arrive on a broken URL. */
.note-404{ margin:26px 0 0; color:var(--muted); font-size:.95rem; max-width:60ch; }