/* ==========================================================================
   Sezioni e pattern di pagina (condivisi da tutte le pagine)
   Breakpoint: 48em (768) tablet · 64em (1024) laptop · 80em (1280) desktop
   ========================================================================== */

/* Sezioni bianche consecutive: un solo spazio, il filetto fa da separatore */
.section:not(.section--alt, .section--dark) + .section:not(.section--alt, .section--dark) {
  padding-top: 0;
}

/* --- Testate di sezione --------------------------------------------------- */

.section-head__title {
  max-width: 21em;
}

.section-head__intro {
  margin-top: var(--space-6);
}

.section-head__title span,
.t-lines span {
  display: block;
}

/* Titolo a sinistra, introduzione a destra (colonna 7) */
@media (min-width: 64em) {
  .section-head--split,
  .section-head--wide {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .section-head--split { row-gap: var(--section-head-gap); }

  .section-head--split > .eyebrow,
  .section-head--wide > .eyebrow { grid-column: 1 / -1; }

  .section-head--split > .eyebrow + * { margin-top: 0; }
  .section-head--split .section-head__title { grid-column: 1 / span 6; }
  .section-head--split .section-head__intro { grid-column: 7 / span 5; margin-top: 0; }

  /* Titolo ampio, introduzione sfalsata a destra sotto al titolo */
  .section-head--wide .section-head__title { grid-column: 1 / span 10; max-width: none; }
  .section-head--wide .section-head__intro { grid-column: 7 / span 5; margin-top: var(--space-7); }
}

/* Chiusura di sezione: frase + link */
.section-foot {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--rule) solid var(--c-rule);
}

.section-foot__close {
  max-width: 24em;
}

@media (min-width: 64em) {
  .section-foot {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
    margin-top: var(--space-9);
  }

  .section-foot__close { grid-column: 1 / span 8; }
  .section-foot__cta { grid-column: 10 / span 3; justify-self: end; }
}

.section-cta {
  margin-top: var(--space-6);
}

/* --- Hero della Home ------------------------------------------------------ */

.hero {
  padding-top: clamp(2.75rem, 1.5rem + 5.4vw, 6.5rem);
}

.hero__eyebrow {
  margin-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}

.hero__title {
  max-width: 15em;
}

.hero__body {
  display: grid;
  gap: var(--space-7);
  margin-top: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  padding-top: var(--space-6);
  border-top: var(--rule) solid var(--c-rule);
}

.hero__claim {
  text-wrap: wrap;
}

.hero__claim span {
  display: block;
}

.hero__actions,
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__micro {
  max-width: 28rem;
  margin-top: var(--space-4);
}

@media (max-width: 29.9375em) {
  .hero__actions .btn,
  .page-hero__actions .btn { flex: 1 1 100%; }
}

/* Mobile e tablet: il claim segue subito l'H1, poi CTA e microcopy;
   un filetto separa il blocco d'azione dal testo descrittivo. */
@media (max-width: 63.9375em) {
  .hero__body {
    margin-top: var(--space-5);
    padding-top: 0;
    border-top: 0;
  }

  .hero__text {
    padding-top: var(--space-6);
    border-top: var(--rule) solid var(--c-rule);
  }
}

/* Desktop: testo a sinistra, claim e CTA a destra (indipendente dall'ordine nel DOM) */
@media (min-width: 64em) {
  .hero__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .hero__text { grid-column: 1 / span 6; grid-row: 1; }
  .hero__aside { grid-column: 7 / span 6; grid-row: 1; }
}

/* --- Hero delle pagine interne ------------------------------------------- */

.page-hero {
  padding-block: clamp(2.75rem, 1.5rem + 5.4vw, 6.5rem) var(--section-pad);
}

.page-hero__title {
  max-width: 16em;
  margin-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}

.page-hero__body {
  display: grid;
  gap: var(--space-7);
  margin-top: clamp(2rem, 1.4rem + 2.6vw, 4rem);
  padding-top: var(--space-6);
  border-top: var(--rule) solid var(--c-rule);
}

.page-hero__lead {
  max-width: var(--measure-lead);
}

.page-hero__lead + p {
  margin-top: 1.1em;
}

.page-hero__micro {
  margin-top: var(--space-4);
}

.page-hero__claim {
  max-width: 18em;
  margin-top: var(--space-6);
}

.page-hero__aside > .page-hero__claim:first-child {
  margin-top: 0;
}

.page-hero__audience {
  margin-top: var(--space-5);
}

@media (min-width: 64em) {
  .page-hero__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .page-hero__main { grid-column: 1 / span 6; }
  .page-hero__aside { grid-column: 7 / span 6; }
}

.page-hero + .section:not(.section--alt, .section--dark) {
  padding-top: 0;
}

/* Indice dei capitoli della pagina */
.page-index__label {
  margin-bottom: var(--space-3);
  color: var(--c-ink-muted);
}

.page-index ol {
  border-top: var(--rule) solid var(--c-rule-strong);
}

.page-index a {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  min-height: 3rem;
  padding-block: 0.75rem;
  border-bottom: var(--rule) solid var(--c-rule);
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast) var(--ease-out);
}

.page-index .num {
  font-size: 1rem;
  min-width: 1.5rem;
}

.page-index__arrow {
  margin-left: auto;
  color: var(--c-ink-muted);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .page-index a:hover .page-index__arrow {
    color: var(--c-accent);
    transform: translateY(3px);
  }
}

/* Variante profilo: spazio per il ritratto (vuoto se la foto non c'è) */
.profile__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--c-paper-alt);
}

@media (min-width: 64em) {
  .page-hero--photo .page-hero__body { align-items: start; }
  .page-hero--photo .page-hero__main { grid-column: 1 / span 6; }
  .page-hero--photo .profile__media { grid-column: 8 / span 5; grid-row: 1 / span 2; }
}

/* --- Liste con trattino --------------------------------------------------- */

.dash-list {
  border-bottom: var(--rule) solid var(--c-rule);
}

.dash-list li {
  position: relative;
  padding: 1.0625rem 0 1.0625rem 2rem;
  border-top: var(--rule) solid var(--c-rule);
  text-wrap: pretty;
}

.dash-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.0625rem + 0.78em);
  width: 0.875rem;
  height: 2px;
  background: var(--c-accent);
}

/* --- Home · Quando posso esserti utile ------------------------------------ */

.need__body {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--section-head-gap);
}

.need__close {
  max-width: 23em;
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
}

@media (min-width: 64em) {
  .need__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: start;
  }

  .need__text { grid-column: 1 / span 5; }
  .need__list { grid-column: 7 / span 6; }
}

@media (min-width: 80em) {
  .need__close { max-width: 27em; }
}

/* --- Registro: righe numerate (aree, temi, forme di collaborazione) ------- */

.register {
  margin-top: clamp(3rem, 2.4rem + 2.6vw, 5rem);
  border-top: var(--rule) solid var(--c-rule-strong);
}

.register__row {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: var(--rule) solid var(--c-rule);
}

.register__index,
.step__index {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.register__index .label,
.step__index .label {
  color: var(--c-ink-muted);
}

.register__title {
  max-width: 18em;
}

.register__text {
  max-width: var(--measure);
  text-wrap: pretty;
}

.register__body > * + * {
  margin-top: var(--space-5);
}

/* Registro approfondito: titolo e frase chiave, poi testo, elenco ed esito */
/* flex: il posizionamento a griglia della riga non si applica ai figli */
.register__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.register__key {
  max-width: 24em;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--c-ink-muted);
  text-wrap: pretty;
}

.register__group > .label,
.register__outcome > .label,
.step__result > .label {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--c-ink-muted);
}

.register__outcome,
.step__result {
  max-width: 44rem;
  padding-top: var(--space-4);
  border-top: var(--rule) solid var(--c-rule-strong);
}

.register__outcome > p:last-child,
.step__result > p:last-child {
  font-weight: var(--fw-medium);
  text-wrap: pretty;
}

/* Elenco compatto (Può comprendere): trattino neutro, il rosa resta ai numeri */
.compact-list {
  display: grid;
  max-width: 44rem;
  border-bottom: var(--rule) solid var(--c-rule);
}

.compact-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-top: var(--rule) solid var(--c-rule);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-wrap: pretty;
}

.compact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.5rem + 0.7em);
  width: 0.5rem;
  height: 2px;
  background: var(--c-ink-muted);
}

@media (min-width: 48em) {
  .register__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: baseline;
    padding-block: var(--space-6) var(--space-7);
  }

  .register__index { grid-column: 1 / span 2; }
  .register__title { grid-column: 3 / span 4; }
  .register__text,
  .register__body { grid-column: 7 / span 6; }
}

@media (min-width: 64em) {
  .register__text,
  .register__body { grid-column: 7 / span 5; }
}

/* Registro approfondito: su tablet e laptop il testo va a capo sotto il titolo,
   da 1280px titolo e testo affiancati */
@media (min-width: 48em) {
  .register--detailed .register__head { grid-column: 3 / -1; }
  .register--detailed .register__body { grid-column: 3 / -1; margin-top: var(--space-4); }

  .compact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
}

@media (min-width: 80em) {
  .register--detailed .register__head { grid-column: 3 / span 4; }
  .register--detailed .register__body { grid-column: 7 / span 6; margin-top: 0; }
}

/* --- Sequenza 01 → 02 → 03 ------------------------------------------------ */

.steps {
  display: grid;
  gap: var(--space-2);
  margin-top: clamp(3.5rem, 2.6rem + 3.8vw, 6rem);
}

/* Mobile/tablet: sequenza verticale, la linea scorre a sinistra */
.step {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: var(--space-4);
  align-content: start; /* fasi di altezza diversa: il contenuto resta allineato in alto */
}

.step__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--c-ink);
}

.step__dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--c-accent);
}

.step__line {
  flex: 1;
  width: 1px;
  margin-top: 0.625rem;
  background: currentColor;
  transform-origin: top;
}

.step__arrow {
  flex: none;
  margin-top: -2px;
  transform: rotate(90deg);
}

.step__body {
  padding-bottom: var(--space-7);
}

.step__title {
  margin-top: var(--space-4);
}

.step__text {
  max-width: 30rem;
  margin-top: var(--space-3);
  text-wrap: pretty;
}

.step__name {
  margin-top: var(--space-3);
  color: var(--c-ink);
}

.step__name + .step__title {
  margin-top: var(--space-2);
}

.step__result {
  max-width: 30rem;
  margin-top: var(--space-5);
  border-top-color: var(--c-rule);
}

@media (min-width: 64em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
  }

  .step__track {
    flex-direction: row;
    height: 12px;
    padding-right: var(--space-4);
  }

  .step__dot { margin-top: 0; }

  .step__line {
    width: auto;
    height: 1px;
    margin: 0 0 0 0.75rem;
    transform-origin: left;
  }

  .step__arrow {
    margin: 0 0 0 -7px;
    transform: none;
  }

  .step__body {
    padding: var(--space-6) var(--space-7) 0 0;
  }
}

/* --- Sezione scura: chi decide, chi porta avanti -------------------------- */

.split__board {
  position: relative;
  margin-top: var(--section-head-gap);
}

.split__title {
  display: grid;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.47rem + 2.25vw, 3.5rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.split__title span {
  display: block;
}

.split__cols {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.split__p {
  max-width: 32rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-on-dark-muted);
  text-wrap: pretty;
}

.split__p--me {
  padding-top: var(--space-5);
  border-top: var(--rule) solid var(--c-rule-on-dark);
}

.split__end {
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
  padding-top: var(--space-6);
  border-top: var(--rule) solid var(--c-rule-on-dark);
}

.split__result {
  max-width: 34rem;
  color: var(--c-on-dark-muted);
}

.split__quote {
  margin-top: clamp(3rem, 2.2rem + 3.4vw, 5.5rem);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
}

.split__quote-a {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: clamp(3rem, 2.1rem + 3.9vw, 6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--c-on-dark);
}

.split__quote-b {
  display: block;
  max-width: 21em;
  margin-top: var(--space-5);
  font-size: var(--fs-callout);
  line-height: 1.22;
  letter-spacing: var(--tracking-heading);
  color: var(--c-on-dark-muted);
  text-wrap: balance;
}

@media (min-width: 64em) {
  .split__board::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--c-rule-on-dark);
  }

  .split__title,
  .split__cols {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--col-gap) * 3);
  }

  .split__p--me {
    padding-top: 0;
    border-top: 0;
  }

  .split__end {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .split__result { grid-column: 1 / span 5; }

  .split__quote {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--col-gap) * 3);
    align-items: end;
  }

  .split__quote-b {
    margin-top: 0;
    padding-bottom: 0.35rem;
  }
}

/* Affermazione su fondo scuro (titolo grande + testo a destra) */
.statement__title {
  max-width: 17em;
  margin-top: var(--section-head-gap);
}

.statement__body {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--rule) solid var(--c-rule-on-dark);
}

.statement__body p {
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-on-dark-muted);
  text-wrap: pretty;
}

@media (min-width: 64em) {
  .statement__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .statement__body p:first-child { grid-column: 1 / span 5; }
  .statement__body p:last-child { grid-column: 7 / span 5; }
}

/* --- Colonne con etichetta (Per chi lavoro, competenze, contatti) -------- */

.columns {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--section-head-gap);
}

.columns__item {
  padding-top: var(--space-5);
  border-top: var(--rule) solid var(--c-rule);
}

.columns__name {
  margin-bottom: var(--space-5);
}

.columns__cta {
  margin-top: var(--space-5);
}

@media (min-width: 64em) {
  .columns {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .columns__item:first-child { grid-column: 1 / span 5; }
  .columns__item:last-child { grid-column: 7 / span 5; }
}

/* --- Home · Chi sono ------------------------------------------------------ */

.about__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.about__title {
  max-width: 19em;
}

.about__text {
  margin-top: var(--space-6);
}

.name-block {
  margin-top: clamp(3.5rem, 2.6rem + 3.8vw, 6rem);
  padding-top: var(--space-6);
  border-top: var(--rule) solid var(--c-rule);
}

.name-block__lead-in {
  font-size: var(--fs-lead);
  color: var(--c-ink-muted);
}

.name-block__role {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-h2-xl);
  font-weight: var(--fw-medium);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.name-block__dot {
  color: var(--c-accent);
}

.name-block__cta,
.name-block__text {
  margin-top: var(--space-6);
}

@media (min-width: 64em) {
  .about__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .about__layout > .eyebrow { grid-column: 1 / -1; }
  .about__title { grid-column: 1 / span 6; }

  .about__text {
    grid-column: 7 / span 5;
    margin-top: var(--section-head-gap);
    padding-top: 0.5rem;
  }

  .about__layout > .name-block { grid-column: 1 / -1; }

  .name-block {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }

  .name-block__lead-in { grid-column: 1 / -1; }
  .name-block__role { grid-column: 1 / span 9; }
  .name-block__cta { grid-column: 10 / span 3; justify-self: end; }
  .name-block__text { grid-column: 7 / span 5; }
}

/* --- Chi sono · percorso e formazione ------------------------------------ */

.facts {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--section-head-gap);
}

.facts--top {
  margin-top: 0;
}

.facts__list {
  border-top: var(--rule) solid var(--c-rule-strong);
}

.facts__list li {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: var(--rule) solid var(--c-rule);
}

.facts__list .facts__what {
  font-weight: var(--fw-medium);
}

.facts__list .facts__where {
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
}

.facts__aside {
  margin-top: var(--space-7);
}

@media (min-width: 48em) {
  .facts__list li {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--col-gap);
    align-items: baseline;
  }

  .facts__list .facts__where { font-size: var(--fs-body); }
}

@media (min-width: 64em) {
  .facts {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .facts__main { grid-column: 1 / span 5; }
  .facts__list-wrap { grid-column: 7 / span 6; }
  .facts__aside { margin-top: var(--space-6); }
}

/* Elenco breve a due colonne con filetti (settori) */
.inline-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--col-gap);
  margin-top: var(--space-4);
  border-bottom: var(--rule) solid var(--c-rule);
}

.inline-list li {
  padding-block: 0.625rem;
  border-top: var(--rule) solid var(--c-rule);
}

/* --- CTA finale ------------------------------------------------------------ */

.cta__inner {
  padding-top: var(--space-6);
  border-top: var(--rule) solid var(--c-rule-strong);
}

.cta__inner > .eyebrow + .cta__title {
  margin-top: var(--section-head-gap);
}

.cta__title {
  max-width: 15em;
}

.cta__row {
  display: grid;
  gap: var(--space-6);
  margin-top: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
}

.cta__text {
  max-width: 32rem;
}

.cta__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

@media (max-width: 29.9375em) {
  .cta__action .btn { width: 100%; }
}

@media (min-width: 64em) {
  .cta__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }

  .cta__text { grid-column: 1 / span 6; }
  .cta__action { grid-column: 7 / span 6; }
}

/* Passi di avvio (Come iniziamo) */
.start-steps {
  display: grid;
  margin-top: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
  border-top: var(--rule) solid var(--c-rule);
}

.start-steps li {
  display: grid;
  align-content: start;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--rule) solid var(--c-rule);
}

.start-steps .num {
  font-size: 1.25rem;
  line-height: 1.5;
}

.start-steps h3 {
  margin-bottom: var(--space-2);
}

.start-steps p {
  max-width: 32rem;
  text-wrap: pretty;
}

@media (min-width: 64em) {
  .start-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: var(--rule) solid var(--c-rule);
  }

  .start-steps li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
    padding: var(--space-5) var(--space-6) var(--space-6) 0;
    border-bottom: 0;
  }

  .start-steps li + li {
    padding-left: var(--space-6);
    border-left: var(--rule) solid var(--c-rule);
  }
}

.cta--start .cta__action {
  margin-top: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
}

/* --- Contatti ---------------------------------------------------------- */

.contact {
  display: grid;
  gap: var(--space-8);
}

.contact__aside .label {
  display: block;
  color: var(--c-ink-muted);
}

.contact__channels > li {
  padding-block: var(--space-4);
  border-bottom: var(--rule) solid var(--c-rule);
}

.contact__channels > li:first-child {
  border-top: var(--rule) solid var(--c-rule-strong);
}

.contact__channels a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}

@media (min-width: 64em) {
  .contact {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: start;
  }

  .contact__form { grid-column: 1 / span 7; }
  .contact__aside { grid-column: 9 / span 4; position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

/* --- Testi legali ---------------------------------------------------------- */

.legal {
  max-width: 46rem;
  font-size: var(--fs-small);
  line-height: 1.7;
}

.legal h2,
.legal h3 {
  margin: 2.4em 0 0.8em;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.legal p,
.legal ul,
.legal ol {
  margin: 0 0 1em;
}

.legal ul,
.legal ol {
  padding-left: 1.25rem;
}

.legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* --- 404 ----------------------------------------------------------------- */

.notfound {
  min-height: 60vh;
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  margin-top: var(--space-7);
}

/* --- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  [data-hero] {
    animation: hero-in 720ms var(--ease-out) both;
    animation-delay: calc(var(--hero-i, 0) * 80ms + 60ms);
  }

  @keyframes hero-in {
    from {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }
  }

  /* La linea del metodo si traccia una sola volta, fase dopo fase */
  .js [data-reveal-group] .step__line {
    transform: scale(1, 0);
    transition: transform 900ms var(--ease-in-out);
    transition-delay: calc(var(--step-i) * 280ms + 200ms);
  }

  .js [data-reveal-group] .step__dot,
  .js [data-reveal-group] .step__arrow,
  .js [data-reveal-group] .step__body {
    opacity: 0;
    transition: opacity 500ms var(--ease-out), transform 640ms var(--ease-out);
    transition-delay: calc(var(--step-i) * 280ms);
  }

  .js [data-reveal-group] .step__body {
    transform: translate3d(0, 12px, 0);
    transition-delay: calc(var(--step-i) * 280ms + 120ms);
  }

  .js [data-reveal-group] .step__arrow {
    transition-delay: calc(var(--step-i) * 280ms + 900ms);
  }

  .js [data-reveal-group].is-visible .step__line {
    transform: none;
  }

  .js [data-reveal-group].is-visible .step__dot,
  .js [data-reveal-group].is-visible .step__arrow,
  .js [data-reveal-group].is-visible .step__body {
    opacity: 1;
  }

  .js [data-reveal-group].is-visible .step__body {
    transform: none;
  }

  @media (min-width: 64em) {
    .js [data-reveal-group] .step__line { transform: scale(0, 1); }
  }
}

.page-hero__actions--flush {
  margin-top: 0;
}