/* One visible height for all four mascots, based on the approved siot/digeut scale.
   Kept in a separate, versioned file so cached older base styles cannot shrink one mascot. */
:root {
  --section-mascot-height: clamp(235.7px, calc(15vw + 108.2px), 325.7px);
}
.studio {
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  min-height: 0;
  margin-top: 30px;
  padding-top: 37.5px;
  padding-bottom: 8px;
}
.studio .intro {
  grid-column: 2;
  grid-row: 1;
  margin-left: 0;
}
.studio .tiers,
.studio .version-note {
  grid-column: 1/-1;
}
.portfolio {
  display: grid;
  grid-template-columns: minmax(0, 65%) minmax(0, 35%);
  min-height: 0;
  margin-top: 16.5px;
  padding-top: 7px;
  padding-bottom: 40px;
}
.portfolio .section-head {
  grid-column: 1;
  grid-row: 1;
  padding-right: 0;
  margin-bottom: 0;
}
.portfolio .filters,
.portfolio .works {
  grid-column: 1/-1;
}
.services {
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  min-height: 0;
  margin-top: 16.5px;
  padding-top: 7px;
  padding-bottom: 40px;
}
.services .section-head {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  display: block;
}
.services .section-head > p {
  padding-top: 20px;
}
.services .service-grid {
  grid-column: 1/-1;
  margin: 36px 0 0;
}
.services .all-products {
  grid-column: 1/-1;
  margin-left: 0;
}
.process-section {
  display: grid;
  grid-template-columns: minmax(0, 65%) minmax(0, 35%);
  min-height: 0;
  margin-top: 16.5px;
  padding-top: 7px;
}
.process-section .section-head {
  grid-column: 1;
  grid-row: 1;
  padding-right: 0;
  margin-bottom: 0;
}
.process-section .process {
  grid-column: 1/-1;
  margin-top: 40px;
}
.studio .actor.orange,
.portfolio .actor.yellow,
.services .actor.blue,
.process-section .actor.green {
  position: relative;
  inset: auto;
  width: auto;
  height: var(--section-mascot-height);
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  align-self: start;
  scale: 1;
  transform: none;
  grid-row: 1;
}
.studio .actor.orange,
.services .actor.blue {
  grid-column: 1;
}
.portfolio .actor.yellow,
.process-section .actor.green {
  grid-column: 2;
}
/* Compensate each asset's transparent pixels; preserve its natural aspect ratio. */
.studio .actor.orange .puppet,
.portfolio .actor.yellow .puppet,
.services .actor.blue .puppet,
.process-section .actor.green .puppet {
  position: absolute;
  margin: 0;
  left: 50%;
  width: auto;
  max-width: none;
  object-fit: contain;
  translate: -50% 0;
}
.studio .actor.orange .puppet {
  height: 104.923%;
  top: -2.813%;
}
.portfolio .actor.yellow .puppet {
  height: 115.007%;
  top: -8.632%;
}
.services .actor.blue .puppet {
  height: 110.948%;
  top: -6.809%;
}
.process-section .actor.green .puppet {
  height: 117.647%;
  top: -11.569%;
}
@media (min-width: 681px) and (max-width: 1050px) {
  .portfolio,
  .process-section {
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
  }
}
@media (max-width: 680px) {
  :root {
    --section-mascot-height: 230px;
  }
  .studio {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 30px;
    padding-top: 10px;
  }
  .studio .actor.orange,
  .portfolio .actor.yellow,
  .services .actor.blue,
  .process-section .actor.green {
    grid-column: 1;
    grid-row: 1;
  }
  .studio .intro {
    grid-column: 1;
    grid-row: 2;
    margin-top: 24px;
  }
  .portfolio,
  .services,
  .process-section {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 22px;
    padding-top: 17px;
  }
  .portfolio .section-head,
  .services .section-head,
  .process-section .section-head {
    grid-column: 1;
    grid-row: 2;
    margin-top: 24px;
  }
  .portfolio .filters {
    max-width: 100%;
  }
  .services .service-grid,
  .process-section .process {
    grid-row: 3;
  }
}