/* Final overrides for the approved desktop/mobile design. */

.about-studio-copy p {
  font-size: clamp(18px, 2.35vw, 36px) !important;
  line-height: 0.98 !important;
}

.about-mobile-logo,
.projects-mobile-logo,
.about-copy-mobile {
  display: none;
}

.services-copy {
  max-width: 520px !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
}

.service-panel-inner,
.service-panel-inner p,
.service-panel-inner li {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
}

.project-menu-video {
  transform: translateZ(0);
  will-change: transform;
}

.project-section.project-detail[data-project-section^="branding-"] h3 {
  font-size: clamp(40px, 7.5vw, 90px) !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-section-top > p {
  max-width: min(720px, 46vw) !important;
}

.project-section[data-project-section="branding"] .project-collage .work-tile {
  aspect-ratio: 4 / 5 !important;
  background-size: cover !important;
}

.project-section[data-project-section="content"] .project-collage .work-tile {
  aspect-ratio: 4 / 5 !important;
  background-size: cover !important;
  background-position: center center !important;
}

.project-section[data-project-section="ai"] .project-video-collage {
  padding-bottom: clamp(28px, 3.8vw, 52px) !important;
}

.project-section.project-detail[data-project-section="editorial-apartamento"] .project-detail-collage > .project-feature--apartamento .work-tile {
  background-size: contain !important;
  background-position: center center !important;
}

.project-section.project-detail[data-project-section="editorial-apartamento"] .project-detail-collage > .project-portrait-feature--apartamento {
  grid-column: 1 / -1 !important;
  width: min(560px, 100%) !important;
  justify-self: center !important;
}

.project-section.project-detail[data-project-section="editorial-apartamento"] .project-detail-collage > .project-portrait-feature--apartamento .tile-apartamento-03 {
  aspect-ratio: 3000 / 4500 !important;
  background-size: contain !important;
  background-position: center center !important;
}

.project-section.project-detail[data-project-section="editorial-groove"] .project-detail-collage > .project-feature--groove {
  width: min(1120px, 100%) !important;
  justify-self: center !important;
}

.project-section.project-detail[data-project-section="editorial-groove"] .project-detail-collage > .project-feature--groove .work-tile {
  background-size: contain !important;
  background-position: center center !important;
}

.project-section.project-detail[data-project-section="editorial-groove"] .tile-groove-01,
.project-section.project-detail[data-project-section="editorial-groove"] .tile-groove-02 {
  aspect-ratio: 1890 / 1135 !important;
}

.project-section.project-detail[data-project-section="editorial-groove"] .tile-groove-03,
.project-section.project-detail[data-project-section="editorial-groove"] .tile-groove-04 {
  aspect-ratio: 2400 / 1350 !important;
}

.project-section.project-detail[data-project-section="editorial-groove"] .tile-groove-05 {
  aspect-ratio: 2293 / 1443 !important;
}

.project-section.project-detail[data-project-section="editorial-indra"] .project-image-detail-collage,
.project-section.project-detail[data-project-section="editorial-skull"] .project-image-detail-collage {
  align-items: start !important;
}

.project-section.project-detail[data-project-section="editorial-indra"] .project-image-feature,
.project-section.project-detail[data-project-section="editorial-skull"] .project-image-feature {
  grid-column: 1 / -1 !important;
  width: min(1120px, 100%) !important;
  justify-self: center !important;
}

.project-section.project-detail[data-project-section="editorial-indra"] .project-image-feature--portrait {
  width: min(620px, 100%) !important;
}

.project-section.project-detail[data-project-section="editorial-indra"] .project-image-feature img,
.project-section.project-detail[data-project-section="editorial-skull"] .project-image-feature img,
.project-section.project-detail[data-project-section="editorial-skull"] .project-video-feature video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background: #ffffff !important;
}

.project-section.project-detail[data-project-section="editorial-skull"] .project-video-feature video {
  background: #000000 !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage {
  align-items: start !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > figure:not(.project-feature):not(.project-portrait-feature):not(.project-packaging-row):not(.project-triptych) {
  grid-column: auto !important;
  width: 100% !important;
  justify-self: stretch !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > figure:not(.project-feature):not(.project-portrait-feature):not(.project-packaging-row):not(.project-triptych) .work-tile {
  aspect-ratio: 4 / 5 !important;
  background-size: cover !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature,
.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-portrait-feature {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  justify-self: stretch !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature .work-tile,
.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-portrait-feature .work-tile {
  background-size: contain !important;
}

.project-section.project-detail[data-project-section="branding-sumi"] .project-detail-collage > .project-feature .tile-sumi-10 {
  aspect-ratio: 810 / 1012 !important;
  background-size: contain !important;
}

.project-section.project-detail[data-project-section="branding-sumi"] .project-detail-collage > .project-feature--original-size {
  width: min(810px, 100%) !important;
  justify-self: center !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature .tile-sumi-03 {
  aspect-ratio: 2400 / 1600 !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature .tile-before-01,
.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature .tile-before-11 {
  aspect-ratio: 2400 / 1350 !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature .tile-before-02 {
  aspect-ratio: 2400 / 1174 !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature .tile-before-05 {
  aspect-ratio: 2400 / 1162 !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature .tile-before-08 {
  aspect-ratio: 2400 / 1148 !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature .tile-figa-06 {
  aspect-ratio: 2400 / 662 !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-portrait-feature .tile-figa-03 {
  aspect-ratio: 672 / 846 !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-portrait-feature .tile-figa-07 {
  aspect-ratio: 666 / 840 !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature .tile-trapenses-cover {
  aspect-ratio: 1056 / 798 !important;
}

.project-section.project-detail[data-project-section="branding-trapenses"] .project-detail-collage > .project-feature--trapenses-cover {
  width: min(1056px, 100%) !important;
  justify-self: center !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature .tile-trapenses-06 {
  aspect-ratio: 1800 / 1350 !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-feature .tile-unostudio-02 {
  aspect-ratio: 1378 / 1080 !important;
}

.project-section.project-detail[data-project-section="branding-molika"] .project-detail-collage > .project-feature--molika-03 {
  width: min(1120px, 100%) !important;
  justify-self: center !important;
}

.project-section.project-detail[data-project-section="branding-molika"] .project-detail-collage > .project-feature--molika-03 .tile-molika-03 {
  aspect-ratio: 2400 / 1500 !important;
  background-size: contain !important;
  background-position: center center !important;
}

.project-section.project-detail[data-project-section="branding-molika"] .project-detail-collage > .project-feature--molika-wide {
  width: min(1120px, 100%) !important;
  justify-self: center !important;
}

.project-section.project-detail[data-project-section="branding-molika"] .project-detail-collage > .project-feature--molika-wide .tile-molika-04 {
  aspect-ratio: 2400 / 1453 !important;
  background-size: contain !important;
  background-position: center center !important;
}

.project-section.project-detail[data-project-section="branding-molika"] .project-detail-collage > .project-feature--molika-wide .tile-molika-05 {
  aspect-ratio: 2400 / 1312 !important;
  background-size: contain !important;
  background-position: center center !important;
}

.project-section.project-detail[data-project-section="branding-calma"] .project-detail-collage > figure:not(.project-feature):not(.project-portrait-feature):not(.project-packaging-row):not(.project-triptych) .tile-calma-05 {
  background-size: 125% auto !important;
  background-position: center center !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-detail-collage > .project-portrait-feature .tile-calma-08 {
  aspect-ratio: 1080 / 1920 !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-packaging-row,
.project-section.project-detail[data-project-section^="branding-"] .project-triptych {
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  justify-self: stretch !important;
}

.project-section.project-detail[data-project-section^="branding-"] .project-packaging-row .work-tile,
.project-section.project-detail[data-project-section^="branding-"] .project-triptych .work-tile {
  aspect-ratio: 4 / 5 !important;
  background-size: cover !important;
}

.view-contact .contact-card {
  border-radius: 28px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.view-contact .contact-card .about-photo {
  display: block !important;
  border-radius: 20px !important;
  clip-path: inset(0 round 20px);
  overflow: hidden !important;
  width: 82% !important;
  justify-self: center !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (min-width: 900px) {
  .view-contact {
    padding: 104px clamp(42px, 3.4vw, 64px) 66px !important;
  }

  .contact-card {
    width: min(1840px, 100%) !important;
    height: min(640px, calc(100svh - 178px)) !important;
    min-height: min(640px, calc(100svh - 178px)) !important;
    justify-self: center !important;
    padding: clamp(26px, 2.3vw, 42px) !important;
    gap: clamp(34px, 3.1vw, 58px) !important;
  }

  .contact-card .about-photo {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .contact-card h2 {
    font-size: clamp(44px, 3.45vw, 62px) !important;
  }

  .contact-direct-links a {
    font-size: 13px !important;
  }

  .contact-card p {
    font-size: 15px !important;
    line-height: 1.28 !important;
  }
}

@media (max-width: 899px) {
  .view-placeholder#projects {
    padding-bottom: 20px !important;
  }

  .projects-menu.is-active {
    min-height: 0 !important;
    align-content: start !important;
    gap: 38px !important;
    padding-bottom: 20px !important;
  }

  .projects-mobile-logo {
    display: block;
    width: 54px;
    margin: 0 auto 2px;
    padding: 0;
  }

  .projects-mobile-logo img {
    display: block;
    width: 100%;
    height: auto;
  }

  .project-section {
    padding-bottom: 0 !important;
  }

  .project-section .project-collage,
  .project-section[data-project-section="ai"] .project-video-collage {
    padding-bottom: 4px !important;
  }

  .about-mobile-logo {
    display: block;
    width: 54px;
    margin: 0 0 30px;
    padding: 0;
  }

  .about-mobile-logo img {
    display: block;
    width: 100%;
    height: auto;
  }

  .about-copy-desktop {
    display: none;
  }

  .about-copy-mobile {
    display: inline;
  }

  .view-contact {
    padding: 84px 15px 48px !important;
    align-items: flex-start !important;
  }

  .about-studio-copy p {
    font-size: clamp(18px, 6.1vw, 25px) !important;
    line-height: 1.02 !important;
  }

  .services-copy {
    margin: 0 !important;
    padding: 14px var(--services-x) 22px !important;
    max-width: none !important;
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
  }

  .services-contact-links {
    align-self: start !important;
    justify-self: start !important;
    margin: 0 var(--services-x) 24px !important;
    padding: 0 !important;
  }

  .service-panel-inner,
  .service-panel-inner p,
  .service-panel-inner li {
    font-size: 14px !important;
    line-height: 1.34 !important;
  }

  .contact-card {
    width: min(100%, calc(100vw - 30px)) !important;
    margin: 0 auto !important;
    padding: 18px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .contact-card .about-photo {
    width: 88% !important;
    justify-self: center !important;
    border-radius: 18px !important;
    clip-path: inset(0 round 18px);
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .contact-card h2 {
    font-size: clamp(38px, 11.4vw, 58px) !important;
  }

  .contact-direct-links a {
    font-size: 12px !important;
  }

  .project-section .project-collage {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .project-section .project-collage figure {
    margin: 0 !important;
  }

  .project-section .work-card {
    display: block !important;
    min-height: 0 !important;
  }

  .project-section .work-tile {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    background-size: contain !important;
  }

  .project-section .work-caption,
  .project-section .project-collage figcaption {
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 14px !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
  }

  .project-section[data-project-section="branding"] .project-collage .work-tile {
    aspect-ratio: 4 / 5 !important;
    background-size: cover !important;
  }

  .project-section .tile-editorial-01,
  .project-section .tile-editorial-02,
  .project-section .tile-editorial-03,
  .project-section .tile-editorial-04,
  .project-section .tile-editorial-05,
  .project-section .tile-editorial-06,
  .project-section .tile-editorial-07,
  .project-section .tile-editorial-08,
  .project-section .tile-editorial-09,
  .project-section .tile-editorial-10,
  .project-section .tile-editorial-11,
  .project-section .tile-editorial-12 {
    aspect-ratio: 16 / 10 !important;
  }

  .project-section.project-detail[data-project-section^="branding-"] .project-packaging-row,
  .project-section.project-detail[data-project-section^="branding-"] .project-triptych {
    grid-template-columns: 1fr !important;
  }

  .project-section.project-detail[data-project-section^="branding-"] h3 {
    font-size: clamp(34px, 12vw, 52px) !important;
  }

  .project-section.project-detail[data-project-section^="branding-"] .project-section-top > p {
    max-width: min(560px, 100%) !important;
  }

  .project-section.project-detail[data-project-section^="branding-"] .project-inline-note {
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.32 !important;
  }

  .project-section.project-detail[data-project-section="editorial-apartamento"] .project-detail-collage > .project-feature--apartamento {
    width: 100% !important;
  }

  .project-section.project-detail[data-project-section="editorial-groove"] .project-detail-collage > .project-feature--groove {
    width: 100% !important;
  }
}

/* Editorial design: miniaturas uniformes en 4:3 (se recorta lo que sobre),
   en todas las pantallas. El resto de proyectos conserva imagen completa. */
.project-section[data-project-section="email"] .project-collage .work-tile {
  aspect-ratio: 4 / 3 !important;
  background-size: cover !important;
}