/* ==========================================================================
   FJ Studio — pages.css
   Paginasecties: hero, intro, voordelen (bento), werkwijze (stapelkaarten),
   CTA, dienstpagina's, over ons, contact, projectdetail, 404, juridisch
   ========================================================================== */

main { display: block; }

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.hero-inner { position: relative; display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: end; }
.hero-main { display: grid; gap: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.hero-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero-title { font-size: clamp(3.3rem, 1rem + 10.5vw, 8.75rem); }
.hero-chip {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  height: 0.74em;
  aspect-ratio: 1.6;
  margin-inline: 0.04em;
  border-radius: var(--r-pill);
  background: var(--c-tangerine);
  transform: translateY(-0.06em);
}
.hero-chip svg { width: 32%; }
.hero-pill {
  display: inline-block;
  padding: 0 0.2em 0.06em;
  border-radius: var(--r-pill);
  background: var(--c-grape);
  color: #fff;
  --pr: 6deg;
}
.hero-copy { display: grid; gap: var(--s-5); }
.hero-copy .lead { color: var(--c-ink-2); max-width: 40ch; }

/* Showreel-kaart: lopende woorden, timecode en voortgangsbalk */
.hero-reel {
  position: relative;
  aspect-ratio: 16 / 11;
  max-width: 100%;
  border-radius: var(--r-lg);
  background: var(--c-ink);
  color: #fff;
  overflow: visible;
  isolation: isolate;
}
.reel-words { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; overflow: hidden; border-radius: inherit; container-type: inline-size; }
.reel-words::before {
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84, 52, 240, 0.55), transparent 65%);
  filter: blur(10px);
  animation: glow 6s ease-in-out infinite alternate;
}
@keyframes glow { to { transform: translate(18%, -12%) scale(1.15); } }
.reel-word {
  grid-area: 1 / 1;
  position: relative;
  font-size: clamp(2.25rem, 15cqi, 6rem);
  font-weight: 650;
  font-stretch: 88%;
  letter-spacing: -0.035em;
  line-height: 1;
  text-align: center;
  clip-path: inset(0 0 100% 0);
  transform: translateY(14%) rotate(-4deg);
  transition: clip-path 650ms var(--ease-out), transform 900ms var(--ease-spring);
}
.reel-word.is-active { clip-path: inset(0 0 -10% 0); transform: none; }
.reel-word.is-leaving { clip-path: inset(100% 0 0 0); transform: translateY(-10%); }
.reduced .reel-word:first-child, .no-js .reel-word:first-child { clip-path: none; transform: none; }
.reel-top, .reel-bottom {
  position: absolute;
  left: 24px; right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  z-index: 2;
}
.reel-top { top: 20px; }
.reel-bottom { bottom: 20px; }
.rec { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-tangerine); animation: blink 1.4s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.reel-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.reel-bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; animation: progress 10.2s linear infinite; }
@keyframes progress { from { transform: scaleX(0); } }
.hero-reel .badge-spin { position: absolute; left: -28px; bottom: -36px; z-index: 3; }
@media (max-width: 999.98px) { .hero-reel .badge-spin { left: auto; right: 14px; top: -44px; bottom: auto; } .hero-reel { margin-top: var(--s-6); } }
@media (min-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-7); }
  .hero-reel { aspect-ratio: 4 / 5; }
}

/* ---------- Intro ---------- */
.intro-grid { display: grid; gap: var(--s-6); align-items: center; }
.intro-card {
  position: relative;
  padding: clamp(2rem, 1.2rem + 3vw, 4rem);
  border-radius: var(--r-lg);
  background: var(--c-ink);
  color: #fff;
}
.intro-card .h1 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6rem); }
.intro-card .sticker { --rot: 10deg; right: -14px; bottom: -22px; }
.intro-copy { display: grid; gap: var(--s-4); }
.intro-copy p { font-size: var(--fs-lg); line-height: 1.55; color: var(--c-ink-2); }
.intro-copy p:first-child { color: var(--c-ink); font-weight: 550; }
@media (min-width: 900px) {
  .intro-grid { grid-template-columns: 7fr 5fr; gap: var(--s-8); }
}

/* ---------- Voordelen: bento ---------- */
.bento { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.tile {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--s-3);
  min-height: 240px;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  overflow: hidden;
  isolation: isolate;
  transition: transform 600ms var(--ease-spring);
}
.tile h3 { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); font-weight: 700; font-stretch: 85%; letter-spacing: -0.032em; line-height: 0.98; max-width: 14ch; }
.tile p { max-width: 38ch; font-size: var(--fs-base); }
.tile--grape { background: var(--c-grape); color: #fff; }
.tile--grape p { color: rgba(255, 255, 255, 0.86); }
.tile--sun { background: var(--c-sun); }
.tile--bubble { background: var(--c-bubble); }
.tile--tangerine { background: var(--c-tangerine); }
.tile--mint { background: var(--c-mint); }
.tile .shape { position: absolute; z-index: -1; transition: transform 900ms var(--ease-spring); }
.tile:hover .shape { transform: scale(1.12); }
.tile .shape { opacity: 0.16; }
.shape--star, .shape--squiggle { display: none; }
.shape--star { width: 46%; aspect-ratio: 1; top: -8%; right: -6%; background: var(--c-sun); clip-path: polygon(50% 0%, 61% 15%, 79% 9%, 82% 27%, 100% 32%, 91% 49%, 100% 66%, 82% 71%, 79% 90%, 61% 84%, 50% 100%, 39% 84%, 21% 90%, 18% 71%, 0% 66%, 9% 49%, 0% 32%, 18% 27%, 21% 9%, 39% 15%); }
.shape--circle { width: 160px; aspect-ratio: 1; top: -40px; right: -40px; border-radius: 50%; background: var(--c-ink); }
.shape--half { width: 180px; height: 90px; top: 0; right: 24px; border-radius: 0 0 180px 180px; background: var(--c-ink); }
.shape--squiggle { width: 180px; top: 18px; right: 18px; height: 40px; }
.shape--ring { width: 160px; aspect-ratio: 1; top: -30px; right: -30px; border-radius: 50%; border: 24px solid var(--c-ink); }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile:nth-child(1) { grid-column: span 4; grid-row: span 2; min-height: 420px; }
  .tile:nth-child(1) h3 { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 5rem); }
  .tile:nth-child(2), .tile:nth-child(3) { grid-column: span 2; }
  .tile:nth-child(4), .tile:nth-child(5) { grid-column: span 3; }
}
@media (hover: hover) {
  .tile:hover { transform: translateY(-4px); }
}

/* ---------- Werkwijze: kaarten die op elkaar stapelen bij scrollen ---------- */
.process-wrap { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) {
  .process-wrap { grid-template-columns: 5fr 7fr; align-items: start; }
  .process-head { position: sticky; top: calc(var(--header-h) + 3rem); }
}
.process-head { display: grid; gap: var(--s-4); justify-items: start; }
.stack { display: grid; gap: var(--s-6); list-style: none; padding: 0; }
.stack-card {
  position: sticky;
  top: calc(var(--header-h) + 2rem + var(--i, 0) * 18px);
  display: grid;
  gap: var(--s-3);
  min-height: 260px;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  box-shadow: 0 -8px 30px -14px rgba(27, 15, 59, 0.35);
  transform-origin: center top;
}
.stack-card:nth-child(1) { --i: 0; background: var(--c-grape); color: #fff; }
.stack-card:nth-child(2) { --i: 1; background: var(--c-ink); color: #fff; }
.stack-card:nth-child(3) { --i: 2; background: var(--c-bubble); }
.stack-card:nth-child(4) { --i: 3; background: var(--c-tangerine); }
.stack-num {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.032em;
}
.stack-card h3 { font-size: var(--fs-2xl); font-weight: 700; font-stretch: 85%; letter-spacing: -0.032em; line-height: 1; }
.stack-card p { max-width: 44ch; font-size: var(--fs-lg); line-height: 1.5; }
.stack-card:nth-child(1) p, .stack-card:nth-child(2) p { color: rgba(255, 255, 255, 0.84); }

/* ---------- CTA-blok ---------- */
.cta-block { text-align: left; }
.cta-inner { position: relative; display: grid; gap: var(--s-6); justify-items: start; }
.cta-title { font-size: clamp(3.2rem, 1rem + 9.5vw, 11rem); font-weight: 700; font-stretch: 85%; letter-spacing: -0.038em; line-height: 0.9; max-width: 11ch; }
.cta-sub { font-size: var(--fs-xl); font-weight: 550; max-width: 30ch; line-height: 1.3; }
.cta-block .badge-spin { position: absolute; right: 0; bottom: 0; --size: clamp(120px, 8vw + 60px, 180px); }
@media (max-width: 759.98px) { .cta-block .badge-spin { position: relative; } }
.cta-block .deco { position: absolute; z-index: -1; border-radius: 50%; }
.cta-block .deco--1 { width: 420px; aspect-ratio: 1; right: -120px; top: -160px; border: 1px solid currentColor; opacity: 0.18; }
.cta-block .deco--2 { width: 18px; aspect-ratio: 1; right: 30%; top: 22%; background: var(--c-tangerine); }

/* ---------- Pagina-hero (subpagina's) ---------- */
.page-hero { padding-top: calc(var(--header-h) + 1.75rem); }
.page-hero-block {
  position: relative;
  margin-inline: clamp(0.5rem, 0.2rem + 1.2vw, 1.25rem);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  border-radius: var(--r-lg);
  background: var(--hero-bg, var(--c-tint));
  color: var(--hero-fg, var(--c-ink));
  overflow: hidden;
  isolation: isolate;
}
.page-hero-block .breadcrumb { margin-bottom: var(--s-6); }
.page-hero-grid { display: grid; gap: var(--s-6); align-items: end; }
.page-hero-title { font-size: clamp(3rem, 1rem + 7.4vw, 8.5rem); }
.page-hero-side { display: grid; gap: var(--s-5); justify-items: start; }
.page-hero-side .lead { color: inherit; opacity: 0.86; }
.page-hero-art {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  box-shadow: 0 40px 80px -40px rgba(20, 17, 31, 0.5);
  overflow: hidden;
}
.page-hero-art .ph { position: absolute; inset: 0; }
@media (min-width: 1000px) {
  .page-hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
  .page-hero-grid > .page-hero-title { grid-column: 1 / 9; grid-row: 1; }
  .page-hero-side { grid-column: 1 / 8; grid-row: 2; }
  .page-hero-art { grid-column: 9 / 13; grid-row: 1 / 3; align-self: center; aspect-ratio: 4 / 5; }
  .page-hero--short > .page-hero-title { grid-column: 1 / -1; }
}
.hero-bg--grape { --hero-bg: var(--c-grape); --hero-fg: #fff; }
.hero-bg--tangerine { --hero-bg: var(--c-tangerine); }
.hero-bg--bubble { --hero-bg: var(--c-bubble); }
.hero-bg--sun { --hero-bg: var(--c-sun); }
.hero-bg--mint { --hero-bg: var(--c-mint); }
.hero-bg--tint { --hero-bg: var(--c-tint); }
.hero-bg--ink { --hero-bg: var(--c-ink); --hero-fg: #fff; }
.page-hero-block .shape-bg { position: absolute; z-index: -1; border-radius: 50%; width: 38vw; max-width: 520px; aspect-ratio: 1; right: -8vw; top: -12vw; background: rgba(255, 255, 255, 0.16); }

/* ---------- Dienstpagina's ---------- */
.split { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
  .split > :first-child { grid-column: 1 / 6; }
  .split > :last-child { grid-column: 7 / 13; }
  .split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + var(--s-7)); align-self: start; }
}
.split .prose p:first-child { color: var(--c-ink); font-size: var(--fs-lg); line-height: 1.55; font-weight: 500; }

.included-grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .included-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.included-item {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  transition: transform 400ms var(--ease-spring);
}
.included-item:hover { transform: translateY(-4px); }
.included-item h3 { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.015em; }
.included-item h3::before {
  content: "";
  display: block;
  width: 28px; height: 3px;
  margin-bottom: var(--s-5);
  border-radius: 3px;
  background: var(--c-grape);
  transition: width 500ms var(--ease-out);
}
.included-item:nth-child(even) h3::before { background: var(--c-tangerine); }
.included-item:hover h3::before { width: 56px; }
.included-item p { color: var(--c-ink-2); font-size: var(--fs-sm); }

.related { display: grid; gap: var(--s-4); }
@media (min-width: 800px) { .related { grid-template-columns: 1fr 1fr; } }
.related a {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--rel-bg, #fff);
  color: var(--c-ink);
  text-decoration: none;
  transition: transform 400ms var(--ease-spring), box-shadow 400ms var(--ease-spring);
}
.related a:nth-child(1) { --rel-bg: var(--c-sun); }
.related a:nth-child(2) { --rel-bg: var(--c-bubble); }
.related a:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(20, 17, 31, 0.45); }
.related strong { font-size: var(--fs-2xl); font-weight: 700; font-stretch: 85%; letter-spacing: -0.032em; line-height: 0.98; }
.related span { font-size: var(--fs-sm); font-weight: 600; }

/* Diensten-overzicht: kaarten in de eigen kleur van elke dienst */
.svc-cards { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .svc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-card {
  position: relative;
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: var(--svc-bg);
  color: var(--svc-fg, var(--c-ink));
  transition: transform 500ms var(--ease-spring), box-shadow 500ms var(--ease-spring);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(20, 17, 31, 0.5); }
.svc-card-group { justify-self: start; }
.svc-card h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); font-weight: 700; font-stretch: 85%; letter-spacing: -0.032em; line-height: 0.98; }
.svc-card h2 a { text-decoration: none; }
.svc-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc-card p { opacity: 0.88; }
.svc-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.svc-tags li { padding: 0.25rem 0.75rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.72); color: var(--c-ink); font-size: var(--fs-xs); font-weight: 650; }
.svc-card .more { font-weight: 650; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
.svc--websites { --svc-bg: var(--c-grape); --svc-fg: #fff; }
.svc--onderhoud-hosting { --svc-bg: var(--c-mint); }
.svc--seo-marketing { --svc-bg: var(--c-sun); }
.svc--marketingvideos { --svc-bg: var(--c-tangerine); }
.svc--social-content { --svc-bg: var(--c-bubble); }
.svc--aftermovies { --svc-bg: var(--c-ink); --svc-fg: #fff; }

/* ---------- Over ons ---------- */
.collage { position: relative; display: grid; gap: var(--s-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.collage > div { position: relative; border-radius: var(--r-md); border: 1px solid var(--c-line); overflow: hidden; box-shadow: none; }
.collage .ph { position: absolute; inset: 0; }
.collage .c1 { grid-column: 1 / 13; aspect-ratio: 16 / 10; }
.collage .c2 { grid-column: 1 / 7; aspect-ratio: 3 / 4; }
.collage .c3 { grid-column: 7 / 13; aspect-ratio: 3 / 4; }
@media (min-width: 900px) {
  .collage .c1 { grid-column: 1 / 7; grid-row: 1 / 3; aspect-ratio: auto; min-height: 520px; }
  .collage .c2 { grid-column: 7 / 10; grid-row: 1; aspect-ratio: 3 / 4; margin-top: var(--s-7); }
  .collage .c3 { grid-column: 10 / 13; grid-row: 1 / 3; aspect-ratio: 3 / 4; align-self: end; }
}
.collage .sticker { left: 44%; top: -24px; }
.values { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.value { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); border-radius: var(--r-lg); border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); }
.value:nth-child(1) { background: var(--c-sun); }
.value:nth-child(2) { background: var(--c-bubble); }
.value:nth-child(3) { background: var(--c-mint); }
.value h3 { font-size: var(--fs-2xl); font-weight: 700; font-stretch: 85%; letter-spacing: -0.032em; line-height: 1; }
.value p { color: rgba(27, 15, 59, 0.85); }
.statement { font-size: clamp(2rem, 1.1rem + 3.6vw, 4.75rem); font-weight: 700; font-stretch: 88%; line-height: 1.08; letter-spacing: -0.032em; max-width: 22ch; }
.statement mark { background: none; color: inherit; padding: 0 0.15em; border-radius: var(--r-pill); }
.statement mark:nth-of-type(1) { background: var(--c-sun); }
.statement mark:nth-of-type(2) { background: var(--c-bubble); }
.statement mark:nth-of-type(3) { background: var(--c-mint); }
.team-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.team-card .ph { aspect-ratio: 4 / 5; border-radius: var(--r-md); border: 1px solid var(--c-line); }
.team-card:nth-child(2) .ph { --ph-bg: var(--c-bubble); }
.team-card:nth-child(3) .ph { --ph-bg: var(--c-mint); }
.team-card h3 { margin-top: var(--s-4); font-size: var(--fs-lg); font-weight: 700; }
.team-card p { color: var(--c-ink-2); font-size: var(--fs-sm); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) {
  .contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
  .contact-aside { grid-column: 1 / 5; }
  .contact-form-wrap { grid-column: 5 / 13; }
}
.contact-aside { display: grid; gap: var(--s-5); align-content: start; }
.aside-card { padding: var(--s-6); border-radius: var(--r-md); border: 1px solid var(--c-line); display: grid; gap: var(--s-4); }
.aside-card:nth-child(1) { background: var(--c-sun); }
.aside-card:nth-child(2) { background: var(--c-tint); }
.aside-card:nth-child(3) { background: var(--c-bubble); }
.aside-card h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.03em; }
.contact-details { display: grid; gap: var(--s-3); }
.contact-details dt { font-size: var(--fs-sm); font-weight: 650; opacity: 0.8; }
.contact-details dd { font-size: var(--fs-lg); font-weight: 700; overflow-wrap: anywhere; }
.contact-details a { text-decoration: none; }
.next-steps { display: grid; gap: var(--s-4); counter-reset: ns; list-style: none; padding: 0; }
.next-steps li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); counter-increment: ns; }
.next-steps li::before {
  content: counter(ns);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-line);
  font-weight: 700;
}
.next-steps strong { display: block; font-weight: 650; }
.contact-form-wrap {
  padding: clamp(1.25rem, 0.8rem + 2vw, 3rem);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 80px -50px rgba(20, 17, 31, 0.45);
}
.contact-form-wrap > .h2 { margin-bottom: var(--s-5); }
.socials { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.socials a, .socials span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-sm);
  font-weight: 650;
  text-decoration: none;
}
.socials a:hover { background: #fff; }
.socials span { border-style: dashed; opacity: 0.75; }

/* ---------- Projectdetail ---------- */
.project-meta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.project-meta > div { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.85); color: var(--c-ink); border: 1px solid var(--c-line); }
.project-meta dt { font-size: var(--fs-xs); font-weight: 650; color: var(--c-ink-2); }
.project-meta dd { font-weight: 700; }
.project-hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  margin-top: var(--s-7);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  box-shadow: none;
  overflow: hidden;
}
.project-hero-media .ph, .project-hero-media img, .project-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story { display: grid; gap: var(--s-4); }
.story-row { display: grid; gap: var(--s-3); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-md); border: 1px solid var(--c-line); background: #fff; }
.story-row:nth-child(1) { background: var(--c-tint); }
.story-row:nth-child(4) { background: var(--c-bubble); }
@media (min-width: 900px) { .story-row { grid-template-columns: 4fr 8fr; column-gap: var(--s-6); } }
.story-row h2 { font-size: var(--fs-2xl); font-weight: 700; font-stretch: 85%; letter-spacing: -0.032em; line-height: 1; }
.story-row p { color: var(--c-ink-2); font-size: var(--fs-lg); max-width: 58ch; }
.gallery { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .gallery { grid-template-columns: 7fr 5fr; } }
.gallery > * { aspect-ratio: 4 / 3; border-radius: var(--r-md); border: 1px solid var(--c-line); overflow: hidden; }
.project-next { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); flex-wrap: wrap; }
.project-next a.next-title { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 6rem); font-weight: 700; font-stretch: 85%; letter-spacing: -0.038em; line-height: 0.92; text-decoration: none; }
.project-next a.next-title:hover { color: var(--c-grape); }

/* ---------- 404 ---------- */
.error-page { min-height: 100svh; display: flex; align-items: center; padding-top: var(--header-h); }
.error-code { display: flex; gap: 0.04em; font-size: clamp(8rem, 3rem + 26vw, 24rem); font-weight: 700; font-stretch: 80%; letter-spacing: -0.06em; line-height: 0.85; }
.error-code span { display: inline-block; }
.error-code span:nth-child(1) { color: var(--c-ink); }
.error-code span:nth-child(2) { color: var(--c-grape); }
.error-code span:nth-child(3) { color: var(--c-tangerine); }
.motion .error-code span { animation: bob 2.4s var(--ease-spring) infinite alternate; }
.error-code span:nth-child(2) { animation-delay: 200ms; }
.error-code span:nth-child(3) { animation-delay: 400ms; }
@keyframes bob { to { translate: 0 -6%; } }

/* ---------- Juridisch ---------- */
.legal { max-width: 760px; }
.legal .notice { margin-bottom: var(--s-6); }
.fill { background: #FFF4C7; color: #4A3500; padding: 0 0.3em; border-radius: 6px; font-weight: 600; }

/* ---------- Hulpklassen ---------- */
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-5); margin-bottom: var(--s-6); }
.project-meta dd a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 899.98px) { .intro-card .sticker { right: 12px; } }
/* Placeholder in de hero altijd in een contrasterende kleur */
.hero-bg--grape .page-hero-art .ph { --ph-bg: var(--c-sun); }
.hero-bg--tangerine .page-hero-art .ph { --ph-bg: var(--c-grape); }
.hero-bg--bubble .page-hero-art .ph { --ph-bg: var(--c-sun); }
@media (max-width: 759.98px) { .shape--star { width: 120px; top: -36px; right: -36px; } }
.hero { overflow-x: clip; }
@media (min-width: 1000px) { .hero-title { font-size: clamp(5rem, 0.5rem + 6.6vw, 9rem); } }
.contact-details dd a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-details dd { font-size: var(--fs-base); }

/* ---------- Team ---------- */
@media (min-width: 640px) { .team-grid--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; } }
.team-photo {
  display: block;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-tint);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 900ms var(--ease-out); }
.team-card:hover .team-photo img { transform: scale(1.04); }
.team-mono { display: grid; place-items: center; background: var(--c-grape); color: #fff; position: relative; isolation: isolate; }
.team-mono::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.08); z-index: -1; transition: transform 900ms var(--ease-out); }
.team-card:hover .team-mono::before { transform: scale(1.15); }
.team-mono span { font-size: clamp(4rem, 2rem + 8vw, 8rem); font-weight: 650; font-stretch: 88%; letter-spacing: -0.04em; }
.team-card p a { color: var(--c-ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.team-card p a:hover { color: var(--c-grape); }
.contact-grid > * { min-width: 0; }
.contact-details dd a { display: inline-block; max-width: 100%; padding-block: 10px; overflow-wrap: anywhere; min-height: 0; }
.block--grape .prose p, .block--ink .prose p { color: rgba(255, 255, 255, 0.82); }
.block--grape .split .prose p:first-child, .block--ink .split .prose p:first-child { color: #fff; }
.statement mark { padding: 0 0.08em; }
.team-photo { border: 1px solid var(--c-line); }
/* Play-knop in de kop: altijd gecentreerd, ook tijdens de pop-in animatie */
.motion .hero-chip, .hero-chip[data-pop] { display: inline-grid; place-items: center; }
.hero-chip svg { width: 30%; height: auto; }