.about-hero { overflow: hidden; background: radial-gradient(circle at 76% 40%, #263e4b, #101a25 68%); }
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 6%; min-height: 660px; padding-top: 78px; padding-bottom: 78px; }
.about-hero-copy h1 { max-width: 720px; margin: 0 0 27px; font-size: clamp(48px, 5.3vw, 78px); }
.about-hero-copy > p:not(.eyebrow) { max-width: 590px; margin-bottom: 28px; color: #b9cad0; font-size: 17px; }
.about-hero-image { position: relative; min-width: 0; height: 500px; margin: 0; overflow: hidden; background: #283c46; }
.about-hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-hero-image::after { content: ''; position: absolute; inset: 60% 0 0; background: linear-gradient(transparent, rgba(10, 25, 34, .85)); }
.about-hero-image figcaption { position: absolute; z-index: 1; right: 32px; bottom: 28px; left: 32px; max-width: 350px; color: #eef5f5; font-size: 14px; line-height: 1.5; }
.about-story-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12%; }
.about-story h2 { margin-bottom: 47px; }
.about-year { display: flex; align-items: center; gap: 22px; max-width: 390px; padding-top: 20px; border-top: 1px solid #c7d7db; }
.about-year strong { color: #587985; font-family: var(--serifless); font-size: 47px; font-weight: 600; letter-spacing: -.06em; line-height: 1; }
.about-year span { color: #526a75; font-size: 13px; line-height: 1.55; }
.about-story-text { padding-top: 42px; }
.about-story-text p { margin-bottom: 24px; color: #4a626d; font-size: 16px; }
.about-story-text p:last-child { margin-bottom: 0; }
.about-story-text strong { color: #203946; font-weight: 700; }
.about-section-head { display: flex; align-items: end; justify-content: space-between; gap: 7%; margin-bottom: 48px; }
.about-section-head h2 { max-width: 800px; margin: 0; }
.about-section-head > p { max-width: 365px; margin: 0; color: #aec1c8; font-size: 15px; }
.about-journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.about-journey-grid article { min-width: 0; overflow: hidden; border: 1px solid rgba(177, 207, 214, .28); background: #192c38; transition: transform .3s ease, border-color .3s ease; }
.about-journey-grid article:hover { transform: translateY(-4px); border-color: rgba(177, 207, 214, .55); }
.about-card-image { height: 205px; overflow: hidden; background: #29414d; }
.about-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.about-journey-grid article:hover img, .about-principles-grid article:hover img { transform: scale(1.035); }
.about-card-copy { padding: 27px 30px 32px; }
.about-journey-grid span, .about-principles-grid span { display: block; margin-bottom: 27px; color: #95b6bf; font-size: 10px; font-weight: 700; letter-spacing: .17em; }
.about-journey-grid h3 { margin-bottom: 14px; font-size: 25px; }
.about-journey-grid p { margin: 0; color: #afc2c9; font-size: 14px; }
.about-integration-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: 9%; }
.about-integration h2 { margin-bottom: 30px; }
.about-integration-copy p:not(.eyebrow) { color: #4e6872; font-size: 16px; }
.about-integration-copy p:last-child { margin-bottom: 0; }
.about-integration-image { min-width: 0; height: 490px; margin: 0; overflow: hidden; background: #263d49; }
.about-integration-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-platforms { background: #1a303d; }
.about-platforms-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 12%; }
.about-platforms-grid h2 { max-width: 700px; }
.about-platforms-grid > div:last-child { padding-top: 38px; }
.about-platforms-grid > div:last-child p { color: #b5c8ce; font-size: 16px; }
.about-platforms-grid .line-link { margin-top: 14px; }
.about-principles .about-section-head { margin-bottom: 45px; }
.about-principles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.about-principles-grid article { min-width: 0; overflow: hidden; border: 1px solid #d0dfe2; background: #f8faf9; transition: transform .3s ease, box-shadow .3s ease; }
.about-principles-grid article:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(16, 36, 44, .08); }
.about-principles-grid .about-card-image { height: 205px; }
.about-principles-grid .about-card-copy { padding: 27px 30px 33px; }
.about-principles-grid span { color: #628491; }
.about-principles-grid h3 { margin-bottom: 14px; color: #1d3440; font-size: 23px; }
.about-principles-grid p { margin: 0; color: #5a707a; font-size: 14px; }
@media (max-width: 1000px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 38px; padding-top: 70px; }
  .about-hero-image { height: 420px; }
  .about-story-grid, .about-integration-grid, .about-platforms-grid { gap: 6%; }
  .about-card-copy, .about-principles-grid .about-card-copy { padding: 25px; }
}
@media (max-width: 760px) {
  .about-story-grid, .about-integration-grid, .about-platforms-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-story-text, .about-platforms-grid > div:last-child { padding-top: 0; }
  .about-section-head { display: block; }
  .about-section-head > p { max-width: 600px; margin-top: 23px; }
  .about-journey-grid, .about-principles-grid { grid-template-columns: 1fr; }
  .about-card-image, .about-principles-grid .about-card-image { height: 230px; }
  .about-journey-grid span, .about-principles-grid span { margin-bottom: 22px; }
  .about-integration-image { height: 360px; }
}
@media (max-width: 520px) {
  .about-hero-grid { padding-top: 60px; padding-bottom: 60px; }
  .about-hero-copy h1 { font-size: 46px; }
  .about-hero-copy > p:not(.eyebrow) { font-size: 15px; }
  .about-hero-image { height: 310px; }
  .about-hero-image figcaption { right: 20px; bottom: 20px; left: 20px; font-size: 12px; }
  .about-year strong { font-size: 39px; }
  .about-integration-image { height: 290px; }
  .about-card-image, .about-principles-grid .about-card-image { height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-journey-grid article, .about-principles-grid article, .about-card-image img { transition: none; }
}