/* BDS hero: isolated styles. Desktop pinned, mobile/reduced motion stacked. */
body{--story-blue:#d1ff44;--story-ink:#fff}
header .wrap{max-width:1440px;padding:0 5vw}.gnb{gap:24px!important}
.bds-story{background:#f8f9f7}.story-stage{position:relative;overflow:hidden;background:#fafbf9}
.story-chips{position:absolute;inset:0;pointer-events:none;z-index:2}
.story-chip{position:absolute;transform:translate(-50%,10px);background:rgba(11,28,66,.85);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:14px;font-weight:700;padding:8px 16px;border-radius:999px;white-space:nowrap;opacity:0}
@media(max-width:767px){.story-chip{font-size:12px;padding:6px 13px}}
.story-background{position:absolute;inset:-30px;pointer-events:none;overflow:hidden;background:#0b1c42}
.story-background::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 48%,rgba(0,2,10,.65) 100%)}
/* Tones the whole gradient down a notch without the flat-black-wash dullness: multiply against a
   saturated navy (rather than alpha-blend toward gray) darkens every pixel by pulling down
   whichever channel the navy is weak in, while leaving blue — the channel it's strong in, and the
   one the gradient already leans on — comparatively intact, so it reads darker, not washed out. */
.story-tint{position:absolute;inset:0;mix-blend-mode:multiply;background:rgba(42,77,143,.6)}
.story-stars{position:absolute;inset:0;overflow:hidden}
.story-stars span{position:absolute;border-radius:50%;background:#fff;opacity:0;animation-name:storyTwinkle;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes storyTwinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}
#story-gradient-canvas{position:absolute;width:100%;height:100%;transform:rotate(-6deg) scale(2) translateY(0%);
 --gradient-color-1:#0088F3;
 --gradient-color-2:#000E9F;
 --gradient-color-3:#0058AD;
 --gradient-color-4:#B6FF59;
 --gradient-speed:0.000006;
}
.story-inner{position:relative;max-width:1600px;margin:auto}.story-scene{position:relative;min-height:700px;display:grid;grid-template-columns:48% 52%;align-items:center;padding:110px 6vw 100px;isolation:isolate}
.story-copy{position:relative;z-index:3}.story-eyebrow{font-size:15px;font-weight:700;color:var(--story-blue);margin-bottom:24px;letter-spacing:.04em}
.story-copy h1,.story-copy h2{font-size:clamp(36px,4.1vw,66px);line-height:1.22;letter-spacing:-.055em;font-weight:800;color:var(--story-ink);margin:0}.story-copy em{font-style:normal;color:var(--story-blue)}
.scene-2 .story-copy h2{font-size:clamp(34px,3.35vw,54px)}
.story-description{font-size:19px;line-height:1.7;color:#57667b;margin-top:25px}.story-art{position:relative;height:530px;align-self:center;transform-origin:center bottom}.story-dog{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 18px 13px #34435b12)}
.with-product .story-product{position:absolute;width:78%;height:78%;object-fit:contain;left:-5%;bottom:10%;filter:drop-shadow(0 18px 14px #21364a12)}.with-product .story-dog{position:absolute;width:56%;height:72%;right:-12%;bottom:0}.scene-2 .story-product{width:88%;left:-9%}.scene-0 .story-dog,.scene-3 .story-dog{transform:scale(1.12)}
.story-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--story-blue);color:#0b1c42;border-radius:999px;padding:18px 36px;font-size:16px;white-space:nowrap;font-weight:700;margin-top:34px;box-shadow:0 10px 24px rgba(0,0,0,.22)}.story-cta:hover{background:#b8e62e}.story-cta span{font-size:18px}.story-note{position:absolute;bottom:72px;right:6vw;color:#657386;font-size:11px}
/* scene-3's CTA lives in .story-art, not the copy column, so it can sit near the true bottom of
   the screen independent of the headline's own flow (see story.js for its slide-up reveal). */
.scene-3 .story-art .story-cta{position:absolute;left:50%;bottom:20px;margin:0;z-index:2}
.story-progress{position:absolute;z-index:10;bottom:34px;left:6vw;display:flex;gap:15px}.story-progress button{display:flex;align-items:center;gap:9px;color:#8b98aa;font-size:11px;font-weight:700;padding:10px 0}.story-progress i{display:block;width:30px;height:2px;background:#dbe1e9}.story-progress button[aria-current=true]{color:var(--story-blue)}.story-progress button[aria-current=true] i{background:var(--story-blue)}.story-skip{position:absolute;right:6vw;bottom:44px;font-size:12px;color:#5f6e80;z-index:10}
.story-progress{display:none}.story-skip{display:none}
.bds-story.is-pinned{height:420vh}.is-pinned .story-stage{position:sticky;top:0;height:100vh;height:100svh}.is-pinned .story-inner{height:100%}.is-pinned .story-scene{position:absolute;inset:0;min-height:0;height:100%;will-change:opacity,transform}.is-pinned .story-art{height:min(62vh,590px)}.is-pinned .story-progress{display:flex}.is-pinned .story-skip{display:block}
.story-cta:focus-visible,.story-progress button:focus-visible,.story-skip:focus-visible{outline:3px solid #1760ee;outline-offset:5px}
@media(max-width:1000px){header nav.gnb{gap:16px!important}.story-copy h1,.story-copy h2{font-size:44px}.story-description{font-size:17px}}
@media(max-width:767px){header,header.scrolled{height:66px}header .wrap{padding:0 20px}.story-scene{display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-height:760px;min-height:100svh;padding:105px 25px 60px;border-bottom:1px solid #1323400d}.story-copy h1,.story-copy h2,.scene-3 .story-copy h2{font-size:clamp(32px,8.4vw,46px);letter-spacing:-.05em}.story-eyebrow{font-size:12px;margin-bottom:18px}.story-description{font-size:15px;margin-top:16px}.story-description br{display:none}.story-art{height:340px;width:100%;margin-top:26px;align-self:auto}.story-dog{transform:none!important}.with-product .story-product{width:73%;left:-5%;height:86%;bottom:0}.with-product .story-dog{right:-4%;width:52%;height:80%}.story-note{font-size:10px;bottom:23px;left:25px;right:25px}.story-cta{margin-top:24px}.story-background{background-position:65% center}.story-scene.scene-3{min-height:85svh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}

/* v2: product-only middle scenes and mobile pinned story */
.with-product .story-product,.scene-2 .story-product{width:100%;height:95%;left:0;bottom:0}
.bds-story.is-pinned{height:420svh}
@media(max-width:767px){
 .bds-story.is-pinned{height:380svh}
 .is-pinned .story-scene,.is-pinned .story-scene.scene-3{min-height:0;padding:88px 24px 96px;justify-content:flex-start;gap:14px}
 .is-pinned .story-copy{flex:none}
 .is-pinned .story-art{height:auto;min-height:0;flex:1;width:100%;margin-top:0}
 .is-pinned .story-copy h1,.is-pinned .story-copy h2{font-size:clamp(29px,8vw,40px);line-height:1.2}
 .is-pinned .story-eyebrow{margin-bottom:12px}
 .is-pinned .story-description{margin-top:14px;font-size:14px}
 .is-pinned .story-product{width:100%;height:100%;inset:0;object-fit:contain}
 .is-pinned .story-note{bottom:69px;font-size:10px;left:24px;right:24px}
 .is-pinned .story-progress{bottom:19px;left:24px;gap:11px}
 .is-pinned .story-progress i{width:19px}
 .is-pinned .story-skip{right:24px;bottom:29px;font-size:11px}
 .is-pinned .story-cta{margin-top:18px}
 .float-call{bottom:85px}
}
@media(max-width:767px) and (max-height:650px){
 .is-pinned .story-scene{padding-top:78px;gap:8px}
 .is-pinned .story-eyebrow{font-size:11px;margin-bottom:8px}
 .is-pinned .story-copy h1,.is-pinned .story-copy h2{font-size:28px}
 .is-pinned .story-description{margin-top:9px;font-size:12px}
 .is-pinned .story-cta{padding:10px 16px;margin-top:12px}
}

/* v3: centered storyboard composition, quiet main stage */
.story-scene{display:flex;flex-direction:column;text-align:center;justify-content:center;padding:106px 24px 32px;gap:18px}
.story-copy{flex:none;width:100%;max-width:960px;margin:0 auto}
.story-copy h1,.story-copy h2,.scene-3 .story-copy h2{font-size:clamp(32px,3.3vw,52px);line-height:1.22}
.story-art,.is-pinned .story-art{height:auto;min-height:0;flex:1;width:min(680px,80vw);max-height:50svh;margin:0 auto;align-self:center}
.story-dog{transform:none!important}
.story-eyebrow,.story-description,.story-note,.story-progress,.story-skip,.is-pinned .story-progress,.is-pinned .story-skip{display:none!important}
.story-cta{margin-top:20px}
.float-call{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
body.past-main-story .float-call{opacity:1;visibility:visible;pointer-events:auto}
@media(max-width:767px){
 .story-scene,.is-pinned .story-scene,.is-pinned .story-scene.scene-3{padding:94px 24px 35px;gap:22px;justify-content:center}
 .story-copy h1,.story-copy h2,.scene-3 .story-copy h2{font-size:clamp(29px,8vw,40px)}
 .story-art,.is-pinned .story-art{width:100%;max-height:53svh;min-height:0;flex:1;margin:0}
 .float-call{bottom:24px}
}

/* v4: product → benefit, separate transparent decorative layers */
.bds-story.is-pinned{height:620svh}
.story-art,.is-pinned .story-art{flex:0 1 440px;height:440px;width:min(760px,88vw);max-height:52svh;min-height:120px;position:relative}
.story-object{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 18px #17335910)}
.story-decor{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.asset-gift .story-object{width:55%;left:22.5%;height:92%;top:4%}
.asset-money .story-object{width:62%;left:19%;height:90%;top:5%}
.asset-mascot-welcome .story-object,.asset-mascot-present .story-object{width:90%;left:5%}
.art-a{opacity:1}
.art-b{position:absolute;inset:0;opacity:0}
.story-scene:last-child h2{font-size:clamp(28px,3vw,46px)}
@media(max-width:767px){
.bds-story.is-pinned{height:600svh}
.story-art,.is-pinned .story-art{flex:0 1 360px;height:360px;width:100%;max-height:48svh}
.story-scene:last-child h2{font-size:clamp(25px,7vw,34px)}
.asset-gift .story-object{width:84%;left:8%;height:100%;top:0}
.asset-money .story-object{width:90%;left:5%;height:100%;top:0}
}

/* v5: authored dog sequences retain a fixed frame, including entry movement. */
.bds-story.is-pinned{height:900svh}
.asset-mascot-welcome .story-sequence,.asset-mascot-present .story-sequence{width:100%;height:100%;left:0;object-fit:contain}
@media(max-width:767px){.bds-story.is-pinned{height:850svh}}

/* v6: mobile dog sequence — fill the art box and sit flush on its bottom edge, no letterboxed shrink */
@media(max-width:767px){
.asset-mascot-welcome .story-sequence{object-fit:cover;object-position:center bottom}
.asset-mascot-present .story-sequence{object-fit:cover;object-position:center bottom}
/* v11: the dog scenes' art box keeps the exact same flex footprint (height/gap) as every other
   scene, so the copy text lands at the identical shared position across all six scenes. The
   character image itself is sized to the full viewport height and bottom-anchored inside that
   box, so it visually bleeds up past the box's own (unchanged) layout height and behind the
   text — overlapping instead of being clipped — without moving the text at all. */
.is-pinned .story-scene.scene-0 .story-sequence,
.is-pinned .story-scene.scene-3 .story-sequence{height:100svh;top:auto;bottom:0}
/* v13: .story-art sits inside the scene's own padding (24px sides, 35px bottom), so anchoring the
   image to the art box's own edges still leaves a visible gap to the true screen edges. Break the
   image out of that padding on its own sides so it reaches the real viewport left/bottom. */
.is-pinned .story-scene.scene-0 .story-sequence,
.is-pinned .story-scene.scene-3 .story-sequence{left:-24px;right:auto;width:calc(100% + 48px);max-width:none;bottom:-35px}
/* .story-art is flex:0 1 360px with justify-content:flex-start on the scene, so it packs right
   under the copy box and leaves the rest of the column empty — its own bottom edge isn't actually
   anywhere near the scene's bottom padding. Let it stretch to fill that remaining space instead,
   so "bottom:-35px" above lands exactly on the true screen edge like it's meant to. */
.is-pinned .story-scene.scene-0 .story-art,
.is-pinned .story-scene.scene-3 .story-art{flex:1 1 auto;height:auto;max-height:none}
/* v15: dark scrim behind the CTA on scene-3, mobile only — the dog art is busy here, so the
   button needs a readable backdrop. Starts transparent; story.js fades it in once the headline
   has fully typed and the button is about to slide up over it. Escapes the scene's own padding
   the same way .story-sequence does above, so it actually reaches the true screen edges instead
   of stopping at .story-art's own (inset) box. */
.story-scrim{position:absolute;left:-24px;right:auto;width:calc(100% + 48px);bottom:-35px;height:42%;background:linear-gradient(to top,rgba(0,0,0,.68),rgba(0,0,0,0));opacity:0;pointer-events:none}
.scene-3 .story-art .story-cta{bottom:48px}
/* v12: the dog scenes' copy box is taller than scene-1~4's single-line headline (it holds two
   stacked phases), so centering it as part of a flex group lands it at a different height than
   everywhere else. Pin it to the top instead, at the exact spot scene-1/2's copy already sits
   at, regardless of its own content height. */
.is-pinned .story-scene.scene-0,.is-pinned .story-scene.scene-3{justify-content:flex-start;padding-top:100px}
}

/* v9: two-phase copy for the dog scenes (greeting -> headline, peek -> closing), a persistent
   first line across the paired product/benefit scenes, and a scroll-scrubbed typing reveal. */
.story-copy{position:relative}
.scene-0 .story-copy,.scene-3 .story-copy{min-height:260px}
.story-phase{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0}
.story-phase.phase-b{opacity:1}
.scene-3 .phase-b h2{margin-top:-44px}
.story-greet{font-size:28px;font-weight:700;color:var(--story-ink);margin:0 0 10px;display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;animation:storyGreetType .7s steps(5) .15s forwards}
@keyframes storyGreetType{to{max-width:10em}}
.story-tags{display:flex;gap:10px;margin-bottom:14px}
.story-tag{background:#fff;color:#0b1c42;font-size:16px;font-weight:700;padding:9px 18px;border-radius:999px}
.story-ask{margin:0;font-size:clamp(26px,2.6vw,38px);font-weight:800;color:var(--story-ink);letter-spacing:-.03em}
.story-subtext{font-size:16px;color:rgba(255,255,255,.75);margin-top:16px;line-height:1.6}
.story-pline{display:block}
.story-peek{margin:0}
.story-peek .story-pline{font-size:clamp(22px,2.2vw,30px);font-weight:800;color:var(--story-ink);line-height:1.4}
.story-type,.story-type-phase{display:inline-block}
.story-ghost{visibility:hidden}
@media(max-width:767px){
.scene-0 .story-copy,.scene-3 .story-copy{min-height:210px}
.story-greet{font-size:22px}
.story-tag{font-size:14px;padding:8px 15px}
.story-ask{font-size:clamp(22px,7vw,28px)}
.story-subtext{font-size:14px;margin-top:12px}
.story-pline{font-size:clamp(29px,8vw,40px)}
.story-peek .story-pline{font-size:clamp(19px,6vw,24px)}
}
/* v16: desktop only — the welcome/closing dog sequences were being squeezed down to fit the
   440px flex-basis every scene's art box gets (shrunk even further once the column ran out of
   room), so they read as tiny. Mirror the mobile layout instead: pin copy to the top and let
   .story-art stretch to the scene's own bottom padding, so the bottom offset below lands exactly
   on the true screen edge the same way it does on mobile. */
@media(min-width:768px){
.is-pinned .story-scene.scene-0,
.is-pinned .story-scene.scene-3{justify-content:flex-start;padding-top:140px}
.scene-3 .phase-b h2{margin-top:-90px}
.is-pinned .story-scene.scene-0 .story-art,
.is-pinned .story-scene.scene-3 .story-art{flex:1 1 auto;height:auto;min-height:0;max-height:none;width:100%}
/* The sequence image and the panel behind it share the exact same explicit box (height plus a
   width derived from the source frame's own 2:3 aspect ratio), instead of the panel just filling
   whatever width .story-art happens to have — that mismatch was what made the panel look like an
   unrelated card instead of a backdrop for the character. Matching the box to the frame's own
   aspect ratio also means object-fit never has to crop, so the top of the frame never gets cut. */
.asset-mascot-welcome .story-sequence,
.asset-mascot-present .story-sequence,
.scene-3 .story-art-panel{position:absolute;left:50%;right:auto;top:auto;bottom:-32px;height:min(88svh,920px);width:calc(min(88svh,920px) * 2 / 3);max-width:none;transform:translateX(-50%)}
/* The closing scene's rounded panel (and the dog riding on it) sit a bit clear of the true
   bottom edge instead of flush against it — flush read as glued to the section's seam. */
.asset-mascot-present .story-sequence,
.scene-3 .story-art-panel{bottom:56px}
.asset-mascot-welcome .story-sequence,
.asset-mascot-present .story-sequence{object-fit:contain;object-position:center bottom}
/* The closing scene's dog sits in front of a rounded "stage" panel (dark at the bottom, fading
   to clear at the top, multiplied over the background) instead of the plain blue, so the
   character reads as stepping out from inside it rather than the background. */
.story-art-panel{display:none}
.scene-3 .story-art-panel{display:block;border-radius:28px;overflow:hidden;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 72%);mix-blend-mode:multiply;pointer-events:none}
}

/* v17: mobile only — story.js now drives the mobile journey by swipe + autoplay instead of
   continuous scroll-scrubbing (each scene reveals itself automatically once active; a swipe only
   requests the next one, captured via preventDefault so the page can't scroll underneath it).
   The pinned track no longer needs scroll room proportional to the whole story — just enough for
   position:sticky to engage, plus a little buffer story.js scrolls through programmatically when
   a scene exits. */
@media(max-width:767px){
.bds-story.is-pinned{height:180svh}
}

/* v18: mobile only — a small bottom-center hint that appears once the active scene has finished
   its own autoplay and is just waiting for a swipe, so it's clear a swipe is expected (and that
   nothing is broken while it's mid-reveal, when the hint is hidden). Three stacked chevrons
   (a common "scroll down" motif) with a cascading bounce — the motion alone reads as "swipe",
   no label text or background pill needed. */
.story-swipe-hint{display:none}
@media(max-width:767px){
.is-pinned .story-swipe-hint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;z-index:5;opacity:0;pointer-events:none;transition:opacity .35s ease}
.is-pinned .story-swipe-hint.is-visible{opacity:1}
.story-swipe-chevron{position:relative;width:16px;height:16px;border-bottom:3px solid #fff;border-right:3px solid #fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));transform:rotate(45deg);animation:storySwipeChevron 1.4s ease-in-out infinite}
.story-swipe-chevron:nth-child(2){animation-delay:.15s}
.story-swipe-chevron:nth-child(3){animation-delay:.3s}
}
@keyframes storySwipeChevron{0%,100%{opacity:.25;top:-4px}50%{opacity:1;top:4px}}