/* The Holela story follows native page scrolling. */
.holela-page { background:#08090a; color:#eceeed; }
.holela-page .site-header::after { display:none; }
.holela-page main { position:relative; }
.holela-page img { height:auto; }
.holela-page figure { margin:0; }
.holela-page button { -webkit-tap-highlight-color:transparent; }
.hh-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.hh-reels { position:relative; background:#08090a; }
.hh-stage { position:relative; padding:24px var(--edge); }
.hh-opening { max-width:230px; margin-bottom:24px; }
.hh-opening p { font:500 clamp(32px,4vw,60px)/1.08 var(--body); letter-spacing:-.055em; margin:0 0 20px; text-wrap:balance; }
.hh-opening > span { color:#a7adad; font-size:11px; line-height:1.7; }
.hh-deck { display:flex; gap:24px; overflow:auto; padding:20px 0; scroll-snap-type:x mandatory; }
.hh-reel { position:relative; flex:0 0 auto; width:270px; aspect-ratio:9/16; overflow:hidden; background:#000; border-radius:12px; scroll-snap-align:center; }
.hh-reel.is-landscape { width:min(85vw,900px); aspect-ratio:16/9; border-radius:6px; }
.hh-reel video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.hh-film-meta { position:absolute; inset:auto 0 0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:34px 16px 15px; background:linear-gradient(transparent,#000c); pointer-events:none; }
.hh-film-meta > span:first-child { font-size:11px; font-weight:500; }
.hh-platforms { display:inline-flex; gap:10px; align-items:center; color:#fff; flex-shrink:0; }
.hh-platforms svg { display:block; width:18px; height:18px; }
.hh-reel-hit { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background:transparent; display:grid; place-items:center; color:#fff; cursor:pointer; }
.hh-reel-hit > span { opacity:0; display:grid; place-items:center; width:48px; height:48px; background:#08090a99; border:1px solid #ffffff70; border-radius:50%; font-size:14px; transition:opacity .25s; }
.hh-reel.is-paused .hh-reel-hit > span,.hh-reel-hit:focus-visible > span { opacity:1; }
.hh-reel-hit:focus-visible { outline-offset:-5px; }
.hh-reel-error { position:absolute; top:40%; left:10%; right:10%; padding:20px; font-size:12px; text-align:center; background:#090a0bf2; z-index:3; }
.hh-reel-error a { display:block; margin-top:12px; text-decoration:underline; }
.hh-reel-end { display:grid; place-items:center; background:transparent; border-radius:0; }
.hh-more { display:inline-flex; align-items:center; justify-content:center; gap:36px; width:auto; max-width:100%; white-space:nowrap; border:1px solid #ffffff65; background:#08090a; color:#fff; padding:16px 25px; border-radius:40px; font:400 14px/1.2 var(--body); cursor:pointer; }
.hh-more:hover { background:#eceeed; color:#08090a; }
.hh-more:disabled { opacity:.5; cursor:default; }
.hh-sound { position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); z-index:44; width:44px; height:44px; border:1px solid #ffffff65; border-radius:50%; background:#08090ac9; backdrop-filter:blur(12px); display:grid; place-items:center; color:#fff; cursor:pointer; }
.hh-sound svg { width:20px; height:20px; }
.holela-page .to-top { right:76px; }
.hh-enhanced .hh-reels { height:calc(100svh - var(--header) + var(--reel-run,2000px)); }
.hh-enhanced .hh-stage { position:sticky; top:var(--header); height:calc(100svh - var(--header)); min-height:300px; padding:0; overflow:clip; }
.hh-enhanced .hh-opening { position:absolute; z-index:3; left:var(--edge); top:50%; width:clamp(220px,29vw,410px); transform:translateY(-50%); max-width:none; pointer-events:none; will-change:opacity,transform; }
.hh-enhanced .hh-deck { position:absolute; inset:0; display:block; overflow:clip; padding:0; perspective:1400px; touch-action:pan-y; cursor:grab; }
.hh-enhanced .hh-deck:active { cursor:grabbing; }
.hh-enhanced .hh-reel { position:absolute; top:50%; left:50%; width:var(--frame-width,270px); height:var(--frame-height,480px); max-width:none; aspect-ratio:auto; transform-origin:center; will-change:transform; backface-visibility:hidden; }
.hh-enhanced .hh-reel:not(.is-active) { pointer-events:none; }
.hh-enhanced .hh-reel:not(.is-active):not(.hh-reel-end)::after { content:''; position:absolute; inset:0; background:#0005; pointer-events:none; }
.hh-enhanced .hh-reel:not(.is-active) .hh-film-meta { opacity:.4; }
/* The transparent character leads into the physical campaign. */
.hh-kido { position:relative; background:#111314; }
.hh-kido-stage { position:relative; }
.hh-kido-frame { position:relative; min-height:70vh; padding:24px var(--edge); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hh-kido-frame > img { display:block; height:65vh; max-width:80vw; width:auto; object-fit:contain; }
.hh-kido-frame figcaption { position:absolute; left:var(--edge); bottom:24px; padding:20px 24px 20px 0; max-width:75%; }
.hh-kido-frame h2 { font:500 clamp(30px,5vw,70px)/1.05 var(--body); letter-spacing:-.055em; margin:0; }
.hh-kido-frame p { font-size:12px; color:#bfc4c2; margin:12px 0 0; }
.hh-enhanced .hh-kido { height:calc(100svh - var(--header) + var(--kido-run,1500px)); }
.hh-enhanced .hh-kido-stage { height:calc(100svh - var(--header)); min-height:300px; position:sticky; top:var(--header); overflow:clip; }
.hh-enhanced .hh-kido-frame { position:absolute; inset:0; min-height:0; padding:24px var(--edge) 110px; opacity:0; transform:translateY(40px) scale(.97); transition:opacity .6s,transform .85s cubic-bezier(.22,1,.36,1); pointer-events:none; }
.hh-enhanced .hh-kido-frame.is-current { opacity:1; transform:none; }
.hh-enhanced .hh-kido-frame > img { max-height:100%; height:100%; max-width:85vw; }
.hh-kido-frame figcaption { z-index:1; text-shadow:0 2px 30px #000; background:linear-gradient(90deg,#111314d9,transparent); }
.hh-life { background:#08090a; }
.hh-life-video { position:relative; }
.hh-life-film { display:block; width:100%; height:auto; aspect-ratio:var(--film-ratio,16/9); object-fit:contain; background:#000; }
.hh-life-platforms { position:absolute; bottom:20px; left:var(--edge); pointer-events:none; }
.hh-life-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid #fff8; width:52px; height:52px; border-radius:50%; color:white; background:#0008; cursor:pointer; }
.hh-life-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 0; }
.hh-life-pair img { width:100%; height:100%; max-height:90vh; object-fit:cover; display:block; }
/* A single recording and a single glow. Vertical scrolling reveals the next voice. */
.hh-listen { position:relative; background:#08090a; }
.holela-page .hh-radio { min-height:calc(100svh - var(--header)); height:calc(100svh - var(--header)); padding:0; overflow:clip; display:block; }
.hh-radio .case-radio-backdrop { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; opacity:.35; filter:blur(35px) brightness(.45); transform:scale(1.12); }
.hh-radio .case-audio-stage { position:absolute; left:0; right:0; top:12%; height:58%; display:grid; place-items:center; margin:0; pointer-events:none; transition:opacity .4s; }
.hh-radio .case-audio-orb { width:min(46vh,52vw,390px); height:auto; aspect-ratio:1; }
.hh-radio .case-audio-orb canvas { width:100%; height:100%; display:block; }
.hh-audio-deck { position:absolute; inset:0; overflow:hidden; touch-action:pan-y; z-index:2; }
.hh-audio-card { position:absolute; top:66%; left:50%; width:min(76vw,800px); text-align:center; transform:translate(-50%,-50%); }
.hh-audio-card > span { display:block; color:#aab1be; font-size:11px; margin-bottom:10px; }
.hh-audio-card h2 { font:500 clamp(24px,4vw,48px)/1.12 var(--body); letter-spacing:-.045em; margin:0; }
.hh-audio-end { top:50%; }
.hh-audio-bar { position:absolute; bottom:9%; left:50%; transform:translateX(-50%); width:min(78vw,650px); padding:16px 20px; border:1px solid #ffffff26; border-radius:60px; background:#0a0d1480; backdrop-filter:blur(18px); display:none; align-items:center; gap:16px; z-index:4; }
.hh-audio-bar button { width:42px; height:42px; flex-shrink:0; padding:11px; border:0; border-radius:50%; background:#eef0f8; color:#10131b; cursor:pointer; }
.hh-audio-bar svg { width:100%; height:100%; display:block; }
.hh-audio-bar > span { font-size:10px; color:#bdc4d2; font-variant-numeric:tabular-nums; }
.hh-audio-bar input { min-width:20px; width:100%; accent-color:#c9ceee; cursor:pointer; }
.hh-audio { position:absolute; bottom:24px; left:10%; width:80%; z-index:4; }
.hh-audio-error { position:absolute; top:76%; left:10%; right:10%; text-align:center; font-size:11px; z-index:5; }
.hh-audio-error a { text-decoration:underline; }
.hh-enhanced .hh-listen { height:calc(100svh - var(--header) + var(--audio-run,2500px)); }
.hh-enhanced .hh-radio { position:sticky; top:var(--header); }
.hh-enhanced .hh-audio-bar { display:flex; }
.hh-enhanced .hh-audio { display:none; }
.hh-radio.is-end .case-audio-stage,.hh-radio.is-end .hh-audio-bar { opacity:0; pointer-events:none; }
.hh-radio.is-end .hh-audio-bar { visibility:hidden; }
.hh-audio-fallback { padding:40px var(--edge); display:grid; gap:20px; }
/* Let the work speak. */
.hh-rollout { background:#08090a; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px 0; }
.hh-rollout figure { overflow:hidden; }
.hh-rollout figure:nth-child(3n + 1) { grid-column:1/-1; }
.hh-rollout img { display:block; width:100%; height:100%; object-fit:cover; max-height:90svh; }
.hh-impact { background:#0b0d0e; position:relative; }
.hh-impact-stage { position:relative; padding:80px var(--edge); }
.hh-result { text-align:center; padding:60px 0; }
.hh-result strong { font:400 clamp(70px,16vw,220px)/1 var(--body); letter-spacing:-.075em; }
.hh-result strong span { font-size:.4em; letter-spacing:-.04em; margin-left:5px; }
.hh-result p { color:#b1b9b7; font-size:clamp(12px,1.5vw,18px); margin:25px 0 0; }
.hh-measurement { color:#7d8584; font-size:10px; line-height:1.7; text-align:center; max-width:470px; margin:36px auto 0; }
.hh-enhanced .hh-impact { height:calc(100svh - var(--header) + var(--impact-run,1000px)); }
.hh-enhanced .hh-impact-stage { position:sticky; top:var(--header); height:calc(100svh - var(--header)); min-height:300px; overflow:hidden; }
.hh-enhanced .hh-result { position:absolute; inset:0; padding:30px var(--edge) 100px; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transform:translateY(70px); transition:opacity .65s,transform .8s cubic-bezier(.22,1,.36,1); }
.hh-enhanced .hh-result.is-current { opacity:1; transform:none; }
.hh-enhanced .hh-measurement { position:absolute; bottom:30px; left:var(--edge); right:var(--edge); }
.hh-credits { padding:60px var(--edge); text-align:center; background:#08090a; }
.hh-credits p { color:#909b96; font-size:11px; line-height:1.8; margin:0 0 8px; }
.hh-credits a { display:inline-block; margin-top:30px; padding-bottom:7px; border-bottom:1px solid #ffffff50; font-size:clamp(15px,2vw,24px); }
@media(max-width:600px) {
 .hh-enhanced .hh-opening { top:24px; width:calc(100% - var(--edge) * 2); transform:none; }
 .hh-opening p { font-size:clamp(26px,7vw,32px); line-height:1.1; margin-bottom:12px; }
 .hh-opening p br { display:none; }
 .hh-opening > span { font-size:10px; }
 .hh-platforms { gap:8px; }
 .hh-platforms svg { width:16px; height:16px; }
 .hh-film-meta { padding:28px 12px 12px; }
 .hh-film-meta > span:first-child { font-size:10px; }
 .hh-kido-frame h2 { font-size:36px; }
 .hh-kido-frame p { font-size:11px; }
 .hh-enhanced .hh-kido-frame { padding-top:20px; padding-bottom:125px; }
 .hh-kido-frame figcaption { max-width:95%; bottom:22px; }
 .hh-life-pair { gap:5px; }
 .hh-life-platforms { bottom:12px; }
 .hh-audio-card { top:63%; width:86vw; }
 .hh-audio-end { top:50%; }
 .hh-audio-bar { width:88vw; bottom:10%; padding:11px 14px; gap:10px; }
 .hh-audio-bar button { width:36px; height:36px; padding:9px; }
 .hh-radio .case-audio-stage { top:7%; }
 .hh-radio .case-audio-orb { width:min(45vh,73vw); }
 .hh-rollout { gap:5px; }
 .hh-measurement { font-size:9px; }
 .hh-credits { padding:45px var(--edge); }
}
@media(max-height:540px) and (min-width:601px) {
 .hh-opening p { font-size:25px; }
 .hh-radio .case-audio-stage { top:0; height:60%; }
 .hh-radio .case-audio-orb { width:38vh; }
 .hh-audio-card { top:62%; }
 .hh-audio-bar { bottom:4%; padding:8px 16px; }
}
@media(prefers-reduced-motion:reduce) {
 .holela-page *, .holela-page *::before,.holela-page *::after { transition:none !important; scroll-behavior:auto !important; }
}
.holela-page [hidden] { display:none !important; }
.hh-reel:not(.is-active) .hh-reel-hit > span { opacity:0; }
.hh-audio-card { transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .45s; }
.hh-film-meta > a { font-size:11px; font-weight:500; pointer-events:auto; }
.hh-film-meta > a:hover { text-decoration:underline; }
.hh-film-metrics { position:absolute; top:12px; left:12px; right:12px; margin:0; font-size:10px; text-shadow:0 1px 8px #000; pointer-events:none; }
@media(max-width:600px) { .hh-film-meta > a { font-size:10px; } }
.hh-film-meta { justify-content:flex-start; gap:16px; }

.hh-kido-cutout > img { filter:drop-shadow(0 20px 24px #0005); }
.hh-kido-shape > img,
.hh-enhanced .hh-kido-shape > img { width:min(100%,1120px); height:auto; max-height:100%; transform:none; }
.hh-wide-films { padding:clamp(36px,7vw,110px) var(--edge); display:grid; gap:clamp(36px,7vw,110px); background:#08090a; }
.hh-wide-films .hh-life-video { width:100%; max-width:1440px; margin-inline:auto; overflow:hidden; border-radius:5px; }
.hh-wide-caption { position:absolute; left:0; right:0; bottom:0; padding:36px 20px 16px; background:linear-gradient(transparent,#000b); display:flex; align-items:center; gap:18px; pointer-events:none; }
.hh-wide-caption > span:first-child { font-size:12px; }
@media(max-width:600px) {
 .hh-wide-films { padding:32px 0; gap:32px; }
 .hh-wide-films .hh-life-video { border-radius:0; }
 .hh-wide-caption { padding:28px 15px 12px; gap:14px; }
 .hh-wide-caption > span:first-child { font-size:10px; }
}