/* ==========================================================================
   IZI! Eenvoud in cijfers — stylesheet

   1. Fonts
   2. Design tokens
   3. Base
   4. Layout helpers
   5. Typography helpers
   6. Buttons & links
   7. Header, navigation, mobile menu
   8. Sections: hero, voor wie, diensten, waarom, team, klanten,
      nieuwbouw, contact
   9. Footer
   10. Inner pages
   11. Reveal-on-scroll

   Breakpoints (mobile first): 640 · 768 · 1024 · 1280 · 1360px
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Design tokens -------------------------------------------------------- */

:root {
  /* Colour — from the logo (greens), the tagline (teal) and the current
     site's type colour (indigo). */
  --ink: #270e6a;
  --ink-soft: #48436a;
  --ink-muted: #6e6a86;
  --night: #1b0c46;
  --green: #a3ce91;
  --sea: #4c999d;
  --teal: #24838a;
  --teal-deep: #1b6d73;
  --pine: #0f4549;
  --mint: #edf6ee;
  --mist: #f3f7f1;
  --paper: #fafaf7;
  --white: #ffffff;
  --line: rgb(39 14 106 / 0.11);
  --line-strong: rgb(39 14 106 / 0.2);

  /* Type */
  --font-text: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", ui-sans-serif,
    system-ui, sans-serif;

  /* Type scale (desktop maxima): statement 88 · H1 72 · H2 56 · H3 42 ·
     service/quote 34 · lead 21 · body 18 · small 16 · label 14 */
  --fs-statement: clamp(2.75rem, 1.2rem + 4.8vw, 5.5rem);
  --fs-h1: clamp(2.75rem, 1.5rem + 3vw, 4.5rem);
  --fs-h2: clamp(2.125rem, 1.35rem + 2.4vw, 3.5rem);
  --fs-h3: clamp(1.75rem, 1.3rem + 1.3vw, 2.625rem);
  --fs-h4: clamp(1.625rem, 1.35rem + 0.75vw, 2.125rem);
  --fs-lead: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
  --fs-body: clamp(1.0625rem, 1.02rem + 0.14vw, 1.125rem);
  --fs-small: 1rem;
  --fs-label: 0.875rem;

  /* Radius: controls → buttons → cards → panels → large photos */
  --r-control: 0.5rem;
  --r-button: 0.75rem;
  --r-card: 1rem;
  --r-panel: 1.5rem;
  --r-photo: 2rem;

  --shadow-float: 0 1px 2px rgb(27 12 70 / 0.06),
    0 24px 60px -24px rgb(27 12 70 / 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --gutter: 1.25rem;
  --header-h: 4.5rem;
}

@media (min-width: 640px) {
  :root { --gutter: 2rem; }
}
@media (min-width: 1024px) {
  :root { --gutter: 3rem; --header-h: 6rem; }
}
@media (min-width: 1280px) {
  :root { --header-h: 6.5rem; }
}

/* 3. Base ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  background: var(--paper);
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  /* Long Dutch compounds (e.g. "Vennootschapsbelasting") must never push
     the page wider than a phone; soft hyphens in the markup break them nicely. */
  overflow-wrap: break-word;
}

p, li, blockquote, dd {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

img, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

[hidden] {
  display: none !important;
}

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

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 70;
  padding: 0.5rem 1rem;
  border-radius: var(--r-button);
  background: var(--ink);
  color: var(--white);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}

/* 4. Layout helpers ------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 12-column grid used by every section from 1024px up. */
@media (min-width: 1024px) {
  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

.section {
  padding-block: 5rem;
}
@media (min-width: 1024px) {
  .section { padding-block: 7rem; }
}

/* 5. Typography helpers --------------------------------------------------- */

.t-statement,
.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.032em;
}
.t-statement { font-size: var(--fs-statement); }
.t-h1 { font-size: var(--fs-h1); }

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.028em;
}

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.t-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.018em;
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.t-small {
  font-size: var(--fs-small);
  line-height: 1.55;
}

.t-label {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
}

.c-soft { color: var(--ink-soft); }
.c-muted { color: var(--ink-muted); }
.c-teal { color: var(--teal); }

/* "IZI!" in the logo's gradient, darkened just enough to read on paper. */
.izi {
  background-image: linear-gradient(180deg, #4e9c74 8%, #1f7a82 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.figures {
  font-variant-numeric: tabular-nums lining-nums;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--teal-deep);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
}
.eyebrow--green {
  color: var(--green);
}

/* 6. Buttons & links ------------------------------------------------------ */

.btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 3rem;
  padding-inline: 1.25rem;
  border-radius: var(--r-button);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
    color 0.3s var(--ease);
}
.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.btn:hover svg.icon-arrow {
  transform: translateX(0.25rem);
}
.btn--lg {
  height: 3.5rem;
  gap: 0.75rem;
  padding-inline: 1.75rem;
  font-size: 1.0625rem;
}
.btn--primary {
  background: var(--teal-deep);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--pine);
}
.btn--ink {
  background: var(--ink);
  color: var(--white);
}
.btn--ink:hover {
  background: var(--night);
}
.btn--secondary {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--secondary:hover {
  background: rgb(39 14 106 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(39 14 106 / 0.35);
}
.btn--block {
  width: 100%;
}

/* Plain arrow for pathways and list rows; follows the parent's hover. */
.arrow {
  width: 0.8em;
  height: 0.8em;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.pathway:hover .arrow,
.pathway:focus-visible .arrow {
  transform: translateX(0.375rem);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ink);
}
.text-link span {
  padding-bottom: 0.125rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px
    no-repeat;
  transition: background-size 0.5s var(--ease), background-position 0.5s var(--ease);
}
.text-link:hover span {
  background-size: 0% 1.5px;
  background-position: 100% 100%;
}
.text-link svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s var(--ease);
}
.text-link:hover svg {
  transform: translateX(0.25rem);
}

/* 7. Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header[data-scrolled="true"] {
  background: rgb(250 250 247 / 0.9);
  box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  transition: height 0.3s var(--ease);
}
@media (min-width: 1024px) {
  .site-header[data-scrolled="true"] .header-bar { height: 5rem; }
}

.logo {
  display: block;
  flex-shrink: 0;
  height: 3rem;
  transition: height 0.3s var(--ease);
}
.logo img {
  width: auto;
  height: 100%;
}
@media (min-width: 1024px) {
  .header-bar .logo { height: 4rem; }
  .site-header[data-scrolled="true"] .header-bar .logo { height: 3.5rem; }
}
@media (min-width: 1280px) {
  .header-bar .logo { height: 4.75rem; }
  .site-header[data-scrolled="true"] .header-bar .logo { height: 3.75rem; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 1280px) {
  .header-actions { gap: 1.25rem; }
}

.header-phone {
  display: none;
  align-items: center;
  gap: 0.75rem;
}
.header-phone svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--teal);
}
.header-phone__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.header-phone__label {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--ink-muted);
}
.header-phone__number {
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s;
}
.header-phone:hover .header-phone__number {
  color: var(--teal-deep);
}
@media (min-width: 1280px) {
  .header-phone { display: flex; }
}

.header-cta {
  display: none;
}
@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
}
.header-cta__long { display: none; }
@media (min-width: 1360px) {
  .header-cta__short { display: none; }
  .header-cta__long { display: inline; }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding-inline: 1rem;
  border-radius: var(--r-button);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.menu-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

/* Desktop navigation */

.main-nav {
  display: none;
}
@media (min-width: 1024px) {
  .main-nav { display: block; }
}

.main-nav__list {
  display: flex;
  align-items: center;
}

.main-nav__item {
  position: relative;
}

.main-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 3rem;
  padding-inline: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.main-nav__link svg {
  width: 1rem;
  height: 1rem;
  color: var(--ink-muted);
  transition: transform 0.3s var(--ease);
}
.main-nav__item:hover .main-nav__link::after,
.main-nav__item:focus-within .main-nav__link::after {
  transform: scaleX(1);
}
.main-nav__item:hover .main-nav__link svg {
  transform: rotate(180deg);
}
@media (min-width: 1280px) {
  .main-nav__link { padding-inline: 0.875rem; font-size: 1.125rem; }
  .main-nav__link::after { left: 0.875rem; right: 0.875rem; }
}
@media (min-width: 1360px) {
  .main-nav__link { padding-inline: 1rem; }
  .main-nav__link::after { left: 1rem; right: 1rem; }
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 0.75rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.25rem);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
    visibility 0.2s;
}
.main-nav__item:hover .dropdown,
.main-nav__item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.dropdown__panel {
  width: 21rem;
  padding: 0.5rem;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--line);
}
/* Wide variant: described links on the left, a mint box with grouped
   links on the right. */
.dropdown__panel--wide {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0.5rem;
  width: 36rem;
}
.dropdown__link {
  display: block;
  padding: 0.875rem 1rem;
  border-radius: var(--r-control);
  font-weight: 600;
  transition: background-color 0.2s;
}
.dropdown__link:hover,
.dropdown__link:focus-visible {
  background: var(--mist);
}
.dropdown__desc {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--ink-muted);
}
.dropdown__aside {
  padding: 1rem 1.25rem;
  border-radius: var(--r-control);
  background: var(--mist);
}
.dropdown__aside-title {
  display: inline-block;
  color: var(--teal-deep);
}
a.dropdown__aside-title:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dropdown__aside ul {
  margin-top: 0.5rem;
}
.dropdown__aside ul a {
  display: block;
  margin-inline: -0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--r-control);
  font-weight: 500;
  transition: color 0.2s;
}
.dropdown__aside ul a:hover,
.dropdown__aside ul a:focus-visible {
  color: var(--teal-deep);
}

/* Mobile menu (full-screen dialog; a sibling of the header so the header's
   backdrop-filter cannot trap it) */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
@media (min-width: 1024px) {
  .mobile-menu { display: none !important; }
}

.mobile-menu__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
}

.mobile-menu__nav {
  flex: 1;
  overflow-y: auto;
}

.mobile-menu__list {
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
}
.mobile-menu__item {
  border-bottom: 1px solid var(--line);
}
.mobile-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mobile-menu__title {
  display: block;
  flex: 1;
  padding-block: 1rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.mobile-menu__toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-button);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.mobile-menu__toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s var(--ease);
}
.mobile-menu__toggle[aria-expanded="true"] svg {
  transform: rotate(45deg);
}
.mobile-menu__sub {
  padding-bottom: 1.25rem;
}
.mobile-menu__group-title {
  padding: 0.5rem 0 0.25rem;
  color: var(--teal-deep);
}
.mobile-menu__sub a {
  display: block;
  padding-block: 0.5rem;
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--ink-soft);
}

.mobile-menu__footer {
  flex-shrink: 0;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
  background: rgb(255 255 255 / 0.6);
}
.mobile-menu__footer .container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mobile-menu__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-weight: 500;
}
.mobile-menu__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.mobile-menu__contact svg {
  width: 1rem;
  height: 1rem;
  color: var(--teal);
}

/* 8a. Hero ---------------------------------------------------------------- */

.hero {
  padding-block: 2rem 4rem;
}
@media (min-width: 640px) {
  .hero { padding-top: 3rem; }
}
@media (min-width: 1024px) {
  .hero { padding-block: 3.5rem 4rem; }
}

.hero__grid {
  display: grid;
  row-gap: 2.5rem;
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: 2rem;
    row-gap: 0;
    align-items: start;
  }
  .hero__text { grid-column: 1 / span 6; grid-row: 1; padding-top: 0.5rem; }
  .hero__media { grid-column: 7 / span 6; grid-row: 1 / span 2; }
  .hero__trust { grid-column: 1 / span 6; grid-row: 2; margin-top: 2.5rem; }
}

.hero__intro {
  max-width: 38ch;
  margin-top: 1.75rem;
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
}

.trust {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 27rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
}
.trust img {
  width: auto;
  height: 2.75rem;
  flex-shrink: 0;
}

/* The team photo cut into the logo's speech bubble — the page's only use of
   the shape. Clip paths are defined once in the SVG at the top of <main>. */
.bubble {
  position: relative;
  aspect-ratio: 1.08;
  clip-path: url("#bubble-sm");
}
.bubble img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 30%;
}
/* Overcast sky: a faint brand tint keeps the top edge from dissolving. */
.bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(76 153 157 / 0.28) 0%,
    rgb(163 206 145 / 0.1) 28%,
    transparent 48%
  );
  mix-blend-mode: multiply;
}
@media (min-width: 640px) {
  .bubble { aspect-ratio: 1.45; clip-path: url("#bubble-md"); }
  .bubble img { object-position: 50% 32%; }
}
@media (min-width: 1024px) {
  .bubble { aspect-ratio: 0.86; clip-path: url("#bubble-lg"); }
  .bubble img { object-position: 56% 30%; }
}
@media (min-width: 1280px) {
  .bubble { aspect-ratio: 1.04; clip-path: url("#bubble-xl"); }
  .bubble img { object-position: 52% 30%; }
}

.clip-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 8b. Section heading row (H2 left, intro right) -------------------------- */

.section-head {
  display: grid;
  gap: 1.5rem;
}
.section-head__intro {
  max-width: 40ch;
  color: var(--ink-soft);
}
@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: end;
  }
  .section-head__title { grid-column: 1 / span 7; }
  .section-head__intro { grid-column: 9 / span 4; }
}

/* 8c. Voor wie ------------------------------------------------------------ */

.voor-wie {
  padding-block: 4rem 5rem;
}
@media (min-width: 1024px) {
  .voor-wie { padding-block: 4rem 7rem; }
}

.bento {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    gap: 1.25rem;
    margin-top: 3.5rem;
  }
  .bento__main { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .bento__side { grid-column: 8 / span 5; }
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem;
  border-radius: var(--r-panel);
}
@media (min-width: 640px) {
  .card { padding: 2.25rem; }
}
@media (min-width: 1024px) {
  .card { padding: 2.5rem; }
}
.card--white {
  gap: 2.5rem;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
.card--mint {
  background: var(--mint);
}
.card--pine {
  background: var(--pine);
  color: var(--white);
}
.card__title {
  display: block;
}
/* The arrow follows the last word, also when the title wraps. */
.card__title .arrow {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: -0.02em;
}
.card__title .arrow { color: var(--teal); }
.card--pine .card__title .arrow { color: var(--green); }
.card__body {
  max-width: 34ch;
  color: var(--ink-soft);
}
.card--pine .card__body {
  color: rgb(255 255 255 / 0.85);
}
a.card__title-link:hover {
  color: var(--teal-deep);
}

.types-word {
  margin-top: 2rem;
  color: var(--teal);
}
@media (min-width: 1024px) {
  .types-word { margin-top: 2.5rem; }
}

.type-rows {
  border-top: 1px solid var(--line);
}
.type-row {
  display: grid;
  gap: 0.25rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.type-rows li:last-child .type-row {
  border-bottom: 0;
}
.type-row__title {
  transition: color 0.3s var(--ease);
}
.type-row:hover .type-row__title {
  color: var(--teal-deep);
}
.type-row__body {
  color: var(--ink-soft);
}
.type-row .arrow {
  display: none;
  color: rgb(39 14 106 / 0.3);
}
.type-row:hover .arrow {
  color: var(--teal);
}
@media (min-width: 640px) {
  .type-row {
    grid-template-columns: 11rem 1fr auto;
    align-items: center;
    gap: 1.5rem;
  }
  .type-row .arrow { display: block; font-size: var(--fs-h4); }
}
/* In the narrower 7-column card on small laptops, title above text. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .bento .type-row {
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1.5rem;
  }
  .bento .type-row__body { grid-column: 1; }
  .bento .type-row .arrow { grid-column: 2; grid-row: 1 / span 2; }
}

/* 8d. Diensten (ledger) --------------------------------------------------- */

.diensten {
  border-top: 1px solid var(--line);
  background: var(--white);
}

.diensten__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}
@media (min-width: 1024px) {
  .diensten__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .diensten__aside { grid-column: 1 / span 5; }
  .diensten__list { grid-column: 6 / span 7; }
  .diensten__sticky { position: sticky; top: 8rem; }
}

.diensten__title {
  max-width: 12ch;
}
.diensten__intro {
  max-width: 36ch;
  margin-top: 1.5rem;
  color: var(--ink-soft);
}
.diensten__photo {
  display: none;
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 25rem;
  margin-top: 3rem;
  overflow: hidden;
  border-radius: var(--r-panel);
}
.diensten__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 50%;
}
@media (min-width: 1024px) {
  .diensten__photo { display: block; }
}

.ledger-group + .ledger-group {
  margin-top: 3.5rem;
}
.ledger-group__title {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--ink);
  color: var(--teal-deep);
}
.ledger-group__title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.75rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .ledger-row {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 0.5rem;
  }
}
@media (min-width: 1024px) {
  .ledger-row { padding-block: 2.5rem; }
}
.ledger-row__num {
  padding-top: 0.45em;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--teal-deep);
}
.ledger-row__title a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: color 0.3s var(--ease);
}
/* The whole row is the click target. */
.ledger-row__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ledger-row__title .arrow {
  color: rgb(39 14 106 / 0.25);
}
.ledger-row:hover .ledger-row__title a {
  color: var(--teal-deep);
}
.ledger-row:hover .arrow {
  color: var(--teal);
  transform: translateX(0.375rem);
}
.ledger-row__body {
  max-width: 56ch;
  margin-top: 1rem;
  color: var(--ink-soft);
}
.ledger-note {
  max-width: 56ch;
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--green);
  color: var(--ink-soft);
}
@media (min-width: 640px) {
  .ledger-note { margin-left: 3.5rem; }
}
.diensten__more {
  margin-top: 3rem;
}

/* 8e. Waarom IZI! --------------------------------------------------------- */

.waarom {
  background: var(--pine);
  color: var(--white);
}
.values {
  margin-top: 2.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.2);
}
@media (min-width: 1024px) {
  .values { margin-top: 3.5rem; }
}
.value {
  display: grid;
  gap: 1.25rem;
  padding-block: 2.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}
.value__word span {
  color: var(--green);
}
.value__body {
  max-width: 40ch;
  color: rgb(255 255 255 / 0.85);
}
@media (min-width: 1024px) {
  .value {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: end;
    padding-block: 3.5rem;
  }
  .value__word { grid-column: 1 / span 7; }
  .value__body { grid-column: 8 / span 5; padding-bottom: 0.5rem; }
}

/* 8f. Team ---------------------------------------------------------------- */

.team__text {
  max-width: 40ch;
  color: var(--ink-soft);
}
.team__text p + p {
  margin-top: 1rem;
}
.team__text .text-link {
  margin-top: 1.75rem;
}
@media (min-width: 1024px) {
  .team__text { padding-top: 0.5rem; }
}
.team .section-head {
  align-items: start;
  gap: 2rem;
}

.facts {
  display: grid;
  gap: 1.5rem;
  margin-top: 3.5rem;
}
@media (min-width: 768px) {
  .facts {
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .facts { margin-top: 4.5rem; }
}
.fact {
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
}
.fact__value {
  display: block;
  color: var(--teal);
}
.fact__label {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink-soft);
}

/* 8g. Klanten (testimonials) ---------------------------------------------- */

.klanten {
  background: var(--mist);
}
.klanten__grid {
  display: grid;
  gap: 3.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 1024px) {
  .klanten__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: start;
    margin-top: 3rem;
  }
  .quote-main { grid-column: 1 / span 6; padding-right: 2rem; position: sticky; top: 8rem; }
  .quotes { grid-column: 7 / span 6; }
}
.quote-main__rest {
  max-width: 32ch;
  margin-top: 1.5rem;
  color: var(--ink-soft);
}
.quote-main figcaption {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.quote-main figcaption::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--teal);
}
.quotes li {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--line);
}
.quotes li:first-child {
  padding-top: 0;
}
.quotes li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.quotes blockquote {
  color: var(--ink-soft);
}
.quotes figcaption {
  margin-top: 0.75rem;
}
.name {
  font-weight: 600;
  color: var(--ink);
}

/* 8h. Nieuwbouw ----------------------------------------------------------- */

.nieuwbouw {
  position: relative;
  overflow-x: clip;
}
.nieuwbouw__image {
  position: relative;
  width: 100%;
  height: 64vw;
  min-height: 21rem;
  max-height: 56rem;
  overflow: hidden;
}
.nieuwbouw__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
.nieuwbouw__tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-control);
  background: rgb(250 250 247 / 0.9);
}
@media (min-width: 640px) {
  .nieuwbouw__tag { top: 1.5rem; right: 2rem; }
}
@media (min-width: 1024px) {
  .nieuwbouw__image { height: 86vh; }
  .nieuwbouw__image img { object-position: 60% 46%; }
  .nieuwbouw__tag { right: 3rem; }
}

.nieuwbouw__content {
  position: relative;
  padding-bottom: 5rem;
}
.nieuwbouw__block {
  position: relative;
  padding-top: 2.5rem;
  background: var(--paper);
}
.nieuwbouw__block h2 {
  margin-top: 1.25rem;
}
.nieuwbouw__block p {
  max-width: 42ch;
  margin-top: 1.5rem;
  color: var(--ink-soft);
}
.nieuwbouw__block .btn {
  margin-top: 2.25rem;
}
.nieuwbouw__aside {
  max-width: 40ch;
  margin-top: 2.5rem;
  color: var(--ink-soft);
}
@media (min-width: 640px) {
  .nieuwbouw__block { padding-top: 3rem; }
}
@media (min-width: 1024px) {
  .nieuwbouw__content {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    margin-top: -15rem;
    padding-bottom: 7rem;
  }
  /* A block of page colour rises into the picture from the left screen
     edge, so its text starts on the same grid line as every other heading. */
  .nieuwbouw__block {
    grid-column: 1 / span 6;
    padding-top: 3.5rem;
    padding-right: 3rem;
    border-top-right-radius: var(--r-panel);
  }
  .nieuwbouw__block::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;
    background: var(--paper);
  }
  .nieuwbouw__aside {
    grid-column: 9 / span 4;
    margin-top: 18rem;
  }
}
@media (min-width: 1280px) {
  .nieuwbouw__block { grid-column: 1 / span 5; }
}

/* 8i. Contact ------------------------------------------------------------- */

.contact {
  position: relative;
  padding-top: 6rem;
}
@media (min-width: 1024px) {
  .contact { padding-top: 8rem; }
}
.contact__band {
  background: var(--green);
  color: var(--ink);
}
.contact__grid {
  display: grid;
}
.contact__media {
  position: relative;
  margin-top: -3rem;
}
.contact__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-photo);
}
.contact__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 36% 45%;
}
@media (min-width: 640px) {
  .contact__photo { aspect-ratio: 16 / 10; }
}
.contact__text {
  padding-block: 3.5rem;
}
@media (min-width: 640px) {
  .contact__text { padding-block: 4rem; }
}
@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .contact__media { order: 2; grid-column: 8 / span 5; margin-top: 0; }
  .contact__photo {
    position: absolute;
    left: 0;
    right: 0;
    top: -7rem;
    bottom: 5rem;
    aspect-ratio: auto;
  }
  .contact__text { order: 1; grid-column: 1 / span 7; padding-block: 6rem; padding-right: 2rem; }
}
.contact__lead {
  max-width: 34ch;
  margin-top: 1.5rem;
}
.contact__text .btn {
  margin-top: 2.25rem;
}
.details {
  display: grid;
  gap: 2rem 2.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgb(39 14 106 / 0.2);
}
@media (min-width: 640px) {
  .details { grid-template-columns: 1fr 1fr; }
  .details__wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .details { grid-template-columns: 1fr; margin-top: 3.5rem; }
  .details__wide { grid-column: auto; }
}
@media (min-width: 1280px) {
  .details { grid-template-columns: 1fr 1fr; }
  .details__wide { grid-column: span 2; }
}
.details dt {
  color: rgb(39 14 106 / 0.75);
}
.details dd {
  margin-top: 0.5rem;
}
.details__value {
  text-decoration: underline;
  text-decoration-color: rgb(39 14 106 / 0.25);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s;
}
.details__value:hover {
  text-decoration-color: var(--ink);
}
.nowrap {
  white-space: nowrap;
}
.details__note {
  max-width: 40ch;
  color: rgb(39 14 106 / 0.8);
}

/* 9. Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--night);
  color: var(--white);
}
.site-footer a {
  color: rgb(255 255 255 / 0.8);
  transition: color 0.2s;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--white);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.5rem;
  padding-top: 4rem;
}
@media (min-width: 1024px) {
  .footer__top { padding-top: 6rem; }
}
@media (min-width: 1280px) {
  .footer__top {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .footer__brand { grid-column: 1 / span 4; }
  .footer__cols { grid-column: 5 / span 8; }
}
.footer__logo img {
  width: auto;
  height: 5rem;
}
@media (min-width: 1024px) {
  .footer__logo img { height: 5.5rem; }
}
.footer__claim {
  margin-top: 2rem;
  color: var(--white);
}
.footer__claim span {
  color: var(--green);
}
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: 2rem;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.footer__social svg {
  width: 1.05rem;
  height: 1.05rem;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}
@media (min-width: 768px) {
  .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.footer__col h2 {
  color: var(--green);
}
.footer__col ul,
.footer__col address {
  margin-top: 1.25rem;
}
.footer__col li + li {
  margin-top: 0.625rem;
}
.footer__col address {
  color: rgb(255 255 255 / 0.8);
  line-height: 1.6;
}
.footer__col address + ul {
  margin-top: 1.25rem;
}
.footer__partners {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);
}
@media (min-width: 1024px) {
  .footer__partners {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 5rem;
  }
}
.footer__partners p {
  color: rgb(255 255 255 / 0.8);
}
.partner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.partner {
  display: flex;
  align-items: center;
  height: 5rem;
  padding-inline: 1.25rem;
  border-radius: var(--r-control);
  background: var(--white);
}
a.partner:hover {
  opacity: 0.9;
}
.partner img {
  width: auto;
  height: 3rem;
  object-fit: contain;
}
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-block: 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);
  color: rgb(255 255 255 / 0.75);
}
@media (min-width: 640px) {
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
}
.footer__legal a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.footer__legal svg {
  width: 1rem;
  height: 1rem;
}

/* 10. Inner pages --------------------------------------------------------- */

/* Current section in the main navigation */
.main-nav__item.is-current .main-nav__link::after {
  transform: scaleX(1);
}

/* Breadcrumb */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--line-strong);
}
.breadcrumb a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}
.breadcrumb a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* Page hero: breadcrumb, H1, intro and actions */
.page-hero {
  padding-block: 2rem 4rem;
}
@media (min-width: 1024px) {
  .page-hero { padding-block: 2.5rem 5rem; }
}
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 1024px) {
  .page-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: end;
    margin-top: 3.5rem;
  }
  .page-hero__text { grid-column: 1 / span 8; }
  .page-hero__side { grid-column: 9 / span 4; }
}
.page-hero__title {
  margin-top: 1.25rem;
  max-width: 18ch;
}
.page-hero__lead {
  max-width: 44ch;
  margin-top: 1.5rem;
  color: var(--ink-soft);
}
.page-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
@media (min-width: 640px) {
  .page-hero__actions { flex-direction: row; flex-wrap: wrap; }
}

/* Page hero with a photo on the right */
.page-hero__media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--r-photo);
}
.page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .page-hero__media { aspect-ratio: 16 / 10; }
}
@media (min-width: 1024px) {
  .page-hero--media .page-hero__grid { align-items: center; }
  .page-hero--media .page-hero__text { grid-column: 1 / span 7; }
  .page-hero--media .page-hero__media { grid-column: 8 / span 5; }
}

/* Wide photo directly under a page hero */
.page-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-photo);
}
.page-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 640px) {
  .page-photo { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .page-photo { aspect-ratio: 2.35 / 1; }
}

/* Main content: prose on the left, sticky aside on the right */
.content {
  padding-block: 4rem 5rem;
  border-top: 1px solid var(--line);
  background: var(--white);
}
@media (min-width: 1024px) {
  .content { padding-block: 6rem 7rem; }
}
.content--paper {
  background: var(--paper);
}
/* No rule directly under a page photo. */
.page-photo-wrap + .content {
  border-top: 0;
}
.content__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.5rem;
}
@media (min-width: 1024px) {
  .content__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: start;
  }
  .content__main { grid-column: 1 / span 7; }
  .content__aside { grid-column: 9 / span 4; position: sticky; top: 8rem; }
}

/* Running text */
.prose {
  max-width: 64ch;
  color: var(--ink-soft);
}
.prose > * + * {
  margin-top: 1.25rem;
}
.prose h2 {
  margin-top: 3.5rem;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.prose h3 {
  margin-top: 2.5rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}
.prose h2 + *,
.prose h3 + * {
  margin-top: 1rem;
}
.prose strong {
  font-weight: 600;
  color: var(--ink);
}
.prose a:not(.btn):not(.text-link) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.prose a:not(.btn):not(.text-link):hover {
  text-decoration-color: var(--teal);
}
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
}
.prose ul li + li {
  margin-top: 0.5rem;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.75rem;
  height: 2px;
  background: var(--teal);
}
.prose .lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink);
}

/* Numbered steps (werkwijze) */
.steps {
  margin-top: 1.5rem;
  counter-reset: step;
  border-top: 2px solid var(--ink);
}
.step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.25rem 0.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
  counter-increment: step;
}
.prose .steps .step {
  margin-top: 0;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 2;
  padding-top: 0.2em;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}
.step__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

/* Aside boxes */
.aside-box {
  padding: 1.75rem;
  border-radius: var(--r-panel);
  background: var(--mint);
}
.aside-box + .aside-box {
  margin-top: 1rem;
}
.aside-box__title {
  color: var(--teal-deep);
}
.aside-box ul {
  margin-top: 1rem;
}
.aside-box li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink);
}
.aside-box li + li {
  margin-top: 0.625rem;
}
.aside-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.75rem;
  height: 2px;
  background: var(--teal);
}
.aside-box--white {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
.aside-box--white li {
  padding-left: 0;
}
.aside-box--white li::before {
  content: none;
}
.aside-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
}
.aside-contact svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--teal);
}
.aside-contact a:hover {
  color: var(--teal-deep);
}
.aside-box .btn {
  margin-top: 1.5rem;
}

/* Link rows (related pages, hub lists) — wider title column than the
   homepage's client-type rows */
.routes {
  border-top: 2px solid var(--ink);
}
.routes .type-row {
  padding-block: 1.75rem;
}
.routes .type-row__title {
  font-size: clamp(1.5rem, 1.25rem + 0.5vw, 1.75rem);
}
/* Title above text until there is room for a fixed title column that fits
   the longest title ("Vennootschapsbelasting"). */
@media (min-width: 640px) {
  .routes .type-row {
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1.5rem;
  }
  .routes .type-row__body { grid-column: 1; }
  .routes .type-row .arrow { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 1024px) {
  .routes .type-row {
    grid-template-columns: 21rem 1fr auto;
    gap: 2rem;
    padding-block: 2rem;
  }
  .routes .type-row__body { grid-column: auto; }
  .routes .type-row .arrow { grid-column: auto; grid-row: auto; }
}
.routes li:last-child .type-row {
  border-bottom: 1px solid var(--line);
}

/* Section with heading row + routes, used on hubs and "Ook interessant" */
.block {
  padding-block: 4rem 5rem;
}
@media (min-width: 1024px) {
  .block { padding-block: 6rem 7rem; }
}
.block--white {
  border-top: 1px solid var(--line);
  background: var(--white);
}
.block--mist {
  background: var(--mist);
}
.block__head {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  .block__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: end;
    margin-bottom: 3rem;
  }
  .block__head > :first-child { grid-column: 1 / span 7; }
  .block__head > :nth-child(2) { grid-column: 9 / span 4; }
}
.block__intro {
  max-width: 40ch;
  color: var(--ink-soft);
}

/* Callout (e.g. "Overstappen van een ander kantoor?") */
.callout {
  display: grid;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: var(--r-panel);
  background: var(--pine);
  color: var(--white);
}
@media (min-width: 1024px) {
  .callout {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 2.5rem 3rem;
  }
}
.callout p {
  max-width: 52ch;
  margin-top: 0.75rem;
  color: rgb(255 255 255 / 0.85);
}
.callout .btn--light {
  background: var(--white);
  color: var(--ink);
}
.callout .btn--light:hover {
  background: var(--mint);
}

/* Single quote band */
.quote-band {
  padding-block: 4rem;
  background: var(--mist);
}
@media (min-width: 1024px) {
  .quote-band { padding-block: 6rem; }
}
.quote-band figure {
  margin-top: 1.5rem;
}
.quote-band blockquote {
  max-width: 34ch;
}
.quote-band figcaption {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.quote-band figcaption::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--teal);
}

/* Compact contact band at the end of inner pages */
.cta-band {
  background: var(--green);
  color: var(--ink);
}
.cta-band__grid {
  display: grid;
  gap: 2rem;
  padding-block: 4rem;
}
@media (min-width: 1024px) {
  .cta-band__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: end;
    padding-block: 5.5rem;
  }
  .cta-band__text { grid-column: 1 / span 7; }
  .cta-band__actions { grid-column: 8 / span 5; justify-self: end; }
}
.cta-band__text p {
  max-width: 40ch;
  margin-top: 1.25rem;
}
.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .cta-band__actions { flex-direction: row; flex-wrap: wrap; }
}
.cta-band .btn--secondary {
  box-shadow: inset 0 0 0 1px rgb(39 14 106 / 0.35);
}
.cta-band .btn--secondary:hover {
  background: rgb(255 255 255 / 0.3);
}

/* Contact form */
.form {
  display: grid;
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: var(--r-panel);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (min-width: 640px) {
  .form { grid-template-columns: 1fr 1fr; padding: 2.5rem; }
  .form__full { grid-column: 1 / -1; }
}
.field label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--ink);
}
.field label span {
  font-weight: 400;
  color: var(--ink-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea {
  min-height: 9rem;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgb(36 131 138 / 0.2);
}
.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.form__hint {
  color: var(--ink-muted);
}
.form__note {
  padding: 1rem 1.25rem;
  border-radius: var(--r-control);
  background: var(--mint);
  color: var(--ink);
}

/* Contact page layout */
.contact-page__grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .contact-page__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: start;
  }
  .contact-page__details { grid-column: 1 / span 5; }
  .contact-page__form { grid-column: 7 / span 6; }
}
.contact-page__details .details {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  grid-template-columns: 1fr;
}
.contact-page__details .details__wide {
  grid-column: auto;
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.contact-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.contact-social a:hover {
  color: var(--teal-deep);
}
.contact-social svg {
  width: 1.1rem;
  height: 1.1rem;
}
.text-underline {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.aside-box address,
.aside-box > p:not(.aside-box__title) {
  margin-top: 0.75rem;
  color: var(--ink);
}

/* Empty state (e.g. construction updates to come) */
.empty-state {
  padding: 2rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-panel);
  color: var(--ink-soft);
}

/* 404 */
.not-found {
  padding-block: 5rem 7rem;
}
.not-found__code {
  color: var(--teal);
}

/* 11. Reveal-on-scroll ---------------------------------------------------- */
/* The HTML is fully visible without JavaScript; main.js hides only what is
   still below the fold and fades it in once. */

[data-reveal="hidden"] {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
}
[data-reveal="shown"] {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}