/* ============================================================
   SOFIE VAN DAELE — PREMIUM ART GALLERY SITE
   Design tokens, typography, layout, components
   ============================================================ */

:root {
  /* Colour — warm paper, deep olive, oil-paint ink */
  --ivory:    #F3EDE2;          /* warm paper ground */
  --bone:     #E8DFCB;          /* aged canvas */
  --sand:     #D7CAAE;          /* deep paper shadow */
  --olive:    #4E5238;          /* signature deep olive */
  --moss:     #7B8061;          /* muted sage */
  --ink:      #3A2B1C;          /* deep warm chocolate brown (was near-black) */
  --ink-rgb:  58, 43, 28;       /* raw RGB voor rgba() schaduwen en borders */
  --rust:     #8A4B2B;          /* deep terracotta accent */
  --line:     rgba(var(--ink-rgb), 0.12);
  --line-strong: rgba(var(--ink-rgb), 0.28);

  /* Type */
  --display:  "Fraunces", "Cormorant Garamond", Georgia, serif;
  --body:     "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono:     "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Scale */
  --fs-micro: 0.72rem;
  --fs-small: 0.82rem;
  --fs-body:  1rem;
  --fs-lead:  1.125rem;
  --fs-h4:    clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-h3:    clamp(1.6rem, 2.4vw, 2.2rem);
  --fs-h2:    clamp(2.2rem, 4.2vw, 4rem);
  --fs-h1:    clamp(3.4rem, 8vw, 9rem);
  --fs-hero:  clamp(4rem, 14vw, 14rem);

  /* Motion */
  --ease:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --slow:     1.2s;
  --med:      0.6s;
  --fast:     0.3s;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Op mobile: native momentum-scroll ipv smooth (voorkomt iOS jank) */
@media (max-width: 880px) {
  html { scroll-behavior: auto; }
}
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: clip voorkomt horizontaal scrollen ZONDER een eigen scroll-context
     te creëren — zo werkt position: sticky wel tegen de viewport. */
  overflow-x: clip;
  min-height: 100vh;
}
img, video { max-width: 100%; display: block; height: auto; }

/* Smooth image fade-in — every <img> starts hidden, fades in once decoded.
   Aspect-ratio on wrappers reserves space so there's no layout shift. */
img {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
img[data-loaded="true"] { opacity: 1; }
.no-js img { opacity: 1 !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--olive); color: var(--ivory); }

/* Grain overlay — paper texture everywhere */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.07 0 0 0 0.25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9998;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.4rem clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: background var(--med) var(--ease), padding var(--med) var(--ease);
}
.nav.scrolled {
  background: var(--ivory);
  padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
/* Auto-hide nav op scroll-down — via TOP property ipv transform,
   anders breekt position:fixed van de menu-overlay op iOS Safari */
.nav {
  transition: top 0.35s var(--ease), background var(--med) var(--ease), padding var(--med) var(--ease);
}
.nav.is-hidden {
  top: -120px;
}
.nav__brand {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nav__brand span { font-style: normal; font-weight: 300; }
.nav__menu {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  list-style: none;
  align-items: center;
}
.nav__link {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink);
  position: relative;
  padding: 0.3rem 0;
  transition: color var(--fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--olive);
  transition: width var(--med) var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }
.nav__link.is-active { color: var(--olive); }

/* ============================================================
   LANGUAGE SWITCHER — NL / EN / FR
   Klein, subtiel, in nav geplaatst
   ============================================================ */
.nav__lang {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-left: 1.8rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--line);
}
.nav__lang-btn {
  font-family: var(--body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.45;
  background: none;
  border: none;
  padding: 0.3rem 0.35rem;
  cursor: pointer;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
  border-radius: 0;
  line-height: 1;
}
.nav__lang-btn:hover { opacity: 0.9; }
.nav__lang-btn.is-active {
  opacity: 1;
  color: var(--olive);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
@media (max-width: 880px) {
  /* Verberg de taalknoppen standaard op mobile (anders staan ze in de weg
     in de nav-header). Tonen ze pas wanneer het burger-menu open is. */
  .nav__lang { display: none; }

  /* Burger-menu open → toon taalknoppen onderaan het menu-overlay */
  .nav__menu.is-open ~ .nav__lang {
    display: flex;
    position: fixed;
    bottom: 3rem;
    left: 0;
    right: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 1.4rem clamp(1.25rem, 6vw, 3rem) 0;
    border: none;
    border-top: 1px solid var(--line);
    background: var(--ivory);
    z-index: 100;
  }
  .nav__lang-btn { font-size: 1rem; padding: 0.6rem 0.6rem; }
}

/* Mobile burger */
.nav__burger {
  display: none;
  width: 32px; height: 32px;
  position: relative;
}
.nav__burger span {
  position: absolute;
  left: 4px; right: 4px;
  height: 1px;
  background: var(--ink);
  transition: transform var(--fast) var(--ease), top var(--fast) var(--ease), opacity var(--fast);
}
.nav__burger span:nth-child(1) { top: 11px; }
.nav__burger span:nth-child(2) { top: 16px; }
.nav__burger span:nth-child(3) { top: 21px; }
.nav__burger.is-open span:nth-child(1) { top: 16px; transform: rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { top: 16px; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav__menu {
    position: fixed;
    inset: 0;
    background: var(--ivory);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 clamp(1.25rem, 6vw, 3rem);
    gap: 1.8rem;
    transform: translateY(-100%);
    transition: transform 0.55s var(--ease);
    z-index: 99;
  }
  .nav__menu.is-open { transform: translateY(0); }
  .nav__link { font-size: 1.2rem; letter-spacing: 0.08em; }
  .nav__burger { display: block; z-index: 101; }
}

/* ============================================================
   PAGE TRANSITION CURTAIN
   ============================================================ */
.curtain {
  position: fixed;
  inset: 0;
  background: var(--olive);
  z-index: 9999;
  pointer-events: none;
  transform-origin: bottom;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor,
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9997;
  will-change: transform;
}
/* Minimal cursor — subtle ring, no label expansion */
.cursor {
  width: 28px; height: 28px;
  border: 1px solid var(--olive);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease-out), opacity 0.3s var(--ease);
  opacity: 0.55;
}
.cursor-dot {
  width: 5px; height: 5px;
  background: var(--olive);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor__label { display: none; }
.cursor.is-hover {
  transform: translate(-50%, -50%) scale(1.35);
  opacity: 0.9;
}
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
  body { cursor: auto; }
}
@media (hover: hover) {
  body:not(.no-cursor) { cursor: none; }
  body:not(.no-cursor) a,
  body:not(.no-cursor) button { cursor: none; }
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap { padding-inline: clamp(1.25rem, 4vw, 3rem); }
.wrap--wide { padding-inline: clamp(1.25rem, 2.5vw, 2rem); }
.container { max-width: 1440px; margin-inline: auto; }

section { padding-block: clamp(4rem, 8vw, 8rem); }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}
.section-head__num {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--olive);
  flex: 0 0 auto;
}
.section-head__label {
  font-family: var(--body);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink);
  flex: 1;
}

/* ============================================================
   TYPOGRAPHY — display & editorial
   ============================================================ */
.display,
.h1, h1, .h2, h2, .h3, h3 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
}
.h1, h1 { font-size: var(--fs-h1); }
.h2, h2 { font-size: var(--fs-h2); line-height: 1.05; }
.h3, h3 { font-size: var(--fs-h3); line-height: 1.1; }
.h4, h4 { font-family: var(--display); font-size: var(--fs-h4); font-weight: 400; line-height: 1.2; }
.italic { font-style: italic; font-weight: 300; }
.serif { font-family: var(--display); }

.eyebrow {
  font-family: var(--body);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--olive);
}
.lead {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.35;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.meta {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--olive);
}

.word, .line { display: inline-block; will-change: transform, opacity; }
.split-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split-word > span { display: inline-block; transform: translateY(100%); }

/* ============================================================
   HERO (HOME)
   ============================================================ */
.hero {
  min-height: 100vh;
  padding-top: clamp(8rem, 14vw, 12rem);
  padding-bottom: clamp(4rem, 6vw, 7rem);
  position: relative;
  overflow: hidden;
}
.hero__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 2rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hero__eyebrow {
  display: flex; gap: 1.2rem; align-items: center;
}
.hero__eyebrow span:first-child::after {
  content: "";
  display: inline-block;
  width: 30px; height: 1px;
  background: var(--olive);
  margin-left: 1.2rem;
  vertical-align: middle;
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.88;
  letter-spacing: -0.04em;
}
.hero__title .wonk {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--olive);
}
.hero__sub {
  margin-top: clamp(1.5rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: 1fr minmax(200px, 360px);
  gap: 2rem;
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}
.hero__sub .lead { max-width: 22ch; }
.hero__sub .meta-stack { text-align: right; }
.hero__sub .meta-stack p + p { margin-top: 0.35em; }

/* Hero — flexbox in plaats van grid. Met flex-start hebben beide foto's hun
   eigen natuurlijke hoogte zonder dat de ene de andere stretcht. */
.hero__images {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.4rem);
  margin-top: clamp(2rem, 4vw, 4rem);
  align-items: flex-start;
}
.hero__image-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;                    /* voorkomt overflow met flex shrinking */
}
.hero > .container > .hero__image-wrap {
  margin-top: clamp(2rem, 4vw, 4rem);
}
.hero__image-wrap img {
  width: 100%;
  height: auto;                    /* natuurlijke hoogte → geen letterbox */
  display: block;
  box-shadow: 0 24px 60px -28px rgba(var(--ink-rgb), 0.30);  /* schaduw volgt foto exact */
}
@media (max-width: 700px) {
  .hero__images { display: block; }
  .hero__image-wrap { width: 100%; flex: none; margin-bottom: 1rem; }
  .hero__image-wrap:last-child { margin-bottom: 0; }
}
/* reveal effect handled via clip-path in JS — no overlay needed */

@media (max-width: 700px) {
  .hero__head { grid-template-columns: 1fr; gap: 1rem; }
  .hero__sub { grid-template-columns: 1fr; }
  .hero__sub .meta-stack { text-align: left; }
}

/* ============================================================
   FEATURED WORK — alternating reveal gallery (scroll-triggered)
   ============================================================ */
.reveal-gallery {
  display: grid;
  gap: clamp(4rem, 8vw, 8rem);
  padding-block: clamp(3rem, 5vw, 5rem);
  max-width: 1180px;
  margin-inline: auto;
}
.reveal-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  color: inherit;
  position: relative;
}
.reveal-card--right {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.reveal-card--left .reveal-card__img  { grid-column: 1; grid-row: 1; }
.reveal-card--left .reveal-card__meta { grid-column: 2; grid-row: 1; }
.reveal-card--right .reveal-card__img  { grid-column: 2; grid-row: 1; }
.reveal-card--right .reveal-card__meta { grid-column: 1; grid-row: 1; text-align: right; }
.reveal-card--right .reveal-card__meta .reveal-card__num { margin-left: auto; }

.reveal-card__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone);
  box-shadow: 0 30px 60px -30px rgba(var(--ink-rgb), 0.42);
  transition: box-shadow 0.7s var(--ease);
  will-change: clip-path;
}
.reveal-card:hover .reveal-card__img {
  box-shadow: 0 42px 80px -30px rgba(var(--ink-rgb), 0.55);
}
.reveal-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.5s var(--ease-out), filter 0.7s var(--ease);
  filter: brightness(0.96);
}
.reveal-card:hover .reveal-card__img img {
  transform: scale(1.05);
  filter: brightness(1.02);
}

/* Landscape paintings look better wider than 4:5 */
.reveal-card[data-ratio="landscape"] .reveal-card__img { aspect-ratio: 3 / 2; }
.reveal-card[data-ratio="portrait"]  .reveal-card__img { aspect-ratio: 3 / 4; }

.reveal-card__meta {
  display: grid;
  gap: 0.75rem;
  align-content: center;
}
.reveal-card__num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  margin-bottom: 0.3rem;
}
.reveal-card__meta h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  transition: color 0.4s var(--ease);
}
.reveal-card:hover .reveal-card__meta h3 { color: var(--olive); }
.reveal-card__size {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0;
}
.reveal-card__desc {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.82;
  max-width: 34ch;
  margin: 0.3rem 0 0.6rem;
}
.reveal-card--right .reveal-card__desc { margin-left: auto; }
.reveal-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--olive);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  width: fit-content;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.reveal-card--right .reveal-card__cta { margin-left: auto; }
.reveal-card__cta .arrow { transition: transform 0.4s var(--ease); }
.reveal-card:hover .reveal-card__cta { border-bottom-color: var(--olive); color: var(--ink); }
.reveal-card:hover .reveal-card__cta .arrow { transform: translateX(4px); }

/* Pre-reveal state (GSAP animates to 0) */
[data-reveal-card] { opacity: 0; }
.no-js [data-reveal-card] { opacity: 1; }

.reveal-gallery__cta {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 780px) {
  .reveal-card,
  .reveal-card--right {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .reveal-card--left .reveal-card__img,
  .reveal-card--right .reveal-card__img { grid-column: 1; grid-row: 1; }
  .reveal-card--left .reveal-card__meta,
  .reveal-card--right .reveal-card__meta {
    grid-column: 1; grid-row: 2;
    text-align: left;
  }
  .reveal-card--right .reveal-card__meta .reveal-card__num,
  .reveal-card--right .reveal-card__desc,
  .reveal-card--right .reveal-card__cta {
    margin-left: 0;
  }
}
.gw {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.6s var(--ease-out);
}
.gw:hover { transform: translateY(-6px); }
.gw__frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bone);
  box-shadow: 0 20px 50px -30px rgba(var(--ink-rgb), 0.35);
  transition: box-shadow 0.6s var(--ease);
}
.gw:hover .gw__frame {
  box-shadow: 0 36px 70px -30px rgba(var(--ink-rgb), 0.55);
}
.gw__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out), filter 0.6s var(--ease), clip-path 1.1s var(--ease-out);
  filter: brightness(0.95);
  clip-path: inset(0 0 0 0);
}
.gw:hover .gw__frame img {
  transform: scale(1.06);
  filter: brightness(1.02);
}
.gw__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, rgba(var(--ink-rgb), 0.38));
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.gw:hover .gw__scrim { opacity: 1; }

/* Floating view-chip that appears on hover */
.gw__frame::after {
  content: "BEKIJK →";
  position: absolute;
  left: 50%; bottom: 1.2rem;
  transform: translate(-50%, 12px);
  padding: 0.7rem 1.2rem;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.55s var(--ease-out);
  z-index: 2;
  box-shadow: 0 10px 28px -12px rgba(var(--ink-rgb), 0.45);
}
.gw:hover .gw__frame::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Subtle sweep line across the image on hover */
.gw__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(243, 237, 226, 0.18) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 0.9s var(--ease-out);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
.gw:hover .gw__frame::before { transform: translateX(110%); }

.gw__caption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
  margin-top: clamp(1.25rem, 2vw, 1.6rem);
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  position: relative;
}
.gw__caption::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--olive);
  transition: width 0.7s var(--ease-out) 0.08s;
}
.gw:hover .gw__caption::before { width: 100%; }

.gw__num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  padding-top: 0.25rem;
  transition: color 0.5s var(--ease), transform 0.55s var(--ease-out);
}
.gw:hover .gw__num {
  color: var(--ink);
  transform: translateX(2px);
}
.gw__text { padding-top: 0.55rem; }
.gw__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  transition: color 0.4s var(--ease);
}
.gw:hover .gw__title { color: var(--olive); }
.gw__meta {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
}

/* Editorial asymmetric placement */
.gw--one   { grid-column: 1 / span 7; }
.gw--two   { grid-column: 9 / span 4; margin-top: clamp(3rem, 7vw, 7rem); }
.gw--three { grid-column: 2 / span 4; }
.gw--four  { grid-column: 7 / span 6; margin-top: clamp(2rem, 5vw, 5rem); }

.gw--one  .gw__frame { aspect-ratio: 3 / 2; }
.gw--two  .gw__frame { aspect-ratio: 4 / 5; }
.gw--three .gw__frame { aspect-ratio: 4 / 5; }
.gw--four .gw__frame { aspect-ratio: 4 / 3; }

.gallery-wall__cta {
  text-align: center;
  margin-top: clamp(3rem, 5vw, 5rem);
}

@media (max-width: 900px) {
  .gallery-wall { gap: 3rem 0; }
  .gw--one, .gw--two, .gw--three, .gw--four {
    grid-column: 1 / -1;
    margin-top: 0;
    aspect-ratio: auto;
  }
  .gw__frame { aspect-ratio: 4 / 3; }
}

/* ============================================================
   SCROLL GALLERY — 3D perspective arc, driven by page scroll
   ============================================================ */
.scroll-section {
  position: relative;
  background: var(--ivory);
  /* height is set via JS to trackWidth - vw + vh */
}
.scroll-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  perspective: 1600px;
  perspective-origin: 50% 48%;
  isolation: isolate;
  /* reserveer ruimte voor de nav bovenaan + kleine bodem-marge
     zodat werken niet onder de nav schuiven */
  padding-top: clamp(5rem, 9vh, 7rem);
  padding-bottom: clamp(1.5rem, 3vh, 3rem);
  box-sizing: border-box;
}
.scroll-track {
  display: flex;
  gap: clamp(1.2rem, 2.2vw, 2.4rem);
  /* padding-left/-right are set dynamically by JS so first/last slides can reach center */
  transform-style: preserve-3d;
  will-change: translate;
  align-items: center;
}
.slide {
  flex: 0 0 auto;
  /* Vaste basis-breedte. Voor portrait/tall slides die te hoog zouden worden,
     verkleinen we de slide-breedte zodat de natuurlijke aspect-ratio onder de
     viewport-cap valt. Zo BLIJFT titel/formaat altijd onder de foto zichtbaar. */
  width: clamp(280px, 34vw, 480px);
  position: relative;
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.slide--landscape { width: clamp(420px, 56vw, 780px); }
.slide--tall      { width: clamp(220px, 26vw, 380px); }   /* extra hoge schilderijen krijgen smallere slide */
.slide--portrait  { width: clamp(260px, 30vw, 440px); }    /* hoge schilderijen iets smaller dan default */

.slide__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  /* GEEN max-height in CSS — main.js verkleint de slide-breedte als de
     natuurlijke hoogte buiten de viewport zou vallen. Resultaat: foto vult
     de inner exact (zonder letterbox bone-bars) én titel blijft zichtbaar. */
  background: transparent;
  box-shadow: 0 10px 40px -20px rgba(var(--ink-rgb), 0.35);
  transition: filter 0.55s var(--ease);
  filter: brightness(0.85) saturate(0.88) contrast(0.97);
  will-change: filter;
  margin-inline: auto;
}
.slide.is-active .slide__inner { filter: brightness(1) saturate(1) contrast(1); }
.slide:hover .slide__inner,
.slide.is-hover .slide__inner {
  filter: brightness(1) saturate(1) contrast(1);
}
/* Aspect-ratio = default per modifier; JS overschrijft met de werkelijke
   foto-verhouding zodra natürlaf geladen, zodat object-fit: cover NOOIT crop. */
.slide--landscape .slide__inner { aspect-ratio: 3 / 2; }
.slide--square    .slide__inner { aspect-ratio: 1 / 1; }
.slide--portrait  .slide__inner { aspect-ratio: 3 / 4; }
.slide--tall      .slide__inner { aspect-ratio: 2 / 3; }

.slide__inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;             /* mocht inner-aspect afwijken van foto: contain ipv crop */
  background: transparent;
  -webkit-user-drag: none;
  user-select: none;
  transition: opacity 0.8s var(--ease), transform 1.2s var(--ease-out);
}
.slide:hover .slide__inner img,
.slide.is-hover .slide__inner img { transform: scale(1.035); }

/* Museum-plaquette ONDER het werk — titel + formaat altijd zichtbaar.
   Vertical stack zodat lange subtitels NIET buiten de slide vloeien
   en overlap met buurslides veroorzaken. */
.slide__info {
  position: relative;
  margin-top: clamp(0.85rem, 1.1vw, 1.1rem);
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--ink);
  width: 100%;
  max-width: 100%;
  overflow: hidden;                 /* veiligheidsnet: geen content-bleed */
}
.slide__info::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--olive);
  transition: width 0.6s var(--ease-out);
}
.slide:hover .slide__info::before,
.slide.is-hover .slide__info::before,
.slide.is-active .slide__info::before { width: 100%; }

.slide__info .eyebrow {
  grid-column: 1 / -1;
  font-family: var(--body);
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--olive);
  opacity: 0.78;
  margin-bottom: 0.2rem;
}
.slide__info h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  transition: color 0.4s var(--ease);
  word-wrap: break-word;
}
.slide:hover .slide__info h3,
.slide.is-hover .slide__info h3 { color: var(--olive); }
.slide__info .size {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  opacity: 0.85;
  word-wrap: break-word;
  line-height: 1.5;
  white-space: nowrap;
  padding-bottom: 0.15rem;
}
/* Description hidden — voorkomt layout-shift op scroll.
   Plaquette behoudt constante hoogte (titel + formaat). */
.slide__info .desc { display: none; }

/* Counter + progress line */
.scroll-ui {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  pointer-events: none;
  z-index: 3;
}
.scroll-ui .count {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: var(--olive);
  pointer-events: auto;
}
.scroll-ui .hint {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--body);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--olive);
  opacity: 0.75;
}
.scroll-ui .hint::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  animation: hintLine 2.4s ease-in-out infinite;
  transform-origin: left;
}
@keyframes hintLine {
  0%, 100% { transform: scaleX(0.3); }
  50%      { transform: scaleX(1); }
}

.scroll-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line);
  z-index: 3;
}
.scroll-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Mobile: zelfde scroll-pinned gedrag als desktop (verticaal → horizontaal)
   maar zonder 3D-arc voor performance — slides blijven plat */
@media (max-width: 900px) {
  .scroll-pin {
    perspective: none !important;
  }
  .slide__inner {
    max-height: none;
  }
  .scroll-ui {
    padding-bottom: 1rem;
    padding-inline: 1.25rem;
  }
  .scroll-ui .hint { font-size: 0.55rem; letter-spacing: 0.2em; }
}

/* ============================================================
   PORTFOLIO — MUSEUM GRID
   ============================================================ */
.museum {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 2.5vw, 2.5rem);
  padding-top: 2rem;
}
.work {
  position: relative;
  display: block;
  color: inherit;
}
.work__img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--bone);
  box-shadow: 0 20px 50px -30px rgba(var(--ink-rgb), 0.38);
  transition: box-shadow 0.6s var(--ease);
  height: 100%;
}
.work:hover .work__img-wrap {
  box-shadow: 0 32px 70px -30px rgba(var(--ink-rgb), 0.55);
}
.work__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.8s var(--ease), transform 1.6s var(--ease-out), filter 0.7s var(--ease);
  filter: brightness(0.96);
}
.work:hover .work__img-wrap img {
  transform: scale(1.045);
  filter: brightness(1.02);
}

/* Hover overlay — premium frosted panel on lower portion */
.work__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.3rem, 2vw, 1.8rem) clamp(1.3rem, 2vw, 1.8rem) clamp(1.2rem, 1.6vw, 1.5rem);
  color: var(--ivory);
  background: linear-gradient(to top,
    rgba(var(--ink-rgb), 0.92) 22%,
    rgba(var(--ink-rgb), 0.62) 55%,
    rgba(var(--ink-rgb), 0.12) 85%,
    rgba(var(--ink-rgb), 0) 100%);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.45s var(--ease), transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 2;
  display: grid;
  gap: 0.25rem;
}
.work:hover .work__label,
.work.is-hover .work__label {
  opacity: 1;
  transform: translateY(0);
}
.work__label .num {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.8;
  margin-bottom: 0.3rem;
}
.work__label .title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ivory);
}
.work__label .size {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.85;
  margin-top: 0.2rem;
}
.work__label .tech {
  font-family: var(--body);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ivory);
  opacity: 0.78;
  margin-top: 0.15rem;
}
.work__label .status {
  font-family: var(--body);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--bone);
  opacity: 0.7;
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(243, 237, 226, 0.22);
}
/* Mobile / touch: no hover — tap to reveal via .is-hover toggle */
@media (hover: none), (pointer: coarse) {
  .work__label {
    opacity: 1;
    transform: translateY(0);
    background: linear-gradient(to top, rgba(var(--ink-rgb), 0.88) 15%, rgba(var(--ink-rgb), 0.35) 65%, rgba(var(--ink-rgb), 0) 100%);
  }
}

/* Grid variations — asymmetric museum layout */
.work--xl    { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
.work--lg    { grid-column: 1 / span 7; aspect-ratio: 5 / 4; }
.work--md    { grid-column: 4 / span 6; aspect-ratio: 4 / 3; }
.work--right { grid-column: 8 / span 5; aspect-ratio: 4 / 5; }
.work--right-lg { grid-column: 6 / span 7; aspect-ratio: 3 / 2; }
.work--left  { grid-column: 2 / span 5; aspect-ratio: 1 / 1; }
.work--wide  { grid-column: 2 / span 10; aspect-ratio: 16 / 9; }
.work--sm    { grid-column: span 4; aspect-ratio: 1 / 1; }
.work--mini  { grid-column: span 3; aspect-ratio: 3 / 4; }
.work--portrait-r { grid-column: 9 / span 4; aspect-ratio: 3 / 4; }
.work--portrait-l { grid-column: 1 / span 4; aspect-ratio: 3 / 4; }
.work--center { grid-column: 4 / span 6; aspect-ratio: 1 / 1; }

.work__img-wrap {
  height: 100%;
}

@media (max-width: 900px) {
  .museum { grid-template-columns: repeat(6, 1fr); gap: 2.5rem 1rem; }
  .work { grid-column: 1 / -1 !important; aspect-ratio: auto !important; }
  .work--sm, .work--mini { grid-column: span 3 !important; aspect-ratio: 1/1 !important; }
  .work__img-wrap { aspect-ratio: 4 / 3; }
}

/* Page head (used by portfolio, bio, etc) */
.page-head {
  padding-top: clamp(8rem, 14vw, 12rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
.page-head__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.page-head h1 {
  font-size: var(--fs-h1);
  line-height: 0.94;
  letter-spacing: -0.035em;
}
.page-head h1 em {
  font-style: italic; font-weight: 300;
  color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.page-head__desc {
  max-width: 46ch;
  margin-top: clamp(0.5rem, 1vw, 1rem);
  color: var(--ink);
  opacity: 0.82;
  font-size: var(--fs-lead);
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
}

/* ============================================================
   BIO PAGE
   ============================================================ */
.bio-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.2fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: stretch;
}
/* Wrapper = grid item dat de volledige rij-hoogte vult, zodat .bio-portrait
   (sticky) ruimte heeft om doorheen te "scrollen". */
.bio-portrait-col {
  position: relative;
  height: 100%;
}
.bio-portrait {
  position: sticky;
  top: 7rem;
  width: 100%;
  /* GEEN vaste aspect-ratio en GEEN max-height — foto bepaalt zelf z'n hoogte */
  box-shadow: 0 30px 60px -30px rgba(var(--ink-rgb), 0.42);
}
.bio-portrait img {
  width: 100%;
  height: auto;                    /* natuurlijke ratio — geen marges */
  display: block;
}
.bio-text { max-width: 62ch; }
.bio-text p { margin-bottom: 1.3rem; line-height: 1.75; }
.bio-lang-panel > p:first-child { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.4; font-weight: 300; margin-bottom: 2.2rem; color: var(--ink); }
.bio-text .dropcap::first-letter {
  font-family: var(--display);
  font-weight: 300;
  font-size: 4.4em;
  float: left;
  line-height: 0.85;
  margin: 0.1em 0.12em 0 -0.04em;
  color: var(--olive);
}
.bio-text h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--olive);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.bio-lang-tabs {
  display: flex; gap: 0.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.bio-lang-tab {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.7rem 1rem;
  color: var(--ink);
  opacity: 0.45;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: opacity var(--fast), border-color var(--fast);
}
.bio-lang-tab.is-active {
  opacity: 1;
  border-bottom-color: var(--olive);
  color: var(--olive);
}

/* Editorial spec sheet — premium, minimal, artist-CV look */
.bio-facts {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.bio-facts::before {
  content: "Spec";
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
  opacity: 0.7;
  margin-bottom: 1.4rem;
}
.bio-facts__item {
  display: grid;
  grid-template-columns: minmax(160px, 0.3fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.2rem, 2vw, 1.6rem);
  border-top: 1px solid var(--line);
  transition: background 0.35s var(--ease);
}
.bio-facts__item:hover { background: rgba(78, 82, 56, 0.04); }
.bio-facts__item:last-child { border-bottom: 1px solid var(--line); }
.bio-facts__item .eyebrow {
  margin-bottom: 0;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--olive);
  padding-top: 0.45rem;
}
.bio-facts__item p:not(.eyebrow) {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (max-width: 540px) {
  .bio-facts__item {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .bio-facts__item .eyebrow { padding-top: 0; }
}

@media (max-width: 900px) {
  .bio-layout { grid-template-columns: 1fr; }
  .bio-portrait { position: relative; top: 0; }
}

/* ============================================================
   HOW IT WORKS — steps (dog portraits page)
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: 2rem;
}
.step { position: relative; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.step__num {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--olive);
  margin-bottom: 1.2rem;
}
.step__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
  color: var(--ink);
}
.step__title em { color: var(--olive); }
.step__body { font-size: 0.95rem; line-height: 1.6; color: var(--ink); opacity: 0.82; }

@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Editorial price statement — ivoor, hairlines, typografische hiërarchie (geen zwaar olive blok) */
.price-statement {
  margin-top: clamp(3rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  position: relative;
}
.price-statement::before {
  /* subtiele olive hairline-accent bovenaan */
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: clamp(60px, 10%, 120px);
  height: 2px;
  background: var(--olive);
}
.price-statement__left {
  display: grid;
  gap: 1rem;
}
.price-statement__eyebrow {
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--olive);
}
.price-statement__amount {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
}
.price-statement__amount em {
  font-style: italic;
  color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.price-statement__right {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  padding-bottom: 0.3rem;
}
.price-statement__detail {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  max-width: 42ch;
  margin: 0;
}
@media (max-width: 780px) {
  .price-statement {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .price-statement__right { padding-bottom: 0; }
}

/* CTA button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.6rem 1.1rem 1.8rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background var(--med) var(--ease), color var(--med) var(--ease), border-color var(--med) var(--ease);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--med) var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--ivory); }
.btn:hover::before { transform: scaleY(1); transform-origin: top; }
.btn .arrow { display: inline-block; transition: transform var(--med) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--light { color: var(--ivory); border-color: var(--ivory); }
.btn--light::before { background: var(--ivory); }
.btn--light:hover { color: var(--olive); }

.btn--solid {
  background: var(--ink); color: var(--ivory); border-color: var(--ink);
}
.btn--solid::before { background: var(--olive); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 5rem);
  padding-top: 2rem;
}
.testimonial {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  position: relative;
}
.testimonial__num {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--olive);
  margin-bottom: 1.25rem;
}
.testimonial__quote {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 1.5rem;
  letter-spacing: -0.008em;
}
.testimonial__author {
  font-family: var(--body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--olive);
}
.testimonial.feature {
  grid-column: 1 / -1;
  padding-top: 2rem;
  border-top: 1px solid var(--line-strong);
}
.testimonial.feature .testimonial__quote {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.3;
  max-width: 28ch;
  margin-inline: auto;
  text-align: center;
}
.testimonial.feature .testimonial__author { text-align: center; display: block; }

@media (max-width: 780px) {
  .testimonials { grid-template-columns: 1fr; }
}

/* ============================================================
   REVIEWS EDITORIAL — sticky left + scrollende reviews stack
   ============================================================ */
.reviews-editorial {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: 1rem;
  align-items: start;
}
.reviews-editorial__sticky {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 1.4rem;
  align-self: start;
}
.reviews-editorial__sticky .eyebrow {
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--olive);
  opacity: 0.8;
}
.reviews-editorial__sticky .h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}
.reviews-editorial__sticky .h3 em {
  color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.reviews-editorial__sticky p:not(.h3) {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  max-width: 28ch;
  margin: 0;
}
.reviews-editorial__sticky .count {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--olive);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  margin-top: 0.5rem;
}

/* Scrollende stack: reviews onder elkaar met subtiele hairlines ertussen */
.reviews-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.reviews-stack .testimonial {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  margin: 0;
  position: relative;
  grid-column: auto;
}
.reviews-stack .testimonial:first-child {
  border-top: none;
  padding-top: 0;
}
.reviews-stack .testimonial__num {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--olive);
  opacity: 0.75;
  margin-bottom: 1rem;
}
.reviews-stack .testimonial__quote {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 1rem;
  max-width: 52ch;
}
.reviews-stack .testimonial__author {
  font-family: var(--body);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--olive);
  font-style: normal;
}

@media (max-width: 900px) {
  .reviews-editorial {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .reviews-editorial__sticky {
    position: relative;
    top: 0;
  }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(3rem, 6vw, 6rem);
  padding-top: 2rem;
  align-items: start;
}
.contact-head .display-xl {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.contact-head .display-xl em {
  font-style: italic; color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.contact-info {
  display: grid; gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.contact-info__row .eyebrow { margin-bottom: 0.35rem; }
.contact-info__row a,
.contact-info__row p {
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.25;
  color: var(--ink);
}
.contact-info__row a { transition: color var(--fast); border-bottom: 1px solid transparent; }
.contact-info__row a:hover { color: var(--olive); border-bottom-color: var(--olive); }

.contact-socials {
  display: flex; gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.contact-socials a {
  font-family: var(--body);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--fast), border-color var(--fast);
}
.contact-socials a:hover { color: var(--olive); border-bottom-color: var(--olive); }

/* Form */
.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { position: relative; }
.field label {
  display: block;
  font-family: var(--body);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 500;
  color: var(--olive);
  margin-bottom: 0.5rem;
}
.field input,
.field textarea {
  width: 100%;
  padding: 0.9rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--ink);
  transition: border-color var(--fast);
  resize: none;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--olive);
}
.field textarea { min-height: 140px; padding-top: 1rem; font-style: italic; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   CONTACT — editorial closing mark
   ============================================================ */
.closing-section {
  padding-block: clamp(4rem, 8vw, 8rem) clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--line);
  margin-top: clamp(3rem, 5vw, 5rem);
}
.closing {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
}
.closing__eyebrow {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.closing__line {
  display: inline-block;
  width: 48px; height: 1px;
  background: var(--olive);
}
.closing__mark {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3rem, 11vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
  text-align: left;
}
.closing__mark span { display: inline-block; }
.closing__mark .em {
  font-style: italic;
  color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  margin-inline: 0.08em;
}
.closing__meta {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.closing__meta .eyebrow { margin-bottom: 0.55rem; }
.closing__meta p:not(.eyebrow) {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
}
.closing__sig .closing__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

@media (max-width: 820px) {
  .closing__meta { grid-template-columns: 1fr; gap: 1.75rem; }
  .closing__mark { font-size: clamp(2.6rem, 12vw, 5rem); }
}

/* ============================================================
   REPORTAGE / PRESS — editorial magazine layout
   Sticky left column (title + intro), scrolling right column.
   ============================================================ */
.press-editorial {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: 1rem;
  align-items: start;
}
.press-editorial__sticky {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 1.4rem;
  align-self: start;
}
.press-editorial__sticky .eyebrow {
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--olive);
  opacity: 0.8;
}
.press-editorial__sticky .h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.press-editorial__sticky p {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  max-width: 28ch;
}
.press-editorial__sticky .count {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--olive);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  margin-top: 0.5rem;
}

.press-stack {
  display: grid;
  gap: clamp(4rem, 8vw, 7rem);
}
.press {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  position: relative;
  color: inherit;
  transition: transform 0.55s var(--ease-out);
}
.press:hover { transform: translateY(-4px); }

/* Featured (first) press — large hero media, bigger title */
.press--featured .press__media { aspect-ratio: 16 / 10; }
.press--featured .press__title {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
}
.press--featured .press__body {
  font-size: 1.02rem;
  max-width: 58ch;
}

/* Secondary items — 2-column, media left, text right */
.press--split {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.press--split .press__media { margin-bottom: 0; aspect-ratio: 4 / 3; }
.press--split .press__body { max-width: 38ch; }

.press__media {
  position: relative;
  overflow: hidden;
  background: var(--bone);
  aspect-ratio: 16 / 9;
  box-shadow: 0 22px 48px -26px rgba(var(--ink-rgb), 0.38);
  transition: box-shadow 0.55s var(--ease);
}
.press:hover .press__media {
  box-shadow: 0 36px 66px -26px rgba(var(--ink-rgb), 0.55);
}
.press__media img,
.press__media video,
.press__media iframe {
  width: 100%; height: 100%; object-fit: cover; border: none;
  transition: opacity 0.8s var(--ease), transform 1.3s var(--ease-out);
}
.press:hover .press__media img { transform: scale(1.045); }

.press__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(243, 237, 226, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  padding-left: 5px;
  box-shadow: 0 16px 40px -12px rgba(var(--ink-rgb), 0.5);
  transition: transform 0.45s var(--ease-out), background 0.4s var(--ease), color 0.4s;
  z-index: 2;
}
.press:hover .press__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--olive);
  color: var(--ivory);
}

.press__text {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}
.press__source {
  position: relative;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--olive);
  padding-top: 0.85rem;
  margin: 0;
  border-top: 1px solid var(--line);
  display: inline-block;
  width: fit-content;
}
.press__source::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--olive);
  transition: width 0.6s var(--ease-out);
}
.press:hover .press__source::before { width: 100%; }

.press__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 26ch;
  color: var(--ink);
  transition: color 0.45s var(--ease);
}
.press:hover .press__title { color: var(--olive); }
.press__body {
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.78;
  max-width: 48ch;
  margin: 0;
}
.press__more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.5rem;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--olive);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.press__more .arrow { transition: transform 0.4s var(--ease); }
.press:hover .press__more { border-bottom-color: var(--olive); color: var(--ink); }
.press:hover .press__more .arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .press-editorial {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .press-editorial__sticky {
    position: relative;
    top: 0;
  }
  .press--split {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .press--split .press__media { aspect-ratio: 16 / 9; }
}

/* ============================================================
   BESCHIKBAAR — premium collection gallery
   Curated listing, not a webshop. Subtle "beschikbaar" status.
   ============================================================ */
.collection-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding-block: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(3rem, 5vw, 4rem);
  align-items: center;
  justify-content: space-between;
}
.collection-filter__group {
  display: flex;
  gap: 0.25rem 1.8rem;
  flex-wrap: wrap;
}
.collection-filter__btn {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink);
  opacity: 0.55;
  padding: 0.35rem 0;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  transition: opacity 0.35s var(--ease);
}
.collection-filter__btn::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--olive);
  transition: width 0.4s var(--ease);
}
.collection-filter__btn:hover,
.collection-filter__btn.is-active {
  opacity: 1;
  color: var(--olive);
}
.collection-filter__btn.is-active::after { width: 100%; }
.collection-filter__count {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--olive);
  opacity: 0.75;
}

.collection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 3vw, 3rem);
  padding-top: 1rem;
}
.coll-item {
  display: flex;
  flex-direction: column;
  color: inherit;
  position: relative;
  transition: transform 0.55s var(--ease-out);
}
.coll-item.is-hidden { display: none; }
.coll-item:hover { transform: translateY(-5px); }
.coll-item__frame {
  position: relative;
  overflow: hidden;
  background: var(--bone);
  aspect-ratio: 4 / 5;
  box-shadow: 0 22px 50px -28px rgba(var(--ink-rgb), 0.4);
  transition: box-shadow 0.55s var(--ease);
  margin-bottom: 1.1rem;
}
.coll-item:hover .coll-item__frame {
  box-shadow: 0 34px 68px -28px rgba(var(--ink-rgb), 0.55);
}
.coll-item__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.8s var(--ease), transform 1.5s var(--ease-out), filter 0.7s var(--ease);
  filter: brightness(0.96);
}
.coll-item:hover .coll-item__frame img {
  transform: scale(1.045);
  filter: brightness(1.02);
}

/* Subtle status chip — top-left, ivory-tinted, barely there at rest */
.coll-item__status {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: 0.3rem 0.7rem 0.35rem;
  font-family: var(--body);
  font-size: 0.55rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ink);
  background: rgba(243, 237, 226, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
  transition: opacity 0.45s var(--ease);
}
.coll-item__status--sold {
  color: var(--ivory);
  background: rgba(var(--ink-rgb), 0.82);
}

.coll-item__meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 1rem;
  row-gap: 0.25rem;
  align-items: baseline;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  position: relative;
}
.coll-item__meta::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--olive);
  transition: width 0.6s var(--ease-out);
}
.coll-item:hover .coll-item__meta::before { width: 100%; }
.coll-item__num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  padding-top: 0.1rem;
}
.coll-item__title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  transition: color 0.4s var(--ease);
}
.coll-item:hover .coll-item__title { color: var(--olive); }
.coll-item__size {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  white-space: nowrap;
}
.coll-item__tech {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--body);
  font-size: 0.78rem;
  color: var(--ink);
  opacity: 0.62;
  margin: 0;
}

/* Collection intro block */
.collection-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 3vw, 2.5rem);
}
.collection-intro h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 18ch;
}
.collection-intro h2 em {
  font-style: italic;
  color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.collection-intro p {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.8;
  max-width: 36ch;
}

/* Editorial closing — geen bak, gewoon editorial typografie */
.collection-close {
  margin-top: clamp(5rem, 8vw, 8rem);
  padding-top: clamp(2.5rem, 4vw, 4rem);
  padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
  border-top: 1px solid var(--line);
  display: grid;
  gap: clamp(1.4rem, 2.2vw, 1.8rem);
  max-width: 760px;
  position: relative;
}
.collection-close__eyebrow {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: var(--body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--olive);
}
.collection-close__eyebrow::before {
  content: "";
  display: inline-block;
  width: 48px; height: 1px;
  background: var(--olive);
}
.collection-close__mark {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  max-width: 18ch;
}
.collection-close__mark em {
  font-style: italic;
  color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  margin-inline: 0.08em;
}
.collection-close__sub {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.78;
  max-width: 42ch;
  margin: 0;
}
.collection-close .btn {
  justify-self: start;
  margin-top: 0.3rem;
}

@media (max-width: 900px) {
  .collection { grid-template-columns: repeat(2, 1fr); }
  .collection-intro { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 560px) {
  .collection { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============================================================
   REPORTAGE DETAIL PAGE
   ============================================================ */
.report-detail {
  max-width: 980px;
  margin-inline: auto;
}
.report-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--olive);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s, color 0.35s;
  margin-bottom: clamp(1.2rem, 2vw, 1.8rem);
}
.report-detail__back:hover { border-bottom-color: var(--olive); }
.report-detail__eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1rem;
}
.report-detail h1 {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  max-width: 22ch;
}
.report-detail h1 em {
  font-style: italic;
  color: var(--olive);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.report-detail__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bone);
  box-shadow: 0 28px 60px -30px rgba(var(--ink-rgb), 0.5);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.report-detail__media iframe,
.report-detail__media img,
.report-detail__media video {
  width: 100%; height: 100%; object-fit: cover; border: none;
}
.report-detail__body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--line);
}
.report-detail__meta {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
.report-detail__meta .eyebrow { margin-bottom: 0.3rem; }
.report-detail__meta p {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
}
.report-detail__meta a {
  font-family: var(--body);
  font-size: 0.82rem;
  color: var(--olive);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 0.35s, color 0.35s;
  font-style: normal;
}
.report-detail__meta a:hover { border-bottom-color: var(--olive); color: var(--ink); }
.report-detail__text p {
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 1.4rem;
  max-width: 58ch;
}
.report-detail__text p:first-child {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 2rem;
}
.report-detail__next {
  margin-top: clamp(4rem, 7vw, 7rem);
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.report-detail__next .meta { color: var(--olive); }
.report-detail__next a {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: var(--ink);
  transition: color 0.35s;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
}
.report-detail__next a:hover { color: var(--olive); border-bottom-color: var(--olive); }
@media (max-width: 780px) {
  .report-detail__body { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  margin-top: clamp(4rem, 8vw, 8rem);
  padding: clamp(3rem, 5vw, 5rem) clamp(1.25rem, 4vw, 3rem) 2rem;
  background: var(--ink);
  color: var(--ivory);
  position: relative;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(243, 237, 226, 0.15);
  max-width: 1440px;
  margin: 0 auto;
}
.footer__grid h4 {
  font-family: var(--body);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 500;
  color: var(--bone);
  opacity: 0.6;
  margin-bottom: 1.25rem;
}
.footer__grid a,
.footer__grid p {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ivory);
}
.footer__grid a:hover { color: var(--bone); }

.footer__mark {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 2rem;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: rgba(243, 237, 226, 0.5);
  max-width: 1440px;
  margin: 0 auto;
}
.footer__wordmark {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 1;
  color: var(--ivory);
  padding-top: 2rem;
  padding-bottom: 0.5rem;
  max-width: 1440px;
  margin: 0 auto;
  letter-spacing: -0.035em;
}
.footer__wordmark em { color: var(--moss); }

@media (max-width: 780px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__mark { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ============================================================
   REVEAL / ANIMATION — initial states for GSAP
   ============================================================ */
[data-reveal] { opacity: 0; }
[data-reveal="up"] { transform: translateY(30px); }
[data-reveal="fade"] { opacity: 0; }
[data-reveal-img] { clip-path: inset(100% 0 0 0); }
[data-reveal-img] > img { transform: scale(1.2); }
.no-js [data-reveal],
.no-js [data-reveal-img] { opacity: 1; clip-path: none; transform: none; }

/* ============================================================
   UTILITIES
   ============================================================ */
.tr { text-align: right; }
.tl { text-align: left; }
.tc { text-align: center; }
.u-small { font-size: var(--fs-small); }
.u-micro { font-size: var(--fs-micro); }
.hide-mobile { display: initial; }
.show-mobile { display: none; }
@media (max-width: 700px) {
  .hide-mobile { display: none; }
  .show-mobile { display: initial; }
}

/* Inline rule (horizontal hair) */
.hr {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin-block: clamp(3rem, 5vw, 5rem);
}

/* ============================================================
   MOBILE POLISH — touch targets, leesbaarheid, stacking
   ============================================================ */
/* ============================================================
   MOBILE COMPREHENSIVE POLISH (≤ 760px)
   — uniforme padding, scroll-gallery met marges, touch-vriendelijk
   ============================================================ */
@media (max-width: 760px) {

  /* GPU-hints op mobile voor vloeiend scrollen */
  .scroll-track, .scroll-pin {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
  }
  /* Kortere opacity-fades op mobile (voelt sneller aan) */
  img { transition: opacity 0.3s var(--ease); }

  /* ---------- Basis ---------- */
  body { font-size: 1rem; line-height: 1.6; }
  .lead { font-size: 1.1rem; line-height: 1.45; }
  .h2, h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.05; }
  .h3, h3 { font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1.1; }

  /* Uniforme side-padding via .wrap */
  .wrap, .wrap--wide { padding-inline: 1.25rem; }

  /* Section tighter vertical rhythm */
  section { padding-block: clamp(3rem, 8vw, 5rem); }

  /* ---------- Navigatie ---------- */
  .nav { padding: 0.9rem 1.25rem; }
  .nav.scrolled { padding: 0.65rem 1.25rem; }
  .nav__brand { font-size: 1.1rem; }
  .nav__burger { width: 38px; height: 38px; }
  .nav__menu {
    padding: 5rem 1.5rem 2rem !important;
    justify-content: flex-start !important;
    gap: 0.2rem !important;
  }
  .nav__link {
    padding: 1rem 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    font-size: 1.4rem !important;
    letter-spacing: 0.05em !important;
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .nav__link:last-child { border-bottom: none; }
  .nav__link::after { display: none; }

  /* ---------- Hero ---------- */
  .hero {
    min-height: auto;
    padding-top: clamp(5rem, 18vw, 7rem);
    padding-bottom: clamp(2rem, 5vw, 3rem);
  }
  .hero__head { grid-template-columns: 1fr; gap: 0.8rem; margin-bottom: 1.25rem; }
  .hero__eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .hero__eyebrow span:first-child::after { display: none; }
  .hero__title {
    font-size: clamp(3rem, 14vw, 5rem);
    line-height: 0.92;
    letter-spacing: -0.035em;
  }
  .hero__sub {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-top: 1rem;
  }
  .hero__sub .meta-stack { text-align: left; }
  /* GEEN aspect-ratio meer op de hero wrap — image dicteert z'n eigen verhouding */

  /* ---------- Page head ---------- */
  .page-head {
    padding-top: clamp(5rem, 14vw, 7rem);
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
    gap: 0.8rem;
  }
  .page-head h1 { font-size: clamp(2.6rem, 12vw, 4rem); line-height: 0.95; }
  .page-head__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  /* ---------- Section-head ---------- */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding-top: 1rem;
    margin-bottom: 1.5rem;
  }
  .section-head__num { flex: 0 0 auto; }
  .section-head .meta {
    margin-left: 0 !important;
    width: 100%;
    font-size: 0.7rem;
  }

  /* ---------- SCROLL GALLERY MOBILE — zelfde pinned gedrag als desktop ----------
     Gallery blijft fixed, verticaal scrollen verschuift de track horizontaal.
     Wel: slides wat smaller + geen 3D-arc. */
  .scroll-pin {
    perspective: none !important;
    padding-top: clamp(4rem, 11vh, 6rem) !important;
    padding-bottom: clamp(1rem, 3vh, 2rem) !important;
  }
  .slide,
  .slide--landscape,
  .slide--portrait,
  .slide--square,
  .slide--tall {
    width: 75vw !important;
    max-width: 380px;
    filter: none !important;
  }
  .slide__inner { max-height: none !important; }
  .slide__info h3 { font-size: 1.05rem; }
  .slide__info .size { font-size: 0.6rem; }

  /* ---------- Reveal-gallery (home alternating cards) ---------- */
  .reveal-gallery { gap: 2.8rem; padding-block: 2rem; max-width: 100%; }
  .reveal-card, .reveal-card--right {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .reveal-card--right .reveal-card__meta {
    text-align: left !important;
  }
  .reveal-card--right .reveal-card__num,
  .reveal-card--right .reveal-card__desc,
  .reveal-card--right .reveal-card__cta {
    margin-left: 0 !important;
  }
  .reveal-card__meta h3 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .reveal-card__num { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .reveal-card__img { aspect-ratio: 4/5 !important; }

  /* ---------- Intro & teaser grids ---------- */
  .intro-grid,
  .dog-grid,
  .press-teaser,
  .commission-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ---------- Bio ---------- */
  .bio-layout { grid-template-columns: 1fr !important; gap: 2rem; }
  .bio-portrait-col { height: auto; }
  .bio-portrait {
    position: relative !important;
    top: 0 !important;
    max-height: none !important;
    /* GEEN aspect-ratio — image dicteert eigen verhouding */
  }
  .bio-facts { margin-top: 2.5rem; }
  .bio-facts__item {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding-block: 1rem;
  }
  .bio-facts__item .eyebrow { padding-top: 0; }
  .bio-lang-tabs { gap: 0; }
  .bio-lang-tab { font-size: 0.7rem; padding: 0.7rem 0.8rem; }

  /* ---------- Contact ---------- */
  .contact-layout { grid-template-columns: 1fr !important; gap: 2.5rem; }
  .contact-info { gap: 1.25rem; }
  .contact-info__row a,
  .contact-info__row p { font-size: 1.25rem; }
  .contact-socials {
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
  }
  .contact-socials a {
    padding: 0.75rem 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Form — 16px inputs voorkomen iOS auto-zoom */
  .form__row { grid-template-columns: 1fr; gap: 1rem; }
  .field input, .field textarea {
    font-size: 16px;
    padding: 0.95rem 0;
    min-height: 44px;
  }
  .field label { font-size: 0.66rem; }

  /* ---------- Closing ---------- */
  .closing__meta { grid-template-columns: 1fr; gap: 1.5rem; }
  .closing__mark { font-size: clamp(2.4rem, 14vw, 4.4rem); }

  /* ---------- Reportage editorial ---------- */
  .press-editorial { grid-template-columns: 1fr !important; gap: 2rem; }
  .press-editorial__sticky { position: relative !important; top: 0 !important; }
  .press-editorial__sticky .h3 { font-size: 1.7rem; }
  .press-stack { gap: clamp(2.5rem, 7vw, 4rem); }
  .press--split,
  .press--featured {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .press--split .press__media,
  .press--featured .press__media { aspect-ratio: 16/9 !important; }
  .press__title { font-size: clamp(1.25rem, 5.5vw, 1.7rem); }
  .press__body { font-size: 0.9rem; }

  /* Reportage detail-pagina */
  .report-detail__body { grid-template-columns: 1fr; gap: 1.5rem; }
  .report-detail h1 { font-size: clamp(1.9rem, 9vw, 3rem); }
  .report-detail__media { margin-bottom: 2rem; }

  /* ---------- Reviews editorial ---------- */
  .reviews-editorial { grid-template-columns: 1fr !important; gap: 2rem; }
  .reviews-editorial__sticky { position: relative !important; top: 0 !important; }
  .reviews-editorial__sticky .h3 { font-size: 1.7rem; }
  .reviews-stack .testimonial { padding-block: 1.6rem; }
  .reviews-stack .testimonial__quote { font-size: 1.05rem; line-height: 1.5; }
  .reviews-stack .testimonial__num { margin-bottom: 0.7rem; }

  /* ---------- Steps & price ---------- */
  .steps { grid-template-columns: 1fr; gap: 1.2rem; }
  .step { padding-top: 0.8rem; }
  .step__title { font-size: 1.3rem; }

  .price-statement {
    grid-template-columns: 1fr !important;
    gap: 1.2rem;
    align-items: start !important;
    padding-block: 2rem;
  }
  .price-statement__amount { font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .price-statement__right { padding-bottom: 0; }

  /* Legacy .testimonials 2-col → 1-col */
  .testimonials { grid-template-columns: 1fr; gap: 2rem; }
  .testimonial.feature .testimonial__quote { font-size: 1.3rem; }

  /* ---------- Beschikbaar collection (als fallback) ---------- */
  .collection { grid-template-columns: 1fr; gap: 2.5rem; }
  .collection-intro { grid-template-columns: 1fr; gap: 0.8rem; }
  .collection-filter { gap: 0.4rem 1rem; flex-direction: column; align-items: flex-start; }

  .collection-close { max-width: 100%; }
  .collection-close__mark { font-size: clamp(2rem, 10vw, 2.8rem); }

  /* ---------- Buttons — touch-friendly ---------- */
  .btn {
    padding: 1rem 1.4rem;
    font-size: 0.72rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }

  /* ---------- Footer ---------- */
  .footer { padding: 2.5rem 1.25rem 1.5rem; margin-top: 3rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.25rem; padding-bottom: 2rem; }
  .footer__grid h4 { font-size: 0.62rem; margin-bottom: 0.9rem; }
  .footer__grid a, .footer__grid p { font-size: 1rem; }
  .footer__wordmark {
    font-size: clamp(2.4rem, 14vw, 4rem);
    padding-top: 1rem;
  }
  .footer__mark {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding-top: 1.2rem;
    font-size: 0.58rem;
  }

  /* ---------- Slidende style elementen uitschakelen op mobile ---------- */
  .cursor, .cursor-dot { display: none !important; }
  body { cursor: auto !important; }
}

/* ============================================================
   EXTRA SMALL SCREENS (≤ 400px)
   ============================================================ */
@media (max-width: 400px) {
  .wrap { padding-inline: 1rem; }
  .nav { padding: 0.8rem 1rem; }
  .nav__brand { font-size: 1rem; }
  .nav__menu { padding: 4.5rem 1.25rem 1.5rem !important; }
  .nav__link { font-size: 1.2rem !important; }

  .hero__title { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .page-head h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
  .h2, h2 { font-size: clamp(1.6rem, 8vw, 2.2rem); }

  .slide, .slide--landscape, .slide--portrait,
  .slide--square, .slide--tall { width: 86vw !important; }
  .scroll-track { padding-inline: 1rem !important; gap: 0.8rem !important; }

  .footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__grid a, .footer__grid p { font-size: 0.95rem; }

  .btn { font-size: 0.68rem; padding: 0.9rem 1.2rem; }
}

/* Respect prefers-reduced-motion — alle scroll/hover-animaties uit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   ADDITIONAL LAYOUTS (april 2026)
   - Dog-grid: pagina hondenportretten als clean grid (i.p.v. scroll-pinned)
   - Featured-dogs: mini galerij op home (meerdere honden i.p.v. 1 teaser)
   - Bio reviews: tekst + bijhorende foto per review
   - Artist portrait slot: optioneel portret van Sofie zelf op /bio
   ============================================================ */

/* ---------- Dog grid (hondenportretten page) — masonry via CSS columns ----------
   Geen vaste aspect-ratio per card; elke foto behoudt z'n natuurlijke verhouding,
   cards stromen elegant in kolommen mét verschillende hoogtes (Pinterest-stijl). */
.dog-grid-page {
  column-count: 3;
  column-gap: clamp(1.2rem, 2.4vw, 2rem);
  padding: clamp(1rem, 3vw, 2rem) 0;
}
@media (max-width: 1100px) { .dog-grid-page { column-count: 2; } }
@media (max-width: 600px)  { .dog-grid-page { column-count: 1; } }

.dog-card {
  display: block;
  break-inside: avoid;
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
  background: var(--ivory);
  opacity: 1;
  transform: none;
}
.dog-card__frame {
  position: relative;
  width: 100%;
  /* GEEN aspect-ratio — foto bepaalt zelf hoogte → geen letterbox marges */
  box-shadow: 0 18px 40px -22px rgba(var(--ink-rgb), 0.28);
  overflow: hidden;
}
.dog-card__frame img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.dog-card:hover .dog-card__frame img { transform: scale(1.025); }
.dog-card__info {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.dog-card__num {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
}
.dog-card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.3;
  color: var(--ink);
}
.dog-card__sub {
  font-size: var(--fs-small);
  color: var(--ink);
  opacity: 0.72;
  line-height: 1.5;
}

/* ---------- Featured dogs mini-grid (home teaser) — masonry-style ---------- */
.featured-dogs {
  column-count: 2;
  column-gap: 0.7rem;
  width: 100%;
}
.featured-dogs .dog-thumb {
  position: relative;
  break-inside: avoid;
  margin-bottom: 0.7rem;
  box-shadow: 0 14px 30px -18px rgba(var(--ink-rgb), 0.28);
  /* GEEN aspect-ratio — foto bepaalt natuurlijke hoogte */
}
.featured-dogs .dog-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Bio reviews (met portretfoto per review) ---------- */
.bio-reviews {
  display: grid;
  gap: clamp(1.5rem, 2.4vw, 2.4rem);
  margin-top: clamp(2rem, 4vw, 4rem);
}
.bio-review {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
  padding-top: clamp(1.2rem, 2vw, 1.8rem);
  border-top: 1px solid var(--line);
}
.bio-review__media {
  position: relative;
  /* GEEN aspect-ratio — foto bepaalt zelf z'n verhouding */
}
.bio-review__media img {
  width: 100%;
  height: auto;
  display: block;
}
.bio-review__text { display: flex; flex-direction: column; gap: 0.6rem; }
.bio-review__num {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
}
.bio-review__quote {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink);
}
.bio-review__author {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--ink);
  opacity: 0.72;
}
@media (max-width: 700px) {
  .bio-review { grid-template-columns: 1fr; }
  .bio-review__media { max-width: 220px; }
}

/* (Bio artist-portrait slot verwijderd — alleen één foto links op bio-pagina nu) */

/* ---------- Bio: minder whitespace bovenaan ---------- */
/* Compactere page-head + bio-layout zodat de inhoud hoger op het scherm staat */
body:has(.bio-layout) .page-head {
  padding-top: clamp(5rem, 9vw, 7rem);
  padding-bottom: clamp(1rem, 2vw, 2rem);
}
.bio-main {
  padding-block: clamp(1rem, 2vw, 2.5rem) !important;
}
.bio-portrait {
  top: 4rem;                         /* sticky offset compacter */
}

/* ============================================================
   Reviews — optionele klantfoto per testimonial
   (Sofie uploadt foto's via de editor; zonder foto = tekst-only)
   ============================================================ */

/* Hondenportretten-pagina: klantfoto bovenaan de testimonial card */
.testimonial.testimonial--with-photo {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: clamp(1rem, 2vw, 1.4rem);
  align-items: start;
}
.testimonial__photo {
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: 50%;          /* ronde "happy customer" avatar-stijl */
  background: var(--bone);
  box-shadow: 0 8px 20px -10px rgba(var(--ink-rgb), 0.25);
  flex-shrink: 0;
}
.testimonial__photo img {
  width: 100%; height: 100%;
  object-fit: cover;           /* avatar — center crop is hier wél gewenst */
  display: block;
}
.testimonial--with-photo .testimonial__num,
.testimonial--with-photo .testimonial__quote,
.testimonial--with-photo .testimonial__author { grid-column: 2; }
@media (max-width: 600px) {
  .testimonial.testimonial--with-photo { grid-template-columns: 64px 1fr; }
  .testimonial__photo { width: 64px; height: 64px; }
}

/* Bio-pagina: zonder foto wordt review tekst-only en neemt minder ruimte */
.bio-review.bio-review--text-only {
  grid-template-columns: 1fr;
}
.bio-review.bio-review--text-only .bio-review__text {
  max-width: 60ch;
}

/* ============================================================
   Reviews-pagina (dedicated /reviews.html) — sticky kolom + 
   grote review-cards met optionele klantfoto. Bouwt voort op
   .bio-review styling maar in een eigen layout-grid.
   ============================================================ */
.reviews-page {
  display: grid;
  grid-template-columns: 0.85fr 2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.reviews-page__sticky {
  position: sticky;
  top: 7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-family: var(--display);
  color: var(--ink);
}
.reviews-page__sticky .eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
}
.reviews-page__sticky .h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.reviews-page__sticky p {
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.78;
  max-width: 36ch;
}
.reviews-page__sticky .count {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
  margin-top: 0.6rem;
}
.reviews-page__list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.8rem, 3vw, 2.8rem);
}
@media (max-width: 900px) {
  .reviews-page { grid-template-columns: 1fr; }
  .reviews-page__sticky { position: relative; top: 0; }
}

/* ============================================================
   Contact-form success state (na succesvolle Netlify Forms submit)
   ============================================================ */
.form-success {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--olive);
  border-radius: 6px;
  background: rgba(78, 82, 56, 0.06);
  text-align: center;
}
.form-success .eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 0.7rem;
}
.form-success p:last-child {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 38ch;
  margin: 0 auto;
}

/* ============================================================
   Contact form — honeypot + error-state styling
   ============================================================ */
/* Honeypot anti-spam veld — verborgen voor mensen, zichtbaar voor bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.form-error {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--rust);
  background: rgba(138, 75, 43, 0.08);
  font-size: var(--fs-small);
  color: var(--ink);
  border-radius: 4px;
}

#contact-submit:disabled {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}