.about-page {
  --about-accent:#149b98;
  --about-accent-soft:#edf9f8;
  --about-rose:#f4a7b9;
  --about-line:#e9eeee;
  --about-panel:#f8faf9;
}

.about-hero {
  position:relative;
  min-height:62vh;
  overflow:hidden;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.72) 9%,
      rgba(255,255,255,0) 25%,
      rgba(255,255,255,0) 72%,
      rgba(255,255,255,.78) 91%,
      rgba(255,255,255,1) 100%),
    linear-gradient(to right,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.94) 39%,
      rgba(255,255,255,.48) 59%,
      rgba(255,255,255,0) 76%),
    var(--hero-url) right center / cover no-repeat;
}
.about-hero::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.72) 9%,
      rgba(255,255,255,0) 25%,
      rgba(255,255,255,0) 72%,
      rgba(255,255,255,.78) 91%,
      rgba(255,255,255,1) 100%),
    linear-gradient(to right,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.94) 39%,
      rgba(255,255,255,.48) 59%,
      rgba(255,255,255,0) 76%),
    var(--next-hero-url,var(--hero-url)) right center / cover no-repeat;
  opacity:0;
  transition:opacity 3s ease-in-out;
}
.about-hero.is-changing::before { opacity:1; }
.about-hero .in {
  position:relative;
  z-index:1;
  align-items:center;
}
.about-lead {
  max-width:62ch;
  font-size:14px;
  line-height:2;
}
.about-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  color:var(--about-accent);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
}
.about-eyebrow::before {
  content:"";
  width:26px;
  height:1px;
  background:currentColor;
}

.about-section { padding:64px 0; }
.about-section.alt { background:#fff; }
.about-section + .about-section { border-top:1px solid var(--about-line); }
.about-heading {
  display:grid;
  grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);
  gap:clamp(28px,6vw,84px);
  margin-bottom:34px;
}
.about-heading h2 {
  margin:0;
  font-size:clamp(20px,2.2vw,29px);
  line-height:1.45;
  letter-spacing:.06em;
}
.about-heading p {
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:2;
}

.about-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.about-card {
  min-height:180px;
  padding:25px;
  border:1px solid var(--about-line);
  border-radius:18px;
  background:#fff;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
a.about-card:hover {
  transform:translateY(-3px);
  border-color:#cbdcda;
  box-shadow:0 14px 34px rgba(28,72,69,.08);
}
.about-card .number {
  display:block;
  margin-bottom:30px;
  color:var(--about-accent);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
.about-card h3 { margin:0 0 8px; font-size:15px; }
.about-card p { margin:0; color:var(--muted); line-height:1.85; }
.about-card .more {
  display:inline-block;
  margin-top:18px;
  color:var(--about-accent);
  font-weight:750;
}

.about-facts {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--about-line);
  border-bottom:1px solid var(--about-line);
}
.about-fact { padding:26px 18px; }
.about-fact + .about-fact { border-left:1px solid var(--about-line); }
.about-fact strong {
  display:block;
  margin-bottom:4px;
  font-size:clamp(20px,2.4vw,30px);
  line-height:1.3;
  letter-spacing:.03em;
}
.about-fact span { color:var(--muted); }

.value-list { display:grid; gap:10px; }
.value-row {
  display:grid;
  grid-template-columns:70px minmax(150px,.7fr) minmax(0,1.3fr);
  gap:20px;
  align-items:baseline;
  padding:22px 0;
  border-bottom:1px solid var(--about-line);
}
.value-letter {
  color:var(--about-accent);
  font-size:31px;
  font-weight:850;
}
.value-row h3 { margin:0; font-size:15px; }
.value-row p { margin:0; color:var(--muted); }

.timeline { position:relative; margin-left:9px; }
.timeline::before {
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  left:5px;
  width:1px;
  background:#dce6e5;
}
.timeline-item {
  position:relative;
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:26px;
  padding:0 0 30px 31px;
}
.timeline-item::before {
  content:"";
  position:absolute;
  top:7px;
  left:0;
  width:11px;
  height:11px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--about-accent);
  box-shadow:0 0 0 1px var(--about-accent);
}
.timeline-item time { font-size:16px; font-weight:800; }
.timeline-item h3 { margin:0 0 5px; font-size:14px; }
.timeline-item p { margin:0; color:var(--muted); }

.process {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--about-line);
  border-radius:18px;
  background:var(--about-line);
}
.process-step { min-height:170px; padding:24px; background:#fff; }
.process-step b { color:var(--about-accent); font-size:11px; letter-spacing:.12em; }
.process-step h3 { margin:20px 0 7px; font-size:14px; }
.process-step p { margin:0; color:var(--muted); }

.commitment-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.commitment {
  padding:28px;
  border-left:3px solid var(--about-accent);
  background:#fff;
  box-shadow:0 8px 28px rgba(28,72,69,.05);
}
.commitment h3 { margin:0 0 8px; font-size:15px; }
.commitment p { margin:0; color:var(--muted); }

.about-cta {
  padding:58px clamp(25px,6vw,74px);
  color:var(--ink);
  border:1px solid var(--about-line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 48px rgba(28,72,69,.06);
}
.about-cta h2 { margin:0; font-size:clamp(21px,2.5vw,31px); }
.about-cta p { max-width:62ch; margin:12px 0 22px; color:var(--muted); }
.about-cta .actions { display:flex; gap:10px; flex-wrap:wrap; }
.about-cta .btn.primary { background:#111; color:#fff; }
.about-cta .btn.ghost { color:var(--ink); background:#fff; border-color:var(--about-line); }

@media (max-width:760px) {
  .about-hero { min-height:55vh; }
  .about-section { padding:46px 0; }
  .about-heading { grid-template-columns:1fr; gap:14px; }
  .about-cards,.process { grid-template-columns:1fr; }
  .about-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about-fact:nth-child(3) { border-left:0; border-top:1px solid var(--about-line); }
  .about-fact:nth-child(4) { border-top:1px solid var(--about-line); }
  .value-row { grid-template-columns:46px minmax(0,1fr); gap:12px; }
  .value-row p { grid-column:2; }
  .timeline-item { grid-template-columns:65px minmax(0,1fr); gap:14px; padding-left:25px; }
  .commitment-grid { grid-template-columns:1fr; }
}

@media (max-width:560px) {
  .about-card { min-height:0; }
  .about-facts { grid-template-columns:1fr; }
  .about-fact + .about-fact { border-top:1px solid var(--about-line); border-left:0; }
  .about-cta { border-radius:18px; }
}

@media (prefers-reduced-motion:reduce) {
  .about-hero::before { transition:none; }
}
