:root {
  --white: #ffffff;
  --paper: #ffffff;
  --ink: #455158;
  --ink-dark: #1f2528;
  --orange: #e76141;
  --border: rgba(69, 81, 88, 0.16);
  --header-h: 86px;
  --side: clamp(22px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #ffffff;
  color: var(--ink-dark);
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { border: 0; }
img { display: block; max-width: 100%; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  padding: 0 var(--side);
  background: #ffffff;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 800;
}
.nav-left { justify-content: flex-end; }
.nav-right { justify-content: flex-start; }

.nav-link {
  position: relative;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 180ms ease, transform 180ms ease;
}
.nav-link:hover::after,
.nav-link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.logo {
  display: grid;
  place-items: center;
  width: clamp(148px, 13vw, 198px);
  height: auto;
  overflow: visible;
}
.logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.info-trigger {
  margin-left: auto;
  padding: 13px 18px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.info-trigger:hover {
  background: var(--ink);
  color: var(--white);
}

.mobile-menu-button {
  display: none;
  width: 46px;
  height: 46px;
  background: transparent;
  color: inherit;
  position: relative;
  cursor: pointer;
}
.mobile-menu-button span,
.mobile-menu-button::before,
.mobile-menu-button::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}
.mobile-menu-button::before { top: 14px; }
.mobile-menu-button span { top: 22px; }
.mobile-menu-button::after { top: 30px; }
.mobile-menu-button.is-open::before { transform: translateY(8px) rotate(45deg); }
.mobile-menu-button.is-open span { opacity: 0; }
.mobile-menu-button.is-open::after { transform: translateY(-8px) rotate(-45deg); }

.mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  padding: calc(var(--header-h) + 36px) 30px 40px;
  background: var(--white);
  color: var(--ink);
}
.mobile-panel.is-open { display: block; }
.mobile-panel nav {
  display: grid;
  gap: 22px;
  font-size: clamp(30px, 8vw, 58px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.055em;
}
.mobile-panel button {
  justify-self: start;
  margin-top: 12px;
  padding: 16px 18px;
  background: var(--ink);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.site-shell { width: 100%; min-height: 100vh; overflow: clip; }

.full-visual {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.visual-home { background-image: url("../img/home-hero.webp"); }
.visual-progetto { background-image: url("../img/progetto-hero.webp"); }
.visual-appartamenti { background-image: url("../img/appartamenti-hero.webp"); }
.visual-capitolato { background-image: url("../img/capitolato-hero.webp"); }

/* Seconda sezione: pagina vuota + taglio laterale del pattern "page".
   Il pattern viene renderizzato grande come lo schermo intero e poi mascherato
   nel terzo destro, così non cambia scala rispetto alla pagina completa. */
.visual-home + .page-cut { --page-image: url("../img/home-page.webp"); }
.visual-progetto + .page-cut { --page-image: url("../img/progetto-page.webp"); }
.visual-appartamenti + .page-cut { --page-image: url("../img/appartamenti-page.webp"); }
.visual-capitolato + .page-cut { --page-image: url("../img/capitolato-page.webp"); }

.page-cut {
  position: relative;
  min-height: 100vh;
  background: #ffffff;
  overflow: hidden;
}

.page-cut-slice {
  position: absolute;
  top: 0;
  right: 0;
  width: 33.333333vw;
  height: 100%;
  overflow: hidden;
}

.page-cut-slice::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100%;
  background-image: var(--page-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* Immagini inserite come elementi di pagina */
.media-hero {
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 46px) var(--side) 58px;
  background-color: #f4f2ed;
}

.media-hero.visual-appartamenti {
  justify-items: end;
  background-image: url("../img/appartamenti-hero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.image-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  box-shadow: none;
}

.image-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.image-frame--white {
  max-width: min(1140px, 87vw);
  padding: clamp(10px, 1.2vw, 18px);
  background: #ffffff;
}

.hero-media-frame {
  margin-right: clamp(12px, 4vw, 72px);
}

.image-frame--section {
  padding: clamp(8px, 0.9vw, 14px);
  background: var(--section-color, var(--orange));
}

.image-frame--flat { box-shadow: none; }

.page-cut--media {
  display: grid;
  align-items: center;
  padding: calc(var(--header-h) + 64px) var(--side) 72px;
}

.page-cut--appartamenti {
  --section-color: #babf97;
}

.page-media-grid {
  position: relative;
  z-index: 2;
  width: min(1600px, calc(100vw - (var(--side) * 2)));
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scrollbar-width: thin;
}

.page-media-grid .image-frame {
  flex: 1 1 0;
  min-width: 0;
}

.page-media-grid .image-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Overlay Richiedi informazioni: solo grafica.
   La hero grigia resta visibile; il fondo bianco esiste solo dentro il taglio destro da 1/3, sotto grey-page. */
.info-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  overflow: hidden;
  padding: 0;
  background: #ffffff;
  color: var(--ink);
}
.info-overlay.is-open {
  display: block;
}
.overlay-close {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 520;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  border: 1px solid rgba(69, 81, 88, 0.28);
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
}
.info-full-visual {
  position: relative;
  min-height: 100vh;
  background-image: url("../img/info-hero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.info-page-cut {
  position: absolute;
  inset: 0;
  min-height: 100vh;
  background: transparent;
  overflow: hidden;
}
.info-page-cut-slice {
  position: absolute;
  top: 0;
  right: 0;
  width: 33.333333vw;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
}
.info-page-cut-slice::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100%;
  background-image: url("../img/info-page.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px var(--side);
  background: #ffffff;
  color: var(--ink);
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer-copy {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 980px) {
  :root { --header-h: 78px; }
  .site-header {
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 0 22px;
  }
  .nav-left,
  .nav-right { display: none; }
  .logo { justify-self: start; width: 158px; height: auto; max-height: none; }
  .mobile-menu-button { display: block; justify-self: end; }
  .site-footer { min-height: 40px; padding: 9px 22px; }
  .field-grid { grid-template-columns: 1fr; }
  .image-frame--white { max-width: min(760px, 84vw); }
  .media-hero.visual-appartamenti { justify-items: end; }
  .hero-media-frame { margin-right: 8px; }
  .page-cut--media { padding: calc(var(--header-h) + 48px) 22px 58px; }
  .page-media-grid {
    width: calc(100vw - 44px);
    margin: 0;
  }
  .page-media-grid .image-frame {
    flex: 0 0 68vw;
  }
}


@media (max-width: 640px) {
  :root { --header-h: 72px; }
  .site-header { padding: 0 18px; }
  .logo { width: 142px; max-height: none; }
  .overlay-close { top: 12px; right: 14px; }
  .media-hero { padding: calc(var(--header-h) + 34px) 18px 44px; }
  .page-cut--media { padding: calc(var(--header-h) + 42px) 18px 54px; }
  .image-frame--white { max-width: 88vw; }
  .hero-media-frame { margin-right: 0; }
  .page-media-grid {
    width: calc(100vw - 36px);
    gap: 14px;
  }
  .page-media-grid .image-frame {
    flex-basis: 76vw;
  }
}


.page-cut--center-pattern .page-cut-slice {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.solid-gallery {
  padding: calc(var(--header-h) + 64px) var(--side) 72px;
}

.solid-gallery--sage {
  background: #babf97;
}

.page-media-grid--two .image-frame {
  flex: 1 1 0;
}

@media (max-width: 980px) {
  .page-media-grid--two .image-frame {
    flex: 0 0 76vw;
  }
}

@media (max-width: 640px) {
  .solid-gallery {
    padding: calc(var(--header-h) + 42px) 18px 54px;
  }
  .page-media-grid--two .image-frame {
    flex-basis: 82vw;
  }
}

/* v13 fixes */
.page-cut,
.page-cut--media,
.solid-gallery {
  min-height: 100vh;
}

.page-cut--media,
.solid-gallery {
  display: grid;
  align-items: center;
}

.page-cut--center-pattern .page-cut-slice {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.page-cut--center-pattern .page-cut-slice::before {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  background-position: center;
}

.page-media-grid .image-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.page-media-grid--two {
  align-items: center;
}

.page-media-grid--two .image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-media-grid--two .image-frame img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 210px);
}

.solid-gallery .image-frame img {
  max-height: calc(100vh - 220px);
}


/* v14 - appartamenti: pagine corrette + snap scroll */
html,
body {
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  overflow-y: auto;
}

.site-shell {
  overflow-x: clip;
  overflow-y: visible;
}

.snap-page {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.page-cut--appartamenti {
  --page-image: url("../img/appartamenti-page.webp");
  --section-color: #babf97;
}

.page-cut--media,
.solid-gallery {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: calc(var(--header-h) + 64px) var(--side) 72px;
}

.solid-gallery--sage {
  background: #babf97;
}

.page-cut--center-pattern .page-cut-slice {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.page-cut--center-pattern .page-cut-slice::before {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  background-position: center;
}

.image-frame,
.image-frame--flat {
  box-shadow: none;
}

.page-media-grid {
  width: min(1680px, calc(100vw - (var(--side) * 2)));
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
}

.page-media-grid .image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.page-media-grid .image-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  object-fit: contain;
}

.page-media-grid--four .image-frame {
  flex: 1 1 0;
}

.page-media-grid--two .image-frame {
  flex: 1 1 0;
}

@media (max-width: 980px) {
  .page-cut--media,
  .solid-gallery {
    padding: calc(var(--header-h) + 48px) 22px 58px;
  }

  .page-media-grid {
    width: calc(100vw - 44px);
    justify-content: flex-start;
  }

  .page-media-grid--four .image-frame {
    flex: 0 0 62vw;
  }

  .page-media-grid--two .image-frame {
    flex: 0 0 76vw;
  }
}

@media (max-width: 640px) {
  .page-cut--media,
  .solid-gallery {
    padding: calc(var(--header-h) + 42px) 18px 54px;
  }

  .page-media-grid {
    width: calc(100vw - 36px);
    gap: 14px;
  }

  .page-media-grid--four .image-frame,
  .page-media-grid--two .image-frame {
    flex-basis: 82vw;
  }
}


/* v15 - snap più lento, pagine full screen e cornici corrette */
html.snap-controlled {
  scroll-behavior: auto !important;
}

html,
body {
  scroll-snap-type: y mandatory;
}

.snap-page {
  min-height: 100vh;
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.media-hero,
.page-cut--media,
.solid-gallery {
  min-height: 100vh;
  height: 100vh;
}

.hero-media-frame {
  max-width: min(1140px, 87vw);
}

.page-cut--appartamenti {
  --page-image: url("../img/appartamenti-page.webp");
  --section-color: #babf97;
}

.page-cut--media,
.solid-gallery {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.solid-gallery--sage {
  background: #babf97;
}

.page-cut--media .page-cut-slice {
  z-index: 1;
}

.page-cut--center-pattern .page-cut-slice {
  right: auto !important;
  left: 50% !important;
  width: 33.333333vw;
  transform: translateX(-50%) !important;
}

.page-cut--center-pattern .page-cut-slice::before {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw;
  background-image: var(--page-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-media-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 30px);
  width: min(1680px, calc(100vw - (var(--side) * 2)));
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scrollbar-width: thin;
}

.page-media-grid .image-frame {
  max-width: none;
  margin: 0;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(8px, 0.9vw, 14px);
}

.page-media-grid .image-frame--white {
  background: #ffffff;
}

.page-media-grid .image-frame--section {
  background: #babf97;
}

.page-media-grid .image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.page-media-grid--three .image-frame {
  flex: 1 1 0;
  height: min(58vh, 540px);
}

.page-media-grid--two .image-frame {
  flex: 1 1 0;
  height: min(68vh, 660px);
}

@media (max-width: 980px) {
  .page-media-grid {
    width: calc(100vw - 44px);
    justify-content: flex-start;
  }

  .page-media-grid--three .image-frame {
    flex: 0 0 68vw;
    height: min(58vh, 520px);
  }

  .page-media-grid--two .image-frame {
    flex: 0 0 78vw;
    height: min(68vh, 620px);
  }
}

@media (max-width: 640px) {
  .page-media-grid {
    width: calc(100vw - 36px);
    gap: 14px;
  }

  .page-media-grid--three .image-frame,
  .page-media-grid--two .image-frame {
    flex-basis: 84vw;
    height: min(62vh, 560px);
  }
}

/* v16 - fix snap controllato + cornici equidistanti */
html.snap-controlled,
html.snap-controlled body {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

html:not(.snap-controlled),
html:not(.snap-controlled) body {
  scroll-snap-type: y mandatory;
}

.snap-page {
  height: 100vh !important;
  min-height: 100vh !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.media-hero,
.page-cut--media,
.solid-gallery {
  height: 100vh !important;
  min-height: 100vh !important;
}

.page-cut--media,
.solid-gallery {
  padding: calc(var(--header-h) + 56px) var(--side) 56px !important;
  overflow: hidden !important;
}

.page-media-grid {
  --frame-pad: clamp(10px, 0.9vw, 16px);
  position: relative;
  z-index: 2;
  width: min(1680px, calc(100vw - (var(--side) * 2))) !important;
  max-width: calc(100vw - (var(--side) * 2));
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 2vw, 30px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 10px !important;
}

.page-media-grid .image-frame,
.page-media-grid .image-frame--flat,
.page-media-grid .image-frame--white,
.page-media-grid .image-frame--section {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: var(--frame-pad) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.page-media-grid .image-frame--white {
  background: #ffffff !important;
}

.page-media-grid .image-frame--section {
  background: #babf97 !important;
}

.page-media-grid .image-frame img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.page-media-grid--three .image-frame img {
  max-width: min(28vw, 520px) !important;
  max-height: calc(100vh - var(--header-h) - 190px) !important;
}

.page-media-grid--two .image-frame img {
  max-width: min(42vw, 720px) !important;
  max-height: calc(100vh - var(--header-h) - 170px) !important;
}

.page-cut--center-pattern .page-cut-slice {
  display: block !important;
  z-index: 1 !important;
  right: auto !important;
  left: 50% !important;
  width: 33.333333vw !important;
  height: 100% !important;
  transform: translateX(-50%) !important;
}

.page-cut--center-pattern .page-cut-slice::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  left: 50% !important;
  width: 100vw !important;
  height: 100% !important;
  transform: translateX(-50%) !important;
  background-image: var(--page-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 980px) {
  .page-cut--media,
  .solid-gallery {
    padding: calc(var(--header-h) + 48px) 22px 58px !important;
  }

  .page-media-grid {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
    justify-content: flex-start !important;
  }

  .page-media-grid--three .image-frame img,
  .page-media-grid--two .image-frame img {
    max-width: 78vw !important;
    max-height: calc(100vh - var(--header-h) - 160px) !important;
  }
}

@media (max-width: 640px) {
  .page-cut--media,
  .solid-gallery {
    padding: calc(var(--header-h) + 42px) 18px 54px !important;
  }

  .page-media-grid {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    gap: 14px !important;
  }

  .page-media-grid--three .image-frame img,
  .page-media-grid--two .image-frame img {
    max-width: 82vw !important;
    max-height: calc(100vh - var(--header-h) - 150px) !important;
  }
}

/* v17 - sfondi pagina 1/2 corretti, crop 4:3 pagina 1, snap container stabile */
html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  overscroll-behavior: none;
}

.snap-shell {
  height: 100vh !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: auto !important;
  overscroll-behavior-y: contain;
}

.snap-page {
  height: 100vh !important;
  min-height: 100vh !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  flex: none;
}

.site-footer {
  display: none !important;
}

.page-cut--media,
.solid-gallery {
  display: grid !important;
  align-items: center !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: calc(var(--header-h) + 56px) var(--side) 56px !important;
  overflow: hidden !important;
}

.solid-gallery--sage {
  background: #babf97 !important;
}

.page-cut--appartamenti {
  background: #ffffff !important;
  --section-color: #babf97 !important;
}

.page-cut--appartamenti .page-cut-slice {
  display: block !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 33.333333vw !important;
  height: 100% !important;
  transform: none !important;
  z-index: 1 !important;
}

.page-cut--appartamenti .page-cut-slice::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 100vw !important;
  height: 100% !important;
  transform: none !important;
  background-image: var(--page-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.page-cut--center-pattern .page-cut-slice {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.page-cut--center-pattern .page-cut-slice::before {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-position: center !important;
}

.page-media-grid {
  --frame-pad: clamp(10px, 0.9vw, 16px);
  position: relative !important;
  z-index: 2 !important;
  width: min(1680px, calc(100vw - (var(--side) * 2))) !important;
  max-width: calc(100vw - (var(--side) * 2)) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 2vw, 30px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 10px !important;
}

.page-media-grid .image-frame,
.page-media-grid .image-frame--flat,
.page-media-grid .image-frame--white,
.page-media-grid .image-frame--section {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: var(--frame-pad) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-media-grid .image-frame--white {
  background: #ffffff !important;
}

.page-media-grid .image-frame--section {
  background: #babf97 !important;
}

.page-media-grid .image-frame img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.page-media-grid--ratio43 .image-frame {
  width: min(28vw, 520px) !important;
  aspect-ratio: 4 / 3 !important;
}

.page-media-grid--ratio43 .image-frame img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

.page-media-grid--two .image-frame img {
  max-width: min(42vw, 720px) !important;
  max-height: calc(100vh - var(--header-h) - 170px) !important;
}

@media (max-width: 980px) {
  .page-cut--media,
  .solid-gallery {
    padding: calc(var(--header-h) + 48px) 22px 58px !important;
  }

  .page-media-grid {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
    justify-content: flex-start !important;
  }

  .page-media-grid--ratio43 .image-frame {
    width: 76vw !important;
  }

  .page-media-grid--two .image-frame img {
    max-width: 78vw !important;
    max-height: calc(100vh - var(--header-h) - 160px) !important;
  }
}

@media (max-width: 640px) {
  .page-cut--media,
  .solid-gallery {
    padding: calc(var(--header-h) + 42px) 18px 54px !important;
  }

  .page-media-grid {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    gap: 14px !important;
  }

  .page-media-grid--ratio43 .image-frame {
    width: 82vw !important;
  }

  .page-media-grid--two .image-frame img {
    max-width: 82vw !important;
    max-height: calc(100vh - var(--header-h) - 150px) !important;
  }
}

/* v18 - snap stabile su tutte le pagine + layout pagine vuote */
html,
body {
  height: 100%;
  overflow: hidden !important;
}

body {
  overscroll-behavior: none;
}

.snap-shell {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: auto !important;
  overscroll-behavior-y: contain;
}

.snap-page {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  flex: none !important;
}

.site-footer {
  display: none !important;
}

.page-cut--home { --page-image: url("../img/home-page.webp"); }
.page-cut--progetto { --page-image: url("../img/progetto-page.webp"); }
.page-cut--appartamenti { --page-image: url("../img/appartamenti-page.webp"); }
.page-cut--capitolato { --page-image: url("../img/capitolato-page.webp"); }

.page-cut--media,
.solid-gallery {
  display: grid !important;
  align-items: center !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  padding: calc(var(--header-h) + 56px) var(--side) 56px !important;
  overflow: hidden !important;
}

.solid-gallery--sage {
  background: #babf97 !important;
}

.page-cut--home,
.page-cut--progetto,
.page-cut--appartamenti,
.page-cut--capitolato {
  background: #ffffff !important;
  --section-color: #babf97 !important;
}

.page-cut--home .page-cut-slice,
.page-cut--progetto .page-cut-slice,
.page-cut--appartamenti .page-cut-slice,
.page-cut--capitolato .page-cut-slice {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 33.333333vw !important;
  height: 100% !important;
  transform: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.page-cut--home .page-cut-slice::before,
.page-cut--progetto .page-cut-slice::before,
.page-cut--appartamenti .page-cut-slice::before,
.page-cut--capitolato .page-cut-slice::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 100vw !important;
  height: 100% !important;
  transform: none !important;
  background-image: var(--page-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.page-cut--center-pattern .page-cut-slice {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.page-cut--center-pattern .page-cut-slice::before {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-position: center !important;
}

.media-hero.visual-appartamenti {
  justify-items: end !important;
  background-image: url("../img/appartamenti-hero.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.hero-media-frame {
  max-width: min(1140px, 87vw) !important;
  margin-right: clamp(12px, 4vw, 72px) !important;
  padding: clamp(10px, 1.2vw, 18px) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.page-media-grid {
  --frame-pad: clamp(10px, 0.9vw, 16px);
  position: relative !important;
  z-index: 2 !important;
  width: min(1680px, calc(100vw - (var(--side) * 2))) !important;
  max-width: calc(100vw - (var(--side) * 2)) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 2vw, 30px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 10px !important;
  scrollbar-width: thin;
}

.page-media-grid .image-frame,
.page-media-grid .image-frame--flat,
.page-media-grid .image-frame--white,
.page-media-grid .image-frame--section {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: var(--frame-pad) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: block !important;
}

.page-media-grid .image-frame--white {
  background: #ffffff !important;
}

.page-media-grid .image-frame--section {
  background: #babf97 !important;
}

.page-media-grid .image-frame img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100vh - var(--header-h) - 170px) !important;
  object-fit: contain !important;
}

.page-media-grid--ratio43 .image-frame {
  width: min(28vw, 520px) !important;
  aspect-ratio: 4 / 3 !important;
}

.page-media-grid--ratio43 .image-frame img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

.page-media-grid--two .image-frame img {
  max-width: min(42vw, 720px) !important;
  max-height: calc(100vh - var(--header-h) - 170px) !important;
}

@media (max-width: 980px) {
  .page-cut--media,
  .solid-gallery {
    padding: calc(var(--header-h) + 48px) 22px 58px !important;
  }

  .page-media-grid {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
    justify-content: flex-start !important;
  }

  .page-media-grid--ratio43 .image-frame {
    width: 76vw !important;
  }

  .page-media-grid--two .image-frame img {
    max-width: 78vw !important;
    max-height: calc(100vh - var(--header-h) - 160px) !important;
  }
}

@media (max-width: 640px) {
  .page-cut--media,
  .solid-gallery {
    padding: calc(var(--header-h) + 42px) 18px 54px !important;
  }

  .hero-media-frame {
    margin-right: 0 !important;
  }

  .page-media-grid {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    gap: 14px !important;
  }

  .page-media-grid--ratio43 .image-frame {
    width: 82vw !important;
  }

  .page-media-grid--two .image-frame img {
    max-width: 82vw !important;
    max-height: calc(100vh - var(--header-h) - 150px) !important;
  }
}


/* v19 - scroll snap finestra stabile + colori pagina specifici */
html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: auto !important;
}

body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior-y: contain !important;
}

.site-shell.snap-shell {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

.snap-page {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

.full-visual,
.page-cut,
.page-cut--media,
.solid-gallery {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

.page-cut--media,
.solid-gallery {
  display: grid !important;
  align-items: center !important;
  overflow: hidden !important;
}

.site-footer {
  display: none !important;
}

/* colori pieni provvisori, separati per pagina */
.solid-gallery--home {
  background: #d9c7a3 !important;
}

.solid-gallery--progetto {
  background: #aeb9ad !important;
}

.solid-gallery--sage,
.solid-gallery--appartamenti {
  background: #babf97 !important;
}

.solid-gallery--capitolato {
  background: #c9a18d !important;
}

/* colore cornici/elementi per eventuali immagini future nelle pagine */
.page-cut--home,
.solid-gallery--home {
  --section-color: #d9c7a3 !important;
}

.page-cut--progetto,
.solid-gallery--progetto {
  --section-color: #aeb9ad !important;
}

.page-cut--appartamenti,
.solid-gallery--sage,
.solid-gallery--appartamenti {
  --section-color: #babf97 !important;
}

.page-cut--capitolato,
.solid-gallery--capitolato {
  --section-color: #c9a18d !important;
}

/* pattern laterale / centrale */
.page-cut--home .page-cut-slice,
.page-cut--progetto .page-cut-slice,
.page-cut--appartamenti .page-cut-slice,
.page-cut--capitolato .page-cut-slice {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 33.333333vw !important;
  height: 100% !important;
  transform: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.page-cut--center-pattern .page-cut-slice {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.page-cut--center-pattern .page-cut-slice::before {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-position: center !important;
}

/* cornici: lati equidistanti */
.image-frame {
  box-shadow: none !important;
  overflow: hidden !important;
}

.image-frame--white,
.image-frame--section {
  padding: clamp(10px, 0.9vw, 16px) !important;
}

.image-frame--section {
  background: var(--section-color, #babf97) !important;
}

.page-media-grid .image-frame {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

.page-media-grid .image-frame img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(42vw, 720px) !important;
  max-height: calc(100vh - var(--header-h) - 170px) !important;
  object-fit: contain !important;
}

/* pagina 1 appartamenti: taglio 4:3 richiesto */
.page-media-grid--ratio43 .image-frame {
  width: min(28vw, 520px) !important;
  aspect-ratio: 4 / 3 !important;
}

.page-media-grid--ratio43 .image-frame img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

.page-media-grid {
  position: relative !important;
  z-index: 2 !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 980px) {
  .page-media-grid {
    justify-content: flex-start !important;
  }

  .page-media-grid .image-frame img {
    max-width: 78vw !important;
    max-height: calc(100vh - var(--header-h) - 160px) !important;
  }

  .page-media-grid--ratio43 .image-frame {
    width: 76vw !important;
  }
}

@media (max-width: 640px) {
  .page-media-grid .image-frame img {
    max-width: 82vw !important;
    max-height: calc(100vh - var(--header-h) - 150px) !important;
  }
}

/* v23 - base v19 + contenuti aggiornati + colori definitivi */
.solid-gallery--home {
  background: #da5c3d !important;
}

.solid-gallery--progetto {
  background: #7e4320 !important;
}

.solid-gallery--capitolato {
  background: #f2e3cc !important;
}

.page-cut--home,
.solid-gallery--home {
  --section-color: #da5c3d !important;
}

.page-cut--progetto,
.solid-gallery--progetto {
  --section-color: #7e4320 !important;
}

.page-cut--capitolato,
.solid-gallery--capitolato {
  --section-color: #f2e3cc !important;
}

.info-overlay,
.info-full-visual,
.info-page-cut,
.info-page-cut-slice {
  --section-color: #4b5359 !important;
}

.info-trigger:hover,
.mobile-panel button {
  background: #4b5359 !important;
}

.hero-media-frame--home {
  max-width: min(1280px, 88vw) !important;
}

.hero-media-frame--capitolato {
  max-width: min(720px, 42vw) !important;
  margin-right: 0 !important;
}

.page-media-grid--logos .image-frame {
  background: #ffffff !important;
}

.page-media-grid--logos .image-frame img {
  max-width: min(26vw, 420px) !important;
  max-height: min(24vh, 190px) !important;
}

.page-media-grid--stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(16px, 1.8vw, 26px) !important;
  width: min(1380px, calc(100vw - (var(--side) * 2))) !important;
  max-width: min(1380px, calc(100vw - (var(--side) * 2))) !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.page-media-grid--stack .image-frame {
  width: 100% !important;
}

.page-media-grid--stack .image-frame img {
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc((100vh - var(--header-h) - 130px) / 2) !important;
}

.page-media-grid--six {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.4vw, 22px) !important;
  width: min(1500px, calc(100vw - (var(--side) * 2))) !important;
  max-width: min(1500px, calc(100vw - (var(--side) * 2))) !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.page-media-grid--six .image-frame {
  width: 100% !important;
}

.page-media-grid--six .image-frame img {
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc((100vh - var(--header-h) - 140px) / 2) !important;
}

.page-media-grid--single {
  width: min(1320px, calc(100vw - (var(--side) * 2))) !important;
  max-width: min(1320px, calc(100vw - (var(--side) * 2))) !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.page-media-grid--single .image-frame img {
  max-width: min(76vw, 1120px) !important;
  max-height: calc(100vh - var(--header-h) - 170px) !important;
}

@media (max-width: 980px) {
  .hero-media-frame--capitolato {
    max-width: min(640px, 72vw) !important;
  }

  .page-media-grid--logos .image-frame img {
    max-width: 74vw !important;
    max-height: 24vh !important;
  }

  .page-media-grid--stack,
  .page-media-grid--six,
  .page-media-grid--single {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
  }

  .page-media-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow-y: auto !important;
  }

  .page-media-grid--six .image-frame img,
  .page-media-grid--stack .image-frame img {
    max-height: none !important;
  }
}

@media (max-width: 640px) {
  .hero-media-frame--capitolato {
    max-width: min(86vw, 620px) !important;
  }

  .page-media-grid--stack,
  .page-media-grid--six,
  .page-media-grid--single {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
  }

  .page-media-grid--six {
    grid-template-columns: 1fr !important;
  }
}

/* v24 - colori definitivi + fit fullscreen */
:root {
  --color-home: #da5c3d;
  --color-info: #4b5359;
  --color-progetto: #7e4320;
  --color-appartamenti: #babf97;
  --color-capitolato: #f2e3cc;
}

.page-cut--home,
.solid-gallery--home {
  --section-color: var(--color-home) !important;
}

.page-cut--progetto,
.solid-gallery--progetto {
  --section-color: var(--color-progetto) !important;
}

.page-cut--appartamenti,
.solid-gallery--sage,
.solid-gallery--appartamenti {
  --section-color: var(--color-appartamenti) !important;
}

.page-cut--capitolato,
.solid-gallery--capitolato {
  --section-color: var(--color-capitolato) !important;
}

.solid-gallery--home { background: var(--color-home) !important; }
.solid-gallery--progetto { background: var(--color-progetto) !important; }
.solid-gallery--sage,
.solid-gallery--appartamenti { background: var(--color-appartamenti) !important; }
.solid-gallery--capitolato { background: var(--color-capitolato) !important; }

.page-cut--home .image-frame--section { background: var(--color-home) !important; }
.page-cut--progetto .image-frame--section { background: var(--color-progetto) !important; }
.page-cut--appartamenti .image-frame--section { background: var(--color-appartamenti) !important; }
.page-cut--capitolato .image-frame--section { background: var(--color-capitolato) !important; }

.info-overlay,
.info-full-visual,
.info-page-cut,
.info-page-cut-slice {
  --section-color: var(--color-info) !important;
}

.info-trigger:hover,
.mobile-panel button {
  background: var(--color-info) !important;
}

/* Desktop/fullscreen: tutto deve stare dentro la singola pagina. */
@media (min-width: 981px) {
  .media-hero,
  .page-cut--media,
  .solid-gallery {
    overflow: hidden !important;
  }

  .media-hero .hero-media-frame {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: min(88vw, 1280px) !important;
    max-height: calc(100dvh - var(--header-h) - 110px) !important;
  }

  .media-hero .hero-media-frame img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(100dvh - var(--header-h) - 140px) !important;
    object-fit: contain !important;
  }

  .hero-media-frame--capitolato {
    max-width: min(46vw, 760px) !important;
  }

  .page-media-grid {
    max-height: calc(100dvh - var(--header-h) - 115px) !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .page-media-grid .image-frame {
    max-height: calc(100dvh - var(--header-h) - 125px) !important;
  }

  .page-media-grid .image-frame img {
    max-height: calc(100dvh - var(--header-h) - 155px) !important;
  }

  .page-media-grid--four:not(.page-media-grid--ratio43) .image-frame img {
    max-width: min(20vw, 360px) !important;
  }

  .page-media-grid--logos .image-frame img {
    max-width: min(19vw, 320px) !important;
    max-height: min(24dvh, 190px) !important;
  }

  .page-media-grid--three .image-frame img {
    max-width: min(28vw, 480px) !important;
  }

  .page-media-grid--two .image-frame img {
    max-width: min(42vw, 680px) !important;
  }

  .page-media-grid--ratio43 .image-frame {
    width: min(28vw, 510px) !important;
  }

  .page-media-grid--stack {
    overflow: hidden !important;
  }

  .page-media-grid--stack .image-frame img {
    max-height: calc((100dvh - var(--header-h) - 145px) / 2) !important;
  }

  .page-media-grid--six .image-frame img {
    max-height: calc((100dvh - var(--header-h) - 155px) / 2) !important;
  }

  .page-media-grid--single .image-frame img {
    max-width: min(76vw, 1120px) !important;
    max-height: calc(100dvh - var(--header-h) - 155px) !important;
  }
}

/* v25 - spostamenti home/capitolato + fit desktop + progetto più piccolo */
:root {
  --color-home: #da5c3d;
  --color-info: #4b5359;
  --color-progetto: #7e4320;
  --color-appartamenti: #babf97;
  --color-capitolato: #f2e3cc;
}

.page-cut--home,
.solid-gallery--home { --section-color: var(--color-home) !important; }
.page-cut--progetto,
.solid-gallery--progetto { --section-color: var(--color-progetto) !important; }
.page-cut--appartamenti,
.solid-gallery--sage,
.solid-gallery--appartamenti { --section-color: var(--color-appartamenti) !important; }
.page-cut--capitolato,
.solid-gallery--capitolato { --section-color: var(--color-capitolato) !important; }

.solid-gallery--home { background: var(--color-home) !important; }
.solid-gallery--progetto { background: var(--color-progetto) !important; }
.solid-gallery--sage,
.solid-gallery--appartamenti { background: var(--color-appartamenti) !important; }
.solid-gallery--capitolato { background: var(--color-capitolato) !important; }

.page-cut--home .image-frame--section { background: var(--color-home) !important; }
.page-cut--progetto .image-frame--section { background: var(--color-progetto) !important; }
.page-cut--appartamenti .image-frame--section { background: var(--color-appartamenti) !important; }
.page-cut--capitolato .image-frame--section { background: var(--color-capitolato) !important; }

.info-overlay,
.info-full-visual,
.info-page-cut,
.info-page-cut-slice { --section-color: var(--color-info) !important; }
.info-trigger:hover,
.mobile-panel button { background: var(--color-info) !important; }

@media (min-width: 981px) {
  .snap-page {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .media-hero,
  .page-cut--media,
  .solid-gallery {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    align-items: center !important;
  }

  .page-media-grid {
    max-height: calc(100dvh - var(--header-h) - 118px) !important;
    overflow: hidden !important;
  }

  .page-media-grid .image-frame {
    max-height: calc(100dvh - var(--header-h) - 128px) !important;
  }

  .page-media-grid .image-frame img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(100dvh - var(--header-h) - 160px) !important;
    object-fit: contain !important;
  }

  .solid-gallery .page-media-grid--four .image-frame img {
    max-width: min(20vw, 360px) !important;
  }

  .solid-gallery--capitolato .page-media-grid--single .image-frame img {
    max-width: min(74vw, 1080px) !important;
    max-height: calc(100dvh - var(--header-h) - 165px) !important;
  }

  .page-cut--progetto .page-media-grid--stack {
    width: min(1080px, calc(100vw - (var(--side) * 2))) !important;
    max-width: min(1080px, calc(100vw - (var(--side) * 2))) !important;
    gap: clamp(14px, 1.4vw, 22px) !important;
  }

  .page-cut--progetto .page-media-grid--stack .image-frame {
    width: 88% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-cut--progetto .page-media-grid--stack .image-frame img {
    max-height: calc((100dvh - var(--header-h) - 190px) / 2) !important;
  }
}

@media (max-width: 980px) {
  .snap-page,
  .media-hero,
  .page-cut--media,
  .solid-gallery {
    height: auto !important;
    min-height: 100vh !important;
  }

  .page-media-grid {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .page-cut--progetto .page-media-grid--stack {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
  }
}

/* v26 - ripristino cornici e dimensioni stabili */
:root {
  --color-home: #da5c3d;
  --color-info: #4b5359;
  --color-progetto: #7e4320;
  --color-appartamenti: #babf97;
  --color-capitolato: #f2e3cc;
  --frame-pad-final: clamp(10px, 0.85vw, 16px);
}

.page-cut--home,
.solid-gallery--home { --section-color: var(--color-home) !important; }
.page-cut--progetto,
.solid-gallery--progetto { --section-color: var(--color-progetto) !important; }
.page-cut--appartamenti,
.solid-gallery--sage,
.solid-gallery--appartamenti { --section-color: var(--color-appartamenti) !important; }
.page-cut--capitolato,
.solid-gallery--capitolato { --section-color: var(--color-capitolato) !important; }

.solid-gallery--home { background: var(--color-home) !important; }
.solid-gallery--progetto { background: var(--color-progetto) !important; }
.solid-gallery--sage,
.solid-gallery--appartamenti { background: var(--color-appartamenti) !important; }
.solid-gallery--capitolato { background: var(--color-capitolato) !important; }

.info-trigger:hover,
.mobile-panel button { background: var(--color-info) !important; }
.info-overlay,
.info-full-visual,
.info-page-cut,
.info-page-cut-slice { --section-color: var(--color-info) !important; }

html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-snap-type: y mandatory !important;
}

body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.site-shell.snap-shell {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

.snap-page,
.full-visual,
.media-hero,
.page-cut,
.page-cut--media,
.solid-gallery {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

.page-cut--media,
.solid-gallery {
  display: grid !important;
  align-items: center !important;
  padding: calc(var(--header-h) + 56px) var(--side) 56px !important;
  overflow: hidden !important;
}

.page-media-grid {
  position: relative !important;
  z-index: 2 !important;
  width: min(1680px, calc(100vw - (var(--side) * 2))) !important;
  max-width: calc(100vw - (var(--side) * 2)) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 2vw, 30px) !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.page-media-grid .image-frame,
.page-media-grid .image-frame--flat,
.page-media-grid .image-frame--white,
.page-media-grid .image-frame--section,
.hero-media-frame {
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: var(--frame-pad-final) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

.hero-media-frame {
  background: #ffffff !important;
}

.image-frame--white,
.page-media-grid .image-frame--white {
  background: #ffffff !important;
}

.image-frame--section,
.page-media-grid .image-frame--section {
  background: var(--section-color, var(--color-appartamenti)) !important;
}

.hero-media-frame img,
.page-media-grid .image-frame img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.media-hero .hero-media-frame {
  max-width: min(88vw, 1280px) !important;
  max-height: calc(100dvh - var(--header-h) - 110px) !important;
}

.media-hero .hero-media-frame img {
  max-width: 100% !important;
  max-height: calc(100dvh - var(--header-h) - 142px) !important;
}

.hero-media-frame--capitolato {
  max-width: min(46vw, 760px) !important;
  margin-right: 0 !important;
}

/* Gallerie orizzontali: dimensioni stabili e cornice aderente all'immagine */
.page-media-grid--four:not(.page-media-grid--ratio43) .image-frame img {
  max-width: min(21vw, 380px) !important;
  max-height: calc(100dvh - var(--header-h) - 160px) !important;
}

.page-media-grid--logos .image-frame img {
  max-width: min(20vw, 340px) !important;
  max-height: min(24dvh, 190px) !important;
}

.page-media-grid--three .image-frame img {
  max-width: min(28vw, 500px) !important;
  max-height: calc(100dvh - var(--header-h) - 160px) !important;
}

.page-media-grid--two .image-frame img {
  max-width: min(42vw, 700px) !important;
  max-height: calc(100dvh - var(--header-h) - 160px) !important;
}

.page-media-grid--single .image-frame img {
  max-width: min(76vw, 1120px) !important;
  max-height: calc(100dvh - var(--header-h) - 160px) !important;
}

/* Appartamenti pagina 1: taglio 4:3 controllato, cornice equidistante */
.page-media-grid--ratio43 .image-frame {
  width: min(28vw, 510px) !important;
  aspect-ratio: 4 / 3 !important;
  padding: var(--frame-pad-final) !important;
}

.page-media-grid--ratio43 .image-frame img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

/* Progetto pagina 1: due righe più piccole */
.page-media-grid--stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(14px, 1.4vw, 22px) !important;
  width: min(1080px, calc(100vw - (var(--side) * 2))) !important;
  max-width: min(1080px, calc(100vw - (var(--side) * 2))) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.page-media-grid--stack .image-frame {
  width: 88% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-media-grid--stack .image-frame img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc((100dvh - var(--header-h) - 190px) / 2) !important;
  object-fit: contain !important;
}

/* Capitolato pagina 1: griglia 3x2 con cornici regolari */
.page-media-grid--six {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.4vw, 22px) !important;
  width: min(1500px, calc(100vw - (var(--side) * 2))) !important;
  max-width: min(1500px, calc(100vw - (var(--side) * 2))) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.page-media-grid--six .image-frame {
  width: 100% !important;
  max-width: 100% !important;
}

.page-media-grid--six .image-frame img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc((100dvh - var(--header-h) - 155px) / 2) !important;
  object-fit: contain !important;
}

@media (max-width: 980px) {
  .snap-page,
  .full-visual,
  .media-hero,
  .page-cut,
  .page-cut--media,
  .solid-gallery {
    height: auto !important;
    min-height: 100vh !important;
  }

  .page-cut--media,
  .solid-gallery {
    padding: calc(var(--header-h) + 48px) 22px 58px !important;
  }

  .page-media-grid {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 10px !important;
  }

  .page-media-grid--four:not(.page-media-grid--ratio43) .image-frame img,
  .page-media-grid--logos .image-frame img,
  .page-media-grid--three .image-frame img,
  .page-media-grid--two .image-frame img,
  .page-media-grid--single .image-frame img {
    max-width: 78vw !important;
    max-height: calc(100vh - var(--header-h) - 160px) !important;
  }

  .page-media-grid--ratio43 .image-frame {
    width: 76vw !important;
  }

  .page-media-grid--stack,
  .page-media-grid--six {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
  }

  .page-media-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow-y: auto !important;
  }

  .page-media-grid--stack .image-frame img,
  .page-media-grid--six .image-frame img {
    max-height: none !important;
  }
}

@media (max-width: 640px) {
  .page-cut--media,
  .solid-gallery {
    padding: calc(var(--header-h) + 42px) 18px 54px !important;
  }

  .page-media-grid {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    gap: 14px !important;
  }

  .page-media-grid--four:not(.page-media-grid--ratio43) .image-frame img,
  .page-media-grid--logos .image-frame img,
  .page-media-grid--three .image-frame img,
  .page-media-grid--two .image-frame img,
  .page-media-grid--single .image-frame img {
    max-width: 82vw !important;
    max-height: calc(100vh - var(--header-h) - 150px) !important;
  }

  .page-media-grid--ratio43 .image-frame {
    width: 82vw !important;
  }

  .page-media-grid--six {
    grid-template-columns: 1fr !important;
  }

  .hero-media-frame--capitolato {
    max-width: min(86vw, 620px) !important;
  }
}

/* v27 - Home pagina 1 e 2: immagini leggermente ridotte */
.page-cut--home .page-media-grid--logos .image-frame img {
  max-width: min(16vw, 280px) !important;
  max-height: min(20dvh, 160px) !important;
}

.solid-gallery--home .page-media-grid--four .image-frame img {
  max-width: min(18vw, 320px) !important;
  max-height: calc(100dvh - var(--header-h) - 190px) !important;
}

.page-cut--home .page-media-grid--logos,
.solid-gallery--home .page-media-grid--four {
  gap: clamp(18px, 2.4vw, 36px) !important;
}

@media (max-width: 980px) {
  .page-cut--home .page-media-grid--logos .image-frame img,
  .solid-gallery--home .page-media-grid--four .image-frame img {
    max-width: 72vw !important;
    max-height: calc(100vh - var(--header-h) - 175px) !important;
  }
}

@media (max-width: 640px) {
  .page-cut--home .page-media-grid--logos .image-frame img,
  .solid-gallery--home .page-media-grid--four .image-frame img {
    max-width: 78vw !important;
    max-height: calc(100vh - var(--header-h) - 165px) !important;
  }
}


/* v30 - dissolvenza schede immagini + footer raggiungibile */
.js-enabled .image-frame {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms ease,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js-enabled .image-frame.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-footer {
  scroll-snap-align: end;
  scroll-snap-stop: always;
}

@media (prefers-reduced-motion: reduce) {
  .js-enabled .image-frame {
    opacity: 1;
    transform: none;
    transition: none;
  }
}



/* v32 - solo cornici immagini in fade, nessuna dissolvenza pagina */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #ffffff !important;
  transform: translateZ(0) !important;
  pointer-events: auto !important;
}

.site-footer {
  position: relative;
  z-index: 0;
  min-height: 100dvh;
  padding-top: var(--header-h);
  scroll-snap-align: end;
  scroll-snap-stop: always;
}

/* evita che il footer o l'ultimo step coprano visivamente la barra */
.snap-page,
.site-shell,
.site-footer {
  transform: none;
}

/* nessun fade globale del body: resta visibile pagina/sfondo, entrano solo le schede */
.js-enabled,
.js-enabled.is-loaded,
.js-enabled.is-leaving {
  opacity: 1 !important;
  transition: none !important;
}

.js-enabled .image-frame {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms ease,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js-enabled .image-frame.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-enabled .image-frame {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* v33 - fade solo schede/logo + footer realmente visibile */
.site-header {
  z-index: 2147483647 !important;
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.js-enabled .site-header .logo img {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 720ms ease,
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

html.js-enabled.is-loaded .site-header .logo img {
  opacity: 1;
  transform: translateY(0);
}

html.js-enabled .image-frame {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 680ms ease,
    transform 860ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

html.js-enabled .image-frame.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-footer.footer-page {
  position: relative !important;
  z-index: 9999 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--header-h) var(--side) 40px !important;
  background: #ffffff !important;
  color: var(--ink) !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  transform: none !important;
}

.site-footer.footer-page .footer-copy {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  html.js-enabled .site-header .logo img,
  html.js-enabled .image-frame {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* v34 - footer sottile sull'ultima pagina, non come pagina separata */
.site-footer.footer-page {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 10px var(--side) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--border) !important;
  z-index: 2147483646 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  scroll-snap-align: none !important;
  transition: opacity 260ms ease, visibility 260ms ease !important;
}

body.show-site-footer .site-footer.footer-page {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.site-footer.footer-page .footer-copy {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
}

.site-header {
  z-index: 2147483647 !important;
}