.nav-links > li > a.active { color: var(--white); }

.story-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 74px);
    overflow: hidden;
    padding: 7.5rem clamp(1.5rem, 7vw, 6.75rem);
}
.story-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3,7,18,.97) 0%, rgba(3,7,18,.8) 52%, rgba(3,7,18,.48) 100%);
}
.story-hero-media {
    position: absolute;
    inset: 0;
    background: url('hero-poster.webp') center/cover no-repeat;
    transform: scale(1.03);
}
.story-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 62px 62px;
}
.story-hero-content { position: relative; z-index: 2; max-width: 990px; }
.story-pill {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 3rem;
    color: #bdc8d7;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.story-pill span { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 16px rgba(74,222,128,.8); }
.story-kicker { margin-bottom: 1.25rem; color: var(--orange-light); font-size: .65rem; font-weight: 850; letter-spacing: .2em; text-transform: uppercase; }
.story-hero h1 { margin: 0; font-size: clamp(3.6rem, 7.8vw, 7.25rem); line-height: .91; letter-spacing: -.07em; }
.story-hero h1 span { background: linear-gradient(100deg, #5d98f2, #33b9ca 58%, #e9a451); background-clip: text; -webkit-background-clip: text; color: transparent; }
.story-hero-lead { max-width: 790px; margin-top: 2.5rem; color: #c1c9d5; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.75; }
.local-first { margin-top: 1.5rem; color: var(--white); font-size: 1rem; font-weight: 750; }
.story-scroll { display: inline-flex; align-items: center; gap: 1.5rem; margin-top: 2.8rem; color: #c8d1dd; font-size: .72rem; font-weight: 750; text-decoration: none; }
.story-scroll span { color: var(--cyan); font-size: 1.2rem; }

.story-section { padding: 7.5rem clamp(1.5rem, 7vw, 6.75rem); }
.story-origin {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 9vw;
    padding: 7.5rem clamp(1.5rem, 7vw, 6.75rem);
    background: #050a16;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.story-origin-heading h2,
.story-section-intro h2,
.portfolio-intro h2,
.future-copy h2,
.story-closing h2,
.story-botho h2 { margin-top: 1.25rem; font-size: clamp(2.6rem, 5.2vw, 4.75rem); line-height: .99; letter-spacing: -.055em; }
.story-origin-copy > p { margin-bottom: 1.5rem; color: #b6c0ce; font-size: .95rem; line-height: 1.9; }
.story-origin-copy blockquote { margin-top: 2.8rem; padding: .3rem 0 .3rem 1.8rem; border-left: 2px solid var(--cyan); color: var(--white); font-size: clamp(1.3rem, 2.4vw, 2.15rem); font-weight: 650; line-height: 1.42; letter-spacing: -.03em; }

.story-botho {
    position: relative;
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 8vw;
    align-items: center;
    overflow: hidden;
    padding: 6.5rem clamp(1.5rem, 7vw, 6.75rem);
    background: radial-gradient(circle at 12% 40%, rgba(249,115,22,.16), transparent 30%), #071225;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.story-botho-word { color: rgba(255,255,255,.04); font-size: clamp(5rem, 13vw, 12rem); font-weight: 900; line-height: .8; letter-spacing: -.08em; }
.story-botho-copy { position: relative; z-index: 1; }
.story-botho-copy > p:not(.eyebrow) { max-width: 760px; margin-top: 1.8rem; color: #b6c0ce; font-size: .95rem; line-height: 1.85; }
.botho-values { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.botho-values span { padding: .55rem .8rem; border: 1px solid rgba(249,115,22,.2); border-radius: 999px; background: rgba(249,115,22,.05); color: #e8edf5; font-size: .7rem; font-weight: 750; }

.story-journey { display: grid; grid-template-columns: .78fr 1.22fr; gap: 10vw; background: var(--dark); }
.story-section-intro { align-self: start; }
.story-timeline { border-top: 1px solid rgba(255,255,255,.08); }
.story-timeline article { display: grid; grid-template-columns: 42px 1fr; gap: 1.75rem; padding: 2.1rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.timeline-marker { display: flex; align-items: center; flex-direction: column; gap: .75rem; }
.timeline-marker span { color: var(--orange-light); font-size: .58rem; font-weight: 850; }
.timeline-marker i { width: 1px; height: 50px; background: linear-gradient(var(--cyan), transparent); }
.story-timeline small { display: block; margin-bottom: .7rem; color: var(--cyan); font-size: .58rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.story-timeline h3 { margin-bottom: .75rem; font-size: 1.55rem; line-height: 1.25; letter-spacing: -.035em; }
.story-timeline p { max-width: 760px; color: var(--gray-light); font-size: .82rem; line-height: 1.78; }

.story-shift { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; padding: 6.5rem clamp(1.5rem, 7vw, 6.75rem); background: radial-gradient(circle at 8% 15%, rgba(59,130,246,.18), transparent 35%), #071225; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.story-shift > div:first-child h2 { margin-top: 1.25rem; font-size: clamp(2.6rem, 5vw, 4.65rem); line-height: 1; letter-spacing: -.055em; }
.shift-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }
.shift-grid article { min-height: 220px; padding: 1.7rem; background: rgba(7,15,32,.88); border: 1px solid rgba(255,255,255,.08); }
.shift-grid span { color: var(--orange-light); font-size: .58rem; font-weight: 850; }
.shift-grid strong { display: block; margin-top: 3rem; font-size: 1.3rem; }
.shift-grid p { margin-top: .75rem; color: var(--gray-light); font-size: .76rem; line-height: 1.65; }

.story-portfolio { background: #050a16; }
.portfolio-intro { display: grid; grid-template-columns: 1.15fr .75fr; gap: 9vw; align-items: end; }
.portfolio-intro > p,
.ecosystem-intro > p:last-child { color: var(--gray-light); font-size: .88rem; line-height: 1.78; }
.story-product-list { margin-top: 4rem; border-top: 1px solid rgba(255,255,255,.08); }
.story-product-list article { display: grid; grid-template-columns: 55px .62fr 1fr; gap: 1.75rem; align-items: start; padding: 1.8rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.story-product-list span { padding-top: .35rem; color: var(--orange-light); font-size: .58rem; font-weight: 850; }
.story-product-list h3 { font-size: 1.3rem; line-height: 1.35; letter-spacing: -.025em; }
.story-product-list p { color: var(--gray-light); font-size: .76rem; line-height: 1.68; }
.story-portfolio-link { margin-top: 2.4rem; }

.story-approach { background: var(--dark); }
.story-approach .story-section-intro { max-width: 980px; }
.principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: 3.8rem; }
.principle-grid article { min-height: 340px; padding: 1.75rem; background: linear-gradient(145deg, rgba(17,24,39,.92), rgba(7,13,27,.92)); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }
.principle-grid span { color: var(--orange-light); font-size: .58rem; font-weight: 850; }
.principle-grid h3 { margin: 5rem 0 1rem; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.03em; }
.principle-grid p { color: var(--gray-light); font-size: .76rem; line-height: 1.7; }

.story-ecosystem { background: #050a16; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.ecosystem-intro { max-width: 1000px; }
.ecosystem-intro > p:last-child { max-width: 760px; margin-top: 1.75rem; }
.ecosystem-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3.75rem; }
.ecosystem-story-card { display: flex; flex-direction: column; min-height: 440px; padding: 1.6rem; background: linear-gradient(145deg, rgba(17,24,39,.94), rgba(7,13,27,.94)); border: 1px solid rgba(255,255,255,.08); border-radius: 17px; }
.ecosystem-story-card.primary { border-color: rgba(6,182,212,.35); }
.ecosystem-logo { display: flex; align-items: center; justify-content: center; height: 142px; margin-bottom: 1.8rem; padding: 1.15rem; overflow: hidden; background: #f8f5ef; border-radius: 13px; }
.ecosystem-logo img { display: block; max-width: 100%; max-height: 108px; object-fit: contain; }
.ecosystem-logo.mitaa { background: #030712; }
.ecosystem-logo.mitaa img { width: 210px; }
.ecosystem-logo.bakone img { width: 250px; }
.ecosystem-story-card small { color: var(--cyan); font-size: .52rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.ecosystem-story-card h3 { margin: .9rem 0; font-size: 1.55rem; }
.ecosystem-story-card p { color: var(--gray-light); font-size: .76rem; line-height: 1.72; }
.ecosystem-website { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08); color: #dce4ee; font-size: .64rem; font-weight: 800; }
.ecosystem-website span { color: var(--cyan); font-size: .82rem; }
.ecosystem-website:hover { color: var(--white); }
.ownership-note { margin-top: 1.1rem; padding: 1.15rem 1.35rem; background: #071225; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; color: var(--gray-light); font-size: .72rem; line-height: 1.7; }
.ownership-note strong { color: var(--white); }

.story-future { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; padding: 7.5rem clamp(1.5rem, 7vw, 6.75rem); background: radial-gradient(circle at 80% 15%, rgba(6,182,212,.14), transparent 32%), var(--dark); }
.future-copy > p:last-child { max-width: 680px; margin-top: 1.8rem; color: #b6c0ce; font-size: .88rem; line-height: 1.82; }
.future-stages { border-top: 1px solid rgba(255,255,255,.08); }
.future-stages article { display: grid; grid-template-columns: 70px .75fr 1.25fr; gap: 1.5rem; padding: 1.9rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.future-stages span { padding-top: .25rem; color: var(--orange-light); font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.future-stages h3 { font-size: 1.1rem; line-height: 1.35; }
.future-stages p { color: var(--gray-light); font-size: .76rem; line-height: 1.65; }

.story-closing { display: flex; align-items: center; flex-direction: column; padding: 7.5rem 1.5rem; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(59,130,246,.23), transparent 38%), #071225; }
.story-closing h2 { max-width: 900px; }
.story-closing > p:nth-of-type(2) { max-width: 780px; margin: 1.75rem auto 0; color: #b6c0ce; font-size: .95rem; line-height: 1.8; }
.story-closing > div { display: flex; gap: .9rem; margin-top: 2.6rem; }

@media (max-width: 1100px) {
    .principle-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .story-origin,
    .story-botho,
    .story-journey,
    .story-shift,
    .portfolio-intro,
    .story-future { grid-template-columns: 1fr; }
    .story-botho-word { position: absolute; top: 3rem; left: 1.5rem; }
    .story-botho-copy { padding-top: 4rem; }
    .ecosystem-story-grid { grid-template-columns: 1fr; }
    .ecosystem-story-card { min-height: auto; }
}

@media (max-width: 680px) {
    .story-hero { min-height: 810px; padding: 5.8rem 1.3rem 5.5rem; }
    .story-hero::after { background: linear-gradient(rgba(3,7,18,.77), rgba(3,7,18,.94)); }
    .story-pill { margin-bottom: 2.5rem; }
    .story-hero h1 { font-size: 3.45rem; }
    .story-hero-lead { font-size: .95rem; }
    .story-section,
    .story-origin,
    .story-botho,
    .story-shift,
    .story-future { padding: 5.5rem 1.3rem; }
    .story-origin-copy blockquote { padding-left: 1.35rem; font-size: 1.35rem; }
    .story-timeline article { gap: 1.1rem; }
    .shift-grid,
    .principle-grid { grid-template-columns: 1fr; }
    .shift-grid article { min-height: 190px; }
    .story-product-list article { grid-template-columns: 38px 1fr; }
    .story-product-list p { grid-column: 2; }
    .principle-grid article { min-height: 280px; }
    .principle-grid h3 { margin-top: 3.7rem; }
    .future-stages article { grid-template-columns: 52px 1fr; }
    .future-stages p { grid-column: 2; }
    .story-closing > div { width: 100%; flex-direction: column; align-items: stretch; }
}