.page-story { background: #fff; color: #171717; }
.page-story .container { max-width: 1240px; }
.story-hero { background: radial-gradient(circle at 15% 20%, rgba(165,11,11,.07), transparent 26%), linear-gradient(180deg,#faf8f5 0%,#fff 100%); padding: 190px 0 110px; text-align: center; }
.story-hero__inner { align-items: center; display: flex; flex-direction: column; }
.story-kicker { color: #a50b0b; font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.story-hero h1 { font-size: clamp(54px,8vw,100px); letter-spacing: -.06em; line-height: .95; margin: 18px 0 28px; }
.story-hero p { color: #606060; font-size: clamp(18px,2vw,22px); line-height: 1.65; margin: 0; max-width: 900px; }
.story-section { padding: 110px 0; }
.story-heading { margin-bottom: 52px; max-width: 720px; }
.story-heading h2,.story-ahead h2,.story-final h2 { font-size: clamp(38px,5vw,62px); letter-spacing: -.045em; line-height: 1.08; margin: 13px 0 0; }
.story-heading--center { margin-left: auto; margin-right: auto; text-align: center; }
.story-timeline__grid,.story-values__grid { display: grid; gap: 18px; grid-template-columns: repeat(4,1fr); }
.story-timeline article,.story-values article { border: 1px solid #ece9e4; border-radius: 24px; padding: 30px; transition: .25s ease; }
.story-timeline article { background: #faf9f7; min-height: 340px; position: relative; }
.story-timeline article:hover,.story-values article:hover { box-shadow: 0 22px 50px rgba(30,24,18,.08); transform: translateY(-5px); }
.story-step { color: #aaa39b; float: right; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.story-icon { align-items: center; background: #f2e6e4; border-radius: 14px; color: #a50b0b; display: inline-flex; font-size: 21px; height: 48px; justify-content: center; width: 48px; }
.story-timeline h3,.story-values h3 { font-size: 23px; margin: 48px 0 13px; }
.story-timeline p,.story-values p,.story-ahead p { color: #676767; line-height: 1.7; margin: 0; }
.story-values { background: #f8f6f2; }
.story-values article { background: #fff; min-height: 245px; }
.story-values h3 { margin-top: 38px; }
.story-ahead__card { align-items: center; border: 1px solid #e8e4de; border-radius: 30px; display: grid; gap: 38px; grid-template-columns: auto 1.25fr 1fr; padding: 60px; }
.story-ahead__card>.story-icon { height: 64px; width: 64px; }
.story-ahead h2 { font-size: clamp(34px,4vw,52px); }
.story-final { padding: 0 0 110px; }
.story-final__card { background: #a50b0b; border-radius: 30px; color: #fff; padding: 85px 30px; text-align: center; }
.story-final .story-kicker { color: rgba(255,255,255,.7); }
.story-final h2 { color: #fff; margin-left: auto; margin-right: auto; max-width: 780px; }
.story-actions { display: flex; gap: 12px; justify-content: center; margin-top: 34px; }
.story-button { align-items: center; border: 1px solid #fff; border-radius: 999px; display: inline-flex; font-size: 15px; font-weight: 700; gap: 10px; justify-content: center; min-height: 54px; padding: 0 28px; transition: .2s ease; }
.story-button--light { background: #fff; color: #171717; }.story-button--light:hover { color: #a50b0b; transform: translateY(-2px); }
.story-button--outline { background: transparent; color: #fff; }.story-button--outline:hover { background: #fff; color: #a50b0b; }
@media (max-width: 991px) { .story-timeline__grid,.story-values__grid { grid-template-columns: repeat(2,1fr); }.story-ahead__card { grid-template-columns: auto 1fr; }.story-ahead__card>p { grid-column: 2; } }
@media (max-width: 767px) { .story-hero { padding: 145px 0 80px; }.story-section { padding: 75px 0; }.story-timeline__grid,.story-values__grid { grid-template-columns: 1fr; }.story-timeline article { min-height: 270px; }.story-ahead__card { align-items: start; gap: 24px; grid-template-columns: 1fr; padding: 35px 25px; }.story-ahead__card>p { grid-column: 1; }.story-actions { align-items: stretch; flex-direction: column; }.story-final__card { padding: 65px 22px; } }
