.about-page { overflow: clip; }

.about-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 12vw, 170px) 0 clamp(80px, 10vw, 135px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.about-hero::before,
.about-hero::after {
  position: absolute;
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.about-hero::before {
  top: -180px;
  right: -120px;
  width: 520px;
  height: 520px;
  border-radius: 43% 57% 60% 40% / 48% 43% 57% 52%;
  background: color-mix(in srgb, var(--green-soft) 32%, transparent);
}

.about-hero::after {
  top: -90px;
  right: -30px;
  width: 300px;
  height: 300px;
  border-radius: 58% 42% 46% 54% / 43% 57% 43% 57%;
  background: color-mix(in srgb, var(--clay-soft) 24%, transparent);
}

.about-hero-inner { position: relative; z-index: 1; }

.about-hero-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 42px;
}

.about-hero-line { width: 60px; height: 2px; background: var(--clay); }
.about-hero-content { max-width: 1000px; }
.about-kicker { margin: 0 0 20px; color: var(--clay); }

.about-hero h1 {
  max-width: 920px;
  margin: 0;
  color: var(--ink);
  font: clamp(3.15rem, 6.8vw, 6.8rem)/1.04 var(--display);
  letter-spacing: -.035em;
}

.about-hero h1 em { display: block; color: var(--green); font-style: normal; }

.about-intro {
  max-width: 610px;
  margin: 42px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.45vw, 1.2rem);
  line-height: 1.75;
}

.about-introduction {
  padding: clamp(80px, 10vw, 130px) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.about-introduction-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 780px);
  justify-content: center;
  gap: clamp(40px, 8vw, 110px);
}

.about-section-label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 8px;
  color: var(--muted);
}

.about-section-label span:first-child { color: var(--clay); font-size: .8rem; }

.about-lead {
  margin: 0;
  color: var(--ink);
  font: clamp(1.45rem, 2.2vw, 2rem)/1.42 var(--display);
}

.about-highlight {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 24px;
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.about-highlight-number { color: var(--clay); }
.about-highlight p { max-width: 620px; margin: 0; color: var(--muted); }

.philosophy-mini-section { padding: 110px 0; background: var(--surface); }

.philosophy-mini-grid {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
  gap: 70px;
}

.philosophy-mini-intro { align-self: start; }
.philosophy-mini-intro h2 {
  margin: 10px 0 0;
  color: var(--ink);
  font: clamp(2.7rem, 4.5vw, 4.6rem)/1.04 var(--display);
}

.philosophy-mini-intro h2 em { color: var(--clay); font-style: italic; }
.philosophy-mini-copy { max-width: 700px; }
.philosophy-mini-copy .about-lead { font: 1.34rem/1.55 var(--body); }
.philosophy-mini-copy > p:not(.about-lead) { color: var(--text); }

.philosophy-quote {
  margin: 38px 0;
  padding: 27px 30px;
  border-left: 3px solid var(--clay);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-alt);
  color: var(--ink);
  font: 1.65rem/1.3 var(--display);
}

.philosophy-feature { padding: 0 0 105px; background: var(--surface); }
.about-philosophy-image { background: var(--surface); }

.philosophy-image-block {
  margin: 0;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.philosophy-image-block img {
  width: 100%;
  max-height: 650px;
  object-fit: cover;
}

.philosophy-image-block figcaption {
  padding: 17px 20px;
  color: var(--muted);
  font-size: .75rem;
}

.board-section { padding: clamp(90px, 11vw, 145px) 0; }

.section-heading-modern {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 50px;
  align-items: end;
  margin-bottom: 60px;
}

.section-heading-modern h2 {
  margin: 12px 0 0;
  color: var(--ink);
  font: clamp(2.7rem, 4.5vw, 4.6rem)/1.04 var(--display);
  letter-spacing: -.025em;
}

.section-heading-modern > p { margin: 0; color: var(--muted); }

.board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.person-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease-slow), box-shadow var(--ease-slow), border-color var(--ease);
}

.person-card:hover {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.person-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, .8fr) 1.2fr;
}

.person-image {
  min-height: 420px;
  overflow: hidden;
  background: var(--surface-alt);
}

.person-image-small { min-height: 280px; }
.person-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease-slow), filter var(--ease-slow); }
.person-card:hover .person-image img { filter: saturate(.96); transform: scale(1.025); }

.person-content { padding: clamp(28px, 4vw, 50px); }
.person-number { margin-bottom: 28px; color: var(--clay); }

.person-heading h3 {
  margin: 0;
  color: var(--ink);
  font: clamp(1.8rem, 2.7vw, 2.7rem)/1.08 var(--display);
  letter-spacing: -.02em;
}

.person-heading span {
  display: block;
  margin-top: 10px;
  color: var(--green);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.person-description { margin-top: 32px; }
.person-description p { margin: 0 0 18px; color: var(--text); }
.person-description p:last-child { margin-bottom: 0; }

.about-work {
  padding: clamp(90px, 11vw, 145px) 0;
  background: var(--surface-alt);
  border-block: 1px solid var(--line);
}

.about-work-grid {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) 1.2fr;
  gap: clamp(50px, 9vw, 130px);
}

.about-work-intro { position: sticky; top: 120px; align-self: start; }
.about-work-intro h2 {
  max-width: 500px;
  margin: 18px 0 0;
  color: var(--ink);
  font: clamp(2.7rem, 4.5vw, 4.6rem)/1.04 var(--display);
  letter-spacing: -.025em;
}

.about-work-intro h2 em { display: block; color: var(--green); font-style: normal; }
.about-work-copy { max-width: 680px; }
.about-work-copy .about-lead { margin-bottom: 35px; }
.about-work-copy p:not(.about-lead) { margin: 0 0 24px; color: var(--text); }

.about-registration { padding: 70px 0 100px; }

.registration-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 700px);
  gap: 30px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 55px);
  background: var(--forest-panel);
  color: var(--on-forest);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.registration-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
}

.registration-icon span { color: var(--contrast-accent); font-size: 1.6rem; line-height: 1; }
.registration-card .eyebrow { color: color-mix(in srgb, var(--on-forest) 78%, transparent); }
.registration-card h2 { margin: 13px 0 14px; color: var(--on-forest); font: clamp(1.8rem, 3vw, 2.8rem)/1 var(--display); }
.registration-card p { max-width: 650px; margin: 0; color: color-mix(in srgb, var(--on-forest) 86%, transparent); }
.registration-card strong { color: var(--on-forest); }

@media (max-width: 900px) {
  .about-introduction-grid { grid-template-columns: 1fr; gap: 25px; }
  .section-heading-modern { grid-template-columns: 1fr; gap: 20px; }
  .person-card-featured { grid-template-columns: 1fr; }
  .person-image { min-height: 420px; }
  .board-grid { grid-template-columns: 1fr; }
  .about-work-grid { grid-template-columns: 1fr; gap: 45px; }
  .about-work-intro { position: static; }
  .philosophy-mini-grid { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 650px) {
  .about-hero { padding: 70px 0 75px; }
  .about-hero h1 { font-size: clamp(2.75rem, 12.5vw, 4.1rem); }
  .about-intro { margin-top: 30px; }
  .about-introduction,
  .board-section,
  .about-work,
  .philosophy-mini-section { padding: 75px 0; }
  .about-highlight { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; }
  .section-heading-modern h2,
  .about-work-intro h2,
  .philosophy-mini-intro h2 { font-size: clamp(2.5rem, 11vw, 3.3rem); line-height: 1.05; }
  .person-image,
  .person-image-small { min-height: 320px; }
  .person-content { padding: 28px 24px; }
  .registration-card { grid-template-columns: 1fr; gap: 22px; padding: 30px 24px; }
  .philosophy-feature { padding-bottom: 75px; }
  .philosophy-quote { padding: 22px 23px; font-size: 1.4rem; }
}