/* Over: het ritme van de film, rustig gehouden. Navy hero met Bart als enige hoofdbeeld
   (portret met blauwe gloed en één glazen naamchip, verder niets eromheen) → licht
   ("wie je aan tafel krijgt": de uitspraak opent de kaart) → navy (mijn werk, laatste
   sectie vóór de CTA) → blauwe CTA. De enige grote glimlach is de onderstreping in de h1. */

/* hero: drie korte woorden, dus groot en gestapeld zoals "UNIEK" in de film */
.pagina-over .hero h1{font-size:clamp(60px,8.6vw,128px);line-height:.88;letter-spacing:-.02em;}
.pagina-over .over-heel{white-space:nowrap;}
.pagina-over .hero__beeld{justify-self:end;width:100%;max-width:420px;}
.pagina-over .hero__beeld .portret{box-shadow:0 0 0 1px rgba(186,209,252,.22),0 50px 110px -40px rgba(37,99,235,.7),0 30px 60px -30px rgba(0,0,0,.6);}

/* glazen naamchip linksonder, half over de rand (de film: frosted glass) */
.pagina-over .over-naam{position:absolute;left:-26px;bottom:36px;z-index:3;display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:var(--r-pil);
  background:rgba(7,20,42,.78);border:1px solid rgba(255,255,255,.22);color:var(--wit);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:var(--glas-rand),var(--schaduw-toast);
  animation:plop .45s var(--ease) 1s both;}
.pagina-over .over-naam > span:last-child{display:flex;flex-direction:column;line-height:1.25;}
.pagina-over .over-naam b{font-size:15px;font-weight:600;}
.pagina-over .over-naam small{font-size:13px;color:var(--ijs);}

@media (max-width:900px){
  .pagina-over .hero__beeld{justify-self:center;max-width:320px;margin-top:20px;}
  .pagina-over .over-naam{left:-12px;}
}
@media (max-width:640px){
  .pagina-over .hero__beeld{max-width:280px;margin-inline:auto;}
  .pagina-over .over-naam{bottom:24px;padding-right:14px;}
  .pagina-over .over-naam b{font-size:14px;}
}

/* wie ik ben: één witte kaart, de uitspraak opent hem, daaronder de feiten */
.pagina-over .over-kaart{gap:0;padding:clamp(28px,4vw,48px);border-radius:var(--r-l);}
.pagina-over .over-citaat{font:800 clamp(24px,2.6vw,34px)/1.18 var(--f-display);letter-spacing:-.015em;color:var(--navy);text-wrap:balance;}
.pagina-over .over-citaat span{color:var(--blauw);}
.pagina-over .over-kaart .vink{margin-top:32px;padding-top:28px;border-top:1px solid var(--lijn);color:var(--tekst);font-size:16.5px;row-gap:14px;}

/* mijn werk: de vensters tillen iets op bij hover */
.pagina-over .case__venster{transition:translate var(--t-ui) var(--ease),box-shadow var(--t-ui);}
.pagina-over .case:hover .case__venster{translate:0 -4px;box-shadow:0 0 0 1px rgba(126,166,247,.4),var(--schaduw-zweef);}
.pagina-over .case figcaption b{color:var(--wit);}
/* vaste kolommen: 2×2 tot ~1100px (iPad staand/liggend), daarboven 4 naast elkaar; nooit 3 + 1 los */
@media (min-width:641px) and (max-width:1100px){.pagina-over .cases{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1101px){.pagina-over .cases{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:640px){
  .pagina-over .cases{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;}
  .pagina-over .case__venster{border-radius:12px;}
  .pagina-over .case__balk{height:22px;}
  .pagina-over .case figcaption{margin-top:10px;}
  .pagina-over .case figcaption b{font-size:14.5px;}
  .pagina-over .case figcaption span{font-size:13px;}
}