:root{--sky:#dceeed;--paper:#fff;--soft:#f6faf9;--ink:#111821;--muted:#6f7f81;--line:rgba(17,24,33,.17);--line2:rgba(17,24,33,.09);--accent:#197690;--navy:#162c43;--coral:#bd5a52;--green:#398362;--sans:"Helvetica Neue","Avenir Next","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit}
.hero{min-height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--sky)}
.concept{position:relative;width:min(84vw,900px);aspect-ratio:1.28;max-height:86svh;isolation:isolate}.concept:before{content:"";position:absolute;inset:10% 15%;z-index:-1;border:1px solid var(--line);border-radius:50%}
.hero-title{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);font-size:clamp(28px,4vw,54px);font-weight:300;letter-spacing:.19em;text-indent:.19em;white-space:nowrap}
.node{--size:clamp(112px,14vw,164px);position:absolute;left:var(--x);top:var(--y);z-index:2;width:var(--size);height:var(--size);padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:var(--ink);text-align:center;text-decoration:none;transform:translate(-50%,-50%);transition:transform .68s cubic-bezier(.2,.72,.16,1),background-color .5s,box-shadow .65s;box-shadow:0 0 0 1px rgba(17,24,33,.035);outline:none;-webkit-tap-highlight-color:transparent}
.node__label{font-size:clamp(15px,1.55vw,21px);font-weight:400;letter-spacing:.07em;transition:transform .52s cubic-bezier(.2,.72,.16,1)}.node__subtitle{max-width:92%;max-height:0;margin-top:0;overflow:hidden;color:var(--accent);font-size:clamp(10px,1.05vw,13px);font-weight:500;line-height:1.65;letter-spacing:.04em;opacity:0;transform:translateY(8px);transition:opacity .36s,transform .52s,max-height .52s,margin-top .52s}
.node:hover,.node:focus-visible,.node.is-active{z-index:5;background:var(--soft);transform:translate(-50%,-50%) scale(1.16);box-shadow:0 20px 50px rgba(39,90,91,.13)}.node:focus-visible{box-shadow:0 0 0 2px var(--ink),0 20px 50px rgba(39,90,91,.13)}.node:hover .node__label,.node:focus-visible .node__label,.node.is-active .node__label{transform:translateY(-6px)}.node:hover .node__subtitle,.node:focus-visible .node__subtitle,.node.is-active .node__subtitle{max-height:58px;margin-top:5px;opacity:1;transform:translateY(0)}
.chapter{padding:clamp(88px,11vw,150px) clamp(22px,6vw,88px)}.paper{background:var(--paper)}.sky{background:var(--sky)}.soft{background:var(--soft)}.inner{width:min(1180px,100%);margin:auto}
.label{margin:0 0 22px;color:var(--accent);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}.title{max-width:980px;margin:0;font-size:clamp(30px,5vw,64px);font-weight:300;line-height:1.3;letter-spacing:-.025em}.lead{max-width:860px;margin:28px 0 0;color:#45575b;font-size:clamp(15px,1.5vw,19px);line-height:2}.rule{height:1px;margin:52px 0;background:var(--line)}.micro{color:var(--muted);font-size:10px;line-height:1.8}.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.panel{padding:clamp(30px,4vw,54px);border:1px solid var(--line2);background:rgba(255,255,255,.72)}.panel.coral{border-left:3px solid var(--coral)}.panel.green{border-left:3px solid var(--green)}.kicker{margin:0 0 18px;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.panel h3{margin:0 0 24px;font-size:clamp(21px,2.4vw,30px);font-weight:400;line-height:1.45}
.list{margin:0;padding:0;list-style:none}.list li{position:relative;padding:12px 0 12px 20px;border-top:1px solid var(--line2);color:#2f3e42;font-size:15px;line-height:1.8}.list li:before{content:"";position:absolute;left:0;top:23px;width:5px;height:5px;border-radius:50%;background:var(--accent)}.result{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:14px;font-weight:500;line-height:1.8}.statement{margin:56px 0 0;padding-top:30px;border-top:1px solid var(--line);font-size:clamp(18px,2.2vw,28px);line-height:1.7}.sub{margin-top:clamp(88px,12vw,150px)}.sub-title{max-width:950px;margin:0 0 36px;font-size:clamp(25px,3.5vw,44px);font-weight:300;line-height:1.4}.insight{margin:28px 0 0;padding:18px 22px;border-left:2px solid var(--accent);background:rgba(255,255,255,.72);color:#304247;font-size:14px;line-height:1.8}
.bench{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}.bench h4{margin:0 0 10px;padding:11px 13px;color:#fff;font-size:12px;font-weight:600}.a{background:#c96b19}.b{background:#3175b8}.c{background:#1f8f8d}.d{background:#775492}.e{background:#5a8c36}.case{min-height:164px;margin-bottom:10px;padding:16px 14px;border:1px solid var(--line2);background:#fff}.case a{font-size:12px;font-weight:600;line-height:1.5;text-underline-offset:3px}.case p{margin:28px 0 0;color:#4c5d60;font-size:11px;line-height:1.75}
.factors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}.factor{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:28px 0;border-top:1px solid var(--line2)}.factor>span{color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.14em}.factor h4{margin:0 0 8px;font-size:18px;font-weight:500}.factor p{margin:0;color:#506064;font-size:14px;line-height:1.8}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.service{min-height:480px;padding:clamp(28px,3vw,42px);display:flex;flex-direction:column;background:#17191a;color:#fff}.code{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:var(--sky);color:var(--ink);font-size:25px;font-weight:500}.service h3{margin:52px 0 6px;font-size:clamp(24px,2.5vw,34px);font-weight:400}.service h4{margin:0;color:#cfe4e3;font-size:13px;letter-spacing:.08em}.service p{margin:auto 0 0;color:rgba(255,255,255,.77);font-size:14px;line-height:2}.service .for{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);color:#fff;font-size:12px}
.stakeholders,.design{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}.stake,.phase-card{min-width:0;background:#fff}.stake h3,.phase-card h3{min-height:102px;margin:0;padding:28px 18px;display:flex;align-items:flex-end;background:var(--navy);color:#fff;font-size:16px;font-weight:400;line-height:1.45}.phase-card h3{place-content:center;text-align:center}.stake dl,.phase-card dl{margin:0}.stake dl>div,.phase-card dl>div{min-height:150px;padding:22px 18px;border-top:1px solid var(--line2)}.stake dl>div:nth-child(even),.phase-card dl>div:nth-child(even){background:var(--soft)}dt{margin-bottom:12px;color:var(--accent);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}dd{margin:0;color:#354448;font-size:13px;line-height:1.8}.revenue,.process{margin-top:28px;padding:24px 28px;background:var(--navy);color:#fff;font-size:13px;line-height:2;text-align:center;letter-spacing:.04em}
.phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end}.phase{min-height:var(--h);padding:26px 18px;display:flex;flex-direction:column;border:1px solid rgba(25,118,144,.42);background:rgba(255,255,255,.58)}.phase span{color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.09em}.phase h3{margin:20px 0 0;font-size:19px;font-weight:500;line-height:1.4}.phase p{margin:16px 0 0;color:#536367;font-size:12px;line-height:1.8}.phase strong{margin-top:auto;padding-top:28px;color:#1f8f8d;font-size:11px}.phase-card dl>div{min-height:164px}.phase-card dd{font-size:12px}.transition{margin:28px 0 0;text-align:center;color:var(--navy);font-size:clamp(18px,2.2vw,28px);font-weight:500;letter-spacing:.04em}
.timeline{display:grid;grid-template-columns:1.05fr 1.05fr .42fr 1.05fr 1.05fr;gap:12px}.stage{display:flex;flex-direction:column;gap:12px}.time{min-height:42px;font-size:22px}.pilot{flex:1;min-height:260px;padding:28px 22px;border:1px solid rgba(25,118,144,.34);background:rgba(255,255,255,.68)}.pilot small{color:var(--accent);font-size:10px;font-weight:600;letter-spacing:.1em}.pilot h3{margin:18px 0 12px;font-size:21px;font-weight:500;line-height:1.45}.pilot p{margin:0;color:#4e5e62;font-size:12px;line-height:1.85}.gate{height:100%;min-height:180px;display:grid;place-items:center;padding:18px 8px;background:#4775c5;color:#fff;font-size:17px;line-height:1.55;text-align:center}.cap{margin:26px 0 0;color:#415255;font-size:13px;line-height:2}
.decisions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.decision{padding:clamp(30px,4vw,50px);border-top:3px solid var(--coral);background:rgba(255,255,255,.72)}.decision:last-child{border-color:var(--green)}.decision h3{margin:0 0 24px;font-size:clamp(22px,2.5vw,30px);font-weight:400}

/* Presentation theme: deep navy, sharp yellow, stronger hierarchy */
.navigator{background:radial-gradient(circle at 52% 48%,#123d72 0,#0a2853 42%,#061a38 100%)}
.navigator:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at center,#000,transparent 76%)}
.navigator .concept:before{border:1px solid rgba(255,212,0,.72);box-shadow:0 0 48px rgba(255,212,0,.08)}
.navigator .hero-title{color:#fff;font-weight:300;text-shadow:0 0 30px rgba(48,123,211,.28)}
.navigator .node{background:#fff;color:#081a35;box-shadow:0 18px 44px rgba(0,0,0,.22),0 0 0 1px rgba(255,212,0,.14)}
.navigator .node__subtitle{color:#0a4c87;font-weight:700}
.navigator .node:hover,.navigator .node:focus-visible,.navigator .node.is-active{background:#ffd400;box-shadow:0 24px 58px rgba(0,0,0,.32),0 0 0 5px rgba(255,212,0,.14)}
.navigator .node.is-active{box-shadow:0 0 0 2px #ffd400,0 24px 58px rgba(0,0,0,.32)}
.details,.details .chapter{background:#071a38;color:#fff}
.details .chapter{background-image:linear-gradient(135deg,rgba(21,61,111,.34),transparent 42%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,100% 56px}
.details .label{display:inline-block;margin-bottom:18px;padding-bottom:8px;border-bottom:3px solid #ffd400;color:#ffd400;font-size:11px;font-weight:800}
.details .title{max-width:930px;color:#fff;font-weight:750;line-height:1.18;letter-spacing:-.04em;text-wrap:balance}
.details .lead{max-width:900px;color:#cfdaea;font-size:clamp(16px,1.55vw,20px);font-weight:500;line-height:1.9}
.details .rule{width:86px;height:5px;margin:34px 0 46px;background:#ffd400}
.details .sub-title{color:#fff;font-weight:750;line-height:1.25;letter-spacing:-.025em;text-wrap:balance}
.details .panel{border:1px solid rgba(255,255,255,.13);border-left:5px solid #ffd400;background:#0d2b55;box-shadow:0 24px 55px rgba(0,0,0,.18)}
.details .panel.coral,.details .panel.green{border-left-color:#ffd400}
.details .kicker{color:#ffd400;font-size:11px;font-weight:800}
.details .panel h3{color:#fff;font-weight:700}
.details .list li{border-color:rgba(255,255,255,.11);color:#f2f6fb;font-size:15px;font-weight:500}
.details .list li:before{width:7px;height:7px;background:#ffd400}
.details .result{border-color:rgba(255,212,0,.42);color:#ffd400;font-weight:800}
.details .statement{padding:28px 32px;border:0;background:#ffd400;color:#061a38;font-weight:850;line-height:1.45;box-shadow:0 22px 52px rgba(0,0,0,.22)}
.details .insight{padding:24px 26px;border-left:6px solid #ffd400;background:#102f5a;color:#fff;font-size:15px;font-weight:650;line-height:1.75}
.details .micro{color:#91a5c2}
.details .bench h4{background:#ffd400!important;color:#071a38;font-weight:850}
.details .case{border-color:rgba(255,255,255,.12);background:#0b274e}
.details .case a{color:#fff;font-size:13px;font-weight:800;text-decoration-color:#ffd400}
.details .case p{color:#bac8dc}
.details .factor{border-color:rgba(255,255,255,.14)}
.details .factor>span{color:#ffd400;font-size:14px;font-weight:850}
.details .factor h4{color:#fff;font-size:20px;font-weight:750}
.details .factor p{color:#c4d0e0}
.service-diagram{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 26px}
.route-card{position:relative;min-width:0;padding:28px 22px 22px;border-top:5px solid #ffd400;border-radius:0 0 28px 28px;background:#030f24;overflow:hidden;box-shadow:0 24px 54px rgba(0,0,0,.24)}
.route-card__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}.route-card__code{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#ffd400;color:#061a38;font-size:23px;font-weight:900}.route-card__head strong{color:#fff;font-size:18px;font-weight:800}.route-card__head small{display:block;margin-top:3px;color:#91a5c2;font-size:10px;letter-spacing:.08em}.route-card svg{display:block;width:100%;height:auto}.route-base{fill:none;stroke:#fff;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}.route-accent{fill:none;stroke:#ffd400;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.route-dot{fill:#ffd400}.route-card svg text{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.08em}.route-card__caption{margin:8px 0 0;color:#c4d0e0;font-size:12px;font-weight:600;line-height:1.65}
.details .service{min-height:420px;border:1px solid rgba(255,255,255,.12);border-top:5px solid #ffd400;background:#0b274e;box-shadow:0 20px 48px rgba(0,0,0,.18)}
.details .code{background:#ffd400;color:#071a38;font-weight:900}
.details .service h3{color:#fff;font-weight:800}.details .service h4{color:#ffd400;font-weight:800}.details .service p{color:#c9d5e4}.details .service .for{border-color:rgba(255,212,0,.35);color:#fff;font-weight:700}
.details .stakeholders,.details .design{gap:2px;border:0;background:rgba(255,255,255,.12)}
.details .stake,.details .phase-card{background:#0b274e}
.details .stake h3,.details .phase-card h3{border-top:4px solid #ffd400;background:#04152f;color:#fff;font-weight:750}
.details .stake dl>div,.details .phase-card dl>div{border-color:rgba(255,255,255,.1)}
.details .stake dl>div:nth-child(even),.details .phase-card dl>div:nth-child(even){background:#0e315e}
.details dt{color:#ffd400;font-weight:850}.details dd{color:#eef3fa;font-weight:500}
.details .revenue,.details .process{background:#ffd400;color:#061a38;font-weight:850}
.details .phase{border:1px solid rgba(255,212,0,.5);background:#0b274e;box-shadow:0 16px 36px rgba(0,0,0,.15)}
.details .phase span,.details .phase strong{color:#ffd400;font-weight:850}.details .phase h3{color:#fff;font-weight:800}.details .phase p{color:#c8d4e4}.details .transition{color:#ffd400;font-weight:900}
.details .time{color:#ffd400;font-weight:850}.details .pilot{border:1px solid rgba(255,255,255,.14);border-top:4px solid #ffd400;background:#0b274e}.details .pilot small{color:#ffd400;font-weight:800}.details .pilot h3{color:#fff;font-weight:800}.details .pilot p{color:#c5d1e1}.details .gate{background:#ffd400;color:#061a38;font-weight:900}.details .cap{color:#e8eef7;font-weight:650}
.details .decision{border-top:5px solid #ffd400;background:#0b274e}.details .decision:last-child{border-color:#ffd400}.details .decision h3{color:#fff;font-weight:800}
.connector line{stroke:rgba(255,212,0,.42)}
.details{scrollbar-color:rgba(255,212,0,.5) transparent}
@media(max-width:980px){.bench,.stakeholders,.design,.phases{grid-template-columns:repeat(2,minmax(0,1fr))}.phase{min-height:360px}.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.hero{min-height:auto;padding:80px 18px}.concept{width:100%;max-height:none;aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}.concept:before{display:none}.hero-title{position:static;grid-column:1/-1;margin:0 0 36px;transform:none;text-align:center}.node{--size:min(40vw,150px);position:relative;left:auto!important;top:auto!important;justify-self:center;transform:none}.node:hover,.node:focus-visible,.node.is-active{transform:scale(1.07)}.split,.services,.factors,.decisions,.bench,.stakeholders,.design,.phases,.timeline{grid-template-columns:1fr}.case,.stake h3,.phase-card h3,.stake dl>div,.phase-card dl>div,.phase,.pilot{min-height:auto}.phase strong{margin-top:28px;padding-top:0}.service{min-height:420px}.time{margin-top:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important}}

/* Interactive split layout */
body{overflow:hidden}
.experience{height:100svh;display:grid;grid-template-columns:47% 53%;background:var(--paper)}
.navigator{position:relative;height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--sky)}
.navigator .concept{width:min(43vw,640px);max-width:88%;max-height:86svh}
.navigator .hero-title{font-size:clamp(24px,3vw,42px)}
.navigator .node{--size:clamp(90px,9vw,126px)}
.navigator .node.is-active{box-shadow:0 0 0 1px var(--accent),0 20px 50px rgba(39,90,91,.13)}
.details{height:100svh;overflow-y:auto;overflow-x:hidden;background:#fff;scrollbar-width:thin;scrollbar-color:rgba(17,24,33,.22) transparent}
.details .chapter{display:none;min-height:100svh;padding:clamp(40px,5vw,76px) clamp(30px,4.4vw,72px) 100px;background:#fff}
.details .chapter.is-active{display:block;animation:panel-in .48s cubic-bezier(.2,.72,.16,1)}
.details .inner{width:100%;max-width:980px}
.details .title{font-size:clamp(30px,3.6vw,54px)}
.details .sub-title{font-size:clamp(24px,2.7vw,38px)}
.details .rule{margin:34px 0}.details .sub{margin-top:80px}
.details .panel{padding:clamp(25px,2.7vw,40px)}
.details .bench{grid-template-columns:repeat(2,minmax(0,1fr))}
.details .stakeholders,.details .design,.details .phases{grid-template-columns:repeat(2,minmax(0,1fr))}
.details .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
.details .phase{min-height:340px}
.mobile-close{display:none}
.connector{position:fixed;inset:0;z-index:20;width:100vw;height:100svh;pointer-events:none;overflow:visible}
.connector line{stroke:rgba(17,24,33,.2);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;transition:x1 .46s cubic-bezier(.2,.72,.16,1),y1 .46s cubic-bezier(.2,.72,.16,1),y2 .46s cubic-bezier(.2,.72,.16,1),opacity .24s}
@keyframes panel-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Keep the presentation palette above the split-layout defaults */
.experience{background:#071a38}
.navigator{background:radial-gradient(circle at 52% 48%,#123d72 0,#0a2853 42%,#061a38 100%)}
.details{background:#071a38}
.details .chapter{background-color:#071a38}
.connector line{stroke:rgba(255,212,0,.42)}

@media(max-width:900px){
 body{overflow:auto}body.mobile-detail-open{overflow:hidden}.experience{height:auto;display:block}.navigator{height:auto;min-height:100svh;padding:78px 18px}.navigator .concept{width:100%;max-width:none;max-height:none}.connector{display:none}.details{display:none;position:fixed;inset:0;z-index:50;width:100%;height:100dvh;min-height:100svh;overflow-y:auto;overflow-x:hidden;background:#071a38;-webkit-overflow-scrolling:touch}.details.is-open{display:block}.details .chapter{min-height:100%;padding:calc(76px + env(safe-area-inset-top)) 22px calc(100px + env(safe-area-inset-bottom))}.details .chapter.is-active{display:block}.details .bench,.details .stakeholders,.details .design,.details .phases,.details .timeline,.details .service-diagram{grid-template-columns:1fr}.details .phase{min-height:auto}.details .title{font-size:clamp(32px,10vw,48px)}.details .statement{padding:24px 22px}.mobile-close{position:fixed;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:60;display:block;padding:12px 14px;border:0;background:#ffd400;color:#071a38;font:800 10px/1 var(--sans);letter-spacing:.14em;box-shadow:0 10px 28px rgba(0,0,0,.25)}
}