/* ==========================================================================
   Magenta — Layout & components
   ========================================================================== */

/* ----- Layout primitives -------------------------------------------------- */
.m-container {
  width: 100%;
  max-width: var(--m-container);
  margin: 0 auto;
  padding-inline: var(--m-gutter);
}
.m-container--wide { max-width: var(--m-container-wide); }
.m-container--narrow { max-width: 820px; }

.m-section { padding-block: var(--m-section-y); }
.m-section--dark { background: var(--m-bg-dark); color: var(--m-text-on-dark); }
.m-section--alt  { background: var(--m-bg-alt); }

.m-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--m-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--m-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--m-text-muted);
}
.m-eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.m-section--dark .m-eyebrow { color: var(--m-grey-2); }

.m-divider {
  height: 1px;
  background: var(--m-border);
  border: 0;
}
.m-section--dark .m-divider { background: rgba(255,255,255,.08); }

/* ----- Header ------------------------------------------------------------- */
/* Nasconde tutta la chrome del tema byte sulla magenta-layout */
.magenta-layout .site-header,
.magenta-layout #masthead,
.magenta-layout .top-bar,
.magenta-layout .mobile-menu,
.magenta-layout .search-window,
.magenta-layout .preloader,
body.magenta-layout > .site > .top-bar,
body.magenta-layout > .site > .mobile-menu { display: none !important; }

.m-header {
  position: absolute;          /* solo il burger è sticky, il resto scrolla via */
  top: 0; left: 0; right: 0;
  z-index: var(--m-z-header);
  background: transparent;
  border-bottom: 0;
  pointer-events: none;        /* l'header non intercetta click sul video */
}
.m-header .m-logo,
.m-header__tagline { pointer-events: auto; }
.m-header.is-scrolled { background: transparent; }

/* Burger fixed in viewport (stile netstrategy) */
.m-burger-circle {
  position: fixed;
  top: clamp(.75rem, 1.6vw, 1.4rem);
  right: clamp(.85rem, 2.4vw, 1.85rem);
  z-index: 1200;
  pointer-events: auto;
}
/* Sull'hero la tagline va bianca (su video scuro) — torna scura quando l'header è solido */
.m-header__tagline { color: rgba(255,255,255,.85); }
.m-header.is-scrolled .m-header__tagline { color: var(--m-text-muted); }

/* Top row: logo on left, utility-nav + CTA pushed right */
.m-header__top {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  height: var(--m-header-top-h);
}
.m-header__top .m-logo { margin-right: auto; }   /* spinge tutto il resto a destra */

.m-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 50vw;
}
.m-logo img {
  display: block;
  height: 48px;
  width: auto;
  max-height: 48px;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 600px) {
  .m-logo img { height: 32px; max-height: 32px; }
}

/* Tagline microcopy in mezzo, come "Building Future Together" */
.m-header__tagline {
  font-family: var(--m-font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m-text-muted);
  white-space: nowrap;
}

/* L'header ora ha solo logo + tagline + cerchio burger.
   Tutto il menu vive nell'overlay full-screen (.m-menu-overlay). */
@media (max-width: 720px) {
  .m-header__tagline { display: none; }
}

.m-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  background: var(--m-ink);
  color: var(--m-text-on-dark);
  border-radius: var(--m-radius-pill);
  font-weight: 600;
  font-size: .9rem;
  transition: background var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease);
}
.m-cta:hover { background: var(--m-magenta); color: #fff; transform: translateY(-1px); }
.m-cta--outline {
  background: transparent;
  color: var(--m-text);
  border: 1px solid var(--m-ink);
}
.m-cta--outline:hover { background: var(--m-ink); color: var(--m-text-on-dark); }
.m-cta--magenta { background: var(--m-magenta); }
.m-cta--magenta:hover { background: var(--m-magenta-deep); }

/* Burger */
.m-burger {
  display: none;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-pill);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.m-burger span {
  width: 16px; height: 1.5px;
  background: var(--m-ink);
  display: block;
  position: relative;
}
.m-burger span::before, .m-burger span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--m-ink);
}
.m-burger span::before { top: -5px; }
.m-burger span::after  { top:  5px; }

/* Lo spacer NON serve sulla magenta-layout: il video del hero deve andare sotto
   all'header (header trasparente sopra). Lo manteniamo per inner pages future. */
.m-header-spacer { height: var(--m-header-h); }
body.magenta-layout .m-header-spacer { display: none; }

@media (max-width: 600px) {
  :root { --m-header-h: 70px; }
}

/* ----- HERO full-bleed ---------------------------------------------------- */
/* Hero full-viewport: l'header gli passa SOPRA (transparente). */
.m-hero--full {
  position: relative;
  height: 100vh;
  min-height: 520px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #0B0B0F;
  color: #FFFFFF;
}
/* Scrim in cima all'hero per leggibilità di logo + tagline + burger */
.m-hero--full::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
  z-index: 1;
  pointer-events: none;
}
.m-hero--full .m-hero__bg,
.m-hero--full video,
.m-hero--full img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.m-hero--full .m-hero__bg {
  background-size: cover;
  background-position: center;
}

/* Variante "--page": hero pagine interne (chi-siamo, ecc.) — immagine fissa
   con eyebrow + titolo grande in overlay in basso a sinistra. */
.m-hero--page { display: flex; align-items: flex-end; }
.m-hero--page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  z-index: 1;
  pointer-events: none;
}
.m-hero__page-title {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(2rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 5vw, 4rem);
}
.m-hero__page-eyebrow {
  display: block;
  font-family: var(--m-font-mono);
  font-size: clamp(.8rem, 1vw, .95rem);
  letter-spacing: .14em;
  color: var(--m-magenta);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: clamp(.5rem, 1.5vw, 1rem);
}
.m-hero--page .m-display-xl {
  color: var(--m-magenta) !important;
  line-height: .9;
  text-shadow: 0 6px 30px rgba(0,0,0,.35);
}

/* Page intro: blocco titolo per pagine interne (servizi/news/eventi/contatti)
   sotto un hero senza titolo overlay. Ricalca lo stile del brand statement. */
.m-block--page-intro { padding-block: clamp(3rem, 6vw, 5rem); }
.m-page-intro {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(.75rem, 2vw, 1.25rem);
}
.m-page-intro__eyebrow {
  font-family: var(--m-font-mono);
  font-size: clamp(.8rem, 1vw, .95rem);
  letter-spacing: .14em;
  color: var(--m-magenta);
  text-transform: uppercase;
  font-weight: 700;
}
.m-page-intro .m-display-xl {
  font-size: clamp(2.5rem, 11vw, 9rem);
  letter-spacing: -.045em;
  line-height: .9;
  color: var(--m-magenta) !important;
}
.m-page-intro__text {
  max-width: 60ch;
  margin-top: clamp(.5rem, 1.5vw, 1.25rem);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--m-ink);
}

.m-block--placeholder .m-chi-siamo__placeholder,
.m-chi-siamo__placeholder {
  padding: clamp(3rem, 8vw, 6rem) 0;
  text-align: center;
  color: var(--m-text-muted);
  font-family: var(--m-font-mono);
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.m-chi-siamo__content {
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.m-chi-siamo__body {
  color: var(--m-ink);
}
.m-chi-siamo__body > * + * { margin-top: 1rem; }
.m-chi-siamo__body h1,
.m-chi-siamo__body h2,
.m-chi-siamo__body h3 { color: var(--m-ink); margin-top: 2rem; }
/* Su una pagina costruita con Elementor il container .e-con/.elementor-section
 * ha il suo proprio sistema di larghezza: lascialo respirare. */
.m-chi-siamo__body .elementor,
.m-chi-siamo__body .elementor-section,
.m-chi-siamo__body .e-con { width: 100%; }

/* Vimeo background video — wrapper + iframe scaled to cover il container 16:9 */
.m-hero__vimeo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.m-hero__vimeo iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;            /* 100vw * 9/16  */
  min-height: 100vh;
  min-width: 177.78vh;         /* 100vh * 16/9 */
  border: 0;
  display: block;
}
.m-hero--full::after {
  /* leggero scurire per leggibilità del sound toggle */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%);
  z-index: 1;
}
.m-hero__sound {
  position: absolute;
  z-index: 2;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem;
  background: rgba(11,11,15,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--m-radius-pill);
  font-size: .82rem;
  color: #fff;
  cursor: pointer;
  font-family: var(--m-font-mono);
  letter-spacing: .04em;
}
.m-hero__sound svg { width: 14px; height: 14px; }

/* ----- Brand statement (sezione subito dopo hero, big-type) ------------- */
.m-statement {
  background: var(--m-paper);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.m-statement__title {
  font-family: var(--m-font-display);
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: none;
}
.m-statement__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--m-magenta) 0%, var(--m-magenta-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.m-statement__sub {
  margin-top: 1.75rem;
  font-size: 1.15rem;
  color: var(--m-text-muted);
  max-width: 64ch;
}
.m-statement__actions { margin-top: 2rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* ----- MENU OVERLAY ----------------------------------------------------- */
.m-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--m-z-overlay);
  color: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--m-ease);
}
.m-menu-overlay[hidden] { display: block !important; }   /* gestiamo via opacity */

body.m-menu-open .m-menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

.m-menu-overlay__bg {
  position: absolute;
  inset: 0;
  background: #0B0B0F;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .55s var(--m-ease);
  z-index: 0;
}
body.m-menu-open .m-menu-overlay__bg { transform: scaleY(1); }

/* Top bar within overlay */
.m-menu-overlay__top {
  position: relative;
  z-index: 2;
  padding-block: 1.6rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.m-menu-overlay__topgrid {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.m-menu-overlay__logo img {
  height: 32px; width: auto;
  filter: brightness(0) invert(1);
}
.m-menu-overlay__intro {
  font-size: .92rem;
  color: rgba(255,255,255,.78);
  max-width: 36ch;
  line-height: 1.45;
  margin: 0;
}
.m-menu-overlay__search {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--m-radius-pill);
  min-width: 240px;
}
.m-menu-overlay__search input {
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: .9rem;
  outline: none;
  width: 100%;
}
.m-menu-overlay__search input::placeholder { color: rgba(255,255,255,.55); }
.m-menu-overlay__search svg { color: rgba(255,255,255,.6); flex: 0 0 auto; }

.m-menu-overlay__tagline {
  font-family: var(--m-font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}

.m-menu-overlay__close {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #0B0B0F;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform .25s var(--m-ease);
}
.m-menu-overlay__close:hover { transform: rotate(90deg); }

@media (max-width: 1100px) {
  .m-menu-overlay__topgrid {
    grid-template-columns: auto 1fr auto auto;
  }
  .m-menu-overlay__intro { display: none; }
  .m-menu-overlay__tagline { display: none; }
}
@media (max-width: 720px) {
  .m-menu-overlay__topgrid { grid-template-columns: auto 1fr auto; gap: .75rem; }
  .m-menu-overlay__search { min-width: 0; flex: 1 1 auto; }
  .m-menu-overlay__close { width: 48px; height: 48px; }
}
@media (max-width: 480px) {
  .m-menu-overlay__search { display: none; }
  .m-menu-overlay__topgrid { grid-template-columns: auto 1fr auto; }
}

/* Body of overlay: big-type list + side image */
.m-menu-overlay__body {
  position: relative;
  z-index: 2;
  padding-block: clamp(2rem, 5vw, 4rem);
  height: calc(100% - 90px);
  overflow-y: auto;
}
.m-menu-overlay__bodygrid {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.m-menu-list {
  display: flex;
  flex-direction: column;
  gap: clamp(.2rem, 1vw, .6rem);
}
.m-menu-list__item {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  text-decoration: none;
  color: #FFFFFF;
  position: relative;
  padding-block: clamp(.1rem, 1vw, .35rem);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--m-ease), transform .5s var(--m-ease), color .25s var(--m-ease);
  transition-delay: calc(.15s + var(--m-menu-i, 0) * .06s);
}
body.m-menu-open .m-menu-list__item {
  opacity: 1; transform: translateY(0);
}
.m-menu-list__num {
  font-family: var(--m-font-mono);
  font-size: clamp(.8rem, 1.2vw, 1rem);
  color: var(--m-magenta);
  font-weight: 700;
  align-self: flex-start;
  margin-top: clamp(.5rem, 2vw, 1.5rem);
}
.m-menu-list__label {
  font-family: var(--m-font-display);
  font-size: clamp(2.4rem, 9vw, 7.5rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.m-menu-list__item:hover .m-menu-list__label {
  color: var(--m-magenta);
}

.m-menu-overlay__media {
  position: sticky;
  top: 1rem;
}
.m-menu-overlay__media-frame {
  /* Sfondo trasparente: l'immagine decorativa (PNG con trasparenza) appare
   * direttamente sul nero dell'overlay, senza rettangolo magenta dietro. */
  overflow: hidden;
  aspect-ratio: 4/5;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.m-menu-overlay__media-frame img {
  /* `contain` invece di `cover` per mostrare l'intera immagine senza cropping. */
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Mini-footer in overlay */
.m-menu-overlay__foot {
  margin-top: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .9rem;
}
.m-menu-overlay__foot-label {
  display: block;
  font-family: var(--m-font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: .35rem;
}
.m-menu-overlay__foot a { color: #FFFFFF; }
.m-menu-overlay__foot a:hover { color: var(--m-magenta); }

@media (max-width: 1100px) {
  .m-menu-overlay__bodygrid { grid-template-columns: 1fr; }
  .m-menu-overlay__media { display: none; }
}
@media (max-width: 600px) {
  .m-menu-overlay__foot { grid-template-columns: 1fr; gap: 1rem; }
}

/* Quando overlay aperto blocca lo scroll del body */
body.m-menu-open { overflow: hidden; }

/* ----- Hero --------------------------------------------------------------- */
.m-hero {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
  background: var(--m-paper);
  overflow: hidden;
}
.m-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.m-hero__title {
  font-size: var(--m-fs-display);
  font-weight: 800;
  line-height: var(--m-lh-tight);
  letter-spacing: -.02em;
}
.m-hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--m-magenta) 0%, var(--m-magenta-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.m-hero__sub {
  font-size: 1.15rem;
  color: var(--m-text-muted);
  margin-top: 1.4rem;
  max-width: 56ch;
}
.m-hero__actions {
  margin-top: 2rem;
  display: flex; gap: .75rem; flex-wrap: wrap;
}

/* Hero side cards (Esperienza / Proattività / Strategia style) */
.m-hero__cards {
  display: grid;
  gap: 1rem;
}
.m-hero-card {
  background: var(--m-canvas);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  padding: 1.25rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform var(--m-dur) var(--m-ease), box-shadow var(--m-dur) var(--m-ease);
}
.m-hero-card:hover { transform: translateY(-3px); box-shadow: var(--m-shadow-soft); }
.m-hero-card__num {
  font-family: var(--m-font-mono);
  font-size: .8rem;
  color: var(--m-magenta);
  font-weight: 700;
}
.m-hero-card__title { font-size: 1.05rem; font-weight: 700; }
.m-hero-card__desc { font-size: .9rem; color: var(--m-text-muted); margin-top: .15rem; }

@media (max-width: 900px) {
  .m-hero__grid { grid-template-columns: 1fr; }
}

/* ----- Brand values strip ------------------------------------------------- */
.m-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--m-border);
  border-bottom: 1px solid var(--m-border);
}
.m-value {
  padding: 2rem clamp(1rem, 2vw, 1.6rem);
  border-right: 1px solid var(--m-border);
}
.m-value:last-child { border-right: 0; }
.m-value__num {
  font-family: var(--m-font-mono);
  color: var(--m-magenta);
  font-size: .8rem;
  font-weight: 700;
}
.m-value__title { font-size: 1.1rem; font-weight: 700; margin-top: .5rem; }
.m-value__desc { font-size: .92rem; color: var(--m-text-muted); margin-top: .35rem; }
@media (max-width: 800px) { .m-values { grid-template-columns: repeat(2, 1fr); }
  .m-value:nth-child(2) { border-right: 0; } }
@media (max-width: 480px) { .m-values { grid-template-columns: 1fr; }
  .m-value { border-right: 0; border-bottom: 1px solid var(--m-border); }
  .m-value:last-child { border-bottom: 0; } }

/* ----- Section header ----------------------------------------------------- */
.m-section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.m-section-head h2 {
  font-size: var(--m-fs-h1);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: var(--m-lh-tight);
}
.m-section-head p {
  color: var(--m-text-muted);
  font-size: 1.05rem;
}
@media (max-width: 800px) { .m-section-head { grid-template-columns: 1fr; align-items: start; } }

/* ----- Case studies (filterable carousel) -------------------------------- */
.m-cases__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.m-cases__filter {
  padding: .5rem 1rem;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-pill);
  font-size: .85rem;
  font-weight: 600;
  background: transparent;
  color: var(--m-text);
  cursor: pointer;
  transition: all var(--m-dur) var(--m-ease);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.m-cases__filter:hover { border-color: var(--m-ink); }
.m-cases__filter.is-active { background: var(--m-ink); color: var(--m-text-on-dark); border-color: var(--m-ink); }

.m-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.m-case {
  position: relative;
  border-radius: var(--m-radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--m-canvas);
  cursor: pointer;
}
.m-case::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%);
  z-index: 1;
}
.m-case img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--m-ease);
}
.m-case:hover img { transform: scale(1.05); }
.m-case__meta {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 2;
  color: #fff;
}
.m-case__tag {
  display: inline-block;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--m-radius-pill);
  margin-bottom: .6rem;
}
.m-case__title { font-size: 1.15rem; font-weight: 700; }
@media (max-width: 900px) { .m-cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .m-cases__grid { grid-template-columns: 1fr; } }

/* ----- Services grid ----------------------------------------------------- */
.m-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--m-border);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  overflow: hidden;
}
.m-service {
  background: var(--m-paper);
  padding: 2rem 1.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: background var(--m-dur) var(--m-ease);
  min-height: 230px;
}
.m-service:hover { background: var(--m-canvas); }
.m-service__icon {
  width: 56px; height: 56px;
  border-radius: var(--m-radius);
  background: var(--m-magenta-soft);
  color: var(--m-magenta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .25rem;
}
.m-service__title { font-size: 1.1rem; font-weight: 700; }
.m-service__desc { color: var(--m-text-muted); font-size: .95rem; }
.m-service__num {
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  font-family: var(--m-font-mono);
  font-size: .75rem;
  color: var(--m-text-muted);
  font-weight: 600;
}
.m-service__arrow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--m-magenta);
}
.m-service__arrow svg { transition: transform var(--m-dur) var(--m-ease); }
.m-service:hover .m-service__arrow svg { transform: translateX(4px); }
@media (max-width: 900px) { .m-services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .m-services { grid-template-columns: 1fr; } }

/* ----- Journal / Blog teasers ------------------------------------------- */
.m-journal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.m-post {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.m-post__media {
  aspect-ratio: 16/10;
  border-radius: var(--m-radius);
  overflow: hidden;
  background: var(--m-canvas);
}
.m-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--m-ease); }
.m-post:hover .m-post__media img { transform: scale(1.04); }
.m-post__meta { font-size: .8rem; color: var(--m-text-muted); letter-spacing: .04em; text-transform: uppercase; }
.m-post__title { font-size: 1.15rem; font-weight: 700; }
@media (max-width: 800px) { .m-journal { grid-template-columns: 1fr; } }

/* ----- Expertise / split block ------------------------------------------ */
.m-expertise {
  background: var(--m-bg-dark);
  color: var(--m-text-on-dark);
  border-radius: var(--m-radius-lg);
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.m-expertise h2 { color: var(--m-text-on-dark); font-size: var(--m-fs-h1); }
.m-expertise p { color: var(--m-grey-2); margin-top: 1.25rem; font-size: 1.05rem; }
.m-expertise__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.m-stat__num {
  font-family: var(--m-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(120deg, #fff 0%, var(--m-magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.m-stat__label { font-size: .9rem; color: var(--m-grey-2); margin-top: .5rem; }
@media (max-width: 900px) { .m-expertise { grid-template-columns: 1fr; } }

/* ----- Contact form ----------------------------------------------------- */
.m-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.m-contact__lead h2 { font-size: var(--m-fs-h1); }
.m-contact__lead p { color: var(--m-text-muted); margin-top: 1rem; font-size: 1.05rem; }
.m-contact__info { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; font-size: .95rem; }
.m-contact__info strong { color: var(--m-text); display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--m-text-muted); margin-bottom: .25rem; }
.m-contact__form {
  background: var(--m-canvas);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--m-radius-lg);
  border: 1px solid var(--m-border);
}
@media (max-width: 800px) { .m-contact { grid-template-columns: 1fr; } }

/* ----- Marquee ---------------------------------------------------------- */
.m-marquee {
  overflow: hidden;
  position: relative;
  padding-block: 2rem;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.m-marquee__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: m-marquee 40s linear infinite;
}
.m-marquee__item {
  flex: 0 0 auto;
  font-family: var(--m-font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--m-grey-2);
  display: inline-flex;
  align-items: center;
  gap: 3.5rem;
}
.m-marquee__item::after {
  content: "✦";
  color: var(--m-magenta);
  font-size: 1rem;
}
@keyframes m-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Variante "--photos": carosello scorrevole di immagini sotto la sezione Servizi.
   Riusa l'animation .m-marquee, ma con stile chiaro e slide immagine. */
.m-block--carousel { padding-block: clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.m-marquee--photos {
  border: 0;
  padding-block: 0;
  background: transparent;
}
.m-marquee--photos .m-marquee__track {
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  animation-duration: 50s;     /* leggermente più lento delle scritte */
}
.m-marquee--photos .m-marquee__slide {
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 460px);
  aspect-ratio: 4/3;
  border-radius: var(--m-radius);
  overflow: hidden;
  background: var(--m-canvas);
}
/* Mobile: slide più piccole per mostrare almeno 1.5 alla volta + animazione visibile */
@media (max-width: 700px) {
  .m-marquee--photos .m-marquee__track {
    gap: 1rem;
    animation-duration: 30s;        /* più veloce per scorrere tutte e 5 in tempo ragionevole */
  }
  .m-marquee--photos .m-marquee__slide {
    width: 70vw;
    max-width: 320px;
  }
}
.m-marquee--photos .m-marquee__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Pause on hover, così l'utente può guardare un'immagine */
.m-marquee--photos:hover .m-marquee__track { animation-play-state: paused; }

/* ----- Footer ----------------------------------------------------------- */
.magenta-layout #colophon,
.magenta-layout .site-footer { display: none !important; }   /* nasconde footer byte */

.m-footer {
  background: var(--m-bg-dark);
  color: var(--m-text-on-dark);
}
.m-footer__top {
  padding-block: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.m-footer__brand { max-width: 360px; }
.m-footer__brand img { height: 32px; filter: brightness(0) invert(1); }
.m-footer__tag { color: var(--m-grey-2); margin-top: 1.5rem; font-size: 1.1rem; }

.m-footer__col h4 {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m-grey-2);
  font-weight: 600;
  margin-bottom: 1rem;
}
.m-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; font-size: .95rem; }
.m-footer__col a { color: var(--m-text-on-dark); }
.m-footer__col a:hover { color: var(--m-magenta); }
.m-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-block: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .85rem;
  color: var(--m-grey-2);
}
.m-socials { display: flex; gap: 1rem; }
.m-socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--m-dur) var(--m-ease);
}
.m-socials a:hover { background: var(--m-magenta); border-color: var(--m-magenta); }
@media (max-width: 900px) { .m-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .m-footer__top { grid-template-columns: 1fr; } }

/* ----- Form fields (basic) ---------------------------------------------- */
.m-field { display: block; margin-bottom: 1.1rem; }
.m-field label {
  display: block;
  font-size: .8rem;
  color: var(--m-text-muted);
  margin-bottom: .35rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.m-field input, .m-field textarea, .m-field select {
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  font: inherit;
  background: var(--m-paper);
  color: var(--m-text);
  transition: border-color var(--m-dur) var(--m-ease), box-shadow var(--m-dur) var(--m-ease);
}
.m-field input:focus, .m-field textarea:focus, .m-field select:focus {
  outline: 0;
  border-color: var(--m-magenta);
  box-shadow: 0 0 0 4px var(--m-magenta-soft);
}
.m-field textarea { min-height: 130px; resize: vertical; }

/* ----- Utility ---------------------------------------------------------- */
.m-stack > * + * { margin-top: 1rem; }
.m-mt-1 { margin-top: 1rem; }
.m-mt-2 { margin-top: 2rem; }
.m-mt-3 { margin-top: 3rem; }
.m-text-muted { color: var(--m-text-muted); }

/* =========================================================================
   NETSTRATEGY-STYLE SECTIONS — display headlines + photo strip + cases + svc + journal + form
   ========================================================================= */

/* Hairline rule between sections */
.m-rule {
  height: 1px;
  background: var(--m-ink);
  border: 0;
  margin: 0 var(--m-gutter);
  max-width: var(--m-container-wide);
  margin-inline: auto;
  width: calc(100% - 2 * var(--m-gutter));
}

/* Section block wrapper — common spacing */
.m-block {
  padding-block: clamp(3rem, 7vw, 6rem);
}
.m-block .m-rule { position: relative; transform: translateY(-50%); margin-bottom: clamp(2rem, 5vw, 4rem); }

/* PRIMO blocco subito dopo l'hero: niente padding-top + nascondi la m-rule
   in cima — l'hero finisce e il contenuto inizia senza vuoto bianco. */
.m-hero--full + .m-block { padding-top: 0; }
.m-hero--full + .m-block > .m-rule:first-child,
.m-hero--full + .m-block > hr.m-rule { display: none; }
.m-hero--full + .m-block > .m-container:first-child,
.m-hero--full + .m-block > .m-container,
.m-hero--full + .m-block > .m-statement__grid {
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* Big display headline (used in every section title).
   Doppia specificity per battere `.magenta-layout h2 { color: var(--m-text); }`. */
.magenta-layout .m-display-xl,
.m-display-xl {
  font-family: var(--m-font-display);
  font-size: clamp(1.4rem, 6.5vw, 5rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--m-magenta) !important;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.magenta-layout .m-display-xl em,
.m-display-xl em {
  font-style: normal;
  color: var(--m-magenta-deep) !important;
}

/* ---- 1. BRAND STATEMENT ----
   Stile netstrategy: titolo in colonna stretta, font condensato che spezza
   in 1-2 parole per riga. Testo a destra in colonna più larga. */
.m-statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.m-statement .m-display-xl,
.magenta-layout .m-statement .m-display-xl {
  font-size: clamp(1.6rem, 7.5vw, 5.5rem);
  letter-spacing: -.05em;
  line-height: .9;
  /* word-break: forza il break se una parola è più larga della colonna */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: none;
}
.m-statement__copy { display: flex; flex-direction: column; gap: 1.25rem; padding-top: clamp(.5rem, 2vw, 2rem); }
.m-statement__copy p { font-size: 1.05rem; color: var(--m-ink-3); line-height: 1.65; }
.m-statement__copy a { text-decoration: underline; }
@media (max-width: 800px) { .m-statement__grid { grid-template-columns: 1fr; } }

/* Photo strip overlap (fino a 5 foto sfasate, aspect ratio originale).
   Le immagini mantengono la proporzione naturale grazie a width:100% + height:auto. */
.m-photo-strip {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding-inline: var(--m-gutter);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.5rem, 1.5vw, 1rem);
  max-width: var(--m-container-wide);
  margin-inline: auto;
  align-items: end;        /* allineati alla baseline inferiore */
}
.m-photo-strip__item {
  width: 100%;
  border-radius: var(--m-radius);
  overflow: hidden;
  box-shadow: var(--m-shadow-soft);
  display: block;
  background-color: var(--m-canvas);
}
.m-photo-strip__item img {
  display: block;
  width: 100%;
  height: auto;            /* preserva l'aspect ratio originale dell'immagine */
  border-radius: var(--m-radius);
}
.m-photo-strip__item--1 { transform: translateY(-32px); }
.m-photo-strip__item--2 { transform: translateY(-8px); }
.m-photo-strip__item--3 { transform: translateY(-24px); }
.m-photo-strip__item--4 { transform: translateY(0); }
.m-photo-strip__item--5 { transform: translateY(-40px); }
/* Tablet e mobile: carosello orizzontale scrollabile con TUTTE le 5 foto
 * (niente più display:none, sono accessibili con swipe/scroll). */
@media (max-width: 1000px) {
  .m-photo-strip {
    display: flex;                                  /* da grid a flex riga */
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-block: .5rem 1rem;
    scroll-padding: 1rem;
    scrollbar-width: thin;
    align-items: stretch;
  }
  .m-photo-strip::-webkit-scrollbar { height: 6px; }
  .m-photo-strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 3px; }
  .m-photo-strip__item {
    flex: 0 0 auto;
    width: clamp(220px, 40vw, 320px);
    scroll-snap-align: center;
    transform: none !important;                     /* niente offset verticale su mobile */
    display: block !important;                      /* override eventuale display:none */
  }
}
@media (max-width: 700px) {
  .m-photo-strip__item { width: 70vw; max-width: 320px; }
}

/* ---- 2. SUCCESSI / CASES ---- */
.m-cases__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 900px) { .m-cases__head { grid-template-columns: 1fr; } }

/* Filtri stile netstrategy: container con cornice arrotondata, pill inline con
   virgole tra filtri, "ALL," attivo in magenta. Override aggressivo perché
   esiste una regola precedente che fa il pill arrotondato sui singoli filter. */
.m-cases__filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 .15rem !important;
  border: 1px solid var(--m-ink) !important;
  border-radius: var(--m-radius) !important;
  padding: 1rem 1.25rem !important;
  margin: 0 !important;
  background: transparent !important;
  font-family: var(--m-font-mono);
  font-size: clamp(.85rem, 1vw, 1rem);
  letter-spacing: .04em;
  align-items: baseline;
  line-height: 1.6;
}
.m-cases__filter {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit;
  color: var(--m-ink) !important;
  text-transform: uppercase;
  font-weight: 700;
  transition: color var(--m-dur) var(--m-ease);
  display: inline;
}
.m-cases__filter:not(:last-child)::after {
  content: ",";
  margin-right: .35em;
  color: var(--m-ink);
  font-weight: 700;
}
.m-cases__filter:hover { color: var(--m-magenta) !important; }
.m-cases__filter.is-active {
  color: var(--m-magenta) !important;
  background: transparent !important;
  font-weight: 800;
}
.m-cases__filter.is-active::after {
  color: var(--m-magenta);
  font-weight: 800;
}

.m-cases__grid--cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
/* Doppia classe per battere `.m-cases__grid { grid-template-columns: repeat(3, 1fr) }`
   che ha uguale specificity ma viene definita prima nel file. */
.m-cases__grid.m-cases__grid--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px)  {
  .m-cases__grid--cards,
  .m-cases__grid.m-cases__grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px)  {
  .m-cases__grid--cards,
  .m-cases__grid.m-cases__grid--cards { grid-template-columns: 1fr; }
}

.m-case-card {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  cursor: pointer;
}
.m-case-card__tab {
  display: inline-block;
  background: var(--m-magenta);
  color: #fff;
  font-family: var(--m-font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .55rem .9rem;
  border-radius: var(--m-radius) var(--m-radius) 0 0;
  text-align: center;
  width: 100%;
}
.m-case-card__media {
  border-radius: 0 0 var(--m-radius) var(--m-radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--m-magenta-soft), var(--m-canvas));
  position: relative;
}
.m-case-card__placeholder { position: absolute; inset: 0; }
.m-case-card__title {
  font-family: var(--m-font-display, "Inter Tight", "Inter", sans-serif);  /* font del sito */
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--m-magenta);
  display: flex;
  align-items: baseline;
  gap: .35rem;
  letter-spacing: -.01em;
}
.m-case-card__arrow {
  font-family: var(--m-font-mono);
  font-size: 1rem;
  color: var(--m-magenta);
}
.m-case-card__sub {
  font-size: .92rem;
  color: var(--m-ink-3);
  line-height: 1.45;
}

.m-cases__cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  justify-content: center;
}

/* Pill button */
.m-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.1rem 2.4rem;
  border-radius: var(--m-radius-pill);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background .25s var(--m-ease), transform .25s var(--m-ease), box-shadow .25s var(--m-ease);
}
.m-pill--magenta,
.magenta-layout a.m-pill--magenta { background: var(--m-magenta); color: #fff !important; }
.m-pill--magenta:hover,
.magenta-layout a.m-pill--magenta:hover { background: var(--m-ink); color: #fff !important; transform: translateY(-1px); box-shadow: var(--m-shadow); }
.m-pill--xl { padding: 1.4rem 3rem; font-size: 1.1rem; min-width: 280px; }

/* ---- 3. SERVIZI big-type ---- */
.m-svc__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.m-svc__intro p { color: var(--m-ink-3); font-size: 1rem; line-height: 1.65; margin-bottom: 1rem; max-width: 56ch; }
.m-svc__title { text-align: left; }
/* Forza il titolo a sinistra anche se nel DOM è dopo l'intro (compat con shortcode legacy) */
.m-svc__head .m-svc__title { order: -1; grid-column: 1; }
.m-svc__head .m-svc__intro { grid-column: 2; }
@media (max-width: 900px) {
  .m-svc__head { grid-template-columns: 1fr; }
  .m-svc__title { text-align: left; }
}

.m-svc__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.6rem, 1.6vw, 1.4rem);
  align-items: baseline;
}
.m-svc-item {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  font-family: var(--m-font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 4.2vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--m-ink);
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--m-dur) var(--m-ease);
}
.m-svc-item:hover { color: var(--m-magenta); }

/* Floating preview: appare al hover di un servizio, segue il cursore.
   L'immagine viene impostata da JS leggendo data-image dell'item. */
.m-svc__preview {
  position: fixed;
  top: 0; left: 0;
  width: clamp(220px, 22vw, 360px);
  aspect-ratio: 4/3;
  border-radius: var(--m-radius);
  overflow: hidden;
  background: var(--m-canvas);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity .25s var(--m-ease), transform .35s var(--m-ease);
  z-index: 50;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  will-change: transform, opacity;
}
.m-svc__preview.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.m-svc__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: none) { .m-svc__preview { display: none; } }

/* ---- 4. JOURNAL + EXPERTISE ---- */
.m-journal__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  flex-wrap: wrap;
}
.m-journal__date {
  font-family: var(--m-font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 5rem);
  color: var(--m-magenta);
  line-height: 1;
  letter-spacing: -.04em;
}

/* Layout: copy a SINISTRA (centrato verticalmente sull'altezza dell'immagine);
   a DESTRA cerchio (più piccolo) con AUTORE + nome impilati SOTTO l'immagine. */
.m-journal__featured {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 540px);
  grid-template-areas:
    "copy media"
    "copy author";
  gap: clamp(1rem, 2vw, 1.5rem) clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(4rem, 8vw, 7rem);
  padding-bottom: 0;
  border-bottom: 0;
  align-items: start;
}
.m-journal__media {
  grid-area: media;
  justify-self: end;             /* immagine flushed alla destra del suo cell */
  width: 100%;
  max-width: 540px;              /* più piccolo: era 720, ora 540 */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: var(--m-canvas);
}
.m-journal__media img { width: 100%; height: 100%; object-fit: cover; }

.m-journal__author {
  grid-area: author;
  justify-self: end;             /* allineato a destra, come l'immagine sopra */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: .2rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);   /* gap tra immagine e AUTORE */
}
.m-journal__author-label {
  font-family: var(--m-font-mono);
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--m-magenta);
  font-weight: 700;
}
.m-journal__author strong { font-weight: 700; letter-spacing: .04em; font-size: 1.05rem; color: var(--m-ink); }

.m-journal__copy {
  grid-area: copy;
  align-self: center;            /* verticalmente centrato sull'altezza dell'immagine */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 60ch;
  justify-self: start;
}
.m-journal__title { font-size: clamp(1.6rem, 2.8vw, 2.25rem); font-weight: 700; color: var(--m-magenta); line-height: 1.2; margin: 0; }
.m-journal__title a { color: inherit; text-decoration: none; }
.m-journal__title a:hover { text-decoration: underline; }
.m-journal__excerpt { color: var(--m-ink); line-height: 1.65; font-size: 1.02rem; }
.m-journal__copy .m-pill { align-self: flex-start; margin-top: 1.25rem; }

@media (max-width: 800px) {
  .m-journal__featured {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "author" "copy";
  }
  .m-journal__media { max-width: 320px; margin: 0 auto; justify-self: center; }
  .m-journal__author {
    align-items: center;
    text-align: center;
    justify-self: center;
    margin-top: 1rem;
  }
  .m-journal__copy { align-self: start; margin-top: 1.5rem; }
}

/* Variante senza AUTORE: solo copy + media (una riga), copy centrato verticalmente */
.m-journal__featured--no-author {
  grid-template-columns: 1fr minmax(320px, 540px);
  grid-template-areas: "copy media";
}
.m-journal__featured--no-author .m-journal__copy { align-self: center; }
@media (max-width: 800px) {
  .m-journal__featured--no-author {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "copy";
  }
}

.m-expertise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.m-expertise-item {
  display: grid;
  grid-template-columns: clamp(60px, 7vw, 90px) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--m-border);
  cursor: default;
}
.m-expertise-item:last-child { border-bottom: 0; }
.m-expertise-item__num {
  font-family: var(--m-font-display);
  color: var(--m-magenta);
  font-weight: 500;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  letter-spacing: -.02em;
}
.m-expertise-item__title,
.magenta-layout a.m-expertise-item__title,
.magenta-layout .m-expertise-item__title {
  font-family: var(--m-font-display);
  font-weight: 500;                    /* non in bold */
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--m-magenta) !important;  /* batte qualsiasi color: di byte */
  text-decoration: none;
}
/* L'hover NON cambia il colore del testo: appare solo l'immagine floating
   (gestita dall'handler JS in magenta.js). */
.m-expertise-item__title:hover,
.m-expertise-item__title:focus,
.magenta-layout a.m-expertise-item__title:hover,
.magenta-layout a.m-expertise-item__title:focus { color: var(--m-magenta) !important; }
.m-expertise-item__date {
  font-family: var(--m-font-mono);
  font-size: .85rem;
  color: var(--m-text-muted);
}
@media (max-width: 600px) {
  .m-expertise-item { grid-template-columns: 44px 1fr; gap: 1rem; }
  .m-expertise-item__date { grid-column: 2; font-size: .75rem; }
  .m-expertise-item__title { font-size: 1.25rem; }
}

/* ---- 5. CONTACT ---- */
.m-contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.m-contact-grid__copy {
  padding-bottom: clamp(.5rem, 1vw, 1.5rem);
}
.m-contact__lead-title {
  font-family: var(--m-font-sans);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--m-ink);
  margin-bottom: 1.5rem;
}
.m-contact-grid__copy p { color: var(--m-text-muted); font-size: .95rem; line-height: 1.55; max-width: 50ch; }
@media (max-width: 800px) { .m-contact-grid { grid-template-columns: 1fr; } }

/* Form with underlined inputs (no boxes) */
.m-form {
  margin-top: clamp(2rem, 5vw, 4rem);
  /* Padding sul lato SINISTRO, generoso, per spostare il form a destra */
  padding-left: clamp(3rem, 16vw, 16rem);
  padding-right: 0;
}
.m-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 4rem);
}
@media (max-width: 600px) {
  .m-form { padding-left: 0; padding-right: 0; }
}
.m-form__field { display: flex; flex-direction: column-reverse; }
.m-form__field--full { grid-column: 1 / -1; }
.m-form__field input,
.m-form__field select,
.m-form__field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--m-ink);
  padding: .6rem 0;
  font: inherit;
  color: var(--m-ink);
  outline: none;
  border-radius: 0;
  width: 100%;
  transition: border-color var(--m-dur) var(--m-ease);
}
.m-form__field input:focus,
.m-form__field select:focus,
.m-form__field textarea:focus {
  border-bottom-color: var(--m-magenta);
}
.m-form__field textarea { min-height: 80px; resize: vertical; }
.m-form__field label {
  font-size: .82rem;
  color: var(--m-ink);
  font-weight: 500;
  margin-bottom: .35rem;
}
@media (max-width: 800px) { .m-form__grid { grid-template-columns: 1fr; } }

.m-form__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
@media (max-width: 800px) { .m-form__bottom { grid-template-columns: 1fr; } }

.m-form__consents {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.m-check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--m-ink-3);
  cursor: pointer;
}
.m-check input[type="checkbox"] {
  width: 16px; height: 16px;
  margin-top: .15rem;
  accent-color: var(--m-magenta);
  flex: 0 0 auto;
}
.m-check a { text-decoration: underline; }

.m-form__submit {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: stretch;
}
.m-form__submit .m-pill { width: 100%; }
.m-form__legal { font-size: .75rem; color: var(--m-text-muted); text-align: center; }
.m-form__legal a { text-decoration: underline; }

/* =========================================================================
   FOOTER netstrategy-style
   ========================================================================= */
.magenta-layout .m-footer { display: none !important; }   /* nasconde il vecchio dark footer */

.m-footer-ns {
  background: var(--m-paper);
  color: var(--m-ink);
  padding-block: clamp(2rem, 5vw, 4rem);
  /* niente border-top: l'HR sopra il microcopy è stato rimosso */
}

.m-footer-ns__intro {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--m-ink);
  letter-spacing: .01em;
  margin: 0;
  padding-block: .5rem 1.5rem;
  text-align: center;
}
.m-footer-ns__intro strong {
  color: var(--m-ink);
  font-weight: 700;
  font-family: var(--m-font-display);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  letter-spacing: -.01em;
}

.m-footer-ns__rule {
  height: 1px;
  background: var(--m-ink);
  border: 0;
  margin: 0;
}

/* Riga 1: titoli su UN SOLO RIGO (5 colonne) tra i due HR */
.m-footer-ns__headings {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.5rem, 1.5vw, 1.5rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 720px) { .m-footer-ns__headings { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .m-footer-ns__headings { grid-template-columns: repeat(2, 1fr); } }

/* Riga 2: contenuti sotto ogni titolo, allineati alle stesse colonne */
.m-footer-ns__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.5rem, 1.5vw, 1.5rem);
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
@media (max-width: 720px) { .m-footer-ns__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .m-footer-ns__grid { grid-template-columns: repeat(2, 1fr); } }

.m-footer-ns__col {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.m-footer-ns__heading {
  font-family: var(--m-font-display);
  /* font ridotto così tutti e 5 i titoli stanno su un rigo */
  font-size: clamp(1.25rem, 2vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--m-ink);
  text-decoration: none;
  transition: color var(--m-dur) var(--m-ease);
  display: inline-block;
  white-space: nowrap;
}
.m-footer-ns__heading:hover { color: var(--m-magenta); }

.m-footer-ns__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .82rem;
  color: var(--m-ink-3);
  line-height: 1.55;
}
.m-footer-ns__list a {
  color: var(--m-ink-3);
  text-decoration: none;
  transition: color var(--m-dur) var(--m-ease);
}
.m-footer-ns__list a:hover { color: var(--m-magenta); }

/* Carosello loghi partner: full-bleed, scorre automaticamente su un singolo rigo */
.m-footer-ns__logos {
  border: 0;
  border-top: 1px solid var(--m-border);
  background: var(--m-paper);
  padding-block: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
}
.m-marquee--logos .m-marquee__track {
  gap: clamp(2.5rem, 5vw, 4.5rem);
  animation-duration: 45s;
}
.m-footer-ns__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(48px, 5vw, 72px);
  filter: grayscale(1);
  opacity: .65;
  transition: opacity var(--m-dur) var(--m-ease), filter var(--m-dur) var(--m-ease);
}
.m-footer-ns__logo:hover { opacity: 1; filter: grayscale(0); }
.m-footer-ns__logo img {
  height: 100%;
  width: auto;
  max-width: clamp(120px, 12vw, 200px);
  object-fit: contain;
  display: block;
}
.m-marquee--logos:hover .m-marquee__track { animation-play-state: paused; }

/* ============ FOOTER v2 — nuovo layout 5 colonne ============
 * Col 1: Logo + intro paragraph
 * Col 2: Dove Siamo (indirizzo)
 * Col 3: Contatti (telefoni + email)
 * Col 4: Seguici (social links)
 * Col 5: Contattaci (mini form)
 * Bottom: copyright + privacy/cookie policy links
 * Sfondo nero coerente con il tema.
 */
.m-footer-ns--v2 {
  background: #000;
  color: #fff;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.m-footer-ns--v2 a { color: #fff; text-decoration: none; transition: color .2s ease; }
.m-footer-ns--v2 a:hover { color: var(--m-magenta, #E1097E); }

.m-footer-ns__grid-v2 {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.5fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (max-width: 1024px) {
  .m-footer-ns__grid-v2 { grid-template-columns: 1fr 1fr; }
  .m-footer-ns__brand { grid-column: 1 / -1; }
  .m-footer-ns__col--form { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .m-footer-ns__grid-v2 { grid-template-columns: 1fr; }
  .m-footer-ns__brand,
  .m-footer-ns__col--form { grid-column: auto; }
}

.m-footer-ns__brand { display: flex; flex-direction: column; gap: 1.1rem; }
.m-footer-ns__logo-img {
  display: block;
  max-width: 32px;        /* ancora più piccolo come richiesto */
  height: auto;
  /* nessun filtro: il logo viene mostrato nei suoi colori originali (magenta) */
}
.m-footer-ns__intro-text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .85);
}

.m-footer-ns__heading-v2 {
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  margin: 0 0 .9rem;
  color: #fff;
  letter-spacing: -.01em;
}

.m-footer-ns__text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .85);
}

.m-footer-ns__list-v2 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .92rem;
}
.m-footer-ns__list-v2 li { margin: 0; }

.m-footer-ns__social-v2 a {
  display: inline-block;
  font-weight: 600;
}

/* Col 5 "Contattaci" → ora link cliccabile alla pagina /contatti/ */
.m-footer-ns__col--cta { display: flex; }
.m-footer-ns__cta-link {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  width: 100%;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, .04);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  position: relative;
}
.m-footer-ns__cta-link:hover {
  background: rgba(225, 9, 126, .15);
  border-color: var(--m-magenta, #E1097E);
  transform: translateY(-2px);
  color: #fff;
}
.m-footer-ns__cta-link .m-footer-ns__heading-v2 { margin-bottom: .2rem; }
.m-footer-ns__cta-arrow {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--m-magenta, #E1097E);
  transition: transform .2s ease;
}
.m-footer-ns__cta-link:hover .m-footer-ns__cta-arrow {
  transform: translateX(4px);
}

/* Mini form Contattaci (mantenuto solo per compatibilità; non più usato) */
.m-footer-form {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: .9rem;
}
.m-footer-form input,
.m-footer-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  padding: .55rem .7rem;
  font-size: .9rem;
  font-family: inherit;
  border-radius: 4px;
  transition: border-color .2s ease, background .2s ease;
}
.m-footer-form input:focus,
.m-footer-form textarea:focus {
  outline: none;
  border-color: var(--m-magenta, #E1097E);
  background: rgba(255, 255, 255, .12);
}
.m-footer-form input::placeholder,
.m-footer-form textarea::placeholder {
  color: rgba(255, 255, 255, .55);
}
.m-footer-form textarea { resize: vertical; min-height: 80px; }
.m-footer-form button {
  align-self: flex-start;
  background: var(--m-magenta, #E1097E);
  color: #fff;
  border: 0;
  padding: .65rem 1.4rem;
  font-size: .92rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.m-footer-form button:hover { background: #b00763; transform: translateY(-1px); }
.m-footer-form__msg {
  margin: 0 0 .5rem;
  font-size: .85rem;
  padding: .5rem .7rem;
  border-radius: 4px;
}
.m-footer-form__msg--ok  { background: rgba( 16, 185, 129, .18 ); color: #6ee7b7; }
.m-footer-form__msg--err { background: rgba( 239,  68,  68, .18 ); color: #fca5a5; }

/* Rule + bottom row (copyright + privacy/cookie) */
.m-footer-ns__rule-v2 {
  height: 1px;
  background: rgba(255, 255, 255, .15);
  border: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 1.2rem;
}
/* Bottom row: copyright CENTRATO al centro, privacy/cookie a destra.
 * Tre colonne: [vuota] | [copyright centrato] | [privacy/cookie a destra]. */
.m-footer-ns__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  font-size: .82rem;
}
.m-footer-ns__copy {
  grid-column: 2;
  text-align: center;
  color: #ffffff;          /* bianco pieno come richiesto */
  font-weight: 500;
}
.m-footer-ns__version {
  margin-left: .5rem;
  color: rgba(255, 255, 255, .55);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .03em;
  font-family: Menlo, Consolas, "Courier New", monospace;  /* font monospace per la version */
}
.m-footer-ns__legal {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  color: rgba(255, 255, 255, .7);
}
.m-footer-ns__legal a { font-weight: 500; }
.m-footer-ns__legal span { color: rgba(255, 255, 255, .35); }
@media (max-width: 760px) {
  .m-footer-ns__bottom { grid-template-columns: 1fr; gap: .8rem; }
  .m-footer-ns__copy, .m-footer-ns__legal { grid-column: 1; justify-self: center; }
}

/* ============ PAGINE LEGALI — Privacy Policy / Cookie Policy ============
 * Stesso look del tema (sfondo nero, header trasparente). Hero con titolo
 * grande in bianco e intro italica; corpo con tipografia leggibile e
 * contenitore stretto per ottimizzare la lettura.
 */
.m-legal-page { background: #000; color: #fff; }
.m-legal-hero {
  padding-block: clamp(5rem, 12vw, 9rem) clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.m-legal-hero__title {
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0 0 1.2rem;
  color: #fff;
  font-weight: 800;
}
.m-legal-hero__intro {
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
  max-width: 60ch;
  margin: 0 0 .8rem;
}
.m-legal-hero__updated {
  font-size: .85rem;
  color: rgba(255, 255, 255, .55);
  margin: 0;
}

.m-legal-content { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.m-legal-article {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .92);
}
.m-legal-article h2 {
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  color: #fff;
  margin: 2.4rem 0 .8rem;
  letter-spacing: -.01em;
}
.m-legal-article h2:first-child { margin-top: 0; }
.m-legal-article h3 {
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 1.6rem 0 .5rem;
}
.m-legal-article p { margin: 0 0 1rem; }
.m-legal-article ul, .m-legal-article ol {
  margin: 0 0 1.2rem;
  padding-left: 1.5rem;
}
.m-legal-article li { margin-bottom: .35rem; }
.m-legal-article a {
  color: var(--m-magenta, #E1097E);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.m-legal-article a:hover { color: #ff4dae; }
.m-legal-article strong { color: #fff; }

/* ============ SINGLE ARTICLE — Magenta-styled single.php ============ */
.m-article-page { background: #000; color: #fff; }

/* Hero FULLSCREEN: immagine in evidenza dell'articolo prende tutto il viewport
 * (desktop e mobile). Si adatta usando 100dvh quando supportato. */
.m-article-hero {
  position: relative;
  min-height: 540px;
  height: 100vh;
  height: 100dvh;                                /* dynamic viewport per mobile (no barra browser) */
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: flex-end;                          /* contenuto allineato in basso */
  padding-block: 0 clamp(2rem, 5vw, 4rem);
}
/* Variante senza immagine: torna a layout più compatto */
.m-article-hero:not(.m-article-hero--image) {
  height: auto;
  min-height: 0;
  padding-block: clamp(6rem, 14vw, 10rem) clamp(2rem, 5vw, 4rem);
  display: block;
}
@media (max-width: 700px) {
  .m-article-hero { min-height: 460px; }
}

.m-article-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;                         /* riempie tutto, centra l'immagine */
  background-position: center;
  filter: brightness(.65);                        /* meno scura per far risaltare la foto */
  z-index: 0;
}
.m-article-hero__overlay {
  position: absolute;
  inset: 0;
  /* Gradient sottile dal basso, lascia visibile la parte alta dell'immagine */
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.85) 100%);
  z-index: 1;
}
.m-article-hero__inner { position: relative; z-index: 2; width: 100%; }
.m-article-hero__eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--m-magenta, #E1097E);
  margin-bottom: 1rem;
}
.m-article-hero__title {
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-size: clamp(2rem, 5.5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  font-weight: 800;
  margin: 0 0 1rem;
  max-width: 22ch;
}
.m-article-hero__meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: .9rem;
}
.m-article-hero__meta span[aria-hidden] { color: rgba(255, 255, 255, .4); }

/* Content body */
.m-article-content { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.m-article-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .92);
}
.m-article-body > * { margin-bottom: 1.2rem; }
.m-article-body h2,
.m-article-body h3,
.m-article-body h4 {
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  margin: 2.2rem 0 .8rem;
}
.m-article-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.m-article-body h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
.m-article-body a {
  color: var(--m-magenta, #E1097E);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.m-article-body a:hover { color: #ff4dae; }
.m-article-body strong { color: #fff; }
.m-article-body ul, .m-article-body ol { padding-left: 1.5rem; }
.m-article-body img { max-width: 100%; height: auto; border-radius: 6px; }
.m-article-body blockquote {
  border-left: 3px solid var(--m-magenta, #E1097E);
  padding: .4rem 0 .4rem 1.2rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: rgba(255, 255, 255, .85);
  font-size: 1.1rem;
}
.m-article-body figure { margin: 1.5rem 0; }
.m-article-body figure figcaption { font-size: .82rem; color: rgba(255,255,255,.6); margin-top: .5rem; text-align: center; }
.m-article-body pre, .m-article-body code {
  font-family: Menlo, Consolas, monospace;
  background: rgba(255, 255, 255, .07);
  border-radius: 4px;
}
.m-article-body code { padding: .15em .4em; font-size: .9em; }
.m-article-body pre { padding: 1rem; overflow-x: auto; }
.m-article-body pre code { background: transparent; padding: 0; }

/* Tags + nav */
.m-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.m-article-tag {
  display: inline-block;
  padding: .35rem .8rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  color: rgba(255, 255, 255, .8);
  font-size: .82rem;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.m-article-tag:hover {
  background: rgba(225, 9, 126, .15);
  border-color: var(--m-magenta, #E1097E);
  color: #fff;
}

.m-article-nav {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: start;
}
.m-article-nav__link {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-decoration: none;
  color: rgba(255, 255, 255, .85);
  transition: color .2s ease;
}
.m-article-nav__link--prev { text-align: left; }
.m-article-nav__link--next { text-align: right; }
.m-article-nav__link:hover { color: var(--m-magenta, #E1097E); }
.m-article-nav__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.m-article-nav__title { font-weight: 600; }
.m-article-nav__home {
  align-self: center;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--m-magenta, #E1097E);
  border: 1px solid var(--m-magenta, #E1097E);
  padding: .55rem 1.1rem;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.m-article-nav__home:hover { background: var(--m-magenta, #E1097E); color: #fff; }
@media (max-width: 700px) {
  .m-article-nav { grid-template-columns: 1fr; text-align: center; }
  .m-article-nav__link--prev, .m-article-nav__link--next { text-align: center; }
}

/* Related */
.m-article-related {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.m-article-related__title {
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 1.5rem;
  letter-spacing: -.02em;
}
.m-article-related__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 800px) { .m-article-related__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .m-article-related__grid { grid-template-columns: 1fr; } }
.m-article-related__item { margin: 0; }

/* Magazine listing — titolo sezione "Ultimi articoli" + paginazione */
.m-mag-section-title {
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 1.5rem;
  letter-spacing: -.02em;
}
.m-mag-grid-section--posts { padding-top: clamp(1.5rem, 4vw, 3rem); border-top: 1px solid rgba(255,255,255,.1); }
.m-mag-pagination {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}
.m-mag-pagination .nav-links {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-wrap: wrap;
}
.m-mag-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 .8rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background .2s ease, color .2s ease;
}
.m-mag-pagination .page-numbers:hover {
  background: rgba(225, 9, 126, .2);
  color: #fff;
}
.m-mag-pagination .page-numbers.current {
  background: var(--m-magenta, #E1097E);
  color: #fff;
  border-color: var(--m-magenta, #E1097E);
}

/* ============ HOME — Override colore titoli specifici ============ */

/* "Cosa facciamo" — titolo della sezione Servizi (m-svc__title) magenta */
.m-svc__title,
.m-block--services .m-svc__title,
body.magenta-layout .m-svc__title {
    color: var(--m-magenta, #E1097E) !important;
}

/* "Il caffè lo offriamo noi" — lead della sezione Contatti home magenta */
.m-contact__lead-title,
body.magenta-layout .m-contact__lead-title {
    color: var(--m-magenta, #E1097E) !important;
}

/* ============ CHI SIAMO — Spazio tra titolo certificazioni e loghi ============ */
.m-chi-certs__title {
    margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;  /* spazio ampio prima dei loghi */
}

/* ============ SERVIZI — SLIDES FULL-SCREEN (stile libro sfogliabile) ============ */
.m-srv-slides {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 540px;
  overflow: hidden;
  background: #000;
}
.m-srv-slides__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1800px;
}
.m-srv-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(3rem, 8vw, 6rem);
  opacity: 0;
  visibility: hidden;
  transform: rotateY(8deg) translateX(40px);
  transform-origin: left center;
  transition: opacity .6s ease, transform .8s cubic-bezier(.25,.46,.45,.94), visibility 0s linear .8s;
  pointer-events: none;
  backface-visibility: hidden;
}
.m-srv-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: rotateY(0) translateX(0);
  pointer-events: auto;
  transition: opacity .6s ease, transform .8s cubic-bezier(.25,.46,.45,.94), visibility 0s linear 0s;
  z-index: 2;
}
.m-srv-slide.is-leaving {
  opacity: 0;
  visibility: visible;
  transform: rotateY(-12deg) translateX(-60px);
  transform-origin: right center;
  z-index: 1;
}
.m-srv-slide__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.m-srv-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.85) 100%);
  z-index: 1;
}
.m-srv-slide__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  color: #fff;
}
.m-srv-slide__eyebrow {
  display: inline-block;
  font-size: clamp(.75rem, 1vw, .9rem);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--m-magenta, #E1097E);
  margin-bottom: 1rem;
}
.m-srv-slide__title {
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 800;
  color: #fff;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.m-srv-slide__desc {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255,255,255,.9);
  margin: 0;
  max-width: 60ch;
  font-style: italic;
}
/* Nav buttons (frecce ai lati) */
.m-srv-slides__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.m-srv-slides__nav:hover { background: var(--m-magenta, #E1097E); transform: translateY(-50%) scale(1.08); }
.m-srv-slides__nav--prev { left: 1.5rem; }
.m-srv-slides__nav--next { right: 1.5rem; }
.m-srv-slides__nav:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* Dots indicatori (in basso al centro) */
.m-srv-slides__dots {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: .55rem;
  z-index: 10;
}
.m-srv-slides__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.m-srv-slides__dot.is-active {
  background: var(--m-magenta, #E1097E);
  border-color: var(--m-magenta, #E1097E);
  transform: scale(1.3);
}
.m-srv-slides__dot:hover { background: rgba(255,255,255,.3); }
@media (max-width: 700px) {
  .m-srv-slides { height: 80vh; min-height: 460px; }
  .m-srv-slides__nav { width: 44px; height: 44px; }
  .m-srv-slides__nav--prev { left: .8rem; }
  .m-srv-slides__nav--next { right: .8rem; }
}

/* ============ SERVIZI — LISTA 2 COLONNE con icona+titolo+descrizione ============ */
.m-srv-list-section {
  padding-block: clamp(3rem, 7vw, 6rem);
  color: #fff;
}
.m-srv-list__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.m-srv-list__eyebrow {
  display: block;
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-size: clamp(.85rem, 1.2vw, 1rem);
  font-weight: 700;
  letter-spacing: .18em;
  color: #fff;
  margin: 0 0 .8rem;
}
.m-srv-list__title {
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.m-srv-list__desc {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-style: italic;
  color: rgba(255,255,255,.85);
  max-width: 80ch;
}

/* Grid 2 colonne (1 colonna su mobile) */
.m-srv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 6vw, 5rem);
}
@media (max-width: 700px) {
  .m-srv-list { grid-template-columns: 1fr; }
}

.m-srv-item { margin: 0; }
.m-srv-item__title {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--m-font-display, "Inter Tight", sans-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 .9rem;
  letter-spacing: -.01em;
}
.m-srv-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;                /* badge più grande */
  height: 64px;
  flex-shrink: 0;
}
.m-srv-item__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  /* Nessun filtro: il badge viene mostrato nei suoi colori originali */
}
@media (max-width: 700px) {
  .m-srv-item__icon { width: 52px; height: 52px; }
}
.m-srv-item__name { line-height: 1; }
.m-srv-item__desc {
  margin: 0;
  font-size: .98rem;
  line-height: 1.65;
  color: rgba(255,255,255,.88);
  max-width: 50ch;
}

/* ============ LANGUAGE SWITCHER — Dropdown sotto il burger ============
 * Bottone con bandiera + caret. Click → si apre menu a tendina con tutte le
 * lingue disponibili (IT, EN). Selezione salvata in cookie e riapplicata. */
.m-header { position: relative; }    /* il dropdown abs si posiziona rispetto al header */

.m-lang-switcher--dropdown,
.m-lang-switcher--toggle {           /* compat con vecchia versione */
    position: absolute;
    top: calc(74px + 1.25rem);          /* burger 74px + gap */
    right: 1.5rem;
    z-index: 1200;
    pointer-events: auto;
    margin-right: 0;
}
@media (max-width: 600px) {
    .m-lang-switcher--dropdown,
    .m-lang-switcher--toggle {
        top: calc(58px + .8rem);
        right: 1rem;
    }
}

/* Bottone toggle del dropdown (mostra lingua corrente + freccia) */
.m-lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s ease, transform .15s ease, border-color .2s ease;
}
.m-lang-switcher__toggle:hover {
    background: var(--m-magenta, #E1097E);
    transform: translateY(-1px);
    border-color: var(--m-magenta, #E1097E);
}
.m-lang-switcher__caret {
    margin-left: .15rem;
    transition: transform .2s ease;
}
.m-lang-switcher--dropdown.is-open .m-lang-switcher__caret { transform: rotate(180deg); }

/* Menu dropdown vero e proprio */
.m-lang-switcher__menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    min-width: 180px;
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.m-lang-switcher--dropdown.is-open .m-lang-switcher__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.m-lang-switcher__menu[hidden] { display: block; }   /* override [hidden] per animazione */
.m-lang-switcher__menu li { margin: 0; padding: 0; list-style: none; }

.m-lang-switcher__option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: 6px;
    text-decoration: none;
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.m-lang-switcher__option:hover {
    background: rgba(225, 9, 126, .2);
    color: #fff;
}
.m-lang-switcher__option.is-current {
    background: rgba(225, 9, 126, .15);
    color: #fff;
    font-weight: 600;
}
.m-lang-switcher__name { flex: 1; }
.m-lang-switcher__check { color: var(--m-magenta, #E1097E); }

/* In header is-scrolled (sfondo bianco), il bottone usa stile chiaro */
.m-header.is-scrolled .m-lang-switcher__toggle {
    background: rgba(0, 0, 0, .05);
    color: var(--m-ink, #111);
    border-color: rgba(0, 0, 0, .15);
}
.m-header.is-scrolled .m-lang-switcher__toggle:hover {
    background: var(--m-magenta, #E1097E);
    color: #fff;
}

@media (max-width: 600px) {
    .m-lang-switcher__toggle { padding: .35rem .6rem; font-size: .7rem; }
    .m-lang-switcher__menu { min-width: 160px; }
}

/* Stile generico (fallback per la versione non toggle, e quando Polylang non attivo) */
.m-lang-switcher {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    margin-right: .75rem;
    pointer-events: auto;
}
/* Polylang renderizza <ul class="..."> con <li><a> */
.m-lang-switcher--pll ul,
.m-lang-switcher--pll {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.m-lang-switcher--pll li { margin: 0; padding: 0; list-style: none; }

/* Bottoni (sia il custom .m-lang-switcher__btn che quello PLL .lang-item a) */
.m-lang-switcher__btn,
.m-lang-switcher--pll .lang-item a {
    display: inline-flex !important;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    text-decoration: none !important;
    color: inherit !important;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    opacity: .55;
    transition: opacity .2s ease, background .2s ease, transform .15s ease;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
}
.m-lang-switcher__btn:hover,
.m-lang-switcher--pll .lang-item a:hover { opacity: 1; transform: translateY(-1px); }
.m-lang-switcher__btn.is-active,
.m-lang-switcher--pll .lang-item.current-lang a {
    opacity: 1;
    background: rgba(225, 9, 126, .25);
    border-color: var(--m-magenta, #E1097E);
}
.m-lang-switcher__flag,
.m-lang-switcher--pll .lang-item img {
    display: inline-block !important;
    width: 22px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
.m-lang-switcher__code { font-family: var(--m-font-mono, monospace); }
.m-header.is-scrolled .m-lang-switcher__btn,
.m-header.is-scrolled .m-lang-switcher--pll .lang-item a { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: var(--m-ink, #111) !important; }
.m-header.is-scrolled .m-lang-switcher__btn.is-active,
.m-header.is-scrolled .m-lang-switcher--pll .lang-item.current-lang a { background: rgba(225, 9, 126, .15); color: var(--m-magenta, #E1097E) !important; border-color: var(--m-magenta, #E1097E); }
@media (max-width: 700px) {
    .m-lang-switcher__code,
    .m-lang-switcher--pll .lang-item a span { display: none; }   /* solo bandierine su mobile */
    .m-lang-switcher { margin-right: .5rem; }
}

/* ============ NASCONDI popup in inglese del plugin madquick-ppg ============
 * Il plugin "Madquick WP Legal Pages" inietta due banner inglesi
 * (#mq-cookie-banner e quelli con classe .bnu-*). Abbiamo già un nostro
 * cookie banner italiano (.m-cookie-banner), quindi nascondiamo i loro. */
#mq-cookie-banner,
.mq-cookie-banner,
.bnu-update-banner,
[class^="bnu-"],
[id^="bnu-"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ----- Cookie banner --------------------------------------------------------- */
.m-cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1500;
  background: #FFFFFF;
  color: var(--m-ink);
  border-top: 1px solid var(--m-ink);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2rem);
  box-shadow: 0 -4px 30px rgba(0,0,0,.10);
  transform: translateY(110%);
  transition: transform .35s var(--m-ease);
}
.m-cookie-banner.is-visible { transform: translateY(0); }
.m-cookie-banner__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 800px) {
  .m-cookie-banner__inner { grid-template-columns: 1fr; }
  .m-cookie-banner__actions { justify-content: flex-start; }
}
.m-cookie-banner__text { font-size: .92rem; line-height: 1.55; max-width: 80ch; }
.m-cookie-banner__text p { margin: 0; }
.m-cookie-banner__text a { color: var(--m-magenta); text-decoration: underline; }
.m-cookie-banner__text a:hover { color: var(--m-magenta-deep); }
.m-cookie-banner__actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.m-cookie-banner__btn {
  padding: .8rem 1.6rem;
  border-radius: var(--m-radius-pill);
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  transition: background .2s var(--m-ease), color .2s var(--m-ease), border-color .2s var(--m-ease);
  white-space: nowrap;
}
.m-cookie-banner__btn--ghost {
  background: transparent;
  color: var(--m-ink);
  border: 1px solid var(--m-ink);
}
.m-cookie-banner__btn--ghost:hover { background: var(--m-ink); color: #FFFFFF; }
.m-cookie-banner__btn--magenta {
  background: var(--m-magenta);
  color: #FFFFFF !important;
  border: 1px solid var(--m-magenta);
}
.m-cookie-banner__btn--magenta:hover { background: var(--m-magenta-deep); border-color: var(--m-magenta-deep); }

/* ----- Custom cursor magenta ------------------------------------------------- */
.m-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--m-magenta);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .25s var(--m-ease), height .25s var(--m-ease), background .25s var(--m-ease), opacity .2s var(--m-ease);
  will-change: top, left;
  opacity: 0;
  mix-blend-mode: normal;
  box-shadow: 0 0 18px rgba(225, 9, 126, .35);
}
.m-cursor.is-active { opacity: 1; }
.m-cursor.is-hover {
  width: 44px;
  height: 44px;
  background: var(--m-magenta-deep);
  box-shadow: 0 0 30px rgba(225, 9, 126, .55);
}

/* Nascondi cursore di sistema solo su desktop con mouse fine + hover */
@media (hover: hover) and (pointer: fine) {
  body.magenta-layout,
  body.magenta-layout a,
  body.magenta-layout button,
  body.magenta-layout input,
  body.magenta-layout select,
  body.magenta-layout textarea,
  body.magenta-layout [role="button"],
  body.magenta-layout .m-burger-circle { cursor: none; }
}

/* Touch / coarse pointer: niente custom cursor */
@media (hover: none), (pointer: coarse) {
  .m-cursor { display: none !important; }
}

/* =========================================================================
   DARK THEME — homepage in negativo (sfondo nero, testi bianchi/magenta).
   Si attiva con la body class `magenta-layout` (default su tutte le pagine
   col layout magenta). Override mirati alle sezioni della home.
   ========================================================================= */
body.magenta-layout,
body.magenta-layout #page,
body.magenta-layout > #page,
body.magenta-layout main,
body.magenta-layout .site-main,
body.magenta-layout .m-block,
body.magenta-layout .m-statement,
body.magenta-layout .m-block--services,
body.magenta-layout .m-block--carousel,
body.magenta-layout .m-elementor-home {
  background-color: #000000 !important;
  color: #FFFFFF;
}
body.magenta-layout h1,
body.magenta-layout h2,
body.magenta-layout h3,
body.magenta-layout h4,
body.magenta-layout p,
body.magenta-layout li,
body.magenta-layout span,
body.magenta-layout label,
body.magenta-layout .m-display-xl,
body.magenta-layout .magenta-layout .m-display-xl,
body.magenta-layout .m-statement .m-display-xl,
body.magenta-layout .m-svc__title,
body.magenta-layout .m-statement__copy p,
body.magenta-layout .m-svc__intro p,
body.magenta-layout .m-cases__head h2,
body.magenta-layout .m-case-card__title,
body.magenta-layout .m-case-card__sub,
body.magenta-layout .m-contact-grid h2,
body.magenta-layout .m-contact__lead-title,
body.magenta-layout .m-form label,
body.magenta-layout .m-journal__title a,
body.magenta-layout .m-journal__excerpt,
body.magenta-layout .m-expertise-item__title,
body.magenta-layout .m-expertise-item__num {
  color: #FFFFFF !important;
}
/* Em / strong / link → magenta brand #EC008C */
body.magenta-layout em,
body.magenta-layout .m-statement .m-display-xl em,
body.magenta-layout strong,
body.magenta-layout a:not(.m-pill):not(.m-burger-circle):not(.m-cookie-banner__btn) {
  color: #EC008C !important;
}
/* Service items: testo bianco, hover magenta */
body.magenta-layout .m-svc-item__label { color: #FFFFFF !important; }
body.magenta-layout .m-svc-item:hover .m-svc-item__label,
body.magenta-layout .m-svc-item.is-active .m-svc-item__label { color: #EC008C !important; }
/* Hairline rule chiara su sfondo nero */
body.magenta-layout .m-rule { background: rgba(255, 255, 255, .15) !important; }
/* Card successi: bordo chiaro su nero, contenuto bianco/magenta */
body.magenta-layout .m-case-card {
  background: #0F0F12 !important;
  border-color: rgba(255, 255, 255, .1) !important;
}
body.magenta-layout .m-case-card__placeholder {
  background: linear-gradient(135deg, #1a0512 0%, #2a0a20 100%) !important;
}
body.magenta-layout .m-case-card__tab { background: #EC008C !important; color: #FFFFFF !important; }
/* Form input: campi su sfondo nero con bordo magenta soft */
body.magenta-layout .m-form input,
body.magenta-layout .m-form select,
body.magenta-layout .m-form textarea {
  background: #0F0F12 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, .25) !important;
}
body.magenta-layout .m-form input::placeholder,
body.magenta-layout .m-form textarea::placeholder { color: rgba(255, 255, 255, .5); }
body.magenta-layout .m-form input:focus,
body.magenta-layout .m-form select:focus,
body.magenta-layout .m-form textarea:focus { border-color: #EC008C !important; outline: none; }
body.magenta-layout .m-check span { color: #FFFFFF; }
body.magenta-layout .m-form__legal,
body.magenta-layout .m-form__legal a { color: rgba(255, 255, 255, .7) !important; }
body.magenta-layout .m-form__legal a:hover { color: #EC008C !important; }
/* Marquee carosello: sfondo nero anche dietro le immagini */
body.magenta-layout .m-marquee--photos { background: #000000 !important; }

/* Nasconde i filtri categoria nella sezione successi */
body.magenta-layout .m-cases__filters { display: none !important; }
body.magenta-layout .m-cases__head { gap: 0 !important; }

/* ---- Sezione "Alcuni nostri video" — 5 short YouTube in griglia 9:16 ---- */
.m-block--videos { padding-block: clamp(3rem, 7vw, 6rem); }
.m-block--videos .m-display-xl { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.m-videos__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.m-videos__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.m-video-card {
  background: #0F0F12;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
.m-video-card__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;          /* formato YouTube Shorts */
  background: #000;
}
.m-video-card__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Tablet e mobile: carosello orizzontale scrollabile con TUTTI i video
 * (niente più display:none, ogni video è raggiungibile con swipe/scroll). */
@media (max-width: 1100px) {
  .m-videos__grid {
    display: flex;                                 /* da grid a flex riga */
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-block: .5rem 1rem;
    scroll-padding: 1rem;
    /* nasconde scrollbar mantenendo funzionalità */
    scrollbar-width: thin;
  }
  .m-videos__grid::-webkit-scrollbar { height: 6px; }
  .m-videos__grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
  .m-videos__grid .m-video-card {
    flex: 0 0 auto;
    width: clamp(220px, 42vw, 320px);              /* desktop ridotto: 2 visibili */
    scroll-snap-align: center;
    display: block !important;                     /* override eventuali nth-child:none */
  }
}
@media (max-width: 700px) {
  .m-videos__grid .m-video-card { width: 70vw; }   /* mobile: 1 video centrato visibile */
}

/* Nasconde l'eventuale lista Expertise rimasta in cache di altre pagine */
body.magenta-layout .m-expertise-list { display: none !important; }

/* ---- Sezione "Partnership" — loghi partner in marquee scorrevole ---- */
.m-block--partnership { padding-block: clamp(3rem, 7vw, 6rem); }
.m-block--partnership .m-display-xl { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.m-partnership__strip {
  background: transparent;
  padding-block: 0;        /* niente spazio in più: la fascia ha l'altezza esatta del logo */
  overflow: hidden;
}
.m-partnership__strip .m-marquee__track {
  gap: 1cm;                /* 1 cm fisso tra un logo e l'altro */
  animation-duration: 60s; /* leggermente più veloce vista la distanza minore */
}
.m-partnership__logo {
  flex: 0 0 240px;         /* larghezza fissa 240px (+20% rispetto a 200) */
  width: 240px;
  height: 240px;           /* riquadro 240×240 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Loghi mostrati nei loro colori originali — niente filtro bianco/grigio */
  opacity: 1;
  transition: opacity .25s ease, transform .25s ease;
}
.m-partnership__logo:hover { opacity: 1; transform: scale(1.05); }
.m-partnership__logo img {
  width: 100%;
  height: 100%;
  max-width: 240px;
  max-height: 240px;
  object-fit: contain;     /* il logo non si deforma, riempie il riquadro 240×240 */
  display: block;
}
.m-partnership__strip:hover .m-marquee__track { animation-play-state: paused; }

/* Bordo top sottile della sezione partnership per dare separazione dal video */
body.magenta-layout .m-block--partnership { border-top: 1px solid rgba(255, 255, 255, .08); }

/* ---- Case cards: tab categoria + corpo separati come link distinti ---- */
.m-case-card { display: flex; flex-direction: column; transition: box-shadow .25s ease; }
.m-case-card__main {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  flex: 1;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.m-case-card:hover { box-shadow: 0 12px 32px rgba(236, 0, 140, .25); }
.m-case-card__main:hover { transform: translateY(-4px); }
.m-case-card__main:hover .m-case-card__arrow { color: #EC008C; }
.m-case-card__main:focus-visible {
  outline: 2px solid #EC008C;
  outline-offset: 4px;
}
/* Il badge categoria è cliccabile → archivio della categoria */
a.m-case-card__tab {
  text-decoration: none !important;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}
a.m-case-card__tab:hover { filter: brightness(1.15); transform: scale(1.02); }
a.m-case-card__tab:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* ============================================================
   ARCHIVE / TAXONOMY (case studies + categorie)
   ============================================================ */
.m-archive { min-height: 60vh; padding-top: clamp(4rem, 8vw, 8rem); }
.m-archive-header { padding-block: clamp(2rem, 5vw, 4rem); }
.m-archive-header__eyebrow {
    display: inline-block;
    font-family: var(--m-font-mono);
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #EC008C;
    margin-bottom: 1rem;
}
.m-archive-header h1.m-display-xl {
    margin: 0 0 1.25rem;
    line-height: 1;
    color: #FFFFFF !important;
}
.m-archive-header__desc {
    max-width: 60ch;
    color: rgba(255, 255, 255, .8);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}
.m-archive-header__meta {
    color: rgba(255, 255, 255, .55);
    font-family: var(--m-font-mono);
    font-size: .85rem;
    margin: 0;
}

/* Filters bar (solo /lavori/) */
.m-archive-filters { padding-block: 1rem 0; }
.m-archive-filters__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding-block: 1.25rem;
}

/* Pagination */
.m-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: 3rem;
}
.m-pagination__item .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 .9rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--m-font-mono);
    font-size: .9rem;
    transition: background .2s ease, border-color .2s ease;
}
.m-pagination__item .page-numbers:hover { border-color: #EC008C; color: #EC008C; }
.m-pagination__item .page-numbers.current {
    background: #EC008C;
    border-color: #EC008C;
    color: #FFFFFF;
}
.m-pagination__item .page-numbers.dots { border-color: transparent; }

.m-archive-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, .55);
    font-style: italic;
}

/* Pill ghost — usata nei filtri archive (link agli archivi categoria) */
.m-pill--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #FFFFFF;
}
.m-pill--ghost:hover { border-color: #EC008C; color: #EC008C; }
.m-pill--ghost.is-active {
    background: #EC008C;
    border-color: #EC008C;
    color: #FFFFFF;
}

/* ============================================================
   SINGLE CASE STUDY (/case-study/<slug>/)
   ============================================================ */
.m-case-single { padding-top: clamp(4rem, 8vw, 8rem); }

.m-case-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.m-case-hero__breadcrumb {
    font-family: var(--m-font-mono);
    font-size: .8rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.m-case-hero__breadcrumb a {
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    transition: color .2s ease;
}
.m-case-hero__breadcrumb a:hover { color: #EC008C; }
.m-case-hero__title {
    margin: 0 0 1.5rem;
    line-height: 1;
    color: #FFFFFF !important;
}
.m-case-hero__sub {
    max-width: 70ch;
    color: rgba(255, 255, 255, .85);
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 0;
}
.m-case-hero__media {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    width: 100%;                              /* ESPLICITO: riempie il parent */
    max-width: var(--m-container-wide);
    margin-inline: auto;
    padding-inline: var(--m-gutter);
    box-sizing: border-box;                    /* padding dentro la max-width */
}
.m-case-hero__media img {
    display: block;
    width: 100%;
    max-width: 100%;                           /* nessun overflow */
    height: auto;
    border-radius: var(--m-radius-lg, 16px);
    object-fit: cover;                         /* riempie senza lasciare gap */
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.m-case-content { padding-block: clamp(3rem, 6vw, 5rem); }
.m-case-content__body {
    max-width: 75ch;
    margin: 0 auto;
    color: #FFFFFF;
    font-size: 1.1rem;
    line-height: 1.75;
}
.m-case-content__body p,
.m-case-content__body li,
.m-case-content__body blockquote { color: rgba(255, 255, 255, .9); }
.m-case-content__body h2,
.m-case-content__body h3,
.m-case-content__body h4 {
    color: #FFFFFF !important;
    margin: 2.5rem 0 1rem;
    font-family: var(--m-font-display);
    line-height: 1.15;
}
.m-case-content__body h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.m-case-content__body h3 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); }
.m-case-content__body a {
    color: #EC008C;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.m-case-content__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--m-radius);
    display: block;
    margin: 2rem 0;
}
.m-case-content__body blockquote {
    border-left: 3px solid #EC008C;
    padding: .75rem 0 .75rem 1.5rem;
    margin: 2rem 0;
    font-style: italic;
}

.m-case-cta {
    padding-block: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.m-case-nav {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-block: clamp(3rem, 5vw, 4rem);
}
.m-case-nav__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.m-case-nav__link {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-decoration: none;
    padding: 1.5rem;
    background: #0F0F12;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--m-radius);
    transition: border-color .2s ease, transform .2s ease;
}
.m-case-nav__link:hover {
    border-color: #EC008C;
    transform: translateY(-2px);
}
.m-case-nav__link--next { text-align: right; }
.m-case-nav__label {
    font-family: var(--m-font-mono);
    font-size: .75rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.m-case-nav__title {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 600;
}
@media (max-width: 700px) {
    .m-case-nav__grid { grid-template-columns: 1fr; }
    .m-case-nav__link--next { text-align: left; }
}

/* ==========================================================================
   Contatti — HELLO. hero + CTAs + info row + form + mappa
   ========================================================================== */
.m-contatti {
    background: #000;
    color: #fff;
    min-height: 100vh;
}

/* Hero HELLO. — pieno-viewport, centrato verticalmente */
.m-contatti-hello {
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    padding: clamp(4rem, 10vh, 8rem) 0 clamp(2rem, 5vh, 4rem);
}
.m-contatti-hello__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    width: 100%;
}
.m-contatti-hello__title {
    font-family: var(--m-font-display, "Inter", system-ui, sans-serif);
    font-weight: 800;
    font-size: clamp(7rem, 22vw, 22rem);
    line-height: .85;
    letter-spacing: -0.04em;
    color: #fff;
    margin: 0;
    text-align: center;
}
.m-contatti-hello__lead-wrap {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    max-width: 720px;
    text-align: center;
    justify-content: center;
}
.m-contatti-hello__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--m-magenta, #EC008C);
    margin-top: .55em;
    flex-shrink: 0;
}
.m-contatti-hello__lead {
    margin: 0;
    font-size: clamp(.85rem, 1.05vw, 1rem);
    letter-spacing: .05em;
    line-height: 1.55;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
}

/* I 3 pulsanti CTA: pill ghost grandi, magenta su hover */
.m-contatti-hello__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: clamp(.5rem, 2vw, 1.5rem);
}
.m-contatti-cta {
    min-width: 220px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    background: transparent;
    padding: 1rem 2rem;
    border-radius: 999px;
    font-weight: 500;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .15s ease;
}
.m-contatti-cta:hover,
.m-contatti-cta:focus-visible {
    border-color: var(--m-magenta, #EC008C);
    background: var(--m-magenta, #EC008C);
    color: #fff;
}
.m-contatti-cta.is-filled {
    background: rgba(255, 255, 255, .06);
}
.m-contatti-cta.is-filled:hover {
    background: var(--m-magenta, #EC008C);
}

/* Info row con location / telefono / WhatsApp */
.m-contatti-hello__info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    margin-top: clamp(2rem, 5vw, 4rem);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.m-contatti-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: #fff;
    font-size: .95rem;
}
.m-contatti-info-item__icon {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}
.m-contatti-info-item__icon svg { display: block; }
.m-contatti-info-item__body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    color: #fff;
    text-decoration: none;
    line-height: 1.45;
}
.m-contatti-info-item__body a { color: #fff; text-decoration: none; }
.m-contatti-info-item__body a:hover { color: var(--m-magenta, #EC008C); }
.m-contatti-info-item__sub {
    color: rgba(255, 255, 255, .55);
    font-size: .85rem;
}

@media (max-width: 900px) {
    .m-contatti-hello__info { grid-template-columns: 1fr; gap: 1.25rem; }
    .m-contatti-cta { min-width: 0; flex: 1 1 100%; }
}

/* Form di contatto sotto l'hero */
.m-contatti-form {
    background: #0a0a0a;
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.m-contatti-form__head {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    text-align: left;
}
.m-contatti-form__eyebrow {
    display: inline-block;
    font-family: var(--m-font-mono, monospace);
    font-size: .8rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--m-magenta, #EC008C);
    margin-bottom: 1rem;
}
.m-contatti-form__title {
    color: #fff;
    margin: 0;
}
.m-contatti-form .m-form { color: #fff; }
.m-contatti-form .m-form input,
.m-contatti-form .m-form select,
.m-contatti-form .m-form textarea {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
}
.m-contatti-form .m-form input::placeholder,
.m-contatti-form .m-form textarea::placeholder { color: rgba(255, 255, 255, .35); }
.m-contatti-form .m-form label,
.m-contatti-form .m-check span,
.m-contatti-form .m-form__legal { color: rgba(255, 255, 255, .8); }
.m-contatti-form .m-form a { color: var(--m-magenta, #EC008C); }

/* Mappa Google */
.m-contatti-map {
    background: #000;
    padding: clamp(4rem, 8vw, 7rem) 0 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.m-contatti-map__head {
    text-align: left;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.m-contatti-map__eyebrow {
    display: inline-block;
    font-family: var(--m-font-mono, monospace);
    font-size: .8rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--m-magenta, #EC008C);
    margin-bottom: 1rem;
}
.m-contatti-map__title {
    color: #fff;
    margin: 0 0 1.25rem;
}
.m-contatti-map__cta { margin: 0; }
.m-contatti-map__frame {
    margin-top: 0;
    line-height: 0;
}
.m-contatti-map__frame iframe {
    display: block;
    width: 100%;
    height: clamp(380px, 55vw, 580px);
    border: 0;
}

/* =====================================================================
   CHI SIAMO — Hero magenta + Team grid + Certificazioni + Clienti
   ===================================================================== */

.m-chi-siamo { background: #ffffff; color: #0B0B0F; }

/* ---------- Hero (titolo magenta a sinistra, descrizione a destra) ---- */
.m-chi-hero {
    padding: clamp(7rem, 14vw, 11rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: #ffffff;
}
.m-chi-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
}
.m-chi-hero__title {
    margin: 0;
    font-family: var(--m-font-display, "Inter Tight", "Inter", sans-serif);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.03em;
    text-transform: uppercase;
    font-size: clamp(3rem, 9.5vw, 9rem);
    color: var(--m-magenta, #EC008C);
}
.m-chi-hero__desc {
    margin: 0 0 .65em;
    font-size: clamp(1.05rem, 1.4vw, 1.4rem);
    line-height: 1.35;
    color: #0B0B0F;
    max-width: 32ch;
}
@media (max-width: 900px) {
    .m-chi-hero__inner { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
    .m-chi-hero__desc { max-width: 100%; }
}

/* ---------- Team (griglia 5 per riga) ---------------------------------- */
.m-chi-team {
    padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3.5rem, 7vw, 6rem);
    background: #ffffff;
}
.m-chi-team__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(.75rem, 1.5vw, 1.25rem);
}
@media (max-width: 1100px) { .m-chi-team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .m-chi-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .m-chi-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .m-chi-team__grid { grid-template-columns: 1fr; } }

.m-chi-team__card { list-style: none; }
.m-chi-team__photo-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #11131a;
    aspect-ratio: 3 / 4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.m-chi-team__photo,
.m-chi-team__photo--empty {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.m-chi-team__photo--empty { background: linear-gradient(135deg, #1a1d2a 0%, #11131a 100%); }
.m-chi-team__photo-wrap:hover .m-chi-team__photo { transform: scale(1.04); }

.m-chi-team__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.85) 100%);
    color: #ffffff;
    backdrop-filter: blur(2px);
}
/* Nome e ruolo team — STESSO font del titolo "CHI SIAMO." (Inter Tight, 900). */
.m-chi-team__name,
.m-chi-team__role {
    font-family: var(--m-font-display, "Inter Tight", "Inter", sans-serif);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
    text-transform: uppercase;
}
.m-chi-team__name {
    font-size: clamp(.85rem, .95vw, 1.05rem);
    color: #ffffff;
}
.m-chi-team__role {
    font-size: clamp(.7rem, .78vw, .85rem);
    color: rgba(255, 255, 255, .82);
    margin-top: .15rem;
}

/* ---------- Certificazioni (riga loghi a scala di grigio) ------------- */
.m-chi-certs {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #ffffff;
    border-top: 1px solid #ececec;
}
.m-chi-certs__title {
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    font-family: var(--m-font-mono, monospace);
    font-size: clamp(.85rem, 1vw, 1rem);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--m-magenta, #EC008C);
    font-weight: 700;
}
.m-chi-certs__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}
.m-chi-certs__item {
    flex: 0 0 auto;
    list-style: none;
}
.m-chi-certs__item img {
    display: block;
    height: clamp(20px, 2.25vw, 30px); /* esattamente la metà rispetto a prima */
    width: auto;
    max-width: 100px;                  /* esattamente la metà rispetto a prima */
    object-fit: contain;
    filter: grayscale(1) contrast(.9);
    opacity: .82;
    transition: filter .25s ease, opacity .25s ease;
}
.m-chi-certs__item:hover img {
    filter: none;
    opacity: 1;
}

/* ---------- Clienti (titolo magenta + descrizione + griglia 8/riga) --- */
.m-chi-clients {
    padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4.5rem, 9vw, 8rem);
    background: #ffffff;
    border-top: 1px solid #ececec;
}
.m-chi-clients__title {
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    font-family: var(--m-font-display, "Inter Tight", "Inter", sans-serif);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.02em;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 5.5vw, 4.5rem);
    color: var(--m-magenta, #EC008C);
}
.m-chi-clients__desc {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.45;
    color: #0B0B0F;
    max-width: 70ch;
}
.m-chi-clients__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}
@media (max-width: 1280px) { .m-chi-clients__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .m-chi-clients__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .m-chi-clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .m-chi-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.m-chi-clients__item {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Loghi più grandi: ogni cella mira a essere quadrata (~600px massimo,
       in pratica limitata dalla larghezza disponibile della griglia 8 col). */
    aspect-ratio: 1 / 1;
    min-height: 0;
}
.m-chi-clients__item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 600px;
    object-fit: contain;
    filter: grayscale(1) contrast(.95);
    opacity: .88;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.m-chi-clients__item:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.04);
}

/* =====================================================================
   PAGINA SERVIZI — sfondo nero, hero, sezioni con carosello cards rosa,
   form contatti riusato da [magenta_contact_form].
   ===================================================================== */

.m-servizi {
    background: #000000;
    color: #ffffff;
}

/* ---------- HERO --------------------------------------------------- */
.m-srv-hero {
    padding: clamp(7rem, 14vw, 11rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    background: #000000;
}
.m-srv-hero__eyebrow {
    display: block;
    font-family: var(--m-font-mono, monospace);
    font-size: clamp(.85rem, 1.1vw, 1.05rem);
    letter-spacing: .22em;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: .9rem;
    opacity: .9;
}
.m-srv-hero__title {
    margin: 0;
    font-family: var(--m-font-display, "Inter Tight", "Inter", sans-serif);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.025em;
    text-transform: uppercase;
    font-size: clamp(2.8rem, 8.5vw, 7.5rem);
    color: #ffffff;
}
.m-srv-hero__desc {
    margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
    font-size: clamp(1.05rem, 1.4vw, 1.4rem);
    line-height: 1.45;
    color: #ffffff;
    max-width: 60ch;
    font-style: italic;
    font-weight: 500;
}

/* ---------- SEZIONE SERVIZI (header + carosello) ------------------- */
.m-srv-section {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
    background: #000000;
}
.m-srv-section__head {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.m-srv-section__eyebrow {
    display: block;
    font-family: var(--m-font-mono, monospace);
    font-size: clamp(.78rem, 1vw, .95rem);
    letter-spacing: .22em;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: .65rem;
    opacity: .82;
}
.m-srv-section__title {
    margin: 0;
    font-family: var(--m-font-display, "Inter Tight", "Inter", sans-serif);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.025em;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 6vw, 5rem);
    color: #ffffff;
}
.m-srv-section__desc {
    margin: clamp(.85rem, 1.5vw, 1.25rem) 0 0;
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.45;
    color: #ffffff;
    max-width: 70ch;
    font-style: italic;
    opacity: .92;
}

/* ---------- CAROSELLO ---------------------------------------------- */
.m-srv-carousel {
    position: relative;
}
.m-srv-carousel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 max(1rem, calc((100vw - var(--m-container-max-wide, 1500px)) / 2 + 1rem));
}
.m-srv-carousel__viewport::-webkit-scrollbar { display: none; }

.m-srv-carousel__track {
    list-style: none;
    margin: 0;
    padding: .25rem 0 .5rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(80vw, 280px), 280px);
    gap: clamp(1rem, 1.5vw, 1.5rem);
}
@media (min-width: 768px)  { .m-srv-carousel__track { grid-auto-columns: 300px; } }
@media (min-width: 1100px) { .m-srv-carousel__track { grid-auto-columns: 320px; } }

/* ---------- CARD ROSA --------------------------------------------- */
.m-srv-card {
    list-style: none;
    /* Magenta scuro su richiesta (#cb0368) — uguale per servizi principali
       e aggiuntivi. */
    background: #cb0368;
    color: #ffffff;
    padding: 1.5rem 1.4rem 1.6rem;
    border-radius: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 480px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.m-srv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(203, 3, 104, .4);
}
.m-srv-card__image {
    width: 110px;
    height: 110px;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff14;
    flex-shrink: 0;
}
.m-srv-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.m-srv-card__body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}
.m-srv-card__title {
    margin: 0;
    font-family: var(--m-font-display, "Inter Tight", "Inter", sans-serif);
    font-weight: 800;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    line-height: 1.15;
    letter-spacing: .01em;
    color: #ffffff;
}
.m-srv-card__subtitle {
    font-family: var(--m-font-mono, monospace);
    font-size: .85rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: .35rem;
}
.m-srv-card__desc {
    margin: 0;
    font-size: .92rem;
    line-height: 1.45;
    color: #ffffff;
    flex: 1;
}
.m-srv-card__link {
    display: inline-block;
    margin-top: .5rem;
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    align-self: flex-start;
}
.m-srv-card__link:hover { text-decoration-thickness: 2px; }

/* ---------- FRECCE NAVIGAZIONE ------------------------------------ */
.m-srv-carousel__nav {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.m-srv-carousel__btn {
    width: 56px;
    height: 44px;
    background: transparent;
    color: var(--m-magenta, #E1097E);
    border: 2px solid var(--m-magenta, #E1097E);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}
.m-srv-carousel__btn:hover {
    background: var(--m-magenta, #E1097E);
    color: #ffffff;
}
.m-srv-carousel__btn:active { transform: scale(.96); }
.m-srv-carousel__btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ---------- FORM CONTATTI (riutilizzo stili contatti) -------------- */
.m-srv-form {
    background: #000000;
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.m-srv-form__head {
    text-align: left;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.m-srv-form__eyebrow {
    display: inline-block;
    font-family: var(--m-font-mono, monospace);
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--m-magenta, #EC008C);
    margin-bottom: 1rem;
}
.m-srv-form__title {
    color: #ffffff;
    margin: 0;
}
.m-srv-form .m-form,
.m-srv-form .m-form input,
.m-srv-form .m-form textarea,
.m-srv-form .m-form select {
    color: #ffffff;
}
.m-srv-form .m-form a { color: var(--m-magenta, #EC008C); }

/* =====================================================================
   PAGINA MAGAZINE — sfondo nero, hero, griglia cards bianche cliccabili.
   ===================================================================== */

.m-magazine {
    background: #000000;
    color: #ffffff;
}

/* ---------- HERO --------------------------------------------------- */
.m-mag-hero {
    padding: clamp(7rem, 14vw, 11rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    background: #000000;
}
.m-mag-hero__eyebrow {
    display: block;
    font-family: var(--m-font-mono, monospace);
    font-size: clamp(.85rem, 1.1vw, 1.05rem);
    letter-spacing: .22em;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: .9rem;
    opacity: .9;
}
.m-mag-hero__title {
    margin: 0;
    font-family: var(--m-font-display, "Inter Tight", "Inter", sans-serif);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.025em;
    text-transform: uppercase;
    font-size: clamp(2.8rem, 8.5vw, 7.5rem);
    color: #ffffff;
}
.m-mag-hero__desc {
    margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
    font-size: clamp(1.05rem, 1.4vw, 1.4rem);
    line-height: 1.45;
    color: #ffffff;
    max-width: 70ch;
    font-style: italic;
    font-weight: 500;
}

/* ---------- GRIGLIA -------------------------------------------------- */
.m-mag-grid-section {
    padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(5rem, 10vw, 8rem);
    background: #000000;
}
.m-mag-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;        /* TUTTE le righe stessa altezza → no overlap */
    grid-auto-flow: row dense;
    gap: 1.5rem;
    row-gap: 1.5rem;
    column-gap: 1.5rem;
    align-items: stretch;        /* le card riempiono la loro cella */
}
.m-mag-grid__item { display: flex; }  /* il <li> diventa flex per far riempire la card */
@media (min-width: 1280px) { .m-mag-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .m-mag-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .m-mag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .m-mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .m-mag-grid { grid-template-columns: 1fr; } }

.m-mag-grid__item { list-style: none; }
.m-mag-grid__item--wide { grid-column: span 2; }
@media (max-width: 420px) { .m-mag-grid__item--wide { grid-column: auto; } }

/* ---------- CARD ARTICOLO — Nuova struttura flex (no aspect-ratio sulla card)
 * Layout:
 *   ┌────────────────┐
 *   │   IMMAGINE     │ ← block separato, aspect-ratio fisso 16/9, no taglio
 *   ├────────────────┤
 *   │ TITOLO+BRAND   │ ← block sotto, sfondo nero con sfumatura — uguale per
 *   │                │   single e wide (entrambi mostrano lo stesso pattern)
 *   └────────────────┘
 * Tutte le card sulla stessa riga si allineano via grid stretch.            */
.m-mag-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #000;
    color: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
    height: 100%;             /* riempi la cella grid in altezza */
    width: 100%;              /* riempi la cella grid in larghezza */
    flex: 1;                  /* riempi il <li> flex parent */
    /* NO aspect-ratio: la card prende l'altezza della riga grid */
}
a.m-mag-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
}
a.m-mag-card:focus-visible {
    outline: 3px solid var(--m-magenta, #E1097E);
    outline-offset: 3px;
}

/* Immagine al top — ALTEZZA FISSA UGUALE PER TUTTE le card (single e wide).
 * Niente più aspect-ratio: l'altezza in pixel è la stessa, così wide e single
 * hanno foto della stessa altezza visiva (le wide sono solo più larghe). */
.m-mag-card__image {
    position: relative;
    width: 100%;
    height: clamp(170px, 18vw, 260px);   /* altezza identica su single e wide */
    overflow: hidden;
    background: #000;
    flex-shrink: 0;
    line-height: 0;
}
.m-mag-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* riempie il 16/9 mantenendo proporzioni */
    display: block;
    transition: transform .5s ease;
}
a.m-mag-card:hover .m-mag-card__image img { transform: scale(1.04); }

/* Corpo testo sotto l'immagine: sfondo nero con gradient sottile sul top,
 * stesso identico look per single e wide. */
.m-mag-card__body {
    flex: 1;                    /* riempi lo spazio rimanente della card */
    padding: 1.1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .35rem;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, .55) 0%,
        rgba(0, 0, 0, .95) 30%,
        #000               100%
    );
    color: #fff;
}

/* Brand + Titolo: font display, colore bianco su overlay scuro. */
.m-magazine .m-mag-card__brand,
.m-magazine .m-mag-card__title,
a.m-mag-card .m-mag-card__brand,
a.m-mag-card .m-mag-card__title,
.m-mag-card h3.m-mag-card__title {
    font-family: var(--m-font-display, "Inter Tight", "Inter", sans-serif);
    font-size: .95rem;
    line-height: 1.25;
    color: #ffffff !important;
    letter-spacing: .005em;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.m-magazine .m-mag-card__brand {
    font-weight: 700;
    font-size: .8rem;
    opacity: .9;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.m-magazine .m-mag-card__title {
    font-weight: 600;
    /* Truncate a 2 righe per uniformare l'altezza delle cards */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}