/* ==========================================================================
   Centro Anna Rita Buonincontro — Home
   --------------------------------------------------------------------------
   Solo le sezioni che esistono nella Home. Si carica DOPO css/base.css, che
   contiene token, bottoni, header/menu, righe split, prenota, mappe e footer.
   La numerazione delle sezioni continua quella di base.css.
   Riferimento design: artboard 1728px (Home.dc.html / ref/Home-1.pdf).

   Indice
   04. Hero (lo sfondo, .hero__bg, è in base.css)
   06. Approccio multidisciplinare (B/N)
   07. I numeri
   08. Servizi in evidenza
   09. Flow: decorazioni, specialisti, testimonianze, social
   Responsive
   14. Intro dell'Hero al caricamento
   ========================================================================== */

/* 04. Hero --------------------------------------------------------------- */
.hero { position: relative; height: 900px; background: var(--teal-deep); overflow: hidden; }
.hero__swiper { position: absolute; inset: 44px 0 0; }
.hero__slide { position: relative; overflow: hidden; }
/* Overlay originali del design (il gradiente orizzontale è specchiato come nel file sorgente).
   Applicati alla slide (non allo sfondo) così restano fermi durante il parallax. */
.hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(1, 156, 165, 0) 0%, rgba(1, 156, 165, .4) 100%),
    linear-gradient(-90.206deg, rgba(0, 0, 0, .3) .1%, rgba(0, 0, 0, .5) 50.01%),
    linear-gradient(rgba(0, 100, 106, .2), rgba(0, 100, 106, .2));
}
.hero__content {
  position: relative; z-index: 1;
  padding: 210px 24px 0 calc(clamp(24px, 11.52vw, 199px) + var(--bleed));   /* 254 - 44 = 210 */
  max-width: calc(648px + clamp(24px, 11.52vw, 199px) + var(--bleed) + 24px);
  color: var(--white);
}
.hero__title {
  font-family: var(--ff-head); font-weight: 700;
  font-size: clamp(42px, 5.5vw, 95px); line-height: .9474; /* 95/90 */
  white-space: nowrap;
}
.hero__text { margin-top: 26px; font-size: 20px; line-height: 36px; font-weight: 400; }
.hero__cta { margin-top: 30px; min-width: 431px; }
.hero .hero__dots { position: absolute; z-index: 2; left: calc(clamp(26px, 11.63vw, 201px) + var(--bleed)); top: 697px; bottom: auto; }
.hero__logos { position: absolute; z-index: 2; left: 0; right: 0; top: 764px; height: 89px; overflow: hidden; }
.hero__logos-track {
  height: 100%; padding: 24px var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5.09vw, 88px);
}
.hero__logos img { flex-shrink: 0; height: 41px; width: auto; }
/* Marquee: padding-right = gap, così -50% corrisponde esattamente a un "giro" completo */
.hero__logos.is-marquee .hero__logos-track { justify-content: flex-start; width: max-content; padding: 24px clamp(28px, 5.09vw, 88px) 24px 0; }
.split__icon { height: 41px; width: auto; margin: 4px 0 0 4px; }
.split__title {
  margin-top: 28px;
  font-family: var(--ff-head); font-weight: 700; font-size: clamp(34px, 2.78vw, 48px); line-height: 1.125;
  color: var(--teal);
}

/* 06. Approccio multidisciplinare --------------------------------------- */
.approach {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(560px, 41.49vw, 717px);
  display: flex; align-items: center; justify-content: center;
  padding: 80px 24px;
  background: #1c1c1c;
}
.approach__bg { position: absolute; inset: -14% 0; z-index: -1; }
.approach__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 66.563%;
  filter: grayscale(100%);          /* SEMPRE in bianco e nero */
}
.approach::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .5); }
.approach__inner { max-width: 870px; text-align: center; color: var(--white); display: flex; flex-direction: column; align-items: center; }
.approach__title { font-family: var(--ff-head); font-weight: 700; font-size: clamp(34px, 3.7vw, 64px); line-height: 1.125; letter-spacing: -.02em; }
.approach__text { margin-top: 8px; max-width: 788px; font-size: clamp(18px, 1.39vw, 24px); line-height: 1.5; }
.approach .btn { margin-top: 27px; }

/* 07. I numeri ----------------------------------------------------------- */
.stats { position: relative; overflow: hidden; background: var(--teal); color: var(--white); min-height: 351px; display: flex; align-items: center; justify-content: center; padding: 60px 24px; }
.stats__mark {
  position: absolute; top: 0; left: 51%; width: 829px; height: 350px; opacity: .1; pointer-events: none;
  background: url(../img/brand-mark.webp) 55.303% 0% / 218.674% 269.717% no-repeat;
}
.stats__list { position: relative; display: grid; grid-template-columns: repeat(4, 290px); margin-left: -8px; }
.stats__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.stats__item + .stats__item::before {
  content: ""; position: absolute; left: 0; top: -3px; width: 1px; height: 104px; background: var(--white);
  transform: scaleY(var(--div-scale, 1)); transform-origin: top;
}
.stats__value { font-family: var(--ff-head); font-weight: 600; font-size: clamp(56px, 5.56vw, 96px); line-height: 54px; font-variant-numeric: tabular-nums; }
.stats__label { margin-top: 21px; font-weight: 200; font-size: 24px; line-height: 36px; }

/* 08. Servizi in evidenza ----------------------------------------------- */
.services { position: relative; max-width: var(--container); margin-inline: auto; }
.services__swiper { width: 100%; }
.service-card { position: relative; height: 684px; overflow: hidden; color: var(--white); }
.service-card__img {
  position: absolute; inset: 0; background: center / cover no-repeat;
  transition: transform 1.1s var(--ease);
}
.service-card:hover .service-card__img { transform: scale(1.05); }
.service-card::after {       /* sfumatura inferiore del design */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 359px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .6) 243px, rgba(0, 0, 0, .6) 100%);
}
.service-card__body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 66px; padding: 0 24px 0 clamp(20px, 3.24vw, 56px); }
.service-card__title {
  margin: 0 0 25px 7px; max-width: 306px;
  font-family: var(--ff-head); font-weight: 600; font-size: clamp(28px, 2.08vw, 36px); line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase;
}
.services__dots { display: none; justify-content: center; padding: 24px 0 0; }

/* 09. Flow (specialisti + testimonianze + social) ----------------------- */
.flow { position: relative; overflow: hidden; isolation: isolate; }
@supports (overflow: clip) { .flow { overflow: clip; } }
.flow__gradient {
  position: absolute; left: 0; right: 0; top: var(--grad-top, 1069px); bottom: 0; z-index: -2;
  background: linear-gradient(180deg, #fff 0, var(--mint) 352px);
}
/* Decorazioni in coordinate del design, centrate sull'artboard da 1728px */
.flow__decor { position: absolute; top: 0; bottom: 0; left: 50%; width: 1728px; margin-left: -864px; z-index: -1; pointer-events: none; }
.flow__waves { position: absolute; max-width: none; }
.flow__waves--1 { left: -4352px; top: 71px; width: 6379.8px; height: 2959px; }
.flow__waves--2 { left: 0; top: 0; width: 8388.2px; height: 3605.1px; transform-origin: 0 0; transform: matrix(.706, -.709, .709, .706, -4238, -913.8); }
.flow__glow { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--teal); opacity: .18; filter: blur(110px); transform-origin: 0 0; }
.flow__glow--1 { width: 222.7px; height: 606.2px; transform: matrix(.876, .481, -.481, .876, 1862.9, 1668.7); }
.flow__glow--2 { width: 176.8px; height: 481.2px; transform: matrix(-.938, -.348, -.348, .938, 203.1, 1848.5); }

/* — Specialisti — */
.team { position: relative; padding-top: 255px; text-align: center; }
.team__carousel { position: relative; margin: 39px auto 0; max-width: var(--container); }   /* velature laterali relative al container */
.team__swiper { overflow: hidden; }
.team-card { position: relative; width: 349px; height: 445px; overflow: hidden; text-align: left; color: var(--white); }
.team-card__img {
  position: absolute; inset: 0;
  background: linear-gradient(180.134deg, rgba(0, 0, 0, 0) 50.11%, rgba(31, 41, 55, .5) 99.91%),
              var(--img) center / cover no-repeat;
  filter: grayscale(100%);                  /* default: bianco e nero */
  transition: filter .4s ease, transform .9s var(--ease);
}
.team-card:hover .team-card__img { filter: grayscale(0%); transform: scale(1.04); }  /* colore solo all'hover */
.team-card__body { position: absolute; left: 49px; right: 16px; bottom: 28px; }
.team-card h3 { font-family: var(--ff-head); font-weight: 700; font-size: 32px; line-height: 36px; text-transform: uppercase; }
.team-card p { font-weight: 200; font-size: 24px; line-height: 36px; }
/* velature laterali del design (bianco pieno 73px + sfumatura) */
.team__fade {
  position: absolute; top: -11px; bottom: -4px; z-index: 2; pointer-events: none;
  width: clamp(40px, calc((100% - 1088px) / 2 + 161px), 482px);
  background: linear-gradient(90deg, #fff 0, #fff 15%, rgba(255, 255, 255, .9) 47%, rgba(255, 255, 255, 0) 100%);
}
.team__fade--left { left: 0; }
.team__fade--right { right: 0; transform: scaleX(-1); }
.team__dots { justify-content: center; margin-top: 30px; }
.team__cta { margin-top: 67px; }
.team__cta .btn { margin-inline: auto; }

/* — Testimonianze — */
.reviews { position: relative; height: 1360px; margin-top: 80px; }
.reviews__title { position: absolute; left: 50%; top: 619px; width: 634px; margin-left: -317px; }
.reviews__slider, .reviews__list { display: contents; }   /* trasparenti al layout su tablet/desktop */
.reviews__dots { display: none; }
.review { position: absolute; width: 441px; }
.review--1 { left: calc(50% - 495px); top: 363px; }
.review--2 { left: calc(50% + 278px); top: 418px; }
.review--3 { left: calc(50% - 621px); top: 888px; }
.review--4 { left: calc(50% + 112px); top: 859px; }

.review__bubble {
  position: relative; width: 409px; max-width: 100%;
  padding: 21px 25px 27px 34px; border-radius: 32px;
  background: var(--white); color: var(--white);                 /* color = colore della coda */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .04));
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.review:hover .review__bubble { transform: translateY(-4px); filter: drop-shadow(0 14px 24px rgba(1, 156, 165, .12)); }
.review blockquote { font-size: 18px; line-height: 26px; letter-spacing: .04em; color: var(--muted); }
.review figcaption { margin-top: 24px; font-family: var(--ff-head); font-size: 18px; line-height: 26px; letter-spacing: .04em; color: var(--ink-2); }
.review__tail { position: absolute; width: 59.5px; height: 35.8px; bottom: -34.8px; }
.review--tail-bl .review__tail { left: 53.9px; }
.review--tail-br .review__tail { right: 53.9px; transform: scaleX(-1); }
.review--tail-tl .review__tail { left: 55.1px; top: -34.8px; bottom: auto; transform: scale(-1, -1); }
.review__avatar {
  display: block; width: 73.4px; height: 73.4px; border-radius: 50%;
  background: var(--img, none) center / cover no-repeat, #d9d9d9;
}
.review--tail-bl .review__bubble { margin-left: 32px; }
.review--tail-bl .review__avatar { margin-top: 16px; }
.review--tail-br .review__avatar { margin: 17px 0 0 362px; }
.review--4 { width: 409px; }
.review--4 .review__avatar { margin-left: 121.5px; }
.review--4 .review__bubble { margin-top: 28px; }

/* — Social — */
.social { position: relative; }
.social__swiper { margin-top: 35px; max-width: var(--container); }   /* centrato da Swiper (margin-inline: auto) */
.social-post { display: block; aspect-ratio: 288 / 381; overflow: hidden; background: #dfe9ea; }
.social-post__img {
  display: block; width: 100%; height: 100%;
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
  /* Default in bianco e nero → colore all'hover */
  filter: grayscale(100%);
  transition: filter .4s ease, transform .6s var(--ease);
}
.social-post:hover .social-post__img,
.social-post:focus-visible .social-post__img { filter: grayscale(0%); transform: scale(1.03); }
@media (hover: none) {
  /* Su touch non esiste hover: la slide attiva si colora */
  .social-post.swiper-slide-active .social-post__img { filter: grayscale(0%); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ≥1440 — tutto come il design. Sotto: testimonianze in griglia */
@media (max-width: 1439.98px) {
  .reviews { height: auto; padding: 120px var(--gutter) 100px; display: grid; grid-template-columns: repeat(2, minmax(0, 441px)); justify-content: center; gap: 56px 64px; }
  .reviews__title { position: static; grid-column: 1 / -1; width: auto; margin: 0 0 24px; }
  .review, .review--4 { position: static; width: auto; }
  .review--2, .review--4 { margin-top: 56px; }
  .review--tail-br { display: flex; flex-direction: column; }
  .review--tail-br .review__avatar { margin-left: auto; margin-right: 0; }
  .review__bubble { width: auto; }
  .flow__gradient { top: var(--grad-top, 900px); }
}

/* ≤1279 */
@media (max-width: 1279.98px) {
  .stats__list { grid-template-columns: repeat(4, minmax(0, 220px)); margin-left: 0; }
  .service-card { height: 600px; }
}

/* ≤1023 — tablet */
@media (max-width: 1023.98px) {

  .hero { height: auto; min-height: 760px; }
  .hero__swiper { position: relative; inset: auto; margin-top: 44px; min-height: 716px; }
  .hero__slide { display: flex; flex-direction: column; justify-content: flex-end; height: auto; min-height: 716px; }
  .hero__content { padding: 160px var(--gutter) 190px; max-width: 720px; }
  .hero__title { white-space: normal; }
  .hero .hero__dots { top: auto; bottom: 124px; left: var(--gutter); }
  .hero__logos { top: auto; bottom: 16px; }

  .stats__list { grid-template-columns: repeat(2, minmax(0, 260px)); row-gap: 56px; }
  .stats__item:nth-child(3)::before { display: none; }

  .service-card { height: 560px; }
  .services__dots { display: flex; }

  .team { padding-top: 120px; }
  .team-card { width: 300px; height: 390px; }
  .team-card__body { left: 28px; }
  .team__cta { margin-top: 48px; padding: 0 var(--gutter); }
}

/* ≤767 — mobile */
@media (max-width: 767.98px) {

  .hero { min-height: 0; }
  .hero__swiper, .hero__slide { min-height: 640px; }
  .hero__content { padding: 140px 20px 176px; }
  .hero__text { font-size: 17px; line-height: 28px; margin-top: 20px; }
  .hero__cta { min-width: 0; width: 100%; font-size: 17px; min-height: 60px; padding: 10px 16px; }
  .hero .hero__dots { bottom: 116px; left: 20px; }
  .hero__logos { height: 72px; }
  .hero__logos img { height: 32px; }

  .approach { min-height: 520px; padding: 72px 20px; }
  .approach__inner { width: 100%; min-width: 0; }
  .approach__title { font-size: clamp(26px, 8vw, 34px); overflow-wrap: break-word; }
  .approach__title br { display: none; }

  .stats { padding: 56px 16px; }
  .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .stats__item::before { height: 84px !important; }
  .stats__value { line-height: 48px; }
  .stats__label { font-size: 18px; margin-top: 12px; }

  .service-card { height: 480px; }
  .service-card__body { bottom: 40px; padding: 0 20px; }
  .service-card__title { margin-left: 0; font-size: 28px; }

  .team { padding-top: 88px; }
  .team__carousel { margin-top: 28px; }
  .team-card { width: 264px; height: 340px; }
  .team-card h3 { font-size: 24px; line-height: 30px; }
  .team-card p { font-size: 18px; line-height: 28px; }
  .team-card__body { left: 22px; bottom: 22px; }
  .team__fade { width: 16px; }

  .reviews { grid-template-columns: minmax(0, 441px); padding: 88px 16px 64px; gap: 48px; }
  .review--2, .review--4 { margin-top: 0; }
  .review blockquote { font-size: 16px; line-height: 24px; letter-spacing: .02em; }
  .review--tail-bl .review__bubble { margin-left: 24px; }
  .review--4 .review__avatar { margin-left: 64px; }

  /* Recensioni: slider Swiper (classi aggiunte via JS solo < 768px) */
  .reviews__slider.swiper { display: block; width: 100%; min-width: 0; overflow: hidden; }
  .reviews__list.swiper-wrapper { display: flex; }
  .reviews__slider.swiper .review { height: auto; }
  .reviews__dots.swiper-pagination-bullets { display: flex; justify-content: center; margin-top: -20px; }  /* compensa il gap della griglia */

  .social__swiper { margin-top: 28px; }
}

/* 14. Intro dell'Hero al caricamento -------------------------------------- */
/* Tempi e curva come in base.css (sez. 14), dove si trova anche @keyframes bic-intro-up */
@keyframes bic-intro-fade { from { opacity: 0; } }
.bic-intro .hero__content--intro > * { animation: bic-intro-up 1.1s cubic-bezier(.215, .61, .355, 1) .25s backwards; }
.bic-intro .hero__content--intro > :nth-child(2) { animation-delay: .37s; }
.bic-intro .hero__content--intro > :nth-child(3) { animation-delay: .49s; }
.bic-intro .hero__content--intro > :nth-child(4) { animation-delay: .61s; }
.bic-intro .hero__dots { animation: bic-intro-fade .6s cubic-bezier(.215, .61, .355, 1) .99s backwards; }
.bic-intro .hero__logos-track > * { --intro-y: 14px; animation: bic-intro-up .8s cubic-bezier(.215, .61, .355, 1) .89s backwards; }
.bic-intro .hero__logos-track > :nth-child(2) { animation-delay: .94s; }
.bic-intro .hero__logos-track > :nth-child(3) { animation-delay: .99s; }
.bic-intro .hero__logos-track > :nth-child(4) { animation-delay: 1.04s; }
.bic-intro .hero__logos-track > :nth-child(5) { animation-delay: 1.09s; }
.bic-intro .hero__logos-track > :nth-child(6) { animation-delay: 1.14s; }
.bic-intro .hero__logos-track > :nth-child(n+7) { animation-delay: 1.19s; }

@media (max-width: 1279.98px) {
  /* Senza animazioni (reduced motion / no JS) i loghi scorrono manualmente */
  .hero__logos.is-static-scroll { overflow-x: auto; scrollbar-width: none; }
  .hero__logos.is-static-scroll .hero__logos-track { justify-content: flex-start; width: max-content; }
}