/* Editorial About page using the existing site typography, colors, and original emblem. */
.about-page header nav a[aria-current],.about-page footer a[aria-current] {text-decoration:underline;text-underline-offset:5px}
.about-page main {max-width:1280px;margin:0 auto}
.about-hero {padding:80px 44px 74px;border-bottom:1px solid var(--line)}
.about-hero h1 {font-size:clamp(44px,5.8vw,76px);line-height:1.07;letter-spacing:-3.5px;max-width:1000px;margin:25px 0;text-align:left}
.about-deck {max-width:660px;font-size:21px;line-height:1.65;color:var(--muted);margin-bottom:28px}
.about-story,.leader-profile {display:grid;grid-template-columns:1fr 1.7fr;gap:90px;padding:72px 44px}
.about-story aside h2 {font-size:34px;line-height:1.2;letter-spacing:-1.1px;margin:20px 0}
.about-story aside p,.leader-identity p {font-size:15px;line-height:1.7;color:var(--muted)}
.about-prose {max-width:70ch}
.about-prose p {font-size:18px;line-height:1.85;color:var(--muted);margin:0 0 23px}
.about-prose p:last-child {margin-bottom:0}
.about-story .about-prose p:first-child {font-size:23px;line-height:1.65;color:var(--ink)}
.leadership-section {border-top:1px solid var(--line)}
.about-section-heading {padding:65px 44px 10px}
.about-section-heading h2 {font-size:48px;line-height:1.15;max-width:750px;margin:20px 0}
.leader-profile + .leader-profile {border-top:1px solid var(--line)}
.leader-initials {display:grid;place-items:center;width:78px;height:78px;border-radius:20px;background:var(--accent,#d6f270);color:#26331e;font-size:25px;font-weight:600;letter-spacing:-1px;margin-bottom:25px}
.leader-identity h3 {font-size:34px;letter-spacing:-1px;line-height:1.2;margin:0 0 14px}
.about-meaning {border-top:1px solid var(--line);padding:72px 44px 96px}
.about-meaning h2 {font-size:48px;line-height:1.15;margin:20px 0 30px}
.about-meaning .about-prose {max-width:850px;margin-bottom:34px}
@media(max-width:1000px){.about-story,.leader-profile{gap:45px;grid-template-columns:1fr 1.5fr}}
@media(max-width:700px){
.about-hero{padding:42px 22px 45px}
.about-hero h1{font-size:43px;letter-spacing:-2px}
.about-deck{font-size:18px}
.about-story,.leader-profile{grid-template-columns:1fr;gap:28px;padding:44px 22px}
.about-story aside h2{font-size:30px}
.about-prose p{font-size:17px;line-height:1.8}
.about-story .about-prose p:first-child{font-size:21px}
.about-section-heading{padding:44px 22px 0}
.about-section-heading h2,.about-meaning h2{font-size:37px;letter-spacing:-1.5px}
.leader-identity h3{font-size:31px}
.about-meaning{padding:44px 22px 60px}
.about-meaning .button{font-size:14px;gap:16px}
}

/* Generated editorial artwork, with a clear reading area over the left side. */
.about-hero {
  background:linear-gradient(90deg,rgba(247,248,242,.96) 0%,rgba(247,248,242,.88) 34%,rgba(247,248,242,.20) 64%,rgba(247,248,242,0) 82%),url('/images/about-hero.jpg') center/cover no-repeat;
  min-height:560px;
  color:#20251e;
}
.about-hero h1 {max-width:720px;font-size:clamp(44px,5vw,66px)}
.about-hero .about-deck {max-width:560px;color:#4b5146}
.about-hero .label,.about-hero .text-link {color:#20251e}
html[data-appearance=dark] .about-hero {background-image:linear-gradient(90deg,rgba(21,25,17,.98) 0%,rgba(21,25,17,.90) 36%,rgba(21,25,17,.45) 64%,rgba(21,25,17,.1) 100%),url('/images/about-hero.jpg');color:#f7f8f2}
html[data-appearance=dark] .about-hero .about-deck {color:#d3d8ca}
html[data-appearance=dark] .about-hero .label,html[data-appearance=dark] .about-hero .text-link {color:#f7f8f2}
@media(max-width:700px){
  .about-hero {min-height:0;padding-bottom:170px;background-position:65% center;background-image:linear-gradient(180deg,rgba(247,248,242,.96) 0%,rgba(247,248,242,.92) 55%,rgba(247,248,242,.15) 100%),url('/images/about-hero.jpg')}
  .about-hero h1 {font-size:43px}
  html[data-appearance=dark] .about-hero {background-image:linear-gradient(180deg,rgba(21,25,17,.98) 0%,rgba(21,25,17,.93) 55%,rgba(21,25,17,.2) 100%),url('/images/about-hero.jpg')}
}

/* Edge-to-edge hero with the navigation floating above the artwork. */
.about-page {position:relative}
.about-page main {max-width:none}
.about-page main > section:not(.about-hero) {max-width:1280px;margin-inline:auto}
.about-page > header {
  position:fixed;
  z-index:10;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 64px);
  max-width:1280px;
  height:84px;
  padding:0 32px;
  margin:0;
  border-radius:999px;
  background:var(--paper);
  border:0;
  box-shadow:0 6px 28px #20251e08;
}
.about-page .about-hero {
  min-height:700px;
  padding:190px max(44px,calc((100% - 1192px)/2)) 84px;
  border-bottom:0;
}
@media(max-width:1000px){
  .about-page > header {width:calc(100% - 40px);padding-inline:26px}
}
@media(max-width:700px){
  .about-page > header {top:14px;width:calc(100% - 24px);height:68px;padding-inline:20px;gap:10px}
  .about-page .about-hero {min-height:0;padding:128px 22px 150px}
}

.leader-portrait {display:block;width:100%;max-width:280px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:18px;margin-bottom:25px}
@media(max-width:700px){.leader-portrait{max-width:240px}}

/* A compact, persistent navigation after the visitor leaves the top. */
.about-page > header {transition:width 350ms ease,max-width 350ms ease,height 350ms ease,top 350ms ease,padding 350ms ease,box-shadow 350ms ease}
.about-page > header nav {display:flex;gap:24px}
.about-page > header nav a,.about-page > header .brand-name,.about-page > header .brand svg,.about-page > header .appearance-toggle svg {transition:all 250ms ease}
.about-page > header.is-scrolled {top:14px;width:calc(100% - 96px);max-width:960px;height:64px;padding-inline:24px;box-shadow:0 8px 30px #20251e12}
.about-page > header.is-scrolled .brand-name {font-size:18px}
.about-page > header.is-scrolled .brand svg {width:30px;height:30px}
.about-page > header.is-scrolled nav a {font-size:14px}
.about-page > header.is-scrolled .nav-cta {font-size:13px;padding:10px 15px;gap:18px}
.about-page > header.is-scrolled .appearance-toggle {width:34px;height:34px}
.about-page > header.is-scrolled .appearance-toggle svg {width:17px;height:17px}
@media(max-width:700px){
  .about-page > header .brand-name {display:none}
  .about-page > header nav {gap:16px;font-size:14px}
  .about-page > header .nav-cta {font-size:12px;padding:10px;gap:0}
  .about-page > header .nav-cta span {display:none}
  .about-page > header.is-scrolled {top:10px;width:calc(100% - 40px);height:58px;padding-inline:14px;gap:8px}
  .about-page > header.is-scrolled nav a {font-size:13px}
  .about-page > header.is-scrolled .nav-cta {font-size:11px;padding:8px;gap:0}
  .about-page > header.is-scrolled .brand svg {width:27px;height:27px}
  .about-page > header.is-scrolled .appearance-toggle {width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){
  .about-page > header,.about-page > header * {transition:none!important}
}