/* ============================================================
   RACHELEITE — Componenti (versione cinematica)
   Riferimenti DevBrief Cap. 02:
   · Genesis Reimagined → hero pinnato sincronizzato allo scroll
   · Developios → gerarchia hero → servizi → processo, DA SUPERARE
     sul movimento: ogni tappa del metodo ha coreografia propria
   · Fusione delle due anime (BrandBook Cap. 11):
     Contrasto Vivo = tipografia come immagine, griglie asimmetriche,
     UN elemento di rottura per composizione.
     Inchiostro e Luce = materia, gesto, luce naturale.

   Convenzione robustezza: lo stato CSS di default è lo stato FINALE
   (tutto visibile, layout statico). Le coreografie GSAP partono solo
   con html.js-motion — senza JS o con prefers-reduced-motion il sito
   è completo e leggibile.
   ============================================================ */

/* ------------------------------------------------------------
   HEADER  (template part: header.html)
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: background var(--t-med) ease, border-color var(--t-med) ease,
              transform var(--t-med) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--c-avorio) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--c-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: .9rem;
}
.site-header__logo img { height: 2.4rem; width: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.site-nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.site-nav a:hover { color: var(--c-bordeaux); border-bottom-color: var(--c-bordeaux); }
.site-nav .btn { padding: .6rem 1.3rem; font-size: var(--fs-small); }

@media (max-width: 47.9rem) {
  .site-nav a:not(.btn) { display: none; }
  .site-header__inner { gap: .5rem; }
  .site-header__logo img { height: 1.9rem; }
  .site-nav .btn {
    padding: .5rem .8rem;
    font-size: 0;
    white-space: nowrap;
  }
  .site-nav .btn::after {
    content: "Contatti";
    font-size: .75rem;
  }
}

/* ------------------------------------------------------------
   HERO — IL PUNTO DIVENTA SCENA
   Il primo frame comunica già persona, posizionamento e claim. Lo
   scroll trasforma il punto terracotta in una finestra sul processo.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--c-avorio);
}

.hero__media,
.hero__media > picture,
.hero__portal {
  position: absolute;
  inset: 0;
}

.hero__media {
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__media > picture { display: block; }

.hero__photo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.hero__photo--main {
  object-position: center center;
  transform-origin: 62% 48%;
  will-change: transform;
}

.hero__media-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--c-avorio) 98%, transparent) 0%,
    color-mix(in srgb, var(--c-avorio) 88%, transparent) 26%,
    color-mix(in srgb, var(--c-avorio) 52%, transparent) 47%,
    transparent 70%
  );
}

.hero__portal {
  z-index: 2;
  display: none;
  overflow: hidden;
  clip-path: circle(0 at 65% 62%);
  will-change: clip-path;
}

.js-motion .hero__portal { display: block; }

.hero__photo--process {
  object-position: center center;
  transform: scale(1.08);
  transform-origin: 58% 55%;
  will-change: transform;
}

.hero__portal-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--c-petrolio-scuro) 82%, transparent),
    color-mix(in srgb, var(--c-petrolio-scuro) 30%, transparent) 58%,
    transparent 86%
  );
}

.hero__stage {
  position: relative;
  z-index: 3;
  padding-top: 5rem;
}

.hero__claim {
  width: min(58rem, 83vw);
  margin-block: clamp(1rem, 2.5vh, 2rem);
  font-size: clamp(4.25rem, 7.5vw, 9.5rem);
  line-height: .86;
  letter-spacing: -.035em;
  display: grid;
  gap: .06em;
}

.hero__line { display: block; overflow: hidden; }
.hero__w { display: inline-block; will-change: transform; }

.hero__claim .hero__line:nth-child(3) {
  margin-left: clamp(2rem, 7vw, 7rem);
}

.hero__claim .hero__line:nth-child(3) .hero__w {
  font-style: italic;
  color: var(--c-bordeaux);
}

.hero__claim .hero__line:nth-child(3) {
  margin-left: clamp(.5rem, 2.5vw, 2.5rem);
}

.hero__dot {
  display: inline-block;
  color: var(--c-terracotta);
  transform-origin: 50% 55%;
}

.hero__caption {
  max-width: 25rem;
  padding-left: var(--space-2);
  border-left: 2px solid var(--c-terracotta);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--c-ink-soft);
}

.hero__process-copy {
  position: absolute;
  z-index: 4;
  left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  right: var(--gutter);
  bottom: clamp(6.5rem, 15vh, 10rem);
  display: none;
  color: var(--c-avorio);
  opacity: 0;
  visibility: hidden;
}

.js-motion .hero__process-copy { display: block; }

.hero__process-label {
  margin-bottom: var(--space-2);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

.hero__process-lines {
  position: relative;
  min-height: 1.05em;
  font-family: var(--f-display);
  font-size: clamp(3.75rem, 8.5vw, 8.5rem);
  line-height: .95;
  letter-spacing: -.035em;
}

.hero__process-lines p {
  position: absolute;
  inset: 0 auto auto 0;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}

.hero__hint {
  position: absolute;
  z-index: 5;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.hero__hint::after {
  content: "";
  width: 1px;
  height: 2.5rem;
  background: currentColor;
  opacity: .55;
}

@media (max-width: 47.9rem) {
  .hero { align-items: end; }

  .hero__photo--main {
    object-position: 50% 25%;
    transform-origin: 50% 30%;
  }

  .hero__media-wash {
    background: linear-gradient(
      180deg,
      transparent 20%,
      color-mix(in srgb, var(--c-avorio) 10%, transparent) 42%,
      color-mix(in srgb, var(--c-avorio) 94%, transparent) 70%,
      var(--c-avorio) 100%
    );
  }

  .hero__stage {
    padding-top: 7rem;
    padding-bottom: 6.75rem;
  }

  .hero__stage .overline {
    max-width: 18rem;
    font-size: .68rem;
    line-height: 1.5;
  }

  .hero__claim {
    width: 100%;
    margin-block: .9rem 1.25rem;
    font-size: clamp(2.9rem, 14vw, 4.65rem);
    line-height: .88;
  }

  .hero__claim .hero__line:nth-child(2) { margin-left: 1.1rem; }
  .hero__claim .hero__line:nth-child(3) { margin-left: .35rem; }

  .hero__caption {
    max-width: 19rem;
    font-size: 1rem;
  }

  .hero__photo--process { object-position: 55% center; }

  .hero__portal-shade {
    background: linear-gradient(
      0deg,
      color-mix(in srgb, var(--c-petrolio-scuro) 88%, transparent),
      color-mix(in srgb, var(--c-petrolio-scuro) 14%, transparent) 75%
    );
  }

  .hero__process-copy {
    left: var(--gutter);
    bottom: 8rem;
  }

  .hero__process-lines {
    min-height: 2.1em;
    font-size: clamp(3rem, 14vw, 4.5rem);
  }

  .hero__process-lines p {
    white-space: normal;
    max-width: 20rem;
  }

  .hero__hint {
    left: var(--gutter);
    transform: none;
    justify-items: start;
    max-width: 13rem;
    line-height: 1.4;
  }
}

/* ------------------------------------------------------------
   BANDE / INTESTAZIONI DI SEZIONE — stile editoriale
   (gerarchia leggibile, rif. Developios)
   ------------------------------------------------------------ */
.sec-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--c-bordeaux);
  margin-bottom: var(--space-4);
}
.sec-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line);
  transform-origin: left center;
}
/* Parola-immagine in filigrana (Contrasto Vivo: tipografia grande
   usata come immagine). Si muove in parallasse. */
.word-bg {
  position: absolute;
  z-index: 0;
  font-family: var(--f-display);
  font-size: clamp(6rem, 22vw, 18rem);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--c-petrolio) 26%, transparent);
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------
   COSA FACCIO — showcase servizi  (blocco: acf/servizi-showcase)
   Hover = anteprima che segue il cursore. Click = la voce si apre.
   Senza JS le voci restano aperte (robustezza).
   ------------------------------------------------------------ */
.servizi {
  position: relative;
  overflow: clip;
  padding-block: var(--space-7);
}
.servizi .word-bg { top: 6%; left: -4%; }
.servizi__head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  max-width: 52rem;
}
.servizi__head h2 { font-size: var(--fs-h2); }

.servizi__list {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--c-line);
}
.servizio { border-bottom: 1px solid var(--c-line); }

.servizio__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: padding-left var(--t-med) var(--ease-out);
}
.servizio__row:hover { padding-left: var(--space-2); }

.servizio__num {
  font-family: var(--f-display);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.servizio__name {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  color: var(--c-petrolio);
  transition: color var(--t-fast) ease;
}
.servizio__row:hover .servizio__name,
.servizio.is-open .servizio__name { color: var(--c-bordeaux); }
.servizio__tag {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
}
.servizio__arrow {
  font-size: 1.25rem;
  color: var(--c-terracotta);
  transition: transform var(--t-med) var(--ease-out);
}
.servizio.is-open .servizio__arrow { transform: rotate(180deg); }

/* Dettaglio: aperto di default (no JS), collassato quando html.js */
.servizio__detail { overflow: hidden; }
.js .servizio__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease-out);
}
.js .servizio.is-open .servizio__detail { grid-template-rows: 1fr; }
.servizio__detail-inner { min-height: 0; overflow: hidden; }
.servizio__detail-inner p {
  max-width: 44rem;
  padding-bottom: var(--space-2);
  color: var(--c-ink-soft);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

/* Foto del servizio dentro la dropdown: si vede solo dove NON c'è
   l'hover (telefoni e tablet) oppure quando l'anteprima fluttuante
   non è attiva (motion ridotto, niente JS). Su desktop con mouse
   resta solo l'anteprima che segue il cursore, senza doppioni. */
.servizio__media {
  margin: 0 0 var(--space-3);
  max-width: 24rem;
}
.servizio__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-soft);
}
@media (hover: hover) and (pointer: fine) {
  .js-motion .servizio__media { display: none; }
}

/* Sotto-voci del gruppo di servizi */
.servizio__subs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0 0 var(--space-3);
  margin: 0;
  max-width: 46rem;
}
.servizio__subs li {
  padding: .3rem .9rem;
  border: 1px solid var(--c-line);
  border-radius: 100vmax;
  font-size: var(--fs-small);
  color: var(--c-petrolio);
  background: color-mix(in srgb, var(--c-avorio-alt) 55%, var(--c-avorio));
}

/* Anteprima fluttuante: solo desktop con puntatore + motore attivo */
.servizi__preview {
  display: none;
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  /* Verticale 3:4 come le foto progetto dei clienti */
  width: clamp(13rem, 18vw, 17rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-soft);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(.92);
}
.servizi__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) and (pointer: fine) {
  .js-motion .servizi__preview { display: block; }
}

.servizi__more {
  position: relative;
  z-index: 1;
  margin-top: var(--space-4);
  color: var(--c-ink-soft);
}

/* ------------------------------------------------------------
   IL PUNTO VERO  (blocco: acf/per-chi)
   Fascia bordeaux speculare al "chi sono": testo a sinistra,
   foto a destra con maschera organica. Accento terracotta della
   composizione: la pennellata sotto "solo", che si disegna allo
   scroll (coerente col Cap. 12: terracotta solo come accento).
   ------------------------------------------------------------ */
.perchi {
  position: relative;
  overflow: clip;
  padding-block: var(--space-7);
  background: var(--c-bordeaux);
  color: var(--c-avorio);
}
.perchi .word-bg {
  bottom: 4%;
  left: -5%;
  -webkit-text-stroke-color: color-mix(in srgb, var(--c-avorio) 8%, transparent);
}
.perchi .sec-label { color: var(--c-cipria); }
.perchi .sec-label::after { background: color-mix(in srgb, var(--c-avorio) 30%, transparent); }

.perchi__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 60rem) {
  .perchi__grid {
    grid-template-columns: 1.15fr .85fr;
    grid-template-areas: "title media" "body media";
    gap: var(--space-4) var(--space-6);
    align-items: start;
  }
  .perchi__grid h2 { grid-area: title; }
  .perchi__media { grid-area: media; align-self: center; }
  .perchi__body { grid-area: body; }
}
.perchi__media {
  overflow: clip;
  border-radius: var(--r-organic);
}
.perchi__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Mai più alta dello schermo: tetto sotto i 100vh su desktop,
     più basso su mobile dove la foto è di passaggio */
  max-height: 85svh;
}
@media (max-width: 47.9rem) {
  .perchi__media img { max-height: 52svh; }
}
.perchi__grid h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  max-width: 30ch;
  color: var(--c-avorio);
}
.perchi__u { position: relative; white-space: nowrap; }
/* La pennellata terracotta: un tratto SVG irregolare che il motore
   fa disegnare da sinistra a destra. Senza JS è già disegnata. */
.perchi__brush {
  position: absolute;
  left: -5%;
  bottom: -.18em;
  width: 112%;
  height: .42em;
  overflow: visible;
}
/* Forma piena a pennellata: pancia a sinistra, coda sottile a destra */
.perchi__brush path {
  fill: var(--c-terracotta);
  stroke: none;
  opacity: .95;
}
.perchi__body > p + p { margin-top: var(--space-3); }
.perchi__body p {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-avorio);
  max-width: 34rem;
}
.perchi__body .lead { color: var(--c-avorio); }
.perchi__quote {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--c-avorio);
  border-left: 2px solid color-mix(in srgb, var(--c-avorio) 45%, transparent);
  padding-left: var(--space-3);
}

/* ------------------------------------------------------------
   PONTE ARCHETIPO  (blocco: acf/archetype-teaser)
   "Anteprima animata del sistema dei 12 archetipi": nastro
   tipografico continuo, due righe in direzioni opposte.
   ------------------------------------------------------------ */
.arch-teaser {
  background: var(--c-avorio-alt);
  border-block: 1px solid var(--c-line);
  padding-block: var(--space-6);
  overflow: clip;
}
.arch-teaser__head {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  margin-bottom: var(--space-5);
}
.arch-teaser__head h2 { font-size: var(--fs-h2); }

.marquee {
  display: grid;
  gap: .75rem;
  margin-bottom: var(--space-5);
  /* Dissolvenza ai bordi: il testo che entra ed esce sfuma invece di
     tagliarsi vivo sul bordo dello schermo (da cell sembrava un refuso) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__row {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  color: var(--c-ink-soft);
  animation: marquee 38s linear infinite;
}
.marquee__row--reverse { animation-direction: reverse; }
.marquee__row span { white-space: nowrap; }
.marquee__row .sep { color: var(--c-cipria); }
.marquee__row .hl { font-style: italic; color: var(--c-bordeaux); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* La seconda copia dei contenuti serve solo al loop infinito */
.marquee__dup { display: contents; }

/* Con "riduci movimento" attivo (es. iOS Accessibilità) niente
   autoplay: il nastro resta su una riga e si scorre col dito.
   Il gesto volontario è accessibile, il movimento automatico no. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee__row { animation: none; }
  .marquee__dup { display: none; }
}
.arch-teaser__cta { text-align: center; }

/* ------------------------------------------------------------
   METODO  (blocco: acf/method-scroll)
   TRE TAPPE PINNATE, ciascuna con coreografia propria
   (animation_variant: ascolto | struttura | forma).
   Senza JS: le tre tappe scorrono in verticale, complete.
   Con js-motion: pannelli sovrapposti dentro il pin GSAP.
   ------------------------------------------------------------ */
.metodo { padding-block: var(--space-7) 0; }
.metodo__head {
  max-width: 44rem;
  margin-bottom: var(--space-5);
}
.metodo__head h2 { font-size: var(--fs-h2); margin-bottom: var(--space-2); }

.metodo__pin { position: relative; }
.js-motion .metodo__pin {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.metodo__rail {
  display: none;
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-display);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  gap: 1.1rem;
}
.js-motion .metodo__rail { display: grid; }
.metodo__rail span { opacity: .35; transition: opacity var(--t-fast), color var(--t-fast); }
.metodo__rail span.on { opacity: 1; color: var(--c-bordeaux); }

.metodo__panel {
  position: relative;
  min-height: 70vh;
  display: grid;
  align-content: center;
  overflow: clip;
  padding-block: var(--space-5);
}
.js-motion .metodo__panel {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding-block: 0;
}
.js-motion .metodo__panel:not(:first-of-type) { opacity: 0; }

.metodo__panel .container {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-3);
  max-width: 56rem;
}
.metodo__kicker {
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--c-bordeaux);
}
.metodo__panel h3 {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1;
}
.metodo__panel h3 .hero__line { display: block; overflow: hidden; }
.metodo__panel p { max-width: 38rem; }
.metodo__guard {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  border-left: 2px solid var(--c-cipria);
  padding-left: var(--space-2);
}

/* Su mobile il rail occupa una colonna propria: il testo parte più a
   destra e non può più sovrapporsi ai numeri della fase attiva. */
@media (max-width: 47.9rem) {
  .js-motion .metodo__rail {
    width: 1.5rem;
    justify-items: start;
  }

  .js-motion .metodo__panel .container {
    padding-left: 3.25rem;
    padding-right: .25rem;
  }

  .metodo__panel p { max-width: 100%; }
}

/* — Variante 01 · ASCOLTO: cerchi concentrici che si allargano
     come un suono ricevuto (l'eco dell'ascolto) — */
.metodo__rings {
  position: absolute;
  z-index: 0;
  right: -12vmax;
  top: 50%;
  translate: 0 -50%;
  width: 46vmax;
  aspect-ratio: 1;
  pointer-events: none;
}
.metodo__rings circle {
  fill: none;
  /* Stesso colore leggero delle linee della tappa "Metodo": il testo
     resta leggibile anche quando sui viewport stretti ci passa sopra */
  stroke: var(--c-line);
  stroke-width: 1;
  transform-origin: center;
}

/* — Variante 02 · STRUTTURA: la griglia si disegna da sola — */
.metodo__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.metodo__lines i {
  position: absolute;
  background: var(--c-line);
}
.metodo__lines .v { top: 0; bottom: 0; width: 1px; transform-origin: top center; }
.metodo__lines .h { left: 0; right: 0; height: 1px; transform-origin: left center; }
.metodo__lines .v1 { left: 22%; }
.metodo__lines .v2 { left: 58%; }
.metodo__lines .v3 { left: 84%; }
.metodo__lines .h1 { top: 26%; }
.metodo__lines .h2 { top: 72%; }

/* — Variante 03 · FORMA: la graffa emerge come macchia d'inchiostro — */
.metodo__blob {
  position: absolute;
  z-index: 0;
  right: -6vmax;
  top: 50%;
  translate: 0 -50%;
  width: 34vmax;
  opacity: .16;
  pointer-events: none;
}

/* Nastro servizi + competenze: marquee continuo lento */
.fasi-wrap {
  overflow: clip;
  border-block: 1px solid var(--c-line);
  padding-block: var(--space-3);
  margin-top: var(--space-6);
}
.marquee--ribbon { margin-bottom: 0; }
.marquee--ribbon .marquee__row {
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  color: var(--c-petrolio);
  gap: 1.75rem;
}
.marquee--ribbon .sep { color: var(--c-terracotta); }
.marquee__row--slow { animation-duration: 55s; }

/* ------------------------------------------------------------
   PROVA / PROGETTI  (blocco: acf/proof)
   Griglia asimmetrica: la colonna centrale scende — il ritmo
   editoriale, non tre card allineate.
   ------------------------------------------------------------ */
.prova {
  position: relative;
  padding-block: var(--space-7);
  overflow: clip;
}
.prova .word-bg { bottom: 2%; right: -6%; }
.prova__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.prova__head h2 { font-size: var(--fs-h2); }

.prova__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5) var(--space-4);
}
@media (min-width: 48rem) {
  .prova__grid { grid-template-columns: repeat(3, 1fr); }
  .prova-card:nth-child(2) { margin-top: var(--space-6); }
  .prova-card:nth-child(3) { margin-top: var(--space-2); }
}

.prova-card {
  display: grid;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}
.prova-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-soft);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--c-cipria);
}
.prova-card__media img.ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.prova-card:hover .prova-card__media img.ph { transform: scale(1.045); }
.prova-card__media img.glyph { width: 32%; opacity: .35; position: relative; z-index: 1; }
.prova-card__media--petrolio { background: var(--c-petrolio); }

.prova-card h3 { font-size: var(--fs-h3); }
.prova-card__ragionamento {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  display: grid;
  gap: .3rem;
}
.prova-card__ragionamento b { color: var(--c-bordeaux); font-weight: 600; }

.prova__placeholder-note {
  position: relative;
  z-index: 1;
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  font-style: italic;
  max-width: 40rem;
}

/* ------------------------------------------------------------
   MOMENTO UMANO  (blocco: acf/momento-umano)
   Banda petrolio prima del contatto: chi c'è dietro, il passaggio
   tecnica → emozione (BrandBook Cap. 13). La foto si rivela con
   una maschera organica che si apre scrollando.
   ------------------------------------------------------------ */
.humano {
  background: var(--c-petrolio);
  color: var(--c-avorio);
  padding-block: var(--space-7);
  overflow: clip;
}
.humano__grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 60rem) {
  .humano__grid { grid-template-columns: .85fr 1.15fr; }
}
.humano__media { overflow: clip; border-radius: var(--r-organic); }
.humano__media img {
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;
  max-height: 70svh;
  /* Il ritratto ha il viso nel terzo alto: il ritaglio parte
     dall'alto, mai dal centro, così la testa resta sempre dentro */
  object-position: 50% 12%;
}
/* Su mobile la foto diventa orizzontale e bassa: accompagna il
   testo senza occupare quasi tutto lo schermo */
@media (max-width: 47.9rem) {
  .humano__media img {
    aspect-ratio: 4 / 3;
    max-height: 46svh;
    object-position: 50% 10%;
  }
}
.humano .sec-label { color: var(--c-nebbioso); }
.humano .sec-label::after { background: color-mix(in srgb, var(--c-avorio) 25%, transparent); }
.humano h2 {
  color: var(--c-avorio);
  font-size: var(--fs-h2);
  margin-bottom: var(--space-3);
}
.humano h2 em { font-style: italic; color: var(--c-nebbioso); }
.humano p { color: color-mix(in srgb, var(--c-avorio) 88%, var(--c-nebbioso)); max-width: 36rem; }
.humano p + p { margin-top: var(--space-3); }

/* Formazione: lista sobria, credibilità senza vetrina */
.humano__certs {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--c-avorio) 25%, transparent);
  max-width: 36rem;
}
.humano__certs-title {
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--c-nebbioso);
  margin-bottom: var(--space-2);
}
.certs-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .7rem;
}
/* Due tessere corte una sotto l'altra, alte insieme quanto la vicina */
.certs-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: .7rem;
}
.cert {
  display: flex;
  align-items: center;
  gap: .8rem;
  height: 100%;
  padding: .7rem .9rem;
  border: 1px solid color-mix(in srgb, var(--c-avorio) 22%, transparent);
  border-radius: .9rem;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
a.cert:hover {
  border-color: color-mix(in srgb, var(--c-avorio) 60%, transparent);
  transform: translateY(-2px);
}
.cert i {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-avorio) 35%, transparent);
  font-family: var(--f-display);
  font-style: normal;
  font-size: .8rem;
  color: var(--c-avorio);
}
.cert strong {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-avorio);
  line-height: 1.3;
}
.cert em {
  display: block;
  font-style: normal;
  font-size: .75rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--c-avorio) 72%, var(--c-nebbioso));
}

/* ------------------------------------------------------------
   CONTATTO FINALE  (blocco: acf/footer-cta, form → CPT site_lead)
   ------------------------------------------------------------ */
.contatto {
  position: relative;
  background: var(--c-petrolio-scuro);
  color: var(--c-avorio);
  padding-block: var(--space-7);
  overflow: clip;
}
.contatto .word-bg {
  top: 4%;
  left: -2%;
  -webkit-text-stroke-color: color-mix(in srgb, var(--c-avorio) 14%, transparent);
}
.contatto .sec-label { color: var(--c-nebbioso); }
.contatto .sec-label::after { background: color-mix(in srgb, var(--c-avorio) 20%, transparent); }
.contatto__title {
  color: var(--c-avorio);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  margin-bottom: var(--space-3);
}
.contatto__title .hero__line { display: block; overflow: hidden; }
.contatto__lead {
  max-width: 34rem;
  margin-bottom: var(--space-5);
  color: color-mix(in srgb, var(--c-avorio) 86%, var(--c-nebbioso));
}
.contatto .container { position: relative; z-index: 1; }

/* Canali diretti: tre righe grandi, impossibili da non vedere */
.contact-rows {
  display: grid;
  border-top: 1px solid color-mix(in srgb, var(--c-avorio) 22%, transparent);
}
.contact-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label arrow" "value arrow";
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--c-avorio) 22%, transparent);
  text-decoration: none;
  color: var(--c-avorio);
  overflow: hidden;
  transition: padding-left var(--t-med) var(--ease-out);
}
/* Sipario che entra da sinistra al passaggio */
.contact-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c-avorio) 8%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-med) var(--ease-out);
}
.contact-row:hover::before { transform: scaleX(1); }
.contact-row:hover { padding-left: var(--space-4); }

.contact-row__label {
  grid-area: label;
  position: relative;
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--c-nebbioso);
}
.contact-row__value {
  grid-area: value;
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.contact-row__arrow {
  grid-area: arrow;
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(3rem, 6vw, 4.25rem);
  aspect-ratio: 1;
  border: 1.5px solid color-mix(in srgb, var(--c-avorio) 45%, transparent);
  border-radius: 50%;
  font-size: 1.35rem;
  transition: background var(--t-fast) ease, color var(--t-fast) ease,
              border-color var(--t-fast) ease;
}
.contact-row:hover .contact-row__arrow {
  background: var(--c-terracotta);
  border-color: var(--c-terracotta);
  color: var(--c-avorio);
}

/* ------------------------------------------------------------
   FOOTER  (template part: footer.html)
   ------------------------------------------------------------ */
.site-footer {
  background: var(--c-petrolio-scuro);
  color: color-mix(in srgb, var(--c-avorio) 75%, var(--c-nebbioso));
  border-top: 1px solid color-mix(in srgb, var(--c-avorio) 15%, transparent);
  padding-block: var(--space-5) var(--space-4);
  font-size: var(--fs-small);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: 1fr auto; }
}
.site-footer__claim {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  color: var(--c-avorio);
  margin-top: var(--space-2);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-footer a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.site-footer a:hover { color: var(--c-avorio); }
.site-footer__legal { margin-top: var(--space-4); opacity: .7; }
.site-footer__logo { height: 3.5rem; width: auto; filter: brightness(0) invert(1); opacity: .9; }

/* ------------------------------------------------------------
   PAGINA ARCHETIPO (stub) — vedi archetipo.html
   ------------------------------------------------------------ */
.quiz-hero {
  min-height: 70vh;
  display: grid;
  align-items: center;
  text-align: center;
  padding-block: calc(var(--space-6) + 4rem) var(--space-6);
}
.quiz-hero__inner { max-width: 46rem; margin-inline: auto; display: grid; gap: var(--space-3); justify-items: center; }
.quiz-hero h1 { font-size: clamp(2.5rem, 6.5vw, 4.5rem); }

.arch-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, 1fr);
  padding: 0;
  margin-top: var(--space-5);
}
@media (min-width: 48rem) { .arch-grid { grid-template-columns: repeat(4, 1fr); } }
.arch-grid li {
  list-style: none;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-soft);
  font-family: var(--f-display);
  font-size: 1.125rem;
  color: var(--c-petrolio);
  background: color-mix(in srgb, var(--c-avorio-alt) 45%, var(--c-avorio));
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.arch-grid li:hover { transform: translateY(-3px); border-color: var(--c-bordeaux); }
.quiz-note {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  font-style: italic;
}

/* ------------------------------------------------------------
   PAGINE LEGALI (privacy.html, cookie.html)
   ------------------------------------------------------------ */
.legal {
  padding-block: calc(var(--space-6) + 4rem) var(--space-6);
}
.legal h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: var(--space-2); }
.legal h2 { font-size: var(--fs-h3); margin: var(--space-4) 0 var(--space-2); }
.legal p, .legal li { color: var(--c-ink-soft); }
.legal p + p { margin-top: var(--space-2); }
.legal ul { padding-left: 1.2rem; }
.legal .bozza {
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1.5px dashed var(--c-terracotta);
  border-radius: var(--r-soft);
  font-size: var(--fs-small);
  color: var(--c-bordeaux);
  background: color-mix(in srgb, var(--c-cipria) 35%, var(--c-avorio));
}

/* ------------------------------------------------------------
   PAGINA LINKS (link in bio)
   ------------------------------------------------------------ */
.links-page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--space-3);
  padding: calc(var(--space-5)) var(--gutter) var(--space-5);
  position: relative;
  overflow: clip;
}
.links-page::before {
  content: "";
  position: fixed;
  right: -14vmax;
  bottom: -16vmax;
  width: 55vmax;
  aspect-ratio: 51 / 52;
  background: url("../img/favicon.svg") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
.links-page__logo { width: min(13rem, 55vw); height: auto; }
.links-page__bio {
  text-align: center;
  max-width: 26rem;
  color: var(--c-ink-soft);
}
.links-list {
  width: min(28rem, 100%);
  display: grid;
  gap: .8rem;
  padding: 0;
  margin: var(--space-2) 0 0;
  list-style: none;
}
.links-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.5rem;
  border: 1.5px solid var(--c-petrolio);
  border-radius: 100vmax;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-petrolio);
  background: color-mix(in srgb, var(--c-avorio-alt) 40%, var(--c-avorio));
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast),
              color var(--t-fast), border-color var(--t-fast);
}
.links-list a:hover {
  transform: translateY(-3px);
  background: var(--c-petrolio);
  color: var(--c-avorio);
}
.links-list a .fr { opacity: .6; }
.links-list a.is-primary {
  background: var(--c-terracotta);
  border-color: var(--c-terracotta);
  color: var(--c-avorio);
}
.links-list a.is-primary:hover { background: var(--c-bordeaux); border-color: var(--c-bordeaux); }
.links-page__note {
  max-width: 26rem;
  text-align: center;
  font-size: .8rem;
  color: var(--c-ink-soft);
  opacity: .8;
}
.links-page__foot {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-small);
}
.links-page__foot a { color: var(--c-ink-soft); }

/* ------------------------------------------------------------
   SCROLL CUE — invito allo scroll sempre presente
   Fisso in basso a destra, sparisce solo a fine pagina (gestito
   da main.js) e quando un overlay è aperto.
   ------------------------------------------------------------ */
.scroll-cue {
  position: fixed;
  z-index: 60;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vh, 1.75rem);
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1rem;
  border-radius: 100vmax;
  background: color-mix(in srgb, var(--c-petrolio) 92%, transparent);
  color: var(--c-avorio);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--t-med) ease, transform var(--t-med) var(--ease-out);
}
.scroll-cue i {
  position: relative;
  width: 1px;
  height: 1.1rem;
  background: color-mix(in srgb, var(--c-avorio) 35%, transparent);
  overflow: hidden;
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -50%;
  width: 100%;
  height: 50%;
  background: var(--c-avorio);
  animation: cue-drop 1.5s ease-in-out infinite;
}
@keyframes cue-drop {
  0%   { top: -50%; }
  70%  { top: 105%; }
  100% { top: 105%; }
}
.scroll-cue.is-hidden {
  opacity: 0;
  transform: translateY(.75rem);
}
html.has-loader .scroll-cue { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { display: none; }
}