/* The origin story earns its space; the service sequence explains what happens next. */
.story-origin { padding: 82px 0 72px; background: #fff; }
.story-heading { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: start; margin-bottom: 43px; }
.story-heading h2 { max-width: 16ch; font-size: clamp(39px,4vw,59px); line-height: 1.1; letter-spacing: -.035em; }
.story-heading p { max-width: 57ch; color: #506674; font-size: 17px; line-height: 1.8; }
.story-heading p + p { margin-top: 21px; }
.story-heading .story-intro { color: #14304e; font-size: 22px; line-height: 1.55; letter-spacing: -.015em; }
.story-office-scene { margin: 0; }
.story-office-scene img { display: block; width: 100%; aspect-ratio: 2.4; object-fit: cover; object-position: 50% 57%; }
.story-office-scene figcaption { display: flex; justify-content: space-between; gap: 25px; padding-top: 17px; color: #536b79; font-size: 13px; line-height: 1.6; }
.story-office-scene figcaption > span:last-child { flex-shrink: 0; color: #6b7c87; font-size: 11px; }
.story-service-start { padding: 76px 0 68px; background: #0a2033; color: #fff; }
.story-principles-heading { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 105px; margin-bottom: 47px; }
.story-principles-heading h2 { max-width: 20ch; font-size: clamp(39px,3.9vw,58px); line-height: 1.09; letter-spacing: -.035em; }
.story-principles-heading > p { max-width: 47ch; color: #c1d0da; font-size: 17px; line-height: 1.8; }
.story-service-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; counter-reset: service-step; }
.story-service-steps li { border-top: 1px solid #8aa0af69; padding-top: 23px; counter-increment: service-step; }
.story-service-steps li::before { content: counter(service-step,decimal-leading-zero); display: block; margin-bottom: 23px; color: #d2b47a; font-size: 16px; line-height: 1.2; }
.story-service-steps h3 { max-width: 20ch; margin: 0 0 17px; font-size: 25px; font-weight: 500; line-height: 1.18; letter-spacing: -.025em; }
.story-service-steps p { max-width: 32ch; margin: 0; color: #bfcfd9; font-size: 15px; line-height: 1.8; }
.story-first-conversation { display: flex; justify-content: space-between; align-items: baseline; gap: 40px; margin-top: 49px; padding-top: 27px; border-top: 1px solid #8aa0af69; }
.story-first-conversation p { max-width: 77ch; color: #c1d0da; font-size: 15px; line-height: 1.8; }
.story-first-conversation p strong { color: #fff; font-weight: 500; }
.story-first-conversation a { flex-shrink: 0; color: #fff; font-size: 14px; text-decoration-color: #c0a56e; }
.story-service-start :focus-visible { outline-color: #e1c38a; }
@media (max-width: 1100px) {
 .story-heading { gap: 60px; }
 .story-heading .story-intro { font-size: 21px; }
 .story-principles-heading { gap: 60px; }
 .story-service-steps { gap: 28px; }
 .story-service-steps h3 { font-size: 23px; }
}
@media (max-width: 800px) {
 .story-origin { padding: 58px 0 53px; }
 .story-heading { grid-template-columns: 1fr; gap: 26px; margin-bottom: 33px; }
 .story-heading h2 { max-width: 23ch; font-size: 44px; }
 .story-heading p { max-width: 68ch; font-size: 16px; }
 .story-office-scene img { aspect-ratio: 1.9; }
 .story-service-start { padding: 57px 0 54px; }
 .story-principles-heading { grid-template-columns: 1fr; gap: 23px; margin-bottom: 33px; }
 .story-principles-heading h2 { max-width: 23ch; font-size: 43px; }
 .story-principles-heading > p { max-width: 61ch; font-size: 16px; }
 .story-service-steps { grid-template-columns: 1fr 1fr; gap: 30px 42px; }
 .story-service-steps h3 { max-width: 23ch; font-size: 25px; }
 .story-service-steps p { max-width: 39ch; }
 .story-first-conversation { display: block; margin-top: 36px; padding-top: 26px; }
 .story-first-conversation a { display: inline-block; margin-top: 20px; }
}
@media (max-width: 600px) {
 .story-origin { padding: 47px 0 44px; }
 .story-heading { gap: 24px; margin-bottom: 28px; }
 .story-heading h2 { max-width: 18ch; font-size: 37px; }
 .story-heading .story-intro { font-size: 20px; line-height: 1.55; }
 .story-heading p { font-size: 16px; line-height: 1.8; }
 .story-office-scene img { aspect-ratio: 4 / 3; object-position: 46% 54%; }
 .story-office-scene figcaption { display: block; padding-top: 13px; font-size: 12px; }
 .story-office-scene figcaption > span { display: block; }
 .story-office-scene figcaption > span:last-child { margin-top: 4px; font-size: 10px; }
 .story-service-start { padding: 45px 0 46px; }
 .story-principles-heading { margin-bottom: 29px; gap: 23px; }
 .story-principles-heading h2 { max-width: 20ch; font-size: 36px; }
 .story-principles-heading > p { font-size: 16px; }
 .story-service-steps { display: block; }
 .story-service-steps li { position: relative; padding: 25px 0 24px 42px; }
 .story-service-steps li::before { position: absolute; top: 28px; left: 0; margin: 0; font-size: 14px; }
 .story-service-steps h3 { max-width: 24ch; margin-bottom: 12px; font-size: 25px; }
 .story-service-steps p { max-width: 39ch; font-size: 15px; line-height: 1.8; }
 .story-first-conversation { margin-top: 7px; padding-top: 24px; }
 .story-first-conversation p { font-size: 14px; }
 .story-first-conversation a { font-size: 14px; margin-top: 19px; }
}