.about-hero{
  /* same gradient as Home for consistency */
  background: linear-gradient(135deg, #9DD1D1, #5D9698);
  padding: 56px 0 84px;
  border-top: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(0,0,0,.05);
  min-height: 100svh;
}

.about-hero .hero-grid{
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

/* Type scale – a hair larger than Home */
.about-hero .hero-copy h1{
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.15;
  color:#0f2e2e;
  margin: 12px 0 16px;
}

.about-hero .hero-copy p{
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color:#123;
  margin: 10px 0;
  max-width: 62ch;
}
.about-hero .muted{ opacity:.9; }

/* Visual card (optional image) */
.media-card{
  display:block;
  width: clamp(280px, 42vw, 420px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
}
.media-card img{
  display:block;
  width:100%;
  height:auto;
}

/* Minimal safeguards for smaller widths (desktop-focused page, but won’t break) */
@media (max-width: 1100px){
  .about-hero .hero-grid{ gap: 40px; }
  .media-card{ width: clamp(260px, 50vw, 380px); }
}

@media (max-width: 920px){
  .about-hero{ padding: 32px 0 64px; }
  .about-hero .hero-grid{ grid-template-columns: 1fr; gap: 20px; }
  .hero-visual{ order: -1; justify-content: center; }
}