/* Optimized owner photo blended into the section, not a separate image card. */
.home-page .company-intro { position: relative; isolation: isolate; background: var(--paper); }
.company-backdrop { position: absolute; inset: 0; z-index: -2; display: block; overflow: hidden; pointer-events: none; }
.company-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
@media (min-width: 761px) {
  .company-backdrop img { transform: translateX(-20%); mask-image: linear-gradient(90deg, #000 90%, transparent); }
}
.company-intro::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--paper), transparent 18%, transparent 76%, var(--paper)),
    linear-gradient(270deg, var(--paper) 0%,
      color-mix(in srgb, var(--paper) 97%, transparent) 28%,
      color-mix(in srgb, var(--paper) 93%, transparent) 43%,
      color-mix(in srgb, var(--paper) 84%, transparent) 50%,
      color-mix(in srgb, var(--paper) 22%, transparent) 68%, transparent 86%);
}
.company-intro-layout { position: relative; display: block; }
.company-intro .about-copy { width: min(50%, 640px); min-width: 0; margin-left: auto; }
/* Re-arm offscreen above; observe stationary layout, animate text only. */
.home-page .company-intro { overflow: clip; }
.company-intro .about-copy.is-enter-ready.is-entered { transition: transform 2000ms cubic-bezier(.16, .6, .3, 1), opacity 650ms ease; }
.company-intro .about-copy.is-enter-ready:not(.is-entered) { transform: translateX(144px); opacity: 0; transition: none; }
.company-intro .about-copy.is-enter-ready:focus-within { transform: none; opacity: 1; transition: none; }
@media (max-width: 760px) {
  .company-intro .about-copy.is-enter-ready:not(.is-entered) { transform: translateX(48px); }
  .company-intro .about-copy.is-enter-ready:focus-within { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .company-intro .about-copy.is-enter-ready.is-entered { transition: none; }
  .company-intro .about-copy.is-enter-ready:not(.is-entered) { transform: none; opacity: 1; }
}
.company-intro .about-copy h2 { font-size: clamp(2.35rem, 3.4vw, 3.6rem); }
.company-intro .about-lead { font-size: clamp(1.25rem, 1.6vw, 1.6rem); margin-top: 24px; }
.company-intro .about-copy > p:not(.about-lead), .company-intro .about-values small { color: #394754; }
.company-intro .about-values { margin-top: 28px; }
.company-intro .about-values small { font-size: .8rem; }
.company-intro .about-values strong { margin-top: 8px; }
@media (max-width: 1050px) and (min-width: 761px) {
  .company-intro .about-copy { width: 64%; }
  .company-intro::before {
    background:
      linear-gradient(180deg, var(--paper), transparent 20%, transparent 75%, var(--paper)),
      linear-gradient(270deg, var(--paper), color-mix(in srgb, var(--paper) 95%, transparent) 45%, color-mix(in srgb, var(--paper) 90%, transparent) 65%, color-mix(in srgb, var(--paper) 15%, transparent));
  }
}
@media (max-width: 760px) {
  .home-page .company-intro { padding-top: 280px; }
  .company-backdrop { height: 650px; }
  .company-backdrop img { object-position: center top; transform: translateY(-20%); mask-image: linear-gradient(180deg, #000 75%, transparent); }
  .company-intro::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 15%, transparent) 0px,
      transparent 100px, color-mix(in srgb, var(--paper) 88%, transparent) 270px,
      color-mix(in srgb, var(--paper) 96%, transparent) 390px, var(--paper) 630px);
  }
  .company-intro .about-copy { width: 100%; }
}
@media (max-width: 600px) {
  .company-intro .about-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-page .company-intro .about-values div { padding: 16px 8px 0 0; border: 0; }
  .company-intro .about-values strong { font-size: 1.05rem; }
  .company-intro .about-values small { font-size: .75rem; }
}