/* =========================================================================
 * Our Story — block 2, Story Chapters.
 *
 * The markup, the two columns, the panel stage, the chain and the particle
 * transition come from the shared selector of MDR block 4
 * (assets/css/mdr/block4-capabilities.css, handle lmx-mdr-d4, classes
 * .lmx-cap-*). Only this page's differences live here: the columns are almost
 * equal (the chapters on the right are long), the accent line (a whole
 * paragraph in bold → .lmx-sc-accent), the lower size bounds and the stage
 * height on narrow screens.
 *
 * Desktop: the panels lie in one grid cell — the stage height equals the
 * longest enabled chapter and the chain at the bottom does not move while
 * switching. Narrow screens: the panels are absolute, the active one is in the
 * flow, and the stage height is the --sc-stage-h variable in px written by
 * block2-story-chapters.js after the fonts load and on ResizeObserver; the
 * height transition is smooth.
 * ====================================================================== */

.lmx-os .lmx-sc-inner .lmx-cap-cols{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:max(24px,calc(64px * var(--ms-scale,1)));padding-top:max(6px,calc(20px * var(--ms-scale,1)))}
.lmx-os .lmx-sc-inner .lmx-cap-eyebrow{margin-bottom:max(10px,calc(24px * var(--ms-scale,1))) !important;font-size:max(10px,calc(13px * var(--ms-scale,1))) !important}
.lmx-os .lmx-sc-inner .lmx-cap-title{font-size:max(30px,calc(58px * var(--ms-scale,1))) !important;max-width:15ch}
.lmx-os .lmx-sc-inner .lmx-cap-desc{margin-top:max(10px,calc(24px * var(--ms-scale,1))) !important;max-width:560px;font-size:max(14px,calc(18px * var(--ms-scale,1))) !important;line-height:1.55 !important}

.lmx-os .lmx-sc-inner .lmx-cap-right{padding-left:max(20px,calc(56px * var(--ms-scale,1)))}
.lmx-os .lmx-sc-inner .lmx-cap-panel-title{margin-top:0 !important;font-size:max(22px,calc(36px * var(--ms-scale,1))) !important}
.lmx-os .lmx-sc-inner .lmx-cap-panel-desc{margin-top:max(10px,calc(18px * var(--ms-scale,1))) !important;max-width:620px;font-size:max(14px,calc(17px * var(--ms-scale,1))) !important;line-height:1.55 !important}
.lmx-os .lmx-sc-inner .lmx-cap-panel-desc--rich p{margin-bottom:max(8px,calc(14px * var(--ms-scale,1))) !important}

/* The accent line (“They. Just. Didn’t. Know.”) is a paragraph set entirely bold in the WYSIWYG. */
.lmx-os .lmx-sc-inner .lmx-sc-accent{margin:max(14px,calc(26px * var(--ms-scale,1))) 0 0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-size:max(24px,calc(40px * var(--ms-scale,1))) !important;line-height:1.15 !important;letter-spacing:-.01em;color:#fff !important}
.lmx-os .lmx-sc-inner .lmx-sc-accent strong{font-weight:300;color:var(--cap-accent)}

.lmx-os .lmx-sc-inner .lmx-cap-navwrap{margin-top:max(16px,calc(46px * var(--ms-scale,1)))}
.lmx-os .lmx-sc-inner .lmx-cap-nav .lmx-mh-nav-label{max-width:max(120px,calc(180px * var(--ms-scale,1)));font-size:max(10px,calc(12px * var(--ms-scale,1)))}

@media (max-width:1024px){
.lmx-os .lmx-sc-inner .lmx-cap-cols{grid-template-columns:1fr;gap:28px;padding-top:0}
.lmx-os .lmx-sc-inner .lmx-cap-right{padding-left:0}
.lmx-os .lmx-sc-inner .lmx-cap-title{font-size:40px !important;max-width:none}
.lmx-os .lmx-sc-inner .lmx-cap-desc,
.lmx-os .lmx-sc-inner .lmx-cap-panel-desc{max-width:none}
.lmx-os .lmx-sc-inner .lmx-cap-desc{font-size:16px !important}
.lmx-os .lmx-sc-inner .lmx-cap-panel-title{font-size:26px !important}
.lmx-os .lmx-sc-inner .lmx-cap-panel-desc{font-size:15px !important}
.lmx-os .lmx-sc-inner .lmx-sc-accent{font-size:28px !important}
.lmx-os .lmx-sc-inner .lmx-cap-navwrap{margin-top:34px}
.lmx-os .lmx-sc-inner .lmx-cap-nav .lmx-mh-nav-label{max-width:none;font-size:12px}
/* The stage height follows the active chapter (px written by the script), smoothly. */
.lmx-os .lmx-sc-inner .lmx-cap-stage{display:block;height:var(--sc-stage-h,auto);overflow:hidden;transition:height .35s ease}
.lmx-os .lmx-sc-inner .lmx-cap-panel{position:absolute;left:0;top:0;width:100%}
.lmx-os .lmx-sc-inner .lmx-cap-panel.is-active{position:relative}
}
@media (max-width:480px){
.lmx-os .lmx-sc-inner .lmx-cap-title{font-size:34px !important}
.lmx-os .lmx-sc-inner .lmx-sc-accent{font-size:24px !important}
}
@media (prefers-reduced-motion:reduce){
.lmx-os .lmx-sc-inner .lmx-cap-stage{transition:none}
}