.about-history-section { position: relative; isolation: isolate; padding-top: 4.5rem; padding-bottom: 4.75rem; background: linear-gradient(110deg, #fbf8f3 0%, #fff 47%, #fff 100%); }
.about-history-section::before { display: none; }
.about-history { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(2rem, 4vw, 3.25rem); align-items: start; }
.about-history-heading { position: static; grid-column: 1; grid-row: 1; padding-left: 0; }
.about-story-cta { position: relative; z-index: 1; display: grid; grid-column: 1; grid-row: 2; grid-template-columns: 66px minmax(0, 1fr); gap: 1rem; align-items: center; margin-top: 2rem; padding: 1.25rem 1.3rem; border: 2px solid #e9b610; border-radius: 18px; background: rgb(255, 244, 201); box-shadow: 0 18px 42px rgb(46 24 20 / 18%), 0 0 0 3px rgb(212 175 55 / 16%), 0 2px 8px rgb(46 24 20 / 8%); backdrop-filter: blur(10px); }
.about-story-cta-icon { display: grid; place-items: center; align-self: stretch; padding-right: 1rem; border-right: 3px solid #d4af37; color: var(--primary-color); }
.about-story-cta-icon svg { width: 54px; height: 54px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.about-story-cta-copy { min-width: 0; }
.about-story-cta h2 { margin-bottom: .45rem; color: var(--primary-color); font-size: clamp(1.6rem, 2vw, 2rem); line-height: 1.12; }
.about-story-cta-copy > p:not(.about-eyebrow) { margin: 0 0 .8rem; color: var(--muted-text); font-size: .9rem; line-height: 1.45; }
.about-story-cta .about-eyebrow { margin-bottom: .4rem; color: var(--primary-color); font-size: .68rem; letter-spacing: .1em; }
.about-story-cta .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: 999px; background: var(--primary-color); color: #fff; font-size: .88rem; }
.about-story-cta .btn:hover { background: #4e0b14; }
.about-eyebrow { margin: 0 0 .55rem; color: #9b7620; font-size: .72rem; font-weight: 750; letter-spacing: .16em; }
.about-history-heading > .about-eyebrow { display: inline-flex; align-items: center; gap: .8rem; padding: .35rem .7rem; border-radius: 999px; background: #f8e8b1; color: var(--primary-color); }
.about-history-heading > .about-eyebrow::after { width: clamp(48px, 7vw, 110px); height: 1px; background: linear-gradient(90deg, #d4af37, transparent); content: ""; }
.about-history-heading h2 { margin-bottom: .9rem; color: var(--primary-color); font-size: clamp(2.35rem, 3.6vw, 3.35rem); line-height: 1.04; -webkit-text-stroke: 0; }
.about-section-heading h2 { margin-bottom: .8rem; font-size: clamp(1.8rem, 3vw, 2.45rem); }
.about-history-heading > p:last-child { max-width: 26rem; color: #382d31; font-size: 1.1rem; font-weight: 600; line-height: 1.55; }
.about-timeline { position: relative; display: grid; grid-column: 2; grid-row: 1 / span 2; gap: 0; }
.about-timeline-track { position: absolute; top: var(--timeline-line-top, 10px); left: 108px; width: 2px; height: var(--timeline-line-height, 0px); background: #e4d7c4; pointer-events: none; }
.about-timeline-progress { display: block; width: 100%; height: var(--timeline-progress-height, 0px); background: var(--accent-color); transition: height .12s linear; }
.about-milestone { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 2rem; padding: 0 0 2rem; }
.about-milestone::after { position: absolute; top: 5px; left: 102px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #e4d7c4; box-shadow: 0 0 0 1px #c6a13a; content: ""; transition: background-color .2s ease, transform .2s ease; }
.about-milestone.is-reached::after { background: var(--accent-color); transform: scale(1.12); }
.about-milestone:last-child { padding-bottom: 0; }
.about-year { padding-top: .05rem; color: var(--primary-color); font-family: var(--heading-font); font-size: 1.08rem; font-weight: 700; text-align: right; }
.about-milestone h3 { margin: 0 0 .4rem; font-family: var(--body-font); font-size: 1.04rem; font-weight: 700; }
.about-milestone p { margin: 0; color: #51484a; line-height: 1.75; }
.about-values-section { position: relative; isolation: isolate; min-height: clamp(430px, 34vw, 500px); padding-top: 4rem; padding-bottom: 4.5rem; overflow: visible; background: transparent; }
.about-values-section::before { position: absolute; z-index: -1; top: -300px; right: 0; bottom: 0; left: 0; background: url('/assets/images/founders.png') center top / 102% auto no-repeat; content: ""; opacity: .2; pointer-events: none; }
.about-section-heading { margin-bottom: 1.4rem; text-align: center; }
.about-section-heading .about-eyebrow { margin-bottom: .35rem; }
.values-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.value-item { position: relative; min-height: 190px; padding: 1.7rem 1.8rem; overflow: hidden; border: 1px solid rgb(232 222 210 / 82%); border-top: 3px solid var(--accent-color); border-radius: 10px; background: rgb(255 255 255 / 72%); box-shadow: 0 8px 24px rgb(54 30 20 / 6%); backdrop-filter: blur(2px); text-align: center; }
.value-number { display: inline-block; margin-bottom: 1rem; color: #a17f2e; font-size: .72rem; font-weight: 750; letter-spacing: .12em; }
.value-item h3 { margin-bottom: .45rem; font-size: 1.25rem; text-transform: capitalize; }
.value-item p { max-width: 34rem; margin: 0 auto; color: var(--muted-text); }
@media (max-width: 720px) {
    .about-history-section::before { display: none; }
    .about-history { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
    .about-history-heading { position: static; padding-left: 0; }
    .about-history-heading h2 { color: var(--primary-color); -webkit-text-stroke: 0; }
    .about-story-cta,.about-timeline { grid-column: auto; grid-row: auto; }
    .about-story-cta { margin-top: 0; }
    .about-milestone { grid-template-columns: 86px minmax(0, 1fr); gap: 1.4rem; }
    .about-timeline-track { left: 98px; }
    .about-milestone::after { left: 92px; }
}
@media (max-width: 520px) {
    .about-story-cta { grid-template-columns: 42px minmax(0, 1fr); gap: .75rem; padding: 1rem .8rem; }
    .about-story-cta-icon { padding-right: .65rem; }
    .about-story-cta-icon svg { width: 34px; height: 34px; }
}
@media (max-width: 520px) {
    .about-history-section { padding-top: 3rem; padding-bottom: 3rem; }
    .about-values-section { min-height: 560px; padding-top: 3rem; padding-bottom: 3rem; }
    .about-values-section::before { top: -180px; background-size: 100% auto; }
    .about-milestone { grid-template-columns: 1fr; gap: .35rem; padding-left: 1.15rem; padding-bottom: 1.5rem; }
    .about-year { text-align: left; font-size: .94rem; }
    .about-timeline-track { left: 3px; }
    .about-milestone::after { top: 4px; left: -2px; width: 10px; height: 10px; }
    .values-grid { grid-template-columns: minmax(0, 1fr); }
    .value-item { min-height: 0; padding: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .about-timeline-progress,.about-milestone::after { transition: none; } }

html.about-reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease var(--reveal-delay, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms); }
html.about-reveal-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { html.about-reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; } }