/* Site motion (8 Oct 2026): the video's graphics, drawn on the page and played as you scroll.
   Without JavaScript, or with reduced motion, everything shows in its finished state. */
.pr-story,.container.hp > section.pr-story{margin:clamp(2.5rem,5vw,3.5rem) 0 0;background:#172A1F;border-radius:18px;color:#EFF4EC;padding:clamp(1.8rem,4vw,3.2rem);display:grid;gap:clamp(2.2rem,5vw,3.5rem);overflow:hidden}
.pr-story-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.pr-story-row.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.pr-story-row.flip .pr-story-art{order:-1}
.container.hp .pr-story h2,.pr-story h2{color:#EFF4EC;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 .7rem}
.pr-story h2 .hl{color:#C9A24B}
.pr-story p{margin:0;color:#C7D4C8;line-height:1.6;font-size:1.05rem;max-width:40ch}
.pr-story-art svg{display:block;width:100%;height:auto;overflow:visible}
.pr-hub .spoke{stroke:#C9A24B;stroke-width:4;stroke-dasharray:6 7;opacity:.8}
.pr-hub .node rect{fill:#2A4535;stroke:#C7D4C8;stroke-width:2}
.pr-hub text,.pr-seesaw text,.pr-door-art text{font-family:inherit;font-weight:700}
.pr-hub .you{transform-box:fill-box;transform-origin:center;animation:pr-pulse 2.6s ease-in-out infinite}
@keyframes pr-pulse{50%{transform:scale(1.07)}}
.pr-seesaw .beam{transform-box:view-box;transform-origin:450px 300px;transform:rotate(clamp(0deg,calc(14deg - var(--p,1) * 24deg),14deg))}
.pr-seesaw .disc{transform-box:fill-box;transform-origin:center;transform:scale(clamp(1,calc(1.9 - var(--p,1) * 1.5),1.9))}
.pr-door-art{width:72px;height:56px;margin-bottom:.4rem}
.pr-door-art svg{width:100%;height:100%;overflow:visible}
@media (max-width:820px){.pr-story-row,.pr-story-row.flip{grid-template-columns:1fr}.pr-story-row.flip .pr-story-art{order:0}}

/* Reveal and draw, only when motion is on */
/* text is never hidden: reveals only move, so readers and search engines always see the words */
html.motion [data-reveal]{transform:translateY(22px);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
html.motion [data-reveal].in{transform:none}
html.motion .pr-hub .spoke{stroke-dashoffset:420;stroke-dasharray:420;transition:stroke-dashoffset 1.1s ease calc(var(--i) * .18s + .2s)}
html.motion .pr-hub.in .spoke{stroke-dashoffset:0;stroke-dasharray:6 7}
html.motion .pr-hub .node{opacity:.3;transition:opacity .5s ease calc(var(--i) * .18s)}
html.motion .pr-hub.in .node{opacity:1}
html.motion .pr-door-art .pop{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1) .25s}
html.motion .in .pr-door-art .pop{transform:scale(1)}
html.motion .pr-door-art .tilt{transform-box:view-box;transform-origin:36px 40px;transform:rotate(12deg);transition:transform 1.2s ease .5s}
html.motion .in .pr-door-art .tilt{transform:rotate(0)}
html.motion .pr-door-art .scan{transform:translateX(-14px);transition:transform 1.4s ease .4s}
html.motion .in .pr-door-art .scan{transform:translateX(10px)}

/* How it works: a gold line draws down the steps as you scroll */
.dp-steps.pr-track{position:relative}
.dp-steps.pr-track::after{content:"";position:absolute;left:1.05rem;top:1.2rem;bottom:1.2rem;width:3px;background:rgba(30,52,39,.15);z-index:0}
.dp-steps.pr-track::before{content:"";position:absolute;left:1.05rem;top:1.2rem;width:3px;height:calc((100% - 2.4rem) * var(--p,1));background:#C9A24B;z-index:1}
.dp-steps.pr-track li{position:relative;z-index:2}
.dp-steps.pr-track li::before{transition:background .4s ease,color .4s ease,transform .4s ease}
html.motion .dp-steps.pr-track li.lit::before,html:not(.motion) .dp-steps.pr-track li::before{background:#C9A24B;color:#172A1F;transform:scale(1.08)}

@media (prefers-reduced-motion:reduce){.pr-hub .you{animation:none}}

[data-count]{display:inline-block;font-variant-numeric:tabular-nums;text-align:right}