/* =========================================================
   DP LEGAL — Studio Legale Milano dal 1994
   Stile classico milanese, continuità col vecchio sito
   Palette: cream + navy + oro ottone
   Font: Playfair Display + Raleway
   ========================================================= */

:root {
  --cream: #faf9f7;
  --cream-deep: #f1ede4;
  --navy: #202939;
  --navy-deep: #15192a;
  --oro: #b4a276;
  --oro-soft: #c9b993;
  --oro-deep: #9c8b62;
  --ink: #1a1a1a;
  --ink-soft: #2c2c2c;
  --ink-mute: #555;
  --grey: #B4B4B4;
  --grey-light: #e6e3dc;
  --white: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
em, i { font-style: normal; }

html, body {
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-synthesis: none; /* evita che il browser inventi weight non caricati */
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }

/* ===== Tipografia ===== */
.serif { font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* ===== Header — absolute iniziale (sopra hero), fixed compact dopo scroll ===== */
.dp-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--cream);
  text-align: center;
  padding: 46px 20px 32px;
  border-bottom: 1px solid transparent;
}
.dp-header .logo-full {
  display: inline-block;
  vertical-align: middle;
  transition: opacity .35s ease;
}
.dp-header .logo-full img {
  height: 116px;
  width: auto;
  margin: 0 auto;
  transition: height .4s ease;
}
.dp-header .logo-small {
  display: none;
  vertical-align: middle;
}
.dp-header .logo-small img {
  height: 52px;
  width: auto;
}

.dp-nav {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: margin-top .4s ease, gap .4s ease;
}
.dp-nav a {
  color: var(--oro-deep);
  transition: color .3s ease, border-color .3s ease;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  font-weight: 400;
}
.dp-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--oro);
}
.dp-nav a.active {
  color: var(--ink);
}

/* Lang group ITA / ENG con stato attivo */
.dp-nav .lang-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  padding-left: 18px;
  border-left: 1px solid var(--grey-light);
  font-size: 12px;
  letter-spacing: 0.2em;
}
.dp-nav .lang-group a {
  padding: 4px 4px;
  border-bottom: 1px solid transparent;
  font-weight: 400;
  color: var(--oro-deep);
  opacity: 0.55;
  transition: opacity .25s ease, color .25s ease, border-color .25s ease;
}
.dp-nav .lang-group a:hover { opacity: 1; color: var(--ink); }
.dp-nav .lang-group a.lang-active {
  opacity: 1;
  color: var(--ink);
  border-bottom-color: var(--oro);
  font-weight: 400;
}
.dp-nav .lang-group .lang-sep {
  color: var(--oro-deep);
  opacity: 0.5;
  font-weight: 300;
}

/* Compact: dopo scroll oltre soglia, scivola dall'alto fisso */
.dp-header.compact {
  position: fixed;
  z-index: 100;
  padding: 24px 48px;
  background: rgba(250, 249, 247, 0.97);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom-color: rgba(180, 162, 118, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  box-shadow: 0 2px 24px -12px rgba(32, 41, 57, 0.18);
  animation: slideDown .35s cubic-bezier(.2, .7, .2, 1) both;
}
.dp-header.compact .logo-full { display: none; }
.dp-header.compact .logo-small { display: inline-block; }
.dp-header.compact .logo-small img { height: 46px; }
.dp-header.compact .dp-nav {
  margin-top: 0;
  gap: 36px;
  font-size: 12px;
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Burger mobile */
.burger {
  display: none;
  position: absolute;
  top: 20px;
  right: 18px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--navy);
  position: relative;
  transition: transform .3s ease, opacity .3s ease;
}
.burger span::before, .burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 1px;
  background: var(--navy);
  transition: transform .3s ease;
}
.burger span::before { top: -8px; }
.burger span::after { top: 8px; }

@media (max-width: 900px) {
  .dp-header { padding: 22px 16px 18px; }
  .dp-header .logo-full img { height: 72px; }
  .burger { display: flex; }
  .dp-nav { display: none; }
  .dp-header.menu-open .dp-nav {
    display: flex; flex-direction: column; gap: 18px;
    padding: 24px 0 16px;
  }
  .dp-header.compact { padding: 10px 16px; }
  .dp-header.compact .logo-small img { height: 32px; }
}

/* Spacer ormai non più necessario perchè l'header iniziale è absolute */
.header-spacer { display: none; }

/* ===== HOME — blocchi (replicare struttura vecchio) ===== */
.home {
  position: relative;
}
.blocco {
  width: 100%;
  position: relative;
}

/* Hero (blocco uno) — foto parallax, inizia da y=0 sotto header absolute */
.blocco.uno {
  /* Box hero ristretto con margini cream ai lati. aspect-ratio impostato via JS */
  width: calc(100% - 10vw);
  max-width: 1180px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background-color: var(--navy-deep);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  position: relative;
}
.blocco.uno::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(32,41,57,0) 0%, rgba(32,41,57,0.25) 100%);
}
/* Banda cream sopra il hero per fare spazio all'header absolute */
.home {
  padding-top: 200px;
  background: var(--cream);
}
@media (max-width: 900px) {
  .blocco.uno {
    width: calc(100% - 6vw);
    aspect-ratio: 3 / 2;
  }
  .home { padding-top: 160px; }
}

/* Lo studio */
.blocco.lostudio {
  background: var(--cream);
  padding: 110px 0 100px;
  position: relative;
}
.blocco.lostudio .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}
.blocco.lostudio .colonna {
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  font-weight: 400;
}
.blocco.lostudio .colonna:first-child {
  padding-right: 70px;
}
.blocco.lostudio .colonna:last-child {
  padding-left: 70px;
  border-left: 1px solid var(--grey-light);
}
.blocco.lostudio h2 {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 44px;
  color: var(--navy);
  margin: 0 0 24px;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.blocco.lostudio h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: var(--oro);
  margin-top: 22px;
}
.blocco.lostudio .colonna p:first-of-type {
  margin-top: 0;
  font-size: 16px;
  color: var(--navy);
  font-style: normal;
  line-height: 1.7;
}
.blocco.lostudio p + p { margin-top: 1.1em; }

@media (max-width: 900px) {
  .blocco.lostudio { padding: 60px 0; }
  .blocco.lostudio .container { grid-template-columns: 1fr; padding: 0 28px; }
  .blocco.lostudio .colonna { padding: 0; }
  .blocco.lostudio .colonna:first-child { border-right: 0; border-bottom: 1px solid var(--grey-light); padding-bottom: 40px; margin-bottom: 40px; }
  .blocco.lostudio h2 { font-size: 30px; }
}

/* Quote Eliot — warm overlay che richiama tones della sala riunioni (no più navy) */
.blocco.cit {
  background: #2a221a; /* fallback warm dark */
  color: #f0e9d6;
  padding: 130px 0 110px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
}
.blocco.cit::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(40, 38, 36, 0.45) 0%, rgba(22, 22, 24, 0.72) 100%),
    linear-gradient(180deg, rgba(180, 162, 118, 0.08) 0%, rgba(0, 0, 0, 0) 60%);
}
/* Varianti tone applicabili al .blocco.cit (sperimentazione via picker) */
.blocco.cit.tone-warm::before {
  background:
    linear-gradient(180deg, rgba(40, 38, 36, 0.45) 0%, rgba(22, 22, 24, 0.72) 100%),
    linear-gradient(180deg, rgba(180, 162, 118, 0.08) 0%, rgba(0, 0, 0, 0) 60%);
}
.blocco.cit.tone-cream::before {
  /* più chiaro, cream + ombre seppia */
  background:
    linear-gradient(180deg, rgba(70, 50, 30, 0.42) 0%, rgba(40, 28, 16, 0.65) 100%);
}
.blocco.cit.tone-sepia::before {
  background:
    linear-gradient(180deg, rgba(120, 90, 50, 0.5) 0%, rgba(50, 35, 22, 0.78) 100%);
}
.blocco.cit.tone-coffee::before {
  background:
    linear-gradient(180deg, rgba(70, 48, 30, 0.6) 0%, rgba(25, 18, 12, 0.85) 100%);
}
.blocco.cit .container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}
.blocco.cit .apri, .blocco.cit .chiudi {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--oro-soft);
  font-size: 60px;
  font-style: normal;
  line-height: 0.6;
  display: block;
  opacity: 0.95;
}
.blocco.cit .apri { text-align: left; margin-bottom: 8px; }
.blocco.cit .chiudi { text-align: right; margin-top: 4px; }
.blocco.cit p {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 26px;
  line-height: 1.55;
  color: #f6f0de;
  max-width: 680px;
  margin: 0 auto;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 18px rgba(20, 14, 8, 0.35);
}
.blocco.cit span:not(.apri):not(.chiudi) {
  display: block;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--oro-soft);
  margin-top: 40px;
}

@media (max-width: 900px) {
  .blocco.cit { padding: 80px 0 70px; background-attachment: scroll; }
  .blocco.cit p { font-size: 20px; line-height: 1.55; }
  .blocco.cit .apri, .blocco.cit .chiudi { font-size: 48px; }
}

/* Milano strip (parallax) */
.blocco.milano {
  height: 280px;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
@media (max-width: 900px) {
  .blocco.milano { height: 200px; background-attachment: scroll; }
}

/* Titolo "servizi" */
.blocco.titolo {
  background: var(--cream);
  text-align: center;
  padding: 100px 20px 50px;
}
.blocco.titolo .eyebrow {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 18px;
  display: block;
}
.blocco.titolo h2 {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 46px;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 0;
}
.blocco.titolo h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: var(--oro);
  margin: 26px auto 0;
}
.blocco.titolo .lead {
  font-family: 'Cormorant Garamond', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 18px;
  color: var(--ink-mute);
  max-width: 640px;
  margin: 30px auto 0;
  line-height: 1.55;
}

/* Servizi (3 card eleganti, con aria, separate) */
.blocco.servizi {
  background: var(--cream);
  padding: 30px 0 110px;
}
.servizi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 50px;
}
.blocco.servizi a.svc-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 380px;
  color: var(--cream);
  overflow: hidden;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  box-shadow: 0 10px 30px -18px rgba(32, 41, 57, 0.4);
  transition: box-shadow .5s ease;
  padding: 32px;
}
.blocco.servizi a.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.55) 0%, rgba(15, 12, 8, 0.78) 100%);
  transition: background .5s ease;
  z-index: 1;
}
.blocco.servizi a.svc-card:hover {
  box-shadow: 0 22px 48px -16px rgba(32, 41, 57, 0.55);
}
.blocco.servizi a.svc-card:hover::before {
  /* Hover: la foto si illumina (overlay molto più chiaro) ma mantiene contrasto sul testo via text-shadow */
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.15) 0%, rgba(15, 12, 8, 0.4) 100%);
}
.blocco.servizi a.svc-card h3 {
  position: relative;
  z-index: 2;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.4;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 0;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: color .4s ease, letter-spacing .4s ease;
  max-width: 100%;
}
.blocco.servizi a.svc-card:hover h3 {
  color: var(--oro-soft);
  letter-spacing: 0.3em;
}

@media (max-width: 900px) {
  .servizi-grid { grid-template-columns: 1fr; padding: 0 24px; gap: 20px; }
  .blocco.servizi a.svc-card { height: 280px; padding: 28px; }
  .blocco.servizi a.svc-card h3 { font-size: 26px; }
}

/* ===== FOOTER (3 colonne come vecchio) ===== */
.dp-footer {
  background: var(--cream);
  color: var(--ink-soft);
  padding: 56px 0 30px;
  border-top: 1px solid var(--grey-light);
}
.dp-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.dp-footer .col p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.dp-footer .col p:last-child { margin-bottom: 0; }
.dp-footer .col strong {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  color: var(--navy);
  display: inline-block;
  margin: 4px 0 6px;
  font-weight: 600;
}
.dp-footer .col a {
  color: var(--oro);
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 14px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.dp-footer .col a:hover { border-bottom-color: var(--oro); }
.dp-footer .col a.inline {
  display: inline;
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
  margin: 0;
  border-bottom: 0;
}
.dp-footer .col a.inline:hover { color: var(--oro-deep); }
.dp-footer .copyright {
  max-width: 1200px;
  margin: 50px auto 0;
  padding: 24px 60px 0;
  border-top: 1px solid var(--grey-light);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
}

@media (max-width: 900px) {
  .dp-footer { padding: 50px 0 30px; }
  .dp-footer .container { grid-template-columns: 1fr; padding: 0 28px; gap: 36px; }
  .dp-footer .copyright { padding: 24px 28px 0; }
}

/* ===== Animazioni soft per scroll-reveal ===== */
@keyframes softUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== PAGINE INTERNE ===== */

/* Sulle pagine interne, l'header è SEMPRE fixed in modalità compact dall'inizio.
   Niente animazione, niente versione expanded. */
.dp-header.always-compact {
  position: fixed;
  z-index: 100;
  padding: 24px 48px;
  background: rgba(250, 249, 247, 0.97);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--grey-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  box-shadow: 0 2px 24px -12px rgba(32, 41, 57, 0.18);
  animation: none;
}
.dp-header.always-compact .logo-full { display: none; }
.dp-header.always-compact .logo-small { display: inline-block; }
.dp-header.always-compact .logo-small img { height: 46px; }
.dp-header.always-compact .dp-nav {
  margin-top: 0;
  gap: 36px;
  font-size: 12px;
}

/* Banda titolo pagina v2 — più alta, overlay leggero, h1 bottom-left + crumb visibile */
.page-title {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
  padding: 200px 64px 64px;
  background: var(--navy-deep);
  background-image: url('../photo-5128.jpg');
  background-size: cover;
  background-position: center 30%;
  color: var(--cream);
  overflow: hidden;
  border-bottom: 1px solid var(--oro);
}
.page-title::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(21, 25, 42, 0.20) 0%, rgba(21, 25, 42, 0.55) 55%, rgba(21, 25, 42, 0.84) 100%);
}
.page-title > * { position: relative; z-index: 1; }
.page-title .crumb { display: none; }
.page-title h1 {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 48px);
  color: var(--oro);
  letter-spacing: 0.22em;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0;
}
.page-title h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: var(--oro);
  margin-top: 22px;
  opacity: 0.75;
}
@media (max-width: 900px) {
  .dp-header.always-compact { padding: 14px 16px; }
  .dp-header.always-compact .logo-small img { height: 36px; }
  .dp-header.always-compact .dp-nav .lang-group { margin-left: 8px; padding-left: 12px; }
  .page-title { min-height: 340px; padding: 130px 22px 44px; }
  .page-title h1 { letter-spacing: 0.18em; }
  .page-title h1::after { margin-top: 16px; width: 40px; }
}

/* ===== PARTNERS — 3 ritratti in linea editoriale sobrio (D-rev) ===== */
.partners-list {
  background: var(--cream);
  padding: 80px 56px 100px;
}
.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.partner-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--cream-deep);
  overflow: hidden;
  border-bottom: 2px solid var(--oro);
  aspect-ratio: 4/5;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.partner-card figure {
  margin: 0;
  overflow: hidden;
  background: var(--cream-deep);
  width: 100%; height: 100%;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.partner-card figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .6s ease;
  filter: saturate(0.95);
}
.partner-card:hover figure { transform: scale(1.03); }
.partner-card:hover figure img { filter: saturate(1.06); }
.partner-card .tag {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  background: rgba(250, 249, 247, 0.94);
  padding: 6px 11px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oro-deep);
}
.partner-card .card-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 90px 24px 26px;
  color: #fff;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(8, 10, 16, 0.45) 30%,
    rgba(8, 10, 16, 0.98) 100%
  );
}
.partner-card .role {
  display: block;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 9px;
}
.partner-card h3 {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  color: #fff;
  margin: 0;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 8px rgba(15, 18, 32, 0.30);
}
.partner-card h3 em {
  color: inherit;
  font-style: normal;
  font-weight: 400;
}
@media (max-width: 900px) {
  .partners-list { padding: 56px 16px 70px; }
  .partners-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; }
  .partner-card { aspect-ratio: 4/5; }
  .partner-card .card-text { padding: 60px 20px 20px; }
}

/* ===== PARTNER BIO — Look 3 v7 (padding aria piena · 200 top) ===== */
.partner-bio {
  background: var(--cream);
  padding: 140px 0 130px;
}
.partner-bio .layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 56px;
}
.partner-bio .photo-col {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: sticky;
  /* top = padding-top della sezione: la foto resta ferma dove atterra,
     nessuno scatto verso l'alto allo scroll */
  top: 140px;
  align-self: start;
}
.partner-bio figure {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4/5;
  margin: 0;
  position: relative;
  background-color: var(--cream-deep);
  overflow: hidden;
  border-bottom: 2px solid var(--oro);
}
.partner-bio figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 80%;
  display: block;
  filter: saturate(0.96);
}
.partner-bio .bio-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
}
.partner-bio .role-tag {
  display: inline-block;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--oro-deep);
  margin-bottom: 22px;
}
.partner-bio h2 {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 46px);
  color: var(--navy);
  margin: 0 0 28px;
  line-height: 1.05;
  letter-spacing: -0.008em;
}
.partner-bio h2 em {
  color: var(--oro-deep);
  font-weight: 500;
}
.partner-bio .lead {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  margin: 0 0 24px;
  font-weight: 500;
  max-width: 560px;
}
.partner-bio .narrative {
  margin: 0 0 32px;
  max-width: 580px;
}
.partner-bio .narrative .cv-section {
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid var(--grey-light);
}
.partner-bio .narrative .cv-section:first-child {
  padding-top: 6px;
  margin-top: 0;
  border-top: none;
}
.partner-bio .narrative .cv-section .k {
  display: block;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--oro-deep);
  margin-bottom: 14px;
}
.partner-bio .narrative p {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-weight: 400;
}
.partner-bio .narrative .cv-section p:last-child { margin-bottom: 0; }
.partner-bio .narrative p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .partner-bio .narrative { max-width: none; }
  .partner-bio .narrative p { font-size: 14px; }
  .partner-bio .narrative .cv-section { padding-top: 18px; margin-top: 18px; }
  .partner-bio .narrative .cv-section .k { font-size: 9.5px; letter-spacing: 0.32em; margin-bottom: 12px; }
}
.partner-bio .areas {
  padding-top: 26px;
  margin-bottom: 26px;
  border-top: 1px solid var(--grey-light);
}
.partner-bio .areas .k {
  display: block;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--oro-deep);
  margin-bottom: 16px;
}
.partner-bio .areas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 32px;
}
.partner-bio .areas-grid span {
  position: relative;
  padding: 6px 0 6px 18px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  color: var(--navy);
  line-height: 1.3;
}
.partner-bio .areas-grid span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 1px;
  background: var(--oro);
}
.partner-bio .meta {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--grey-light);
}
.partner-bio .meta-item .k {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oro-deep);
  display: block;
  margin-bottom: 7px;
}
.partner-bio .meta-item .v {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.partner-bio .meta-item .v a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--oro);
  padding-bottom: 1px;
  transition: color .2s ease;
}
.partner-bio .meta-item .v a:hover { color: var(--oro-deep); }
.partner-bio .back-link {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 28px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oro-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--grey-light);
  padding-bottom: 7px;
  transition: color .25s ease, border-color .25s ease;
  align-self: flex-start;
}
.partner-bio .back-link::before {
  content: '\2190';
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  color: var(--oro);
  font-size: 16px;
  letter-spacing: 0;
}
.partner-bio .back-link:hover { color: var(--navy); border-color: var(--oro); }
@media (max-width: 900px) {
  .partner-bio { padding: 90px 0 70px; }
  .partner-bio .layout { grid-template-columns: 1fr; padding: 0 22px; gap: 40px; }
  /* Su mobile/tablet il layout è a 1 colonna (foto sopra il testo): niente sticky */
  .partner-bio .photo-col { position: static; top: auto; }
  .partner-bio figure { min-height: 0; aspect-ratio: 4/5; max-width: 420px; margin: 0 auto; }
  .partner-bio .bio-text { padding: 0; max-width: none; }
  .partner-bio .areas-grid { grid-template-columns: 1fr; gap: 0; }
  .partner-bio .meta { grid-template-columns: 1fr; gap: 18px; }
}

/* ===== ATTIVITÀ — accordion 6 aree ===== */
.attivita-section {
  background: var(--cream);
  padding: 80px 56px 110px;
}
.attivita-intro {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.acc-list {
  max-width: 1080px;
  margin: 0 auto;
}
.acc-item {
  border-top: 1px solid var(--grey-light);
}
.acc-item:last-child { border-bottom: 1px solid var(--grey-light); }
.acc-trigger {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 28px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 28px 0;
  font: inherit;
  color: inherit;
  transition: padding .25s ease;
}
.acc-trigger:hover { padding-left: 8px; }
.acc-trigger .acc-num {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--oro-deep);
}
.acc-trigger .acc-title {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  color: var(--navy);
  transition: color .25s ease;
}
.acc-trigger:hover .acc-title { color: var(--oro-deep); }
.acc-trigger .acc-icon {
  width: 22px; height: 22px;
  position: relative;
  border: 1px solid var(--oro);
  border-radius: 50%;
  flex-shrink: 0;
}
.acc-trigger .acc-icon::before,
.acc-trigger .acc-icon::after {
  content: '';
  position: absolute;
  background: var(--oro-deep);
  left: 50%;
  top: 50%;
  transform-origin: center;
  transition: transform .35s ease;
}
.acc-trigger .acc-icon::before { width: 10px; height: 1px; transform: translate(-50%, -50%); }
.acc-trigger .acc-icon::after { width: 1px; height: 10px; transform: translate(-50%, -50%); }
.acc-item.open .acc-trigger .acc-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.acc-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1);
  margin-left: 98px;
}
.acc-item.open .acc-content { grid-template-rows: 1fr; }
.acc-content > div {
  overflow: hidden;
}
.acc-content p {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 65ch;
}
@media (max-width: 700px) {
  .attivita-section { padding: 56px 16px 80px; }
  .acc-trigger { grid-template-columns: 40px 1fr auto; gap: 16px; padding: 22px 0; }
  .acc-content { margin-left: 56px; }
}

/* ===== SERVIZI — pagina dedicata: 3 sezioni pulite, single-column centered ===== */
.servizi-page {
  background: var(--cream);
}
.servizi-page .svc-section {
  padding: 110px 56px;
  text-align: center;
}
.servizi-page .svc-section:nth-child(even) {
  background: var(--cream-deep);
}
.servizi-page .svc-section + .svc-section {
  border-top: 1px solid var(--grey-light);
}
.servizi-page .svc-section .inner {
  max-width: 720px;
  margin: 0 auto;
}
.servizi-page .svc-section h2 {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 40px);
  color: var(--navy);
  margin: 0 0 32px;
  line-height: 1.15;
  letter-spacing: 0.005em;
}
.servizi-page .svc-section h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--oro);
  margin: 24px auto 0;
}
.servizi-page .svc-section p {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 auto 18px;
  max-width: 56ch;
}
.servizi-page .svc-section p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .servizi-page .svc-section { padding: 72px 20px; }
  .servizi-page .svc-section h2 { margin-bottom: 24px; }
  .servizi-page .svc-section h2::after { margin-top: 18px; }
}

/* ===== GALLERY — striscia orizzontale 3 scene ===== */
.gallery-page {
  background: var(--cream);
  padding: 50px 0 70px;
}
.strip-header {
  max-width: 1440px;
  margin: 0 auto 24px;
  padding: 0 56px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.strip-header .label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oro-deep);
  font-weight: 600;
}
.strip-header .counter {
  font-family: 'Inter', monospace;
  font-size: 13px;
  color: var(--navy);
  letter-spacing: 0.2em;
  font-weight: 500;
}
.strip-header .counter strong {
  font-weight: 600;
  color: var(--oro-deep);
}
.strip-header .nav-btns {
  display: flex; gap: 10px;
}
.strip-header .nav-btns button {
  width: 44px; height: 44px;
  border: 1px solid var(--grey-light);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s, color .25s;
}
.strip-header .nav-btns button:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--oro);
}
.strip-header .nav-btns button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.strip-container {
  width: 100%;
  overflow: hidden;
}
.strip-slides {
  display: flex;
  width: max-content;
  transition: transform .65s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}
.gallery-page .slide {
  flex: 0 0 100vw;
  padding: 0 56px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 600px;
}
.gallery-page .slide figure {
  margin: 0;
  overflow: hidden;
  background: var(--cream-deep);
  position: relative;
}
.gallery-page .slide figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
  filter: saturate(0.96);
}
.gallery-page .slide figure:hover img { transform: scale(1.03); filter: saturate(1.05); }
/* brightness +10% applicato inline sui singoli img tranne 4867 (gia esposto bene) */
.gallery-page .slide .pos-hero { grid-column: 1; grid-row: 1 / span 2; }
.gallery-page .slide .pos-a { grid-column: 2; grid-row: 1; }
.gallery-page .slide .pos-b { grid-column: 3; grid-row: 1; }
.gallery-page .slide .pos-c { grid-column: 2; grid-row: 2; }
.gallery-page .slide .pos-d { grid-column: 3; grid-row: 2; }
.strip-dots {
  max-width: 1440px;
  margin: 28px auto 0;
  padding: 0 56px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.strip-dots button {
  width: 32px; height: 2px;
  background: var(--grey-light);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .3s, width .3s;
}
.strip-dots button.active {
  background: var(--oro);
  width: 56px;
}
@media (max-width: 900px) {
  .strip-header { padding: 0 22px; flex-wrap: wrap; gap: 14px; }
  .gallery-page .slide { padding: 0 22px; height: 480px; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; gap: 6px; }
  .gallery-page .slide .pos-hero { grid-column: 1; grid-row: 1 / span 2; }
  .gallery-page .slide .pos-a { grid-column: 2; grid-row: 1; }
  .gallery-page .slide .pos-b { grid-column: 2; grid-row: 2; }
  .gallery-page .slide .pos-c { grid-column: 1; grid-row: 3; }
  .gallery-page .slide .pos-d { grid-column: 2; grid-row: 3; }
}

/* ===== PRIVACY (long-form text) ===== */
.privacy-page {
  background: var(--cream);
  padding: 80px 56px 130px;
}
.privacy-page .inner {
  max-width: 760px;
  margin: 0 auto;
}
.privacy-page h2 {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--navy);
  margin: 56px 0 22px;
  letter-spacing: 0.005em;
  line-height: 1.2;
}
.privacy-page h2:first-child { margin-top: 0; }
.privacy-page h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--oro);
  margin-top: 14px;
}
.privacy-page p {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.privacy-page a {
  color: var(--oro-deep);
  border-bottom: 1px solid var(--grey-light);
  padding-bottom: 1px;
  transition: border-color .25s ease, color .25s ease;
}
.privacy-page a:hover { color: var(--navy); border-color: var(--oro); }
.privacy-page ul {
  margin: 0 0 18px 0;
  padding: 0;
  list-style: none;
}
.privacy-page li {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
}
.privacy-page li::before {
  content: '\2014';
  color: var(--oro);
  position: absolute;
  left: 0;
}
@media (max-width: 700px) {
  .privacy-page { padding: 56px 16px 80px; }
}

/* ===== CONTATTI ===== */
.contatti-page {
  background: var(--cream);
  padding: 90px 56px 130px;
}
.contatti-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.contatti-grid .info > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--grey-light);
  align-items: baseline;
}
.contatti-grid .info > div:first-child { border-top: 1px solid var(--grey-light); }
.contatti-grid .info dt,
.contatti-grid .info .k {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oro-deep);
}
.contatti-grid .info dd,
.contatti-grid .info .v {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 22px;
  font-weight: 500;
  color: var(--navy);
  margin: 0;
  line-height: 1.35;
}
.contatti-grid .info .v a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.contatti-grid .info .v a:hover { color: var(--oro-deep); border-bottom-color: var(--oro); }
.contatti-grid .info .v .small {
  display: block;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
  font-weight: 400;
}
.contatti-grid .map-wrap {
  position: sticky;
  top: 120px;
  background: var(--cream-deep);
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid var(--grey-light);
}
.contatti-grid .map-wrap iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.45) sepia(0.08) contrast(0.96);
}
@media (max-width: 900px) {
  .contatti-page { padding: 56px 16px 80px; }
  .contatti-grid { grid-template-columns: 1fr; gap: 40px; }
  .contatti-grid .info > div { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .contatti-grid .map-wrap { position: static; aspect-ratio: 4/3; }
}

/* ===== UTILITY ===== */
body.nav-open { overflow: hidden; }

/* ===== LANG CROSSFADE ===== */
/* Crossfade fra IT ↔ EN: fade-out al click, fade-in al load */
html { transition: opacity .22s ease; }
html.dp-fading-out, html.dp-fading-in { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html { transition: none; }
  html.dp-fading-out, html.dp-fading-in { opacity: 1; }
}

/* Picker DEV (hero/Eliot/Servizi) rimossi · sezione A · 24 mag 2026 */

/* ==========================================================================
   MOBILE POLISH · ≤ 760px
   Override mirato di tipografia, spaziature, nav, gallery, accordion, bio.
   Obiettivo: parità di qualità con desktop, navigabile, touch-friendly.
   ========================================================================== */

@media (max-width: 760px) {

  /* === HEADER & NAV ===
     Expanded: in cima, trasparente, logo grande sulla hero. Scorre via con la pagina.
     Compact: barra cream che SCENDE dall'alto con animazione fluida quando scrolli. */
  .dp-header {
    padding: 20px 18px;
    align-items: center;
  }
  .dp-header:not(.always-compact):not(.compact) {
    background: transparent;
    border-bottom-color: transparent;
  }
  .dp-header .logo-full img { height: 90px; }
  /* Home: la hero parte da sotto l'header (logo sovrapposto, niente banda cream) */
  .home { padding-top: 0; }
  /* Compact: barra cream fissa che scende con animazione morbida.
     padding-top generoso = pezzo bianco sopra il logo → durante la discesa il bordo
     taglia il vuoto, non il logo. Barra un po' più alta.
     :not(.always-compact) = vale SOLO per la home (le pagine interne hanno il loro header). */
  .dp-header.compact:not(.always-compact) {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 18px 18px 14px;
    background: var(--cream);
    animation: slideDown .5s cubic-bezier(.16, 1, .3, 1) both;
  }
  .dp-header.compact:not(.always-compact) .logo-small img { height: 48px; }

  .burger {
    display: flex;
    top: 50%;
    transform: translateY(-50%);
    right: 14px;
    width: 44px;
    height: 44px;
  }

  /* Menu mobile · overlay full screen, ancorato al viewport */
  .dp-nav {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: 100dvh;
    background: var(--cream);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* solo dissolvenza (niente slide): i link restano fermi e sempre cliccabili */
    transition: opacity .28s ease, visibility 0s linear .28s;
    z-index: 1000;
  }
  body.nav-open .dp-nav,
  .dp-header.menu-open .dp-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .28s ease, visibility 0s;
  }

  /* Header STABILE col menu aperto: niente transform/animation/backdrop
     che creerebbero un containing block e romperebbero il fixed del menu
     (causa del glitch: menu semitrasparente + gap in basso). */
  .dp-header.menu-open,
  .dp-header.menu-open.compact {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    animation: none !important;
    transform: none !important;
    background: var(--cream) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
  }
  .dp-header { z-index: 100; }
  .dp-header.menu-open { z-index: 1000; }
  /* Burger sempre sopra l'overlay, tap immediato, click che va sempre al button */
  .burger {
    z-index: 1100;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    pointer-events: auto;
  }
  .burger span,
  .burger span::before,
  .burger span::after { pointer-events: none; }
  .dp-nav a {
    font-size: 17px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--navy);
    padding: 15px 24px;
    border-bottom: 1px solid transparent;
    min-height: 52px;
    width: 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color .2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  .dp-nav a:active { color: var(--oro); }
  .dp-nav a:hover, .dp-nav a.active { color: var(--oro-deep); }
  .dp-nav a.active { border-bottom-color: transparent; }
  .dp-nav .lang-group {
    margin-top: 22px;
    margin-left: 0;
    padding-top: 22px;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--grey-light);
    flex-direction: row;
    gap: 14px;
  }
  .dp-nav .lang {
    font-size: 15px;
    padding: 10px 14px;
    width: auto;
    max-width: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Burger animato → X quando menu aperto */
  body.nav-open .burger span,
  .dp-header.menu-open .burger span {
    background: transparent;
  }
  body.nav-open .burger span::before,
  .dp-header.menu-open .burger span::before {
    transform: translateY(8px) rotate(45deg);
  }
  body.nav-open .burger span::after,
  .dp-header.menu-open .burger span::after {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* === HOME HERO · foto verticale immersiva, logo sovrapposto con sfumatura === */
  .blocco.uno {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-width: none;
    background-image: url('../photo-4931.jpg?v=5') !important;
    /* foto fatta scendere: si vede la parte alta della porta. Eventuale spazio
       in cima è cream (coperto dalla sfumatura del logo). */
    background-color: var(--cream);
    background-position: center top;
    background-repeat: no-repeat;
  }
  /* Sfumatura cream → foto · easing gradient (curva ease-in-out, 16 stop):
     dissolvenza percettivamente fluida, niente banding/stacchi. */
  .blocco.uno::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 240px;
    background: linear-gradient(
      to bottom,
      rgba(250,249,247,1)     0%,
      rgba(250,249,247,0.991) 8.1%,
      rgba(250,249,247,0.964) 15.5%,
      rgba(250,249,247,0.918) 22.5%,
      rgba(250,249,247,0.856) 29.0%,
      rgba(250,249,247,0.780) 35.3%,
      rgba(250,249,247,0.691) 41.2%,
      rgba(250,249,247,0.593) 47.1%,
      rgba(250,249,247,0.488) 52.9%,
      rgba(250,249,247,0.379) 58.8%,
      rgba(250,249,247,0.273) 64.7%,
      rgba(250,249,247,0.176) 71.0%,
      rgba(250,249,247,0.096) 77.5%,
      rgba(250,249,247,0.039) 84.5%,
      rgba(250,249,247,0.008) 91.9%,
      rgba(250,249,247,0)     100%
    );
    z-index: 2;
    pointer-events: none;
  }

  /* === LO STUDIO · editoriale, allineato a sinistra in colonna === */
  .blocco.lostudio { padding: 72px 0 60px; }
  .blocco.lostudio .container {
    display: block;
    max-width: 540px;
    margin: 0 auto;
    padding: 0 28px;
    text-align: left;
  }
  .blocco.lostudio .colonna { padding: 0; }
  /* Intestazione a sinistra con eyebrow heritage */
  .blocco.lostudio h2 {
    font-size: 33px;
    text-align: left;
    margin: 0 0 36px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .blocco.lostudio h2::before {
    content: 'Milano · Dal 1994';
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--oro-deep);
    margin-bottom: 20px;
  }
  /* trattino oro a sinistra, ben staccato dal testo che segue */
  .blocco.lostudio h2::after {
    margin-left: 0;
    margin-right: 0;
    margin-top: 28px;
  }
  .blocco.lostudio .colonna:first-child {
    border-bottom: 0;
    padding: 0;
    margin-bottom: 0;
  }
  /* Testo: tutto a sinistra, colonna piena, ritmo uniforme */
  .blocco.lostudio p,
  .blocco.lostudio .colonna:first-child p:first-of-type,
  .blocco.lostudio .colonna:last-child p:first-of-type {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--ink-soft);
    font-weight: 400;
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    letter-spacing: 0;
  }
  .blocco.lostudio p + p { margin-top: 1.35em; }
  .blocco.lostudio .colonna:last-child {
    border-left: 0;
    padding-left: 0;
    margin-top: 1.35em;
  }

  /* === ELIOT QUOTE · cinematografico: foto protagonista + testo ancorato in basso === */
  .blocco.cit {
    min-height: 76vh;
    min-height: 76dvh;
    padding: 0;
    display: flex;
    align-items: flex-end;
    /* foto ancorata in basso + leggero ingrandimento: la statua sale, meno cielo sopra */
    background-size: auto 124%;
    background-position: center bottom;
    background-repeat: no-repeat;
    text-align: left;
  }
  /* gradiente che sale dal basso: foto pulita in alto, scuro solo dove c'è la frase */
  .blocco.cit::before,
  .blocco.cit.tone-warm::before {
    background: linear-gradient(
      to top,
      rgba(14, 12, 10, 0.94) 0%,
      rgba(14, 12, 10, 0.74) 24%,
      rgba(14, 12, 10, 0.30) 46%,
      rgba(14, 12, 10, 0) 68%
    );
  }
  .blocco.cit .container {
    padding: 0 26px 52px;
    text-align: left;
    max-width: none;
    width: 100%;
  }
  .blocco.cit .apri {
    font-size: 64px;
    line-height: 0.5;
    margin: 0 0 6px -4px;
    opacity: 0.5;
  }
  .blocco.cit .chiudi { display: none; }
  .blocco.cit p {
    font-size: 23px;
    line-height: 1.4;
    text-align: left;
    max-width: 100%;
    margin: 0;
    padding: 0;
    letter-spacing: 0.01em;
  }
  .blocco.cit span:not(.apri):not(.chiudi) {
    margin-top: 24px;
    font-size: 11px;
    letter-spacing: 0.34em;
  }

  /* === SERVIZI HOME · eyebrow coerente + card con più presenza === */
  .blocco.titolo { padding: 72px 0 30px; }
  .blocco.titolo h2 { font-size: 33px; font-weight: 500; }
  .blocco.titolo h2::before {
    content: 'Aree di competenza';
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--oro-deep);
    margin-bottom: 18px;
  }
  .blocco.servizi { padding: 0 20px 66px; }
  .servizi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .blocco.servizi a.svc-card {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
    padding: 28px 20px;
  }
  .blocco.servizi a.svc-card h3 {
    font-size: 17px;
    letter-spacing: 0.16em;
    line-height: 1.45;
  }

  /* === PAGE TITLE BANNER === */
  .page-title {
    padding: 90px 22px 30px;
    min-height: 280px;
  }
  .page-title h1 {
    font-size: clamp(34px, 11vw, 50px);
    letter-spacing: 0.14em;
  }
  .page-title .crumb {
    font-size: 10px;
    letter-spacing: 0.32em;
  }

  /* === PARTNERS LIST === */
  .partners-list { padding: 40px 0 56px; }
  .partners-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 360px;
    margin: 0 auto;
    padding: 0 22px;
  }
  .partner-card { aspect-ratio: 4/5; }
  .partner-card .card-text { padding: 0 18px 18px; }
  .partner-card h3 { font-size: 22px; }
  .partner-card .role { font-size: 10px; }

  /* === PARTNER BIO === */
  .partner-bio { padding: 40px 0 80px; }
  .partner-bio .layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 22px;
  }
  .partner-bio .photo-col { order: -1; }
  .partner-bio figure {
    aspect-ratio: 4/5;
    max-width: 320px;
    margin: 0 auto;
  }
  .partner-bio .bio-text { padding: 0; }
  .partner-bio h2 { font-size: clamp(32px, 9vw, 44px); }
  .partner-bio .lead { font-size: 16px; line-height: 1.65; }
  .partner-bio .areas-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .partner-bio .areas-grid span {
    font-size: 11px;
    padding: 10px 14px;
  }
  .partner-bio .meta {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .partner-bio .back-link { margin-top: 8px; padding: 12px 0; }

  /* === ATTIVITA ACCORDION === */
  .attivita-section { padding: 32px 0 64px; }
  .acc-list { padding: 0 18px; }
  .acc-trigger {
    grid-template-columns: 48px 1fr 28px;
    gap: 14px;
    padding: 22px 0;
    min-height: 64px;
  }
  .acc-trigger .acc-num { font-size: 10.5px; letter-spacing: 0.28em; }
  .acc-trigger .acc-title { font-size: 19px; line-height: 1.25; }
  .acc-trigger .acc-icon { width: 26px; height: 26px; }
  .acc-content p {
    padding-left: 62px;
    font-size: 15px;
    line-height: 1.75;
    padding-right: 8px;
  }
  .acc-content p:first-child { padding-top: 4px; }
  .acc-content p:last-child { padding-bottom: 28px; }

  /* === SERVIZI STICKY === */
  .svc-wrap { padding: 36px 0 64px; }
  .svc-inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 20px;
    padding: 0 22px;
  }
  .svc-nav { position: static; padding: 0; }
  .svc-nav ol { display: grid; grid-template-columns: 1fr; }
  .svc-nav li { padding: 18px 0; }
  .svc-nav .nav-label { font-size: 17px; }
  .svc-content { gap: 56px; }
  .svc-block { max-width: none; }
  .svc-block h2 { font-size: clamp(24px, 7vw, 28px); }
  .svc-block .lead { font-size: 16px; margin: 26px 0 16px; }
  .svc-block p { font-size: 15.5px; line-height: 1.7; }
  .svc-block .areas {
    margin-top: 28px;
    padding-top: 20px;
    gap: 6px;
  }
  .svc-block .areas span {
    font-size: 10.5px;
    padding: 8px 12px;
    letter-spacing: 0.2em;
  }

  /* === GALLERY === */
  .gallery-page { padding: 32px 0 56px; }
  .strip-header {
    padding: 0 18px 18px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 12px;
  }
  .strip-header .counter { font-size: 12px; }
  .strip-header .counter strong { font-size: 14px; }
  .strip-header .nav-btns button {
    width: 44px; height: 44px;
    font-size: 18px;
  }
  .gallery-page .slide {
    padding: 0 18px;
    height: auto;
    aspect-ratio: 3 / 4;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.4fr 1fr 1fr;
    gap: 6px;
  }
  .gallery-page .slide .pos-hero { grid-column: 1 / span 2; grid-row: 1; }
  .gallery-page .slide .pos-a { grid-column: 1; grid-row: 2; }
  .gallery-page .slide .pos-b { grid-column: 2; grid-row: 2; }
  .gallery-page .slide .pos-c { grid-column: 1; grid-row: 3; }
  .gallery-page .slide .pos-d { grid-column: 2; grid-row: 3; }
  .strip-dots {
    padding: 0 18px;
    margin-top: 24px;
    gap: 10px;
  }
  .strip-dots button { width: 26px; height: 3px; }
  .strip-dots button.active { width: 46px; }

  /* === CONTATTI === */
  .contatti-page { padding: 40px 22px 80px; }
  .contatti-grid { gap: 36px; }
  .contatti-grid .info > div {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }
  .contatti-grid .info dt, .contatti-grid .info .k {
    font-size: 10.5px;
    letter-spacing: 0.32em;
  }
  .contatti-grid .info dd, .contatti-grid .info .v {
    font-size: 19px;
    line-height: 1.4;
  }
  .contatti-grid .info .v .small { font-size: 13.5px; }
  .contatti-grid .map-wrap { position: static; aspect-ratio: 4/3; }

  /* === PRIVACY === */
  .privacy-page { padding: 40px 22px 72px; }
  .privacy-page h2 {
    font-size: clamp(20px, 5.6vw, 26px);
    margin: 36px 0 14px;
  }
  .privacy-page p, .privacy-page li {
    font-size: 14.5px;
    line-height: 1.75;
  }

  /* === FOOTER === */
  .dp-footer { padding: 48px 0 24px; }
  .dp-footer .container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 22px;
  }
  .dp-footer .col {
    padding: 0;
    border: 0;
    text-align: left;
  }
  .dp-footer .col p {
    font-size: 13.5px;
    line-height: 1.65;
  }
  .dp-footer .copyright {
    margin-top: 32px;
    padding: 18px 22px 0;
    font-size: 10px;
    letter-spacing: 0.26em;
  }
}

/* === VERY SMALL PHONES (≤ 400px) · ulteriore tweak === */
@media (max-width: 400px) {
  .page-title { padding: 80px 18px 24px; min-height: 240px; }
  .page-title h1 { font-size: clamp(28px, 12vw, 40px); }
  .blocco.lostudio h2 { font-size: 26px; }
  .blocco.cit p { font-size: 18px; }
  .partner-card h3 { font-size: 20px; }
  .acc-trigger .acc-title { font-size: 17px; }
  .svc-block h2 { font-size: 23px; }
}

/* Prevenzione overflow orizzontale globale.
   clip (non hidden) per non creare uno scroll-container che romperebbe
   position: sticky (foto fissa nelle pagine bio partner). */
html, body { overflow-x: clip; }

/* === REVEAL AL SCROLL · solo mobile, premium feel ===
   Le sezioni entrano con un fade + slide morbido quando appaiono.
   Attivo solo se il JS aggiunge body.js-reveal (fallback: tutto visibile). */
@media (max-width: 760px) {
  body.js-reveal .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
  }
  body.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}