/* The founder's voice leads; the layout gives each thought room to land. */
.about-hero { padding-block: 80px 54px; text-align: center; }
.about-label { font-size: 16px; font-weight: 500; color: var(--gold); }
.about-hero h1 { margin-block: 24px 30px; font-size: clamp(52px, 6vw, 76px); line-height: 1.06; }
.about-hero h1 em { color: var(--green); font-style: normal; }
.about-intro { max-width: 690px; margin-inline: auto; font-size: 18px; line-height: 1.8; color: var(--muted); text-wrap: pretty; }
.about-toc { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 36px; margin-top: 38px; }
.about-toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; border-bottom: 1px solid var(--line); }
.about-toc a:hover { color: var(--gold); border-color: var(--gold); }
.founder-story { max-width: 760px; padding-block: 68px 88px; margin-inline: auto; }
.story-heading { text-align: center; margin-bottom: 46px; }
.founder-portrait { width: 220px; height: 220px; margin: 0 auto 28px; border-radius: 24px; object-fit: cover; }
.story-heading h2 { margin-top: 16px; font-size: clamp(34px, 4vw, 46px); }
.story-copy { max-width: 680px; margin-inline: auto; font-size: 18px; line-height: 1.9; color: var(--muted); }
.story-copy p + p { margin-top: 24px; }
.story-copy strong { font-weight: 600; color: var(--ink); }
.story-copy .story-turn { margin-block: 34px; font-size: 25px; font-weight: 500; line-height: 1.5; letter-spacing: -.45px; color: var(--ink); text-wrap: pretty; }
.story-signature { margin-top: 36px; color: var(--ink); }
.story-signature strong { display: block; font-family: "Iowan Old Style", Baskerville, Georgia, serif; font-size: 33px; font-style: italic; font-weight: 400; line-height: 1.3; }
.story-signature span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.vision-section { padding: 70px 48px; border: 1px solid #dce4d3; border-radius: 32px; background: #edf1e6; text-align: center; }
.vision-section h2 { font-size: 22px; letter-spacing: -.4px; }
.vision-section .brand-promise { margin-top: 26px; max-width: 850px; font-size: clamp(29px, 3.5vw, 40px); }
.vision-copy { max-width: 640px; margin: 28px auto 0; font-size: 17px; line-height: 1.85; color: var(--muted); text-wrap: pretty; }
.principles-section { padding-block: 96px; }
.principles-section .learning-steps { max-width: 1120px; gap: 42px; }
.principles-section .learning-steps h3 { font-size: 24px; }
.principles-section .learning-steps p { max-width: none; }
.about-invitation { display: flex; align-items: center; justify-content: center; gap: 52px; padding-block: 56px 74px; border-top: 1px solid var(--line); }
.about-invitation img { flex: 0 0 auto; width: 160px; height: 160px; }
.about-invitation h2 { font-size: 34px; letter-spacing: -1.1px; }
.about-invitation p { max-width: 520px; margin-top: 18px; font-size: 16px; color: var(--muted); }
.about-invitation .button { margin-top: 25px; }
@media (max-width: 820px) {
  .about-hero { padding-top: 58px; }
  .founder-story { padding-inline: 24px; }
  .principles-section .learning-steps { gap: 25px; }
  .about-invitation { gap: 30px; }
}
@media (max-width: 600px) {
  .about-hero { padding-block: 40px 28px; }
  .about-hero h1 { font-size: 48px; letter-spacing: -2px; }
  .about-intro { font-size: 16px; }
  .about-toc { gap: 6px 24px; margin-top: 26px; }
  .about-toc a { font-size: 14px; }
  .founder-story { padding: 44px 0 56px; }
  .story-heading { margin-bottom: 30px; }
  .founder-portrait { width: 176px; height: 176px; margin-bottom: 24px; border-radius: 20px; }
  .story-copy { font-size: 17px; line-height: 1.85; }
  .story-copy .story-turn { font-size: 23px; margin-block: 28px; }
  .vision-section { padding: 42px 24px; border-radius: 25px; }
  .vision-section h2 { font-size: 20px; }
  .vision-section .brand-promise { font-size: 29px; margin-top: 22px; }
  .vision-copy { font-size: 16px; margin-top: 24px; }
  .principles-section { padding-block: 58px; }
  .about-invitation { flex-direction: column; gap: 18px; padding-block: 36px 56px; text-align: center; }
  .about-invitation img { width: 128px; height: 128px; }
  .about-invitation h2 { font-size: 32px; }
}
@media (max-width: 359px) {
  .about-hero h1 { font-size: 42px; }
  .about-toc { gap: 4px 17px; }
  .vision-section { padding-inline: 19px; }
}