/* Vision — the reference's portrait/statement split, in Flow Source tokens. */
/* Joint: both pseudo-elements belong to #vision but are pulled up over the
   bottom gutter of #capabilities (they paint above it; pointer-events off). */
.capabilities + .vision::before {
  --joint-radius: var(--vision-joint-inset, var(--frame-radius));
  content: '';
  position: absolute;
  top: calc(-1 * (var(--frame-gutter) + var(--joint-radius)));
  left: 0;
  right: 0;
  height: calc(var(--frame-gutter) + 2 * var(--joint-radius));
  background: var(--cobalt);
  pointer-events: none;
}
.capabilities + .vision::after {
  --joint-radius: var(--vision-joint-inset, var(--frame-radius));
  content: '';
  position: absolute;
  top: calc(-1 * (var(--frame-gutter) + var(--joint-radius)));
  inset-inline: 0;
  height: calc(var(--frame-gutter) + 2 * var(--joint-radius));
  background: var(--newsprint);
  /* Tangent curves form a continuous waist, with no squared-off seams. */
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C0 27 44 23 44 50C44 77 0 73 0 100Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 100' preserveAspectRatio='none'%3E%3Cpath d='M44 0C44 27 0 23 0 50C0 77 44 73 44 100Z'/%3E%3C/svg%3E");
  mask-size: var(--joint-radius) 100%;
  mask-position: left center, right center;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.vision {
  position: relative;
  margin: 0 var(--frame-gutter) var(--frame-gutter);
  padding: 160px 64px 140px;
  border-radius: var(--frame-radius);
  color: var(--ground);
  background: var(--cobalt);
  scroll-margin-top: 90px;
}
.vision-inner {
  max-width: 1512px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}
.vision-identity { margin: 0; }
.vision-image {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.vision-painting { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); opacity: .65; }
/* Stack inside .vision-image (isolated): painting (transformed, z auto) < ::after tint (z 0) < symbol (z 1) < corners (z 2). */
.vision-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, transparent, rgb(15 42 68 / 65%)); z-index: 0; pointer-events: none; }
.vision-symbol { position: absolute; width: 70%; height: 70%; top: 15%; left: 15%; object-fit: contain; filter: brightness(0) invert(1); z-index: 1; }
.vision-corner { position: absolute; width: 16px; height: 16px; border-color: rgb(255 255 255 / 70%); border-style: solid; z-index: 2; pointer-events: none; }
.vision-corner:nth-of-type(1) { top: 20px; left: 20px; border-width: 1px 0 0 1px; }
.vision-corner:nth-of-type(2) { top: 20px; right: 20px; border-width: 1px 1px 0 0; }
.vision-corner:nth-of-type(3) { bottom: 20px; left: 20px; border-width: 0 0 1px 1px; }
.vision-corner:nth-of-type(4) { bottom: 20px; right: 20px; border-width: 0 1px 1px 0; }
.vision-identity figcaption { margin-top: 28px; }
.vision-name { font: 400 12px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.vision-role { margin-top: 6px; font-size: 14px; color: var(--ground); }
.vision-copy { min-width: 0; }
.vision-eyebrow { display: flex; align-items: center; gap: 20px; font: 400 12px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.vision-rule { flex: 1; height: 1px; background: rgb(255 255 255 / 24%); }
.vision-eyebrow img { width: 34px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
.vision-statement { margin: 46px 0 0; font-size: clamp(38px, 3.9vw, 58px); font-weight: 500; line-height: 1.12; letter-spacing: -.047em; }
.vision-word { display: inline-block; white-space: nowrap; }
.vision-support { margin-top: 38px; max-width: 490px; color: var(--ground); font-size: 16px; line-height: 1.7; }
@media (max-width: 1199.98px) {
  .vision { padding: 110px 48px; }
  .vision-inner { grid-template-columns: 1fr; gap: 60px; }
  .vision-copy { grid-row: 1; max-width: 740px; }
  .vision-statement { font-size: clamp(40px, 5.5vw, 58px); }
}
@media (max-width: 809.98px) {
  .vision { --vision-joint-inset: 30px; padding: 72px 22px; border-radius: 30px; }
  .vision-inner { gap: 50px; }
  .vision-statement { margin-top: 34px; font-size: clamp(32px, 8vw, 44px); }
  .vision-support { font-size: 14px; margin-top: 28px; }
  .vision-image { width: 100%; max-width: 400px; }
  .vision-identity figcaption { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .vision-letter { opacity: 1 !important; }
}