.about-hero {
  padding: 150px 0 92px;
  background:
    radial-gradient(circle at 75% 25%, rgba(23, 82, 63, .42), transparent 50%),
    radial-gradient(circle at 15% 75%, rgba(204, 163, 84, .1), transparent 45%),
    linear-gradient(160deg, var(--green-deep) 0%, #051F17 100%);
  color: var(--cream);
}
.about-hero .section-eyebrow { color: var(--gold-light); }
.about-hero h1 { max-width: 850px; margin: 0 auto 20px; font-family: var(--serif); font-size: clamp(42px, 6.5vw, 70px); }
.about-hero h1 span { color: var(--gold-light); }
.about-hero p { max-width: 680px; margin: 0 auto; color: rgba(250,249,246,.76); font-size: 17px; }

.about-title { font-family: var(--serif); color: var(--green); font-size: clamp(32px, 4vw, 46px); margin-bottom: 20px; }
.about-copy { color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; }
.name-section, .story-section, .purpose-section, .today-section, .values-section { padding: 84px 0; }
.name-section, .purpose-section, .values-section { background: var(--cream); }
.story-section, .today-section { background: var(--white); }

.name-intro { max-width: 780px; margin: 0 auto 34px; }
.name-intro .about-title { max-width: 650px; margin-left: auto; margin-right: auto; }
.name-intro .about-copy { max-width: 720px; margin-left: auto; margin-right: auto; }
.name-meaning-grid { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.meaning-card { padding: 28px 24px; border: 1px solid rgba(17,71,54,.12); border-radius: var(--radius-lg); background: var(--white); display: flex; align-items: center; gap: 18px; }
.meaning-card > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--gold-light); font-family: var(--serif); font-size: 27px; font-weight: 700; }
.meaning-card h3 { color: var(--green); font-size: 19px; margin-bottom: 5px; }
.meaning-card p { color: var(--ink-muted); font-size: 13px; margin: 0; }

.story-image-wrap { width: min(100%, 550px); aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-md); }
.story-image-wrap img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.motive-box { margin-top: 24px; padding: 17px 18px; display: flex; align-items: center; gap: 13px; border-radius: var(--radius-md); background: rgba(204,163,84,.12); border: 1px solid rgba(204,163,84,.32); }
.motive-box i { color: var(--gold-deep); font-size: 20px; }
.motive-box p { display: grid; margin: 0; color: var(--green); font-family: var(--serif); font-size: 18px; }
.motive-box strong { font-family: var(--sans); color: var(--ink-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }

.purpose-heading { max-width: 760px; margin: 0 auto 42px; }
.purpose-heading > p { color: var(--ink-muted); font-size: 15px; }
.purpose-card { height: 100%; padding: 28px 24px; border-radius: var(--radius-lg); border: 1px solid rgba(17,71,54,.1); background: var(--white); }
.purpose-card i { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 12px; background: rgba(204,163,84,.13); color: var(--gold-deep); font-size: 20px; }
.purpose-card h3 { color: var(--green); font-size: 18px; margin-bottom: 9px; }
.purpose-card p { color: var(--ink-muted); font-size: 13.5px; margin: 0; }

.direction-card { height: 100%; padding: 34px 30px; border-radius: var(--radius-lg); }
.direction-card > span { display: inline-block; margin-bottom: 16px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.direction-card h2 { font-family: var(--serif); font-size: 32px; margin-bottom: 16px; }
.direction-card p { font-size: 14px; line-height: 1.7; }
.direction-card.current { background: radial-gradient(circle at 80% 20%, rgba(23,82,63,.35), transparent 45%), linear-gradient(160deg, var(--green-deep) 0%, #051F17 100%); color: var(--cream); }
.direction-card.current > span { color: var(--gold-light); }
.direction-card.current h2 { color: var(--gold-light); }
.direction-card.current p { color: rgba(250,249,246,.75); }
.direction-card.future { background: var(--cream); border: 1px solid rgba(17,71,54,.1); }
.direction-card.future > span { color: var(--gold-deep); }
.direction-card.future h2 { color: var(--green); }
.direction-card.future p { color: var(--ink-muted); }

.values-heading { margin-bottom: 38px; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.values-grid article { padding: 24px 18px; text-align: center; border-radius: var(--radius-md); background: var(--white); border: 1px solid rgba(17,71,54,.1); }
.values-grid i { color: var(--gold-deep); font-size: 23px; }
.values-grid h3 { color: var(--green); font-size: 16px; margin: 12px 0 7px; }
.values-grid p { color: var(--ink-muted); font-size: 12.5px; margin: 0; }

.about-cta { padding: 84px 0; background: radial-gradient(circle at 80% 20%, rgba(23,82,63,.35), transparent 45%), linear-gradient(160deg, var(--green-deep) 0%, #051F17 100%); color: var(--cream); }
.about-cta .section-eyebrow { color: var(--gold-light); }
.about-cta h2 { max-width: 820px; margin: 0 auto 16px; font-family: var(--serif); color: var(--cream); font-size: clamp(32px, 4.5vw, 50px); }
.about-cta p { max-width: 640px; margin: 0 auto 28px; color: rgba(250,249,246,.72); }
.about-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.about-outline-btn { border: 1px solid rgba(247,216,141,.55); color: var(--gold-light) !important; background: transparent; }
.about-outline-btn:hover { background: rgba(247,216,141,.1); }

.about-hero .section-eyebrow, .about-hero h1, .about-hero p { opacity: 0; animation: about-in 1.05s var(--ease) forwards; }
.about-hero .section-eyebrow { animation-delay: .12s; }
.about-hero h1 { animation-delay: .28s; }
.about-hero p { animation-delay: .44s; }
@keyframes about-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 991px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .about-hero { padding: 124px 0 68px; }
  .about-hero p { padding: 0 8px; font-size: 14px; }
  .name-section, .story-section, .purpose-section, .today-section, .values-section { padding: 62px 0; }
  .name-meaning-grid { grid-template-columns: 1fr; }
  .name-intro { margin-bottom: 28px; }
  .meaning-card, .purpose-card, .direction-card { padding: 24px 20px; }
  .story-image-wrap { width: min(90.2vw, 341px); border-radius: 18px; }
  .story-section .col-lg-6:last-child { text-align: center; }
  .story-section .about-copy { margin-left: auto; margin-right: auto; }
  .motive-box { width: 100%; max-width: 430px; padding: 15px 14px; gap: 9px; margin-left: auto; margin-right: auto; text-align: left; }
  .motive-box i { font-size: 17px; }
  .motive-box p { white-space: nowrap; font-size: clamp(12px, 3.2vw, 15px); }
  .values-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .values-grid article { padding: 20px 12px; }
  .about-cta { padding: 66px 0; }
}
@media (prefers-reduced-motion: reduce) { .about-hero .section-eyebrow, .about-hero h1, .about-hero p { opacity: 1; animation: none; transform: none; } }

/* Final mobile containment: keep Bootstrap g-5 vertical spacing without horizontal bleed. */
@media (max-width: 767.98px){
  .story-section .row.g-5{ --bs-gutter-x: 1.5rem; }
}