/* About-page content only. Header, floating controls and footer stay shared. */
.about-page, .about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; }
.about-page { color: #333; background: #fff; font-size: 17px; line-height: 1.9; }
.about-page .about-wrap { width: min(1120px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }
.about-page .about-breadcrumb { padding-top: 28px; }
.about-page .info-crumb { margin-bottom: 0; }
.about-page .about-eyebrow { margin: 0 0 14px; color: #0078ad; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .18em; }
.about-page .about-intro { padding-top: 46px; padding-bottom: 48px; text-align: center; }
.about-page .about-intro h1 { max-width: 1000px; margin: 0 auto 22px; color: #123047; font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; line-height: 1.55; letter-spacing: .02em; }
.about-page .about-subtitle { margin: 0 auto 24px; max-width: 760px; color: #416278; font-size: 19px; }
.about-page .about-opening { max-width: 890px; margin: 0 auto; }
.about-page .about-opening .info-intro { margin: 0; color: #5c6470; font-size: 17px; }
.about-page .about-divider { width: 1px; height: 54px; margin: 32px auto 0; background: #bbd5e3; }
.about-page .info-section { padding: 0; border: 0; scroll-margin-top: 110px; }
.about-page .info-section h2 { margin: 0 0 22px; color: #123047; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.55; }
.about-page .info-section p { margin: 0 0 16px; }
.about-page .about-story { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 76px; align-items: center; padding: 0 0 60px; }
.about-page .about-photo { position: relative; margin: 0 0 18px; }
.about-page .about-photo::before { content: ""; position: absolute; left: -15px; top: 22px; right: 28px; bottom: -18px; background: #e5f5fd; border-radius: 8px; }
.about-page .about-photo img { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.about-page .about-photo figcaption { position: relative; margin: 14px 0 0 14px; color: #587687; font-size: 14px; }
.about-page .about-keywords { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 10px; color: #0879aa; font-size: 15px; }
.about-page .about-keywords span { border-bottom: 1px solid #b7dceb; padding-bottom: 5px; }
.about-page .about-principles { padding: 64px 0; }
.about-page .about-principles-heading { margin-bottom: 28px; }
.about-page .about-principles-heading .about-eyebrow { margin-bottom: 10px; }
.about-page .about-principles-heading h2 { margin-bottom: 0; }
.about-page .about-principles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.about-page .about-principle { position: relative; isolation: isolate; min-width: 0; overflow: hidden; padding: 30px 28px 32px; border: 1px solid #d6e7f0; border-radius: 12px; background: #f8fcff; transition: border-color .2s ease, box-shadow .2s ease; }
.about-page .about-principle::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at var(--principle-x, 50%) var(--principle-y, 30%), #dff2ff, transparent 70%); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.about-page .about-principle::after { content: ""; position: absolute; bottom: 0; left: 28px; right: 28px; height: 3px; background: #00a6ea; transform: scaleX(.2); transform-origin: left; transition: transform .55s ease; pointer-events: none; }
.about-page .about-principle-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.about-page .about-principle-icon { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #c7e4f3; border-radius: 12px; color: #0879aa; background: #fff; }
.about-page .about-principle-icon .info-icon { width: 29px; height: 29px; }
.about-page .about-principle-number { color: #95bbce; font-size: 34px; line-height: 1; font-weight: 600; }
.about-page .about-principle h3 { margin: 0 0 16px; color: #123047; font-size: 25px; line-height: 1.5; }
.about-page .about-principle p { margin: 0; color: #506676; font-size: 16px; line-height: 1.95; }
.about-page .about-principles.is-in-view .about-principle::after { transform: scaleX(1); }
.about-page .about-principles.is-in-view .about-principle:nth-child(2)::after { transition-delay: .1s; }
.about-page .about-principles.is-in-view .about-principle:nth-child(3)::after { transition-delay: .2s; }
@media (hover: hover) and (pointer: fine) {
  .about-page .about-principle:hover { border-color: #85c9e9; box-shadow: 0 8px 24px rgba(18, 48, 71, .07); }
  .about-page .about-principle.is-pointed::before { opacity: 1; }
}
.about-page .about-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; }
.about-page .about-two-columns .info-section h2 { font-size: 25px; }
.about-page .about-services-band { padding: 60px 0; margin-bottom: 64px; background: #eff8fd; }
.about-page .about-services-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 52px; align-items: start; }
.about-page .about-services-heading { position: relative; padding-top: 6px; }
.about-page .about-services-heading h2, .about-page .about-reasons-heading h2 { margin: 0 0 18px; color: #123047; font-size: clamp(26px, 2.5vw, 34px); font-weight: 700; line-height: 1.55; }
.about-page .about-services-heading p { margin: 0; color: #506676; }
.about-page .about-services-photo { margin: 24px 0 0; }
.about-page .about-services-photo img { display: block; width: 100%; height: auto; border-radius: 10px; }
.about-page .about-services-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.about-page .about-services-list li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; margin: 0; padding: 22px 20px; border: 1px solid #d2e6f1; border-radius: 10px; background: #fff; color: #315b72; font-size: 16px; line-height: 1.8; scroll-margin-top: 110px; }
.about-page .about-service-icon { display: inline-flex; flex: 0 0 26px; color: #0879aa; padding-top: 2px; }
.about-page .about-service-icon .info-icon { width: 26px; height: 26px; }
.about-page .about-statement { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 76px; padding-top: 68px; padding-bottom: 68px; }
.about-page .about-statement-line { display: block; width: 48px; height: 3px; margin: 0 0 24px; background: #00a6ea; }
.about-page .about-statement-heading h2 { max-width: 430px; margin-bottom: 0; font-size: clamp(26px, 2.7vw, 36px); line-height: 1.65; }
.about-page .about-statement-copy { border-left: 1px solid #c9e1ee; padding-left: 32px; }
.about-page .about-statement-copy p { margin-bottom: 20px; color: #506676; }
.about-page .about-statement-copy p:first-child { color: #123047; font-size: 20px; }
.about-page .about-statement-copy p:last-child { margin-bottom: 0; }
.about-page .about-reasons-band { padding: 58px 0 64px; border-top: 1px solid #e3edf3; background: #fff; }
.about-page .about-reasons-heading { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.about-page .about-reasons-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.about-page .about-reason { padding: 26px 28px 30px; background: #fff; }
.about-page .about-reason .about-principle-top { margin-bottom: 22px; }
.about-page .about-reason h3 { font-size: 23px; }
.about-page .about-reasons-band.is-in-view .about-principle::after { transform: scaleX(1); }
.about-page .about-repayment { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 26px; padding: 32px; border-top: 1px solid #ead9b2; border-bottom: 1px solid #ead9b2; background: #fffcf5; }
.about-page .about-warning-icon { width: 48px; height: 48px; display: grid; place-items: center; color: #94712c; }
.about-page .about-warning-icon .info-icon { width: 38px; height: 38px; }
.about-page .about-repayment .info-notice { margin-bottom: 0; padding: 0; border: 0; background: none; color: #7c5f29; }
.about-page .about-safety-band { padding: 64px 0; background: #f1f9fd; }
.about-page .about-safety-band .info-notice { background: #fff; border-left-color: #72a7c1; }
.about-page .about-contact-band { margin-top: 68px; padding: 50px 0; background: #123047; color: #fff; }
.about-page .about-contact-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.about-page .about-contact-heading .about-eyebrow { color: #91d5f5; }
.about-page .about-contact-title { margin: 0 0 20px; font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; line-height: 1.6; }
.about-page .about-contact-heading > p:last-child { margin: 0; color: #c5deed; font-size: 16px; }
.about-page .about-contact-band .info-section { padding: 28px; border-radius: 8px; background: #fff; color: #416278; }
.about-page .about-contact-band .info-section h2 { font-size: 25px; }
.about-page .about-contact-band .info-section > p { margin-top: 20px; margin-bottom: 0; font-size: 14px; }
.about-page .about-contact-band .info-contact dt { color: #416278; }
.about-page .about-information { padding-top: 48px; padding-bottom: 48px; }
.about-page .about-information .info-section { color: #5c6470; font-size: 15px; }
.about-page .about-information .info-section h2 { margin-bottom: 16px; font-size: 21px; }
.about-page .about-endnote { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #dce9f0; }
.about-page .about-endnote .info-updated, .about-page .about-endnote .info-back-top { margin: 0; font-size: 14px; }
@media (max-width: 1000px) {
  .about-page .about-services-layout { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 28px; }
  .about-page .about-services-list li { gap: 10px; padding: 18px 14px; }
  .about-page .about-statement { gap: 36px; }
  .about-page .about-story { gap: 40px; }
  .about-page .about-two-columns { gap: 24px; }
  .about-page .about-contact-layout { gap: 32px; }
}
@media (max-width: 768px) {
  .about-page .about-services-band { padding: 36px 0; margin-bottom: 40px; }
  .about-page .about-services-layout, .about-page .about-services-list, .about-page .about-statement, .about-page .about-reasons-grid { grid-template-columns: 1fr; }
  .about-page .about-services-layout { gap: 24px; }
  .about-page .about-services-list { gap: 12px; }
  .about-page .about-services-list li { align-items: center; padding: 18px 20px; gap: 16px; }
  .about-page .about-statement { padding-top: 40px; padding-bottom: 40px; gap: 24px; }
  .about-page .about-statement-copy { padding-left: 20px; }
  .about-page .about-reasons-band { padding-top: 36px; padding-bottom: 40px; }
  .about-page .about-reasons-grid { gap: 16px; }
  .about-page .about-reason { padding: 24px; }
  .about-page .about-wrap { width: calc(100% - 40px); }
  .about-page .about-breadcrumb { padding-top: 24px; }
  .about-page .about-intro { padding-top: 32px; padding-bottom: 32px; }
  .about-page .about-intro h1 { font-size: 28px; line-height: 1.6; }
  .about-page .about-subtitle { font-size: 17px; }
  .about-page .about-opening { text-align: left; }
  .about-page .about-divider { height: 36px; margin-top: 24px; }
  .about-page .about-story { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
  .about-page .about-photo { max-width: 520px; margin-left: 12px; }
  .about-page .about-photo img { aspect-ratio: 5 / 4; }
  .about-page .about-principles-grid, .about-page .about-two-columns, .about-page .about-contact-layout { grid-template-columns: 1fr; }
  .about-page .about-principles-grid { gap: 16px; }
  .about-page .about-principle { padding: 24px; }
  .about-page .about-principle-top { margin-bottom: 22px; }
  .about-page .about-principle h3 { font-size: 23px; }
  .about-page .about-repayment { grid-template-columns: 1fr; gap: 12px; padding: 24px 20px; }
  .about-page .about-warning-icon { height: 36px; justify-content: start; }
  .about-page .about-contact-band { margin-top: 40px; padding-top: 36px; padding-bottom: 36px; }
  .about-page .about-contact-band .info-section { padding: 24px 20px; }
  .about-page .about-information { padding-top: 36px; padding-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-page .about-principle, .about-page .about-principle::before, .about-page .about-principle::after { transition: none; }
  .about-page .about-principle::after { transform: none; }
}