/* ==========================================================================
   COMPONENTI — header, nav, bottoni, form, footer, hero
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */
/* Fisso sopra la pagina. Logo sempre visibile; la barra con menu e lingua
   scende dopo il primo scroll (classe .is-scrolled aggiunta da main.js). */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
}
.site-header__bar {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  border-top: var(--rule);
  border-bottom: var(--rule);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.site-header__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.site-header__logo { justify-self: start; display: block; }
.site-header__logo { color: var(--color-accent); }
.site-header__logo svg { width: 47px; height: auto; }

.site-header.is-scrolled .site-header__bar,
.site-header.is-open .site-header__bar,
.site-header:focus-within .site-header__bar { transform: none; }

/* --- Navigazione desktop ------------------------------------------------- */
.site-nav {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-base), transform var(--dur-slow) var(--ease-out), visibility 0s var(--dur-base);
}
.site-header.is-scrolled .site-nav,
.site-header:focus-within .site-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.site-nav__list {
  display: flex;
  gap: var(--space-7);           /* 48px */
  margin: 0; padding: 0;
  list-style: none;
}
.site-nav__link {
  font-size: var(--fs-xs);
  font-weight: var(--fw-book);
  letter-spacing: var(--ls-nav);
  line-height: 2;
  color: var(--color-white);
  text-decoration: none;
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: var(--color-accent); }

.lang-switch {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);           /* 12px */
  height: 30px;
  padding-inline: var(--space-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-book);
  letter-spacing: var(--ls-nav);
  color: var(--color-text);
  text-decoration: none;
}
.lang-switch__flag svg { width: 20px; height: 20px; }

/* --- Hamburger ----------------------------------------------------------- */
.nav-toggle {
  display: none;
  position: relative;
  width: 30px; height: 26px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-white);
}
.nav-toggle::before {            /* area di tocco 44×44 */
  content: "";
  position: absolute;
  inset: -9px -7px;
}
.nav-toggle__bar {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}
.nav-toggle__bar:nth-of-type(1) { top: 0; }
.nav-toggle__bar:nth-of-type(2) { top: 12px; }
.nav-toggle__bar:nth-of-type(3) { top: 24px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(1) { transform: translateY(12px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(3) { transform: translateY(-12px) rotate(-45deg); }

/* --- Navigazione mobile (< 810px) ---------------------------------------- */
@media (max-width: 809px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .nav-toggle { display: block; justify-self: end; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-8) var(--gutter) var(--space-7);
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
  }
  .site-header.is-scrolled .site-nav,
  .site-header:focus-within .site-nav {   /* su mobile conta solo l'apertura */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
  }
  .site-header.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .site-nav__list { flex-direction: column; gap: var(--space-5); }
  .site-nav__link {
    font-size: var(--fs-title);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-title);
    line-height: var(--lh-none);
  }
  .lang-switch { justify-self: start; padding-inline: 0; font-size: var(--fs-sm); }
}

/* --- Bottoni ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.btn--primary { background: var(--color-accent); color: var(--color-white); }
.btn--primary:hover { background: var(--color-text); color: var(--color-bg); }
.btn--ghost { border-color: currentColor; }

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero .lead { margin-bottom: var(--space-6); }
.hero__animation { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* --- Form contatti (blocco "form") --------------------------------------- */
.contact-form { display: grid; gap: var(--space-7); margin-top: var(--space-7); }
.contact-form__group { display: grid; gap: var(--space-5); margin: 0; padding: 0; border: 0; min-width: 0; }
.contact-form__legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--fs-label); font-weight: var(--fw-light); line-height: 1.5; }
.contact-form__legend strong { font-weight: var(--fw-medium); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--fs-caption); color: #888; }
.field input:not([type="checkbox"]),
.field textarea,
.field select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--fs-label);
  color: var(--color-text);
  background: var(--color-ghost);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color var(--dur-base);
}
.field textarea { resize: vertical; line-height: 1.4; }
.field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.field select:invalid { color: #888; }
.field ::placeholder { color: #808080; opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-accent); outline: none; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-3); }
.field--check input { width: 18px; height: 18px; margin: 0.15em 0 0; accent-color: var(--color-accent); }
.field--check label { line-height: 1.4; }
.contact-form__submit { justify-self: start; margin-left: 4px; border: 0; background: none; cursor: pointer; font-family: inherit; }
.contact-form__success { margin: 0; color: var(--color-accent); font-weight: var(--fw-medium); }

/* --- Footer -------------------------------------------------------------- */
.site-footer { padding-top: var(--space-5); }

.site-footer__panel {
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-footer) var(--radius-footer) 0 0;
  padding-top: var(--section-title-y);         /* 60 → 120 */
  overflow: hidden;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-8) var(--space-7);
}
@media (min-width: 810px) {
  .site-footer__grid { grid-template-columns: 1fr minmax(240px, 300px); }
}

.site-footer__heading {
  margin: 0 0 var(--space-7);
  font-family: var(--font-alt);
  font-size: 1.375rem;                         /* 22px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: var(--color-white);
}

.site-footer__address {
  display: grid;
  gap: 10px;
  padding-inline: var(--space-3);
  font-style: normal;
  font-size: var(--fs-xs);                     /* 15px */
  font-weight: var(--fw-book);
  line-height: 1.5;
}
.site-footer__address strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);                         /* 24px */
  margin: 0; padding: 0;
  list-style: none;
}
.site-footer__links--row {
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: var(--space-7);
}

/* Link con icona: al passaggio compaiono i segni di taglio tratteggiati
   e l'icona scorre verso l'alto, come su Framer. */
.footer-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-white);
  text-decoration: none;
}
.footer-link:hover { color: var(--color-white); }
.footer-link__icon {
  width: 24px; height: 24px;
  overflow: hidden;
  flex-shrink: 0;
}
.footer-link__icon-track {
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-slow) var(--ease-out);
}
.footer-link__icon svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.footer-link:hover .footer-link__icon-track,
.footer-link:focus-visible .footer-link__icon-track { transform: translateY(-50%); }

.crop-marks,
.crop-marks::before,
.crop-marks::after { position: absolute; pointer-events: none; }
.crop-marks { inset: 0; }
.crop-marks::before {                          /* linee orizzontali, sporgono di 12px */
  content: "";
  inset: 0 calc(var(--space-3) * -1);
  border-block: 1px dashed currentColor;
  transform: scaleX(0.6);
}
.crop-marks::after {                           /* linee verticali, sporgono di 12px */
  content: "";
  inset: calc(var(--space-3) * -1) 0;
  border-inline: 1px dashed currentColor;
  transform: scaleY(0.6);
}
.crop-marks::before, .crop-marks::after {
  opacity: 0;
  transition: opacity var(--dur-base), transform var(--dur-slow) var(--ease-out);
}
.footer-link:hover .crop-marks::before,
.footer-link:hover .crop-marks::after,
.footer-link:focus-visible .crop-marks::before,
.footer-link:focus-visible .crop-marks::after { opacity: 1; transform: none; }
.footer-link:focus-visible { outline-color: var(--color-white); }

.site-footer__meta {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-9);
  padding-block: var(--space-5) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-book);
}
.site-footer__meta p { margin: 0; }
/* Link legali: a sinistra, il resto della riga resta a destra */
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 auto 0 0; padding: 0; list-style: none; }
.site-footer__legal a,
.site-footer__legal button {
  padding: 0;
  font: inherit;
  color: var(--color-white);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.site-footer__legal a:hover,
.site-footer__legal button:hover { color: var(--color-bg); }
@media (max-width: 809px) { .site-footer__legal { flex-basis: 100%; } }
.site-footer__meta strong { font-weight: var(--fw-medium); }

/* Logo finale quasi a tutto schermo: unica eccezione al limite di 1200px */
.site-footer__logo {
  padding-inline: var(--gutter);
  color: var(--color-bg);                      /* logo antracite sul rosso */
}
.site-footer__logo svg { width: 100%; height: auto; }

/* ==========================================================================
   ELEMENTI CONDIVISI DALLE PAGINE
   ========================================================================== */

/* --- CTA rossa a parallelogramma ("Scopri perché →") --------------------- */
.btn-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: clamp(1.125rem, 0.98rem + 0.57vw, 1.5rem);   /* 18 → 24 */
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-white);
  text-decoration: none;
}
.btn-cta::before {                               /* fondo inclinato di 11° */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-accent);
  transform: skewX(-11deg);
  transition: background var(--dur-base);
}
.btn-cta:hover { color: var(--color-white); }
.btn-cta:hover::before { background: var(--color-accent-dark); }
.btn-cta__arrow { display: block; width: 15px; height: 15px; }
.btn-cta__arrow svg {
  width: 100%; height: 100%;
  fill: currentColor;
  transform: rotate(-90deg);                     /* la freccia originale punta in basso */
  transition: transform var(--dur-base) var(--ease-out);
}
.btn-cta:hover .btn-cta__arrow svg { transform: rotate(-90deg) translateY(4px); }
.btn-cta:focus-visible { outline-offset: 6px; }

/* --- Etichetta di sezione (piccola, rossa, resta agganciata in alto) -----
   Da 1024px in su l'etichetta occupa una colonna laterale riservata (--rail):
   resta agganciata mentre scorri la sezione e i contenuti partono dopo la
   colonna, quindi non ci passa mai sopra. Sotto i 1024px sta semplicemente
   sopra i contenuti, senza restare agganciata. */
:root { --rail: clamp(110px, 6vw + 40px, 140px); }

.has-label { position: relative; }
.section-label {
  padding-top: var(--section-title-y);           /* 60 → 120 */
  padding-bottom: var(--space-5);
}
.section-label p {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-accent);
}
.section-label--right p { text-align: right; }

@media (min-width: 1024px) {
  .section-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0;
    pointer-events: none;
  }
  .section-label .container { height: 100%; padding-top: var(--section-title-y); }
  .section-label p {
    position: sticky;
    top: var(--section-title-y);
    width: var(--rail);
  }
  .section-label--right p { margin-left: auto; }

  /* spazio sopra i contenuti, come prima (etichetta + respiro) */
  .has-label { padding-top: calc(var(--section-title-y) + 1.3em + var(--space-5)); }
  /* i contenuti lasciano libera la colonna dell'etichetta */
  .has-label > .container { padding-left: calc(var(--gutter) + var(--rail)); }
  .has-label--right > .container { padding-left: var(--gutter); padding-right: calc(var(--gutter) + var(--rail)); }
}

/* --- Titoli ricorrenti --------------------------------------------------- */
.statement {                                     /* frasi manifesto 27 → 34 */
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}
.statement--white { color: var(--color-white); }

.big-title {                                     /* 43 → 60 */
  margin: 0;
  text-wrap: pretty;
  font-size: var(--fs-title);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  letter-spacing: -0.03em;
  color: var(--color-text);
}

/* --- Pallino a righe (il "." del logo) ----------------------------------- */
.stripe-dot {
  display: block;
  width: 34px; height: 34px;
  color: var(--color-accent);
}
.stripe-dot svg {
  width: 100%; height: 100%;
  animation: spin 15s linear infinite;           /* un giro ogni 15 s, come su Framer */
}

/* Rotazione continua delle icone a righe (piccole e grandi) */
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .stripe-dot svg, .services__badge svg { animation: none; }
}

/* --- Segni di taglio sempre visibili (immagini, card) -------------------- */
.crop-marks--on { color: var(--color-accent); }
.crop-marks--on::before { inset: 0 -24px; opacity: 1; transform: none; }
.crop-marks--on::after  { inset: -24px 0; opacity: 1; transform: none; }

.framed { position: relative; }
.framed img { width: 100%; height: auto; }


/* ==========================================================================
   ANIMAZIONI ALLO SCROLL  —  data-reveal="…"  (logica in main.js)
   Il blocco entra quando raggiunge il punto stabilito dello schermo e torna
   allo stato iniziale se si risale, così l'animazione si rivede ogni volta.
   Gli stati iniziali valgono solo con JavaScript attivo (classe .js su <html>).
   ========================================================================== */
.js [data-reveal] {
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);   /* cascata: --i = posizione */
}

/* Da sinistra, partendo da fuori schermo (Chi siamo, frasi manifesto) */
.js [data-reveal="left"]:not(.is-in) {
  opacity: 0;
  transform: translateX(-30vw);
}

/* Da destra, partendo da fuori schermo (frasi "Se stai cercando…", "Se vuoi un team…").
   La sezione che lo contiene deve avere overflow-x: clip. */
.js [data-reveal="right"]:not(.is-in) {
  opacity: 0;
  transform: translateX(30vw);
}

/* Servizi: come "right", con in più una leggera riduzione del 5% */
.js [data-reveal="right-zoom"] { transform-origin: left center; }
.js [data-reveal="right-zoom"]:not(.is-in) {
  opacity: 0;
  transform: translateX(30vw) scale(0.95);
}

/* Cascata dall'alto con dissolvenza (Risultati, Per chi lavoriamo) */
.js [data-reveal="drop"]:not(.is-in) {
  opacity: 0;
  transform: translateY(-32px);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ==========================================================================
   BANNER COOKIE (vanilla-cookieconsent) — colori e font del sito
   ========================================================================== */
#cc-main {
  --cc-font-family: var(--font-sans);
  --cc-modal-border-radius: 0;
  --cc-btn-border-radius: 0;
  --cc-bg: #2f2a2c;
  --cc-primary-color: var(--color-white);
  --cc-secondary-color: var(--color-text);
  --cc-btn-primary-bg: var(--color-accent);
  --cc-btn-primary-color: var(--color-white);
  --cc-btn-primary-border-color: var(--color-accent);
  --cc-btn-primary-hover-bg: var(--color-accent-dark);
  --cc-btn-primary-hover-color: var(--color-white);
  --cc-btn-primary-hover-border-color: var(--color-accent-dark);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--color-white);
  --cc-btn-secondary-border-color: var(--color-accent);
  --cc-btn-secondary-hover-bg: var(--color-accent);
  --cc-btn-secondary-hover-color: var(--color-white);
  --cc-btn-secondary-hover-border-color: var(--color-accent);
  --cc-separator-border-color: rgba(255, 0, 88, 0.35);
  --cc-toggle-on-bg: var(--color-accent);
  --cc-toggle-off-bg: #5a5557;
  --cc-toggle-on-knob-bg: var(--color-white);
  --cc-toggle-off-knob-bg: var(--color-white);
  --cc-toggle-readonly-bg: #7a2a46;
  --cc-toggle-readonly-knob-bg: var(--color-white);
  --cc-section-category-border: rgba(255, 0, 88, 0.35);
  --cc-cookie-category-block-bg: #3a3537;
  --cc-cookie-category-block-border: #3a3537;
  --cc-cookie-category-block-hover-bg: #433e40;
  --cc-cookie-category-block-hover-border: #433e40;
  --cc-cookie-category-expanded-block-bg: #3a3537;
  --cc-cookie-category-expanded-block-hover-bg: #433e40;
  --cc-overlay-bg: rgba(20, 17, 18, 0.75);
  --cc-footer-bg: #2a2527;
  --cc-footer-color: var(--color-text);
  --cc-footer-border-color: rgba(255, 0, 88, 0.35);
  --cc-link-color: var(--color-accent);
  font-stretch: var(--font-stretch);
}
#cc-main .cm,
#cc-main .pm { border: 1px dashed var(--color-accent); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
#cc-main .cm__title,
#cc-main .pm__title { font-weight: var(--fw-medium); letter-spacing: -0.01em; }
#cc-main .cm__btn,
#cc-main .pm__btn { font-weight: var(--fw-medium); }

/* ==========================================================================
   PAGINE LEGALI (privacy, cookie) — layouts/legal.njk
   ========================================================================== */
.legal__inner { max-width: calc(820px + 2 * var(--gutter)); padding-block: calc(var(--header-h) + var(--space-8)) var(--block-y); }
.legal__title { margin: 0 0 var(--space-3); font-size: var(--fs-title); color: var(--color-white); }
.legal__updated { margin: 0 0 var(--space-8); font-size: var(--fs-label); color: var(--color-muted); }
.legal__body { font-size: var(--fs-body-sm); font-weight: var(--fw-light); line-height: var(--lh-body); }
.legal__body h2 { margin: var(--space-8) 0 var(--space-4); padding-top: var(--space-5); border-top: var(--rule); font-size: var(--fs-h4); color: var(--color-white); }
.legal__body p, .legal__body ul { margin: 0 0 var(--space-4); }
.legal__body ul { padding-left: 1.2em; }
.legal__body li { margin-bottom: var(--space-2); }
.legal__body strong { font-weight: var(--fw-medium); color: var(--color-white); }
.legal__body a { color: var(--color-accent); text-underline-offset: 3px; }
.legal__body code { font-family: ui-monospace, Menlo, monospace; font-size: 0.85em; color: var(--color-white); }
.legal__body table { width: 100%; margin: 0 0 var(--space-6); border-collapse: collapse; font-size: var(--fs-label); }
.legal__body th, .legal__body td { padding: var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px dashed rgba(255, 0, 88, 0.35); }
.legal__body th { font-weight: var(--fw-medium); color: var(--color-white); }
@media (max-width: 809px) {
  .legal__body table { display: block; overflow-x: auto; }
}
.legal__cookie-btn {
  padding: 0; font: inherit; color: var(--color-accent); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}