/* Studio SALO — rustig en minimalistisch */
:root {
  --bg: #F2ECE1;
  --tekst: #33312D;
  --tekst-zacht: #5E574E;
  --grijs: #7A7266;
  --grijs-licht: #9C9385;
  --lijn: #DDD4C6;
  --vlak: #E5DDD0;
  --font: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --rand: clamp(20px, 3.5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--tekst); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--tekst); outline-offset: 4px; }

/* Woordmerk: studio klein, SALO groot */
.merk { display: inline-flex; align-items: baseline; gap: .14em; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.merk { color: var(--tekst); }
.merk .studio { font-weight: 400; font-size: .42em; letter-spacing: 0; color: var(--grijs-licht); }

/* Kop */
.kop { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 28px var(--rand); }
.kop-home { justify-content: flex-end; }
.logo { font-size: 26px; }
.logo .studio, .voet-logo .studio { font-size: .6em; }
.menu { display: flex; gap: 28px; font-size: 15px; }
.menu a { padding: 10px 0; color: var(--grijs-licht); transition: color .2s; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--tekst); }

/* Hero */
.hero { padding: clamp(48px, 9vw, 128px) var(--rand) clamp(48px, 7vw, 96px); }
.hero h1 { margin: 0; font-size: clamp(72px, 10vw, 148px); }
.hero-onder { margin-top: 20px; font-size: 15px; color: var(--grijs); }
.hero-onder a { border-bottom: 1px solid var(--lijn); padding-bottom: 2px; color: var(--tekst); transition: border-color .2s; }
.hero-onder a:hover { border-color: var(--tekst); }

/* Raster: zwart-wit, in kleur en spelend bij hover */
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0 var(--rand) 120px; }
.tegel { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tegel-beeld { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vlak); filter: grayscale(1); transition: filter .5s ease; }
.tegel-beeld img, .tegel-beeld video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tegel-beeld video, .tegel-beeld img.preview { opacity: 0; transition: opacity .3s; }
.tegel:hover .tegel-beeld, .tegel:focus-visible .tegel-beeld, .tegel.speelt .tegel-beeld { filter: grayscale(0); }
.tegel.speelt .tegel-beeld video, .tegel.speelt .tegel-beeld img.preview { opacity: 1; }
.tegel:focus-visible { outline: none; }
.tegel:focus-visible .tegel-beeld { outline: 2px solid var(--tekst); outline-offset: 4px; }
.tegel { position: relative; }
.onderschrift {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 14px 16px; font-size: 14px; line-height: 1.4;
  background: rgba(246, 241, 232, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.tegel:hover .onderschrift, .tegel:focus-visible .onderschrift { opacity: 1; transform: none; }
.onderschrift .titel { font-weight: 500; color: var(--tekst); }
.onderschrift .klant { color: var(--tekst-zacht); }
.onderschrift .bureau { color: var(--grijs); }
@media (hover: none) { .onderschrift { opacity: 1; transform: none; } }

/* Over-teaser */
.teaser { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: 64px; align-items: end; padding: 0 var(--rand) 140px; }
.teaser .foto { aspect-ratio: 4 / 5; max-width: 440px; }
.teaser h2 { margin: 0 0 16px; font-size: 32px; font-weight: 500; letter-spacing: -0.02em; }
.teaser p { margin: 0 0 24px; max-width: 30em; font-size: 18px; color: var(--tekst-zacht); }
.link { display: inline-block; border-bottom: 1px solid var(--tekst); padding-bottom: 2px; font-size: 15px; }

/* Foto met terugval als het bestand er nog niet is */
.foto { position: relative; overflow: hidden; background: var(--vlak); filter: grayscale(1); transition: filter .5s ease; }
.foto:hover { filter: grayscale(0); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto .leeg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-size: 13px; color: var(--grijs); }

/* Voet */
.voet { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 40px var(--rand) 48px; border-top: 1px solid var(--lijn); font-size: 14px; color: var(--grijs-licht); }
.voet-logo { font-size: 20px; color: var(--tekst); }
.voet-kolom { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.voet-kolom a { color: var(--tekst-zacht); padding: 3px 0; }
.voet-kolom a:hover { color: var(--tekst); }
.voet-kolom a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Speler: video groot over de pagina */
.speler {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 72px 24px;
  background: rgba(242, 236, 225, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: dimIn .3s ease-out;
}
.speler[hidden] { display: none; }
@keyframes dimIn { from { opacity: 0; } to { opacity: 1; } }
.speler-beeld { position: relative; width: min(960px, 68vw, calc((100vh - 160px) * 16 / 9)); aspect-ratio: 16 / 9; background: #0E0E0E; animation: groeiIn .35s ease-out; }
@keyframes groeiIn { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.speler-beeld iframe, .speler-beeld video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.speler-leeg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #F2ECE1; }
.sluit {
  position: absolute; top: 20px; right: 20px; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--tekst); cursor: pointer;
}
.sluit:hover { color: #000; }

/* Over-pagina */
.over { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 40px var(--rand) 120px; }
.collage { position: relative; height: 940px; }
.collage .portret { position: absolute; left: 50px; top: 60px; width: 460px; height: 600px; }
.film { position: absolute; background: #E2D9CB; padding: 19px 7px 26px; }
.film::before, .film::after { content: ""; position: absolute; left: 7px; right: 7px; height: 6px; background: repeating-linear-gradient(90deg, var(--bg) 0 8px, transparent 8px 16px); }
.film::before { top: 7px; }
.film::after { bottom: 7px; }
.film .nr { position: absolute; left: 7px; right: 7px; bottom: 14px; display: flex; justify-content: space-between; font-size: 8px; line-height: 9px; letter-spacing: 1px; color: #B5AC9E; }
.f1 { left: 0; top: 0; width: 230px; transform: rotate(-1.5deg); }
.f1 .foto { height: 140px; }
.f2 { left: 380px; top: 280px; width: 220px; transform: rotate(1deg); }
.f2 .foto { height: 160px; }
.f3 { left: 250px; top: 620px; width: 290px; transform: rotate(-.8deg); }
.f3 .foto { height: 170px; }
.f4 { left: 10px; top: 730px; width: 210px; transform: rotate(1.2deg); }
.f4 .foto { height: 140px; }
.over-tekst { padding-top: 60px; }
.over-tekst h1 { margin: 0 0 28px; color: var(--tekst); font-size: 44px; font-weight: 500; letter-spacing: -0.02em; }
.over-tekst .intro { margin: 0 0 28px; font-size: 22px; line-height: 1.4; color: #2E2A25; }
.over-tekst p { max-width: 34em; font-size: 17px; line-height: 1.65; color: var(--tekst-zacht); margin: 0 0 18px; }

@media (max-width: 900px) {
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser, .over { grid-template-columns: 1fr; gap: 32px; }
  .voet { grid-template-columns: 1fr 1fr; }
  .collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .collage .portret { position: relative; left: auto; top: auto; width: auto; height: 460px; grid-column: span 2; }
  .film { position: relative; left: auto !important; top: auto !important; width: auto !important; }
  .over-tekst { padding-top: 0; }
}
@media (max-width: 600px) {
  .kop { padding: 20px; }
  .logo { font-size: 22px; }
  .menu { gap: 18px; font-size: 14px; }
  .raster { grid-template-columns: 1fr; gap: 32px; }
  .voet { grid-template-columns: 1fr; gap: 20px; }
  .speler { padding: 72px 12px; }
  .speler-beeld { width: 100%; }
  /* Op telefoon kun je niet hoveren: daar staat alles direct in kleur */
  .tegel-beeld, .foto { filter: none; }
}
@media (hover: none) { .tegel-beeld, .foto { filter: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }