/* ============================================================
   ICT3Bruggen — voorpagina
   ============================================================ */

/* ------------------------------------------------------------
   HERO — editorial split
   H1-container is bewust breed (15ch) zodat de kop in 2 regels
   valt en nooit in een smalle kolom van 5-6 regels afbreekt.
   ------------------------------------------------------------ */
.hero{
  position:relative; display:flex; align-items:center;
  min-height:min(92svh, 900px);
  padding-top:calc(var(--header-h) + clamp(44px,6vw,80px));
  padding-bottom:clamp(64px,8vw,104px);
  overflow:clip;
  --mx:0px; --my:0px;
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__glow{
  position:absolute; right:-8vw; top:-14vw;
  width:min(62vw,820px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,101,47,.28), rgba(255,101,47,.07) 44%, transparent 68%);
  filter:blur(8px);
  transform:translate(var(--mx),var(--my));
  transition:transform .6s var(--ease-out);
}
.hero__grid{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(14,26,43,.07) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 68% 40%, #000 28%, transparent 74%);
          mask-image:radial-gradient(ellipse 80% 70% at 68% 40%, #000 28%, transparent 74%);
}
/* Drie bruggen — het merkmotief, oplopende balken. */
.hero__bars{
  position:absolute; left:-46px; bottom:-30px;
  display:flex; align-items:flex-end; gap:14px; opacity:.5;
}
.hero__bars span{
  width:42px; border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,var(--orange-soft),transparent);
}
.hero__bars span:nth-child(1){ height:90px }
.hero__bars span:nth-child(2){ height:150px }
.hero__bars span:nth-child(3){ height:220px }
.hero__bars span:nth-child(4){ height:300px }

.hero__inner{
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(40px,5vw,72px);
  align-items:center;
}
.hero__copy h1{ max-width:15ch; margin:20px 0 24px; }
.hero__copy .lead{ max-width:50ch; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; }
.hero__actions .btn{ width:auto; }

/* --- Statuspaneel ---
   De zwevende kaarten worden absoluut gepositioneerd t.o.v. .hero__visual.
   Die moet daarom net zo breed zijn als het paneel zelf, anders landen ze
   midden op het paneel in plaats van eromheen. */
.hero__visual{ position:relative; width:min(436px,100%); margin-left:auto; }
.panel{
  position:relative; margin-left:auto; max-width:436px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); padding:28px;
}
.panel__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.panel__dot{ display:flex; align-items:center; gap:9px; font-family:var(--f-head); font-weight:600; font-size:.95rem; }
.panel__dot i{
  width:9px; height:9px; border-radius:50%; background:var(--ok);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(22,128,61,.45) }
  70% { box-shadow:0 0 0 9px rgba(22,128,61,0) }
  100%{ box-shadow:0 0 0 0 rgba(22,128,61,0) }
}
.panel__live{
  font-family:var(--f-head); font-weight:700; font-size:.66rem; letter-spacing:.12em;
  color:var(--ok); background:var(--ok-tint); padding:5px 11px; border-radius:var(--r-full);
}
.panel__status{
  display:flex; gap:24px; align-items:center;
  padding-bottom:24px; border-bottom:1px solid var(--line-2);
}
.status-ring{ position:relative; width:110px; height:110px; flex-shrink:0; }
.status-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:var(--orange-tint); stroke-width:8; }
.ring-fg{
  fill:none; stroke:var(--orange); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:213.6; stroke-dashoffset:213.6;
}
.in .ring-fg,
.no-js .ring-fg{ animation:ringfill 1.7s .2s var(--ease) forwards; }
@keyframes ringfill{ to{ stroke-dashoffset:2 } }
.status-ring__val{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.status-ring__val b{
  font-family:var(--f-mono); font-weight:600; font-size:1.4rem; line-height:1;
  letter-spacing:var(--tr-head); font-variant-numeric:tabular-nums;
}
.status-ring__val small{ font-size:.7rem; color:var(--slate); }
.status-meta{ flex:1; display:grid; gap:13px; min-width:0; }
.status-meta__row{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.92rem; }
.status-meta__row span{ color:var(--slate); }
.status-meta__row b{ font-weight:600; font-size:.85rem; text-align:right; }
.ok{ color:var(--ok); }

.panel__bars{ display:flex; align-items:flex-end; gap:6px; height:64px; margin-top:22px; }
.panel__bars i{
  flex:1; height:var(--h); border-radius:4px; transform-origin:bottom;
  background:linear-gradient(180deg,var(--orange),var(--orange-soft));
}
.in .panel__bars i{ animation:growbar 1s var(--ease) backwards; }
.in .panel__bars i:nth-child(odd){  animation-delay:.18s }
.in .panel__bars i:nth-child(even){ animation-delay:.32s }
@keyframes growbar{ from{ transform:scaleY(0); opacity:0 } }

.float-card{
  position:absolute; display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r);
  padding:12px 16px; box-shadow:var(--sh-lg);
  animation:floaty 5s ease-in-out infinite;
}
.float-card b{ display:block; font-family:var(--f-head); font-size:.86rem; }
.float-card small{ display:block; color:var(--slate); font-size:.74rem; }
.float-ic{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--orange-tint); color:var(--orange-600);
}
.float-ic svg{ width:19px; height:19px; }
.float-ic.ok{ background:var(--ok-tint); color:var(--ok); }
/* Net buiten de linkerhoeken, zodat ze het paneel omlijsten en niet de
   koptekst of de grafiek afdekken. */
.float-card--a{ top:-64px;    left:-96px; }
.float-card--b{ bottom:-34px; left:-64px; animation-delay:1.4s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

/* ------------------------------------------------------------
   PARTNERSTRIP — oneindige marquee
   ------------------------------------------------------------ */
.trust{ background:#fff; border-block:1px solid var(--line); padding-block:26px; overflow:hidden; }
.trust__label{
  font-family:var(--f-head); font-weight:600; font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate-2);
  text-align:center; margin-bottom:20px;
}
.marquee{
  display:flex; gap:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:52px; flex-shrink:0;
  padding-right:52px;
  animation:marquee 34s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-100%) } }
.trust__item{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-family:var(--f-head); font-weight:600; font-size:1rem; color:var(--ink-600);
}
.trust__item svg{ width:20px; height:20px; color:var(--orange); flex-shrink:0; }

@media (prefers-reduced-motion:reduce){
  .marquee{ mask-image:none; -webkit-mask-image:none; overflow-x:auto; }
  .marquee__track{ animation:none; flex-wrap:wrap; justify-content:center; gap:20px 40px; }
  .marquee__track[aria-hidden="true"]{ display:none; }
}

/* ------------------------------------------------------------
   DIENSTEN — bento op 12 kolommen, altijd zonder gaten

   Elke rij telt precies op tot 12. De verdeling hangt af van het aantal
   kaarten, want een vaste 3-koloms grid laat bij 4 of 5 diensten een lege
   cel achter — precies het gat dat een bento-grid goedkoop laat ogen.

     3 of 6+ kaarten : 4+4+4
     exact 4 kaarten : 6+6 / 6+6
     exact 5 kaarten : 4+4+4 / 6+6
     exact 6 kaarten : 5+4+3 / 3+4+5   (gespiegeld ritme)
   ------------------------------------------------------------ */
.svc-grid{
  display:grid; grid-auto-flow:dense;
  grid-template-columns:repeat(12,1fr); gap:18px;
  margin-top:clamp(40px,5vw,64px);
}
.svc{
  grid-column:span 4;
  display:flex; flex-direction:column; align-items:flex-start;
  position:relative; overflow:hidden; isolation:isolate;
}

/* Het bento-ritme geldt alleen vanaf desktop. Deze :has()-selectors zijn
   specifieker dan wat een media query eronder redelijkerwijs kan overschrijven,
   dus grenzen we ze hier af in plaats van ze verderop te bevechten. */
@media (min-width:1081px){
  /* exact 4 */
  .svc-grid:has(> :nth-child(4):last-child) .svc{ grid-column:span 6; }

  /* exact 5 — laatste twee breder zodat de tweede rij dichtloopt */
  .svc-grid:has(> :nth-child(5):last-child) .svc:nth-child(n+4){ grid-column:span 6; }

  /* exact 6 */
  .svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(1),
  .svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(6){ grid-column:span 5; }
  .svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(2),
  .svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(5){ grid-column:span 4; }
  .svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(3),
  .svc-grid:has(> :nth-child(6):last-child) .svc:nth-child(4){ grid-column:span 3; }
}
.svc::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(ellipse 70% 60% at 20% 0%, var(--orange-tint), transparent 70%);
  transition:opacity .4s var(--ease);
}
.svc:hover::before{ opacity:1; }
.svc__ic{
  width:54px; height:54px; border-radius:15px; margin-bottom:20px;
  display:grid; place-items:center;
  background:var(--orange-tint); color:var(--orange-600);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.svc__ic svg{ width:26px; height:26px; }
.svc:hover .svc__ic{ background:var(--orange); color:#fff; transform:scale(1.06) rotate(-4deg); }
.svc h3{ margin-bottom:10px; }
.svc p{ color:var(--slate); font-size:.97rem; }
.svc__more{
  margin-top:auto; padding-top:18px;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-head); font-weight:600; font-size:.9rem; color:var(--orange-600);
}
.svc__more svg{ width:16px; height:16px; transition:transform .28s var(--ease); }
.svc:hover .svc__more svg{ transform:translateX(5px); }

/* ------------------------------------------------------------
   CIJFERS
   ------------------------------------------------------------ */
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  padding-block:clamp(48px,6vw,72px);
}
.stat{ text-align:center; padding-inline:12px; border-right:1px solid rgba(255,255,255,.11); }
.stat:last-child{ border-right:0; }
/* Mono met vaste cijferbreedte: de tellers springen tijdens het animeren van
   0 naar 99,9, en in een proportionele font verschuift de hele band mee. */
.stat__val{
  display:block; font-family:var(--f-mono); font-weight:600; line-height:1;
  font-size:clamp(2.1rem,3.9vw,3rem); color:var(--orange);
  letter-spacing:var(--tr-head); font-variant-numeric:tabular-nums;
}
.stat__val small{ font-size:.42em; font-weight:600; color:var(--ink-on-muted); margin-left:3px; }
.stat__label{ display:block; margin-top:12px; color:var(--ink-on-muted); font-size:.95rem; }

/* ------------------------------------------------------------
   WAAROM WIJ
   ------------------------------------------------------------ */
.why{ background:#fff; }
.why__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,5.5vw,72px); align-items:center; }
.why__panel{
  background:linear-gradient(165deg,var(--orange-tint),#fff);
  border:1px solid var(--orange-soft); border-radius:var(--r-xl);
  padding:clamp(26px,3vw,34px); box-shadow:var(--sh);
}
.why__panel-top{
  padding-bottom:22px; margin-bottom:22px;
  border-bottom:1px dashed var(--orange-soft);
}
.why__badge{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--orange-soft); color:var(--orange-700);
  font-family:var(--f-head); font-weight:600; font-size:.8rem;
  padding:7px 13px; border-radius:var(--r-full);
}
.why__badge svg{ width:14px; height:14px; }
/* Het prototype toonde "vanaf € —". Een leeg prijsvakje kost conversie:
   we noemen expliciet wat er wél vaststaat. */
.why__claim{
  display:block; margin-top:18px;
  font-family:var(--f-head); font-weight:700; font-size:clamp(1.5rem,2.4vw,1.95rem);
  line-height:1.15; color:var(--ink);
}
.why__claim-sub{ display:block; margin-top:8px; font-size:.92rem; color:var(--slate); font-weight:500; font-family:var(--f-body); }
.why__list{ display:grid; gap:14px; margin-bottom:26px; }
.why__list li{ display:flex; align-items:center; gap:12px; font-weight:500; font-size:.98rem; }
.why__list svg{
  width:21px; height:21px; flex-shrink:0; padding:4px;
  color:#fff; background:var(--orange); border-radius:50%;
}
.why__points{ display:grid; grid-template-columns:1fr 1fr; gap:28px 32px; margin-top:36px; }
.why__point{ display:flex; gap:15px; }
.why__pic{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--orange-tint); color:var(--orange-600);
}
.why__pic svg{ width:23px; height:23px; }
.why__point h3{ font-size:1.1rem; margin-bottom:6px; }
.why__point p{ color:var(--slate); font-size:.92rem; line-height:1.55; }

/* ------------------------------------------------------------
   BEVEILIGING — donkere band met scrub-onthulling
   ------------------------------------------------------------ */
.security{ position:relative; overflow:clip; padding-block:clamp(80px,10vw,140px); }
.security__bg{ position:absolute; inset:0; pointer-events:none; }
.security__bg::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 60% at 80% 30%, rgba(255,101,47,.20), transparent 60%);
}
.security__shield{
  position:absolute; right:-5%; bottom:-12%; width:480px; aspect-ratio:1;
  border-radius:50%; border:1px solid rgba(255,255,255,.07);
}
.security__shield::before,
.security__shield::after{
  content:""; position:absolute; inset:60px; border-radius:50%;
  border:1px solid rgba(255,255,255,.05);
}
.security__shield::after{ inset:140px; border-color:rgba(255,101,47,.14); }
.security__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(40px,5vw,64px); align-items:center;
}
.security__lead{ font-size:clamp(1.1rem,1.5vw,1.32rem); line-height:1.6; margin:20px 0 30px; max-width:56ch; }
.security__feats{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
.sec-feat{ display:flex; align-items:center; gap:11px; font-size:.95rem; color:var(--ink-on); }
.sec-feat svg{
  width:19px; height:19px; flex-shrink:0; padding:4px;
  color:#fff; background:var(--orange); border-radius:50%;
}
.security__viz{ display:grid; place-items:center; }
.shield-card{
  position:relative; width:min(240px,70vw); aspect-ratio:1; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border-radius:30px; border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  /* Image-scale-paradigma: begint klein, groeit bij binnenkomst. */
  scale:.86; opacity:.4; transition:scale .9s var(--ease), opacity .9s var(--ease);
}
.no-js .shield-card,
.reveal.in .shield-card,
.security__viz.in .shield-card{ scale:1; opacity:1; }
.shield-ic{ width:84px; height:84px; color:var(--orange); margin-bottom:6px; }
.shield-ic svg{ width:100%; height:100%; }
.shield-card b{ font-family:var(--f-head); font-size:1.1rem; color:#fff; }
.shield-card small{ color:var(--ink-on-muted); font-size:.82rem; }
.shield-scan{
  position:absolute; left:0; right:0; height:60px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,101,47,.28),transparent);
  animation:scan 3.4s ease-in-out infinite;
}
@keyframes scan{ 0%,100%{ top:-60px } 50%{ top:100% } }

/* ------------------------------------------------------------
   REGIO
   ------------------------------------------------------------ */
/* De .town- en .map-componenten staan in style.css: contact.php gebruikt ze ook. */
.local{ background:var(--paper); }
.local__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,64px); align-items:center; }

/* ------------------------------------------------------------
   REFERENTIES — carrousel
   ------------------------------------------------------------ */
.testi{ background:#fff; }
.testi__viewport{
  margin-top:clamp(40px,5vw,60px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-bottom:6px;
}
.testi__viewport::-webkit-scrollbar{ display:none; }
.testi__track{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:20px; }
.testi__card{ scroll-snap-align:start; display:flex; flex-direction:column; gap:18px; }
.stars{ color:var(--orange); letter-spacing:3px; font-size:1rem; }
.testi__card blockquote{ font-size:1.05rem; line-height:1.55; color:var(--ink-700); font-weight:500; }
.testi__card figcaption{ display:flex; align-items:center; gap:13px; margin-top:auto; padding-top:6px; }
.avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; object-fit:cover;
  background:var(--orange-tint); color:var(--orange-700);
  font-family:var(--f-head); font-weight:600; font-size:.95rem;
}
.testi__card figcaption b{ display:block; font-family:var(--f-head); font-size:.96rem; }
.testi__card figcaption small{ color:var(--slate); font-size:.82rem; }

.testi__nav{ display:none; gap:10px; justify-content:center; margin-top:26px; }
.testi__nav button{
  width:46px; height:46px; border-radius:var(--r-full);
  border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; color:var(--ink);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.testi__nav button:hover{ border-color:var(--orange-soft); background:var(--orange-tint); }
.testi__nav svg{ width:18px; height:18px; }

/* ------------------------------------------------------------
   CTA-BAND
   ------------------------------------------------------------ */
.cta-band{ padding:var(--pad); }
.cta-band__inner{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(118deg,var(--orange-700),var(--orange) 58%,#ff7f4d);
  border-radius:var(--r-xl); box-shadow:var(--sh-orange);
  padding:clamp(52px,7.5vw,96px) var(--pad);
}
.cta-band__inner > *{ position:relative; z-index:2; }
.cta-band__inner h2{ color:#fff; max-width:18ch; margin-inline:auto; }
.cta-band__inner p{
  color:rgba(255,255,255,.9); max-width:56ch;
  margin:16px auto 32px; font-size:clamp(1.02rem,1.3vw,1.15rem);
}
.cta-band__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-band__actions .btn{ width:auto; }
.cta-band__actions .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.cta-band__actions .btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.cta-band__bars{
  position:absolute; right:-20px; bottom:-20px; z-index:1;
  display:flex; align-items:flex-end; gap:12px; opacity:.16; pointer-events:none;
}
.cta-band__bars span{ width:40px; border-radius:9px 9px 0 0; background:#fff; }
.cta-band__bars span:nth-child(1){ height:70px }
.cta-band__bars span:nth-child(2){ height:120px }
.cta-band__bars span:nth-child(3){ height:180px }
.cta-band__bars span:nth-child(4){ height:250px }

/* ------------------------------------------------------------
   RESPONSIEF
   ------------------------------------------------------------ */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; gap:64px; }
  .hero__copy h1{ max-width:13ch; }
  .hero__visual{ margin-inline:0; }
  /* Tablet: altijd twee gelijke kolommen — 6+6 loopt bij elk aantal dicht. */
  .svc-grid .svc{ grid-column:span 6; }
  .why__grid,.security__inner,.local__grid{ grid-template-columns:1fr; }
  .security__viz{ order:-1; }
  .testi__track{ grid-auto-columns:minmax(min(78vw,420px),1fr); }
  .testi__nav{ display:flex; }
  .stats__grid{ grid-template-columns:1fr 1fr; gap:36px 20px; }
  .stat:nth-child(2){ border-right:0; }
}
@media (max-width:640px){
  .hero{ min-height:auto; }
  .hero__copy h1{ max-width:11ch; }
  .hero__bars{ display:none; }
  /* Mobiel: altijd één kaart per rij. */
  .svc-grid .svc{ grid-column:1 / -1; }
  .why__points,.security__feats{ grid-template-columns:1fr; }
  .float-card--a{ top:-16px; left:0; }
  .float-card--b{ bottom:-16px; left:auto; right:0; }
  .hero__visual{ padding-block:22px; }
  .float-card small{ display:none; }
  .stats__grid{ grid-template-columns:1fr; gap:30px; }
  .stat{ border-right:0; }
}

/* ============================================================
   Team

   Portretten in een bakje in plaats van plat op de achtergrond: buitenschil
   met hairline, kern met een radius die de buitenradius min de padding is,
   zodat de rondingen concentrisch lopen.

   Het raster telt zelf uit hoeveel kolommen passen. Bij twee teamleden geeft
   een vast vierkolomsraster twee gaten aan de rechterkant; auto-fit met een
   maximum houdt de rij altijd gevuld.
   ============================================================ */
.team__grid{
  display:grid; gap:clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit, minmax(232px, 1fr));
  margin-top:clamp(40px,5vw,64px);
}
.team__grid:has(> :nth-child(5)){ grid-template-columns:repeat(auto-fit, minmax(208px, 1fr)); }

.team-card{ display:flex; flex-direction:column; }

.team-card__shell{
  padding:6px; border-radius:var(--r-xl);
  border:1px solid var(--line); background:#fff;
  box-shadow:var(--sh-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.team-card__photo{
  overflow:hidden; border-radius:calc(var(--r-xl) - 6px);
  background:var(--orange-tint);
}
.team-card__photo img{
  width:100%; aspect-ratio:1; object-fit:cover;
  transition:transform .5s var(--ease);
}
.team-card:hover .team-card__shell{
  transform:translateY(-3px); box-shadow:var(--sh); border-color:var(--orange-soft);
}
.team-card:hover .team-card__photo img{ transform:scale(1.03); }

.team-card__body{ padding:18px 4px 0; }
.team-card__name{ font-size:1.15rem; line-height:1.25; }
.team-card__role{
  margin-top:5px; color:var(--orange-600);
  font-family:var(--f-head); font-weight:600; font-size:.86rem;
  letter-spacing:var(--tr-body);
}
.team-card__bio{
  margin-top:10px; color:var(--slate); font-size:.93rem; line-height:1.6;
}

.team-card__links{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;
}
.team-link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:38px; height:38px; border-radius:var(--r-full);
  border:1px solid var(--line); background:#fff; color:var(--ink);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Het telefoonnummer staat voluit: dat is de route die lokaal het vaakst
   gekozen wordt, en een nummer dat je kunt lezen wekt meer vertrouwen dan
   een icoon dat je moet aanklikken om te weten wie je belt. */
.team-link--wide{
  width:auto; padding:0 15px 0 13px;
  font-family:var(--f-head); font-weight:600; font-size:.88rem;
  letter-spacing:var(--tr-body); white-space:nowrap;
}
.team-link svg{ width:17px; height:17px; flex-shrink:0; }
.team-link:hover{
  background:var(--ink); border-color:var(--ink); color:#fff;
}
.team-link:active{ transform:scale(.96); }
.team-link:focus-visible{ outline:2px solid var(--orange-600); outline-offset:2px; }

@media (max-width:640px){
  .team__grid,
  .team__grid:has(> :nth-child(5)){ grid-template-columns:1fr 1fr; }
  .team-card__body{ padding-top:14px; }
  .team-card__name{ font-size:1.02rem; }
  .team-card__bio{ display:none; }
}
@media (max-width:420px){
  .team__grid,
  .team__grid:has(> :nth-child(5)){ grid-template-columns:1fr; }
  .team-card__bio{ display:block; }
}

@media (prefers-reduced-motion:reduce){
  .team-card__shell,.team-card__photo img,.team-link{ transition-duration:.01ms; }
  .team-card:hover .team-card__shell,
  .team-card:hover .team-card__photo img,
  .team-link:active{ transform:none; }
}