/* ==========================================================================
   SOUND ALCHEMISTS — Struttura delle pagine interne e del footer
   Header, fasce (bande), elenchi di servizi, righe di contatto, informativa,
   profilo, clienti. I componenti interattivi hanno i loro fogli:
   home.css, sections.css, works.css, player.css, form.css, fx.css.
   ========================================================================== */

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;   /* le tre cose (marchio, link, lingua) sulla stessa riga di testo */
  gap: 28px;
  padding: 20px var(--gutter);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-header__brand {
  margin-right: auto;
  font-weight: 600;
  white-space: nowrap;
}
/* Le due barre di link stanno dentro .site-header__menu. Da schermo largo il
   contenitore "sparisce" (display: contents) e i link sono figli diretti
   dell'header; su telefono diventa un'unica striscia scorrevole. */
.site-header__menu { display: contents; }

/* Barra delle SEZIONI della pagina (about, works, contact us…): più sommessa */
.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 22px;
  min-width: 0;
}
.site-header__nav a {
  /* stessa altezza dei link delle pagine (che hanno la sottolineatura), così
     le due barre stanno sulla stessa linea */
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  white-space: nowrap;
  transition: color .3s;
}
.site-header__nav a:hover,
.site-header__nav a.is-active { color: var(--sand); }

/* Barra delle PAGINE (Sound Design · Mix & Master · privacy): in luce piena,
   la pagina in cui ci si trova è sottolineata. Serve anche in home e nella 404. */
.site-header__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}
.site-header__pages a {
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  color: var(--sand);
  white-space: nowrap;
  transition: color .3s, border-color .3s;
}
.site-header__pages a:hover { color: var(--sand-dark); }
.site-header__pages a[aria-current="page"] { border-bottom-color: var(--sand); }
/* Un filetto verticale separa le sezioni dalle pagine (solo se ci sono le sezioni).
   È un bordo e non un elemento vuoto: un figlio senza testo falserebbe
   l'allineamento delle righe di testo dell'header. */
.site-header__nav + .site-header__pages {
  padding-left: 22px;
  border-left: 1px solid var(--faint);
}
.site-header__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--sand);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* Da schermo largo i capitoli (sezioni della pagina) escono dall'header e stanno
   fissi sul bordo sinistro, in verticale, a metà altezza: l'header resta con marchio,
   pagine e lingua. Il nodo resta dentro l'header (nessun cambio di HTML): è
   position: fixed, quindi non occupa spazio nella riga. Con poco margine ai lati
   (1181–1439 px) si vede solo il trattino, la voce attiva e quella sotto il mouse o
   la tastiera mostrano il nome; con più margine i nomi ci sono sempre. */
@media (min-width: 1181px) {
  .site-header__nav {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
  }
  .site-header__nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 0;
    border: 0;
    font-size: 11px;
    letter-spacing: .14em;
  }
  .site-header__nav a::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 1px;
    background: var(--muted);
    transition: width .3s, background-color .3s;
  }
  .site-header__nav a.is-active::before,
  .site-header__nav a:hover::before,
  .site-header__nav a:focus-visible::before { width: 26px; background: var(--sand); }
  /* Margine stretto: il nome è trasparente (resta nel DOM, quindi letto dagli
     screen reader) finché la voce non è attiva, sotto il mouse o in focus. */
  .site-header__nav a { color: transparent; }
  .site-header__nav a.is-active,
  .site-header__nav a:hover,
  .site-header__nav a:focus-visible { color: var(--sand); }
  /* Senza sezioni a fianco non serve più il filetto davanti alle pagine */
  .site-header__nav + .site-header__pages { padding-left: 0; border-left: 0; }
}
@media (min-width: 1440px) {
  .site-header__nav a { color: var(--muted); }
  .site-header__nav a.is-active,
  .site-header__nav a:hover,
  .site-header__nav a:focus-visible { color: var(--sand); }
}

/* Sotto ~1180 px le sezioni non stanno più accanto alle pagine: scendono su una
   seconda riga (scorrevole se serve). Riga 1: marchio · pagine · lingua. */
@media (max-width: 1180px) {
  .site-header__inner { flex-wrap: wrap; gap: 10px 28px; padding-top: 18px; padding-bottom: 14px; }
  .site-header__nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .site-header__nav::-webkit-scrollbar { display: none; }
  .site-header__nav + .site-header__pages { padding-left: 0; border-left: 0; }
}

/* Telefono: marchio e lingua in alto, sotto UNA striscia scorrevole con prima le
   pagine e poi le sezioni (la voce attiva viene portata in vista da nav.js). */
@media (max-width: 760px) {
  .site-header__inner { gap: 10px 18px; padding: 16px var(--gutter) 12px; }
  .site-header__menu {
    display: flex;
    align-items: center;
    order: 3;
    flex: 1 0 100%;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .site-header__menu::-webkit-scrollbar { display: none; }
  .site-header__pages { flex: 0 0 auto; flex-wrap: nowrap; gap: 22px; }
  .site-header__menu .site-header__pages { order: -1; }
  .site-header__nav {
    order: 0;
    flex: 0 0 auto;
    overflow: visible;
    padding: 0 0 0 22px;
    border-left: 1px solid var(--faint);
  }
  /* senza sezioni (privacy) la striscia è solo le pagine: niente filetto */
  .site-header__pages:only-child { padding: 0; }
}
/* Marchio, lingua e striscia più stretti sotto i 480 px: le tre pagine entrano
   intere nei 320 px e dopo l'ultima spunta l'inizio delle sezioni (invito a scorrere) */
@media (max-width: 480px) {
  .site-header__inner { gap: 10px 12px; font-size: 11px; letter-spacing: .1em; }
  .site-header__menu,
  .site-header__pages { gap: 16px; }
  .site-header__nav { gap: 16px; padding-left: 16px; }
}

/* --- Fasce ---------------------------------------------------------------- */
.band {
  background: var(--bg);
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--header-h);
}
.band--alt { background: var(--alt); }
.band--first { border-top-color: transparent; }
.band__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 112px var(--gutter);
  display: flex;
  justify-content: center;
}
.band__col {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (max-width: 640px) {
  .band__inner { padding-top: 72px; padding-bottom: 72px; }
}

/* --- Elenco numerato dei servizi ------------------------------------------ */
.services {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}
.service {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px 16px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.service__n {
  padding-top: 9px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--faint);
}
.service__body { display: flex; flex-direction: column; gap: 8px; }
.service__t {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -.015em;
  line-height: 1.2;
}
.service__d {
  max-width: 560px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 480px) {
  .service { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 10px; }
}

/* --- Righe di contatto ---------------------------------------------------- */
.contact-rows { border-top: 1px solid var(--line); }
.contact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 8px 24px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.contact-row dt {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.contact-row dd {
  grid-column: span 2;
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 20px);
  word-break: break-word;
}

/* --- Documento (informativa privacy) -------------------------------------- */
.doc { border-top: 1px solid var(--line); }
.doc__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.doc__t {
  flex: 0 1 240px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}
.doc__d {
  flex: 1 1 380px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}
.pending {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- Profilo (Engineers) ---------------------------------------------------- */
.profile {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 40px 56px;
}
.profile__fig {
  flex: 0 1 340px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--card);
}
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile__cap {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.profile__body {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.profile__head { display: flex; flex-direction: column; gap: 10px; }
.profile__name {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1;
}
.profile__role {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand-dark);
}
.profile__bio {
  max-width: 620px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
/* Il pulsante scende in fondo alla colonna, allineato al bordo della foto */
.profile__cta { align-self: flex-start; margin-top: auto; }

/* --- Clienti ---------------------------------------------------------------- */
.clients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.client {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: 10% 12%;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.client img { max-width: 100%; max-height: 100%; object-fit: contain; }
.client__name {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted);
  text-wrap: balance;
}

/* --- Pagina 404 --------------------------------------------------------------- */
.notfound { min-height: 70vh; display: flex; align-items: center; }
.notfound .band__col { gap: 24px; }
.notfound .h2 { font-size: clamp(36px, 5vw, 72px); }

/* --- Footer --------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.site-footer__grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 32px 24px;
  align-items: start;
}
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-footer__tag {
  max-width: 260px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.site-footer__label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.site-footer__col a,
.site-footer__col span.site-footer__text {
  font-size: 13px;
  white-space: nowrap;
}
.site-footer__text { color: var(--muted); }
.site-footer__bar {
  max-width: 1200px;
  margin: 44px auto 0;
  padding: 18px var(--gutter) 48px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 32px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.site-footer__legal span { white-space: nowrap; }
.site-footer__tools { display: flex; align-items: center; gap: 24px; }
.site-footer__tools a { color: var(--muted); }
.site-footer__tools a:hover { color: var(--sand); }