.container {
  width: min(var(--container), calc(100% - 96px));
  margin: 0 auto;
}

@media (max-width: 760px) {
  .detail-realizzazione-page.detail-blog-page .detail-blog-intro {
    min-height: 0;
    height: auto;
    padding: 30px 20px 90px;
    overflow: visible;
  }

  .detail-realizzazione-page.detail-blog-page .detail-blog-intro .container,
  .detail-realizzazione-page.detail-blog-page .detail-blog-copy {
    width: min(350px, 100%);
  }

  .detail-realizzazione-page.detail-blog-page .detail-blog-copy h2,
  .detail-realizzazione-page.detail-blog-page .detail-blog-copy h3 {
    margin: 50px 0 20px;
    font-size: 25px;
    line-height: 34px;
  }

  .detail-realizzazione-page.detail-blog-page .detail-blog-copy .article-figure {
    margin: 50px 0;
  }

  .detail-realizzazione-page.detail-blog-page .detail-blog-copy .article-figure img {
    width: 350px;
    height: 260px;
  }

  .detail-realizzazione-page.detail-blog-page .detail-blog-copy .detail-blog-back {
    margin-top: 50px;
  }
}

/* Shared Figma footer baseline. Add .no-shared-footer to opt out explicitly. */
@media (min-width: 761px) {
  body:not(.no-shared-footer) .prefooter {
    height: 460px;
    padding: 90px 0 100px;
  }

  body:not(.no-shared-footer) .prefooter .container {
    width: 1420px;
    height: 270px;
  }

  body:not(.no-shared-footer) .prefooter h2 {
    width: 1420px;
    height: 82px;
    font-size: 30px;
    line-height: 41px;
  }

  body:not(.no-shared-footer) .prefooter h2 strong {
    font-weight: 700;
  }

  body:not(.no-shared-footer) .prefooter p {
    width: 1420px;
    height: 76px;
    margin: 30px 0 40px;
    font-family: "Inter", Arial, sans-serif;
    font-size: 16px;
    line-height: 38px;
    font-weight: 700;
  }

  body:not(.no-shared-footer) .prefooter .btn {
    width: 217px;
    height: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 1.6px;
  }

  body:not(.no-shared-footer) .site-footer {
    height: 467px;
    min-height: 467px;
  }

  body:not(.no-shared-footer) .footer-main {
    width: 1074px;
    height: 329px;
    display: grid;
    grid-template-columns: 281px 281px 352px;
    gap: 80px;
    margin: 0 auto;
    padding: 60px 0 50px;
  }

  body:not(.no-shared-footer) .site-footer .footer-logo {
    position: static;
    margin-bottom: 20px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  body:not(.no-shared-footer) .footer-logo .logo-image,
  body:not(.no-shared-footer) .footer-logo .logo-image-blue {
    width: 230px;
    height: 31px;
    display: block;
  }

  body:not(.no-shared-footer) .footer-col h3,
  body:not(.no-shared-footer) .footer-col p,
  body:not(.no-shared-footer) .cert-grid span {
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 28px;
  }

  body:not(.no-shared-footer) .footer-col h3 {
    margin: 0 0 10px;
    font-weight: 800;
  }

  body:not(.no-shared-footer) .footer-company h3 {
    margin: 0;
  }

  body:not(.no-shared-footer) .footer-main > .footer-col:not(.footer-company) {
    padding-top: 51px;
  }

  body:not(.no-shared-footer) .footer-col p {
    font-weight: 500;
  }

  body:not(.no-shared-footer) .cert-grid {
    grid-template-columns: repeat(4, 73px);
    gap: 20px;
  }

  body:not(.no-shared-footer) .footer-bottom {
    width: 1420px;
    height: 138px;
    padding: 10px 0 0;
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 28px;
    font-weight: 500;
  }
}

@media (max-width: 760px) {
  body:not(.no-shared-footer) .prefooter {
    height: 705px;
    padding: 90px 20px 32px;
  }

  body:not(.no-shared-footer) .prefooter .container {
    width: min(350px, 100%);
    height: 583px;
    gap: 0;
  }

  body:not(.no-shared-footer) .prefooter h2 {
    width: min(350px, 100%);
    height: 205px;
    font-size: 30px;
    line-height: 41px;
  }

  body:not(.no-shared-footer) .prefooter h2 strong {
    font-weight: 700;
  }

  body:not(.no-shared-footer) .prefooter p {
    width: min(350px, 100%);
    height: 266px;
    margin: 30px 0 40px;
    font-family: "Inter", Arial, sans-serif;
    font-size: 16px;
    line-height: 38px;
    font-weight: 700;
  }

  body:not(.no-shared-footer) .prefooter p br {
    display: none;
  }

  body:not(.no-shared-footer) .prefooter .btn {
    width: 217px;
    height: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 1.6px;
  }

  body:not(.no-shared-footer) .site-footer {
    height: 814px;
    min-height: 814px;
  }

  body:not(.no-shared-footer) .footer-main {
    width: 350px;
    height: 650px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
    padding: 50px 0 0;
  }

  body:not(.no-shared-footer) .site-footer .footer-logo {
    position: static;
    align-self: center;
    margin: 0 auto 20px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  body:not(.no-shared-footer) .footer-logo .logo-image,
  body:not(.no-shared-footer) .footer-logo .logo-image-blue {
    width: 230px;
    height: 31px;
    display: block;
  }

  body:not(.no-shared-footer) .footer-col {
    width: min(350px, 100%);
    padding-top: 0;
    text-align: center;
  }

  body:not(.no-shared-footer) .footer-col h3,
  body:not(.no-shared-footer) .footer-col p,
  body:not(.no-shared-footer) .cert-grid span {
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 28px;
  }

  body:not(.no-shared-footer) .footer-col h3 {
    margin: 0;
    font-weight: 800;
  }

  body:not(.no-shared-footer) .footer-col p {
    font-weight: 500;
  }

  body:not(.no-shared-footer) .cert-grid {
    grid-template-columns: repeat(4, 73px);
    gap: 20px;
    margin-top: 10px;
  }

  body:not(.no-shared-footer) .footer-bottom {
    width: 350px;
    height: 164px;
    padding: 10px 0 0;
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 28px;
    font-weight: 500;
  }

  body:not(.no-shared-footer) .footer-bottom span {
    margin: 0 5px;
  }
}

.hero,
/* Le fotografie sono servite in WebP con fallback JPG: la prima
   dichiarazione vale per i browser senza `image-set()`, la seconda porta il
   WebP dove supportato. Gli originali PNG (fino a 2,9 MB l'uno) restano
   nel progetto come sorgenti ma non vengono piu' scaricati dagli utenti. */
.page-hero {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(38, 36, 81, .16), rgba(38, 36, 81, .18)),
    url("../images/figma/hero-building-figma-opt.jpg") center / cover no-repeat,
    linear-gradient(135deg, #262451, #4b89c1);
  background:
    linear-gradient(180deg, rgba(38, 36, 81, .16), rgba(38, 36, 81, .18)),
    image-set(
      url("../images/figma/hero-building-figma.webp") type("image/webp"),
      url("../images/figma/hero-building-figma-opt.jpg") type("image/jpeg")
    ) center / cover no-repeat,
    linear-gradient(135deg, #262451, #4b89c1);
}

.hero-photo {
  position: relative;
  min-height: 1080px;
  background: #262451;
  overflow: visible;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(100%);
  background:
    linear-gradient(180deg, rgba(38, 36, 81, .16), rgba(38, 36, 81, .18)),
    var(--hero-image) center / cover no-repeat;
  transition: transform .72s cubic-bezier(.7, 0, .2, 1), opacity .72s ease;
  will-change: transform;
}

/* Su mobile viene caricata la variante ridotta della foto (828px invece di
   1920px): stessa resa a schermo, circa un sesto del peso. Se la variante
   non e' disponibile si ricade sull'immagine desktop. */
@media (max-width: 760px) {
  .hero-slide {
    background:
      linear-gradient(180deg, rgba(38, 36, 81, .16), rgba(38, 36, 81, .18)),
      var(--hero-image-mobile, var(--hero-image)) center / cover no-repeat;
  }
}

.hero-slide.is-active {
  opacity: 1;
  transform: translateX(0);
}

.hero-slide.is-before {
  opacity: 1;
  transform: translateX(-100%);
}

.hero-slide.is-after {
  opacity: 1;
  transform: translateX(100%);
}

.home-intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: visible;
  animation: home-intro-finish 2.9s linear forwards;
  animation-play-state: paused;
}

.home-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(38, 36, 81, .84), rgba(38, 36, 81, .84)),
    rgba(38, 36, 81, .84);
  animation: home-intro-background-fade 2.9s linear forwards;
  animation-play-state: paused;
}

.home-intro.is-ready,
.home-intro.is-ready::before {
  animation-play-state: running;
}

.home-intro-logo-motion {
  position: relative;
  z-index: 1;
  width: min(1100px, 70vw);
  display: block;
  transform-origin: center;
}

.home-intro.has-target .home-intro-logo-motion {
  animation: home-intro-logo-flight 2.9s linear forwards;
  animation-play-state: paused;
  will-change: transform;
}

.home-intro.has-target.is-ready .home-intro-logo-motion {
  animation-play-state: running;
}

.home-intro-logo-motion svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.home-intro-logo-motion path {
  --intro-motion-x: 220px;
  animation:
    figma-intro-vector 2s linear forwards,
    home-intro-logo-color 2.9s linear forwards;
  animation-play-state: paused;
  paint-order: stroke fill;
  stroke: #4B89C1;
  stroke-linejoin: round;
  stroke-width: 1.25px;
  will-change: translate, fill, stroke;
}

.home-intro.is-ready .home-intro-logo-motion path {
  animation-play-state: running;
}

.home-intro-logo-motion path:nth-child(12n + 1) {
  --intro-motion-x: 202.285px;
}

.home-intro-logo-motion path:nth-child(12n + 2) {
  --intro-motion-x: 212.853px;
}

.home-intro-logo-motion path:nth-child(12n + 3) {
  --intro-motion-x: 198.137px;
}

.home-intro-logo-motion path:nth-child(12n + 4) {
  --intro-motion-x: -162.954px;
}

.home-intro-logo-motion path:nth-child(12n + 5) {
  --intro-motion-x: -218.879px;
}

.home-intro-logo-motion path:nth-child(12n + 6) {
  --intro-motion-x: -242.657px;
}

.home-intro-logo-motion path:nth-child(12n + 7) {
  --intro-motion-x: -201.587px;
}

.home-intro-logo-motion path:nth-child(12n + 8) {
  --intro-motion-x: 252.096px;
}

.home-intro-logo-motion path:nth-child(12n + 9) {
  --intro-motion-x: -247.578px;
}

.home-intro-logo-motion path:nth-child(12n + 10) {
  --intro-motion-x: 239.925px;
}

.home-intro-logo-motion path:nth-child(12n + 11) {
  --intro-motion-x: 199.598px;
}

.home-intro-logo-motion path:nth-child(12n) {
  --intro-motion-x: -274.495px;
}

@keyframes home-intro-finish {
  0%,
  99% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    visibility: hidden;
  }
}

@keyframes home-intro-background-fade {
  0%,
  69% {
    opacity: 1;
  }

  96%,
  100% {
    opacity: 0;
  }
}

@keyframes home-intro-logo-flight {
  0%,
  69% {
    transform: translate3d(0, 0, 0) scale(1);
    animation-timing-function: cubic-bezier(.7, 0, .2, 1);
  }

  96%,
  100% {
    transform:
      translate3d(var(--intro-target-x, 0), var(--intro-target-y, 0), 0)
      scale(var(--intro-target-scale, 1));
  }
}

@keyframes home-intro-logo-color {
  0%,
  69% {
    fill: #4B89C1;
    stroke: #4B89C1;
  }

  96%,
  100% {
    fill: #fff;
    stroke: #fff;
  }
}

body.home-intro-flight .site-logo {
  animation: home-header-logo-reveal 2.9s linear both;
}

@keyframes home-header-logo-reveal {
  0%,
  95% {
    opacity: 0;
  }

  96%,
  100% {
    opacity: 1;
  }
}

/* Quando il volo del logo viene saltato via JS (vedi reveal.js): rende
   .site-logo sempre visibile a qualunque larghezza. Senza questa regola
   la visibilita' dipenderebbe solo dai breakpoint <=1179px qui sotto, e
   ingrandendo la finestra oltre quella soglia dopo un caricamento stretto
   il logo restava invisibile. */
body.home-intro-skip .site-logo {
  opacity: 1;
  pointer-events: auto;
}

@keyframes figma-intro-vector {
  0% {
    animation-timing-function: ease-in-out;
    translate: var(--intro-motion-x) 0;
  }

  16% {
    animation-timing-function: ease-in-out;
    translate: calc(var(--intro-motion-x) * -.37) 0;
  }

  30% {
    animation-timing-function: ease-in-out;
    translate: calc(var(--intro-motion-x) * .13) 0;
  }

  44% {
    animation-timing-function: ease-out;
    translate: calc(var(--intro-motion-x) * -.045) 0;
  }

  60%,
  100% {
    translate: 0 0;
  }
}

@media (max-width: 1500px) and (min-width: 1181px) {
  .home-intro-logo-motion {
    width: min(1100px, 70vw);
  }
}

.hero-inner {
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: min(1620px, calc(100% - 300px));
  min-height: 308px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: none;
  text-align: center;
  padding: 55px 100px;
  border-radius: 5px 5px 0 0;
  background: var(--color-ink);
  transform: translateX(-50%);
  z-index: 3;
}

.hero h1,
.page-hero h1 {
  width: 100%;
  max-width: 1420px;
  margin: 0;
  font-family: var(--font-title);
  font-size: 50px;
  line-height: 1.36;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.page-hero h1 {
  max-width: 1420px;
  margin-bottom: 0;
  font-size: 68px;
  line-height: 1;
}

.home-page .hero h1 span {
  font-weight: 300;
}

.hero h1 strong,
.hero h1 b {
  font-weight: 700;
}

.hero p {
  max-width: 1120px;
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

.home-page .hero-actions {
  width: 100%;
  max-width: 1420px;
  justify-content: center;
  margin: 20px auto 0;
  padding-top: 19px;
  border-top: 1px solid rgba(255, 255, 255, .4);
}

.home-page .hero-actions .btn-small {
  min-width: 0;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-blue-light);
  font-family: var(--font-title);
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.home-page .hero-actions .btn-small img {
  width: 18px;
  height: 18px;
  margin-left: 5px;
}

.home-claim-band {
  padding: 70px 0 90px;
  color: #fff;
  text-align: center;
  background: var(--color-ink);
}

.home-claim-band .container {
  width: min(1420px, calc(100% - 96px));
}

.home-claim-band p {
  width: 100%;
  height: 76px;
  max-width: 1420px;
  margin: 0 auto;
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: 0;
}

.home-claim-band p strong {
  font-weight: 900;
}

.home-claim-band h2 {
  margin: 80px 0 0;
  color: var(--color-blue-light);
  font-family: var(--font-title);
  font-size: 30px;
  line-height: 41px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: uppercase;
}

.home-claim-band h2 strong {
  font-weight: 700;
}

.home-claim-band .btn-small {
  width: 334px;
  min-height: 42px;
  margin-top: 40px;
  padding: 10px 50px;
  border: 0;
  border-radius: 50px;
  font-family: var(--font-title);
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: 1.6px;
  white-space: nowrap;
}

.hero-brand {
  color: var(--color-blue);
  font-family: var(--font-title);
  font-size: 148px;
  font-weight: 800;
  line-height: .9;
}

.hero-arrow {
  position: absolute;
  top: 498px;
  z-index: 3;
  width: 84px;
  height: 84px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
}

.hero-arrow-left {
  left: 0;
}

.hero-arrow-right {
  right: 0;
}

.hero-arrow img {
  width: 84px;
  height: 84px;
  display: block;
}

.page-hero {
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  padding: 0 0 74px;
}

.page-hero-photo {
  min-height: 400px;
  display: block;
  padding: 0;
  background-position: center;
  background-size: cover;
}

.page-hero .container {
  width: min(var(--container), calc(100% - 500px));
}

.breadcrumb {
  margin: 0 0 60px;
  color: rgba(38, 36, 81, .74);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.breadcrumb a {
  color: inherit;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--color-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .eyebrow,
.page-hero .eyebrow,
.band .eyebrow,
.section-dark .eyebrow {
  color: var(--color-blue-light);
}

.section {
  padding: 128px 0;
}

.intro-section {
  padding-top: 98px;
  padding-bottom: 96px;
}

.intro-section .split {
  display: block;
}

.intro-section .section-title {
  max-width: none;
  margin-bottom: 72px;
}

.intro-section .copy {
  max-width: 1395px;
}

.home-page .intro-section .copy p {
  margin-bottom: 20px;
  font-size: 17px;
  line-height: 2.15;
  font-weight: 400;
}

.home-page .intro-section .btn-small {
  min-width: 334px;
  min-height: 43px;
  margin-top: 54px;
  padding: 10px 34px;
  font-size: 16px;
  font-weight: 800;
}

.section-muted {
  background: var(--color-soft);
}

.services-section {
  padding-top: 0;
  padding-bottom: 112px;
}

.home-page .services-section .container {
  width: min(1884px, calc(100vw - 20px));
  max-width: none;
}

.home-page .two-cards {
  width: min(1620px, calc(100% - 300px));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.home-page .work-slider {
  left: 50%;
  width: min(1884px, calc(100vw - 20px));
  max-width: none;
  transform: translateX(-50%);
}

.section-dark {
  color: #fff;
  background: var(--color-ink);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 110px;
  align-items: start;
}

.copy p {
  margin: 0 0 18px;
}

.copy ul,
.copy ol,
.detail-copy ul,
.detail-copy ol {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.copy ul li,
.detail-copy ul li {
  position: relative;
  padding-left: 26px;
}

.copy ul li::before,
.detail-copy ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-blue);
}

.copy ol,
.detail-copy ol {
  counter-reset: copy-list;
}

.copy ol li,
.detail-copy ol li {
  position: relative;
  padding-left: 32px;
  counter-increment: copy-list;
}

.copy ol li::before,
.detail-copy ol li::before {
  content: counter(copy-list) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-title);
  font-weight: 800;
  color: var(--color-blue);
}

.section-title,
.section h2,
.band h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-title);
  font-size: 44px;
  line-height: 1.14;
  font-weight: 800;
}

.section .section-title:has(+ .home-slider) {
  margin-bottom: 40px;
}

.home-page .section-title,
.home-page .section h2,
.home-page .band h2 {
  font-size: 51px;
  line-height: 1.08;
  font-weight: 300;
  text-transform: uppercase;
}

.home-page .section-title strong,
.home-page .band h2 strong,
.home-page .section-title span {
  font-weight: 800;
}

.section-dark h2,
.band h2 {
  color: #fff;
}

.section-title span {
  color: var(--color-blue);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.section-head-stacked {
  display: block;
  margin-bottom: 78px;
}

/* Testata inline (titolo a sinistra, pulsante a destra). La regola era
   definita solo dentro le media query intermedie: senza la base, da
   1920px in su il contenitore restava display:block e impilava il
   pulsante sotto il titolo. */
.section-head-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 56px;
}

.section-head-stacked .section-title {
  margin-bottom: 70px;
}

.section-head-stacked p {
  max-width: 1390px;
  margin: 0 0 70px;
  font-size: 17px;
  line-height: 2.15;
  font-weight: 400;
}

.section-head.works-head p {
  max-width: 1420px;
}

.blog-head {
  align-items: center;
  margin-bottom: 76px;
}

.blog-head .section-title {
  margin-bottom: 0;
}

.blog-head .btn-small {
  min-width: 209px;
}

.section-head p {
  max-width: 620px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid var(--color-blue);
  border-radius: 6px;
  background: var(--color-blue);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-small {
  min-height: 43px;
  padding: 10px 34px;
  border-radius: 999px;
  font-size: 16px;
  text-transform: uppercase;
}

.btn-dark {
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.btn:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.btn-light {
  color: var(--color-ink);
  background: #fff;
  border-color: #fff;
}

.btn-ghost {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .72);
}

.text-link {
  color: var(--color-blue);
  font-weight: 800;
}

.service-grid,
.card-grid,
.two-cards,
.facts-grid {
  display: grid;
  gap: 24px;
}

/* Le griglie statiche non devono mai superare il proprio contenitore:
   alcune regole responsive le dimensionano in `100vw` e alle larghezze
   intermedie sfondavano il container, facendo tagliare i box.
   Gli slider (`.slider-track`) restano esclusi: devono essere piu' larghi
   del viewport per poter scorrere. */
.service-grid:not(.slider-track),
.card-grid:not(.slider-track),
.work-grid:not(.slider-track),
.related-services-grid:not(.slider-track),
.two-cards:not(.slider-track) {
  max-width: 100%;
}

.service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px;
}

.home-slider {
  position: relative;
}

.slider-viewport {
  overflow: hidden;
}

.slider-track {
  display: flex;
  gap: var(--slider-gap, 42px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x pan-y pinch-zoom;
  user-select: none;
}

.slider-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

.slider-track > * {
  flex: 0 0 calc((100% - (var(--visible-items, 4) - 1) * var(--slider-gap, 42px)) / var(--visible-items, 4));
  scroll-snap-align: start;
}

.slider-track a,
.slider-track img {
  -webkit-user-drag: none;
  user-select: none;
}

.slider-track.is-dragging a {
  pointer-events: none;
}

.services-section .home-slider {
  --visible-items: 3.5;
  --slider-gap: 50px;
}

.section .home-slider .card-grid {
  --visible-items: 3.5;
  --slider-gap: 42px;
}

.section .work-slider .card-grid {
  --visible-items: 3.5;
}

.home-slider .service-grid,
.home-slider .card-grid {
  grid-template-columns: none;
}

.service-card,
.feature-card {
  min-height: 492px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  padding: 30px;
  color: #fff;
  background-color: #202020;
  background-image:
    linear-gradient(180deg, rgba(38, 36, 81, .2), rgba(38, 36, 81, .86)),
    var(--card-image, none);
  border-radius: 0;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.service-card span,
.feature-card span {
  font-family: var(--font-title);
  font-size: 35px;
  line-height: 1.16;
  font-weight: 800;
  text-transform: uppercase;
}

.service-card b {
  width: 77px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-blue);
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 76px;
}

.slider-dots span,
.slider-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  background: var(--color-line);
  border-radius: 999px;
  cursor: pointer;
}

.slider-dots .is-active,
.slider-dots button.is-active {
  background: var(--color-blue);
}

.slider-arrow {
  position: absolute;
  top: calc(50% + 48px);
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: Arial, sans-serif;
  font-size: 76px;
  line-height: 1;
  cursor: pointer;
}

.home-page .slider-arrow {
  top: calc(100% - 58px);
  color: var(--color-ink);
  font-size: 86px;
  font-weight: 700;
}

.home-page .slider-arrow-prev {
  left: 96px;
}

.home-page .slider-arrow-next {
  right: 96px;
}

.slider-arrow-prev {
  left: -112px;
}

.slider-arrow-next {
  right: -112px;
}

.band {
  padding: 150px 0;
}

.band-blue {
  color: #fff;
  background: var(--color-blue);
}

.band-photo {
  width: 100%;
  margin: 0 auto;
  background: url("../images/figma/band-logistica-figma-opt.jpg") center / cover no-repeat;
  background: image-set(
      url("../images/figma/band-logistica-figma.webp") type("image/webp"),
      url("../images/figma/band-logistica-figma-opt.jpg") type("image/jpeg")
    ) center / cover no-repeat;
}

.band-photo .container {
  width: min(1420px, calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
  min-height: 396px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.band-photo p {
  max-width: 1420px;
  margin: 68px 0 68px;
  font-size: 16px;
  line-height: 2.35;
  font-weight: 700;
}

.two-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.feature-card {
  min-height: 814px;
  justify-content: center;
  padding: 154px 100px 126px;
}

.feature-recinzioni {
  background: url("../images/figma/feature-recinzioni-figma-opt.jpg") center / cover no-repeat;
  background: image-set(
      url("../images/figma/feature-recinzioni-figma.webp") type("image/webp"),
      url("../images/figma/feature-recinzioni-figma-opt.jpg") type("image/jpeg")
    ) center / cover no-repeat;
}

.feature-cancelli {
  background: url("../images/figma/feature-cancelli-figma-opt.jpg") center / cover no-repeat;
  background: image-set(
      url("../images/figma/feature-cancelli-figma.webp") type("image/webp"),
      url("../images/figma/feature-cancelli-figma-opt.jpg") type("image/jpeg")
    ) center / cover no-repeat;
}

.feature-card p {
  max-width: 700px;
  margin: 0;
  font-size: 20px;
  line-height: 1.85;
  font-weight: 400;
}

.feature-card span {
  font-size: 40px;
  line-height: 1.12;
}

.feature-card b {
  min-width: 260px;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 9px 25px;
  color: #fff;
  background: var(--color-blue);
  border-radius: 999px;
  font-size: 16px;
  text-transform: uppercase;
}

.experience-section {
  padding-top: 132px;
  padding-bottom: 116px;
}

.experience-section .split {
  display: block;
}

.experience-section .section-title {
  margin-bottom: 70px;
}

.experience-section .copy {
  max-width: 1390px;
}

.experience-section .copy p {
  font-size: 18px;
  line-height: 2.15;
  font-weight: 400;
}

.experience-section .btn-small {
  min-width: 236px;
  margin-top: 42px;
}

.wide-image {
  min-height: 580px;
  /* Il soggetto (il silo) sta sulla sinistra della foto: con
     background-position center, su schermi molto larghi o con un
     rapporto d'aspetto diverso da quello della foto, cover lo tagliava
     via. "left center" mantiene sempre visibile quella parte. */
  background: url("../images/figma/wide-fence-figma-opt.jpg") left center / cover no-repeat;
  background: image-set(
      url("../images/figma/wide-fence-figma.webp") type("image/webp"),
      url("../images/figma/wide-fence-figma-opt.jpg") type("image/jpeg")
    ) left center / cover no-repeat;
}

/* Foto dedicata per mobile (inquadratura verticale, non il ritaglio
   panoramico desktop): riguarda solo le pagine dove .wide-image non ha
   una propria foto inline (qui la home, "Recinzione industriale
   Futurtek") - le altre pagine impostano il proprio background-image
   inline, che vince comunque su questa regola. */
@media (max-width: 760px) {
  .wide-image {
    background: url("../images/figma/wide-fence-figma-mobile.jpg") center / cover no-repeat;
    background: image-set(
        url("../images/figma/wide-fence-figma-mobile.webp") type("image/webp"),
        url("../images/figma/wide-fence-figma-mobile.jpg") type("image/jpeg")
      ) center / cover no-repeat;
  }
}

.card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
}

.content-card {
  min-height: 100%;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 0;
  overflow: hidden;
}

.content-card.compact {
  min-height: 240px;
}

.card-media {
  display: block;
  min-height: 320px;
  background: linear-gradient(135deg, #d7e3ec, #8fa4b5);
}

.image-fill {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.article-image {
  margin-bottom: 34px;
}

.card-body {
  padding: 26px;
}

.card-body h2,
.card-body h3 {
  margin: 0 0 12px;
  color: var(--color-ink);
  font-family: var(--font-title);
  font-size: 24px;
  line-height: 1.2;
}

.portfolio-card {
  color: #fff;
  background: #202020;
  border: 0;
}

.portfolio-card .card-media {
  min-height: 360px;
  background-color: #202020;
  filter: grayscale(1) brightness(.38);
}

.portfolio-card .card-body {
  position: relative;
  min-height: 150px;
  margin-top: -125px;
  padding: 30px;
}

.portfolio-card .card-body h3 {
  color: #fff;
  font-size: 34px;
  line-height: 1.28;
  text-transform: uppercase;
}

.detail-intro {
  padding-top: 30px;
  padding-bottom: 0;
}

/* .detail-intro ha padding-bottom:0 perche' di norma e' seguita dal
   prefooter (che ha gia' il proprio spazio sopra). Quando invece la
   segue una fascia foto a tutta larghezza, serve un respiro esplicito
   perche' il testo non tocchi l'immagine. */
.detail-intro + .wide-image {
  margin-top: 60px;
}

.detail-realizzazione-page .page-hero-photo {
  min-height: 400px;
  background-position: center;
}

/* All detail templates reuse the dark navigation bar from the Figma detail. */
.detail-page .fascia_menu {
  background: var(--color-ink);
  border-bottom: 0;
}

.detail-page .site-logo,
.detail-page .nav-link,
.detail-page .nav-parent {
  color: #fff;
}

.detail-page .logo-image-blue {
  display: none;
}

.detail-page .logo-image-white {
  display: block;
}

.detail-page .icon-link {
  background: transparent;
}

.detail-page .nav-link.is-active,
.detail-page .nav-link:hover {
  color: #fff;
}

.detail-realizzazione-intro {
  padding-top: 30px;
}

.detail-copy,
.detail-blog-copy {
  max-width: 1420px;
}

/* Titolo H1 unico per tutte le pagine di dettaglio, allineato al frame
   Figma "dettaglio_realizzazioni" (unico riferimento disponibile per i
   dettagli, come da regola in docs/design-system.md). */
.detail-copy h1,
.detail-realizzazione-copy h1,
.detail-blog-copy h1 {
  margin: 0 0 50px;
  color: var(--color-ink);
  font-family: var(--font-title);
  font-size: 50px;
  line-height: 1.36;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-copy h1 strong,
.detail-copy h2 strong,
.detail-copy p strong {
  font-weight: 800;
}

.detail-copy p {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 2.05;
}

.detail-copy > .btn {
  margin-top: 38px;
  margin-bottom: 64px;
}

.article-figure {
  margin: 60px 0;
}

.article-figure img {
  display: block;
  width: 100%;
  max-height: 720px;
  object-fit: cover;
}

.article-figure figcaption {
  margin-top: 12px;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  opacity: .68;
}

.detail-blog-intro {
  min-height: 0;
  padding-top: 30px;
  padding-bottom: 120px;
}

.detail-blog-copy .article-figure {
  margin: 70px 0;
}

.detail-blog-copy .article-figure img {
  height: 640px;
}

.detail-blog-copy .detail-blog-back {
  margin: 70px 0 0;
}

.detail-blog-copy .detail-blog-back .btn {
  min-width: 268px;
  min-height: 42px;
  font-family: var(--font-title);
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.detail-realizzazione-copy p,
.detail-blog-copy p {
  max-width: 1420px;
  margin-bottom: 28px;
  font-family: "Inter", var(--font-body);
  font-size: 16px;
  line-height: 2.375;
  font-weight: 400;
}

.detail-realizzazione-copy > p:first-of-type {
  margin-bottom: 28px;
  font-weight: 400;
}

/* Gerarchia titoli per il contenuto editoriale (.detail-copy, agganciato
   al futuro check-editor/CMS): prima h2 e h3 condividevano la stessa
   regola (nessuna differenza visiva) e h4/h5/h6 non avevano alcuno stile,
   ricadendo sui default del browser - da qui l'incoerenza segnalata dal
   cliente su titoli/paragrafi/liste. Scala unica e coerente, in ordine
   decrescente di peso visivo. */
.detail-copy h2,
.detail-blog-copy h2 {
  margin: 56px 0 18px;
  color: var(--color-ink);
  font-family: var(--font-title);
  font-size: 34px;
  line-height: 1.18;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-copy h3,
.detail-blog-copy h3 {
  margin: 48px 0 16px;
  color: var(--color-ink);
  font-family: var(--font-title);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-copy h4,
.detail-blog-copy h4 {
  margin: 40px 0 14px;
  color: var(--color-ink);
  font-family: var(--font-title);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;
}

.detail-copy h5,
.detail-blog-copy h5 {
  margin: 32px 0 12px;
  color: var(--color-ink);
  font-family: var(--font-title);
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
}

.detail-copy h6,
.detail-blog-copy h6 {
  margin: 28px 0 10px;
  color: var(--color-blue);
  font-family: var(--font-title);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.detail-copy a:not(.btn),
.detail-blog-copy a:not(.btn) {
  color: var(--color-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.detail-copy a:not(.btn):hover,
.detail-blog-copy a:not(.btn):hover {
  text-decoration: none;
}

.detail-gallery {
  padding-top: 96px;
  padding-bottom: 82px;
  overflow: hidden;
}

.detail-realizzazione-gallery {
  padding-top: 96px;
  padding-bottom: 110px;
}

.detail-gallery-strip {
  width: min(1920px, 100vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 800px minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  position: relative;
}

.detail-gallery-main {
  min-height: 600px;
}

.detail-gallery-side {
  min-height: 525px;
  opacity: .88;
}

.detail-realizzazione-gallery .detail-gallery-strip {
  display: block;
  /* Stessa interpolazione di altezza di [data-gallery-slot="current"]
     qui sotto (lo strip deve essere alto quanto la foto piu' alta che
     contiene): senza, sotto i 1920px restava spazio vuoto man mano che
     le foto si rimpicciolivano in altezza. */
  height: clamp(262px, calc(262px + 338px * (100vw - 431px) / 1489px), 600px);
}

.detail-realizzazione-gallery .detail-gallery-main,
.detail-realizzazione-gallery .detail-gallery-side {
  position: absolute;
  background-position: center;
  background-size: cover;
  transform-origin: center;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .45s ease;
}

/* left/width in percentuale della scena di riferimento (1920px, la
   larghezza di .detail-gallery-strip) invece che in px fissi: sotto i
   1920px lo strip si restringe (width:min(1920px,100vw)) ma con valori
   assoluti i figli restavano alla posizione/larghezza pensata per 1920px,
   traboccando dal contenitore piu' stretto (immagine "next" tagliata a
   quasi ogni risoluzione reale). Le percentuali seguono automaticamente
   la larghezza reale dello strip.

   Da 1920px in giu' fino a 431px (poco sopra il layout mobile a foto
   singola, sotto i 430px) le proporzioni centro/laterali non restano
   fisse ma si interpolano linearmente in base a 100vw: scendendo di
   risoluzione la foto centrale si allarga progressivamente (41.6667% ->
   70%) e quelle laterali si restringono (36.4583% -> 20%), su richiesta
   esplicita. Stessa interpolazione anche per height/top (600px -> 262px
   per la foto centrale, 525px -> 225px e top 37.5px -> 18px per quelle
   laterali): sono esattamente i valori del layout mobile Figma qui sotto
   (<=430px), cosi' la transizione arriva a quella fascia senza scatti
   invece di restare piatta in altezza mentre solo la larghezza cambia.
   clamp() blocca il valore ai due estremi fuori da [431,1920] (sopra i
   1920px lo strip e' comunque fisso a 1920px). */
.detail-realizzazione-gallery [data-gallery-slot="previous"] {
  left: clamp(0%, calc(2.6042% * (100vw - 431px) / 1489px), 2.6042%);
  top: clamp(18px, calc(18px + 19.5px * (100vw - 431px) / 1489px), 37.5px);
  width: clamp(20%, calc(20% + 16.4583% * (100vw - 431px) / 1489px), 36.4583%);
  height: clamp(225px, calc(225px + 300px * (100vw - 431px) / 1489px), 525px);
}

.detail-realizzazione-gallery [data-gallery-slot="current"] {
  left: clamp(15%, calc(15% + 14.1667% * (100vw - 431px) / 1489px), 29.1667%);
  top: 0;
  z-index: 1;
  width: clamp(41.6667%, calc(70% - 28.3333% * (100vw - 431px) / 1489px), 70%);
  height: clamp(262px, calc(262px + 338px * (100vw - 431px) / 1489px), 600px);
}

.detail-realizzazione-gallery [data-gallery-slot="next"] {
  left: clamp(60.9375%, calc(80% - 19.0625% * (100vw - 431px) / 1489px), 80%);
  top: clamp(18px, calc(18px + 19.5px * (100vw - 431px) / 1489px), 37.5px);
  width: clamp(20%, calc(20% + 16.4583% * (100vw - 431px) / 1489px), 36.4583%);
  height: clamp(225px, calc(225px + 300px * (100vw - 431px) / 1489px), 525px);
}

/* .detail-gallery-main/.detail-gallery-side hanno un min-height fisso
   (600/525px, 520px sotto i 1180px) pensato per altre gallerie che
   condividono la stessa classe: qui vincolava dal basso l'altezza appena
   interpolata sopra, che restava quindi bloccata a 520/525px invece di
   scendere fino a 262/225px. Le regole piu' specifiche qui sotto
   riportano il minimo agli stessi estremi dell'interpolazione. */
.detail-realizzazione-gallery .detail-gallery-main {
  min-height: 262px;
}

.detail-realizzazione-gallery .detail-gallery-side {
  min-height: 225px;
}

.detail-realizzazione-gallery .detail-gallery-strip.is-resetting > [data-gallery-slot] {
  transition: none;
}

.detail-realizzazione-gallery .detail-gallery-strip.is-moving-next > [data-gallery-slot="previous"],
.detail-realizzazione-gallery .detail-gallery-strip.is-moving-prev > [data-gallery-slot="next"] {
  opacity: 0;
}

.detail-realizzazione-gallery .detail-gallery-strip.is-moving-next > [data-gallery-slot="previous"] {
  /* -560px espresso come % della propria width (700px): scala con lo
     strip invece di restare un offset fisso pensato per i 1920px. */
  transform: translateX(-80%) scale(.875);
}

.detail-realizzazione-gallery .detail-gallery-strip.is-moving-prev > [data-gallery-slot="next"] {
  transform: translateX(80%) scale(.875);
}

.detail-realizzazione-gallery .detail-gallery-strip.is-moving-next > [data-gallery-slot="current"] {
  z-index: 2;
  /* -560px come % della propria width (800px). */
  transform: translateX(-70%) scale(.875);
}

.detail-realizzazione-gallery .detail-gallery-strip.is-moving-next > [data-gallery-slot="next"] {
  z-index: 3;
  transform: translateX(-80%) scale(1.142857);
}

.detail-realizzazione-gallery .detail-gallery-strip.is-moving-prev > [data-gallery-slot="current"] {
  z-index: 2;
  transform: translateX(70%) scale(.875);
}

.detail-realizzazione-gallery .detail-gallery-strip.is-moving-prev > [data-gallery-slot="previous"] {
  z-index: 3;
  transform: translateX(80%) scale(1.142857);
}

.detail-realizzazione-gallery .detail-gallery-main::before,
.detail-realizzazione-gallery .detail-gallery-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 36, 81, .16), rgba(38, 36, 81, .52));
}

.detail-realizzazione-gallery .detail-gallery-main::after,
.detail-realizzazione-gallery .detail-gallery-side::after {
  content: none;
}

.detail-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 26px;
  height: 42px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  font-size: 0;
  transform: translateY(-50%);
}

.detail-gallery-arrow-prev {
  /* 610px era un offset fisso pensato per i 1920px di progetto (esattamente
     l'inset di 50px dal bordo sinistro dell'immagine centrale, gia' in %
     sopra): in % dello strip resta ancorato allo stesso bordo a qualunque
     larghezza del contenitore, invece di scollarsene sotto i 1920px.
     Il bordo dell'immagine centrale ora si sposta progressivamente (vedi
     [data-gallery-slot="current"] sopra): stesso inset di 2.6042%
     interpolato allo stesso modo, cosi' la freccia resta sempre ancorata
     al bordo reale della foto, qualunque sia la sua larghezza attuale. */
  left: clamp(17.6042%, calc(17.6042% + 14.1666% * (100vw - 431px) / 1489px), 31.7708%);
  background-image: url("../images/figma/detail-gallery-arrow-left-figma.svg");
}

.detail-gallery-arrow-next {
  right: clamp(17.6042%, calc(17.6042% + 14.1666% * (100vw - 431px) / 1489px), 31.7708%);
  background-image: url("../images/figma/detail-gallery-arrow-right-figma.svg");
}

/* Mobile stretto (frame Figma 56:757, "Rectangle 24" a 390px): valori in
   px assoluti presi 1:1 dal frame (previous/next restano nel documento,
   posizionati fuori dai bordi della foto corrente - da qui i valori
   negativi/oltre-larghezza - non van tolti dal DOM con display:none,
   verificato con l'audit automatico su documentX/width/height). Lo strip
   e' reso "full-bleed" (100vw, vedi sopra) cosi' la sua origine coincide
   col bordo pagina e questi "left" possono usare direttamente i valori
   assoluti del frame Figma, senza doverli ricalcolare per un padding del
   contenitore.
   "current" NON e' a filo col bordo dello strip (left:0, versione
   precedente): quel margine e' esattamente cio' che lascia intravedere
   un piccolo scorcio delle foto laterali ai due bordi, come nel frame
   Figma - a filo bordo current copriva tutta la larghezza visibile e lo
   scorcio spariva del tutto. overflow:hidden nasconde il resto delle
   foto laterali (molto piu' larghe della sola porzione visibile). */
@media (max-width: 430px) {
  .detail-realizzazione-gallery .detail-gallery-strip {
    height: 262px;
    overflow: hidden;
    /* Una regola per la fascia <=1180px (width:min(100% - 64px,
       var(--container))) restringeva lo strip a 326px invece dei 390px
       pieni del frame Figma: con quel margine current copriva l'intera
       finestra visibile e lo scorcio delle foto laterali spariva del
       tutto, anche con le coordinate esatte di Figma sotto. "Full-bleed"
       per uscire dal padding del contenitore ed estendersi ai bordi
       reali del viewport, indipendentemente da quanto e' largo il
       genitore. */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .detail-realizzazione-gallery .detail-gallery-side {
    display: block;
  }

  .detail-realizzazione-gallery [data-gallery-slot="previous"] {
    left: -260px;
    top: 18px;
    width: 300px;
    height: 225px;
    min-height: 0;
  }

  .detail-realizzazione-gallery [data-gallery-slot="current"] {
    left: 20px;
    top: 0;
    width: 350px;
    height: 262px;
    min-height: 0;
  }

  .detail-realizzazione-gallery [data-gallery-slot="next"] {
    left: 350px;
    top: 18px;
    width: 300px;
    height: 225px;
    min-height: 0;
  }

  .detail-realizzazione-gallery .detail-gallery-arrow-prev {
    left: 31px;
  }

  .detail-realizzazione-gallery .detail-gallery-arrow-next {
    right: 31px;
  }
}

/* Tra 431 e 1180px la coverflow percentuale (definita sopra, valida da
   1920px in giu') resta a 3 foto invece di saltare alla versione a foto
   singola pensata solo per gli schermi piu' stretti di sopra. */
@media (min-width: 431px) and (max-width: 1180px) {
  .detail-realizzazione-gallery .detail-gallery-side {
    display: block;
  }
}

.related-services-section {
  padding-top: 56px;
  padding-bottom: 74px;
}

.detail-related-services {
  padding-top: 30px;
  padding-bottom: 100px;
}

.related-services-section .section-title {
  margin-bottom: 80px;
  font-size: 48px;
  line-height: 1;
  text-transform: uppercase;
}

.detail-related-services .section-title {
  margin-bottom: 40px;
  font-size: 35px;
  line-height: 1.36;
  font-weight: 800;
  text-transform: uppercase;
}

.related-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 270px);
  justify-content: space-between;
  gap: 42px;
}

.detail-related-services .related-services-grid {
  grid-template-columns: repeat(4, 270px);
  gap: 113px;
  justify-content: start;
}

.related-service-card {
  display: block;
  color: var(--color-ink);
}

.related-service-icon {
  width: 270px;
  height: 270px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  background: var(--color-blue);
  color: #fff;
  font-family: var(--font-title);
  font-size: 58px;
  font-weight: 800;
  position: relative;
}

.related-service-icon svg {
  width: 200px;
  height: 200px;
}

.related-service-icon img {
  width: 200px;
  height: 200px;
  display: block;
}

.related-service-card strong {
  min-height: 68px;
  display: block;
  font-family: var(--font-title);
  font-size: 25px;
  line-height: 1.36;
  font-weight: 400;
  text-transform: none;
}

.related-service-card em {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--color-blue);
  font-style: normal;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 400;
}

.related-service-card em::after {
  content: "›";
  color: currentColor;
  font-size: 24px;
  line-height: 1;
}

.inline-cta {
  padding-top: 26px;
  padding-bottom: 84px;
}

.detail-inline-cta {
  padding-top: 0;
  padding-bottom: 130px;
}

.inline-cta h2 {
  max-width: 1420px;
  margin: 0 0 40px;
  color: var(--color-blue-light);
  font-family: var(--font-title);
  font-size: 41px;
  line-height: 1;
  font-weight: 300;
  text-transform: uppercase;
}

.detail-inline-cta .container {
  min-height: 123px;
}

.detail-inline-cta h2 {
  margin-bottom: 38px;
  color: var(--color-blue-light);
  font-size: 30px;
  line-height: 1.36;
  font-weight: 300;
  text-transform: none;
}

.inline-cta h2 strong {
  font-weight: 800;
}

.detail-inline-cta .btn-small {
  min-width: 217px;
}

.section-head-inline {
  align-items: center;
  margin-bottom: 80px;
}

.detail-related-work {
  padding-top: 0;
  height: 870px;
  padding-bottom: 0;
  overflow: hidden;
}

.section-head-inline .section-title {
  font-size: 48px;
  line-height: 1;
  text-transform: uppercase;
}

.detail-related-work .section-head-inline {
  height: 68px;
  margin-bottom: 35px;
}

.detail-related-work .section-head-inline .section-title {
  width: max-content;
  max-width: none;
  height: 68px;
  font-size: 50px;
  line-height: 68px;
  font-weight: 300;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-related-work .section-head-inline .section-title strong {
  font-weight: 800;
}

.detail-related-work .section-head-inline .btn-small {
  min-width: 331px;
  height: 42px;
  min-height: 42px;
  border-radius: 50px;
}

.work-card {
  position: relative;
  min-height: 492px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  padding: 30px;
  color: #fff;
  background-color: #202020;
  background-image: var(--card-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Overlay scuro neutro come da Figma (nero 20%->50%), non la tinta
     blu-navy usata in precedenza (arrivava fino all'86% di opacità e
     copriva troppo la foto). */
  background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .5));
  pointer-events: none;
}

.work-card > * {
  position: relative;
  z-index: 1;
}

.work-card :is(span, h3) {
  max-width: 420px;
  font-family: var(--font-title);
  font-size: 35px;
  line-height: 1.16;
  font-weight: 800;
  text-transform: uppercase;
}

.work-card b {
  width: 77px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-blue);
}

.work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px;
}

.detail-related-work .work-grid {
  width: 2182px;
  max-width: none;
  grid-template-columns: repeat(6, 508px);
  gap: 50px;
  margin-left: -165px;
}

.work-grid .work-card {
  min-height: 508px;
}

.detail-related-work .work-grid .work-card {
  width: 508px;
  height: 508px;
  min-height: 508px;
  flex: 0 0 508px;
  gap: 10px;
}

.detail-related-work .work-card :is(span, h3) {
  width: 448px;
  max-width: 448px;
  font-size: 35px;
  line-height: 48px;
  font-weight: 700;
}

.detail-related-work .work-card b {
  width: 76px;
  height: 26px;
  min-height: 26px;
  margin: 0;
  border-radius: 50px;
  font-size: 24px;
  line-height: 24px;
}

.detail-work-slider {
  width: 2182px;
  margin-left: -165px;
}

.detail-work-slider .slider-viewport {
  width: 2182px;
}

.detail-work-slider .work-grid {
  width: auto;
  margin-left: 0;
  --visible-items: 4;
  --slider-gap: 50px;
}

.detail-work-slider .slider-dots {
  width: 94px;
  margin-top: 76px;
  margin-left: 863px;
  justify-content: flex-start;
  gap: 20px;
}

.detail-work-slider .slider-dots button {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 4px;
}

.detail-work-slider .slider-arrow {
  top: 568px;
  width: 26px;
  height: 50px;
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 0;
}

.detail-work-slider .slider-arrow-prev {
  left: 100px;
  background-image: url("../images/figma/works-arrow-left-desktop-figma.svg");
}

.detail-work-slider .slider-arrow-next {
  left: 1694px;
  right: auto;
  background-image: url("../images/figma/works-arrow-right-desktop-figma.svg");
}

/* Tra 1181px e 1919px valevano solo i valori fissi del frame Figma
   (freccia successiva a `left: 1694px`), pensati per una riga di 4
   card che qui non esiste (le realizzazioni reali sono 3): restava
   uno spazio vuoto dopo l'ultima card e le frecce sembravano scollate
   dal contenuto. Qui le frecce vengono ancorate ai bordi dello slider. */
@media (min-width: 1181px) and (max-width: 1919px) {
  .detail-work-slider .slider-arrow-prev {
    left: -34px;
  }

  .detail-work-slider .slider-arrow-next {
    left: auto;
    right: -34px;
  }
}

/* Da 1920px in su: il frame Figma prevede una riga da 4 card (2182px),
   ma le realizzazioni reali sono solo 3 (1624px). La home usa lo stesso
   riquadro da 2182px con `left: -165px` e non si vede perché i lavori
   sono ripetuti 3 volte (9 card, riempiono tutto lo spazio); qui invece
   restava vuoto dopo l'ultima card. Manteniamo lo stesso offset
   `-165px` della home (le card partono allineate) ma dimensioniamo il
   box sul contenuto reale (1624px) invece che sulle 4 card previste. */
@media (min-width: 1920px) {
  .detail-work-slider {
    width: 1624px;
    margin-left: -165px;
  }

  .detail-work-slider .slider-viewport {
    width: 100%;
  }

  .detail-work-slider .slider-arrow-prev {
    left: -34px;
  }

  .detail-work-slider .slider-arrow-next {
    left: auto;
    right: -34px;
  }

  .detail-work-slider .slider-dots {
    margin-left: 765px;
  }
}

.pill-link {
  display: inline-grid;
  min-width: 77px;
  height: 29px;
  place-items: center;
  margin-top: 8px;
  color: #fff;
  background: var(--color-blue);
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
}

.blog-preview {
  padding-top: 58px;
}

.blog-feature {
  max-width: 1420px;
}

.blog-feature .card-media {
  min-height: 530px;
}

.blog-feature h3 {
  margin: 24px 0 0;
  color: var(--color-ink);
  font-family: var(--font-title);
  font-size: 36px;
  text-transform: uppercase;
}

.blog-feature h3 a {
  color: inherit;
}

/* Card articolo per la griglia di listino del blog: stessa struttura
   .card-grid gia' usata da carpenteria-metallica.php e realizzazioni.php
   (3 colonne desktop, responsive gia' tarato), ma con il trattamento
   "editoriale" del blocco blog in home (foto + titolo scuro sotto),
   non l'overlay bianco su foto di .work-card, pensato per i progetti. */
.blog-list-item {
  display: block;
  color: inherit;
}

.blog-list-image {
  display: block;
  min-height: 240px;
  margin-bottom: 20px;
  background-color: #202020;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blog-list-item h3 {
  margin: 0 0 4px;
  color: var(--color-ink);
  font-family: var(--font-title);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
  text-transform: uppercase;
}

.blog-list-item .pill-link {
  margin-top: 10px;
}

.card-body p {
  margin: 0;
}

.facts-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.facts-grid div {
  padding: 30px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.facts-grid strong {
  display: block;
  color: var(--color-blue);
  font-family: var(--font-title);
  font-size: 44px;
  line-height: 1;
}

.facts-grid span {
  display: block;
  margin-top: 10px;
  font-weight: 700;
}

.contact-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 64px;
}

.contact-map {
  padding: 0;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 450px;
}

@media (max-width: 760px) {
  .contact-map iframe {
    height: 320px;
  }
}

.contact-form {
  display: grid;
  gap: 18px;
}

.contact-form label {
  display: grid;
  gap: 8px;
  font-weight: 700;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 14px 16px;
  font: inherit;
}

.site-footer {
  color: #fff;
  background: var(--color-ink);
}

.prefooter {
  padding: 134px 0 94px;
}

.prefooter .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

.prefooter h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-title);
  font-size: 30px;
  line-height: 1.35;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--color-blue-light);
}

.prefooter p {
  max-width: 1420px;
  margin: 42px auto 44px;
  color: #fff;
  font-size: 16px;
  line-height: 2.35;
  font-weight: 800;
}

.prefooter .btn {
  min-width: 218px;
  min-height: 43px;
  border-color: var(--color-blue);
  background: var(--color-blue);
  color: #fff;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.footer-cta {
  padding: 82px 0;
  background: var(--color-ink);
}

.footer-cta-inner {
  display: grid;
  grid-template-columns: 1.45fr 1fr auto;
  gap: 32px;
  align-items: center;
}

.footer-cta h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 36px;
  line-height: 1.18;
}

.footer-cta h2 span {
  color: var(--color-blue-light);
}

.footer-cta p {
  margin: 0;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.25fr 1.1fr 1.1fr 1.7fr;
  gap: 76px;
  padding: 52px 0 58px;
}

.footer-logo .logo-image {
  width: 234px;
}

.home-page .footer-logo .logo-image-blue {
  display: block;
}

.footer-col h3 {
  margin: 0 0 14px;
  font-family: var(--font-title);
  color: var(--color-blue-light);
  font-size: 14px;
  line-height: 2;
  font-weight: 800;
  text-transform: uppercase;
}

.footer-col p {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 2;
  font-weight: 500;
}

.footer-col a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 73px);
  gap: 20px;
  align-items: start;
}

.cert-grid span {
  display: grid;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

.cert-grid b {
  width: 73px;
  height: 73px;
  display: block;
  background: #d9d9d9;
}

.footer-bottom {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  text-align: center;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom span {
  display: inline-block;
  margin: 0 10px;
}

@media (max-width: 1180px) {
  .home-intro-logo-motion {
    width: min(720px, 74vw);
  }

  .site-nav {
    position: fixed;
    top: 96px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 39;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 32px;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 24px 40px rgba(20, 20, 36, .14);
  }

  .site-nav.is-open {
    display: flex;
    animation: nav-panel-in .22s ease-out;
  }

  @keyframes nav-panel-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .home-page .site-nav {
    background: #fff;
  }

  .home-page .site-nav .nav-link {
    color: var(--color-ink);
  }

  .nav-link {
    padding: 18px 0;
    font-size: 17px;
    font-weight: 700;
    border-bottom: 1px solid rgba(38, 36, 81, .1);
  }

  .nav-link.is-active {
    color: var(--color-blue);
  }

  .nav-item {
    width: 100%;
  }

  .nav-item.has-submenu {
    border-bottom: 1px solid rgba(38, 36, 81, .1);
  }

  .nav-parent {
    width: 100%;
    text-align: left;
    padding: 18px 0 10px;
    font-size: 17px;
    font-weight: 700;
    border-bottom: 0;
  }

  .submenu {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 14px 18px;
    border: 0;
    box-shadow: none;
    transform: none;
  }

  .submenu a {
    padding: 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: rgba(38, 36, 81, .68);
  }

  .nav-cta {
    display: flex;
    justify-content: center;
    margin-top: 28px;
    width: 100%;
  }

  .menu-toggle {
    display: inline-grid;
  }

  .service-grid,
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-hero .container {
    width: min(var(--container), calc(100% - 96px));
  }

  .detail-copy h1 {
    font-size: 52px;
  }

  .detail-gallery-strip {
    width: min(100% - 64px, var(--container));
    grid-template-columns: 1fr;
  }

  .detail-realizzazione-gallery .detail-gallery-strip {
    width: min(100% - 64px, var(--container));
    grid-template-columns: 1fr;
  }

  .detail-gallery-side {
    display: none;
  }

  .detail-gallery-main {
    min-height: 520px;
  }

  .related-services-grid {
    grid-template-columns: repeat(2, 270px);
    justify-content: start;
  }

  .detail-related-services .related-services-grid {
    grid-template-columns: repeat(2, 270px);
    gap: 64px;
    justify-content: start;
  }

  .detail-work-slider {
    width: 100%;
    margin-left: 0;
  }

  .detail-work-slider .slider-viewport {
    width: 100%;
  }

  .detail-work-slider .work-grid {
    --visible-items: 2.5;
    --slider-gap: 42px;
  }

  .detail-work-slider .slider-dots {
    width: 100%;
    margin-left: 0;
  }

  .detail-work-slider .slider-arrow-prev {
    left: -34px;
  }

  .detail-work-slider .slider-arrow-next {
    left: auto;
    right: -34px;
  }

  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-section .home-slider,
  .section .home-slider .card-grid {
    --visible-items: 2;
  }

  .slider-arrow-prev {
    left: -34px;
  }

  .slider-arrow-next {
    right: -34px;
  }

  .prefooter .container,
  .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .home-intro-logo-motion {
    width: min(310px, 78vw);
  }

  .container,
  .container_big {
    width: min(100% - 32px, var(--container));
  }

  .header-inner {
    min-height: 78px;
    gap: 14px;
  }

  .home-page .header-inner {
    width: min(100% - 32px, var(--container));
    min-height: 78px;
    align-items: center;
    padding-top: 0;
  }

  .site-nav {
    top: 78px;
  }

  .logo-text {
    font-size: 20px;
  }

  .home-page .logo-text {
    font-size: 22px;
  }

  .icon-link {
    display: none;
  }

  .hero-photo {
    min-height: 680px;
  }

  .home-claim-band {
    padding: 120px 0 72px;
  }

  .home-claim-band .container {
    width: min(100% - 32px, var(--container));
  }

  .home-claim-band p {
    height: auto;
  }

  .home-claim-band h2 {
    font-size: 24px;
  }

  .hero-inner {
    left: 16px;
    right: 16px;
    bottom: -120px;
    width: auto;
    padding: 42px 24px 36px;
    transform: none;
  }

  .hero h1,
  .page-hero h1 {
    font-size: 38px;
  }

  .hero p {
    font-size: 14px;
  }

  .page-hero {
    padding: 82px 0 70px;
  }

  .page-hero-photo {
    min-height: 200px;
    padding: 0;
  }

  .section {
    padding: 64px 0;
  }

  .intro-section {
    padding-top: 74px;
  }

  .intro-section .split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .intro-section .section-title,
  .intro-section .copy {
    max-width: none;
  }

  .section-title,
  .section h2,
  .band h2 {
    font-size: 32px;
  }

  .breadcrumb {
    margin-bottom: 42px;
  }

  .detail-copy h1 {
    margin-bottom: 30px;
    font-size: 40px;
    line-height: 1.2;
  }

  .detail-copy p {
    font-size: 16px;
    line-height: 1.9;
  }

  .detail-copy h2 {
    font-size: 24px;
  }

  .detail-copy h3 {
    font-size: 21px;
  }

  .detail-copy h4 {
    font-size: 19px;
  }

  .detail-copy h5 {
    font-size: 17px;
  }

  .detail-gallery {
    padding-top: 62px;
    padding-bottom: 54px;
  }

  .detail-gallery-strip {
    width: min(100% - 40px, var(--container));
  }

  .detail-realizzazione-gallery {
    padding-top: 50px;
    padding-bottom: 40px;
  }

  /* Sotto i 1180px esisteva qui una "mini coverflow" a coordinate fisse
     (left:-280px/330px, larghezze 300/350px) scollegata dalla larghezza
     reale del contenitore (min(100% - 40px, var(--container))): la foto
     "precedente" finiva spinta fuori dal contenitore, "corrente" e
     "successiva" si sovrapponevano. Rimossa: la coverflow percentuale
     definita sopra (left/width in % dello strip, frecce comprese) scala
     gia' correttamente da 1920px fino a 761px senza bisogno di una
     versione dedicata - esattamente il "adatta il desktop" richiesto,
     non un layout diverso. Sotto i 761px subentra la versione mobile a
     foto singola (vedi piu' in basso).

     Una regola generica altrove (.detail-gallery-side, non specifica di
     questa galleria) nasconde pero' le foto laterali gia' sotto i 1180px,
     tagliando bruscamente la coverflow un centinaio di pixel prima del
     vero breakpoint mobile del resto del sito (760px): la si ripristina
     in un blocco dedicato subito dopo questo, scoperto esplicitamente a
     761-1180px per non entrare in conflitto (stessa specificita') con la
     regola che nasconde le foto laterali sotto i 760px. */

  .related-services-section .section-title,
  .section-head-inline .section-title,
  .inline-cta h2 {
    font-size: 34px;
    line-height: 1.18;
  }

  .related-services-grid {
    grid-template-columns: 270px;
    justify-content: center;
    gap: 50px;
  }

  .detail-related-services .related-services-grid {
    grid-template-columns: 270px;
    gap: 50px;
    justify-content: center;
  }

  .inline-cta {
    padding-top: 34px;
    padding-bottom: 64px;
  }

  .split,
  .contact-layout,
  .prefooter .container,
  .footer-main {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .section-head {
    display: block;
  }

  .service-grid,
  .card-grid,
  .work-grid,
  .two-cards,
  .facts-grid {
    grid-template-columns: 1fr;
  }

  .blog-list-image {
    min-height: 210px;
  }

  .band-photo {
    width: 100%;
  }

  .band-photo .container {
    width: min(100% - 32px, var(--container));
    min-height: 520px;
    margin: 0 auto;
  }

  .band-photo h2 {
    max-width: 300px;
    font-size: 34px;
  }

  .services-section .home-slider,
  .section .home-slider .card-grid {
    --visible-items: 1;
    --slider-gap: 22px;
  }

  .detail-work-slider .work-grid {
    --visible-items: 1;
    --slider-gap: 22px;
  }

  .detail-work-slider .slider-dots {
    width: 100%;
    margin-top: 42px;
  }

  .detail-work-slider .slider-dots button {
    width: 9px;
    height: 9px;
  }

  .slider-arrow {
    top: calc(50% - 30px);
    font-size: 42px;
  }

  .slider-arrow-prev {
    left: -18px;
  }

  .slider-arrow-next {
    right: -18px;
  }

  .detail-work-slider .slider-arrow {
    top: calc(50% - 30px);
    font-size: 42px;
  }

  .detail-work-slider .slider-arrow-prev {
    left: -18px;
  }

  .detail-work-slider .slider-arrow-next {
    left: auto;
    right: -18px;
  }

  .service-card,
  .feature-card,
  .work-card {
    min-height: 260px;
  }

  .work-card :is(span, h3) {
    font-size: 28px;
    line-height: 1.16;
  }

  .prefooter h2 {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-intro {
    display: none;
  }

  .home-page .fascia_menu {
    animation: none;
  }
}

@media (max-width: 1180px) {
  .fascia_menu {
    position: sticky;
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid rgba(38, 36, 81, .12);
  }

  .home-page .fascia_menu {
    position: absolute;
    background: transparent;
    border-bottom: 0;
  }

  body.menu-is-open .fascia_menu,
  body.menu-is-open.home-page .fascia_menu {
    position: sticky;
    background: #fff;
    border-bottom: 1px solid rgba(38, 36, 81, .12);
  }

  .site-nav,
  .home-page .site-nav {
    position: absolute;
    top: 78px;
    left: 0;
    right: auto;
    width: 100%;
    max-height: calc(100vh - 78px);
    display: none;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 10px 16px 18px;
    background: #fff;
    border-top: 1px solid rgba(38, 36, 81, .1);
    border-bottom: 1px solid rgba(38, 36, 81, .14);
    box-shadow: 0 18px 32px rgba(20, 20, 36, .14);
    font-size: 13px;
    font-weight: 700;
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-link,
  .home-page .site-nav .nav-link,
  .nav-parent {
    min-height: 44px;
    width: 100%;
    justify-content: flex-start;
    padding: 13px 0;
    color: var(--color-ink);
    border-bottom: 1px solid rgba(38, 36, 81, .1);
  }

  .nav-parent {
    cursor: default;
  }

  .submenu {
    position: static;
    display: grid;
    min-width: 0;
    gap: 0;
    padding: 2px 0 8px 18px;
    border: 0;
    box-shadow: none;
    background: transparent;
    transform: none;
  }

  .submenu a {
    min-height: 40px;
    padding: 11px 0;
    color: var(--color-ink);
    border-bottom: 1px solid rgba(38, 36, 81, .08);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .menu-toggle {
    display: inline-grid;
  }
}

@media (max-width: 760px) {
  .header-inner,
  .home-page .header-inner {
    min-height: 78px;
    align-items: center;
    padding-top: 0;
  }

  .logo-image,
  .home-page .logo-image {
    width: 200px;
  }

  .menu-toggle {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 0;
    border-radius: 4px;
  }

  .menu-toggle::before {
    content: "";
    width: 18px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    box-shadow: 0 5px 0 currentColor;
  }

  body.menu-is-open .menu-toggle::before {
    width: 18px;
    height: 18px;
    border: 0;
    box-shadow: none;
    background:
      linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat;
    transform: rotate(45deg);
  }

  body.menu-is-open .menu-toggle::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 2px;
    background: currentColor;
    transform: rotate(-45deg);
  }

  .home-page .two-cards,
  .home-page .work-slider {
    width: min(100% - 32px, var(--container));
    margin-left: auto;
    margin-right: auto;
  }

  .home-page .work-slider {
    left: auto;
    transform: none;
  }

  .feature-card {
    width: 100%;
    min-height: 520px;
    padding: 52px 34px;
  }

  .feature-card p {
    max-width: 100%;
  }
}

@media (max-width: 1180px) {
  body.menu-is-open {
    overflow: hidden;
  }

  .fascia_menu,
  .home-page .fascia_menu {
    z-index: 40;
  }

  body.menu-is-open.home-page .fascia_menu {
    box-shadow: 0 12px 28px rgba(20, 20, 36, .08);
  }

  body.menu-is-open.home-page .logo-image-blue {
    display: block;
  }

  body.menu-is-open.home-page .logo-image-white {
    display: none;
  }

  body.menu-is-open.home-page .site-logo {
    color: var(--color-ink);
  }

  .header-inner,
  .home-page .header-inner {
    position: relative;
  }

  .site-logo,
  .header-actions {
    position: relative;
    z-index: 2;
  }

  .site-nav,
  .home-page .site-nav {
    top: 100%;
    left: 50%;
    right: auto;
    width: min(100vw - 32px, 420px);
    max-height: calc(100vh - 98px);
    margin: 0;
    padding: 12px 22px 18px;
    border: 1px solid rgba(38, 36, 81, .12);
    background: #fff;
    box-shadow: 0 22px 44px rgba(20, 20, 36, .16);
    transform: translateX(-50%);
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-link,
  .home-page .site-nav .nav-link,
  .nav-parent {
    min-height: 48px;
    padding: 14px 0;
    color: var(--color-ink);
    border-bottom: 1px solid rgba(38, 36, 81, .1);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .site-nav > .nav-link:last-child {
    border-bottom: 0;
  }

  .nav-parent {
    display: flex;
    align-items: center;
  }

  .submenu {
    padding: 0 0 10px 16px;
  }

  .submenu a {
    min-height: 38px;
    padding: 10px 0;
    color: rgba(38, 36, 81, .82);
    font-size: 12px;
    line-height: 1.2;
    border-bottom: 1px solid rgba(38, 36, 81, .08);
  }

  .submenu a:last-child {
    border-bottom: 0;
  }

  .menu-toggle {
    position: relative;
    z-index: 2;
    flex: 0 0 40px;
    line-height: 1;
    overflow: hidden;
    background: var(--color-blue);
    color: #fff;
  }

  .home-page .menu-toggle {
    background: var(--color-blue);
    color: #fff;
  }

  .menu-toggle::before,
  .menu-toggle::after {
    content: none !important;
  }

  .menu-toggle-icon {
    position: relative;
    width: 20px;
    height: 16px;
    display: block;
  }

  .menu-toggle-icon span {
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    display: block;
    background: currentColor;
    transition: top .2s ease, transform .2s ease, opacity .15s ease;
  }

  .menu-toggle-icon span:nth-child(1) {
    top: 0;
  }

  .menu-toggle-icon span:nth-child(2) {
    top: 7px;
  }

  .menu-toggle-icon span:nth-child(3) {
    top: 14px;
  }

  body.menu-is-open .menu-toggle-icon span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }

  body.menu-is-open .menu-toggle-icon span:nth-child(2) {
    opacity: 0;
  }

  body.menu-is-open .menu-toggle-icon span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }

  body.menu-is-open.home-page .menu-toggle {
    background: var(--color-blue);
    color: #fff;
  }
}

@media (max-width: 760px) {
  .home-page .fascia_menu {
    position: absolute;
    min-height: 0;
    pointer-events: none;
  }

  .home-page .header-inner {
    width: 100%;
    min-height: 0;
    padding: 0;
  }

  .home-page:not(.menu-is-open) .site-logo {
    opacity: 0;
    pointer-events: none;
  }

  .home-page .header-actions {
    position: static;
    pointer-events: none;
  }

  .home-page .menu-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: var(--color-blue);
    color: #fff;
    pointer-events: auto;
  }

  .home-page .icon-link {
    position: absolute;
    right: 20px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    display: inline-grid;
    border-radius: 4px;
    background: #fff;
    color: var(--color-blue);
    pointer-events: auto;
  }

  .home-page .icon-link[href^="tel"] {
    top: 85px;
  }

  .home-page .icon-link[href^="mailto"] {
    top: 130px;
  }

  .home-page .icon-link svg {
    width: 16px;
    height: 16px;
  }

  body.menu-is-open.home-page .fascia_menu {
    min-height: 78px;
    pointer-events: auto;
  }

  body.menu-is-open.home-page .header-inner {
    width: min(100% - 32px, var(--container));
    min-height: 78px;
    padding: 0;
  }

  body.menu-is-open.home-page .site-logo {
    opacity: 1;
    pointer-events: auto;
  }

  body.menu-is-open.home-page .header-actions {
    position: relative;
    margin-left: auto;
    pointer-events: auto;
  }

  body.menu-is-open.home-page .icon-link {
    display: none;
  }

  body.menu-is-open.home-page .menu-toggle {
    position: relative;
    top: auto;
    right: auto;
    background: var(--color-blue);
  }

  .home-page .hero-arrow {
    top: 409px;
    width: 16px;
    height: 26px;
  }

  .home-page .hero-arrow-left {
    left: 10px;
  }

  .home-page .hero-arrow-right {
    right: 10px;
  }

  .home-page .hero-arrow picture,
  .home-page .hero-arrow img {
    display: block;
    width: 16px;
    height: 26px;
  }

  .home-page .hero-photo {
    min-height: 844px;
    background-position: center top;
  }

  .home-page .hero-inner {
    left: 0;
    right: 0;
    bottom: -271px;
    width: 100%;
    min-height: 414px;
    padding: 56px 10px 48px;
  }

  .home-page .hero h1 {
    width: min(370px, 100%);
    max-width: none;
    min-height: 260px;
    margin: 0 auto;
    font-size: 38px;
    line-height: 1.14;
  }

  .home-page .hero-actions {
    width: min(370px, 100%);
    justify-content: center;
    margin: 10px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .42);
  }

  .home-page .hero-actions .btn-small {
    min-width: 0;
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-blue-light);
    font-size: 16px;
    line-height: 1;
  }

  .home-page .hero-actions .btn-small::after {
    content: none;
  }

  .home-page .home-claim-band {
    padding: 331px 10px 82px;
  }

  .home-page .home-claim-band .container {
    width: 100%;
  }

  .home-page .home-claim-band p {
    height: 342px;
    max-width: 370px;
    font-size: 16px;
    line-height: 2.375;
  }

  .home-page .home-claim-band h2 {
    max-width: 370px;
    margin: 72px auto 22px;
    color: var(--color-blue-light);
    font-size: 30px;
  }
}

/* Homepage Figma baseline: desktop 6:17 and mobile 54:238. */
html {
  scrollbar-width: none;
  scroll-behavior: smooth;
}

#intro-carpenteria-metallica {
  scroll-margin-top: 100px;
}

html::-webkit-scrollbar {
  display: none;
}

.mobile-only {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.home-page .section-title strong,
.home-page .band h2 strong,
.home-page .prefooter h2 strong {
  font-weight: 700;
}

/* Carpenteria listing: composed only from validated home/detail primitives. */
.carpenteria-page .figma-copy-section .container {
  display: block;
}

.carpenteria-page .figma-copy-section .section-title {
  max-width: 1420px;
  margin: 0 0 60px;
  color: var(--color-ink);
  font-size: 50px;
  line-height: 1.36;
  font-weight: 300;
  letter-spacing: 0;
}

.carpenteria-page .figma-copy-section .section-title strong {
  font-weight: 800;
}

.carpenteria-page .figma-copy-section .section-title span {
  color: inherit;
  font-weight: 300;
}

.carpenteria-page .figma-copy-section .copy {
  max-width: 1420px;
}

.carpenteria-page .figma-copy-section .copy p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 2.15;
  font-weight: 400;
}

.carpenteria-page .figma-services-section {
  padding-top: 25px;
}

.carpenteria-page .figma-services-section .service-card {
  width: 508px;
  height: 508px;
  min-height: 508px;
  flex: 0 0 508px;
  gap: 10px;
  padding: 30px;
  background-image: var(--card-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Nessun overlay: il carosello "servizi" della home (stesse etichette:
   "Strutture metalliche per capannoni", "Parapetti", "Scale antincendio"...)
   e' l'unico riferimento Figma con foto reali per questi contenuti, e non
   ha alcuna tinta scura sopra la foto. Qui c'era prima un overlay blu-navy
   fino all'82% di opacita', poi ridotto ma mai davvero allineato al Figma:
   il riferimento diretto dice di toglierlo del tutto, non di attenuarlo. */
.carpenteria-page .figma-services-section .service-card {
  position: relative;
}

.carpenteria-page .figma-services-section .service-card > * {
  position: relative;
  z-index: 1;
}

.carpenteria-page .figma-services-section .service-card span {
  width: 448px;
  max-width: 448px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 35px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.carpenteria-page .figma-services-section .service-card b {
  width: 76px;
  min-width: 76px;
  height: 26px;
  min-height: 26px;
  margin: 0;
  padding: 0 0 2px;
  border-radius: 50px;
  font-family: var(--font-title);
  font-size: 24px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: 2.4px;
}

.carpenteria-page .figma-services-section .service-card b,
.home-page .services-section .service-card b {
  display: grid;
  place-items: center;
  background: var(--color-blue);
  color: #fff;
  visibility: visible;
}

.carpenteria-page .figma-services-section .slider-arrow {
  width: 26px;
  min-width: 26px;
  padding: 0;
  font-size: 0;
}

.carpenteria-page .figma-services-section .slider-arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

.carpenteria-page .figma-services-section .slider-dots {
  position: absolute;
  top: 584px;
  left: 863px;
  width: 94px;
  height: 18px;
  justify-content: flex-start;
  gap: 20px;
  margin: 0;
}

.carpenteria-page .figma-services-section .slider-dots button {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 4px;
  background: #d9d9d9;
}

.carpenteria-page .figma-services-section .slider-dots button.is-active {
  background: var(--color-blue);
}

.home-page .intro-section .section-title span,
.home-page .experience-section .section-title span,
.home-page .blog-preview .section-title span,
.home-page .works-head .section-title span,
.home-page .band-photo h2 span {
  color: inherit;
  font-weight: 300;
}

.home-page .intro-section p,
.home-page .band-photo p,
.home-page .feature-card p,
.home-page .experience-section p,
.home-page .works-head p {
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 38px;
  letter-spacing: 0;
}

.home-page .intro-section p,
.home-page .experience-section p,
.home-page .works-head p {
  font-weight: 400;
}

.home-page .band-photo p,
.home-page .feature-card p {
  font-weight: 500;
}

.home-page .band-photo p,
.home-page .feature-card p,
.home-page .experience-section p,
.home-page .works-head p {
  font-size: 17px;
  line-height: 38px;
}

.home-page .intro-section p strong,
.home-page .band-photo p strong,
.home-page .feature-card p strong,
.home-page .experience-section p strong,
.home-page .works-head p strong {
  font-weight: 700;
}

.home-page .home-claim-band p strong {
  font-weight: 900;
}

.home-page .intro-section .btn-small,
.home-page .band-photo .btn-small,
.home-page .feature-card b,
.home-page .experience-section .btn-small,
.home-page .works-head .btn-small,
.home-page .blog-head .btn-small,
.home-page .prefooter .btn {
  align-items: center;
  justify-content: center;
  padding-right: 20px;
  padding-left: 20px;
  white-space: nowrap;
}

.home-page .services-section .service-card:nth-child(4n) > * {
  visibility: visible;
}

.home-page .service-card,
.home-page .work-card,
:is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card {
  width: 508px;
  height: 508px;
  min-height: 508px;
  flex: 0 0 508px;
  gap: 10px;
  padding: 30px;
  background-image: var(--card-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.home-page .service-card span,
.home-page .work-card :is(span, h3),
:is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card :is(span, h3) {
  width: 448px;
  max-width: 448px;
  font-size: 35px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: 0;
}

.home-slider .service-card span,
.home-slider .work-card :is(span, h3) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.home-page .service-card b,
.home-page .work-card b,
:is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card b,
.home-page .pill-link {
  width: 76px;
  min-width: 76px;
  height: 26px;
  min-height: 26px;
  margin: 0;
  padding: 0 0 2px;
  border-radius: 50px;
  font-family: var(--font-title);
  font-size: 24px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: 2.4px;
}

.home-page .slider-arrow {
  width: 26px;
  min-width: 26px;
  padding: 0;
  font-size: 0;
}

.home-page .slider-arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

.home-page .slider-dots {
  position: absolute;
  top: 584px;
  left: 863px;
  width: 94px;
  height: 18px;
  justify-content: flex-start;
  gap: 20px;
  margin: 0;
}

.home-page .slider-dots button {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 4px;
  background: #d9d9d9;
}

.home-page .slider-dots button.is-active {
  background: var(--color-blue);
}

@media (min-width: 761px) {
  .home-page .services-section,
  .home-page .feature-section,
  .home-page .works-section {
    width: min(100%, 1920px);
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .home-claim-band {
    height: 449px;
    padding-bottom: 100px;
  }

  .home-page .intro-section {
    height: 514px;
    padding: 85px 0 90px;
  }

  .home-page .intro-section .container,
  .home-page .experience-section .container,
  .home-page .section-head-stacked {
    width: 1420px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 65px;
  }

  .home-page .intro-section .copy,
  .home-page .experience-section .copy,
  .home-page .section-head-stacked > div {
    display: contents;
  }

  .home-page .intro-section .section-title,
  .home-page .experience-section .section-title,
  .home-page .works-head .section-title,
  .home-page .band-photo h2 {
    width: 1420px;
    height: 68px;
    margin: 0;
    font-size: 50px;
    line-height: 68px;
  }

  .home-page .intro-section .section-title {
    transform: translateY(2px) scaleX(.9425);
    transform-origin: left top;
  }

  .home-page .experience-section .section-title {
    transform: translateY(2px) scaleX(.9115);
    transform-origin: left top;
  }

  .home-page .works-head .section-title {
    transform: translateY(2px) scaleX(.9315);
    transform-origin: left top;
  }

  .home-page .intro-section p,
  .home-page .experience-section p,
  .home-page .works-head p,
  .home-page .band-photo p {
    width: 1420px;
    max-width: none;
    height: 76px;
    margin: 0;
  }

  .home-page .intro-section .btn-small,
  .home-page .experience-section .btn-small,
  .home-page .works-head .btn-small,
  .home-page .band-photo .btn-small {
    height: 42px;
    min-height: 42px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 17px;
    line-height: 22px;
    font-weight: 800;
    letter-spacing: 1.6px;
  }

  .home-page .intro-section .btn-small {
    width: 334px;
  }

  .home-page .services-section {
    height: 734px;
    padding: 0;
    overflow: hidden;
  }

  .home-page .services-section .container {
    width: 2182px;
    margin-left: 50px;
    margin-right: 0;
  }

  .home-page .services-section .home-slider {
    width: 2182px;
    height: 734px;
  }

  .home-page .services-section .slider-viewport,
  .home-page .works-section .slider-viewport {
    width: 2182px;
    overflow: hidden;
  }

  .home-page .services-section .slider-track,
  .home-page .works-section .slider-track {
    gap: 50px;
  }

  .home-page .services-section .slider-arrow,
  .home-page .works-section .slider-arrow {
    top: 572px;
    height: 42px;
  }

  .home-page .services-section .slider-arrow-prev {
    left: 126px;
  }

  .home-page .services-section .slider-arrow-next {
    left: 1694px;
    right: auto;
  }

  .home-page .band-photo {
    width: min(calc(100% - 100px), 1820px);
    height: 626px;
    padding: 0;
  }

  .home-page .band-photo .container {
    width: 1420px;
    height: 626px;
    min-height: 626px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 65px;
    padding-top: 155px;
  }

  .home-page .band-photo .btn-small {
    width: 372px;
    font-size: 16px;
  }

  .home-page .feature-section {
    height: 1010px;
    padding: 120px 50px 0;
    overflow: hidden;
  }

  .home-page .feature-section .two-cards {
    width: 1820px;
    height: 890px;
    grid-template-columns: repeat(2, 890px);
    gap: 40px;
    margin: 0;
  }

  .home-page .feature-card {
    position: relative;
    width: 890px;
    height: 890px;
    min-height: 890px;
    display: block;
    padding: 0;
  }

  .home-page .feature-card span {
    position: absolute;
    z-index: 1;
    top: 268px;
    left: 100px;
    width: 690px;
    height: 68px;
    font-size: 50px;
    line-height: 68px;
    font-weight: 700;
    text-align: left;
  }

  .home-page .feature-card p {
    position: absolute;
    z-index: 1;
    top: 401px;
    left: 100px;
    width: 690px;
    max-width: 690px;
    height: 114px;
    text-align: left;
  }

  .home-page .feature-card b {
    position: absolute;
    z-index: 1;
    top: 580px;
    left: 100px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 10px 50px;
    border-radius: 50px;
    font-family: var(--font-title);
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
    letter-spacing: 1.6px;
    transform: none;
  }

  .home-page .feature-recinzioni b {
    width: 297px;
  }

  .home-page .feature-cancelli b {
    width: 260px;
  }

  .home-page .experience-section {
    height: 506px;
    padding: 120px 0 70px;
  }

  .home-page .experience-section .btn-small {
    width: 268px;
  }

  .home-page .wide-image {
    height: 700px;
    min-height: 700px;
  }

.home-page .works-section {
  height: 1133px;
  padding: 120px 0 0;
  overflow: hidden;
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) {
  padding-top: 120px;
  padding-bottom: 120px;
  overflow: hidden;
}

.home-page .works-section > .container,
:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) > .container {
  width: 1420px;
}

.home-page .works-section .section-head-stacked {
  height: 316px;
  margin: 0;
}

/* La pagina di listino ha un'intro di 3 paragrafi (contro l'unico
   paragrafo breve della home): l'altezza fissa ereditata dalla home,
   unita a overflow:hidden sulla sezione, tagliava il testo. */
:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .section-head-stacked {
  height: auto;
  margin: 0;
}

  .home-page .works-head .btn-small {
    width: 331px;
  }

.home-page .works-section .work-slider,
:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .work-slider {
  left: -165px;
  width: 2182px;
  height: 617px;
    margin-top: 80px;
    transform: none;
  }

.home-page .works-section .slider-arrow,
:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow {
  top: 568px;
  height: 49px;
}

.home-page .works-section .slider-arrow-prev,
:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow-prev {
  left: 91px;
}

.home-page .works-section .slider-arrow-next,
:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow-next {
  left: 1659px;
  right: auto;
}

.home-page .works-section .slider-dots,
:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-dots {
  left: 828px;
}

  .home-page .blog-preview {
    height: 947px;
    padding: 120px 0 115px;
  }

  .home-page .blog-preview .container {
    width: 1420px;
  }

  .home-page .blog-head {
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 40px;
  }

  .home-page .blog-head .section-title {
    width: max-content;
    height: 68px;
    margin: 0;
    font-size: 50px;
    line-height: 68px;
    white-space: nowrap;
    transform: translateY(1px) scaleX(.933);
    transform-origin: left top;
  }

  .home-page .blog-head .btn-small {
    width: 263px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
    letter-spacing: 1.6px;
  }

  .home-page .blog-feature .card-media {
    width: 1420px;
    height: 500px;
    min-height: 500px;
    background: url("../images/figma/home-blog-cover.png") center / cover no-repeat;
  }

  .home-page .blog-feature .card-media::before {
    content: none;
  }

  .home-page .blog-feature h3 {
    width: 1420px;
    height: 48px;
    margin: 20px 0 10px;
    font-size: 35px;
    line-height: 48px;
    font-weight: 700;
  }

  .home-page .prefooter {
    height: 460px;
    padding: 90px 0 100px;
  }

  .home-page .prefooter .container {
    width: 1420px;
    height: 270px;
  }

  .home-page .prefooter h2 {
    width: 1420px;
    height: 82px;
    font-size: 30px;
    line-height: 41px;
  }

  .home-page .prefooter h2 strong {
    font-weight: 700;
  }

  .home-page .prefooter p {
    width: 1420px;
    height: 76px;
    margin: 30px 0 40px;
    font-family: "Inter", Arial, sans-serif;
    font-size: 16px;
    line-height: 38px;
    font-weight: 700;
  }

  .home-page .prefooter .btn {
    width: 217px;
    height: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 1.6px;
  }

  .home-page .site-footer {
    height: 467px;
    min-height: 467px;
  }

  .home-page .footer-main {
    width: 1074px;
    height: 329px;
    grid-template-columns: 281px 281px 352px;
    gap: 80px;
    margin: 0 auto;
    padding: 60px 0 50px;
  }

  .home-page .footer-logo {
    margin-bottom: 20px;
  }

  .home-page .footer-logo .logo-image {
    width: 230px;
    height: 31px;
  }

  .home-page .footer-col h3,
  .home-page .footer-col p,
  .home-page .cert-grid span {
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 28px;
  }

  .home-page .footer-col h3 {
    margin: 0 0 10px;
    font-weight: 800;
  }

  .home-page .footer-company h3 {
    margin: 0;
  }

  .home-page .footer-main > .footer-col:not(.footer-company) {
    padding-top: 51px;
  }

  .home-page .footer-col p {
    font-weight: 500;
  }

  .home-page .cert-grid {
    grid-template-columns: repeat(4, 73px);
    gap: 20px;
  }

  .home-page .footer-bottom {
    width: 1420px;
    height: 138px;
    padding: 10px 0 0;
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 28px;
    font-weight: 500;
  }
}

@media (max-width: 760px) {
  .mobile-only {
    display: initial;
  }

  .home-page .intro-section,
  .home-page .services-section,
  .home-page .band-photo,
  .home-page .feature-section,
  .home-page .experience-section,
  .home-page .wide-image,
  .home-page .works-section,
  .home-page .blog-preview,
  .home-page .prefooter,
  .home-page .site-footer {
    box-sizing: border-box;
    overflow: hidden;
  }

  .home-page .home-claim-band {
    height: 1137px;
    padding: 331px 10px 82px;
  }

  .home-page .intro-section {
    height: 724px;
    padding: 0 20px;
  }

  .home-page .intro-section .container,
  .home-page .experience-section .container,
  .home-page .section-head-stacked {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .home-page .intro-section .copy,
  .home-page .experience-section .copy,
  .home-page .section-head-stacked > div {
    display: contents;
  }

  .home-page .intro-section .section-title,
  .home-page .experience-section .section-title,
  .home-page .works-head .section-title,
  .home-page .band-photo h2 {
    width: 100%;
    height: auto;
    margin: 0;
    font-size: 35px;
    line-height: 48px;
  }

  .home-page .intro-section .section-title {
    height: 144px;
  }

  .home-page .intro-section p,
  .home-page .experience-section p,
  .home-page .works-head p,
  .home-page .band-photo p {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    font-size: 16px;
    line-height: 38px;
  }

  .home-page .intro-section p {
    min-height: 418px;
    height: auto;
    font-size: 16px;
    line-height: 38px;
  }

  .home-page .intro-section .copy p {
    margin: 0;
    font-size: 16px;
    line-height: 38px;
  }

  .home-page .intro-section .btn-small,
  .home-page .experience-section .btn-small,
  .home-page .works-head .btn-small,
  .home-page .band-photo .btn-small {
    height: 42px;
    min-height: 42px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
    letter-spacing: 1.6px;
  }

  .home-page .intro-section .btn-small {
    width: 334px;
  }

  .home-page .services-section {
    height: 676px;
    padding: 0 10px;
  }

  .home-page .services-section .container,
  .home-page .services-section .home-slider,
  .home-page .services-section .slider-viewport {
    width: 370px;
    height: 676px;
    margin: 0;
  }

  .home-page .service-card,
  .home-page .work-card {
    width: 370px;
    height: 508px;
    min-height: 508px;
    flex-basis: 370px;
  }

  .home-page .service-card span,
  .home-page .work-card :is(span, h3) {
    width: 310px;
    max-width: 310px;
  }

  .home-page .services-section .service-card span {
    font-size: 28px;
    line-height: 38px;
  }

  .home-page .services-section .slider-track,
  .home-page .works-section .slider-track {
    gap: 22px;
  }

  .home-page .services-section .slider-arrow,
  .home-page .works-section .slider-arrow {
    display: none;
  }

  .home-page .services-section .slider-dots,
  .home-page .works-section .slider-dots {
    top: 568px;
    left: 138px;
  }

  .home-page .band-photo {
    height: 736px;
    padding: 0;
    background: image-set(url("../images/figma/band-logistica-mobile-figma.webp") type("image/webp"), url("../images/figma/band-logistica-mobile-figma-opt.jpg") type("image/jpeg")) center / cover no-repeat;
  }

  .home-page .band-photo .container {
    width: 370px;
    height: 736px;
    min-height: 736px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
    padding-top: 107px;
  }

  .home-page .band-photo h2 {
    height: 192px;
    max-width: none;
  }

  .home-page .band-photo p {
    min-height: 228px;
    height: auto;
  }

  .home-page .band-photo .btn-small {
    width: 372px;
    max-width: 100%;
  }

  .home-page .feature-section {
    height: 1868px;
    padding: 90px 10px 0;
  }

  .home-page .feature-section .two-cards {
    width: 370px;
    display: grid;
    grid-template-columns: 370px;
    grid-template-rows: 888px 850px;
    gap: 40px;
    margin: 0;
  }

  .home-page .feature-card {
    position: relative;
    width: 370px;
    min-height: 0;
    display: block;
    padding: 0;
    background-size: 370px 370px;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: var(--color-ink);
  }

  .home-page .feature-recinzioni {
    height: 888px;
    background-image: url("../images/figma/feature-recinzioni-mobile-figma-opt.jpg");
    background-image: image-set(url("../images/figma/feature-recinzioni-mobile-figma.webp") type("image/webp"), url("../images/figma/feature-recinzioni-mobile-figma-opt.jpg") type("image/jpeg"));
  }

  .home-page .feature-cancelli {
    height: 850px;
    background-image: url("../images/figma/feature-cancelli-mobile-figma-opt.jpg");
    background-image: image-set(url("../images/figma/feature-cancelli-mobile-figma.webp") type("image/webp"), url("../images/figma/feature-cancelli-mobile-figma-opt.jpg") type("image/jpeg"));
  }

  .home-page .feature-card span,
  .home-page .feature-card p,
  .home-page .feature-card b {
    position: absolute;
    z-index: 1;
    left: 20px;
  }

  .home-page .feature-card span {
    top: 410px;
    width: 330px;
    height: 48px;
    font-size: 35px;
    line-height: 48px;
    font-weight: 700;
  }

  .home-page .feature-card p {
    top: 488px;
    width: 330px;
    max-width: 330px;
    height: 228px;
    margin: 0;
    font-size: 16px;
  }

  .home-page .feature-card b {
    top: 756px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 10px 50px;
    border-radius: 50px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
    letter-spacing: 1.6px;
  }

  .home-page .feature-recinzioni b {
    width: 297px;
  }

  .home-page .feature-cancelli span {
    text-transform: uppercase;
  }

  .home-page .feature-cancelli p {
    height: 190px;
  }

  .home-page .feature-cancelli b {
    top: 718px;
    width: 260px;
  }

  .home-page .experience-section {
    height: auto;
    min-height: 514px;
    /* padding-top:0 e' il valore esatto del frame Figma mobile (verificato
       con l'audit automatico): il titolo tocca subito .feature-section
       sopra. Su richiesta esplicita si aumenta comunque, come sopra per
       .intro-section. */
    padding: 64px 10px 50px;
  }

  .home-page .experience-section .section-title {
    height: 96px;
    font-size: 35px;
  }

  .home-page .experience-section p {
    min-height: 266px;
    height: auto;
  }

  .home-page .experience-section .btn-small {
    width: 268px;
  }

  .home-page .wide-image {
    height: 550px;
    min-height: 550px;
    background-position: center;
  }

  .home-page .works-section,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) {
    height: 1162px;
    padding: 90px 10px 0;
  }

  .home-page .works-section > .container,
  .home-page .works-section .section-head-stacked,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) > .container,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .section-head-stacked {
    width: 370px;
    margin: 0;
  }

  .home-page .works-section .section-head-stacked {
    height: 436px;
    /* Piu' respiro tra il testo e il bottone "Tutte le realizzazioni" su
       richiesta esplicita (il gap base di 30px, condiviso con altre
       sezioni, risultava troppo compatto qui). */
    gap: 40px;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .section-head-stacked {
    height: auto;
  }

  .home-page .works-head .section-title {
    height: 144px;
  }

  .home-page .works-head p {
    min-height: 190px;
    height: auto;
  }

  .home-page .works-head .btn-small {
    width: 331px;
  }

  .home-page .works-section .work-slider,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .work-slider {
    left: 0;
    width: 370px;
    height: 586px;
    margin: 50px 0 0;
    transform: none;
  }

  .home-page .works-section .work-card :is(span, h3),
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .work-card :is(span, h3) {
    display: -webkit-box;
    overflow: hidden;
    font-size: 35px;
    line-height: 48px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .home-page .works-section .slider-viewport,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-viewport {
    width: 370px;
  }

  .home-page .blog-preview {
    height: 746px;
    padding: 90px 10px 120px;
  }

  .home-page .blog-preview .container {
    width: 370px;
    margin: 0;
  }

  .home-page .blog-head {
    width: 370px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin: 0 0 50px;
  }

  .home-page .blog-head .section-title {
    width: 370px;
    height: 48px;
    margin: 0;
    font-size: 35px;
    line-height: 48px;
  }

  .home-page .blog-head .btn-small {
    width: 263px;
    height: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
    letter-spacing: 1.6px;
  }

  .home-page .blog-feature .card-media {
    width: 370px;
    height: 208px;
    min-height: 208px;
    background: url("../images/figma/home-blog-cover.png") center / cover no-repeat;
  }

  .home-page .blog-feature .card-media::before {
    content: none;
  }

  .home-page .blog-feature h3 {
    width: 370px;
    height: 102px;
    margin: 20px 0 10px;
    font-size: 25px;
    line-height: 34px;
    font-weight: 700;
  }

  .home-page .prefooter {
    height: 705px;
    padding: 90px 20px 32px;
  }

  .home-page .prefooter .container {
    width: min(350px, 100%);
    height: 583px;
    gap: 0;
  }

  .home-page .prefooter h2 {
    width: min(350px, 100%);
    height: 205px;
    font-size: 30px;
    line-height: 41px;
  }

  .home-page .prefooter h2 strong {
    font-weight: 700;
  }

  .home-page .prefooter p {
    width: min(350px, 100%);
    height: 266px;
    margin: 30px 0 40px;
    font-family: "Inter", Arial, sans-serif;
    font-size: 16px;
    line-height: 38px;
    font-weight: 700;
  }

  .home-page .prefooter p br {
    display: none;
  }

  .home-page .prefooter .btn {
    width: 217px;
    height: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 1.6px;
  }

  .home-page .site-footer {
    height: 814px;
    min-height: 814px;
  }

  .home-page .footer-main {
    width: 350px;
    height: 650px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
    padding: 50px 0 0;
  }

  body.home-page .site-footer .footer-logo {
    position: static;
    align-self: center;
    margin: 0 auto 20px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .home-page .footer-logo .logo-image,
  .home-page .footer-logo .logo-image-blue {
    width: 230px;
    height: 31px;
    display: block;
  }

  .home-page .footer-col h3,
  .home-page .footer-col p,
  .home-page .cert-grid span {
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 28px;
  }

  .home-page .footer-col {
    width: min(350px, 100%);
    text-align: center;
  }

  .home-page .footer-col h3 {
    margin: 0;
    font-weight: 800;
  }

  .home-page .footer-col p {
    font-weight: 500;
  }

  .home-page .cert-grid {
    grid-template-columns: repeat(4, 73px);
    gap: 20px;
    margin-top: 10px;
  }

  .home-page .footer-bottom {
    width: 350px;
    height: 164px;
    padding: 10px 0 0;
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 28px;
    font-weight: 500;
  }

  .home-page .footer-bottom span {
    margin: 0 5px;
  }
}

/* Detail realization Figma baseline: desktop 39:273 and mobile 56:757. */
.figma-gallery-page .detail-gallery-main::before,
.figma-gallery-page .detail-gallery-side::before {
  content: none;
}

.figma-gallery-page .detail-gallery-arrow {
  z-index: 10;
  width: 25.9px;
  height: 42px;
  padding: 0;
  font-size: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.figma-gallery-page .detail-gallery-arrow::before {
  content: none;
}

.figma-gallery-page .detail-gallery-arrow-prev {
  background-image: url("../images/figma/gallery-arrow-left-desktop-figma.svg");
}

.figma-gallery-page .detail-gallery-arrow-next {
  background-image: url("../images/figma/gallery-arrow-right-desktop-figma.svg");
}

@media (min-width: 1181px) {
  .figma-gallery-page .detail-gallery-strip {
    width: 1920px;
    height: 600px;
    display: block;
  }

  .figma-gallery-page .detail-gallery-main,
  .figma-gallery-page .detail-gallery-side {
    position: absolute;
  }

  .figma-gallery-page .detail-gallery-side {
    top: 37px;
    z-index: 1;
    width: 700px;
    height: 525px;
    min-height: 525px;
    opacity: .95;
  }

  .figma-gallery-page [data-gallery-slot="previous"] {
    left: 50px;
  }

  .figma-gallery-page .detail-gallery-main {
    top: 0;
    left: 560px;
    z-index: 2;
    width: 800px;
    height: 600px;
    min-height: 600px;
  }

  .figma-gallery-page [data-gallery-slot="next"] {
    left: 1170px;
  }

  .figma-gallery-page .detail-gallery-arrow-prev {
    left: 635.9px;
  }

  .figma-gallery-page .detail-gallery-arrow-next {
    right: 610px;
  }
}

@media (max-width: 760px) {
  .detail-page .fascia_menu {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    min-height: 75px;
    height: 75px;
    background: var(--color-ink);
    border-bottom: 0;
  }

  .detail-page main {
    padding-top: 75px;
  }

  .detail-page .header-inner {
    min-height: 75px;
    height: 75px;
  }

  .detail-page .logo-image-blue {
    display: none;
  }

  .detail-page .logo-image-white {
    display: block;
  }

  .detail-page .site-logo,
  .detail-page .menu-toggle {
    color: #fff;
  }

  .detail-page .menu-toggle {
    background: transparent;
  }

  .detail-realizzazione-page .fascia_menu,
  .detail-realizzazione-page .header-inner {
    min-height: 75px;
    height: 75px;
  }

  .detail-realizzazione-page .fascia_menu {
    background: var(--color-ink);
    border-bottom: 0;
  }

  .detail-realizzazione-page .logo-image-blue {
    display: none;
  }

  .detail-realizzazione-page .logo-image-white {
    display: block;
  }

  .detail-realizzazione-page .site-logo,
  .detail-realizzazione-page .menu-toggle {
    color: #fff;
  }

  .detail-realizzazione-page .menu-toggle {
    background: transparent;
  }

  .detail-realizzazione-page .page-hero-photo {
    height: 200px;
    min-height: 200px;
    background-position: center;
  }

  .detail-realizzazione-page .detail-realizzazione-intro,
  .figma-gallery-page .detail-realizzazione-gallery,
  .detail-realizzazione-page .detail-related-services,
  .detail-realizzazione-page .detail-inline-cta,
  .detail-realizzazione-page .detail-related-work,
  .detail-realizzazione-page .prefooter,
  .detail-realizzazione-page .site-footer {
    box-sizing: border-box;
    overflow: hidden;
  }

  .detail-realizzazione-page .detail-realizzazione-intro {
    padding: 30px 20px 0;
  }

  .detail-realizzazione-page .detail-realizzazione-intro .container {
    width: min(350px, 100%);
    margin: 0;
  }

  .detail-realizzazione-page .detail-realizzazione-intro .breadcrumb {
    height: 18px;
    margin: 0 0 60px;
    font-size: 13px;
    line-height: 18px;
  }

  .detail-realizzazione-page .detail-realizzazione-copy {
    width: min(350px, 100%);
    max-width: none;
  }

  .detail-realizzazione-page .detail-realizzazione-copy h1,
  .detail-realizzazione-page .detail-blog-copy h1 {
    width: 350px;
    margin: 0 0 50px;
    font-size: 35px;
    line-height: 48px;
    font-weight: 800;
  }

  .detail-realizzazione-page .detail-realizzazione-copy p {
    width: 350px;
    max-width: none;
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 38px;
  }

  .figma-gallery-page .detail-realizzazione-gallery {
    height: 352px;
    padding: 50px 0 40px;
  }

  .figma-gallery-page .detail-gallery-strip {
    position: relative;
    left: 50%;
    width: 910px;
    height: 262px;
    display: block;
    margin: 0;
    transform: translateX(-50%);
  }

  .figma-gallery-page .detail-gallery-side,
  .figma-gallery-page .detail-gallery-main {
    position: absolute;
    display: block;
    min-height: 0;
    background-position: center;
    background-size: cover;
  }

  .figma-gallery-page .detail-gallery-side {
    top: 18px;
    width: 300px;
    height: 225px;
    opacity: .95;
  }

  .figma-gallery-page [data-gallery-slot="previous"] {
    left: 0;
  }

  .figma-gallery-page .detail-gallery-main {
    top: 0;
    left: 280px;
    z-index: 1;
    width: 350px;
    height: 262px;
  }

  .figma-gallery-page [data-gallery-slot="next"] {
    left: 610px;
  }

  .figma-gallery-page .detail-gallery-arrow {
    top: 113px;
    z-index: 5;
    width: 21.32px;
    height: 34.57px;
    transform: none;
  }

  .figma-gallery-page .detail-gallery-arrow-prev {
    left: 311.22px;
    background-image: url("../images/figma/gallery-arrow-left-mobile-figma.svg");
  }

  .figma-gallery-page .detail-gallery-arrow-next {
    right: auto;
    left: 599px;
    background-image: url("../images/figma/gallery-arrow-right-mobile-figma.svg");
  }

  .figma-gallery-page .detail-gallery-strip.is-moving-next > [data-gallery-slot="current"] {
    transform: translateX(-305px) scale(.857143);
  }

  .figma-gallery-page .detail-gallery-strip.is-moving-next > [data-gallery-slot="next"] {
    transform: translateX(-305px) scale(1.166667);
  }

  .figma-gallery-page .detail-gallery-strip.is-moving-next > [data-gallery-slot="previous"] {
    transform: translateX(-305px) scale(.857143);
  }

  .figma-gallery-page .detail-gallery-strip.is-moving-prev > [data-gallery-slot="current"] {
    transform: translateX(305px) scale(.857143);
  }

  .figma-gallery-page .detail-gallery-strip.is-moving-prev > [data-gallery-slot="previous"] {
    transform: translateX(305px) scale(1.166667);
  }

  .figma-gallery-page .detail-gallery-strip.is-moving-prev > [data-gallery-slot="next"] {
    transform: translateX(305px) scale(.857143);
  }

  .detail-realizzazione-page .detail-related-services {
    padding: 50px 0 100px;
  }

  .detail-realizzazione-page .detail-related-services .container {
    width: 350px;
  }

  .detail-realizzazione-page .detail-related-services .section-title {
    width: 350px;
    height: 34px;
    margin: 0 0 30px;
    font-size: 35px;
    line-height: 34px;
  }

  .detail-realizzazione-page .detail-related-services .related-services-grid {
    width: 270px;
    height: 1608px;
    display: grid;
    grid-template-columns: 270px;
    align-content: start;
    gap: 50px;
    margin: 0 auto;
  }

  .detail-realizzazione-page .related-service-icon {
    width: 270px;
    height: 270px;
  }

  .detail-realizzazione-page .related-service-card strong {
    font-size: 25px;
    line-height: 34px;
  }

  .detail-realizzazione-page .detail-inline-cta {
    height: auto;
    min-height: 195px;
    padding: 0 20px 50px;
  }

  .detail-realizzazione-page .detail-inline-cta .container {
    width: 350px;
    min-height: 0;
    margin: 0;
  }

  .detail-realizzazione-page .detail-inline-cta h2 {
    width: 350px;
    height: 123px;
    margin: 0 0 30px;
    font-size: 30px;
    line-height: 41px;
  }

  .detail-realizzazione-page .detail-inline-cta .btn-small {
    width: 217px;
    height: 42px;
    min-height: 42px;
    border-radius: 50px;
  }

  .detail-realizzazione-page .detail-related-work {
    height: 1034px;
    padding: 120px 10px 0;
  }

  .detail-realizzazione-page .detail-related-work .container {
    width: 370px;
    margin: 0;
  }

  .detail-realizzazione-page .detail-related-work .section-head-inline {
    width: 370px;
    height: 168px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 30px;
    margin: 0 0 40px;
  }

  .detail-realizzazione-page .detail-related-work .section-head-inline .section-title {
    width: 350px;
    max-width: 350px;
    height: 96px;
    margin: 0;
    font-size: 35px;
    line-height: 48px;
    font-weight: 800;
    white-space: normal;
  }

  .detail-realizzazione-page .detail-related-work .section-head-inline .section-title strong {
    font-weight: 800;
  }

  .detail-realizzazione-page .detail-related-work .section-head-inline .btn-small {
    width: 263px;
    min-width: 263px;
    height: 42px;
    min-height: 42px;
    border-radius: 50px;
  }

  .detail-realizzazione-page .detail-work-slider {
    width: 370px;
    height: 706px;
    margin: 0;
  }

  .detail-realizzazione-page .detail-work-slider .slider-viewport {
    width: 370px;
    height: 508px;
    margin: 0;
  }

  .detail-realizzazione-page .detail-work-slider .work-grid {
    width: auto;
    grid-template-columns: none;
    gap: 22px;
    --visible-items: 1;
    --slider-gap: 22px;
  }

  .detail-realizzazione-page .detail-related-work .work-grid .work-card {
    width: 370px;
    height: 508px;
    min-height: 508px;
    flex-basis: 370px;
  }

  .detail-realizzazione-page .detail-related-work .work-card :is(span, h3) {
    width: 310px;
    max-width: 310px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 35px;
    line-height: 48px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .detail-realizzazione-page .detail-work-slider .slider-arrow {
    display: none;
  }

  .detail-realizzazione-page .detail-work-slider .slider-dots {
    width: 94px;
    height: 18px;
    justify-content: flex-start;
    gap: 20px;
    margin: 60px auto 0;
  }

  .detail-realizzazione-page .detail-work-slider .slider-dots button {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 4px;
  }

  .detail-realizzazione-page .prefooter {
    height: 705px;
    padding: 90px 20px 32px;
  }

  .detail-realizzazione-page .prefooter .container {
    width: min(350px, 100%);
    height: 583px;
    display: flex;
    gap: 0;
  }

  .detail-realizzazione-page .prefooter h2 {
    width: min(350px, 100%);
    height: 205px;
    font-size: 30px;
    line-height: 41px;
  }

  .detail-realizzazione-page .prefooter p {
    width: min(350px, 100%);
    height: 266px;
    margin: 30px 0 40px;
    font-family: "Inter", Arial, sans-serif;
    font-size: 16px;
    line-height: 38px;
  }

  .detail-realizzazione-page .prefooter p br {
    display: none;
  }

  .detail-realizzazione-page .prefooter .btn {
    width: 217px;
    height: 42px;
    min-height: 42px;
    border-radius: 50px;
  }

  .detail-realizzazione-page .site-footer {
    height: 814px;
    min-height: 814px;
  }

  .detail-realizzazione-page .footer-main {
    width: 350px;
    height: 650px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
    padding: 50px 0 0;
  }

  body.detail-realizzazione-page .site-footer .footer-logo {
    position: static;
    align-self: center;
    margin: 0 auto 20px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .detail-realizzazione-page .footer-logo .logo-image,
  .detail-realizzazione-page .footer-logo .logo-image-blue {
    width: 230px;
    height: 31px;
    display: block;
  }

  .detail-realizzazione-page .footer-col {
    width: min(350px, 100%);
    text-align: center;
  }

  .detail-realizzazione-page .footer-col h3,
  .detail-realizzazione-page .footer-col p,
  .detail-realizzazione-page .cert-grid span {
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 28px;
  }

  .detail-realizzazione-page .footer-col h3 {
    margin: 0;
  }

  .detail-realizzazione-page .cert-grid {
    grid-template-columns: repeat(4, 73px);
    gap: 20px;
    margin-top: 10px;
  }

  .detail-realizzazione-page .footer-bottom {
    width: 350px;
    height: 164px;
    padding: 10px 0 0;
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 28px;
  }

  .detail-realizzazione-page .footer-bottom span {
    margin: 0 5px;
  }
}

/* Internal pages reuse the dark header from the Figma detail. */
body:not(.home-page) .fascia_menu {
  background: var(--color-ink);
  border-bottom: 0;
}

body:not(.home-page) .logo-image-blue {
  display: none;
}

body:not(.home-page) .logo-image-white {
  display: block;
}

body:not(.home-page) .site-logo,
body:not(.home-page) .nav-link,
body:not(.home-page) .nav-parent {
  color: #fff;
}

body:not(.home-page) .icon-link {
  background: transparent;
}

body:not(.home-page) .nav-link.is-active,
body:not(.home-page) .nav-link:hover {
  color: #fff;
}

.detail-service-page .detail-intro-terminal {
  padding-bottom: 120px;
}

.detail-service-page .detail-intro {
  padding-bottom: 120px;
}

@media (max-width: 1180px) {
  body:not(.home-page) .site-nav .nav-link,
  body:not(.home-page) .site-nav .nav-parent,
  body:not(.home-page) .site-nav .submenu a {
    color: var(--color-ink);
  }
}

@media (max-width: 760px) {
  body:not(.home-page) .fascia_menu {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    min-height: 75px;
    height: 75px;
    background: var(--color-ink);
    border-bottom: 0;
  }

  body:not(.home-page) main {
    padding-top: 75px;
  }

  body:not(.home-page) .header-inner {
    min-height: 75px;
    height: 75px;
  }

  body:not(.home-page) .logo-image-blue {
    display: none;
  }

  body:not(.home-page) .logo-image-white {
    display: block;
  }

  body:not(.home-page) .site-logo,
  body:not(.home-page) .menu-toggle {
    color: #fff;
  }

  body:not(.home-page) .menu-toggle {
    background: transparent;
  }

  .detail-service-page .detail-intro-terminal {
    padding-bottom: 80px;
  }

}

@media (min-width: 761px) {
  .carpenteria-page .figma-services-section {
    width: min(100%, 1920px);
    height: 734px;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    overflow: hidden;
  }

  .carpenteria-page .figma-services-section .container,
  .carpenteria-page .figma-services-section .home-slider,
  .carpenteria-page .figma-services-section .slider-viewport {
    width: 2182px;
    max-width: none;
  }

  .carpenteria-page .figma-services-section .container {
    margin-right: 0;
    margin-left: 50px;
  }

  .carpenteria-page .figma-services-section .home-slider {
    height: 734px;
  }

  .carpenteria-page .figma-services-section .slider-track {
    gap: 50px;
  }

  .carpenteria-page .figma-services-section .slider-arrow {
    top: 572px;
    height: 42px;
  }

  .carpenteria-page .figma-services-section .slider-arrow-prev {
    left: 126px;
  }

  .carpenteria-page .figma-services-section .slider-arrow-next {
    right: auto;
    left: 1694px;
  }
}

@media (max-width: 760px) {
  .carpenteria-page .figma-services-section {
    --mobile-service-width: min(calc(100vw - 20px), 508px);
  }

  .carpenteria-page .figma-copy-section {
    padding: 64px 20px;
  }

  .carpenteria-page .figma-copy-section .section-title {
    margin-bottom: 30px;
    font-size: 35px;
    line-height: 48px;
  }

  .carpenteria-page .figma-copy-section .copy p {
    font-size: 16px;
    line-height: 38px;
  }

  .carpenteria-page .figma-services-section {
    height: 676px;
    padding: 0 10px;
    overflow: hidden;
  }

  .carpenteria-page .figma-services-section .container,
  .carpenteria-page .figma-services-section .home-slider,
  .carpenteria-page .figma-services-section .slider-viewport {
    width: var(--mobile-service-width);
    max-width: none;
    height: 676px;
    margin-right: auto;
    margin-left: auto;
  }

  .carpenteria-page .figma-services-section .service-card {
    width: var(--mobile-service-width);
    max-width: none;
    height: 508px;
    min-height: 508px;
    flex-basis: var(--mobile-service-width);
  }

  .carpenteria-page .figma-services-section .service-card span {
    width: calc(var(--mobile-service-width) - 60px);
    max-width: none;
    font-size: 28px;
    line-height: 38px;
  }

  .carpenteria-page .figma-services-section .slider-track {
    gap: 22px;
  }

  .carpenteria-page .figma-services-section .slider-arrow {
    display: none;
  }

  .carpenteria-page .figma-services-section .slider-dots {
    top: 568px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Compact header before the full desktop navigation runs out of space. */
@media (min-width: 1181px) and (max-width: 1800px) {
  body.menu-is-open {
    overflow: hidden;
  }

  .header-inner,
  .home-page .header-inner {
    position: relative;
  }

  .site-nav,
  .home-page .site-nav {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    z-index: 20;
    width: min(100vw - 32px, 520px);
    max-height: calc(100vh - 110px);
    display: none;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 12px 22px 18px;
    color: var(--color-ink);
    background: #fff;
    border: 1px solid rgba(38, 36, 81, .12);
    box-shadow: 0 22px 44px rgba(20, 20, 36, .16);
    transform: translateX(-50%);
  }

  .site-nav.is-open,
  .home-page .site-nav.is-open {
    display: flex;
  }

  .nav-link,
  .home-page .site-nav .nav-link,
  .nav-parent {
    min-height: 46px;
    width: 100%;
    justify-content: flex-start;
    padding: 13px 0;
    color: var(--color-ink);
    border-bottom: 1px solid rgba(38, 36, 81, .1);
  }

  .nav-item {
    width: 100%;
  }

  .nav-parent {
    text-align: left;
  }

  .submenu {
    position: static;
    display: grid;
    min-width: 0;
    gap: 0;
    padding: 2px 0 8px 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .submenu a {
    min-height: 40px;
    padding: 11px 0;
    color: var(--color-ink);
    border-bottom: 1px solid rgba(38, 36, 81, .08);
  }

  .menu-toggle {
    display: inline-grid;
  }
}

/* Final header safety net: keep the nav usable across resize edge cases. */
@media (max-width: 1800px) {
  .fascia_menu,
  .home-page .fascia_menu {
    z-index: 60;
  }

  .header-inner,
  .home-page .header-inner {
    position: relative;
  }

  .site-logo,
  .header-actions {
    position: relative;
    z-index: 2;
  }

  .site-nav,
  .home-page .site-nav {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    z-index: 1;
    width: min(100vw - 32px, 520px);
    max-height: calc(100vh - 96px);
    display: none;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 12px 22px 18px;
    background: #fff;
    border: 1px solid rgba(38, 36, 81, .12);
    box-shadow: 0 22px 44px rgba(20, 20, 36, .16);
    transform: translateX(-50%);
  }

  .site-nav.is-open,
  .home-page .site-nav.is-open {
    display: flex;
  }

  .site-nav .nav-link,
  .site-nav .nav-parent,
  .home-page .site-nav .nav-link,
  .home-page .site-nav .nav-parent,
  body:not(.home-page) .site-nav .nav-link,
  body:not(.home-page) .site-nav .nav-parent {
    min-height: 46px;
    width: 100%;
    justify-content: flex-start;
    padding: 13px 0;
    color: var(--color-ink);
    border-bottom: 1px solid rgba(38, 36, 81, .1);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .site-nav .nav-item {
    width: 100%;
  }

  .site-nav .nav-parent {
    display: flex;
    align-items: center;
    text-align: left;
  }

  .site-nav .submenu {
    position: static;
    display: grid;
    min-width: 0;
    gap: 0;
    padding: 0 0 10px 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .site-nav .submenu a,
  .home-page .site-nav .submenu a,
  body:not(.home-page) .site-nav .submenu a {
    min-height: 38px;
    padding: 10px 0;
    color: rgba(38, 36, 81, .82);
    border-bottom: 1px solid rgba(38, 36, 81, .08);
    font-size: 12px;
    line-height: 1.2;
  }

  .menu-toggle,
  .home-page .menu-toggle {
    display: inline-grid;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: #fff;
  }

  body.menu-is-open.home-page .fascia_menu {
    background: #fff;
    border-bottom: 1px solid rgba(38, 36, 81, .12);
  }

  body.menu-is-open.home-page .logo-image-blue {
    display: block;
  }

  body.menu-is-open.home-page .logo-image-white {
    display: none;
  }

  body.menu-is-open.home-page .menu-toggle {
    color: var(--color-ink);
  }

  .menu-toggle::before,
  .menu-toggle::after {
    content: none;
  }

  .menu-toggle-icon {
    width: 24px;
    height: 18px;
    display: grid;
    gap: 5px;
  }

  .menu-toggle-icon span {
    width: 24px;
    height: 2px;
    display: block;
    background: currentColor;
    border-radius: 999px;
    transform-origin: center;
    transition: transform .2s ease, opacity .2s ease;
  }

  body.menu-is-open .menu-toggle-icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.menu-is-open .menu-toggle-icon span:nth-child(2) {
    opacity: 0;
  }

  body.menu-is-open .menu-toggle-icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (max-width: 760px) {
  .site-nav,
  .home-page .site-nav {
    left: 50%;
    width: min(100vw - 30px, 420px);
    max-height: calc(100vh - 75px);
    padding: 12px 20px 18px;
  }

  .menu-toggle,
  .home-page .menu-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    background: transparent;
  }
}

/* Keep the full navigation visible whenever the header has enough space. */
@media (min-width: 576px) and (max-width: 1800px) {
  .container_big,
  .home-page .header-inner {
    width: min(100% - 48px, var(--container-big));
  }

  .header-inner,
  .home-page .header-inner {
    min-height: 168px;
    height: auto;
    align-items: center;
    gap: 18px;
    padding-top: 0;
  }

  .logo-image,
  .home-page .logo-image {
    width: 260px;
  }

  .site-nav,
  .home-page .site-nav {
    position: static;
    z-index: auto;
    width: auto;
    max-height: none;
    display: flex;
    overflow: visible;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
  }

  .site-nav .nav-link,
  .site-nav .nav-parent,
  .home-page .site-nav .nav-link,
  .home-page .site-nav .nav-parent,
  body:not(.home-page) .site-nav .nav-link,
  body:not(.home-page) .site-nav .nav-parent {
    min-height: 0;
    width: auto;
    justify-content: center;
    padding: 10px 0;
    color: #fff;
    border-bottom: 0;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    white-space: nowrap;
  }

  .site-nav > .nav-link:first-child {
    display: none;
  }

  .site-nav .nav-item {
    width: auto;
  }

  .site-nav .submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 180px;
    display: none;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--color-line);
    box-shadow: 0 14px 30px rgba(20, 20, 36, .12);
    transform: translateX(-50%);
  }

  .site-nav .has-submenu:hover .submenu,
  .site-nav .has-submenu:focus-within .submenu {
    display: block;
  }

  .site-nav .submenu a,
  .home-page .site-nav .submenu a,
  body:not(.home-page) .site-nav .submenu a {
    min-height: 0;
    padding: 9px 0;
    color: var(--color-ink);
    border-bottom: 0;
    font-size: 13px;
    line-height: 1.25;
    text-transform: none;
    white-space: nowrap;
  }

  .header-actions {
    margin-left: 0;
    gap: 10px;
  }

  .menu-toggle,
  .home-page .menu-toggle {
    display: none;
  }
}

@media (min-width: 1401px) and (max-width: 1800px) {
  .site-nav > .nav-link:first-child {
    display: inline-flex;
  }
}

@media (min-width: 1181px) and (max-width: 1400px) {
  .container_big,
  .home-page .header-inner {
    width: min(100% - 80px, var(--container-big));
  }

  .logo-image,
  .home-page .logo-image {
    width: 230px;
  }

  .site-nav,
  .home-page .site-nav {
    gap: 14px;
    font-size: 12px;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .container_big,
  .home-page .header-inner {
    width: min(100% - 48px, var(--container-big));
  }

  .logo-image,
  .home-page .logo-image {
    width: 180px;
  }

  .site-nav,
  .home-page .site-nav {
    gap: 9px;
    font-size: 10px;
  }

  .header-actions .icon-link {
    display: none;
  }
}

@media (min-width: 576px) and (max-width: 760px) {
  body:not(.home-page) .fascia_menu {
    height: auto;
    min-height: 168px;
  }

  body:not(.home-page) main {
    padding-top: 168px;
  }

  .container_big,
  .home-page .header-inner {
    width: min(100% - 32px, var(--container-big));
  }

  .header-inner,
    .home-page .header-inner,
  body:not(.home-page) .header-inner {
    min-height: 168px;
    height: auto;
    flex-wrap: wrap;
    align-content: center;
    gap: 10px 16px;
    padding: 16px 0 14px;
  }

  .logo-image,
  .home-page .logo-image {
    width: 170px;
  }

  .header-actions .icon-link {
    display: none;
  }

  .site-nav,
  .home-page .site-nav {
    order: 3;
    flex: 0 0 100%;
    justify-content: center;
    gap: 9px;
    font-size: 10px;
  }
}

@media (max-width: 575px) {
  .fascia_menu,
  .home-page .fascia_menu,
  body:not(.home-page) .fascia_menu {
    min-height: 168px;
    height: 168px;
  }

  body:not(.home-page) main {
    padding-top: 168px;
  }

  .container_big,
  .home-page .header-inner {
    width: min(100% - 30px, var(--container-big));
  }

  .header-inner,
  .home-page .header-inner,
  body:not(.home-page) .header-inner {
    min-height: 168px;
    height: 168px;
    align-items: flex-start;
    gap: 14px;
    padding-top: 48px;
  }

  .logo-image,
  .home-page .logo-image {
    width: min(300px, calc(100vw - 104px));
  }

  .header-actions,
  .home-page .header-actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding-top: 0;
  }

  .header-actions .icon-link,
  .home-page .header-actions .icon-link {
    display: inline-grid;
    width: 30px;
    min-width: 30px;
    height: 30px;
    background: transparent;
  }

  .site-nav,
  .home-page .site-nav {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    width: min(100vw - 30px, 420px);
    max-height: calc(100vh - 168px);
    display: none;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 12px 20px 18px;
    background: #fff;
    border: 1px solid rgba(38, 36, 81, .12);
    box-shadow: 0 22px 44px rgba(20, 20, 36, .16);
    transform: translateX(-50%);
  }

  .site-nav.is-open,
  .home-page .site-nav.is-open {
    display: flex;
  }

  .menu-toggle,
  .home-page .menu-toggle {
    display: inline-grid;
    order: -1;
    width: 30px;
    min-width: 30px;
    height: 30px;
    background: transparent;
    color: #fff;
  }

  .site-nav .nav-link,
  .site-nav .nav-parent,
  .home-page .site-nav .nav-link,
  .home-page .site-nav .nav-parent,
  body:not(.home-page) .site-nav .nav-link,
  body:not(.home-page) .site-nav .nav-parent {
    min-height: 46px;
    width: 100%;
    justify-content: flex-start;
    padding: 13px 0;
    color: var(--color-ink);
    border-bottom: 1px solid rgba(38, 36, 81, .1);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .site-nav .submenu {
    position: static;
    display: grid;
    min-width: 0;
    padding: 0 0 10px 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .site-nav .submenu a,
  .home-page .site-nav .submenu a,
  body:not(.home-page) .site-nav .submenu a {
    min-height: 38px;
    padding: 10px 0;
    color: rgba(38, 36, 81, .82);
    border-bottom: 1px solid rgba(38, 36, 81, .08);
    font-size: 12px;
    line-height: 1.2;
  }
}

/* Final responsive header behavior: desktop-like nav until 1180px, hamburger below. */
@media (min-width: 1180px) and (max-width: 1800px) {
  .container_big,
  .home-page .header-inner {
    width: min(100% - 96px, var(--container-big));
  }

  .header-inner,
  .home-page .header-inner,
  body:not(.home-page) .header-inner {
    min-height: 170px;
    height: 170px;
    align-items: flex-start;
    gap: 28px;
    padding-top: 49px;
  }

  .logo-image,
  .home-page .logo-image {
    width: 300px;
  }

  .site-nav,
  .home-page .site-nav {
    position: static;
    width: auto;
    max-height: none;
    display: flex;
    overflow: visible;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    margin: 0;
    padding: 2px 0 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    font-size: 16px;
    line-height: 1;
    letter-spacing: .4px;
  }

  .site-nav .nav-link,
  .site-nav .nav-parent,
  .home-page .site-nav .nav-link,
  .home-page .site-nav .nav-parent,
  body:not(.home-page) .site-nav .nav-link,
  body:not(.home-page) .site-nav .nav-parent {
    min-height: 38px;
    width: auto;
    justify-content: center;
    padding: 10px 0;
    color: #fff;
    border-bottom: 0;
    font-size: inherit;
    line-height: inherit;
    white-space: nowrap;
  }

  .site-nav > .nav-link:first-child {
    display: inline-flex;
  }

  .header-actions,
  .home-page .header-actions {
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-left: 0;
    padding-top: 7px;
  }

  .header-actions .icon-link,
  .home-page .header-actions .icon-link {
    display: inline-grid;
    width: 30px;
    min-width: 30px;
    height: 30px;
    background: transparent;
  }

  .menu-toggle,
  .home-page .menu-toggle {
    display: none;
  }
}

/* Keep the large-desktop header geometry stable across the first resize step. */
@media (min-width: 1501px) and (max-width: 1800px) {
  .container_big,
  .home-page .header-inner {
    --header-gutter: clamp(32px, calc(40.9722vw - 582.583px), 150px);
    width: min(1620px, calc(100% - var(--header-gutter) - var(--header-gutter)));
  }

  .header-inner,
  .home-page .header-inner,
  body:not(.home-page) .header-inner {
    gap: 32px;
  }

  /* flex/justify-content/margin-left NON vengono piu' ridefiniti qui:
     un margin-left calcolato con clamp() (una spinta fissa in px, non
     proporzionale allo spazio davvero disponibile) faceva traboccare
     nav+icone oltre il bordo destro del contenitore di ~86px a 1680px,
     mentre il logo restava ancorato al bordo sinistro - risultato
     visibilmente asimmetrico. Restano validi flex:1 1 auto e
     justify-content:flex-end della regola 1180-1800px sopra: il nav
     cresce per riempire esattamente lo spazio residuo e si allinea a
     destra da solo, garantendo simmetria a qualunque larghezza. */
  .site-nav,
  .home-page .site-nav {
    gap: clamp(12px, calc(5.9028vw - 76.542px), 29px);
    font-weight: 450;
    letter-spacing: clamp(0px, calc(.2778vw - 4.169px), .8px);
  }
}

@media (min-width: 1180px) and (max-width: 1400px) {
  .site-nav > .nav-link:first-child {
    display: none;
  }
}

@media (min-width: 1180px) and (max-width: 1500px) {
  .container_big,
  .home-page .header-inner {
    width: min(100% - 64px, var(--container-big));
  }

  .logo-image,
  .home-page .logo-image {
    width: 300px;
  }

  .site-nav,
  .home-page .site-nav {
    gap: 12px;
    font-size: 16px;
    letter-spacing: 0;
  }
}

@media (min-width: 1180px) and (max-width: 1300px) {
  .header-inner,
  .home-page .header-inner,
  body:not(.home-page) .header-inner {
    position: relative;
  }

  .container_big,
  .home-page .header-inner {
    width: min(100% - 48px, var(--container-big));
  }

  .logo-image,
  .home-page .logo-image {
    width: 300px;
  }

  .site-nav,
  .home-page .site-nav {
    gap: 8px;
    font-size: 16px;
    letter-spacing: 0;
    margin-right: 103px;
  }

  .header-actions,
  .home-page .header-actions {
    position: absolute;
    top: 49px;
    right: 0;
    width: 75px;
    height: 37px;
  }

  .site-nav > .nav-link:first-child {
    display: none;
  }
}

@media (min-width: 1180px) and (max-width: 1220px) {
  .site-nav > .nav-link[href$="blog.php"] {
    display: none;
  }
}

@media (max-width: 1179px) {
  .fascia_menu,
  .home-page .fascia_menu,
  body:not(.home-page) .fascia_menu {
    min-height: 75px;
    height: 75px;
    border-bottom: 0;
    overflow: visible;
  }

  body:not(.home-page) .fascia_menu {
    background: var(--color-ink);
  }

  .home-page .fascia_menu {
    background: transparent;
    pointer-events: auto;
  }

  body:not(.home-page) main {
    padding-top: 75px;
  }

  .container_big,
  .home-page .header-inner {
    width: min(100% - 30px, var(--container-big));
  }

  .header-inner,
  .home-page .header-inner,
  body:not(.home-page) .header-inner {
    position: relative;
    min-height: 75px;
    height: 75px;
    align-items: center;
    gap: 14px;
    padding: 0;
  }

  .logo-image,
  .home-page .logo-image {
    width: min(200px, calc(100vw - 94px));
  }

  .home-page:not(.menu-is-open) .site-logo {
    opacity: 1;
    pointer-events: auto;
  }

  body.home-intro-flight .site-logo {
    animation: none;
    transform: none;
  }

  .header-actions,
  .home-page .header-actions {
    position: absolute;
    top: 15px;
    right: 0;
    width: 40px;
    height: 120px;
    display: block;
    margin-left: 0;
    padding-top: 0;
    pointer-events: auto;
  }

  .menu-toggle,
  .home-page .menu-toggle {
    position: absolute;
    top: 22px;
    right: 0;
    display: inline-grid;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: #fff;
  }

  .menu-toggle-icon,
  .home-page .menu-toggle-icon {
    position: relative;
    display: block;
    width: 24px;
    height: 18px;
  }

  .menu-toggle-icon span,
  .home-page .menu-toggle-icon span {
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    margin: 0;
  }

  .menu-toggle-icon span:nth-child(1) {
    top: 0;
  }

  .menu-toggle-icon span:nth-child(2) {
    top: 8px;
  }

  .menu-toggle-icon span:nth-child(3) {
    top: 16px;
  }

  body.menu-is-open .menu-toggle-icon span:nth-child(1) {
    top: 8px;
    transform: rotate(45deg);
  }

  body.menu-is-open .menu-toggle-icon span:nth-child(2) {
    opacity: 0;
  }

  body.menu-is-open .menu-toggle-icon span:nth-child(3) {
    top: 8px;
    transform: rotate(-45deg);
  }

  .header-actions .icon-link,
  .home-page .header-actions .icon-link {
    position: absolute;
    right: 5px;
    display: inline-grid;
    width: 30px;
    min-width: 30px;
    height: 30px;
    background: transparent;
  }

  .header-actions .icon-link:nth-of-type(1),
  .home-page .header-actions .icon-link:nth-of-type(1) {
    top: 92px;
  }

  .header-actions .icon-link:nth-of-type(2),
  .home-page .header-actions .icon-link:nth-of-type(2) {
    top: 137px;
  }

  .site-nav,
  .home-page .site-nav {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    width: min(100vw - 30px, 520px);
    max-height: calc(100vh - 75px);
    display: none;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 12px 20px 18px;
    background: #fff;
    border: 1px solid rgba(38, 36, 81, .12);
    box-shadow: 0 22px 44px rgba(20, 20, 36, .16);
    transform: translateX(-50%);
  }

  .site-nav.is-open,
  .home-page .site-nav.is-open {
    display: flex;
  }

  body.menu-is-open.home-page .fascia_menu {
    position: absolute;
    min-height: 75px;
    height: 75px;
    background: #fff;
    border-bottom: 1px solid rgba(38, 36, 81, .12);
    box-shadow: none;
  }

  body.menu-is-open.home-page .header-inner {
    width: min(100% - 30px, var(--container-big));
    min-height: 75px;
    height: 75px;
  }

  body.menu-is-open.home-page .logo-image-blue {
    display: block;
  }

  body.menu-is-open.home-page .logo-image-white {
    display: none;
  }

  body.menu-is-open.home-page .site-logo {
    color: var(--color-ink);
  }

  body.menu-is-open.home-page .header-actions {
    position: absolute;
    top: 15px;
    right: 0;
    width: 40px;
    height: 120px;
    margin-left: 0;
    padding-top: 0;
  }

  body.menu-is-open.home-page .menu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    color: var(--color-ink);
  }

  .site-nav .nav-link,
  .site-nav .nav-parent,
  .home-page .site-nav .nav-link,
  .home-page .site-nav .nav-parent,
  body:not(.home-page) .site-nav .nav-link,
  body:not(.home-page) .site-nav .nav-parent {
    min-height: 46px;
    width: 100%;
    justify-content: flex-start;
    padding: 13px 0;
    color: var(--color-ink);
    border-bottom: 1px solid rgba(38, 36, 81, .1);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .site-nav .nav-item {
    width: 100%;
  }

  .site-nav .submenu {
    position: static;
    display: grid;
    min-width: 0;
    padding: 0 0 10px 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .site-nav .submenu a,
  .home-page .site-nav .submenu a,
  body:not(.home-page) .site-nav .submenu a {
    min-height: 38px;
    padding: 10px 0;
    color: rgba(38, 36, 81, .82);
    border-bottom: 1px solid rgba(38, 36, 81, .08);
    font-size: 12px;
    line-height: 1.2;
  }
}

@media (min-width: 761px) and (max-width: 1179px) {
  .container,
  .container_big,
  .page-hero .container,
  .home-page .intro-section .container,
  .home-page .experience-section .container,
  .home-page .section-head-stacked,
  .home-page .works-section > .container,
  .home-page .blog-preview .container,
  body:not(.no-shared-footer) .prefooter .container,
  body:not(.no-shared-footer) .footer-main,
  body:not(.no-shared-footer) .footer-bottom,
  .figma-copy-section .container,
  .intro-section .container,
  .experience-section .container,
  .listing-section .container,
  .detail-page .detail-intro .container,
  .detail-page .detail-copy,
  .detail-page .detail-inline-cta .container,
  .detail-realizzazione-page.detail-blog-page .detail-blog-intro .container,
  .detail-realizzazione-page.detail-blog-page .detail-blog-copy,
  .detail-realizzazione-page .detail-realizzazione-intro .container,
  .detail-realizzazione-page .detail-realizzazione-copy,
  .detail-realizzazione-page .detail-related-services .container,
  .detail-realizzazione-page .detail-inline-cta .container,
  .detail-realizzazione-page .prefooter .container {
    width: min(calc(100% - 80px), 980px);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
  }

  body:not(.home-page) main {
    padding-top: 0;
  }

  .hero-inner {
    bottom: -32px;
    width: min(calc(100% - 160px), 660px);
    min-height: 0;
    padding: 46px 56px 34px;
  }

  .home-page .hero-photo {
    min-height: clamp(720px, 92vw, 820px);
  }

  .hero h1,
  .page-hero h1 {
    max-width: none;
    font-size: clamp(36px, 5.2vw, 48px);
    line-height: 1.18;
  }

  .home-page .hero-actions {
    margin-top: 18px;
    padding-top: 18px;
  }

  .home-claim-band {
    height: auto;
    min-height: 0;
    padding: 92px 0 76px;
  }

  .home-claim-band p {
    width: 100%;
    height: auto;
    font-size: 16px;
    line-height: 2;
  }

  .home-page .intro-section,
  .home-page .experience-section,
  .home-page .works-section,
  .home-page .blog-preview,
  .figma-copy-section,
  .intro-section,
  .experience-section {
    height: auto;
    min-height: 0;
  }

  .home-page .intro-section {
    padding: 92px 0 80px;
  }

  .home-page .experience-section,
  .figma-copy-section {
    padding: 86px 0;
  }

  .home-page .intro-section .container,
  .home-page .experience-section .container,
  .home-page .section-head-stacked {
    gap: 36px;
  }

  .home-page .intro-section .section-title,
  .home-page .experience-section .section-title,
  .home-page .works-head .section-title,
  .home-page .band-photo h2,
  .section-title,
  .section h2,
  .band h2,
  .figma-copy-section .section-title,
  .detail-copy h1,
  .detail-page .detail-copy h1,
  .detail-realizzazione-page .detail-realizzazione-copy h1 {
    width: 100%;
    height: auto;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    font-size: clamp(34px, 5.4vw, 46px);
    line-height: 1.16;
    transform: none;
    white-space: normal;
  }

  .home-page .intro-section p,
  .home-page .experience-section p,
  .home-page .works-head p,
  .home-page .band-photo p,
  .copy,
  .copy p,
  .figma-copy-section .copy,
  .figma-copy-section .copy p,
  .detail-copy p,
  .detail-page .detail-copy p,
  .detail-realizzazione-page .detail-realizzazione-copy p {
    width: 100%;
    height: auto;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    font-size: 17px;
    line-height: 2;
  }

  .detail-page .detail-intro .detail-copy,
  .detail-realizzazione-page .detail-realizzazione-copy,
  .detail-realizzazione-page.detail-blog-page .detail-blog-copy {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .home-page .services-section,
  .home-page .feature-section,
  .home-page .works-section,
  .home-page .blog-preview,
  .carpenteria-page .figma-services-section,
  .listing-section,
  .detail-related-services,
  .detail-realizzazione-page .detail-related-work,
  .inline-cta {
    padding-right: 40px;
    padding-left: 40px;
    overflow: hidden;
  }

  .home-page .services-section,
  .carpenteria-page .figma-services-section {
    height: auto;
    padding-top: 0;
    padding-bottom: 86px;
  }

  .home-page .services-section .container,
  .home-page .services-section .home-slider,
  .home-page .services-section .slider-viewport,
  .home-page .works-section .work-slider,
  .home-page .works-section .slider-viewport,
  .detail-realizzazione-page .detail-related-work .container,
  .detail-realizzazione-page .detail-related-work .section-head-inline,
  .detail-realizzazione-page .detail-work-slider,
  .detail-realizzazione-page .detail-work-slider .slider-viewport,
  .carpenteria-page .figma-services-section .container,
  .carpenteria-page .figma-services-section .home-slider,
  .carpenteria-page .figma-services-section .slider-viewport {
    left: auto;
    width: min(calc(100vw - 80px), 980px);
    max-width: none;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    transform: none;
  }

  .home-page .services-section .slider-track,
  .home-page .works-section .slider-track,
  .carpenteria-page .figma-services-section .slider-track,
  .detail-realizzazione-page .detail-work-slider .work-grid {
    gap: 28px;
    --visible-items: 1.35;
    --slider-gap: 28px;
  }

  .home-page .service-card,
  .home-page .work-card,
  .detail-realizzazione-page .detail-related-work .work-grid .work-card,
  .carpenteria-page .figma-services-section .service-card {
    width: min(calc((100vw - 108px) / 1.35), 620px);
    max-width: none;
    height: 508px;
    min-height: 508px;
    flex-basis: min(calc((100vw - 108px) / 1.35), 620px);
  }

  .home-page .service-card span,
  .home-page .work-card :is(span, h3),
  .detail-realizzazione-page .detail-related-work .work-card :is(span, h3),
  .carpenteria-page .figma-services-section .service-card span {
    width: calc(100% - 60px);
    max-width: none;
    font-size: clamp(30px, 4.2vw, 40px);
    line-height: 1.18;
  }

  .home-page .services-section .slider-arrow,
  .home-page .works-section .slider-arrow,
  .carpenteria-page .figma-services-section .slider-arrow {
    display: none;
  }

  .home-page .services-section .slider-dots,
  .home-page .works-section .slider-dots,
  .carpenteria-page .figma-services-section .slider-dots {
    position: static;
    width: max-content;
    margin: 42px auto 0;
    transform: none;
  }

  .home-page .band-photo {
    width: min(calc(100% - 80px), 980px);
    height: auto;
    min-height: 560px;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
  }

  .home-page .band-photo .container {
    width: min(calc(100% - 80px), 820px);
    height: auto;
    min-height: 560px;
    gap: 36px;
    padding-top: 96px;
    padding-bottom: 80px;
  }

  .home-page .feature-section {
    height: auto;
    padding-top: 86px;
    padding-bottom: 86px;
  }

  .home-page .feature-section .two-cards {
    width: min(calc(100vw - 80px), 980px);
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 40px;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .feature-card {
    width: 100%;
    height: auto;
    min-height: 660px;
    padding: 300px 44px 52px;
    background-size: 100% 300px;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .home-page .feature-card span,
  .home-page .feature-card p,
  .home-page .feature-card b {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    transform: none;
  }

  .home-page .feature-card span {
    display: block;
    margin-bottom: 28px;
    font-size: clamp(34px, 5vw, 44px);
    line-height: 1.14;
  }

  .home-page .feature-card p {
    margin-bottom: 34px;
    font-size: 17px;
    line-height: 2;
  }

  .home-page .feature-recinzioni b,
  .home-page .feature-cancelli b {
    width: max-content;
    max-width: 100%;
  }

  .home-page .works-section {
    padding-top: 86px;
    padding-bottom: 86px;
  }

  .home-page .works-section .section-head-stacked,
  .detail-realizzazione-page .detail-related-work .section-head-inline {
    height: auto;
    margin-bottom: 44px;
  }

  .home-page .works-section .work-slider {
    margin-top: 0;
  }

  .home-page .blog-preview {
    padding-top: 86px;
    padding-bottom: 86px;
  }

  .home-page .blog-head {
    width: 100%;
    height: auto;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 42px;
  }

  .home-page .blog-head .section-title,
  .home-page .blog-feature h3,
  .home-page .blog-feature .card-media {
    width: 100%;
    height: auto;
    max-width: none;
    transform: none;
    white-space: normal;
  }

  .home-page .blog-feature .card-media {
    height: auto;
    min-height: 320px;
    aspect-ratio: 16 / 7;
  }

  .section-title-inline,
  .section-title-inline strong,
  .section-title-inline span,
  .detail-related-work .section-head-inline .section-title,
  .detail-related-work .section-head-inline .section-title strong {
    width: 100%;
    max-width: none;
    height: auto;
    white-space: normal;
  }

  .btn,
  .btn-small,
  .home-page .intro-section .btn-small,
  .home-page .band-photo .btn-small,
  .home-page .feature-card b,
  .home-page .experience-section .btn-small,
  .home-page .works-head .btn-small,
  .home-page .blog-head .btn-small,
  .home-page .prefooter .btn,
  .detail-related-work .section-head-inline .btn-small {
    width: max-content;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  .page-hero {
    overflow: hidden;
  }

  .page-hero .container {
    padding-right: 0;
    padding-left: 0;
  }

  .page-hero h1,
  .page-hero p {
    overflow-wrap: anywhere;
  }

  .card-grid,
  .work-grid,
  .related-services-grid {
    width: min(calc(100vw - 80px), 980px);
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    margin-right: auto;
    margin-left: auto;
  }

  .content-card,
  .portfolio-card,
  .card-grid > *,
  .work-grid > *,
  .related-services-grid > * {
    width: 100%;
    max-width: none;
  }

  .card-media,
  .portfolio-card .card-media,
  .related-service-icon {
    width: 100%;
  }

  body:not(.no-shared-footer) .prefooter h2,
  body:not(.no-shared-footer) .prefooter p,
  .detail-realizzazione-page .prefooter h2,
  .detail-realizzazione-page .prefooter p,
  .inline-cta h2,
  .detail-inline-cta h2 {
    width: 100%;
    max-width: none;
    height: auto;
    margin-right: 0;
    margin-left: 0;
    transform: none;
    white-space: normal;
  }

  body:not(.no-shared-footer) .footer-main,
  .detail-realizzazione-page .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  }

  body:not(.no-shared-footer) .footer-col,
  .detail-realizzazione-page .footer-col {
    width: auto;
    min-width: 0;
  }

  body:not(.no-shared-footer) .cert-grid,
  .detail-realizzazione-page .cert-grid {
    grid-template-columns: repeat(4, 73px);
    justify-content: start;
  }
}

@media (min-width: 1180px) and (max-width: 1919px) {
  .container,
  .container_big,
  .page-hero .container,
  .home-page .intro-section .container,
  .home-page .experience-section .container,
  .home-page .section-head-stacked,
  .home-page .works-section > .container,
  .home-page .blog-preview .container,
  body:not(.no-shared-footer) .prefooter .container,
  body:not(.no-shared-footer) .footer-main,
  body:not(.no-shared-footer) .footer-bottom,
  .figma-copy-section .container,
  .intro-section .container,
  .experience-section .container,
  .listing-section .container,
  .detail-page .detail-intro .container,
  .detail-page .detail-copy,
  .detail-page .detail-inline-cta .container,
  .detail-realizzazione-page.detail-blog-page .detail-blog-intro .container,
  .detail-realizzazione-page.detail-blog-page .detail-blog-copy,
  .detail-realizzazione-page .detail-realizzazione-intro .container,
  .detail-realizzazione-page .detail-realizzazione-copy,
  .detail-realizzazione-page .detail-related-services .container,
  .detail-realizzazione-page .detail-inline-cta .container,
  .detail-realizzazione-page .prefooter .container {
    width: min(calc(100% - 96px), 1420px);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .intro-section,
  .home-page .experience-section,
  .home-page .works-section,
  .home-page .blog-preview,
  .figma-copy-section,
  .intro-section,
  .experience-section {
    height: auto;
    min-height: 0;
  }

  .home-page .intro-section {
    padding: 100px 0 92px;
  }

  .home-page .experience-section,
  .figma-copy-section {
    padding: 100px 0;
  }

  .home-page .intro-section .container,
  .home-page .experience-section .container,
  .home-page .section-head-stacked {
    gap: 48px;
  }

  .home-page .intro-section .section-title,
  .home-page .experience-section .section-title,
  .home-page .works-head .section-title,
  .home-page .band-photo h2,
  .home-page .blog-head .section-title,
  .section-title,
  .section h2,
  .band h2,
  .figma-copy-section .section-title,
  .detail-copy h1,
  .detail-page .detail-copy h1,
  .detail-realizzazione-page .detail-realizzazione-copy h1 {
    width: 100%;
    height: auto;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    font-size: 46px;
    line-height: 1.18;
    transform: none;
    white-space: normal;
  }

  .home-page .intro-section p,
  .home-page .experience-section p,
  .home-page .works-head p,
  .home-page .band-photo p,
  .copy,
  .copy p,
  .figma-copy-section .copy,
  .figma-copy-section .copy p,
  .detail-copy p,
  .detail-page .detail-copy p,
  .detail-realizzazione-page .detail-realizzazione-copy p {
    width: 100%;
    height: auto;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  .detail-page .detail-intro .detail-copy,
  .detail-realizzazione-page .detail-realizzazione-copy,
  .detail-realizzazione-page.detail-blog-page .detail-blog-copy {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .home-page .services-section,
  .home-page .feature-section,
  .home-page .works-section,
  .home-page .blog-preview,
  .carpenteria-page .figma-services-section,
  .listing-section,
  .detail-related-services,
  .detail-realizzazione-page .detail-related-work,
  .inline-cta {
    padding-right: 48px;
    padding-left: 48px;
    overflow: hidden;
  }

  .home-page .services-section,
  .carpenteria-page .figma-services-section {
    height: auto;
    padding-top: 0;
    padding-bottom: 100px;
  }

  .home-page .services-section .container,
  .home-page .services-section .home-slider,
  .home-page .services-section .slider-viewport,
  .home-page .works-section .work-slider,
  .home-page .works-section .slider-viewport,
  .detail-realizzazione-page .detail-related-work .container,
  .detail-realizzazione-page .detail-related-work .section-head-inline,
  .detail-realizzazione-page .detail-work-slider,
  .detail-realizzazione-page .detail-work-slider .slider-viewport,
  .carpenteria-page .figma-services-section .container,
  .carpenteria-page .figma-services-section .home-slider,
  .carpenteria-page .figma-services-section .slider-viewport {
    left: auto;
    width: min(calc(100vw - 96px), 1420px);
    max-width: none;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    transform: none;
  }

  .home-page .services-section .slider-track,
  .home-page .works-section .slider-track,
  .carpenteria-page .figma-services-section .slider-track,
  .detail-realizzazione-page .detail-work-slider .work-grid {
    gap: 40px;
    --visible-items: 2;
    --slider-gap: 40px;
  }

  .home-page .service-card,
  .home-page .work-card,
  .detail-realizzazione-page .detail-related-work .work-grid .work-card,
  .carpenteria-page .figma-services-section .service-card {
    width: min(calc((100vw - 136px) / 2), 690px);
    max-width: none;
    height: 508px;
    min-height: 508px;
    flex-basis: min(calc((100vw - 136px) / 2), 690px);
  }

  .home-page .service-card span,
  .home-page .work-card :is(span, h3),
  .detail-realizzazione-page .detail-related-work .work-card :is(span, h3),
  .carpenteria-page .figma-services-section .service-card span {
    width: calc(100% - 60px);
    max-width: none;
    font-size: 35px;
    line-height: 1.18;
  }

  .home-page .services-section .slider-arrow,
  .home-page .works-section .slider-arrow,
  .carpenteria-page .figma-services-section .slider-arrow {
    top: 546px;
    bottom: auto;
    display: flex;
  }

  .home-page .services-section .slider-arrow-prev,
  .home-page .works-section .slider-arrow-prev,
  .carpenteria-page .figma-services-section .slider-arrow-prev {
    left: 48px;
  }

  .home-page .services-section .slider-arrow-next,
  .home-page .works-section .slider-arrow-next,
  .carpenteria-page .figma-services-section .slider-arrow-next {
    right: 48px;
    left: auto;
  }

  .home-page .services-section .slider-dots,
  .home-page .works-section .slider-dots,
  .carpenteria-page .figma-services-section .slider-dots {
    position: static;
    width: max-content;
    margin: 46px auto 0;
    transform: none;
  }

  .home-page .band-photo {
    width: min(calc(100% - 96px), 1420px);
    height: auto;
    min-height: 560px;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
  }

  .home-page .band-photo .container {
    width: min(calc(100% - 96px), 1180px);
    height: auto;
    min-height: 560px;
    gap: 48px;
    padding-top: 120px;
    padding-bottom: 90px;
  }

  .home-page .feature-section {
    height: auto;
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .home-page .feature-section .two-cards {
    width: min(calc(100vw - 96px), 1420px);
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 40px;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .feature-card {
    width: 100%;
    height: auto;
    min-height: 640px;
    padding: 300px 44px 52px;
    background-size: 100% 300px;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .home-page .feature-card span,
  .home-page .feature-card p,
  .home-page .feature-card b {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    transform: none;
  }

  .home-page .feature-card span {
    display: block;
    margin-bottom: 26px;
    font-size: 40px;
    line-height: 1.16;
  }

  .home-page .feature-card p {
    margin-bottom: 34px;
  }

  .home-page .feature-recinzioni b,
  .home-page .feature-cancelli b {
    width: max-content;
    max-width: 100%;
  }

  .home-page .works-section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .home-page .works-section .section-head-stacked,
  .detail-realizzazione-page .detail-related-work .section-head-inline {
    height: auto;
    margin-bottom: 56px;
  }

  .home-page .works-section .work-slider {
    margin-top: 0;
  }

  .home-page .blog-preview {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .home-page .blog-head {
    width: 100%;
    height: auto;
    gap: 24px;
    margin-bottom: 48px;
  }

  .home-page .blog-feature .card-media,
  .home-page .blog-feature h3 {
    width: 100%;
    height: auto;
    max-width: none;
    transform: none;
    white-space: normal;
  }

  .home-page .blog-feature .card-media {
    min-height: 380px;
    aspect-ratio: 16 / 6;
  }

  .section-title-inline,
  .section-title-inline strong,
  .section-title-inline span,
  .detail-related-work .section-head-inline .section-title,
  .detail-related-work .section-head-inline .section-title strong,
  .page-hero h1,
  .page-hero p {
    width: 100%;
    max-width: none;
    height: auto;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .btn,
  .btn-small,
  .home-page .intro-section .btn-small,
  .home-page .band-photo .btn-small,
  .home-page .feature-card b,
  .home-page .experience-section .btn-small,
  .home-page .works-head .btn-small,
  .home-page .blog-head .btn-small,
  .home-page .prefooter .btn,
  .detail-related-work .section-head-inline .btn-small {
    width: max-content;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  .card-grid,
  .work-grid,
  .related-services-grid {
    width: min(calc(100vw - 96px), 1420px);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
  }

  .card-grid,
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .related-services-grid,
  .detail-related-services .related-services-grid {
    grid-template-columns: repeat(2, minmax(0, 270px));
    gap: 48px;
    justify-content: center;
  }

  .content-card,
  .portfolio-card,
  .card-grid > *,
  .work-grid > *,
  .related-services-grid > * {
    width: 100%;
    max-width: none;
  }

  .card-media,
  .portfolio-card .card-media,
  .related-service-icon {
    max-width: 100%;
  }

  body:not(.no-shared-footer) .prefooter h2,
  body:not(.no-shared-footer) .prefooter p,
  .detail-realizzazione-page .prefooter h2,
  .detail-realizzazione-page .prefooter p,
  .inline-cta h2,
  .detail-inline-cta h2 {
    width: 100%;
    max-width: none;
    height: auto;
    margin-right: 0;
    margin-left: 0;
    transform: none;
    white-space: normal;
  }

  body:not(.no-shared-footer) .footer-main,
  .detail-realizzazione-page .footer-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
  }

  body:not(.no-shared-footer) .footer-col,
  .detail-realizzazione-page .footer-col {
    width: auto;
    min-width: 0;
  }
}

@media (min-width: 1180px) and (max-width: 1279px) {
  .site-nav,
  .home-page .site-nav {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    z-index: 20;
    width: min(calc(100vw - 64px), 520px);
    max-height: calc(100vh - 110px);
    display: none;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 12px 22px 18px;
    background: #fff;
    border: 1px solid rgba(38, 36, 81, .12);
    box-shadow: 0 22px 44px rgba(20, 20, 36, .16);
    transform: translateX(-50%);
  }

  .site-nav.is-open,
  .home-page .site-nav.is-open {
    display: flex;
  }

  .site-nav .nav-link,
  .site-nav .nav-parent,
  .home-page .site-nav .nav-link,
  .home-page .site-nav .nav-parent,
  body:not(.home-page) .site-nav .nav-link,
  body:not(.home-page) .site-nav .nav-parent {
    min-height: 46px;
    width: 100%;
    justify-content: flex-start;
    padding: 13px 0;
    color: var(--color-ink);
    border-bottom: 1px solid rgba(38, 36, 81, .1);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: normal;
  }

  .site-nav .nav-item {
    width: 100%;
  }

  .site-nav .submenu {
    position: static;
    display: grid;
    min-width: 0;
    gap: 0;
    padding: 0 0 10px 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .site-nav .submenu a,
  .home-page .site-nav .submenu a,
  body:not(.home-page) .site-nav .submenu a {
    min-height: 38px;
    padding: 10px 0;
    color: rgba(38, 36, 81, .82);
    border-bottom: 1px solid rgba(38, 36, 81, .08);
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
  }

  .menu-toggle,
  .home-page .menu-toggle {
    display: inline-grid;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: #fff;
  }

  .header-actions,
  .home-page .header-actions {
    right: 0;
    width: auto;
    min-width: 134px;
    justify-content: flex-end;
    gap: 10px;
  }
}

@media (min-width: 391px) and (max-width: 760px) {
  .container,
  .container_big,
  .page-hero .container,
  .home-page .intro-section .container,
  .home-page .experience-section .container,
  .home-page .section-head-stacked,
  body:not(.no-shared-footer) .prefooter .container,
  body:not(.no-shared-footer) .footer-main,
  body:not(.no-shared-footer) .footer-bottom,
  .figma-copy-section .container,
  .intro-section .container,
  .experience-section .container,
  .listing-section .container,
  .card-grid,
  .work-grid,
  .related-services-grid,
  .detail-realizzazione-page.detail-blog-page .detail-blog-intro .container,
  .detail-realizzazione-page.detail-blog-page .detail-blog-copy,
  .detail-realizzazione-page .detail-realizzazione-intro .container,
  .detail-realizzazione-page .detail-realizzazione-copy,
  .detail-realizzazione-page .detail-related-services .container,
  .detail-realizzazione-page .detail-inline-cta .container,
  .detail-realizzazione-page .prefooter .container,
  .detail-page .detail-intro .container,
  .detail-page .detail-copy,
  .detail-page .detail-inline-cta .container {
    width: min(calc(100% - 40px), 640px);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .services-section,
  .home-page .feature-section,
  .home-page .works-section,
  .home-page .blog-preview,
  .detail-realizzazione-page .detail-related-work,
  .carpenteria-page .figma-services-section,
  .listing-section,
  .detail-related-services,
  .inline-cta {
    padding-right: 10px;
    padding-left: 10px;
  }

  .home-page .services-section .container,
  .home-page .services-section .home-slider,
  .home-page .services-section .slider-viewport,
  .home-page .works-section > .container,
  .home-page .works-section .section-head-stacked,
  .home-page .works-section .work-slider,
  .home-page .works-section .slider-viewport,
  .home-page .blog-preview .container,
  .home-page .blog-head,
  .home-page .blog-head .section-title,
  .home-page .blog-feature .card-media,
  .home-page .blog-feature h3,
  .card-grid,
  .work-grid,
  .detail-realizzazione-page .detail-related-work .container,
  .detail-realizzazione-page .detail-related-work .section-head-inline,
  .detail-realizzazione-page .detail-work-slider,
  .detail-realizzazione-page .detail-work-slider .slider-viewport,
  .carpenteria-page .figma-services-section .container,
  .carpenteria-page .figma-services-section .home-slider,
  .carpenteria-page .figma-services-section .slider-viewport {
    width: min(calc(100vw - 20px), 640px);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .service-card,
  .home-page .work-card,
  .content-card,
  .portfolio-card,
  .card-grid > *,
  .work-grid > *,
  .detail-realizzazione-page .detail-related-work .work-grid .work-card,
  .carpenteria-page .figma-services-section .service-card {
    width: min(calc(100vw - 20px), 640px);
    max-width: none;
    flex-basis: min(calc(100vw - 20px), 640px);
  }

  .home-page .service-card span,
  .home-page .work-card :is(span, h3),
  .content-card h2,
  .content-card h3,
  .content-card p,
  .portfolio-card h2,
  .portfolio-card h3,
  .portfolio-card p,
  .related-service-card strong,
  .related-service-card em,
  .detail-realizzazione-page .detail-related-work .work-card :is(span, h3),
  .carpenteria-page .figma-services-section .service-card span {
    width: calc(100% - 60px);
    max-width: none;
  }

  .home-page .feature-section .two-cards,
  .home-page .feature-card {
    width: min(calc(100vw - 20px), 640px);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .feature-section .two-cards {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .home-page .feature-card {
    background-size: 100% 370px;
  }

  .home-page .feature-card span,
  .home-page .feature-card p,
  .home-page .feature-card b {
    left: 20px;
  }

  .home-page .feature-card span,
  .home-page .feature-card p {
    width: calc(100% - 40px);
    max-width: none;
  }

  .home-page .band-photo .container {
    width: min(calc(100% - 20px), 640px);
    max-width: none;
  }

  .card-grid,
  .work-grid,
  .related-services-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-media,
  .portfolio-card .card-media,
  .related-service-icon {
    width: 100%;
  }

  .home-page .services-section .slider-dots,
  .home-page .works-section .slider-dots {
    left: 50%;
    transform: translateX(-50%);
  }

  body:not(.no-shared-footer) .prefooter h2,
  body:not(.no-shared-footer) .prefooter p,
  .section-title,
  .figma-copy-section .section-title,
  .figma-copy-section .copy,
  .figma-copy-section .copy p,
  .detail-realizzazione-page .prefooter h2,
  .detail-realizzazione-page .prefooter p,
  .detail-realizzazione-page .detail-realizzazione-copy h1,
  .detail-realizzazione-page .detail-realizzazione-copy p,
  .detail-realizzazione-page .detail-inline-cta h2,
  .detail-page .detail-copy h1,
  .detail-page .detail-copy h2,
  .detail-page .detail-copy p,
  .detail-page .detail-inline-cta h2 {
    width: 100%;
    max-width: none;
  }

  .detail-page .detail-intro .detail-copy,
  .detail-realizzazione-page .detail-realizzazione-copy,
  .detail-realizzazione-page.detail-blog-page .detail-blog-copy {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  body:not(.no-shared-footer) .footer-col,
  .detail-realizzazione-page .footer-col {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .home-page .intro-section {
    height: auto;
    min-height: 724px;
    /* padding-top:0 e' il valore esatto del frame Figma mobile (verificato
       con l'audit automatico): il titolo tocca subito .home-claim-band
       sopra. Su richiesta esplicita si aumenta comunque lo spazio,
       deviando volutamente da quella misura per respiro visivo. */
    padding-top: 64px;
    padding-bottom: 60px;
  }

  .home-page .intro-section .section-title {
    height: auto;
  }
}

@media (max-width: 1279px) {
  body:not(.no-shared-footer) .site-footer,
  body.home-page .site-footer,
  body.detail-realizzazione-page .site-footer {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  body:not(.no-shared-footer) .footer-main,
  body.home-page .footer-main,
  body.detail-realizzazione-page .footer-main {
    height: auto;
    min-height: 0;
    display: grid;
    grid-auto-rows: auto;
    align-items: start;
    padding-bottom: 78px;
  }

  body:not(.no-shared-footer) .footer-main > .footer-col:nth-child(3),
  body.home-page .footer-main > .footer-col:nth-child(3),
  body.detail-realizzazione-page .footer-main > .footer-col:nth-child(3) {
    grid-column: 1 / -1;
    width: 100%;
  }

  body:not(.no-shared-footer) .cert-grid,
  body.home-page .cert-grid,
  body.detail-realizzazione-page .cert-grid {
    width: max-content;
    max-width: 100%;
    margin: 14px auto 0;
    justify-content: center;
  }

  body:not(.no-shared-footer) .footer-bottom,
  body.home-page .footer-bottom,
  body.detail-realizzazione-page .footer-bottom {
    height: auto;
    min-height: 0;
    padding-top: 34px;
    padding-bottom: 46px;
  }

  body:not(.no-shared-footer) .footer-bottom p,
  body.home-page .footer-bottom p,
  body.detail-realizzazione-page .footer-bottom p {
    margin: 0;
  }
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) {
  padding: 120px 0;
  overflow: hidden;
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) > .container,
:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .section-head-stacked {
  width: min(1420px, calc(100% - 96px));
  max-width: none;
}

.realizzazioni-page .section-title {
  font-size: 51px;
  line-height: 1.08;
  font-weight: 300;
  text-transform: uppercase;
}

.realizzazioni-page .section-title strong,
.realizzazioni-page .section-title span {
  font-weight: 800;
}

.realizzazioni-page .works-head p {
  max-width: 1390px;
  margin: 70px 0;
  font-size: 17px;
  line-height: 2.15;
  font-weight: 400;
}

.realizzazioni-page .realizzazioni-gallery {
  margin-top: 88px;
  padding-top: 0;
  padding-bottom: 0;
}

.realizzazioni-page .realizzazioni-gallery .detail-gallery-strip {
  position: relative;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .work-slider {
  position: relative;
  left: 50%;
  width: min(1884px, calc(100vw - 20px));
  max-width: none;
  height: 617px;
  margin-top: 80px;
  transform: translateX(-50%);
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-track {
  --slider-gap: 42px;
  gap: var(--slider-gap);
}

:is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card {
  width: 508px;
  height: 508px;
  min-height: 508px;
  flex: 0 0 508px;
  gap: 10px;
  padding: 30px;
  background-image: var(--card-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

:is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card :is(span, h3) {
  width: 448px;
  max-width: 448px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 35px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

:is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card b {
  width: 76px;
  min-width: 76px;
  height: 26px;
  min-height: 26px;
  margin: 0;
  padding: 0 0 2px;
  border-radius: 50px;
  font-family: var(--font-title);
  font-size: 24px;
  line-height: 24px;
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow {
  top: 568px;
  width: 26px;
  min-width: 26px;
  padding: 0;
  font-size: 0;
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow-prev {
  left: 91px;
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow-next {
  left: 1659px;
  right: auto;
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-dots {
  position: absolute;
  top: 584px;
  left: 828px;
  width: 94px;
  height: 18px;
  justify-content: flex-start;
  gap: 20px;
  margin: 0;
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-dots button {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 4px;
  background: #d9d9d9;
}

:is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-dots button.is-active {
  background: var(--color-blue);
}

@media (max-width: 1180px) {
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) {
    padding: 100px 48px;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .work-slider,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-viewport {
    left: auto;
    width: min(calc(100vw - 96px), 1420px);
    height: auto;
    margin-right: auto;
    margin-left: auto;
    transform: none;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-track {
    --visible-items: 2;
    --slider-gap: 40px;
    gap: var(--slider-gap);
  }

  :is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card {
    width: min(calc((100vw - 136px) / 2), 690px);
    max-width: none;
    flex-basis: min(calc((100vw - 136px) / 2), 690px);
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow {
    top: 546px;
    display: flex;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow-prev {
    left: 48px;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow-next {
    right: 48px;
    left: auto;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-dots {
    position: static;
    width: max-content;
    height: 18px;
    margin: 46px auto 0;
    transform: none;
  }
}

@media (max-width: 760px) {
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) {
    height: auto;
    padding: 90px 10px 100px;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) > .container,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .section-head-stacked,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .work-slider,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-viewport {
    width: min(calc(100vw - 20px), 640px);
    margin-right: auto;
    margin-left: auto;
  }

  .realizzazioni-page .section-title {
    font-size: 46px;
    line-height: 1.18;
  }

  .realizzazioni-page .works-head p {
    margin: 34px 0 50px;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .work-slider {
    height: auto;
    margin-top: 50px;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-track {
    --visible-items: 1;
    --slider-gap: 22px;
    gap: var(--slider-gap);
  }

  :is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card {
    width: min(calc(100vw - 20px), 640px);
    flex-basis: min(calc(100vw - 20px), 640px);
  }

  :is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card :is(span, h3) {
    width: calc(100% - 60px);
    max-width: none;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow {
    display: none;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-dots {
    width: max-content;
    height: 18px;
    margin: 46px auto 0;
    transform: none;
  }
}

@media (min-width: 1180px) and (max-width: 1919px) {
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) {
    height: auto;
    min-height: 0;
    padding: 100px 48px;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) > .container,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .section-head-stacked {
    width: min(calc(100vw - 96px), 1420px);
    height: auto;
    margin-right: auto;
    margin-left: auto;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .work-slider,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-viewport {
    left: auto;
    width: min(calc(100vw - 96px), 1420px);
    height: auto;
    margin-right: auto;
    margin-left: auto;
    transform: none;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-track {
    --visible-items: 2;
    --slider-gap: 40px;
    gap: var(--slider-gap);
  }

  :is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card {
    width: min(calc((100vw - 136px) / 2), 690px);
    max-width: none;
    height: 508px;
    min-height: 508px;
    flex-basis: min(calc((100vw - 136px) / 2), 690px);
  }

  :is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card :is(span, h3) {
    width: calc(100% - 60px);
    max-width: none;
    font-size: 35px;
    line-height: 1.18;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow {
    top: 546px;
    bottom: auto;
    display: flex;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow-prev {
    left: 48px;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow-next {
    right: 48px;
    left: auto;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-dots {
    position: static;
    width: max-content;
    margin: 46px auto 0;
    transform: none;
  }
}

@media (min-width: 761px) and (max-width: 1179px) {
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) {
    height: auto;
    min-height: 0;
    padding: 92px 40px 86px;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) > .container,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .section-head-stacked {
    width: 100%;
    max-width: 980px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .work-slider,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-viewport {
    left: auto;
    width: 100%;
    max-width: 980px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    transform: none;
  }

  .realizzazioni-page .works-head .section-title,
  .realizzazioni-page .works-head p {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-track {
    --visible-items: 1.35;
    --slider-gap: 28px;
    gap: var(--slider-gap);
  }

  :is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card {
    width: min(calc((100vw - 108px) / 1.35), 620px);
    max-width: none;
    height: 508px;
    min-height: 508px;
    flex-basis: min(calc((100vw - 108px) / 1.35), 620px);
  }

  :is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card :is(span, h3) {
    width: calc(100% - 60px);
    max-width: none;
    font-size: clamp(30px, 4.2vw, 40px);
    line-height: 1.18;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-arrow {
    display: none;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-dots {
    position: static;
    width: max-content;
    margin: 42px auto 0;
    transform: none;
  }
}

@media (max-width: 760px) {
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) > .container,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .section-head-stacked {
    width: min(370px, 100%);
    margin-right: auto;
    margin-left: auto;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .section-head-stacked {
    height: auto;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .work-slider {
    width: 370px;
    height: 586px;
    margin: 50px auto 0;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-viewport {
    width: 370px;
  }

  :is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card {
    width: 370px;
    height: 508px;
    min-height: 508px;
    flex-basis: 370px;
  }

  :is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card :is(span, h3) {
    width: 310px;
    max-width: 310px;
    font-size: 35px;
    line-height: 48px;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-dots {
    position: absolute;
    top: 568px;
    left: 138px;
    width: 94px;
    height: 18px;
    margin: 0;
    transform: none;
  }
}

@media (min-width: 641px) and (max-width: 760px) {
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) > .container,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .section-head-stacked,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .work-slider,
  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-viewport {
    width: min(calc(100vw - 102px), 640px);
    margin-right: auto;
    margin-left: auto;
  }

  .realizzazioni-page .works-head .section-title,
  .realizzazioni-page .works-head p {
    width: 100%;
    max-width: none;
  }

  :is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card {
    width: min(calc(100vw - 102px), 640px);
    flex-basis: min(calc(100vw - 102px), 640px);
  }

  :is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card :is(span, h3) {
    width: calc(100% - 60px);
    max-width: none;
  }

  :is(.realizzazioni-page .works-section, :is(.blog-page, .resources-page) .blog-listing-section) .slider-dots {
    left: calc(50% - 47px);
  }
}

:is(.blog-page, .resources-page) .blog-listing-section {
  padding: 120px 0;
  overflow: hidden;
}

:is(.blog-page, .resources-page) .blog-listing-section > .container,
:is(.blog-page, .resources-page) .blog-listing-section .section-head-stacked {
  width: min(1420px, calc(100% - 96px));
  max-width: none;
}

:is(.blog-page, .resources-page) .blog-head {
  display: block;
  margin: 0;
}

:is(.blog-page, .resources-page) .blog-head .section-title {
  margin: 0 0 70px;
  font-size: 51px;
  line-height: 1.08;
  font-weight: 300;
  text-transform: uppercase;
}

:is(.blog-page, .resources-page) .blog-head .section-title strong,
:is(.blog-page, .resources-page) .blog-head .section-title span {
  font-weight: 800;
}

:is(.blog-page, .resources-page) .blog-head p {
  max-width: 1390px;
  margin: 0;
  font-size: 17px;
  line-height: 2.15;
  font-weight: 400;
}

:is(.blog-page, .resources-page) .blog-slider {
  position: relative;
  left: 50%;
  width: min(1884px, calc(100vw - 20px));
  max-width: none;
  height: 617px;
  margin-top: 80px;
  transform: translateX(-50%);
}

:is(.blog-page, .resources-page) .blog-slider .slider-track {
  --visible-items: 3.5;
  --slider-gap: 42px;
  gap: var(--slider-gap);
}

:is(.blog-page, .resources-page) .work-card {
  width: 508px;
  height: 508px;
  min-height: 508px;
  flex: 0 0 508px;
  gap: 10px;
  padding: 30px;
  background-image: var(--card-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

:is(.blog-page, .resources-page) .work-card :is(span, h3) {
  width: 448px;
  max-width: 448px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 35px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

:is(.blog-page, .resources-page) .work-card b {
  width: 76px;
  min-width: 76px;
  height: 26px;
  min-height: 26px;
  margin: 0;
  padding: 0 0 2px;
  border-radius: 50px;
  font-family: var(--font-title);
  font-size: 24px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: 2.4px;
}

:is(.blog-page, .resources-page) .blog-slider .slider-arrow {
  top: 568px;
  width: 26px;
  min-width: 26px;
  height: 49px;
  padding: 0;
  font-size: 0;
}

:is(.blog-page, .resources-page) .blog-slider .slider-arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

:is(.blog-page, .resources-page) .blog-slider .slider-arrow-prev {
  left: 91px;
}

:is(.blog-page, .resources-page) .blog-slider .slider-arrow-next {
  right: auto;
  left: 1659px;
}

:is(.blog-page, .resources-page) .blog-slider .slider-dots {
  position: absolute;
  top: 584px;
  left: 828px;
  width: 94px;
  height: 18px;
  justify-content: flex-start;
  gap: 20px;
  margin: 0;
}

:is(.blog-page, .resources-page) .blog-slider .slider-dots button {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 4px;
  background: #d9d9d9;
}

:is(.blog-page, .resources-page) .blog-slider .slider-dots button.is-active {
  background: var(--color-blue);
}

@media (min-width: 1180px) and (max-width: 1919px) {
  :is(.blog-page, .resources-page) .blog-listing-section {
    height: auto;
    min-height: 0;
    padding: 100px 48px;
  }

  :is(.blog-page, .resources-page) .blog-listing-section > .container,
  :is(.blog-page, .resources-page) .blog-listing-section .section-head-stacked,
  :is(.blog-page, .resources-page) .blog-slider,
  :is(.blog-page, .resources-page) .blog-slider .slider-viewport {
    left: auto;
    width: min(calc(100vw - 96px), 1420px);
    height: auto;
    margin-right: auto;
    margin-left: auto;
    transform: none;
  }

  :is(.blog-page, .resources-page) .blog-slider {
    margin-top: 80px;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-track {
    --visible-items: 2;
    --slider-gap: 40px;
    gap: var(--slider-gap);
  }

  :is(.blog-page, .resources-page) .work-card {
    width: min(calc((100vw - 136px) / 2), 690px);
    max-width: none;
    height: 508px;
    min-height: 508px;
    flex-basis: min(calc((100vw - 136px) / 2), 690px);
  }

  :is(.blog-page, .resources-page) .work-card :is(span, h3) {
    width: calc(100% - 60px);
    max-width: none;
    font-size: 35px;
    line-height: 1.18;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-arrow {
    top: 546px;
    bottom: auto;
    display: flex;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-arrow-prev {
    left: 48px;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-arrow-next {
    right: 48px;
    left: auto;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-dots {
    position: static;
    width: max-content;
    margin: 46px auto 0;
    transform: none;
  }
}

@media (min-width: 761px) and (max-width: 1179px) {
  :is(.blog-page, .resources-page) .blog-listing-section {
    height: auto;
    min-height: 0;
    padding: 92px 40px 86px;
  }

  :is(.blog-page, .resources-page) .blog-listing-section > .container,
  :is(.blog-page, .resources-page) .blog-listing-section .section-head-stacked,
  :is(.blog-page, .resources-page) .blog-slider,
  :is(.blog-page, .resources-page) .blog-slider .slider-viewport {
    left: auto;
    width: 100%;
    max-width: 980px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    transform: none;
  }

  :is(.blog-page, .resources-page) .blog-head .section-title,
  :is(.blog-page, .resources-page) .blog-head p {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  :is(.blog-page, .resources-page) .blog-slider {
    margin-top: 80px;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-track {
    --visible-items: 1.35;
    --slider-gap: 28px;
    gap: var(--slider-gap);
  }

  :is(.blog-page, .resources-page) .work-card {
    width: min(calc((100vw - 108px) / 1.35), 620px);
    max-width: none;
    height: 508px;
    min-height: 508px;
    flex-basis: min(calc((100vw - 108px) / 1.35), 620px);
  }

  :is(.blog-page, .resources-page) .work-card :is(span, h3) {
    width: calc(100% - 60px);
    max-width: none;
    font-size: clamp(30px, 4.2vw, 40px);
    line-height: 1.18;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-arrow {
    display: none;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-dots {
    position: static;
    width: max-content;
    margin: 42px auto 0;
    transform: none;
  }
}

@media (max-width: 760px) {
  :is(.blog-page, .resources-page) .blog-listing-section {
    height: auto;
    padding: 90px 10px 100px;
  }

  :is(.blog-page, .resources-page) .blog-listing-section > .container,
  :is(.blog-page, .resources-page) .blog-listing-section .section-head-stacked {
    width: min(370px, 100%);
    margin-right: auto;
    margin-left: auto;
  }

  :is(.blog-page, .resources-page) .blog-slider,
  :is(.blog-page, .resources-page) .blog-slider .slider-viewport {
    width: 370px;
    margin-right: auto;
    margin-left: auto;
  }

  :is(.blog-page, .resources-page) .blog-head .section-title {
    width: 100%;
    max-width: none;
    margin-bottom: 34px;
    font-size: 46px;
    line-height: 1.18;
  }

  :is(.blog-page, .resources-page) .blog-head p {
    width: 100%;
    max-width: none;
  }

  :is(.blog-page, .resources-page) .blog-slider {
    height: 586px;
    margin: 50px auto 0;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-track {
    --visible-items: 1;
    --slider-gap: 22px;
    gap: var(--slider-gap);
  }

  :is(.blog-page, .resources-page) .work-card {
    width: 370px;
    height: 508px;
    min-height: 508px;
    flex-basis: 370px;
  }

  :is(.blog-page, .resources-page) .work-card :is(span, h3) {
    width: 310px;
    max-width: 310px;
    font-size: 35px;
    line-height: 48px;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-arrow {
    display: none;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-dots {
    position: absolute;
    top: 568px;
    left: 138px;
    width: 94px;
    height: 18px;
    margin: 0;
    transform: none;
  }
}

@media (min-width: 641px) and (max-width: 760px) {
  :is(.blog-page, .resources-page) .blog-listing-section > .container,
  :is(.blog-page, .resources-page) .blog-listing-section .section-head-stacked,
  :is(.blog-page, .resources-page) .blog-slider,
  :is(.blog-page, .resources-page) .blog-slider .slider-viewport {
    width: min(calc(100vw - 102px), 640px);
    margin-right: auto;
    margin-left: auto;
  }

  :is(.blog-page, .resources-page) .work-card {
    width: min(calc(100vw - 102px), 640px);
    flex-basis: min(calc(100vw - 102px), 640px);
  }

  :is(.blog-page, .resources-page) .work-card :is(span, h3) {
    width: calc(100% - 60px);
    max-width: none;
  }

  :is(.blog-page, .resources-page) .blog-slider .slider-dots {
    left: calc(50% - 47px);
  }
}

@media (min-width: 761px) and (max-width: 1179px) {
  .home-page .feature-section {
    height: auto;
    padding: 86px 40px;
    overflow: visible;
  }

  .home-page .feature-section .two-cards {
    width: 100%;
    max-width: 980px;
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .feature-card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    justify-content: flex-start;
    padding: 398px 44px 52px;
    background-size: 100% 360px;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .home-page .feature-card span,
  .home-page .feature-card p,
  .home-page .feature-card b {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    transform: none;
  }

  .home-page .feature-card span {
    margin-bottom: 26px;
    color: var(--color-ink);
    font-size: 42px;
    line-height: 1.14;
  }

  .home-page .feature-card p {
    margin-bottom: 32px;
    color: var(--color-text);
    font-size: 17px;
    line-height: 2;
  }

  .home-page .feature-recinzioni b,
  .home-page .feature-cancelli b {
    width: max-content;
    max-width: 100%;
  }
}

@media (min-width: 1180px) and (max-width: 1919px) {
  .home-page .feature-section {
    height: auto;
    padding: 100px 48px;
    overflow: visible;
  }

  .home-page .feature-section .two-cards {
    width: min(calc(100vw - 96px), 1420px);
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .feature-card {
    position: relative;
    width: 100%;
    height: min(56.33vw, 760px);
    min-height: 640px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: clamp(70px, 7vw, 126px) clamp(44px, 6vw, 100px);
    color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .home-page .feature-card span,
  .home-page .feature-card p,
  .home-page .feature-card b {
    position: static;
    z-index: 1;
    height: auto;
    margin: 0;
    transform: none;
  }

  .home-page .feature-card span {
    width: 100%;
    max-width: none;
    margin-bottom: clamp(42px, 6vw, 90px);
    color: #fff;
    font-size: clamp(36px, 3.2vw, 50px);
    line-height: 1.14;
  }

  .home-page .feature-card p {
    width: 100%;
    max-width: none;
    margin-bottom: clamp(34px, 4.2vw, 62px);
    color: #fff;
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.85;
  }

  .home-page .feature-card b {
    color: #fff;
    white-space: nowrap;
  }

  .home-page .feature-recinzioni b {
    width: 297px;
  }

  .home-page .feature-cancelli b {
    width: 260px;
  }
}

@media (max-width: 760px) {
  .home-page .feature-section {
    height: auto;
    padding: 90px 10px;
    overflow: visible;
  }

  .home-page .feature-section .two-cards {
    width: min(calc(100vw - 20px), 640px);
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .feature-card {
    --feature-mobile-image-h: min(370px, calc(100vw - 20px));
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    justify-content: flex-start;
    padding: calc(var(--feature-mobile-image-h) + 50px) 20px 58px;
    color: #fff;
    background-color: var(--color-ink);
    background-size: 100% var(--feature-mobile-image-h);
    background-position: center top;
    background-repeat: no-repeat;
  }

  .home-page .feature-recinzioni {
    background-image: url("../images/figma/feature-recinzioni-mobile-figma-opt.jpg");
    background-image: image-set(url("../images/figma/feature-recinzioni-mobile-figma.webp") type("image/webp"), url("../images/figma/feature-recinzioni-mobile-figma-opt.jpg") type("image/jpeg"));
  }

  .home-page .feature-cancelli {
    background-image: url("../images/figma/feature-cancelli-mobile-figma-opt.jpg");
    background-image: image-set(url("../images/figma/feature-cancelli-mobile-figma.webp") type("image/webp"), url("../images/figma/feature-cancelli-mobile-figma-opt.jpg") type("image/jpeg"));
  }

  .home-page .feature-card span,
  .home-page .feature-card p,
  .home-page .feature-card b {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    transform: none;
  }

  .home-page .feature-card span {
    margin-bottom: 22px;
    color: #fff;
    font-size: 34px;
    line-height: 1.14;
  }

  .home-page .feature-card p {
    margin-bottom: 36px;
    color: #fff;
    font-size: 16px;
    line-height: 2.375;
  }

  .home-page .feature-recinzioni b,
  .home-page .feature-cancelli b {
    height: 42px;
    min-height: 42px;
    max-width: 100%;
    min-width: 0;
    align-self: flex-start;
    padding: 10px 30px;
    white-space: nowrap;
  }

  .home-page .feature-recinzioni b {
    width: 297px;
  }

  .home-page .feature-cancelli b {
    width: 260px;
  }
}

@media (max-width: 760px) {
  .home-page .home-claim-band .btn-small {
    margin-top: 48px;
  }
}


/* Sotto i 391px il container dell'hero ricadeva su margini da 48px
   (regola `.page-hero .container` della fascia <=1180px), mentre il testo
   della pagina resta a 16px: il titolo risultava rientrato rispetto al
   resto del contenuto. Qui i due vengono riallineati. */
@media (max-width: 390px) {
  .page-hero .container {
    width: min(var(--container), calc(100% - 32px));
  }
}


/* Pannello di navigazione mobile: override finale.
   Il selettore .site-nav.is-open e' ridefinito in oltre una decina di
   media query storiche (dropdown centrato in stile "card", posizionato
   con `top: 100%` relativo all'header - la cui altezza varia a sua
   volta per pagina e stato). Anziche' rincorrere ogni blocco storico,
   questo override e' l'ultima parola.

   Nota tecnica: .site-nav e' figlio DOM di .fascia_menu (position:fixed).
   Un tentativo con .site-nav `position:absolute` dentro un .fascia_menu
   alto solo 75px dava un pannello alto quanto il padre (75px) invece
   che quanto il viewport. Un tentativo con .site-nav `position:fixed`
   a piena altezza dentro quel padre fixed da 75px faceva invece sparire
   il paint dell'intero .fascia_menu su Chromium headless (bug di
   compositing "fixed grande dentro fixed piccolo", confermato rimuovendo
   .site-nav dal DOM: l'header torna visibile). La soluzione e' far
   crescere anche .fascia_menu a piena altezza quando il menu e' aperto,
   cosi' padre e figlio hanno le stesse dimensioni ed .site-nav puo'
   restare `position:fixed` senza il disallineamento di dimensioni che
   causava il bug di paint.

   Anche la tipografia dei link (.nav-link/.nav-parent/.submenu) e'
   ridefinita in una decina di media query storiche pensate per fasce
   intermedie (es. 761-1180px) con un layout a barra orizzontale ormai
   sostituito dal pannello a tendina: per questo viene forzata qui sotto
   in modo uniforme su tutta la fascia ≤1180px. */
@media (max-width: 1279px) {
  body.menu-is-open .fascia_menu {
    height: 100vh !important;
    min-height: 100vh !important;
  }

  .site-nav.is-open,
  .home-page .site-nav.is-open {
    position: fixed !important;
    top: var(--nav-panel-top, 75px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    z-index: 1 !important;
    border: 0 !important;
    box-shadow: 0 24px 40px rgba(20, 20, 36, .14) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 8px 24px 32px !important;
    overflow-y: auto !important;
  }

  .site-nav.is-open .nav-link,
  .site-nav.is-open .nav-parent {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px 0 !important;
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(38, 36, 81, .1) !important;
  }

  .site-nav.is-open .nav-item.has-submenu {
    border-bottom: 1px solid rgba(38, 36, 81, .1);
  }

  .site-nav.is-open .nav-item.has-submenu .nav-parent {
    border-bottom: 0 !important;
    padding-bottom: 8px !important;
  }

  .site-nav.is-open .submenu {
    position: static !important;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 0 14px 18px !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .site-nav.is-open .submenu a {
    display: block !important;
    padding: 10px 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: rgba(38, 36, 81, .68) !important;
  }

  /* Il gruppo ha gia' il separatore: evita il doppio bordo sull'ultima voce. */
  .site-nav.is-open .submenu a:last-child {
    border-bottom: 0 !important;
  }

  .site-nav.is-open .nav-cta {
    display: flex !important;
    justify-content: center !important;
    margin: 28px 0 0 !important;
    width: 100% !important;
  }

  /* .site-nav e' figlio di .fascia_menu: il suo z-index viene confrontato
     solo con gli altri figli (logo, icone), non con il resto della
     pagina. Serve quindi alzare esplicitamente logo e icone sopra al
     pannello, che a sua volta resta comunque sopra al contenuto della
     pagina perche' l'intero .fascia_menu ha z-index 40+. */
  .site-logo,
  .header-actions {
    position: relative;
    z-index: 2;
  }

  /* Le icone telefono/mail restano posizionate in absolute su
     coordinate pensate per un header piu' alto: a menu chiuso il
     leggero overflow sotto l'header passava inosservato, a menu
     aperto finiva invece sovrapposto ai link. Non servono comunque
     quando il pannello e' aperto (c'e' il CTA in fondo e la pagina
     Contatti). */
  body.menu-is-open .header-actions .icon-link {
    display: none;
  }
}

/* L'impilamento verticale di hamburger/telefono/mail e' quello corretto
   (Figma, frame mobile 54:238: menuToggle/phoneAction/mailAction
   combaciano solo con questo layout, verificato con l'audit automatico) -
   non va cambiato in orizzontale su nessuna pagina. Sulla home l'header
   e' trasparente sopra la foto, quindi lo stack che si estende oltre i
   75px del logo non si nota. Sulle pagine interne invece lo sfondo blu
   della barra si ferma alla stessa altezza (75px) e le icone sporgono
   visibilmente fuori dal rettangolo colorato: qui sotto si allunga solo
   lo sfondo, non il layout delle icone.

   Bug distinto (su home e pagine interne): tra 576 e 1800px una regola
   azzera il margin-left:auto di .header-actions (pensata per una barra
   orizzontale), cosi' il gruppo resta agganciato subito dopo il logo
   invece che al bordo destro dell'header. Va ripristinato solo per la
   fascia con hamburger, dove non c'e' una .site-nav in mezzo a spingerlo. */
@media (max-width: 1179px) {
  .header-actions,
  .home-page .header-actions {
    margin-left: auto !important;
  }

  /* .fascia_menu resta alto 75px (misura del solo logo): telefono/mail si
     estendono oltre, posandosi sulla foto sotto - esattamente come nel
     frame Figma (icone che galleggiano sulla foto, non su uno sfondo blu
     esteso). Un tentativo precedente prolungava qui il colore di sfondo
     con uno pseudo-elemento, ma non serviva: non era un problema da
     correggere, il comportamento corretto e' proprio questo. */
}

/* La fascia 1180-1279px ora usa lo stesso header compatto da 75px di
   sotto i 1180px (vedi override piu' in basso): --nav-panel-top resta
   quindi al suo fallback di 75px, non serve piu' alzarlo a 170px come
   quando quella fascia aveva ancora l'header a doppia riga. */

/* Il fix sopra copre fino a 1279px (tutta la fascia in cui e' visibile
   l'hamburger, vedi .menu-toggle). Tra 1181 e 1800px esiste anche un
   ulteriore pannello storico "di sicurezza" per larghezze intermedie
   (finestra ridimensionata su desktop): li' un'altra regola nasconde
   sempre il primo link ".nav-link:first-child" (Home) pensando al solo
   utilizzo come barra orizzontale, dove e' ridondante col click sul
   logo. A pannello aperto invece "Home" deve restare visibile. */
.site-nav.is-open > .nav-link:first-child {
  display: flex !important;
}

/* Oltre 1800px (fuori dalla fascia 1180-1800 corretta sopra) sia .site-nav
   che .header-actions hanno margin-left:auto: lo spazio residuo del
   contenitore si divide a meta' tra i due invece di spingere .header-actions
   fino al bordo destro, spezzando la simmetria con il logo a sinistra.
   Azzerando qui il margin-left di .header-actions, resta un solo
   margin-left:auto (quello di .site-nav) a fare da spinta, e il gruppo
   nav+icone torna ad allinearsi esattamente al bordo destro del contenitore
   centrato, come il logo a quello sinistro. */
@media (min-width: 1801px) {
  .header-actions,
  .home-page .header-actions {
    margin-left: 0 !important;
  }
}

/* .carpenteria-page .figma-services-section .service-card ha gia' una
   regola non condizionata da media query che lo rende quadrato (508x508,
   uguale al riferimento desktop a 1920px). Almeno tre fasce responsive
   condivise con altri slider (.home-page .service-card/.work-card,
   .detail-realizzazione-page ...) lo forzano pero' a larghezze diverse
   (620/640/690px secondo la fascia) mantenendo pero' l'altezza a 508px,
   deformandolo in un rettangolo - tanto piu' evidente quanto piu' la
   larghezza calcolata si allontana da 508.
   Su richiesta esplicita il formato quadrato 508x508 resta fisso a
   QUALUNQUE risoluzione, mobile compreso, senza adattare la larghezza al
   viewport (anche dove il frame Figma mobile prevede una card non
   quadrata, 370x508): lo slider scorre semplicemente per mostrare il
   resto della card, invece di restringerla. */
.carpenteria-page .figma-services-section .service-card {
  width: 508px !important;
  height: 508px !important;
  min-height: 508px !important;
  flex: 0 0 508px !important;
}

/* Stesso identico problema (e stessa correzione) sugli altri slider di
   card che condividono le regole responsive appena escluse sopra: home
   (sezione servizi e sezione lavori), listino realizzazioni e "sfoglia
   tutti i lavori" nel dettaglio realizzazione. Tutti gli usi di queste
   classi in questo progetto sono dentro uno slider (verificato via
   grep), mai in una griglia statica - forzare qui la dimensione fissa
   non tocca nessun altro layout. */
.home-page .service-card,
.home-page .work-card,
:is(.realizzazioni-page, :is(.blog-page, .resources-page)) .work-card,
.detail-realizzazione-page .detail-related-work .work-grid .work-card {
  width: 508px !important;
  height: 508px !important;
  min-height: 508px !important;
  flex: 0 0 508px !important;
}

/* Tra 1180 e 1279px (dove compare l'hamburger, vedi .menu-toggle) una
   regola storica per l'intera fascia 1180-1800px teneva l'header alto
   170px con barra orizzontale e icone telefono/mail affiancate - pensata
   per il tratto 1280-1800px dove il menu e' davvero orizzontale, ma mai
   corretta per la porzione 1180-1279px dove invece compare il pannello a
   tendina. Su richiesta esplicita, appena compare l'hamburger l'header
   deve gia' comportarsi come nel mobile finale (banda blu alta solo
   quanto il logo, telefono/mail impilati verticalmente sotto
   l'hamburger, come da Figma): qui si replicano esattamente gli stessi
   valori gia' validi e verificati per la fascia <=1179px. */
@media (min-width: 1180px) and (max-width: 1279px) {
  .fascia_menu,
  .home-page .fascia_menu,
  body:not(.home-page) .fascia_menu {
    min-height: 75px !important;
    height: 75px !important;
    border-bottom: 0 !important;
    overflow: visible !important;
  }

  .header-inner,
  .home-page .header-inner,
  body:not(.home-page) .header-inner {
    min-height: 75px !important;
    height: 75px !important;
    align-items: center !important;
    gap: 18px !important;
    padding-top: 0 !important;
  }

  .header-actions,
  .home-page .header-actions {
    position: relative !important;
    display: block !important;
    width: 40px !important;
    height: 120px !important;
    top: 15px !important;
    right: 0 !important;
    margin-left: auto !important;
  }

  .menu-toggle,
  .home-page .menu-toggle {
    position: absolute !important;
    top: 22px !important;
    right: 0 !important;
    display: inline-grid !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #fff !important;
  }

  .header-actions .icon-link,
  .home-page .header-actions .icon-link {
    position: absolute !important;
    right: 5px !important;
    display: inline-grid !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    background: transparent !important;
  }

  .header-actions .icon-link:nth-of-type(1),
  .home-page .header-actions .icon-link:nth-of-type(1) {
    top: 92px !important;
  }

  .header-actions .icon-link:nth-of-type(2),
  .home-page .header-actions .icon-link:nth-of-type(2) {
    top: 137px !important;
  }
}

/* Tra il testo di intro e la galleria foto (dettaglio-realizzazione) lo
   spazio era di 252px (128px di padding-bottom generico da .section piu'
   96px di padding-top della galleria) identico da 1920px fino a 761px:
   sotto i 760px una regola dedicata lo riduce gia' a 78px (78px = 0 +
   50px + margini naturali del paragrafo), ma quella regola non copriva
   la fascia tablet/desktop. Su richiesta esplicita si estende lo stesso
   trattamento anche li'. */
@media (min-width: 761px) {
  .detail-realizzazione-page .detail-realizzazione-intro {
    padding-bottom: 0;
  }

  .detail-realizzazione-gallery {
    padding-top: 50px;
  }
}

/* Da 761px a 1919px la regola generica ".section h2{font-size:clamp(...)}"
   (pensata per i grandi titoli sezione, es. home) intercetta anche gli h2
   editoriali dentro .detail-copy/.detail-blog-copy, perche' sono comunque
   discendenti di una .section: a parita' di specificita' vince per ordine
   nel file, annullando la differenza con l'h1. Si blinda qui la scala
   tipografica dei contenuti editoriali a tutte le risoluzioni da 761px in su. */
@media (min-width: 761px) {
  .detail-copy h1,
  .detail-blog-copy h1 {
    font-size: 50px !important;
    line-height: 1.36 !important;
  }

  .detail-copy h2,
  .detail-blog-copy h2 {
    font-size: 34px !important;
    line-height: 1.18 !important;
  }

  .detail-copy h3,
  .detail-blog-copy h3 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  .detail-copy h4,
  .detail-blog-copy h4 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .detail-copy h5,
  .detail-blog-copy h5 {
    font-size: 19px !important;
    line-height: 1.4 !important;
  }

  .detail-copy h6,
  .detail-blog-copy h6 {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
}

/* Spazio tra il titolo del preventivo e il testo introduttivo. */
.contact-layout .copy h2 {
  margin-bottom: 24px;
}

/* I titoli delle card blog mantengono la gerarchia h3 e lo stile condiviso. */
:is(.blog-page, .resources-page) .work-card h3 {
  margin: 0;
  color: inherit;
}

/* Il titolo e lo slider devono contribuire all'altezza della sezione. */
.carpenteria-page .figma-services-section,
.carpenteria-page .figma-services-section > .container {
  height: auto;
}
/* Realizzazioni: un solo spazio tra introduzione/galleria e CTA/slider. */
.realizzazioni-page .works-section:has(+ .detail-realizzazione-gallery) {
  padding-bottom: 0;
}

.realizzazioni-page .works-section:has(+ .detail-realizzazione-gallery) .works-head,
.realizzazioni-page .works-section:has(+ .detail-realizzazione-gallery) .works-head p:last-child {
  margin-bottom: 0;
}

.realizzazioni-page .works-section + .detail-realizzazione-gallery {
  padding-top: 50px;
}

.realizzazioni-page .inline-cta:has(+ .works-section) {
  height: auto;
  min-height: 0;
  padding-bottom: 0;
}

.realizzazioni-page .inline-cta + .works-section {
  padding-top: 50px;
}

.realizzazioni-page .inline-cta + .works-section .work-slider {
  margin-top: 0;
}
/* Risorse: distanza compatta tra introduzione e slider condiviso. */
.resources-page .blog-listing-section .work-slider {
  margin-top: 50px;
}

/* Comandi compatti: una card per passo e indicatori che possono andare a capo. */
.slider-arrow:disabled {
  opacity: .35;
  cursor: default;
}

@media (max-width: 1279px) {
  .home-slider[data-slider] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 28px 16px;
    height: auto !important;
  }

  .home-slider[data-slider] > .slider-viewport {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .home-slider[data-slider] > .slider-arrow {
    position: static !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    grid-row: 2;
  }

  .home-slider[data-slider] > .slider-arrow-prev { grid-column: 1; }
  .home-slider[data-slider] > .slider-arrow-next { grid-column: 3; }

  .home-slider[data-slider] > .slider-dots {
    position: static !important;
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
}
/* Frecce alla dimensione originale, dentro un'area touch da 44px. */
@media (max-width: 1279px) {
  .home-slider[data-slider] > .slider-arrow img {
    width: 26px;
    height: 42px;
    flex: 0 0 26px;
    object-fit: contain;
  }
}
/* Gli slider delle pagine elenco seguono il container del testo anche
   nelle larghezze mobili intermedie, senza limiti annidati da 370px. */
@media (max-width: 760px) {
  :is(.realizzazioni-page .works-section, .blog-page .blog-listing-section, .resources-page .blog-listing-section) {
    padding-right: 0;
    padding-left: 0;
  }

  :is(.realizzazioni-page .works-section, .blog-page .blog-listing-section, .resources-page .blog-listing-section) > .container {
    width: min(640px, calc(100% - 60px));
    max-width: none;
  }

  :is(.realizzazioni-page .works-section, .blog-page .blog-listing-section, .resources-page .blog-listing-section) :is(.section-head-stacked, .home-slider, .slider-viewport) {
    width: 100%;
    max-width: none;
    min-width: 0;
    left: auto;
    margin-right: 0;
    margin-left: 0;
    transform: none;
  }
}

@media (max-width: 390px) {
  :is(.realizzazioni-page .works-section, .blog-page .blog-listing-section, .resources-page .blog-listing-section) > .container {
    width: calc(100% - 32px);
  }
}