.hybrid-story { --story-ink: #1e2620; --story-muted: #667065; --story-green: #86af32; --story-pale: #eff5e7; max-width: 1160px; margin: 0 auto 70px; color: var(--story-ink); }
.hybrid-story__hero { position: relative; overflow: hidden; margin: 0 -32px 30px; padding: clamp(40px, 8vw, 96px) clamp(24px, 8vw, 105px) 40px; border-radius: 4px 4px 30px 30px; background: radial-gradient(ellipse at 82% 15%, #bfdc8a 0, transparent 35%), linear-gradient(135deg, #e7efd9, #f8f9f4 62%, #dde8ce); }
.hybrid-story__hero h1 { max-width: 850px; margin: 15px 0 20px; font-size: clamp(43px, 7vw, 88px); line-height: .97; letter-spacing: -.065em; }
.hybrid-story__hero h1 span { color: #668b20; }
.hybrid-story__dek { max-width: 650px; color: #4c5848; font-size: clamp(17px, 2vw, 21px); line-height: 1.65; }
.hybrid-story__scroll { display: inline-flex; align-items: center; gap: 15px; margin-top: 22px; color: #263519; font-weight: 800; text-decoration: none; }
.hybrid-story__scroll span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #a2bb78; border-radius: 50%; }
.hybrid-story__scope { margin: 29px 0 0; color: #65705f; font-size: 12px; }
.hybrid-story__progress { position: sticky; z-index: 8; top: 0; height: 5px; overflow: hidden; background: #e7e9e3; }
.hybrid-story__progress span { display: block; width: 25%; height: 100%; background: var(--story-green); transition: width .35s ease; }
.hybrid-story__journey { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(28px, 6vw, 76px); padding: 20px clamp(0px, 3vw, 34px) 0; }
.hybrid-story__visual { position: sticky; top: 40px; padding-top: 30px; }
.hybrid-visual { overflow: hidden; border: 1px solid #e0e5d8; border-radius: 23px; background: #f6f8f2; box-shadow: 0 20px 48px rgb(30 38 32 / 7%); }
.hybrid-visual__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 18px 20px 0; color: #6d7869; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hybrid-visual__mode { color: #446817; letter-spacing: 0; text-transform: none; }
.hybrid-visual__diagram { display: block; width: 100%; height: auto; padding: 3px 10px 0; }
.hybrid-road { fill: none; stroke: #ccd4c6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; }
.hybrid-node rect, .hybrid-node circle:first-child { fill: #fff; stroke: #cdd7c2; stroke-width: 2; transition: fill .3s, stroke .3s; }
.hybrid-node path, .hybrid-node rect:not(:first-child), .hybrid-node circle:not(:first-child) { fill: none; stroke: #53624b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hybrid-node text { fill: #53624b; font: 700 12px system-ui, sans-serif; text-anchor: middle; }
.hybrid-node--engine rect { fill: #f2f2ed; }
.hybrid-node--battery rect { fill: #eef6df; }
.flow { opacity: .12; transition: opacity .35s; }
.flow path { fill: none; stroke: #7ba82c; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.flow--regen path { stroke: #4e9a9b; }
.hybrid-visual[data-flow="electric"] .flow--battery, .hybrid-visual[data-flow="engine"] .flow--engine, .hybrid-visual[data-flow="both"] .flow--battery, .hybrid-visual[data-flow="both"] .flow--engine, .hybrid-visual[data-flow="regen"] .flow--regen { opacity: 1; }
.hybrid-visual[data-flow="electric"] .hybrid-node--battery rect, .hybrid-visual[data-flow="regen"] .hybrid-node--battery rect { fill: #e4f2cc; stroke: #83a94a; }
.hybrid-visual[data-flow="engine"] .hybrid-node--engine rect, .hybrid-visual[data-flow="both"] .hybrid-node--engine rect { fill: #f5e8d4; stroke: #c59a61; }
.hybrid-visual__caption { min-height: 52px; margin: 0; padding: 3px 22px 14px; color: #364531; font-size: 13px; line-height: 1.5; }
.hybrid-visual__disclaimer { margin: 0; padding: 12px 22px 18px; border-top: 1px solid #e1e6dc; color: #778073; font-size: 10px; line-height: 1.45; }
.hybrid-story__chapter-nav { display: grid; gap: 3px; margin-top: 13px; }
.hybrid-story__chapter-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 11px; color: #667065; font-size: 12px; text-decoration: none; transition: color .2s, background .2s; }
.hybrid-story__chapter-nav a span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #dce2d6; border-radius: 50%; font-size: 10px; }
.hybrid-story__chapter-nav a[aria-current="step"] { background: #edf4e2; color: #354d18; font-weight: 800; }
.hybrid-story__chapter-nav a[aria-current="step"] span { border-color: #8bab54; }
.hybrid-story__chapters { min-width: 0; }
.hybrid-chapter { display: flex; min-height: min(88vh, 760px); flex-direction: column; justify-content: center; padding: 60px 0; border-bottom: 1px solid #e5e8e2; scroll-margin-top: 35px; }
.hybrid-chapter .eyebrow { color: #789348; }
.hybrid-chapter h2, .hybrid-story__types h2, .hybrid-story__end h2 { margin: 12px 0 17px; font-size: clamp(32px, 4vw, 52px); line-height: 1.04; letter-spacing: -.055em; }
.hybrid-chapter p:not(.eyebrow) { color: #596257; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.8; }
.hybrid-chapter__takeaway { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 16px 18px; border-left: 3px solid var(--story-green); background: #f5f8ef; color: #354a22 !important; font-size: 14px !important; font-weight: 750; line-height: 1.5 !important; }
.hybrid-chapter__takeaway span { font-size: 18px; }
.hybrid-story__types { padding: 84px clamp(0px, 5vw, 56px) 72px; }
.hybrid-type-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.hybrid-type-cards article { padding: 25px; border: 1px solid #e1e6dc; border-radius: 18px; background: #f9faf7; }
.hybrid-type-cards__mark { display: inline-grid; min-width: 51px; height: 29px; place-items: center; padding: 0 8px; border-radius: 7px; background: #e8f1dc; color: #547522; font-size: 11px; font-weight: 900; }
.hybrid-type-cards h3 { margin: 17px 0 9px; font-size: 20px; }
.hybrid-type-cards p, .hybrid-story__sources { color: #626c5f; font-size: 14px; line-height: 1.7; }
.hybrid-story__sources { margin-top: 24px; font-size: 12px; }
.hybrid-story__sources a { color: #4d6d22; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hybrid-story__end { margin: 0 clamp(0px, 3vw, 34px); padding: clamp(28px, 5vw, 55px); border-radius: 22px; background: #eaf1df; }
.hybrid-story__end h2 { max-width: 730px; }
.hybrid-story__end > p:not(.eyebrow) { color: #596257; }
.hybrid-story__end .button { display: inline-flex; gap: 10px; margin-top: 12px; text-decoration: none; }
@media (max-width: 800px) {
  .hybrid-story__hero { margin: 0 -16px 16px; padding: 50px 24px 32px; }
  .hybrid-story__journey { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .hybrid-story__visual { position: relative; top: auto; z-index: 5; padding-top: 16px; }
  .hybrid-visual { border-radius: 0 0 18px 18px; }
  .hybrid-visual__diagram { max-height: 255px; }
  .hybrid-story__chapter-nav { display: flex; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; }
  .hybrid-story__chapter-nav a { flex: 0 0 auto; }
  .hybrid-chapter { min-height: 72vh; padding: 55px 3px; }
  .hybrid-story__types { padding: 65px 0 45px; }
}
@media (max-width: 520px) {
  .hybrid-visual__top { padding-inline: 14px; font-size: 9px; }
  .hybrid-visual__diagram { padding-inline: 0; }
  .hybrid-visual__caption, .hybrid-visual__disclaimer { padding-inline: 15px; }
  .hybrid-type-cards { grid-template-columns: 1fr; }
  .hybrid-type-cards article { padding: 20px; }
  .hybrid-chapter { min-height: auto; padding: 58px 3px; }
  .hybrid-chapter p:not(.eyebrow) { font-size: 16px; }
  .hybrid-story__end { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hybrid-story *, .hybrid-story *::before, .hybrid-story *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}