.standards {
  --section-content-width: 1152px;
  --standards-room: calc(100svh - var(--header-height) - 48px);
  color-scheme: light;
  color: #1a2128;
  background: #fff;
  padding-top: 100px;
}
.standards__track { position: relative; }
.standards__sticky { padding-block: 24px; }
.standards h2 { margin: 0 0 56px; font-size: clamp(28px, 2.777778vw, 40px); line-height: 1.25; font-weight: 700; word-break: keep-all; }
.standards__story { display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 630fr); gap: 50px; align-items: center; }
.standards__story + .standards__story { margin-top: 80px; }
.standards__copy { min-width: 0; }
.standards h3 { margin: 0; font-size: clamp(22px, 1.805556vw, 26px); line-height: 1.346154; font-weight: 700; word-break: keep-all; }
.standards p { margin: 40px 0 0; font-size: 17px; line-height: 25.5px; font-weight: 500; color: #505c66; word-break: keep-all; overflow-wrap: break-word; }
.standards__visual { width: min(100%, calc(var(--standards-room) * 630 / 704)); aspect-ratio: 630 / 704; justify-self: end; margin: 0; border-radius: 40px; overflow: hidden; background: #fff; }
.standards__visual img { width: 100%; height: 100%; object-fit: cover; }
/* The main Figma layout uses a 630×704 image and a fixed 1280px content width. */
.standards.is-enhanced .standards__track { height: calc(280svh - var(--header-height)); }
.standards.is-enhanced .standards__sticky { position: sticky; top: var(--header-height); min-height: calc(100svh - var(--header-height)); display: flex; align-items: center; }
.standards.is-enhanced .standards__layout { display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 630fr); grid-template-rows: auto 1fr; column-gap: 50px; row-gap: clamp(56px, calc(var(--standards-room) * .25), 176px); }
.standards.is-enhanced h2 { grid-area: 1 / 1; margin: 0; }
.standards.is-enhanced .standards__story { display: contents; }
.standards.is-enhanced .standards__copy { grid-area: 2 / 1; align-self: start; opacity: 0; visibility: hidden; transform: translate3d(0, 28px, 0); transition: opacity 320ms ease, transform 500ms cubic-bezier(.22, 1, .36, 1), visibility 500ms; }
.standards.is-enhanced .is-before .standards__copy { transform: translate3d(0, -28px, 0); }
.standards.is-enhanced .is-active .standards__copy { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); }
.standards.is-enhanced .standards__visual { grid-area: 1 / 2 / 3 / 3; align-self: start; opacity: 0; pointer-events: none; }
.standards.is-enhanced .standards__story:first-of-type .standards__visual { opacity: 1; }
@media (max-width: 900px) {
  .standards { padding-top: 72px; --standards-room: max(120px, calc(100svh - var(--header-height) - var(--standards-text-height, 250px) - 132px)); }
  .standards__sticky { padding-block: 20px; }
  .standards h2 { font-size: clamp(25px, 6.4vw, 36px); line-height: 1.3; margin-bottom: 32px; }
  .standards__story { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .standards__visual { justify-self: center; max-width: 560px; border-radius: 24px; }
  .standards__copy { width: 100%; max-width: 560px; justify-self: center; }
  .standards h3 { font-size: clamp(20px, 5.35vw, 26px); line-height: 1.35; }
  .standards p { font-size: 15px; line-height: 22px; margin-top: 20px; }
  .standards.is-enhanced .standards__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 20px; }
  .standards.is-enhanced h2 { grid-area: 1 / 1; width: 100%; max-width: 560px; justify-self: center; }
  .standards.is-enhanced .standards__visual { grid-area: 2 / 1; }
  .standards.is-enhanced .standards__copy { grid-area: 3 / 1; }
}
@media (max-width: 900px) and (max-height: 600px) and (min-aspect-ratio: 4/3) {
  .standards { --standards-room: calc(100svh - var(--header-height) - 40px); }
  .standards.is-enhanced .standards__layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 28px; }
  .standards.is-enhanced .standards__visual { grid-area: 1 / 2 / 3 / 3; justify-self: end; }
  .standards.is-enhanced .standards__copy { grid-area: 2 / 1; }
  .standards h2 { font-size: 24px; }
  .standards h3 { font-size: 20px; }
  .standards p { margin-top: 16px; font-size: 14px; line-height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .standards.is-enhanced .standards__copy { transition: none; transform: none; }
}