/* =========================================================
   JESAP Consulting — Team page
   Solo regole specifiche della pagina Team.
   Nav, footer, bottoni, primitive di sezione, .fade-up,
   variabili e reset arrivano da css/base.css.
   ========================================================= */

/* offset for sticky nav when smooth-scrolling to anchors */
section[id] { scroll-margin-top: 60px; }

/* ========= HERO ========= */
.team-hero {
  /* padding-top/bottom (non lo shorthand "padding"): ".wrap" mette già
     40px/22px di padding orizzontale in base.css, ma essendo team.css
     caricato dopo e con la stessa specificità, uno shorthand con "0"
     per sinistra/destra lo sovrascriverebbe incollando il contenuto
     al bordo su mobile. */
  padding-top: 40px;
  padding-bottom: 80px;
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  position: relative;
}
.team-hero-inner {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center;
  width: 100%;
}
@media (max-width: 900px) {
  .team-hero { min-height: auto; padding-top: 40px; padding-bottom: 60px; }
  .team-hero-inner { grid-template-columns: 1fr; gap: 36px; align-items: stretch; }
}

.team-hero-text { display: flex; flex-direction: column; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; color: var(--viola);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--viola); }

.team-h1 {
  font-family: var(--display);
  font-size: clamp(40px, 5.2vw, 74px);
  line-height: 1; letter-spacing: -0.035em; font-weight: 600;
  color: var(--nero);
  margin: 16px 0 22px;
  white-space: nowrap;
}
.team-h1 .italic {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--viola);
  letter-spacing: -0.01em;
}
@media (max-width: 600px) {
  .team-h1 { white-space: normal; }
}
.team-h1 .hl {
  position: relative; display: inline-block; z-index: 0;
}
.team-h1 .hl::before {
  content: ""; position: absolute;
  left: -6px; right: -6px; top: 0.05em; bottom: 0.05em;
  background: linear-gradient(90deg, #983C8E 0%, #7A5EA8 100%);
  opacity: .55; border-radius: 4px;
  transform: skewX(-6deg) scaleX(0);
  transform-origin: left center; z-index: -1;
  animation: hlDraw 1s cubic-bezier(.4,0,.2,1) .4s forwards;
}
@keyframes hlDraw { to { transform: skewX(-6deg) scaleX(1); } }
.team-lead {
  font-size: 15px; line-height: 1.6; color: var(--muted);
  max-width: 520px;
  margin: 0 0 32px;
}

/* Hero stat chips */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 8px;
}
.hstat {
  display: inline-flex; align-items: center; gap: 8px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 8px;
  cursor: default;
  transition: transform 0.25s ease;
}
.hstat:hover {
  transform: scale(1.07);
}
.hstat:hover .hstat-v { color: var(--viola); }
.hstat-k {
  font-family: var(--display);
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--viola);
}
.hstat-v {
  font-size: 12px; color: var(--muted); font-weight: 600;
  letter-spacing: 0.04em;
}
/* Nascoste su mobile: le stat chips restano invariate su desktop */
@media (max-width: 720px) {
  .hero-stats { display: none; }
}

/* ===== Scroll cue (call to scroll) ===== */
.scroll-cue {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #983C8E 0%, #7A5EA8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  z-index: 20;
  animation: cueBob 2.4s ease-in-out infinite;
  transition: opacity .25s ease;
}
.scroll-cue:hover { opacity: 0.7; }
.scroll-cue svg {
  width: 12px; height: 12px;
  stroke: url(#scrollGrad);
}
@keyframes cueBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(5px); }
}
.hero-gallery-wrap {
  position: relative;
  height: clamp(420px, 58vh, 520px);
  width: 100%;
}
@media (max-width: 900px) { .hero-gallery-wrap { height: 460px; } }

.gallery {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.gallery.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================ */
/* Hero photo moodboard — 9 polaroid statiche con tape + didascalie */
/* ============================================================ */
.gallery-a {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.mb-photo {
  position: absolute;
  background-size: cover;
  background-position: center;
  background-color: white;
  border: 10px solid white;
  border-bottom-width: 38px;
  box-shadow: 0 18px 36px -14px rgba(43,46,51,0.3);
  border-radius: 2px;
  cursor: zoom-in;
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
}
.mb-photo:hover {
  transform: scale(1.04) rotate(var(--rot, 0deg)) !important;
  box-shadow: 0 28px 56px -18px rgba(43,46,51,0.42);
  z-index: 20 !important;
}
.mb-photo::after {
  content: "⤢";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.6);
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.92);
  color: var(--viola);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.3);
}
.mb-photo:hover::after {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.mb-label {
  position: absolute; bottom: -30px; left: 0; right: 0;
  text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 13px; color: var(--nero);
  letter-spacing: -0.005em;
  pointer-events: none;
}
.mb-tape {
  position: absolute; top: -12px; left: 50%;
  width: 58px; height: 16px;
  background: rgba(152,60,142,0.35);
  box-shadow: inset 0 0 0 1px rgba(152,60,142,0.12);
  pointer-events: none;
}
/* Posizioni 9 polaroid — 3 file con overlap, coprono tutto */
.mb-photo-1 {
  --rot: -6deg;
  width: 30%; aspect-ratio: 4/3;
  top: 0%; left: -1%;
  transform: rotate(-6deg);
  background-image: url('../assets/fototeam1.jpg');
  background-position: center center;
  z-index: 3;
}
.mb-photo-2 {
  --rot: 4deg;
  width: 30%; aspect-ratio: 4/3;
  top: 3%; left: 35%;
  transform: rotate(4deg);
  background-image: url('../assets/fototeam2.jpg');
  background-position: center center;
  z-index: 4;
}
.mb-photo-3 {
  --rot: -3deg;
  width: 30%; aspect-ratio: 4/3;
  top: 0%; right: -1%;
  transform: rotate(6deg);
  background-image: url('../assets/fototeam3.jpg');
  background-position: 30% 50%;
  z-index: 5;
}
.mb-photo-4 {
  --rot: 6deg;
  width: 30%; aspect-ratio: 4/3;
  top: 36%; left: 4%;
  transform: rotate(-4deg);
  background-image: url('../assets/fototeam4.jpg');
  background-position: 75% 50%;
  z-index: 6;
}
.mb-photo-5 {
  --rot: 5deg;
  width: 30%; aspect-ratio: 4/3;
  top: 33%; left: 36%;
  transform: rotate(5deg);
  background-image: url('../assets/fototeam5.jpg');
  background-position: 50% 50%;
  z-index: 7;
}
.mb-photo-6 {
  --rot: -4deg;
  width: 30%; aspect-ratio: 4/3;
  top: 37%; right: 3%;
  transform: rotate(-3deg);
  background-image: url('../assets/fototeam6.jpg');
  background-position: 20% 50%;
  z-index: 6;
}
.mb-photo-7 {
  --rot: 3deg;
  width: 30%; aspect-ratio: 4/3;
  bottom: 0%; left: 1%;
  transform: rotate(3deg);
  background-image: url('../assets/fototeam7.jpg');
  background-position: 60% 50%;
  z-index: 7;
}
.mb-photo-8 {
  --rot: -6deg;
  width: 30%; aspect-ratio: 4/3;
  bottom: 2%; left: 34%;
  transform: rotate(-5deg);
  background-image: url('../assets/fototeam8.jpg');
  background-position: 45% 50%;
  z-index: 8;
}
.mb-photo-9 {
  --rot: 6deg;
  width: 30%; aspect-ratio: 4/3;
  bottom: 0%; right: -1%;
  transform: rotate(6deg);
  background-image: url('../assets/fototeam9.jpg');
  background-position: 70% 50%;
  z-index: 7;
}
/* Sul contenitore mobile (altezza fissa 460px) le foto sono molto più
   piccole che su desktop, ma le posizioni sono le stesse percentuali:
   il vuoto tra riga 2 e riga 3 finiva per essere più del doppio di
   quello tra riga 1 e riga 2 (125px contro 56px, misurato). Qui la riga
   3 viene avvicinata alla riga 2 per pareggiare i due vuoti. */
@media (max-width: 900px) {
  .mb-photo-7 { bottom: 15%; }
  .mb-photo-8 { bottom: 17%; }
  .mb-photo-9 { bottom: 15%; }
}

/* Tape colori diversi + rotazioni diverse */
.mb-photo .mb-tape { transform: translateX(-50%) rotate(-3deg); }
.mb-photo-1 .mb-tape { background: rgba(152,60,142,0.35); transform: translateX(-50%) rotate(-4deg); }
.mb-photo-2 .mb-tape { background: rgba(122,94,168,0.4); transform: translateX(-50%) rotate(5deg); }
.mb-photo-3 .mb-tape { background: rgba(43,46,51,0.18); transform: translateX(-50%) rotate(-2deg); }
.mb-photo-4 .mb-tape { background: rgba(152,60,142,0.35); transform: translateX(-50%) rotate(7deg); }
.mb-photo-5 .mb-tape { background: rgba(122,94,168,0.4); transform: translateX(-50%) rotate(6deg); }
.mb-photo-6 .mb-tape { background: rgba(43,46,51,0.18); transform: translateX(-50%) rotate(-5deg); }
.mb-photo-7 .mb-tape { background: rgba(152,60,142,0.35); transform: translateX(-50%) rotate(4deg); }
.mb-photo-8 .mb-tape { background: rgba(122,94,168,0.4); transform: translateX(-50%) rotate(-7deg); }
.mb-photo-9 .mb-tape { background: rgba(43,46,51,0.18); transform: translateX(-50%) rotate(3deg); }

/* ============================================================ */
/* Lightbox — visualizza la foto in grande */
/* ============================================================ */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(43,46,51,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  padding: 60px clamp(20px, 6vw, 80px) 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lb-img-wrap {
  background: white;
  border: 14px solid white;
  border-bottom-width: 56px;
  border-radius: 4px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
  max-width: min(900px, 90vw);
  max-height: 78vh;
  position: relative;
  transform: scale(0.92);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: flex; align-items: center; justify-content: center;
}
.lightbox.is-open .lb-img-wrap { transform: scale(1); }
.lb-img {
  display: block;
  max-width: 100%;
  max-height: calc(78vh - 70px);
  object-fit: contain;
}
.lb-caption {
  position: absolute; bottom: -42px; left: 0; right: 0;
  text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--nero);
}
.lb-btn {
  background: rgba(255,255,255,0.95);
  color: var(--nero);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 600;
  box-shadow: 0 8px 18px -4px rgba(0,0,0,0.3);
  transition: transform .2s ease, background .2s ease;
}
.lb-btn:hover { transform: scale(1.08); background: white; }
.lb-close {
  position: absolute; top: 24px; right: 24px;
  z-index: 2;
}
.lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
}
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.08); }
.lb-prev { left: clamp(12px, 3vw, 36px); }
.lb-next { right: clamp(12px, 3vw, 36px); }
.lb-counter {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  color: white; opacity: 0.7;
}

/* ========= CdA INTRO + ROLES ========= */
.cda {
  padding: 60px 0 30px;
}
.cda-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start;
}
@media (max-width: 900px) { .cda-grid { grid-template-columns: 1fr; gap: 32px; } }
.cda-title {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 0.98; letter-spacing: -0.03em; font-weight: 600;
  color: var(--nero); margin: 12px 0 0;
}
.cda-title .italic {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--viola);
}
.cda-lead {
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
  margin: 20px 0 0; max-width: 520px;
}
.cda-lead strong { color: var(--nero); font-weight: 600; }

.role-stack { display: flex; flex-direction: column; gap: 14px; }
.role-card {
  background: white;
  border: 1px solid rgba(43,46,51,0.08);
  border-radius: 22px;
  padding: 22px 26px;
  display: flex; gap: 18px; align-items: flex-start;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.role-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(43,46,51,0.16);
  border-color: rgba(152,60,142,0.25);
}
.role-ic {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--viola-soft); color: var(--viola);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.role-ic svg { width: 22px; height: 22px; }
.role-name {
  font-family: var(--display);
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--nero); margin: 0 0 6px;
}
.role-name em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--viola); }
.role-desc {
  font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0;
}

/* ========= BOARD GRID ========= */
.board {
  padding-top: 60px;
  padding-bottom: 80px;
}
.section-head {
  display: flex; justify-content: space-between; align-items: end; gap: 28px;
  margin-bottom: 32px;
}
@media (max-width: 720px) { .section-head { flex-direction: column; align-items: flex-start; } }
.section-title {
  font-family: var(--display);
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 0.98; letter-spacing: -0.03em; font-weight: 600;
  color: var(--nero); margin: 12px 0 0;
}
.section-title .italic {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--viola);
}
.section-meta {
  font-size: 13px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .board-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .board-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.b-card {
  background: white;
  border-radius: 22px;
  padding: 14px 14px 18px;
  border: 1px solid rgba(43,46,51,0.06);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
  position: relative;
  overflow: hidden;
}
.b-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -22px rgba(43,46,51,0.22);
}
.b-photo {
  aspect-ratio: 4/5;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #ffffff;
}
.b-photo::after {
  content: "+ Foto";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.65);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500;
}
.b-photo.has-photo::after { content: none; }
.b-card .b-photo.has-photo {
  background-color: var(--crema);
  background-size: cover;
  background-position: center 12%;
  background-repeat: no-repeat;
}
.b-photo .b-role-chip {
  position: absolute; top: 12px; left: 12px;
  background: var(--viola);
  color: white;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  z-index: 2;
  box-shadow: 0 6px 14px -6px rgba(152,60,142,0.5);
}
.b-photo .b-num {
  position: absolute; bottom: 12px; right: 14px;
  color: rgba(255,255,255,0.6);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.08em; font-weight: 600;
  z-index: 2;
}

.b-meta { padding: 16px 2px 0; }
.b-name {
  font-family: var(--display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--nero); margin: 0;
  line-height: 1.1;
}
.b-role {
  font-size: 12px; color: var(--muted); margin: 6px 0 0;
  line-height: 1.4; letter-spacing: -0.01em;
}
.b-link {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--viola-scuro);
  transition: gap .2s ease, color .2s ease;
}
.b-card:hover .b-link { gap: 10px; color: var(--viola); }
.b-link svg { width: 12px; height: 12px; }

/* ========= AREE ========= */
/* Centratura e padding orizzontale ora arrivano da ".wrap" (aggiunta in
   HTML), come tutte le altre sezioni della pagina — prima ".aree" usava
   un proprio max-width/margin e AGGIUNGEVA margin:22px sopra al
   padding:22px di ".wrap"-like su mobile, risultando 44px per lato
   invece di 22px: sezione visibilmente più stretta delle altre. */
.aree {
  padding-top: 40px;
  padding-bottom: 30px;
}
@media (max-width: 720px) { .aree { padding-top: 32px; padding-bottom: 40px; } }
.aree-inner { margin: 0; }

.aree-head {
  display: flex; justify-content: space-between; align-items: end; gap: 28px;
  margin-bottom: 36px;
}
@media (max-width: 720px) { .aree-head { flex-direction: column; align-items: flex-start; } }

/* Tabs — sempre 2 colonne x 2 righe, su ogni breakpoint */
.area-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
}
.atab { flex: 1 1 auto; }
@media (max-width: 720px) {
  .area-tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
}
.atab {
  display: inline-flex; align-items: center; gap: 10px;
  background: white;
  border: 1px solid rgba(43,46,51,0.08);
  border-radius: 999px;
  padding: 10px 18px 10px 12px;
  cursor: pointer;
  transition: all .25s ease;
  color: var(--nero);
  min-width: 0;
}
.atab:hover {
  transform: translateY(-2px);
  border-color: rgba(152,60,142,0.25);
  box-shadow: 0 10px 22px -14px rgba(43,46,51,0.16);
}
/* Leggero movimento fluttuante quando non attivo, come i filtri di
   servizi (.fchip): sfasato per tab così non si muovono in sincrono. */
.atab:not(.is-active) { animation: atabFloat 6s ease-in-out infinite; }
.atab:nth-child(1):not(.is-active) { animation-delay: 0s; }
.atab:nth-child(2):not(.is-active) { animation-delay: .8s; }
.atab:nth-child(3):not(.is-active) { animation-delay: 1.6s; }
.atab:nth-child(4):not(.is-active) { animation-delay: 2.4s; }
@keyframes atabFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}
.atab:not(.is-active):hover { animation-play-state: paused; }
.atab-ic {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--viola-soft); color: var(--viola);
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease;
}
.atab-ic svg {
  width: 17px; height: 17px;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.atab:hover .atab-ic {
  transform: scale(1.15) rotate(-8deg);
}
.atab:hover .atab-ic svg {
  transform: rotate(8deg);
}
.atab-name {
  font-family: var(--display);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.15;
  min-width: 0;
  overflow-wrap: break-word;
}
/* Sotto i 720px, icona a fianco del testo lascia troppo poco spazio
   orizzontale (a 320px restano ~46px per il testo: parole come
   "Marketing" non ci stanno e sporgono fuori dalla card). Icona sopra e
   testo sotto, centrato, dà al testo l'intera larghezza della card. */
@media (max-width: 720px) {
  .atab {
    flex-direction: column;
    text-align: center;
    border-radius: 18px;
    gap: 8px;
    padding: 14px 10px 12px;
  }
}
@media (max-width: 480px) {
  .atab { padding: 12px 8px 10px; gap: 6px; }
  .atab-name { font-size: 12.5px; }
}
.atab.is-active {
  color: white;
  border-color: transparent;
  box-shadow: 0 14px 28px -10px rgba(122,94,168,0.5);
}
/* I tab Deleghe (data-del, non data-area) non rientrano nelle regole
   colore per area qui sotto: senza uno sfondo proprio restavano bianchi
   con testo bianco (.atab.is-active sopra) quindi invisibili da attivi. */
.atab[data-del].is-active {
  background: linear-gradient(135deg, var(--viola), var(--viola-scuro));
}
.atab.is-active .atab-ic {
  background: rgba(255,255,255,0.2); color: white;
  animation: atab-pulse 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
/* Colore per area, coerente con la palette usata in home (fan-card) e
   servizi (targhette): BD viola scuro, MC viola, D&A nero. */
.atab[data-area="bd"].is-active { background: var(--viola-scuro); }
.atab[data-area="mc"].is-active { background: var(--viola); }
.atab[data-area="da"].is-active { background: var(--nero); }
/* HR è bianco nella stessa palette: uno sfondo pieno sarebbe invisibile
   sulla card (già bianca), quindi qui lo stato attivo si vede dal bordo
   sfumato invece che dal riempimento. */
.atab[data-area="hr"].is-active {
  background: white;
  color: var(--nero);
  border: 2px solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(135deg, var(--viola), var(--viola-scuro));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 14px 28px -16px rgba(122,94,168,0.35);
}
.atab[data-area="hr"].is-active .atab-ic {
  background: var(--viola-soft); color: var(--viola);
}
.atab.is-active:hover .atab-ic,
.atab.is-active:hover .atab-ic svg { animation: none; }
@keyframes atab-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255,255,255,0.45);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(255,255,255,0);
  }
}
.atab.is-active .atab-ic svg {
  animation: atab-icon-bob 3s ease-in-out infinite;
}
@keyframes atab-icon-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-1.5px) rotate(-3deg); }
  75%      { transform: translateY(1.5px) rotate(3deg); }
}

/* Area panel */
.area-panel {
  display: none;
  background: white;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(43,46,51,0.06);
  box-shadow: 0 24px 50px -28px rgba(43,46,51,0.18);
  animation: panelIn .5s cubic-bezier(.2,.7,.2,1);
}
.area-panel.is-active { display: block; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Stagger fade-in for bullets and people when panel becomes active */
.area-panel.is-active .ap-bullets li,
.area-panel.is-active .ppl {
  animation: stagger-in .85s cubic-bezier(.2,.7,.2,1) backwards;
}
.area-panel.is-active .ap-bullets li:nth-child(1) { animation-delay: 0.15s; }
.area-panel.is-active .ap-bullets li:nth-child(2) { animation-delay: 0.30s; }
.area-panel.is-active .ap-bullets li:nth-child(3) { animation-delay: 0.45s; }
.area-panel.is-active .ap-bullets li:nth-child(4) { animation-delay: 0.60s; }
.area-panel.is-active .ppl:nth-child(1) { animation-delay: 0.35s; }
.area-panel.is-active .ppl:nth-child(2) { animation-delay: 0.55s; }
.area-panel.is-active .ppl:nth-child(3) { animation-delay: 0.75s; }
.area-panel.is-active .ppl:nth-child(4) { animation-delay: 0.95s; }
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.area-panel-grid {
  display: grid;
  grid-template-columns: 1fr auto;
}
@media (max-width: 900px) { .area-panel-grid { grid-template-columns: 1fr; } }

/* LEFT: description */
.ap-desc {
  padding: 56px 56px 56px;
  display: flex; flex-direction: column;
}
@media (max-width: 720px) { .ap-desc { padding: 32px 24px; } }
.ap-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--viola);
  padding: 5px 10px; border: 1px solid rgba(152,60,142,0.25);
  border-radius: 999px; background: var(--viola-soft);
  align-self: flex-start;
}
.ap-title {
  font-family: var(--display);
  font-size: clamp(23px, 2.5vw, 34px);
  line-height: 1; letter-spacing: -0.025em; font-weight: 600;
  color: var(--nero); margin: 16px 0 0;
}
.ap-title em {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--viola);
}
.ap-mission {
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
  margin: 14px 0 0;
}
.ap-mission strong { color: var(--nero); font-weight: 600; }
.ap-mission em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--viola); }

.ap-bullets {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
}
@media (max-width: 540px) { .ap-bullets { grid-template-columns: 1fr; } }
.ap-bullets li {
  position: relative; padding-left: 22px;
  font-size: 13px; line-height: 1.45; color: var(--nero);
}
.ap-bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 12px; height: 2px; border-radius: 2px;
  background: var(--viola);
}
.ap-cta {
  margin-top: auto; padding-top: 26px;
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-size: 13px; font-weight: 600; color: var(--viola-scuro);
  transition: gap .2s ease, color .2s ease;
}
.ap-cta:hover { gap: 12px; color: var(--viola); }
.ap-cta svg { width: 13px; height: 13px; }

/* RIGHT: people photos */
.ap-people {
  background: white;
  border-left: 1px solid rgba(43,46,51,0.1);
  padding: 56px 44px;
  display: flex; flex-direction: column; gap: 22px;
  position: relative;
}
@media (max-width: 720px) { .ap-people { padding: 32px 24px; } }
.ap-people-label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.ap-people-label-k {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.ap-people-label-v {
  font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--nero);
}
.ppl-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.ppl { width: clamp(120px, 14vw, 160px); flex-shrink: 0; }
@media (max-width: 900px) { .ppl { width: calc(33.333% - 8px); } }
@media (max-width: 540px) { .ppl { width: calc(50% - 6px); } }
.ppl {
  text-align: left;
}
.ppl-photo {
  aspect-ratio: 4/5;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(0,0,0,0.18), transparent 60%),
    linear-gradient(135deg, var(--viola), var(--viola-scuro));
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.ppl:nth-child(2) .ppl-photo { background:
    linear-gradient(160deg, rgba(0,0,0,0.18), transparent 60%),
    linear-gradient(135deg, #7A5EA8 0%, #5e2a72 100%); }
.ppl:nth-child(3) .ppl-photo { background:
    linear-gradient(160deg, rgba(0,0,0,0.18), transparent 60%),
    linear-gradient(135deg, #5e2a72 0%, #983C8E 100%); }
.ppl:hover .ppl-photo { transform: translateY(-4px); }
.ppl-photo::after {
  content: "+ Foto";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.65);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500;
}
.ppl .ppl-photo.has-photo,
.ppl:nth-child(2) .ppl-photo.has-photo,
.ppl:nth-child(3) .ppl-photo.has-photo {
  background-color: var(--crema);
  background-size: cover;
  background-position: center 10%;
  background-repeat: no-repeat;
}
.ppl-photo.has-photo::after { content: none; }
.ppl-photo .ppl-chip {
  position: absolute; top: 10px; left: 10px;
  background: rgba(255,255,255,0.92);
  color: var(--viola);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
  z-index: 2;
}
.ppl-name {
  font-family: var(--display);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--nero); margin: 12px 0 0;
  line-height: 1.15;
}
.ppl-role {
  font-size: 12px; color: var(--muted); margin: 4px 0 0;
  line-height: 1.4;
}
.ppl-link {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  color: var(--viola-scuro);
  letter-spacing: 0.01em;
  transition: gap .2s ease, color .2s ease;
}
.ppl-link:hover { gap: 8px; color: var(--viola); }
.ppl-link svg { width: 11px; height: 11px; }

/* ========= DELEGHE — compact 3-column */
.deleghe {
  padding-top: 40px;
  padding-bottom: 30px;
}
.del-head { margin-bottom: 22px; }
.del-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .del-rows { grid-template-columns: 1fr; } }

.del-tabs { display: none; }

.del-row {
  background: white;
  border-radius: 18px;
  border: 1px solid rgba(43,46,51,0.08);
  padding: 18px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease, background-color .35s ease;
  position: relative;
  overflow: hidden;
}
.del-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -18px rgba(43,46,51,0.18);
  border-color: rgba(152,60,142,0.25);
}
.del-row-main {
  display: grid;
  grid-template-columns: 100px 1fr;
  column-gap: 16px;
}

/* Avatar quadrato, non più un ritratto 4/5: con nome+ruolo+link alti in
   tutto ~62px, una foto portrait da 175px lasciava ~56px di vuoto sopra
   e sotto il testo. Un formato compatto riempie la riga senza sprechi. */
.del-row-photo {
  width: 100px;
  aspect-ratio: 1/1;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(0,0,0,0.18), transparent 60%),
    linear-gradient(135deg, var(--viola), var(--viola-scuro));
  background-size: cover;
  background-position: center 18%;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.del-row:nth-child(2) .del-row-photo { background:
    linear-gradient(160deg, rgba(0,0,0,0.18), transparent 60%),
    linear-gradient(135deg, #7A5EA8 0%, #5e2a72 100%); }
.del-row:nth-child(3) .del-row-photo { background:
    linear-gradient(160deg, rgba(0,0,0,0.18), transparent 60%),
    linear-gradient(135deg, #5e2a72 0%, #983C8E 100%); }
.del-row:hover .del-row-photo { transform: translateY(-2px); }
.del-row-photo::after {
  content: "+ Foto";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.6);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500;
}
.del-row-photo.has-photo::after { display: none; }
.del-row-photo.has-photo,
.del-row:nth-child(2) .del-row-photo.has-photo,
.del-row:nth-child(3) .del-row-photo.has-photo {
  background-color: var(--crema);
  background-size: cover;
  background-position: center 8%;
  background-repeat: no-repeat;
}

/* Nome/ruolo/CTA centrati sull'altezza della foto */
.del-row-body {
  display: flex; flex-direction: column;
  gap: 16px;
  justify-content: center;
  min-height: 100%;
}
/* Titolo a piena larghezza SOPRA la riga foto+info (non più nella colonna
   di testo accanto alla foto): con soli ~181px di colonna un titolo lungo
   come "Advisory Board & Academy" andava a capo mentre gli altri no,
   disallineando nome/ruolo/CTA tra le card. A piena larghezza (~341px)
   ci sta comodamente su una riga in ogni caso, quindi la riga foto+info
   ha sempre la stessa struttura/altezza per tutte le card. */
.del-row-title {
  font-family: var(--display);
  font-size: 19px; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.015em;
  color: var(--nero); margin: 0 0 14px;
  transition: color .3s ease;
}
.del-row-title em {
  font-family: var(--serif); font-style: italic;
  font-weight: 400; color: var(--viola);
  transition: color .3s ease;
}
.del-row-manager-info {
  /* nome su una riga propria, ruolo + LinkedIn insieme sulla riga
     sotto: il nome (lunghezza variabile da persona a persona) non
     condivide più la riga con il ruolo, quindi non può più capitare
     che per un nome più lungo la riga si spezzi in un punto diverso
     rispetto alle altre card */
  display: flex; flex-direction: column; gap: 5px;
}
.del-row-name {
  font-family: var(--display);
  font-size: 12.5px; font-weight: 600;
  color: var(--nero);
  letter-spacing: -0.005em;
  line-height: 1.1;
  transition: color .3s ease;
}
.del-row-role-line { display: flex; align-items: center; gap: 8px; }
.del-row-role {
  font-size: 10px; color: var(--muted);
  letter-spacing: 0.08em; font-weight: 600;
  text-transform: uppercase;
  transition: color .3s ease;
}
.del-row-role::before { content: "·"; margin-right: 4px; opacity: 0.6; }
.del-row-linkedin {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600;
  color: var(--viola-scuro);
  letter-spacing: 0.01em;
  transition: gap .2s ease, color .2s ease;
}
.del-row-linkedin:hover { gap: 7px; color: var(--viola); }
.del-row-linkedin svg { width: 10px; height: 10px; }
.del-row-desc {
  font-size: 12.5px; line-height: 1.5;
  color: var(--muted); margin: 0;
  transition: color .3s ease;
}

/* Expandable details */
.del-row-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .55s cubic-bezier(.4,0,.2,1), margin .35s ease, opacity .3s ease;
}
.del-row.is-open .del-row-details {
  max-height: 400px;
  opacity: 1;
  margin-top: 16px;
}
.del-row-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.del-row-list li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--muted);
  transition: color .3s ease;
}
.del-row-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 1.5px;
  background: currentColor; opacity: 0.6;
}

/* CTA: allineata a sinistra come il titolo, dentro il gruppo centrato */
.del-row-foot {
  display: flex;
  justify-content: flex-start;
}
.del-row-cta {
  background: none; border: none; padding: 0;
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  color: var(--viola-scuro);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: 0.02em;
  transition: gap .2s ease, color .3s ease;
}
.del-row:hover .del-row-cta { gap: 10px; color: var(--viola); }
.del-row-cta::after {
  content: "→";
  transition: transform .25s ease;
  display: inline-block;
}
.del-row.is-open .del-row-cta::after { content: "−"; }

@media (max-width: 900px) {
  .del-row-main { grid-template-columns: 90px 1fr; }
  .del-row-photo { width: 90px; }
}

/* Filtro mobile: stesso pattern di "Le aree" (tab attivo = una sola card
   visibile alla volta), invece delle 3 card impilate. Su desktop il
   ".del-tabs" resta nascosto (vedi sopra) e tutte le card restano visibili
   in griglia. Va DOPO le regole base di .del-row per vincere in cascata
   (stessa specificità del display:flex di base, decide l'ordine nel file).
   Advisory (testo più lungo) da solo sulla riga sopra a piena larghezza;
   Eventi e Public Affairs sotto, sulla stessa riga, di uguale dimensione:
   niente più salti di larghezza da un tab all'altro. */
@media (max-width: 900px) {
  .del-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
  }
  .del-tabs .atab[data-del="advisory"] { grid-column: 1 / -1; }
  .del-row { display: none; }
  .del-row.is-tab-active { display: flex; }

  /* Niente più toggle "Scopri di più": su mobile si vede una sola
     delega alla volta (già selezionata dal tab), quindi mostriamo
     direttamente la descrizione invece di nasconderla dietro un click. */
  .del-row-foot { display: none; }
  .del-row-details {
    max-height: none;
    opacity: 1;
    margin-top: 16px;
  }
}

/* ========= FINAL CTA ========= */
.team-cta {
  padding-top: 70px;
  padding-bottom: 60px;
}
.cta-card {
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,0.08) 0, transparent 35%),
    radial-gradient(circle at 82% 75%, rgba(255,255,255,0.06) 0, transparent 40%),
    linear-gradient(135deg, var(--viola) 0%, var(--viola-scuro) 100%);
  color: white;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 64px) clamp(28px, 6vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(122,94,168,0.55);
}
.cta-card::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.085) 1px, transparent 1.4px);
  background-size: 18px 18px;
  opacity: 0.9;
  pointer-events: none;
  border-radius: inherit;
}
.cta-card > * { position: relative; z-index: 1; }
.cta-eye {
  color: rgba(255,255,255,0.75);
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
}
.cta-eye::before { content: ""; width: 22px; height: 1px; background: rgba(255,255,255,0.5); }
.cta-title {
  font-family: var(--display);
  font-size: clamp(27px, 3.6vw, 48px);
  line-height: 1; letter-spacing: -0.035em; font-weight: 600;
  margin: 14px 0 14px; color: white;
}
.cta-title .italic {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: white;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,0.5); text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.cta-sub {
  font-size: 16px; line-height: 1.5; max-width: 720px; margin: 0 auto 26px;
  color: rgba(255,255,255,0.85);
}
.cta-row {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px;
  font-weight: 600; font-size: 15px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cta-btn.primary {
  background: white; color: var(--viola);
  box-shadow: 0 10px 24px -6px rgba(0,0,0,0.28);
  position: relative; overflow: hidden; isolation: isolate;
}
.cta-btn.primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(152,60,142,0.18) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s cubic-bezier(.4,0,.2,1);
  z-index: -1;
}
.cta-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(0,0,0,0.35);
}
.cta-btn.primary:hover::before { transform: translateX(120%); }
.cta-btn.primary svg { transition: transform .25s ease; width: 14px; height: 14px; }
.cta-btn.primary:hover svg { transform: translateX(3px); }
.cta-btn.ghost {
  background: transparent; color: white;
  border: 1.5px solid rgba(255,255,255,0.4);
  box-shadow: inset 0 0 0 0 rgba(255,255,255,0.16);
  transition: color .3s ease, border-color .3s ease, box-shadow .45s cubic-bezier(.4,0,.2,1), transform .25s ease;
}
.cta-btn.ghost::after {
  content: "→"; display: inline-block; transition: transform .25s ease;
  font-weight: 500; margin-left: 2px;
}
.cta-btn.ghost:hover {
  border-color: white;
  box-shadow: inset 0 0 0 60px rgba(255,255,255,0.16);
  transform: translateY(-2px);
}
.cta-btn.ghost:hover::after { transform: translateX(3px); }

/* Hero entrance sequence */
.team-hero .eyebrow,
.team-hero .team-h1,
.team-hero .team-lead,
.team-hero .hero-stats {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.team-hero.is-loaded .eyebrow,
.team-hero.is-loaded .team-h1,
.team-hero.is-loaded .team-lead,
.team-hero.is-loaded .hero-stats {
  opacity: 1;
  transform: none;
}
.team-hero.is-loaded .eyebrow   { transition-delay: 0.10s; }
.team-hero.is-loaded .team-h1   { transition-delay: 0.25s; }
.team-hero.is-loaded .team-lead { transition-delay: 0.95s; }
.team-hero.is-loaded .hero-stats{ transition-delay: 1.10s; }

/* Hero photos: hidden by default, revealed one by one in random order via JS */
.team-hero .mb-photo {
  opacity: 0;
  transition: opacity .55s ease;
}
.team-hero .mb-photo.is-shown {
  opacity: 1;
}