*{box-sizing:border-box}html{scroll-padding-top:88px}body{margin:0;color:#123640;background:#fbfaf7;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif}a{color:inherit;text-underline-offset:5px}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #216d80;outline-offset:6px}button[hidden]{display:none}.skip{position:fixed;top:-100px;left:12px;z-index:100;background:white;padding:16px}.skip:focus{top:10px}.review-note{padding:7px 4%;font-size:11px;letter-spacing:.04em;background:#ecf0ec;color:#415250;display:flex;gap:18px;justify-content:center}.home-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 4.5%;background:#fffffff5;border-bottom:1px solid #12364013}.brand{text-decoration:none;white-space:nowrap;font-weight:600;font-size:18px;letter-spacing:.08em}.brand span{display:block;font-size:10px;font-weight:400;letter-spacing:.12em;margin-top:4px}.home-header nav{display:flex;align-items:center;gap:24px;font-size:12px}.home-header nav a{text-decoration:none;padding:8px 0}.home-header nav a:hover{text-decoration:underline}.menu-toggle{display:none;border:0;background:transparent;padding:10px;font-size:12px}.menu-toggle span{font-size:20px;margin-left:10px}
.scene{position:relative;isolation:isolate;width:100%;aspect-ratio:1672/941;min-height:540px;overflow:hidden;border-bottom:7px solid #fbfaf7;scroll-margin-top:0}.scene-media{position:absolute;inset:0;z-index:-2;background:#f1f1e9}.scene-media img,.scene-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.scene-media video{position:absolute;inset:0;opacity:0}.scene.has-frame:not(.is-finished):not(.is-error):not(.is-reduced) video{opacity:1}.scene:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.16) 31%,transparent 48%)}.scene-copy{position:relative;width:37%;margin-left:5%;padding:clamp(70px,13vw,225px) 0 64px}.eyebrow{font-size:clamp(13px,1.25vw,19px);letter-spacing:.12em;margin:0 0 25px;line-height:1.8}h1,h2{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:500;letter-spacing:.025em;line-height:1.5;margin:0 0 22px}.scene h1,.scene h2{font-size:clamp(30px,4vw,66px)}.scene-copy p:not(.eyebrow){font-size:clamp(13px,1.05vw,17px);line-height:2.1;margin:0 0 28px}.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:54px;max-width:100%;padding:16px 24px;background:#194e59;color:white;border:1px solid #194e59;border-radius:3px;font-size:clamp(12px,1.15vw,17px);line-height:1.6;text-decoration:none;transition:background .15s}.cta:hover{background:#103943}.cta span{font-size:20px}.opening .scene-copy{width:47%;padding-top:14vw}.opening h1{font-size:clamp(36px,4.5vw,76px)}.text-link{font-size:13px;display:inline-flex;gap:24px;padding:14px 0}.movie .scene-copy{width:27%;margin-left:5%;padding-top:12vw}.movie h2{font-size:clamp(29px,3.1vw,52px)}.movie .cta{padding:14px 17px;font-size:clamp(11px,.94vw,15px);gap:14px}.movie .scene-copy p:not(.eyebrow){font-size:clamp(12px,.94vw,15px)}.movie:after{background:linear-gradient(90deg,#fff9 0%,#fff3 24%,transparent 32%)}.profile .scene-copy{padding-top:10vw;width:40%}.profile h2{margin-bottom:2px}.profile .roman{font-size:13px;letter-spacing:.12em}.mobile-only{display:none}.motion-control{position:absolute;right:24px;bottom:24px;z-index:2;border:1px solid #cbd5d2;border-radius:30px;background:#fffffff0;padding:10px 16px;font-size:12px;min-height:44px}.contact-block{text-align:center;padding:105px 24px;background:#f5f5ef}.contact-block h2{font-size:36px}.contact-block p{font-size:14px;line-height:2}.contact-block .small,.small{font-size:12px;color:#5b6c6d;margin-top:22px}footer{padding:64px 8% 24px;display:grid;grid-template-columns:1.35fr 1fr;gap:40px 12%;font-size:13px;line-height:2}footer h2{font-family:inherit;font-size:17px}footer p{max-width:490px}.status{font-size:11px;border:1px solid #b4c0ba;border-radius:3px;padding:3px 7px;display:inline-block;margin-left:8px}.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #d6ded8;padding-top:24px;margin-top:14px;font-size:11px}
@media(min-width:1900px){.scene-copy{padding-top:14vw}.scene h1,.scene h2{font-size:4vw}.scene-copy p:not(.eyebrow){font-size:1vw}.movie h2{font-size:3.1vw}}
@media(max-width:1050px){.home-header nav{gap:15px;font-size:11px}.scene-copy{margin-left:4%;width:40%}.scene{min-height:540px}.scene-copy,.opening .scene-copy{padding-top:110px}.scene h2{font-size:34px}.scene h1{font-size:40px}.scene:after{background:linear-gradient(90deg,#ffffffbf 0%,#ffffff55 30%,transparent 55%)}.movie .scene-copy{width:30%;padding-top:100px;margin-left:4%}.movie h2{font-size:30px}.profile .scene-copy{padding-top:80px}.cta{padding:14px 18px;gap:14px}}
@media(max-width:760px){html{scroll-padding-top:74px}.review-note{font-size:10px;gap:9px;padding:6px 8px}.home-header{padding:11px 20px}.brand{font-size:16px}.menu-toggle{display:flex;align-items:center}.home-header nav{display:none;position:absolute;top:100%;left:0;width:100%;padding:16px 24px 24px;background:#fff;box-shadow:0 12px 20px #12364010;flex-direction:column;align-items:stretch;gap:3px;font-size:14px}.home-header nav.is-open{display:flex}.home-header nav a{padding:12px 0}.scene{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;border-bottom-width:14px;overflow:visible}.scene-media{position:relative;inset:auto;z-index:0;height:auto;aspect-ratio:4/3;overflow:hidden}.scene-media img,.scene-media video{object-position:72% center}.scene:after{display:none}.scene-copy,.opening .scene-copy,.movie .scene-copy,.profile .scene-copy{width:auto;margin:0;padding:29px 24px 37px;background:#fbfaf7}.scene h1,.scene h2,.movie h2{font-size:32px;line-height:1.55;margin-bottom:16px}.opening h1{font-size:34px}.eyebrow{font-size:12px;margin-bottom:14px}.scene-copy p:not(.eyebrow),.movie .scene-copy p:not(.eyebrow){font-size:13px;line-height:2;margin-bottom:22px}.cta,.movie .cta{font-size:13px;padding:14px 20px;gap:25px;min-height:52px}.movie .scene-media img,.movie .scene-media video{object-position:76% center}.profile .scene-media img,.profile .scene-media video{object-position:83% center}.opening .scene-media img,.opening .scene-media video{object-position:72% center}.motion-control{top:16px;bottom:auto;right:16px}.contact-block{padding:65px 24px}.contact-block h2{font-size:29px}.contact-block br:not(h2 br){display:none}footer{display:block;padding:44px 24px 24px}footer>div{margin-bottom:30px}.footer-bottom{font-size:10px}.mobile-only{display:block}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Two continuous scroll scenes; the office and the television remain separate. */
:root{--header-height:78px}.scroll-story{position:relative;height:230svh;min-height:1300px;--story-blend:0}.story-stage{position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));min-height:0;aspect-ratio:auto;overflow:hidden}.story-anchor{position:absolute;top:calc(100% - 100svh);width:1px;height:1px;pointer-events:none}.story-stage .scene-media{position:absolute;inset:0;height:100%;aspect-ratio:auto}.story-stage .story-last{position:absolute;inset:0;opacity:var(--story-blend)}.story-stage .scene-copy{padding:0;position:absolute;top:50%;transform:translateY(-50%);margin-left:5%;max-height:95%;width:40%}.story-stage h1{font-size:clamp(34px,4.1vw,68px)}.story-stage h2{font-size:clamp(32px,3.8vw,62px)}.story-stage .scene-copy [hidden]{display:none}.scroll-story.has-story-video:not(.reduce-story) .story-video{opacity:1}.scroll-story.reduce-story .story-video{opacity:0}.tv-canvas{position:absolute;width:100%;height:100%;container-type:size}.tv-canvas>img{position:absolute;inset:0}.tv-screen{position:absolute;left:32.9%;top:10.6%;width:55.3%;height:61.3%;background:#f6f2e9;clip-path:polygon(0 0,100% 2.9%,99.5% 75%,95% 69%,90% 68%,86% 72%,82% 79%,79% 87%,78% 92%,69% 95%,59% 98%,0 100%);overflow:hidden}.tv-content{width:100%;height:100%;display:grid;place-items:center}.tv-placeholder{text-align:center;color:#51635c;font-size:clamp(15px,2vw,28px);line-height:2}.tv-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:rotate(.5deg) scale(1.025);opacity:0}.scene.has-frame .tv-screen video{opacity:1}.scene.is-error .tv-screen video{opacity:0}.scene.has-frame .tv-placeholder{visibility:hidden}.scene.movie .scene-media{aspect-ratio:1672/941}.scene.movie .tv-media{object-fit:contain}
@media(min-width:761px){.scene.movie{min-height:0}.tv-media{height:100%}}
@media(max-width:760px){.scroll-story{height:235svh;min-height:1400px}.story-stage{display:block;border-bottom:0}.story-stage .scene-media{position:relative;height:43%;width:100%;aspect-ratio:auto}.story-stage .scene-copy{position:relative;top:auto;transform:none;margin:0;width:auto;height:57%;padding:22px 24px;background:#fbfaf7}.story-stage h1,.story-stage h2{font-size:clamp(26px,7.5vw,34px);margin-bottom:12px}.story-stage .eyebrow{margin-bottom:8px}.story-stage .scene-copy p:not(.eyebrow){margin-bottom:14px;font-size:12px;line-height:1.8}.story-stage .cta{min-height:46px;padding:10px 16px;font-size:12px}.story-stage .roman{display:none}.story-stage .mobile-only{display:none}.story-stage.profile .scene-media img{object-position:75% center}.scene.movie .scene-media{height:auto;aspect-ratio:1672/941}.tv-placeholder{font-size:12px}.review-note{flex-wrap:wrap;gap:2px 8px;font-size:9px}.story-stage:after{display:none}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:auto;min-height:0}.story-stage{position:relative;top:0;height:auto;min-height:0;overflow:visible;display:block}.story-stage .scene-media{position:relative;height:auto;aspect-ratio:1672/941}.story-stage .story-last{opacity:0}.story-stage .scene-copy{position:relative;top:auto;transform:none;width:auto;padding:30px 6%;margin:0;background:#fbfaf7}.story-copy-last{margin-top:25px}.story-anchor{top:0}.story-stage .story-video{display:none}.story-stage:after{display:none}}
.tv-screen .tv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:rotate(.5deg) scale(1.025)}
/* Smooth exclusion around the foreground hair, inside the television screen. */
.tv-screen{clip-path:polygon(0 0,100% 2.9%,99.5% 74%,98% 72.4%,96% 70.7%,94% 69.3%,92% 68.5%,90% 68%,88% 68.1%,86% 68.7%,84% 70.2%,82% 72.4%,80% 75.1%,78.7% 78.5%,77.7% 82.3%,77.3% 86.2%,77% 91%,73% 94%,69% 95%,59% 98%,0 100%)}
/* Copy rises as one group without interrupting native scrolling. */
.js-entrances [data-entrance]{opacity:0;translate:0 48px;transition:opacity .7s ease,translate .7s cubic-bezier(.22,1,.36,1)}
.js-entrances [data-entrance].entrance-visible{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.js-entrances [data-entrance]{opacity:1;translate:none;transition:none}}
/* Give each scene breathing room; soften the pictures into the shared page color. */
main > .scene{margin-top:clamp(88px,9vw,160px);border-bottom:0}
main > .scene > .scene-media{background:transparent;mask-image:linear-gradient(to bottom,transparent,#000 52px,#000 calc(100% - 52px),transparent)}
.story-stage{border-bottom:0}
.story-stage .scene-media{mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent)}
footer{margin-top:80px;background:linear-gradient(to bottom,#fbfaf7,#f0f2ed)}
@media(max-width:760px){
  main > .scene{margin-top:64px}
  main > .scene > .scene-media{mask-image:linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
  footer{margin-top:40px}
}
/* The opening responds immediately and reaches its product copy earlier. */
#opening.scroll-story{height:calc(150svh - var(--header-height) / 2);min-height:0}
#art.scroll-story{height:calc(max(115svh,650px) + 50svh - var(--header-height) / 2);min-height:0;margin-top:clamp(88px,9vw,160px)}
.story-anchor{top:calc(100% - 100svh + var(--header-height))}
#art .scene-media{mask-image:linear-gradient(to bottom,transparent,#000 52px,#000 calc(100% - 52px),transparent)}
.scroll-story.has-story-video:not(.reduce-story) .story-first,
.scroll-story.has-story-video:not(.reduce-story) .story-last{visibility:hidden}
@media(max-width:760px){#art.scroll-story{height:calc(max(117.5svh,700px) + 50svh - var(--header-height) / 2);margin-top:64px}}
@media(prefers-reduced-motion:reduce){#opening.scroll-story,#art.scroll-story{height:auto}.story-anchor{top:0}}
/* Keep the supplied central screen visible beside, rather than under, the copy. */
@media(min-width:761px){
  .scene.movie{aspect-ratio:auto;min-height:560px;background:#faf2e7;display:flex;align-items:center}
  .scene.movie .scene-media{left:34%;width:66%;height:100%;aspect-ratio:auto;background:#faf2e7}
  .scene.movie .scene-media img,.scene.movie .scene-media video{object-fit:contain;object-position:center}
  .scene.movie .scene-copy{width:28%;margin-left:4%;padding:65px 0}
  .scene.movie:after{display:none}
  .scene.movie h2{font-size:clamp(29px,2.7vw,48px)}
  #oxygen h2{font-size:clamp(29px,3.15vw,52px)}
}
@media(max-width:760px){.scene.movie .scene-media img,.scene.movie .scene-media video{object-fit:contain;object-position:center}}
/* Desktop: consistent picture size, readable copy, and feathered picture edges. */
@media(min-width:761px){
  .scene,.scene.movie{background:#fbfaf7;aspect-ratio:auto;min-height:560px}
  .scene:not(.story-stage){min-height:clamp(560px,43vw,850px)}
  .scene:after{display:none}
  .scene .scene-media,.scene.movie .scene-media,.story-stage .scene-media{
    position:absolute;inset:auto 2% auto auto;top:50%;left:auto;
    width:62%;height:auto;aspect-ratio:16/9;transform:translateY(-50%);
    background:transparent;
  }
  .scene .scene-media img,.scene .scene-media video{object-fit:contain;object-position:center}
  .scene .scene-copy,.scene.movie .scene-copy,.story-stage .scene-copy{
    width:30%;margin-left:4%;padding:64px 0;
  }
  .scene:not(.story-stage){display:flex;align-items:center}
  .story-stage .scene-copy{padding:0}
  .scene h1,.scene h2,.scene.movie h2,#oxygen h2,.story-stage h1,.story-stage h2{
    font-size:clamp(24px,2.6vw,46px);line-height:1.6;
  }
  .scene .scene-media,main > .scene > .scene-media,#art .scene-media,.story-stage .scene-media{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent),linear-gradient(to bottom,transparent,#000 32px,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent),linear-gradient(to bottom,transparent,#000 32px,#000 calc(100% - 32px),transparent);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
  .motion-control{right:4%;bottom:24px}
}
@media(min-width:761px) and (prefers-reduced-motion:reduce){
  .scroll-story .story-stage{min-height:560px;display:flex;align-items:center}
  .story-stage .scene-copy{position:relative;top:auto;transform:none;padding:48px 0}
}
/* Opening plays once below the centered headline; accessory playback starts after arrival. */
#opening.scroll-story{height:auto;min-height:0;padding:46px 0 30px}
.opening-heading{text-align:center;font-size:clamp(25px,3vw,48px);padding:0 24px;margin:0 0 24px;line-height:1.7}
#opening .story-stage{position:relative;top:auto;height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible}
#opening .scene-media{position:relative;inset:auto;transform:none;width:62%;height:auto;aspect-ratio:16/9;margin:0 auto}
#opening .scene-copy{position:relative;inset:auto;transform:none;width:min(760px,90%);height:auto;margin:0 auto;padding:24px 0;text-align:center;max-height:none}
#opening .story-copy-first{display:none}
#ejiten{scroll-margin-top:12px}
#opening .motion-control{top:16px;bottom:auto}
#art.scroll-story{height:calc(100svh + 360px);min-height:0}
@media(max-width:760px){#opening.scroll-story{padding-top:28px}#opening .scene-media{width:94%}#opening .scene-copy{width:90%}#opening .scene-copy h2{font-size:27px}#art.scroll-story{height:calc(100svh + 300px)}}
@media(prefers-reduced-motion:reduce){#art.scroll-story{height:auto}#opening .scene-copy .story-copy-last{margin-top:0}}
/* Only the opening headline is centered; retain the shared desktop split layout. */
@media(min-width:761px){
  #opening .story-stage{display:flex;flex-direction:row;align-items:center;min-height:clamp(560px,43vw,850px)}
  #opening .scene-media{position:absolute;inset:auto 2% auto auto;top:50%;width:62%;height:auto;margin:0;transform:translateY(-50%)}
  #opening .scene-copy{position:relative;inset:auto;transform:none;width:30%;margin:0 0 0 4%;padding:64px 0;text-align:left}
  #opening .motion-control{top:auto;bottom:24px}
}
@media(max-width:760px){#opening .scene-copy{text-align:left}}
/* One pinned picture; two persistent text panels move through the reading area. */
#art.copy-rail .scene-copy{position:absolute;top:0;bottom:0;height:100%;max-height:none;transform:none;padding:0;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
#art.copy-rail .story-copy-first,#art.copy-rail .story-copy-last{position:absolute;top:50%;left:0;width:100%;margin:0;will-change:transform}
#art.copy-rail .story-copy-first{transform:translateY(calc(-50% - var(--copy-travel,0px)))}
#art.copy-rail .story-copy-last{transform:translateY(calc(-50% + var(--copy-distance,700px) - var(--copy-travel,0px)))}
#art.copy-rail .story-anchor{top:var(--copy-distance,700px)}
#art.copy-rail.art-view .story-first{visibility:visible;opacity:1}
#art.copy-rail.art-view .story-last,#art.copy-rail.art-view .story-video{visibility:hidden;opacity:0}
@media(max-width:760px){
  #art.copy-rail .scene-copy{top:43%;bottom:0;height:57%;width:auto;left:24px;right:24px;margin:0}
  #art.copy-rail .story-copy-first,#art.copy-rail .story-copy-last{padding:12px 0}
}
@media(prefers-reduced-motion:reduce){
  #art.copy-rail .scene-copy{position:relative;inset:auto;width:auto;height:auto;overflow:visible;mask-image:none;padding:30px 6%;margin:0}
  #art.copy-rail .story-copy-first,#art.copy-rail .story-copy-last{position:relative;inset:auto;transform:none;will-change:auto;margin:0 0 32px}
}

/* Details for art and accessories are not available yet. */
.cta.cta-unavailable:disabled,.cta.cta-unavailable:disabled:hover{background:#e2e2df;border-color:#d2d2ce;color:#62645f;cursor:default;box-shadow:none}

/* The cue belongs to the initial viewport and disappears after the first scroll. */
.opening-actions{display:flex;align-items:center;gap:clamp(18px,2vw,32px)}
.scroll-cue{display:flex;flex:none;flex-direction:column;align-items:center;gap:2px;font-size:16px;font-weight:500;letter-spacing:.12em;color:#345b59;pointer-events:none;opacity:.95;transition:opacity .35s,visibility 0s}
.scroll-cue-arrow{font-size:30px;line-height:1.1;animation:scroll-hint 1.8s ease-in-out infinite}
@media(max-width:760px){.opening-actions{justify-content:center;gap:22px}.scroll-cue{font-size:15px}.scroll-cue-arrow{font-size:28px}}
.scroll-cue.is-hidden{opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.opening-heading span{display:inline-block}
@keyframes scroll-hint{0%,100%{transform:translateY(0);opacity:.45}60%{transform:translateY(5px);opacity:.9}}
@media(prefers-reduced-motion:reduce){.scroll-cue-arrow{animation:none}}

.health-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}
.health-actions .cta{margin:0;font-size:14px}
.health-phrase{display:inline-block}
@media(max-width:760px){.health-actions{gap:10px;margin-top:18px}.health-actions .cta{font-size:13px;padding:11px 16px}}

@media(max-width:760px){#oxygen .scene-copy h2{font-size:clamp(23px,6.3vw,28px);line-height:1.7}.health-phrase{white-space:nowrap}}