/* Hero story: one continuous scene — photos become characters, characters enter the book,
   the finished book splits into a printed copy and a phone copy.
   Every position is in container units (cqw) on a 100 × 92 stage, so the scene scales as one piece.
   hero-story.js sets the active steps as words in data-f; CSS animates the difference. */

.hero-story { position: relative; z-index: 1; justify-self: center; width: 100%; max-width: 600px; }
.story-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.story { position: relative; }
.story-stage { position: relative; container-type: inline-size; aspect-ratio: 100 / 92; transition: opacity .9s ease; }
.story[data-f~=fade] .story-stage { opacity: 0; }
.story[data-f~=snap] *, .is-static * { transition: none !important; }

/* Soft pearlescent halo */
.glow {
  position: absolute;
  left: 12cqw;
  top: 8cqw;
  width: 76cqw;
  height: 76cqw;
  border: 1px solid var(--stage-glow-edge);
  border-radius: 50%;
  background: var(--stage-glow-fill);
  box-shadow: var(--stage-glow-shadow);
}

/* Short stage labels */
.stage-labels { position: absolute; left: 0; right: 0; top: 0; z-index: 9; height: 6cqw; }
.lbl {
  position: absolute;
  left: 50%;
  top: 0;
  padding: .9cqw 2.2cqw;
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: max(11px, 2.5cqw);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  translate: -50% .8cqw;
  transition: opacity .7s ease, translate .7s ease;
}
.story[data-f~=lbl1] .lbl1, .story[data-f~=lbl2] .lbl2, .story[data-f~=lbl3] .lbl3, .story[data-f~=lbl4] .lbl4 { opacity: 1; translate: -50% 0; }

/* Movable pieces share one coordinate system. */
.mv {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--w) * 1cqw);
  transform-origin: 0 0;
  transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqw)) scale(var(--s, 1)) rotate(var(--r, 0deg));
  opacity: var(--o, 0);
  transition: transform 1s var(--ease-story), opacity .75s ease;
}
.mv img { display: block; width: 100%; height: auto; }

/* 1 · Family photos */
.photo { --w: 21; --o: 0; z-index: 3; padding: 1.1cqw 1.1cqw 3.4cqw; border-radius: 1.2cqw; background: var(--photo-frame); box-shadow: var(--photo-shadow); }
.photo-media { position: relative; overflow: hidden; border-radius: .6cqw; background: var(--photo-placeholder); }
.photo-media img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.p-mom { --x: 9.5; --y: 12; --r: -4deg; }
.p-child { --x: 39.5; --y: 11; --r: 1.5deg; }
.p-dad { --x: 69.5; --y: 12; --r: 4deg; }
.story[data-f~=photos] .photo { --o: 1; --y: 8; }

/* 2 · Short arrows + characters */
.arrows, .fork, .route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arrows { z-index: 2; }
.arrows path, .fork path { fill: none; stroke: var(--story-line); stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease; }
.arrows path:nth-child(2) { transition-delay: .15s; }
.arrows path:nth-child(3) { transition-delay: .3s; }
.story[data-f~=arrows] .arrows path { stroke-dashoffset: 0; }

.toon { --w: 19; z-index: 4; filter: drop-shadow(0 .8cqw 1cqw var(--toon-shadow)); }
.toon img { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.k-mom { --x: 12; --y: 14; --s: .8; }
.k-child { --x: 42; --y: 13; --s: .7; }
.k-dad { --x: 72; --y: 14; --s: .8; }
.story[data-f~=toons] .toon { --o: 1; }
.story[data-f~=toons] .k-mom { --x: 10.5; --y: 48; --s: 1; }
.story[data-f~=toons] .k-child { --x: 41.9; --y: 50.9; --s: .85; }
.story[data-f~=toons] .k-dad { --x: 70.5; --y: 48; --s: 1; }
.story[data-f~=up] .k-mom { --y: 12; }
.story[data-f~=up] .k-child { --y: 14.9; }
.story[data-f~=up] .k-dad { --y: 12; }
.story[data-f~=inpage] .toon { transition-duration: 1.2s, .5s; }
.story[data-f~=inpage] .k-mom { --x: 17.5; --y: 72.3; --s: .5; }
.story[data-f~=inpage] .k-child { --x: 25.6; --y: 73.8; --s: .42; }
.story[data-f~=inpage] .k-dad { --x: 32.6; --y: 72.3; --s: .5; }
/* The soft "transformation" light behind each new character */
.toon::before { content: ''; position: absolute; inset: -12% -8%; z-index: -1; border-radius: 50%; background: var(--toon-halo); opacity: 0; scale: .6; transition: opacity 1s ease .2s, scale 1.4s ease .2s; }
.story[data-f~=arrows] .toon::before { opacity: 1; scale: 1; }

/* 3 · The book */
.tome { position: absolute; left: 14cqw; top: 40cqw; z-index: 3; width: 72cqw; height: 44cqw; opacity: 0; transform: translate(-18cqw, 3cqw); transition: transform 1s var(--ease-story), opacity .5s ease; filter: drop-shadow(0 1.4cqw 2cqw var(--book-shadow)); }
.story[data-f~=book] .tome { opacity: 1; transform: translate(-18cqw, 0); }
.story[data-f~=open] .tome { transform: none; }
/* The finished book stays as the source, small and centred, while its two copies travel out. */
.story[data-f~=split] .tome { opacity: 1; transform: translate(-18cqw, -27cqw) scale(.48); transition-duration: 1.1s, .4s; }

.page { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--paper); }
.page-left { left: 0; border-radius: 1.6cqw 0 0 1.6cqw; background: linear-gradient(90deg, var(--paper) 85%, var(--page-edge-left)); opacity: 0; transition: opacity .3s ease .5s; }
.story[data-f~=open] .page-left { opacity: 1; transition-delay: .45s; }
.page-right, .leaf-front { display: flex; flex-direction: column; gap: 1.75cqw; padding: 5cqw 3.6cqw 0 4cqw; background: linear-gradient(90deg, var(--page-edge-right), var(--paper) 14%); }
.page-right { left: 50%; border-radius: 0 1.6cqw 1.6cqw 0; }

/* Text lines "write" themselves one after another. */
.ln { display: block; width: 100%; height: 1cqw; border-radius: 1cqw; background: var(--text-line); transform-origin: left; transform: scaleX(0); }
.ln.t { width: 62%; height: 1.5cqw; margin-bottom: .8cqw; background: var(--text-line-title); }
.ln.s { width: 68%; }
.page-right .ln { transition: none; }
.story[data-f~=write] .page-right .ln { transform: scaleX(1); transition: transform .45s ease; }
.story[data-f~=write] .page-right .ln:nth-child(2) { transition-delay: .25s; }
.story[data-f~=write] .page-right .ln:nth-child(3) { transition-delay: .5s; }
.story[data-f~=write] .page-right .ln:nth-child(4) { transition-delay: .75s; }
.story[data-f~=write] .page-right .ln:nth-child(5) { transition-delay: 1s; }
.story[data-f~=write] .page-right .ln:nth-child(6) { transition-delay: 1.25s; }
.pg-num { position: absolute; right: 2.6cqw; bottom: 2cqw; color: var(--page-number); font-size: max(8px, 1.5cqw); font-weight: var(--weight-bold); }
.pg-num::after { content: '4'; }
.story[data-f~=pg2] .pg-num::after { content: '5'; }
.story[data-f~=pg3] .pg-num::after { content: '6'; }

/* Left-page illustration appears piece by piece; it changes with each page. */
.art { position: absolute; inset: 2.2cqw 2.4cqw 2.2cqw 2.2cqw; overflow: hidden; border-radius: 1cqw; background: var(--art-day); transition: background 1s ease .5s; }
.art > * { position: absolute; opacity: 0; translate: 0 1cqw; transition: opacity .6s ease, translate .6s ease, background .8s ease .5s, top .8s ease .5s; }
.story[data-f~=scenery] .art > * { opacity: 1; translate: 0 0; }
.story[data-f~=scenery] .art > :nth-child(2) { transition-delay: .2s, .2s, .4s, .4s; }
.story[data-f~=scenery] .art > :nth-child(3) { transition-delay: .4s, .4s, .4s, .4s; }
.story[data-f~=scenery] .art > :nth-child(4) { transition-delay: .6s, .6s, .4s, .4s; }
.story[data-f~=scenery] .art > :nth-child(5) { transition-delay: .8s, .8s, .4s, .4s; }
.art .psun { right: 4cqw; top: 3cqw; width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--sun); box-shadow: 0 0 2.4cqw var(--sun-glow); }
.hill { border-radius: 50%; background: var(--hill-near); }
.hill.h1 { left: -6cqw; bottom: -9cqw; width: 26cqw; height: 17cqw; }
.hill.h2 { right: -8cqw; bottom: -11cqw; width: 26cqw; height: 18cqw; background: var(--hill-far); }
.tree { right: 1.8cqw; bottom: 12cqw; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--tree); box-shadow: 0 2.6cqw 0 -1.8cqw var(--trunk); }
.lamb-mini { right: 1cqw; bottom: 3.2cqw; width: 5.2cqw; height: auto; }
.story[data-f~=pg2] .art { background: var(--art-dusk); }
.story[data-f~=pg2] .psun { top: 8cqw; background: var(--art-sun-dusk); }
.story[data-f~=pg3] .art { background: var(--art-night); }
.story[data-f~=pg3] .psun { background: var(--art-moon); box-shadow: 0 0 2cqw var(--art-moon-glow); }
.story[data-f~=pg3] .hill.h1 { background: var(--hill-near-night); }
.story[data-f~=pg3] .hill.h2 { background: var(--hill-far-night); }
.story[data-f~=pg3] .tree { background: var(--tree-night); }

/* Cover: hinged at the spine; its inside lining fades once it lies open. */
.tcover { position: absolute; left: 50%; top: 0; z-index: 3; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transform: perspective(160cqw) rotateY(0); transition: transform 1.1s cubic-bezier(.5, .1, .3, 1); }
.story[data-f~=open] .tcover { transform: perspective(160cqw) rotateY(-180deg); }
.cover-front, .cover-back, .leaf-front, .leaf-back { position: absolute; inset: 0; border-radius: 0 1.6cqw 1.6cqw 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cover-back { transform: rotateY(180deg); background: var(--cover-lining); opacity: 1; transition: opacity .2s; }
.story[data-f~=open] .cover-back { opacity: 0; transition: opacity .5s ease .85s; }
.cover-front { display: flex; flex-direction: column; align-items: center; padding: 4.6cqw 2cqw 0; text-align: center; color: var(--color-white); background: var(--cover-fill); box-shadow: inset 1.6cqw 0 1.4cqw -1cqw var(--cover-spine); }
.cover-front small { font-size: max(6px, 1.3cqw); font-weight: var(--weight-bold); letter-spacing: .22em; opacity: .85; }
.cover-front strong { display: block; margin-top: 2cqw; font-size: 4.2cqw; line-height: 1.08; font-weight: var(--weight-bold); letter-spacing: -.01em; }
.cover-faces { display: flex; justify-content: center; align-items: flex-end; gap: 0; width: 100%; margin-top: auto; padding: 0 1cqw 2.6cqw; background: radial-gradient(ellipse at 50% 120%, var(--cover-faces-light), transparent 65%); }
.cover-faces img { width: 8.4cqw; aspect-ratio: 1; margin: 0 -.5cqw; object-fit: cover; object-position: 50% 10%; border: .35cqw solid var(--cover-face-edge); border-radius: 50%; background: var(--cover-face-bg); box-shadow: 0 .4cqw .8cqw var(--cover-face-shadow); }
.cover-faces img:nth-child(2) { position: relative; z-index: 1; width: 7.4cqw; }

/* Page turns */
.leaf { position: absolute; left: 50%; top: 0; z-index: 2; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; opacity: 0; pointer-events: none; }
.leaf-front .ln { transform: none; }
.leaf-back { transform: rotateY(180deg); background: linear-gradient(270deg, var(--paper) 80%, var(--page-edge-left)); }
.story[data-f~=flip] .leaf { animation: leaf-turn 1s cubic-bezier(.45, .05, .3, 1) forwards; }
@keyframes leaf-turn { 0% { opacity: 1; transform: perspective(160cqw) rotateY(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: perspective(160cqw) rotateY(-180deg); } }

/* 4 · The finished book becomes two experiences */
.fork { z-index: 1; }
.fork path { stroke-width: .45; opacity: .7; transition: stroke-dashoffset 1.2s ease .2s; }
.story[data-f~=fork] .fork path { stroke-dashoffset: 0; }
.copy { --w: 36; --x: 32; --y: 40; --s: 1; z-index: 5; }
.copy > span { display: block; aspect-ratio: 36 / 44; container-type: normal; }
.copy .cover-front { position: relative; inset: auto; width: 100%; height: 100%; box-shadow: inset 1.6cqw 0 1.4cqw -1cqw var(--cover-spine), 0 1cqw 2cqw var(--copy-shadow); }
.story[data-f~=split] .copy { --o: 1; transition: transform 1.1s var(--ease-story), opacity .25s ease; }
.story[data-f~=split] .copy-print { --x: 20; --y: 52; --s: .32; --r: -5deg; }
.story[data-f~=split] .copy-digital { --x: 63; --y: 43; --s: .32; --r: 4deg; z-index: 7; }
.story[data-f~=boxed] .copy-print { --x: 22.5; --y: 70.6; --s: .25; --r: 0deg; --o: 0; transition: transform .9s var(--ease-story), opacity .3s ease .8s; }
.story[data-f~=phone] .copy-digital { --x: 70.4; --y: 45; --s: .28; --r: 0deg; }

/* Printed copy: parcel slides to the house */
.deliver { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.box { position: absolute; left: 19cqw; top: 70cqw; width: 16cqw; height: 12cqw; opacity: 0; transform: translateY(2cqw); transition: opacity .7s ease, transform 1.3s var(--ease-story); }
.story[data-f~=split] .box { opacity: 1; transform: none; transition-delay: .4s, 0s; }
.story[data-f~=sent] .box { transform: translateX(-6cqw); transition-delay: 0s, .3s; }
.box-body { position: absolute; left: 0; right: 0; bottom: 0; height: 9cqw; border-radius: .4cqw .4cqw 1cqw 1cqw; background: var(--parcel); box-shadow: 0 1cqw 1.6cqw var(--parcel-shadow); }
.ribbon { position: absolute; left: calc(50% - 1cqw); bottom: 0; z-index: 1; width: 2cqw; height: 9cqw; background: var(--ribbon); }
.lid { position: absolute; left: -.7cqw; right: -.7cqw; top: 0; z-index: 2; height: 3.2cqw; border-radius: .7cqw; background: var(--parcel-lid); box-shadow: 0 .4cqw .8cqw var(--parcel-lid-shadow); transform-origin: 0 100%; transform: translate(-1cqw, -3.4cqw) rotate(-24deg); transition: transform .8s var(--ease-story) .7s; }
.lid::after { content: ''; position: absolute; left: calc(50% - 1cqw); top: 0; bottom: 0; width: 2cqw; background: var(--ribbon-lid); }
.story[data-f~=boxed] .lid { transform: none; }
.house { position: absolute; left: 1.2cqw; top: 69cqw; width: 9cqw; height: 13cqw; opacity: 0; transition: opacity .8s ease .6s; }
.story[data-f~=split] .house { opacity: 1; }
.roof { position: absolute; left: -.6cqw; right: -.6cqw; top: 0; height: 5cqw; border-radius: .4cqw; background: var(--roof); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.wall { position: absolute; left: .6cqw; right: .6cqw; top: 5cqw; bottom: 0; border-radius: 0 0 .6cqw .6cqw; background: var(--wall); box-shadow: 0 .8cqw 1.4cqw var(--wall-shadow); }
.wall i { position: absolute; left: calc(50% - 1.3cqw); bottom: 0; width: 2.6cqw; height: 4.4cqw; border-radius: 1.3cqw 1.3cqw 0 0; background: var(--door); }
.heart { position: absolute; left: 50%; top: -4.6cqw; color: var(--house-heart); font-size: 3cqw; opacity: 0; translate: -50% 1cqw; transition: opacity .6s ease, translate .8s ease; }
.story[data-f~=sent] .heart { opacity: 1; translate: -50% 0; transition-delay: 1.4s; }
/* Motion trail behind the box once it has slid next to the house — never under it. */
.route { z-index: 5; }
.route path { fill: none; stroke: var(--route); stroke-width: .55; stroke-linecap: round; stroke-dasharray: .01 1.5; opacity: 0; translate: -2cqw 0; transition: opacity .5s ease, translate .9s ease; }
.story[data-f~=sent] .route path { opacity: .9; translate: 0 0; transition-delay: .7s; }

/* Digital copy: phone with a playable sample */
.phone { position: absolute; left: 65cqw; top: 40cqw; z-index: 4; width: 21cqw; height: 42cqw; padding: 1.3cqw; border-radius: 3.6cqw; background: var(--phone-body); box-shadow: var(--phone-shadow); opacity: 0; transform: translateY(3cqw); transition: opacity .8s ease .3s, transform 1.2s var(--ease-story) .3s; }
.story[data-f~=split] .phone { opacity: 1; transform: none; }
.screen { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding-top: 17.4cqw; overflow: hidden; border-radius: 2.5cqw; background: var(--phone-screen); }
.screen::before { content: ''; position: absolute; top: .9cqw; left: calc(50% - 2.6cqw); width: 5.2cqw; height: 1.1cqw; border-radius: 1cqw; background: var(--phone-notch); }
.play { position: relative; z-index: 8; display: grid; place-items: center; width: max(30px, 7.2cqw); height: max(30px, 7.2cqw); border: 1px solid var(--play-edge); border-radius: 50%; background: var(--btn-fill); box-shadow: inset 0 1px 1px var(--btn-highlight), 0 .8cqw 1.6cqw var(--play-shadow); cursor: pointer; opacity: 0; transition: opacity .6s ease, box-shadow .4s ease; }
.story[data-f~=phone] .play, .is-static .play { opacity: 1; transition-delay: 1s, 0s; }
.play:hover { box-shadow: inset 0 1px 1px var(--btn-highlight), 0 .8cqw 2.4cqw var(--play-glow); }
.play:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.play-ico { display: block; width: 0; height: 0; margin-left: 12%; border-style: solid; border-width: max(6px, 1.4cqw) 0 max(6px, 1.4cqw) max(10px, 2.3cqw); border-color: transparent transparent transparent var(--btn-text); }
.is-playing .play-ico { width: max(10px, 2.3cqw); height: max(12px, 2.8cqw); margin-left: 0; border: 0; background: linear-gradient(90deg, var(--btn-text) 0 35%, transparent 35% 65%, var(--btn-text) 65%); }
.waves { display: flex; align-items: center; gap: .55cqw; height: 5cqw; margin-top: 1.8cqw; opacity: 0; transition: opacity .6s ease 1.2s; }
.story[data-f~=phone] .waves, .is-static .waves { opacity: 1; }
.waves i { display: block; width: .75cqw; height: 4.4cqw; border-radius: 1cqw; background: var(--wave); transform-origin: center; transform: scaleY(.35); animation: wave 1.6s ease-in-out infinite alternate; }
.waves i:nth-child(2n) { background: var(--wave-alt); animation-duration: 1.3s; }
.waves i:nth-child(3n) { animation-duration: 1.9s; }
.waves i:nth-child(1) { animation-delay: -.2s; }
.waves i:nth-child(2) { animation-delay: -.9s; }
.waves i:nth-child(3) { animation-delay: -.4s; }
.waves i:nth-child(4) { animation-delay: -1.2s; }
.waves i:nth-child(5) { animation-delay: -.6s; }
.waves i:nth-child(6) { animation-delay: -1.4s; }
.waves i:nth-child(7) { animation-delay: -.1s; }
.waves i:nth-child(8) { animation-delay: -.8s; }
.waves i:nth-child(9) { animation-delay: -1.1s; }
.is-playing .waves i { background: var(--wave-playing); animation-duration: .8s; }
.is-playing .waves i:nth-child(2n) { background: var(--wave-playing-alt); animation-duration: .65s; }
@keyframes wave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.sample-tag { margin-top: 1.6cqw; color: var(--sample-tag); font-size: max(8px, 1.4cqw); font-weight: var(--weight-bold); letter-spacing: .06em; opacity: 0; transition: opacity .6s ease 1.3s; }
.story[data-f~=phone] .sample-tag, .is-static .sample-tag { opacity: 1; }

.branch-caps span { position: absolute; top: 85.5cqw; color: var(--color-muted); font-size: max(10px, 2.2cqw); font-weight: var(--weight-bold); white-space: nowrap; opacity: 0; translate: -50% .8cqw; transition: opacity .7s ease, translate .7s ease; }
.cap-print { left: 20cqw; }
.cap-digital { left: 75.5cqw; }
.story[data-f~=split] .branch-caps span { opacity: 1; translate: -50% 0; transition-delay: .9s; }

/* Pause and voice-over controls (WCAG 2.2.2) */
.story-pause, .story-voice {
  position: absolute;
  top: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--color-muted);
  cursor: pointer;
}
.story-pause { right: 0; transition: color .3s; }
.story-voice { right: 42px; transition: color .3s; }
/* No opacity on the buttons themselves: it would let the sky show through the glass blur */
.story-pause:hover, .story-pause:focus-visible, .story-voice:hover, .story-voice:focus-visible { color: var(--color-ink); }
.story-pause span { width: 10px; height: 11px; background: linear-gradient(90deg, currentColor 0 33%, transparent 33% 67%, currentColor 67%); }
.story-pause[aria-pressed=true] span { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; background: none; }
.story.is-paused * { animation-play-state: paused !important; }
.story-voice svg { width: 17px; height: 17px; }
.story-voice .v-on { display: none; }
.story-voice[aria-pressed=true] { color: var(--color-accent); }
.story-voice[aria-pressed=true] .v-on { display: inline; }
.story-voice[aria-pressed=true] .v-off { display: none; }

/* Calm alternative: three still frames that tell the same story. */
.story-static { display: none; }
.sf { position: relative; overflow: hidden; border-radius: var(--radius-scene); }
.sf h3 { margin: 0 0 8px; color: var(--color-muted); font-size: var(--text-250); font-weight: var(--weight-bold); letter-spacing: .02em; text-align: center; }
.sf-crop { position: relative; overflow: hidden; }
.sf-crop .story-stage { margin-top: calc(var(--crop) * -1%); }
.sf-a .sf-crop { --crop: 7; aspect-ratio: 100 / 66; }
.sf-b .sf-crop { --crop: 36; aspect-ratio: 100 / 50; }
.sf-c .sf-crop { --crop: 20; aspect-ratio: 100 / 72; }
.is-static .stage-labels, .is-static .glow { display: none; }

@media (max-width: 700px) {
  .hero-story { max-width: 440px; }
  .story-pause, .story-voice { width: 30px; height: 30px; }
  .story-voice { right: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-story > .story { display: none; }
  .hero-story .story-static { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; align-items: end; }
  .story-static .sf-c { grid-column: 1 / -1; justify-self: center; width: min(100%, 78%); }
  .waves i { animation: none !important; }
  .waves i:nth-child(1) { transform: scaleY(.4); }
  .waves i:nth-child(2) { transform: scaleY(.75); }
  .waves i:nth-child(3) { transform: scaleY(.5); }
  .waves i:nth-child(4) { transform: scaleY(1); }
  .waves i:nth-child(5) { transform: scaleY(.6); }
  .waves i:nth-child(6) { transform: scaleY(.85); }
  .waves i:nth-child(7) { transform: scaleY(.45); }
  .waves i:nth-child(8) { transform: scaleY(.7); }
  .waves i:nth-child(9) { transform: scaleY(.35); }
}

@media (forced-colors: active) {
  .glow { display: none; }
  .lbl, .photo, .phone { border: 1px solid CanvasText; }
}