.story-hero { display: grid; align-items: center; padding: 84px 0 112px; }
.story-hero-copy p { max-width: 670px; margin-top: 32px; font-size: 22px; line-height: 1.55; }
.story-hero-copy .button { margin-top: 60px; }
.about-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 522px); gap: 118px; }
.about-hero h1 { font-size: clamp(37px, 4.65vw, 67px); }
.refinement-panel { padding: 72px 32px 38px; }
.refinement-visual { display: grid; grid-template-columns: 128px 48px 128px; align-items: center; justify-content: space-around; gap: 18px; }
.rough-shape { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 128px; height: 128px; gap: 2px; }
.rough-cell { background: #506b87; }
.rough-tone-1 { background: #6e86a0; }
.rough-tone-2 { background: #91a6bc; }
.rough-cell-empty { visibility: hidden; }
.refinement-arrow { width: 48px; height: 20px; color: var(--muted); }
.refined-shape { width: 128px; height: 128px; border-radius: 39px; background: linear-gradient(135deg, #34516d, #213d57); }
.refinement-labels { display: flex; justify-content: space-between; gap: 24px; padding-inline: 26px; margin-top: 48px; font-size: 18px; }
.refinement-labels span:first-child { color: var(--muted); }
.refinement-panel figcaption { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); font-size: 23px; font-weight: 500; letter-spacing: -.015em; line-height: 1.4; }
.story-meaning { border-top: 1px solid var(--line); padding-top: 90px; }
.story-meaning p { max-width: 1040px; margin-top: 36px; font-size: 26px; line-height: 1.55; }
.story-method { margin-top: 120px; }
.story-method ol { counter-reset: method; list-style: none; margin: 48px 0 0; padding: 0; }
.story-method li { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; counter-increment: method; border-top: 1px solid var(--line); padding: 42px 0 48px; min-height: 167px; }
.story-method li:last-child { border-bottom: 1px solid var(--line); }
.story-method li::before { content: counter(method, decimal-leading-zero); color: var(--muted); font-size: 16px; font-weight: 500; padding-top: 5px; }
.story-method h3 { font-size: 29px; line-height: 1.35; letter-spacing: -.02em; }
.story-method p { font-size: 20px; line-height: 1.55; }
.story-beginning { margin-top: 122px; padding: 64px 46px 40px; }
.story-beginning h2 { font-size: clamp(33px, 3.2vw, 45px); }
.story-beginning > p { max-width: 1080px; font-size: 22px; line-height: 1.5; margin-top: 28px; }
.story-beginning > .story-beginning-founders { margin-top: 38px; font-size: 19px; }
.story-beginning .text-link { margin-top: 16px; }
.founders-hero { grid-template-columns: minmax(0, 1fr) 418px; gap: 88px; padding-bottom: 148px; }
.founders-hero h1 { font-size: clamp(32px, 4.52vw, 65px); }
.founder-profiles { display: grid; gap: 27px; align-self: start; }
.founder-profile { padding: 32px 30px 22px; }
.founder-profile h2 { font-size: 26px; line-height: 1.35; letter-spacing: -.02em; }
.founder-profile p { font-size: 18px; margin-top: 8px; }
.founder-profile .text-link { font-size: 17px; margin-top: 22px; }
.founder-journey { border-top: 1px solid var(--line); padding-top: 88px; }
.journey-introduction p { margin-top: 24px; max-width: 880px; font-size: 21px; line-height: 1.55; }
.journey-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 88px; margin-top: 84px; }
.journey-track { min-width: 0; position: relative; }
.journey-track h3 { min-height: 76px; font-size: 30px; line-height: 1.3; }
.journey-chapters { list-style: none; margin: 0 0 0 10px; padding: 0; border-left: 2px dotted #8da5be; }
.journey-chapters li { position: relative; padding: 0 0 38px 33px; min-height: 120px; }
.journey-chapters li:last-child { padding-bottom: 34px; }
.journey-chapters li::before { position: absolute; content: ""; width: 13px; height: 13px; border: 2px solid #8da5be; border-radius: 50%; background: var(--bg); left: -7.5px; top: 6px; box-shadow: 0 0 0 6px var(--bg); }
.journey-chapters .chapter-date { font-size: 16px; line-height: 1.5; font-weight: 500; }
.journey-chapters h4 { margin: 18px 0 0; font-size: 26px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
.journey-join { display: block; width: 100%; color: #8da5be; }
.journey-join-desktop { height: 200px; }
.journey-join path { stroke: currentColor; stroke-width: 2; stroke-dasharray: 1 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.journey-join circle { fill: var(--bg); stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.journey-join-mobile { display: none; }
.founder-shared { padding: 64px 46px 54px; }
.founder-shared h2 { font-size: clamp(34px, 3.4vw, 49px); }
.founder-shared .shared-hook { color: var(--ink); font-size: 26px; font-weight: 500; margin-top: 30px; line-height: 1.4; }
.founder-shared p:last-child { max-width: 1036px; margin-top: 30px; font-size: 21px; line-height: 1.55; }
.story-closing { margin-top: 126px; }
.story-closing h2 { font-size: clamp(32px, 3vw, 42px); }
.story-closing > div { display: flex; gap: 64px; align-items: center; justify-content: space-between; margin-top: 34px; }
.story-closing p { max-width: 840px; font-size: 21px; line-height: 1.55; }
.story-closing .text-link { white-space: nowrap; }
@media (max-width: 1150px) {
    .about-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 54px; }
    .refinement-panel { padding-inline: 26px; }
    .refinement-visual { grid-template-columns: 110px 36px 110px; gap: 14px; }
    .rough-shape, .refined-shape { width: 110px; height: 110px; }
    .refinement-arrow { width: 36px; }
    .refinement-labels { padding-inline: 8px; }
    .founders-hero { grid-template-columns: minmax(0, 1fr) 340px; gap: 54px; }
    .story-method li { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
    .story-method h3 { font-size: 26px; }
    .journey-tracks { gap: 6.96%; }
    .journey-track h3 { font-size: 27px; }
    .journey-chapters li { min-height: 144px; }
    .journey-chapters h4 { font-size: 23px; }
}
@media (max-width: 900px) {
    .story-hero { grid-template-columns: minmax(0, 1fr); padding: 44px 0 70px; gap: 68px; }
    .story-hero-copy p { max-width: 600px; font-size: 18px; line-height: 1.6; margin-top: 28px; }
    .story-hero-copy .button { margin-top: 42px; }
    .about-hero h1 { font-size: clamp(37px, 6.5vw, 58px); }
    .refinement-panel { max-width: 522px; width: 100%; padding: 56px 24px 30px; }
    .refinement-visual { grid-template-columns: 96px 36px 96px; gap: 14px; }
    .rough-shape, .refined-shape { width: 96px; height: 96px; }
    .refined-shape { border-radius: 30px; }
    .refinement-labels { font-size: 15px; padding-inline: 3px; margin-top: 40px; }
    .refinement-panel figcaption { font-size: 25px; line-height: 1.3; margin-top: 32px; padding-top: 31px; max-width: 100%; }
    .story-meaning { padding-top: 62px; }
    .story-meaning h2, .story-method h2 { font-size: 35px; }
    .story-meaning p { font-size: 20px; line-height: 1.55; margin-top: 30px; max-width: 680px; }
    .story-method { margin-top: 92px; }
    .story-method ol { margin-top: 36px; }
    .story-method li { grid-template-columns: 24px minmax(0, 1fr); gap: 24px 13px; padding: 32px 0 44px; min-height: 0; }
    .story-method li::before { font-size: 14px; padding-top: 3px; }
    .story-method h3 { font-size: 23px; }
    .story-method p { grid-column: 2; font-size: 17px; line-height: 1.6; max-width: 590px; }
    .story-beginning { margin-top: 86px; padding: 48px 24px 28px; }
    .story-beginning h2 { max-width: 320px; font-size: 33px; line-height: 1.2; }
    .story-beginning > p { font-size: 17px; line-height: 1.6; margin-top: 32px; }
    .story-beginning > .story-beginning-founders { font-size: 17px; margin-top: 40px; }
    .story-beginning .text-link { margin-top: 24px; }
    .founders-hero h1 { font-size: clamp(32px, 5.6vw, 52px); }
    .founder-profiles { max-width: 522px; gap: 20px; width: 100%; }
    .founder-profile { padding: 24px 24px 16px; }
    .founder-profile h2 { font-size: 22px; }
    .founder-profile p { font-size: 16px; margin-top: 6px; }
    .founder-profile .text-link { font-size: 16px; margin-top: 15px; }
    .founder-journey { padding-top: 64px; }
    .journey-introduction h2 { max-width: 370px; font-size: 34px; line-height: 1.2; }
    .journey-introduction p { font-size: 17px; margin-top: 32px; line-height: 1.6; }
    .journey-tracks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 96px; margin-top: 84px; }
    .journey-track h3 { font-size: 28px; min-height: 0; line-height: 1.25; margin-bottom: 54px; padding-right: 20px; }
    .journey-chapters li { min-height: 122px; padding-left: 27px; padding-right: 12px; }
    .journey-chapters .chapter-date { font-size: 15px; }
    .journey-chapters h4 { font-size: 22px; line-height: 1.3; margin-top: 16px; }
    .journey-track:first-child::after { position: absolute; content: ""; left: 10px; right: -8px; bottom: -46px; height: 46px; border-left: 2px dotted #8da5be; border-bottom: 2px dotted #8da5be; border-bottom-left-radius: 32px; }
    .journey-track:last-child::after { position: absolute; content: ""; top: -50px; right: -8px; bottom: -40px; border-right: 2px dotted #8da5be; }
    .journey-join-desktop { display: none; }
    .journey-join-mobile { display: block; width: calc(100% + 8px); max-width: none; height: 120px; }
    .founder-shared { padding: 48px 24px 40px; }
    .founder-shared h2 { font-size: 34px; line-height: 1.2; max-width: 450px; }
    .founder-shared .shared-hook { font-size: 21px; line-height: 1.4; margin-top: 32px; }
    .founder-shared p:last-child { font-size: 17px; line-height: 1.6; margin-top: 32px; }
    .story-closing { margin-top: 96px; }
    .story-closing h2 { font-size: 32px; max-width: 500px; line-height: 1.25; }
    .story-closing > div { flex-direction: column; align-items: flex-start; gap: 30px; margin-top: 32px; }
    .story-closing p { font-size: 17px; line-height: 1.6; }
}
@media (max-width: 360px) {
    .about-hero h1 { font-size: 34px; }
    .founders-hero h1 { font-size: 29px; }
    .refinement-visual { grid-template-columns: 78px 30px 78px; gap: 10px; }
    .rough-shape, .refined-shape { width: 78px; height: 78px; }
    .refined-shape { border-radius: 25px; }
    .refinement-arrow { width: 30px; }
    .refinement-labels { font-size: 14px; gap: 12px; }
}