/* Progressive motion: content remains visible and usable without JavaScript. */
.human-opening{align-items:center}
.human-opening>.hero-carousel{min-width:0;align-self:center;background:#eeece5;padding:0;overflow:hidden}
.hero-carousel .hero-slides{display:grid;position:relative}
.hero-carousel .hero-slide{grid-area:1/1;margin:0;min-width:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 850ms ease,visibility 850ms;z-index:0}
.hero-carousel .hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.hero-carousel .hero-slide-image{aspect-ratio:4/3;width:100%;background:#eeece5;overflow:hidden;display:grid;place-items:center}
.hero-carousel .hero-slide-image img{width:100%;height:100%;aspect-ratio:auto;max-height:none;object-fit:contain;object-position:center;animation:none}
.hero-carousel .hero-slide figcaption{padding:22px 28px 12px;min-height:100px;background:var(--paper);color:var(--ink);line-height:1.65}
.hero-slide figcaption strong{display:block;font-size:17px;font-weight:500;line-height:1.5}
.hero-slide figcaption span{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.hero-carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 22px 22px;background:var(--paper)}
.hero-carousel-controls[hidden]{display:none}
.hero-carousel-arrows{display:flex;gap:7px}
.hero-carousel-controls button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--blue);background:transparent;cursor:pointer}
.hero-carousel-arrows button{border:1px solid var(--line);border-radius:50%;transition:background-color 180ms,color 180ms}
.hero-carousel-arrows button:hover{background:var(--blue);color:var(--paper)}
.hero-carousel-dots{display:flex;align-items:center;gap:0}
.hero-carousel-dots button{min-width:28px;width:28px;padding:0}
.hero-carousel-dots button span{display:block;width:7px;height:7px;background:var(--muted);opacity:.4;border-radius:10px;transition:width 250ms,opacity 250ms}
.hero-carousel-dots button[aria-current=true] span{width:22px;opacity:1;background:var(--blue)}
.hero-carousel-play{gap:6px;border:0;font-size:11px;min-width:80px}
.hero-carousel-play:disabled{cursor:default;color:var(--muted)}
.hero-carousel-controls button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.hero-collection-link{display:flex;width:fit-content;margin-top:14px;border:1px solid var(--blue);color:var(--blue);background:transparent}
.scroll-reading-line{position:fixed;inset:0 0 auto;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left center;z-index:150;pointer-events:none}
.motion-paused .scroll-reading-line{display:none}
[data-scroll-parallax]{transform:translate3d(0,var(--parallax-y,0px),0)}
.motion-paused [data-scroll-parallax]{transform:none!important}
.motion-paused .hero-slide{transition:none}
/* Cinematic layer. Everything below needs .motion-enhanced (JavaScript on, motion allowed),
   so a paused or reduced-motion page shows headings and figures at once. */
.motion-enhanced .split-words .word{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(6px)}
.motion-enhanced .split-words.is-in .word{opacity:1;transform:none;filter:blur(0);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--i)*48ms)}
.motion-enhanced .human-why::after{background-position:calc(50% + var(--strip-x,0px)) 50%}
.motion-enhanced .material-texture-strip::before{background-position:calc(50% + var(--strip-x,0px)) 46%}
.human-world-stats strong,.global-stats strong,.human-indicators strong{font-variant-numeric:tabular-nums}
/* Magnetic hover: buttons lean towards the pointer (--mx/--my set by JS) and spring back. */
@media(hover:hover) and (pointer:fine){.motion-enhanced .button,.motion-enhanced .hero-carousel-arrows button{transform:translate(var(--mx,0px),var(--my,0px));transition:transform 650ms cubic-bezier(.3,1.5,.45,1),box-shadow 220ms ease,background-color 180ms,color 180ms}.motion-enhanced .is-magnet{transition-duration:220ms,220ms,180ms,180ms;transition-timing-function:cubic-bezier(.2,.8,.2,1)}.motion-enhanced .button:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 2px));box-shadow:0 8px 22px #284c9826}.motion-enhanced .selected-piece img{transition:transform 550ms ease}.motion-enhanced .selected-piece:hover img{transform:scale(1.015)}}
[data-theme=dark] .hero-carousel,[data-theme=dark] .hero-slide-image{background:#242f3e}
[data-theme=dark] .refined-site .hero-collection-link{background:transparent;color:var(--blue);border-color:var(--blue)}
@media(max-width:1000px){.human-opening{grid-template-columns:1fr 1fr}.hero-carousel-controls{padding-inline:14px;gap:5px}.hero-carousel .hero-slide figcaption{padding-inline:20px}.hero-carousel-dots button{min-width:24px;width:24px}.hero-carousel-play{min-width:70px}}
@media(max-width:700px){.human-opening{grid-template-columns:1fr}.human-opening>.hero-carousel{margin:0 5vw 24px;border:1px solid var(--line)}.hero-carousel .hero-slide-image{aspect-ratio:4/3}.hero-carousel .hero-slide figcaption{padding:18px 18px 8px;min-height:94px}.hero-slide figcaption strong{font-size:16px}.hero-slide figcaption span{font-size:11px}.hero-carousel-controls{padding:8px 12px 16px}.hero-carousel-dots button{min-width:28px;width:28px}.hero-collection-link{margin-top:12px}}
@media(max-width:360px){.hero-carousel-controls{gap:3px;padding-inline:8px}.hero-carousel-arrows{gap:3px}.hero-carousel-controls button{min-width:40px;min-height:44px}.hero-carousel-dots button{min-width:23px;width:23px}.hero-carousel-play{min-width:65px}}
@media(prefers-reduced-motion:reduce){[data-scroll-parallax]{transform:none!important}.hero-carousel .hero-slide,.hero-carousel-controls *{transition:none!important}.scroll-reading-line{display:none}}
