/* Warm-white Company and About us alternate with coordinated sage sections. */
:root {
  --company-surface: var(--support-surface);
  --technology-surface: #dce3d5;
  --support-surface: #f8f7f0;
  --contact-surface: #e0e7d9;
}
.mission.section { background: var(--company-surface); justify-content: flex-start; }
.mission > .page-section-kicker { width: 100%; text-align: left; gap: 24px; }
.mission #mission-title { margin: auto 0; }
.technology.section { background: var(--technology-surface); }
.partners.section { background: var(--support-surface); }
.contact-panel.section { background: var(--contact-surface); }
.section .page-section-kicker { border-top: 1px solid #344c3440; }
.section .page-section-kicker .eyebrow {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #344c3e;
}
.section .page-section-kicker .section-context { color: #596959; }
.contact-panel .page-section-kicker { margin-bottom: 8px; }
.partners .support-label, .experience-heading { color: #53624f; }
@media (max-width: 700px) {
  .page-section-kicker { gap: 16px; flex-wrap: wrap; }
}

.technology .technology-kicker .technology-name { font-weight: 600; }

/* Tighter section rhythm, especially around the supporter artwork. */
.mission.section, .technology.section, .partners.section { padding-top: 56px; padding-bottom: 48px; }
.mission.section { min-height: 440px; }
.section .section-kicker { margin-bottom: 38px; }
.partners .affiliation-strip { margin-top: 26px; padding-top: 20px; padding-bottom: 22px; }
.partners .experience-heading { margin-bottom: 20px; }
.partners .support-label { margin-top: 26px; }
.partners .supporter-logos { margin: 22px auto 0; }
.partners .supporter-logos a { min-height: 90px; padding: 6px; }
.contact-panel.section { padding: 56px 7% 8px; }
@media (max-width: 900px) {
  .contact-panel.section { padding-inline: 6%; }
}
.contact-panel .page-section-kicker { margin-bottom: 0; }
.contact-row { padding-top: 28px; padding-bottom: 28px; }
@media (max-width: 700px) {
  .mission.section, .technology.section, .partners.section { padding-top: 36px; padding-bottom: 34px; }
  .mission.section { min-height: 370px; }
  .contact-panel.section { padding-top: 36px; }
  .section .section-kicker { margin-bottom: 28px; }
  .contact-panel .page-section-kicker { margin-bottom: 0; }
  .partners .supporter-logos { margin-top: 16px; gap: 12px; }
  .partners .supporter-logos a { min-height: 78px; }
  .contact-row { padding-top: 24px; padding-bottom: 24px; }
}

@media (max-width: 600px) {
  .contact-panel.section { padding-inline: 7%; }
}

.focus-grid h3 sup { font-size: .65em; margin-left: 2px; }

.compact-footer .regulatory-note { display: block; margin-top: 3px; font-size: 10px; line-height: 1.5; color: #a7b3ab; }

/* Equal workflow columns stay within the section gutters. */
.technology .focus-grid { column-gap: 24px; text-align: left; }
.technology .focus-grid article { min-width: 0; }
.technology .focus-grid p { max-width: none; color: #52634f; line-height: 1.9; }
@media (min-width: 601px) {
  .technology .focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .technology .focus-grid p { padding-inline-end: 20px; }
  .technology .focus-grid article { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
}

/* A separate control keeps every logo visible and the section gutters intact. */
.experience-pause { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 4px; background: transparent; color: #344c3e; cursor: pointer; }
.experience-pause[hidden] { display: none; }
.experience-pause:hover { color: #172a20; }
.experience-pause:focus-visible { outline: 2px solid #344c3e; outline-offset: 3px; }
.experience-pause svg { width: 20px; height: 20px; fill: currentColor; }
.experience-play-icon, .experience-pause.is-paused .experience-pause-icon { display: none; }
.experience-pause.is-paused .experience-play-icon { display: block; }
.partners .affiliation-strip.is-paused .affiliation-track { animation-play-state: paused!important; }

.technology-showcase figcaption { flex-wrap: wrap; }
.technology-showcase figcaption > span:last-child { max-width: 100%; line-height: 1.5; }

.experience-controls { display: flex; align-items: center; flex-shrink: 0; gap: 2px; }
.experience-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 4px; background: transparent; color: #344c3e; cursor: pointer; }
.experience-arrow[hidden] { display: none; }
.experience-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.experience-arrow:hover { color: #172a20; }
.experience-arrow:focus-visible, .experience-window:focus-visible { outline: 2px solid #344c3e; outline-offset: 3px; }
.experience-window { cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; --logo-edge: 24px; }
.experience-window.is-dragging { cursor: grabbing; }
.experience-window img { -webkit-user-drag: none; }
@media (max-width: 400px) { .experience-heading { gap: 8px; flex-wrap: wrap; } }

/* Align the hero copy with the artwork inside the opening logo's padding. */
.option-a .curve-copy { box-sizing: border-box; padding-inline-start: 16px; }
@media (max-width: 900px) { .option-a .curve-copy { padding-inline-start: 13px; } }
@media (max-width: 700px) { .option-a .curve-copy { padding-inline-start: 15px; } }