/* ========================================
   CSS Variables & Reset
======================================== */
:root {
  /* Noble heritage palette */
  --background: hsl(40, 30%, 96%);
  --foreground: hsl(30, 20%, 15%);
  --card: hsl(40, 25%, 94%);
  --primary: hsl(350, 45%, 25%);
  --primary-foreground: hsl(40, 30%, 96%);
  --secondary: hsl(38, 35%, 90%);
  --muted: hsl(75, 15%, 85%);
  --muted-foreground: hsl(30, 15%, 38%); /* 5.4:1 su --background e --card (AA) */
  --accent: hsl(75, 25%, 35%);
  --border: hsl(35, 20%, 85%);
  --destructive: hsl(4, 62%, 38%); /* 5.7:1 su --background (AA) */

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Cardo', Georgia, serif;

  /* Transitions */
  --transition-slow: 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-gentle: 0.5s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.01em;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ========================================
   Header SEMPRE FISSO - CON EFFETTO SCROLL
======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.5s ease;
  pointer-events: none;
}

.header.scrolled {
  background: color-mix(in srgb, var(--background) 95%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  pointer-events: auto;
}

/* Logo container */
.combined-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--transition-gentle);
  max-width: 200px;
  pointer-events: auto;
  position: relative;
}

.logo-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

/* Container per i loghi simbolo */
.logo-symbol-container {
  position: relative;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stile per i loghi simbolo */
.logo-default, .logo-scrolled {
  width: 62px;
  height: 62px;
  object-fit: contain;
  transition: opacity 0.3s ease;
  position: absolute;
  left: 0;
  top: 0;
}

.logo-default {
  opacity: 1;
}

.logo-scrolled {
  opacity: 0;
}

.header.scrolled .logo-default {
  opacity: 0;
}

.header.scrolled .logo-scrolled {
  opacity: 1;
}

/* Container per i loghi testo */
.logo-text {
  margin-left: 1rem;
  position: relative;
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
}

.logo-text-default, .logo-text-scrolled {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  max-height: 50px;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.logo-text-default {
  opacity: 1;
}

.logo-text-scrolled {
  opacity: 0;
}

.header.scrolled .logo-text-default {
  opacity: 0;
}

.header.scrolled .logo-text-scrolled {
  opacity: 1;
}

/* Separatore verticale tra logo e testo */
.logo-main::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60px;
  background: color-mix(in srgb, var(--background) 30%, transparent);
  transition: all var(--transition-gentle);
}

.header.scrolled .logo-main::after {
  background: var(--border);
}

/* Navigation */
.nav {
  display: none;
  gap: 2.5rem;
  pointer-events: auto;
}


.nav-link {
  font-size: 0.875rem;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: color 0.3s ease;
  position: relative;
  padding: 0.5rem 0;
  pointer-events: auto;
  font-weight: 400;
}

.header.scrolled .nav-link {
  color: var(--foreground);
  text-shadow: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* La navbar naviga tra pagine, non tra sezioni: la pagina corrente e'
   marcata in HTML con aria-current, non calcolata allo scroll. */
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  z-index: 1001;
  pointer-events: auto;
}

.mobile-menu-btn span {
  width: 24px;
  height: 1px;
  background: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transition: all 0.3s ease;
}

.header.scrolled .mobile-menu-btn span {
  background: var(--foreground);
  filter: none;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}


/* ========================================
   Layout del contenuto principale
======================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.main-content {
  position: relative;
  z-index: 10;
  background: var(--background);
}

.section {
  padding: 6rem 0;
}

@media (min-width: 768px) {
  .section {
    padding: 8rem 0;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 10rem 0;
  }
}

/* ========================================
   Hero Section — breve: una pagina di servizio non ha bisogno di un
   pieno schermo come le pagine editoriali (Chi Siamo, Cosa Facciamo).
======================================== */
.hero-contatti {
  background-image: url("../../assets/hero-bg-1920.webp");
  background-size: cover;
  background-position: center;
  color: var(--primary-foreground);
  text-align: center;
  padding: 0;
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-contatti {
    min-height: 62vh;
  }
}

.hero-contatti::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  margin-top: 80px;
  padding: 2rem 1rem;
}

@media (min-width: 768px) {
  .hero-content {
    margin-top: 100px;
    padding: 4rem 2rem;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    margin-top: 120px;
    padding: 5rem 3rem;
  }
}

.hero-label {
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1.5rem;
}

.divider {
  width: 60px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  margin: 2rem auto;
}

.divider-center {
  margin-left: auto;
  margin-right: auto;
}

.hero-subtitle {
  font-size: 1.125rem;
  max-width: 44rem;
  margin: 0 auto;
  opacity: 0.9;
  line-height: 1.8;
  font-weight: 400;
}

.section-label {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
}

/* ========================================
   Sezione Contatti — form + info affiancati, come il vecchio footer
   ma come vero contenuto di pagina, su un pannello chiaro leggibile.
======================================== */
.contatti-main {
  background: var(--secondary);
}

.contatti-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .contatti-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 5rem;
    align-items: start;
  }
}

.contatti-form-panel {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 2.5rem;
  box-shadow: 0 20px 45px rgba(40, 15, 20, 0.08);
}

@media (min-width: 768px) {
  .contatti-form-panel {
    padding: 3rem;
  }
}

.contatti-form-panel .section-label {
  margin-bottom: 0.75rem;
}

.contatti-form-panel .section-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-bottom: 0;
}

.contatti-form-panel .divider {
  margin: 1.75rem 0 2rem;
}

.form-field {
  position: relative;
  margin-bottom: 1.75rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 400;
  transition: border-color 0.3s ease;
  resize: none;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--destructive);
}

.form-field label {
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-size: 1.1rem;
  color: var(--muted-foreground);
  transition: all 0.3s ease;
  pointer-events: none;
}

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
  top: -0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.form-field input[aria-invalid="true"]:not(:focus) + label,
.form-field textarea[aria-invalid="true"]:not(:focus) + label {
  color: var(--destructive);
}

.field-error {
  min-height: 1.2em;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--destructive);
}

.form-submit {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
  transition: color 0.3s ease, transform 0.3s ease;
  margin-top: 1rem;
  padding: 0.9rem 1.75rem;
  border: 1px solid var(--primary);
  border-radius: 0;
}

.form-submit:hover {
  color: var(--primary-foreground);
  background: var(--primary);
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-submit svg {
  transition: transform 0.3s ease;
}

.form-submit:hover svg {
  transform: translateX(4px);
}

.form-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  line-height: 1.7;
}

.contatti-info-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-bottom: 2rem;
  color: var(--primary);
}

.contatti-details {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.contatti-detail-label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.contatti-detail p {
  color: var(--muted-foreground);
  line-height: 1.7;
  font-size: 1.1rem;
}

.contatti-detail a {
  transition: color 0.3s ease;
}

.contatti-detail a:hover,
.contatti-detail a:focus-visible {
  color: var(--primary);
}

/* Footer — nessun sigillo e nessuna cornice a doppio filo: il footer
   attacca direttamente dopo l'ultima sezione, separato solo dal filo di
   bordo. Sfondo chiaro, niente fotografia: il tocco distintivo è
   tipografico. */
.footer {
  position: relative;
  background: var(--card);
  color: var(--foreground);
  padding: 5rem 0 3rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .footer {
    padding: 6rem 0 3rem;
  }
}

/* Senza il sigillo sopra non c'è più niente da scavalcare: il padding
   che gli faceva spazio sparisce con lui. */
.footer-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
  }

  .footer-info {
    order: 1;
  }

  .footer-form {
    order: 2;
  }
}

.footer-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 2rem;
  color: var(--primary);
}

.footer-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.footer-detail-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.footer-detail p {
  color: var(--muted-foreground);
  line-height: 1.6;
  font-size: 1.1rem;
}

/* 44px di area toccabile su chiamare e scrivere, senza aprire lo spazio
   tra le righe (il margin negativo riassorbe il padding). */
.footer-detail a {
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.45rem;
  transition: color 0.3s ease;
}

.footer-detail a:hover,
.footer-detail a:focus-visible {
  color: var(--primary);
}

.form-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.75rem;
  margin-bottom: 1.75rem;
  color: var(--primary);
}

.footer-form {
  position: relative;
}

.footer-quicklinks {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 2rem;
}

.footer-quicklink {
  display: inline-block;
  width: fit-content;
  padding: 0.65rem 0;
  min-height: 44px;
  font-size: 1.05rem;
  color: var(--muted-foreground);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.footer-quicklink:hover,
.footer-quicklink:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateX(4px);
}

.footer-quicklink:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Stessa famiglia di .btn/.form-submit: spigolo vivo, non più il cerchio
   icona-sola — il nome del social ora è scritto, non solo suggerito. */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  border-radius: 0;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .footer-quicklink:hover,
  .footer-quicklink:focus-visible {
    transform: none;
  }
}

/* Footer Bottom */
.footer-bottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* Il logotipo, centrato, sempre sulla propria riga sopra P.IVA/copyright
   — anche nel layout a riga di desktop (vedi flex-basis sotto). */
.footer-logo {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
}

.footer-logo img {
  height: 2rem;
  width: auto;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  color: var(--primary);
}

@media (min-width: 768px) {
  .footer-brand {
    justify-content: flex-start;
  }
}

.footer-piva {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .footer-legal {
    align-items: flex-end;
  }
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Firma di chi ha realizzato il sito: dicitura piu' logo, una riga sola.
   Resta sotto il copyright, ma leggibile — niente opacita' addosso: il
   passo indietro lo fa gia' il corpo piccolo e il colore attenuato. */
.footer-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.55rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .footer-credit {
    justify-content: flex-end;
  }
}

/* Segnaposto cliccabile: <a> senza href — e' la forma che l'HTML prevede
   per "qui ci andra' un link". Focus e puntatore ci sono gia', cosi'
   il giorno che arriva l'indirizzo basta aggiungere href. */
.footer-credit-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Al passaggio il marchio fa solo un piccolo "pop": nessuna linea sotto,
   solo scala e un filo di sollevamento. */
.footer-credit-logo:hover,
.footer-credit-logo:focus-visible {
  transform: translateY(-1px) scale(1.08);
}

.footer-credit-logo:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* Il file ha circa il 15% di margine interno sopra e sotto: l'altezza
   dichiarata qui e' quindi piu' alta del segno che si vede davvero.
   Sta alla pari con il corpo del testo accanto, un po' piu' presente. */
.footer-credit-logo img {
  display: block;
  height: 1.4rem;
  width: auto;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .footer-credit-logo {
    transition-duration: 0.01ms;
  }

  .footer-credit-logo:hover,
  .footer-credit-logo:focus-visible {
    transform: none;
  }
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
}

@media (min-width: 768px) {
  .footer-legal-links {
    justify-content: flex-end;
  }
}

.footer-legal-link {
  display: inline-block;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  background: none;
  border: none;
  padding: 0;
  /* Area di tocco alta 44px riassorbita dal margine negativo, cosi' il
     dito ha dove premere senza che la riga si allarghi. Le due
     dichiarazioni vanno dopo il "padding: 0" del reset del <button>:
     prima, veniva azzerata l'imbottitura e restava il margine negativo
     da solo — e su mobile, dove i link vanno a capo, le due righe si
     sovrapponevano. */
  padding-block: 0.7rem;
  margin-block: -0.55rem;
  cursor: pointer;
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
  color: var(--primary);
  text-decoration-color: currentColor;
}

.footer-legal-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ========================================
   Banner cookie — informativo: spiega cosa carica il sito da domini
   esterni (Google Fonts, script da CDN) e registra la scelta, ma non
   blocca nulla — il sito non usa cookie di profilazione/tracciamento.
======================================== */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  max-width: 640px;
  margin: 0 auto;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(40, 15, 20, 0.18);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.cookie-banner[data-visible="true"] {
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.cookie-banner-text a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.cookie-banner-btn {
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cookie-banner-btn-accept {
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}

.cookie-banner-btn-accept:hover {
  background: hsl(350, 45%, 20%);
  transform: translateY(-1px);
}

.cookie-banner-btn-reject {
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}

.cookie-banner-btn-reject:hover {
  color: var(--foreground);
  border-color: var(--muted-foreground);
}

.cookie-banner-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: opacity 0.3s ease;
    transform: none;
  }

  .cookie-banner-btn-accept:hover {
    transform: none;
  }
}

@media (min-width: 640px) {
  .cookie-banner {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 420px;
  }
}

/* ========================================
   Animations
======================================== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.8s ease forwards;
}

/* ========================================
   Responsive
======================================== */
@media (max-width: 768px) {
  .logo-default, .logo-scrolled {
    width: 60px;
    height: 60px;
  }

  .logo-main::after {
    height: 50px;
    right: -1rem;
  }

  .hero-contatti {
    min-height: 52vh;
  }

  .hero-content {
    margin-top: 60px;
  }

  .nav {
    display: none;
  }
}

@media (max-width: 480px) {
  .logo-default, .logo-scrolled {
    width: 50px;
    height: 50px;
  }

  .logo-main::after {
    height: 40px;
  }

  .hero-content {
    margin-top: 40px;
  }

  .section {
    padding: 4rem 0;
  }

  .contatti-form-panel {
    padding: 2rem 1.5rem;
  }
}

/* ========================================
   Mobile — menu a tutto schermo
======================================== */
@media (max-width: 767.98px) {
  .logo-symbol-container,
  .logo-default,
  .logo-scrolled {
    width: 52px;
    height: 52px;
  }

  .logo-main {
    gap: 0;
  }

  .logo-text {
    width: 0;
    height: 52px;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-14px);
    transition:
      width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      margin-left 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s,
      opacity 0.45s ease 0.12s;
  }

  .logo-text-default,
  .logo-text-scrolled {
    max-height: 44px;
    width: 140px;
  }

  .header.menu-open .logo-text {
    width: 140px;
    margin-left: 1rem;
    opacity: 1;
    transform: translateX(0);
  }

  .header.menu-open .logo-default,
  .header.menu-open .logo-text-default {
    opacity: 0;
  }

  .header.menu-open .logo-scrolled,
  .header.menu-open .logo-text-scrolled {
    opacity: 1;
  }

  .header.menu-open .mobile-menu-btn span {
    background: var(--primary);
    filter: none;
  }

  .logo-main::after {
    display: none;
  }

  .combined-logo {
    z-index: 1001;
  }

  .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 96px 1.5rem 3rem;
    background:
      radial-gradient(120% 90% at 12% 0%, hsl(38, 55%, 94%) 0%, transparent 62%),
      linear-gradient(168deg, var(--background) 0%, var(--secondary) 58%, hsl(35, 26%, 86%) 100%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    /* Un livello suo: il ritaglio dell'apertura ridipinge questo
       sfondo e basta, non la pagina che ha sotto. */
    will-change: clip-path, opacity;
    pointer-events: none;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease 0.14s,
      visibility 0s linear 0.62s;
  }

  .nav.nav-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.24s ease,
      visibility 0s linear 0s;
  }

  .nav .nav-link {
    color: var(--foreground);
    text-shadow: none;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.4s ease,
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      color 0.3s ease;
  }

  .nav .nav-link:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  }

  .nav .nav-link:active {
    color: var(--primary);
  }

  .nav .nav-link::after {
    display: none;
  }

  .nav.nav-open .nav-link {
    opacity: 1;
    transform: translateY(0);
  }

  .nav.nav-open .nav-link:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s; }
  .nav.nav-open .nav-link:nth-child(2) { transition-delay: 0.26s, 0.26s, 0s; }
  .nav.nav-open .nav-link:nth-child(3) { transition-delay: 0.32s, 0.32s, 0s; }
  .nav.nav-open .nav-link:nth-child(4) { transition-delay: 0.38s, 0.38s, 0s; }
  .nav.nav-open .nav-link:nth-child(5) { transition-delay: 0.44s, 0.44s, 0s; }

  .combined-logo {
    max-width: none;
  }
}

/* WCAG 2.4.7. Fuori da ogni media query apposta: la regola era intrappolata
   dentro un blocco a movimento ridotto e sul desktop non si applicava mai.
   Sull'header trasparente in cima alla hero il primary non si vede: il ring
   e' bianco finche' l'header non e' .scrolled. */
.nav .nav-link:focus-visible,
.combined-logo:focus-visible,
.mobile-menu-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 2px;
}

.header:not(.scrolled) .nav .nav-link:focus-visible,
.header:not(.scrolled) .combined-logo:focus-visible,
.header:not(.scrolled) .mobile-menu-btn:focus-visible {
  outline-color: var(--primary-foreground);
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .nav,
  .nav.nav-open,
  .logo-text,
  .nav .nav-link,
  .nav.nav-open .nav-link {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}


/* ========================================
   Menu a overlay anche da desktop
   L'hamburger e' l'unica porta della navigazione: sopra i 768px
   l'overlay riprende la logica mobile, con piu' respiro.
======================================== */
@media (min-width: 768px) {
  .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 140px clamp(3rem, 10vw, 10rem) 5rem;
    background:
      radial-gradient(110% 80% at 10% 0%, hsl(38, 55%, 94%) 0%, transparent 60%),
      linear-gradient(168deg, var(--background) 0%, var(--secondary) 58%, hsl(35, 26%, 86%) 100%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    /* Un livello suo: il ritaglio dell'apertura ridipinge questo
       sfondo e basta, non la pagina che ha sotto. */
    will-change: clip-path, opacity;
    pointer-events: none;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease 0.14s,
      visibility 0s linear 0.62s;
  }

  .nav.nav-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.24s ease,
      visibility 0s linear 0s;
  }

  .nav .nav-link {
    width: 100%;
    max-width: 780px;
    color: var(--foreground);
    text-shadow: none;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 1.1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.4s ease,
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      color 0.3s ease;
  }

  .nav .nav-link:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  }

  .nav .nav-link:hover {
    color: var(--primary);
  }

  /* L'underline desktop non ha senso su una lista a tutta pagina */
  .nav .nav-link::after {
    display: none;
  }

  .nav.nav-open .nav-link {
    opacity: 1;
    transform: translateY(0);
  }

  .nav.nav-open .nav-link:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s; }
  .nav.nav-open .nav-link:nth-child(2) { transition-delay: 0.26s, 0.26s, 0s; }
  .nav.nav-open .nav-link:nth-child(3) { transition-delay: 0.32s, 0.32s, 0s; }
  .nav.nav-open .nav-link:nth-child(4) { transition-delay: 0.38s, 0.38s, 0s; }
  .nav.nav-open .nav-link:nth-child(5) { transition-delay: 0.44s, 0.44s, 0s; }

  /* Il logo resta leggibile sopra il crema dell'overlay */
  .combined-logo {
    z-index: 1001;
  }

  .header.menu-open .logo-default,
  .header.menu-open .logo-text-default {
    opacity: 0;
  }

  .header.menu-open .logo-scrolled,
  .header.menu-open .logo-text-scrolled {
    opacity: 1;
  }

  .header.menu-open .logo-main::after {
    background: var(--border);
  }

  .header.menu-open .mobile-menu-btn span {
    background: var(--primary);
    filter: none;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .nav,
  .nav.nav-open,
  .nav .nav-link,
  .nav.nav-open .nav-link {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

/* ========================================
   Pagina corrente dentro l'overlay
   Porpora del sito piu' un segno a margine: il colore da solo
   non basterebbe a distinguere la voce attiva.
======================================== */
.nav .nav-link[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
  padding-left: 1.75rem;
}

.nav .nav-link[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
}

/* ========================================
   Lettering al centro della navbar
   Il simbolo resta a sinistra, il lettering sta al centro esatto della
   barra: si misura quindi sul contenitore dell'header, non sull'ancora
   del logo (per questo nell'HTML vive fuori da essa). Decorativo e
   inerte: il bersaglio "home" resta il simbolo.
======================================== */
.header-content {
  position: relative;
}

.logo-text {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 0;
  transform: translate(-50%, -50%);
  z-index: 1001;
  pointer-events: none;
}

/* La barra verticale separava il simbolo dal lettering che gli stava
   accanto. Ora che il lettering e' altrove non separa piu' niente. */
.logo-main::after {
  display: none;
}

/* Su telefono il lettering compare solo a menu aperto. Non si allarga
   piu' da destra del simbolo (era agganciato a lui): ora e' gia' al
   centro e semplicemente entra. */
@media (max-width: 767.98px) {
  .logo-text {
    width: 140px;
    height: 52px;
    margin-left: 0;
    overflow: visible;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
    transition:
      opacity 0.4s ease,
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .header.menu-open .logo-text {
    width: 140px;
    margin-left: 0;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .logo-text {
    transition-duration: 0.01ms;
  }
}

/* ========================================
   Il lampo blu al tocco su mobile
   Non e' una cosa sola, e "-webkit-tap-highlight-color" ne spegne solo
   la prima delle tre:
   1. l'highlight del tap — gia' spento nel reset, ribadito qui su html
      perche' la proprieta' si eredita e va dichiarata sulla radice;
   2. la selezione del testo — basta che il dito si sposti di un pixel
      mentre tocca e il browser seleziona la parola, dipingendola di blu.
      E' questa che di solito sopravvive al reset;
   3. il callout di iOS al tocco prolungato.
   Il testo dei contenuti resta selezionabile: si blocca solo la parte
   interattiva dell'interfaccia, dove selezionare non serve.
======================================== */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

a,
button,
label,
summary,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Telefono e mail si copiano: qui la selezione serve davvero. */
a[href^="tel:"],
a[href^="mailto:"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* E se una selezione avviene comunque, che sia nei colori del sito. */
::selection {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--foreground);
}

/* ========================================
   Blocco dello scorrimento quando l'overlay del menu e' aperto.
   Vedi il commento in "bloccaScorrimento" nel JS: si tiene ferma la
   pagina senza toglierla dal flusso, cosi' l'apertura del menu non
   paga un rilayout dell'intero documento nel fotogramma sbagliato.
   Il posto della barra resta prenotato sempre, cosi' toglierla non
   sposta di un pixel quello che c'e' sotto.
======================================== */
html {
  scrollbar-gutter: stable;
}

html.scorrimento-bloccato,
html.scorrimento-bloccato body {
  overflow: hidden;
}

/* Alcuni blocchi a piena larghezza si misurano con
   "--scrollbar: calc(100vw - 100%)". A barra nascosta quel calcolo
   diventa negativo e la sezione si allarga di quindici pixel proprio
   mentre il menu si apre: un rilayout di una sezione alta quanto lo
   schermo, nel fotogramma peggiore. Senza barra la compensazione da'
   fare e' zero, e messa qui il valore non oscilla. */
html.scorrimento-bloccato {
  --scrollbar: 0px;
}

/* L'overlay non passa lo scorrimento a quello che ha dietro. */
.nav {
  overscroll-behavior: contain;
}

/* L'indirizzo di sede e' un <address>: e' l'elemento che i motori di
   ricerca leggono come recapito dell'attivita'. Il corsivo di default
   qui non c'entra niente con il resto del footer. */
.footer-address {
  font-style: normal;
  line-height: inherit;
}