/* V151 — About page hero redesign to match the new split editorial reference */
body .on[data-p="about"] > section.about-hero {
  padding:0 !important;
  border-top:0 !important;
  background:#fff !important;
  overflow:hidden !important;
}
body .on[data-p="about"] > section.about-hero > .w.about-hero-shell {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,50%) minmax(0,50%) !important;
  align-items:stretch !important;
  min-height:clamp(540px,46vw,760px) !important;
  background:#fff !important;
}
body .on[data-p="about"] .about-hero-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(54px,6vw,96px) clamp(28px,3.5vw,54px) clamp(54px,6vw,88px) clamp(44px,7vw,140px);
}
body .on[data-p="about"] .about-hero-kicker {
  display:flex !important;
  align-items:center;
  gap:clamp(12px,1.3vw,20px);
  margin:0 0 clamp(24px,2.6vw,34px) !important;
  color:#1f5fc8 !important;
  font-size:clamp(.8rem,.85vw,.96rem) !important;
  letter-spacing:.12em !important;
}
body .on[data-p="about"] .about-hero-kicker::after {
  content:"";
  display:block;
  width:clamp(74px,5.4vw,118px);
  height:3px;
  border-radius:99px;
  background:#2d66c7;
}
body .on[data-p="about"] .about-hero h1 {
  max-width:10.8ch !important;
  margin:0 0 clamp(28px,3.1vw,38px) !important;
  color:#102b62 !important;
  font-family:var(--helprite-font-heading,inherit) !important;
  font-size:clamp(3rem,5.35vw,5.15rem) !important;
  font-weight:700 !important;
  line-height:.96 !important;
  letter-spacing:-.055em !important;
}
body .on[data-p="about"] .about-hero-underline {
  position:relative;
  display:inline-block;
}
body .on[data-p="about"] .about-hero-underline::after {
  content:"";
  position:absolute;
  left:4%;
  right:4%;
  bottom:-.15em;
  height:.2em;
  border-radius:999px;
  border-bottom:4px solid #2573e8;
  transform:rotate(-2.5deg);
}
body .on[data-p="about"] .about-hero-copy p:not(.lab) {
  max-width:30ch;
  margin:0 0 1rem !important;
  color:#223a69 !important;
  font-family:var(--helprite-font-body,inherit) !important;
  font-size:clamp(1.03rem,1.4vw,1.14rem) !important;
  line-height:1.42 !important;
}
body .on[data-p="about"] .about-hero-copy p:last-child {margin-bottom:0 !important;}
body .on[data-p="about"] .about-hero-media {
  position:relative;
  min-width:0;
  overflow:hidden;
  min-height:100%;
  background:linear-gradient(135deg,#eef5ff 2%,#e2efff 98%);
}
body .on[data-p="about"] .about-hero-image {
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 25%),
    url('../img/about-hero-building.jpg') center center / cover no-repeat;
}
body .on[data-p="about"] .about-hero-media::before,
body .on[data-p="about"] .about-hero-media::after {
  content:"";
  position:absolute;
  top:-8%;
  bottom:-8%;
  left:-14%;
  pointer-events:none;
  border-radius:0 100% 100% 0 / 0 54% 46% 0;
  transform:rotate(3.8deg);
}
body .on[data-p="about"] .about-hero-media::before {
  width:32%;
  background:#cbe7fb;
  z-index:2;
}
body .on[data-p="about"] .about-hero-media::after {
  width:22%;
  left:-7%;
  background:#145ad1;
  z-index:3;
}
@media (max-width: 1180px) {
  body .on[data-p="about"] .about-hero h1 {font-size:clamp(2.8rem,4.6vw,4.4rem) !important;}
  body .on[data-p="about"] .about-hero-copy p:not(.lab) {max-width:34ch;}
}
@media (max-width: 900px) {
  body .on[data-p="about"] > section.about-hero > .w.about-hero-shell {
    grid-template-columns:1fr !important;
    min-height:0 !important;
  }
  body .on[data-p="about"] .about-hero-copy {
    padding:48px 22px 40px !important;
  }
  body .on[data-p="about"] .about-hero h1 {
    max-width:12ch !important;
  }
  body .on[data-p="about"] .about-hero-copy p:not(.lab) {
    max-width:none;
  }
  body .on[data-p="about"] .about-hero-media {
    min-height:clamp(280px,62vw,430px);
  }
  body .on[data-p="about"] .about-hero-media::before {
    width:26%; left:-10%;
  }
  body .on[data-p="about"] .about-hero-media::after {
    width:19%; left:-4%;
  }
}