.chago-story{background:#1f1f1f;color:#f4f3f0}
.chago-story header{max-width:none;border-color:#ffffff18;height:88px}.chago-story nav a{color:#a5a6a2}.chago-story nav a[aria-current]{color:#fff}
.chago-story main{overflow:clip}.chago-story .skip{color:#101116;z-index:20}
.story-intro{min-height:88svh;padding:80px 7% 100px;max-width:1500px;margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.intro-brand{display:flex;align-items:center;gap:22px;margin-bottom:42px}.intro-brand img{width:76px;height:76px}.intro-brand span{font-size:10px;letter-spacing:2.3px;color:#a7a9a8}
.story-intro h1{font-size:clamp(42px,5.7vw,82px);letter-spacing:-.055em;line-height:1.17}.story-intro h1 span{color:#1bdaf3}.story-intro>p{color:#b0b4b2;font-size:16px;line-height:1.8;margin:30px 0}
.story-start{font-size:12px;border-bottom:1px solid #717573;padding:12px 0;display:flex;gap:48px;align-items:center}.story-start span{font-size:22px;color:#1bdaf3}
.experience{background:#f1f1ee;color:#1f1f1f;position:relative}
.experience-nav{padding:24px 6%;display:flex;gap:30px;align-items:center;justify-content:space-between;border-bottom:1px solid #1f1f1f16}.experience-nav>span{font-size:9px;letter-spacing:2px}.experience-nav nav{gap:24px;font-size:11px}.chago-story .experience-nav nav a{color:#626662}
.motion-toggle{background:none;border:1px solid #1f1f1f30;border-radius:30px;padding:8px 13px;font:500 10px Pretendard,sans-serif;color:#444;cursor:pointer}.motion-toggle:focus-visible{outline:2px solid #16899a;outline-offset:4px}
.scene{position:relative;isolation:isolate;scroll-margin-top:0}.scene-stage{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:60px 7%;column-gap:5%;overflow:clip}
.scene-copy{position:relative;z-index:2;will-change:transform;max-width:660px}.scene-copy .eyebrow{font-size:10px;letter-spacing:2px;color:#6c7774;margin:0 0 26px}.scene-copy h2{font-size:clamp(36px,4.6vw,72px);line-height:1.15;letter-spacing:-.055em;word-break:keep-all}.scene-copy h2 span{color:#727d78}.scene-copy>p:last-child{font-size:14px;color:#63706a;line-height:1.7;margin-top:26px}
.device-motion{position:relative;width:100%;height:88svh;display:flex;align-items:center;justify-content:center;transform-origin:50% 50%;will-change:transform}
.device-motion canvas{height:100%;width:100%;object-fit:contain;display:none}.device-motion.is-ready canvas{display:block}.device-motion.is-ready .scene-fallback{display:none}.scene-fallback{width:100%;height:100%;object-fit:contain}
.scene-index{position:absolute;bottom:24px;left:7%;font-size:9px;letter-spacing:2px;color:#929995}
.scene-diagnosis .device-motion{grid-column:1;grid-row:1;height:100svh}.scene-diagnosis .scene-copy{grid-column:2;grid-row:1}.scene-diagnosis .scene-copy h2{font-size:clamp(34px,4.1vw,64px)}
.scene-recommendation .scene-stage{grid-template-columns:.9fr 1.1fr;padding-top:40px}.scene-recommendation .device-motion{height:94svh;transform-origin:50% 30%}.scene-recommendation h2 span{color:#0898ac}
.chapter-divider{position:relative;z-index:3;background:#1f1f1f;color:#f4f3f0;padding:110px 7% 120px;min-height:48svh;display:flex;flex-direction:column;justify-content:center}.chapter-divider p{font-size:14px;color:#1bdaf3;margin:0 0 18px}.chapter-divider h2{font-size:clamp(46px,8vw,116px);line-height:1.1;letter-spacing:-.065em}.chapter-divider h2 span{color:#a5adab}
.motion-enabled .scene{height:200svh}.motion-enabled .scene-diagnosis{height:230svh}.motion-enabled .scene-recommendation{height:185svh}.motion-enabled .scene-stage{position:sticky;top:0;height:100svh;min-height:0;padding-block:0}
.story-outro{position:relative;z-index:5;background:#1f1f1f;text-align:center;padding:120px 24px 110px}.story-outro>img{margin-bottom:26px}.story-outro .eyebrow{color:#9eaaa7;font-size:9px}.story-outro h2{font-size:clamp(34px,4.4vw,60px);letter-spacing:-.045em}.story-outro h2 span{color:#1bdaf3}.story-outro>p:not(.eyebrow){color:#a7b0ac;font-size:13px;margin:28px 0 36px}.back-to-nanuq{display:block;font-size:11px;color:#a7b0ac;margin-top:30px}.chago-story footer{background:#f4f3f0}
@media(max-width:700px){
.chago-story header{height:74px}.story-intro{min-height:84svh;padding:50px 7% 70px}.intro-brand{gap:16px;margin-bottom:30px}.intro-brand img{width:58px;height:58px}.intro-brand span{font-size:8px}.story-intro h1{font-size:clamp(31px,8.5vw,48px);letter-spacing:-.06em}.story-intro>p{font-size:13px;margin:22px 0}
.experience-nav{padding:20px 6%;gap:12px;flex-wrap:wrap}.experience-nav>span{font-size:8px}.experience-nav nav{gap:16px}.experience-nav .motion-toggle{font-size:9px;padding:6px 10px}.experience-nav nav a:last-child{display:block}
.scene-stage,.scene-recommendation .scene-stage{display:flex;flex-direction:column;justify-content:flex-start;padding:40px 5% 0;gap:12px;min-height:115svh}.scene-copy,.scene-diagnosis .scene-copy{width:100%;max-width:none;padding:0 3%;flex:none}.scene-copy .eyebrow{font-size:8px;margin-bottom:16px}.scene-copy h2,.scene-diagnosis .scene-copy h2{font-size:clamp(32px,8.8vw,45px);line-height:1.12;letter-spacing:-.05em}.scene-copy>p:last-child{font-size:12px;margin:16px 0 0}
.device-motion,.scene-diagnosis .device-motion,.scene-recommendation .device-motion{height:78svh;min-height:0;width:100%;flex:none}.scene-scan .device-motion{height:83svh}.scene-diagnosis .device-motion{width:112%;height:82svh}.scene-recommendation .device-motion{height:90svh;width:108%;transform-origin:50% 25%}
.motion-enabled .scene{height:205svh}.motion-enabled .scene-diagnosis{height:245svh}.motion-enabled .scene-recommendation{height:210svh}.motion-enabled .scene-stage{height:115svh;top:-15svh;min-height:0;padding-block:32px 0}.scene-index{bottom:12px;font-size:8px}
.chapter-divider{min-height:42svh;padding:65px 7%}.chapter-divider h2{font-size:58px}.story-outro{padding:80px 20px}.chago-story footer{padding:35px 6%}
}
@media(prefers-reduced-motion:reduce){.device-motion,.scene-copy{will-change:auto;transform:none!important}html{scroll-behavior:auto}}

/* Keep the recommendation's top edge inside the settled viewport. */
.scene-recommendation .device-motion{height:82svh;transform-origin:50% 50%}

/* A full viewport fades to charcoal before the CRM chapter begins. */
.crm-divider{position:relative;background:#1f1f1f;color:var(--bridge-fg,#f4f3f0)}
.crm-transition{min-height:90svh;background:var(--bridge-bg,#1f1f1f);padding:100px 8%;display:flex;flex-direction:column;justify-content:center}
.crm-transition>p{font-size:11px;letter-spacing:3px;color:var(--bridge-accent,#1bdaf3);margin:0 0 30px}
.crm-transition h2{font-size:clamp(48px,7.6vw,112px);letter-spacing:-.06em;line-height:1.15}.crm-transition h2 span{opacity:.64}
.crm-route{display:flex;gap:0;margin-top:55px;font-size:13px;letter-spacing:.03em}.crm-route span+span:before{content:'→';margin:0 25px;opacity:.4}
.motion-enabled .crm-divider{height:180svh}.motion-enabled .crm-transition{position:sticky;top:0;height:100svh;min-height:0}
.crm-chapter{position:relative;background:#1f1f1f;color:#f4f3f0;isolation:isolate;scroll-margin-top:0}
.crm-stage{min-height:100svh;display:grid;grid-template-columns:.85fr 1.3fr;gap:5%;padding:80px 7%;align-items:center;overflow:clip}
.crm-copy{z-index:2;position:relative;will-change:transform}.crm-copy .eyebrow{font-size:10px;letter-spacing:2px;color:#1bdaf3;margin-bottom:26px}
.crm-copy h2{font-size:clamp(34px,4.2vw,64px);line-height:1.16;letter-spacing:-.055em;word-break:keep-all}.crm-copy h2 span{color:#98a5a5}
.crm-copy>p:last-of-type{color:#a5b0b0;font-size:13px;line-height:1.7;margin-top:25px}
.crm-visual{position:relative;width:100%;will-change:transform;transform-origin:center}
.crm-device{position:relative;background:#121212;overflow:hidden;border:2px solid #565a5a;box-shadow:0 24px 65px #0008,0 0 0 2px #101010;border-radius:25px;padding:11px}
.crm-device img{width:100%;height:auto;display:block;border-radius:15px}
.crm-device .crm-next{position:absolute;inset:11px;width:calc(100% - 22px);height:calc(100% - 22px);object-fit:contain;opacity:0;background:#222}
.crm-step-labels{display:flex;gap:20px;margin-top:32px;font-size:11px}.crm-step-labels span{padding-bottom:10px;border-bottom:2px solid #1bdaf3;opacity:calc(1 - var(--step-blend,0)*.65)}.crm-step-labels span+span{opacity:calc(.35 + var(--step-blend,0)*.65)}
.motion-enabled .crm-chapter{height:175svh}.motion-enabled .crm-stage{position:sticky;top:0;height:100svh;min-height:0;padding-block:45px}
.crm-history .crm-stage,.crm-report .crm-stage{display:flex;flex-direction:column;justify-content:center;gap:45px;text-align:center}
.crm-history .crm-copy h2,.crm-report .crm-copy h2{font-size:clamp(34px,4.5vw,68px)}
.crm-history .crm-visual{width:min(1100px,88vw,105svh)}.crm-history .crm-device{border-radius:20px;padding:8px}.crm-history .crm-device img{border-radius:12px}
.crm-booking .crm-stage{grid-template-columns:1.3fr .85fr}.crm-booking .crm-visual{grid-column:1;grid-row:1}.crm-booking .crm-copy{grid-column:2;grid-row:1}
.crm-finance .crm-visual{width:110%}.crm-finance .crm-stage{grid-template-columns:.8fr 1.35fr}
.revenue-divider{padding-block:100px;min-height:60svh}.revenue-divider h2{font-size:clamp(46px,6.5vw,94px)}
.crm-report .crm-visual{width:min(960px,80vw,86svh)}.crm-report .report-panel{padding:0;border-radius:14px;border-color:#535a59;box-shadow:0 24px 80px #0008}.crm-report img{border-radius:12px}
.crm-report .crm-copy h2 span{color:#1bdaf3}.motion-enabled .crm-history{height:145svh}.motion-enabled .crm-report{height:160svh}
.story-outro{padding-top:150px;border-top:1px solid #ffffff0d}
@media(max-width:700px){
 .scene-recommendation .device-motion{height:72svh;width:104%;transform-origin:50% 25%}
 .motion-enabled .scene-recommendation .scene-stage{top:0;height:110svh;padding-top:32px}
 .crm-transition{padding:60px 8%}.crm-transition h2{font-size:clamp(40px,10vw,60px)}.crm-route{margin-top:36px;font-size:11px}.crm-route span+span:before{margin:0 15px}
 .motion-enabled .crm-divider{height:155svh}
 .crm-stage,.crm-booking .crm-stage,.crm-finance .crm-stage{display:flex;flex-direction:column;justify-content:center;gap:35px;padding:65px 6%;min-height:90svh}
 .crm-copy{width:100%}.crm-copy .eyebrow{font-size:8px;margin-bottom:20px}.crm-copy h2,.crm-history .crm-copy h2,.crm-report .crm-copy h2{font-size:clamp(30px,8.6vw,42px)}.crm-copy>p:last-of-type{font-size:12px;margin-top:18px}
 .crm-visual,.crm-finance .crm-visual{width:108%;flex:none}.crm-device{padding:6px;border-radius:17px;border-width:1px}.crm-device img{border-radius:11px}.crm-device .crm-next{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
 .crm-history .crm-stage,.crm-report .crm-stage{text-align:left;gap:38px}.crm-history .crm-visual,.crm-report .crm-visual{width:108%}.crm-history .crm-device{padding:6px;border-radius:14px}
 .motion-enabled .crm-chapter{height:160svh}.motion-enabled .crm-stage{height:100svh;padding:42px 6%}.motion-enabled .crm-history{height:135svh}.motion-enabled .crm-report{height:140svh}
 .crm-step-labels{font-size:10px;margin-top:24px}.revenue-divider{min-height:48svh;padding:70px 8%}.revenue-divider h2{font-size:clamp(36px,9.5vw,52px)}
}
@media(prefers-reduced-motion:reduce){.crm-visual,.crm-copy{will-change:auto;transform:none!important}}

/* Full tablets enter in perspective, then the screen zooms into the workflow. */
.crm-history .crm-stage,.crm-report .crm-stage{display:grid;grid-template-columns:.85fr 1.3fr;column-gap:5%;text-align:left}
.crm-history .crm-visual,.crm-report .crm-visual,.crm-finance .crm-visual{width:100%}
.crm-device,.crm-history .crm-device{aspect-ratio:4/3;padding:0;border-radius:26px}
.crm-screen{position:absolute;inset:12px;overflow:hidden;border-radius:15px;background:#222}
.crm-device .crm-screen img,.crm-device .crm-screen .crm-next{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;transform:scale(var(--screen-zoom,1));transform-origin:var(--screen-origin,50% 50%);will-change:transform}
.motion-enabled .crm-chapter,.motion-enabled .crm-history,.motion-enabled .crm-report{height:215svh}
@media(max-width:700px){
 .crm-history .crm-stage,.crm-report .crm-stage{display:flex;flex-direction:column;text-align:left;gap:35px}
 .crm-history .crm-visual,.crm-report .crm-visual,.crm-finance .crm-visual{width:108%}
 .crm-device,.crm-history .crm-device{border-radius:18px}.crm-screen{inset:7px;border-radius:11px}
 .motion-enabled .crm-chapter,.motion-enabled .crm-history,.motion-enabled .crm-report{height:200svh}
}
@media(prefers-reduced-motion:reduce){.crm-screen img{will-change:auto;transform:none!important}.crm-copy{opacity:1!important}}

/* v5: workflow-specific transitions, with the tablet as the starting context. */
.crm-layers{display:none;position:absolute;inset:0;z-index:3;pointer-events:none}
.motion-enabled .crm-layers{display:flex;align-items:center;justify-content:center}
.crm-device .crm-screen .crm-next{opacity:1}
.crm-care .crm-next{clip-path:inset(0 0 0 calc((1 - var(--wipe,1))*100%))}
.payment-wipe{display:none;position:absolute;top:0;bottom:0;left:calc((1 - var(--wipe,1))*100%);width:2px;background:#1bdaf3;box-shadow:0 0 25px #1bdaf3;opacity:calc(4*var(--wipe,1)*(1 - var(--wipe,1)));z-index:2}
.motion-enabled .payment-wipe{display:block}
.crm-booking .crm-screen>img:first-child{transform:translateY(calc(var(--turn,1)*-38%)) scale(calc(1 - var(--turn,1)*.08));opacity:calc(1 - var(--turn,1))}
.crm-booking .crm-screen>.crm-next{transform:translateY(calc((1 - var(--turn,1))*102%)) scale(var(--screen-zoom,1));transform-origin:var(--screen-origin,46% 70%)}
.motion-panel{display:block;position:relative;border-radius:18px;box-shadow:0 28px 80px #0009;will-change:transform,opacity}
.history-layers{gap:5%;padding:0 7%}
.history-profile{width:29%;height:auto;opacity:var(--spread,0);transform:translate(calc((1 - var(--spread,0))*28vw),calc((1 - var(--spread,0))*13svh)) rotate(calc((1 - var(--spread,0))*-6deg)) scale(calc(.58 + var(--spread,0)*.42))}
.history-entry{width:66%;height:auto;opacity:var(--record,0);transform:translate(calc((1 - var(--record,0))*12vw),calc((1 - var(--record,0))*20svh)) rotate(calc((1 - var(--record,0))*5deg)) scale(calc(.64 + var(--record,0)*.36))}
.history-connection{position:absolute;height:1px;width:60%;left:20%;top:50%;background:#1bdaf3;opacity:calc(var(--record,0)*.7);transform:scaleX(var(--record,0));transform-origin:left}
.history-connection:after{content:'';position:absolute;right:0;top:-4px;width:9px;height:9px;border-radius:50%;background:#1bdaf3;box-shadow:0 0 20px #1bdaf3}
.finance-chart{width:min(84vw,128svh,1200px);height:auto;opacity:var(--chart,0);clip-path:inset(0 calc((1 - var(--reveal,0))*100%) 0 0 round 18px);transform:translate(calc((1 - var(--chart,0))*18vw),calc((1 - var(--chart,0))*12svh)) scale(calc(.65 + var(--chart,0)*.35))}
.report-layers{perspective:1600px}
.report-sheet{width:min(83vw,125svh,1180px);filter:drop-shadow(0 30px 45px #0008);opacity:var(--sheet,0);transform:translateY(calc((1 - var(--sheet,0))*25svh)) scale(calc(.72 + var(--sheet,0)*.28));transform-style:preserve-3d}
.report-sheet img{display:block;width:100%;height:auto;backface-visibility:hidden}
.crm-report .report-top{border-radius:15px 15px 0 0}
.crm-report .report-bottom{border-radius:0 0 15px 15px;transform-origin:50% 0;transform:rotateX(calc((1 - var(--unfold,0))*-82deg));opacity:var(--unfold,0);will-change:transform}
.report-mobile{display:none}
.motion-enabled .crm-care{height:220svh}.motion-enabled .crm-history{height:205svh}.motion-enabled .crm-booking{height:235svh}.motion-enabled .crm-finance{height:210svh}.motion-enabled .crm-report{height:220svh}
@media(max-width:700px){
 .history-layers{flex-direction:column;gap:34px;padding:0 6%}
 .history-profile{width:82%;max-width:330px;transform:translate(calc((1 - var(--spread,0))*18vw),calc((1 - var(--spread,0))*14svh)) rotate(calc((1 - var(--spread,0))*-4deg)) scale(calc(.68 + var(--spread,0)*.32))}
 .history-entry{width:100%;transform:translateY(calc((1 - var(--record,0))*22svh)) scale(calc(.8 + var(--record,0)*.2));border-radius:10px}
 .history-connection{height:36%;width:1px;left:50%;top:38%;transform:scaleY(var(--record,0));transform-origin:top}
 .history-connection:after{right:-4px;top:auto;bottom:0}
 .finance-chart{width:94vw;border-radius:12px;clip-path:inset(0 calc((1 - var(--reveal,0))*100%) 0 0 round 12px)}
 .report-sheet{width:94vw}.crm-report .report-top{border-radius:9px 9px 0 0}.crm-report .report-bottom{border-radius:0 0 9px 9px}
 .report-mobile{display:grid;gap:12px;padding:12px 0;perspective:900px}
 .report-mobile img{border-radius:12px;transform-origin:50% 0;opacity:var(--unfold,0);transform:rotateX(calc((1 - var(--unfold,0))*-65deg)) translateY(calc((1 - var(--unfold,0))*65px))}
 .report-mobile img+img{transform:rotateX(calc((1 - var(--unfold,0))*-82deg)) translateY(calc((1 - var(--unfold,0))*130px))}
 .crm-report .report-bottom{display:none}
 .motion-enabled .crm-care{height:205svh}.motion-enabled .crm-history{height:210svh}.motion-enabled .crm-booking{height:225svh}.motion-enabled .crm-finance{height:190svh}.motion-enabled .crm-report{height:205svh}
}
@media(prefers-reduced-motion:reduce){.crm-layers,.payment-wipe{display:none!important}.crm-visual{opacity:1!important}}

/* Do not stretch native detail crops beyond available display pixels. */
.history-profile{max-width:calc(761px / var(--quality-dpr,1))}
.history-entry{max-width:calc(1705px / var(--quality-dpr,1))}
.finance-chart{max-width:calc(1537px / var(--quality-dpr,1))}
.report-sheet{max-width:calc(2304px / var(--quality-dpr,1))}
/* Let the browser rerasterize at the current zoom instead of retaining a small GPU layer. */
.crm-visual,.crm-device .crm-screen img,.motion-panel,.crm-report .report-bottom{will-change:auto}
/* Size zoomed UI at its final layout resolution before clipping to the bezel. */
.crm-care .crm-device .crm-screen>img{width:calc(100% * var(--screen-zoom,1));height:calc(100% * var(--screen-zoom,1));left:calc(100% * (1 - var(--screen-zoom,1)));top:calc(80% * (1 - var(--screen-zoom,1)));transform:none}
.crm-booking .crm-device .crm-screen>.crm-next{width:calc(100% * var(--screen-zoom,1));height:calc(100% * var(--screen-zoom,1));left:calc(46% * (1 - var(--screen-zoom,1)));top:calc((1 - var(--turn,1))*102% + 70% * (1 - var(--screen-zoom,1)));transform:none}
