/* Smaak D — Mozaïek.
   Deels gebaseerd op de gedeelde referentiesite (Amanah Advisors): een zwevende pill-navigatie,
   een full-bleed beeldhero met de kop eroverheen, een mozaïek van kaarten met een label op een
   verloop, en secties die elkaar afwisselen in volvlakken.

   Wat níet is overgenomen: de vette grotesk-koppen van die site. Het merk schrijft Marcellus
   voor als displayletter, en dat is geen detail — het is het enige wat Psy-Well nu aan eigen
   gezicht heeft. De vorm komt van de referentie, de letter blijft van het merk. */

/* ---------- zwevende pill-navigatie ---------- */
.v-d .topbar{border-bottom:none}
.v-d .site-header{margin-top:var(--space-4)}
.v-d .site-header .in{background:var(--surface-card);border-radius:var(--radius-pill);
box-shadow:var(--shadow-float);padding:10px 10px 10px var(--space-5);margin-inline:auto;
max-width:var(--page-max)}
.v-d .nav a{font-size:var(--text-sm)}
@media (max-width:899px){
/* De pill wordt ingesprongen tot samen met zijn eigen 8px binnenmarge precies de gutter
   ontstaat. Dat rekent mee met de gutter zelf, die op 640px van 16 naar 32px springt; met
   een vaste 8px liepen kruis en hamburger daarboven uit de pas. */
.v-d .site-header{padding-inline:calc(var(--gutter) - 8px)}
.v-d .site-header .in{padding:8px 8px 8px var(--space-4)}
/* De pill is ingesprongen, dus het paneel volgt zijn binnenranden; anders springt het
   woordmerk bij het openen van het menu alsnog opzij. */
.v-d .nav-panel-head .in{padding-left:calc(var(--gutter) + 8px)}
}

/* ---------- hero: beeld over de volle breedte, kop eroverheen ---------- */
.v-d .hero{padding-block:var(--space-5) var(--space-7)}
.v-d .hero .split{display:block;position:relative;border-radius:var(--radius-xl);overflow:hidden;
background:var(--midnight);min-height:32rem;display:flex;align-items:flex-end}
.v-d .hero .hero-photo{position:absolute;inset:0}
.v-d .hero .hero-photo .photo{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;height:100%}
/* Een scrim, geen tekst rechtstreeks op de foto — de fotografierichtlijn schrijft minimaal 40% voor. */
.v-d .hero .hero-photo::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(26,21,32,.92) 8%,rgba(26,21,32,.55) 46%,rgba(26,21,32,.15) 100%)}
.v-d .hero .hero-photo .caption{display:none}
.v-d .hero .hero-text{position:relative;z-index:2;padding:var(--space-6);max-width:44rem;color:var(--parchment)}
.v-d .hero .hero-text h1{color:var(--parchment)}
.v-d .hero .hero-text .lead{color:var(--wisteria-200)}
.v-d .hero .hero-text .btn-soft{background:rgba(247,244,240,.16);color:var(--parchment)}
.v-d .hero .hero-text .btn-soft:hover,.v-d .hero .hero-text .btn-soft:focus-visible{background:rgba(247,244,240,.28);color:var(--parchment)}
.v-d .hero .hero-text .btn-dark{background:var(--parchment);color:var(--plum)}
.v-d .hero .hero-text .btn-dark:hover,.v-d .hero .hero-text .btn-dark:focus-visible{background:var(--wisteria-200);color:var(--plum)}
@media (min-width:900px){
.v-d .hero .hero-text{padding:var(--space-8)}
}

/* De twee feiten schuiven onder de hero als een aparte rij kaarten. */
.v-d .facts{margin-top:var(--space-4)}
.v-d .fact{border-radius:var(--radius-xl)}
.v-d .fact .k{color:var(--mauve)}

/* ---------- mozaïek ---------- */
.v-d .media-card{min-height:17rem}
.v-d .media-card .txt{min-height:17rem}
@media (min-width:1200px){
.v-d .mosaic{grid-auto-rows:14rem}
.v-d .media-card,.v-d .media-card .txt{min-height:0}
}

/* ---------- secties als volvlakken ---------- */
.v-d section[data-band]{border-radius:0}
.v-d .section-head-row h2{max-width:24ch}
/* Geen eigen kleur op .side: dat herhaalde alleen de standaard linkkleur en won het daarna
   van de bandregels, waardoor mauve op de midnight-band 2,5:1 haalde. */

/* Behandelaren op getinte kaarten, zoals de referentie het team zet. */
.v-d .person{background:rgba(247,244,240,.06);border-radius:var(--radius-lg);padding:var(--space-3)}
.v-d .person .photo{border-radius:var(--radius-md)}

.v-d .card{border-radius:var(--radius-xl)}
.v-d .quiet-panel{border-radius:var(--radius-xl)}

/* ---------- de pagina's buiten de home ----------
   De volledige site brengt paginatypes mee die de vier-paginaset niet had. Ze volgen
   dezelfde twee regels als de rest van deze smaak: ruimere radii, en diepte in plaats van
   randen. */
.v-d .waitstrip .ws{border-radius:var(--radius-xl)}
.v-d .side-card{border-radius:var(--radius-xl)}
.v-d .team-card{border-radius:var(--radius-xl)}
.v-d .team-card .photo{border-radius:var(--radius-lg)}
.v-d .profile-hero .photo{border-radius:var(--radius-xl)}

/* De uitklapper hangt als zwevende kaart onder de pill in plaats van als volle balk over de
   pagina. Een blok met rechte hoeken direct onder een afgeronde pill leest als twee
   verschillende navigaties. */
.v-d .nav-flyout{background:transparent;border-bottom:none;box-shadow:none;
margin-top:var(--space-2)}
.v-d .nav-flyout .in{background:var(--surface-card);border-radius:var(--radius-xl);
box-shadow:var(--shadow-float);padding:var(--space-6)}

/* De inhoudsopgave krijgt de zwevende pill-taal van de navigatie, want dat is wat het is:
   een tweede navigatielaag. */
.v-d .toc a{background:var(--surface-card);box-shadow:var(--shadow-card)}
.v-d .toc a:hover{background:var(--wisteria-100);color:var(--text-on-soft)}

/* Op de mozaïeksmaak leest een rij zonder scheidingslijn te vlak; de rijen krijgen daarom
   hun eigen kaartvlak in plaats van alleen een lijn ertussen. */
.v-d .linklist{gap:var(--space-2)}
.v-d .linklist li{border:none;background:var(--surface-card);border-radius:var(--radius-lg);
box-shadow:var(--shadow-card)}
.v-d .linklist li:last-child{border-bottom:none}
.v-d .linklist a{padding:var(--space-4) var(--space-5)}
.v-d section[data-band="dark"] .linklist li,
.v-d section[data-band="brand"] .linklist li{background:rgba(247,244,240,.08);box-shadow:none}