.about-hero {
  min-height: 720px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--paper);
}

.about-hero-media,
.about-story-media {
  position: relative;
  overflow: hidden;
}

.about-hero-media::after,
.about-story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(24,58,39,.22), transparent 48%);
  pointer-events: none;
}

.about-hero-media img,
.about-story-media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  transform: translateY(-5%);
}

.about-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px clamp(42px, 7vw, 120px);
}

.about-hero-copy h1,
.belief-section h2,
.purpose-card h2,
.values-heading h2,
.about-story-copy h2,
.timeline-layout h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .95;
}

.about-hero-copy h1 { margin: 20px 0 28px; font-size: clamp(60px, 6.5vw, 104px); }
.about-hero-copy h1 em,
.belief-section h2 em,
.values-heading h2 em,
.about-story-copy h2 em,
.timeline-layout h2 em { color: #747c50; font-style: italic; font-weight: 500; }
.about-hero-copy > p:not(.eyebrow) { max-width: 620px; margin-bottom: 34px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.about-hero-copy .button { align-self: flex-start; }

.belief-section { padding: 120px 0; background: #eee8dc; }
.belief-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(60px, 10vw, 150px); align-items: end; }
.belief-section h2 { max-width: 900px; font-size: clamp(54px, 6.3vw, 94px); }
.belief-grid > p { padding-bottom: 8px; color: var(--muted); font-size: 18px; line-height: 1.75; }

.purpose-section { padding: 20px 0; background: #eee8dc; }
.purpose-grid { display: grid; grid-template-columns: 1fr 1fr; }
.purpose-card { position: relative; min-height: 530px; padding: clamp(42px, 6vw, 82px); overflow: hidden; }
.purpose-card > span { position: absolute; top: 34px; right: 38px; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.purpose-card > svg { width: 46px; height: 46px; margin-bottom: 80px; stroke-width: 1.25; }
.purpose-card .eyebrow { margin-bottom: 18px; }
.purpose-card h2 { max-width: 650px; margin-bottom: 25px; font-size: clamp(43px, 4vw, 67px); }
.purpose-card > p:last-child { max-width: 560px; font-size: 15px; line-height: 1.75; }
.mission-card { color: white; background: #234832; }
.mission-card .eyebrow, .mission-card > svg { color: #d0d3a1; }
.mission-card > p:last-child { color: rgba(255,255,255,.68); }
.vision-card { color: var(--ink); background: #bec08b; }
.vision-card .eyebrow { color: var(--ink); }
.vision-card > p:last-child { color: rgba(24,58,39,.72); }

.values-section { padding: 125px 0; color: white; background: #173525; }
.values-heading { max-width: 900px; margin-bottom: 55px; }
.values-heading .eyebrow { color: #c8ca98; }
.values-heading h2 { font-size: clamp(54px, 6.3vw, 94px); }
.values-heading h2 em { color: #d0d3a1; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.17); border-left: 1px solid rgba(255,255,255,.17); }
.value-card { min-height: 330px; display: flex; flex-direction: column; padding: 28px; border-right: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); transition: background .35s ease, transform .35s var(--ease); }
.value-card:hover { background: rgba(255,255,255,.06); transform: translateY(-5px); }
.value-card > svg { width: 36px; height: 36px; color: #c8ca98; stroke-width: 1.35; }
.value-card > span { margin-left: auto; color: rgba(255,255,255,.38); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.value-card h3 { margin-top: auto; margin-bottom: 12px; font-family: var(--font-display); font-size: 34px; }
.value-card p { color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.65; }

.about-story { min-height: 720px; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
.about-story-copy { display: flex; flex-direction: column; justify-content: center; padding: 90px clamp(42px, 7vw, 120px); }
.about-story-copy h2 { margin: 18px 0 28px; font-size: clamp(53px, 5.5vw, 86px); }
.about-story-copy > p:not(.eyebrow) { max-width: 590px; margin-bottom: 33px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.about-story-copy .text-link { align-self: flex-start; }

.timeline-section { padding: 125px 0; background: #e9e6da; }
.timeline-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(60px, 9vw, 135px); }
.timeline-layout h2 { margin-top: 18px; font-size: clamp(52px, 5.5vw, 82px); }
.timeline { border-top: 1px solid var(--line); }
.timeline article { display: grid; grid-template-columns: 145px 1fr; gap: 30px; padding: 31px 0; border-bottom: 1px solid var(--line); }
.timeline strong { color: #717a4e; font-family: var(--font-display); font-size: 30px; }
.timeline h3 { margin-bottom: 8px; font-family: var(--font-display); font-size: 28px; }
.timeline p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.about-cta { background: #6b734e; }

@media (max-width: 1050px) {
  .about-hero { grid-template-columns: 1fr 44%; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .about-hero, .about-story { grid-template-columns: 1fr; }
  .about-hero-media { min-height: 510px; }
  .about-hero-copy { padding: 75px 24px 85px; }
  .belief-section { padding: 90px 0; }
  .belief-grid { grid-template-columns: 1fr; gap: 30px; }
  .purpose-grid { grid-template-columns: 1fr; }
  .purpose-card { min-height: 450px; }
  .purpose-card > svg { margin-bottom: 60px; }
  .about-story-media { min-height: 490px; }
  .about-story-copy { padding: 78px 24px 85px; }
}

@media (max-width: 560px) {
  .about-hero-media { min-height: 380px; }
  .about-hero-copy h1 { font-size: clamp(51px, 15vw, 72px); }
  .belief-section h2, .values-heading h2, .timeline-layout h2 { font-size: clamp(47px, 14vw, 66px); }
  .values-section, .timeline-section { padding: 86px 0; }
  .values-grid { grid-template-columns: 1fr; }
  .value-card { min-height: 260px; }
  .about-story-media { min-height: 360px; }
  .about-story-copy h2 { font-size: clamp(48px, 14vw, 68px); }
  .timeline article { grid-template-columns: 1fr; gap: 10px; }
}