.about-page {
  color: #244657;
  background: #fff;
}

.about-page main { overflow: hidden; }
.about-page main > section { scroll-margin-top: 64px; }

.about-kicker {
  margin: 0 0 16px;
  color: #0b8d69;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.about-intro {
  padding: 78px 0 72px;
  background: #f4f6f2;
  border-bottom: 1px solid #d9e2df;
}

.about-intro-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(350px, .75fr);
  gap: clamp(56px, 8vw, 118px);
  align-items: end;
}

.about-intro h1 {
  max-width: 760px;
  margin: 0;
  color: #0c2d47;
  font-size: clamp(50px, 5.2vw, 70px);
  line-height: 1.01;
  letter-spacing: -.048em;
}

.about-intro-summary { padding-bottom: 5px; }

.about-intro-summary > p {
  max-width: 470px;
  margin: 0;
  color: #55717e;
  font-size: 17px;
  line-height: 1.72;
}

.about-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 28px;
}

.about-actions .btn {
  min-height: 47px;
  padding: 11px 20px;
}

.about-inline-link {
  color: #173e54;
  font-size: 14px;
  font-weight: 800;
}

.about-inline-link span {
  display: inline-block;
  margin-left: 7px;
  color: #0b8d69;
  transition: transform 180ms ease;
}

.about-inline-link:hover span { transform: translateX(4px); }

.about-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr);
  gap: 14px;
  margin-top: 58px;
}

.about-gallery figure {
  min-width: 0;
  margin: 0;
}

.about-gallery img {
  display: block;
  width: 100%;
  height: 356px;
  object-fit: cover;
}

.about-gallery-wide img { object-position: center 44%; }
.about-gallery figure:not(.about-gallery-wide) img { object-position: center 53%; }

.about-gallery figcaption {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 12px 2px 0;
  color: #71858d;
  font-size: 12px;
  line-height: 1.4;
}

.about-gallery figcaption strong {
  color: #173e54;
  font-weight: 800;
}

.about-supply { padding: 102px 0 108px; }

.about-supply-grid {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: clamp(70px, 10vw, 150px);
  align-items: start;
}

.about-section-heading h2,
.about-workflow-copy h2,
.about-profile-copy h2,
.about-contact h2 {
  margin: 0;
  color: #0c2d47;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1.07;
  letter-spacing: -.038em;
}

.about-section-heading > p:last-child,
.about-profile-copy > p:last-of-type {
  max-width: 470px;
  margin: 24px 0 0;
  color: #5b7480;
  font-size: 16px;
  line-height: 1.72;
}

.about-brochure-button {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 250px;
  min-height: 0;
  margin-top: 30px;
  padding: 13px 48px 13px 17px;
  color: #143d58;
  background: #f5f8f6;
  border: 1px solid #b9cbc7;
  box-shadow: none;
  position: relative;
}

.about-brochure-button::after {
  content: "↗";
  position: absolute;
  top: 50%;
  right: 17px;
  color: #0b8d69;
  font-size: 20px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 180ms ease;
}

.about-brochure-button:hover {
  color: #0c2d47;
  background: #eaf3ef;
  border-color: #8db7aa;
}

.about-brochure-button:hover::after { transform: translate(3px, calc(-50% - 3px)); }

.about-brochure-button span {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
}

.about-brochure-button small {
  margin-top: 3px;
  color: #6b828b;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
  line-height: 1.3;
  text-transform: uppercase;
}

.about-detail-list { border-top: 2px solid #143d58; }

.about-detail-list article {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 22px;
  padding: 27px 4px 29px;
  border-bottom: 1px solid #cad7da;
}

.about-detail-list article > span {
  padding-top: 3px;
  color: #0b8d69;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .12em;
}

.about-detail-list h3 {
  margin: 0;
  color: #143d58;
  font-size: 21px;
  line-height: 1.25;
}

.about-detail-list p {
  max-width: 650px;
  margin: 9px 0 0;
  color: #5b7480;
  font-size: 15px;
  line-height: 1.68;
}

.about-workflow {
  color: #d9e7ed;
  background: #0b2a3d;
}

.about-workflow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(410px, .96fr);
  gap: clamp(54px, 7vw, 100px);
  align-items: center;
  padding-top: 74px;
  padding-bottom: 74px;
}

.about-workflow-photo { margin: 0; }

.about-workflow-photo img {
  display: block;
  width: 100%;
  height: 590px;
  object-fit: cover;
  object-position: 50% center;
}

.about-workflow-photo figcaption {
  margin-top: 12px;
  color: #87a3b0;
  font-size: 12px;
  letter-spacing: .02em;
}

.about-workflow-copy .about-kicker { color: #61d1ad; }
.about-workflow-copy h2 { color: #fff; }

.about-workflow-lead {
  margin: 22px 0 0;
  color: #b8ced8;
  font-size: 16px;
  line-height: 1.72;
}

.about-workflow-copy ol {
  margin: 35px 0 0;
  padding: 0;
  border-top: 1px solid #315369;
  list-style: none;
}

.about-workflow-copy li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding: 21px 0 22px;
  border-bottom: 1px solid #315369;
}

.about-workflow-copy li > span {
  padding-top: 2px;
  color: #61d1ad;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
}

.about-workflow-copy h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
}

.about-workflow-copy li p {
  margin: 7px 0 0;
  color: #a9c1cd;
  font-size: 14px;
  line-height: 1.6;
}

.about-profile {
  padding: 96px 0 100px;
  background: #fff;
}

.about-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(470px, 1.08fr);
  gap: clamp(70px, 10vw, 146px);
  align-items: start;
}

.about-profile-list {
  margin: 0;
  border-top: 2px solid #143d58;
}

.about-profile-list div {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 20px 4px;
  border-bottom: 1px solid #ccd8dc;
}

.about-profile-list dt {
  color: #71858e;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.about-profile-list dd {
  margin: 0;
  color: #143d58;
  font-size: 17px;
  font-weight: 780;
}

.about-contact {
  padding: 72px 0 76px;
  background: #e3f1ec;
  border-top: 1px solid #c7ddd5;
}

.about-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(290px, .65fr) auto;
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}

.about-contact h2 {
  max-width: 650px;
  font-size: clamp(35px, 3.5vw, 48px);
}

.about-contact-grid > p {
  margin: 0;
  color: #557568;
  font-size: 15px;
  line-height: 1.68;
}

.about-contact-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.about-contact-actions .btn { min-height: 47px; }
.about-contact-actions .btn + .btn { margin-left: 0; }
.about-contact-actions .btn-light { border: 1px solid #abc9be; box-shadow: none; }

@media (max-width: 1040px) {
  .about-intro-head { grid-template-columns: minmax(0, 1fr) minmax(330px, .68fr); gap: 50px; }
  .about-gallery { grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); }
  .about-supply-grid { gap: 60px; }
  .about-workflow-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: 48px; }
  .about-workflow-photo img { height: 540px; }
  .about-profile-grid { gap: 60px; }
  .about-contact-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr); }
  .about-contact-actions { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .about-intro-head,
  .about-supply-grid,
  .about-workflow-grid,
  .about-profile-grid,
  .about-contact-grid { grid-template-columns: 1fr; }

  .about-intro { padding: 60px 0 62px; }
  .about-intro-head { gap: 30px; }
  .about-intro-summary { max-width: 620px; }
  .about-gallery { margin-top: 44px; }
  .about-gallery img { height: 320px; }
  .about-supply { padding: 78px 0 84px; }
  .about-supply-grid { gap: 46px; }
  .about-section-heading { max-width: 640px; }
  .about-workflow-grid { gap: 48px; padding-top: 62px; padding-bottom: 66px; }
  .about-workflow-photo { order: 2; }
  .about-workflow-photo img { height: 430px; }
  .about-workflow-copy { max-width: 680px; }
  .about-profile { padding: 78px 0 84px; }
  .about-profile-grid { gap: 46px; }
  .about-profile-copy { max-width: 640px; }
  .about-contact-grid { gap: 26px; }
  .about-contact-grid > p { max-width: 620px; }
  .about-contact-actions { grid-column: auto; }
}

@media (max-width: 640px) {
  .about-kicker { margin-bottom: 13px; font-size: 11px; }
  .about-intro { padding: 44px 0 48px; }
  .about-intro h1 { font-size: clamp(40px, 11.4vw, 48px); line-height: 1.02; }
  .about-intro-summary > p { font-size: 16px; }
  .about-actions { gap: 20px; margin-top: 24px; }
  .about-actions .btn { min-height: 44px; padding: 10px 15px; }
  .about-gallery { grid-template-columns: 1fr; gap: 26px; margin-top: 38px; }
  .about-gallery img { height: 230px; }
  .about-gallery figure:not(.about-gallery-wide) img { height: 255px; object-position: center 47%; }
  .about-gallery figcaption { padding-top: 9px; }

  .about-supply { padding: 64px 0 68px; }
  .about-section-heading h2,
  .about-workflow-copy h2,
  .about-profile-copy h2,
  .about-contact h2 { font-size: 36px; }
  .about-section-heading > p:last-child,
  .about-profile-copy > p:last-of-type { margin-top: 18px; font-size: 15px; }
  .about-supply-grid { gap: 36px; }
  .about-detail-list article { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 22px 0 23px; }
  .about-detail-list h3 { font-size: 19px; }
  .about-detail-list p { font-size: 14px; }

  .about-workflow-grid { gap: 38px; padding-top: 58px; padding-bottom: 56px; }
  .about-workflow-lead { margin-top: 18px; font-size: 15px; }
  .about-workflow-copy ol { margin-top: 30px; }
  .about-workflow-copy li { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 19px 0 20px; }
  .about-workflow-photo img { height: 292px; }

  .about-profile { padding: 64px 0 68px; }
  .about-profile-grid { gap: 36px; }
  .about-profile-list div { grid-template-columns: 1fr; gap: 5px; padding: 16px 2px; }
  .about-profile-list dd { font-size: 16px; }
  .about-brochure-button { width: 100%; margin-top: 24px; }

  .about-contact { padding: 58px 0 62px; }
  .about-contact-grid { gap: 20px; }
  .about-contact-grid > p { font-size: 15px; }
  .about-contact-actions { flex-direction: column; align-items: stretch; margin-top: 4px; }
  .about-contact-actions .btn { justify-content: center; width: 100%; }
  .about-contact-actions .btn + .btn { margin-left: 0; }
}