/* ==========================================================================
   About
   ========================================================================== */
.ahero { border-bottom: var(--bw) solid var(--ink); }
.ahero__art { inset-inline-start: -4%; top: -10%; width: 110%; opacity: .5; }
.ahero__in { padding-block: 56px 72px; display: flex; flex-direction: column; gap: 18px; }
.ahero h1 { font-size: clamp(48px, 13vw, 104px); line-height: .96; letter-spacing: -.055em; }
.ahero p { font-size: 19px; line-height: 1.7; max-width: 560px; color: #E6E6E6; }

.story { display: grid; gap: 28px; }
.story__ph { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ph { min-height: 160px; font-size: 13px; }
.ph--a { grid-column: 1 / -1; min-height: 240px; }
.story__t { display: flex; flex-direction: column; gap: 16px; }
.story h2, .promise h2, .path h2, .acta h2 { font-size: clamp(30px, 6vw, 48px); line-height: 1.1; }
.story p { font-size: 17px; line-height: 1.8; color: var(--ink-2); max-width: 56ch; }

.promise__bg { opacity: .1; }
.promise__in { display: grid; gap: 32px; }
.promise ol { list-style: none; margin: 0; padding: 0; background: var(--surface); border: var(--bw) solid var(--ink); }
.promise li { padding: 22px 20px; display: grid; gap: 6px; border-top: 1px solid var(--line); }
.promise li:first-child { border-top: 0; }
.promise li > span:first-child { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.promise li strong { font-size: 22px; }
.promise li > span:last-child { color: var(--ink-2); line-height: 1.65; }

.path h2 { margin: 10px 0 28px; }
.path__grid { display: grid; border-top: var(--bw) solid var(--ink); border-inline-start: var(--bw) solid var(--ink); }
.path__grid > div { display: grid; grid-template-columns: 96px 1fr; background: var(--surface); border-inline-end: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); }
.path__grid > div > span:first-child { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.path__grid img { width: 84%; }
.path__grid img.cover { width: 100%; height: 100%; object-fit: cover; }
.path__grid > div > span:last-child { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.path__grid b { font-size: 13px; color: var(--ink-2); }
.path__grid strong { font-size: 19px; }
.path__grid > div > span:last-child > span { font-size: 14px; color: var(--ink-2); line-height: 1.55; }

.acta { padding-block: 40px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

@media (min-width: 768px) {
  .path__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .ahero__in { padding-block: 104px 120px; }
  .story { grid-template-columns: repeat(12, 1fr); gap: 56px; align-items: center; }
  .story__ph { grid-column: span 6; }
  .story__t { grid-column: 8 / span 5; }
  .promise__in { grid-template-columns: repeat(12, 1fr); gap: 48px; align-items: start; }
  .promise__in > div { grid-column: span 5; }
  .promise ol { grid-column: 7 / span 6; }
  .promise li { padding: 26px 28px; grid-template-columns: 40px 200px 1fr; align-items: baseline; gap: 14px; }
  .path__grid { grid-template-columns: repeat(4, 1fr); }
  .path__grid > div { grid-template-columns: 1fr; }
  .path__grid > div > span:first-child { aspect-ratio: 4 / 3; }
  .acta { flex-direction: row; justify-content: space-between; align-items: center; padding-block: 64px; }
}