/* Botanical still lifes drawn in the three brand inks. */
.product-illustration {
  display: grid;
  place-items: center;
  margin: 0 0 22px;
  min-width: 0;
}
.product-illustration img {
  display: block;
  width: min(100%, 360px);
  height: auto;
  aspect-ratio: 4 / 3;
  transition: transform .65s var(--ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .corner-items article:hover .product-illustration img { transform: translateY(-4px); }
}
@media (max-width: 700px) {
  .product-illustration { margin-bottom: 18px; }
  .product-illustration img { width: min(100%, 320px); }
}

/* Each drawing stays in the document flow, clear of text and photographs. */
.section-illustration { margin: 26px 0 0; max-width: 280px; }
.section-illustration img,
.quote-illustration img,
.future-illustration {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.service-aside .section-illustration { max-width: 280px; margin: 0 auto 24px; }
.approach-quote {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  column-gap: 42px;
  padding: 35px 55px;
}
.quote-illustration { grid-row: 1 / 3; align-self: center; }
.approach-quote > p { align-self: end; margin: 0; }
.approach-quote > span { align-self: start; margin-top: 22px; }
.future-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 26px;
}
.future-details .coming-soon { margin-top: 0; }
.future-illustration { width: min(100%, 170px); flex-shrink: 0; }
.stencil-illustration { width: min(100%, 300px); margin: 26px 0 0; min-width: 0; }
.stencil-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.home-belief .stencil-illustration { max-width: 270px; }
.principles-art { display: flex; align-items: center; gap: 20px; margin-top: 26px; max-width: 380px; }
.principles-art .principles-mark { width: 66px; margin: 0; }
.principles-art .stencil-illustration { margin: 0; flex: 1; }
.text-banner.with-stencil { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 30px; align-items: center; }
.text-banner.with-stencil .stencil-illustration { margin: 0; }
.approach-visuals { min-width: 0; }
.approach-visuals > .stencil-illustration { width: min(100%, 330px); margin: 30px auto 0; }
@media (max-width: 1100px) and (min-width: 701px) {
  .text-banner.with-stencil { grid-template-columns: 150px minmax(0, 1fr); gap: 20px 26px; }
  .text-banner.with-stencil .stencil-illustration { grid-row: 1 / 3; }
  .text-banner.with-stencil > .button { grid-column: 2; justify-self: start; }
}
@media (max-width: 900px) {
  .approach-quote { grid-template-columns: 190px minmax(0, 1fr); gap: 0 24px; padding-inline: 34px; }
  .future-details { gap: 16px; }
}
@media (max-width: 700px) {
  .stencil-illustration { max-width: 250px; }
  .principles-art { max-width: 260px; margin-top: 22px; }
  .text-banner.with-stencil { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .text-banner.with-stencil .stencil-illustration { width: min(100%, 210px); }
  .text-banner.with-stencil > .button { margin-top: 0; justify-self: start; }
  .approach-visuals > .stencil-illustration { width: min(100%, 260px); margin-top: 26px; }
  .home-story .section-illustration { max-width: 220px; margin-top: 22px; }
  .service-aside .section-illustration { max-width: 240px; }
  .approach-quote { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px 26px 32px; }
  .quote-illustration { grid-row: auto; width: min(100%, 210px); margin-inline: auto; }
  .approach-quote > span { margin-top: 0; font-size: 9px; line-height: 1.7; }
  .future-illustration { width: min(100%, 180px); }
}