.about-page {
  --navy:#172e5c;
  --blue:#325d9c;
  --light:#edf2fa;
  --bg:#f7f9fc;
  --text:#526077;
  --muted:#758298;
  --border:#e1e7f0;
  background:var(--bg);
  color:var(--text);
  font-family:IRanSansX,Tahoma,sans-serif
}
.about-page h1,.about-page h2,.about-page h3 {
  font-family:inherit;
  color:var(--navy)
}
.about-hero {
  position:relative;
  overflow:hidden;
  padding:54px 0;
  background:linear-gradient(115deg,#eaf0f9,#fff 76%);
  border-bottom:1px solid #e1e8f1
}
.about-hero:before {
  content:"";
  position:absolute;
  left:-100px;
  top:-130px;
  width:420px;
  height:420px;
  border:60px solid rgba(23,46,92,.035);
  border-radius:50%
}
.about-hero .container {
  position:relative
}
.about-crumb {
  display:flex;
  gap:10px;
  font-size:13px;
  margin-bottom:28px
}
.about-crumb a {
  color:#64718a;
  text-decoration:none
}
.about-eyebrow {
  font-size:13px;
  color:var(--blue);
  font-weight:700;
  margin-bottom:12px
}
.about-hero h1 {
  font-size:clamp(34px,4.5vw,52px);
  font-weight:900;
  line-height:1.55;
  margin-bottom:18px
}
.about-hero p {
  font-size:15px;
  line-height:2.15;
  max-width:670px;
  margin-bottom:24px
}
.about-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.about-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:10px 18px;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  border:1px solid var(--navy);
  transition:.2s
}
.about-btn.primary {
  background:var(--navy);
  color:#fff
}
.about-btn.secondary {
  background:#fff;
  color:var(--navy)
}
.about-btn.primary:hover {
  background:#0f2347;
  color:#fff
}
.about-btn.secondary:hover {
  background:var(--light);
  color:var(--navy)
}
.hero-img {
  position:relative;
  min-height:390px;
  border:1px solid var(--border);
  background:#fff;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(23,46,92,.09)
}
.hero-img img {
  width:100%;
  height:100%;
  min-height:390px;
  object-fit:cover
}
.hero-badge {
  position:absolute;
  right:22px;
  bottom:22px;
  background:rgba(23,46,92,.94);
  color:#fff;
  padding:16px 18px;
  max-width:240px;
  font-size:13px;
  line-height:1.9
}
.about-section {
  padding:78px 0
}
.about-section.white {
  background:#fff
}
.kicker {
  font-size:13px;
  color:var(--blue);
  font-weight:700;
  margin-bottom:8px
}
.section-title {
  font-size:clamp(28px,3.5vw,39px);
  font-weight:900;
  line-height:1.6;
  margin-bottom:18px
}
.about-text {
  font-size:15px;
  line-height:2.15;
  margin-bottom:16px
}
.img-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px
}
.img-grid img {
  width:100%;
  height:100%;
  object-fit:cover;
  border:1px solid var(--border)
}
.img-grid>.main {
  min-height:410px
}
.side {
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:14px
}
.side img {
  min-height:198px
}
.points {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:26px
}
.point {
  display:flex;
  gap:13px;
  background:#fff;
  border:1px solid var(--border);
  padding:18px
}
.point i {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:var(--light);
  color:var(--blue);
  flex:0 0 42px
}
.point h3 {
  font-size:15px;
  font-weight:800;
  margin-bottom:6px
}
.point p {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  margin:0
}
.cat-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:30px
}
.cat {
  background:#fff;
  border:1px solid var(--border);
  padding:24px 20px;
  min-height:190px;
  transition:.2s
}
.cat:hover {
  border-color:#b8c9e1;
  box-shadow:0 12px 28px rgba(23,46,92,.07);
  transform:translateY(-3px)
}
.cat-icon {
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  background:var(--light);
  color:var(--blue);
  font-size:20px;
  margin-bottom:18px
}
.cat h3 {
  font-size:17px;
  font-weight:800;
  margin-bottom:9px
}
.cat p {
  font-size:13px;
  line-height:2;
  color:var(--muted);
  margin:0
}
.network {
  position:relative;
  overflow:hidden;
  background:var(--navy);
  color:#fff;
  padding:74px 0
}
.network:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 40%,rgba(50,93,156,.55),transparent 34%)
}
.network .container {
  position:relative
}
.network .kicker {
  color:#b9c9e4
}
.network .section-title {
  color:#fff
}
.network .about-text {
  color:#dbe5f4
}
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:30px
}
.step {
  border:1px solid rgba(255,255,255,.18);
  padding:22px;
  background:rgba(255,255,255,.04)
}
.step .num {
  font-size:12px;
  color:#b9c9e4;
  margin-bottom:12px
}
.step h3 {
  font-size:16px;
  color:#fff;
  font-weight:800
}
.step p {
  font-size:12px;
  line-height:1.9;
  color:#cfdaea;
  margin:0
}
.cta {
  padding:64px 0;
  background:#edf2fa;
  border-top:1px solid #dfe7f1
}
.cta-box {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  background:#fff;
  border:1px solid var(--border);
  padding:32px 36px
}
.cta-box h2 {
  font-size:25px;
  font-weight:900;
  margin-bottom:8px
}
.cta-box p {
  margin:0;
  color:var(--muted);
  line-height:2
}
@media(max-width:991px) {
  .cat-grid,.steps {
    grid-template-columns:repeat(2,1fr)
  }
  .hero-img {
    margin-top:10px
  }
}
@media(max-width:767px) {
  .about-hero {
    padding:34px 0
  }
  .about-section {
    padding:55px 0
  }
  .img-grid {
    grid-template-columns:1fr
  }
  .side {
    grid-template-columns:1fr 1fr;
    grid-template-rows:none
  }
  .points,.cat-grid,.steps {
    grid-template-columns:1fr
  }
  .cta-box {
    flex-direction:column;
    align-items:flex-start;
    padding:26px 22px
  }
}

/* Show the whole product photograph without cropping its packages. */