/* ============================================================
   The Bank of Mom & Dad, immersive chapter page.
   Loaded only by bank-of-mom-and-dad.html, on top of styles.css.
   Inherits the v3 tokens (--accent, --ink, --paper, --ease...).
   ============================================================ */

.bomad{background:var(--bg-5)}
/* NB: no overflow:hidden on .chap. It makes the section a scroll container, so
   the sticky scenes inside (.tl__sticky, .walls__sticky, .gap__sticky) pin to
   the section instead of the viewport and just scroll away. Horizontal bleed
   from the decorative art is already clipped by body{overflow-x:hidden}, and
   the hero clips its own glow. */
.bomad .chap{position:relative}
/* hash links land below the fixed nav, not under it */
.bomad [id]{scroll-margin-top:90px}
/* Single source of truth for the content column. Above 1100px the chapter
   rail is visible, so the column narrows to leave it a lane of its own
   instead of being overlapped by it. */
.bomad{--content:min(1180px,92vw)}
@media(min-width:1101px){ .bomad{--content:min(1180px,100vw - 200px)} }
.bomad .wrap{width:var(--content);margin:0 auto}

/* amber = "missing / on a handshake", the page's second accent */
.bomad{--warn:#E6B45A}

/* ---------- chapter rail (interactive-presentation nav) ---------- */
.rail{
  position:fixed;left:max(18px,2vw);top:50%;transform:translateY(-50%);
  z-index:55;pointer-events:auto;opacity:0;transition:opacity .5s var(--ease);
}
.rail.is-on{opacity:1}
.rail__list{list-style:none;display:grid;gap:2px}
.rail__item{
  display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;
  text-decoration:none;color:var(--paper-dim);font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;transition:color .3s var(--ease),background .3s var(--ease);
}
.rail__num{
  width:26px;flex:none;text-align:right;opacity:.6;font-size:10px;
  border-right:1px solid currentColor;padding-right:8px;line-height:1.4;
}
/* max-width, not opacity alone: an invisible label still occupies its width
   and pushed the rail 143px wide, straight into the content column. */
.rail__t{
  opacity:0;max-width:0;overflow:hidden;white-space:nowrap;
  transition:opacity .3s var(--ease),max-width .3s var(--ease);
}
.rail:hover .rail__t{opacity:1;max-width:130px}
.rail__item:hover{color:var(--paper)}
.rail:hover .rail__item{background:rgba(6,15,32,.82);backdrop-filter:blur(8px)}
.rail.on-light:hover .rail__item{background:rgba(220,233,255,.86)}
.rail__item.is-active{color:var(--accent)}
.rail__item.is-active .rail__num{opacity:1}
/* Labels are hover-only. Showing the active chapter's label at rest kept the
   rail permanently 143px wide, overlapping the content column; the active
   chapter is already legible from the accent colour and solid numeral. */
/* on light chapters the rail needs ink, not paper */
.rail.on-light .rail__item{color:#5C6E8E}
.rail.on-light .rail__item:hover{color:var(--ink)}
.rail.on-light .rail__item.is-active{color:var(--accent-deep)}
@media(max-width:1100px){ .rail{display:none} }

/* ---------- hero ---------- */
.bhero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:140px clamp(22px,6vw,90px) 110px;background:var(--bg-5);color:var(--paper);
  overflow:hidden;
}
.bhero__glow{
  position:absolute;left:50%;top:46%;width:min(1100px,120vw);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(99,177,255,.30),rgba(99,177,255,0) 70%);
  filter:blur(30px);animation:glowdrift 16s ease-in-out infinite alternate;
}
.bhero__vault{
  position:absolute;right:-8%;top:50%;transform:translateY(-50%);
  width:min(760px,72vw);aspect-ratio:1;pointer-events:none;opacity:.5;
}
.bhero__vault svg{width:100%;height:100%;overflow:visible}
.bv{fill:none;stroke:var(--accent);stroke-opacity:.22;stroke-width:1}
.bv--2{stroke-opacity:.16}
.bv--3{stroke-opacity:.12}
.bv--4{stroke-opacity:.28;stroke-dasharray:3 9}
.bv__spokes line{stroke:var(--accent);stroke-opacity:.2;stroke-width:1}
.bhero__vault svg > *{transform-origin:50% 50%}
.bv--1{animation:bspin 90s linear infinite}
.bv--4{animation:bspin 40s linear infinite reverse}
.bv__spokes{animation:bspin 130s linear infinite}
@keyframes bspin{to{transform:rotate(360deg)}}

.bhero__inner{position:relative;z-index:2;max-width:900px}
.bhero__eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:26px;
}
.bhero__title{
  font-size:clamp(44px,8vw,108px);line-height:.96;font-weight:500;
  letter-spacing:-.035em;color:#fff;
}
.bhero__title .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.bhero__title .w{display:inline-block;transform:translateY(105%);opacity:0}
.bhero.is-in .bhero__title .w,
body.loaded .bhero__title .w{
  transform:translateY(0);opacity:1;
  transition:transform .95s var(--ease),opacity .95s var(--ease);
}
body.loaded .bhero__title .line:nth-child(2) .w{transition-delay:.12s}
.bhero__title .accent{color:var(--accent)}
.bhero__sub{
  margin-top:30px;max-width:60ch;font-size:clamp(16px,1.5vw,20px);line-height:1.6;
  color:var(--paper-dim);
}

/* Dictionary entry that coins the term. Deliberately styled as a definition
   so the acronym reads as an established word, not a nickname. */
.bomaddef{
  margin-top:30px;max-width:62ch;padding-left:20px;
  border-left:2px solid rgba(99,177,255,.4);
}
.bomaddef__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.bomaddef__term{
  font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:.06em;
  color:var(--accent);line-height:1;
}
.bomaddef__pron{font-family:var(--mono);font-size:13px;color:var(--paper-dim)}
.bomaddef__pos{font-size:14px;font-style:italic;color:var(--paper-dim);opacity:.8}
.bomaddef__body{
  font-size:clamp(15px,1.45vw,19px);line-height:1.6;color:var(--paper-dim);margin:0;
}
.bomaddef__body b{color:var(--paper);font-weight:600}
@media(max-width:600px){
  .bomaddef{padding-left:16px;margin-top:24px}
  .bomaddef__body{font-size:15px}
}
.bhero__foot{display:flex;align-items:center;gap:22px;margin-top:44px;flex-wrap:wrap}
.bhero__meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--paper-dim);text-transform:uppercase}

/* ---------- shared chapter furniture ---------- */
.chap__intro{padding:clamp(90px,13vh,150px) 0 clamp(40px,6vh,70px);position:relative;z-index:2}
.chap__h{
  font-size:clamp(30px,4.6vw,60px);line-height:1.06;font-weight:500;letter-spacing:-.03em;
  margin-top:18px;
}
.chap__h em{font-style:normal;color:var(--accent)}
.chap--walls .chap__h em,.chap--now .chap__h em{color:var(--accent-deep)}
.chap__lead{
  margin-top:26px;max-width:62ch;font-size:clamp(15px,1.35vw,18px);line-height:1.65;
}
.chap[data-theme=dark]{background:var(--bg-5);color:var(--paper)}
.chap[data-theme=dark] .chap__lead{color:var(--paper-dim)}
.chap[data-theme=light]{background:var(--bg-2);color:var(--ink)}
.chap[data-theme=light] .chap__lead{color:#48597A}
.chap--future{background:linear-gradient(180deg,var(--bg-5),var(--bg-4))}

/* ============================================================
   I. TIMELINE, horizontal scrub
   ============================================================ */
.tl{position:relative}
.tl__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.tl__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:26px}
.tl__label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-dim)}
.tl__era{font-family:var(--mono);font-size:clamp(28px,5vw,64px);color:var(--accent);letter-spacing:-.02em;line-height:1}
.tl__viewport{overflow:hidden;width:100%}
.tl__track{display:flex;gap:clamp(18px,2.4vw,34px);padding:0 calc((100vw - var(--content))/2);will-change:transform}
.tlc{
  flex:0 0 clamp(280px,32vw,420px);background:rgba(99,177,255,.05);
  border:1px solid rgba(99,177,255,.16);border-radius:20px;padding:clamp(22px,2.4vw,32px);
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .26s var(--ease),opacity .22s var(--ease);
  opacity:.35;transform:scale(.97);
}
.tlc.is-on{opacity:1;transform:none;background:rgba(99,177,255,.1);border-color:rgba(99,177,255,.4)}
.tlc__yr{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent);margin-bottom:14px}
.tlc__h{font-size:clamp(20px,2.1vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px;color:#fff}
.tlc p{font-size:15px;line-height:1.6;color:var(--paper-dim)}
.tlc__pt{margin-top:16px;padding-top:14px;border-top:1px solid rgba(99,177,255,.18);color:var(--accent) !important;font-weight:500}
.tlc__pt a{color:inherit}
.tlc--now{background:rgba(99,177,255,.09);border-color:rgba(99,177,255,.3)}
.tl__bar{margin:30px auto 0;width:var(--content);height:2px;background:rgba(99,177,255,.14);border-radius:2px}
.tl__bar span{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}

/* ============================================================
   II. FIVE WALLS
   ============================================================ */
.walls{position:relative}
/* Sized to sit inside one viewport: a sticky box taller than the screen
   bottoms out and slides up at the end of the scene. min-height (not height)
   so an unusually short viewport drifts a little rather than clipping copy. */
.walls__sticky{
  position:sticky;top:0;min-height:100svh;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,70px);align-items:center;padding:24px 0;
}
.walls__diagram{display:flex;justify-content:center}
.wsvg{width:min(340px,80%);height:auto;overflow:visible}
.wroof{fill:none;stroke:#A9BCDA;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.2;transition:all .6s var(--ease)}
.wpil{fill:#A9BCDA;opacity:.16;transition:all .6s var(--ease)}
.wbase{fill:#A9BCDA;opacity:.16;transition:all .6s var(--ease)}
.wpil.is-has,.wbase.is-has{fill:var(--accent-deep);opacity:1}
.wpil.is-missing,.wbase.is-missing{fill:none;stroke:var(--warn);stroke-width:2;stroke-dasharray:6 6;opacity:1}
.wroof.is-on{opacity:1;stroke:var(--accent-deep)}
.wpil.is-on,.wbase.is-on{fill:var(--accent-deep);opacity:1;stroke:none}

.walls__list{list-style:none;display:grid;gap:7px}
.wall{
  padding:12px 18px;border-radius:14px;border:1px solid transparent;
  opacity:.4;transition:all .5s var(--ease);
}
.wall.is-on{opacity:1;background:rgba(16,31,60,.05);border-color:rgba(16,31,60,.1)}
.wall__tag{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 8px;border-radius:99px;margin-bottom:6px;
}
.wall.is-has .wall__tag{background:rgba(26,106,255,.12);color:var(--accent-deep)}
.wall.is-missing .wall__tag{background:rgba(230,180,90,.2);color:#8A6112}
.wall h3{font-size:clamp(18px,1.75vw,22px);font-weight:600;letter-spacing:-.02em;margin-bottom:3px}
.wall p{font-size:14.5px;line-height:1.45;color:#48597A}

/* ============================================================
   III. THE GAP CHART
   ============================================================ */
.gap{position:relative}
.gap__sticky{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.gap__chartwrap{width:100%}
.gapsvg{width:100%;height:auto;overflow:visible}
.gap__grid line{stroke:rgba(99,177,255,.1);stroke-width:1}
.gap__line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gap__line--need{stroke:var(--accent)}
.gap__line--have{stroke:var(--warn)}
.gap__band rect{fill:rgba(99,177,255,.07);stroke:rgba(99,177,255,.3);stroke-dasharray:5 5;transition:opacity .6s var(--ease)}
.gap__bandt{fill:var(--accent);font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.gap__axis text{fill:var(--paper-dim);font-family:var(--mono);font-size:12px}
.gap__key{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:16px;padding-left:70px}
.gkey{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim)}
.gkey i{width:16px;height:3px;border-radius:2px;background:var(--accent)}
.gkey--have i{background:var(--warn)}
.gap__note{font-family:var(--mono);font-size:11px;color:#5C6E8E;letter-spacing:.04em}
.gap__stages{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;padding-left:70px}
.gstage{
  padding:9px 15px;border-radius:99px;border:1px solid rgba(99,177,255,.16);
  font-size:13px;color:var(--paper-dim);opacity:.4;transition:all .5s var(--ease);
}
.gstage b{color:var(--accent);font-family:var(--mono);font-size:12px;margin-right:9px;font-weight:400}
.gstage.is-on{opacity:1;border-color:rgba(99,177,255,.45);background:rgba(99,177,255,.08)}
.gap__punch{
  margin-top:22px;max-width:70ch;font-size:clamp(15px,1.4vw,18px);line-height:1.55;
  color:var(--paper);opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.gap__punch.is-on{opacity:1;transform:none}

/* ============================================================
   IV. WHY NOW, stat grid
   ============================================================ */
.now__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  padding-bottom:clamp(90px,13vh,150px);
}
.nowcard{
  background:rgba(255,255,255,.55);border:1px solid rgba(16,31,60,.09);
  border-radius:20px;padding:clamp(22px,2.4vw,32px);
}
.nowcard--wide{grid-column:span 3}
.nowcard__num{
  font-size:clamp(38px,4.6vw,62px);font-weight:600;letter-spacing:-.03em;line-height:1;
  color:var(--accent-deep);margin-bottom:14px;
}
.nowcard__k{font-size:clamp(16px,1.5vw,19px);font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.nowcard--wide .nowcard__k{margin-bottom:20px}
.nowcard__sub{font-size:14px;line-height:1.55;color:#48597A}
.nowcard sup a{color:var(--accent-deep);text-decoration:none;font-size:10px;padding-left:1px}

.genbars{display:grid;gap:14px}
.genbar{display:grid;grid-template-columns:130px 1fr 52px;align-items:center;gap:14px}
.genbar__l{font-size:14px;font-weight:500}
.genbar__t{display:block;height:14px;background:rgba(16,31,60,.07);border-radius:99px;overflow:hidden}
.genbar__t i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-deep));border-radius:99px;transition:width 1.3s var(--ease)}
.genbar__v{font-family:var(--mono);font-size:14px;color:var(--accent-deep);text-align:right}

/* ============================================================
   V. HANDSHAKE / STRUCTURED FLIP
   ============================================================ */
.flips{padding-bottom:clamp(90px,13vh,150px)}
.flipsw{
  position:relative;display:inline-flex;padding:5px;border-radius:99px;
  background:rgba(99,177,255,.08);border:1px solid rgba(99,177,255,.2);
  cursor:pointer;margin-bottom:34px;
}
.flipsw__o{
  position:relative;z-index:2;padding:9px 20px;border-radius:99px;font-family:var(--mono);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim);
  transition:color .35s var(--ease);
}
.flipsw__pill{
  position:absolute;z-index:1;top:5px;left:5px;height:calc(100% - 10px);
  border-radius:99px;background:var(--warn);transition:transform .4s var(--ease),background .4s var(--ease);
}
.flipsw .flipsw__o:first-of-type{color:#33260C}
.flipsw[aria-pressed=true] .flipsw__o:first-of-type{color:var(--paper-dim)}
.flipsw[aria-pressed=true] .flipsw__o:last-of-type{color:#04203F}
.flipsw[aria-pressed=true] .flipsw__pill{background:var(--accent)}

.flist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fitem{
  padding:clamp(20px,2.2vw,28px);border-radius:18px;
  background:rgba(99,177,255,.05);border:1px solid rgba(99,177,255,.14);
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.fitem__h{font-size:clamp(17px,1.7vw,21px);font-weight:600;letter-spacing:-.02em;margin-bottom:11px;color:#fff}
.fitem__a,.fitem__b{font-size:15px;line-height:1.6}
.fitem__a{color:var(--warn)}
.fitem__b{color:var(--accent);display:none}
.flips.is-structured .fitem__a{display:none}
.flips.is-structured .fitem__b{display:block}
.flips.is-structured .fitem{background:rgba(99,177,255,.08);border-color:rgba(99,177,255,.32)}

/* ============================================================
   VI. FOUR WALLS / FUTURE
   ============================================================ */
.future__wrap{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,5vw,80px);align-items:center;padding-bottom:clamp(90px,13vh,150px);
}
.future__build{display:flex;justify-content:center}
.wsvg--done .wpil,.wsvg--done .wbase{fill:var(--accent)}
.wsvg--done .wroof{stroke:var(--accent)}
.future__list{list-style:none;display:grid;gap:22px;margin-bottom:34px}
.future__list li{display:grid;gap:6px;padding-left:20px;border-left:2px solid rgba(99,177,255,.35)}
.future__list b{font-size:clamp(17px,1.7vw,21px);font-weight:600;letter-spacing:-.02em;color:#fff}
.future__list span{font-size:15px;line-height:1.6;color:var(--paper-dim)}
.future__kicker{font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:var(--paper);max-width:60ch}
.future__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn--ghost{
  display:inline-flex;align-items:center;padding:13px 24px;border-radius:99px;
  border:1px solid rgba(99,177,255,.4);color:var(--accent);text-decoration:none;
  font-size:15px;font-weight:500;transition:background .3s var(--ease),border-color .3s var(--ease);
}
.btn--ghost:hover{background:rgba(99,177,255,.1);border-color:var(--accent)}

/* ============================================================
   SOURCES
   ============================================================ */
.chap--sources{padding:clamp(80px,11vh,130px) 0}
.src__h{font-size:clamp(26px,3.4vw,42px);font-weight:500;letter-spacing:-.03em;margin:16px 0 34px}
.srclist{display:grid;gap:16px;max-width:900px;padding-left:22px}
.srclist li{font-size:15px;line-height:1.6}
.srclist a{color:var(--accent-deep);text-decoration:none;border-bottom:1px solid rgba(26,106,255,.3)}
.srclist a:hover{border-bottom-color:var(--accent-deep)}
.srclist span{display:block;color:#48597A;font-size:14px;margin-top:3px}
.srcnote{
  margin-top:34px;max-width:70ch;font-size:14px;line-height:1.6;color:#48597A;
  padding-left:22px;border-left:2px solid rgba(16,31,60,.12);
}

/* ============================================================
   SHORT VIEWPORTS
   Small laptops run ~640-720px of usable height. Without this the pinned
   scenes are taller than the screen and slide up as they release. Only the
   scrubbed scenes need it, so it is scoped above the mobile breakpoint.
   ============================================================ */
@media(min-width:901px) and (max-height:780px){
  .wall{padding:9px 16px}
  .wall h3{font-size:18px;margin-bottom:2px}
  .wall p{font-size:13.5px;line-height:1.4}
  .wall__tag{margin-bottom:4px;font-size:9px}
  .walls__list{gap:5px}
  .walls__sticky{padding:16px 0}
  .gap__sticky{padding:16px 0}
  .gapsvg{max-height:56svh}
  .gap__key{margin-top:10px}
  .gap__stages{margin-top:12px;gap:8px}
  .gstage{padding:7px 12px;font-size:12.5px}
  .gap__punch{margin-top:14px;font-size:15px;line-height:1.5}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  /* Phones keep the scrubbed scenes; the layouts change, not the behaviour. */
  .future__wrap{grid-template-columns:1fr}
  .now__grid{grid-template-columns:repeat(2,1fr)}
  .nowcard--wide{grid-column:span 2}
  .flist{grid-template-columns:1fr}

  /* --- I. timeline: same horizontal scrub, one card per screen --- */
  .tl__sticky{height:100svh;padding:0}
  .tl__head{padding:0 0 18px}
  .tl__era{font-size:clamp(30px,10vw,52px)}
  .tl__track{padding:0 calc((100vw - var(--content))/2);gap:14px}
  .tlc{flex-basis:var(--content);padding:22px}
  .tlc__h{font-size:22px;margin-bottom:10px}
  .tlc p{font-size:14.5px;line-height:1.55}
  .tlc__pt{margin-top:12px;padding-top:11px}
  .tl__bar{margin-top:20px}

  /* --- II. walls: diagram pinned, one component explained at a time --- */
  .walls__sticky{
    grid-template-columns:1fr;grid-template-rows:auto 1fr;
    height:100svh;gap:22px;align-content:center;padding:0;
  }
  .walls__diagram{order:-1}
  .wsvg{width:min(260px,64%)}
  .walls__list{gap:0;position:relative}
  .wall{display:none;opacity:1;background:rgba(16,31,60,.05);border-color:rgba(16,31,60,.1)}
  .wall.is-current{display:block}
  .wall h3{font-size:24px}
  .wall p{font-size:15px;line-height:1.5}

  /* --- III. the gap chart: same draw-on, stacked below --- */
  .gap__sticky{height:100svh;padding:0;justify-content:center}
  .gap__key,.gap__stages{padding-left:0}
  .gap__key{gap:16px;margin-top:12px}
  .gap__stages{gap:7px;margin-top:14px}
  .gstage{padding:6px 11px;font-size:12px}
  .gstage b{margin-right:6px;font-size:11px}
  .gap__punch{margin-top:16px;font-size:15px;line-height:1.5}
  .gap__bandt{font-size:20px}
  .gap__axis text{font-size:20px}
}
@media(max-width:600px){
  .now__grid{grid-template-columns:1fr}
  .nowcard--wide{grid-column:span 1}
  /* "Baby Boomers" wraps to two lines and skews the row at the default size */
  .genbar{grid-template-columns:102px 1fr 40px;gap:9px}
  .genbar__l{font-size:13px}
  .bhero__vault{opacity:.28;right:-30%}
}

/* ============================================================
   REDUCED MOTION: everything resolved, nothing scrubbed
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .bv--1,.bv--4,.bv__spokes,.bhero__glow{animation:none}
  .bhero__title .w{transform:none !important;opacity:1 !important}
  .tl__sticky,.walls__sticky,.gap__sticky{position:static;height:auto;min-height:0}
  .tl__viewport{overflow-x:auto}
  .tl__track{transform:none !important;flex-wrap:wrap}
  .tlc,.wall,.gstage{opacity:1 !important;transform:none !important}
  .wall{display:block !important}
  .gap__punch{opacity:1 !important;transform:none !important}
  .genbar__t i{transition:none}
}