.about-section { position: relative; padding-top: 100px; background: radial-gradient(ellipse at 85% 35%, #68705230, transparent 55%), radial-gradient(ellipse at 8% 75%, #476b5940, transparent 55%), linear-gradient(135deg, #172d25 0%, #2e493b 50%, #1c3028 100%); color: #f7f4e9; overflow: hidden; --about-shift: 0px; }
.about-section-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 50px; }
.about-section .eyebrow { color: #d9bc83; }
.about-section .eyebrow::before { background: #d9bc83; }
.about-section-note { font-size: 9px; letter-spacing: .15em; color: #c6cec3; }
.about-display-title { position: relative; margin: 0 0 65px; font-size: clamp(48px,7.5vw,116px); line-height: 1.04; letter-spacing: -.06em; font-weight: 400; }
.about-title-line { display: block; }
.about-title-gold { color: #e0c38d; padding-left: 8vw; }
.about-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(65px,8vw,150px); align-items: center; }
.about-visual { position: relative; padding: 0 35px 48px 0; }
.about-photo { position: relative; margin: 0; overflow: hidden; height: clamp(420px,42vw,680px); border-radius: 140px 4px 4px 4px; background: #304a3d; }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 76% center; transform: scale(1.12) translateY(var(--about-shift)); transition: clip-path 1.3s cubic-bezier(.2,.7,.2,1); }
.about-photo::after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent,#15251d80); }
.about-photo figcaption { position: absolute; bottom: 22px; left: 28px; z-index: 1; color: #fff; font-size: 8px; letter-spacing: .14em; }
.about-detail-photo { position: absolute; right: -28px; bottom: 16px; width: 43%; height: 190px; margin: 0; border: 8px solid #20352d; overflow: hidden; box-shadow: 0 18px 40px #081a1620; }
.about-detail-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s; }
.about-detail-photo:hover img { transform: scale(1.08); }
.about-orbit { position: absolute; left: -35px; top: -35px; width: 120px; height: 120px; z-index: 2; background: #e0c38d; border-radius: 50%; color: #20352d; }
.about-orbit svg { width: 100%; height: 100%; animation: about-orbit-spin 24s linear infinite; fill: currentColor; }
.about-orbit text { font-size: 10px; letter-spacing: 2.7px; }
.about-orbit > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; font-weight: 400; }
.about-image-note { display: block; margin-top: 22px; font-size: 8px; letter-spacing: .12em; color: #aebeb3; }
.about-copy-index { display: block; color: #d9bc83; font-size: 10px; letter-spacing: .17em; margin-bottom: 26px; }
.about-lead { margin: 0 0 28px; font-size: clamp(25px,2.8vw,42px); line-height: 1.25; letter-spacing: -.04em; }
.about-story { max-width: 490px; }
.about-story p { font-size: 14px; line-height: 1.9; color: #bbc8be; margin: 0 0 20px; }
.about-link { margin-top: 18px; border-color: #e0c38d; color: #f7f4e9; }
.about-link span { color: #e0c38d; transition: transform .3s; }
.about-link:hover span { transform: translate(4px,-4px); }
.about-milestones { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin: 66px 0 70px; }
.about-milestone { position: relative; padding: 30px 32px; background: #ffffff04; border-top: 1px solid #d9bc8350; transition: background .3s; }
.about-milestone:hover { background: #ffffff09; }
.milestone-label { display: block; font-size: 8px; letter-spacing: .13em; color: #c0c9ba; }
.about-milestone strong { display: block; font-weight: 400; font-size: clamp(46px,5vw,76px); letter-spacing: -.06em; line-height: 1.1; margin-block: 18px 12px; color: #e0c38d; font-variant-numeric: tabular-nums; }
.about-milestone strong > span[aria-hidden] { color: #f7f4e9; }
.about-milestone p { margin: 0; color: #b5c3b9; font-size: 12px; line-height: 1.5; }
.about-marquee { padding-block: 26px; border-top: 1px solid #ffffff18; overflow: hidden; }
.about-marquee > div { display: flex; width: max-content; animation: about-marquee-move 38s linear infinite; }
.about-marquee span { white-space: nowrap; font-size: clamp(60px,8vw,120px); line-height: 1; letter-spacing: -.035em; color: transparent; -webkit-text-stroke: 1px #c8b98b55; padding-right: 32px; }
.about-marquee i { font-style: normal; font-size: .6em; -webkit-text-stroke: 0; color: #b7a477; vertical-align: middle; margin-inline: 28px; }
[data-about-reveal] { transition: opacity .95s ease, transform .95s cubic-bezier(.2,.7,.2,1); }
.about-reveal-pending { opacity: 0; transform: translateY(35px); }
.about-display-title .about-title-line { transition: opacity 1s, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.about-display-title .about-title-gold { transition-delay: .16s; }
.about-display-title.about-reveal-pending .about-title-line { opacity: 0; transform: translateY(45px); }
.about-visual.about-reveal-pending .about-photo img { clip-path: inset(100% 0 0); }
.about-visual.about-is-visible .about-photo img { clip-path: inset(0); }
.about-milestone:nth-child(2) { transition-delay: .12s; }
.about-milestone:nth-child(3) { transition-delay: .24s; }
@keyframes about-orbit-spin { to { transform: rotate(360deg); } }
@keyframes about-marquee-move { to { transform: translateX(-50%); } }
.about-orbit svg, .about-marquee > div { animation-play-state: paused; }
.about-motion-active .about-orbit svg, .about-motion-active .about-marquee > div { animation-play-state: running; }
@media (max-width:1100px) { .about-section { padding-top: 76px; } .about-layout { gap: 50px; } .about-detail-photo { right: -15px; height: 160px; } .about-orbit { width: 100px; height: 100px; left: -15px; top: -25px; } .about-milestone { padding: 25px; } }
@media (max-width:800px) { .about-layout { grid-template-columns: 1fr; gap: 38px; } .about-visual { width: 100%; max-width: 620px; } .about-photo { height: 490px; } .about-story { max-width: 100%; } .about-section-note { display: none; } .about-display-title { font-size: clamp(42px,7.5vw,66px); } .about-title-gold { padding-left: 0; } .about-milestones { gap: 16px; } .about-milestone { padding: 22px 18px; } .about-milestone strong { font-size: 40px; } .milestone-label { min-height: 26px; line-height: 1.6; } }
@media (max-width:600px) { .about-section { padding-top: 54px; } .about-section-top { margin-bottom: 32px; } .about-display-title { font-size: clamp(35px,9.5vw,53px); margin-bottom: 48px; } .about-photo { height: 390px; border-top-left-radius: 90px; } .about-visual { padding-right: 15px; } .about-orbit { width: 88px; height: 88px; left: -4px; top: -22px; } .about-orbit > span { font-size: 32px; } .about-detail-photo { height: 142px; width: 47%; right: -5px; bottom: 4px; border-width: 6px; } .about-image-note { font-size: 7px; max-width: 165px; line-height: 1.7; } .about-lead { font-size: 29px; } .about-story p { font-size: 13px; } .about-milestones { grid-template-columns: 1fr; gap: 15px; margin-block: 42px; } .about-milestone { padding: 25px; } .milestone-label { min-height: auto; } .about-milestone strong { font-size: 54px; } .about-marquee { padding-block: 20px; } }
@media (prefers-reduced-motion:reduce) { .about-section *, .about-section *::before { animation: none !important; } [data-about-reveal], .about-photo img, .about-title-line { transition: none !important; } .about-reveal-pending { opacity: 1; transform: none; } .about-photo img { transform: scale(1.03); clip-path: none !important; } }
/* Staged entrance: masked words, a rising image curtain, then the detail image. */
.about-word-mask { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .13em; margin-bottom: -.13em; }
.about-word { display: inline-block; transform-origin: left bottom; }
.about-display-title .about-title-line { transition: none; }
.about-display-title.about-reveal-pending .about-title-line { opacity: 1; transform: none; }
.about-reveal-pending .about-word { transform: translateY(120%) rotate(4deg); }
.about-is-visible .about-word { animation: about-word-open 1.1s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--word-delay,0s); }
.about-display-title.about-is-visible .about-title-gold .about-word { animation-delay: calc(var(--word-delay,0s) + .2s); }
.about-photo::before { content: ''; position: absolute; inset: 0; background: #bba06a; z-index: 3; pointer-events: none; transform: scaleY(0); transform-origin: top; }
.about-visual.about-reveal-pending .about-photo { clip-path: inset(100% 0 0); }
.about-visual.about-is-visible .about-photo { animation: about-image-open 1.65s cubic-bezier(.16,1,.3,1) both; }
.about-visual.about-is-visible .about-photo::before { animation: about-curtain-open 1.35s .12s cubic-bezier(.76,0,.24,1) both; }
.about-visual.about-is-visible .about-photo img { animation: about-image-settle 1.9s cubic-bezier(.16,1,.3,1) both; clip-path: none; }
.about-visual.about-reveal-pending .about-detail-photo { opacity: 0; transform: translateY(45px); }
.about-visual.about-is-visible .about-detail-photo { animation: about-detail-open 1.1s .8s cubic-bezier(.16,1,.3,1) both; }
.about-visual.about-is-visible .about-photo figcaption { animation: about-detail-open .9s .9s both; }
.about-story.about-is-visible p { animation: about-detail-open .9s .15s both; }
.about-story.about-is-visible p:nth-child(2) { animation-delay: .3s; }
@keyframes about-word-open { from { transform: translateY(120%) rotate(4deg); opacity: 0; } to { transform: translateY(0) rotate(0); opacity: 1; } }
@keyframes about-image-open { from { clip-path: inset(100% 0 0); } to { clip-path: inset(0); } }
@keyframes about-curtain-open { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes about-image-settle { from { scale: 1.15; } to { scale: 1; } }
@keyframes about-detail-open { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion:reduce) {
    .about-is-visible .about-word, .about-visual.about-is-visible .about-photo, .about-visual.about-is-visible .about-photo::before, .about-visual.about-is-visible .about-photo img, .about-visual.about-is-visible .about-detail-photo, .about-story.about-is-visible p { animation: none !important; }
    .about-reveal-pending .about-word, .about-visual.about-reveal-pending .about-detail-photo { transform: none; opacity: 1; }
    .about-visual.about-reveal-pending .about-photo { clip-path: none; }
}
/* Soft ivory and sage background with dark green type. */
.about-section { background: linear-gradient(90deg, #fff 0%, #fff 50%, #f7faf6 65%, #e5eee3 83%, #cddfce 100%); color: #203b2b; }
.about-section .eyebrow, .about-copy-index { color: #806536; }
.about-section .eyebrow::before { background: #a88750; }
.about-section-note, .about-image-note { color: #617465; }
.about-title-gold { color: #7a956a; }
.about-story p { color: #516656; }
.about-link { color: #203b2b; border-color: #83976b; }
.about-link span { color: #6c895d; }
.about-detail-photo { border-color: #e5eee1; }
.about-milestone { background: #ffffff40; border-top-color: #78916860; }
.about-milestone:hover { background: #ffffff70; }
.milestone-label { color: #65745b; }
.about-milestone strong { color: #294936; }
.about-milestone strong > span[aria-hidden] { color: #8a9e70; }
.about-milestone p { color: #5b7060; }
.about-marquee { border-top-color: #29493620; }
.about-marquee span { -webkit-text-stroke-color: #42644d55; }
.about-marquee i { color: #789168; }