@media (max-width: 1120px) {
  .section__header,
  .page-hero__inner,
  .two-column,
  .contact-band__content,
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 100svh;
  }

  .hero-mask__logo {
    width: min(98vw, 1120px);
    bottom: clamp(78px, 10vh, 118px);
  }

  .hero-mask__bubble--one {
    --bubble-size: clamp(410px, 74vw, 720px);
    --bubble-left: -20vw;
    --bubble-top: 12vh;
  }

  .hero-mask__bubble--two {
    --bubble-size: clamp(390px, 70vw, 690px);
    --bubble-left: 48vw;
    --bubble-top: 16vh;
  }

  .hero-mask__bubble--three {
    --bubble-size: clamp(170px, 34vw, 310px);
    --bubble-left: 36vw;
    --bubble-top: 54vh;
  }

  .page-hero {
    min-height: min(680px, 76vh);
    padding-top: calc(var(--header-h) + 48px);
  }

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

  .service-item {
    grid-template-columns: 1fr;
  }

  .service-item p,
  .service-item__icon {
    grid-column: auto;
  }

  .service-item__icon {
    justify-self: center;
  }

  .service-list {
    grid-auto-rows: 76px;
    gap: 2px;
    overflow: visible;
  }

  .service-item h3 {
    font-size: clamp(2rem, 6vw, 2.85rem);
  }

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

  .service-item__video {
    width: 4.15em;
    height: 2.08em;
  }

  .process-step {
    grid-template-columns: 92px 1fr;
  }

  .process-step p {
    grid-column: 2;
  }

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

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

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

  .production-card,
  .motion-project,
  .motion-project:nth-child(even),
  .team-row,
  .about-contact__grid,
  .project-detail-story__row,
  .project-detail-story__row--reverse,
  .project-detail-copy__grid,
  .project-detail-hero__inner,
  .motion-detail-intro,
  .motion-detail-split,
  .motion-detail-section--split,
  .motion-detail-section--reverse {
    grid-template-columns: 1fr;
  }

  .project-detail-story__row--reverse .project-detail-story__media,
  .motion-detail-section--reverse .motion-detail-copy {
    order: 0;
  }

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

  .production-card__media,
  .motion-project__media {
    min-height: clamp(300px, 48vw, 520px);
  }

  .project-detail--the-game .project-detail-hero__inner {
    grid-template-columns: minmax(0, 0.72fr) minmax(240px, 0.38fr);
  }

  .project-detail--install-custom .project-detail-hero__inner {
    grid-template-columns: minmax(0, 0.72fr) minmax(240px, 0.38fr);
  }

  .site-header {
    max-width: 100vw;
    padding-inline: var(--gutter);
  }

  .site-header__inner {
    justify-content: space-between;
    gap: 18px;
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 88;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 34px;
    padding: calc(var(--header-h) + 48px) var(--gutter) var(--gutter);
    background: var(--ink);
    color: var(--cream);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -100%, 0);
    transition:
      transform 0.45s var(--ease-inout),
      opacity 0.2s var(--ease-out),
      visibility 0s 0.45s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition:
      transform 0.45s var(--ease-inout),
      opacity 0.2s var(--ease-out),
      visibility 0s;
  }

  .nav__links {
    display: grid;
    gap: 30px;
    justify-content: start;
  }

  .nav__link {
    max-width: min(100%, 12ch);
    font-size: clamp(2.35rem, 12vw, var(--type-large));
    line-height: 0.88;
    overflow-wrap: anywhere;
  }

  .menu-toggle {
    position: relative;
    z-index: 90;
    display: grid;
  }

  .nav .button {
    border-color: var(--cream);
    color: var(--cream);
  }
}

@media (max-width: 840px) {
  :root {
    --header-h: 72px;
    --type-small: 0.84rem;
    --type-medium: 1.28rem;
    --type-large: 4rem;
  }

  .site-header {
    max-width: 100vw;
    padding-inline: var(--gutter);
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 88;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 34px;
    padding: calc(var(--header-h) + 48px) var(--gutter) var(--gutter);
    overflow-y: auto;
    background: var(--ink);
    color: var(--cream);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -100%, 0);
    transition:
      transform 0.45s var(--ease-inout),
      opacity 0.2s var(--ease-out),
      visibility 0s linear 0.45s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition:
      transform 0.45s var(--ease-inout),
      opacity 0.2s var(--ease-out),
      visibility 0s;
  }

  .nav__links {
    display: grid;
    gap: 30px;
    justify-content: start;
  }

  .nav__link {
    max-width: min(100%, 12ch);
    font-size: clamp(2.35rem, 12vw, var(--type-large));
    line-height: 0.88;
    overflow-wrap: anywhere;
  }

  .menu-toggle {
    position: relative;
    z-index: 90;
    display: grid;
  }

  .nav .button {
    border-color: var(--cream);
    color: var(--cream);
  }

  .hero {
    min-height: min(100svh, 780px);
  }

  #sketch {
    display: none;
  }

  .mobile-sketch-video {
    display: block;
  }

  .hero-mask {
    cursor: auto;
  }

  .hero-mask__pointer {
    display: none;
  }

  .hero-mask__bubble {
    will-change: auto;
  }

  .scroll-cue {
    display: none;
  }

  .service-list {
    grid-auto-rows: 78px;
    gap: 0;
    justify-items: center;
    align-items: center;
    overflow: visible;
  }

  .service-item h3 {
    max-width: calc(100vw - (var(--gutter) * 2));
    font-size: clamp(1.45rem, 6.4vw, 2rem);
    line-height: 0.82;
  }

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

  .service-item__video {
    width: 4.45em;
    height: 2.22em;
  }

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

  #servizi .section__header {
    justify-items: center;
    margin-bottom: 18px;
    text-align: center;
  }

  .manifesto__media {
    min-height: 420px;
  }

  .project-card,
  .project-card:nth-child(6n + 1),
  .project-card:nth-child(6n + 2),
  .project-card:nth-child(6n + 4),
  .project-card:nth-child(6n + 5) {
    grid-column: 1 / -1;
    min-height: 430px;
  }

  .project-card__top,
  .project-card__bottom,
  .footer-bottom {
    flex-direction: column;
  }

  .project-card__meta {
    text-align: left;
  }

  .horizontal-wrap {
    min-height: auto;
  }

  .horizontal-track {
    width: auto;
    min-height: auto;
    display: grid;
    padding-block: 72px;
  }

  .horizontal-panel {
    width: min(100%, 680px);
    min-height: min(420px, 78svh);
  }

  .spotlight-card,
  .spotlight-card--wide {
    grid-column: 1 / -1;
  }

  .home-project-grid {
    grid-template-columns: 1fr;
  }

  .project-gallery {
    grid-template-columns: 1fr;
  }

  .motion-detail-stack {
    gap: 52px;
  }

  .motion-detail-grid,
  .motion-detail-grid[data-count="2"] {
    grid-template-columns: 1fr;
    max-width: none;
  }

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

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

.motion-detail-copy p {
    max-width: min(100%, 34ch);
    font-size: 1.05rem;
    line-height: 1.16;
  }

  .project-detail-story__stack {
    gap: 48px;
  }

  .project-detail-copy__text,
  .project-detail-story__copy p {
    max-width: min(100%, 34ch);
    font-size: 1.05rem;
    line-height: 1.16;
  }

  .project-gallery__item--wide {
    aspect-ratio: 16 / 10;
  }

  .project-detail-next__grid {
    align-items: stretch;
    flex-direction: column;
  }

  .project-detail-next__link {
    justify-items: start;
    text-align: left;
  }

  .media-strip {
    grid-auto-columns: minmax(150px, 58%);
  }

  .team-row {
    gap: 8px;
  }

  .page-hero {
    min-height: auto;
    padding: calc(var(--header-h) + 42px) var(--gutter) clamp(48px, 10vw, 76px);
  }

  .page-hero__title {
    max-width: 11ch;
    overflow-wrap: anywhere;
  }

  .page-hero--about .page-hero__title {
    max-width: min(100%, 16ch);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .page-hero--claim .page-hero__inner {
    width: 100%;
  }

  .page-hero--claim .page-hero__title {
    width: 100%;
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .page-hero .lead {
    max-width: 34rem;
  }

  .project-detail-meta {
    grid-template-columns: 1fr;
  }

  .project-detail-meta dd {
    font-size: var(--type-medium);
  }

  .project-detail--the-game .project-detail-hero {
    min-height: auto;
    padding-bottom: clamp(54px, 10vw, 78px);
  }

  .project-detail--the-game .project-detail-hero__inner,
  .the-game-detail__lead,
  .the-game-detail__outro,
  .the-game-detail__duo {
    grid-template-columns: 1fr;
  }

  .the-game-detail {
    padding-bottom: clamp(58px, 12vw, 88px);
  }

  .the-game-detail__inner {
    gap: clamp(42px, 10vw, 68px);
  }

  .the-game-detail__duo {
    width: 100%;
  }

  .the-game-detail__center-copy {
    text-align: left;
  }

  .the-game-copy,
  .the-game-detail__center-copy p {
    width: 100%;
    max-width: none;
    font-size: 1.08rem;
    line-height: 1.18;
  }

  .the-game-copy {
    max-width: min(100%, 30ch) !important;
    justify-self: start;
    word-break: normal;
  }

  .project-detail--install-custom .project-detail-hero {
    min-height: auto;
    padding-bottom: clamp(54px, 10vw, 78px);
  }

  .project-detail--install-custom .page-hero__title {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(3.15rem, 16vw, var(--type-large));
  }

  .project-detail--install-custom .project-detail-hero__inner,
  .install-media-grid--three,
  .install-media-grid--two,
  .install-split,
  .install-split--lead,
  .install-split--text-left,
  .install-split--wide-media,
  .annibale-three {
    grid-template-columns: 1fr;
  }

  .project-detail--motion-case .project-detail-hero {
    min-height: auto;
    padding-bottom: clamp(54px, 10vw, 78px);
  }

  .project-detail--motion-case .project-detail-hero__inner,
  .motion-case-row,
  .motion-case-row--intro,
  .motion-case-row--split,
  .motion-case-row--reverse,
  .motion-case-row--text-left,
  .motion-case-row--knt-first,
  .motion-case-row--knt-second,
  .motion-case-row--pupa-text-left,
  .motion-case-row--pupa-text-right,
  .project-detail--sigle-105 .motion-case-row--sigle-graphic,
  .project-detail--sigle-105 .motion-case-row--sigle-examples,
  .motion-case-row--phone-left,
  .motion-case-row--phone-right,
  .project-detail--cassina-pov .motion-case-row--text-left,
  .project-detail--giorgetti-2023 .motion-case-row--giorgetti-intro,
  .project-detail--giorgetti-2023 .motion-case-row--giorgetti-cards,
  .project-detail--giorgetti-2024 .motion-case-row--giorgetti1-rocking,
  .project-detail--giorgetti-2024 .motion-case-media-row--giorgetti1-portraits,
  .project-detail--natuzzi .motion-case-row--natuzzi-text-left,
  .project-detail--natuzzi .motion-case-row--natuzzi-text-right,
  .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,
  .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,
  .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,
  .project-detail--collistar .motion-case-media-row--collistar-top,
  .project-detail--collistar .motion-case-media-row--collistar-routine,
  .project-detail--collistar .motion-case-media-row--collistar-duo,
  .project-detail--kartell-catalogo .motion-case-row--catalogo-exploration,
  .project-detail--kartell-catalogo .motion-case-row--catalogo-iconic,
  .project-detail--baldinini .motion-case-row--baldinini-intro,
  .project-detail--baldinini .motion-case-row--baldinini-city,
  .project-detail--baldinini .motion-case-media-row--baldinini-city-media,
  .project-detail--baldinini .motion-case-media-row--baldinini-urban,
  .project-detail--baldinini .motion-case-media-row--baldinini-final,
  .project-detail--millefiori-campaign .motion-case-row--intro,
  .project-detail--douglas .motion-case-row--vertical-intro,
  .project-detail--douglas .motion-case-row--text-left,
  .motion-case-media-row--three,
  .motion-case-media-row--two,
  .motion-case-media-row--four,
  .motion-case-grid--two,
  .motion-case-grid--three,
  .project-detail--redbull .motion-case-media-row--redbull,
  .project-detail--milano-design-city .motion-case-row--posters {
    grid-template-columns: 1fr;
  }

  .project-detail--motion-case .page-hero__title {
    max-width: 100%;
    font-size: clamp(3.05rem, 15vw, var(--type-large));
  }

  .motion-case-detail {
    padding-bottom: clamp(58px, 12vw, 88px);
  }

  .motion-case-layout {
    gap: clamp(42px, 10vw, 68px);
  }

  .motion-case-row--phone-left,
  .motion-case-row--phone-right {
    width: 100%;
    margin-left: 0;
  }

  .motion-case-media--phone {
    width: min(78vw, 320px);
    justify-self: start;
  }

  .project-detail--short-film .motion-case-grid--short-film,
  .project-detail--short-film .motion-case-grid--short-film-bottom {
    width: 100%;
    justify-self: stretch;
  }

  .motion-case-media--vertical-large,
  .motion-case-media--narrow {
    width: 100%;
  }

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

  .project-detail--millefiori-campaign .motion-case-row--millefiori-intro,
  .project-detail--millefiori-campaign .motion-case-row--millefiori-catalog,
  .project-detail--millefiori-campaign .motion-case-media-row--millefiori-videos,
  .project-detail--millefiori-campaign .motion-case-media-row--millefiori-mockups {
    width: 100%;
    grid-template-columns: 1fr;
    margin-inline: 0;
  }

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

  .project-detail--comune-milano .motion-case-media--poster,
  .project-detail--kartell-catalogo .motion-case-media-row--catalogo-first,
  .project-detail--kartell-catalogo .motion-case-media-row--catalogo-second {
    width: 100%;
  }

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

  .motion-case-copy p,
  .motion-case-copy--center p,
  .motion-case-copy--right p,
  .project-detail--production-layout .motion-case-copy p,
  .project-detail--production-layout .motion-case-copy--center p,
  .project-detail--production-layout .motion-case-copy--right p,
  .project-detail--geolier-blanco .motion-case-layout > .motion-case-copy p {
    max-width: min(100%, 34ch);
    font-size: 1.05rem;
    line-height: 1.16;
  }

  .project-detail--interni-2026 .motion-case-row--interni-intro,
  .project-detail--interni-2026 .motion-case-row--interni-overview,
  .project-detail--interni-2026 .motion-case-row--interni-phone,
  .project-detail--interni-2026 .motion-case-row--interni-interview,
  .project-detail--interni-2026 .motion-case-media-row--interni-phone {
    grid-template-columns: 1fr;
  }

  .project-detail--interni-2026 .motion-case-row--interni-overview > div {
    gap: clamp(16px, 5vw, 24px);
  }

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

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

  .project-detail.project-detail--interni-2026 .motion-case-media--phone.motion-case-media--interni-phone-mockup {
    width: min(78vw, 320px);
    height: auto;
    aspect-ratio: 9 / 16;
    align-self: auto;
    display: block;
    justify-self: start;
  }

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

  .project-detail--interni-2026 .motion-case-media--interni-main {
    width: 100%;
    margin-inline: 0;
  }

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

  .cassina-human-intro,
  .cassina-human-text-pair,
  .cassina-human-text-pair--text-left,
  .cassina-human-text-pair--text-right,
  .cassina-human-text-pair--wide {
    width: 100%;
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .cassina-human-copy,
  .cassina-human-copy--right {
    justify-items: start;
    text-align: left;
  }

  .cassina-human-pair--offset {
    width: 100%;
    margin-left: 0;
  }

  .cassina-human-pair .cassina-human-media,
  .cassina-human-triptych .cassina-human-media {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .project-detail--kartell-express .project-detail-hero {
    min-height: auto;
    padding-bottom: clamp(54px, 10vw, 78px);
  }

  .project-detail--kartell-express .project-detail-hero__inner,
  .kartell-express-row,
  .kartell-express-row--intro,
  .kartell-express-row--phone-left,
  .kartell-express-row--phone-right,
  .kartell-express-verticals {
    grid-template-columns: 1fr;
  }

  .project-detail--kartell-express .page-hero__title {
    max-width: 100%;
    font-size: clamp(3.05rem, 15vw, var(--type-large));
  }

  .kartell-express-detail {
    padding-bottom: clamp(58px, 12vw, 88px);
  }

  .kartell-express-layout {
    gap: clamp(42px, 10vw, 68px);
  }

  .kartell-express-row--phone-left,
  .kartell-express-row--phone-right {
    margin-left: 0;
  }

  .kartell-express-media--phone {
    width: min(78vw, 320px);
    justify-self: start;
  }

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

  .kartell-express-copy p,
  .kartell-express-copy--right p {
    max-width: min(100%, 34ch);
    font-size: 1.05rem;
    line-height: 1.16;
  }

  .install-detail {
    padding-bottom: clamp(58px, 12vw, 88px);
  }

  .install-detail__inner {
    gap: clamp(42px, 10vw, 68px);
  }

  .install-copy,
  .install-copy--right,
  .install-copy--center {
    max-width: none;
    text-align: left;
  }

  .install-copy--intro {
    margin-left: 0;
  }

  .install-copy p,
  .install-copy--intro p {
    width: 100%;
    max-width: min(100%, 34ch);
    font-size: 1.05rem;
    line-height: 1.16;
  }

  .install-detail--fabiana .install-split {
    width: 100%;
  }

  .annibale-three .install-media--portrait {
    width: min(100%, 360px);
  }

  .production-card,
  .motion-project {
    gap: 18px;
  }

  .production-card__media,
  .motion-project__media {
    min-height: auto;
    aspect-ratio: 16 / 10;
  }

  .spotlight-card {
    min-height: min(520px, 76svh);
  }

  .custom-cursor {
    display: none;
  }
}

@media (max-width: 620px) {
  :root {
    --gutter: 16px;
    --section-y: 68px;
    --type-small: 0.82rem;
    --type-medium: 1.18rem;
    --type-large: 3.2rem;
  }

  h1,
  .hero__title {
    font-size: var(--type-large);
  }

  h2,
  .section-title {
    font-size: var(--type-large);
  }

  h3 {
    font-size: clamp(1.55rem, 10vw, var(--type-medium));
  }

  .button {
    width: 100%;
  }

  .nav {
    padding-top: calc(var(--header-h) + 34px);
  }

  .nav__links {
    gap: clamp(18px, 7vw, 28px);
  }

  .nav__link {
    font-size: clamp(2rem, 13vw, 3rem);
  }

  .logo {
    width: clamp(104px, 34vw, 140px);
  }

  .site-header__inner {
    justify-content: space-between;
    gap: 18px;
    max-width: 100%;
  }

  .hero {
    min-height: min(82svh, 660px);
  }

  .mobile-sketch-video {
    aspect-ratio: 4 / 5;
    max-height: min(68svh, 520px);
  }

  .hero-mask__logo {
    width: 108vw;
    max-width: none;
    max-height: 30vh;
    bottom: clamp(74px, 14vh, 120px);
  }

  .hero-mask__bubble--one {
    --bubble-size: clamp(270px, 84vw, 380px);
    --bubble-left: -24vw;
    --bubble-top: 12vh;
  }

  .hero-mask__bubble--two {
    --bubble-size: clamp(260px, 82vw, 370px);
    --bubble-left: 46vw;
    --bubble-top: 24vh;
  }

  .hero-mask__bubble--three {
    --bubble-size: clamp(120px, 38vw, 170px);
    --bubble-left: 32vw;
    --bubble-top: 50vh;
  }

  .service-item,
  .process-step {
    grid-template-columns: 1fr;
  }

  .service-list {
    grid-auto-rows: 64px;
    gap: 0;
  }

  .service-item h3 {
    font-size: clamp(1.28rem, 7vw, 1.72rem);
    line-height: 0.82;
  }

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

  .service-item__video {
    width: 4.15em;
    height: 2.08em;
  }

  .service-item p,
  .service-item__icon,
  .process-step p {
    grid-column: auto;
  }

  .media-tile--large {
    width: 78%;
  }

  .media-tile--small {
    width: 56%;
  }

  .media-tile--wide {
    width: 68%;
    right: 0;
  }

  .page-hero {
    min-height: auto;
    padding-block: calc(var(--header-h) + 34px) clamp(42px, 12vw, 64px);
  }

  .page-hero__inner {
    gap: 24px;
  }

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

  .page-hero--about .page-hero__title {
    max-width: min(100%, 16ch);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: clamp(2.55rem, 12vw, var(--type-large));
    line-height: 0.86;
  }

  .page-hero--claim .page-hero__title {
    width: 100%;
    max-width: none;
  }

  .lead {
    font-size: var(--type-medium);
    line-height: 1.12;
  }

  .home-project h3,
  .project-card__title,
  .project-detail-next__link strong,
  .team-photo h3 {
    max-width: none;
  }

  .project-card,
  .project-card:nth-child(6n + 1),
  .project-card:nth-child(6n + 2),
  .project-card:nth-child(6n + 4),
  .project-card:nth-child(6n + 5) {
    min-height: 360px;
    padding: 18px;
  }

  .project-card__number {
    font-size: clamp(3.2rem, 18vw, var(--type-large));
  }

  .project-card__title {
    margin-top: clamp(64px, 22vw, 110px);
  }

  .project-detail-meta {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cassina-human-pair,
  .cassina-human-pair--feature,
  .cassina-human-pair--offset,
  .cassina-human-triptych {
    grid-template-columns: 1fr;
  }

  .cassina-human-copy p {
    max-width: min(100%, 34ch);
    font-size: 1rem;
  }

  .project-gallery__item,
  .project-gallery__item--wide,
  .project-detail-story__media,
  .the-game-media--lead,
  .the-game-media--duo,
  .the-game-media--outro {
    aspect-ratio: 4 / 3;
  }

  .project-detail--the-game .project-detail-credits {
    padding-block: 52px 84px;
  }

  .project-detail--the-game .project-detail-next {
    padding-bottom: 58px;
  }

  .project-detail--install-custom .project-detail-credits {
    padding-block: 52px 84px;
  }

  .project-detail--install-custom .project-detail-next {
    padding-bottom: 58px;
  }

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

  .motion-detail-media--phone {
    width: min(74vw, 300px);
    justify-self: start;
  }

  .contact-form {
    gap: 14px;
  }

  .field input,
  .field textarea {
    padding: 0.86rem;
  }

  .field textarea {
    min-height: 132px;
  }

  .contact-band::before {
    opacity: 0.42;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-photo-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  .team-photo {
    grid-column: span 2;
  }

  .team-photo:nth-child(2) {
    order: 1;
    grid-column: 2 / span 2;
  }

  .team-photo:nth-child(4) {
    order: 2;
    grid-column: 4 / span 2;
  }

  .team-photo:nth-child(1) {
    order: 3;
  }

  .team-photo:nth-child(3) {
    order: 4;
  }

  .team-photo:nth-child(5) {
    order: 5;
  }

  .team-photo img {
    width: 100%;
    height: auto;
  }

  .team-photo h3 {
    margin-top: 10px;
    font-size: 0.92rem;
    line-height: 1;
  }

  .team-photo p,
  .team-photo a {
    font-size: 0.72rem;
    line-height: 1.08;
  }

  .team-photo a {
    font-size: 0.68rem;
  }

  .production-card__media,
  .motion-project__media {
    min-height: auto;
    aspect-ratio: 4 / 3;
  }

  .media-strip {
    grid-auto-columns: minmax(142px, 72%);
  }

  .footer-bottom {
    gap: 10px;
  }
}

@media (max-width: 380px) {
  :root {
    --type-large: 2.85rem;
  }

  .nav__link {
    font-size: clamp(1.85rem, 12vw, 2.55rem);
  }

  .service-item h3 {
    font-size: 0.98rem;
  }

  .client-chip {
    padding-inline: 18px;
  }
}

/* ==========================================================================
   FINAL PROJECT MOBILE NORMALIZATION
   Shared rules for every project detail page.
   - one-column mobile composition
   - left-aligned descriptive text
   - consistent mobile copy size
   - single-row media fills the available width
   ========================================================================== */
@media (max-width: 840px) {
  /* All project compositions stack consistently on mobile. */
  .project-detail .project-detail-copy__grid,
  .project-detail .project-detail-story__row,
  .project-detail .motion-detail-section,
  .project-detail .motion-detail-split,
  .project-detail .motion-detail-grid,
  .project-detail .motion-case-row,
  .project-detail .motion-case-media-row,
  .project-detail .motion-case-grid,
  .project-detail .kartell-express-row,
  .project-detail .kartell-express-verticals,
  .project-detail .install-split,
  .project-detail .install-media-grid,
  .project-detail .cassina-human-intro,
  .project-detail .cassina-human-text-pair,
  .project-detail .cassina-human-pair,
  .project-detail .cassina-human-triptych {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Every descriptive text block follows the same reading direction. */
  .project-detail .motion-case-copy,
  .project-detail .motion-detail-copy,
  .project-detail .kartell-express-copy,
  .project-detail .install-copy,
  .project-detail .cassina-human-copy,
  .project-detail .project-detail-story__copy,
  .project-detail .project-detail-copy__text,
  .project-detail .the-game-detail__center-copy {
    width: 100% !important;
    max-width: none !important;
    justify-items: start !important;
    justify-self: stretch !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .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-detail__center-copy p,
  .project-detail .the-game-copy {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  /* Media that becomes a single row on mobile uses the full content width. */
  .project-detail .project-detail-cover__media,
  .project-detail .project-gallery__item,
  .project-detail .project-detail-story__media,
  .project-detail .motion-detail-section > .motion-detail-media,
  .project-detail .motion-detail-grid > .motion-detail-media,
  .project-detail .motion-detail-split > .motion-detail-media,
  .project-detail .motion-case-row > .motion-case-media,
  .project-detail .motion-case-media-row > .motion-case-media,
  .project-detail .motion-case-grid > .motion-case-media,
  .project-detail .kartell-express-row > .kartell-express-media,
  .project-detail .kartell-express-verticals > .kartell-express-media,
  .project-detail .install-split > .install-media,
  .project-detail .install-media-grid > .install-media,
  .project-detail .cassina-human-pair > .cassina-human-media,
  .project-detail .cassina-human-triptych > .cassina-human-media,
  .project-detail .cassina-human-intro > .cassina-human-media,
  .project-detail .cassina-human-text-pair > .cassina-human-media {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Phone/mockup media remain intentionally narrower than photographic rows. */
  .project-detail .motion-case-media--phone,
  .project-detail .motion-detail-media--phone,
  .project-detail .kartell-express-media--phone {
    width: min(78vw, 320px) !important;
    max-width: 100% !important;
    justify-self: start !important;
  }

  .project-detail .project-detail-meta {
    text-align: left !important;
  }
}

/* Final specificity lock for project mobile rules. */
@media (max-width: 840px) {
  main.project-detail.project-detail--production-layout .motion-case-row,
  main.project-detail.project-detail--production-layout .motion-case-media-row,
  main.project-detail.project-detail--production-layout .motion-case-grid,
  main.project-detail .project-detail-copy__grid,
  main.project-detail .project-detail-story__row,
  main.project-detail .motion-detail-section,
  main.project-detail .motion-detail-split,
  main.project-detail .motion-detail-grid,
  main.project-detail .kartell-express-row,
  main.project-detail .kartell-express-verticals,
  main.project-detail .install-split,
  main.project-detail .install-media-grid,
  main.project-detail .cassina-human-intro,
  main.project-detail .cassina-human-text-pair,
  main.project-detail .cassina-human-pair,
  main.project-detail .cassina-human-triptych {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  main.project-detail.project-detail--production-layout .motion-case-copy,
  main.project-detail .motion-detail-copy,
  main.project-detail .kartell-express-copy,
  main.project-detail .install-copy,
  main.project-detail .cassina-human-copy,
  main.project-detail .project-detail-story__copy,
  main.project-detail .project-detail-copy__text,
  main.project-detail .the-game-detail__center-copy {
    width: 100% !important;
    max-width: none !important;
    justify-items: start !important;
    justify-self: stretch !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  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-detail__center-copy p,
  main.project-detail .the-game-copy {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  main.project-detail.project-detail--production-layout .motion-case-row > .motion-case-media,
  main.project-detail.project-detail--production-layout .motion-case-media-row > .motion-case-media,
  main.project-detail.project-detail--production-layout .motion-case-grid > .motion-case-media,
  main.project-detail .project-detail-cover__media,
  main.project-detail .project-gallery__item,
  main.project-detail .project-detail-story__media,
  main.project-detail .motion-detail-section > .motion-detail-media,
  main.project-detail .motion-detail-grid > .motion-detail-media,
  main.project-detail .motion-detail-split > .motion-detail-media,
  main.project-detail .kartell-express-row > .kartell-express-media,
  main.project-detail .kartell-express-verticals > .kartell-express-media,
  main.project-detail .install-split > .install-media,
  main.project-detail .install-media-grid > .install-media,
  main.project-detail .cassina-human-pair > .cassina-human-media,
  main.project-detail .cassina-human-triptych > .cassina-human-media,
  main.project-detail .cassina-human-intro > .cassina-human-media,
  main.project-detail .cassina-human-text-pair > .cassina-human-media {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  main.project-detail .motion-case-media--phone,
  main.project-detail .motion-detail-media--phone,
  main.project-detail .kartell-express-media--phone {
    width: min(78vw, 320px) !important;
    max-width: 100% !important;
    justify-self: start !important;
  }
}

/* ==========================================================================
   FINAL PROJECT MOBILE CREDITS ALIGNMENT
   Credits use the same project gutters as the content sections above.
   ========================================================================== */
@media (max-width: 840px) {
  main.project-detail .project-detail-credits > .container,
  main.project-detail.project-detail--motion-case .project-detail-credits > .container,
  main.project-detail.project-detail--production-layout .project-detail-credits > .container {
    width: min(calc(100% - (var(--project-gutter) * 2)), var(--project-content-max)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main.project-detail .project-detail-credits .project-detail__credits {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   KARTELL H.H.H. — MOBILE TYPOGRAPHY LOCK
   Overrides the old H.H.H.-specific 1.25 line-height rule.
   ========================================================================== */
@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 {
    width: 100% !important;
    max-width: none !important;
    font-size: 1.05rem !important;
    line-height: 1.18 !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ULTIME MODIFICHE - crediti mobile allineati ai contenuti */
@media (max-width: 840px) {
  .project-detail .project-detail-credits > .container,
  .project-detail--motion-case .project-detail-credits > .container,
  .project-detail--install-custom .project-detail-credits > .container {
    width: calc(100% - (var(--gutter) * 2)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
}