.about-story { display: flex; flex-direction: column; height: calc(100svh - 86px); min-height: 0; padding: clamp(28px, 4.5vh, 58px) clamp(18px, 3.5vw, 68px) 20px; overflow: hidden; background: #eaf1f5; color: #112a40; }
.about-story-heading { flex: 0 0 auto; margin: 0 clamp(54px, 5vw, 92px) 22px; }
.about-story-heading .about-kicker { margin: 0 0 12px; color: #286b9f; }
.about-story-heading h2 { margin: 0; font: 800 clamp(64px, 7.3vw, 122px)/.88 var(--display); letter-spacing: -.022em; }
.about-story-heading h2 em { color: #287cb7; font-style: normal; }

.about-carousel { flex: 1 1 auto; display: grid; grid-template-columns: clamp(52px, 4vw, 68px) minmax(0, 1fr) clamp(52px, 4vw, 68px); gap: clamp(12px, 1.5vw, 28px); align-items: center; min-height: 0; }
.about-carousel-arrow { z-index: 1; width: 100%; height: 82px; padding: 0 0 9px; border: 1px solid #93b9d0; background: #d8e8f1; color: #153b58; font: 300 76px/.9 var(--display); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.about-carousel-arrow:hover:not(:disabled), .about-carousel-arrow:focus-visible { background: #287cb7; color: white; transform: scale(1.04); }
.about-carousel-arrow:disabled { opacity: .42; cursor: default; }
.about-carousel-viewport { height: min(100%, 530px); min-height: 0; border: 1px solid #acc8d8; background: #f8fbfd; box-shadow: 18px 18px 0 rgba(34, 103, 150, .1), 0 25px 65px rgba(29, 69, 95, .1); }
.about-card { display: grid; grid-template-columns: 35% minmax(0, 1fr); height: 100%; min-height: 0; }
.about-card[hidden] { display: none !important; }
.about-card:not([hidden]) { animation: about-slide-in .34s cubic-bezier(.2,.7,.2,1) both; }
.about-carousel[data-direction="back"] .about-card:not([hidden]) { animation-name: about-slide-back; }
.about-card-side { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: clamp(25px, 3vw, 48px); background: radial-gradient(circle at 75% 80%, #174974, #0a233c 65%); color: #eaf6ff; }
.about-card-side > span, .about-card-side small { color: #96c9ed; font: 600 11px var(--mono); letter-spacing: .15em; }
.about-card-side h3 { margin: auto 0; font: 800 clamp(52px, 4.2vw, 84px)/.82 var(--display); letter-spacing: -.022em; }
.about-card-side i { width: 72px; height: 3px; margin-bottom: 20px; background: var(--blue); }
.about-card-copy { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: clamp(28px, 4vw, 74px); }
.about-card-copy p { max-width: 930px; margin: 0; font-size: clamp(18px, 1.47vw, 25px); line-height: 1.53; }
.about-card-final .about-card-side { background: radial-gradient(circle at 75% 80%, #2776af, #08203b 68%); }
.about-card-final .about-card-copy p { font-size: clamp(22px, 1.8vw, 32px); font-weight: 600; line-height: 1.37; }
.about-carousel-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 20px clamp(54px, 5vw, 92px) 0; color: #326b92; font: 600 11px var(--mono); letter-spacing: .12em; }
.about-carousel-footer a { color: #175f91; white-space: nowrap; }
.about-carousel-footer a:hover, .about-carousel-footer a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.about-chapter-back { display: inline-flex; align-items: center; gap: 8px; }
.about-chapter-back span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #93b9d0; background: #d8e8f1; color: #153b58; font: 36px/.75 var(--display); }
.about-carousel-progress { display: flex; gap: 7px; }
.about-carousel-progress i { display: block; width: clamp(24px, 3vw, 48px); height: 4px; background: #bbd3e1; }
.about-carousel-progress i.is-active { background: #287cb7; box-shadow: 0 0 12px rgba(40, 124, 183, .3); }
@keyframes about-slide-in { from { opacity: .15; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes about-slide-back { from { opacity: .15; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 1050px) {
  .about-story { padding: 28px 22px 18px; }
  .about-story-heading { margin: 0 65px 17px; }
  .about-story-heading h2 { font-size: clamp(55px, 8.5vw, 90px); }
  .about-carousel { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 10px; }
  .about-carousel-arrow { height: 70px; font-size: 65px; }
  .about-carousel-viewport { height: min(100%, 580px); }
  .about-card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .about-card-side { min-height: 140px; padding: 20px 30px; }
  .about-card-side h3 { margin: 8px 0; font-size: clamp(57px, 8vw, 80px); }
  .about-card-side i, .about-card-side small { display: none; }
  .about-card-copy { padding: 26px 34px; }
  .about-card-copy p { font-size: clamp(17px, 2.2vw, 21px); }
  .about-carousel-footer { margin: 17px 60px 0; }
}
@media (max-width: 600px) {
  .about-story { height: calc(100svh - 72px); padding: 20px 7px 12px; }
  .about-story-heading { margin: 0 45px 12px; }
  .about-story-heading .about-kicker { font-size: 8px; line-height: 1.4; }
  .about-story-heading h2 { font-size: clamp(43px, 11vw, 65px); }
  .about-carousel { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 5px; }
  .about-carousel-arrow { height: 56px; padding-bottom: 5px; font-size: 52px; }
  .about-carousel-viewport { height: 100%; box-shadow: 5px 6px 0 rgba(34, 103, 150, .1); }
  .about-card-side { min-height: 96px; padding: 14px 17px; }
  .about-card-side > span { font-size: 9px; }
  .about-card-side h3 { font-size: clamp(46px, 12vw, 60px); }
  .about-card-copy { justify-content: start; overflow-y: auto; padding: 20px 17px; }
  .about-card-copy p { font-size: 16px; line-height: 1.45; }
  .about-card-final .about-card-copy p { font-size: 19px; }
  .about-carousel-footer { margin: 13px 45px 0; font-size: 9px; }
  .about-carousel-progress { display: none; }
  .about-carousel-progress i { width: 22px; }
}
@media (prefers-reduced-motion: reduce) { .about-card:not([hidden]) { animation: none; } .about-carousel-arrow { transition: none; } }