/* Workplace imagery supports the company story without replacing its artwork. */
.company-photograph {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #c1cdc7;
  border-bottom: 3px solid #1b705f;
  border-radius: 2px;
  background: #dfe7e3;
  box-shadow: 0 8px 18px -14px #202a3440;
}
.company-photograph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.96);
}
body[data-page=about] #about-people .about-people-layout { align-items: center; }
body[data-page=about] .company-photograph--about {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3;
  margin-top: 28px;
}
body[data-page=why-defendria] .company-photograph--review {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 3 / 2;
  margin-top: 28px;
}
body[data-page=mission] .company-photograph--mission {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 2;
  margin-top: 28px;
}

/* The contact introduction and photograph share one row height. */
body[data-page=contact] .contact-masthead:has(.contact-photo-layout) { padding-block: 52px; }
body[data-page=contact] .contact-masthead:has(.contact-photo-layout)::before {
  width: 44%;
  background: #d6e5df;
  clip-path: none;
}
body[data-page=contact] .contact-photo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 64px;
  align-items: stretch;
}
body[data-page=contact] .contact-masthead-content { min-width: 0; }
body[data-page=contact] .contact-masthead-content > .product-name { margin-bottom: 22px; }
body[data-page=contact] .contact-photo-layout .contact-masthead-layout { display: block; }
body[data-page=contact] .contact-photo-layout h1 { font-size: clamp(42px, 4.1vw, 60px); }
body[data-page=contact] .contact-photo-layout .contact-masthead-layout > div { margin-top: 22px; }
body[data-page=contact] .contact-photo-layout .contact-masthead-layout > div > p {
  max-width: none;
  font-size: 18px;
  line-height: 1.7;
}
body[data-page=contact] .contact-photo-layout .contact-masthead-actions { gap: 18px 24px; margin-top: 24px; }
body[data-page=contact] .company-photograph--contact {
  width: 100%;
  max-width: 520px;
  min-height: 390px;
  justify-self: end;
  align-self: stretch;
}
body[data-page=contact] .company-photograph--contact img { position: absolute; inset: 0; }

@media (max-width: 1100px) {
  body[data-page=contact] .contact-photo-layout { gap: 40px; }
  body[data-page=contact] .contact-photo-layout .contact-masthead-actions { gap: 17px 20px; }
}
@media (max-width: 900px) {
  body[data-page=about] #about-people .about-people-layout { align-items: start; }
  body[data-page=about] .company-photograph--about { max-width: 420px; margin-top: 26px; }
  body[data-page=why-defendria] .company-photograph--review { max-width: 540px; margin-top: 26px; }
  body[data-page=mission] .company-photograph--mission { max-width: 540px; margin-top: 26px; }
}
@media (max-width: 800px) {
  body[data-page=contact] .contact-masthead:has(.contact-photo-layout) { padding-block: 42px; }
  body[data-page=contact] .contact-masthead:has(.contact-photo-layout)::before { display: none; }
  body[data-page=contact] .contact-photo-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  body[data-page=contact] .contact-photo-layout h1 { font-size: 50px; }
  body[data-page=contact] .contact-photo-layout .contact-masthead-layout > div > p { max-width: 60ch; }
  body[data-page=contact] .company-photograph--contact {
    max-width: none;
    min-height: 0;
    height: clamp(270px, 42vw, 340px);
    justify-self: stretch;
  }
  body[data-page=contact] .company-photograph--contact img { object-position: 50% 45%; }
}
@media (max-width: 600px) {
  body[data-page=about] .company-photograph--about {
    max-width: none;
    aspect-ratio: 3 / 2;
    margin-top: 24px;
  }
  body[data-page=why-defendria] .company-photograph--review { max-width: none; margin-top: 24px; }
  body[data-page=mission] .company-photograph--mission { max-width: none; margin-top: 24px; }
  body[data-page=contact] .contact-masthead:has(.contact-photo-layout) { padding-block: 34px 36px; }
  body[data-page=contact] .contact-photo-layout { gap: 26px; }
  body[data-page=contact] .contact-masthead-content > .product-name { margin-bottom: 20px; }
  body[data-page=contact] .contact-photo-layout h1 { font-size: clamp(39px, 10.5vw, 50px); }
  body[data-page=contact] .contact-photo-layout .contact-masthead-layout > div { margin-top: 21px; }
  body[data-page=contact] .contact-photo-layout .contact-masthead-layout > div > p { font-size: 17px; }
  body[data-page=contact] .contact-photo-layout .contact-masthead-actions { margin-top: 22px; }
  body[data-page=contact] .company-photograph--contact { height: clamp(200px, 61vw, 270px); }
}
/* Photographs are static; shared page-motion owns entrances and reduced-motion handling. */