/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 · section redesign: company overview · tone: established corporate */
.about-page .site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: #1260ab
}

.about-page .site-header.scrolled {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: rgba(18, 96, 171, .97);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .14);
  backdrop-filter: blur(12px)
}

.about-page .main-nav a {
  color: #fff
}

.about-page .main-nav a:hover,
.about-page .main-nav a.is-active {
  color: #eab800
}

.about-page .menu-button span {
  background: #fff
}

.about-page .logo img {
  filter: none
}

.about-page .site-footer {
  display: block;
  width: 100%;
  min-height: 520px
}

.about-page .footer-main {
  display: block;
  min-height: 520px
}

.about-page .footer-column {
  opacity: 1;
  transform: none
}

.about-hero {
  position: relative;
  display: flex;
  align-items: center;
  height: 380px;
  padding-top: 80px;
  overflow: hidden;
  background: #000;
  color: #fff;
  isolation: isolate
}

.about-hero:before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 80px 0 0;
  background: url('../images/figma-assets/about-hero-gradient.webp') 50% 43%/cover no-repeat
}

.about-hero:after {
  display: none
}

.about-hero-content {
  padding-top: 38px
}

.about-hero h1 {
  margin: 0 0 24px;
  font-size: 48px;
  line-height: 58px
}

.about-hero p {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px
}

.about-story {
  padding: 120px 0
}

.story-grid {
  display: grid;
  grid-template-columns: 405px 1fr;
  gap: 36px
}

.story-copy h2 {
  margin: 0 0 48px;
  font-size: 54px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em
}

.story-copy p {
  width: 361px;
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px
}

.story-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.story-gallery-column {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.story-gallery-column:first-child {
  padding-top: 80px
}

.story-gallery-offset {
  padding-top: 0
}

.story-gallery figure {
  height: 203px;
  margin: 0;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
  overflow: hidden
}

.story-gallery figure.story-tall {
  height: 393px
}

.story-gallery img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover
}

.about-proof {
  padding: 80px 0;
  background: #353536
}

.proof-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  min-height: 349px;
  padding: 58px;
  border-radius: 20px;
  background: #fff
}

.proof-copy h2 {
  margin: 0 0 20px;
  font-size: 42px;
  font-weight: 800;
  line-height: 46px;
  letter-spacing: -.02em
}

.proof-copy p {
  max-width: 470px;
  margin: 0;
  color: #636566;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px
}

.proof-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 30px;
  align-content: center
}

.proof-stats>div {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease-standard), transform 750ms var(--ease-standard)
}

.proof-panel.in-view .proof-stats>div {
  opacity: 1;
  transform: none
}

.proof-panel.in-view .proof-stats>div:nth-child(2) {
  transition-delay: 90ms
}

.proof-panel.in-view .proof-stats>div:nth-child(3) {
  transition-delay: 180ms
}

.proof-panel.in-view .proof-stats>div:nth-child(4) {
  transition-delay: 270ms
}

.proof-stats strong {
  display: block;
  font-size: 42px;
  font-weight: 800;
  line-height: 46px
}

.proof-stats small {
  display: block;
  margin-top: 8px;
  color: #636566;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px
}

.proof-title-mobile {
  display: none
}

.about-purpose {
  padding: 80px 0
}

.purpose-grid {
  display: grid;
  grid-template-columns: 540px 1fr;
  gap: 76px;
  align-items: center
}

.purpose-grid figure {
  width: 540px;
  height: 485px;
  margin: 0;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
  overflow: hidden
}

.purpose-grid img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 46%
}

.purpose-visual img {
  transform: scale(1.08);
  transition: transform 1200ms var(--ease-standard)
}

.purpose-visual.in-view img {
  transform: scale(1)
}

.purpose-copy {
  display: flex;
  flex-direction: column;
  gap: 50px
}

.purpose-copy>div {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms var(--ease-standard), transform 800ms var(--ease-standard)
}

.purpose-copy.in-view>div {
  opacity: 1;
  transform: none
}

.purpose-copy.in-view>div:nth-child(2) {
  transition-delay: 150ms
}

.purpose-copy h3 {
  margin: 0 0 16px;
  font-size: 28px;
  line-height: 32px
}

.purpose-copy p {
  max-width: 510px;
  margin: 0;
  color: #353536;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px
}

.about-vision {
  background: #f3f4f4
}

.purpose-grid-reverse {
  grid-template-columns: 1fr 540px
}

.purpose-visual-mission img {
  object-fit: contain;
  object-position: center;
  transform: none
}

.purpose-visual-mission.in-view img {
  transform: none
}

.about-mission {
  padding: 96px 0
}

.about-mission .purpose-grid {
  grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
  gap: 88px
}

.about-mission .purpose-grid figure {
  width: 100%;
  height: 520px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none
}

.about-mission .purpose-copy h3 {
  font-size: 42px;
  line-height: 48px
}

.about-mission .purpose-copy p {
  font-size: 20px;
  line-height: 31px
}

.about-vision {
  padding: 96px 0
}

.vision-stage {
  position: relative;
  min-height: 560px
}

.vision-visual {
  width: 100%;
  height: 560px;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .14)
}

.vision-visual img {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover;
  object-position: center;
  transform: scale(1.035);
  transition: transform 1200ms var(--ease-standard)
}

.vision-visual.in-view img {
  transform: scale(1)
}

.vision-copy {
  position: absolute;
  z-index: 2;
  left: 48px;
  bottom: 48px;
  width: min(470px, calc(100% - 96px));
  padding: 38px 40px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .15);
  backdrop-filter: blur(12px)
}

.vision-copy h3 {
  font-size: 36px;
  line-height: 42px
}

.vision-copy p {
  font-size: 18px;
  line-height: 28px
}

@media(max-width:980px) {
  .about-mission .purpose-grid {
    grid-template-columns: 1fr;
    gap: 48px
  }
  .about-mission .purpose-grid figure {
    height: min(620px, 85vw)
  }
  .vision-stage {
    min-height: 520px
  }
  .vision-visual {
    height: 520px
  }
}

@media(max-width:700px) {
  .about-mission,
  .about-vision {
    padding: 72px 0
  }
  .about-mission .purpose-copy h3 {
    font-size: 36px;
    line-height: 42px
  }
  .about-mission .purpose-copy p {
    font-size: 17px;
    line-height: 27px
  }
  .about-mission .purpose-grid figure {
    height: auto;
    aspect-ratio: 1
  }
  .vision-stage {
    display: flex;
    min-height: 0;
    flex-direction: column
  }
  .vision-visual {
    height: 380px;
    border-radius: 20px
  }
  .vision-visual img {
    border-radius: 20px
  }
  .vision-copy {
    position: relative;
    left: auto;
    bottom: auto;
    width: calc(100% - 24px);
    margin: -58px auto 0;
    padding: 30px 28px
  }
  .vision-copy h3 {
    font-size: 32px;
    line-height: 38px
  }
}

.about-values {
  padding: 80px 0;
  background: #f3f4f4
}

.values-head {
  margin-bottom: 56px
}

.values-head .eyebrow {
  margin-bottom: 24px
}

.values-head h2 {
  margin: 0 0 24px;
  font-size: 48px;
  line-height: 58px
}

.values-head>p:last-child {
  margin: 0;
  color: #636566;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 50px
}

.values-grid article {
  text-align: center;
  transition: transform 320ms var(--ease-standard)
}

.values-grid span {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: #fff;
  transition: background-color 260ms ease, transform 320ms var(--ease-standard), box-shadow 320ms ease
}

.values-grid svg {
  width: 46px;
  height: 46px;
  overflow: visible;
  fill: none;
  stroke: #eab800;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 240ms ease
}

.values-grid h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  transition: color 240ms ease
}

@media(hover:hover) and (pointer:fine) {
  .values-grid article:hover {
    transform: translateY(-4px)
  }
  .values-grid article:hover span {
    background: #eab800;
    box-shadow: 0 12px 24px rgba(234, 184, 0, .2);
    transform: scale(1.04)
  }
  .values-grid article:hover svg {
    stroke: #fff
  }
  .values-grid article:hover h3 {
    color: #eab800
  }
}

.about-gallery {
  padding: 120px 0;
  overflow: hidden
}

.gallery-head .eyebrow {
  margin-bottom: 24px
}

.gallery-head h2 {
  margin: 0 0 24px;
  font-size: 48px;
  line-height: 58px
}

.gallery-head>p:last-child {
  margin: 0;
  color: #636566;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px
}

.gallery-showcase {
  position: relative;
  width: min(1440px, 100%);
  height: 570px;
  margin: 56px auto 0;
  overflow: hidden;
  background: #fff
}

.gallery-feature {
  position: relative;
  z-index: 3;
  width: 720px;
  height: 480px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  background: #f3f4f4
}

.gallery-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: opacity 360ms ease, transform 700ms var(--ease-standard)
}

.gallery-showcase.is-changing .gallery-feature img {
  opacity: .08;
  transform: translateX(-14px) scale(1.02)
}

.gallery-previews {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none
}

.gallery-previews button {
  position: absolute;
  top: 163px;
  width: 330px;
  height: 260px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #f3f4f4;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 500ms var(--ease-standard)
}

.gallery-previews button:first-child {
  left: -72px
}

.gallery-previews button:last-child {
  right: -72px
}

.gallery-previews img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 550ms var(--ease-standard), filter 300ms ease
}

.gallery-previews button:hover img {
  transform: scale(1.035);
  filter: saturate(1.06)
}

.gallery-controls {
  position: absolute;
  z-index: 6;
  bottom: 20px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 210px;
  height: 40px;
  transform: translateX(-50%)
}

.gallery-controls>button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(18, 96, 171, .18);
  border-radius: 50%;
  background: #fff;
  color: #1260ab;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease, transform 200ms ease
}

.gallery-controls>button:hover {
  border-color: #eab800;
  background: #eab800;
  color: #fff;
  transform: scale(1.06)
}

.gallery-controls svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.gallery-progress {
  display: flex;
  gap: 8px
}

.gallery-progress i {
  width: 20px;
  height: 3px;
  border-radius: 4px;
  background: #d8d9da;
  transition: width 300ms var(--ease-standard), background-color 240ms ease
}

.gallery-progress i.is-active {
  width: 34px;
  background: #eab800;
  transform: none
}

.gallery-progress {
  gap: 9px
}

.gallery-progress i,
.gallery-progress i.is-active {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: none
}

.gallery-controls {
  width: 230px;
  justify-content: space-between
}

.gallery-feature {
  opacity: 1;
  transform: none
}

.gallery-previews button {
  opacity: 1;
  transform: none
}

.gallery-feature img,
.gallery-previews img {
  position: absolute;
  inset: 0;
  opacity: 1;
  transform: scale(1);
  transition: opacity 560ms ease, transform 760ms var(--ease-standard)
}

.gallery-feature .gallery-incoming,
.gallery-previews .preview-incoming {
  z-index: 2;
  visibility: visible;
  opacity: 0;
  transform: scale(1.025)
}

.gallery-showcase.is-swapping .gallery-incoming,
.gallery-showcase.is-swapping .preview-incoming {
  opacity: 1;
  transform: scale(1)
}

.gallery-showcase.is-resetting .gallery-feature img,
.gallery-showcase.is-resetting .gallery-previews img {
  transition: none
}

.about-cta {
  padding: 88px 0;
  background: #fff
}

.about-cta-panel {
  position: relative;
  display: flex;
  min-height: 400px;
  padding: 64px 32px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(rgba(4, 30, 66, .3), rgba(4, 30, 66, .42)), url('../images/figma-assets/about-cta-brand-bg.webp') center/cover no-repeat;
  color: #fff;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 18px 45px rgba(18, 96, 171, .15)
}

.about-cta h2 {
  max-width: 760px;
  margin: 0 0 18px;
  font-size: 40px;
  line-height: 48px
}

.about-cta p {
  max-width: 620px;
  margin: 0 0 32px;
  color: rgba(255, 255, 255, .9);
  font-size: 18px;
  font-weight: 300;
  line-height: 27px
}

.about-cta .button {
  margin: 0;
  font-weight: 500
}

.about-cta-button {
  background: #fff;
  color: #1260ab
}

.about-cta-button:hover,
.about-cta-button:focus-visible {
  background: #eab800;
  color: #fff
}

.about-cta .button span {
  transition: transform .2s ease
}

.about-cta .button:hover span,
.about-cta .button:focus-visible span {
  transform: translateX(4px)
}

@media(max-width:980px) {
  .story-grid,
  .purpose-grid {
    grid-template-columns: 1fr
  }
  .story-copy p {
    width: auto
  }
  .story-gallery {
    max-width: 760px
  }
  .purpose-grid figure {
    width: min(540px, 100%)
  }
  .proof-panel {
    grid-template-columns: 1fr
  }
  .values-grid {
    grid-template-columns: repeat(3, 1fr)
  }
  .gallery-feature {
    width: min(68vw, 650px)
  }
  .gallery-previews button {
    width: 260px
  }
  .gallery-previews button:first-child {
    left: -145px
  }
  .gallery-previews button:last-child {
    right: -145px
  }
}

@media(max-width:760px) {
  .about-page .main-nav {
    background: #1260ab
  }
  .about-hero {
    height: 300px;
    padding-top: 72px
  }
  .about-hero-content {
    padding-top: 20px
  }
  .about-hero:before,
  .about-hero:after {
    inset: 72px 0 0
  }
  .about-hero h1 {
    font-size: 40px;
    line-height: 48px
  }
  .about-hero p {
    font-size: 15px
  }
  .about-story,
  .about-purpose,
  .about-gallery {
    padding: 72px 0
  }
  .story-copy h2 {
    font-size: 42px
  }
  .story-copy p,
  .proof-copy p,
  .purpose-copy p,
  .values-head>p:last-child,
  .gallery-head>p:last-child {
    font-size: 16px;
    line-height: 25px
  }
  .story-gallery {
    grid-template-columns: 1fr
  }
  .story-gallery-column:first-child {
    padding-top: 0
  }
  .story-gallery figure,
  .story-gallery figure.story-tall {
    height: 260px
  }
  .proof-panel {
    padding: 34px 28px
  }
  .proof-copy h2 {
    font-size: 34px;
    line-height: 39px
  }
  .proof-stats {
    grid-template-columns: 1fr 1fr
  }
  .proof-stats strong {
    font-size: 34px
  }
  .purpose-grid figure {
    height: 380px
  }
  .values-head h2,
  .gallery-head h2 {
    font-size: 38px;
    line-height: 44px
  }
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px
  }
  .gallery-showcase {
    display: block;
    width: calc(100% - 32px);
    height: auto;
    padding: 22px 12px 20px
  }
  .gallery-showcase:after {
    top: 28px;
    left: 8px;
    height: 90px
  }
  .gallery-feature {
    width: 100%;
    height: 380px;
    margin: 0
  }
  .gallery-previews {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 12px;
    height: 130px;
    margin-top: 12px;
    transform: none
  }
  .gallery-previews button,
  .gallery-previews button:first-child,
  .gallery-previews button:last-child {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: 130px;
    border-width: 4px;
    border-radius: 14px;
    transform: none
  }
  .gallery-controls {
    position: static;
    width: 100%;
    height: 36px;
    margin-top: 18px;
    transform: none
  }
  .about-cta {
    padding: 72px 0
  }
  .about-cta-panel {
    min-height: 380px;
    padding: 48px 24px
  }
  .about-cta h2 {
    font-size: 32px;
    line-height: 40px
  }
  .about-cta p {
    font-size: 16px;
    line-height: 25px
  }
}

@media(max-width:760px) {
  .gallery-showcase.direction-next .gallery-feature,
  .gallery-showcase.direction-prev .gallery-feature,
  .gallery-showcase.direction-next .gallery-previews button:last-child,
  .gallery-showcase.direction-prev .gallery-previews button:first-child {
    opacity: 1;
    transform: none
  }
}

.about-gallery {
  padding-bottom: 56px
}

.about-cta {
  padding-top: 48px
}

.about-cta-panel {
  isolation: isolate;
  background: #1260ab
}

.about-cta-panel:before,
.about-cta-panel:after {
  position: absolute;
  content: "";
  pointer-events: none
}

/* WP deviation: border-radius:inherit added below. Without it this
   pseudo-element is not clipped to the panel's rounded corner and a grey
   90-degree corner shows before paint. */
.about-cta-panel:before {
  z-index: 0;
  inset: -9%;
  border-radius: inherit;
  background: url('../images/figma-assets/about-cta-brand-bg.webp') center/cover no-repeat;
  transform: translate3d(-1.5%, 0, 0) scale(1.03);
  transition: filter 700ms ease, transform 900ms var(--ease-standard);
  will-change: transform
}

.about-cta-panel:after {
  z-index: 1;
  inset: 0;
  background: linear-gradient(rgba(4, 30, 66, .3), rgba(4, 30, 66, .42))
}

.about-cta-panel>* {
  position: relative;
  z-index: 2
}

@keyframes about-cta-light-drift {
  0% {
    transform: translate3d(-2.5%, -1%, 0) scale(1.05)
  }
  50% {
    transform: translate3d(1%, 1%, 0) scale(1.07)
  }
  100% {
    transform: translate3d(3%, -.5%, 0) scale(1.05)
  }
}

@media(hover:hover) and (pointer:fine) {
  .about-cta-panel:hover:before {
    animation: about-cta-light-drift 5.2s ease-in-out infinite alternate;
    filter: saturate(1.08) brightness(1.04)
  }
}

@media(max-width:760px) {
  .about-gallery {
    padding-bottom: 40px
  }
  .about-cta {
    padding-top: 48px
  }
}
/* Mission and Vision — centred framework followed by a structured brand panel */
.about-mission {
  padding: 96px 0;
  background: #fff
}

.about-mission .purpose-grid {
  display: block
}

.about-mission .purpose-copy {
  max-width: 760px;
  margin: 0 auto;
  text-align: center
}

.about-mission .purpose-copy h3 {
  margin-bottom: 20px;
  font-size: 44px;
  line-height: 50px
}

.about-mission .purpose-copy p {
  max-width: none;
  font-size: 19px;
  line-height: 30px
}

.about-mission .purpose-grid figure {
  width: min(780px, 100%);
  height: auto;
  aspect-ratio: 1;
  margin: 56px auto 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none
}

.about-mission .purpose-visual-mission img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.about-vision {
  padding: 96px 0;
  background: #1260ab
}

.about-vision .vision-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
  gap: 72px;
  min-height: 0;
  align-items: center
}

.about-vision .vision-visual {
  position: relative;
  width: 100%;
  height: 500px;
  margin: 0;
  border: 8px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .2)
}

.about-vision .vision-visual img {
  border-radius: 16px;
  object-position: center;
  transform: none
}

.about-vision .vision-copy {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none
}

.about-vision .vision-copy h3 {
  margin-bottom: 22px;
  color: #fff;
  font-size: 44px;
  line-height: 50px
}

.about-vision .vision-copy p {
  max-width: 460px;
  color: rgba(255, 255, 255, .9);
  font-size: 19px;
  line-height: 30px
}

@media(max-width:980px) {
  .about-vision .vision-stage {
    grid-template-columns: 1fr;
    gap: 44px
  }
  .about-vision .vision-visual {
    height: 480px
  }
  .about-vision .vision-copy {
    max-width: 680px
  }
  .about-vision .vision-copy p {
    max-width: none
  }
}

@media(max-width:700px) {
  .about-mission,
  .about-vision {
    padding: 72px 0
  }
  .about-mission .purpose-copy {
    text-align: left
  }
  .about-mission .purpose-copy h3,
  .about-vision .vision-copy h3 {
    font-size: 36px;
    line-height: 42px
  }
  .about-mission .purpose-copy p,
  .about-vision .vision-copy p {
    font-size: 17px;
    line-height: 27px
  }
  .about-mission .purpose-grid figure {
    margin-top: 40px
  }
  .about-vision .vision-stage {
    display: flex;
    gap: 34px
  }
  .about-vision .vision-visual {
    height: 360px;
    border-width: 6px
  }
  .about-vision .vision-copy {
    width: 100%;
    margin: 0;
    padding: 0
  }
}

.about-hero {
  height: 430px;
  border-bottom: 1px solid #e2e3e3;
  background: #f7f8f8;
  color: #353536
}

.about-hero:before {
  z-index: -1;
  inset: 80px 0 0;
  background: radial-gradient(circle at 73% 55%, rgba(18, 96, 171, .13), transparent 38%), linear-gradient(105deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .74) 43%, rgba(247, 248, 248, .2) 68%)
}

.about-hero:after {
  display: block;
  position: absolute;
  right: -8%;
  bottom: -150px;
  z-index: -1;
  width: 520px;
  height: 300px;
  border-radius: 50%;
  background: rgba(234, 184, 0, .1);
  filter: blur(70px);
  content: ""
}

.about-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 30px
}

.about-hero-eyebrow {
  margin: 0 0 20px!important;
  color: #eab800!important;
  font-size: 12px!important;
  font-weight: 700!important;
  line-height: 16px!important;
  letter-spacing: .09em;
  text-transform: uppercase
}

.about-hero h1 {
  max-width: 600px;
  margin: 0 0 20px;
  font-size: 52px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: -.025em
}

.about-hero .about-hero-subtitle {
  max-width: 630px;
  margin: 0;
  color: #636566;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px
}

.about-route-network {
  position: absolute;
  z-index: 0;
  inset: 80px 0 0;
  opacity: .95
}

.about-route-network svg {
  width: 100%;
  height: 100%;
  overflow: visible
}

.about-route-network path {
  fill: none;
  stroke: #1260ab;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 12;
  opacity: .35;
  animation: about-route-flow 18s linear infinite
}

.about-route-network path:nth-child(2) {
  animation-duration: 24s;
  animation-direction: reverse;
  opacity: .24
}

.about-route-network path:nth-child(3) {
  animation-duration: 21s;
  opacity: .2
}

.about-route-nodes circle {
  fill: #fff;
  stroke: #1260ab;
  stroke-width: 3
}

.about-route-nodes circle:nth-child(3n+1) {
  fill: #eab800;
  stroke: #fff;
  stroke-width: 4
}

.about-route-traveller {
  fill: #eab800;
  stroke: #fff;
  stroke-width: 4;
  filter: drop-shadow(0 4px 7px rgba(234, 184, 0, .32))
}

@keyframes about-route-flow {
  to {
    stroke-dashoffset: -190
  }
}

@media(max-width:760px) {
  .about-hero {
    height: 380px;
    padding-top: 72px
  }
  .about-hero:before {
    inset: 72px 0 0
  }
  .about-hero:after {
    right: -40%;
    bottom: -170px;
    inset: auto
  }
  .about-hero-content {
    padding-top: 20px
  }
  .about-hero h1 {
    font-size: 40px;
    line-height: 48px
  }
  .about-hero .about-hero-subtitle {
    max-width: 88%;
    font-size: 15px;
    line-height: 24px
  }
  .about-route-network {
    inset: 72px 0 0;
    left: 18%;
    opacity: .48
  }
}

@media(prefers-reduced-motion:reduce) {
  .operations-carousel {
    scroll-behavior: auto
  }
  .proof-stats>div,
  .purpose-copy>div {
    opacity: 1;
    transform: none;
    transition: none
  }
  .purpose-visual img {
    transform: none;
    transition: none
  }
  .about-cta-panel:before,
  .about-route-network path {
    animation: none!important;
    transform: none;
    transition: none
  }
  .about-route-traveller {
    display: none
  }
}
/* About hero — photo-led editorial direction */
.about-hero {
  height: auto;
  min-height: 560px;
  padding: 64px 0;
  background: #f4f5f5;
  color: #353536;
  border-bottom: 0;
  overflow: hidden
}

.about-hero:before,
.about-hero:after,
.about-route-network {
  display: none!important
}

.about-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
  gap: 72px;
  align-items: center
}

.about-hero-content {
  padding: 0;
  position: relative;
  z-index: 2
}

.about-hero-eyebrow {
  margin: 0 0 24px!important;
  color: #eab800!important;
  font-size: 12px!important;
  font-weight: 700!important;
  line-height: 16px!important;
  letter-spacing: .09em;
  text-transform: uppercase
}

.about-hero h1 {
  max-width: 600px;
  margin: 0 0 24px;
  font-size: 58px;
  font-weight: 700;
  line-height: 66px;
  letter-spacing: -.035em
}

.about-hero .about-hero-subtitle {
  max-width: 590px;
  margin: 0;
  color: #636566;
  font-size: 18px;
  font-weight: 300;
  line-height: 29px
}

.about-hero-proof {
  display: flex;
  gap: 0;
  margin-top: 44px
}

.about-hero-proof>div {
  display: grid;
  min-width: 178px;
  padding-right: 34px;
  gap: 3px
}

.about-hero-proof>div+div {
  padding-left: 34px;
  border-left: 1px solid #d4d6d7
}

.about-hero-proof strong {
  color: #1260ab;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px
}

.about-hero-proof span {
  color: #636566;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px
}

.about-hero-visual {
  position: relative;
  height: 440px;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #dfe5e9;
  box-shadow: 0 20px 50px rgba(4, 30, 66, .13)
}

.about-hero-visual:before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(4, 30, 66, .08), transparent 40%);
  content: "";
  pointer-events: none
}

.about-hero-visual:after {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 9px;
  height: 96px;
  background: #eab800;
  content: ""
}

.about-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transform: scale(1.01);
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1)
}

.about-hero-visual figcaption {
  position: absolute;
  right: 24px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(4, 30, 66, .86);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  backdrop-filter: blur(8px)
}

.about-hero-visual figcaption span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #eab800
}

@media(hover:hover) and (pointer:fine) {
  .about-hero-visual:hover img {
    transform: scale(1.045)
  }
}

@media(max-width:980px) {
  .about-hero-layout {
    grid-template-columns: 1fr;
    gap: 44px
  }
  .about-hero {
    padding: 56px 0
  }
  .about-hero h1 {
    max-width: 720px
  }
  .about-hero-visual {
    height: 430px
  }
}

@media(max-width:760px) {
  .about-hero {
    min-height: 0;
    height: auto;
    padding: 48px 0
  }
  .about-hero-layout {
    gap: 36px
  }
  .about-hero h1 {
    font-size: 42px;
    line-height: 49px
  }
  .about-hero .about-hero-subtitle {
    max-width: 100%;
    font-size: 16px;
    line-height: 25px
  }
  .about-hero-proof {
    margin-top: 32px
  }
  .about-hero-proof>div {
    min-width: 0;
    padding-right: 22px
  }
  .about-hero-proof>div+div {
    padding-left: 22px
  }
  .about-hero-proof strong {
    font-size: 19px;
    line-height: 25px
  }
  .about-hero-visual {
    height: 330px;
    border-radius: 16px
  }
  .about-hero-visual figcaption {
    right: 16px;
    bottom: 16px
  }
}
/* About hero — cinematic people-and-fleet direction */
.about-hero {
  position: relative;
  height: 620px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #041e42;
  color: #fff;
  isolation: isolate
}

.about-hero:before {
  display: block!important;
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 16, 36, .94) 0%, rgba(2, 16, 36, .78) 34%, rgba(2, 16, 36, .27) 68%, rgba(2, 16, 36, .16) 100%);
  content: ""
}

.about-hero:after {
  display: block!important;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 38%;
  height: 5px;
  background: #eab800;
  content: ""
}

.about-hero-media {
  position: absolute;
  z-index: 0;
  inset: 0
}

.about-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(.94) contrast(1.02);
  transform: scale(1.01);
  transition: transform 1.4s cubic-bezier(.22, 1, .36, 1)
}

.about-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  height: 100%;
  padding: 106px 0 124px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center
}

.about-hero-eyebrow {
  margin: 0 0 24px!important;
  color: #eab800!important;
  font-size: 12px!important;
  font-weight: 700!important;
  line-height: 16px!important;
  letter-spacing: .1em;
  text-transform: uppercase
}

.about-hero h1 {
  max-width: 790px;
  margin: 0 0 24px;
  color: #fff;
  font-size: 60px;
  font-weight: 700;
  line-height: 68px;
  letter-spacing: -.035em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .15)
}

.about-hero .about-hero-subtitle {
  max-width: 590px;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 18px;
  font-weight: 300;
  line-height: 29px
}

.about-hero-facts {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  border-top: 1px solid rgba(255, 255, 255, .22);
  background: rgba(4, 30, 66, .72);
  backdrop-filter: blur(12px)
}

.about-hero-facts .container {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  height: 94px;
  gap: 0;
  align-items: center
}

.about-hero-facts p {
  display: grid;
  min-width: 220px;
  margin: 0;
  padding-right: 42px;
  gap: 1px
}

.about-hero-facts p+p {
  padding-left: 42px;
  border-left: 1px solid rgba(255, 255, 255, .2)
}

.about-hero-facts strong {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px
}

.about-hero-facts span {
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px
}

@media(hover:hover) and (pointer:fine) {
  .about-hero:hover .about-hero-media img {
    transform: scale(1.035)
  }
}

@media(max-width:980px) {
  .about-hero {
    height: 600px
  }
  .about-hero h1 {
    font-size: 52px;
    line-height: 60px
  }
  .about-hero:before {
    background: linear-gradient(90deg, rgba(2, 16, 36, .92), rgba(2, 16, 36, .56) 70%, rgba(2, 16, 36, .25))
  }
  .about-hero-facts .container {
    grid-template-columns: repeat(3, 1fr)
  }
  .about-hero-facts p {
    min-width: 0
  }
}

@media(max-width:760px) {
  .about-hero {
    height: 620px;
    padding: 0
  }
  .about-hero:before {
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 16, 36, .48) 0%, rgba(2, 16, 36, .82) 58%, rgba(2, 16, 36, .96) 100%)
  }
  .about-hero-media img {
    object-position: 58% center
  }
  .about-hero-content {
    padding: 120px 0 170px;
    justify-content: flex-end
  }
  .about-hero h1 {
    font-size: 40px;
    line-height: 47px
  }
  .about-hero .about-hero-subtitle {
    max-width: 92%;
    font-size: 16px;
    line-height: 25px
  }
  .about-hero-facts {
    overflow-x: auto
  }
  .about-hero-facts .container {
    width: max-content;
    min-width: 100%;
    height: 108px;
    grid-template-columns: repeat(3, 190px)
  }
  .about-hero-facts p {
    padding-right: 24px
  }
  .about-hero-facts p+p {
    padding-left: 24px
  }
}
/* About hero — image-free corporate typography */
.about-hero {
  position: relative;
  display: block;
  height: auto;
  min-height: 540px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #f4f5f5;
  color: #353536;
  isolation: isolate
}

.about-hero:before {
  display: block!important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 0;
  width: 31%;
  background: #1260ab;
  content: ""
}

.about-hero:after {
  display: block!important;
  position: absolute;
  top: 0;
  right: 31%;
  bottom: auto;
  z-index: 1;
  width: 9px;
  height: 118px;
  background: #eab800;
  content: ""
}

.about-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .68fr);
  min-height: 432px;
  gap: 88px;
  align-items: center
}

.about-hero-content {
  position: relative;
  z-index: 2;
  display: block;
  height: auto;
  padding: 54px 0
}

.about-hero-eyebrow {
  margin: 0 0 24px!important;
  color: #eab800!important;
  font-size: 12px!important;
  font-weight: 700!important;
  line-height: 16px!important;
  letter-spacing: .1em;
  text-transform: uppercase
}

.about-hero h1 {
  max-width: 760px;
  margin: 0 0 24px;
  color: #353536;
  font-size: 60px;
  font-weight: 700;
  line-height: 68px;
  letter-spacing: -.035em;
  text-shadow: none
}

.about-hero .about-hero-subtitle {
  max-width: 620px;
  margin: 0;
  color: #636566;
  font-size: 18px;
  font-weight: 300;
  line-height: 29px
}

.about-hero-year {
  position: relative;
  z-index: 2;
  padding: 38px 34px 36px;
  border-top: 7px solid #eab800;
  background: #fff;
  box-shadow: 0 18px 40px rgba(4, 30, 66, .12)
}

.about-hero-year>span {
  display: block;
  margin-bottom: 12px;
  color: #636566;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .09em;
  text-transform: uppercase
}

.about-hero-year strong {
  display: block;
  margin-bottom: 22px;
  color: #1260ab;
  font-size: 72px;
  font-weight: 700;
  line-height: 74px;
  letter-spacing: -.055em
}

.about-hero-year p {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid #d9dbdc;
  color: #636566;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px
}

.about-hero-strip {
  position: relative;
  z-index: 3;
  background: #041e42;
  color: #fff
}

.about-hero-strip .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 108px;
  align-items: center
}

.about-hero-strip p {
  display: grid;
  margin: 0;
  padding-right: 40px;
  gap: 2px
}

.about-hero-strip p+p {
  padding-left: 40px;
  border-left: 1px solid rgba(255, 255, 255, .22)
}

.about-hero-strip strong {
  font-size: 17px;
  font-weight: 600;
  line-height: 24px
}

.about-hero-strip span {
  color: rgba(255, 255, 255, .66);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px
}

.about-hero-media,
.about-hero-facts,
.about-hero-layout,
.about-hero-visual,
.about-hero-proof {
  display: none!important
}

@media(max-width:980px) {
  .about-hero:before {
    width: 25%
  }
  .about-hero:after {
    right: 25%
  }
  .about-hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .72fr);
    gap: 44px
  }
  .about-hero h1 {
    font-size: 50px;
    line-height: 58px
  }
  .about-hero-year strong {
    font-size: 62px;
    line-height: 66px
  }
}

@media(max-width:760px) {
  .about-hero {
    height: auto;
    min-height: 0;
    padding: 0
  }
  .about-hero:before {
    top: auto;
    right: 0;
    bottom: 108px;
    width: 100%;
    height: 146px
  }
  .about-hero:after {
    top: 0;
    right: 24px;
    width: 7px;
    height: 82px
  }
  .about-hero-grid {
    display: block;
    min-height: 0;
    padding-top: 48px;
    padding-bottom: 40px
  }
  .about-hero-content {
    padding: 0 0 36px
  }
  .about-hero h1 {
    font-size: 42px;
    line-height: 49px
  }
  .about-hero .about-hero-subtitle {
    max-width: 100%;
    font-size: 16px;
    line-height: 25px
  }
  .about-hero-year {
    width: calc(100% - 32px);
    margin-left: auto;
    padding: 28px
  }
  .about-hero-year strong {
    font-size: 54px;
    line-height: 58px
  }
  .about-hero-strip {
    overflow-x: auto
  }
  .about-hero-strip .container {
    width: max-content;
    min-width: 100%;
    grid-template-columns: repeat(3, 185px)
  }
  .about-hero-strip p {
    padding-right: 24px
  }
  .about-hero-strip p+p {
    padding-left: 24px
  }
}
/* About hero — minimal typographic direction */
.about-hero {
  position: relative;
  display: grid;
  height: 380px;
  min-height: 0;
  padding: 80px 0 0;
  overflow: hidden;
  border: 0;
  background: linear-gradient(180deg, #f8f9f9 0%, #f2f3f3 100%);
  color: #353536;
  place-items: center;
  isolation: isolate
}

.about-hero:before {
  display: none!important
}

.about-hero:after {
  display: none!important
}

.about-hero-wordmark {
  position: absolute;
  top: 61%;
  left: 50%;
  z-index: 0;
  display: block;
  width: min(56vw, 860px);
  height: auto;
  max-width: none;
  opacity: .045;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  animation: about-hero-wordmark-enter 900ms cubic-bezier(.22, 1, .36, 1) both;
  will-change: opacity, transform
}

.about-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(920px, calc(100% - 48px));
  height: auto;
  padding: 0;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center
}

.about-hero h1 {
  max-width: none;
  margin: 0 0 14px;
  color: #353536;
  font-size: 58px;
  font-weight: 700;
  line-height: 66px;
  letter-spacing: -.035em;
  text-shadow: none;
  animation: about-hero-copy-enter 620ms cubic-bezier(.22, 1, .36, 1) 120ms both;
  will-change: opacity, transform
}

.about-hero .about-hero-subtitle {
  max-width: 680px;
  margin: 0;
  color: #5f6162;
  font-size: 18px;
  font-weight: 300;
  line-height: 29px;
  animation: about-hero-copy-enter 680ms cubic-bezier(.22, 1, .36, 1) 240ms both;
  will-change: opacity, transform
}

.about-hero-accent {
  display: block;
  width: 96px;
  height: 3px;
  margin-top: 23px;
  border-radius: 3px;
  background: linear-gradient(90deg, #1260ab 0 78%, #eab800 78% 100%);
  transform-origin: left center;
  animation: about-hero-accent-enter 620ms cubic-bezier(.22, 1, .36, 1) 380ms both;
  will-change: opacity, transform
}

.about-hero-eyebrow,
.about-hero-grid,
.about-hero-year,
.about-hero-strip,
.about-hero-media,
.about-hero-facts,
.about-hero-layout,
.about-hero-visual,
.about-hero-proof {
  display: none!important
}

@keyframes about-hero-wordmark-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.96)
  }
  to {
    opacity: .045;
    transform: translate(-50%, -50%) scale(1)
  }
}

@keyframes about-hero-copy-enter {
  from {
    opacity: 0;
    transform: translateY(14px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes about-hero-accent-enter {
  from {
    opacity: 0;
    transform: scaleX(0)
  }
  to {
    opacity: 1;
    transform: scaleX(1)
  }
}

@media(max-width:760px) {
  .about-hero {
    height: 372px;
    min-height: 0;
    padding: 72px 0 0
  }
  .about-hero:before {
    display: none!important
  }
  .about-hero-wordmark {
    top: 60%;
    width: 92vw
  }
  .about-hero-content {
    width: min(100% - 32px, 680px);
    padding: 0
  }
  .about-hero h1 {
    margin-bottom: 16px;
    font-size: 46px;
    line-height: 54px
  }
  .about-hero .about-hero-subtitle {
    max-width: 330px;
    font-size: 16px;
    line-height: 25px
  }
  .about-hero-accent {
    width: 84px;
    margin-top: 24px
  }
}

@media(prefers-reduced-motion:reduce) {
  .about-hero-wordmark,
  .about-hero h1,
  .about-hero .about-hero-subtitle,
  .about-hero-accent {
    animation: none!important;
    will-change: auto
  }
  .about-hero-wordmark {
    opacity: .045;
    transform: translate(-50%, -50%)
  }
  .about-hero h1,
  .about-hero .about-hero-subtitle {
    opacity: 1;
    transform: none
  }
  .about-hero-accent {
    opacity: 1;
    transform: none
  }
}
/* Mission and Vision — compact alternating rows */
.about-mission,
.about-vision {
  padding: 80px 0
}

.about-mission {
  background: #fff
}

.about-vision {
  background: #f3f4f4
}

.about-mission .purpose-grid,
.about-vision .vision-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
  min-height: 0;
  align-items: center
}

.about-mission .purpose-copy,
.about-vision .vision-copy {
  position: static;
  width: auto;
  max-width: 520px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: left
}

.about-mission .purpose-copy h3,
.about-vision .vision-copy h3 {
  margin: 0 0 16px;
  color: #353536;
  font-size: 34px;
  line-height: 40px
}

.about-mission .purpose-copy p,
.about-vision .vision-copy p {
  max-width: 520px;
  margin: 0;
  color: #353536;
  font-size: 18px;
  line-height: 28px
}

.about-mission .purpose-grid figure,
.about-vision .vision-visual {
  width: 420px;
  height: 380px;
  aspect-ratio: auto;
  margin: 0;
  padding: 14px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .1)
}

.about-mission .purpose-visual-mission img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: contain
}

.about-vision .vision-stage {
  grid-template-columns: 420px minmax(0, 1fr)
}

.about-vision .vision-visual img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  transform: none
}

@media(max-width:980px) {
  .about-mission .purpose-grid,
  .about-vision .vision-stage {
    grid-template-columns: 1fr;
    gap: 36px
  }
  .about-mission .purpose-grid figure,
  .about-vision .vision-visual {
    width: min(520px, 100%);
    height: 400px
  }
  .about-vision .vision-copy {
    max-width: 600px
  }
}

@media(max-width:700px) {
  .about-mission,
  .about-vision {
    padding: 56px 0
  }
  .about-mission .purpose-grid,
  .about-vision .vision-stage {
    display: flex;
    gap: 30px;
    flex-direction: column
  }
  .about-mission .purpose-grid figure,
  .about-vision .vision-visual {
    width: 100%;
    height: 320px;
    padding: 10px
  }
  .about-mission .purpose-copy h3,
  .about-vision .vision-copy h3 {
    font-size: 32px;
    line-height: 38px
  }
  .about-mission .purpose-copy p,
  .about-vision .vision-copy p {
    font-size: 16px;
    line-height: 25px
  }
}

.about-mission .purpose-grid figure {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none
}

.about-mission .purpose-visual-mission img {
  border-radius: 0
}

@media(max-width:700px) {
  .about-mission .purpose-grid figure {
    padding: 0
  }
}

.about-mission .purpose-grid {
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 112px
}

.about-mission .purpose-grid figure {
  width: 440px;
  height: 440px
}

.about-mission .purpose-visual-mission img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.about-mission .purpose-copy {
  max-width: 520px
}

@media(max-width:980px) {
  .about-mission .purpose-grid {
    grid-template-columns: 1fr;
    gap: 38px
  }
  .about-mission .purpose-grid figure {
    width: min(540px, 100%);
    height: auto;
    aspect-ratio: 1
  }
  .about-mission .purpose-copy {
    max-width: 620px
  }
}

.about-vision {
  border-top: 0;
  background: #fff
}

.about-vision:before {
  display: block;
  width: min(var(--content-width), calc(100% - 48px));
  height: 1px;
  margin: -80px auto 80px;
  background: #d9e8f5;
  content: ""
}

.about-vision .vision-stage {
  grid-template-columns: minmax(0, 1fr) 500px;
  gap: 112px
}

.about-vision .vision-copy {
  max-width: 520px
}

.about-vision .vision-visual {
  width: 500px;
  height: 360px
}

@media(max-width:980px) {
  .about-vision .vision-stage {
    grid-template-columns: 1fr;
    gap: 38px
  }
  .about-vision .vision-visual {
    width: min(520px, 100%)
  }
}

@media(max-width:700px) {
  .about-vision:before {
    width: calc(100% - 32px);
    margin: -56px auto 56px
  }
}
/* Company overview — simplified real-photo editorial layout */
.about-story {
  padding: 112px 0 120px;
  background: var(--surface-default)
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 72px;
  align-items: start
}

.story-copy {
  min-width: 0;
  padding-top: 8px
}

.story-copy h2 {
  max-width: 460px;
  margin: 0 0 40px;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  overflow-wrap: anywhere
}

.story-copy p {
  width: auto;
  max-width: 520px;
  margin: 0 0 22px;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.62
}

.story-copy p:last-child {
  margin-bottom: 0
}

.story-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .72fr);
  grid-template-rows: 590px;
  gap: 16px;
  min-width: 0
}

.story-gallery figure {
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 18px;
  background: var(--surface-light);
  box-shadow: 0 14px 34px rgba(4, 30, 66, .12);
  overflow: hidden
}

.story-gallery-main {
  min-width: 0
}

.story-gallery-supporting {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  min-width: 0
}

.story-gallery-supporting figure {
  min-height: 0
}

.story-gallery img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  transition: transform 700ms var(--ease-standard)
}

.story-gallery-main img {
  object-position: 58% center
}

.story-gallery-supporting figure:first-child img {
  object-position: 56% center
}

.story-gallery-supporting figure:last-child img {
  object-position: 54% center
}

@media(hover:hover) and (pointer:fine) {
  .story-gallery figure:hover img {
    transform: scale(1.025)
  }
}

@media(max-width:980px) {
  .about-story {
    padding: 88px 0
  }
  .story-grid {
    grid-template-columns: 1fr;
    gap: 48px
  }
  .story-copy h2 {
    max-width: 620px
  }
  .story-copy p {
    max-width: 760px
  }
  .story-gallery {
    grid-template-rows: 520px;
    max-width: none
  }
}

@media(max-width:760px) {
  .about-story {
    padding: 72px 0
  }
  .story-grid {
    gap: 38px
  }
  .story-copy {
    padding-top: 0
  }
  .story-copy h2 {
    margin-bottom: 30px;
    font-size: 40px;
    line-height: 1.12
  }
  .story-copy p {
    font-size: 16px;
    line-height: 1.58
  }
  .story-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: 330px auto;
    gap: 12px
  }
  .story-gallery-main {
    height: 330px!important
  }
  .story-gallery-supporting {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 150px;
    gap: 12px
  }
  .story-gallery-supporting figure {
    height: 150px!important;
    border-radius: 14px
  }
  .story-gallery-main {
    border-radius: 16px!important
  }
}

@media(max-width:430px) {
  .story-gallery {
    grid-template-rows: 300px auto
  }
  .story-gallery-main {
    height: 300px!important
  }
  .story-gallery-supporting {
    grid-template-columns: 1fr;
    grid-template-rows: 190px 190px
  }
  .story-gallery-supporting figure {
    height: 190px!important
  }
}

@media(prefers-reduced-motion:reduce) {
  .story-gallery img {
    transition: none
  }
  .story-gallery figure:hover img {
    transform: none
  }
}
/* Company overview — approved single latest-bus photo */
.story-grid {
  align-items: start
}

.story-gallery {
  display: block;
  min-width: 0;
  padding-top: 0
}

.story-gallery .story-gallery-main {
  width: 100%;
  height: 386px;
  padding: 16px;
  border-radius: 20px;
  background: var(--surface-default);
  box-shadow: var(--shadow-card)
}

.story-gallery .story-gallery-main img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 54%
}

@media(max-width:980px) {
  .story-gallery {
    padding-top: 0
  }
  .story-gallery .story-gallery-main {
    height: 460px
  }
}

@media(max-width:760px) {
  .story-gallery {
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
    padding-top: 0
  }
  .story-gallery .story-gallery-main {
    height: 300px!important;
    padding: 12px;
    border-radius: 18px!important
  }
  .story-gallery .story-gallery-main img {
    border-radius: 10px
  }
}

@media(max-width:430px) {
  .story-gallery .story-gallery-main {
    height: 250px!important
  }
}

@media(max-width:760px) {
  .about-story {
    padding: 64px 0
  }
  .story-grid {
    gap: 36px
  }
  .story-copy h2 {
    margin-bottom: 24px;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -.03em
  }
  .story-copy p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 25px
  }
}

@media(max-width:760px) {
  .about-proof {
    padding: 64px 0
  }
  .proof-panel {
    gap: 36px
  }
  .proof-title-desktop {
    display: none
  }
  .proof-title-mobile {
    display: block
  }
  .proof-copy h2 {
    margin-bottom: 24px;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -.03em
  }
  .proof-copy p {
    font-size: 16px;
    line-height: 25px
  }
}

@media(max-width:760px) {
  .about-mission,
  .about-vision {
    padding: 64px 0
  }
  .about-vision:before {
    width: calc(100% - 32px);
    margin: -64px auto 64px
  }
  .about-mission .purpose-grid,
  .about-vision .vision-stage {
    gap: 36px
  }
  .about-mission .purpose-copy h3,
  .about-vision .vision-copy h3 {
    margin-bottom: 24px;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -.03em
  }
  .about-mission .purpose-copy p,
  .about-vision .vision-copy p {
    font-size: 16px;
    line-height: 25px
  }
  .about-vision .vision-visual {
    order: 1
  }
  .about-vision .vision-copy {
    order: 2
  }
}

.values-pagination,
.values-title-break {
  display: none
}

@media(max-width:760px) {
  .values-title-break {
    display: initial
  }
}

@media(max-width:760px) {
  .about-values {
    padding: 64px 0
  }
  .values-head {
    margin-bottom: 36px
  }
  .values-head .eyebrow {
    margin-bottom: 24px
  }
  .values-head h2 {
    margin-bottom: 24px;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -.03em
  }
  .values-head>p:last-child {
    font-size: 16px;
    line-height: 25px
  }
  .values-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 30px 8px;
    margin: 0;
    padding: 0;
    overflow: visible
  }
  .values-grid article {
    display: block;
    grid-column: span 2;
    padding: 0;
    border: 0;
    text-align: center
  }
  .values-grid article:nth-child(4) {
    grid-column: 2/span 2
  }
  .values-grid article:nth-child(5) {
    grid-column: 4/span 2
  }
  .values-grid article.reveal {
    opacity: 1;
    transform: none;
    transition: none
  }
  .values-grid span {
    width: 82px;
    height: 82px;
    margin: 0 auto 14px;
    background: #fff
  }
  .values-grid svg {
    width: 38px;
    height: 38px
  }
  .values-grid h3 {
    margin: 0;
    font-size: 14px;
    line-height: 20px
  }
  .values-pagination {
    display: none
  }
}

@media(max-width:760px) {
  .about-gallery {
    padding: 64px 0
  }
  .gallery-head .eyebrow {
    margin-bottom: 24px
  }
  .gallery-head h2 {
    margin-bottom: 24px;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -.03em
  }
  .gallery-head>p:last-child {
    font-size: 16px;
    line-height: 25px
  }
  .gallery-showcase {
    width: calc(100% - 32px);
    margin: 36px auto 0;
    padding: 0;
    background: transparent
  }
  .gallery-feature {
    height: 320px;
    border-radius: 18px
  }
  .gallery-previews {
    display: none
  }
  .gallery-controls {
    width: 230px;
    height: 44px;
    margin: 20px auto 0
  }
  .gallery-controls>button,
  .gallery-controls>button:hover,
  .gallery-controls>button:focus-visible {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(18, 96, 171, .22);
    border-radius: 50%;
    background: #fff;
    color: #1260ab;
    transform: none
  }
  .gallery-controls svg {
    display: block;
    width: 20px;
    height: 20px
  }
}
/* Centre the photo against the copy paragraphs, excluding the heading. */
@media(min-width:981px) {
  .story-grid {
    grid-template-rows: auto auto;
    column-gap: 72px;
    row-gap: 28px
  }
  .story-copy {
    display: contents
  }
  .story-copy h2 {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0
  }
  .story-paragraphs {
    grid-column: 1;
    grid-row: 2
  }
  .story-gallery {
    grid-column: 2;
    grid-row: 2;
    align-self: center
  }
}