/* stand your brand — stijl.css
   Merkcodes uit brandboard (tijdelijk/StandYourBrand/stand your brand brandidentity.png):
   bordeaux #6b2038, roze #eeb2d1, crème #f6f7eb, lichtblauw #c3e5ee.
   Opzet v2: kleurblok-compositie zoals het brandboard zelf — banden in roze/blauw/bordeaux
   met een tone-on-tone patroon van het beeldmerk (de Oughter-"o", vector uit Logo SYB.ai).
   Contrast (WCAG): bordeaux op crème 10,3:1 · bordeaux op roze 6,3:1 · bordeaux op
   lichtblauw 8,3:1 · wit op bordeaux 11,1:1. Roze/crème accentwoorden alleen decoratief
   groot, nooit lopende tekst. */

:root {
  --bordeaux: #6b2038;
  --bordeaux-diep: #571a2e;
  --roze: #eeb2d1;
  --creme: #f6f7eb;
  --blauw: #c3e5ee;
  --inkt: var(--bordeaux);
  --maat: 72rem;
  --maat-smal: 65ch;
  --rond: 1.25rem;
  --omvat-pad: clamp(1.25rem, 4vw, 3rem);
}

@font-face {
  font-family: "Oughter";
  src: url("../fonts/oughter-webfont.woff2") format("woff2"),
       url("../fonts/oughter-webfont.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Elms Sans";
  src: url("../fonts/elms-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  overflow-x: clip;
  font-family: "Elms Sans", "Avenir Next", "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  word-spacing: -0.08em; /* Elms Sans en Oughter hebben een brede spatie */
  color: var(--inkt);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

/* ---- basistypografie ---- */

h1, h2, h3 {
  font-family: "Oughter", "Elms Sans", sans-serif;
  font-weight: 400;
  line-height: 1.1; /* ruimte voor staartletters (g j p q y) in Oughter */
  text-wrap: balance;
  letter-spacing: 0.01em;
  word-spacing: -0.16em; /* Oughter zet woorden in koppen ver uit elkaar */
}

h1 { font-size: clamp(2rem, 5.5vw, 4.5rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 1.5rem; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { max-width: var(--maat-smal); }

a { color: inherit; }

::selection { background: var(--roze); color: var(--bordeaux); }

/* ---- toegankelijkheid ---- */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--bordeaux);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 99;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--bordeaux);
  outline-offset: 3px;
  border-radius: 2px;
}
.band-bordeaux :focus-visible,
.site-voet :focus-visible { outline-color: var(--roze); }

/* ---- layouthulpen ---- */

.omvat {
  max-width: var(--maat);
  margin-inline: auto;
  padding-inline: var(--omvat-pad);
}

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

.accent { color: var(--roze); }
.accent-creme { color: var(--creme); }

/* ---- kleurbanden + beeldmerk-patroon ---- */

.band-roze {
  background: var(--roze) url("../img/patroon-bordeaux.svg") repeat;
  background-size: 190px 190px;
}
.band-blauw {
  background: var(--blauw) url("../img/patroon-bordeaux.svg") repeat;
  background-size: 190px 190px;
}
.band-bordeaux {
  background: var(--bordeaux) url("../img/patroon-roze.svg") repeat;
  background-size: 190px 190px;
  color: #fff;
}
.band-bordeaux h2 { color: #fff; }
.band-bordeaux p { color: color-mix(in srgb, #fff 88%, var(--bordeaux)); }

/* ---- header (sticky, met logoblok) ----
   Rust: het gestapelde logo zit in een crème blok dat onder de kopbalk uit hangt,
   over de hero heen. Bij scrollen valt het blok weg en krimpt het logo mee in de balk. */

.site-band {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--creme);
  border-bottom: 1px solid transparent;
  transition: border-color 0.28s ease;
}
.site-band.gekrompen {
  border-bottom-color: color-mix(in srgb, var(--bordeaux) 12%, transparent);
}

.site-kop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  flex-wrap: wrap;
  padding-block: 1rem;
}

.site-kop .logo { display: block; line-height: 0; }
.logo-blok { display: block; }
.logo-blok img { display: block; width: auto; height: 34px; }

@media (min-width: 48rem) {
  .logo-blok img {
    height: 60px;
    transition: height 0.28s ease;
  }
  .site-band.gekrompen .logo-blok img { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-band, .logo-blok img { transition: none; }
}

.site-kop nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1rem, 3vw, 2rem);
  font-weight: 500;
}

.site-kop nav a {
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
.site-kop nav a:hover { border-bottom-color: var(--roze); }
.site-kop nav a[aria-current="page"] { border-bottom-color: var(--bordeaux); }

/* ---- menuknop met uitklappaneel (alleen smalle schermen) ----
   Op een telefoon stonden de vier links als één doorlopende regel naast elkaar
   en viel het laatste woord buiten beeld. Achter de knop krijgt elk item een
   eigen regel met een scheidingslijn. */

.menu-knop {
  display: none;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.45rem 0.95rem 0.45rem 1.05rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bordeaux);
  background: transparent;
  border: 2px solid var(--bordeaux);
  border-radius: 999px;
  cursor: pointer;
}
.menu-knop:hover { background: var(--roze); }
.menu-knop .streepjes { display: grid; gap: 4px; }
.menu-knop .streepjes i {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.menu-knop[aria-expanded="true"] { background: var(--bordeaux); color: #fff; }
.menu-knop[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-knop[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-knop[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .menu-knop .streepjes i { transition: none; }
}

@media (max-width: 48rem) {
  /* logo en menuknop op de balk, de links eronder in het paneel */
  .site-kop { flex-wrap: wrap; gap: 0.75rem 1rem; row-gap: 0; padding-block: 0.75rem; }
  .menu-knop { display: flex; }
  .logo-blok img { height: 34px; }

  .site-kop nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bordeaux) 14%, transparent);
  }
  .site-kop nav.open { display: flex; }

  .site-kop nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding-block: 0.9rem;
    font-size: 1.15rem;
    white-space: normal;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--bordeaux) 14%, transparent);
  }
  .site-kop nav a::after {
    content: "→";
    color: color-mix(in srgb, var(--bordeaux) 45%, transparent);
  }
  .site-kop nav a:hover::after { color: var(--bordeaux); }
  .site-kop nav a[aria-current="page"] { font-weight: 600; }

  .site-kop nav .knop {
    display: block;
    text-align: center;
    margin: 1.1rem 0 1.3rem;
    box-shadow: none;
  }
  .site-kop nav .knop::after { content: none; }
}

.knop {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  background: var(--bordeaux);
  color: #fff;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: 2px solid var(--bordeaux);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.knop:hover { background: var(--bordeaux-diep); }
.knop:active { transform: translateY(1px); }

.knop-omtrek {
  background: transparent;
  color: var(--bordeaux);
}
.knop-omtrek:hover { background: var(--roze); border-color: var(--bordeaux); }
.band-roze .knop-omtrek:hover { background: var(--creme); }

.band-bordeaux .knop {
  background: var(--roze);
  color: var(--bordeaux);
  border-color: var(--roze);
}
.band-bordeaux .knop:hover { background: #f5cbe0; border-color: #f5cbe0; }

/* ---- hero (roze band, patroon + reuzen-o) ---- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.hero::after {
  content: "";
  position: absolute;
  right: clamp(-14rem, -12vw, -6rem);
  bottom: clamp(-16rem, -14vw, -8rem);
  width: clamp(22rem, 42vw, 40rem);
  aspect-ratio: 76 / 73;
  background: url("../img/o-decor-creme.svg") no-repeat center / contain;
  opacity: 0.55;
  transform: rotate(-9deg);
  pointer-events: none;
}
.hero .omvat { position: relative; z-index: 1; }

.hero .vooraf {
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
}

.hero p.sub {
  font-size: 1.2rem;
  margin-block: 1.25rem 2rem;
  max-width: 42ch;
  text-wrap: pretty;
}

.hero-acties { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* ---- sectiekoppen ---- */

.sectiekop {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.sectiekop::after {
  content: "";
  flex: 1;
  height: 2px;
  background: color-mix(in srgb, var(--bordeaux) 18%, transparent);
  transform: translateY(-0.35em);
}
.sectiekop h2 { margin-bottom: 0; }

/* ---- werk (masonry, 2 kolommen) ---- */

.werk-raster {
  columns: 3;
  column-gap: clamp(0.75rem, 1.8vw, 1.5rem);
}
@media (max-width: 40rem) { .werk-raster { columns: 2; } }

.werk-raster figure {
  break-inside: avoid;
  margin-bottom: clamp(0.75rem, 1.8vw, 1.5rem);
}
.werk-raster img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rond);
}

.werk-noot {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 1.1rem;
  max-width: 58ch;
}
.werk-noot a { text-decoration-color: var(--roze); text-decoration-thickness: 2px; }

.kader-figuur { position: relative; }
.kader-figuur::after {
  content: "";
  position: absolute;
  inset: 1.1rem -0.85rem -0.85rem 1.1rem;
  border-right: 2px solid var(--bordeaux);
  border-bottom: 2px solid var(--bordeaux);
  border-radius: 0 0 var(--rond) 0;
  pointer-events: none;
}
.kader-figuur::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--roze);
  z-index: 1;
}
.kader-figuur img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rond);
}

/* ---- diensten (crème, met roze reuzen-o) ---- */

.diensten {
  position: relative;
  overflow: hidden;
}
.diensten::after {
  content: "";
  position: absolute;
  right: clamp(-11rem, -9vw, -5rem);
  bottom: clamp(-11rem, -9vw, -5rem);
  width: clamp(16rem, 30vw, 26rem);
  aspect-ratio: 76 / 73;
  background: url("../img/o-decor-roze.svg") no-repeat center / contain;
  opacity: 0.45;
  transform: rotate(12deg);
  pointer-events: none;
}
.diensten .omvat { position: relative; z-index: 1; }

.dienst-duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 56rem) {
  .dienst-duo { grid-template-columns: 1fr 1fr; }
  .dienst-duo > article + article {
    border-left: 2px solid color-mix(in srgb, var(--bordeaux) 14%, transparent);
    padding-left: clamp(2rem, 5vw, 4.5rem);
  }
}
.dienst-duo h3 { margin-bottom: 0.75rem; }
.dienst-duo ul {
  list-style: none;
  margin-top: 1.25rem;
  display: grid;
  gap: 0.5rem;
}
.dienst-duo li {
  padding-left: 1.5rem;
  position: relative;
}
.dienst-duo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--roze);
}

/* ---- proces (blauwe band) ---- */

.stappen { list-style: none; counter-reset: stap; }
.stappen li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem 2rem;
  align-items: baseline;
  padding-block: 1.75rem;
}
.stappen li + li {
  border-top: 2px solid color-mix(in srgb, var(--bordeaux) 22%, transparent);
}
.stappen li::before {
  content: "0" counter(stap);
  font-family: "Oughter", sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  color: var(--bordeaux);
  line-height: 1;
}
.stappen h3 { margin-bottom: 0.4rem; }

/* ---- blokkenpaar: over-teaser + studio filmkids onder elkaar ---- */

.blok-paar {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}

/* ---- over-teaser (roze kaart) ---- */

.vlak-roze {
  background: var(--roze);
  border-radius: var(--rond);
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  gap: 1.5rem 3rem;
  align-items: center;
}
@media (min-width: 56rem) {
  .vlak-roze { grid-template-columns: auto 1fr auto; }
}
.vlak-roze .merkje { width: clamp(4rem, 8vw, 6.5rem); height: auto; }
.vlak-roze .portret-rond {
  display: block;
  width: clamp(5rem, 9vw, 8rem);
  height: auto; /* zonder dit wint het height-attribuut van de img */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--creme);
}
.vlak-roze p { font-size: 1.15rem; max-width: 48ch; }
.vlak-roze .knop { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; white-space: nowrap; }
.vlak-roze .knop:hover { background: var(--bordeaux-diep); }

/* ---- studio filmkids (lichtblauwe kaart) ---- */

.vlak-blauw {
  background: var(--blauw);
  border-radius: var(--rond);
  padding: clamp(2rem, 5vw, 4rem);
}
.vlak-blauw .vooraf {
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  display: block;
  margin-bottom: 0.75rem;
}
.vlak-blauw p { margin-block: 1rem 1.5rem; max-width: 52ch; }

/* ---- contactband + footer ---- */

.contact-wegen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
}

.mail-groot {
  display: inline-block;
  font-family: "Oughter", sans-serif;
  font-size: clamp(1.25rem, 3vw, 2.1rem);
  color: var(--roze);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-top: 1.5rem;
  overflow-wrap: anywhere;
}
.mail-groot:hover { border-bottom-color: var(--roze); }

.wa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.wa-icoon {
  width: 0.9em;
  height: 0.9em;
  flex: none;
}

.site-voet {
  background: var(--bordeaux);
  color: #fff;
  padding-block: 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--roze) 35%, transparent);
}
.site-voet .omvat {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: center;
  justify-content: space-between;
}
.site-voet img { display: block; height: 18px; width: auto; }
.site-voet nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-voet a { color: #fff; text-decoration: none; }
.site-voet a:hover { text-decoration: underline; text-decoration-color: var(--roze); text-underline-offset: 0.25em; }
.site-voet .klein {
  width: 100%;
  font-size: 0.85rem;
  color: color-mix(in srgb, #fff 70%, var(--bordeaux));
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}
.site-voet .klein a { color: inherit; }

/* ---- over-pagina ---- */

.over-intro {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .over-intro { grid-template-columns: 1.2fr 0.8fr; }
}
.over-intro .tekst p + p { margin-top: 1.25rem; }
.over-portret {
  position: sticky;
  top: 7rem;
  margin-right: 0.85rem; /* ruimte voor het haakje rechtsonder */
}

/* ---- proza (privacy e.d.) ---- */

.proza h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 2rem; }
.proza h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.proza p + p { margin-top: 1rem; }
.proza a { text-decoration-color: var(--roze); text-decoration-thickness: 2px; }
.proza .opsomming {
  list-style: none;
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
  max-width: var(--maat-smal);
}
.proza .opsomming li {
  padding-left: 1.5rem;
  position: relative;
}
.proza .opsomming li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--roze);
}

/* ---- onthulling (subtiel, met reden: leesvolgorde) ---- */

@media (prefers-reduced-motion: no-preference) {
  html.js [data-onthul] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  html.js [data-onthul].zichtbaar { opacity: 1; transform: none; }
}