/* O5 — Skopje: drie pijlers + groepsband + roster-colofon, op cream.
   Drie lagen: kopgroep (leeskolom 65ch), 3 pijler-kaarten, navy groepsband
   met ongelabelde cutout-line-up + wit colofon. Figuur-behandeling volgt S6:
   bodemcrop exact op de bandrand (hier via overflow van de band zelf). */

.oa-team { padding-block: var(--space-section-s); }

/* ---------- Laag 1: kopgroep ---------- */

.oa-team-head .kicker-line { margin-bottom: 22px; }

/* Kop over ± 9/12 van de container */
.oa-team-head h2 { max-width: 75%; }

.oa-team-intro {
  margin-top: 26px;
  max-width: 65ch;
  display: grid;
  gap: 1em;
}
.oa-team-intro p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-body);
}

/* ---------- Laag 2: drie pijler-kaarten ---------- */

.oa-team-pillars {
  margin-top: var(--gap-md);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-sm);
}

.oa-team-pillar { padding: var(--gap-md); }

.oa-team-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  background: var(--blue-100);
  color: var(--navy-950);
  margin-bottom: 22px;
}
.oa-team-chip svg { width: 24px; height: 24px; }

.oa-team-pillar h3 { margin-bottom: 12px; }

.oa-team-pillar p {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text-body);
}

/* ---------- Laag 3: de mensen achter het werk ---------- */

.oa-team-people { margin-top: var(--gap-lg); }

/* (a) Groepsband: smalle navy strook, figuren bodem-gecropt op de bandrand */

.oa-team-band {
  position: relative;
  /* Overlap per naad (10 figuren, Timo 2026-07-17): strakker dan de 9-figuur-versie
     zodat de line-up binnen de container blijft; alleen de buitenste (backmost)
     figuren croppen licht op de bandrand — bewust, dat is het "loopt door"-effect. */
  --seam: clamp(-30px, -1.5vw, -12px);
  margin-top: var(--gap-sm);
  --band-h: clamp(140px, 22vw, 300px);
  height: var(--band-h);
  border-radius: var(--r-lg);
  /* Zelfde recept als de S6-team-carrousel: clip-path i.p.v. overflow:hidden.
     Onder/links/rechts croppen exact op de bandrand (inset 0), net als voorheen.
     Boven staat de clipgrens 60px BOVEN de band (negatieve inset) zodat de
     hoofden van de middelste 4 (Mattijs/Roderik/Simona/Lise, top 4-6,5%, dus het
     minste headroom) niet meer plat afgesneden worden zodra .is-active ze
     opschaalt -- ze komen dan letterlijk even boven het navy kader uit. 60px is
     ruim: de werkelijke opschaal-overlap is ~6-14px, en de kop erboven staat op
     24px afstand (--gap-sm), dus geen risico dat een hoofd die tekst raakt. */
  clip-path: inset(-60px 0 0 0 round var(--r-lg));
  background:
    /* warme vloer-gloed: extra breed zodat hij egaal onder de hele line-up ligt */
    radial-gradient(150% 60% at 50% 118%, color-mix(in srgb, var(--orange-500) 9%, transparent) 0%, transparent 60%),
    /* egaal verticaal verloop: geen lichtvlek in het midden, iedereen zelfde licht */
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

/* Decoratieve dot-grid rechtsboven, zacht uitgevlakt */
.oa-team-band::before {
  content: "";
  position: absolute;
  top: 24px;
  right: 22px;
  width: 180px;
  height: 150px;
  background-image: radial-gradient(color-mix(in srgb, var(--paper) 32%, transparent) 1.3px, transparent 1.4px);
  background-size: 15px 15px;
  -webkit-mask: radial-gradient(120% 120% at 100% 0%, var(--navy-950) 40%, transparent 75%);
  mask: radial-gradient(120% 120% at 100% 0%, var(--navy-950) 40%, transparent 75%);
  opacity: .5;
  pointer-events: none;
}

/* Bodem-scrim: maakt de heupcrop bewust en geeft de band een rustige voet */
.oa-team-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--navy-950) 62%, transparent));
  z-index: 4;
  pointer-events: none;
}

.oa-team-lineup {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  z-index: 1;
  /* CENTRERING Timo 2026-07-31, tweede versie.
     Eerste poging was een translateX van de hele rij. Dat zette de naad tussen
     Mattijs en Roderik wel op het midden, maar dan werd de rij als geheel naar
     links geduwd: Sam viel buiten het kader en rechts van Emma bleef ruimte over.
     Nu wordt het bij de bron opgelost. Als de linkerhelft even breed is als de
     rechter, dan legt justify-content:center de naad VANZELF op het midden en
     zijn de randmarges links en rechts automatisch gelijk. Twee eisen, één
     ingreep, geen losse correctie meer nodig.
     Het breedteverschil dat weggewerkt moet worden:
       som --fig-ar posities 1 t/m 5 = 2.647
       som --fig-ar posities 6 t/m 10 = 2.507   -> 0.140 x bandhoogte
       plus Nigels extra naad van 1.6vw, die alleen rechts inkort
     Dat verschil wordt verdeeld over de vier naden aan de LINKERkant (zie
     --balans hieronder), zodat iedereen links een klein stukje naar het midden
     schuift in plaats van dat één naad opvalt.
     Wijzigt de volgorde of een --fig-ar, dan moeten die twee sommen opnieuw. */
  --balans: calc((0.140 * var(--band-h, 300px) + 1.6vw) / 4);
}

/* Elke slot is exact zo breed als de zichtbare foto (aspect-ratio van de
   getrimde PNG × beeldhoogte). Daardoor is de overlap tussen buren overal
   gelijk: één uniforme negatieve marge = "iedereen een heel klein beetje".
   --fig-ar = png-breedte/hoogte × --fig-h. */
.oa-team-fig {
  position: relative;
  flex: none;
  aspect-ratio: var(--fig-ar);
  margin-left: var(--seam, clamp(-22px, -1.3vw, -9px));
}
.oa-team-fig:first-child { margin-left: 0; }

/* Naad-correcties (Timo 2026-07-17): silhouetten met veel loze ruimte in de
   bounding-box (Sam en Nigel, gekruiste armen) raakten hun buur optisch nog
   niet; deze twee naden krijgen extra overlap zodat alles elkaar echt raakt. */
/* HERKEND OP PERSOON Timo 2026-07-31. Dit stond op :nth-child(2) en :nth-child(9),
   maar de correcties zijn per PERSOON afgesteld (silhouetten met gekruiste armen
   hebben veel loze ruimte in hun bounding-box). Na de herordening zat de
   Sam-correctie ineens op Anastasia, waardoor zij veel te ver over Sam heen viel.
   Op data-person werkt het ongeacht de volgorde. */
.oa-team-fig[data-person="sam"]:not(:first-child) { margin-left: calc(var(--seam) - 1.7vw); }
.oa-team-fig[data-person="nigel"] { margin-left: calc(var(--seam) - 1.6vw); } /* Nigel: gekruiste armen; -1.6vw i.p.v. -1vw zodat hij niet over Emma valt */

/* Balans-naden: de vier naden aan de linkerkant krijgen elk een kwart van het
   breedteverschil tussen links en rechts (zie --balans op .oa-team-lineup).
   Daardoor schuift iedereen links een klein stukje naar het midden, wordt de
   linkerhelft even breed als de rechter, en klopt zowel de centrering als de
   ruimte links van Sam en rechts van Emma. Deze regels staan NA de
   persoonscorrecties hierboven, dus ze winnen; dat is de bedoeling. */
.oa-team-fig:nth-child(2),
.oa-team-fig:nth-child(3),
.oa-team-fig:nth-child(4),
.oa-team-fig:nth-child(5) { margin-left: calc(var(--seam) - var(--balans)); }

.oa-team-fig img {
  position: absolute;
  left: 50%;
  top: var(--fig-top);
  height: var(--fig-h);
  width: auto;
  max-width: none;
  transform-origin: 50% 100%; /* voeten blijven geplant; groei/krimp gebeurt vanaf de vloer */
  /* --fig-dx (Timo 2026-07-31): optische nudge van de foto BINNEN zijn vak, puur
     visueel, raakt de layout en dus de centrering niet. Nodig omdat de vakbreedte
     volgt uit de volledige PNG, terwijl de band maar de bovenste helft van elke
     figuur laat zien; op die hoogte is de één breder dan de ander. Zie de
     data-person-regels onderaan dit bestand. */
  transform: translateX(calc(-50% + var(--fig-dx, 0px))) scale(var(--fig-scale, 1));
  filter: drop-shadow(-12px 18px 24px color-mix(in srgb, var(--navy-950) 45%, transparent));
  transition: filter .25s ease, transform .3s cubic-bezier(.25, .6, .25, 1), opacity .25s ease;
}

/* Foto <-> naam hover-link (desktop/tablet; op ≤640px staat de band op display:none
   dus dit is functioneel inactief daar). Sleutel = data-person, gezet door JS
   (main.js) op zowel .oa-team-fig als de roster-<li>'s. Twee losse states i.p.v.
   1 boolean zodat "niets actief" simpelweg "geen van beide classes" is. */
.oa-team-fig.is-active { --fig-scale: 1.045; }
/* Extra ancestor-klasse (.oa-team-lineup) op alle drie de is-active/is-dim
   img-regels hieronder i.p.v. !important: zelfde specificiteit-valkuil als
   elders in dit bestand (zie HANDOVER §Valkuilen 1). Zonder die ancestor heeft
   ".oa-team-fig.is-active img" precies dezelfde specificiteit als de
   partnerfoto-kleurcorrectie hieronder (".oa-team-fig:nth-child(5) img") -->
   welke wint hing dan af van bronvolgorde, en de partnerlift (brightness 1.08)
   stond ná dit blok, dus won hij altijd: Mattijs/Roderik bleven te licht in
   .is-dim (en kwamen niet op hun volle 1.12 in .is-active). Met de ancestor
   erbij wint dit blok altijd, ongeacht bronvolgorde. */
.oa-team-lineup .oa-team-fig.is-active img {
  filter: brightness(1.12) saturate(1.08) drop-shadow(-12px 20px 28px color-mix(in srgb, var(--navy-950) 55%, transparent));
}
.oa-team-lineup .oa-team-fig.is-dim img {
  filter: brightness(.55) saturate(.75);
  opacity: .82;
}
/* Zelfde reden als hierboven: de actieve persoon komt zo altijd vóór
   overlappende buren, ongeacht bronvolgorde van de nth-child-regels. */
.oa-team-lineup .oa-team-fig.is-active { z-index: 40; }

/* Diepte-trap per positie (Timo 2026-07-17, 10 figuren): symmetrische piramide.
   Partners Mattijs + Roderik voorop en het grootst (positie 5/6), daarna
   trapsgewijs naar achteren/buiten; z-index loopt aan beide kanten af zodat elke
   figuur ACHTER zijn buur richting het midden staat. Anastasia zit op positie 4,
   spiegelbeeld van Lise (positie 7). --fig-ar = (--fig-h fractie) x (pngB/pngH). */
/* HERBEREKEND Timo 2026-07-31 na de nieuwe volgorde (sam, anastasia, ana, simona,
   mattijs, roderik, lise, kostanca, nigel, emma). --fig-h, --fig-top en z-index
   horen bij de POSITIE (de piramide), --fig-ar hoort bij de PERSOON want dat is de
   slotbreedte en die volgt uit de verhouding van zijn PNG. Bij een volgende
   herordening moeten de --fig-ar-waarden dus opnieuw langs de formule:
       --fig-ar = (--fig-h als fractie) x (png-breedte / png-hoogte)
   PNG-verhoudingen (allemaal 1400px hoog): sam .334, anastasia .294, ana .259,
   simona .286, mattijs .320, roderik .320, lise .281, kostanca .241, nigel .307,
   emma .261. Sla dit niet over: doe je het niet, dan krijgt elke figuur de breedte
   van zijn voorganger en klopt de overlap nergens meer. */
.oa-team-fig:nth-child(1)  { --fig-h: 164%; --fig-top: 17.5%; --fig-ar: 0.548; z-index: 1; } /* Sam */
.oa-team-fig:nth-child(2)  { --fig-h: 171%; --fig-top: 13%;   --fig-ar: 0.503; z-index: 2; } /* Anastasia */
.oa-team-fig:nth-child(3)  { --fig-h: 178%; --fig-top: 9.5%;  --fig-ar: 0.462; z-index: 3; } /* Ana */
.oa-team-fig:nth-child(4)  { --fig-h: 184%; --fig-top: 6.5%;  --fig-ar: 0.526; z-index: 4; } /* Simona */
.oa-team-fig:nth-child(5)  { --fig-h: 190%; --fig-top: 4%;    --fig-ar: 0.608; z-index: 5; } /* Mattijs */
.oa-team-fig:nth-child(6)  { --fig-h: 190%; --fig-top: 4%;    --fig-ar: 0.608; z-index: 5; } /* Roderik */
.oa-team-fig:nth-child(7)  { --fig-h: 184%; --fig-top: 6.5%;  --fig-ar: 0.518; z-index: 4; } /* Lise */
.oa-team-fig:nth-child(8)  { --fig-h: 178%; --fig-top: 9.5%;  --fig-ar: 0.428; z-index: 3; } /* Kostanca */
.oa-team-fig:nth-child(9)  { --fig-h: 171%; --fig-top: 13%;   --fig-ar: 0.525; z-index: 2; } /* Nigel */
.oa-team-fig:nth-child(10) { --fig-h: 164%; --fig-top: 17.5%; --fig-ar: 0.428; z-index: 1; } /* Emma */

/* De partnerfoto's (Mattijs + Roderik, positie 5/6) komen uit een andere shoot en
   zijn net wat donkerder/fletser. Kleine lift, alleen hier in de band; de bron-PNG's
   blijven ongemoeid want de carrousel gebruikt dezelfde bestanden. */
.oa-team-fig:nth-child(5) img,
.oa-team-fig:nth-child(6) img {
  filter: brightness(1.08) saturate(1.06) contrast(1.02)
          drop-shadow(-12px 18px 24px color-mix(in srgb, var(--navy-950) 45%, transparent));
}

/* (b) Roster-colofon: twee groepen, iedereen dezelfde tekstbehandeling */

.oa-team-roster {
  margin-top: var(--gap-sm);
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 2.1fr;
  column-gap: clamp(28px, 3.5vw, 56px);
  padding: clamp(26px, 3.2vw, 40px);
}

.oa-team-roster-group--wide {
  border-left: 1px solid var(--line-paper);
  padding-left: clamp(28px, 3.5vw, 56px);
}

.oa-team-roster-label {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.oa-team-roster-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 3vw, 48px);
}

.oa-team-roster-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: 11px;
  /* padding-inline + gelijke negatieve margin-inline: geeft de hover/focus-highlight
     hieronder wat ademruimte opzij zonder dat de tekst zelf ook maar 1px verschuift
     (de content-positie blijft identiek, alleen de achtergrond-doos wordt breder). */
  padding-inline: 10px;
  margin-inline: -10px;
  border-radius: var(--r-sm);
  outline: none; /* eigen focus-styling via .is-active, geen dubbele browser-ring */
  transition: background-color .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.oa-team-roster-list li + li { border-top: 1px solid var(--line-paper); }

/* Naam <-> foto hover-link, omgekeerde richting van de .oa-team-fig-states
   hierboven. Zelfde data-person-sleutel, zelfde JS (main.js). */
.oa-team-roster-list li.is-active {
  background: var(--orange-100);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange-500) 45%, transparent);
}
.oa-team-roster-list li.is-active .oa-team-name { color: var(--orange-600); }
.oa-team-roster-list li.is-dim { opacity: .58; }

.oa-team-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-strong);
  transition: color .22s ease;
}

.oa-team-role {
  font-size: 13px;
  color: var(--text-muted);
  text-align: right;
  /* De functietitel schuift naar links op zodat de LinkedIn-cirkel hieronder de rechterrand
     van het balkje krijgt (Timo 2026-08-24). Een auto-marge slokt alle vrije ruimte op VOORDAT
     justify-content aan bod komt, dus de space-between op de li verandert hier niets meer aan:
     naam staat links, rol blijft rechts uitgelijnd, alleen nu op cirkelbreedte + gap van de rand.
     Daarmee blijft de onderlinge uitlijning van naam en rol precies zoals hij was. */
  margin-left: auto;
}

/* LinkedIn-cirkel per rosterrij (desktop), Timo 2026-08-24.
   BEWUST INGETOGEN, en daarmee anders dan .tc-li in de carrouselkaart: tien gevulde oranje
   cirkels op het cream vlak maken van het roster een knoppenrij en trekken de aandacht weg van
   de namen. De rusttoestand is daarom de .circle-btn-behandeling in papierkleuren (1px lijn,
   gedempte glyph); de kleur komt pas op hover en focus. Sinds 2026-08-24 is dat lichtblauw en
   niet meer oranje; zie het herkomstcomment bij de hover-regel verderop.
   Het LinkedIn-pad in de SVG is letterlijk hetzelfde als in de kaart; alleen de omlijsting
   verschilt, vandaar een eigen klasse in plaats van een variant op .tc-li.
   NAAM: bewust NIET .oa-team-li, want dat is een prefix van de bestaande .oa-team-lineup en
   maakt elke grep op deze klasse onbetrouwbaar. */
.oa-team-linkedin {
  position: relative;
  /* De rij lijnt op baseline uit (.oa-team-roster-list li). Zonder deze regel zou de onderkant
     van de cirkel op de tekstbasislijn hangen en dus te laag staan. */
  align-self: center;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  /* De regelbox van de naam is 24px (15px x line-height 1.6) en bepaalt vandaag de rijhoogte.
     Met -1px boven en onder is de buitenmaat van de cirkel ook 24px, zodat hij de rij niet
     oprekt en de rijen dus niet verspringen ten opzichte van de versie zonder cirkel. */
  margin-block: -1px;
  border: 1px solid var(--line-paper);
  border-radius: 50%;
  color: var(--text-muted);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
/* Raakvlak opgerekt tot 40px zonder de cirkel groter te tekenen: 26px is optisch in balans
   naast 15px tekst, maar te krap als klikdoel. Ruim boven de 24px-ondergrens. */
.oa-team-linkedin::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}
/* KLEUR GEWIJZIGD (Timo 2026-08-24): de aangeraakte stand is lichtblauw in plaats van oranje,
   gelijk aan de gevulde cirkel in de mobiele carrouselkaart. De RUSTSTAND blijft ongewijzigd (1px
   --line-paper, gedempt glyph), want daar zat het probleem niet: tien gevulde cirkels op het cream
   vlak zouden nog steeds een knoppenrij maken.
   LEESBAARHEID: glyph naar --navy-950 op #D4E2F5, ~16,4:1. De rand gaat naar --blue-200 (#B9CFEE)
   en niet naar de vulkleur zelf, anders verdwijnt de cirkelvorm tegen het cream vlak.
   FOCUSRING NAAR --orange-500: de ring is nu het enige oranje in deze staat, en oranje is
   sitebreed de focuskleur (base.css a:focus-visible). Een lichtblauwe ring om een lichtblauwe
   cirkel op cream zou nauwelijks te zien zijn, en de ring moet juist opvallen.
   Oude waarde verbatim:
   .oa-team-linkedin:hover {
     background: var(--orange-500);
     border-color: var(--orange-500);
     color: #fff;
   }
   .oa-team-linkedin:focus-visible {
     background: var(--orange-500);
     border-color: var(--orange-500);
     color: #fff;
     outline: 2px solid var(--orange-600);
     outline-offset: 2px;
   } */
.oa-team-linkedin:hover {
  background: var(--blue-100);
  border-color: var(--blue-200);
  color: var(--navy-950);
}
/* Eigen zichtbare focusring: de <li> eromheen zet outline:none voor zijn eigen .is-active-
   styling, dus deze link moet zijn ring zelf meebrengen. */
.oa-team-linkedin:focus-visible {
  background: var(--blue-100);
  border-color: var(--blue-200);
  color: var(--navy-950);
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

/* ---------- (a-mobiel) Team-carrousel: homepage-component (S6), hier alleen ≤640px.
   Zelfde markup-contract als .team op de homepage, zodat main.js hem aanstuurt.
   Volledig gescoped onder .oa-team-carousel zodat niks van S6 nodig is. De kaart
   heeft een extra locatieregel (Nederland/Skopje) t.o.v. de homepage. ---------- */

.oa-team-carousel {
  display: none; /* desktop toont band + roster; ≤640px zet de media-regel dit op block */
  position: relative;
  margin-top: var(--gap-sm);
  height: 480px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(85% 60% at 50% 112%, color-mix(in srgb, var(--orange-500) 16%, transparent) 0%, transparent 58%),
    repeating-radial-gradient(circle at -6% 112%, transparent 0 52px, color-mix(in srgb, #fff 6%, transparent) 52px 53px, transparent 53px 105px),
    radial-gradient(130% 110% at 50% -10%, var(--navy-800) 0%, var(--navy-950) 58%);
}

/* Dot-grid decor rechtsboven */
.oa-team-carousel::after {
  content: "";
  position: absolute;
  top: 28px;
  right: 16px;
  width: 120px;
  height: 150px;
  background-image: radial-gradient(color-mix(in srgb, var(--paper) 34%, transparent) 1.3px, transparent 1.4px);
  background-size: 15px 15px;
  -webkit-mask: radial-gradient(130% 130% at 100% 0%, var(--navy-950) 42%, transparent 76%);
  mask: radial-gradient(130% 130% at 100% 0%, var(--navy-950) 42%, transparent 76%);
  opacity: .5;
  pointer-events: none;
}

/* De stage is ook de sleepzone van de swipe (js/main.js). pan-y houdt het
   verticaal scrollen volledig bij de browser en geeft ons alleen de horizontale
   beweging; pinch-zoom blijft er expliciet bij staan, anders zou zoomen boven
   het paneel uitgeschakeld raken. Browsers die het pinch-zoom-sleutelwoord niet
   kennen gooien die tweede regel weg en houden de eerste. */
.oa-team-carousel .team-stage {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
  touch-action: pan-y pinch-zoom;
}
.oa-team-carousel .team-track { position: absolute; inset: 0; }

/* Bodem-scrim: maakt de heup-crop bewust en geeft het kaartje rust */
.oa-team-carousel .team-stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 130px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--navy-950) 74%, transparent));
  z-index: 3;
  pointer-events: none;
}

/* Drie overlappende slots; figuren zonder slotklasse verborgen (JS zet ze). */
.oa-team-carousel .team-fig {
  position: absolute;
  top: 0; bottom: 0;
  width: 56%;
  display: none;
  transition:
    left .8s cubic-bezier(.25, .6, .25, 1),
    opacity .8s cubic-bezier(.25, .6, .25, 1),
    transform .8s cubic-bezier(.25, .6, .25, 1);
}
.oa-team-carousel .team-fig.slot-left   { display: block; left: -16%; z-index: 1; }
.oa-team-carousel .team-fig.slot-center { display: block; left: 22%;  z-index: 3; }
.oa-team-carousel .team-fig.slot-right  { display: block; left: 60%;  z-index: 2; }

/* Zachte entry voor de figuur die uit display:none binnenkomt */
@starting-style {
  .oa-team-carousel .team-fig.slot-left   { opacity: 0; transform: translateX(-24px); }
  .oa-team-carousel .team-fig.slot-right  { opacity: 0; transform: translateX(24px); }
  .oa-team-carousel .team-fig.slot-center { opacity: 0; }
}
/* Exit-fade (JS houdt slot-klasse + .is-leaving ~800ms vast) */
.oa-team-carousel .team-fig.is-leaving { opacity: 0; pointer-events: none; }
.oa-team-carousel .team-fig.slot-left.is-leaving  { z-index: 0; transform: translateX(-24px); }
.oa-team-carousel .team-fig.slot-right.is-leaving { z-index: 0; transform: translateX(24px); }

/* Spotlight-gloed achter de middelste figuur */
.oa-team-carousel .team-fig::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2%;
  width: 150%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue-100) 20%, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .8s cubic-bezier(.25, .6, .25, 1);
  pointer-events: none;
}
.oa-team-carousel .team-fig.slot-center::before { opacity: 1; }


/* Cutout: fors ingezoomd, heup-crop via overflow:hidden op het paneel.
   Filterlijsten center/zij bewust identiek van vorm zodat de browser vloeiend
   interpoleert bij de slot-wissel. */
.oa-team-carousel .team-fig img {
  position: absolute;
  left: 50%;
  top: 8%;
  height: 172%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  transform-origin: top center;
  filter: brightness(1) saturate(1) drop-shadow(-14px 20px 26px rgba(2, 14, 44, .5));
  transition:
    filter .8s cubic-bezier(.25, .6, .25, 1),
    top .8s cubic-bezier(.25, .6, .25, 1),
    height .8s cubic-bezier(.25, .6, .25, 1);
}
.oa-team-carousel .team-fig.slot-left img,
.oa-team-carousel .team-fig.slot-right img {
  top: 15%;
  height: 152%;
  filter: brightness(.62) saturate(.85) drop-shadow(-14px 20px 26px rgba(2, 14, 44, .4));
}

/* Naamkaartje: naam + rol links, LinkedIn-cirkel rechts.
   Twee kolommen i.p.v. een: de cirkel krijgt een eigen, VASTE kolom van 34px en de tekst
   staat in minmax(0, 1fr). Die nul-ondergrens is het hele punt — met de standaard auto-
   ondergrens zou "Business Development Manager" de tekstkolom breder duwen dan de kaart en
   de cirkel over de rand schuiven. Nu wint de cirkel altijd en breekt de rol af (zie de
   overflow-wrap bij .role hieronder). Zelfde opzet als .s6 .tc-arrow op de homepage. */
.oa-team-carousel .team-card {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  transform-origin: bottom center;
  z-index: 4;
  width: min(238px, calc(100% - 44px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  column-gap: 12px;
  align-items: center;
  align-content: center;
  /* 88% i.p.v. 74%: de gradient van .team-stage::after (130px hoog, z-index 3) loopt tot
   achter dit kaartje door, en op bottom:34px zit het kaartje in het dichtste deel daarvan.
   Bij 74% scheen die gloed er zichtbaar doorheen en leek de schaduw over het naamkaartje
   te hangen. Het kaartje lag er altijd al bovenop (z-index 4), het was doorschijn.
   De backdrop-filter blijft staan, dus de glasachtige werking blijft. */
  background: color-mix(in srgb, var(--navy-900) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, #fff 15%, transparent);
  border-radius: 14px;
  padding: 12px 14px 12px 18px;
  box-shadow: 0 18px 40px rgba(2, 14, 44, .45);
  transition:
    transform .8s cubic-bezier(.25, .6, .25, 1),
    opacity .8s cubic-bezier(.25, .6, .25, 1);
}
.oa-team-carousel .team-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--orange-500);
}
/* Alleen het middelste kaartje; zijfiguren blijven als context zichtbaar.
   Daarmee is de LinkedIn-cirkel ook alleen op de middelste kaart bereikbaar: display:none
   haalt een element uit beeld EN uit de tabvolgorde, dus een zijfiguur levert geen
   onzichtbare link op waar een toetsenbordgebruiker in vastloopt. */
.oa-team-carousel .team-fig.slot-left .team-card,
.oa-team-carousel .team-fig.slot-right .team-card { display: none; }

/* Kaartbreedte losgekoppeld van de figuurbreedte (2026-08-24).
   WAAROM: de regel hierboven rekent met calc(100% - 44px) en 100% is hier NIET het paneel
   maar de .team-fig, en die is 56% van het paneel. Op 320px kwam het kaartje daardoor uit op
   ~118px, en met de LinkedIn-cirkel erbij bleef er dan te weinig tekstkolom over: "Anastasia"
   brak middenin en "Business Development Manager" viel in zeven regels uiteen.
   De homepage liep tegen precies hetzelfde aan en lost het op met een vaste breedte plus een
   viewport-plafond (zie .s6 .team-fig.slot-center .team-card in s6.css, ≤560px). Dezelfde
   waarden hier, zodat beide carrousels op mobiel hetzelfde kaartformaat houden: op 320px
   wordt dat 192px, met ~112px tekstkolom naast de cirkel. Het kaartje is absoluut
   gepositioneerd en het paneel heeft overflow:hidden, dus breder dan de figuur is ongevaarlijk. */
.oa-team-carousel .team-fig.slot-center .team-card {
  width: 212px;
  max-width: calc(100vw - 128px);
}

.oa-team-carousel .team-card .name {
  grid-column: 1;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.oa-team-carousel .team-card .role {
  grid-column: 1;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.4;
  color: var(--text-muted-inv);
  /* Liever een lelijke woordbreuk dan een cirkel die van de kaart valt. Gemeten 2026-08-24:
     op 320px blijft er 112px tekstkolom over en zet "Business Development Manager" zich in
     drie regels, op 360px en breder 132px en nog steeds drie regels ("Development" is het
     langste woord en bepaalt de ondergrens). Alle tien de rollen breken op een spatie, dus
     dit vangnet vuurt vandaag nergens; het staat er voor een functietitel met een langer
     woord die er later bij komt. */
  overflow-wrap: anywhere;
}
.oa-team-carousel .team-card .name { overflow-wrap: anywhere; }

/* LinkedIn-cirkel: zelfde vormtaal en maat als .s6 .tc-arrow (34px, gevulde cirkel). Spant beide
   tekstregels, zodat hij verticaal in het midden van het balkje staat ongeacht of de rol een of
   twee regels is.
   KLEUR GEWIJZIGD (Timo 2026-08-24): de vulling is lichtblauw --blue-100 in plaats van oranje.
   Dat is dezelfde blauwe pil die sitebreed op .pill--blue staat, dus de cirkel valt nu binnen een
   bestaande kleurafspraak in plaats van het merkaccent op te eisen dat op deze pagina al door de
   navigatiepijlen en de kop-punten wordt gedragen.
   LEESBAARHEID GEMETEN, NIET GESCHAT: het glyph gaat mee naar --navy-950 (#020E2C) op #D4E2F5.
   Dat is een contrastverhouding van ~16,4:1, ruim boven de 3:1 die WCAG voor een grafisch element
   vraagt. Wit glyph op #D4E2F5 zou ~1,3:1 zijn geweest en dus onleesbaar; wie de vulling terugzet,
   zet het glyph mee terug.
   Oude waarde verbatim: background: var(--orange-500); color: #fff;
   en de hoverregel hieronder: background: var(--orange-600); */
.oa-team-carousel .team-card .tc-li {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--navy-950);
  transition: background-color .18s ease, transform .18s ease;
}
/* Het raakvlak wordt opgerekt tot ~44px zonder de cirkel groter te tekenen: op 34px is de
   knop optisch in balans met de kaart, maar te klein om met een duim betrouwbaar te raken. */
.oa-team-carousel .team-card .tc-li::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
}
.oa-team-carousel .team-card .tc-li:hover { background: var(--blue-200); transform: translateY(-1px); }
/* Eigen focusring: de kaart staat op donker glas, dus de standaardring van de browser
   verdwijnt er half in. */
.oa-team-carousel .team-card .tc-li:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .oa-team-carousel .team-card .tc-li { transition: none; }
  .oa-team-carousel .team-card .tc-li:hover { transform: none; }
}
/* DODE REGELS sinds 2026-08-11: de .loc-spans (locatieregel Skopje/Nederland per
   teamkaart) zijn uit sections/over-ons/o5.html gehaald, besluit Timo 11 augustus
   (Skopje niet prominent, geen Nederland-tegenover-Skopje-framing). De regels blijven
   staan zodat terugzetten van die tien spans genoeg is om het terug te draaien.
   Zie het herkomstcomment boven de carousel in o5.html voor de verwijderde markup. */
.oa-team-carousel .team-card .loc {
  grid-column: 1;
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.oa-team-carousel .team-card .loc::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange-500);
  flex: none;
}

/* Navigatiepijlen op de paneelranden, glas op navy (de decoratieve pijl IN het
   kaartje is bewust weg: die verwees naar een profielpagina die niet bestaat) */
.oa-team-carousel .team-prev,
.oa-team-carousel .team-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  background: color-mix(in srgb, var(--navy-900) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.oa-team-carousel .team-prev { left: 10px; }
.oa-team-carousel .team-next { right: 10px; }

@media (prefers-reduced-motion: reduce) {
  .oa-team-carousel .team-fig,
  .oa-team-carousel .team-fig img,
  .oa-team-carousel .team-fig::before,
  .oa-team-carousel .team-card { transition: none; }

  .oa-team-fig img,
  .oa-team-roster-list li,
  .oa-team-linkedin,
  .oa-team-name { transition: none; }
}

/* ---------- Laptop: subkolommen stapelen ----------
   VERSCHOVEN VAN 880px NAAR 1120px op 2026-08-24, samen met de LinkedIn-cirkel in de rij.
   GEMETEN, niet geschat: de cirkel kost 26px plus 16px rij-gap, en die 42px gaan af van de
   ruimte voor de functietitel. Met twee subkolommen begint "Business Development" bij
   Anastasia daardoor te breken vanaf 1080px, en bij 881px doen vijf van de acht rijen dat
   (lise, simona, sam, anastasia, emma). Zonder cirkel gebeurde dat pas bij 881px en dan
   alleen bij Anastasia. Twee gebroken rijen naast elkaar zetten bovendien de scheidingslijnen
   van de twee subkolommen uit de pas, en dat is precies wat dit roster rustig maakt.
   Eén subkolom lost het in de hele band 881-1120px op (gemeten: nul brekende rijen), tegen
   een hoger blok: circa 470px in plaats van 300px. Dat is dezelfde stapeling die hieronder
   op 880px toch al inging, nu alleen eerder.
   WAAROM 1120 EN NIET 1090: 1090px was de eerste breedte zonder breuk in een headless venster
   ZONDER schuifbalk. Een echt venster met een zichtbare schuifbalk heeft circa 15px minder
   layoutbreedte, en de font-metriek verschilt per systeem. 1120 houdt die marge.
   WAAROM NIET DE VERHOUDING VAN .oa-team-roster VERRUIMEN: minmax(160px,.8fr) 3.2fr haalt de
   breuk ook weg tussen 920 en 1120, maar bij 881-900 breekt Anastasia dan alsnog, en het
   verandert het bureaubladbeeld op ELKE breedte. Deze media-regel raakt alleen de band die
   daadwerkelijk stuk was. */

@media (max-width: 1120px) {
  /* Subkolommen stapelen: één doorlopende lijst, met scheidingslijn ertussen */
  .oa-team-roster-cols { grid-template-columns: 1fr; }
  .oa-team-roster-cols ul + ul li:first-child { border-top: 1px solid var(--line-paper); }
}

/* ---------- Tablet ---------- */

@media (max-width: 880px) {
  .oa-team-head h2 { max-width: 100%; }

  .oa-team-pillars { grid-template-columns: 1fr; }

  .oa-team-roster { grid-template-columns: 1fr; row-gap: 24px; }
  .oa-team-roster-group--wide {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line-paper);
    padding-top: 24px;
  }
}

/* ---------- Mobiel: carrousel vervangt band + roster ---------- */

@media (max-width: 640px) {
  /* De statische line-up van 10 wordt te krap op telefoon; de interactieve
     carrousel neemt het over. De tekst-roster valt ook weg: de kaartjes dragen
     naam + rol + locatie. Timo-besluit 2026-07-17. */
  .oa-team-band,
  .oa-team-roster { display: none; }
  .oa-team-carousel { display: block; }
}

@media (max-width: 560px) {
  .oa-team-pillar { padding: 26px 22px; }
}

@media (max-width: 400px) {
  /* Extra smal: de pijlen iets naar binnen zodat niks de rand raakt.
     De kaartbreedte stond hier ook, als min(230px, calc(100% - 30px)). Die is vervallen:
     de slot-center-regel hierboven heeft een hogere specificiteit en won er toch al van, en
     hij rekende bovendien met dezelfde verkeerde 100% (de figuur i.p.v. het paneel). Het
     viewport-plafond calc(100vw - 128px) doet nu wat deze regel wilde doen. */
  .oa-team-carousel .team-prev { left: 6px; }
  .oa-team-carousel .team-next { right: 6px; }
}

/* ---------- Optische randmarges van de buitenste twee (Timo 2026-07-31) ----------
   De doosmarges links en rechts zijn exact gelijk (zie --balans hierboven), maar
   optisch klopte het niet: gemeten op de render was de ruimte tussen de bandrand
   en Sams lichaam 57px, en tussen Emma en de rechterrand 24px. Dat komt doordat
   de vakbreedte volgt uit de VOLLEDIGE PNG, terwijl de band alleen de bovenste
   helft van elke figuur toont. Sam heeft gekruiste armen: zijn breedste punt zit
   onder de zichtbare uitsnede, dus zijn silhouet vult zijn vak daar niet.
   Deze twee nudges verschuiven alleen de foto binnen zijn vak. De layout, de
   naden en de centrering blijven onaangeroerd. Uitgedrukt als fractie van de
   bandhoogte, zodat ze meeschalen met het formaat.

   UITGEDEMPT Timo 2026-07-31: Sam alleen verschuiven maakte hem los van de rij,
   want zijn vak bleef staan terwijl zijn foto naar links ging. De verschuiving
   loopt daarom nu af over Anastasia en Ana en is bij Simona nul, zodat de
   onderlinge afstanden aan de linkerkant gelijkmatig blijven. Mattijs en Roderik
   staan bewust op nul: zij bepalen de naad die exact op het midden moet vallen. */
.oa-team-fig[data-person="sam"]       { --fig-dx: calc(-0.115 * var(--band-h, 300px)); }
.oa-team-fig[data-person="anastasia"] { --fig-dx: calc(-0.077 * var(--band-h, 300px)); }
.oa-team-fig[data-person="ana"]       { --fig-dx: calc(-0.038 * var(--band-h, 300px)); }
.oa-team-fig[data-person="emma"]      { --fig-dx: calc( 0.010 * var(--band-h, 300px)); }