.about-page { color: #19324e; background: #fff; }
.about-v4-hero { position: relative; min-height: 580px; overflow: hidden; background: #f3f9fe; }
.about-v4-hero > img { position: absolute; top: 0; right: 0; width: 64%; height: 100%; object-fit: cover; object-position: right center; }
.about-v4-hero::after { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 58%; content: ""; background: linear-gradient(90deg, #f3f9fe 45%, rgb(243 249 254 / 92%) 66%, rgb(243 249 254 / 0%)); }
.about-v4-hero-shade { position: absolute; inset: 0 0 0 auto; z-index: 1; width: 46%; background: linear-gradient(90deg, rgb(210 237 255 / 0%), rgb(11 92 159 / 9%)); }
.about-v4-hero-copy { position: relative; z-index: 2; width: min(560px, 43vw); padding: 130px 0 110px max(6vw, calc((100vw - 1380px) / 2)); }
.about-v4-hero-copy > p, .about-v4-intro-title > span, .about-v4-business-head > span { display: block; margin: 0 0 18px; color: #5a88b2; font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.about-v4-hero-copy h1 { margin: 0; color: #142d48; font-size: clamp(48px, 5.2vw, 76px); font-weight: 800; line-height: 1.13; letter-spacing: -.055em; }
.about-v4-hero-copy h1 em, .about-v4-cta h2 em { color: #1476e8; font-style: normal; }
.about-v4-hero-copy > span { display: block; margin-top: 24px; color: #6b8299; font-size: 15px; }
.about-v4-hero-copy a, .about-v4-cta a { display: inline-flex; min-height: 48px; align-items: center; gap: 19px; margin-top: 34px; padding: 0 21px; color: #fff; border-radius: 4px; background: #1476e8; box-shadow: 0 12px 24px rgb(20 118 232 / 20%); font-size: 14px; font-weight: 800; transition: transform .24s ease, box-shadow .24s ease; }
.about-v4-hero-copy a:hover, .about-v4-cta a:hover { box-shadow: 0 17px 30px rgb(20 118 232 / 30%); transform: translateY(-2px); }
.about-v4-hero-copy i, .about-v4-business-list i, .about-v4-cta i { font-size: 18px; font-style: normal; }

.about-v4-intro { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(340px, .68fr); gap: 15vw; width: min(1160px, 84vw); margin: 0 auto; padding: 154px 0 166px; }
.about-v4-intro h2, .about-v4-business h2, .about-v4-history h2 { margin: 0; color: #172f4a; font-size: clamp(32px, 3.45vw, 50px); font-weight: 800; line-height: 1.28; letter-spacing: -.04em; }
.about-v4-intro > p { align-self: end; max-width: 445px; margin: 0; color: #657c94; font-size: 17px; line-height: 2; }

.about-v4-business { padding: 132px max(8vw, calc((100vw - 1160px) / 2)) 144px; background: #f4f9fd; }
.about-v4-business-head { display: grid; grid-template-columns: 1fr minmax(260px, .66fr); gap: 20px 10vw; align-items: end; }
.about-v4-business-head > span { grid-column: 1 / -1; margin-bottom: 0; }
.about-v4-business-head p { max-width: 310px; margin: 0; color: #667f98; font-size: 15px; line-height: 1.85; }
.about-v4-business-list { margin-top: 76px; border-top: 1px solid #cbddea; }
.about-v4-business-list > a, .about-v4-business-list > div { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(280px, 1.35fr) 24px; gap: 38px; align-items: center; min-height: 98px; padding: 18px 4px; color: inherit; border-bottom: 1px solid #cbddea; }
.about-v4-business-list > a { transition: color .22s ease, padding .22s ease, background .22s ease; }
.about-v4-business-list > a:hover { padding-right: 16px; padding-left: 16px; color: #1476e8; background: #fff; }
.about-v4-business-list strong { color: currentColor; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.about-v4-business-list span { color: #6a8097; font-size: 14px; line-height: 1.7; }
.about-v4-business-list i { color: #1476e8; }

.about-v4-history { width: min(1180px, 86vw); margin: 0 auto; padding: 154px 0 166px; }
.about-v4-history-heading { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(320px, .6fr); gap: 9vw; align-items: end; }
.about-v4-history-heading > span { display: block; margin: 0 0 18px; color: #5a88b2; font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.about-v4-history-heading p { max-width: 365px; margin: 0; color: #647b92; font-size: 16px; line-height: 1.9; }
.about-v4-timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; margin-top: 86px; padding-top: 34px; }
.about-v4-timeline::before { position: absolute; top: 40px; right: 6%; left: 0; height: 1px; content: ""; background: #c7ddeb; }
.about-v4-timeline article { position: relative; min-height: 168px; padding-top: 42px; }
.about-v4-timeline article > i { position: absolute; top: 29px; left: 0; z-index: 1; width: 22px; height: 22px; border: 5px solid #fff; border-radius: 50%; background: #85bff0; box-shadow: 0 0 0 1px #85bff0; }
.about-v4-timeline article:first-child > i { background: #1476e8; box-shadow: 0 0 0 1px #1476e8, 0 0 0 8px rgb(20 118 232 / 11%); }
.about-v4-timeline-date { color: #1476e8; font-size: 14px; font-weight: 800; letter-spacing: .09em; }
.about-v4-timeline h3 { margin: 17px 0 9px; color: #1c3855; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.about-v4-timeline p { max-width: 250px; margin: 0; color: #698097; font-size: 14px; line-height: 1.8; }

.about-v4-cta { display: flex; align-items: center; justify-content: space-between; gap: 42px; padding: 86px max(8vw, calc((100vw - 1180px) / 2)); color: #fff; background: #123f69; }
.about-v4-cta h2 { margin: 0; color: #fff; font-size: clamp(31px, 3.7vw, 52px); line-height: 1.24; letter-spacing: -.04em; }
.about-v4-cta h2 em { color: #91d0ff; }
.about-v4-cta a { margin-top: 0; color: #0f5f9f; background: #fff; box-shadow: none; white-space: nowrap; }

@media (max-width: 900px) {
  .about-v4-hero > img { width: 100%; opacity: .38; }
  .about-v4-hero::after { width: 100%; background: linear-gradient(90deg, rgb(243 249 254 / 96%), rgb(243 249 254 / 72%)); }
  .about-v4-hero-copy { width: min(610px, 88vw); padding-top: 106px; padding-bottom: 112px; margin: 0 auto; }
  .about-v4-intro { grid-template-columns: 1fr; gap: 50px; }
  .about-v4-intro { padding-top: 112px; padding-bottom: 120px; }
  .about-v4-business { padding-top: 108px; padding-bottom: 118px; }
  .about-v4-history { padding-top: 122px; padding-bottom: 126px; }
  .about-v4-history-heading { grid-template-columns: 1fr; gap: 24px; }
  .about-v4-timeline { gap: 30px; }
}

@media (max-width: 560px) {
  .about-v4-hero { min-height: 540px; }
  .about-v4-hero-copy { padding-top: 78px; padding-bottom: 102px; }
  .about-v4-hero-copy h1 { font-size: 43px; }
  .about-v4-intro { width: min(100% - 44px, 520px); }
  .about-v4-intro h2, .about-v4-business h2, .about-v4-history h2 { font-size: 31px; }
  .about-v4-intro > p { font-size: 15px; }
  .about-v4-business { padding-right: 6vw; padding-left: 6vw; }
  .about-v4-business-head { grid-template-columns: 1fr; gap: 20px; }
  .about-v4-business-list { margin-top: 54px; }
  .about-v4-business-list > a, .about-v4-business-list > div { grid-template-columns: 1fr 20px; gap: 9px 18px; min-height: 0; padding: 22px 0; }
  .about-v4-business-list strong { font-size: 19px; }
  .about-v4-business-list span { grid-column: 1; font-size: 13px; }
  .about-v4-business-list i { grid-row: 1; grid-column: 2; }
  .about-v4-history { width: min(100% - 44px, 520px); padding-top: 94px; padding-bottom: 98px; }
  .about-v4-history-heading p { font-size: 15px; }
  .about-v4-timeline { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; padding-top: 0; padding-left: 34px; }
  .about-v4-timeline::before { top: 8px; right: auto; bottom: 12px; left: 8px; width: 1px; height: auto; }
  .about-v4-timeline article { min-height: 0; padding-top: 0; }
  .about-v4-timeline article > i { top: 0; left: -34px; width: 18px; height: 18px; border-width: 4px; }
  .about-v4-timeline h3 { margin-top: 10px; font-size: 18px; }
  .about-v4-timeline p { max-width: none; font-size: 13px; }
  .about-v4-cta { align-items: flex-start; flex-direction: column; padding: 64px 7vw; }
}