/* ============================================================================
   VALMETAL — FRATELLI VALLETTA | HOMEPAGE V46
   Base V45 preservata; inserita la fotografia nella sezione La nostra storia.

   INDICE
   01. Design tokens
   02. Reset e accessibilità di base
   03. Header, brand e navigazione desktop
   04. Mega menu Soluzioni
   05. Hero
   06. Pulsanti
   07. Componenti editoriali condivisi
   08. Introduzione aziendale
   09. Le nostre soluzioni
   10. La nostra storia
   11. Realizzazioni
   12. Il nostro metodo
   13. Richiedi un preventivo
   14. Contatti
   15. Footer
   16. Elementi di anteprima
   17. Desktop intermedio
   18. Menu laterale responsive
   19. Smartphone
   20. Accessibilità e preferenze di movimento
   ============================================================================ */

/* 01 — Design tokens -------------------------------------------------------- */
:root {
  --header-height: 80px;
  --header-scroll-duration: .34s;
  --header-container-max: 1220px;
  --header-container-padding: 12px;
  --floating-header-top: 0px;
  --floating-header-side: 20px;

  --hero-height: 750px;
  --hero-slide-stay: 6000ms;
  --hero-slide-fade: 1400ms;
  --hero-slide-zoom: 7800ms;
  --solutions-panel-gap: 0px; /* 0 = pannello aderente al bordo inferiore dell'header */

  --text: #252424;
  --gold: #a38347;
  --gold-dark: #765e35;
  --white: #ffffff;
  --font-main: "Montserrat", Arial, Helvetica, sans-serif;
}

/* 02 — Reset e accessibilità di base --------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--white);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 3px solid #116ba3;
  outline-offset: 4px;
}

/* 03 — Header, brand e navigazione desktop --------------------------------- */
.site-header {
  position: fixed;
  z-index: 100;
  top: var(--floating-header-top);
  left: 0;
  right: 0;
  width: calc(100% - var(--floating-header-side) * 2);
  max-width: var(--header-container-max);
  height: var(--header-height);
  margin-inline: auto;
  padding: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 7px 18px rgba(37,32,24,.095),
              2px 0 8px rgba(37,32,24,.038),
             -2px 0 8px rgba(37,32,24,.038);
  overflow: visible;
  /* Il movimento non altera il layout, perché l'header è position: fixed. */
  transition: transform var(--header-scroll-duration) cubic-bezier(.22, 1, .36, 1);
}
/* Stato smart sticky: l'ombra sparisce completamente oltre il bordo alto. */
.site-header.is-scroll-hidden {
  transform: translate3d(0, calc(-100% - var(--floating-header-top) - 24px), 0);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: var(--header-container-max);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--header-container-padding);
}

.brand { display: block; flex: 0 0 184px; width: 184px; min-width: 0; }
.brand img { display: block; width: 184px; height: auto; max-width: 100%; }
.brand--mobile { display: none; }

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  white-space: nowrap;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 0;
  background: none;
  border: 0;
  color: #272526;
  font-size: 18px;
  letter-spacing: -.017em;
  font-weight: 400;
}
.nav-link:hover { color: #8f713b; }
/* Voce pagina attiva condivisa tra navigazione desktop e drawer mobile. */
.nav-link[aria-current="page"],
.drawer-nav-link[aria-current="page"] { color: var(--gold-dark); }
.nav-link svg { width: 15px; height: 15px; }
.has-subnav { position: relative; }
.has-subnav .nav-link svg {
  transform: rotate(0);
  transition: transform .24s ease;
}
.has-subnav.is-open .nav-link svg { transform: rotate(180deg); }
.has-subnav.is-open .nav-link { color: var(--gold-dark); }

.mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #222;
}
.mobile-toggle svg { width: 27px; height: 27px; }

/* 04 — Mega menu Soluzioni ------------------------------------------------- */
.solutions-dropdown {
  position: absolute;
  z-index: 120;
  /* Riferimento: bordo inferiore dell'header, non della voce Soluzioni. */
  top: calc(50% + var(--header-height) / 2);
  right: -178px;
  width: 710px;
  padding-top: var(--solutions-panel-gap);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .22s ease,
              transform .26s cubic-bezier(.2,.8,.2,1),
              visibility 0s linear .26s;
}
.has-subnav.is-open .solutions-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .22s ease,
              transform .26s cubic-bezier(.2,.8,.2,1),
              visibility 0s;
}
.solutions-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
  gap: 30px;
  min-height: 353px;
  padding: 26px 26px 23px 31px;
  background: var(--white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  white-space: normal;
}
.solutions-categories { display: flex; flex-direction: column; min-width: 0; }
.solutions-kicker {
  margin: 1px 0 8px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eae9e7;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .175em;
  color: #242424;
  line-height: 1.4;
}
.solutions-kicker span {
  margin-left: 8px;
  color: #aaa7a0;
  font-weight: 400;
  letter-spacing: .08em;
}
.solutions-list { margin: 0; padding: 0; list-style: none; }
.solutions-list li + li { margin-top: 2px; }
.solution-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 9px 8px 9px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  text-align: left;
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: .012em;
  line-height: 1.4;
  color: #30302e;
  transition: color .2s ease, padding .22s ease;
}
.solution-option:hover,
.solution-option:focus-visible,
.solution-option.is-active { color: var(--gold); }
.solution-option.is-active { padding-left: 3px; }
.solution-option svg {
  flex: none;
  width: 17px;
  height: 17px;
  opacity: 0;
  transform: translateX(-5px);
  color: var(--gold);
  transition: opacity .22s ease, transform .22s ease;
}
.solution-option:hover svg,
.solution-option:focus-visible svg,
.solution-option.is-active svg { opacity: 1; transform: translateX(0); }
.solutions-footnote {
  margin: auto 0 0;
  padding-top: 13px;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .015em;
  color: #99948b;
}
.solutions-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: 25px;
  border-left: 1px solid #e7e5e1;
}
.solutions-image-frame {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 268px;
  background: #eee9e3;
  overflow: hidden;
}
.solution-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity .38s ease, transform .75s cubic-bezier(.22,1,.36,1);
}
.solution-image.is-active { opacity: 1; transform: scale(1); }
.solutions-image-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 13px;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .12em;
  color: #756e64;
  text-transform: uppercase;
}
.solutions-image-bottom span:last-child { color: #b4a999; white-space: nowrap; }

/* 05 — Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  height: var(--hero-height);
  overflow: hidden;
  background: #e9eef2;
}
/* Gradient di leggibilità costante su tutte le fotografie. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
              rgba(248,249,251,.69) 0%,
              rgba(250,249,247,.45) 31%,
              rgba(250,249,247,.08) 54%,
              transparent 72%);
}
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0;
  transform: scale(1.018);
  transition: opacity var(--hero-slide-fade) ease-in-out,
              transform var(--hero-slide-zoom) linear;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide.is-zooming { transform: scale(1.072); }
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 clamp(30px,6.2vw,98px);
}
.hero-copy { max-width: 620px; }
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 30px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.2;
  white-space: nowrap;
}
.hero-eyebrow::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg,#a68243,#8d6e37);
}
.hero h1 {
  margin: 0 0 28px;
  font-family: var(--font-main);
  font-size: clamp(40px,3.65vw,56px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.hero-description {
  max-width: 595px;
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: -.025em;
}
.hero-actions { display: flex; align-items: center; gap: 24px; }
.hero-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 53px;
  padding: 0 26px;
  font-size: 17px;
  white-space: nowrap;
  box-shadow: none;
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1),
              background-color .24s ease,
              color .24s ease;
}
.hero-actions svg {
  width: 20px;
  height: 20px;
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
}

/* 06 — Pulsanti ------------------------------------------------------------ */
.header-cta,
.btn-primary {
  appearance: none;
  -webkit-appearance: none;
  background: #c9a563;
  color: #fff;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  transition: background-color .24s ease, box-shadow .24s ease;
}
.header-cta { height: 50px; min-width: 208px; padding: 0 16px; font-size: 17px; }
.btn-secondary {
  color: #262626;
  border: 0;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: none;
  transition: color .24s ease;
}
@media (hover: hover) {
  .header-cta:hover,
  .btn-primary:hover {
    background-color: #ae894b;
    box-shadow: 0 7px 18px rgba(94,69,34,.14);
  }
  .btn-secondary:hover {
    color: #8f6c36;
    background: #ffffff;
  }
  /* La hero non deve avere ombre, neppure all'hover primario. */
  .hero-actions button:hover { box-shadow: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-actions button:hover { transform: translateY(-3px); }
  .hero-actions button:hover svg { transform: translateX(4px); }
}

/* 07 — Componenti editoriali condivisi -------------------------------------
   Una sola definizione per le eyebrow delle sezioni: lineetta, colore,
   font, spaziature e comportamento responsive restano sempre identici. */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 26px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
}
.section-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  background: currentColor;
}
@media (max-width: 640px) {
  .section-eyebrow { gap: 12px; margin-bottom: 22px; font-size: 10px; }
  .section-eyebrow::before { width: 22px; }
}

/* 08 — Introduzione aziendale -------------------------------------------- */
.company-intro {
  padding-block: 120px;
  background: #fff;
}
.company-intro__container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
  column-gap: clamp(48px, 5.4vw, 80px);
  max-width: var(--header-container-max);
  margin-inline: auto;
  padding-inline: var(--header-container-padding);
}
.company-intro__heading,
.company-intro__body { min-width: 0; }
.company-intro h2 {
  max-width: 590px;
  margin: 0;
  color: var(--text);
  font-family: var(--font-main);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.047em;
  text-wrap: balance;
}
.company-intro__body { padding-top: 48px; }
.company-intro__body p {
  max-width: 490px;
  margin: 0;
  color: #555451;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: -.012em;
}
.company-intro__body p + p { margin-top: 18px; }
.editorial-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-top: 27px;
  padding: 8px 0;
  color: var(--gold);
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: color .24s ease;
}
.editorial-link svg {
  width: 18px;
  height: 18px;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) {
  .editorial-link:hover { color: var(--gold-dark); }
  .editorial-link:hover svg { transform: translate(3px,-3px); }
}
@media (max-width: 900px) {
  .company-intro { padding-block: 88px; }
  .company-intro__container { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .company-intro h2 { max-width: 730px; font-size: clamp(38px, 5.2vw, 48px); }
  .company-intro__body { padding-top: 0; }
  .company-intro__body p { max-width: 690px; }
}
@media (max-width: 640px) {
  .company-intro { padding-block: 72px; }
  .company-intro__container { padding-inline: 24px; row-gap: 28px; }
  .company-intro h2 { font-size: clamp(34px, 9.2vw, 38px); line-height: 1.17; letter-spacing: -.045em; }
  .company-intro__body p { font-size: 16px; line-height: 1.72; }
  .company-intro__body p + p { margin-top: 16px; }
  .editorial-link { margin-top: 23px; font-size: 15px; }
}

/* 09 — Le nostre soluzioni ------------------------------------------------ */
.solutions-showcase {
  padding-block: 110px;
  background: #f6f6f4;
}
.solutions-showcase__container {
  max-width: var(--header-container-max);
  margin-inline: auto;
  padding-inline: var(--header-container-padding);
}
.solutions-showcase__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  column-gap: clamp(40px, 5vw, 76px);
  align-items: end;
  margin-bottom: 50px;
}
.solutions-showcase__heading { min-width: 0; }
.solutions-showcase h2 {
  max-width: 650px;
  margin: 0;
  color: var(--text);
  font-size: clamp(38px, 3.45vw, 48px);
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: -.046em;
  text-wrap: balance;
}
.solutions-showcase__description {
  max-width: 445px;
  margin: 0 0 4px;
  color: #555451;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: -.012em;
}
.solutions-showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  /* Stessa altezza complessiva della V54: 270 + 340 + 24 = 634 px. */
  grid-template-rows: repeat(2, minmax(0, 305px));
  gap: 24px;
}
/* Una protagonista a sinistra e quattro schede fotografiche nella griglia 2 × 2 a destra. */
.solutions-showcase__card--featured { grid-column: 1; grid-row: 1 / span 2; }
.solutions-showcase__card--small-a { grid-column: 2; grid-row: 1; }
.solutions-showcase__card--small-b { grid-column: 3; grid-row: 1; }
.solutions-showcase__card--small-c { grid-column: 2; grid-row: 2; }
.solutions-showcase__card--small-d { grid-column: 3; grid-row: 2; }
.solutions-showcase__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.solutions-showcase__photo {
  display: block;
  flex: 1 1 0%;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: #e8e7e3;
}
.solutions-showcase__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
/* Segnaposto intenzionale: in attesa di una fotografia dedicata alle Zanzariere. */
.solutions-showcase__photo--placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  background: #e8e6e1;
  color: #969087;
}
.solutions-showcase__photo--placeholder::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid #d5d1c8;
  pointer-events: none;
}
.solutions-showcase__placeholder-label {
  position: relative;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .18em;
  text-align: center;
}
.solutions-showcase__placeholder-number {
  position: relative;
  font-size: clamp(42px, 5vw, 62px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.05em;
  opacity: .45;
}
/* Stessa anteprima neutra anche nel mega menu desktop. */
.solution-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 13px;
  background: #e8e6e1;
  color: #969087;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
}
.solution-image--placeholder small {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .13em;
}
.solutions-showcase__card-caption {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
}
.solutions-showcase__card-title {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.022em;
  transition: color .28s ease;
}
/* Didascalie delle quattro schede compatte: leggibili anche su schermi intermedi. */
.solutions-showcase__card--small-a .solutions-showcase__card-title,
.solutions-showcase__card--small-b .solutions-showcase__card-title,
.solutions-showcase__card--small-c .solutions-showcase__card-title,
.solutions-showcase__card--small-d .solutions-showcase__card-title {
  font-size: clamp(16px, 1.25vw, 18px);
}
.solutions-showcase__card-caption svg {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  color: var(--gold);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) {
  .solutions-showcase__card:hover .solutions-showcase__photo img { transform: scale(1.03); }
  .solutions-showcase__card:hover .solutions-showcase__card-title { color: var(--gold); }
  .solutions-showcase__card:hover .solutions-showcase__card-caption svg { transform: translate(4px, -4px); }
}
.solutions-showcase__card:focus-visible .solutions-showcase__card-title { color: var(--gold); }
@media (max-width: 900px) {
  .solutions-showcase { padding-block: 88px; }
  .solutions-showcase__intro { grid-template-columns: minmax(0, 1fr); row-gap: 22px; margin-bottom: 39px; }
  .solutions-showcase h2 { max-width: 700px; }
  .solutions-showcase__description { max-width: 700px; }
  .solutions-showcase__card--small-a .solutions-showcase__card-title,
  .solutions-showcase__card--small-b .solutions-showcase__card-title,
  .solutions-showcase__card--small-c .solutions-showcase__card-title,
  .solutions-showcase__card--small-d .solutions-showcase__card-title { font-size: clamp(17px, 1.5vw, 21px); }
  .solutions-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    column-gap: 22px;
    row-gap: 38px;
  }
  .solutions-showcase__card--featured,
  .solutions-showcase__card--small-a,
  .solutions-showcase__card--small-b,
  .solutions-showcase__card--small-c,
  .solutions-showcase__card--small-d { grid-column: auto; grid-row: auto; }
  .solutions-showcase__card { display: block; height: auto; }
  .solutions-showcase__photo { aspect-ratio: 4 / 3; }
  .solutions-showcase__card--featured { grid-column: 1 / -1; }
  .solutions-showcase__card--featured .solutions-showcase__photo { aspect-ratio: 16 / 8; }
}
@media (max-width: 700px) {
  .solutions-showcase { padding-block: 72px; }
  .solutions-showcase__container { padding-inline: 24px; }
  .solutions-showcase__intro { row-gap: 19px; margin-bottom: 32px; }
  .solutions-showcase h2 { font-size: clamp(34px, 9vw, 38px); line-height: 1.18; }
  .solutions-showcase__description { font-size: 16px; line-height: 1.72; }
  .solutions-showcase__grid { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .solutions-showcase__card--featured { grid-column: auto; }
  .solutions-showcase__card--featured .solutions-showcase__photo { aspect-ratio: 4 / 3; }
  .solutions-showcase__card-caption { padding-top: 16px; }
  .solutions-showcase__card-title,
  .solutions-showcase__card--small-a .solutions-showcase__card-title,
  .solutions-showcase__card--small-b .solutions-showcase__card-title,
  .solutions-showcase__card--small-c .solutions-showcase__card-title,
  .solutions-showcase__card--small-d .solutions-showcase__card-title { font-size: 18px; }
  .solutions-showcase__card-caption svg { width: 21px; height: 21px; }
}

/* 10 — La nostra storia -----------------------------------------------------
   Fotografia Valmetal integrata nella stessa area editoriale della V45.
   L'eyebrow e il link sono componenti editoriali condivisi con la sezione 02. */
.story-section {
  padding-block: 120px;
  background: #fff;
}
.story-section__container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(48px, 5.2vw, 80px);
  max-width: var(--header-container-max);
  margin-inline: auto;
  padding-inline: var(--header-container-padding);
}
.story-section__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: clamp(24px, 3vw, 42px);
  overflow: hidden;
  background: #d7d1c7;
  color: #ffffff;
}
.story-section__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Sfumatura solo in basso per rendere leggibile l'anno senza coprire i volti. */
.story-section__media::after {
  content: "";
  position: absolute;
  inset: 52% 0 0;
  background: linear-gradient(transparent, rgba(21, 20, 19, .66));
  pointer-events: none;
}
.story-section__media-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.story-section__year {
  color: #ffffff;
  font-size: clamp(78px, 9.3vw, 136px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.075em;
}
.story-section__year-dot { color: var(--gold); }
.story-section__media-caption {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .015em;
}
.story-section__content { min-width: 0; }
.story-section__content h2 {
  max-width: 550px;
  margin: 0 0 30px;
  color: var(--text);
  font-size: clamp(38px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.047em;
  text-wrap: balance;
}
.story-section__content p:not(.section-eyebrow) {
  max-width: 520px;
  margin: 0;
  color: #555451;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: -.012em;
}
.story-section__content p:not(.section-eyebrow) + p { margin-top: 17px; }

@media (max-width: 900px) {
  .story-section { padding-block: 88px; }
  .story-section__container { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  /* Evita il taglio dei due volti causato dal vecchio segnaposto panoramico. */
  .story-section__media { aspect-ratio: 4 / 5; max-width: 620px; margin-inline: auto; }
  .story-section__year { font-size: clamp(82px, 13vw, 120px); }
  .story-section__content h2 { max-width: 700px; }
  .story-section__content p:not(.section-eyebrow) { max-width: 700px; }
}
@media (max-width: 640px) {
  .story-section { padding-block: 72px; }
  .story-section__container { padding-inline: 24px; gap: 36px; }
  .story-section__media { aspect-ratio: 4 / 4.25; padding: 25px; }
  .story-section__year { font-size: clamp(74px, 20vw, 100px); }
  .story-section__media-caption { font-size: 12px; }
  .story-section__content h2 { font-size: clamp(34px, 9.2vw, 38px); line-height: 1.17; margin-bottom: 24px; }
  .story-section__content p:not(.section-eyebrow) { font-size: 16px; line-height: 1.72; }
  .story-section__content p:not(.section-eyebrow) + p { margin-top: 16px; }
}


/* 11 — Realizzazioni: galleria orizzontale con scroll-snap ------------------
   Le fotografie sono segnaposto: sostituire solo il contenuto delle aree media
   quando saranno disponibili immagini autentiche delle realizzazioni. */
.projects-section {
  padding-block: 110px;
  background: #f6f6f4;
}
.projects-section__container {
  max-width: var(--header-container-max);
  margin-inline: auto;
  padding-inline: var(--header-container-padding);
}
.projects-section__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  column-gap: clamp(40px, 5vw, 76px);
  margin-bottom: 48px;
}
.projects-section__heading { min-width: 0; }
.projects-section__heading h2 {
  max-width: 610px;
  margin: 0;
  font-size: clamp(38px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.047em;
  text-wrap: balance;
}
.projects-section__description {
  max-width: 440px;
  margin: 0 0 4px;
  color: #555451;
  font-size: 17px;
  line-height: 1.78;
  letter-spacing: -.012em;
}
.projects-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.projects-carousel__viewport::-webkit-scrollbar { display: none; }
.projects-carousel__track { display: flex; align-items: stretch; gap: 24px; }
.projects-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 70%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  scroll-snap-align: start;
}
.projects-card__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 29px;
  color: #79746c;
}
.projects-card__visual--one { background: linear-gradient(145deg, #e6e3dc, #d5d2ca); }
/* Fotografie responsive: stessa proporzione per tutte le schede. */
.projects-card__picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.projects-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.projects-card__visual--two { background: linear-gradient(145deg, #deded8, #cbc9c2); }
.projects-card__visual--three { background: linear-gradient(145deg, #e8e4db, #d6d1c6); }
.projects-card__visual--four { background: linear-gradient(145deg, #e2e4e0, #cdd4cd); }
.projects-card__visual--five { background: linear-gradient(145deg, #e6e3dc, #d5d2ca); }

.projects-card__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 21px;
}
.projects-card__caption-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.projects-card__eyeline {
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
}
.projects-card__title {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -.03em;
  transition: color .24s ease;
}
.projects-card__caption svg {
  flex: none;
  width: 23px;
  height: 23px;
  color: var(--gold);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) {
  .projects-card:hover .projects-card__title { color: var(--gold); }
  .projects-card:hover .projects-card__caption svg { transform: translate(4px,-4px); }
}
.projects-card:focus-visible .projects-card__title { color: var(--gold); }
.projects-carousel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 32px;
}
.projects-carousel__navigation { display: flex; align-items: center; gap: 11px; }
.projects-carousel__arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #252424;
  cursor: pointer;
  transition: color .24s ease, transform .24s ease, opacity .24s ease;
}
.projects-carousel__arrow svg {
  width: 27px;
  height: 27px;
  overflow: visible;
}
.projects-carousel__arrow:disabled {
  color: #c9c4bb;
  cursor: default;
  opacity: .65;
}
@media (hover: hover) {
  .projects-carousel__arrow:not(:disabled):hover {
    color: var(--gold);
    transform: translateY(-1px);
  }
}
.projects-carousel__arrow:focus-visible {
  outline: none;
  color: var(--gold);
}
.projects-carousel__count {
  min-width: 66px;
  margin-left: 9px;
  color: #77726c;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  font-variant-numeric: tabular-nums;
}
.projects-carousel__all { margin-top: 0; }
@media (max-width: 900px) {
  .projects-section { padding-block: 88px; }
  .projects-section__intro { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 38px; }
  .projects-section__description { max-width: 700px; }
  .projects-card { flex-basis: 76%; }
}
@media (max-width: 640px) {
  .projects-section { padding-block: 72px; }
  .projects-section__container { padding-inline: 24px; }
  .projects-section__intro { gap: 19px; margin-bottom: 30px; }
  .projects-section__heading h2 { font-size: clamp(34px, 9.2vw, 38px); line-height: 1.17; }
  .projects-section__description { font-size: 16px; line-height: 1.72; }
  .projects-carousel__track { gap: 16px; }
  .projects-card { flex-basis: 88%; }
  .projects-card__visual { aspect-ratio: 4 / 5; padding: 19px; }

  .projects-card__caption { padding-top: 16px; gap: 12px; }
  .projects-card__caption svg { width: 19px; height: 19px; }
  .projects-card__title { font-size: 17px; }
  .projects-carousel__footer { align-items: flex-start; flex-wrap: wrap; gap: 18px; margin-top: 29px; }
  .projects-carousel__all { font-size: 14px; }
}

/* 12 — Il nostro metodo: timeline editoriale ------------------------------
   Nessun JavaScript dedicato; condivide l'eyebrow delle altre sezioni. */
.method-section {
  padding-block: 110px;
  background: #fff;
}
.method-section__container {
  max-width: var(--header-container-max);
  margin-inline: auto;
  padding-inline: var(--header-container-padding);
}
.method-section__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(40px, 5vw, 76px);
  margin-bottom: 56px;
}
.method-section__heading h2 {
  max-width: 610px;
  margin: 0;
  color: var(--text);
  font-size: clamp(38px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.047em;
  text-wrap: balance;
}
.method-section__description {
  max-width: 440px;
  margin: 0 0 4px;
  color: #555451;
  font-size: 17px;
  line-height: 1.78;
  letter-spacing: -.012em;
}
.method-section__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin: 0;
  padding: 43px 0 0;
  border-top: 1px solid #d9d5cd;
  list-style: none;
}
.method-step { min-width: 0; }
.method-step__number {
  display: block;
  margin-bottom: 21px;
  color: #aa8954;
  font-size: clamp(40px, 3.3vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.method-step__body h3 {
  margin: 0 0 13px;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.method-step__body p {
  max-width: 255px;
  margin: 0;
  color: #68645e;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
}
@media (max-width: 900px) {
  .method-section { padding-block: 88px; }
  .method-section__intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 43px;
  }
  .method-section__description { max-width: 700px; }
  .method-section__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 42px;
    row-gap: 42px;
  }
}
@media (max-width: 640px) {
  .method-section { padding-block: 72px; }
  .method-section__container { padding-inline: 24px; }
  .method-section__intro { gap: 19px; margin-bottom: 38px; }
  .method-section__heading h2 {
    font-size: clamp(34px, 9.2vw, 38px);
    line-height: 1.17;
  }
  .method-section__description { font-size: 16px; line-height: 1.72; }
  .method-section__steps {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 34px;
  }
  .method-section__steps::before {
    content: "";
    position: absolute;
    top: 68px;
    bottom: 20px;
    left: 25px;
    width: 1px;
    background: #e3dfd8;
  }
  .method-step {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .method-step__number {
    position: relative;
    z-index: 1;
    width: 58px;
    margin: 0;
    padding: 2px 0 9px;
    background: #fff;
    font-size: 37px;
  }
  .method-step__body h3 { margin-bottom: 9px; font-size: 18px; }
  .method-step__body p { max-width: 100%; font-size: 15px; line-height: 1.7; }
}

/* 13 — Richiedi un preventivo: invito al contatto ---------------------------
   Usa l'eyebrow e il pulsante primario già condivisi nel design system.
   Il modulo Contatti si trova ora nella sezione 08. */
.quote-section {
  padding-block: 118px;
  background: #252525;
  color: #fff;
}
.quote-section__container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(40px, 5vw, 76px);
  max-width: var(--header-container-max);
  margin-inline: auto;
  padding-inline: var(--header-container-padding);
}
.quote-section__heading .section-eyebrow {
  color: #c9a563;
}
.quote-section__heading h2 {
  max-width: 590px;
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.047em;
  text-wrap: balance;
}
.quote-section__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.quote-section__content p {
  max-width: 460px;
  margin: 0;
  color: #d0d0d0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: -.012em;
}
.quote-section__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 53px;
  padding: 0 25px;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color .24s ease, transform 280ms cubic-bezier(.22,1,.36,1);
}
.quote-section__button svg {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform 280ms cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) {
  .quote-section__button:hover { box-shadow: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .quote-section__button:hover { transform: translateY(-3px); }
  .quote-section__button:hover svg { transform: translateX(4px); }
}
@media (max-width: 900px) {
  .quote-section { padding-block: 88px; }
  .quote-section__container {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .quote-section__content { gap: 26px; }
  .quote-section__content p { max-width: 700px; }
}
@media (max-width: 640px) {
  .quote-section { padding-block: 72px; }
  .quote-section__container { padding-inline: 24px; gap: 25px; }
  .quote-section__heading h2 {
    font-size: clamp(34px, 9.2vw, 38px);
    line-height: 1.17;
  }
  .quote-section__content { align-items: stretch; gap: 27px; }
  .quote-section__content p { font-size: 16px; line-height: 1.72; }
  .quote-section__button { width: 100%; min-height: 52px; font-size: 15px; }
}

/* 14 — Contatti -------------------------------------------------------------
   Due colonne editoriali. Campi con sola linea inferiore, evitando la
   duplicazione di stili globali. Invio tramite PHP e Cloudflare Turnstile. */
.contact-section {
  padding-block: 118px 124px;
  background: #fff;
  scroll-margin-top: 24px;
}
.contact-section__container {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  gap: clamp(65px, 7vw, 108px);
  align-items: start;
  max-width: var(--header-container-max);
  margin-inline: auto;
  padding-inline: var(--header-container-padding);
}
.contact-section__information h2 {
  max-width: 460px;
  margin: 0;
  font-size: clamp(38px, 3.4vw, 48px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.047em;
  text-wrap: balance;
}
.contact-section__intro {
  max-width: 430px;
  margin: 28px 0 0;
  color: #555451;
  font-size: 17px;
  line-height: 1.78;
  letter-spacing: -.012em;
}
.contact-section__details {
  display: grid;
  gap: 29px;
  margin: 48px 0 0;
}
.contact-section__detail dt {
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
}
.contact-section__detail dd {
  margin: 0;
  color: #252424;
  font-size: 16px;
  line-height: 1.5;
}
.contact-section__form-column h3 {
  margin: 2px 0 29px;
  color: var(--text);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.contact-form { display: grid; gap: 26px; }
.contact-form__field { min-width: 0; }
.contact-form__field label {
  display: block;
  margin: 0 0 6px;
  color: #474541;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.contact-form__optional { color: #8b8883; font-size: 12px; font-weight: 400; }
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 10px 0 14px;
  border: 0;
  border-bottom: 1px solid #cfcac1;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 400 15px/1.5 var(--font-main);
  transition: border-color .24s ease;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color: #a39e96; opacity: 1; }
.contact-form__field input:focus-visible,
.contact-form__field select:focus-visible,
.contact-form__field textarea:focus-visible {
  outline: 2px solid transparent;
  border-bottom: 2px solid var(--gold);
}
.contact-form__field textarea { min-height: 105px; resize: vertical; }
.contact-form__select-wrap { position: relative; display: block; }
.contact-form__select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 33px;
  cursor: pointer;
}
.contact-form__select-wrap svg {
  position: absolute;
  right: 2px;
  top: 12px;
  width: 19px;
  height: 19px;
  pointer-events: none;
  color: #68645e;
}
.contact-form__privacy {
  max-width: 520px;
  margin: -1px 0 0;
  color: #78746d;
  font-size: 12px;
  line-height: 1.7;
}
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  justify-self: start;
  min-height: 53px;
  margin-top: 3px;
  padding: 0 25px;
  font-size: 16px;
  font-weight: 500;
  transition: background-color .24s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
.contact-form__submit svg {
  width: 20px;
  height: 20px;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.contact-form__submit:disabled { opacity: .65; cursor: not-allowed; }
.contact-form__status {
  margin: -8px 0 0;
  color: #555451;
  font-size: 13px;
  line-height: 1.7;
}
@media (hover: hover) {
  .contact-form__submit:not(:disabled):hover { box-shadow: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .contact-form__submit:not(:disabled):hover { transform: translateY(-3px); }
  .contact-form__submit:not(:disabled):hover svg { transform: translateX(4px); }
}
@media (max-width: 900px) {
  .contact-section { padding-block: 88px; }
  .contact-section__container { grid-template-columns: minmax(0,1fr); gap: 52px; }
  .contact-section__information h2 { max-width: 680px; }
  .contact-section__intro { max-width: 680px; }
  .contact-section__details { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 27px 32px; margin-top: 36px; }
  .contact-section__form-column h3 { margin-bottom: 26px; }
}
@media (max-width: 640px) {
  .contact-section { padding-block: 72px; }
  .contact-section__container { padding-inline: 24px; gap: 45px; }
  .contact-section__information h2 { font-size: clamp(34px,9.2vw,38px); line-height: 1.17; }
  .contact-section__intro { margin-top: 22px; font-size: 16px; line-height: 1.72; }
  .contact-section__details { grid-template-columns: minmax(0,1fr); gap: 22px; margin-top: 32px; }
  .contact-section__detail dd { font-size: 15px; }
  .contact-form { gap: 23px; }
  .contact-form__submit { width: 100%; min-height: 52px; font-size: 15px; }
}


/* 15 — Footer ---------------------------------------------------------------
   Il footer usa il container e i colori globali, senza dipendenze esterne.
   I collegamenti ai canali e alle policy sono dimostrativi finché non attivati. */
.site-footer {
  background: #252525;
  color: #f7f6f3;
  padding-block: 92px 26px;
}
.site-footer__container {
  width: 100%;
  max-width: var(--header-container-max);
  padding-inline: var(--header-container-padding);
  margin-inline: auto;
}
.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0,1.48fr) minmax(0,.73fr) minmax(0,1.12fr) minmax(0,1fr);
  gap: 48px;
  padding-bottom: 62px;
}
.site-footer__brand, .site-footer__column { min-width: 0; }
.site-footer__logo { display: inline-block; line-height: 0; }
.site-footer__logo img { display: block; width: 176px; max-width: 100%; height: auto; }
.site-footer__signature {
  margin: 18px 0 0;
  color: #c9a563;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.6;
}

.site-footer__lead {
  max-width: 315px;
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: #c0bcb6;
}
.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 27px;
}
.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 1px solid #63615d;
  border-radius: 50%;
  background: transparent;
  color: #f4f2ef;
  transition: color .24s ease, border-color .24s ease;
}
.site-footer__social svg { display: block; width: 20px; height: 20px; }
.site-footer__column h2, .site-footer__information h2 {
  margin: 0 0 25px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.site-footer__links a, .site-footer__links button,
.site-footer__legal-links button, .site-footer__back-to-top {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: #bebbb6;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  transition: color .24s ease;
}
.site-footer__links a[aria-current="page"] { color: #d5b77a; }
.site-footer__contacts { display: flex; flex-direction: column; gap: 15px; margin: 0; }
.site-footer__contacts div, .site-footer__company dl div { min-width: 0; }
.site-footer__contacts dt {
  margin-bottom: 5px;
  color: #d4b57e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.site-footer__contacts dd {
  margin: 0;
  color: #bebbb6;
  font-size: 13.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.site-footer__information {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(0,1fr);
  gap: 42px;
  padding-block: 30px 34px;
  border-top: 1px solid #474644;
}
.site-footer__information h2 { margin-bottom: 16px; font-size: 13px; }
.site-footer__company dl {
  display: flex;
  flex-wrap: wrap;
  column-gap: 25px;
  row-gap: 12px;
  margin: 0;
}
.site-footer__company dl div { display: flex; flex-wrap: wrap; gap: 5px; }
.site-footer__company dt, .site-footer__company dd {
  margin: 0;
  font-size: 12px;
  color: #aaa6a0;
  line-height: 1.6;
}
.site-footer__company dt { color: #d5d2cc; font-weight: 500; }
.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 23px;
}
.site-footer__legal-links button { font-size: 12px; }
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #474644;
  padding-top: 22px;
}
.site-footer__bottom p {
  margin: 0;
  color: #aaa6a0;
  font-size: 12px;
  line-height: 1.6;
}
.site-footer__back-to-top { flex: none; gap: 10px; color: #d5b77a; font-size: 12px; font-weight: 600; }
.site-footer__back-to-top svg { width: 16px; height: 16px; transition: transform .24s ease; }
@media (hover: hover) {
  .site-footer__social:hover { color: #c9a563; border-color: #c9a563; }
  .site-footer__links a:hover, .site-footer__links button:hover,
  .site-footer__legal-links button:hover, .site-footer__back-to-top:hover { color: #c9a563; }
  .site-footer__back-to-top:hover svg { transform: translateY(-3px); }
}
.site-footer :is(a,button):focus-visible { outline: 2px solid #c9a563; outline-offset: 5px; }
@media (max-width: 1050px) {
  .site-footer__main { gap: 34px 27px; }
}
@media (max-width: 900px) {
  .site-footer { padding-top: 78px; }
  .site-footer__container { padding-inline: 32px; }
  .site-footer__main { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 42px 34px; padding-bottom: 51px; }
  .site-footer__brand { grid-column: 1/-1; }
  .site-footer__lead { max-width: 430px; }
  .site-footer__information { gap: 28px; }
}
@media (max-width: 640px) {
  .site-footer { padding-block: 68px 28px; }
  .site-footer__container { padding-inline: 24px; }
  .site-footer__main { gap: 38px 23px; padding-bottom: 46px; }
  .site-footer__brand, .site-footer__column:last-child { grid-column: 1/-1; }
  .site-footer__logo img { width: 152px; }
  .site-footer__lead { margin-top: 12px; font-size: 14px; }
  .site-footer__socials { margin-top: 23px; }
  .site-footer__column h2 { margin-bottom: 18px; }
  .site-footer__links { gap: 13px; }
  .site-footer__links a, .site-footer__links button { font-size: 13px; }
  .site-footer__contacts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .site-footer__information { grid-template-columns: 1fr; padding-block: 27px 32px; gap: 31px; }
  .site-footer__bottom { flex-wrap: wrap; align-items: flex-start; gap: 18px; }
  .site-footer__back-to-top { margin-left: auto; }
}
@media (max-width: 365px) {
  .site-footer__main { grid-template-columns: 1fr; }
  .site-footer__brand, .site-footer__column:last-child { grid-column: auto; }
  .site-footer__contacts { grid-template-columns: 1fr; }
}

/* 16 — Elementi della sola anteprima --------------------------------------- */
.preview-toast {
  position: fixed;
  z-index: 300;
  right: 22px;
  bottom: 22px;
  max-width: 310px;
  padding: 13px 18px;
  border: 1px solid #e7dfd3;
  border-radius: 6px;
  box-shadow: 0 10px 35px rgba(0,0,0,.11);
  background: #fff;
  color: #252424;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .18s, transform .18s;
}
.preview-toast.is-visible { opacity: 1; transform: translateY(0); }

/* 17 — Desktop intermedio -------------------------------------------------- */
@media (min-width: 1121px) {
  .hero-inner {
    max-width: var(--header-container-max);
    padding-inline: var(--header-container-padding);
  }
  .hero-copy { transform: translateY(66px); }

  /* Ombra laterale/inferiore: il ritaglio impedisce l'alone sopra il pannello. */
  .solutions-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: 0 18px 42px rgba(27,26,23,.16),
               -7px 7px 18px -12px rgba(27,26,23,.11),
                7px 7px 18px -12px rgba(27,26,23,.11);
    clip-path: inset(0 -64px -70px -64px);
  }
  /* Ponte invisibile tra trigger e bordo inferiore dell'header. */
  .has-subnav.is-open::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: calc(var(--header-height) / 2 - 50%);
    background: transparent;
  }
}
@media (max-width: 1420px) {
  .nav-list { gap: 36px; }
  .nav-link { font-size: 16px; }
  .header-cta { min-width: 190px; font-size: 15px; }
}
@media (min-width: 1121px) and (max-width: 1370px) {
  .solutions-dropdown { width: min(680px, calc(100vw - 56px)); right: -140px; }
  .solutions-panel { gap: 22px; padding: 24px; }
  .solutions-preview { padding-left: 21px; }
}

/* 18 — Tablet e menu mobile laterale ---------------------------------------- */
/* Il desktop riutilizza il mega menu esistente, mentre mobile ha struttura
   dedicata: nessuna sovrascrittura di .solutions-dropdown o .solutions-panel. */
.mobile-drawer-layer { display: none; }
body.nav-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 1120px) {
  :root {
    --hero-height: 615px;
    --floating-header-side: 16px;
    --drawer-width: 92vw;
    --drawer-motion: .46s cubic-bezier(.22,1,.36,1);
  }
  .brand { flex-basis: 160px; width: 160px; }
  .brand img { width: 160px; }
  .header-container { gap: 12px; }
  .header-right { display: none; }
  .mobile-toggle { display: inline-flex; }
  .hero-copy { transform: translateY(42px); }
  .hero h1 { font-size: clamp(45px,5.3vw,62px); }

  /* Il livello resta nel DOM per animare anche la chiusura. */
  .mobile-drawer-layer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: block;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .46s;
  }
  .mobile-drawer-layer.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
  }
  .mobile-drawer-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(18, 20, 22, .49);
    opacity: 0;
    cursor: default;
    transition: opacity .42s ease;
  }
  .mobile-drawer-layer.is-open .mobile-drawer-backdrop { opacity: 1; }
  .mobile-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: var(--drawer-width);
    height: 100%;
    height: 100dvh;
    padding: 0 clamp(24px, 5.6vw, 52px) max(28px, env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: -10px 0 35px rgba(0, 0, 0, .10);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translate3d(102%,0,0);
    transition: transform var(--drawer-motion);
    will-change: transform;
  }
  .mobile-drawer-layer.is-open .mobile-drawer { transform: translate3d(0,0,0); }
  .drawer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 88px;
    border-bottom: 1px solid #e6e8e8;
  }
  .drawer-identity { display: flex; flex-direction: column; gap: 5px; }
  .drawer-brand-name {
    color: #252424;
    font-weight: 700;
    font-size: clamp(17px, 4vw, 21px);
    letter-spacing: .15em;
  }
  .drawer-brand-caption {
    color: #988574;
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .17em;
  }
  .drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: #292929;
  }
  .drawer-close svg { display: block; width: 28px; height: 28px; }
  .drawer-navigation { padding-top: 23px; }
  .drawer-nav-list, .drawer-subnav-list { margin: 0; padding: 0; list-style: none; }
  .drawer-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding: 13px 1px;
    background: transparent;
    border: 0;
    text-align: left;
    color: #272526;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -.017em;
    transition: color .22s ease;
  }
  .drawer-nav-link:hover, .drawer-nav-link:focus-visible,
  .drawer-solutions.is-open > .drawer-solutions-toggle { color: #a38347; }
  .drawer-solutions-toggle svg {
    width: 17px;
    height: 17px;
    transition: transform .32s ease;
  }
  .drawer-solutions.is-open .drawer-solutions-toggle svg { transform: rotate(180deg); }

  /* Accordion animato in altezza naturale: 0fr > 1fr > 0fr. */
  .drawer-solutions-accordion {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .44s cubic-bezier(.22,1,.36,1), opacity .22s ease;
  }
  .drawer-solutions.is-open .drawer-solutions-accordion {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .drawer-accordion-inner { min-height: 0; overflow: hidden; }
  .drawer-subnav-list {
    margin: 0 0 11px;
    padding-left: 17px;
    border-left: 1px solid #e4dfd7;
  }
  .drawer-subnav-list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 9px 0;
    border: 0;
    background: transparent;
    color: #4f4b46;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .012em;
    line-height: 1.4;
    text-align: left;
    transition: color .2s ease;
  }
  .drawer-subnav-list button span { color: #a38347; opacity: 0; transition: opacity .2s ease; }
  .drawer-subnav-list button:hover,
  .drawer-subnav-list button:focus-visible { color: #a38347; }
  .drawer-subnav-list button:hover span,
  .drawer-subnav-list button:focus-visible span { opacity: 1; }

  .drawer-bottom {
    margin-top: auto;
    padding-top: 42px;
  }
  .drawer-bottom-eyebrow {
    margin: 0 0 10px;
    color: #252424;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .20em;
  }
  .drawer-bottom-description {
    max-width: 320px;
    margin: 0 0 24px;
    color: #7a7d80;
    font-size: 13px;
    line-height: 1.65;
  }
  /* Social mobile: stesse icone SVG del footer, su sfondo trasparente. */
  .drawer-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -7px 0 18px;
  }
  .drawer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #252424;
    transition: color .24s ease;
  }
  .drawer-social svg {
    display: block;
    width: 22px;
    height: 22px;
  }
  @media (hover: hover) {
    .drawer-social:hover { color: var(--gold); }
  }
  .drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    min-height: 50px;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
  }
  /* Stessa freccia diagonale SVG delle schede Soluzioni. */
  .drawer-cta svg {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .drawer-cta:hover svg { transform: translate(3px, -3px); }
  }
}

/* 19 — Smartphone ---------------------------------------------------------- */
@media (max-width: 680px) {
  .desktop-break { display: none; }
}
@media (max-width: 640px) {
  :root {
    --hero-height: 610px;
    --header-height: 64px;
    --floating-header-side: 12px;
  }
  .brand--desktop { display: none; }
  .brand--mobile { display: block; flex-basis: 58px; width: 58px; height: auto; overflow: visible; }
  .brand--mobile img { width: 58px; max-width: 100%; height: auto; }

  .hero::after {
    background: linear-gradient(90deg,
                rgba(246,247,249,.83) 0%,
                rgba(248,247,245,.61) 56%,
                rgba(248,247,245,.15) 100%);
  }
  .hero-slide { object-position: 52% 39%; }
  .hero-slide[data-slide="3"] { object-position: 62% center; }
  .hero-inner { padding: 42px 24px 0; }
  .hero-copy { max-width: 500px; transform: translateY(26px); }
  .hero-eyebrow {
    gap: 12px;
    margin-bottom: 20px;
    font-size: 12px;
    letter-spacing: .2em;
  }
  .hero-eyebrow::after { width: 54px; height: 1.5px; }
  .hero h1 {
    margin-bottom: 22px;
    font-size: clamp(41px,10.8vw,55px);
    line-height: 1.06;
    letter-spacing: -.04em;
  }
  .hero-description { margin-bottom: 26px; font-size: 16px; line-height: 1.55; }
  .hero-actions { flex-wrap: wrap; gap: 12px; }
  .hero-actions button { height: 48px; padding: 0 16px; gap: 13px; font-size: 14px; }
  .hero-actions svg { width: 17px; height: 17px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 41px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions button { width: 100%; justify-content: space-between; }
}

/* 20 — Preferenze di movimento -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .hero-slide { transform: none !important; }
  .solutions-showcase__photo img,
  .solutions-showcase__card-caption svg { transform: none !important; }
}

/* Invio modulo: honeypot invisibile e feedback accessibile. */
.contact-form__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__status[data-state="success"] { color: #25613e; }
.contact-form__status[data-state="error"] { color: #9e3328; }

/* Turnstile Managed: compare soltanto se Cloudflare richiede un intervento. */
.contact-form__turnstile { min-width: 0; max-width: 100%; overflow: visible; }
.contact-form__turnstile:empty { display: none; }
.contact-form__turnstile iframe { max-width: 100%; }

/* Contatti – rifiniture accessibilità e conferma (fase 1) -------------------- */
.contact-form__hint {
  margin: 9px 0 0;
  color: #78746d;
  font-size: 12px;
  line-height: 1.65;
}
.contact-form__privacy a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.contact-form__privacy a:hover { color: #795b35; }
.contact-form__status[data-state="success"]::before {
  content: "✓";
  display: inline-block;
  margin-right: 7px;
  font-weight: 700;
}
.contact-form__status[data-state="error"]::before {
  content: "!";
  display: inline-block;
  margin-right: 7px;
  font-weight: 700;
}

/* Contatti – recapiti aziendali e sede legale verificati (fase 2) ---------- */
.contact-section__detail a,
.site-footer__contacts a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.contact-section__detail a:hover,
.contact-section__detail a:focus-visible { color: var(--gold-dark); text-decoration-color: currentColor; }
.site-footer__contacts a:hover,
.site-footer__contacts a:focus-visible { color: #d5b77a; text-decoration-color: currentColor; }
.site-footer__legal-tag { color: #a9a59d; font-size: 11px; }