.button {
  position: relative;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.62rem 1.3rem 0.54rem;
  overflow: hidden;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  isolation: isolate;
  transition:
    background 0.28s var(--ease-out),
    color 0.28s var(--ease-out),
    border-color 0.28s var(--ease-out),
    transform 0.28s var(--ease-out);
}

.button::before {
  content: none;
}

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

.button--ghost {
  background: transparent;
}

.section--dark .button--ghost,
.site-footer .button--ghost {
  color: var(--cream);
}

.section--dark .button,
.site-footer .button {
  color: var(--cream);
}

.section--dark .button:hover,
.site-footer .button:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

.button--icon {
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  background: var(--cream);
  isolation: isolate;
}

.page-hero--claim .page-hero__inner,
.page-hero--about .page-hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
}

.page-hero--claim .page-hero__title,
.page-hero--about .page-hero__title {
  max-width: 12ch;
}

.hero-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: none;
}

.hero-mask__pointer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: clamp(132px, 15vw, 238px);
  aspect-ratio: 1;
  border-radius: 54% 46% 48% 52% / 48% 55% 45% 52%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 0 38px rgba(255, 255, 255, 0.36),
    0 18px 42px rgba(8, 8, 8, 0.16);
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-999px, -999px, 0) translate(-50%, -50%) scale(0.72);
  transition: opacity 0.2s ease;
  will-change: transform, border-radius, opacity;
}

.hero-mask__pointer::after {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: inherit;
  content: "";
}

.hero-mask__pointer.is-visible {
  opacity: 0.94;
}

body.is-hero-bubble-active .custom-cursor,
body.is-hero-bubble-active .custom-cursor.is-visible,
body.is-hero-bubble-active .custom-cursor.is-active {
  opacity: 0;
}

.hero-mask__logo {
  position: absolute;
  left: 50%;
  bottom: clamp(58px, 9vh, 112px);
  z-index: 1;
  width: min(92vw, 1640px);
  height: auto;
  max-height: 44vh;
  object-fit: contain;
  opacity: 0;
  transform: translateX(-50%);
  filter: brightness(0);
  transition: opacity 0.28s var(--ease-out);
  pointer-events: none;
  user-select: none;
}

body.is-hero-bubble-active .hero-mask__logo {
  opacity: 1;
}

body.is-hero-bubble-static .hero-mask__logo {
  opacity: 1;
}

.hero-mask__bubble {
  position: absolute;
  z-index: 2;
  width: var(--bubble-size);
  aspect-ratio: 1;
  margin: 0;
  left: var(--bubble-left);
  top: var(--bubble-top);
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}

.hero-mask__bubble svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.hero-mask__bubble image {
  transform-origin: center;
}

.hero-mask__bubble--one {
  --bubble-size: clamp(520px, 54vw, 990px);
  --bubble-left: -7vw;
  --bubble-top: 8vh;
}

.hero-mask__bubble--two {
  --bubble-size: clamp(500px, 50vw, 920px);
  --bubble-left: 54vw;
  --bubble-top: 12vh;
}

.hero-mask__bubble--three {
  --bubble-size: clamp(230px, 23vw, 430px);
  --bubble-left: 38vw;
  --bubble-top: 47vh;
  z-index: 3;
}

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 34px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(8, 8, 8, 0.65);
  font-size: var(--type-small);
  text-transform: uppercase;
}

.scroll-cue::after {
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) 50% 42% / 1px 15px no-repeat,
    linear-gradient(45deg, transparent 49%, currentColor 50%, transparent 51%) 50% 62% / 11px 11px no-repeat;
  animation: cue-pulse 1.6s ease-in-out infinite;
  content: "";
}

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--ink);
  color: var(--cream);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 24s linear infinite;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.6rem 0.86rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--type-medium);
  line-height: 1;
  text-transform: uppercase;
}

.marquee__item::after {
  content: none;
}

.manifesto__media {
  position: relative;
  min-height: 540px;
}

.media-tile {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tile-a, var(--orange)) 76%, white), transparent),
    repeating-linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.12) 0 1px,
      transparent 1px 13px
    ),
    var(--cream-deep);
  box-shadow: var(--shadow);
}

.media-tile::before {
  position: absolute;
  inset: 16%;
  border: 2px solid rgba(8, 8, 8, 0.24);
  border-radius: 50%;
  content: "";
}

.media-tile::after {
  content: none;
}

.media-tile--large {
  width: 72%;
  aspect-ratio: 0.82;
  right: 0;
  top: 0;
}

.media-tile--small {
  width: 46%;
  aspect-ratio: 1.15;
  left: 0;
  bottom: 6%;
  --tile-a: var(--blue);
  --tile-b: var(--magenta);
}

.media-tile--wide {
  width: 56%;
  aspect-ratio: 1.65;
  right: 12%;
  bottom: 0;
  --tile-a: var(--violet);
  --tile-b: var(--orange);
}

.service-list {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  overflow: visible;
  text-align: center;
}

.service-item {
  --service-fit-scale: 1;
  --service-pop: 1.045;
  --service-overshoot: 1.075;
  --service-rebound: 1.025;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
  width: 100%;
  min-width: 0;
  padding: 2px 0;
  overflow: visible;
  pointer-events: none;
}

.service-item::before {
  content: none;
}

.service-item h3 {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.09em;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  color: var(--ink);
  font-size: clamp(2.45rem, 5.4vw, 4.65rem);
  font-weight: 500;
  line-height: 0.82;
  white-space: nowrap;
  transform-origin: center;
  transform: scale(var(--service-fit-scale));
  transition:
    font-weight 0.18s var(--ease-out),
    transform 0.22s var(--ease-out);
  will-change: transform;
  isolation: isolate;
}

.service-item.is-highlighted h3 {
  font-weight: 900;
  transform: scale(calc(var(--service-fit-scale) * var(--service-pop)));
  animation: service-word-bounce 0.58s var(--ease-out) both;
}

.service-item h3.service-item__title--balanced {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-content: stretch;
  column-gap: 0.12em;
}

.service-item__word {
  position: relative;
  z-index: 2;
  display: inline-block;
}

.service-item__chunk {
  position: relative;
  z-index: 2;
  display: inline-block;
  white-space: nowrap;
}

.service-item__chunk--left {
  justify-self: end;
  text-align: right;
}

.service-item__chunk--right {
  justify-self: start;
  text-align: left;
}

.service-item__media-space {
  position: relative;
  z-index: 1;
  width: 0;
  flex: 0 0 0;
  height: 1em;
  display: block;
  overflow: visible;
  transition:
    width 0.24s var(--ease-out),
    flex-basis 0.24s var(--ease-out);
  pointer-events: none;
}

.service-item.is-highlighted .service-item__media-space {
  width: 2.9em;
  flex-basis: 2.9em;
}

.service-item__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.35em;
  height: 2.18em;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
  clip-path: inset(0);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.64);
  transform-origin: center;
  transition:
    opacity 0.18s var(--ease-out),
    transform 0.38s var(--ease-out);
  pointer-events: none;
}

.service-item.is-highlighted .service-item__video {
  opacity: 1;
  transform: translate(-50%, -52%) scale(1);
}

.service-item p,
.service-item__number,
.service-item__icon {
  display: none;
}

@keyframes service-word-bounce {
  0% {
    transform: scale(var(--service-fit-scale));
  }
  42% {
    transform: scale(calc(var(--service-fit-scale) * var(--service-overshoot)));
  }
  68% {
    transform: scale(calc(var(--service-fit-scale) * var(--service-rebound)));
  }
  100% {
    transform: scale(calc(var(--service-fit-scale) * var(--service-pop)));
  }
}

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

.works-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.project-card {
  --card-a: var(--orange);
  --card-b: var(--teal);
  --card-c: var(--blue);
  position: relative;
  min-height: 440px;
  grid-column: span 4;
  display: grid;
  align-content: space-between;
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  isolation: isolate;
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}

.project-card__link {
  display: grid;
  min-height: 100%;
  align-content: space-between;
  color: inherit;
}

.project-card:nth-child(6n + 1),
.project-card:nth-child(6n + 4) {
  grid-column: span 7;
  min-height: 560px;
}

.project-card:nth-child(6n + 2),
.project-card:nth-child(6n + 5) {
  grid-column: span 5;
}

.project-card:hover {
  transform: translateY(-8px);
  border-color: rgba(8, 8, 8, 0.45);
  box-shadow: var(--shadow);
}

.project-card__visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-a) 78%, white), transparent 45%),
    linear-gradient(315deg, color-mix(in srgb, var(--card-b) 70%, white), transparent 42%),
    var(--cream-deep);
}

.project-card__visual::before {
  position: absolute;
  inset: 11%;
  border: 2px solid rgba(8, 8, 8, 0.32);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.12) 0 1px,
      transparent 1px 14px
    ),
    rgba(255, 255, 255, 0.18);
  clip-path: polygon(0 14%, 82% 0, 100% 78%, 18% 100%);
  transition:
    transform 0.45s var(--ease-out),
    clip-path 0.45s var(--ease-out);
  content: "";
}

.project-card__visual::after {
  position: absolute;
  right: 9%;
  bottom: 12%;
  width: clamp(86px, 14vw, 190px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 33% 28%, rgba(255, 255, 255, 0.9), transparent 19%),
    color-mix(in srgb, var(--card-c) 84%, white);
  border: 2px solid rgba(8, 8, 8, 0.32);
  border-radius: 50%;
  transition:
    transform 0.45s var(--ease-out),
    border-radius 0.45s var(--ease-out);
  content: "";
}

.project-card:hover .project-card__visual::before {
  transform: rotate(-4deg) scale(1.05);
  clip-path: polygon(12% 0, 100% 10%, 88% 100%, 0 82%);
}

.project-card:hover .project-card__visual::after {
  border-radius: 20%;
  transform: translate(-14px, -12px) rotate(12deg);
}

.project-card--media {
  background: var(--ink);
  color: var(--cream);
}

.project-card--media::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(8, 8, 8, 0.78), rgba(8, 8, 8, 0.1) 58%),
    linear-gradient(135deg, rgba(255, 90, 31, 0.2), transparent 42%);
  content: "";
}

.project-card--media .project-card__visual {
  z-index: -2;
  background: var(--cream-deep);
}

.project-card--media .project-card__visual::before,
.project-card--media .project-card__visual::after {
  content: none;
}

.project-card__visual video,
.project-card__visual img,
.project-card__visual iframe,
.horizontal-panel__media video,
.horizontal-panel__media img,
.horizontal-panel__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card__visual iframe.vimeo-embed,
.horizontal-panel__media iframe.vimeo-embed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 114%;
  height: 114%;
  max-width: none;
  transform: translate(-50%, -50%);
}

.project-card__top,
.project-card__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.project-card__number {
  font-size: var(--type-large);
  line-height: 0.78;
}

.project-card__meta {
  max-width: 220px;
  font-size: var(--type-small);
  text-align: right;
  text-transform: uppercase;
}

.project-card__title {
  max-width: 10ch;
  margin-top: clamp(80px, 15vw, 180px);
}

.project-card__description {
  max-width: 460px;
  color: rgba(8, 8, 8, 0.72);
}

.project-card--media .project-card__description {
  color: rgba(242, 232, 218, 0.78);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(30px, 5vw, 70px);
}

.filter-button {
  min-height: 42px;
  padding: 0.78rem 1rem 0.68rem;
  border: 1px solid currentColor;
  background: transparent;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-small);
  font-weight: 400;
  transition:
    background 0.25s var(--ease-out),
    color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out);
}

.filter-button:hover,
.filter-button.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.horizontal-wrap {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}

.horizontal-track {
  display: flex;
  width: max-content;
  min-height: 100svh;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(80px, 9vw, 140px) var(--gutter);
}

.horizontal-panel {
  position: relative;
  width: min(82vw, 880px);
  min-height: min(68vh, 620px);
  display: grid;
  align-content: end;
  gap: 18px;
  padding: clamp(22px, 4vw, 48px);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, var(--panel-a, var(--orange)), transparent 52%),
    linear-gradient(315deg, var(--panel-b, var(--blue)), transparent 44%),
    rgba(255, 255, 255, 0.06);
  isolation: isolate;
  overflow: hidden;
}

.horizontal-panel__number {
  font-family: var(--font-display);
  font-size: var(--type-large);
  line-height: 0.78;
}

.horizontal-panel p {
  color: rgba(242, 232, 218, 0.76);
}

.horizontal-panel__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--cream-deep);
}

.horizontal-panel--media::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(8, 8, 8, 0.84), rgba(8, 8, 8, 0.16) 58%),
    linear-gradient(135deg, rgba(255, 90, 31, 0.22), transparent 44%);
  content: "";
}

.horizontal-panel--media {
  background: var(--ink);
}

.reel-card {
  position: relative;
  display: grid;
  min-height: clamp(420px, 62vw, 760px);
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(255, 90, 31, 0.82), transparent 46%),
    linear-gradient(315deg, rgba(23, 76, 255, 0.78), transparent 42%),
    repeating-linear-gradient(
      -8deg,
      rgba(8, 8, 8, 0.16) 0 2px,
      transparent 2px 16px
    ),
    var(--ink);
  color: var(--cream);
}

.reel-card::before {
  position: absolute;
  inset: 10%;
  border: 2px solid rgba(242, 232, 218, 0.46);
  clip-path: polygon(8% 0, 100% 16%, 92% 100%, 0 82%);
  content: "";
}

.play-button {
  position: relative;
  z-index: 2;
  width: clamp(96px, 12vw, 160px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--cream);
  background: rgba(242, 232, 218, 0.12);
  color: var(--cream);
  border-radius: 50%;
  backdrop-filter: blur(14px);
}

.play-button::before {
  width: 0;
  height: 0;
  margin-left: 8%;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 26px solid currentColor;
  content: "";
}

.client-marquee {
  overflow: hidden;
  border-block: 0;
}

.client-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.client-chip {
  padding: clamp(20px, 2.7vw, 38px) clamp(22px, 3vw, 44px);
  color: black;
  font-size: var(--type-large);
  line-height: 0.9;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out);
}

.client-chip:hover {
  color: var(--orange);
}

.home-clients {
  background: var(--cream);
  color: white ;
}

.home-clients .client-chip {
  color: black;
  font-weight: 450;
}

.home-selected {
  background: var(--cream);
  padding-block: clamp(52px, 7vw, 110px);
}

@supports (content-visibility: auto) {
  .home-clients,
  .project-collection-section,
  .contact-band {
    content-visibility: auto;
    contain-intrinsic-size: 1px 680px;
  }
}

.home-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px) clamp(18px, 3vw, 34px);
}

.home-project {
  display: grid;
  gap: 10px;
}

.home-project__link {
  display: grid;
  gap: 10px;
  color: inherit;
}

.home-project__link .home-project__media {
  transition:
    transform 0.35s var(--ease-out),
    filter 0.35s var(--ease-out);
}

.home-project__link:hover .home-project__media {
  filter: saturate(1.08);
  transform: translateY(-4px);
}

.home-project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream-deep);
  contain: paint;
}

.home-project__media img,
.home-project__media video,
.home-project__media iframe {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-project__media iframe.vimeo-embed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 114%;
  height: 114%;
  max-width: none;
  transform: translate(-50%, -50%);
}

.home-project[data-project-id="installation-cassina-installazione"] .home-project__media video {
  transform: scale(1.16);
  transform-origin: center;
}

.home-project[data-project-id="installation-cassina-installazione"] .home-project__media iframe.vimeo-embed {
  width: 260%;
  height: 118%;
}

.home-project[data-project-id="installation-fabiana-filippi"] .home-project__media iframe.vimeo-embed {
  width: 118%;
  height: 300%;
}

.home-project__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(20px, 4vw, 58px);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  text-transform: uppercase;
}

.home-project__placeholder strong {
  max-width: 8ch;
  font-size: clamp(3.1rem, 8vw, 7.2rem);
  line-height: 0.86;
  letter-spacing: 0;
}

.home-project__placeholder span {
  font-size: clamp(1rem, 1.6vw, 1.42rem);
  line-height: 1;
}

.home-project__meta {
  margin-top: 4px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-small);
  line-height: 1;
  text-transform: uppercase;
}

.home-project h3 {
  max-width: 100%;
  color: var(--ink);
}

.project-collection-section {
  background: var(--cream);
}

.project-collection__footer {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding-block: clamp(58px, 8vw, 120px) clamp(16px, 3vw, 44px);
  text-align: center;
}

.project-collection__kicker {
  color: rgba(8, 8, 8, 0.56);
  font-family: var(--font-body);
  font-size: var(--type-small);
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
}

.project-collection__title {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-medium);
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}

.project-detail-hero {
  min-height: min(680px, 76vh);
}

.project-detail-hero__inner {
  grid-template-columns: minmax(0, 0.82fr) minmax(280px, 0.42fr);
}

.project-detail-meta {
  display: grid;
  gap: 22px;
  color: var(--ink);
}

.project-detail-meta div {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.project-detail-meta dt {
  margin-bottom: 8px;
  color: rgba(8, 8, 8, 0.58);
  font-family: var(--font-display);
  font-size: var(--type-small);
  line-height: 1;
  text-transform: uppercase;
}

.project-detail-meta dd {
  margin: 0;
  font-size: var(--type-medium);
  line-height: 1.06;
}

.project-detail-cover {
  padding-block: clamp(22px, 4vw, 64px);
  background: var(--cream);
}

.project-detail-cover__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}

.project-detail-cover__asset,
.project-gallery__media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.project-detail-copy__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(300px, 0.72fr);
  gap: clamp(30px, 7vw, 120px);
  align-items: start;
}

.project-detail-copy__body,
.project-detail-copy__text,
.project-detail__credits {
  display: grid;
  gap: 18px;
}

.project-detail-copy__text {
  max-width: 60ch;
  font-size: clamp(1.28rem, 1.55vw, 1.72rem);
  line-height: 1.18;
}

.project-detail-story__stack {
  display: grid;
  gap: clamp(38px, 7vw, 112px);
}

.project-detail-story__row {
  display: grid;
  grid-template-columns: minmax(260px, 0.54fr) minmax(0, 0.86fr);
  gap: clamp(24px, 6vw, 92px);
  align-items: center;
}

.project-detail-story__row--reverse {
  grid-template-columns: minmax(0, 0.86fr) minmax(260px, 0.54fr);
}

.project-detail-story__row--reverse .project-detail-story__media {
  order: -1;
}

.project-detail-story__row--text-only {
  grid-template-columns: minmax(0, 0.72fr);
}

.project-detail-story__copy {
  display: grid;
  gap: clamp(18px, 2.2vw, 30px);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.project-detail-story__copy p {
  max-width: 38ch;
  font-size: clamp(1.28rem, 1.58vw, 1.75rem);
  line-height: 1.18;
}

.project-detail-story__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
}

.project-detail-story__asset {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.project-detail-motion {
  padding-block: clamp(24px, 4vw, 64px) clamp(58px, 8vw, 124px);
}

.motion-detail-stack {
  display: grid;
  gap: clamp(44px, 7vw, 112px);
}

.motion-detail-intro,
.motion-detail-section--split {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(260px, 0.36fr);
  gap: clamp(24px, 5vw, 78px);
  align-items: center;
}

.motion-detail-split {
  display: grid;
  grid-template-columns: minmax(0, 0.52fr) minmax(260px, 0.44fr);
  gap: clamp(24px, 5vw, 76px);
  align-items: center;
}

.motion-detail-split--poster {
  grid-template-columns: minmax(240px, 0.46fr) minmax(280px, 0.44fr);
  max-width: 1080px;
}

.motion-detail-split--phone-left {
  grid-template-columns: minmax(190px, 0.26fr) minmax(300px, 0.62fr);
  max-width: 940px;
}

.motion-detail-split--phone-right {
  grid-template-columns: minmax(300px, 0.58fr) minmax(190px, 0.28fr);
  max-width: 980px;
  margin-left: auto;
}

.motion-detail-section--reverse {
  grid-template-columns: minmax(260px, 0.36fr) minmax(0, 0.72fr);
}

.motion-detail-section--reverse .motion-detail-copy {
  order: 2;
}

.motion-detail-section {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
}

.motion-detail-copy {
  display: grid;
  gap: 14px;
  color: var(--ink);
}

.motion-detail-copy p {
  max-width: 42ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 1.58vw, 1.76rem);
  line-height: 1.16;
}

.motion-detail-copy--center {
  justify-items: center;
  text-align: center;
}

.motion-detail-copy--center p {
  max-width: 86ch;
}

.motion-detail-copy--compact p {
  max-width: 36ch;
  font-size: clamp(1.16rem, 1.38vw, 1.5rem);
  line-height: 1.16;
}

.motion-detail-copy--center.motion-detail-copy--compact p {
  max-width: 94ch;
}

.motion-detail-copy--align-end {
  justify-items: end;
  text-align: right;
}

.motion-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.1vw, 28px);
  align-items: start;
}

.motion-detail-grid[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.motion-detail-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px;
}

.motion-detail-grid--verticals {
  max-width: 980px;
  margin-inline: auto;
}

.motion-detail-media {
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

.motion-detail-media--wide {
  aspect-ratio: 16 / 9;
}

.motion-detail-media--portrait {
  aspect-ratio: 9 / 16;
  background: transparent;
}

.motion-detail-media--lead {
  width: 100%;
}

.motion-detail-media--full {
  width: min(100%, 1040px);
  margin-inline: auto;
}

.motion-detail-media--square {
  aspect-ratio: 1 / 1;
}

.motion-detail-media--force-portrait,
.motion-detail-media--phone {
  aspect-ratio: 9 / 16;
  background: transparent;
}

.motion-detail-media--phone {
  width: min(100%, 280px);
  justify-self: center;
}

.motion-detail-media--contain {
  background: transparent;
}

.motion-detail-media__asset {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.motion-detail-media--contain .motion-detail-media__asset {
  object-fit: contain;
}

.project-detail--motion-case {
  background: var(--cream);
}

.project-detail--motion-case .project-detail-hero {
  min-height: min(620px, 68vh);
  padding-bottom: clamp(58px, 8vw, 116px);
}

.project-detail--motion-case .project-detail-hero__inner,
.motion-case-detail .container {
  width: min(100%, 1180px);
}

.project-detail--motion-case .project-detail-hero__inner {
  grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.42fr);
}

.project-detail--motion-case .page-hero__title {
  max-width: 10ch;
}

.project-detail--motion-case .project-detail-meta dd {
  font-size: clamp(1.05rem, 1.22vw, 1.3rem);
  line-height: 1.1;
}

.motion-case-detail {
  padding-block: clamp(8px, 1.8vw, 32px) clamp(74px, 10vw, 150px);
}

.motion-case-layout {
  display: grid;
  gap: clamp(54px, 7vw, 110px);
}

.motion-case-row {
  display: grid;
  align-items: center;
  gap: clamp(28px, 4.8vw, 72px);
}

.motion-case-row--intro,
.motion-case-row--split {
  grid-template-columns: minmax(0, 0.68fr) minmax(260px, 0.34fr);
}

.motion-case-row--reverse {
  grid-template-columns: minmax(270px, 0.38fr) minmax(0, 0.58fr);
}

.motion-case-row--text-left {
  grid-template-columns: minmax(250px, 0.42fr) minmax(0, 0.56fr);
}

.motion-case-row--phone-left {
  grid-template-columns: minmax(160px, 0.28fr) minmax(300px, 0.62fr);
  width: min(100%, 900px);
  margin-left: clamp(0px, 5vw, 74px);
}

.motion-case-row--phone-right {
  grid-template-columns: minmax(300px, 0.62fr) minmax(160px, 0.28fr);
  width: min(100%, 980px);
  margin-left: auto;
}

.motion-case-block {
  display: grid;
  gap: clamp(22px, 3vw, 38px);
}

.motion-case-media-row,
.motion-case-grid {
  display: grid;
  gap: clamp(22px, 3vw, 42px);
}

.motion-case-media-row--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.motion-case-media-row--two,
.motion-case-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.motion-case-media-row--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.motion-case-media {
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

.motion-case-media__asset {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.motion-case-media--wide,
.motion-case-media--main,
.motion-case-media--thumb {
  aspect-ratio: 16 / 9;
}

.motion-case-media--square {
  aspect-ratio: 1 / 1;
}

.motion-case-media--cinema {
  aspect-ratio: 2 / 1;
}

.motion-case-media--main {
  width: min(100%, 1040px);
  margin-inline: auto;
}

.motion-case-media--poster,
.motion-case-media--vertical {
  aspect-ratio: 9 / 16;
}

.motion-case-media--vertical-large {
  width: min(100%, 430px);
}

.motion-case-media--narrow {
  width: min(100%, 260px);
  justify-self: center;
}

.motion-case-media--phone {
  width: min(100%, 260px);
  aspect-ratio: 9 / 16;
  justify-self: center;
  overflow: visible;
  background: transparent;
}

.motion-case-media--phone .motion-case-media__asset,
.motion-case-media--contain .motion-case-media__asset {
  object-fit: contain;
}

.motion-case-media--transparent {
  background: transparent;
}

.motion-case-media--paper {
  background: #fff;
}

.motion-case-copy {
  display: grid;
  gap: 16px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.motion-case-copy p {
  max-width: 82ch;
  color: var(--ink);
  font-size: clamp(1.28rem, 1.5vw, 1.64rem);
  line-height: 1.16;
}

.motion-case-row .motion-case-copy p,
.motion-case-copy--right p {
  max-width: 32ch;
  font-size: clamp(1.36rem, 1.68vw, 1.86rem);
  line-height: 1.14;
}

.motion-case-copy--center {
  justify-items: center;
  text-align: center;
}

.motion-case-copy--center p {
  max-width: 94ch;
}

.motion-case-copy--right {
  justify-items: end;
  text-align: right;
}

.motion-case-copy--right p {
  max-width: 64ch;
}

.motion-case-copy--compact p {
  max-width: 42ch;
}

.project-detail--motion-case .project-detail-credits {
  padding-block: clamp(52px, 7vw, 96px) clamp(90px, 12vw, 160px);
}

.project-detail--motion-case .project-detail-credits .container {
  width: min(100%, 860px);
}

.project-detail--motion-case .project-detail-next {
  padding-bottom: clamp(56px, 8vw, 96px);
}

.project-detail--comune-milano .motion-case-layout {
  width: 100%;
  margin-inline: auto;
}

.project-detail--comune-milano .motion-case-row--poster {
  grid-template-columns: minmax(260px, 0.48fr) minmax(250px, 0.42fr);
}

.project-detail--comune-milano .motion-case-media--poster {
  width: min(100%, 520px);
}

.project-detail--comune-milano .motion-case-row--comune-crossmedia > .motion-case-media {
  justify-self: end;
}

.project-detail--kartell-catalogo .page-hero__title,
.project-detail--millefiori-machine .page-hero__title {
  max-width: 11ch;
}

.project-detail--kartell-catalogo .motion-case-layout,
.project-detail--millefiori-machine .motion-case-layout,
.project-detail--radio-105 .motion-case-layout {
  width: 100%;
  margin-inline: auto;
}

.project-detail--kartell-catalogo .motion-case-layout {
  width: min(100%, 1480px);
}

  .project-detail--kartell-catalogo .motion-case-row--catalogo-exploration {
  grid-template-columns: minmax(0, min(54vw, 980px)) minmax(280px, 1fr);
  align-items: center;
}

.project-detail--kartell-catalogo .motion-case-row--catalogo-iconic {
  grid-template-columns: minmax(280px, 1fr) minmax(0, min(54vw, 980px));
  align-items: center;
}

.project-detail--kartell-catalogo .motion-case-media-row--catalogo-first {
  width: 100%;
  max-width: none;
  gap: clamp(16px, 1.8vw, 28px);
}

.project-detail--kartell-catalogo .motion-case-media-row--catalogo-second {
  width: 100%;
  max-width: none;
  gap: clamp(16px, 1.8vw, 28px);
  margin-left: auto;
}

.project-detail--kartell-catalogo .motion-case-row--phone-left {
  margin-left: 0;
}

.project-detail--millefiori-machine .motion-case-media-row--three {
  gap: clamp(24px, 3.5vw, 48px);
}

.project-detail--millefiori-machine .motion-case-media-row--store {
  align-items: stretch;
}

.project-detail--millefiori-machine .motion-case-media-row--store .motion-case-media {
  aspect-ratio: 3 / 4;
}

.project-detail--millefiori-machine .motion-case-media--store-video {
  width: 100%;
  aspect-ratio: 3 / 4;
  justify-self: stretch;
}

.project-detail--millefiori-machine .motion-case-media-row--store .motion-case-media.motion-case-media--store-video {
  aspect-ratio: 3 / 4;
}

.project-detail--millefiori-machine .motion-case-media--store-video .motion-case-media__asset {
  object-fit: cover;
}

.project-detail--millefiori-machine .motion-case-copy--factory {
  justify-items: end;
  text-align: right;
}

.project-detail--millefiori-machine .motion-case-row--phone-left {
  width: min(100%, 880px);
}

.project-detail--millefiori-machine .motion-case-copy--store {
  justify-items: end;
  text-align: right;
}

.project-detail--radio-105 .motion-case-grid {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.project-detail--radio-105 .motion-case-media--main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.project-detail--radio-105 .motion-case-media--radio-hero {
  aspect-ratio: 16 / 9;
}

.project-detail--radio-105 .motion-case-block > .motion-case-copy {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.project-detail--radio-105 .motion-case-copy--center p {
  max-width: 88ch;
}

.project-detail--mondoffice .motion-case-layout,
.project-detail--milano-design-city .motion-case-layout,
.project-detail--sigle-105 .motion-case-layout,
.project-detail--kartell-hhh .motion-case-layout {
  width: 100%;
  margin-inline: auto;
}

.project-detail--mondoffice .motion-case-media-row--three,
.project-detail--kartell-hhh .motion-case-media-row--three {
  gap: clamp(26px, 4vw, 56px);
}

.project-detail--milano-design-city .page-hero__title {
  max-width: 12ch;
}

.project-detail--milano-design-city .motion-case-media-row--three {
  gap: clamp(16px, 2.4vw, 28px);
}

.project-detail--milano-design-city .motion-case-row--intro {
  grid-template-columns: minmax(0, 0.66fr) minmax(420px, 0.34fr);
  gap: clamp(24px, 2.4vw, 36px);
}

.project-detail--milano-design-city .motion-case-row--posters {
  grid-template-columns: minmax(260px, 0.4fr) minmax(0, 0.56fr);
}

.project-detail--milano-design-city .motion-case-row--intro .motion-case-copy p {
  max-width: 38ch;
  font-size: clamp(1.42rem, 1.78vw, 1.98rem);
}

.project-detail--milano-design-city .motion-case-row--posters .motion-case-copy p {
  max-width: 36ch;
  font-size: clamp(1.36rem, 1.68vw, 1.86rem);
}

.project-detail--kartell-hhh .page-hero__title {
  max-width: 9ch;
}

.project-detail--kartell-hhh .motion-case-copy--intro p {
  max-width: 108ch;
}

.project-detail--kartell-hhh .motion-case-grid--three {
  gap: clamp(18px, 2.6vw, 34px);
}

.project-detail--kartell-hhh .motion-case-row--phone-right {
  align-items: center;
}

.project-detail--sigle-105 .motion-case-copy {
  margin-left: clamp(0px, 1.8vw, 18px);
}

.project-detail--sigle-105 .motion-case-row--sigle-graphic {
  grid-template-columns: minmax(250px, 0.42fr) minmax(0, 0.58fr);
}

.project-detail--sigle-105 .motion-case-row--sigle-examples {
  grid-template-columns: minmax(0, 0.58fr) minmax(250px, 0.42fr);
}

.project-detail--sigle-105 .motion-case-row--sigle-graphic > .motion-case-media,
.project-detail--sigle-105 .motion-case-row--sigle-examples > .motion-case-media {
  width: 100%;
}

.project-detail--sigle-105 .motion-case-media--main {
  width: min(100%, 1040px);
}

.project-detail--production-layout .motion-case-layout {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.project-detail--production-layout .motion-case-media--main {
  width: 100%;
}

.project-detail--production-layout .motion-case-copy p {
  max-width: 64ch;
}

.project-detail--production-layout .motion-case-row .motion-case-copy p,
.project-detail--production-layout .motion-case-copy--right p {
  max-width: 32ch;
}

.project-detail--production-layout .motion-case-copy--center p {
  max-width: 92ch;
}

.project-detail--interni-2026 .motion-case-layout--interni {
  gap: clamp(42px, 5.4vw, 86px);
}

.project-detail--interni-2026 .motion-case-row {
  gap: clamp(24px, 3.6vw, 54px);
}

.project-detail--interni-2026 .motion-case-row--interni-intro {
  grid-template-columns: minmax(0, 0.62fr) minmax(240px, 0.38fr);
}

.project-detail--interni-2026 .motion-case-row--interni-overview {
  grid-template-columns: minmax(0, 0.62fr) minmax(220px, 0.38fr);
  align-items: start;
}

.project-detail--interni-2026 .motion-case-row--interni-overview > div {
  display: grid;
  gap: clamp(18px, 2.2vw, 30px);
}

.project-detail--interni-2026 .motion-case-media--interni-reel {
  width: 100%;
  justify-self: end;
}

.project-detail--interni-2026 .motion-case-row--interni-phone {
  grid-template-columns: minmax(0, 0.68fr) minmax(220px, 0.32fr);
  align-items: center;
}

.project-detail--interni-2026 .motion-case-media-row--interni-phone {
  grid-template-columns: minmax(0, 0.62fr) minmax(150px, 0.38fr);
  align-items: stretch;
}

.project-detail--interni-2026 .motion-case-media--interni-animation {
  aspect-ratio: 1 / 1;
}

.project-detail.project-detail--interni-2026 .motion-case-media--phone.motion-case-media--interni-phone-mockup {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  place-items: center;
}

.project-detail--interni-2026 .motion-case-media--interni-phone-mockup .motion-case-media__asset {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.project-detail--interni-2026 .motion-case-row--interni-interview {
  grid-template-columns: minmax(240px, 0.4fr) minmax(0, 0.6fr);
}

.project-detail--interni-2026 .motion-case-copy p,
.project-detail--ferrari-trento .motion-case-copy p,
.project-detail--millefiori-campaign .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--interni-2026 .motion-case-row .motion-case-copy p,
.project-detail--interni-2026 .motion-case-copy--right p {
  max-width: 34ch;
}

.project-detail--interni-2026 .motion-case-copy--interni-overview {
  justify-items: end;
  text-align: right;
}

.project-detail--interni-2026 .motion-case-copy--interni-overview p {
  max-width: 40ch;
}

.project-detail--interni-2026 .motion-case-media--interni-main {
  width: min(100%, 52%);
  margin-inline: 0 auto;
  justify-self: start;
}

.project-detail--interni-2026 .project-detail-credits {
  padding-block: clamp(44px, 5.6vw, 76px) clamp(78px, 10vw, 130px);
}

.project-detail--cassina-human .page-hero__title,
.project-detail--interni-2026 .page-hero__title,
.project-detail--ferrari-trento .page-hero__title,
.project-detail--millefiori-campaign .page-hero__title,
.project-detail--cassina-pov .page-hero__title,
.project-detail--geolier-blanco .page-hero__title {
  max-width: 11ch;
}

.project-detail--cassina-human .project-detail-hero {
  min-height: min(620px, 66vh);
}

.project-detail--cassina-human .cassina-human-detail {
  padding-block: clamp(10px, 1.6vw, 28px) clamp(52px, 5.6vw, 108px);
}

.project-detail--cassina-human .cassina-human-detail .container {
  width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
  max-width: none;
}

.cassina-human-layout {
  display: grid;
  gap: clamp(48px, 5.2vw, 92px);
}

.cassina-human-intro,
.cassina-human-text-pair {
  display: grid;
  align-items: center;
  gap: clamp(28px, 3.8vw, 56px);
}

.cassina-human-intro {
  grid-template-columns: minmax(0, 0.58fr) minmax(250px, 0.42fr);
}

.cassina-human-text-pair--text-left {
  width: 100%;
  grid-template-columns: minmax(170px, 0.28fr) minmax(0, 0.72fr);
  margin-left: 0;
}

.cassina-human-text-pair--text-right {
  width: 100%;
  grid-template-columns: minmax(0, 0.7fr) minmax(160px, 0.3fr);
}

.cassina-human-text-pair--wide {
  width: 100%;
  grid-template-columns: minmax(170px, 0.28fr) minmax(0, 0.72fr);
  margin-left: 0;
}

.cassina-human-pair,
.cassina-human-triptych {
  display: grid;
  gap: clamp(18px, 2.4vw, 44px);
  align-items: stretch;
}

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

.cassina-human-pair--medium {
  --cassina-pair-height: clamp(240px, 25vw, 500px);
  grid-template-columns: minmax(0, 0.77fr) minmax(0, 1fr);
}

.cassina-human-pair--compact {
  --cassina-pair-height: clamp(240px, 27vw, 540px);
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
}

.cassina-human-pair--wide {
  --cassina-pair-height: clamp(210px, 21vw, 430px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cassina-human-pair--feature {
  width: 100%;
  --cassina-pair-height: clamp(250px, 27vw, 540px);
  grid-template-columns: minmax(220px, 0.39fr) minmax(0, 0.61fr);
}

.cassina-human-pair--offset {
  width: min(100%, 82%);
  --cassina-pair-height: clamp(250px, 34vw, 665px);
  grid-template-columns: minmax(0, 0.6fr) minmax(190px, 0.4fr);
  margin-left: auto;
}

.cassina-human-triptych {
  --cassina-pair-height: clamp(210px, 23vw, 460px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.8fr) minmax(0, 1fr);
}

.cassina-human-media {
  margin: 0;
  overflow: hidden;
  background: var(--cream-deep);
}

.cassina-human-media--intro {
  aspect-ratio: 1 / 1;
}

.cassina-human-pair .cassina-human-media,
.cassina-human-triptych .cassina-human-media {
  height: var(--cassina-pair-height);
}

.cassina-human-media__asset {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cassina-human-copy {
  display: grid;
  gap: 18px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.cassina-human-copy p {
  max-width: 36ch;
  color: var(--ink);
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.cassina-human-copy--intro p {
  max-width: 42ch;
}

.cassina-human-copy--compact p {
  max-width: 28ch;
}

.cassina-human-copy--right {
  justify-items: end;
  text-align: right;
}

.project-detail--cassina-human .project-detail-credits {
  padding-top: clamp(18px, 2.4vw, 46px);
}

.project-detail--geolier-blanco .page-hero__title {
  max-width: 9ch;
}

.project-detail--geolier-blanco .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--geolier-blanco .motion-case-copy--geolier-lead p {
  max-width: 78ch;
}

.project-detail--geolier-blanco .motion-case-row .motion-case-copy p,
.project-detail--geolier-blanco .motion-case-copy--right p {
  max-width: 36ch;
}

.project-detail--oneworks .page-hero__title {
  max-width: 12ch;
}

.project-detail--oneworks .motion-case-copy p {
  max-width: 68ch;
}

.project-detail--short-film .page-hero__title,
.project-detail--redbull .page-hero__title,
.project-detail--cassina-perspective .page-hero__title {
  max-width: 10ch;
}

.project-detail--douglas .motion-case-row--vertical-intro {
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
  width: 100%;
  align-items: center;
}

.project-detail--douglas .motion-case-row--text-left {
  grid-template-columns: minmax(260px, 0.46fr) minmax(260px, 0.38fr);
  align-items: center;
}

.project-detail--douglas .motion-case-layout {
  width: min(100%, 1180px);
  gap: clamp(48px, 6vw, 88px);
}

.project-detail--douglas .motion-case-row--douglas-intro > .motion-case-media,
.project-detail--douglas .motion-case-row--douglas-seasonal > .motion-case-media {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.project-detail--douglas .motion-case-row--douglas-intro .motion-case-copy p {
  max-width: 46ch;
  font-size: clamp(1.08rem, 1.22vw, 1.4rem);
  line-height: 1.16;
}

.project-detail--douglas .motion-case-row--douglas-seasonal {
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
  width: 100%;
  justify-self: stretch;
}

.project-detail--douglas .motion-case-row--douglas-seasonal .motion-case-copy {
  justify-self: end;
  text-align: right;
}

.project-detail--douglas .motion-case-row--douglas-seasonal .motion-case-copy p {
  max-width: 42ch;
  font-size: clamp(1.12rem, 1.28vw, 1.42rem);
  line-height: 1.16;
}

.project-detail--douglas .motion-case-media-row--douglas-gallery,
.project-detail--douglas .motion-case-media-row--douglas-final {
  width: 100%;
  gap: clamp(24px, 3vw, 38px);
}

.project-detail--oneworks .motion-case-layout,
.project-detail--safilo .motion-case-layout,
.project-detail--rochas .motion-case-layout,
.project-detail--bulgari .motion-case-layout,
.project-detail--short-film .motion-case-layout {
  width: min(100%, 1160px);
}

.project-detail--oneworks .motion-case-media--main,
.project-detail--safilo .motion-case-media--main,
.project-detail--rochas .motion-case-media--main,
.project-detail--bulgari .motion-case-media--main,
.project-detail--short-film .motion-case-media--main {
  width: 100%;
}

.project-detail--short-film .motion-case-grid--short-film {
  width: min(100%, 900px);
}

.project-detail--short-film .motion-case-grid--short-film-bottom {
  justify-self: end;
}

.project-detail--gucci .motion-case-media--cinema,
.project-detail--baldinini .motion-case-layout,
.project-detail--redbull .motion-case-layout,
.project-detail--collistar .motion-case-layout,
.project-detail--cassina-perspective .motion-case-layout {
  width: min(100%, 1120px);
}

.project-detail--gucci .motion-case-media--gucci-main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  justify-self: stretch;
}

.project-detail--baldinini .motion-case-media-row--four {
  gap: clamp(18px, 2vw, 30px);
}

.project-detail--baldinini .motion-case-layout {
  gap: clamp(42px, 5.4vw, 80px);
}

.project-detail--baldinini .motion-case-row--baldinini-intro {
  grid-template-columns: minmax(0, 0.54fr) minmax(280px, 0.42fr);
  align-items: center;
}

.project-detail--baldinini .motion-case-row--baldinini-city {
  grid-template-columns: minmax(190px, 0.3fr) minmax(0, 0.7fr);
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}

.project-detail--baldinini .motion-case-media-row--baldinini-city-media {
  grid-template-columns: minmax(120px, 0.24fr) minmax(0, 0.76fr);
  align-items: stretch;
  gap: clamp(16px, 1.8vw, 26px);
  width: 100%;
}

.project-detail--baldinini .motion-case-media-row--baldinini-urban {
  grid-template-columns: minmax(0, 0.76fr) minmax(130px, 0.24fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}

.project-detail--baldinini .motion-case-media-row--baldinini-urban {
  width: min(100%, 850px);
}

.project-detail--baldinini .motion-case-media-row--baldinini-final {
  grid-template-columns: minmax(0, 0.76fr) minmax(140px, 0.24fr);
  gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
  width: 100%;
}

.project-detail--baldinini .motion-case-media--baldinini-rail .motion-case-media__asset {
  object-position: left center;
}

.project-detail--baldinini .motion-case-media--baldinini-sitting .motion-case-media__asset {
  object-position: right center;
}

.project-detail--panasonic .motion-case-row--panasonic-stills {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(34px, 4vw, 58px) clamp(24px, 3vw, 36px);
}

.project-detail--panasonic .motion-case-row--panasonic-stills .motion-case-copy {
  justify-self: end;
  text-align: right;
}

.project-detail--panasonic .motion-case-row--panasonic-stills .motion-case-copy p {
  margin-left: auto;
  max-width: 34ch;
}

.project-detail--redbull .motion-case-media-row--redbull {
  grid-template-columns: minmax(160px, 0.28fr) minmax(0, 0.72fr);
  align-items: stretch;
}

.project-detail--redbull .motion-case-copy--redbull-outro {
  justify-self: end;
}

.project-detail--knt .motion-case-row--knt-first {
  grid-template-columns: minmax(0, 0.56fr) minmax(280px, 0.4fr);
}

.project-detail--knt .motion-case-row--knt-second {
  grid-template-columns: minmax(280px, 0.4fr) minmax(0, 0.56fr);
}

.project-detail--knt .motion-case-media--knt-video {
  width: 100%;
}

.project-detail--pupa .motion-case-row--pupa-text-left {
  grid-template-columns: minmax(250px, 0.4fr) minmax(0, 0.56fr);
}

.project-detail--pupa .motion-case-row--pupa-text-right {
  grid-template-columns: minmax(0, 0.56fr) minmax(250px, 0.4fr);
}

.project-detail--pupa .motion-case-media--pupa-still {
  width: 100%;
}

.project-detail--collistar .motion-case-media-row--three {
  gap: clamp(20px, 2.8vw, 42px);
}

.project-detail.project-detail--collistar .motion-case-layout {
  gap: clamp(40px, 5.4vw, 76px);
}

.project-detail--collistar .motion-case-media-row--collistar-top,
.project-detail--collistar .motion-case-media-row--collistar-routine {
  width: 100%;
  gap: clamp(22px, 3vw, 44px);
}

.project-detail--collistar .motion-case-row--collistar-beauty,
.project-detail--collistar .motion-case-row--collistar-attivi {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(0, 0.5fr) minmax(260px, 0.44fr);
  align-items: center;
  justify-items: stretch;
}

.project-detail--collistar .motion-case-row--collistar-impeccabile,
.project-detail--collistar .motion-case-row--collistar-attivi-2022 {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: stretch;
}

.project-detail--collistar .motion-case-row--collistar-beauty > .motion-case-media,
.project-detail--collistar .motion-case-row--collistar-impeccabile > .motion-case-media,
.project-detail--collistar .motion-case-row--collistar-attivi > .motion-case-media,
.project-detail--collistar .motion-case-row--collistar-attivi-2022 > .motion-case-media,
.project-detail--collistar .motion-case-media-row--collistar-duo {
  width: 100%;
  justify-self: stretch;
}

.project-detail--collistar .motion-case-media-row--collistar-duo {
  gap: clamp(20px, 2.8vw, 42px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-detail--cassina-perspective .motion-case-media-row--two {
  gap: clamp(22px, 3vw, 42px);
}

.project-detail.project-detail--cassina-perspective .motion-case-layout {
  gap: clamp(38px, 5.4vw, 76px);
}

.project-detail--cassina-perspective .motion-case-row--cassina-perspective-intro,
.project-detail--cassina-perspective .motion-case-row--cassina-perspective-material,
.project-detail--cassina-perspective .motion-case-row--cassina-perspective-dynamic {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(230px, 0.34fr) minmax(0, 0.66fr);
  align-items: center;
  justify-items: stretch;
}

.project-detail--cassina-perspective .motion-case-row--cassina-perspective-sofa,
.project-detail--cassina-perspective .motion-case-row--cassina-perspective-showroom {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(0, 0.66fr) minmax(230px, 0.34fr);
  align-items: center;
  justify-items: stretch;
}

.project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-top,
.project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-shadow,
.project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-vertical-pair {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.8vw, 42px);
}

.project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-sofa-pair {
  width: 100%;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 2.8vw, 42px);
}

.project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-material-pair {
  width: 100%;
  grid-template-columns: minmax(0, 0.5625fr) minmax(0, 0.8fr);
  align-items: start;
  gap: clamp(18px, 2.8vw, 42px);
}

.project-detail--cassina-perspective .motion-case-media--cassina-perspective-square {
  aspect-ratio: 1 / 1;
}

.project-detail--cassina-perspective .motion-case-media--cassina-perspective-tile {
  aspect-ratio: 4 / 5;
}

.project-detail--cassina-perspective .motion-case-media--cassina-perspective-vertical {
  aspect-ratio: 9 / 16;
}

.project-detail--cassina-human .motion-case-media-row--two,
.project-detail--millefiori-campaign .motion-case-media-row--two {
  align-items: center;
}

.project-detail--millefiori-campaign .motion-case-row--intro {
  grid-template-columns: minmax(240px, 0.44fr) minmax(300px, 0.52fr);
}

.project-detail--millefiori-campaign .motion-case-media-row--two:last-child {
  align-items: end;
}

.project-detail--millefiori-campaign .motion-case-layout {
  gap: clamp(32px, 4.8vw, 72px);
}

.project-detail--millefiori-campaign .motion-case-row--millefiori-intro {
  grid-template-columns: minmax(260px, 0.52fr) minmax(290px, 0.44fr);
  align-items: center;
}

.project-detail--millefiori-campaign .motion-case-media--millefiori-hero {
  aspect-ratio: 2 / 3;
}

.project-detail--millefiori-campaign .motion-case-media-row--millefiori-first,
.project-detail--millefiori-campaign .motion-case-media-row--millefiori-second {
  gap: clamp(18px, 2.7vw, 38px);
}

.project-detail--millefiori-campaign .motion-case-media-row--millefiori-first .motion-case-media,
.project-detail--millefiori-campaign .motion-case-media-row--millefiori-second .motion-case-media {
  aspect-ratio: 2 / 3;
}

.project-detail--millefiori-campaign .motion-case-row--millefiori-catalog {
  width: min(calc(100vw - (var(--project-gutter) * 2)), var(--project-content-max));
  grid-template-columns: minmax(260px, 0.5fr) minmax(0, 0.5fr);
  align-items: center;
  justify-self: center;
}

.project-detail--millefiori-campaign .motion-case-media--millefiori-catalog {
  width: 100%;
  aspect-ratio: 3 / 4;
  justify-self: stretch;
}

.project-detail--millefiori-campaign .motion-case-media-row--millefiori-videos {
  width: min(calc(100vw - (var(--project-gutter) * 2)), 1180px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(18px, 3vw, 36px);
  margin-inline: auto;
}

.project-detail--millefiori-campaign .motion-case-media-row--millefiori-videos .motion-case-media {
  aspect-ratio: 9 / 16;
}

.project-detail--millefiori-campaign .motion-case-copy--millefiori-outro p {
  max-width: 100%;
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--millefiori-campaign .motion-case-media-row--millefiori-mockups {
  width: min(100%, 980px);
  grid-template-columns: minmax(0, 0.72fr) minmax(150px, 0.22fr);
  align-items: end;
  gap: clamp(28px, 5vw, 76px);
  margin-inline: auto;
}

.project-detail--interni-2026 .motion-case-media-row--two,
.project-detail--cassina-human .motion-case-media-row--two,
.project-detail--ferrari-trento .motion-case-media-row--two {
  gap: clamp(20px, 3.2vw, 44px);
}

.project-detail--natuzzi .motion-case-media--main,
.project-detail--giorgetti-2023 .motion-case-media--main,
.project-detail--giorgetti-2024 .motion-case-media--main,
.project-detail--cassina-pov .motion-case-media--main {
  width: min(100%, 1080px);
}

.project-detail--natuzzi .motion-case-layout {
  gap: clamp(34px, 5vw, 70px);
}

.project-detail--natuzzi .motion-case-row--intro,
.project-detail--natuzzi .motion-case-row--natuzzi-text-right {
  grid-template-columns: minmax(0, 0.62fr) minmax(260px, 0.36fr);
  align-items: center;
}

.project-detail--natuzzi .motion-case-row--natuzzi-text-left {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(250px, 0.38fr) minmax(0, 0.62fr);
  align-items: center;
  justify-items: stretch;
}

.project-detail--natuzzi .motion-case-row--natuzzi-text-left > .motion-case-media,
.project-detail--natuzzi .motion-case-row--natuzzi-text-right > .motion-case-media {
  width: 100%;
  justify-self: stretch;
}

.project-detail--natuzzi .motion-case-media-row--natuzzi-triptych {
  gap: clamp(20px, 3vw, 42px);
}

.project-detail--natuzzi .motion-case-media--natuzzi-portrait {
  aspect-ratio: 4 / 5;
}

.project-detail--natuzzi .motion-case-media--natuzzi-outro {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.project-detail--giorgetti-2023 .motion-case-layout {
  gap: clamp(40px, 5.6vw, 76px);
}

.project-detail--giorgetti-2023 .motion-case-media--giorgetti-hero,
.project-detail--giorgetti-2023 .motion-case-media--giorgetti-outro {
  width: 100%;
  max-width: none;
}

.project-detail--giorgetti-2023 .motion-case-row--giorgetti-intro {
  grid-template-columns: minmax(0, 0.52fr) minmax(260px, 0.48fr);
  align-items: center;
}

.project-detail--giorgetti-2023 .motion-case-row--giorgetti-cards {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(250px, 0.45fr) minmax(0, 0.55fr);
  justify-items: stretch;
}

.project-detail--giorgetti-2023 .motion-case-row--giorgetti-cards > .motion-case-media {
  width: 100%;
  justify-self: stretch;
}

.project-detail--giorgetti-2023 .motion-case-media-row--giorgetti-triptych {
  gap: clamp(20px, 3vw, 44px);
}

.project-detail--giorgetti-2024 .motion-case-layout {
  gap: clamp(38px, 5.4vw, 74px);
}

.project-detail--giorgetti-2024 .motion-case-media--giorgetti1-hero,
.project-detail--giorgetti-2024 .motion-case-media--giorgetti1-outro {
  width: 100%;
  max-width: none;
}

.project-detail--giorgetti-2024 .motion-case-copy--giorgetti1-lead p {
  max-width: 32ch;
  font-size: clamp(1.36rem, 1.68vw, 1.86rem);
  line-height: 1.14;
}

.project-detail--giorgetti-2024 .motion-case-media-row--giorgetti1-portraits {
  width: min(100%, 760px);
  margin-inline: auto;
  gap: clamp(22px, 3vw, 44px);
}

.project-detail--giorgetti-2024 .motion-case-row--giorgetti1-rocking {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(250px, 0.45fr) minmax(0, 0.55fr);
  justify-items: stretch;
}

.project-detail--giorgetti-2024 .motion-case-row--giorgetti1-rocking > .motion-case-media {
  width: 100%;
  justify-self: stretch;
}

.project-detail--giorgetti-2024 .motion-case-media--giorgetti1-table-video {
  width: 100%;
  max-width: none;
  aspect-ratio: 41 / 17;
}

.project-detail--cassina-pov .motion-case-row--text-left {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(250px, 0.42fr) minmax(0, 0.58fr);
  justify-items: stretch;
}

.project-detail--cassina-pov .motion-case-row--text-left > .motion-case-media {
  width: 100%;
  justify-self: stretch;
}

.project-detail--kartell-express {
  background: var(--cream);
}

.project-detail--kartell-express .project-detail-hero {
  min-height: min(640px, 70vh);
  padding-bottom: clamp(68px, 8vw, 126px);
}

.project-detail--kartell-express .project-detail-hero__inner,
.kartell-express-detail .container {
  width: min(100%, 1180px);
}

.project-detail--kartell-express .project-detail-hero__inner {
  grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.42fr);
}

.project-detail--kartell-express .page-hero__title {
  max-width: 9ch;
}

.project-detail--kartell-express .project-detail-meta dd {
  font-size: clamp(1.05rem, 1.22vw, 1.3rem);
  line-height: 1.1;
}

.kartell-express-detail {
  padding-block: clamp(10px, 2vw, 36px) clamp(72px, 9vw, 132px);
}

.kartell-express-legacy {
  display: none;
}

.kartell-express-layout {
  display: grid;
  gap: clamp(56px, 7vw, 112px);
}

.kartell-express-row {
  display: grid;
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}

.kartell-express-row--intro {
  grid-template-columns: minmax(260px, 0.48fr) minmax(280px, 0.44fr);
  max-width: 980px;
  margin-inline: auto;
}

.kartell-express-block {
  display: grid;
  gap: clamp(24px, 3vw, 38px);
}

.kartell-express-row--phone-left {
  grid-template-columns: minmax(150px, 0.28fr) minmax(300px, 0.64fr);
  max-width: 920px;
  margin-left: clamp(0px, 6vw, 88px);
}

.kartell-express-row--phone-right {
  grid-template-columns: minmax(300px, 0.62fr) minmax(150px, 0.28fr);
  max-width: 980px;
  margin-left: auto;
}

.kartell-express-verticals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 58px);
  width: min(100%, 920px);
  margin-inline: auto;
}

.kartell-express-media {
  margin: 0;
  overflow: hidden;
  background: transparent;
}

.kartell-express-media__asset {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.kartell-express-media--campaign {
  aspect-ratio: 1 / 1;
  background: var(--ink);
}

.kartell-express-media--campaign .kartell-express-media__asset {
  object-position: top center;
}

/* Allineamento di base (Mobile / Tablet) */
.kartell-express-media--main {
  width: min(100%, 980px); /* Aggiornato da 1040px a 980px per pareggiare .kartell-express-row--intro */
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  background: var(--ink);
}

/* Allineamento Desktop (cerca la media query @media (min-width: 1121px) in components.css) */
@media (min-width: 1121px) {
  .project-detail--kartell-express .kartell-express-media--main,
  .project-detail--kartell-express .kartell-express-copy--wide {
    width: min(100%, 1480px); /* Aggiornato da 1580px a 1480px */
    margin-inline: auto;
  }
}

.kartell-express-media--vertical {
  aspect-ratio: 9 / 16;
  background: var(--ink);
}

.kartell-express-media--phone {
  width: min(100%, 250px);
  aspect-ratio: 9 / 16;
  overflow: visible;
  background: transparent;
  justify-self: center;
}

.kartell-express-media--phone .kartell-express-media__asset {
  object-fit: contain;
}

.kartell-express-media--phone-match .kartell-express-media__asset {
  transform: scale(1.115);
  transform-origin: center;
}

.kartell-express-copy {
  display: grid;
  gap: 18px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.kartell-express-copy p {
  max-width: 52ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 1.5vw, 1.64rem);
  line-height: 1.16;
}

.kartell-express-row .kartell-express-copy p,
.kartell-express-copy--right p {
  max-width: 32ch;
  font-size: clamp(1.36rem, 1.68vw, 1.86rem);
  line-height: 1.14;
}

.kartell-express-copy--wide {
  justify-items: start;
}

.kartell-express-copy--wide p {
  max-width: 108ch;
}

.kartell-express-copy--right {
  justify-items: end;
  text-align: right;
}

.kartell-express-copy--right p {
  max-width: 58ch;
}

.project-detail--kartell-express .project-detail-credits {
  padding-block: clamp(52px, 7vw, 96px) clamp(90px, 12vw, 160px);
}

.project-detail--kartell-express .project-detail-credits .container {
  width: min(100%, 860px);
}

.project-detail--kartell-express .project-detail-next {
  padding-bottom: clamp(56px, 8vw, 96px);
}

.project-detail__credits {
  margin-top: clamp(18px, 3vw, 34px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: rgba(8, 8, 8, 0.68);
}

.project-detail-credits {
  padding-top: clamp(26px, 4vw, 58px);
}

.project-detail-credits .project-detail__credits {
  max-width: 920px;
  margin: 0 auto;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
}

.project-gallery__item {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream-deep);
}

.project-gallery__item--wide {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 8;
}

.project-gallery__item video,
.project-gallery__item iframe {
  background: var(--cream-deep);
}

.vimeo-embed {
  border: 0;
  background: var(--cream-deep);
  pointer-events: none;
}

.vimeo-interactive-frame {
  position: relative;
}

.vimeo-interactive-frame .vimeo-embed {
  pointer-events: none;
}

.vimeo-interactive-frame.is-vimeo-active .vimeo-embed {
  pointer-events: auto;
}

.vimeo-activate {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: linear-gradient(to top, rgba(8, 8, 8, 0.16), transparent 48%);
  color: var(--cream);
  cursor: pointer;
  transition:
    background 0.24s var(--ease-out),
    opacity 0.24s var(--ease-out);
}

.vimeo-activate::before {
  width: clamp(54px, 6vw, 86px);
  aspect-ratio: 1;
  border: 1px solid rgba(242, 232, 218, 0.72);
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.52);
  backdrop-filter: blur(8px);
  content: "";
  transition:
    background 0.24s var(--ease-out),
    transform 0.24s var(--ease-out);
}

.vimeo-activate::after {
  position: absolute;
  width: 0;
  height: 0;
  margin-left: 0.32rem;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid currentColor;
  content: "";
}

.vimeo-activate:hover {
  background: linear-gradient(to top, rgba(8, 8, 8, 0.24), transparent 52%);
}

.vimeo-activate:hover::before {
  background: rgba(8, 8, 8, 0.68);
  transform: scale(1.04);
}

.vimeo-activate:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -4px;
}

.vimeo-embed.is-loading:not(.is-loaded) {
  opacity: 0;
}

.project-detail-next__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.project-detail-next__link {
  display: grid;
  justify-items: end;
  gap: 10px;
  color: var(--ink);
  text-align: right;
}

.project-detail-next__link strong {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: var(--type-medium);
  line-height: 1;
  text-transform: uppercase;
}

.project-detail--the-game {
  background: var(--cream);
}

.project-detail--the-game .project-detail-hero {
  min-height: min(700px, 72vh);
  padding-bottom: clamp(70px, 8vw, 132px);
}

.project-detail--the-game .project-detail-hero__inner,
.the-game-detail__inner {
  width: min(100%, 1320px);
}

.project-detail--the-game .project-detail-hero__inner {
  grid-template-columns: minmax(0, 0.78fr) minmax(280px, 0.4fr);
  align-items: end;
}

.project-detail--the-game .page-hero__title {
  max-width: none;
}

.project-detail--the-game .section__kicker {
  margin-bottom: 0.7rem;
  color: var(--orange);
}

.project-detail--the-game .project-detail-meta {
  gap: 18px;
}

.project-detail--the-game .project-detail-meta div {
  padding-top: 14px;
}

.project-detail--the-game .project-detail-meta dt {
  margin-bottom: 6px;
}

.project-detail--the-game .project-detail-meta dd {
  font-size: clamp(0.98rem, 1.1vw, 1.2rem);
  line-height: 1.1;
}

.the-game-detail {
  padding: clamp(34px, 3vw, 48px) var(--gutter) clamp(70px, 10vw, 150px);
  background: var(--cream);
}

.the-game-detail__inner {
  display: grid;
  gap: clamp(54px, 7vw, 96px);
  margin-inline: auto;
}

.the-game-detail__lead,
.the-game-detail__outro {
  display: grid;
  align-items: center;
  gap: clamp(30px, 4vw, 62px);
}

.the-game-detail__lead > *,
.the-game-detail__outro > * {
  min-width: 0;
}

.the-game-detail__lead {
  grid-template-columns: minmax(0, 0.68fr) minmax(260px, 0.34fr);
}

.the-game-detail__outro {
  width: min(100%, 1220px);
  grid-template-columns: minmax(0, 0.54fr) minmax(270px, 0.46fr);
}

.the-game-detail__duo {
  width: min(100% - 34px, 1240px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
  margin-inline: auto;
}

.the-game-media {
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

.the-game-media--lead,
.the-game-media--duo,
.the-game-media--outro {
  aspect-ratio: 16 / 9;
}

.the-game-media__asset {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.the-game-copy,
.the-game-detail__center-copy p {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.the-game-copy {
  max-width: 34ch;
  font-size: clamp(1.36rem, 1.7vw, 1.9rem);
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.the-game-copy--lead {
  max-width: 27ch;
}

.the-game-detail__center-copy {
  width: min(100%, 1180px);
  margin-inline: auto;
  text-align: center;
}

.the-game-detail__center-copy p {
  max-width: 94ch;
  margin-inline: auto;
  font-size: clamp(1.24rem, 1.5vw, 1.68rem);
  line-height: 1.16;
}

.project-detail--the-game .project-detail-credits {
  padding-block: clamp(58px, 7vw, 100px) clamp(104px, 14vw, 190px);
  background: var(--cream-deep);
}

.project-detail--the-game .project-detail-credits .container {
  width: min(100% - (var(--project-gutter) * 2), 920px);
}

.project-detail--the-game .project-detail__credits {
  max-width: 660px;
  margin: 0;
  gap: 13px;
  padding-top: 18px;
  font-size: clamp(0.68rem, 0.72vw, 0.78rem);
  line-height: 1.45;
}

.project-detail--the-game .project-detail__credits p {
  color: rgba(8, 8, 8, 0.72);
}

.project-detail--the-game .the-game-credit-fix + p {
  display: none;
}

.project-detail--the-game .project-detail-next {
  padding-top: 0;
  padding-bottom: clamp(54px, 8vw, 94px);
  background: var(--cream-deep);
}

.project-detail--the-game .project-detail-next .container {
  width: min(100% - (var(--project-gutter) * 2), 1320px);
}

.project-detail--install-custom {
  background: var(--cream);
}

.project-detail--install-custom > .project-detail-cover,
.project-detail--install-custom > .project-detail-story,
.project-detail--install-custom > .project-detail-gallery {
  display: none;
}

.project-detail--install-custom .project-detail-hero {
  min-height: min(680px, 72vh);
  padding-bottom: clamp(66px, 8vw, 126px);
}

.project-detail--install-custom .project-detail-hero__inner,
.install-detail__inner {
  width: min(100%, 1320px);
}

.project-detail--install-custom .project-detail-hero__inner {
  grid-template-columns: minmax(0, 0.78fr) minmax(280px, 0.4fr);
}

.project-detail--install-custom .page-hero__title {
  max-width: none;
}

.project-detail--install-custom .project-detail-meta dd {
  font-size: clamp(0.98rem, 1.1vw, 1.2rem);
  line-height: 1.1;
}

.install-detail {
  padding: clamp(20px, 3vw, 48px) var(--gutter) clamp(72px, 10vw, 150px);
  background: var(--cream);
}

.install-detail__inner {
  display: grid;
  gap: clamp(42px, 5.8vw, 86px);
  margin-inline: auto;
}

.install-media,
.install-media-grid {
  min-width: 0;
}

.install-media {
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

.install-media__asset {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.install-media-grid {
  display: grid;
  gap: clamp(24px, 3vw, 46px);
}

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

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

.install-media--portrait {
  aspect-ratio: 4 / 5;
}

.install-media--wide {
  aspect-ratio: 16 / 9;
}

.install-media--panorama {
  aspect-ratio: 16 / 4;
}

.install-media--feature {
  aspect-ratio: 16 / 9;
  width: min(100%, 1110px);
  margin-inline: auto;
}

.install-media--band {
  aspect-ratio: 2551 / 404;
}

.install-copy {
  display: grid;
  gap: 20px;
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.install-copy p {
  color: var(--ink);
  font: inherit;
  font-size: clamp(1.28rem, 1.5vw, 1.64rem);
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.install-copy--wide {
  max-width: 1050px;
}

.install-copy--intro {
  max-width: 1060px;
  margin-left: clamp(34px, 4vw, 68px);
}

.install-copy--intro p {
  font-size: clamp(1.34rem, 1.68vw, 1.86rem);
}

.install-copy--below {
  width: min(100%, 1030px);
  margin-inline: auto;
}

.install-copy--right {
  width: min(100%, 1060px);
  justify-self: end;
  text-align: right;
}

.install-split .install-copy p,
.install-copy--right p {
  max-width: 34ch;
  font-size: clamp(1.36rem, 1.68vw, 1.86rem);
  line-height: 1.14;
}

.install-copy--center {
  align-self: center;
  text-align: center;
}

.install-split {
  display: grid;
  gap: clamp(30px, 5vw, 74px);
  align-items: center;
}

.install-split--lead {
  grid-template-columns: minmax(0, 0.62fr) minmax(300px, 0.38fr);
}

.install-split--text-left {
  grid-template-columns: minmax(280px, 0.48fr) minmax(0, 0.52fr);
}

.install-split--wide-media {
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 0.62fr);
}

.install-detail--fabiana .install-media-grid--three {
  gap: clamp(34px, 4.2vw, 64px);
}

.install-detail--fabiana .install-media {
  background: transparent;
}

.project-detail.project-detail--fabiana .install-media__asset {
  object-fit: cover;
}

.install-detail--fabiana .install-media--portrait {
  aspect-ratio: 0.68;
}

.install-detail--fabiana .install-copy--wide {
  gap: 26px;
}

.install-detail--fabiana .install-split {
  width: min(100%, 1180px);
  justify-self: end;
}

.install-detail--fabiana .install-split .install-copy {
  max-width: 610px;
  justify-self: center;
}

.install-detail--fabiana .install-split--fabiana-closing .install-copy {
  justify-self: end;
  text-align: right;
}

.install-detail--fabiana .install-split--fabiana-closing .install-copy p {
  margin-left: auto;
}

.install-detail--fabiana .install-media--tall {
  aspect-ratio: 0.68;
}

.install-detail--annibale .install-detail__inner {
  width: min(100%, 1210px);
  gap: clamp(34px, 5vw, 72px);
}

.install-detail--annibale .install-copy p {
  font-size: clamp(1.18rem, 1.38vw, 1.5rem);
}

.annibale-three {
  display: grid;
  grid-template-columns: minmax(0, 0.54fr) minmax(170px, 0.22fr) minmax(220px, 0.24fr);
  gap: clamp(22px, 2.7vw, 40px);
  align-items: center;
}

.annibale-three .install-media--portrait {
  aspect-ratio: 0.72;
}

.annibale-bands {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
}

.project-detail--cassina-installation .project-detail-hero {
  min-height: min(600px, 64vh);
}

.install-detail--cassina .install-detail__inner {
  width: min(100%, 1240px);
  gap: clamp(42px, 5.2vw, 78px);
}

.install-detail--cassina .install-copy--intro {
  max-width: none;
  margin-left: 0;
  justify-self: stretch;
}

.install-detail--cassina .install-copy--right {
  width: 100%;
  max-width: none;
  justify-items: end;
}

.install-detail--cassina .install-copy--right p {
  margin-left: auto;
}

.install-detail--cassina .install-copy--intro p,
.install-detail--cassina .install-copy--right p {
  font-size: clamp(1.28rem, 1.5vw, 1.64rem);
  line-height: 1.16;
}

.install-detail--mg .install-detail__inner {
  width: min(100%, 1190px);
  gap: clamp(38px, 5vw, 70px);
}

.project-detail--install-custom .project-detail-credits {
  padding-block: clamp(58px, 7vw, 100px) clamp(104px, 14vw, 190px);
  background: var(--cream-deep);
}

.project-detail--install-custom .project-detail-credits .container {
  width: min(100% - (var(--project-gutter) * 2), 920px);
}

.project-detail--install-custom .project-detail__credits {
  max-width: 760px;
  margin: 0;
  gap: 13px;
  padding-top: 18px;
  font-size: clamp(0.68rem, 0.72vw, 0.78rem);
  line-height: 1.45;
}

.project-detail--install-custom .project-detail__credits p {
  color: rgba(8, 8, 8, 0.72);
}

.project-detail--annibale .install-credit-fixed ~ p:not(.install-credit-fixed) {
  display: none;
}

.project-detail--install-custom .project-detail-next {
  padding-top: 0;
  padding-bottom: clamp(54px, 8vw, 94px);
  background: var(--cream-deep);
}

.project-detail--install-custom .project-detail-next .container {
  width: min(100% - (var(--project-gutter) * 2), 1320px);
}

.project-detail {
  --project-gutter: clamp(22px, 4vw, 58px);
  --project-content-max: 9999px;
  --project-phone-width: clamp(340px, 22vw, 460px);
}

@media (min-width: 1121px) {
  .project-detail {
    --project-gutter: clamp(78px, 9vw, 210px);
    --project-content-max: 1360px;
    --project-phone-width: clamp(280px, 16vw, 380px);
  }
}

.project-detail .page-hero {
  padding-inline: var(--project-gutter);
}

.project-detail .install-detail,
.project-detail .the-game-detail {
  padding-inline: var(--project-gutter);
}

.project-detail .project-detail-hero__inner {
  width: min(100%, var(--project-content-max));
  max-width: none;
}

.project-detail .container,
.project-detail .the-game-detail__inner,
.project-detail .install-detail__inner {
  width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
  max-width: none;
}

.project-detail .install-detail__inner,
.project-detail .the-game-detail__inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.project-detail .motion-case-media--main,
.project-detail .motion-detail-media--full,
.project-detail .kartell-express-media--main,
.project-detail .install-media--feature,
.project-detail .the-game-detail__duo,
.project-detail .the-game-detail__outro,
.project-detail .the-game-detail__center-copy {
  width: 100%;
  max-width: none;
}

.project-detail--radio-105 .motion-case-media--main,
.project-detail--radio-105 .motion-case-grid,
.project-detail--radio-105 .motion-case-block > .motion-case-copy {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.project-detail--radio-105 .motion-case-media--radio-hero {
  aspect-ratio: 16 / 9;
}

.project-detail .motion-case-row--phone-left,
.project-detail .motion-case-row--phone-right,
.project-detail .motion-detail-split--phone-left,
.project-detail .motion-detail-split--phone-right,
.project-detail .motion-detail-split--poster,
.project-detail .kartell-express-row--intro,
.project-detail .kartell-express-row--phone-left,
.project-detail .kartell-express-row--phone-right,
.project-detail .kartell-express-verticals,
.project-detail .motion-detail-grid[data-count="2"],
.project-detail .motion-detail-grid--verticals {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.project-detail .motion-case-copy--center,
.project-detail .motion-detail-copy--center,
.project-detail .install-copy--center,
.project-detail .the-game-detail__center-copy,
.project-detail .project-collection__footer {
  justify-items: start;
  text-align: left;
}

.project-detail .motion-case-copy--center p,
.project-detail .motion-detail-copy--center p,
.project-detail .install-copy--center p,
.project-detail .the-game-detail__center-copy p {
  margin-inline: 0;
}

.project-detail .motion-case-block > .motion-case-copy,
.project-detail .kartell-express-block > .kartell-express-copy,
.project-detail .motion-detail-section > .motion-detail-copy,
.project-detail .install-copy--below,
.project-detail .the-game-detail__center-copy {
  width: 100%;
  max-width: none;
}

.project-detail .motion-case-media--phone,
.project-detail .motion-detail-media--phone,
.project-detail .kartell-express-media--phone {
  width: min(100%, var(--project-phone-width));
}

.project-detail :is(
  .project-detail-cover__asset,
  .project-gallery__media,
  .project-detail-story__asset,
  .motion-detail-media__asset,
  .motion-case-media__asset,
  .kartell-express-media__asset,
  .the-game-media__asset,
  .install-media__asset
) {
  object-fit: contain;
}

.project-detail--radio-105 .motion-case-media--radio-hero .motion-case-media__asset {
  object-fit: cover;
}

.project-detail :is(
  .project-detail-cover__media,
  .project-gallery__item,
  .project-detail-story__media,
  .motion-detail-media,
  .motion-case-media,
  .kartell-express-media,
  .the-game-media,
  .install-media
).has-natural-ratio {
  aspect-ratio: var(--media-ratio);
}

.project-detail.project-detail--millefiori-machine .motion-case-media-row--store .motion-case-media,
.project-detail.project-detail--millefiori-machine .motion-case-media-row--store .motion-case-media.has-natural-ratio {
  aspect-ratio: 3 / 4;
}

.project-detail.project-detail--millefiori-machine .motion-case-media-row--store .motion-case-media__asset {
  object-fit: cover;
}

@media (min-width: 1121px) {
  .project-detail--comune-milano .page-hero,
  .project-detail--kartell-catalogo .page-hero,
  .project-detail--kartell-hhh .page-hero,
  .project-detail--kartell-express .page-hero,
  .project-detail--milano-design-city .page-hero,
  .project-detail--millefiori-machine .page-hero,
  .project-detail--ferrari-trento .page-hero,
  .project-detail--mondoffice .page-hero,
  .project-detail--radio-105 .page-hero,
  .project-detail--sigle-105 .page-hero {
    padding-inline: var(--gutter);
  }

  .project-detail--comune-milano .project-detail-hero__inner,
  .project-detail--comune-milano .motion-case-detail .container,
  .project-detail--comune-milano .project-detail-credits .container,
  .project-detail--comune-milano .project-detail-next .container,
  .project-detail--kartell-catalogo .project-detail-hero__inner,
  .project-detail--kartell-catalogo .motion-case-detail .container,
  .project-detail--kartell-catalogo .project-detail-credits .container,
  .project-detail--kartell-catalogo .project-detail-next .container,
  .project-detail--kartell-hhh .project-detail-hero__inner,
  .project-detail--kartell-hhh .motion-case-detail .container,
  .project-detail--kartell-hhh .project-detail-credits .container,
  .project-detail--kartell-hhh .project-detail-next .container,
  .project-detail--kartell-express .project-detail-hero__inner,
  .project-detail--kartell-express .kartell-express-detail .container,
  .project-detail--kartell-express .project-detail-credits .container,
  .project-detail--kartell-express .project-detail-next .container,
  .project-detail--milano-design-city .project-detail-hero__inner,
  .project-detail--milano-design-city .motion-case-detail .container,
  .project-detail--milano-design-city .project-detail-credits .container,
  .project-detail--milano-design-city .project-detail-next .container,
  .project-detail--millefiori-machine .project-detail-hero__inner,
  .project-detail--millefiori-machine .motion-case-detail .container,
  .project-detail--millefiori-machine .project-detail-credits .container,
  .project-detail--millefiori-machine .project-detail-next .container,
  .project-detail--ferrari-trento .project-detail-hero__inner,
  .project-detail--ferrari-trento .motion-case-detail .container,
  .project-detail--ferrari-trento .project-detail-credits .container,
  .project-detail--ferrari-trento .project-detail-next .container,
  .project-detail--mondoffice .project-detail-hero__inner,
  .project-detail--mondoffice .motion-case-detail .container,
  .project-detail--mondoffice .project-detail-credits .container,
  .project-detail--mondoffice .project-detail-next .container,
  .project-detail--radio-105 .project-detail-hero__inner,
  .project-detail--radio-105 .motion-case-detail .container,
  .project-detail--radio-105 .project-detail-credits .container,
  .project-detail--radio-105 .project-detail-next .container,
  .project-detail--sigle-105 .project-detail-hero__inner,
  .project-detail--sigle-105 .motion-case-detail .container,
  .project-detail--sigle-105 .project-detail-credits .container,
  .project-detail--sigle-105 .project-detail-next .container {
    width: min(calc(100% - (var(--gutter) * 2)), 1680px);
  }

  .project-detail--comune-milano .project-detail-hero,
  .project-detail--kartell-catalogo .project-detail-hero,
  .project-detail--kartell-hhh .project-detail-hero,
  .project-detail--kartell-express .project-detail-hero,
  .project-detail--milano-design-city .project-detail-hero,
  .project-detail--millefiori-machine .project-detail-hero,
  .project-detail--ferrari-trento .project-detail-hero,
  .project-detail--mondoffice .project-detail-hero,
  .project-detail--radio-105 .project-detail-hero,
  .project-detail--sigle-105 .project-detail-hero {
    min-height: min(720px, 74vh);
    padding-bottom: clamp(78px, 9vw, 136px);
  }

  .project-detail--comune-milano .motion-case-layout,
  .project-detail--kartell-catalogo .motion-case-layout,
  .project-detail--kartell-hhh .motion-case-layout,
  .project-detail--milano-design-city .motion-case-layout,
  .project-detail--millefiori-machine .motion-case-layout,
  .project-detail--mondoffice .motion-case-layout,
  .project-detail--radio-105 .motion-case-layout,
  .project-detail--sigle-105 .motion-case-layout,
  .project-detail--kartell-express .kartell-express-layout {
    gap: clamp(72px, 8vw, 136px);
  }

  .project-detail--comune-milano .page-hero__title,
  .project-detail--kartell-hhh .page-hero__title,
  .project-detail--radio-105 .page-hero__title,
  .project-detail--millefiori-machine .page-hero__title {
    max-width: 13ch;
  }

  .project-detail--kartell-catalogo .page-hero__title,
  .project-detail--kartell-express .page-hero__title {
    max-width: 12ch;
  }

  .project-detail--comune-milano .motion-case-row--poster {
    grid-template-columns: minmax(280px, 0.46fr) minmax(320px, 0.5fr);
  }

  .project-detail--milano-design-city .motion-case-row--intro,
  .project-detail--mondoffice .motion-case-row--intro,
  .project-detail--radio-105 .motion-case-row--radio-hero {
    grid-template-columns: minmax(0, 0.68fr) minmax(300px, 0.32fr);
  }

  .project-detail--radio-105 .motion-case-row--radio-portraits,
  .project-detail--radio-105 .motion-case-row--radio-keyword,
  .project-detail--radio-105 .motion-case-row--radio-outro {
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 0.58fr);
  }

  .project-detail--radio-105 .motion-case-row--radio-identity,
  .project-detail--radio-105 .motion-case-row--radio-final {
    grid-template-columns: minmax(280px, 0.34fr) minmax(0, 0.66fr);
  }

  .project-detail--radio-105 .motion-case-row--radio-final .motion-case-media {
    grid-column: 2;
  }

  .project-detail--radio-105 .motion-case-grid--radio-duo {
    width: min(100%, 1120px);
    justify-self: center;
  }

  .project-detail--radio-105 .motion-case-copy--right,
  .project-detail--sigle-105 .motion-case-copy--right {
    justify-items: end;
    text-align: right;
  }

  .project-detail--kartell-catalogo .motion-case-copy--center,
  .project-detail--kartell-hhh .motion-case-copy--center,
  .project-detail--millefiori-machine .motion-case-copy--center,
  .project-detail--mondoffice .motion-case-copy--center {
    justify-items: center;
    text-align: center;
  }

  .project-detail--kartell-catalogo .motion-case-copy--center p,
  .project-detail--kartell-hhh .motion-case-copy--center p,
  .project-detail--millefiori-machine .motion-case-copy--center p,
  .project-detail--mondoffice .motion-case-copy--center p {
    margin-inline: auto;
  }

  .project-detail--millefiori-machine .motion-case-copy--store {
    justify-items: center;
    text-align: center;
  }

  .project-detail--kartell-catalogo .motion-case-block--catalogo-salone {
    margin-top: clamp(214px, 13vw, 270px);
  }

  .project-detail--millefiori-machine .motion-case-media-row--store {
    margin-top: clamp(220px, 13vw, 280px);
  }

  .project-detail--kartell-catalogo .project-detail-hero__inner,
  .project-detail--kartell-hhh .project-detail-hero__inner,
  .project-detail--kartell-express .project-detail-hero__inner,
  .project-detail--sigle-105 .project-detail-hero__inner {
    width: min(100%, var(--max));
  }

  .project-detail--kartell-catalogo .motion-case-detail {
    padding-top: clamp(118px, 7vw, 150px);
  }

  .project-detail--kartell-express .kartell-express-detail {
    padding-top: clamp(126px, 7.6vw, 164px);
  }

  .project-detail--comune-milano .motion-case-detail {
    padding-top: clamp(210px, 12vw, 250px);
  }

  .project-detail--millefiori-machine .motion-case-detail {
    padding-top: clamp(164px, 9vw, 196px);
  }

  .project-detail--radio-105 .motion-case-detail {
    padding-top: clamp(198px, 11vw, 236px);
  }

  .project-detail--mondoffice .motion-case-detail {
    padding-top: clamp(330px, 20vw, 400px);
  }

  .project-detail--kartell-hhh .motion-case-detail {
    padding-top: clamp(380px, 22vw, 460px);
  }

  .project-detail--sigle-105 .motion-case-detail {
    padding-top: clamp(76px, 4.8vw, 96px);
  }

  .project-detail--milano-design-city .motion-case-detail {
    padding-top: clamp(240px, 15vw, 304px);
  }

  .project-detail--comune-milano .motion-case-row--intro {
    grid-template-columns: minmax(0, 0.74fr) minmax(260px, 0.26fr);
  }

  .project-detail--comune-milano .motion-case-media--poster {
    width: min(100%, 640px);
  }

  .project-detail--comune-milano .motion-case-row--poster > .motion-case-media {
    justify-self: end;
  }

  .project-detail--comune-milano .motion-case-row--comune-crossmedia > .motion-case-media {
    justify-self: start;
  }

  .project-detail--comune-milano .motion-case-row--comune-crossmedia {
    margin-top: clamp(-130px, -6.4vw, -104px);
  }

  .project-detail--kartell-hhh .motion-case-layout {
    gap: clamp(110px, 11vw, 210px);
  }

  .project-detail--kartell-catalogo .motion-case-detail .motion-case-layout,
  .project-detail--kartell-hhh .motion-case-detail .motion-case-layout,
  .project-detail--sigle-105 .motion-case-detail .motion-case-layout {
    width: min(100%, 1540px);
  }

  .project-detail--millefiori-machine .motion-case-row--phone-left .motion-case-media--phone,
  .project-detail--kartell-hhh .motion-case-row--phone-right .motion-case-media--phone,
  .project-detail--kartell-catalogo .motion-case-row--phone-left .motion-case-media--phone {
    width: min(100%, 400px);
  }

  .project-detail--kartell-express .kartell-express-row--intro,
  .project-detail--kartell-express .kartell-express-row--phone-left,
  .project-detail--kartell-express .kartell-express-row--phone-right,
  .project-detail--kartell-express .kartell-express-verticals {
    width: min(100%, 1480px);
    max-width: none;
    margin-inline: auto;
  }

  .project-detail--kartell-express .kartell-express-row--intro {
    grid-template-columns: minmax(560px, 820px) minmax(340px, 560px);
    gap: clamp(48px, 4.2vw, 80px);
  }

  .project-detail--kartell-express .kartell-express-row--intro .kartell-express-copy p {
    max-width: 44ch;
  }

  .project-detail--kartell-express .kartell-express-media--main,
  .project-detail--kartell-express .kartell-express-copy--wide {
    width: min(100%, 1580px);
    margin-inline: auto;
  }

  .project-detail--kartell-express .kartell-express-verticals {
    margin-top: clamp(136px, 8vw, 172px);
  }

  .project-detail--kartell-express .kartell-express-media--phone {
    width: min(100%, 400px);
  }
}

/* ==========================================================================
   PROGETTO FERRARI TRENTO - COMPOSIZIONE DESKTOP
   Reference: PAGINE SITO TWOSHOT - Copy of FERRARI TRENTO
   ========================================================================== */
@media (min-width: 1121px) {
  /* Ferrari usa gli stessi margini laterali delle altre pagine progetto.
     Queste regole neutralizzano il vecchio override desktop basato su --gutter. */
  .project-detail--ferrari-trento .page-hero {
    padding-inline: var(--project-gutter);
  }

  .project-detail--ferrari-trento .project-detail-hero__inner {
    width: min(100%, var(--project-content-max));
    grid-template-columns: minmax(0, 0.68fr) minmax(260px, 0.32fr);
    gap: clamp(32px, 4vw, 58px);
    align-items: end;
  }

  .project-detail--ferrari-trento .motion-case-detail .container,
  .project-detail--ferrari-trento .project-detail-credits .container,
  .project-detail--ferrari-trento .project-detail-next .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
    max-width: none;
  }

  .project-detail--ferrari-trento .motion-case-layout--ferrari {
    width: min(100%, 1260px);
    max-width: none;
    margin-inline: auto;
    gap: clamp(42px, 4.4vw, 68px);
  }

  .project-detail--ferrari-trento .motion-case-row {
    gap: clamp(22px, 2.8vw, 42px);
  }

  .project-detail--ferrari-trento .motion-case-row--ferrari-intro {
    grid-template-columns: minmax(0, 0.60fr) minmax(250px, 0.36fr);
    align-items: center;
  }

  .project-detail--ferrari-trento .motion-case-media-row--ferrari-stills {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.9vw, 28px);
  }

  .project-detail--ferrari-trento .motion-case-row--ferrari-circuit {
    grid-template-columns: minmax(220px, 0.31fr) minmax(0, 0.63fr);
    align-items: center;
  }

  /* Il video del circuito deve arrivare pulito al margine destro: niente
     pillarbox bianco da object-fit: contain / background paper. */
  .project-detail--ferrari-trento .motion-case-row--ferrari-circuit > .motion-case-media {
    width: 100%;
    justify-self: end;
    background: var(--ink);
  }

  .project-detail--ferrari-trento .motion-case-row--ferrari-circuit .motion-case-media__asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .project-detail--ferrari-trento .motion-case-row--ferrari-set {
    grid-template-columns: minmax(0, 0.49fr) minmax(260px, 0.47fr);
    align-items: center;
  }

  .project-detail--ferrari-trento .motion-case-row--ferrari-outro {
    grid-template-columns: minmax(260px, 0.46fr) minmax(0, 0.50fr);
    align-items: center;
    margin-top: clamp(-28px, -1.6vw, -18px);
  }

  .project-detail--ferrari-trento .motion-case-row .motion-case-copy p {
    max-width: 38ch;
  }

  .project-detail--ferrari-trento .motion-case-copy--right {
    width: 100%;
    justify-items: end;
    text-align: right;
  }

  .project-detail--ferrari-trento .motion-case-copy--right p {
    max-width: 34ch;
    margin-left: auto;
    margin-right: 0;
  }

  .project-detail--ferrari-trento .project-detail-credits .project-detail__credits {
    width: min(100%, 760px);
    max-width: none;
    margin-left: 0;
    margin-right: auto;
  }
}

.process-list {
  display: grid;
  gap: 12px;
  counter-reset: process;
}

.process-step {
  display: grid;
  grid-template-columns: 120px minmax(0, 0.5fr) minmax(260px, 0.8fr);
  gap: clamp(18px, 4vw, 56px);
  align-items: center;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.16);
}

.step__number {
  color: var(--orange);
  font-size: var(--type-large);
  line-height: 0.85;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.2);
}

.faq-item summary {
  cursor: pointer;
  padding: 22px;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.faq-item p {
  padding: 0 22px 22px;
}

.contact-band {
  position: relative;
  overflow: hidden;
  background: var(--orange);
  color: var(--ink);
}

.contact-band::before {
  content: none;
}

.contact-band__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.35fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: end;
}

.contact-band__title {
  max-width: 9ch;
}

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

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}

.spotlight-card {
  position: relative;
  min-height: clamp(420px, 48vw, 720px);
  grid-column: span 4;
  display: grid;
  align-content: end;
  overflow: hidden;
  padding: clamp(18px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--cream);
  isolation: isolate;
}

.spotlight-card--wide {
  grid-column: span 8;
}

.spotlight-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
}

.spotlight-card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(8, 8, 8, 0.82), rgba(8, 8, 8, 0.1) 56%),
    linear-gradient(135deg, rgba(255, 90, 31, 0.2), transparent 44%);
  content: "";
}

.spotlight-card__tag {
  margin-bottom: 12px;
  color: var(--orange);
}

.spotlight-card h3 {
  max-width: 12ch;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}

.team-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.team-card__image {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center 20%;
  background: var(--cream-deep);
  filter: saturate(0.92) contrast(1.04);
}

.team-card__body {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.team-card__role {
  color: rgba(8, 8, 8, 0.65);
  font-size: var(--type-small);
}

.team-card__mail {
  color: var(--orange);
  font-size: var(--type-small);
  overflow-wrap: anywhere;
}

.team-list--plain {
  border-top: 1px solid var(--line);
}

.team-row {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(180px, 0.28fr) minmax(220px, 0.32fr);
  gap: clamp(18px, 4vw, 58px);
  align-items: center;
  padding-block: clamp(18px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}

.team-row p,
.team-row a {
  color: rgba(8, 8, 8, 0.68);
}

.team-row a:hover {
  color: var(--orange);
}

.team-photo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  width: min(100%, 1080px);
  margin-inline: auto;
}

.team-photo {
  min-width: 0;
}

.team-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
}

.team-photo h3 {
  margin-top: 12px;
  max-width: 10ch;
  color: var(--ink);
}

.team-photo p {
  margin-top: 10px;
  color: rgba(8, 8, 8, 0.7);
}

.team-photo a {
  display: inline-block;
  margin-top: 8px;
  color: var(--orange);
  max-width: 100%;
  white-space: nowrap;
}

.about-contact {
  background: var(--cream);
}

.about-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.62fr);
  gap: clamp(34px, 8vw, 120px);
  align-items: start;
}

.about-contact .section-title {
  max-width: 8ch;
}

.about-contact .copy {
  margin-top: clamp(22px, 3vw, 38px);
  max-width: 620px;
}

.about-contact .contact-form {
  gap: 22px;
}

.about-contact .button {
  width: 100%;
  min-height: 42px;
  background: var(--ink);
  color: var(--cream);
}

.about-contact .button:hover {
  background: transparent;
  color: var(--ink);
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(26px, 4vw, 46px);
}

.category-projects {
  display: grid;
  gap: clamp(18px, 3vw, 34px);
}

.production-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.58fr) minmax(0, 0.72fr);
  gap: clamp(18px, 4vw, 56px);
  align-items: stretch;
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.18);
}

.production-card__media {
  position: relative;
  min-height: clamp(310px, 36vw, 540px);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--cream-deep);
}

.production-card__media video,
.production-card__media img,
.production-card__media iframe,
.motion-project__media video,
.motion-project__media img,
.motion-project__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.production-card__media iframe.vimeo-embed,
.motion-project__media iframe.vimeo-embed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 114%;
  height: 114%;
  max-width: none;
  transform: translate(-50%, -50%);
}

.production-card__body {
  display: grid;
  align-content: space-between;
  gap: 24px;
}

.production-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meta-chip {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.42rem 0.68rem 0.34rem;
  font-family: var(--font-display);
  font-size: var(--type-small);
  text-transform: uppercase;
}

.media-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 30%);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.media-strip img,
.media-strip video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--ink);
}

.motion-stack {
  display: grid;
  gap: clamp(28px, 6vw, 82px);
}

.motion-project {
  display: grid;
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 0.75fr);
  gap: clamp(20px, 5vw, 72px);
  align-items: center;
  min-height: clamp(560px, 78vh, 820px);
  padding-block: clamp(30px, 5vw, 70px);
  border-top: 1px solid var(--line);
}

.motion-project:nth-child(even) {
  grid-template-columns: minmax(0, 0.75fr) minmax(280px, 0.55fr);
}

.motion-project:nth-child(even) .motion-project__media {
  order: 2;
}

.motion-project__media {
  position: relative;
  min-height: clamp(340px, 48vw, 620px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(255, 90, 31, 0.5), transparent 48%),
    var(--ink);
}

.motion-project__number {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: var(--type-large);
  line-height: 0.78;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-family: var(--font-display);
  font-size: var(--type-small);
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.22);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 1rem;
}

.field textarea {
  min-height: 160px;
  resize: vertical;
}

.form-honeypot {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.privacy-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(8, 8, 8, 0.72);
  font-size: var(--type-small);
  line-height: 1.35;
}

.privacy-check input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--ink);
  flex: 0 0 auto;
}

.privacy-check a,
.footer-bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.privacy-check a:hover,
.footer-bottom a:hover {
  color: var(--orange);
}

.form-status {
  min-height: 1.35em;
  color: rgba(8, 8, 8, 0.72);
  font-size: var(--type-small);
  line-height: 1.35;
}

.form-status.is-success {
  color: #1f6b38;
}

.form-status.is-error {
  color: #b8301f;
}

.contact-form button[disabled] {
  cursor: progress;
  opacity: 0.62;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(8, 8, 8, 0.86);
  color: var(--cream);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease-out),
    visibility 0.3s var(--ease-out);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal__panel {
  position: relative;
  width: min(100%, 1120px);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  background: var(--ink);
  overflow: hidden;
}

.modal__screen {
  min-height: min(68vh, 680px);
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(85, 195, 172, 0.6), transparent 45%),
    linear-gradient(315deg, rgba(255, 46, 166, 0.54), transparent 42%),
    repeating-linear-gradient(
      90deg,
      rgba(242, 232, 218, 0.08) 0 1px,
      transparent 1px 16px
    ),
    #111;
}

.modal__copy {
  max-width: 520px;
  padding: 24px;
  text-align: center;
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-light);
  background: rgba(8, 8, 8, 0.44);
  color: var(--cream);
  border-radius: 50%;
}

.custom-cursor {
  position: fixed;
  z-index: 140;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    width 0.2s var(--ease-out),
    height 0.2s var(--ease-out),
    background 0.2s var(--ease-out);
}

.custom-cursor.is-visible {
  opacity: 1;
}

.custom-cursor.is-active {
  width: 58px;
  height: 58px;
  background: var(--cream);
}

.skip-link {
  position: fixed;
  z-index: 150;
  top: 12px;
  left: 12px;
  transform: translateY(-140%);
  background: var(--ink);
  color: var(--cream);
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   FIX ALLINEAMENTO GRIGLIA: KARTELL EXPRESS
   Forza tutti i blocchi interni ad allinearsi perfettamente alla .container
   ========================================================================== */

.project-detail--kartell-express .kartell-express-row--intro,
.project-detail--kartell-express .kartell-express-block,
.project-detail--kartell-express .kartell-express-verticals,
.project-detail--kartell-express .kartell-express-row--phone-left,
.project-detail--kartell-express .kartell-express-row--phone-right,
.project-detail--kartell-express .kartell-express-media--main,
.project-detail--kartell-express .kartell-express-copy--wide {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch !important;
}

/* Modifiche specifiche per allineare il testo e i grid interni ai bordi */
.project-detail--kartell-express .kartell-express-row--intro {
  /* Assicura che l'immagine di sinistra e il testo di destra tocchino i limiti */
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr) !important;
  gap: clamp(40px, 6vw, 80px) !important;
}

.project-detail--kartell-express .kartell-express-row--phone-left {
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr) !important;
}

.project-detail--kartell-express .kartell-express-row--phone-right {
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 0.35fr) !important;
}

.project-detail--kartell-express .kartell-express-verticals {
  /* Assicura che la griglia dei 3 video occupi tutto lo spazio */
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.project-detail--kartell-express .kartell-express-copy p {
  /* Rimuove i limiti di larghezza dei paragrafi per allinearli ai bordi dei loro container */
  max-width: none !important; 
}

/* ==========================================================================
   FIX SPAZIATURA VERTICALE: KARTELL EXPRESS
   Annulla il margine extra del blocco video verticali per usare il gap omogeneo
   ========================================================================== */

.project-detail--kartell-express .kartell-express-verticals {
  margin-top: 0 !important;
}

/* ==========================================================================
   FIX DEFINITIVO KARTELL EXPRESS: ALLINEAMENTO A PIOMBO DI TUTTE LE SEZIONI
   ========================================================================== */

/* 1. Forza l'Hero e tutti i contenuti alla stessa identica larghezza e li centra */
.project-detail--kartell-express .project-detail-hero__inner,
.project-detail--kartell-express .kartell-express-row--intro,
.project-detail--kartell-express .kartell-express-media--main,
.project-detail--kartell-express .kartell-express-copy--wide,
.project-detail--kartell-express .kartell-express-verticals,
.project-detail--kartell-express .kartell-express-row--phone-left,
.project-detail--kartell-express .kartell-express-row--phone-right {
  width: min(100%, var(--max)) !important; 
  max-width: none !important;
  margin-inline: auto !important;
  justify-self: auto !important;
}

/* 2. Rimuove il limite di larghezza sul testo per farlo arrivare a filo del layout */
.project-detail--kartell-express .kartell-express-copy p {
  max-width: none !important;
}

/* 3. Azzera il margine extra sui video verticali per ripristinare il gap omogeneo tra le sezioni */
.project-detail--kartell-express .kartell-express-verticals {
  margin-top: 0 !important;
}

/* 4. Sincronizza la griglia dell'Hero con la sezione Intro (Solo Desktop) */
@media (min-width: 1121px) {
  /* Imposta una griglia 50/50 identica sia per l'intestazione che per la prima sezione */
  .project-detail--kartell-express .project-detail-hero__inner,
  .project-detail--kartell-express .kartell-express-row--intro {
    display: grid !important;
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr) !important;
    gap: clamp(40px, 6vw, 80px) !important;
  }
  
  .project-detail--kartell-express .kartell-express-row--phone-left {
    grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr) !important;
  }

  .project-detail--kartell-express .kartell-express-row--phone-right {
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 0.35fr) !important;
  }
}

/* 5. Uniforma le dimensioni di tutti i testi descrittivi su Mobile */
@media (max-width: 840px) {
  .project-detail--kartell-express .kartell-express-copy p {
    font-size: 1.05rem !important;      /* Dimensione base standardizzata per la lettura su mobile */
    line-height: 1.25 !important;       /* Interlinea ottimizzata per la leggibilità */
  }
}

/* ==========================================================================
   FIX DEFINITIVO RADIO 105: ALLINEAMENTO A PIOMBO DI TUTTE LE SEZIONI
   ========================================================================== */

/* 1. Forza l'Hero e tutti i contenuti alla stessa identica larghezza e li centra */
.project-detail--radio-105 .project-detail-hero__inner,
.project-detail--radio-105 .motion-case-row--radio-hero,
.project-detail--radio-105 .motion-case-row--radio-portraits,
.project-detail--radio-105 .motion-case-row--radio-keyword,
.project-detail--radio-105 .motion-case-grid--radio-duo,
.project-detail--radio-105 .motion-case-row--radio-identity,
.project-detail--radio-105 .motion-case-row--radio-outro,
.project-detail--radio-105 .motion-case-row--radio-final {
  width: min(100%, var(--max)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  justify-self: stretch !important;
}

/* 2. Rimuove il limite di larghezza sul testo per farlo arrivare a filo del layout */
.project-detail--radio-105 .motion-case-copy p {
  max-width: none !important;
}

/* 3. Sincronizza la griglia dell'Hero con i contenuti (Solo Desktop) */
@media (min-width: 1121px) {
  /* Griglia 65/35 per la sezione Hero e righe con Media a SINISTRA */
  .project-detail--radio-105 .project-detail-hero__inner,
  .project-detail--radio-105 .motion-case-row--radio-hero,
  .project-detail--radio-105 .motion-case-row--radio-keyword,
  .project-detail--radio-105 .motion-case-row--radio-outro {
    display: grid !important;
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 0.35fr) !important;
    gap: clamp(40px, 6vw, 80px) !important;
  }

  /* Griglia Invertita 35/65 per le righe con Media a DESTRA */
  .project-detail--radio-105 .motion-case-row--radio-portraits,
  .project-detail--radio-105 .motion-case-row--radio-identity,
  .project-detail--radio-105 .motion-case-row--radio-final {
    display: grid !important;
    grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr) !important;
    gap: clamp(40px, 6vw, 80px) !important;
  }
  
  /* Griglia a 2 colonne perfette 50/50 */
  .project-detail--radio-105 .motion-case-grid--radio-duo {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(40px, 6vw, 80px) !important;
  }
}

/* 4. Uniforma le dimensioni dei testi descrittivi su Mobile */
@media (max-width: 840px) {
  .project-detail--radio-105 .motion-case-copy p {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }
}

/* ==========================================================================
   CORREZIONE FINALE MILLEFIORI: SPAZIATURE E ALLINEAMENTI
   ========================================================================== */

/* 1. Riduciamo lo spazio generale tra le sezioni per eliminare i vuoti eccessivi */
.project-detail--millefiori-machine .motion-case-layout {
  gap: clamp(40px, 6vw, 70px) !important;
}

/* 2. Forziamo il blocco di testo ad appoggiarsi completamente a destra */
.project-detail--millefiori-machine .motion-case-copy--right p {
  margin-left: auto !important;
  text-align: right !important;
}

/* 3. Annulliamo i margini top anomali scritti originariamente per queste classi */
@media (min-width: 1121px) {
  .project-detail--millefiori-machine .motion-case-media-row--store {
    margin-top: 0 !important;
  }
}

/* ==========================================================================
   FIX A CAPO E TESTI: MILLEFIORI NEW LOOK MACHINE
   Neutralizza il max-width: 32ch nativo che strozza i paragrafi
   ========================================================================== */

main.project-detail--millefiori-machine .motion-case-layout .motion-case-copy p,
main.project-detail--millefiori-machine .motion-case-layout .motion-case-copy--right p {
  max-width: none !important;
  width: auto !important;
}

/* ==========================================================================
   FIX VIDEO STORE CENTRATO: MILLEFIORI NEW LOOK MACHINE
   ========================================================================== */

.project-detail--millefiori-machine .motion-case-media-row--store video.motion-case-media__asset {
  object-fit: cover !important;
  object-position: center bottom !important; 
}

/* ==========================================================================
   UX MOBILE: UNIFORMA TUTTI I TESTI DESCRITTIVI
   ========================================================================== */

@media (max-width: 840px) {
  main.project-detail--millefiori-machine .motion-case-layout .motion-case-copy p,
  main.project-detail--millefiori-machine .motion-case-layout .motion-case-copy--center p,
  main.project-detail--millefiori-machine .motion-case-layout .motion-case-copy--right p {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }
}

/* ==========================================================================
   FIX LAYOUT: KARTELL CATALOGO + SALONE (ALLINEAMENTO E TESTI)
   ========================================================================== */

/* 1. Forza contenitori principali al 100% della griglia globale */
main.project-detail--kartell-catalogo .project-detail-hero__inner,
main.project-detail--kartell-catalogo .motion-case-block,
main.project-detail--kartell-catalogo .motion-case-row--catalogo-exploration,
main.project-detail--kartell-catalogo .motion-case-row--catalogo-iconic,
main.project-detail--kartell-catalogo .motion-case-row--phone-left,
main.project-detail--kartell-catalogo .motion-case-row--split {
  width: min(100%, var(--max)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  justify-self: stretch !important;
}

/* 2. Rimuove limiti dai testi e forza allineamento a destra dove richiesto */
main.project-detail--kartell-catalogo .motion-case-copy p {
  max-width: none !important;
}
main.project-detail--kartell-catalogo .motion-case-copy--right p {
  margin-left: auto !important;
  text-align: right !important;
}

/* 3. Architettura proporzionale e Reset Margini (Solo Desktop) */
@media (min-width: 1121px) {
  /* Annulla il gap verticale errato sopra la sezione "Salone" */
  main.project-detail--kartell-catalogo .motion-case-block--catalogo-salone {
    margin-top: 0 !important;
  }
  
  /* Sincronizza griglia Hero 50/50 */
  main.project-detail--kartell-catalogo .project-detail-hero__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr) !important;
    gap: clamp(40px, 6vw, 80px) !important;
  }

  /* 2 Video VS Testo (55% sx / 45% dx) */
  main.project-detail--kartell-catalogo .motion-case-row--catalogo-exploration {
    display: grid !important;
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.45fr) !important;
    gap: clamp(40px, 6vw, 80px) !important;
  }

  /* Testo VS 2 Video (45% sx / 55% dx) */
  main.project-detail--kartell-catalogo .motion-case-row--catalogo-iconic {
    display: grid !important;
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr) !important;
    gap: clamp(40px, 6vw, 80px) !important;
  }

  /* Telefono VS Testo */
  main.project-detail--kartell-catalogo .motion-case-row--phone-left {
    display: grid !important;
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr) !important;
    gap: clamp(40px, 6vw, 80px) !important;
    align-items: center !important;
  }

  /* Immagine Larga VS Testo (65% sx / 35% dx) */
  main.project-detail--kartell-catalogo .motion-case-row--split {
    display: grid !important;
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 0.35fr) !important;
    gap: clamp(40px, 6vw, 80px) !important;
  }
}

/* 4. UX Mobile: Disabilita i <br> per non rompere i paragrafi su schermi stretti e fissa la font-size */
@media (max-width: 840px) {
  main.project-detail--kartell-catalogo .motion-case-layout .motion-case-copy p {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
  main.project-detail--kartell-catalogo .motion-case-layout .motion-case-copy p br {
    display: none !important;
  }
}

/* ==========================================================================
   FIX ALLINEAMENTO LOCANDINE: COMUNE DI MILANO
   ========================================================================== */

/* ==========================================================================
   FIX LAYOUT: COMUNE DI MILANO (ALLINEAMENTI E SPAZIATURE MOCKUP)
   ========================================================================== */

/* 1. Forza contenitori principali al 100% della griglia globale */
main.project-detail--comune-milano .project-detail-hero__inner,
main.project-detail--comune-milano .motion-case-row {
  width: min(100%, var(--max)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  justify-self: stretch !important;
}

/* 2. Rimuove limiti dai testi per permettere gli a capo manuali corretti */
main.project-detail--comune-milano .motion-case-copy p {
  max-width: none !important;
}

/* 3. Architettura Desktop: Avvicinamento Testi-Locandine e Allineamento */
@media (min-width: 1121px) {
  /* Hero */
  main.project-detail--comune-milano .project-detail-hero__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 0.35fr) !important;
    gap: clamp(40px, 6vw, 80px) !important;
  }
  
  /* Riga 1: Video Largo (65%) e Testo (35%) */
  main.project-detail--comune-milano .motion-case-row--intro {
    display: grid !important;
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 0.35fr) !important;
    gap: clamp(40px, 6vw, 80px) !important;
  }

  /* Fissiamo le proporzioni esatte delle locandine rispetto al template */
  main.project-detail--comune-milano .motion-case-media--poster {
    width: 100% !important;
    max-width: 480px !important; 
  }

  /* Riga 2: Testo SX + Locandina DX (A filo con il margine destro globale) */
  main.project-detail--comune-milano .motion-case-row--poster:not(.motion-case-row--comune-crossmedia) {
    display: grid !important;
    grid-template-columns: 1fr auto !important; /* Elimina il gap in eccesso: il testo si appoggia alla foto */
    gap: clamp(40px, 6vw, 80px) !important;
  }
  main.project-detail--comune-milano .motion-case-row--poster:not(.motion-case-row--comune-crossmedia) .motion-case-copy {
    justify-self: end !important;
    text-align: right !important;
  }
  main.project-detail--comune-milano .motion-case-row--poster:not(.motion-case-row--comune-crossmedia) .motion-case-media--poster {
    justify-self: end !important;
  }

  /* Riga 3: Locandina SX (A filo con il margine sinistro globale) + Testo DX */
  main.project-detail--comune-milano .motion-case-row--comune-crossmedia {
    display: grid !important;
    grid-template-columns: auto 1fr !important; /* Il testo si aggrappa alla foto */
    gap: clamp(40px, 6vw, 80px) !important;
    margin-top: 0 !important; /* Reset di margini negativi ereditati */
  }
  main.project-detail--comune-milano .motion-case-row--comune-crossmedia .motion-case-copy {
    justify-self: start !important;
    text-align: left !important;
  }
  main.project-detail--comune-milano .motion-case-row--comune-crossmedia .motion-case-media--poster {
    justify-self: start !important;
  }
}

/* 4. Resa tipografica su dispositivi Mobile */
@media (max-width: 840px) {
  main.project-detail--comune-milano .motion-case-copy p {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }
  main.project-detail--comune-milano .motion-case-copy p br {
    display: none !important;
  }
}

/* ==========================================================================
   FIX SPAZIATURE VERTICALI: KARTELL H.H.H.
   ========================================================================== */

/* 1. Riduciamo drasticamente il gap tra le singole righe (testi, video, griglia) */
main.project-detail--kartell-hhh .motion-case-layout {
  gap: clamp(150px, 4vw, 55px) !important;
}

/* 2. Riduciamo il padding generale della pagina (lo spazio vuoto sopra al primo testo e sotto all'ultimo blocco) */
main.project-detail--kartell-hhh .motion-case-detail {
  padding-top: clamp(40px, 6vw, 80px) !important;
  padding-bottom: clamp(40px, 6vw, 80px) !important;
}

/* Ottimizzazione specifica Desktop per mantenere proporzioni eleganti */
@media (min-width: 1121px) {
  main.project-detail--kartell-hhh .motion-case-detail {
    padding-top: clamp(60px, 6vw, 100px) !important;
    padding-bottom: clamp(60px, 6vw, 100px) !important;
  }
}

/* ==========================================================================
   UX MOBILE: UNIFORMA TUTTI I TESTI DESCRITTIVI (KARTELL H.H.H.)
   ========================================================================== */

@media (max-width: 840px) {
  main.project-detail--kartell-hhh .motion-case-layout .motion-case-copy p,
  main.project-detail--kartell-hhh .motion-case-layout .motion-case-copy--center p,
  main.project-detail--kartell-hhh .motion-case-layout .motion-case-copy--right p {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
  
  main.project-detail--kartell-hhh .motion-case-layout .motion-case-copy p br {
    display: none !important;
  }
}

/* ==========================================================================
   TIPOGRAFIA UNIFORME: TUTTI I TESTI DELLA STESSA DIMENSIONE (KARTELL H.H.H.)
   ========================================================================== */

main.project-detail--kartell-hhh .motion-case-layout .motion-case-copy p,
main.project-detail--kartell-hhh .motion-case-layout .motion-case-copy--center p,
main.project-detail--kartell-hhh .motion-case-layout .motion-case-copy--right p {
  font-size: clamp(1.15rem, 1.35vw, 1.45rem) !important;
  line-height: 1.25 !important;
}

/* ==========================================================================
   SBLOCCO DEFINITIVO LARGHEZZA POSTER: MILANO DESIGN CITY
   ========================================================================== */

@media (min-width: 1121px) {
  /* Annulla i limiti nativi della classe poster all'interno di questa pagina */
  main.project-detail--milano-design-city .motion-case-media--poster {
    max-width: none !important;
    width: 100% !important;
  }

  /* Forza il contenitore dei due poster a occupare tutto lo spazio destro disponibile */
  main.project-detail--milano-design-city .motion-case-media-row--two {
    max-width: none !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   FIX ALLINEAMENTO A DESTRA: THE GAME (TESTO CENTRALE)
   ========================================================================== */

.the-game-detail__center-copy--right {
  justify-items: end !important;
  text-align: right !important;
}

.the-game-detail__center-copy--right p {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}



/* ==========================================================================
   FIX DEFINITIVO PADDING E LARGHEZZA HERO: THE GAME
   ========================================================================== */

main.project-detail--the-game .page-hero {
  padding-inline: 0 !important;
}

@media (min-width: 1121px) {
  main.project-detail--the-game .the-game-custom-inner {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.78fr) minmax(280px, 0.4fr) !important;
    align-items: end !important;
  }
}

/* ==========================================================================
   SYNC PERFETTO HERO CON CONTENUTO: THE GAME
   ========================================================================== */

@media (min-width: 1121px) {
  .project-detail--the-game .project-detail-hero__inner {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.78fr) minmax(280px, 0.4fr) !important;
    align-items: end !important;
  }
}

/* ==========================================================================
   FIX ALLINEAMENTO ESATTO HERO E CONTENUTO: THE GAME
   ========================================================================== */

@media (min-width: 1121px) {
  .project-detail--the-game .project-detail-hero__inner,
  .project-detail--the-game .the-game-detail__inner {
    width: 1320px !important;
    max-width: calc(100vw - 2 * var(--project-gutter)) !important;
    margin-inline: auto !important;
  }
}

/* ==========================================================================
   SYNC ALLINEAMENTO HERO E CONTENUTO: M&G CUBO IMMERSIVO
   ========================================================================== */

@media (min-width: 1121px) {
  .project-detail--mg-cube .project-detail-hero__inner,
  .project-detail--mg-cube .install-detail__inner {
    width: 1320px !important;
    max-width: calc(100vw - 2 * var(--project-gutter)) !important;
    margin-inline: auto !important;
  }
}

/* ==========================================================================
   SYNC ALLINEAMENTO HERO E CONTENUTO: CASSINA INSTALLAZIONE
   ========================================================================== */

@media (min-width: 1121px) {
  .project-detail--cassina-installation .project-detail-hero__inner,
  .project-detail--cassina-installation .install-detail__inner {
    width: 1320px !important;
    max-width: calc(100vw - 2 * var(--project-gutter)) !important;
    margin-inline: auto !important;
  }
}

/* ==========================================================================
   FIX RIGHE TESTO: CASSINA INSTALLAZIONE
   ========================================================================== */

.install-detail--cassina .install-copy--right p {
  max-width: 54ch !important;
  text-align: right !important;
}

/* ==========================================================================
   SYNC ALLINEAMENTO HERO E CONTENUTO: MOSTRA ANNIBALE
   ========================================================================== */

@media (min-width: 1121px) {
  .project-detail--annibale .project-detail-hero__inner,
  .project-detail--annibale .install-detail__inner {
    width: 1320px !important;
    max-width: calc(100vw - 2 * var(--project-gutter)) !important;
    margin-inline: auto !important;
  }
}

/* ==========================================================================
   SYNC HERO E RIMOZIONE BORDI VIDEO: FABIANA FILIPPI
   ========================================================================== */

@media (min-width: 1121px) {
  .project-detail--fabiana .project-detail-hero__inner,
  .project-detail--fabiana .install-detail__inner {
    width: 1320px !important;
    max-width: calc(100vw - 2 * var(--project-gutter)) !important;
    margin-inline: auto !important;
  }
}

/* Rimuove qualsiasi bordo o sfondo scuro dai riquadri video */
.project-detail--fabiana .install-media {
  background: transparent !important;
  border: none !important;
}

.project-detail--fabiana .install-media__asset {
  background: transparent !important;
}

/* ==========================================================================
   FIX COPERTURA TOTALE VIDEO PORTRAIT: FABIANA FILIPPI
   ========================================================================== */

.project-detail--fabiana .install-media--portrait .install-media__asset {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ==========================================================================
   ELIMINAZIONE DEFINITIVA SFUMATURE LATERALI VIDEO: FABIANA FILIPPI
   ========================================================================== */

.project-detail--fabiana .install-media--portrait,
.project-detail--fabiana .install-media--portrait::before,
.project-detail--fabiana .install-media--portrait::after {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  filter: none !important;
  background-image: none !important;
}

.project-detail--fabiana .install-media-grid--three .install-media {
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   FIX DEFINITIVO SFONDO E RIEMPIMENTO PORTRAIT: FABIANA FILIPPI
   ========================================================================== */

.project-detail--fabiana .install-media-grid--three .install-media--portrait {
  background-color: transparent !important;
  background: transparent !important;
}

.project-detail--fabiana .install-media-grid--three .install-media--portrait .install-media__asset {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: transparent !important;
}

/* ==========================================================================
   FIX DEFINITIVO SCALA E MASCHERAMENTO CONTORNO: FABIANA FILIPPI
   ========================================================================== */

.project-detail--fabiana .install-media--portrait {
  overflow: hidden !important;
}

.project-detail--fabiana .install-media--portrait iframe.install-media__asset {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.15) !important;
  transform-origin: center center !important;
  margin: 0 !important;
}

/* ==========================================================================
   AGGIORNAMENTO SCALA PER COPERTURA TOTALE: FABIANA FILIPPI
   ========================================================================== */

.project-detail--fabiana .install-media--portrait {
  overflow: hidden !important;
}

.project-detail--fabiana .install-media--portrait iframe.install-media__asset {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.25) !important;
  transform-origin: center center !important;
  margin: 0 !important;
}

/* ==========================================================================
   UNIFICAZIONE DIMENSIONI FONT - PAGINE INSTALLAZIONI
   ========================================================================== */

.project-detail--the-game,
.project-detail--mg-cube,
.project-detail--cassina-installation,
.project-detail--annibale,
.project-detail--fabiana {
  --project-title-size: clamp(32px, 5vw, 64px);
  --project-copy-size: clamp(15px, 1.4vw, 18px);
}

.project-detail--the-game .page-hero__title,
.project-detail--mg-cube .page-hero__title,
.project-detail--cassina-installation .page-hero__title,
.project-detail--annibale .page-hero__title,
.project-detail--fabiana .page-hero__title {
  font-size: var(--project-title-size) !important;
}

.project-detail--the-game .install-copy p,
.project-detail--mg-cube .install-copy p,
.project-detail--cassina-installation .install-copy p,
.project-detail--annibale .install-copy p,
.project-detail--fabiana .install-copy p,
.project-detail--the-game .the-game-copy,
.project-detail--the-game .the-game-detail__center-copy p {
  font-size: var(--project-copy-size) !important;
  line-height: 1.5 !important;
}


/* ==========================================================================
   MILLEFIORI - CAMPAGNA 2026 / reference alignment
   ========================================================================== */

.project-detail--millefiori-campaign .motion-case-media--millefiori-hero .motion-case-media__asset,
.project-detail--millefiori-campaign .motion-case-media-row--millefiori-first .motion-case-media__asset,
.project-detail--millefiori-campaign .motion-case-media-row--millefiori-second .motion-case-media__asset,
.project-detail--millefiori-campaign .motion-case-media--millefiori-catalog .motion-case-media__asset {
  object-fit: cover;
}

.project-detail--millefiori-campaign .motion-case-copy--millefiori-outro {
  width: 100%;
}

@media (min-width: 1121px) {
  .project-detail--millefiori-campaign .page-hero {
    padding-inline: var(--gutter);
  }

  .project-detail--millefiori-campaign .project-detail-hero__inner,
  .project-detail--millefiori-campaign .motion-case-detail .container,
  .project-detail--millefiori-campaign .project-detail-credits .container,
  .project-detail--millefiori-campaign .project-detail-next .container {
    width: min(calc(100% - (var(--gutter) * 2)), 1680px);
    max-width: none;
  }

  .project-detail--millefiori-campaign .project-detail-hero {
    min-height: min(720px, 74vh);
    padding-bottom: clamp(78px, 9vw, 136px);
  }

  .project-detail--millefiori-campaign .motion-case-layout--millefiori {
    width: 100%;
    gap: clamp(46px, 5.2vw, 86px);
  }

  .project-detail--millefiori-campaign .motion-case-row--millefiori-intro {
    width: 100%;
    grid-template-columns: minmax(0, 0.49fr) minmax(300px, 0.47fr);
    gap: clamp(30px, 3.2vw, 56px);
    align-items: center;
  }

  .project-detail--millefiori-campaign .motion-case-media--millefiori-hero {
    width: 100%;
    aspect-ratio: 2 / 3;
    justify-self: stretch;
  }

  .project-detail--millefiori-campaign .motion-case-copy--millefiori-intro p {
    max-width: 48ch;
  }

  .project-detail--millefiori-campaign .motion-case-media-row--millefiori-first,
  .project-detail--millefiori-campaign .motion-case-media-row--millefiori-second {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.6vw, 42px);
    margin-inline: 0;
  }

  .project-detail--millefiori-campaign .motion-case-media-row--millefiori-first .motion-case-media,
  .project-detail--millefiori-campaign .motion-case-media-row--millefiori-second .motion-case-media {
    width: 100%;
    aspect-ratio: 2 / 3;
  }

  .project-detail--millefiori-campaign .motion-case-row--millefiori-catalog {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(260px, 0.48fr) minmax(0, 0.52fr);
    gap: clamp(30px, 3.2vw, 56px);
    align-items: center;
    justify-self: stretch;
  }

  .project-detail--millefiori-campaign .motion-case-row--millefiori-catalog .motion-case-copy {
    width: 100%;
    justify-items: end;
    text-align: right;
  }

  .project-detail--millefiori-campaign .motion-case-row--millefiori-catalog .motion-case-copy p {
    max-width: 38ch;
    margin-left: auto;
    margin-right: 0;
  }

  .project-detail--millefiori-campaign .motion-case-media--millefiori-catalog {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 5;
    justify-self: stretch;
  }

  .project-detail--millefiori-campaign .motion-case-media-row--millefiori-videos {
    width: min(100%, 1180px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(22px, 2.4vw, 38px);
    margin-inline: auto;
  }

  .project-detail--millefiori-campaign .motion-case-media-row--millefiori-videos .motion-case-media {
    width: 100%;
    aspect-ratio: 9 / 16;
  }

  .project-detail--millefiori-campaign .motion-case-copy--millefiori-outro p {
    max-width: none;
    width: 100%;
  }

  .project-detail--millefiori-campaign .motion-case-media-row--millefiori-mockups {
    width: min(100%, 1480px);
    grid-template-columns: minmax(0, 0.76fr) minmax(180px, 0.22fr);
    align-items: end;
    gap: clamp(52px, 5.2vw, 92px);
    margin-inline: auto;
  }

  .project-detail--millefiori-campaign .motion-case-media-row--millefiori-mockups > .motion-case-media:first-child {
    width: 100%;
    justify-self: stretch;
  }

  .project-detail--millefiori-campaign .motion-case-media-row--millefiori-mockups > .motion-case-media--phone {
    width: min(100%, 360px);
    justify-self: end;
  }
}

/* ==========================================================================
   GIORGETTI 2 / reference alignment
   ========================================================================== */

.project-detail--giorgetti-2023 .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--giorgetti-2023 .motion-case-media--giorgetti-hero,
.project-detail--giorgetti-2023 .motion-case-media--giorgetti-outro {
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
}

.project-detail--giorgetti-2023 .motion-case-media-row--giorgetti-triptych .motion-case-media {
  aspect-ratio: 9 / 16;
}

@media (min-width: 1121px) {
  .project-detail--giorgetti-2023 .page-hero {
    padding-inline: var(--project-gutter);
  }

  .project-detail--giorgetti-2023 .project-detail-hero__inner {
    width: min(100%, var(--project-content-max));
    max-width: none;
  }

  .project-detail--giorgetti-2023 .motion-case-detail .container,
  .project-detail--giorgetti-2023 .project-detail-credits .container,
  .project-detail--giorgetti-2023 .project-detail-next .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
    max-width: none;
  }

  .project-detail--giorgetti-2023 .project-detail-hero {
    min-height: min(720px, 74vh);
    padding-bottom: clamp(78px, 9vw, 136px);
  }

  .project-detail--giorgetti-2023 .motion-case-layout--giorgetti {
    width: 100%;
    gap: clamp(46px, 5.2vw, 86px);
  }

  .project-detail--giorgetti-2023 .motion-case-row--giorgetti-intro {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 0.5fr) minmax(280px, 0.5fr);
    gap: clamp(30px, 3vw, 52px);
    align-items: center;
    justify-self: stretch;
  }

  .project-detail--giorgetti-2023 .motion-case-row--giorgetti-intro > .motion-case-media {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    aspect-ratio: 16 / 9;
  }

  .project-detail--giorgetti-2023 .motion-case-row--giorgetti-intro .motion-case-copy p {
    max-width: 36ch;
  }

  .project-detail--giorgetti-2023 .motion-case-media-row--giorgetti-triptych {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.8vw, 44px);
    margin-inline: 0;
    align-items: stretch;
  }

  .project-detail--giorgetti-2023 .motion-case-media-row--giorgetti-triptych > .motion-case-media {
    width: 100%;
    justify-self: stretch;
  }

  .project-detail--giorgetti-2023 .motion-case-row--giorgetti-cards {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(260px, 0.48fr) minmax(0, 0.52fr);
    gap: clamp(30px, 3vw, 52px);
    align-items: center;
    justify-items: stretch;
  }

  .project-detail--giorgetti-2023 .motion-case-row--giorgetti-cards .motion-case-copy {
    width: 100%;
    justify-items: end;
    text-align: right;
  }

  .project-detail--giorgetti-2023 .motion-case-row--giorgetti-cards .motion-case-copy p {
    max-width: 36ch;
    margin-left: auto;
    margin-right: 0;
  }

  .project-detail--giorgetti-2023 .motion-case-row--giorgetti-cards > .motion-case-media {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    aspect-ratio: 16 / 9;
  }

  .project-detail--giorgetti-2023 .motion-case-media--giorgetti-hero,
  .project-detail--giorgetti-2023 .motion-case-media--giorgetti-outro {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    justify-self: stretch;
  }
}

/* Geolier & Blanco x EA Sports FC25 — reference composition.
   The outer page gutter deliberately inherits the standard project gutter. */
@media (min-width: 1121px) {
  /* Keep the same outer gutters used by the other project pages. */
  .project-detail--geolier-blanco .page-hero {
    padding-inline: var(--project-gutter);
  }

  .project-detail--geolier-blanco .project-detail-hero__inner {
    width: min(100%, var(--project-content-max));
    max-width: none;
  }

  .project-detail--geolier-blanco .motion-case-detail .container,
  .project-detail--geolier-blanco .project-detail-credits .container,
  .project-detail--geolier-blanco .project-detail-next .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
    max-width: none;
  }

  .project-detail--geolier-blanco .motion-case-layout {
    gap: clamp(38px, 4.6vw, 70px);
  }

  .project-detail--geolier-blanco .motion-case-media--geolier-hero,
  .project-detail--geolier-blanco .motion-case-media--geolier-outro {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    justify-self: stretch;
  }

  .project-detail--geolier-blanco .motion-case-row--geolier-story,
  .project-detail--geolier-blanco .motion-case-row--geolier-views {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 3vw, 46px);
    align-items: center;
    justify-items: stretch;
  }

  .project-detail--geolier-blanco .motion-case-row--geolier-story > .motion-case-media,
  .project-detail--geolier-blanco .motion-case-row--geolier-views > .motion-case-media {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .project-detail--geolier-blanco .motion-case-row--geolier-views .motion-case-copy {
    justify-items: end;
    text-align: right;
  }

  .project-detail--geolier-blanco .motion-case-row--geolier-views .motion-case-copy p {
    margin-left: auto;
    margin-right: 0;
  }
}

/* ==========================================================================
   CASSINA - POINT OF VIEW / reference alignment
   ========================================================================== */

.project-detail--cassina-pov .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--cassina-pov .motion-case-row .motion-case-copy p,
.project-detail--cassina-pov .motion-case-copy--right p {
  max-width: 36ch;
}

@media (min-width: 1121px) {
  /* Same outer gutters used by the other corrected project pages. */
  .project-detail--cassina-pov .page-hero {
    padding-inline: var(--project-gutter);
  }

  .project-detail--cassina-pov .project-detail-hero__inner {
    width: min(100%, var(--project-content-max));
    max-width: none;
    grid-template-columns: minmax(0, 0.68fr) minmax(260px, 0.32fr);
    gap: clamp(32px, 4vw, 58px);
    align-items: end;
  }

  .project-detail--cassina-pov .motion-case-detail .container,
  .project-detail--cassina-pov .project-detail-credits .container,
  .project-detail--cassina-pov .project-detail-next .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
    max-width: none;
  }

  .project-detail--cassina-pov .project-detail-hero {
    min-height: min(720px, 74vh);
    padding-bottom: clamp(78px, 9vw, 136px);
  }

  .project-detail--cassina-pov .motion-case-layout--cassina-pov {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    gap: clamp(42px, 4.8vw, 78px);
  }

  .project-detail--cassina-pov .motion-case-row {
    gap: clamp(28px, 3.2vw, 50px);
  }

  .project-detail--cassina-pov .motion-case-row--cassina-pov-intro {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 0.60fr) minmax(270px, 0.40fr);
    align-items: center;
    justify-items: stretch;
  }

  .project-detail--cassina-pov .motion-case-row--cassina-pov-intro > .motion-case-media,
  .project-detail--cassina-pov .motion-case-row--cassina-pov-narrative > .motion-case-media,
  .project-detail--cassina-pov .motion-case-row--cassina-pov-color > .motion-case-media,
  .project-detail--cassina-pov .motion-case-row--cassina-pov-final > .motion-case-media {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    aspect-ratio: 16 / 9;
  }

  .project-detail--cassina-pov .motion-case-copy--cassina-pov-intro p {
    max-width: 38ch;
  }

  .project-detail--cassina-pov .motion-case-media-row--cassina-pov-blue,
  .project-detail--cassina-pov .motion-case-media-row--cassina-pov-red {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 38px);
    margin-inline: 0;
    align-items: stretch;
  }

  .project-detail--cassina-pov .motion-case-media-row--cassina-pov-blue > .motion-case-media,
  .project-detail--cassina-pov .motion-case-media-row--cassina-pov-red > .motion-case-media {
    width: 100%;
    justify-self: stretch;
    aspect-ratio: 4 / 5;
  }

  .project-detail--cassina-pov .motion-case-row--cassina-pov-narrative {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(270px, 0.40fr) minmax(0, 0.60fr);
    align-items: center;
    justify-items: stretch;
  }

  .project-detail--cassina-pov .motion-case-row--cassina-pov-narrative .motion-case-copy,
  .project-detail--cassina-pov .motion-case-row--cassina-pov-final .motion-case-copy {
    width: 100%;
    justify-items: end;
    text-align: right;
  }

  .project-detail--cassina-pov .motion-case-row--cassina-pov-narrative .motion-case-copy p,
  .project-detail--cassina-pov .motion-case-row--cassina-pov-final .motion-case-copy p {
    margin-left: auto;
    margin-right: 0;
  }

  .project-detail--cassina-pov .motion-case-row--cassina-pov-color {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 0.60fr) minmax(270px, 0.40fr);
    align-items: center;
    justify-items: stretch;
  }

  .project-detail--cassina-pov .motion-case-row--cassina-pov-color .motion-case-copy p {
    max-width: 36ch;
  }

  .project-detail--cassina-pov .motion-case-media-row--cassina-pov-keywords {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 2.6vw, 42px);
    margin-inline: 0;
    align-items: stretch;
  }

  .project-detail--cassina-pov .motion-case-media-row--cassina-pov-keywords > .motion-case-media {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    aspect-ratio: 16 / 9;
  }

  .project-detail--cassina-pov .motion-case-row--cassina-pov-final {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(270px, 0.48fr) minmax(0, 0.52fr);
    align-items: center;
    justify-items: stretch;
  }
}

/* ==========================================================================
   GIORGETTI CAMPAIGN 2024 / reference alignment
   ========================================================================== */

/* Keep body copy on the same typographic scale as the other project pages. */
.project-detail--giorgetti-2024 .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--giorgetti-2024 .motion-case-row .motion-case-copy p,
.project-detail--giorgetti-2024 .motion-case-copy--right p {
  max-width: 36ch;
}

.project-detail--giorgetti-2024 .motion-case-copy--giorgetti1-lead p {
  max-width: 64ch;
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--giorgetti-2024 .page-hero__title {
  max-width: 11ch;
}

@media (min-width: 1121px) {
  /* Same page gutters and content width used by the previously corrected projects. */
  .project-detail--giorgetti-2024 .page-hero {
    padding-inline: var(--project-gutter);
  }

  .project-detail--giorgetti-2024 .project-detail-hero__inner {
    width: min(100%, var(--project-content-max));
    max-width: none;
  }

  .project-detail--giorgetti-2024 .motion-case-detail .container,
  .project-detail--giorgetti-2024 .project-detail-credits .container,
  .project-detail--giorgetti-2024 .project-detail-next .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
    max-width: none;
  }

  .project-detail--giorgetti-2024 .project-detail-hero {
    min-height: min(720px, 74vh);
    padding-bottom: clamp(78px, 9vw, 136px);
  }

  .project-detail--giorgetti-2024 .motion-case-layout--giorgetti1 {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    gap: clamp(42px, 4.8vw, 80px);
  }

  .project-detail--giorgetti-2024 .motion-case-media--giorgetti1-hero,
  .project-detail--giorgetti-2024 .motion-case-media--giorgetti1-full-video,
  .project-detail--giorgetti-2024 .motion-case-media--giorgetti1-outro {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    justify-self: stretch;
    aspect-ratio: 16 / 9;
  }

  .project-detail--giorgetti-2024 .motion-case-copy--giorgetti1-lead {
    width: 100%;
    margin-inline: 0;
  }

  .project-detail--giorgetti-2024 .motion-case-media-row--giorgetti1-feature-pair {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 2.8vw, 44px);
    margin-inline: 0;
    align-items: stretch;
  }

  .project-detail--giorgetti-2024 .motion-case-media-row--giorgetti1-feature-pair > .motion-case-media {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    aspect-ratio: 16 / 9;
  }

  .project-detail--giorgetti-2024 .motion-case-media-row--giorgetti1-feature-pair .motion-case-media__asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .project-detail--giorgetti-2024 .motion-case-row--giorgetti1-story {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(270px, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(30px, 3.2vw, 52px);
    align-items: center;
    justify-items: stretch;
  }

  .project-detail--giorgetti-2024 .motion-case-row--giorgetti1-story .motion-case-copy {
    width: 100%;
    justify-items: end;
    text-align: right;
  }

  .project-detail--giorgetti-2024 .motion-case-row--giorgetti1-story .motion-case-copy p {
    max-width: 38ch;
    margin-left: auto;
    margin-right: 0;
  }

  .project-detail--giorgetti-2024 .motion-case-media--giorgetti1-portrait {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    aspect-ratio: 9 / 16;
  }

  .project-detail--giorgetti-2024 .motion-case-media--giorgetti1-portrait .motion-case-media__asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .project-detail--giorgetti-2024 .motion-case-media--giorgetti1-full-video {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    justify-self: stretch;
    aspect-ratio: 16 / 9;
  }

  .project-detail--giorgetti-2024 .motion-case-media--giorgetti1-full-video .motion-case-media__asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .project-detail--giorgetti-2024 .project-detail-credits .project-detail__credits {
    width: min(100%, 760px);
    max-width: none;
    margin-left: 0;
    margin-right: auto;
  }
}


/* ==========================================================================
   MILLEFIORI - NEW LOOK MACHINE
   Allineamento al template e ai margini standard delle pagine progetto
   ========================================================================== */

.project-detail--millefiori-machine .motion-case-copy p,
.project-detail--millefiori-machine .motion-case-row .motion-case-copy p,
.project-detail--millefiori-machine .motion-case-copy--right p,
.project-detail--millefiori-machine .motion-case-copy--center p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
  font-weight: 400;
}

.project-detail--millefiori-machine .motion-case-media--millefiori-main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  aspect-ratio: 16 / 9;
}

.project-detail--millefiori-machine .motion-case-copy--millefiori-lead p {
  width: 100%;
  max-width: none;
}

.project-detail--millefiori-machine .motion-case-media-row--millefiori-factory {
  width: 100%;
  gap: clamp(14px, 1.6vw, 24px);
}

.project-detail--millefiori-machine .motion-case-copy--millefiori-factory {
  width: 100%;
  justify-items: center;
  text-align: center;
}

.project-detail--millefiori-machine .motion-case-copy--millefiori-factory p {
  width: min(100%, 92ch) !important;
  max-width: 92ch !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.project-detail--millefiori-machine .motion-case-row--millefiori-phone {
  align-items: center;
}

.project-detail--millefiori-machine .motion-case-block--millefiori-store {
  gap: clamp(18px, 2vw, 30px);
}

.project-detail--millefiori-machine .motion-case-copy--store {
  width: 100%;
  justify-items: end;
  text-align: right;
}

.project-detail--millefiori-machine .motion-case-copy--store p {
  width: min(100%, 54ch) !important;
  max-width: 54ch !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}

@media (min-width: 1121px) {
  /* Stessi gutter laterali delle altre pagine progetto. */
  .project-detail--millefiori-machine .page-hero {
    padding-inline: var(--project-gutter);
  }

  .project-detail--millefiori-machine .project-detail-hero__inner {
    width: min(100%, var(--project-content-max));
    max-width: none;
    grid-template-columns: minmax(0, 0.68fr) minmax(260px, 0.32fr);
    gap: clamp(32px, 4vw, 58px);
    align-items: end;
  }

  .project-detail--millefiori-machine .motion-case-detail .container,
  .project-detail--millefiori-machine .project-detail-credits .container,
  .project-detail--millefiori-machine .project-detail-next .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
    max-width: none;
  }

  /* Il template entra subito nei contenuti: elimina il vecchio vuoto da 160-200px. */
  .project-detail--millefiori-machine .motion-case-detail {
    padding-top: clamp(24px, 2.4vw, 42px);
    padding-bottom: clamp(64px, 7vw, 104px);
  }

  .project-detail--millefiori-machine .motion-case-layout {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
    max-width: none;
    margin-inline: auto;
    gap: clamp(34px, 3.5vw, 56px) !important;
  }

  .project-detail--millefiori-machine .motion-case-block--millefiori-main {
    gap: clamp(16px, 1.7vw, 26px);
  }

  .project-detail--millefiori-machine .motion-case-block--millefiori-factory {
    gap: clamp(24px, 2.6vw, 38px);
  }

  .project-detail--millefiori-machine .motion-case-row--millefiori-phone {
    width: min(90%, 980px);
    margin-left: clamp(12px, 2vw, 30px);
    margin-right: auto;
    grid-template-columns: minmax(170px, 0.28fr) minmax(300px, 0.62fr);
    gap: clamp(28px, 4vw, 56px);
  }

  .project-detail--millefiori-machine .motion-case-row--millefiori-phone .motion-case-copy p {
    max-width: 48ch !important;
  }

  .project-detail--millefiori-machine .motion-case-media-row--store {
    width: calc(100% - clamp(18px, 2vw, 32px));
    max-width: none;
    margin: 0 auto !important;
    gap: clamp(12px, 1.4vw, 22px);
  }

  .project-detail--millefiori-machine .motion-case-media-row--store .motion-case-media,
  .project-detail--millefiori-machine .motion-case-media-row--store .motion-case-media.has-natural-ratio {
    aspect-ratio: 3 / 4;
  }

  .project-detail--millefiori-machine .motion-case-media-row--store .motion-case-media__asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .project-detail--millefiori-machine .project-detail-credits {
    padding-top: clamp(42px, 4vw, 66px);
  }
}


/* ==========================================================================
   ONEWORKS - TYPOGRAPHY ALIGNMENT TO PROJECT REFERENCES
   ========================================================================== */

.project-detail--oneworks .motion-case-copy--oneworks {
  gap: 16px;
}

.project-detail--oneworks .motion-case-copy--oneworks p {
  width: 100%;
  max-width: none;
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

@media (max-width: 840px) {
  .project-detail--oneworks .motion-case-copy--oneworks p {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .project-detail--oneworks .motion-case-copy--oneworks p br {
    display: none;
  }
}


/* ==========================================================================
   NATUZZI — allineamento al template produzione / design
   ========================================================================== */

.project-detail--natuzzi .motion-case-layout--natuzzi {
  width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
  max-width: none;
  margin-inline: auto;
  gap: clamp(34px, 4.4vw, 64px);
}

.project-detail--natuzzi .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--natuzzi .motion-case-row--natuzzi-intro,
.project-detail--natuzzi .motion-case-row--natuzzi-text-right {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(0, 0.62fr) minmax(250px, 0.38fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}

.project-detail--natuzzi .motion-case-row--natuzzi-text-left {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(240px, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}

.project-detail--natuzzi .motion-case-row--natuzzi-intro > .motion-case-media,
.project-detail--natuzzi .motion-case-row--natuzzi-text-left > .motion-case-media,
.project-detail--natuzzi .motion-case-row--natuzzi-text-right > .motion-case-media {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.project-detail--natuzzi .motion-case-media--natuzzi-intro,
.project-detail--natuzzi .motion-case-media--natuzzi-story,
.project-detail--natuzzi .motion-case-media--natuzzi-episode,
.project-detail--natuzzi .motion-case-media--natuzzi-outro {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.project-detail--natuzzi .motion-case-media-row--natuzzi-triptych {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
}

.project-detail--natuzzi .motion-case-media--natuzzi-portrait,
.project-detail--natuzzi .motion-case-media--natuzzi-portrait.has-natural-ratio {
  width: 100%;
  aspect-ratio: 4 / 5;
}

.project-detail--natuzzi .motion-case-media--natuzzi-intro .motion-case-media__asset,
.project-detail--natuzzi .motion-case-media--natuzzi-story .motion-case-media__asset,
.project-detail--natuzzi .motion-case-media--natuzzi-episode .motion-case-media__asset,
.project-detail--natuzzi .motion-case-media--natuzzi-outro .motion-case-media__asset,
.project-detail--natuzzi .motion-case-media--natuzzi-portrait .motion-case-media__asset {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-detail--natuzzi .motion-case-copy--natuzzi-left {
  justify-items: end;
  text-align: right;
}

.project-detail--natuzzi .motion-case-copy--natuzzi-left p {
  max-width: 38ch;
  margin-left: auto;
  margin-right: 0;
}

.project-detail--natuzzi .motion-case-copy--natuzzi-intro p,
.project-detail--natuzzi .motion-case-copy--natuzzi-right p {
  max-width: 38ch;
}

.project-detail--natuzzi .motion-case-media--natuzzi-outro {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

@media (max-width: 1120px) {
  .project-detail--natuzzi .motion-case-row--natuzzi-intro,
  .project-detail--natuzzi .motion-case-row--natuzzi-text-left,
  .project-detail--natuzzi .motion-case-row--natuzzi-text-right {
    grid-template-columns: 1fr;
  }

  .project-detail--natuzzi .motion-case-copy--natuzzi-left {
    justify-items: start;
    text-align: left;
  }

  .project-detail--natuzzi .motion-case-copy--natuzzi-left p {
    margin-left: 0;
    max-width: none;
  }
}

@media (max-width: 840px) {
  .project-detail--natuzzi .motion-case-media-row--natuzzi-triptych {
    grid-template-columns: 1fr;
  }

  .project-detail--natuzzi .motion-case-copy p {
    font-size: 1.05rem;
    line-height: 1.25;
  }
}

/* ==========================================================================
   CASSINA PERSPECTIVE - ALLINEAMENTO REFERENCE
   ========================================================================== */
.project-detail--cassina-perspective .project-detail-hero__inner {
  width: min(100%, var(--project-content-max));
  max-width: none;
  margin-inline: auto;
}

.project-detail--cassina-perspective .motion-case-layout--cassina-perspective,
.project-detail--cassina-perspective .project-detail-credits > .container,
.project-detail--cassina-perspective .project-detail-next > .container {
  width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
  max-width: none;
  margin-inline: auto;
}

.project-detail--cassina-perspective .motion-case-layout--cassina-perspective {
  gap: clamp(34px, 4.4vw, 64px);
}

.project-detail--cassina-perspective .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--cassina-perspective .motion-case-copy--cassina-perspective-left {
  justify-items: end;
  text-align: right;
}

.project-detail--cassina-perspective .motion-case-copy--cassina-perspective-left p,
.project-detail--cassina-perspective .motion-case-copy--cassina-perspective-right p {
  max-width: 36ch;
}

.project-detail--cassina-perspective .motion-case-copy--cassina-perspective-left p {
  margin-left: auto;
  margin-right: 0;
}

.project-detail--cassina-perspective .motion-case-row--cassina-perspective-intro,
.project-detail--cassina-perspective .motion-case-row--cassina-perspective-material,
.project-detail--cassina-perspective .motion-case-row--cassina-perspective-dynamic {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(235px, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(24px, 3.4vw, 50px);
  align-items: center;
}

.project-detail--cassina-perspective .motion-case-row--cassina-perspective-sofa,
.project-detail--cassina-perspective .motion-case-row--cassina-perspective-showroom {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(0, 0.66fr) minmax(235px, 0.34fr);
  gap: clamp(24px, 3.4vw, 50px);
  align-items: center;
}

.project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-top,
.project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-shadow,
.project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-vertical-pair {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
}

.project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-sofa-pair {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
}

.project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-material-pair {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
}

.project-detail--cassina-perspective .motion-case-media--cassina-perspective-portrait,
.project-detail--cassina-perspective .motion-case-media--cassina-perspective-portrait.has-natural-ratio {
  width: 100%;
  aspect-ratio: 4 / 5;
}

.project-detail--cassina-perspective .motion-case-media--cassina-perspective-square,
.project-detail--cassina-perspective .motion-case-media--cassina-perspective-square.has-natural-ratio {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.project-detail--cassina-perspective .motion-case-media--cassina-perspective-tile,
.project-detail--cassina-perspective .motion-case-media--cassina-perspective-tile.has-natural-ratio {
  width: 100%;
  aspect-ratio: 4 / 5;
}

.project-detail--cassina-perspective .motion-case-media--cassina-perspective-vertical,
.project-detail--cassina-perspective .motion-case-media--cassina-perspective-vertical.has-natural-ratio {
  width: 100%;
  aspect-ratio: 9 / 16;
}

.project-detail--cassina-perspective :is(
  .motion-case-media--cassina-perspective-portrait,
  .motion-case-media--cassina-perspective-square,
  .motion-case-media--cassina-perspective-tile,
  .motion-case-media--cassina-perspective-vertical
) .motion-case-media__asset {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1120px) {
  .project-detail--cassina-perspective .motion-case-row--cassina-perspective-intro,
  .project-detail--cassina-perspective .motion-case-row--cassina-perspective-material,
  .project-detail--cassina-perspective .motion-case-row--cassina-perspective-dynamic,
  .project-detail--cassina-perspective .motion-case-row--cassina-perspective-sofa,
  .project-detail--cassina-perspective .motion-case-row--cassina-perspective-showroom {
    grid-template-columns: 1fr;
  }

  .project-detail--cassina-perspective .motion-case-copy--cassina-perspective-left {
    justify-items: start;
    text-align: left;
  }

  .project-detail--cassina-perspective .motion-case-copy--cassina-perspective-left p {
    margin-left: 0;
    max-width: none;
  }
}

@media (max-width: 840px) {
  .project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-top,
  .project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-shadow,
  .project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-vertical-pair,
  .project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-sofa-pair,
  .project-detail--cassina-perspective .motion-case-media-row--cassina-perspective-material-pair {
    grid-template-columns: 1fr;
  }

  .project-detail--cassina-perspective .motion-case-copy p {
    font-size: 1.05rem;
    line-height: 1.25;
  }
}

/* ==========================================================================\n   RED BULL - MESSINA CROSSING: allineamento alla reference\n   ========================================================================== */

.project-detail--redbull .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--redbull .motion-case-layout {
  width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
  max-width: none;
  margin-inline: auto;
  gap: clamp(28px, 3.4vw, 50px);
}

.project-detail--redbull .motion-case-media--redbull-hero {
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
  margin-inline: 0;
}

.project-detail--redbull .motion-case-media--redbull-hero .motion-case-media__asset {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-detail--redbull .motion-case-copy--redbull-lead {
  width: 100%;
}

.project-detail--redbull .motion-case-copy--redbull-lead p {
  max-width: 88ch;
}

.project-detail--redbull .motion-case-row--redbull-training {
  grid-template-columns: minmax(0, 0.66fr) minmax(230px, 0.34fr);
  gap: clamp(24px, 3.2vw, 42px);
  align-items: center;
  width: 100%;
}

.project-detail--redbull .motion-case-media-row--redbull-training {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  align-items: stretch;
}

.project-detail--redbull .motion-case-media-row--redbull-training .motion-case-media,
.project-detail--redbull .motion-case-media-row--redbull-training .motion-case-media.has-natural-ratio {
  aspect-ratio: 9 / 16;
}

.project-detail--redbull .motion-case-media-row--redbull-training .motion-case-media__asset {
  object-fit: cover;
}

.project-detail--redbull .motion-case-row--redbull-training .motion-case-copy p {
  max-width: 34ch;
}

.project-detail--redbull .motion-case-media-row--redbull {
  width: 100%;
  grid-template-columns: minmax(120px, 0.24fr) minmax(0, 0.76fr);
  gap: clamp(14px, 1.8vw, 24px);
  align-items: stretch;
}

.project-detail--redbull .motion-case-media-row--redbull > .motion-case-media:first-child,
.project-detail--redbull .motion-case-media-row--redbull > .motion-case-media:first-child.has-natural-ratio {
  aspect-ratio: 9 / 16;
}

.project-detail--redbull .motion-case-media-row--redbull > .motion-case-media:last-child,
.project-detail--redbull .motion-case-media-row--redbull > .motion-case-media:last-child.has-natural-ratio {
  aspect-ratio: 16 / 9;
}

.project-detail--redbull .motion-case-media-row--redbull .motion-case-media__asset {
  object-fit: cover;
}

.project-detail--redbull .motion-case-copy--redbull-outro {
  width: 100%;
  justify-self: stretch;
  justify-items: end;
  text-align: right;
}

.project-detail--redbull .motion-case-copy--redbull-outro p {
  width: min(100%, 96ch);
  max-width: 96ch;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

@media (min-width: 1121px) {
  .project-detail--redbull .project-detail-hero__inner {
    width: min(100%, var(--project-content-max));
    max-width: none;
    margin-inline: auto;
  }
}

@media (max-width: 840px) {
  .project-detail--redbull .motion-case-row--redbull-training {
    grid-template-columns: 1fr;
  }

  .project-detail--redbull .motion-case-copy p {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .project-detail--redbull .motion-case-copy--redbull-outro {
    justify-items: start;
    text-align: left;
  }

  .project-detail--redbull .motion-case-copy--redbull-outro p {
    margin-inline: 0;
    text-align: left;
  }
}

/* RED BULL - OUTRO: forza allineamento a destra */
.project-detail--redbull .motion-case-layout > .motion-case-copy.motion-case-copy--redbull-outro {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  text-align: right !important;
}

.project-detail--redbull .motion-case-layout > .motion-case-copy.motion-case-copy--redbull-outro > p {
  display: block !important;
  width: min(100%, 96ch) !important;
  max-width: 96ch !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}

@media (max-width: 840px) {
  .project-detail--redbull .motion-case-layout > .motion-case-copy.motion-case-copy--redbull-outro,
  .project-detail--redbull .motion-case-layout > .motion-case-copy.motion-case-copy--redbull-outro > p {
    text-align: left !important;
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   GUCCI - ALLINEAMENTO REFERENCE
   ========================================================================== */
.project-detail--gucci .project-detail-hero__inner {
  width: min(100%, var(--project-content-max));
  max-width: none;
  margin-inline: auto;
}

.project-detail--gucci .motion-case-layout--gucci,
.project-detail--gucci .project-detail-credits > .container,
.project-detail--gucci .project-detail-next > .container {
  width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
  max-width: none;
  margin-inline: auto;
}

.project-detail--gucci .motion-case-layout--gucci {
  gap: clamp(38px, 4.6vw, 68px);
}

.project-detail--gucci .motion-case-media--gucci-main,
.project-detail--gucci .motion-case-media--gucci-main.has-natural-ratio {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  justify-self: stretch;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.project-detail--gucci .motion-case-media--gucci-main .motion-case-media__asset {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-detail--gucci .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--gucci .motion-case-row--gucci-intro,
.project-detail--gucci .motion-case-row--gucci-outro {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  justify-self: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 48px);
}

.project-detail--gucci .motion-case-row--gucci-intro > .motion-case-media,
.project-detail--gucci .motion-case-row--gucci-outro > .motion-case-media {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  aspect-ratio: 16 / 9;
}

.project-detail--gucci .motion-case-row--gucci-intro .motion-case-copy p,
.project-detail--gucci .motion-case-row--gucci-outro .motion-case-copy p {
  max-width: 42ch;
}

.project-detail--gucci .motion-case-row--gucci-outro .motion-case-copy {
  justify-items: end;
  text-align: right;
}

.project-detail--gucci .motion-case-row--gucci-outro .motion-case-copy p {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

@media (max-width: 840px) {
  .project-detail--gucci .motion-case-row--gucci-intro,
  .project-detail--gucci .motion-case-row--gucci-outro {
    grid-template-columns: 1fr;
  }

  .project-detail--gucci .motion-case-row--gucci-outro .motion-case-copy {
    justify-items: start;
    text-align: left;
  }

  .project-detail--gucci .motion-case-row--gucci-outro .motion-case-copy p {
    margin-left: 0;
    text-align: left;
  }

  .project-detail--gucci .motion-case-copy p {
    font-size: 1.05rem;
    line-height: 1.25;
  }
}

/* ==========================================================================
   COLLISTAR - ALLINEAMENTO REFERENCE
   ========================================================================== */
.project-detail--collistar .project-detail-hero__inner {
  width: min(100%, var(--project-content-max));
  max-width: none;
  margin-inline: auto;
}

.project-detail--collistar .motion-case-layout--collistar,
.project-detail--collistar .project-detail-credits > .container,
.project-detail--collistar .project-detail-next > .container {
  width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
  max-width: none;
  margin-inline: auto;
}

.project-detail--collistar .motion-case-layout--collistar {
  gap: clamp(34px, 4.2vw, 62px);
}

.project-detail--collistar .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--collistar .motion-case-media-row--collistar-top,
.project-detail--collistar .motion-case-media-row--collistar-routine {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

.project-detail--collistar .motion-case-media-row--collistar-top > .motion-case-media,
.project-detail--collistar .motion-case-media-row--collistar-top > .motion-case-media.has-natural-ratio,
.project-detail--collistar .motion-case-media-row--collistar-routine > .motion-case-media,
.project-detail--collistar .motion-case-media-row--collistar-routine > .motion-case-media.has-natural-ratio {
  width: 100%;
  max-width: none;
  aspect-ratio: 9 / 16 !important;
  background: transparent;
}

.project-detail--collistar .motion-case-media-row--collistar-top .motion-case-media__asset,
.project-detail--collistar .motion-case-media-row--collistar-routine .motion-case-media__asset {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

.project-detail--collistar .motion-case-row--collistar-beauty,
.project-detail--collistar .motion-case-row--collistar-impeccabile,
.project-detail--collistar .motion-case-row--collistar-attivi,
.project-detail--collistar .motion-case-row--collistar-attivi-2022 {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  justify-self: stretch;
  gap: clamp(24px, 3.4vw, 46px);
  align-items: center;
}

.project-detail--collistar .motion-case-row--collistar-beauty {
  grid-template-columns: minmax(0, 0.52fr) minmax(250px, 0.48fr);
}

.project-detail--collistar .motion-case-row--collistar-impeccabile {
  grid-template-columns: minmax(250px, 0.46fr) minmax(0, 0.54fr);
}

.project-detail--collistar .motion-case-row--collistar-attivi {
  grid-template-columns: minmax(0, 0.58fr) minmax(250px, 0.42fr);
}

.project-detail--collistar .motion-case-row--collistar-attivi-2022 {
  grid-template-columns: minmax(250px, 0.46fr) minmax(0, 0.54fr);
}

.project-detail--collistar .motion-case-row--collistar-beauty > .motion-case-media,
.project-detail--collistar .motion-case-row--collistar-impeccabile > .motion-case-media,
.project-detail--collistar .motion-case-row--collistar-attivi > .motion-case-media,
.project-detail--collistar .motion-case-row--collistar-attivi-2022 > .motion-case-media {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.project-detail--collistar .motion-case-row--collistar-beauty > .motion-case-media,
.project-detail--collistar .motion-case-row--collistar-beauty > .motion-case-media.has-natural-ratio,
.project-detail--collistar .motion-case-row--collistar-impeccabile > .motion-case-media,
.project-detail--collistar .motion-case-row--collistar-impeccabile > .motion-case-media.has-natural-ratio {
  aspect-ratio: 1 / 1 !important;
}

.project-detail--collistar .motion-case-row--collistar-attivi > .motion-case-media,
.project-detail--collistar .motion-case-row--collistar-attivi > .motion-case-media.has-natural-ratio,
.project-detail--collistar .motion-case-row--collistar-attivi-2022 > .motion-case-media,
.project-detail--collistar .motion-case-row--collistar-attivi-2022 > .motion-case-media.has-natural-ratio {
  aspect-ratio: 16 / 9 !important;
}

.project-detail--collistar .motion-case-row--collistar-beauty .motion-case-media__asset,
.project-detail--collistar .motion-case-row--collistar-impeccabile .motion-case-media__asset,
.project-detail--collistar .motion-case-row--collistar-attivi .motion-case-media__asset,
.project-detail--collistar .motion-case-row--collistar-attivi-2022 .motion-case-media__asset {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

.project-detail--collistar .motion-case-media-row--collistar-duo {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
}

.project-detail--collistar .motion-case-media-row--collistar-duo > .motion-case-media,
.project-detail--collistar .motion-case-media-row--collistar-duo > .motion-case-media.has-natural-ratio {
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9 !important;
}

.project-detail--collistar .motion-case-media-row--collistar-duo .motion-case-media__asset {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

.project-detail--collistar .motion-case-row--collistar-impeccabile .motion-case-copy,
.project-detail--collistar .motion-case-row--collistar-attivi-2022 .motion-case-copy {
  justify-items: end;
  text-align: right;
}

.project-detail--collistar .motion-case-row--collistar-impeccabile .motion-case-copy p,
.project-detail--collistar .motion-case-row--collistar-attivi-2022 .motion-case-copy p {
  max-width: 42ch;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

.project-detail--collistar .motion-case-row--collistar-beauty .motion-case-copy p,
.project-detail--collistar .motion-case-row--collistar-attivi .motion-case-copy p {
  max-width: 42ch;
}

@media (max-width: 840px) {
  .project-detail--collistar .motion-case-row--collistar-beauty,
  .project-detail--collistar .motion-case-row--collistar-impeccabile,
  .project-detail--collistar .motion-case-row--collistar-attivi,
  .project-detail--collistar .motion-case-row--collistar-attivi-2022 {
    grid-template-columns: 1fr;
  }

  .project-detail--collistar .motion-case-media-row--collistar-top,
  .project-detail--collistar .motion-case-media-row--collistar-routine {
    gap: 14px;
  }

  .project-detail--collistar .motion-case-copy p {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .project-detail--collistar .motion-case-row--collistar-impeccabile .motion-case-copy,
  .project-detail--collistar .motion-case-row--collistar-attivi-2022 .motion-case-copy,
  .project-detail--collistar .motion-case-row--collistar-impeccabile .motion-case-copy p,
  .project-detail--collistar .motion-case-row--collistar-attivi-2022 .motion-case-copy p {
    justify-items: start;
    text-align: left;
    margin-left: 0;
  }
}

/* ==========================================================================
   PANASONIC - ALLINEAMENTO REFERENCE
   ========================================================================== */

/* La reference usa una composizione molto piu ampia del vecchio layout
   Panasonic. Manteniamo un gutter omogeneo e simmetrico, senza il content-max
   desktop che stringeva eccessivamente la pagina. */
.project-detail--panasonic {
  --project-gutter: clamp(22px, 4vw, 58px);
  --project-content-max: 9999px;
}

@media (min-width: 1121px) {
  .project-detail--panasonic {
    --project-gutter: clamp(78px, 9vw, 210px);
    --project-content-max: 1360px;
  }
}

.project-detail--panasonic .project-detail-hero__inner {
  width: min(100%, var(--project-content-max));
  max-width: none;
  margin-inline: auto;
}

.project-detail--panasonic .motion-case-layout--panasonic,
.project-detail--panasonic .project-detail-credits > .container,
.project-detail--panasonic .project-detail-next > .container {
  width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
  max-width: none;
  margin-inline: auto;
}

.project-detail--panasonic .motion-case-layout--panasonic {
  gap: clamp(32px, 4vw, 58px);
}

.project-detail--panasonic .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

/* Video principale + copy: circa 2/3 e 1/3 come nella reference. */
.project-detail--panasonic .motion-case-row--panasonic-intro {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(0, 0.66fr) minmax(250px, 0.34fr);
  gap: clamp(20px, 2.4vw, 36px);
  align-items: center;
}

.project-detail--panasonic .motion-case-row--panasonic-intro > .motion-case-media,
.project-detail--panasonic .motion-case-row--panasonic-intro > .motion-case-media.has-natural-ratio {
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9 !important;
}

.project-detail--panasonic .motion-case-row--panasonic-intro .motion-case-media__asset {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

.project-detail--panasonic .motion-case-row--panasonic-intro .motion-case-copy p {
  max-width: 42ch;
}

/* La sequenza reference e una griglia a tre colonne:
   riga 1 = testo + immagine + immagine
   riga 2 = immagine + immagine + spazio libero. */
.project-detail--panasonic .motion-case-row--panasonic-stills {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(20px, 2.6vw, 38px) clamp(16px, 2vw, 28px);
}

.project-detail--panasonic .motion-case-row--panasonic-stills .motion-case-copy {
  justify-self: stretch;
  justify-items: end;
  text-align: right;
}

.project-detail--panasonic .motion-case-row--panasonic-stills .motion-case-copy p {
  max-width: 34ch;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

.project-detail--panasonic .motion-case-row--panasonic-stills > .motion-case-media,
.project-detail--panasonic .motion-case-row--panasonic-stills > .motion-case-media.has-natural-ratio {
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9 !important;
  justify-self: stretch;
}

.project-detail--panasonic .motion-case-row--panasonic-stills .motion-case-media__asset {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

@media (max-width: 840px) {
  .project-detail--panasonic .motion-case-row--panasonic-intro,
  .project-detail--panasonic .motion-case-row--panasonic-stills {
    grid-template-columns: 1fr;
  }

  .project-detail--panasonic .motion-case-row--panasonic-stills .motion-case-copy,
  .project-detail--panasonic .motion-case-row--panasonic-stills .motion-case-copy p {
    justify-items: start;
    text-align: left;
    margin-left: 0;
  }

  .project-detail--panasonic .motion-case-copy p {
    font-size: 1.05rem;
    line-height: 1.25;
  }
}

/* ===== PUPA — project-specific desktop refinement ===== */
@media (min-width: 1121px) {
  .project-detail--pupa {
    --project-gutter: clamp(78px, 9vw, 210px);
    --project-content-max: 1360px;
  }

  /* Hero, content, credits and next project share the same project gutters. */
  .project-detail--pupa .project-detail-hero {
    padding-inline: var(--project-gutter);
  }

  .project-detail--pupa .project-detail-hero__inner {
    width: min(100%, var(--project-content-max));
    max-width: none;
    margin-inline: auto;
  }

  .project-detail--pupa .project-detail-motion > .motion-case-layout,
  .project-detail--pupa .project-detail-credits > .container,
  .project-detail--pupa .project-detail-next > .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
    max-width: none;
    margin-inline: auto;
  }

  .project-detail--pupa .motion-case-layout--pupa {
    gap: clamp(38px, 4.6vw, 66px);
  }

  .project-detail--pupa .motion-case-copy p {
    font-size: clamp(1rem, 1.02vw, 1.12rem);
    line-height: 1.18;
  }

  .project-detail--pupa .motion-case-media--pupa-main,
  .project-detail--pupa .motion-case-media--pupa-main.has-natural-ratio {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
  }

  .project-detail--pupa .motion-case-media--pupa-main .motion-case-media__asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .project-detail--pupa .motion-case-copy--pupa-intro {
    width: 100%;
    max-width: none;
  }

  .project-detail--pupa .motion-case-copy--pupa-intro p {
    max-width: none;
  }

  .project-detail--pupa .motion-case-row--pupa-text-left,
  .project-detail--pupa .motion-case-row--pupa-text-right {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    align-items: center;
    justify-items: stretch;
    column-gap: clamp(30px, 4vw, 58px);
  }

  .project-detail--pupa .motion-case-row--pupa-text-left {
    grid-template-columns: minmax(240px, 0.44fr) minmax(0, 0.56fr);
  }

  .project-detail--pupa .motion-case-row--pupa-text-right {
    grid-template-columns: minmax(0, 0.56fr) minmax(240px, 0.44fr);
  }

  .project-detail--pupa .motion-case-row--pupa-text-left .motion-case-copy {
    justify-self: end;
    text-align: right;
  }

  .project-detail--pupa .motion-case-row--pupa-text-left .motion-case-copy p {
    max-width: 34ch;
    margin-left: auto;
  }

  .project-detail--pupa .motion-case-row--pupa-text-right .motion-case-copy p {
    max-width: 34ch;
  }

  .project-detail--pupa .motion-case-media--pupa-still,
  .project-detail--pupa .motion-case-media--pupa-still.has-natural-ratio {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
  }

  .project-detail--pupa .motion-case-media--pupa-still .motion-case-media__asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ==========================================================
   ROCHAS — reference alignment / standard project gutters
   ========================================================== */
.project-detail--rochas {
  --project-gutter: clamp(22px, 4vw, 58px);
  --project-content-max: 9999px;
}

.project-detail--rochas .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--rochas .motion-case-media--rochas-main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  aspect-ratio: 16 / 9;
  justify-self: stretch;
}

.project-detail--rochas .motion-case-copy--rochas-lead {
  width: 100%;
  justify-self: stretch;
}

.project-detail--rochas .motion-case-copy--rochas-lead p {
  max-width: 92ch;
}

@media (min-width: 1121px) {
  .project-detail--rochas {
    --project-gutter: clamp(78px, 9vw, 210px);
    --project-content-max: 1360px;
  }

  .project-detail--rochas .project-detail-hero {
    padding-inline: var(--project-gutter);
  }

  .project-detail--rochas .project-detail-hero__inner {
    width: min(100%, var(--project-content-max));
    max-width: none;
    margin-inline: auto;
  }

  .project-detail--rochas .project-detail-motion .motion-case-layout,
  .project-detail--rochas .project-detail-credits > .container,
  .project-detail--rochas .project-detail-next > .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
    max-width: none;
    margin-inline: auto;
  }

  .project-detail--rochas .motion-case-layout {
    gap: clamp(26px, 3vw, 44px);
  }
}


/* ==========================================================
   SAFILO — reference alignment / standard project gutters
   ========================================================== */
.project-detail--safilo {
  --project-gutter: clamp(22px, 4vw, 58px);
  --project-content-max: 9999px;
}

.project-detail--safilo .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--safilo .motion-case-media--safilo-main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  aspect-ratio: 16 / 9;
  justify-self: stretch;
}

.project-detail--safilo .motion-case-copy--safilo-lead {
  width: 100%;
  justify-self: stretch;
}

.project-detail--safilo .motion-case-copy--safilo-lead p {
  max-width: 100ch;
}

@media (min-width: 1121px) {
  .project-detail--safilo {
    --project-gutter: clamp(78px, 9vw, 210px);
    --project-content-max: 1360px;
  }

  .project-detail--safilo .project-detail-hero {
    padding-inline: var(--project-gutter);
  }

  .project-detail--safilo .project-detail-hero__inner {
    width: min(100%, var(--project-content-max));
    max-width: none;
    margin-inline: auto;
  }

  .project-detail--safilo .project-detail-motion .motion-case-layout,
  .project-detail--safilo .project-detail-credits > .container,
  .project-detail--safilo .project-detail-next > .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
    max-width: none;
    margin-inline: auto;
  }

  .project-detail--safilo .motion-case-layout {
    gap: clamp(26px, 3vw, 44px);
  }
}


/* ==========================================================
   SHORT FILM — THE DAY AFTER
   reference alignment / standard project gutters
   ========================================================== */
.project-detail--short-film {
  --project-gutter: clamp(22px, 4vw, 58px);
  --project-content-max: 9999px;
}

.project-detail--short-film .motion-case-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem);
  line-height: 1.18;
}

.project-detail--short-film .motion-case-media--short-film-main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  aspect-ratio: 16 / 9;
  justify-self: stretch;
}

.project-detail--short-film .motion-case-copy--short-film-lead {
  width: 100%;
  justify-self: stretch;
}

.project-detail--short-film .motion-case-copy--short-film-lead p {
  max-width: 100ch;
}

.project-detail--short-film .motion-case-grid--short-film {
  width: min(100%, 900px);
  gap: clamp(14px, 2vw, 24px);
}

.project-detail--short-film .motion-case-grid--short-film-top {
  justify-self: start;
}

.project-detail--short-film .motion-case-grid--short-film-bottom {
  justify-self: end;
}

.project-detail--short-film .motion-case-grid--short-film .motion-case-media {
  aspect-ratio: 16 / 9;
}

@media (min-width: 1121px) {
  .project-detail--short-film {
    --project-gutter: clamp(78px, 9vw, 210px);
    --project-content-max: 1360px;
  }

  .project-detail--short-film .project-detail-hero {
    padding-inline: var(--project-gutter);
  }

  .project-detail--short-film .project-detail-hero__inner {
    width: min(100%, var(--project-content-max));
    max-width: none;
    margin-inline: auto;
  }

  .project-detail--short-film .project-detail-motion .motion-case-layout,
  .project-detail--short-film .project-detail-credits > .container,
  .project-detail--short-film .project-detail-next > .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max));
    max-width: none;
    margin-inline: auto;
  }

  .project-detail--short-film .motion-case-layout {
    gap: clamp(24px, 3vw, 42px);
  }

  .project-detail--short-film .motion-case-copy--short-film-lead {
    margin-bottom: clamp(8px, 1vw, 14px);
  }
}

/* ==========================================================================
   FINAL PROJECT TYPOGRAPHY NORMALIZATION
   All descriptive project copy uses one desktop scale.
   Hero titles, metadata, credits and navigation are intentionally excluded.
   ========================================================================== */
.project-detail .motion-case-copy p,
.project-detail .motion-detail-copy p,
.project-detail .kartell-express-copy p,
.project-detail .install-copy p,
.project-detail .cassina-human-copy p,
.project-detail .project-detail-story__copy p,
.project-detail .project-detail-copy__text,
.project-detail .the-game-copy,
.project-detail .the-game-detail__center-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem) !important;
  line-height: 1.18 !important;
}

/* Specificity lock: project-specific production overrides must not change body copy size. */
main.project-detail.project-detail--production-layout .motion-case-copy p,
main.project-detail .motion-detail-copy p,
main.project-detail .kartell-express-copy p,
main.project-detail .install-copy p,
main.project-detail .cassina-human-copy p,
main.project-detail .project-detail-story__copy p,
main.project-detail .project-detail-copy__text,
main.project-detail .the-game-copy,
main.project-detail .the-game-detail__center-copy p {
  font-size: clamp(1rem, 1.02vw, 1.12rem) !important;
  line-height: 1.18 !important;
}

/* ==========================================================================
   INTERNI 2026 — DESKTOP PHONE / ANIMATION ROW FIX
   Keep animation and iPhone mockup side-by-side, lower and non-overlapping.
   ========================================================================== */
@media (min-width: 1121px) {
  .project-detail--interni-2026 .motion-case-row--interni-phone {
    grid-template-columns: minmax(0, 0.74fr) minmax(260px, 0.26fr) !important;
    align-items: center !important;
  }

  .project-detail--interni-2026 .motion-case-media-row--interni-phone {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 0.32fr) !important;
    gap: clamp(20px, 2vw, 34px) !important;
    align-items: stretch !important;
    overflow: visible;
  }

  .project-detail--interni-2026 .motion-case-media--interni-animation {
    width: 100% !important;
    min-width: 0;
    aspect-ratio: 16 / 9 !important;
    align-self: center;
  }

  .project-detail.project-detail--interni-2026 .motion-case-media--phone.motion-case-media--interni-phone-mockup {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    overflow: visible;
  }

  .project-detail--interni-2026 .motion-case-media--interni-phone-mockup .motion-case-media__asset {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center;
  }
}

/* ==========================================================================
   KARTELL H.H.H. — FINAL PROJECT ALIGNMENT
   Uses exactly the same desktop gutters/content width and body-copy scale as
   the other production project pages. This intentionally overrides legacy
   H.H.H.-specific width and typography rules above.
   ========================================================================== */
.project-detail--kartell-hhh {
  --project-gutter: clamp(22px, 4vw, 58px);
  --project-content-max: 9999px;
}

main.project-detail--kartell-hhh .motion-case-layout .motion-case-copy p,
main.project-detail--kartell-hhh .motion-case-layout .motion-case-copy--center p,
main.project-detail--kartell-hhh .motion-case-layout .motion-case-copy--right p {
  font-size: clamp(1rem, 1.02vw, 1.12rem) !important;
  line-height: 1.18 !important;
}

@media (min-width: 1121px) {
  .project-detail--kartell-hhh {
    --project-gutter: clamp(78px, 9vw, 210px);
    --project-content-max: 1360px;
  }

  .project-detail--kartell-hhh .project-detail-hero {
    padding-inline: var(--project-gutter) !important;
  }

  .project-detail--kartell-hhh .project-detail-hero__inner {
    width: min(100%, var(--project-content-max)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .project-detail--kartell-hhh .project-detail-motion .motion-case-layout,
  .project-detail--kartell-hhh .project-detail-credits > .container,
  .project-detail--kartell-hhh .project-detail-next > .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
}

/* ==========================================================================
   MILLEFIORI - CAMPAGNA 2026 — FINAL STANDARD PROJECT GUTTERS
   Preserve the approved composition, but align hero, content, credits and
   next-project navigation to the same lateral margins used by all projects.
   ========================================================================== */
.project-detail--millefiori-campaign {
  --project-gutter: clamp(22px, 4vw, 58px);
  --project-content-max: 9999px;
}

@media (min-width: 1121px) {
  .project-detail--millefiori-campaign {
    --project-gutter: clamp(78px, 9vw, 210px);
    --project-content-max: 1360px;
  }

  .project-detail--millefiori-campaign .project-detail-hero {
    padding-inline: var(--project-gutter) !important;
  }

  .project-detail--millefiori-campaign .project-detail-hero__inner {
    width: min(100%, var(--project-content-max)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .project-detail--millefiori-campaign .motion-case-layout--millefiori,
  .project-detail--millefiori-campaign .project-detail-motion .motion-case-layout,
  .project-detail--millefiori-campaign .project-detail-credits > .container,
  .project-detail--millefiori-campaign .project-detail-next > .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
}

/* ========================================================================== 
   ULTIME MODIFICHE SITO TWOSHOT - PDF REVIEW 2026-09-10
   ========================================================================== */

/* Generale: margini laterali desktop ridotti di circa il 25% rispetto alla
   versione precedente, mantenendo tutte le pagine progetto centrate. */
@media (min-width: 1121px) {
  .project-detail {
    --project-gutter: clamp(78px, 9vw, 210px) !important;
    --project-content-max: 1480px !important;
  }

  .project-detail.project-detail--motion-case .project-detail-hero {
    padding-inline: var(--project-gutter) !important;
  }

  .project-detail.project-detail--motion-case .project-detail-hero__inner {
    width: min(100%, var(--project-content-max)) !important;
    margin-inline: auto !important;
  }

  .project-detail.project-detail--motion-case .motion-case-detail > .container,
  .project-detail.project-detail--motion-case .project-detail-credits > .container,
  .project-detail.project-detail--motion-case .project-detail-next > .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
}

/* INTERNI 2026 ------------------------------------------------------------ */
@media (min-width: 1121px) {
  .project-detail--interni-2026 .motion-case-row--interni-phone {
    grid-template-columns: minmax(0, 0.72fr) minmax(250px, 0.28fr) !important;
    gap: clamp(38px, 4vw, 72px) !important;
    align-items: center !important;
  }

  .project-detail--interni-2026 .motion-case-media-row--interni-phone {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.42fr) !important;
    gap: clamp(18px, 2vw, 34px) !important;
    align-items: center !important;
  }

  .project-detail--interni-2026 .motion-case-media--interni-animation,
  .project-detail--interni-2026 .motion-case-media--interni-animation.has-natural-ratio {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .project-detail--interni-2026 .motion-case-media--interni-animation .motion-case-media__asset {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: transparent !important;
  }

  .project-detail--interni-2026 .motion-case-media--interni-phone-mockup {
    width: 100% !important;
    max-width: 300px !important;
    justify-self: start !important;
  }

  .project-detail--interni-2026 .motion-case-media--interni-phone-mockup .motion-case-media__asset {
    width: 100% !important;
    
    object-fit: contain !important;
  }

  .project-detail--interni-2026 .motion-case-media--interni-main {
    width: min(58%, 820px) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-self: start !important;
  }
}

/* MILLEFIORI CAMPAGNA 2026 ------------------------------------------------ */
@media (min-width: 1121px) {
  .project-detail--millefiori-campaign .motion-case-row--millefiori-intro {
    grid-template-columns: minmax(300px, 0.42fr) minmax(0, 0.58fr) !important;
    gap: clamp(34px, 4vw, 68px) !important;
  }

  .project-detail--millefiori-campaign .motion-case-copy--millefiori-intro,
  .project-detail--millefiori-campaign .motion-case-copy--millefiori-intro p {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ONEWORKS / BULGARI: testo più esteso in orizzontale --------------------- */
@media (min-width: 1121px) {
  .project-detail--oneworks .motion-case-layout,
  .project-detail--bulgari .motion-case-layout {
    width: min(100%, 1320px) !important;
  }

  .project-detail--oneworks .motion-case-copy,
  .project-detail--oneworks .motion-case-copy p,
  .project-detail--bulgari .motion-case-copy,
  .project-detail--bulgari .motion-case-copy p {
    width: 100% !important;
    max-width: none !important;
  }
}

/* BALDININI --------------------------------------------------------------- */
@media (min-width: 1121px) {
  .project-detail--baldinini .motion-case-row--intro {
    grid-template-columns: minmax(0, 0.62fr) minmax(340px, 0.38fr) !important;
  }

  .project-detail--baldinini .baldinini-nowrap-title {
    white-space: nowrap !important;
    max-width: none !important;
  }

  .project-detail--baldinini .motion-case-media-row--four,
  .project-detail--baldinini .motion-case-media-row--baldinini-final {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  .project-detail--baldinini .motion-case-media-row--baldinini-final > .motion-case-media {
    width: 100% !important;
    max-width: none !important;
  }
}

/* SHORT FILM: nessuna banda nera laterale nelle 4 immagini ---------------- */
.project-detail--short-film .motion-case-media--short-film-still,
.project-detail--short-film .motion-case-media--short-film-still.has-natural-ratio {
  background: transparent !important;
  overflow: hidden !important;
}
.project-detail--short-film .motion-case-media--short-film-still .motion-case-media__asset {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* COMUNE DI MILANO: verticali più grandi come Miro ------------------------ */
@media (min-width: 1121px) {
  .project-detail--comune-milano .motion-case-row--poster {
    grid-template-columns: minmax(330px, 0.44fr) minmax(380px, 0.56fr) !important;
    gap: clamp(42px, 5vw, 76px) !important;
  }
  .project-detail--comune-milano .motion-case-media--poster {
    width: min(100%, 500px) !important;
    max-width: none !important;
  }
  .project-detail--comune-milano .motion-case-row--comune-crossmedia > .motion-case-media {
    width: min(100%, 500px) !important;
    max-width: none !important;
  }
}

/* SIGLE 105 — primo testo allineato al bordo del video */
.project-detail--sigle-105
.motion-case-block
> .motion-case-copy--left {
  width: 100%;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.project-detail--sigle-105
.motion-case-block
> .motion-case-copy--left p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* H.H.H.: testi più estesi e phone row meno vuota -------------------------- */
@media (min-width: 1121px) {
  .project-detail--kartell-hhh .motion-case-copy--intro,
  .project-detail--kartell-hhh .motion-case-copy--intro p {
    width: 100% !important;
    max-width: none !important;
  }

  .project-detail--kartell-hhh .motion-case-layout > .motion-case-copy--right,
  .project-detail--kartell-hhh .motion-case-layout > .motion-case-copy--right p {
    width: 100% !important;
    max-width: none !important;
  }

  .project-detail--kartell-hhh .motion-case-row--phone-right {
    grid-template-columns: minmax(0, 0.64fr) minmax(220px, 0.36fr) !important;
    gap: clamp(28px, 3vw, 52px) !important;
  }

  .project-detail--kartell-hhh .motion-case-row--phone-right .motion-case-copy,
  .project-detail--kartell-hhh .motion-case-row--phone-right .motion-case-copy p {
    width: 100% !important;
    max-width: none !important;
  }
}

/* CASSINA INSTALLAZIONE: testo inferiore esteso come quello superiore ------ */
@media (min-width: 1121px) {
  .project-detail--cassina-installation .install-copy--right {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    text-align: right !important;
  }
  .project-detail--cassina-installation .install-copy--right p {
    width: 100% !important;
    max-width: none !important;
  }
}

/* CASSINA HUMAN: foto verticale evidenziata più grande --------------------- */
@media (min-width: 1121px) {
  .project-detail--cassina-human .cassina-human-pair--compact {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr) !important;
    align-items: stretch !important;
  }
  .project-detail--cassina-human .cassina-human-pair--compact > .cassina-human-media:first-child {
    min-height: clamp(500px, 40vw, 720px) !important;
  }
  .project-detail--cassina-human .cassina-human-pair--compact > .cassina-human-media:first-child .cassina-human-media__asset {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* KARTELL EXPRESS: telefoni uniformati ------------------------------------- */
@media (min-width: 1121px) {
  .project-detail--kartell-express .kartell-express-row--phone-left .kartell-express-media--phone,
  .project-detail--kartell-express .kartell-express-row--phone-right .kartell-express-media--phone {
    width: clamp(190px, 18vw, 290px) !important;
    max-width: 290px !important;
  }
  .project-detail--kartell-express .kartell-express-row--phone-left .kartell-express-media--phone img,
  .project-detail--kartell-express .kartell-express-row--phone-right .kartell-express-media--phone img {
    width: 100% !important;
    height: auto !important;
  }
}

/* MILLEFIORI NEW LOOK MACHINE: più aria sopra/sotto il telefono ------------ */
@media (min-width: 1121px) {
  .project-detail--millefiori-machine .motion-case-row--millefiori-phone {
    margin-top: clamp(70px, 7vw, 120px) !important;
    margin-bottom: clamp(70px, 7vw, 120px) !important;
  }
}

/* DOUGLAS: griglie coerenti con Miro --------------------------------------- */
@media (min-width: 1121px) {
  .project-detail--douglas .motion-case-layout {
    width: min(100%, 1320px) !important;
  }
  .project-detail--douglas .motion-case-media-row--douglas-gallery,
  .project-detail--douglas .motion-case-media-row--douglas-final {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Generale: anche i progetti installazione seguono il nuovo margine desktop. */
@media (min-width: 1121px) {
  .project-detail--install-custom .project-detail-hero {
    padding-inline: var(--project-gutter) !important;
  }
  .project-detail--install-custom .project-detail-hero__inner,
  .project-detail--install-custom .install-detail__inner,
  .project-detail--install-custom .project-detail-credits > .container,
  .project-detail--install-custom .project-detail-next > .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
  .project-detail--install-custom .install-detail {
    padding-inline: 0 !important;
  }
}

/* Mondoffice Private Label: la terza riga resta solo media dopo l'accorpamento testo. */
.project-detail-story__row--media-only {
  grid-template-columns: 1fr !important;
}
.project-detail-story__row--media-only .project-detail-story__media {
  width: min(55%, 720px);
  justify-self: end;
}

/* General desktop text width cleanup requested in review. */
@media (min-width: 1121px) {
  .project-detail--oneworks .motion-case-copy--oneworks p,
  .project-detail--bulgari .motion-case-copy p {
    max-width: 88ch !important;
  }
}

/* COMUNE DI MILANO — allineamento testo seconda locandina */
.project-detail--comune-milano
.motion-case-row--comune-crossmedia
.motion-case-copy {
  justify-self: start;
  margin-left: 0;
  text-align: left;
}

.motion-case-row--comune-crossmedia .motion-case-copy {
  justify-self: start;
  margin-left: 0;
  text-align: left;
}

@media (min-width: 1121px) {
  main.project-detail--comune-milano .motion-case-row--comune-crossmedia {
    display: grid !important;
    grid-template-columns: minmax(0, 480px) max-content 1fr !important;
    column-gap: clamp(40px, 6vw, 80px) !important;
    row-gap: 0 !important;
    justify-content: start !important;
    align-items: center !important;
  }

  main.project-detail--comune-milano
    .motion-case-row--comune-crossmedia
    > .motion-case-media--poster {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 480px !important;
    justify-self: start !important;
  }

  main.project-detail--comune-milano
    .motion-case-row--comune-crossmedia
    > .motion-case-copy {
    grid-column: 2 !important;
    width: max-content !important;
    max-width: none !important;
    justify-self: start !important;
    margin: 0 !important;
    text-align: left !important;
  }
}

@media (min-width: 1121px) {
  /* Riga 2: testo a sinistra + locandina a destra */
  main.project-detail--comune-milano
    .motion-case-row--poster:not(.motion-case-row--comune-crossmedia) {
    grid-template-columns: minmax(0, 1fr) 30% !important;
  }

  main.project-detail--comune-milano
    .motion-case-row--poster:not(.motion-case-row--comune-crossmedia)
    > .motion-case-media--poster {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  /* Riga 3: locandina a sinistra + testo a destra */
  main.project-detail--comune-milano .motion-case-row--comune-crossmedia {
    grid-template-columns: 30% max-content minmax(0, 1fr) !important;
  }

  main.project-detail--comune-milano
    .motion-case-row--comune-crossmedia
    > .motion-case-media--poster {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

@media (min-width: 1121px) {
  /* Riga 2: testo a sinistra + locandina a destra */
  main.project-detail--comune-milano
    .motion-case-row--poster:not(.motion-case-row--comune-crossmedia) {
    grid-template-columns: minmax(0, 1fr) 30% !important;
  }

  main.project-detail--comune-milano
    .motion-case-row--poster:not(.motion-case-row--comune-crossmedia)
    > .motion-case-media--poster {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  /* Riga 3: locandina a sinistra + testo a destra */
  main.project-detail--comune-milano .motion-case-row--comune-crossmedia {
    grid-template-columns: 30% max-content minmax(0, 1fr) !important;
  }

  main.project-detail--comune-milano
    .motion-case-row--comune-crossmedia
    > .motion-case-media--poster {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

@media (min-width: 1121px) {
  main.project-detail--comune-milano .motion-case-row--poster {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    column-gap: clamp(20px, 2.4vw, 38px) !important;
    row-gap: 0 !important;
    align-items: center !important;
  }

  /* Riga sopra: testo + locandina */
  main.project-detail--comune-milano
    .motion-case-row--poster:not(.motion-case-row--comune-crossmedia) {
    grid-template-columns: minmax(0, 1fr) 40% !important;
  }

  main.project-detail--comune-milano
    .motion-case-row--poster:not(.motion-case-row--comune-crossmedia)
    > .motion-case-copy {
    justify-self: end !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: right !important;
  }

  main.project-detail--comune-milano
    .motion-case-row--poster:not(.motion-case-row--comune-crossmedia)
    > .motion-case-media--poster {
    width: 100% !important;
    max-width: none !important;
  }

  /* Riga sotto: locandina + testo */
  main.project-detail--comune-milano .motion-case-row--comune-crossmedia {
    grid-template-columns: 40% minmax(0, 1fr) !important;
    margin-top: 0 !important;
  }

  main.project-detail--comune-milano
    .motion-case-row--comune-crossmedia
    > .motion-case-media--poster {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  main.project-detail--comune-milano
    .motion-case-row--comune-crossmedia
    > .motion-case-copy {
    grid-column: 2 !important;
    justify-self: start !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }
}