/* Service hero tiles are navigation, not decorative dead ends. */
.services-hero-mosaic__link {
  display: block;
  min-width: 0;
  min-height: 0;
  color: inherit;
  text-decoration: none;
}

.services-hero-mosaic__link figure {
  height: 100%;
}

.services-hero-mosaic__link figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.services-hero-mosaic__link figcaption::after {
  content: "↘";
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  opacity: .7;
  transform: translate3d(0, 0, 0);
  transition: transform .35s ease, opacity .35s ease;
}

.services-hero-mosaic__link:hover figcaption::after,
.services-hero-mosaic__link:focus-visible figcaption::after {
  opacity: 1;
  transform: translate3d(3px, 3px, 0);
}

.services-hero-mosaic__link:focus-visible {
  outline: 1px solid rgba(255,255,255,.9);
  outline-offset: 4px;
}

.service-detail {
  scroll-margin-top: calc(var(--header) + 28px);
}

/* Process hero: the rendered plan itself, without the presentation sheet. */
.page-hero--process .page-hero__media--rendered-plan {
  background: transparent;
}

.page-hero--process .page-hero__media--rendered-plan img {
  height: min(68svh, 700px);
  padding: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/* Explore: retain all three options at their real square proportion. */
.process-phase--options {
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr);
  gap: clamp(48px, 6vw, 90px);
}

.process-options figure {
  margin: 0;
}

.process-options figcaption {
  margin-top: 9px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.process-options {
  align-items: start;
}

.process-options img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

/* Coordinate: layered technical information instead of one cropped plan. */
.process-phase__media--document-stack img {
  height: auto;
  max-height: none;
  object-fit: contain;
  background: transparent;
}

@media (max-width: 980px) {
  .process-phase--options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .page-hero--process .page-hero__media--rendered-plan img {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .process-options {
    grid-template-columns: 1fr;
    gap: 10px;
  }

}


.process-phase__media--drawing-set {
  background: transparent;
}

.coordinate-drawing-set {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-rows: auto auto;
  gap: clamp(22px, 3vw, 42px);
  align-items: center;
  background: transparent;
}

.coordinate-drawing-set img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: transparent;
}

.coordinate-drawing-set__plan {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.coordinate-drawing-set__elevations {
  grid-column: 2;
  grid-row: 1;
}

.coordinate-drawing-set__detail {
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 680px) {
  .coordinate-drawing-set {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 28px;
  }

  .coordinate-drawing-set__plan,
  .coordinate-drawing-set__elevations,
  .coordinate-drawing-set__detail {
    grid-column: 1;
    grid-row: auto;
  }
}


/* The illustration pixels are displayed unchanged. */
.morphd-illustration__image,
.journey-service__image img,
.journey-process__image img,
.journey-process__mobile-image img,
.services-hero-mosaic--illustrations img,
.process-phase__media--illustration img,
.studio-hero-illustration img,
.contact-page__media--illustration img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  transition: none !important;
}

/* No overlays, masks, gradients or side fades. */
.journey-service__image::before,
.journey-service__image::after,
.journey-process__image::before,
.journey-process__image::after,
.services-hero-mosaic--illustrations figure::before,
.services-hero-mosaic--illustrations figure::after,
.process-phase__media--illustration::before,
.process-phase__media--illustration::after,
.studio-hero-illustration::before,
.studio-hero-illustration::after,
.contact-page__media--illustration::before,
.contact-page__media--illustration::after {
  display: none !important;
  content: none !important;
}

/* Homepage Services: one full black illustration, switching instantly. */
.journey-services__visual {
  display: block !important;
  width: min(100%, 760px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  background: #080808 !important;
  overflow: hidden !important;
}
.journey-service__image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
  background: #080808 !important;
}
.journey-service__image.is-active {
  opacity: 1 !important;
}

/* Homepage Process: one full white illustration, switching instantly. */
.journey-process__visual {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  width: min(100%, 760px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  background: #f4f2ec !important;
  overflow: hidden !important;
}
.journey-process__image,
.journey-process__image.is-active {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
  background: #f4f2ec !important;
}
.journey-process__image {
  opacity: 0 !important;
}
.journey-process__image.is-active {
  opacity: 1 !important;
}
.journey-process__mobile-image {
  background: #f4f2ec !important;
}

/* Preserve all captions as plain text, without gradient treatment. */
.journey-service__image figcaption,
.journey-process__image figcaption,
.services-hero-mosaic--illustrations figcaption {
  background: transparent !important;
  background-image: none !important;
  filter: none !important;
}

/* Services page: exact black tiles fill their existing modules. */
.services-hero-mosaic--illustrations,
.services-hero-mosaic--illustrations figure,
.services-hero-mosaic--illustrations .services-hero-mosaic__link {
  background: #080808 !important;
}

/* Process stage illustrations: exact white files, full width, no framing. */
.process-phase__media--illustration {
  padding: 0 !important;
  background: #f4f2ec !important;
  overflow: hidden !important;
}
.process-phase__media--illustration picture {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
.process-phase__media--illustration img {
  height: auto !important;
}
.process-phase__media--illustration figcaption {
  position: static !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Studio and Contact: use the package ratio variants at full available width. */
.studio-hero-illustration,
.contact-page__media--illustration {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: #080808 !important;
}
.studio-hero-illustration picture,
.contact-page__media--illustration picture,
.studio-hero-illustration img,
.contact-page__media--illustration img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
}

@media (max-width: 680px) {
  .journey-services__visual,
  .journey-process__visual {
    width: 100% !important;
  }
}


/* Stable page geometry retained after removing the legacy illustration treatment stylesheets. */
.services-hero-mosaic--illustrations {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  height: auto !important;
  gap: 1px !important;
}
.services-hero-mosaic--illustrations figure,
.services-hero-mosaic--illustrations .services-hero-mosaic__link {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
}
.studio-hero-illustration figcaption {
  display: block !important;
  position: static !important;
  padding-top: 10px !important;
  background: transparent !important;
}
@media (max-width: 980px) {
  .services-hero-mosaic--illustrations {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* Homepage Services: the source file is square. Render its box as square too,
   so object-fit does not add dark side bands that resemble a fade. */
@media (min-width: 981px) {
  body.home-page.visual-audit.production-audit .journey-services__visual {
    width: min(100%, 653px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    align-self: start !important;
    overflow: hidden !important;
    background: #080808 !important;
  }

  body.home-page.visual-audit.production-audit .journey-service__image,
  body.home-page.visual-audit.production-audit .journey-service__image picture,
  body.home-page.visual-audit.production-audit .journey-service__image img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    clip-path: none !important;
    transform: none !important;
  }
}

/* Remove any legacy decoration from both Services presentations. */
body.home-page .journey-services__visual::before,
body.home-page .journey-services__visual::after,
body.home-page .journey-service__image::before,
body.home-page .journey-service__image::after,
body.content-page .services-hero-mosaic--illustrations::before,
body.content-page .services-hero-mosaic--illustrations::after,
body.content-page .services-hero-mosaic--illustrations figure::before,
body.content-page .services-hero-mosaic--illustrations figure::after,
body.content-page .services-hero-mosaic--illustrations .services-hero-mosaic__link::before,
body.content-page .services-hero-mosaic--illustrations .services-hero-mosaic__link::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

body.content-page .services-hero-mosaic--illustrations img,
body.home-page .journey-service__image img {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  mask: none !important;
  -webkit-mask: none !important;
  clip-path: none !important;
}

/* Process page: use one equal two-column grid for all four illustration stages.
   Reverse changes order only, never media width. */
@media (min-width: 981px) {
  body.content-page .process-phase,
  body.content-page .process-phase.process-phase--options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.content-page .process-phase__media--illustration {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
  }

  body.content-page .process-phase__media--illustration picture,
  body.content-page .process-phase__media--illustration img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}


/* v206 mobile process: dark illustrations merge into one continuous field. */
@media (max-width: 680px) {
  body.process-page .process-phases {
    padding-inline: var(--pad) !important;
    background: #080808 !important;
    color: #f4f3ec !important;
  }
  body.process-page .process-phase,
  body.process-page .process-phase.process-phase--options {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 54px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
  }
  body.process-page .process-phase__copy,
  body.process-page .process-phase--reverse .process-phase__copy,
  body.process-page .process-phase__media,
  body.process-page .process-phase--reverse .process-phase__media {
    order: initial !important;
    width: 100% !important;
  }
  body.process-page .process-phase__copy > p:not(.section-index),
  body.process-page .process-phase__copy li { color: rgba(244,243,236,.68) !important; }
  body.process-page .process-phase__copy h2,
  body.process-page .process-phase__copy h3 { color:#f4f3ec !important; }
  body.process-page .process-phase__media--illustration,
  body.process-page .process-phase__media--illustration picture {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    background: #080808 !important;
    overflow: hidden !important;
  }
  body.process-page .process-phase__media--illustration img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #080808 !important;
  }
  body.process-page .process-phase__media--illustration figcaption { display:none !important; }
}