/* ================= FONT (ospitato sul sito) ================= */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ================= COLORI E MISURE ================= */
:root {
  --testo: #332E3B;
  --grigio: #77737D;
  --grigio-chiaro: #9A96A0;
  --segnaposto-testo: #B4B1B9;
  --filetto: #E7E5EA;
  --errore: #CC4233;
  --fondo: #FFFFFF;
  --segnaposto: #EEECF0;

  --margine: 28px;
  --spazio-colonne: 49px;
  --colonne: minmax(0, 470fr) minmax(0, 865fr);
  --colonne-righe: minmax(0, 300fr) minmax(0, 565fr);
}

/* ================= BASE ================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 400;
  color: var(--testo);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
body.menu-aperto, body.popup-aperto { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
ol, ul { list-style: none; }
:focus-visible { outline: 1px solid var(--testo); outline-offset: 3px; }

.salta { position: absolute; left: -9999px; }
.salta:focus { left: 16px; top: 16px; z-index: 100; background: var(--fondo); padding: 8px 12px; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.solo-mobile, .solo-mobile-blocco { display: none; }
[hidden] { display: none !important; }
.grigio { color: var(--grigio-chiaro); }
.sep { margin-inline: .9em; }

/* ================= TIPOGRAFIA ================= */
.etichetta {
  font-weight: 500;
  font-size: 11px;
  line-height: 1.27;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grigio);
}
.etichetta--scura { color: var(--testo); }
.titolo {
  font-weight: 300;
  font-size: clamp(32px, 3.06vw, 44px);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.frase-grande {
  font-weight: 300;
  font-size: clamp(36px, 3.61vw, 52px);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.testo { font-size: 15px; line-height: 1.5; }

/* ================= GRIGLIA A DUE COLONNE ================= */
.doppia {
  display: grid;
  grid-template-columns: var(--colonne);
  column-gap: var(--spazio-colonne);
  padding-inline: var(--margine);
}
.righe > * { border-top: 1px solid var(--filetto); }

/* ================= BARRA ================= */
.barra {
  position: fixed;
  z-index: 50;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 142px 1fr auto;
  align-items: center;
  column-gap: 28px;
  padding: 26px var(--margine);
}
.barra__nome { font-weight: 500; font-size: 15px; white-space: nowrap; }
.barra__link { display: flex; gap: 28px; }
.barra__link a:hover, .piede a:hover { color: var(--grigio); }
.barra__link a[aria-current="page"] { color: var(--testo); }
.barra__info { white-space: nowrap; }
.barra__sezione, .barra__menu { display: none; }
.barra__sezione::before { content: "·"; margin-right: .9em; }
.barra__sezione:empty { display: none !important; }

@media (min-width: 761px) {
  /* chiusa in pillola dopo lo scroll */
  .barra.compatta {
    right: auto; top: 16px; left: 16px;
    padding: 12px 16px;
    grid-template-columns: auto auto;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px var(--filetto);
    animation: compare .25s ease;
  }
  .barra.compatta .barra__info,
  .barra.compatta .barra__link { display: none; }
  .barra.compatta .barra__sezione { display: block; }
  /* si riapre passandoci sopra */
  .barra.compatta:hover, .barra.compatta:focus-within { grid-template-columns: auto auto; }
  .barra.compatta:hover .barra__link,
  .barra.compatta:focus-within .barra__link { display: flex; }
  .barra.compatta:hover .barra__sezione,
  .barra.compatta:focus-within .barra__sezione { display: none; }
}
@keyframes compare { from { opacity: 0; } to { opacity: 1; } }

/* ================= MENU MOBILE ================= */
.menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  padding: 22px 16px 24px;
  background: var(--fondo);
  overflow-y: auto;
  opacity: 0;
  transition: opacity .2s ease;
}
.menu[hidden] { display: none; }
.menu.aperto { opacity: 1; }
.menu__testa { display: flex; justify-content: space-between; font-weight: 500; font-size: 15px; }
.menu__voci { margin-top: 87px; border-top: 1px solid var(--filetto); }
.menu__voci li {
  border-bottom: 1px solid var(--filetto);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease;
  transition-delay: calc(var(--i) * 60ms + 80ms);
}
.menu.aperto .menu__voci li { opacity: 1; transform: none; }
.menu__voci a {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 15px 0 25px;
  font-weight: 300; font-size: 40px; line-height: 1.08; letter-spacing: -.01em;
}
.menu__voci a .etichetta { margin-top: 6px; }
.menu__contatti { margin-top: auto; padding-top: 48px; }
.menu__riga { border-top: 1px solid var(--filetto); padding: 18px 0 20px; font-size: 17px; }
.menu__riga .etichetta { margin-bottom: 6px; }
.menu__profili { display: flex; gap: 28px; }
.menu__piede { margin-top: 40px; }

/* ================= COPERTINA ================= */
.copertina {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-bottom: 6vh;
  background: var(--fondo);
  box-shadow: 0 4px 35px rgba(0, 0, 0, .05);
}
/* L'animazione arriva da Figma come video: sfondo bianco, centrato, mai tagliato */
.copertina__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--fondo);
  mix-blend-mode: multiply;
  pointer-events: none;
}
html:not(.js) .copertina__video { display: none; }
/* La frase in testo resta per lettori di schermo e motori di ricerca */
.js .copertina__frase { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.copertina__frase {
  width: 100%;
  font-weight: 500;
  font-size: min(80px, 5.556vw);
  line-height: 1.08;
  letter-spacing: -.01em;
  padding-left: 2.4em;
}
.copertina__frase .riga { display: block; }
.copertina__frase .riga--2 { margin-left: 4.4375em; margin-top: .11em; }

/* ================= CHI SONO ================= */
.chi-sono { padding-top: 120px; }
.chi-sono .frase-grande { padding-inline: var(--margine); max-width: calc(980px + 2 * var(--margine)); }
.riga-r { display: block; }
.chi-sono__dettagli { margin-top: 96px; align-items: start; }
.in-breve > div {
  display: grid; grid-template-columns: 150px 1fr;
  border-top: 1px solid var(--filetto);
  padding: 12px 0 16px;
}
.in-breve dt { padding-top: 4px; }
.in-breve dd { font-size: 15px; line-height: 1.4; }
.bio { max-width: 600px; padding-top: 10px; font-size: 17px; line-height: 1.5; }
.bio p + p { margin-top: .65em; }
.bio__apertura { font-weight: 500; }

/* ================= LAVORI ================= */
.lavori {
  display: grid;
  grid-template-columns: var(--colonne);
  column-gap: var(--spazio-colonne);
  row-gap: 12px;
  padding: 100px var(--margine) 0;
}
.lavori__colonna {
  grid-column: 1;
  grid-row: 1 / span 5;
  align-self: start;
  position: sticky; top: 96px; z-index: 1;
  background: var(--fondo);
  padding-bottom: 24px;
}
.lavori__colonna [data-lavoro-nome],
.lavori__descrizione,
.lavori__didascalia { transition: opacity .2s ease; }
.lavori__colonna.cambia [data-lavoro-nome],
.lavori__colonna.cambia .lavori__descrizione,
.lavori__colonna.cambia .lavori__didascalia { opacity: 0; }
.lavori__descrizione { margin-top: 180px; max-width: 420px; min-height: 4.5em; }
/* su desktop la didascalia sta nella colonna fissa e cambia con il progetto */
.lavori__didascalia { display: flex; flex-direction: column; gap: 6px; margin-top: 105px; }
@media (min-width: 761px) {
  .lavoro .lavoro__didascalia { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.lavoro {
  grid-column: 1 / -1;
  grid-row: var(--r);
  display: grid;
  grid-template-columns: var(--colonne);
  column-gap: var(--spazio-colonne);
}
.lavoro__video { grid-column: 2; grid-row: 1; display: block; aspect-ratio: 16 / 9; background: var(--fondo); overflow: hidden; }
.lavoro__video video { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lavoro__didascalia {
  grid-column: 1; grid-row: 1;
  align-self: end;
  display: flex; flex-direction: column; gap: 6px;
}
.lavoro__titolo { font-size: 14px; line-height: 1.3; }
a.lavoro__didascalia:hover .lavoro__titolo { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Zen Zone: animazione in codice ---- */
.zen {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden;
  container-type: inline-size;
  background: var(--fondo);
}
.zen__fondo, .zen__velo { position: absolute; inset: 0; background: var(--fondo); }
.zen__velo { opacity: 0; }
.zen__cerchio {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%; /* è un cerchio, non un angolo */
  transform: translate(-50%, -50%) scale(.001);
  will-change: transform, filter;
}
.zen__logo {
  position: absolute; left: 50%; top: 50%;
  width: 30cqw; height: auto;
  translate: -50% -50%;
  opacity: 0;
}
html:not(.js) .zen__fondo { background: #E3F0E0; }
html:not(.js) .zen__logo { opacity: 1; }

/* ================= SERVIZI ================= */
.servizi { padding-top: 200px; }
.servizi__intro { margin-top: 40px; max-width: 400px; }
.riga-servizio {
  display: grid; grid-template-columns: var(--colonne-righe);
  padding: 20px 0 36px;
}
.riga-servizio h3 { font-weight: 500; font-size: 17px; line-height: 1.24; }
.per-chi { margin-top: 6px; padding-right: 50px; font-size: 15px; line-height: 1.4; color: var(--grigio); }
.riga-servizio__dx .etichetta { margin-top: 14px; }

/* ================= CONTATTI (home) ================= */
.contatti { padding-top: 200px; }
.riga-contatto {
  display: grid; grid-template-columns: var(--colonne-righe);
  align-items: baseline;
  padding: 16px 0 36px;
}
.valore { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 32px; font-size: 22px; }
.valore a:hover { color: var(--grigio); }
.copia { margin-left: -12px; }

/* ================= FOOTER ================= */
.piede {
  display: flex; justify-content: space-between; gap: 24px;
  margin: 160px var(--margine) 0;
  padding: 24px 0 22px;
  border-top: 1px solid var(--filetto);
}
.piede--pagina { margin-top: 120px; }

/* ================= PAGINE (Contatti, Privacy) ================= */
.pagina { padding-top: 200px; align-items: start; }
.pagina .titolo { font-size: clamp(32px, 3.06vw, 44px); }
.pagina__intro { margin-top: 33px; max-width: 420px; font-size: 17px; line-height: 1.5; }

/* ---- Privacy ---- */
.informativa > div {
  display: grid; grid-template-columns: var(--colonne-righe);
  padding: 22px 0 34px;
}
.informativa dt { padding-top: 5px; }
.informativa dd { font-size: 17px; line-height: 1.5; }
.informativa a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---- Contatti: colonna sinistra ---- */
.diretto { margin-top: 95px; }
.diretto > .etichetta { margin-bottom: 18px; }
.diretto__riga { position: relative; border-top: 1px solid var(--filetto); padding: 16px 0 20px; }
.diretto__riga .etichetta:first-child { margin-bottom: 8px; }
.diretto__valore { display: flex; flex-wrap: wrap; column-gap: 32px; font-size: 19px; }
.diretto__valore a:hover { color: var(--grigio); }
.diretto .copia { position: absolute; top: 16px; right: 8px; margin: 0; }

/* ---- Contatti: form ---- */
.form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.campo { grid-column: 1 / -1; display: block; margin-bottom: 36px; }
.campo--meta { grid-column: auto; }
.campo__etichetta { display: block; }
.campo input[type="text"],
.campo input[type="email"],
.campo textarea {
  display: block; width: 100%;
  margin-top: 16px;
  padding: 0 0 12px;
  border: 0; border-bottom: 1px solid var(--filetto);
  background: none;
  font: inherit; font-weight: 300; font-size: 22px; line-height: 1.3;
  color: var(--testo);
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.campo textarea { height: 146px; resize: none; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--segnaposto-testo); opacity: 1; }
.campo input:focus, .campo textarea:focus { border-bottom-color: var(--testo); }
.campo__aiuto { display: none; margin-top: 8px; color: var(--errore); }
.campo.errore .campo__etichetta { color: var(--errore); }
.campo.errore .campo__aiuto { display: block; }

.scelte { border: 0; grid-column: 1 / -1; margin-bottom: 41px; }
.scelte legend { padding: 0; }
.scelte__opzioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.scelta { position: relative; }
.scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelta span {
  display: block;
  padding: 9px 16px 10px;
  border: 1px solid var(--filetto);
  font-size: 15px; line-height: 1.3;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.scelta span:hover { border-color: var(--grigio-chiaro); }
.scelta input:checked + span { background: var(--testo); border-color: var(--testo); color: var(--fondo); }
.scelta input:focus-visible + span { outline: 1px solid var(--testo); outline-offset: 3px; }

.consenso { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 12px; margin-top: -8px; font-size: 13px; line-height: 1.4; color: var(--grigio); cursor: pointer; }
.consenso input {
  flex: none;
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -1px;
  border: 1px solid var(--testo);
  background: var(--fondo) center / 12px no-repeat;
  cursor: pointer;
}
.consenso input:checked {
  background-color: var(--testo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E");
}
.consenso a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.consenso.errore, .consenso.errore a { color: var(--errore); }
.consenso.errore input { border-color: var(--errore); }

.bottone {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 18px 28px 19px;
  background: var(--testo); color: var(--fondo);
  font-weight: 500; font-size: 16px; line-height: 1.2;
  transition: opacity .15s ease;
}
.bottone:hover { opacity: .88; }
.bottone[disabled] { opacity: .6; cursor: wait; }
.form .bottone { grid-column: 1 / -1; justify-self: start; margin-top: 28px; }
.trappola { position: absolute; left: -9999px; }

/* ---- Pop-up ---- */
.velo-popup {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(51, 46, 59, .35);
}
.velo-popup[hidden] { display: none; }
.popup { width: min(520px, 100%); padding: 36px; background: var(--fondo); }
.popup__titolo { margin-top: 16px; font-weight: 300; font-size: 34px; line-height: 1.1; letter-spacing: -.01em; }
.popup__testo { margin-top: 14px; font-size: 16px; line-height: 1.5; }
.popup__azioni { display: flex; align-items: center; gap: 32px; margin-top: 28px; }
.popup .bottone { padding: 16px 24px 17px; }

/* ---- Messaggio inviato ---- */
.inviato { padding-top: 360px; min-height: calc(100vh - 80px); }
.inviato[hidden] { display: none; }
.inviato__frase {
  --corpo: min(64px, 4.444vw);
  font-weight: 500; font-size: var(--corpo); line-height: 1.08; letter-spacing: -.01em;
  padding-left: calc(var(--corpo) * 3);
}
.inviato__frase span { display: block; }
.inviato__frase .riga--2 { margin-left: calc(var(--corpo) * 5.17); margin-top: .375em; }
.inviato__link {
  display: inline-block;
  margin-top: 48px;
  margin-left: calc(min(64px, 4.444vw) * 8.17);
  font-size: 17px;
}
.inviato__link:hover { color: var(--grigio); }

/* ================= COMPARSA AL SCROLL ================= */
.js .rivela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .rivela.visibile { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .rivela { opacity: 1; transform: none; transition: none; }
  .menu, .menu__voci li { transition: none; }
  .barra.compatta { animation: none; }
}

/* ================= MOBILE ================= */
@media (max-width: 760px) {
  :root { --margine: 16px; }
  .solo-desktop { display: none !important; }
  .solo-mobile { display: inline; }
  .solo-mobile-blocco { display: block; }
  .solo-desktop-blocco { display: none; }

  .barra { grid-template-columns: auto 1fr auto; column-gap: 12px; padding: 22px 16px 14px; }
  .barra__link, .barra__info { display: none; }
  .barra__menu { display: block; font-weight: 500; font-size: 15px; }
  .barra.compatta {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .barra.compatta .barra__sezione { display: block; }

  .titolo, .frase-grande { font-size: 30px; line-height: 1.1; }

  .copertina { padding-bottom: 0; }
  .copertina__frase { font-size: min(44px, 11.28vw); padding-left: 24px; }
  .copertina__frase .riga--2 { margin-left: 2.386em; margin-top: 1.1em; }

  .doppia { display: block; }
  .chi-sono { padding-top: 64px; }
  .riga-r { display: inline; }
  .chi-sono__dettagli { margin-top: 48px; }
  .in-breve > div { grid-template-columns: 120px 1fr; }
  .bio { margin-top: 40px; padding-top: 0; font-size: 16px; }

  .lavori { display: block; padding-top: 96px; }
  .lavori__colonna { position: static; background: none; padding-bottom: 28px; }
  .lavoro { display: block; }
  .lavoro + .lavoro { margin-top: 40px; }
  .lavoro__didascalia { margin-top: 12px; }

  .servizi { padding-top: 96px; }
  .servizi__intro { margin-top: 20px; }
  .servizi .righe { margin-top: 32px; }
  .riga-servizio { display: block; padding: 17px 0 28px; }
  .per-chi { padding-right: 0; margin-top: 4px; }
  .riga-servizio__dx { margin-top: 12px; }
  .riga-servizio__dx .etichetta { margin-top: 12px; }

  .contatti { padding-top: 100px; }
  .contatti .righe { margin-top: 28px; }
  .riga-contatto { display: block; position: relative; padding: 16px 0 26px; }
  .riga-contatto .etichetta:first-child { margin-bottom: 6px; }
  .valore { font-size: 19px; column-gap: 32px; }
  .copia { position: absolute; top: 16px; right: 18px; margin: 0; }

  .piede { margin-top: 96px; padding-top: 20px; }
  .piede .etichetta { line-height: 1.6; }

  /* Pagine */
  .pagina { padding-top: 120px; }
  .pagina .titolo { font-size: 34px; line-height: 1.1; }
  .pagina__intro { margin-top: 24px; font-size: 16px; }
  .informativa { margin-top: 48px; }
  .informativa > div { display: block; padding: 16px 0 28px; }
  .informativa dt { padding-top: 0; margin-bottom: 8px; }
  .informativa dd { font-size: 16px; }

  .form { display: block; margin-top: 64px; }
  .campo { margin-bottom: 30px; }
  .campo input[type="text"], .campo input[type="email"], .campo textarea { font-size: 19px; margin-top: 14px; }
  .campo textarea { height: 120px; }
  .scelte { margin-bottom: 36px; }
  .scelte__opzioni { margin-top: 14px; }
  .consenso { margin-top: 0; }
  .form .bottone { display: flex; width: 100%; justify-content: center; margin-top: 28px; }
  .diretto { margin-top: 110px; }
  .diretto__valore { font-size: 18px; }
  .diretto .copia { right: 8px; }

  .popup { padding: 24px 24px 28px; }
  .popup__titolo { font-size: 28px; }
  .popup__testo { font-size: 15px; }

  .inviato { padding: 280px 16px 0; min-height: 0; }
  .inviato__frase { --corpo: 36px; padding-left: 0; }
  .inviato__frase .riga--2 { margin-left: 40px; margin-top: .44em; }
  .inviato__link { margin-left: 40px; margin-top: 40px; font-size: 15px; }
  .piede--pagina { margin-top: 96px; }
}