/* =========================================================================
   Me insieme a Te — Marco Mattio
   Foglio di stile globale
   Design tokens dal mockup Figma "Me insieme a Te — Sito Web"
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Colori */
  --bg: #F2EDE1;          /* avorio – sfondo principale */
  --bg-clean: #FFFFFF;    /* bianco pulito */
  --surface: #1E3556;     /* navy – sezioni scure */
  --surface-2: #26436D;   /* navy più chiaro – card su navy */
  --surface-3: #16283F;   /* navy più profondo – footer / dettagli */
  --accent: #E8C547;      /* giallo */
  --accent-ink: #C9993A;  /* oro – label, dettagli */
  --text-strong: #1E3556; /* titoli su chiaro */
  --text: #3D3830;        /* corpo su chiaro */
  --text-soft: #6a6459;   /* corpo attenuato su chiaro */
  --text-light: #FFFFFF;   /* corpo attenuato su chiaro */
  --on-dark: #F4EFE4;     /* testo su navy */
  --on-dark-soft: rgba(244, 239, 228, 0.72);
  --on-dark-faint: rgba(244, 239, 228, 0.42);
  --line: rgba(30, 53, 86, 0.14);
  --line-dark: rgba(244, 239, 228, 0.14);

  /* Tipografia */
  --font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", "Lora", Georgia, "Times New Roman", serif;
  --font-label: "DM Sans", sans-serif;

  /* Misure */
  --container: 1200px;
  --container-narrow: 820px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Spazi verticali di sezione */
  --section-y: clamp(4rem, 8vw, 8rem);

  /* Ombre */
  --shadow-sm: 0 2px 8px rgba(30, 53, 86, 0.06);
  --shadow-md: 0 18px 44px rgba(30, 53, 86, 0.10);

  /* Transizioni */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------
   2. Reset / base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
picture { display: block; max-width: 100%; }

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

button { font: inherit; cursor: pointer; }

ul { list-style: none; padding: 0; }

::selection {
  background: var(--accent);
  color: var(--surface);
}

/* -------------------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: var(--section-y); position: relative; }

/* Bande colore */
.band-cream   { background: var(--bg); color: var(--text); }
.band-clean   { background: var(--bg-clean); color: var(--text); }
.band-navy    { background: var(--surface); color: var(--on-dark); }
.band-navy-deep { background: var(--surface-3); color: var(--on-dark); }

/* Texture: griglia blueprint su navy */
.band-navy.has-grid,
.band-navy-deep.has-grid { position: relative; }
.band-navy.has-grid::before,
.band-navy-deep.has-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244, 239, 228, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 239, 228, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* Texture: punti su avorio */
.band-cream.has-dots::before,
.band-clean.has-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(30, 53, 86, 0.10) 1.4px, transparent 1.4px);
  background-size: 30px 30px;
  pointer-events: none;
  opacity: 0.6;
}
.band-cream.has-dots > .container,
.band-clean.has-dots > .container { position: relative; }

/* -------------------------------------------------------------------------
   4. Tipografia
   ------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.band-navy .eyebrow,
.band-navy-deep .eyebrow { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}
.band-navy h1, .band-navy h2, .band-navy h3, .band-navy h4,
.band-navy-deep h1, .band-navy-deep h2, .band-navy-deep h3 { color: var(--on-dark); }

.h-display {
  font-weight: 800;
  font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
h2, .h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
h3, .h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); }

.serif-display {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  line-height: 1.2;
  color: var(--text-strong);
}
.band-navy .serif-display { color: var(--accent); }

.lead {
  font-size: clamp(1.35rem, 1rem + 0.75vw, 1.5rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 46ch;
  font-weight: 400;
}
.band-navy .lead, .band-navy-deep .lead { color: var(--on-dark-soft); }

p + p { margin-top: 1rem; }
p .accent { color: var(--accent-ink); }
strong, b { font-weight: 600; color: inherit; }
.band-navy strong { color: var(--on-dark); }

.text-accent { color: var(--accent); }
.text-gold { color: var(--accent-ink); }

/* Citazione grande (manifesto) */
.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1.8vw, 2.15rem);
  line-height: 1.4;
  color: var(--text-strong);
}
.band-navy .quote, .band-navy-deep .quote { color: var(--on-dark); }
.quote .hl { color: var(--accent); font-weight: 600; font-style: italic; }

/* -------------------------------------------------------------------------
   5. Bottoni
   ------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--surface);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.95em 1.6em;
  border: 0;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(232, 197, 71, 0.35); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--on-dark);
  border: 1px solid var(--line-dark);
}
.btn--ghost:hover { box-shadow: none; background: rgba(244, 239, 228, 0.08); }

.btn--outline-ink {
  --btn-bg: transparent;
  --btn-fg: var(--text-strong);
  border: 1px solid var(--line);
}
.btn--outline-ink:hover { box-shadow: none; background: rgba(30, 53, 86, 0.05); }

.btn-arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* Link testuale con freccia */
.link-inline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.link-inline:hover { border-color: currentColor; }

/* -------------------------------------------------------------------------
   6. Header / navbar
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--line-dark);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--on-dark);
  letter-spacing: -0.01em;
}
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name .hl { color: var(--accent); font-weight: 700; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.2rem);
}
.nav__links a {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--on-dark-soft);
  transition: color 0.2s var(--ease);
  position: relative;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--on-dark); }
.nav__links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav__cta { margin-left: 0.4rem; }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  position: relative;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 2px;
  background: var(--on-dark);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle span::before { transform: translate(-50%, -7px); }
.nav__toggle span::after  { transform: translate(-50%, 5px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* -------------------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------------------- */
.hero { position: relative; background: var(--surface); overflow: hidden; }
.hero__inner { position: relative; z-index: 2; }

/* Hero homepage con immagine aurora */
.hero--image {
  min-height: min(88vh, 760px);
  display: flex;
  align-items: flex-end;
}
.hero--image .hero__bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero--image .hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero--image .hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 26, 43, 0.55) 0%, rgba(15, 26, 43, 0.35) 35%, rgba(15, 26, 43, 0.92) 100%),
    linear-gradient(90deg, rgba(15, 26, 43, 0.85) 0%, rgba(15, 26, 43, 0.35) 55%, rgba(15, 26, 43, 0.05) 85%);
}
.hero--image .hero__inner { padding-block: clamp(3rem, 8vw, 6rem); width: 100%; }

.hero__title { max-width: 16ch; margin-bottom: 1.5rem; }
.hero .hero__title { color: var(--on-dark); }
.hero .eyebrow { color: var(--accent); }
.hero__title .line-2 { color: var(--accent); display: block; }
.hero p.lead { color: var(--on-dark); }
.hero--image .hero__title { text-shadow: 0 2px 24px rgba(10, 18, 30, 0.55); }
.hero--image p.lead { text-shadow: 0 1px 16px rgba(10, 18, 30, 0.6); }
.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.hero__scroll {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.hero__scroll .small { font-size: 0.75rem; color: var(--text-light); }
/* Freccia "scorri": icona SVG al posto del glifo ↓ (il testo resta come fallback) */
.arrow-down {
  display: inline-block;
  width: 24px;
  height: 18px;
  background: url("https://www.meinsiemeate.it/wp-content/uploads/2026/07/arrow.svg") center / contain no-repeat;
  text-indent: -9999px;   /* nasconde il carattere ↓ */
  overflow: hidden;
}
.hero__scroll .arrow-down { animation: bob 1.8s ease-in-out infinite; margin-top: 0.4rem; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(4px);} }

/* Hero pagina interna (navy semplice) */
.hero--plain { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.hero--plain .hero__title { max-width: 20ch; margin-bottom: 1.25rem; }

/* Hero ritratto (Chi Sono) */
.hero--portrait {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  gap: 0;
  min-height: min(80vh, 720px);
}
.hero--portrait .hero__inner {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  align-self: center;
}
.hero__portrait-media {
  position: relative;
  background:
    radial-gradient(120% 90% at 70% 40%, rgba(64, 224, 208, 0.5), rgba(30, 53, 86, 0) 60%),
    linear-gradient(160deg, #123 0%, #0d5c66 55%, #1E3556 100%);
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   8. Placeholder immagini (in attesa dei file definitivi)
   ------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 0.5rem;
  color: var(--on-dark-faint);
  border: 1px dashed var(--line-dark);
  border-radius: var(--radius-lg);
  min-height: 220px;
  overflow: hidden;
  background: rgba(244, 239, 228, 0.03);
}
.ph--light {
  color: rgba(30, 53, 86, 0.4);
  border-color: var(--line);
  background: rgba(30, 53, 86, 0.03);
}
.ph__num {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  color: rgba(244, 239, 228, 0.14);
}
.ph--light .ph__num { color: rgba(30, 53, 86, 0.12); }
.ph__label {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.5;
}
.ph--portrait {
  position: absolute; inset: 0;
  border: 0; border-radius: 0;
  color: rgba(244, 239, 228, 0.7);
  justify-content: flex-end;
  padding-bottom: 2rem;
}

/* -------------------------------------------------------------------------
   9. Griglie e card generiche
   ------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head p { margin-top: 1.1rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.card {
  background: var(--bg-clean);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.card--cream { background: var(--bg); box-shadow: none; }
.card--navy {
  background: var(--surface-2);
  color: var(--on-dark);
  box-shadow: none;
}
.card--navy h3 { color: var(--on-dark); }
.card--navy p { color: var(--on-dark-soft); }
.card__kicker {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.75rem;
  display: block;
}
.card--navy .card__kicker { color: var(--accent); }
.card__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent-ink);
  margin-bottom: 0.75rem;
}
.card h3 { margin-bottom: 0.75rem; }
.card p { font-size: 0.98rem; line-height: 1.65; }

/* Colonne testo semplici (visione/missione) */
.col-note .card__kicker { margin-bottom: 1rem; }
.col-note p { font-size: 1.05rem; line-height: 1.7; }

/* -------------------------------------------------------------------------
   10. Stats
   ------------------------------------------------------------------------- */
.stats { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.band-navy .stat__num { color: var(--on-dark); }
.stat__label {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent-ink);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
   11. Blocco "il Copione" – colonne su navy
   ------------------------------------------------------------------------- */
.mech-col { }
.mech-col .card__kicker { color: var(--accent); }
.mech-col h3 { color: var(--on-dark); margin-bottom: 0.9rem; font-size: 1.1rem; }
.mech-col p { color: var(--on-dark-soft); font-size: 0.98rem; }

/* Quote block con virgolette */
.pullquote {
  text-align: center;
  max-width: 40ch;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  position: relative;
}
.pullquote__mark {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 0;
  color: var(--accent);
  display: block;
}
.pullquote .quote { margin-top: 1.5rem; }

/* -------------------------------------------------------------------------
   12. Deliverable (Il Consegnabile) – lista + media
   ------------------------------------------------------------------------- */
.deliver {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.deliver__list { display: grid; gap: 1.25rem; }
.deliver__media { position: sticky; top: 100px; }
.deliver__media .ph { min-height: 420px; }

/* -------------------------------------------------------------------------
   13. Manifesto – principi alternati
   ------------------------------------------------------------------------- */
.principle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.principle__body { max-width: 46ch; }
.principle__index {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.band-cream .principle__index { color: var(--accent-ink); }
.principle h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); margin-bottom: 1rem; }
.principle__media .ph { min-height: 260px; }
.principle:nth-child(even) .principle__media { order: -1; }

/* -------------------------------------------------------------------------
   14. Recensioni
   ------------------------------------------------------------------------- */
.rating {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 2rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--text-soft);
}
.stars { color: var(--accent-ink); letter-spacing: 2px; }
.review__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; }
.review__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-ink);
  color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex: none;
}
.review__name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-strong); line-height: 1.2; }
.review__role { font-family: var(--font-label); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.review__stars { color: var(--accent-ink); letter-spacing: 1px; margin-bottom: 0.6rem; font-size: 0.85rem; }
.review p { font-size: 0.95rem; line-height: 1.6; }

/* -------------------------------------------------------------------------
   15. CTA finale
   ------------------------------------------------------------------------- */
.cta-final { text-align: center; }
.cta-final h2 { max-width: 22ch; margin-inline: auto; }
.cta-final p { max-width: 46ch; margin-inline: auto; margin-top: 1.1rem; }
.cta-final .btn { margin-top: 2rem; }
.cta-final .fine { font-size: 0.9rem; margin-top: 1.75rem; color: var(--text-soft); max-width: 52ch; margin-inline: auto; }
.band-navy .cta-final .fine, .band-navy-deep .cta-final .fine { color: var(--on-dark-soft); }

/* -------------------------------------------------------------------------
   16. Form (Incontriamoci)
   ------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-copy .quote { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); margin-top: 1.75rem; border-left: 3px solid var(--accent); padding-left: 1.25rem; }

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-strong);
}
.field input,
.field textarea {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-clean);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 197, 71, 0.25);
}
.field--check { grid-auto-flow: column; grid-template-columns: auto 1fr; align-items: start; gap: 0.65rem; }
.field--check input { width: 18px; height: 18px; margin-top: 3px; box-shadow: none; accent-color: var(--accent-ink); }
.field--check span { font-family: var(--font-serif); font-size: 0.85rem; color: var(--text-soft); line-height: 1.5; }
.form .btn { justify-self: start; margin-top: 0.5rem; }
.form__status {
  font-family: var(--font-display);
  font-size: 0.9rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(30, 53, 86, 0.06);
  color: var(--text-strong);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status.is-ok { background: rgba(232, 197, 71, 0.2); color: var(--surface); }
.form__status.is-error { background: rgba(201, 90, 58, 0.14); color: #9a3b28; }

/* Steps "cosa succede dopo" */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.step__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--accent-ink);
  line-height: 1;
  margin-bottom: 1rem;
}
.step h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.step p { font-size: 0.98rem; }

/* -------------------------------------------------------------------------
   17. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-3);
  color: var(--on-dark);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 2.5rem;
}
.footer__brand .brand { margin-bottom: 1.1rem; }
.footer__brand p { font-size: 0.9rem; color: var(--on-dark-soft); line-height: 1.6; max-width: 32ch; }
.footer__brand p + p { margin-top: 0.75rem; }
.footer__col h4 {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.footer__col ul { display: grid; gap: 0.65rem; }
.footer__col a {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--on-dark-soft);
  transition: color 0.2s var(--ease);
}
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--on-dark-faint);
}

/* -------------------------------------------------------------------------
   18. Animazioni (GSAP + fallback)
   ------------------------------------------------------------------------- */
/* Stato iniziale: gestito da JS solo se GSAP è presente.
   Se JS/GSAP non caricano, il contenuto resta visibile (no FOUC nascosto).
   NB: le animazioni sono pilotate da CLASSE (non da data-attribute), così ogni
   elemento resta editabile in Elementor tramite il campo "Classi CSS":
     .mit-anim + .mit-anim--up|--down|--left|--right → reveal on-scroll del widget
     .mit-stagger  con figli .mit-stagger-item        → reveal in sequenza (stagger)
     .mit-count[data-to]                              → contatore numerico animato
     .mit-parallax                                    → parallax leggero (hero) */
.js-gsap .mit-anim { opacity: 0; }
.js-gsap .mit-anim--up { transform: translateY(28px); }
.js-gsap .mit-anim--down { transform: translateY(-28px); }
.js-gsap .mit-anim--left { transform: translateX(28px); }
.js-gsap .mit-anim--right { transform: translateX(-28px); }
.js-gsap .mit-stagger > .mit-stagger-item { opacity: 0; }

/* Retrocompatibilità: gli hook originali basati su data-anim restano validi */
.js-gsap [data-anim] { opacity: 0; }
.js-gsap [data-anim="fade-up"] { transform: translateY(28px); }
.js-gsap [data-anim="fade-left"] { transform: translateX(28px); }
.js-gsap [data-anim="fade-right"] { transform: translateX(-28px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-gsap .mit-anim,
  .js-gsap .mit-stagger > .mit-stagger-item,
  .js-gsap [data-anim] { opacity: 1 !important; transform: none !important; }
  .hero__scroll .arrow-down { animation: none; }
}

/* -------------------------------------------------------------------------
   19. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero--portrait { grid-template-columns: 1fr; }
  .hero__portrait-media { min-height: 360px; order: -1; }
  .deliver { grid-template-columns: 1fr; }
  .deliver__media { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .principle { grid-template-columns: 1fr; gap: 1.5rem; }
  .principle__media { order: -1 !important; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav__toggle { display: inline-block; }
  .nav__links {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line-dark);
    padding: 0.5rem 1.25rem 1.5rem;
    transform: translateY(-120%);
    transition: transform 0.4s var(--ease);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  }
  .nav__links.is-open { transform: translateY(0); }
  .nav__links a { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--line-dark); font-size: 1.05rem; }
  .nav__links a[aria-current="page"]::after { display: none; }
  .nav__cta { margin: 1rem 0 0; text-align: center; justify-content: center; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats.grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .contact-copy .col-note { }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions { gap: 1.2rem; }
}

/* =========================================================================
   20. Integrazione Elementor / Theme  (Me insieme a Te)
   Classi "atom" aggiuntive richiamate dai template Elementor.
   ========================================================================= */

/* Namespace marker (nessuno stile) */
.mit {}

/* Contenitore boxed riutilizzabile dentro i container Elementor full-width */
.mit-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Layout a due colonne (resa CSS-grid di riserva se il container non è flex-row) */
.mit-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 960px) { .mit-two-col { grid-template-columns: 1fr; } }

/* Sezioni a contenuto centrato */
.is-center { text-align: center; }
.is-center .eyebrow { justify-content: center; }
.is-center .lead { margin-inline: auto; }
.is-center .section-head { margin-inline: auto; }

/* Sezione compatta (es. stats) */
.section-sm { padding-block: clamp(2.5rem, 5vw, 4rem); position: relative; }

/* Stats come griglia responsiva */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* Lo spazio tra i widget nativi dentro le card lo dà il gap del container:
   azzero i margini di default così l'atomizzazione resta pulita. */
.card > .elementor-element,
.mech-col > .elementor-element,
.step > .elementor-element,
.review > .elementor-element,
.principle__body > .elementor-element { margin: 0; }

/* -------------------------------------------------------------------------
   Header (Theme Builder)
   ------------------------------------------------------------------------- */
.mit-header-section { position: sticky; top: 0; z-index: 100; }
.mit-header { background: var(--surface); border-bottom: 1px solid var(--line-dark); transition: box-shadow 0.3s var(--ease); }
.mit-header.is-scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); }
.mit-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 74px; width: 100%;
  max-width: var(--container); margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* -------------------------------------------------------------------------
   Footer (Theme Builder)
   ------------------------------------------------------------------------- */
.mit-footer { background: var(--surface-3); color: var(--on-dark); padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; }
.mit-footer__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

/* -------------------------------------------------------------------------
   Form nativo Elementor Pro con lo stile del progetto (classe .mit-form)
   ------------------------------------------------------------------------- */
.mit-form .elementor-field-group > label {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 500;
  color: var(--text-strong); margin-bottom: 0.4rem;
}
.mit-form .elementor-field-textual {
  font-family: var(--font-serif); font-size: 1rem; color: var(--text);
  background: var(--bg-clean); border: 1px solid transparent; border-radius: var(--radius);
  padding: 0.95rem 1.1rem; width: 100%; box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mit-form textarea.elementor-field-textual { min-height: 140px; resize: vertical; }
.mit-form .elementor-field-textual:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 197, 71, 0.25);
}
.mit-form .elementor-field-type-acceptance .elementor-field-subgroup label { font-family: var(--font-serif); font-size: 0.85rem; color: var(--text-soft); }
.mit-form .elementor-button {
  background: var(--accent); color: var(--surface);
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em;
  border-radius: var(--radius); padding: 0.95em 1.6em; border: 0;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.mit-form .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(232, 197, 71, 0.35); }
.mit-form .elementor-message { font-family: var(--font-display); font-size: 0.9rem; }

/* =========================================================================
   21. Override per i container Elementor
   I container Elementor impongono display:flex con alta specificità.
   Le classi-atom di layout vanno forzate a grid; il display è l'unica
   proprietà in conflitto (grid-template-columns non è mai impostato da Elementor).
   ========================================================================= */
.grid,
.stats,
.deliver,
.principle,
.steps,
.mit-two-col { display: grid !important; }

/* Bottone NATIVO Elementor con classe .btn → stile del progetto (batte .elementor-button) */
.elementor-button.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.01em; line-height: 1; padding: 0.95em 1.6em;
  border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--surface);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.elementor-button.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(232, 197, 71, 0.35); }
.elementor-button.btn .elementor-button-text { color: inherit; }
.elementor-widget-button.btn-center .elementor-button-wrapper { text-align: center; }

/* I widget nativi dentro un container non devono aggiungere margini propri */
.elementor-widget { margin-bottom: 0; }

/* Ritmo verticale delle sezioni forzato dentro i container Elementor */
.section { padding-block: var(--section-y) !important; }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4rem) !important; }
.hero--plain { padding-block: clamp(3.5rem, 8vw, 6.5rem) !important; }
.hero--image .hero__inner { padding-block: clamp(3rem, 8vw, 6rem) !important; width: 100%; }

/* =========================================================================
   22. Elementor v4 — testo chiaro sulle bande scure
   In v4 le CLASSI dei container (es. band-navy) non sopravvivono all'import,
   quindi lo sfondo delle sezioni è impostato via opzioni native del container
   e il colore-testo chiaro è portato da questa classe applicata AI WIDGET
   (le classi dei widget sopravvivono).
   ========================================================================= */
.t-light,
.t-light .elementor-heading-title,
.t-light h1, .t-light h2, .t-light h3, .t-light h4,
.t-light p, .t-light li, .t-light blockquote,
.t-light strong { color: var(--on-dark); }
.t-light .lead, .t-light.lead { color: var(--on-dark-soft); }
.t-light .hl, .t-light .quote .hl { color: var(--accent); }

/* =========================================================================
   23. Override dei default globali di Elementor v4  ⭐ FIX TIPOGRAFIA
   Elementor genera per ogni pagina regole come:
     .elementor-widget-heading .elementor-heading-title { font-family:Roboto; color:#6EC1E4 }
     .elementor-widget-text-editor { font-family:Roboto; color:#7A7A7A }
   che colpiscono l'elemento INTERNO al widget (specificità 0,2,0) battendo i
   nostri atom applicati al wrapper. Qui ri-applichiamo il design con specificità
   pari/superiore; poiché questo file è accodato PER ULTIMO, vince sull'ordine.
   ========================================================================= */

/* ---- BASE: titoli e testo dei widget ---- */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}
.elementor-widget-text-editor {
  font-family: var(--font-serif);
  color: var(--text);
}
.elementor-widget-text-editor p { color: inherit; }

/* ---- ATOM tipografici sui titoli (0,3,0 > base 0,2,0) ---- */
.elementor-element.eyebrow .elementor-heading-title {
  font-family: var(--font-label); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink);
}
.elementor-element.serif-display .elementor-heading-title {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; color: var(--text-strong);
}
.elementor-element.card__kicker .elementor-heading-title {
  font-family: var(--font-label); font-weight: 400; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink);
}
.elementor-element.card__num .elementor-heading-title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--accent-ink);
}
.elementor-element.stat__label .elementor-heading-title {
  font-family: var(--font-display); font-weight: 500; font-size: 0.9rem;
  letter-spacing: 0; text-transform: none; color: var(--accent-ink);
}
.elementor-element.step__num .elementor-heading-title {
  font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--accent-ink);
}
/* dimensioni titoli display (il font-size sul wrapper è ereditato dal titolo) */
.elementor-element.h-display .elementor-heading-title { font-weight: 800; }

/* ---- ATOM tipografici sui testi (0,2,0 > base 0,1,0) ---- */
.elementor-element.text-accent .elementor-widget-container { color: var(--accent-ink); }
.elementor-element.text-gold .elementor-widget-container { color: var(--accent-ink); }

/* ---- TESTO CHIARO sulle bande scure (dopo la base → vince) ---- */
.t-light .elementor-heading-title { color: var(--on-dark); }
.t-light.elementor-widget-text-editor,
.t-light.elementor-widget-text-editor p { color: var(--on-dark-soft); }
.t-light.lead.elementor-widget-text-editor,
.t-light.lead.elementor-widget-text-editor p { color: var(--text-light); }
.t-light .elementor-heading-title strong,
.t-light.elementor-widget-text-editor strong { color: var(--on-dark); }
/* eyebrow e kicker restano dorati anche su navy (specificità 0,3,0) */
.t-light.elementor-element.eyebrow .elementor-heading-title,
.t-light.elementor-element.card__kicker .elementor-heading-title { color: var(--accent-ink); }

/* =========================================================================
   24. Editor di Elementor — mostra gli elementi animati
   Nell'editor il JS delle animazioni non gira, quindi gli elementi con
   .mit-anim resterebbero a opacity:0 (invisibili nel canvas, ma presenti).
   Qui li forziamo visibili SOLO dentro l'editor; il front-end non cambia.
   ========================================================================= */
.elementor-editor-active .mit-anim,
.elementor-editor-active .mit-anim--up,
.elementor-editor-active .mit-anim--down,
.elementor-editor-active .mit-anim--left,
.elementor-editor-active .mit-anim--right,
.elementor-editor-active .mit-stagger > .mit-stagger-item,
.elementor-editor-active [data-anim] {
  opacity: 1 !important;
  transform: none !important;
}

/* =========================================================================
   25. Voce di menu "Incontriamoci" come PULSANTE (Nav Menu Elementor v4)
   Uso: aggiungi la classe .menu-cta alla voce di menu
   (Aspetto → Menu → "Opzioni schermata" → spunta "Classi CSS" → scrivi
   menu-cta nel campo della voce Incontriamoci). In più è già agganciata
   automaticamente all'item con id "incontriamoci" o href /incontriamoci/.
   ========================================================================= */
.e-n-menu-item.menu-cta .e-n-menu-title-container,
#incontriamoci .e-n-menu-title-container,
.e-n-menu-item .e-n-menu-title-container[href*="/incontriamoci/"] {
  background: var(--accent);
  border-radius: var(--radius);
  padding: 12px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.e-n-menu-item.menu-cta .e-n-menu-title-text,
#incontriamoci .e-n-menu-title-text,
.e-n-menu-item .e-n-menu-title-container[href*="/incontriamoci/"] .e-n-menu-title-text {
  color: var(--surface) !important;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.e-n-menu-item.menu-cta .e-n-menu-title-container:hover,
#incontriamoci .e-n-menu-title-container:hover,
.e-n-menu-item .e-n-menu-title-container[href*="/incontriamoci/"]:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(232, 197, 71, 0.35);
}

/* =========================================================================
   Freccia CTA (homepage) — animazione "si disegna" in loop
   La freccia (widget immagine …-6ba5627, SVG a tratteggio pieno) si estende
   dalla coda (alto) alla punta (basso, sul pulsante) in 1000ms, resta ferma
   3000ms, sparisce e riparte. Ciclo totale 4500ms. Tecnica: wipe con
   clip-path (l'SVG è un path pieno, non tracciabile a stroke). Rispetta
   prefers-reduced-motion.
   NB: se ricrei il widget in Elementor l'ID cambia → aggiorna il selettore.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .elementor-element-6ba5627 img {
    clip-path: inset(0 0 100% 0);                 /* stato iniziale: assente */
    animation: mit-arrow-draw 4500ms ease-out infinite;
    will-change: clip-path, opacity;
  }
}
@keyframes mit-arrow-draw {
  0%     { opacity: 1; clip-path: inset(0 0 100% 0); } /* assente */
  22.2%  { opacity: 1; clip-path: inset(0 0 0 0); }    /* disegnata (1000ms) */
  88.9%  { opacity: 1; clip-path: inset(0 0 0 0); }    /* ferma 3000ms */
  93.3%  { opacity: 0; clip-path: inset(0 0 0 0); }    /* sparisce */
  100%   { opacity: 0; clip-path: inset(0 0 100% 0); } /* invisibile → loop */
}

/* =========================================================================
   Menu mobile (mega-menu Elementor in modalità dropdown) — aspetto pannello
   Il pannello aperto: 10px di respiro dai bordi, sfondo bianco unico con
   angoli arrotondati 16px, e distanza dal fondo dell'header gestita da
   theme.js (5px: il "top" è calcolato sul fondo della barra che contiene
   il menu, così vale sia per l'header principale che per la barra sticky).
   position:fixed per ancorarlo al viewport (Elementor lo allunga a tutta
   larghezza rispetto al nav, non all'header).
   ========================================================================= */
.elementor-location-header .e-n-menu[data-layout=dropdown] .e-n-menu-wrapper {
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  margin-block-start: 0 !important;      /* il distacco (5px) lo dà il top via JS */
  background-color: #FFFFFF !important;
  border-radius: 16px !important;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 18px 44px rgba(30, 53, 86, 0.16);
}

/* =========================================================================
   Menu sticky (.menu-sticky nell'header Elementor) — pilotato da theme.js
   La barra duplicata (logo+menu) è fissa in alto, nascosta sopra il
   viewport; quando la barra principale del menu esce dal viewport, theme.js
   aggiunge .is-stuck e la barra ENTRA dall'alto con una transizione,
   restando fissa. Tornando su, risale e scompare.
   (!important: Elementor imposta position:static sull'elemento.)
   ========================================================================= */
.elementor-location-header .menu-sticky {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1100;
  transform: translateY(-100%);
  visibility: hidden;
  box-shadow: 0 8px 24px rgba(22, 40, 63, 0.18);
  transition: transform 0.38s var(--ease, ease), visibility 0s linear 0.38s;
}
.elementor-location-header .menu-sticky.is-stuck {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.38s var(--ease, ease);
}
/* barra admin di WordPress (utente loggato): non coprirla */
body.admin-bar .elementor-location-header .menu-sticky { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .elementor-location-header .menu-sticky { top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor-location-header .menu-sticky { transition: none; }
  .elementor-location-header .menu-sticky.is-stuck { transition: none; }
}

/* =========================================================================
   Pulsante "torna su" (.mit-top) — creato da theme.js su tutte le pagine
   Basso a destra, appare dopo ~80% di viewport scrollato. Sta sopra i
   contenuti ma sotto eventuali overlay di navigazione.
   ========================================================================= */
.mit-top {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 990;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--accent, #E8C547);
  color: var(--surface, #1E3556);          /* freccia SVG: currentColor */
  box-shadow: 0 6px 18px rgba(30, 53, 86, 0.22);
  /* stato nascosto */
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease, ease), transform 0.3s var(--ease, ease),
              box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.mit-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mit-top:hover {
  background: #FFFFFF;
  color: var(--accent, #E8C547);           /* freccia gialla */
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(30, 53, 86, 0.28);
}
.mit-top:focus-visible {
  outline: 2px solid var(--surface, #1E3556);
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .mit-top {
    width: 44px;
    height: 44px;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .mit-top { transition: opacity 0.2s ease; transform: none; }
  .mit-top.is-visible { transform: none; }
  .mit-top:hover { transform: none; }
}
/* =========================================================================
   Menu mobile — icona toggle e COLORI delle voci nel pannello dropdown
   Nel layout dropdown Elementor colora DIRETTAMENTE lo span
   .e-n-menu-title-text con le variabili *-dropdown: se non sono definite
   eredita il bianco del menu desktop → link invisibili sul pannello bianco.
   (Un colore sul link `a` non basta: la regola diretta sullo span vince
   sempre su quella ereditata. La voce attiva usa la classe .e-current.)
   ========================================================================= */
/* icona hamburger/chiudi in giallo brand */
.elementor-widget-n-menu .e-n-menu-toggle svg {
  color: var(--accent, #E8C547) !important;
  fill: var(--accent, #E8C547) !important;
}
/* respiro interno del pannello */
.elementor-location-header .e-n-menu[data-layout=dropdown] .e-n-menu-wrapper {
  padding: 20px !important;
}
/* variabili colore del dropdown: normal navy, hover/attiva oro */
.elementor-location-header .e-n-menu[data-layout=dropdown] {
  --n-menu-title-normal-color-dropdown: var(--surface, #1E3556);
  --n-menu-title-hover-color-dropdown: var(--accent-ink, #C9993A);
  --n-menu-title-active-color-dropdown: var(--accent-ink, #C9993A);
}
/* cintura di sicurezza: colore diretto sugli span (vince su ogni variabile) */
.elementor-location-header .e-n-menu[data-layout=dropdown] .e-n-menu-title:not(.e-current) .e-n-menu-title-container .e-n-menu-title-text {
  color: var(--surface, #1E3556) !important;
}
.elementor-location-header .e-n-menu[data-layout=dropdown] .e-n-menu-title:hover:not(.e-current) .e-n-menu-title-container .e-n-menu-title-text {
  color: var(--accent-ink, #C9993A) !important;
}
.elementor-location-header .e-n-menu[data-layout=dropdown] .e-n-menu-title.e-current .e-n-menu-title-text,
.elementor-location-header .e-n-menu[data-layout=dropdown] .e-n-menu-title.e-current a {
  color: var(--accent-ink, #C9993A) !important;
}
/* la voce-pulsante "Incontriamoci" resta com'è (regole con ID più forti):
   testo navy su fondo giallo, anche nel pannello mobile. */