/* Menu Mediatel: visibile nella prima schermata e non persistente durante lo scroll. */
header {
  position: absolute !important;
}

/* Su computer e tablet orizzontali, tutte le voci restano nella barra blu. */
@media (min-width: 901px) {
  header {
    height: 70px;
    padding: 0 14px;
    top: 12px;
    left: 12px;
    right: 12px;
    max-width: calc(100vw - 24px);
  }

  header nav,
  header.scrolled nav,
  header:not(.scrolled) nav {
    position: static;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(7px, 1vw, 16px);
    max-height: none;
    padding: 0;
    overflow: visible;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: clamp(9px, .82vw, 13px);
  }

  header nav a,
  header.scrolled nav a,
  header:not(.scrolled) nav a {
    border: 0;
    padding: 8px 0;
  }

  header .menu {
    display: none !important;
  }

  header .brand img {
    width: clamp(128px, 13vw, 188px) !important;
  }

  /* La testata lascia uno spazio sicuro sotto alla barra di navigazione. */
  .hero {
    padding-top: 220px !important;
    padding-bottom: 90px !important;
  }
}

/* Chi siamo: tre aree distinte, senza sovrapposizioni tra testo e fotografia. */
@media (min-width: 1200px) {
  .story .sectionHead {
    width: 24vw !important;
    max-width: 390px !important;
    top: 14vh !important;
    left: 2.5vw !important;
  }

  .storySubtitle {
    width: 23vw !important;
    max-width: 375px !important;
    top: 39vh !important;
    left: 2.5vw !important;
  }

  .story .storyPhoto {
    width: min(40vw, 640px) !important;
    height: min(82vh, 820px) !important;
    top: 4vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .story .storyPhoto img {
    object-fit: contain !important;
    transform: none !important;
  }

  .storyCopy {
    width: 25vw !important;
    max-width: 440px !important;
    top: 14vh !important;
    right: 2.5vw !important;
  }
}

/* Nei formati intermedi la sezione diventa verticale e resta leggibile. */
@media (min-width: 901px) and (max-width: 1199px) {
  .story {
    height: auto !important;
    max-height: none !important;
    min-height: 100svh !important;
    padding: 120px 5vw 60px !important;
    overflow: visible !important;
  }

  .story .sectionHead,
  .storySubtitle,
  .story .storyPhoto,
  .storyCopy,
  .story .numbers {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  .storySubtitle {
    margin-top: 20px !important;
  }

  .story .storyPhoto {
    height: min(68vh, 640px) !important;
    margin-top: 32px !important;
    margin-bottom: 28px !important;
  }

  .story .storyPhoto img {
    object-fit: contain !important;
    transform: none !important;
  }

  .storyCopy {
    margin-top: 0 !important;
  }

  .story .numbers {
    margin-top: 28px !important;
  }
}

@media (max-width: 900px) {
  .hero {
    padding-top: 165px !important;
  }

  .story .storyPhoto img {
    object-fit: contain !important;
    transform: none !important;
  }

  .teamSelector {
    grid-template-rows: none !important;
    grid-auto-rows: minmax(68px, auto) !important;
  }
}

/* Revisione generale di allineamenti, ancoraggi e contenuti. */
html {
  scroll-padding-top: 100px;
}

section[id] {
  scroll-margin-top: 100px;
}

header {
  position: fixed !important;
  z-index: 1000 !important;
}

.story .storyPhoto > img {
  object-fit: cover !important;
  object-position: center center !important;
}

@media (min-width: 1200px) {
  .storyCopy {
    width: 27vw !important;
    max-width: 480px !important;
    top: 9vh !important;
    right: 2vw !important;
    padding: clamp(22px, 2vw, 34px) !important;
    overflow: visible !important;
  }

  .storyCopy .big {
    font-size: clamp(18px, 1.25vw, 22px) !important;
    line-height: 1.42 !important;
  }

  .storyCopy p:not(.big) {
    font-size: clamp(15px, 1vw, 18px) !important;
    line-height: 1.55 !important;
  }

  .storyCopy .values {
    gap: 8px !important;
    margin-top: 18px !important;
  }
}

.solutions {
  height: auto !important;
  min-height: 100svh !important;
  padding-top: 130px !important;
  padding-bottom: 90px !important;
}

.solutionsLab {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr) !important;
  gap: clamp(24px, 4vw, 64px) !important;
  align-items: stretch !important;
  width: min(94vw, 1500px) !important;
  margin: 50px auto 0 !important;
}

.solutionNav,
.solutionStage {
  width: 100% !important;
}

.solutionNavItem .solutionCardCta {
  display: none !important;
}

.solutionNavSelect {
  min-height: 112px !important;
  padding: 22px 24px !important;
}

.solutionNavSelect span {
  min-width: 0 !important;
}

.solutionStage {
  min-height: 620px !important;
  padding: clamp(36px, 5vw, 72px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.solutionStageLogo {
  width: min(310px, 70%) !important;
  max-height: 110px !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin-bottom: 26px !important;
  background: #fff !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
}

.solutionStage h3 {
  max-width: 760px !important;
  font-size: clamp(34px, 3.3vw, 60px) !important;
  line-height: 1.02 !important;
}

.solutionStage p {
  max-width: 780px !important;
  font-size: clamp(17px, 1.25vw, 21px) !important;
  line-height: 1.65 !important;
}

.solutionStage ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 24px !important;
  margin: 28px 0 !important;
}

.solutionStage li {
  font-size: 16px !important;
  line-height: 1.45 !important;
}

.solutionMainCta {
  margin-top: 8px !important;
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 84px;
  }

  section[id] {
    scroll-margin-top: 84px;
  }

  .solutionsLab {
    grid-template-columns: 1fr !important;
  }

  .solutionStage {
    min-height: auto !important;
    padding: 32px 24px !important;
  }

  .solutionStage ul {
    grid-template-columns: 1fr !important;
  }
}

/* La griglia accoglie i quattro nuovi profili mantenendo due colonne. */
@media (min-width: 901px) {
  .teamSelector {
    grid-template-rows: repeat(7, minmax(0, 1fr)) !important;
  }
}

/* Tutti i ritratti del team condividono lo stesso fondo e lo stesso taglio. */
.teamFocusPhoto,
.teamSelector img {
  background: #fff !important;
}

.teamFocusPhoto img {
  object-fit: cover !important;
  object-position: top center !important;
}

/* La foto grande di Silvia mostra volto e mani, senza il quadro in alto. */
.teamFocusPhoto img[alt="Silvia Mallaci"] {
  object-position: center bottom !important;
}

.teamFocusPhoto img.silviaFocus {
  object-position: center bottom !important;
}

/* Chi siamo: le due fotografie hanno lo stesso formato e restano affiancate. */
.story .storyPhoto {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
}

.story .storyPhoto > img {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  border-radius: 30px !important;
}

/* La foto singola di Sandro conserva il formato orizzontale originale. */
.story .storyPhoto > img.storyPhotoSecondary {
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  align-self: center !important;
}

.story .storyPhoto > span {
  position: relative !important;
  inset: auto !important;
  order: -1 !important;
  width: 100% !important;
  z-index: 3 !important;
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .story .storyPhoto {
    grid-template-columns: 1fr !important;
  }
}

/* Nuovo assetto Chi siamo: Sandro sotto il titolo, direzione di nuovo centrale. */
.storySandroWindow {
  width: 100%;
  margin-top: 22px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}

.storySandroWindow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.story .storyPhoto {
  display: block !important;
  grid-template-columns: none !important;
  overflow: hidden !important;
  background: #fff !important;
}

.story .storyPhoto > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: inherit !important;
}

.story .storyPhoto > span {
  position: absolute !important;
  inset: auto auto 24px 24px !important;
  order: initial !important;
  width: auto !important;
  grid-column: auto;
}

@media (min-width: 1200px) {
  .story .storyPhoto {
    width: min(40vw, 640px) !important;
    height: min(82vh, 820px) !important;
    top: 4vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .story .storyPhoto {
    height: min(68vh, 640px) !important;
  }
}

@media (max-width: 900px) {
  .story .storyPhoto {
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }

  .storySandroWindow {
    max-width: 680px;
  }
}

/* La foto centrale riempie completamente il riquadro bianco. */
.story .storyPhoto > img {
  object-fit: cover !important;
  object-position: center center !important;
}