/* ==========================================================================
   GET Advocatuur - ontwerplaag
   Versie 2.0.0, 10 oktober 2026

   Port van site.css uit het overdrachtspakket van de klant (6 oktober 2026,
   bronnen/overdracht-6okt/broncode/dist/assets/site.css). De markup en de opmaak van
   die statische site zijn het contract (INTEGRATIE-CONTRACT.md): elke klassenaam
   hieronder staat ook in site.css, met dezelfde maten, tenzij een commentaar zegt
   waarom niet. De Duvique-laag van versie 1.x (eigen shell-, hero-, sectie- en
   knopklassen met het voorvoegsel get-) is weg; het palet van de klant is leidend.

   Wat hier bovenop site.css staat, en waarom:
     - Carla Sans en Inter zelf gehost (site.css rekende op een lokale Carla Sans en
       viel terug op Arial).
     - Een laag die Hello Elementor neutraliseert: het thema laadt reset.css, theme.css
       en header-footer.css voor dit bestand, en een deel daarvan wint op specificiteit
       van de losse klassen uit site.css.
     - Nico's kleurwijzigingen van 10 oktober: lichtere hero's, beeldmerk zonder
       transparantie, de foto van Barendrecht als banner.
     - De klassen die de WordPress-laag nodig heeft en die in site.css ontbreken:
       .nav-tel, .aside-tel, .contact-tel, .get-todo, de formuliervelden van het
       incassoformulier, de honeypot, de adminbalk.
     - Kopmaten die op telefoonbreedte zijn nagemeten voor Carla Sans. De letter is
       unicase en ruim een derde breder dan Arial: "Aansprakelijkheidsrecht" vraagt
       13,5 em, in Arial 9,8 em. Op 390 pixels is er 350 pixels kolom.

   Inhoud
     1.  Lettertypen
     2.  Variabelen
     3.  Hello Elementor neutraliseren
     4.  Grondslag en typografie
     5.  Raster, knoppen en tekstlinks
     6.  Kop van de site
     7.  Hero, kenmerkenbalk, kaarten, stappen, kantoorblok, slotoproep
     8.  Subpagina's: paginakop, inhoud, zijkolom, veelgestelde vragen, redactioneel
     9.  Contact en formulier
     10. Voet en mobiele contactbalk
     11. Breekpunten 1440, 1100, 960, 700, 360
     12. Profiel, oprichtersblok en homepage-aanvullingen
     13. Kopbalk-palet en de hero-foto
     14. Markeringen, toegankelijkheid, beweging, druk
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lettertypen
   Zelf gehost, geen enkel extern verzoek. woff2 eerst, woff als terugval.
   font-display: swap houdt de tekst leesbaar tijdens het laden.

   Carla Sans is unicase: de onderkast heeft dezelfde vorm en hoogte als de bovenkast
   (x-hoogte 723 tegen kapitaalhoogte 722 op 1000 eenheden, nagemeten in het bestand).
   Een alinea wordt daardoor een blok kapitalen; daarom draagt Carla Sans alleen de
   koppen en het wordmerk, en staat de lopende tekst in Inter. Dat is ook wat het
   contract voorschrijft: --head Carla Sans, --body Inter.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Carla Sans";
  src: url("assets/fonts/CarlaSansLight.woff2") format("woff2"),
       url("assets/fonts/CarlaSansLight.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Carla Sans";
  src: url("assets/fonts/CarlaSansRegular.woff2") format("woff2"),
       url("assets/fonts/CarlaSansRegular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Carla Sans";
  src: url("assets/fonts/CarlaSansSemibold.woff2") format("woff2"),
       url("assets/fonts/CarlaSansSemibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Carla Sans";
  src: url("assets/fonts/CarlaSansBold.woff2") format("woff2"),
       url("assets/fonts/CarlaSansBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Inter staat onder de SIL Open Font License; zie assets/fonts/LICENSE-Inter.txt. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-400.woff2") format("woff2"),
       url("assets/fonts/inter-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-500.woff2") format("woff2"),
       url("assets/fonts/inter-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-600.woff2") format("woff2"),
       url("assets/fonts/inter-600.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Variabelen
   Letterlijk het palet van site.css. --gutter is nieuw: site.css zet de breedte
   van .wrap per breekpunt opnieuw, maar de kopbalk krijgt van het thema een eigen
   breedte op hogere specificiteit (zie 3), en die regel moet dezelfde maat kennen.
   Een variabele is de enige manier om dat op een plek te houden.
   -------------------------------------------------------------------------- */

:root {
  --navy: #022150;
  --blue: #4F6E99;
  --paper: #F2F0EB;
  --taupe: #D6CCC2;
  --ink: #1F1F1C;
  --white: #fff;
  --muted: #53606b;
  --line: #d9dbde;
  --max: 1184px;
  --head: "Carla Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", Arial, "Helvetica Neue", sans-serif;
  --gutter: 48px;
}

/* --------------------------------------------------------------------------
   3. Hello Elementor neutraliseren
   Het thema laadt drie stylesheets voor dit bestand. De meeste regels daaruit verliezen
   vanzelf, omdat site.css dezelfde elementen later opnieuw zet. Deze blijven over
   omdat ze op hogere specificiteit staan dan de losse klassen uit site.css:

     theme.css   .site-header:not(.dynamic-header), .site-header .header-inner,
                 .site-footer:not(.dynamic-footer) en body:not(...) .site-main krijgen
                 width 100%, max-width 1140px en padding-inline (0,2,0 en 0,2,1).
     theme.css   .page-content a onderstreept elke link (0,1,1).
     reset.css   a:hover kleurt elke link #336, button:hover en [type=submit]:focus
                 maken elke knop roze (#c36) met witte tekst (0,1,1 en 0,2,0).
     reset.css   label krijgt line-height 1, select een rand en afronding.

   Alles hier staat op (0,2,0) of hoger en voor de componentregels, zodat een
   componentregel op gelijke specificiteit later in het bestand alsnog wint.
   -------------------------------------------------------------------------- */

/* De themakop is na get-header.php een lege schil zonder menu. Hij blijft in de bron
   staan omdat Hello Elementor hem onvoorwaardelijk afdrukt. Dat geldt ook voor de
   skip-link van het thema (class skip-link screen-reader-text); onze eigen skip-link
   heeft alleen de klasse skip-link. */
#site-header,
body.get-site > .skip-link.screen-reader-text {
  display: none;
}

body.get-site header.site-header {
  display: block;
  /* width 100% en margin 0, niet width auto: body.get-site is een flex-kolom en het
     thema zet margin-inline auto op .site-header. Een flex-item met auto-marges in de
     dwarsrichting krimpt tot zijn inhoud (gemeten: 956 van 1920 pixels), dus de beige
     balk stopte links en rechts van het menu. */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  align-self: stretch;
}

body.get-site .site-header .header-inner {
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  max-width: none;
  padding-inline: 0;
  flex-wrap: nowrap;
}

body.get-site main.site-main,
body.get-site footer.site-footer {
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

body.get-site main.site-main {
  padding-block: 0;
}

body.get-site .page-header,
body.get-site .page-content {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Duwt de voet naar beneden op pagina's die korter zijn dan het scherm (de 404). */
body.get-site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

body.get-site main.site-main {
  flex: 1 0 auto;
}

/* reset.css zet a{text-decoration:none}; site.css rekent op de onderstreping van de
   browser voor links in lopende tekst. Terug naar de standaard, op elementniveau. */
a {
  text-decoration: underline;
}

/* a:hover van het thema (0,1,1) wint van elke klasse (0,1,0). Deze regel staat op
   dezelfde specificiteit, komt later, en herstelt de overerving die site.css bedoelt. */
a:hover,
a:active {
  color: inherit;
}

/* Elke <button> en [type=submit] is in reset.css roze met een afronding. Hier terug
   naar niets; .button, .menu-button en .nav-trigger bouwen daar later hun eigen vorm op.
   Deze regel staat op (0,1,0) zodat die componentregels winnen. */
.get-site :where(button, [type="submit"], [type="button"]) {
  background: none;
  color: inherit;
  border: 0;
  border-radius: 0;
  padding: 0;
  font: inherit;
  text-align: inherit;
  white-space: normal;
}

/* Op hover en focus zet reset.css alleen background-color, color en text-decoration
   (roze vlak, witte letters). Die drie moeten op (0,2,0) terug, want button:hover van het
   thema is (0,1,1). Niets anders: de eerste versie van deze regel zette hier ook font en
   padding terug, en dan verloor .nav-trigger (0,1,0) bij mouse-over zijn maat en padding.
   "Diensten" sprong daardoor van 15 naar 18 pixels, de verzendknop en de menuknop ook. */
.get-site :where(button, [type="submit"], [type="button"]):is(:hover, :focus) {
  background: none;
  color: inherit;
  text-decoration: none;
}

/* Knoppen en tekstlinks die hun kleur in site.css op (0,1,0) zetten, krijgen hem hier
   nog een keer op (0,2,0): anders wint a:hover of .page-content a van het thema.
   .button-light en .button-outline staan na .button, want :focus hieronder telt mee. */
.get-site .button,
.get-site .button:focus {
  color: var(--paper);
  background: var(--navy);
}

.get-site .button-light,
.get-site .button-light:focus {
  color: var(--navy);
  background: var(--taupe);
}

.get-site .button-outline,
.get-site .button-outline:focus {
  color: var(--navy);
  background: transparent;
}

.get-site .text-link,
.get-site .contact-email,
.get-site .contact-tel,
.get-site .home-contact-email,
.get-site .skip-link {
  color: var(--navy);
}

.get-site :is(.button, .text-link, .card, .contact-email, .contact-tel, .skip-link, .logo-link) {
  text-decoration: none;
}

/* reset.css haalt de marge van lijsten weg; site.css rekent op de browserstandaard. */
ul,
ol {
  margin-block: 1em;
}

/* --------------------------------------------------------------------------
   4. Grondslag en typografie
   site.css regel 3, een op een, met de Carla Sans-regels uit het contract erbij.
   -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 116px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: .23em;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
input,
textarea {
  touch-action: manipulation;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* Carla Sans is unicase, dus text-transform: uppercase verandert niets aan de vorm van
   de letters. Het is nodig om een andere reden: de onderkastglyphs met een accent zijn
   in dit lettertype niet getekend. De cmap wijst e-trema en e-accent door naar de kale
   letter, zodat "clienten" op het scherm stond waar "cliënten" in de pagina staat. De
   bovenkastvarianten zijn wel getekend; als bovenkast komt het accent terug.

   hyphens: manual, want een afbreekstreepje midden in een kapitaalregel leest als een
   fout. overflow-wrap: break-word is het vangnet voor een woord dat echt niet past; de
   maten in sectie 11 zijn zo gekozen dat het daar niet van komt. */
h1,
h2,
h3 {
  font-family: var(--head);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.16;
  letter-spacing: -.035em;
  text-transform: uppercase;
  hyphens: manual;
  overflow-wrap: break-word;
}

/* site.css: clamp(2.25rem, 4.4vw, 4rem). In Carla Sans brak "Praktische juridische
   hulp voor ondernemers" op 1440 over drie regels in plaats van twee; op 3.9vw (56 in
   plaats van 63 pixels, 11 procent) past het weer op twee. Binnen de 12 procent die het
   contract toestaat. */
h1 {
  font-size: clamp(2.25rem, 3.9vw, 3.5rem);
}

h2 {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}

h3 {
  font-size: 1.5rem;
  letter-spacing: -.02em;
}

h4 {
  font-size: 1.1rem;
  font-weight: 600;
}

p + p {
  margin-top: 1em;
}

p {
  max-width: 70ch;
}

ul {
  padding-left: 1.2em;
}

li + li {
  margin-top: .5em;
}

/* --------------------------------------------------------------------------
   5. Raster, knoppen en tekstlinks
   -------------------------------------------------------------------------- */

.wrap {
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.narrow {
  max-width: 800px;
}

.eyebrow {
  display: block;
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 22px;
}

.section {
  padding-block: 88px;
}

.section-white {
  background: white;
}

.section-taupe {
  background: var(--taupe);
}

.section-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
  margin-bottom: 44px;
}

.section-intro p {
  color: #4a545e;
}

.section-intro .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -45px;
}

.section-intro h2 {
  max-width: 520px;
}

.section-heading {
  margin-bottom: 42px;
  max-width: 640px;
}

.text-link {
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  gap: 16px;
  align-items: center;
  text-decoration: none;
  color: var(--navy);
  line-height: 1.5;
}

.text-link:hover {
  text-decoration: underline;
}

.arrow {
  font-size: 1.35em;
  line-height: 1;
  font-weight: 400;
  transition: transform .2s;
}

.text-link:hover .arrow,
.card:hover .arrow {
  transform: translateX(4px);
}

.actions {
  display: flex;
  gap: 20px 28px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 52px;
  padding: 13px 22px;
  background: var(--navy);
  border: 1px solid var(--navy);
  color: var(--paper);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  transition: background .2s, color .2s;
  white-space: normal;
}

.button:hover {
  background: #153866;
}

.button-light {
  background: var(--taupe);
  border-color: var(--taupe);
  color: var(--navy);
}

.button-light:hover {
  background: var(--paper);
}

.button-outline {
  background: transparent;
  color: var(--navy);
}

.button-outline:hover {
  background: var(--paper);
}

.button[disabled] {
  opacity: .6;
}

.microcopy {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--muted);
  margin-top: 18px;
  max-width: 65ch;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 999;
  background: white;
  padding: 12px 20px;
  color: var(--navy);
}

.skip-link:focus {
  top: 10px;
}

/* --------------------------------------------------------------------------
   6. Kop van de site
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(2, 33, 80, .12);
}

/* Ingelogd staat de adminbalk van WordPress boven de pagina; de sticky kop schuift
   anders onder die balk. 32 pixels, en 46 op de smalle balk onder 783 pixels. */
.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* Tot en met 600 px zet admin-bar.css de balk op position absolute: hij scrolt weg, en
   een vaste offset zou een gat boven de kop laten. */
@media (max-width: 600px) {
  .admin-bar .site-header {
    top: 0;
  }
}

.header-inner {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.logo-link {
  flex-shrink: 0;
}

.logo-link img {
  width: 224px;
  height: 47px;
  object-fit: contain;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav > a,
.nav-trigger {
  font-size: .9375rem;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.main-nav > a:not(.button) {
  padding-block: 34px;
}

.main-nav > a[aria-current="page"],
.nav-trigger[aria-current="page"] {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 9px;
}

.nav-trigger {
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 34px 0;
  color: var(--ink);
}

.chevron {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: rotate(45deg);
  margin: 0 2px 4px;
}

.nav-trigger[aria-expanded="true"] .chevron {
  transform: rotate(225deg);
  margin-top: 6px;
}

.nav-group {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 76px;
  left: -24px;
  min-width: 288px;
  background: white;
  padding: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px #02215014;
}

.dropdown a {
  display: block;
  padding: 10px 12px;
  font-size: .9375rem;
  text-decoration: none;
  color: var(--navy);
}

.dropdown a:hover,
.dropdown a:focus {
  background: var(--paper);
}

[hidden] {
  display: none !important;
}

/* Het telefoonnummer in de kop. Alleen vanaf 1101 pixels, want tussen 961 en 1100
   staat het menu al krap; in het mobiele paneel (sectie 11, 960) is het een gewone rij. */
.nav-tel {
  display: none;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1101px) {
  .nav-tel {
    display: block;
  }
}

.menu-button {
  display: none;
  background: none;
  border: 1px solid var(--navy);
  padding: 10px 14px;
  font-size: .9375rem;
  gap: 12px;
  align-items: center;
  min-height: 44px;
}

.menu-icon {
  width: 18px;
  height: 12px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  position: relative;
}

.menu-icon:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 18px;
  border-top: 1px solid;
}

/* --------------------------------------------------------------------------
   7. Hero, kenmerkenbalk, kaarten, stappen, kantoorblok, slotoproep
   -------------------------------------------------------------------------- */

.hero {
  background: var(--navy);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.home-hero {
  padding-block: 78px 72px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 52px;
  align-items: center;
}

.hero h1,
.hero h2 {
  color: var(--paper);
}

.hero .eyebrow {
  color: var(--taupe);
}

.home-hero h1 {
  max-width: 740px;
}

.hero-lead {
  font-size: 1.1875rem;
  line-height: 1.65;
  margin-top: 27px;
  max-width: 57ch;
  color: #e0e5ed;
}

.hero .text-link {
  color: var(--paper);
}

.hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 0 40px;
  position: relative;
}

/* Nico, 10 oktober: het beeldmerk staat in #4F6E99 op de hero, zonder de
   opacity: .82 uit site.css. De overlay loopt rechts naar diezelfde kleur en de
   lucht op de foto is daar licht, dus zonder hulp smolt het merk in de achtergrond.
   Een zachte navy schaduw eromheen zet het los van de foto zonder de kleur te
   veranderen. */
.hero-art img {
  width: 335px;
  max-width: 100%;
  transform: rotate(-1deg);
  filter: drop-shadow(0 0 22px rgba(2, 33, 80, .6));
}

.hero .actions {
  margin-top: 36px;
}

.benefits {
  background: var(--taupe);
  border-bottom: 1px solid #0221501a;
}

.benefits-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: 27px;
  gap: 24px;
}

.benefit {
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--navy);
  display: flex;
  gap: 12px;
  align-items: center;
}

.benefit:before {
  content: "✓";
  font-size: .875rem;
  color: var(--blue);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 32px;
}

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: 29px 0 31px;
  border-top: 1px solid var(--navy);
  min-width: 0;
  transition: background .2s;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  color: var(--blue);
}

.card-number {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.card h3 {
  margin-bottom: 15px;
}

.card p {
  font-size: 1rem;
  line-height: 1.7;
  flex: 1;
  color: #44515e;
}

.card .card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy);
  margin-top: 28px;
}

.card:hover h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.card-approach {
  background: var(--navy);
  border-top-color: var(--navy);
  padding-inline: 26px;
  margin-bottom: 16px;
}

.card-approach .card-top {
  color: var(--white);
}

.card-approach h3,
.card-approach p,
.card-approach .card-link {
  color: var(--white);
}

.icon {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.step {
  padding-top: 25px;
  border-top: 1px solid #02215040;
}

.step-num {
  font-family: var(--head);
  display: block;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--blue);
  margin-bottom: 30px;
}

.step h3 {
  font-size: 1.375rem;
  margin-bottom: 17px;
  line-height: 1.3;
}

.step p {
  font-size: 1rem;
  color: #465260;
}

.steps + .actions {
  margin-top: 36px;
}

.firm-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 88px;
}

.firm-heading {
  padding-right: 26px;
}

.firm-heading h2 {
  font-size: 3.4rem;
}

.firm-copy p {
  font-size: 1.0625rem;
}

.cta-strip {
  background: var(--navy);
  color: var(--paper);
  padding-block: 65px;
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px 64px;
  align-items: center;
}

.cta-strip h2 {
  color: var(--paper);
  font-size: 2.5rem;
  max-width: 650px;
  margin-bottom: 20px;
}

.cta-strip p {
  max-width: 68ch;
  color: #e0e5ed;
  font-size: 1rem;
}

.cta-strip .microcopy {
  font-size: .875rem;
  color: #c7d1df;
}

.cta-strip .actions {
  margin: 0;
}

.cta-strip .text-link {
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   8. Subpagina's: paginakop, inhoud, zijkolom, veelgestelde vragen, redactioneel
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: 47px 59px;
}

/* Nico, 10 oktober: de bovenkant lichter. Zonder foto loopt de kop van navy naar een
   middenblauw. Papierwit op #2f4f82 haalt 7,2:1, de lead (#e0e5ed) 6,5:1, het
   kruimelpad (#c0cbdc) 5,0:1; alles boven de 4,5:1 van AA. */
.page-hero {
  background-image: linear-gradient(90deg, var(--navy), #2f4f82);
}

.breadcrumbs {
  font-size: .875rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  color: #c0cbdc;
  margin-bottom: 31px;
}

.breadcrumbs a {
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs span[aria-hidden] {
  color: #9daec6;
}

.page-hero h1 {
  max-width: 940px;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
}

.page-hero .hero-lead {
  max-width: 850px;
  font-size: 1.125rem;
}

.page-hero .hero-lead p + p {
  margin-top: 16px;
}

.page-hero .eyebrow {
  margin-bottom: 16px;
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 80px;
  padding-block: 72px 86px;
  align-items: start;
}

.article-body {
  min-width: 0;
}

.content-section {
  scroll-margin-top: 126px;
}

.content-section + .content-section {
  margin-top: 49px;
  padding-top: 41px;
  border-top: 1px solid var(--line);
}

.content-section h2 {
  font-size: 2rem;
  margin-bottom: 22px;
  max-width: 690px;
}

.content-section h3 {
  font-size: 1.3125rem;
  margin: 30px 0 15px;
  line-height: 1.35;
}

.content-section h4 {
  margin: 28px 0 12px;
}

.content-section p {
  font-size: 1.0625rem;
}

.content-section li {
  font-size: 1.0625rem;
}

.content-section .actions {
  gap: 18px;
  margin-top: 23px;
}

.aside {
  position: sticky;
  top: 132px;
  min-width: 0;
}

.aside-card {
  background: var(--taupe);
  padding: 29px 25px;
  margin-bottom: 30px;
}

.aside-card .eyebrow {
  font-size: .8125rem;
  margin-bottom: 16px;
  color: var(--navy);
}

.aside-card h2 {
  font-size: 1.625rem;
  margin-bottom: 18px;
}

.aside-card p {
  font-size: .9375rem;
  line-height: 1.65;
}

.aside-card .button {
  margin-top: 24px;
  width: 100%;
  gap: 12px;
  padding-inline: 14px;
}

/* De belregel onder de knop in de zijkolomkaart (contract, telefoonnummer overal
   klikbaar). Staat na de knop, dus p + p geldt niet; vandaar een eigen marge. */
.aside-card .aside-tel {
  margin-top: 14px;
  font-size: .9375rem;
  color: var(--navy);
}

.aside-tel a {
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}

.aside-nav h2 {
  font-family: var(--body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.aside-nav a {
  display: block;
  font-size: .9375rem;
  line-height: 1.5;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--navy);
}

.aside-nav a[aria-current="page"] {
  font-weight: 700;
}

.aside-nav a:hover {
  text-decoration: underline;
}

.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  padding: 20px 38px 20px 0;
  list-style: none;
  position: relative;
  line-height: 1.5;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:after {
  content: "+";
  position: absolute;
  right: 3px;
  top: 20px;
  font-size: 1.4rem;
  font-weight: 400;
}

.faq details[open] summary:after {
  content: "−";
}

.faq-answer {
  padding-bottom: 24px;
}

.faq-answer p {
  font-size: 1rem;
  color: #44515e;
}

.related {
  padding-top: 30px;
  border-top: 1px solid var(--line);
  margin-top: 50px;
}

.related .eyebrow {
  margin-bottom: 18px;
}

.related-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.editorial-rows {
  padding-bottom: 12px;
}

.editorial-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 90px;
  padding-block: 56px;
  border-bottom: 1px solid var(--line);
}

.editorial-row:first-child {
  padding-top: 0;
}

.editorial-row:last-child {
  border-bottom: 0;
}

.editorial-row h2 {
  font-size: 2.2rem;
  max-width: 410px;
}

.editorial-row p {
  font-size: 1.0625rem;
}

.profile-teaser {
  padding: 40px;
  background: var(--taupe);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
}

.profile-teaser h2 {
  font-size: 2.2rem;
}

.profile-teaser .eyebrow {
  color: var(--navy);
}

.profile-teaser p {
  font-size: 1.0625rem;
}

.concept-note {
  padding: 17px 21px;
  border-left: 3px solid var(--blue);
  background: #e5e9ee;
  font-size: .9375rem;
  line-height: 1.6;
  margin-bottom: 32px;
}

.pending-field {
  display: inline;
  border-bottom: 1px dotted #7a684e;
  color: #625748;
  font-size: .94em;
}

.article-meta {
  display: flex;
  gap: 18px;
  font-size: .875rem;
  color: #c1cbd9;
  margin-top: 24px;
}

.article-layout {
  grid-template-columns: minmax(0, 760px) 256px;
  gap: 85px;
}

.article-layout .content-section h2 {
  font-size: 1.75rem;
}

.article-layout .content-section + .content-section {
  border: 0;
  margin-top: 38px;
  padding-top: 0;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.knowledge-card {
  padding: 29px 28px 28px;
  background: white;
  border-top: 3px solid var(--blue);
}

.knowledge-card .eyebrow {
  font-size: .8125rem;
  margin-bottom: 24px;
}

.knowledge-card h2 {
  font-size: 1.7rem;
  line-height: 1.25;
  margin-bottom: 20px;
}

.knowledge-card p {
  font-size: 1rem;
  line-height: 1.7;
}

.knowledge-card .text-link {
  margin-top: 30px;
}

/* Gerelateerde artikelen binnen de tekstkolom van een dienstpagina ([get_gerelateerd]):
   daar is geen ruimte voor drie kaarten naast elkaar, dus een onder de ander. */
.article-body .knowledge-grid {
  grid-template-columns: 1fr;
  gap: 22px;
}

.legal-layout {
  grid-template-columns: minmax(0, 780px) 240px;
  gap: 75px;
}

.legal-layout .content-section h2 {
  font-size: 1.65rem;
}

.legal-layout .content-section p,
.legal-layout .content-section li {
  font-size: 1rem;
}

.legal-layout .content-section + .content-section {
  margin-top: 35px;
  padding-top: 30px;
}

.link-stack {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.unavailable {
  font-size: .875rem;
  color: var(--muted);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   9. Contact en formulier
   site.css regel 7, plus de velden van het incassoformulier (contract, paragraaf 7):
   select, fieldset.incasso-fields met legend, .radio-group, bestandsupload,
   .form-error, .form-result-error, .form-check, .file-help, .file-list, honeypot.
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 92px;
  align-items: start;
}

.contact-details h2 {
  font-size: 1.875rem;
  margin-bottom: 23px;
}

.contact-details h3 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.contact-block + .contact-block {
  margin-top: 39px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.contact-email {
  display: inline-block;
  font-size: 1.35rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--navy);
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

/* Het telefoonnummer naast het mailadres op de contactpagina: zelfde vorm als het
   mailadres, een maat kleiner, en nooit afgebroken. */
.contact-tel {
  display: block;
  width: fit-content;
  font-size: 1.2rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--navy);
  margin-bottom: 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.contact-details p {
  font-size: 1rem;
}

.contact-details address {
  font-size: 1rem;
  font-style: normal;
  line-height: 1.8;
  margin-top: 19px;
}

.contact-form-wrap {
  background: white;
  padding: 36px 38px;
}

.contact-form-wrap h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.form-demo {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 28px;
}

.field {
  margin-bottom: 21px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* line-height staat erbij omdat reset.css van het thema label op line-height 1 zet. */
.field label {
  display: block;
  color: var(--navy);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 7px;
}

.optional {
  font-weight: 400;
  color: var(--muted);
  font-size: .875rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-width: 0;
  min-height: 49px;
  border: 1px solid #aab0b7;
  background: #fcfcfb;
  border-radius: 0;
  padding: 10px 13px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--navy);
}

.field textarea {
  resize: vertical;
  min-height: 134px;
  line-height: 1.5;
}

/* De keuze "Waarmee kunnen we je helpen?". Eigen pijltje in de kleur van het menu-
   chevron, zodat de select er in elke browser hetzelfde uitziet als de invoervelden. */
.field select {
  display: block;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231F1F1C' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  cursor: pointer;
}

.field .help {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 7px;
}

/* De incassovelden als groep. Het thema zet fieldset en legend op zijn eigen maten,
   vandaar dat border, padding en margin hier allemaal expliciet staan. */
.incasso-fields {
  border: 1px solid var(--line);
  padding: 22px 20px 4px;
  margin: 4px 0 26px;
  min-width: 0;
}

.incasso-fields legend {
  display: block;
  float: none;
  width: auto;
  max-width: 100%;
  padding: 0 8px;
  margin-left: -8px;
  color: var(--navy);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}

/* Keuzerondjes naast elkaar. .radio-group kan een fieldset zijn (met legend) of een
   div in een .field (met een label erboven); beide vormen krijgen dezelfde maat. */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.radio-group legend {
  display: block;
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 9px;
  color: var(--navy);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  flex: none;
  accent-color: var(--navy);
}

/* Bestandsupload: gestippelde rand om te laten zien dat hier iets heen mag, en de
   knop in de kleur van de lichte knop. */
.field input[type="file"] {
  padding: 9px 13px;
  min-height: 0;
  border-style: dashed;
  cursor: pointer;
}

.field input[type="file"]::file-selector-button {
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--taupe);
  border: 0;
  padding: 8px 14px;
  margin-right: 14px;
  cursor: pointer;
}

.file-help {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 7px;
}

.file-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
}

.file-list li + li {
  margin-top: 4px;
}

/* Foutmelding onder een veld. Het rood haalt 6,6:1 op wit. */
.form-error {
  display: block;
  margin-top: 6px;
  color: #a8321f;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
}

.field [aria-invalid="true"] {
  border-color: #a8321f;
}

.form-small {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 19px 0;
}

.form-small a {
  color: var(--navy);
}

/* Het vinkje voor de privacyverklaring. WCAG 2.2 (2.5.8) vraagt een doel van
   minstens 24 bij 24 pixels; het vak is 22 plus zijn rand en het label ernaast telt mee. */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 21px;
}

.form-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 3px 0 0;
  accent-color: var(--navy);
}

.form-check label {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.55;
}

/* De honeypot mag niet met display:none verdwijnen: sommige bots vullen juist de
   velden in die verstopt zijn. Buiten beeld, maar wel in de DOM. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-wrap .button {
  width: 100%;
  margin-top: 5px;
}

.form-result {
  padding: 20px;
  background: var(--paper);
  border-left: 3px solid var(--blue);
  font-size: 1rem;
  margin-top: 22px;
}

.form-result:focus {
  outline: none;
}

.form-result p {
  font-size: 1rem;
}

/* De melding bovenaan het formulier (na verzenden, of bij een fout) staat voor de
   velden en heeft dus ruimte onder zich nodig in plaats van erboven. */
.contact-form-wrap > .form-result,
.contact-form > .form-result {
  margin: 0 0 24px;
}

.form-result-error {
  border-left-color: #a8321f;
  background: #fbeeec;
}

.contact-location {
  margin-top: 62px;
  padding: 39px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.contact-location h2 {
  font-size: 1.9rem;
  margin-bottom: 20px;
}

.contact-location p {
  font-size: 1rem;
}

.contact-location address {
  font-style: normal;
  font-size: 1rem;
  margin-bottom: 15px;
}

/* --------------------------------------------------------------------------
   10. Voet en mobiele contactbalk
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--paper);
  padding-block: 56px 26px;
  border-top: 1px solid #ffffff26;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1.05fr 1fr;
  gap: 40px;
}

.footer-brand img {
  width: 220px;
  height: auto;
  margin-bottom: 25px;
}

.footer-brand p {
  font-size: .9375rem;
  color: #bdc9da;
  max-width: 235px;
}

/* Logo van De Geschillencommissie onder de merkregel. Twee klassen diep, zodat de
   breedte en marge van ".footer-brand img" (logo GET, ook in de mobiele regels)
   hier niet doorwerken. */
.footer-brand .footer-keurmerk {
  display: inline-block;
  margin-top: 22px;
}

.footer-brand .footer-keurmerk img {
  display: block;
  width: 116px;
  height: auto;
  margin-bottom: 0;
}

/* Inter, en daarom ook geen kapitalen: de uppercase van sectie 4 is er voor Carla Sans. */
.footer-column h2 {
  font-family: var(--body);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--paper);
  margin: 5px 0 18px;
  text-transform: none;
}

.footer-column a {
  display: block;
  color: #d3dbe6;
  font-size: .875rem;
  line-height: 1.6;
  text-decoration: none;
  padding: 4px 0;
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer-column p {
  font-size: .875rem;
  color: #d3dbe6;
}

.footer-column address {
  font-size: .875rem;
  line-height: 1.8;
  font-style: normal;
  color: #d3dbe6;
}

.footer-column .mail-link {
  overflow-wrap: anywhere;
}

.footer-bottom {
  margin-top: 44px;
  padding-top: 23px;
  border-top: 1px solid #ffffff25;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  font-size: .8125rem;
  color: #bdc9da;
}

.footer-bottom a {
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: flex-end;
  max-width: 630px;
}

.footer-bottom p {
  font-size: .8125rem;
}

/* Vanaf 961 volgt de onderbalk het kolomraster van .footer-grid: het copyright staat
   onder het logo, de juridische links in drie kolommen exact onder Diensten, Ons kantoor
   en Contact. Zelfde fr-verhouding en kolomafstand, dus de lijnen vallen samen. */
@media (min-width: 961px) {
  .footer-bottom {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1.05fr 1fr;
    column-gap: 40px;
  }

  .footer-legal {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: 1fr 1.05fr 1fr;
    gap: 6px 40px;
    justify-content: normal;
    max-width: none;
  }
}

@media (min-width: 961px) and (max-width: 1100px) {
  .footer-bottom,
  .footer-legal {
    column-gap: 28px;
  }
}

/* Tot 960 is .footer-grid twee kolommen; de links volgen die twee kolommen. */
@media (max-width: 960px) {
  .footer-bottom .footer-legal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    align-self: stretch;
  }
}

/* Extra klasse in de selector: het blok van 700 verderop zet gap 9px 18px. */
@media (max-width: 700px) {
  .footer-bottom .footer-legal {
    column-gap: 28px;
  }
}

.mobile-contact {
  display: none;
}

/* --------------------------------------------------------------------------
   11. Breekpunten 1440, 1100, 960, 700, 360
   In de volgorde van site.css. De kopmaten die afwijken staan toegelicht; ze zijn
   nagemeten met de breedtes uit sectie 1 (Carla Sans: 0,59 em per teken).
   -------------------------------------------------------------------------- */

@media (min-width: 1440px) {
  .home-hero {
    padding-block: 87px 82px;
  }

  .hero-art img {
    width: 370px;
  }
}

@media (max-width: 1100px) {
  :root {
    --gutter: 32px;
  }

  .main-nav {
    gap: 20px;
  }

  .logo-link img {
    width: 190px;
  }

  .main-nav > a,
  .nav-trigger {
    font-size: .875rem;
  }

  .main-nav > .button {
    padding: 12px 16px;
  }

  .hero-grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 28px;
  }

  .hero-art {
    padding-left: 0;
  }

  .content-layout {
    gap: 45px;
    grid-template-columns: minmax(0, 1fr) 245px;
  }

  .contact-layout {
    gap: 45px;
  }

  .footer-grid {
    gap: 28px;
  }

  .editorial-row {
    gap: 55px;
  }

  .firm-grid {
    gap: 54px;
  }

  .section-intro {
    gap: 40px;
  }

  .contact-form-wrap {
    padding: 29px;
  }

  .article-layout,
  .legal-layout {
    gap: 40px;
    grid-template-columns: minmax(0, 1fr) 220px;
  }

  /* Drie kaarten naast elkaar op 961 pixels geven een kolom van 282 pixels, en
     "Aansprakelijkheidsrecht" vraagt op 1.5rem 323. Op 1.25rem is het 269. */
  .card h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 960px) {
  .header-inner {
    height: 82px;
  }

  .logo-link img {
    width: 213px;
    height: 45px;
  }

  .menu-button {
    display: inline-flex;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 18px 32px 28px;
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 25px #02215016;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav > a:not(.button),
  .nav-trigger {
    font-size: 1.125rem;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
  }

  /* In het paneel is het telefoonnummer een gewone rij. */
  .nav-tel {
    display: block;
  }

  .main-nav > .button {
    margin-top: 20px;
    align-self: flex-start;
    font-size: 1rem;
    min-width: 200px;
  }

  .nav-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .dropdown {
    position: static;
    box-shadow: none;
    background: transparent;
    border: 0;
    padding: 4px 0 12px 16px;
    min-width: 0;
  }

  .dropdown a {
    font-size: 1rem;
    padding: 10px 0;
  }

  .main-nav > a[aria-current="page"],
  .nav-trigger[aria-current="page"] {
    text-underline-offset: 5px;
  }

  .section {
    padding-block: 67px;
  }

  .section-intro {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .section-intro p {
    max-width: 70ch;
  }

  .hero-grid {
    grid-template-columns: 1.65fr .8fr;
  }

  .home-hero {
    padding-block: 65px;
  }

  .home-hero h1 {
    font-size: 3.25rem;
  }

  .hero-lead {
    font-size: 1.0625rem;
  }

  .benefits-inner {
    gap: 18px;
  }

  .benefit {
    font-size: .875rem;
    gap: 8px;
  }

  /* site.css houdt hier drie kolommen tot 700 pixels. Op 700 is een kolom 203 pixels
     en past geen enkele dienstnaam in Carla Sans meer op een regel ("Contractenrecht"
     vraagt 205). Twee kolommen geven 317 pixels; "Aansprakelijkheidsrecht" is 291. */
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 26px;
  }

  .card h3 {
    font-size: 1.35rem;
  }

  .card-approach {
    padding-inline: 20px;
  }

  .steps {
    gap: 25px;
  }

  .step h3 {
    font-size: 1.25rem;
  }

  .firm-heading h2 {
    font-size: 2.7rem;
  }

  .firm-grid {
    gap: 40px;
  }

  .cta-grid {
    grid-template-columns: 1fr auto;
    gap: 35px;
  }

  .cta-strip h2 {
    font-size: 2rem;
  }

  .content-layout {
    grid-template-columns: 1fr;
    gap: 52px;
    padding-block: 55px 68px;
  }

  .aside {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .aside-card {
    margin: 0;
  }

  .article-body {
    max-width: none;
  }

  .contact-layout {
    grid-template-columns: .8fr 1.2fr;
    gap: 30px;
  }

  .contact-email {
    font-size: 1.05rem;
  }

  .contact-tel {
    font-size: 1rem;
  }

  .contact-details h2 {
    font-size: 1.625rem;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* site.css houdt hier drie kolommen. Op 820 pixels is een kaart dan 236 breed en
     breekt "prijsafspraken" in de kop; op twee kolommen is het 364. Een oneven
     laatste kaart vult de rij, anders staat hij verweesd onder twee andere. */
  .knowledge-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .knowledge-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .knowledge-card {
    padding: 25px 20px;
  }

  .knowledge-card h2 {
    font-size: 1.45rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 38px 60px;
  }

  .footer-brand p {
    max-width: 300px;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .footer-legal {
    justify-content: flex-start;
    max-width: none;
  }

  .editorial-row {
    grid-template-columns: .9fr 1.1fr;
    gap: 38px;
  }

  .editorial-row h2 {
    font-size: 1.85rem;
  }

  .profile-teaser {
    gap: 38px;
    padding: 30px;
  }

  .profile-teaser h2 {
    font-size: 1.85rem;
  }

  .article-meta {
    margin-top: 25px;
  }

  .page-hero h1 {
    font-size: 2.7rem;
  }
}

@media (max-width: 700px) {
  :root {
    --gutter: 20px;
  }

  body {
    font-size: 17px;
  }

  .header-inner {
    height: 76px;
    gap: 16px;
  }

  .logo-link img {
    width: 192px;
    height: 41px;
  }

  .main-nav {
    top: 76px;
    padding-inline: 20px;
    max-height: calc(100dvh - 76px);
  }

  .menu-button {
    font-size: .875rem;
    padding: 9px 11px;
    gap: 10px;
  }

  .hero-grid {
    display: block;
    position: relative;
  }

  .home-hero {
    padding-block: 46px 48px;
  }

  .home-hero h1 {
    font-size: 2.45rem;
    max-width: 540px;
    position: relative;
    z-index: 1;
    line-height: 1.13;
  }

  .home-hero .eyebrow {
    font-size: .8125rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
  }

  .hero-art {
    position: absolute;
    right: -45px;
    top: 20px;
    width: 160px;
    opacity: .17;
    z-index: 0;
    pointer-events: none;
  }

  .hero-art img {
    width: 100%;
  }

  .hero-lead {
    position: relative;
    z-index: 1;
    margin-top: 23px;
    font-size: 1.0625rem;
    line-height: 1.65;
  }

  .hero .actions {
    gap: 23px;
    margin-top: 29px;
    position: relative;
    z-index: 1;
  }

  .home-hero .actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .button {
    min-height: 50px;
    font-size: .9375rem;
    padding: 13px 20px;
  }

  .text-link {
    font-size: .9375rem;
  }

  .benefits-inner {
    grid-template-columns: 1fr 1fr;
    gap: 18px 13px;
    padding-block: 23px;
  }

  .benefit {
    align-items: flex-start;
    font-size: .875rem;
    gap: 8px;
  }

  .section {
    padding-block: 48px;
  }

  .section-intro {
    margin-bottom: 30px;
    gap: 20px;
  }

  .eyebrow {
    font-size: .8125rem;
    margin-bottom: 16px;
  }

  h2 {
    font-size: 1.95rem;
  }

  .section-intro p {
    font-size: 1rem;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .card {
    padding-block: 25px 28px;
  }

  .card-top {
    margin-bottom: 22px;
  }

  .card h3 {
    /* clamp in plaats van 1.55rem: "Aansprakelijkheidsrecht" is 13,5 em in Carla Sans en
       brak op 390 px (350 px kolom) midden in het woord. 5.8vw is 22,6 px op 390 en
       20,9 px op 360, dan past het woord op 304 respectievelijk 281 px. */
    font-size: clamp(1.25rem, 5.8vw, 1.55rem);
    margin-bottom: 12px;
  }

  .card p {
    font-size: 1rem;
  }

  .card .card-link {
    margin-top: 22px;
  }

  .card-approach {
    padding-inline: 24px;
    margin-top: 5px;
    margin-bottom: 0;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 29px;
  }

  .step {
    padding-top: 22px;
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 8px 14px;
  }

  .step-num {
    font-size: 1.6rem;
    grid-row: 1 / 3;
    margin: 2px 0 0;
  }

  .step h3 {
    font-size: 1.3rem;
    margin-bottom: 4px;
  }

  .step p {
    grid-column: 2;
    font-size: 1rem;
  }

  .section-heading {
    margin-bottom: 28px;
  }

  .firm-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .firm-heading {
    padding: 0;
  }

  .firm-heading h2 {
    font-size: 2.25rem;
    max-width: 360px;
  }

  .firm-copy p {
    font-size: 1rem;
  }

  .cta-strip {
    padding-block: 46px;
  }

  .cta-grid {
    grid-template-columns: 1fr;
    gap: 27px;
  }

  .cta-strip h2 {
    font-size: 2rem;
    margin-bottom: 19px;
  }

  .cta-strip .microcopy {
    margin-top: 15px;
  }

  .site-footer {
    padding-block: 40px 100px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 31px 28px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand img {
    width: 210px;
    margin-bottom: 20px;
  }

  .footer-brand p {
    max-width: 100%;
    font-size: .9375rem;
  }

  .footer-column h2 {
    font-size: .875rem;
    margin-bottom: 14px;
  }

  .footer-column a,
  .footer-column p,
  .footer-column address {
    font-size: .875rem;
  }

  .footer-bottom {
    margin-top: 30px;
    gap: 15px;
    font-size: .8125rem;
  }

  .footer-legal {
    gap: 9px 18px;
  }

  .mobile-contact {
    display: grid;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: var(--paper);
    grid-template-columns: .9fr 1.3fr;
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
    gap: 12px;
    box-shadow: 0 -3px 20px #02215014;
    border-top: 1px solid #d4d7dd;
  }

  .mobile-contact a {
    min-height: 45px;
    justify-content: center;
    padding: 10px 14px;
    font-size: .9375rem;
  }

  .mobile-contact .text-link {
    border: 1px solid #02215030;
  }

  .contact-page .mobile-contact {
    display: none;
  }

  .contact-page .site-footer {
    padding-bottom: 33px;
  }

  .page-hero {
    padding-block: 26px 39px;
  }

  .breadcrumbs {
    font-size: .8125rem;
    margin-bottom: 25px;
    gap: 9px;
  }

  /* site.css: 2.25rem, en 2rem onder 360. "Aansprakelijkheidsrecht" (13,5 em) vraagt
     op 36 pixels 485 pixels; de kolom is er 350 op een telefoon van 390. Op 6.6vw is de
     kop 25,7 pixels en het woord 346. Dat is 28 procent kleiner dan site.css en dus
     meer dan de 12 procent uit het contract; zie het rapport. Boven 545 pixels loopt
     de clamp weer op naar de maat van site.css. In Carla Sans heeft een kop van 26
     pixels dezelfde letterhoogte als een Arial-kop van 36 (geen onderkast). */
  .page-hero h1 {
    font-size: clamp(1.5rem, 6.6vw, 2.25rem);
    line-height: 1.15;
  }

  .page-hero .hero-lead {
    font-size: 1.0625rem;
  }

  .content-layout {
    padding-block: 43px 48px;
    gap: 42px;
  }

  .content-section h2 {
    font-size: 1.75rem;
    margin-bottom: 18px;
  }

  .content-section p,
  .content-section li {
    font-size: 1rem;
  }

  .content-section + .content-section {
    margin-top: 36px;
    padding-top: 31px;
  }

  .content-section h3 {
    font-size: 1.25rem;
    margin-top: 26px;
  }

  .aside {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .aside-card {
    padding: 27px;
  }

  .aside-card .button {
    width: auto;
  }

  .faq summary {
    font-size: 1rem;
  }

  .faq-answer p {
    font-size: 1rem;
  }

  .editorial-row {
    grid-template-columns: 1fr;
    gap: 23px;
    padding-block: 33px;
  }

  .editorial-row h2 {
    font-size: 1.8rem;
    max-width: none;
  }

  .editorial-row p {
    font-size: 1rem;
  }

  .profile-teaser {
    grid-template-columns: 1fr;
    gap: 23px;
    padding: 26px;
  }

  .profile-teaser h2 {
    font-size: 1.8rem;
  }

  .profile-teaser p {
    font-size: 1rem;
  }

  .knowledge-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .knowledge-card {
    padding: 27px;
  }

  .knowledge-card h2 {
    font-size: 1.7rem;
  }

  .knowledge-card .eyebrow {
    margin-bottom: 17px;
  }

  .knowledge-card .text-link {
    margin-top: 24px;
  }

  .article-layout .content-section h2 {
    font-size: 1.65rem;
  }

  .article-meta {
    gap: 14px;
    flex-wrap: wrap;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .contact-details h2 {
    font-size: 1.75rem;
  }

  .contact-email {
    font-size: 1.2rem;
  }

  .contact-tel {
    font-size: 1.1rem;
  }

  .contact-block + .contact-block {
    margin-top: 26px;
    padding-top: 25px;
  }

  .contact-form-wrap {
    padding: 26px 22px;
  }

  .contact-form-wrap h2 {
    font-size: 1.85rem;
  }

  .contact-location {
    margin-top: 38px;
    grid-template-columns: 1fr;
    gap: 27px;
    padding-block: 31px 0;
  }

  .contact-location h2 {
    font-size: 1.7rem;
  }

  .contact-form-wrap .form-small {
    font-size: .875rem;
  }

  .incasso-fields {
    padding: 18px 16px 2px;
  }

  /* 1.55rem in site.css. "Rechtsgebiedenregister" (12,8 em) past daar op 390 nog
     net in (318 van 350 pixels); "Beroepsaansprakelijkheidsverzekering" (21,1 em)
     past op geen enkele leesbare maat en breekt via overflow-wrap. */
  .legal-layout .content-section h2 {
    font-size: 1.55rem;
  }

  .form-demo {
    font-size: .875rem;
  }

  .microcopy {
    font-size: .875rem;
  }

  .concept-note {
    padding: 15px 17px;
    font-size: .875rem;
  }
}

@media (max-width: 360px) {
  :root {
    --gutter: 16px;
  }

  .logo-link img {
    width: 166px;
  }

  .home-hero h1 {
    font-size: 2.125rem;
  }

  .menu-button {
    padding: 8px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }

  /* site.css zet hier 2rem; de clamp van 700 loopt al mee met de schermbreedte en
     komt op 360 uit op 24 pixels ("Aansprakelijkheidsrecht" 323 van 328). */
  .page-hero h1 {
    font-size: clamp(1.5rem, 6.6vw, 2.25rem);
  }

  /* 1.55rem gaf 334 pixels voor "Aansprakelijkheidsrecht" in een kolom van 328. */
  .card h3 {
    font-size: 1.45rem;
  }

  .mobile-contact {
    padding-inline: 16px;
  }

  .contact-form-wrap {
    padding: 24px 18px;
  }

  .contact-email {
    font-size: 1.0625rem;
  }

  .contact-tel {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   12. Profiel, oprichtersblok en homepage-aanvullingen
   De regels onderaan site.css, in dezelfde volgorde.
   -------------------------------------------------------------------------- */

.profile-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr);
  gap: 72px;
  align-items: center;
}

.profile-hero-copy {
  min-width: 0;
}

.profile-hero-copy .hero-lead {
  max-width: 57ch;
}

.profile-hero-portrait {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #494341;
  max-width: 440px;
  justify-self: end;
  width: 100%;
}

.profile-hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.profile-teaser-photo {
  grid-template-columns: minmax(270px, 360px) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  align-items: stretch;
}

.founder-image {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #494341;
}

.founder-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.founder-copy {
  padding: 46px 58px;
  align-self: center;
  min-width: 0;
}

.founder-copy h2 {
  margin-bottom: 23px;
}

@media (max-width: 1100px) {
  .profile-hero-grid {
    gap: 42px;
    grid-template-columns: minmax(0, 1.3fr) minmax(265px, .9fr);
  }

  .profile-teaser-photo {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  }

  .founder-copy {
    padding: 34px 38px;
  }
}

@media (max-width: 960px) {
  .profile-hero-grid {
    gap: 32px;
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
  }

  .profile-hero-copy .hero-lead {
    font-size: 1rem;
  }

  .profile-hero-copy h1 {
    font-size: 2.55rem;
  }

  .profile-hero-copy .actions {
    gap: 20px;
  }

  .profile-teaser-photo {
    grid-template-columns: minmax(225px, .85fr) minmax(0, 1.15fr);
  }

  .founder-copy {
    padding: 30px;
  }

  .founder-image {
    aspect-ratio: auto;
    min-height: 380px;
  }

  .founder-copy p {
    font-size: 1rem;
  }
}

@media (max-width: 700px) {
  .profile-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 33px;
    align-items: stretch;
  }

  /* Dezelfde maat als .page-hero h1 op deze breedte, zodat een lange achternaam
     niet breekt. */
  .profile-hero-copy h1 {
    font-size: clamp(1.5rem, 6.6vw, 2.25rem);
  }

  .profile-hero-copy .hero-lead {
    font-size: 1.0625rem;
  }

  .profile-hero-portrait {
    max-width: 420px;
    margin-inline: auto;
    aspect-ratio: 4 / 5;
  }

  .profile-hero {
    padding-bottom: 30px;
  }

  .profile-teaser-photo {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .founder-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 0;
    max-height: 360px;
  }

  .founder-copy {
    padding: 27px;
  }

  .founder-copy h2 {
    margin-bottom: 20px;
  }

  .founder-image img {
    object-position: 50% 22%;
  }
}

@media (max-width: 360px) {
  .profile-hero-copy h1 {
    font-size: clamp(1.5rem, 6.6vw, 2.25rem);
  }

  .founder-copy {
    padding: 23px;
  }
}

/* Homepage-secties. */
.home-section-title {
  font-size: clamp(1.85rem, 3vw, 2.65rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-services-intro {
  margin-bottom: 38px;
}

.home-services-intro .home-section-title {
  margin-bottom: 22px;
}

.home-services-intro p {
  max-width: 76ch;
  font-size: 1.0625rem;
  color: #44515e;
}

.home-services .service-grid {
  row-gap: 16px;
}

.home-services .card {
  padding-block: 26px 30px;
}

.home-services .card-top {
  margin-bottom: 22px;
}

.home-services .icon {
  width: 29px;
  height: 29px;
}

.home-services .card h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.home-services .card p {
  font-size: 1rem;
  line-height: 1.7;
}

.home-services .card-approach {
  margin-bottom: 0;
}

.home-services .actions {
  margin-top: 32px;
}

.home-knowledge .home-section-title {
  margin-bottom: 38px;
}

.home-article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.home-article {
  border-top: 1px solid var(--navy);
}

.home-article > a {
  display: block;
  height: 100%;
  padding-top: 25px;
  text-decoration: none;
}

.home-article .eyebrow {
  font-size: .8125rem;
  letter-spacing: .07em;
  margin-bottom: 18px;
  min-height: 2.8em;
}

/* Inter, dus geen kapitalen (zie .footer-column h2). */
.home-article h3 {
  font-family: var(--body);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.02em;
  margin-bottom: 16px;
  text-transform: none;
}

.home-article p {
  font-size: 1rem;
  line-height: 1.7;
  color: #44515e;
}

.home-article a:hover h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.home-knowledge .actions {
  margin-top: 36px;
}

.home-contact {
  padding-block: 72px 82px;
  text-align: center;
  border-top: 1px solid #02215020;
}

.home-contact .home-section-title {
  margin-bottom: 24px;
}

.home-contact-intro {
  max-width: 660px;
  margin-inline: auto;
}

.home-contact-intro p {
  font-size: 1.0625rem;
}

.home-contact .actions {
  justify-content: center;
  margin-top: 28px;
}

.home-contact-email {
  display: inline-block;
  font-size: 1rem;
  color: var(--navy);
  margin-top: 26px;
}

.home-contact .microcopy {
  max-width: 610px;
  margin: 18px auto 0;
}

.office-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.office-value {
  border-top: 1px solid var(--blue);
  padding-top: 20px;
}

.office-value h3 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 12px;
}

.office-value p {
  font-size: 1rem;
}

@media (max-width: 960px) {
  .home-article-grid {
    gap: 24px;
  }

  .home-article h3 {
    font-size: 1.18rem;
  }

  .home-services .card h3 {
    font-size: 1.08rem;
  }

  .office-values {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 700px) {
  .home-services-intro {
    margin-bottom: 30px;
  }

  .home-services .service-grid {
    row-gap: 8px;
  }

  .home-services .card h3 {
    font-size: 1.2rem;
  }

  .home-services .card {
    padding-block: 24px 28px;
  }

  .home-article-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .home-article .eyebrow {
    min-height: 0;
    margin-bottom: 14px;
  }

  .home-article h3 {
    font-size: 1.3rem;
  }

  .home-contact {
    padding-block: 48px 54px;
  }

  .home-contact-intro p,
  .home-services-intro p {
    font-size: 1rem;
  }

  .home-contact .microcopy {
    font-size: .8125rem;
  }
}

/* --------------------------------------------------------------------------
   13. Kopbalk-palet en de hero-foto
   -------------------------------------------------------------------------- */

/* De kop en het mobiele paneel in beige, met de contactknop in navy. */
.site-header,
.site-header .main-nav {
  background: var(--taupe);
}

.site-header .main-nav > .button {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.site-header .main-nav > .button:hover {
  background: #153866;
  border-color: #153866;
  color: var(--white);
}

/* De foto van Barendrecht onder een overlay die van navy naar het lichtblauw loopt
   (Nico, 10 oktober: de hero lichter). De tekst staat links, waar de overlay het
   donkerst is; rechts, onder het beeldmerk, schemert de foto door. Gemeten op de
   schermafdruk van 1440 pixels, lichtste pixel achter de tekst: kop 7,6:1, lead
   6,6:1, eyebrow 5,5:1. AA vraagt 4,5:1.

   Eerst de jpg, daarna dezelfde opmaak met image-set: een browser die image-set met
   type() kent, kiest de WebP (een derde kleiner) en de andere houdt de jpg. */
.home-hero {
  background-color: var(--navy);
  background-image:
    linear-gradient(90deg, rgba(2, 33, 80, .86) 0%, rgba(2, 33, 80, .8) 40%, rgba(79, 110, 153, .72) 100%),
    url("assets/beeld/barendrecht-watertoren-kerk.jpg");
  background-image:
    linear-gradient(90deg, rgba(2, 33, 80, .86) 0%, rgba(2, 33, 80, .8) 40%, rgba(79, 110, 153, .72) 100%),
    image-set(
      url("assets/beeld/barendrecht-watertoren-kerk.webp") type("image/webp"),
      url("assets/beeld/barendrecht-watertoren-kerk.jpg") type("image/jpeg")
    );
  background-size: cover;
  background-position: center 12%;
  background-repeat: no-repeat;
}

/* Op een telefoon loopt de tekst over de volle breedte, dus de rechterkant blijft
   donkerder dan op desktop. Gemeten op de schermafdruk (390 pixels, lichtste pixel
   achter de tekst): kop 6,2:1, lead 5,0:1, eyebrow 4,9:1. */
@media (max-width: 700px) {
  .home-hero {
    background-image:
      linear-gradient(90deg, rgba(2, 33, 80, .9), rgba(47, 79, 130, .88)),
      url("assets/beeld/barendrecht-watertoren-kerk.jpg");
    background-image:
      linear-gradient(90deg, rgba(2, 33, 80, .9), rgba(47, 79, 130, .88)),
      image-set(
        url("assets/beeld/barendrecht-watertoren-kerk.webp") type("image/webp"),
        url("assets/beeld/barendrecht-watertoren-kerk.jpg") type("image/jpeg")
      );
    background-position: 36% top;
  }
}

/* --------------------------------------------------------------------------
   14. Markeringen, toegankelijkheid, beweging, druk
   -------------------------------------------------------------------------- */

/* Wat nog van de klant moet komen. Dezelfde vorm als .pending-field in site.css:
   in de regel, een gestippelde onderlijn, geen vlak. Op een donkere achtergrond
   neemt hij de tekstkleur over, anders is hij onzichtbaar. */
.get-todo {
  display: inline;
  border-bottom: 1px dotted #7a684e;
  color: #625748;
  font-size: .94em;
}

.hero .get-todo,
.cta-strip .get-todo,
.site-footer .get-todo,
.card-approach .get-todo {
  color: inherit;
  border-bottom-color: currentColor;
}

/* In de beheeromgeving mag hij wel opvallen: daar is hij een takenlijst. */
.wp-admin .get-todo {
  background: #fff3cd;
  padding: 0 .25em;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .mobile-contact,
  .aside,
  .actions,
  .hero-art,
  .skip-link {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 11pt;
  }

  .hero {
    background: white !important;
    color: black;
    padding: 20px 0 !important;
  }

  .home-hero {
    background-image: none !important;
  }

  .hero h1,
  .hero .hero-lead,
  .hero .eyebrow,
  .breadcrumbs {
    color: black !important;
  }

  .wrap {
    width: 100%;
  }

  .content-layout,
  .contact-layout,
  .editorial-row {
    display: block;
  }

  .section {
    padding-block: 25px;
  }

  .content-section {
    break-inside: avoid;
  }

  .faq details:not([open]) > .faq-answer {
    display: block;
  }

  .card {
    break-inside: avoid;
  }

  .page-hero h1 {
    font-size: 26pt;
  }

  a {
    text-decoration: none;
  }

  .profile-hero-grid {
    display: block;
  }

  .profile-hero-portrait {
    display: none;
  }

  .profile-teaser-photo {
    display: block;
  }

  .founder-image {
    max-width: 180px;
    max-height: 220px;
    min-height: 0;
    float: left;
    margin: 0 25px 15px 0;
  }

  .founder-copy {
    padding: 0;
  }
}


/* ----------------------------------------------------------------------------
   Foto's uit de fotoshoot (10 oktober 2026). Het ontwerp van de klant had alleen
   beeld op het profiel en bij de oprichter; deze vier plekken volgen dezelfde
   vorm: rechthoekig, zonder rand of afronding, uitsnede in CSS.
   ---------------------------------------------------------------------------- */
.firm-figure,
.editorial-figure,
.article-figure {
  margin: 0;
  overflow: hidden;
  background: #494341;
}

.firm-figure img,
.editorial-figure img,
.article-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Homepage, kantoorblok: onder de kop in de linkerkolom. */
.firm-figure {
  margin-top: 34px;
  aspect-ratio: 3 / 2;
}

/* Over ons: kop en foto samen in de linkerkolom van de eerste rij. */
.editorial-lead {
  min-width: 0;
}

.editorial-figure {
  margin-top: 26px;
  aspect-ratio: 4 / 3;
  max-width: 420px;
}

/* Werkwijze: beeld bovenaan de tekstkolom. */
.article-figure {
  aspect-ratio: 16 / 9;
  margin-bottom: 44px;
}

/* Zijkolomkaart: klein vierkant portret boven de tekst. */
.aside-card__portret {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  margin-bottom: 18px;
}

@media (max-width: 960px) {
  .aside-card__portret {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 700px) {
  .firm-figure {
    margin-top: 22px;
  }

  .editorial-figure {
    max-width: none;
  }

  .article-figure {
    margin-bottom: 30px;
  }
}

@media print {
  .firm-figure,
  .editorial-figure,
  .article-figure,
  .aside-card__portret {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   13. Feedback Jesse, 17 oktober 2026
   Ovale portretten, LinkedIn op het profiel, de wetboekfoto achter de Kennis-hero,
   een foto per dienstpagina, de kantoorkop op de homepage en de onderregel van de
   footer op een regel.
   -------------------------------------------------------------------------- */

/* Ovale portretten: profiel, oprichterskaart en de eerste foto op Over ons. Een
   ellips op een staand 4:5-vlak; de uitsnede blijft die van de regels hierboven. */
.profile-hero-portrait,
.profile-teaser-photo .founder-image,
.editorial-figure--ovaal {
  border-radius: 50%;
}

.profile-teaser-photo .founder-image {
  aspect-ratio: 4 / 5;
  min-height: 0;
  max-height: none;
  align-self: center;
  margin: 36px 0 36px 44px;
}

.editorial-figure--ovaal {
  aspect-ratio: 4 / 5;
  max-width: 300px;
}

.editorial-figure--ovaal img {
  object-position: 50% 30%;
}

@media (max-width: 960px) {
  .profile-teaser-photo .founder-image {
    margin: 30px 0 30px 30px;
  }
}

@media (max-width: 700px) {
  .profile-teaser-photo .founder-image {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 4 / 5;
    max-height: none;
    float: none;
    margin: 27px auto 0;
  }

  .editorial-figure--ovaal {
    max-width: 240px;
  }

  .profile-hero-portrait {
    max-width: 260px;
    margin-top: 8px;
  }
}

/* LinkedIn in de knoppenrij van het profiel: logo plus woord, in de kleur van de
   tekstlinks op de hero. */
.profile-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

.profile-linkedin svg {
  flex: none;
}

.profile-linkedin:hover span,
.profile-linkedin:focus-visible span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Kennis: de foto met de wetboeken doorschijnend achter het blauwe vlak. Het verloop
   van de page-hero ligt er half doorzichtig overheen; papierwit houdt daarop ruim AA. */
.page-hero--foto {
  background-color: var(--navy);
  background-image:
    linear-gradient(90deg, rgba(2, 33, 80, .93), rgba(47, 79, 130, .80)),
    url("assets/beeld/kennis-wetboek.jpg");
  background-image:
    linear-gradient(90deg, rgba(2, 33, 80, .93), rgba(47, 79, 130, .80)),
    image-set(url("assets/beeld/kennis-wetboek.webp") type("image/webp"), url("assets/beeld/kennis-wetboek.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center 40%;
}

/* Dienstpagina's: tekst links, de uitgelichte afbeelding rechts. Zonder afbeelding
   (geen klasse dienst-hero) blijft het raster een enkele kolom. */
.dienst-hero .dienst-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .85fr);
  gap: 64px;
  align-items: center;
}

.dienst-hero-copy {
  min-width: 0;
}

.dienst-hero-beeld {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #2f4f82;
  max-width: 480px;
  width: 100%;
  justify-self: end;
}

.dienst-hero-beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .dienst-hero .dienst-hero-grid {
    gap: 40px;
  }
}

@media (max-width: 700px) {
  .dienst-hero .dienst-hero-grid {
    display: block;
  }

  .dienst-hero-beeld {
    max-width: none;
    margin-top: 32px;
    aspect-ratio: 16 / 9;
  }
}

@media print {
  .dienst-hero-beeld {
    display: none;
  }
}

/* Homepage, kantoorblok: "Juridisch sterk," altijd samen op de eerste regel. De
   kopmaat schaalt mee met de kolombreedte (16 tekens Carla Sans is 9,4 em), zodat de
   regel nergens breder wordt dan de kolom. */
.firm-heading {
  container-type: inline-size;
}

.firm-heading .kop-regel {
  white-space: nowrap;
}

.firm-heading h2 {
  font-size: min(3.4rem, 10cqi);
}

/* Footer: copyright, KvK en de juridische links op een regel, vanaf 961 pixels. Op
   kleinere schermen blijft het raster van hierboven. */
@media (min-width: 961px) {
  .footer-bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 28px;
  }

  .footer-bottom p br {
    display: none;
  }

  .footer-bottom p .footer-kvk::before {
    content: "·";
    margin: 0 10px;
  }

  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    justify-content: flex-end;
    max-width: none;
  }
}

/* Volledige juridische teksten (algemene voorwaarden, klachtenregeling) */
.legal-layout .legal-artikel h2 {
  font-size: 1.3rem;
}

.legal-layout .legal-artikel + .legal-artikel {
  margin-top: 28px;
  padding-top: 24px;
}

.legal-lid {
  position: relative;
  padding-left: 3.4em;
}

.legal-nr {
  position: absolute;
  left: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
}

.legal-download {
  margin-bottom: 32px;
}