/* =========================================================================
   olefinn.com — alleen de landingspagina.
   Bouwt op de tokens uit stijl.css; raakt geen klasse aan die voor.html,
   overzicht.html of privacy.html gebruiken. Eén hoekmaat voor alles wat
   rond is (--hoek), één kleur voor alles wat opvalt (--accent).
   ========================================================================= */
:root {
  --hoek: 1.25rem;
  --goot: clamp(.5rem, 1vw, .9rem);
}

.landing { background: var(--grond); }
/* Koppen mogen op deze pagina iets breder lopen dan in de rest van de site. */
.landing h1, .landing h2 { max-width: none; }
.landing p { max-width: 56ch; }

/* ---- Zwevende kop ------------------------------------------------------ */
.zweefkop {
  position: fixed; top: var(--goot); left: 50%; transform: translateX(-50%);
  z-index: 50; width: min(100% - 2 * var(--goot), var(--max));
  display: flex; align-items: center; gap: var(--r-m);
  padding: .55rem .6rem .55rem 1.2rem; border-radius: 999px;
  background: rgb(247 247 245 / .72);
  border: 1px solid rgb(17 17 16 / .08);
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 8px 30px rgb(17 17 16 / .08);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
@supports not (backdrop-filter: blur(1px)) {
  .zweefkop { background: rgb(247 247 245 / .96); }
}
.zweefkop__merk { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: var(--s-0); text-decoration: none; }
.zweefkop__nav { margin-left: auto; display: flex; gap: .15rem; font-size: var(--s--1); }
.zweefkop__nav a { text-decoration: none; padding: .5em .95em; border-radius: 999px; transition: background var(--duur) var(--soepel), color var(--duur) var(--soepel); }
.zweefkop__nav a:hover { background: var(--inkt); color: var(--grond); }
.zweefkop__nav a:active { transform: scale(.98); }

/* ---- Beeldvullende held ------------------------------------------------- */
/* Zes foto's uit de voorbeeldsites, drie kolommen, de middelste iets
   omhoog geschoven. Geen tekst erover: de zin komt eronder, groot. */
.beeldheld {
  height: 100svh; min-height: 34rem; overflow: hidden;
  padding: var(--goot); display: grid; gap: var(--goot);
  grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(0, 1fr);
}
/* minmax(0, 1fr) en niet 1fr: een foto heeft een eigen hoogte en rekt een
   gewone fr-rij anders op tot ver onder de vouw. */
.beeldheld__kolom { display: grid; gap: var(--goot); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.beeldheld__kolom--op { transform: translateY(-9%); }
/* De kolom schuift 9% van zijn eigen hoogte omhoog, dat is ruim 18% van een
   rij; de onderste foto wordt zoveel hoger zodat er onderin geen gat valt. */
.beeldheld__kolom--op img:last-child { height: calc(100% + 20%); }
.beeldheld img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--hoek); background: var(--grond-diep); }
@media (max-width: 46rem) {
  .beeldheld { grid-template-columns: repeat(2, 1fr); height: 88svh; min-height: 30rem; }
  .beeldheld__kolom--extra { display: none; }
}

/* ---- Manifest ----------------------------------------------------------- */
.manifest { padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem); }
.manifest h1 { font-size: clamp(2rem, 1.2rem + 4.2vw, 5.4rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; max-width: 22ch; }

/* ---- Werkraster ---------------------------------------------------------- */
.werkdeel { padding-block: clamp(2rem, 4vw, 4rem) clamp(5rem, 9vw, 8rem); }
.werkdeel__kop { margin-bottom: var(--r-l); }
.werkdeel__kop h2 { font-size: var(--s-3); }
.werkdeel__kop p { color: var(--gedempt); font-size: var(--s-1); margin-top: var(--r-s); max-width: 40ch; }
.rooster { display: grid; gap: var(--r-l) var(--r-m); grid-template-columns: repeat(12, 1fr); align-items: end; }
.tegel { display: block; text-decoration: none; min-width: 0; }
.tegel--7 { grid-column: span 7; }
.tegel--5 { grid-column: span 5; }
.tegel--4 { grid-column: span 4; }
.tegel img {
  width: 100%; object-fit: cover; border-radius: var(--hoek); background: var(--grond-diep);
  transition: transform .6s var(--soepel), box-shadow .6s var(--soepel);
  box-shadow: 0 1px 2px rgb(17 17 16 / .04);
}
.tegel--4x3 img { aspect-ratio: 4 / 3; }
.tegel--1x1 img { aspect-ratio: 1 / 1; }
.tegel:hover img { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(17 17 16 / .12); }
.tegel:active img { transform: scale(.985); }
.tegel__naam { display: block; margin-top: .8rem; font-family: var(--display); font-weight: 700; font-size: var(--s-0); letter-spacing: -.02em; }
.tegel__regel { display: block; color: var(--gedempt); font-size: var(--s--1); }
@media (max-width: 46rem) {
  /* Zeven tegels op twee kolommen: de eerste over de volle breedte, de
     andere zes in drie paren, zodat er geen half lege rij overblijft. */
  .rooster { grid-template-columns: 1fr 1fr; gap: var(--r-m) var(--r-xs); }
  .tegel--7, .tegel--5, .tegel--4 { grid-column: span 1; }
  .tegel:first-child { grid-column: span 2; }
  .tegel img { aspect-ratio: 1 / 1; }
  .tegel:first-child img { aspect-ratio: 4 / 3; }
}

/* ---- Wie ---------------------------------------------------------------- */
.wie { padding-block: clamp(3rem, 6vw, 6rem) clamp(5rem, 9vw, 8rem); display: grid; gap: var(--r-xl) var(--r-l); grid-template-columns: 5fr 7fr; align-items: start; }
.wie__tekst h2 { font-size: var(--s-4); font-weight: 700; letter-spacing: -.035em; }
.wie__tekst p { margin-top: var(--r-m); font-size: var(--s-1); line-height: 1.45; }
.wie__beeld { display: grid; grid-template-columns: 7fr 4fr; gap: var(--r-m); align-items: end; }
.wie__beeld img { border-radius: var(--hoek); object-fit: cover; width: 100%; background: var(--grond-diep); }
.wie__groot { aspect-ratio: 4 / 3; }
.wie__klein { aspect-ratio: 3 / 4; }
@media (max-width: 46rem) {
  .wie { grid-template-columns: 1fr; gap: var(--r-l); }
  .wie__beeld { grid-template-columns: 3fr 2fr; }
}

/* ---- Afsluiter: één vlak, één zin, één knop ------------------------------ */
.praten {
  background: var(--accent); color: var(--op-accent);
  min-height: 100svh; display: grid; grid-template-rows: 1fr auto;
  padding: var(--r-l) var(--goot) var(--goot); margin: var(--goot); border-radius: calc(var(--hoek) * 1.6);
}
.praten__midden { display: grid; place-content: center; text-align: center; gap: var(--r-m); padding-block: var(--r-2xl); }
.praten h2 { font-size: clamp(2.8rem, 1.5rem + 7vw, 8rem); font-weight: 700; letter-spacing: -.04em; line-height: .98; }
.praten__knop {
  justify-self: center; display: inline-flex; align-items: center;
  padding: .95em 2em; border-radius: 999px; font-weight: 600; text-decoration: none;
  background: var(--grond); color: var(--inkt); border: 2px solid var(--grond);
  transition: transform var(--duur) var(--soepel), background var(--duur) var(--soepel);
}
.praten__knop:hover { transform: translateY(-2px); background: #fff; }
.praten__knop:active { transform: scale(.98); }
.praten__knop:focus-visible { outline-color: var(--op-accent); }
.praten__voet {
  display: flex; flex-wrap: wrap; gap: var(--r-s) var(--r-m); justify-content: space-between;
  padding: var(--r-m) var(--r-s) var(--r-s); font-size: var(--s--1);
  border-top: 1px solid rgb(255 255 255 / .25); color: rgb(255 255 255 / .85);
}
.praten__voet a { text-underline-offset: 3px; }
.praten__voet a:focus-visible { outline-color: var(--op-accent); }
.praten__voet a:last-child { margin-left: auto; }
@media (max-width: 46rem) {
  .praten__voet a:last-child { margin-left: 0; }
}

/* ---- Onthulling bij scrollen -------------------------------------------- */
/* Alleen waar de browser scroll-timelines kent én de bezoeker beweging
   toestaat; anders staat alles gewoon. Het bereik eindigt bij entry 100%,
   zodat wat bij het laden al in beeld staat nooit half doorzichtig blijft. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .onthul {
      animation: onthul linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    @keyframes onthul {
      from { opacity: 0; transform: translateY(1.5rem); }
      to   { opacity: 1; transform: none; }
    }
  }
}