/* ==========================================================================
   RonefMedia — zakelijke fotografie
   Design: licht en professioneel (pers / brandweer / politie / gemeentes).
   Navy + blauw uit het eigen diafragma-logo als draagkleur, de foto's zijn
   het kleurmoment. Eén warm accent (oranje) dat alleen op de primaire actie
   en het actieve filter zit.
   ========================================================================== */

:root {
  /* Merkblauw, gesampled uit het bestaande diafragma-logo */
  --brand-300: #8CC6EE;
  --brand-400: #6FB4E4;
  --brand-500: #4C94CF;
  --brand-600: #23739F;
  --brand-800: #0F4C67;
  --brand-900: #083948;

  /* Eén warm moment: alleen primaire CTA + actieve filter */
  --ember: #F2551F;
  --ember-hi: #FF6B35;

  /* Licht canvas */
  --paper: #FFFFFF;
  --paper-soft: #F3F7FA;      /* afwisselende secties */
  --paper-dim: #E9EFF4;       /* kaders, thumbnails-achtergrond */
  --navy: #0C2434;            /* koppen / donkerste tekst */
  --navy-deep: #06202E;       /* footer + donkere accentvlakken */

  --line: rgba(12, 36, 52, .14);
  --line-soft: rgba(12, 36, 52, .08);

  --fg: #14293A;
  --fg-dim: #48607233;        /* fallback, direct hieronder correct */
  --fg-dim: #4A6274;
  --fg-mute: #7A8FA0;

  --shell: min(1280px, 100% - 3rem);
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(8, 32, 48, .06), 0 4px 14px -6px rgba(8, 32, 48, .1);
  --shadow-md: 0 2px 6px rgba(8, 32, 48, .07), 0 16px 40px -18px rgba(8, 32, 48, .22);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: .22s var(--ease);
  --slow: .6s var(--ease);

  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--brand-500); color: #fff; }

/* --------------------------------------------------------------- bouwstenen */
.shell { width: var(--shell); margin-inline: auto; }

.section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; position: relative; }
.section--tight { padding-block: clamp(3.5rem, 6vw, 5.5rem); }

.kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 1.4rem;
}
.kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brand-500);
  flex: none;
}
.kicker span { color: var(--fg-mute); }

h1, h2, h3, h4 {
  color: var(--navy);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.h-xl { font-size: clamp(2.6rem, 7.2vw, 5.6rem); font-weight: 800; }
.h-lg { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.h-md { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 58ch;
  text-wrap: pretty;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; align-items: start; } }

/* ------------------------------------------------------------------ knoppen */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  --btn-bd: var(--line);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast), border-color var(--fast), transform var(--fast), color var(--fast), box-shadow var(--fast);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--ember);
  --btn-fg: #FFFFFF;
  --btn-bd: var(--ember);
  box-shadow: 0 10px 26px -12px rgba(242, 85, 31, .75);
}
.btn--primary:hover { --btn-bg: var(--ember-hi); --btn-bd: var(--ember-hi); }

.btn--ghost:hover { --btn-bd: var(--brand-500); background: rgba(76, 148, 207, .08); }

.btn--sm { padding: .62rem 1.1rem; font-size: .85rem; }

.btn .arw { transition: transform var(--fast); }
.btn:hover .arw { transform: translateX(3px); }

/* ------------------------------------------------------------------- header */
/* Bovenaan zweeft de balk over de donkere herofoto (witte tekst); zodra je
   scrolt wordt hij een witte, geblurde balk met navy tekst. */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 1.15rem;
  color: #fff;
  transition: padding var(--fast), background var(--fast), border-color var(--fast), color var(--fast);
  border-bottom: 1px solid transparent;
}
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 22, 33, .68), transparent);
  opacity: 1;
  transition: opacity var(--fast);
  pointer-events: none;
}
.hdr.is-stuck {
  padding-block: .7rem;
  color: var(--navy);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 0 rgba(12, 36, 52, .04), 0 8px 24px -18px rgba(8, 32, 48, .25);
}
.hdr.is-stuck::before { opacity: 0; }

.hdr__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Het logo is een brede lockup, geen vierkant icoontje: niet laten krimpen
   in de flexrij en de hoogte bepaalt de maat. Zie het logo-blok onderaan. */
.brand { display: flex; align-items: center; flex: none; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav a {
  position: relative;
  padding: .5rem .85rem;
  font-size: .92rem;
  font-weight: 500;
  color: inherit;
  opacity: .82;
  border-radius: var(--r-sm);
  transition: opacity var(--fast);
}
.nav a::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .18rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fast);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); }

.hdr__cta { display: flex; align-items: center; gap: .6rem; flex: none; }
.hdr__tel {
  font-family: var(--mono);
  font-size: .84rem;
  opacity: .82;
  transition: opacity var(--fast);
}
.hdr__tel:hover { opacity: 1; }

/* Absoluut gepositioneerd i.p.v. in de flow: alleen zo vallen de twee balkjes
   in de open-stand exact op elkaar en krijg je een echt kruisje. */
.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 40px;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  opacity: .9;
}
.burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  margin-left: -9px;
  background: currentColor;
  transition: transform var(--fast), opacity var(--fast);
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(2) { transform: translateY(0); }
.burger span:nth-child(3) { transform: translateY(6px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

@media (max-width: 1000px) {
  .burger { display: block; margin-left: auto; }
  .hdr__cta { display: none; }
  .nav {
    position: absolute;
    top: calc(100% + .9rem);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .6rem;
    background: #fff;
    color: var(--navy);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: .85rem 1rem; font-size: 1rem; opacity: 1; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: .4rem; justify-content: center; }
}
@media (min-width: 1001px) { .nav .btn { display: none; } }

/* --------------------------------------------------------------------- hero */
/* De hero blijft de eyecatcher: volle foto met navy verloop, witte tekst.
   Daaronder begint direct de lichte, professionele pagina. */
.hero {
  position: relative;
  min-height: 92svh;
  display: grid;
  align-items: end;
  padding-block: 9rem 2.4rem;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}

.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--navy-deep); }
.hero__bg figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__bg figure.is-on { opacity: 1; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: kenburns 18s ease-out forwards;
}
@keyframes kenburns { to { transform: scale(1.16); } }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(6, 28, 42, .9) 4%, rgba(6, 28, 42, .55) 32%, rgba(6, 28, 42, .1) 68%, rgba(6, 22, 33, .5) 100%),
    linear-gradient(to right, rgba(6, 28, 42, .72), rgba(6, 28, 42, .04) 66%);
}

.hero__in { position: relative; max-width: 60rem; }

.hero .kicker { color: var(--brand-300); }
.hero .kicker::before { background: var(--brand-400); }
.hero .kicker span { color: rgba(255, 255, 255, .62); }

.hero h1 { color: #fff; margin-bottom: 1.5rem; text-shadow: 0 2px 30px rgba(4, 16, 24, .7); }
.hero .lede { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 16px rgba(4, 16, 24, .75); }
.hero h1 .tint {
  color: transparent;
  background: linear-gradient(96deg, #B4DDF9, var(--brand-300) 55%, var(--brand-400));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 22px rgba(4, 16, 24, .75));
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2.4rem;
}
.hero .btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .4);
}
.hero .btn--ghost:hover { --btn-bd: #fff; background: rgba(255, 255, 255, .12); }

/* De hero draagt alleen de slogan en de twee knoppen. De certificeringen
   stonden hier, maar die schrikken af bij een eerste blik: ze staan nu
   onderaan in de footer voor wie ze zoekt. */
.hero__slidenav {
  display: flex;
  gap: .4rem;
  margin-top: clamp(2.6rem, 6vw, 4rem);
}
.hero__slidenav button {
  width: 26px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background var(--fast);
}
.hero__slidenav button[aria-current="true"] { background: #fff; }
@media (max-width: 860px) { .hero__slidenav { margin-top: 2.2rem; } }

/* ---------------------------------------------------------------- werkvelden */
.fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px) { .fields { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .fields { grid-template-columns: 1fr; } }

/* Fotokaarten mogen donker blijven — dát is het contrastmoment op de witte
   pagina. Overlay in navy i.p.v. zwart houdt het warm en professioneel. */
.field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 19rem;
  padding: 1.6rem;
  background: var(--navy);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast), transform var(--fast);
}
.field:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.field img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
  transition: transform .8s var(--ease), opacity var(--slow);
}
.field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 28, 42, .94) 8%, rgba(6, 28, 42, .45) 52%, rgba(6, 28, 42, .08));
}
.field:hover img, .field:focus-visible img { transform: scale(1.06); opacity: 1; }

.field__no {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--brand-300);
  margin-bottom: auto;
}
.field h3 { color: #fff; font-size: 1.32rem; margin-bottom: .5rem; }
/* vaste hoogte houdt de koppen van naast elkaar liggende kaarten op één lijn */
.field p { font-size: .92rem; color: rgba(255, 255, 255, .82); max-width: 32ch; min-height: 3em; }
@media (max-width: 620px) { .field p { min-height: 0; } }
.field__go {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-300);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--fast), transform var(--fast);
}
.field:hover .field__go, .field:focus-visible .field__go { opacity: 1; transform: none; }
@media (hover: none) { .field__go { opacity: 1; transform: none; } }

/* -------------------------------------------------------------------- case */
.case { background: var(--paper-soft); border-block: 1px solid var(--line-soft); }
.case__grid {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 900px) { .case__grid { grid-template-columns: 1fr; } }

.case__stack { display: grid; gap: 1rem; }
.case__stack figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.case__stack img { width: 100%; height: 100%; object-fit: cover; }
.case__stack figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(6, 28, 42, .78), transparent);
  pointer-events: none;
}
.case__stack figcaption {
  position: absolute;
  z-index: 1;
  left: .9rem;
  bottom: .8rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.case__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.case ul { list-style: none; padding: 0; display: grid; gap: .7rem; margin-top: 1.8rem; }
.case li {
  display: flex;
  gap: .7rem;
  font-size: .95rem;
  color: var(--fg-dim);
}
.case li svg { width: 17px; height: 17px; color: var(--brand-600); flex: none; margin-top: .32rem; }

/* --------------------------------------------------------------- portfolio */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 2rem;
}
.filter {
  padding: .5rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--fg-dim);
  cursor: pointer;
  transition: all var(--fast);
}
.filter:hover { color: var(--navy); border-color: var(--brand-500); }
.filter[aria-pressed="true"] {
  background: var(--ember);
  border-color: var(--ember);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px -8px rgba(242, 85, 31, .6);
}
.filter .n {
  font-family: var(--mono);
  font-size: .72rem;
  opacity: .65;
  margin-left: .35rem;
}

.grid {
  columns: 3;
  column-gap: 14px;
}
@media (max-width: 980px) { .grid { columns: 2; } }
@media (max-width: 560px) { .grid { columns: 1; } }

.shot {
  position: relative;
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  background: var(--paper-dim);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast), transform var(--fast);
}
.shot:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.shot img {
  width: 100%;
  height: auto;
  transition: transform .7s var(--ease);
}
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 28, 42, .88), rgba(6, 28, 42, .04) 55%);
  opacity: 0;
  transition: opacity var(--fast);
}
.shot:hover img, .shot:focus-visible img { transform: scale(1.045); }
.shot:hover::after, .shot:focus-visible::after { opacity: 1; }

.shot__cap {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .9rem;
  z-index: 2;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--fast), transform var(--fast);
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { opacity: 1; transform: none; }
.shot__cap b { display: block; color: #fff; font-size: .98rem; font-weight: 600; letter-spacing: -.02em; }
.shot__cap i {
  font-style: normal;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-300);
}
.shot.is-hidden { display: none; }

.grid-more { display: flex; justify-content: center; margin-top: 2.5rem; }

/* ----------------------------------------------------------- certificeringen */
.why { background: var(--paper-soft); border-block: 1px solid var(--line-soft); }
.why__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .why__grid { grid-template-columns: 1fr; } }

.why__img { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.why__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.why__img .tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: .4rem .85rem;
  background: rgba(6, 28, 42, .72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}

.certlist {
  display: grid;
  gap: .7rem;
  margin-top: 2rem;
}
.certlist > div {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.certlist .ic {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(76, 148, 207, .12);
  border: 1px solid rgba(76, 148, 207, .3);
}
.certlist .ic svg { width: 18px; height: 18px; color: var(--brand-600); }
.certlist h4 { font-size: 1rem; letter-spacing: -.02em; margin-bottom: .15rem; }
.certlist p { font-size: .89rem; color: var(--fg-dim); line-height: 1.5; }

/* ---------------------------------------------------------------- werkwijze */
/* Stappenplan: genummerde markers op één doorlopende lijn. De connector is een
   pseudo-element per stap dat de grid-gap overbrugt, zodat de lijn ook bij
   ongelijke kolombreedtes netjes doorloopt tot de volgende marker. */
/* ------------------------------------------------------------- werkwijze */
/* Vier stappen naast elkaar. Ze hangen als kaarten aan één doorlopende lijn,
   met het nummer half over de bovenrand. Kaarten van gelijke hoogte, zodat de
   onderkant van de rij recht blijft ook als de ene stap meer tekst heeft dan
   de andere — dat rafelige was precies wat het amateuristisch maakte. */

.proces { background: var(--paper-soft); border-block: 1px solid var(--line-soft); }

.steps {
  --dot: 44px;
  position: relative;
  list-style: none;
  margin-top: 1.2rem;
  padding: calc(var(--dot) + .9rem) 0 0;   /* ruimte boven de kaarten voor de lijn */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  align-items: stretch;
}

/* de lijn waar de stappen aan hangen, precies door het hart van de cijfers */
.steps::before {
  content: "";
  position: absolute;
  top: calc(var(--dot) / 2);               /* dwars door het hart van de cijfers */
  left: 1.5rem;
  /* stopt bij het laatste cijfer in plaats van door te lopen naar de rand */
  right: calc(25% - 1.5rem - var(--dot) / 2);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 5%, var(--line));
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.7rem 1.5rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast), transform var(--fast), border-color var(--fast);
}
.step:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-500);
}

.step__dot {
  position: absolute;
  top: calc(-1 * (var(--dot) + .9rem));    /* boven de kaart, op de lijn */
  left: 1.5rem;
  width: var(--dot);
  height: var(--dot);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid var(--paper-soft);   /* snijdt de lijn netjes af */
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: #fff;
  transition: background var(--fast);
}
.step:hover .step__dot { background: var(--ember); }

.step h3 { font-size: 1.14rem; margin-bottom: .5rem; }
.step p { font-size: .92rem; color: var(--fg-dim); margin: 0; }

@media (max-width: 1080px) {
  /* Twee rijen: één lijn langs alleen de bovenste rij staat scheef, dus die
     laten we weg. De genummerde kaarten vertellen de volgorde prima. */
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--dot) + 1.6rem); }
  .steps::before { display: none; }
}

@media (max-width: 620px) {
  /* Onder elkaar: de lijn verdwijnt, de kaarten blijven. */
  .steps { grid-template-columns: 1fr; row-gap: calc(var(--dot) + 1.4rem); }
  .steps::before { display: none; }
}

/* ------------------------------------------------------------------ contact */
/* Eén donker accentvlak op de verder lichte pagina: foto met navy scrim.
   Dat kadert het belangrijkste conversiemoment. */
.cta { position: relative; overflow: hidden; isolation: isolate; color: #fff; }
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(6, 28, 42, .96) 34%, rgba(6, 32, 46, .88) 55%, rgba(6, 32, 46, .72));
}

.cta .kicker { color: var(--brand-300); }
.cta .kicker::before { background: var(--brand-400); }
.cta .kicker span { color: rgba(255, 255, 255, .6); }
.cta h2 { color: #fff; }
.cta .lede { color: rgba(255, 255, 255, .88); }

.cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .cta__grid { grid-template-columns: 1fr; } }

.contactlist { display: grid; gap: .5rem; margin-top: 2rem; }
.contactlist a, .contactlist div {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.contactlist a:hover { border-color: var(--brand-300); background: rgba(255, 255, 255, .12); transform: translateX(3px); }
.contactlist svg { width: 18px; height: 18px; color: var(--brand-300); flex: none; }
.contactlist .k {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  display: block;
  line-height: 1.4;
}
.contactlist .v { font-size: .98rem; font-weight: 500; letter-spacing: -.01em; color: #fff; }

/* formulier: witte kaart op het donkere vlak — daar kijkt iedereen als eerste */
.form {
  background: #fff;
  color: var(--fg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-md);
}
.form h3 { color: var(--navy); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.f { display: block; margin-bottom: .9rem; }
.f > span {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: .4rem;
}
.f input, .f textarea, .f select {
  width: 100%;
  padding: .8rem .95rem;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .95rem;
  color: var(--fg);
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.f textarea { resize: vertical; min-height: 7rem; }
.f input:focus, .f textarea:focus, .f select:focus {
  outline: none;
  border-color: var(--brand-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(76, 148, 207, .18);
}
.f input::placeholder, .f textarea::placeholder { color: var(--fg-mute); }

.form .btn { width: 100%; justify-content: center; margin-top: .5rem; }
.form__note { font-size: .78rem; color: var(--fg-mute); margin-top: .9rem; text-align: center; }

/* ------------------------------------------------------------------- footer */
.ftr { padding-block: 3.5rem 2rem; background: var(--navy-deep); color: rgba(255, 255, 255, .78); }
.ftr .brand__txt { color: #fff; }
.ftr__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 760px) { .ftr__grid { grid-template-columns: 1fr; gap: 1.8rem; } }
.ftr p { font-size: .9rem; max-width: 34ch; margin-top: 1rem; }
.ftr h5 {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 1rem;
}
.ftr ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.ftr ul a, .ftr ul li { font-size: .92rem; transition: color var(--fast); }
.ftr ul a:hover { color: var(--brand-300); }

.ftr__certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .6rem;
  margin-bottom: 1.8rem;
}
.ftr__certs-lbl {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-right: .4rem;
}
.ftr__cert {
  display: inline-flex;
  align-items: center;
  padding: .34rem .85rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .8);
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.ftr__cert:hover {
  border-color: var(--brand-300);
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

.ftr__base {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
}
.ftr__base a { color: rgba(255, 255, 255, .78); }
.ftr__base a:hover { color: var(--brand-300); }

/* ----------------------------------------------------------- whatsapp-fab */
/* Verschijnt pas onder de hero, zodat hij niet met de hero-knoppen vecht.
   Het label staat op desktop altijd uit; op mobiel alleen de cirkel. */
.wa-fab {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: max(clamp(1rem, 2.5vw, 1.75rem), env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .7rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
}
.wa-fab.is-in { opacity: 1; visibility: visible; transform: none; }
.wa-fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); }

.wa-fab__label {
  padding: .55rem .95rem;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  transition: transform var(--fast);
}

.wa-fab__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 22px -6px rgba(37, 211, 102, .55), 0 2px 6px rgba(8, 32, 48, .16);
  transition: transform var(--fast), box-shadow var(--fast);
}
.wa-fab__dot svg { width: 30px; height: 30px; }

.wa-fab:hover .wa-fab__dot { transform: scale(1.07); box-shadow: 0 12px 30px -6px rgba(37, 211, 102, .65); }
.wa-fab:hover .wa-fab__label { transform: translateX(-2px); }

/* Zachte puls die één keer per 5 s de aandacht pakt, zonder te irriteren */
.wa-fab__dot::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: waPulse 5s var(--ease) infinite;
  pointer-events: none;
}
@keyframes waPulse {
  0%, 70%, 100% { opacity: 0; transform: scale(1); }
  75% { opacity: .55; transform: scale(1); }
  95% { opacity: 0; transform: scale(1.5); }
}

@media (max-width: 720px) {
  .wa-fab__label { display: none; }
  .wa-fab__dot { width: 54px; height: 54px; }
  .wa-fab__dot::after { width: 54px; height: 54px; }
  .wa-fab__dot svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab__dot::after { animation: none; }
}

/* ----------------------------------------------------------------- lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(5, 18, 27, .94);
  backdrop-filter: blur(10px);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb__fig { margin: 0; max-width: 100%; max-height: 100%; display: grid; gap: .9rem; justify-items: center; }
.lb__fig img {
  max-width: 100%;
  max-height: 78svh;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
}
.lb__cap { text-align: center; }
.lb__cap b { display: block; color: #fff; font-size: 1.05rem; font-weight: 600; }
.lb__cap i {
  font-style: normal;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-300);
}
.lb__x, .lb__prev, .lb__next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast);
}
.lb__x:hover, .lb__prev:hover, .lb__next:hover { background: rgba(255, 255, 255, .18); border-color: var(--brand-300); }
.lb__x { top: 1.2rem; right: 1.2rem; }
.lb__prev { left: 1.2rem; top: 50%; margin-top: -23px; }
.lb__next { right: 1.2rem; top: 50%; margin-top: -23px; }
.lb__count {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .6);
}
@media (max-width: 620px) {
  .lb__prev { left: .5rem; }
  .lb__next { right: .5rem; }
}

/* --------------------------------------------------------------- animaties */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__bg img { animation: none; transform: scale(1.04); }
}

/* ═══════════════════════════════════════════════════ albums & subpagina's ═══
   De werkvelden zijn mappen geworden: /werk/<werkveld>/<album>. Die pagina's
   hebben geen hero maar een compacte kop, zodat de foto's direct in beeld
   staan. Alles hieronder wordt gebruikt door de pagina's die tools/bouw.mjs
   aanmaakt.
   ========================================================================== */

/* -------- albumkaarten op de homepage (altijd leesbaar, niet bij hover) -- */
.grid--albums .shot { cursor: pointer; }
.grid--albums .shot::after { opacity: 1; }
.grid--albums .shot__cap { opacity: 1; transform: none; }

/* ------------------------------------------- kop van een sub-pagina ----- */
.sub { padding-top: 0; }
.subhero {
  padding: clamp(7.5rem, 12vw, 9.5rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--paper-soft);
  border-bottom: 1px solid var(--line-soft);
}
.subhero h1 { margin: .6rem 0 0; }
.subhero .lede { margin-top: 1rem; max-width: 46rem; }
.subhero__tel {
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.kruimels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.kruimels a { color: var(--brand-600); transition: color var(--fast); }
.kruimels a:hover { color: var(--navy); }
.kruimels span[aria-hidden] { opacity: .45; }

/* ---------------------------------- albums van één werkveld op een rij -- */
.albums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.album {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast), transform var(--fast), border-color var(--fast);
}
.album:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-500);
}
.album__img {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--paper-dim);
  overflow: hidden;
}
.album__img img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.album:hover .album__img img { transform: scale(1.05); }
.album__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem 1.15rem;
}
.album__body b {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--navy);
}
.album__body i {
  flex: none;
  font-style: normal;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ------------------------------------- afsluiter onder een subpagina ---- */
.subcta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--line-soft);
}
.subcta p {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 1.05rem;
  color: var(--fg-dim);
}

/* ═══════════════════════════════════════════════════════ portfoliopagina ═══
   /portfolio is de etalage. De kop is donker met een wand van eigen beelden
   erachter: dat toont in één oogopslag de hoeveelheid en de variatie, zonder
   dat één foto de toon moet zetten. Daaronder de werkvelden als grote tegels
   en tussendoor twee keer een stap naar contact.
   ========================================================================== */

.pfhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--navy-deep);
  padding: clamp(8rem, 13vw, 11rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

/* de beeldwand: één raster dat de hele kop vult */
.pfhero__wand {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
}
.pfhero__wand img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: .5;
  filter: saturate(.85);
}
@media (max-width: 860px) { .pfhero__wand { grid-template-columns: repeat(3, 1fr); } }

/* scrim: links donker genoeg voor witte tekst, rechts blijft het beeld leven */
.pfhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(6, 32, 46, .95) 0%, rgba(6, 32, 46, .86) 42%, rgba(6, 32, 46, .62) 100%),
    linear-gradient(to top, rgba(6, 32, 46, .9), transparent 55%);
}

.pfhero__in { position: relative; max-width: 58rem; }
.pfhero h1 { color: #fff; margin: .9rem 0 1.3rem; text-shadow: 0 2px 30px rgba(4, 16, 24, .7); }
.pfhero h1 .tint {
  color: transparent;
  background: linear-gradient(96deg, #B4DDF9, var(--brand-300) 55%, var(--brand-400));
  -webkit-background-clip: text;
  background-clip: text;
}
.pfhero .lede { color: rgba(255, 255, 255, .9); max-width: 44rem; text-shadow: 0 1px 16px rgba(4, 16, 24, .7); }
.pfhero .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .4); }
.pfhero .btn--ghost:hover { --btn-bd: #fff; background: rgba(255, 255, 255, .12); }

.kruimels--licht { color: rgba(255, 255, 255, .6); }
.kruimels--licht a { color: var(--brand-300); }
.kruimels--licht a:hover { color: #fff; }

/* ----------------------------------------- werkvelden als grote tegels -- */
.krachten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.25rem);
}
.kracht {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast), transform var(--fast);
}
.kracht:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.kracht img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.kracht:hover img { transform: scale(1.06); }
.kracht::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 28, 42, .92) 0%, rgba(6, 28, 42, .42) 45%, rgba(6, 28, 42, .1) 100%);
}
.kracht__no {
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .7);
}
.kracht__body {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
}
.kracht__body b {
  display: block;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.kracht__body i {
  display: block;
  margin-top: .4rem;
  font-style: normal;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-300);
}

/* ----------------------------------------------- conversieband tussendoor */
.pfband {
  background: var(--paper-soft);
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.pfband__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 2.5rem;
}
.pfband__in > div:first-child { flex: 1 1 26rem; }
.pfband h2 { margin: .5rem 0 .7rem; }
.pfband .lede { margin: 0; }
.pfband__acties { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ═══════════════════════════════════════════════════════════════ logo ═══
   Het echte logo van de klant. Twee versies: witte letters op donker
   (hero, footer) en donkere letters zodra de menubalk wit wordt. De
   menubalk gebruikt een variant zonder de regel "Fotografie op maat" —
   die is op 30 px hoog een veeg van zes pixels. De volledige versie mét
   slogan staat in de footer, waar hij groot genoeg is om te lezen.
   ========================================================================== */

/* Het volledige logo is 5,6x zo breed als hoog en de regel "Fotografie op
   maat" beslaat maar 18% van die hoogte. Daarom staat hij in de menubalk
   bewust op 44 px en niet op 30: anders is die regel een veeg van zes
   pixels. Als de balk bij scrollen krimpt, krimpt het logo mee. */
.brand__logo {
  display: block;
  height: 44px;
  width: auto;
  flex: none;                 /* anders knijpt de flexrij hem plat */
  transition: height var(--fast), opacity var(--fast);
}
.hdr.is-stuck .brand__logo { height: 38px; }
.brand:hover .brand__logo { opacity: .85; }
.brand__logo--donker { display: none; }

/* menubalk wit geworden -> donkere letters */
.hdr.is-stuck .brand__logo--wit    { display: none; }
.hdr.is-stuck .brand__logo--donker { display: block; }

/* op een lichte subpagina staat de balk vanaf de eerste pixel licht */
.sub:not(.sub--donker) .hdr {
  color: var(--navy);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.sub:not(.sub--donker) .hdr::before { opacity: 0; }
.sub:not(.sub--donker) .brand__logo--wit    { display: none; }
.sub:not(.sub--donker) .brand__logo--donker { display: block; }

@media (max-width: 860px) { .brand__logo, .hdr.is-stuck .brand__logo { height: 36px; } }
@media (max-width: 420px) { .brand__logo, .hdr.is-stuck .brand__logo { height: 30px; } }

/* de footer draagt het volledige logo, inclusief de slogan */
.brand--ftr { display: block; }
.brand--ftr .brand__logo { height: 52px; }
@media (max-width: 560px) { .brand--ftr .brand__logo { height: 42px; } }

/* De eerste regel van "Soort opdracht" is een uitnodiging, geen antwoord:
   grijs, zodat je ziet dat er nog gekozen moet worden. */
.f select:has(option[value=""]:checked) { color: var(--fg-mute); }
.f select option { color: var(--fg); }

/* Op de certificeringspagina staat de kop al in de subhero, dus mag de
   tekstkolom bovenaan beginnen in plaats van gecentreerd naast de foto. */
.sub .why__grid { align-items: start; }
.sub .why__grid .subcta { margin-top: clamp(2rem, 4vw, 3rem); }

/* Datum boven de albumnaam, zoals een persbureau dat toont. */
.album__body { align-items: flex-end; }
.album__tekst time {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--fg-mute);
}

/* ══════════════════════════════════════════════ albumraster, uitgelijnd ═══
   Het fotoraster is een metselwerk: foto's houden hun eigen verhouding, wat
   levendig oogt. Albumkaarten moeten juist strak zijn — allemaal even groot,
   in nette rijen. Dat leest als een archief in plaats van een moodboard.
   ========================================================================== */

.grid--albums {
  columns: auto;                        /* geen krantenkolommen */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px) { .grid--albums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid--albums { grid-template-columns: 1fr; } }

.grid--albums .shot {
  margin-bottom: 0;
  aspect-ratio: 3 / 2;                  /* allemaal dezelfde maat */
}
.grid--albums .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* honeypot-veld van het offerteformulier: buiten beeld, niet display:none (dat slaan robots over) */
.f--hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }