/* --- BLOCK: A single continuous, full-screen canvas --- */
body{background:#b8dcec}.site-header{position:absolute;inset:0 0 auto;z-index:5;border:0;max-width:none;padding:30px 4%;min-height:0;color:#173d59;transition:color .6s}.brand{border:0;padding:0;background:none}.brand span{color:inherit}.scene-contact{font-size:.875rem;border-bottom:1px solid currentColor}.site-footer{position:absolute;inset:auto 0 0;max-width:none;border:0;z-index:5;padding:22px 4%;color:#173d59;transition:color .6s}.site-footer div{display:none}#main{max-width:none;min-height:100svh}.scene{position:relative;min-height:100svh;isolation:isolate;overflow:hidden}.blue-field{position:absolute;inset:0;z-index:-2;transition:clip-path .85s cubic-bezier(.65,0,.2,1)}.blue-field.light{background:#b8dcec;clip-path:inset(0 50% 0 0)}.blue-field.dark{background:#123f62;clip-path:inset(0 0 0 50%)}.scene[data-audience=investor] .blue-field.light,.scene[data-audience=startup] .blue-field.dark{clip-path:inset(0);z-index:-1}.scene[data-audience=startup]~*{color:white}body[data-audience=startup] .site-header,body[data-audience=startup] .site-footer{color:#f1f7fb}.scene-contact:hover{color:inherit;opacity:.7}.site-header .brand:hover{color:inherit}.site-header .brand img{width:70px}.intro-scene{position:relative;min-height:100svh;transition:opacity .3s,transform .55s}.scene.is-map .intro-scene{opacity:0;transform:translateY(-18px);pointer-events:none}.slogan{position:absolute;top:23%;left:8%;right:8%;text-align:center;font-size:clamp(3rem,6.6vw,6.5rem);font-weight:400;line-height:1.05;letter-spacing:-.055em;color:transparent;background:linear-gradient(90deg,#173d59 50%,#f1f7fb 50%);background-clip:text;-webkit-background-clip:text;pointer-events:none}.slogan span{display:block}.choices{position:absolute;left:0;right:0;top:57%;bottom:15%;display:grid;grid-template-columns:1fr 1fr}.audience-choice{background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:25px;color:#173d59;transition:background .25s}.audience-choice.startup{color:#f1f7fb}.audience-choice:hover{background:#ffffff09}.choice-title{font-size:clamp(1.5rem,2.4vw,2.5rem);font-weight:400;letter-spacing:-.03em}.choice-action{font-size:.9375rem;border-bottom:1px solid currentColor;padding-bottom:5px}.audience-choice:hover .choice-action{padding-bottom:9px}.choice-action{transition:padding .2s}.intro-scene .choose-note{position:absolute;bottom:10%;left:0;right:0;text-align:center;color:transparent;background:linear-gradient(90deg,#173d59 50%,#f1f7fb 50%);background-clip:text;-webkit-background-clip:text;font-size:.8125rem}
/* --- BLOCK: The map emerges inside the same canvas --- */
.map-scene{position:absolute;inset:100px 5% 75px;opacity:0;pointer-events:none;transform:scale(.97);transition:opacity .5s ease .4s,transform .7s ease .3s;color:#173d59;display:flex;flex-direction:column}.scene.is-map .map-scene{opacity:1;pointer-events:auto;transform:scale(1)}.scene[data-audience=startup] .map-scene{color:#f1f7fb}.map-scene .scene-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.scene-top button{color:inherit;background:none;border:0;padding:8px 0;font-size:.875rem}.scene-top .change-perspective{border-bottom:1px solid currentColor;padding-bottom:3px}.scene-top .perspective-label{font-size:.875rem;opacity:.7}.scene-map-title{font-size:clamp(1.5rem,2.2vw,2.1rem);text-align:center;margin:22px 0 0;letter-spacing:-.035em}.tree{position:relative;flex:1;max-width:1050px;width:100%;margin:auto;min-height:340px}.tree-lines{position:absolute;inset:0;width:100%;height:100%;stroke:currentColor;stroke-width:1;fill:none;opacity:.35;pointer-events:none}.tree-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;justify-content:center;gap:14px;width:170px;height:170px;border:1px solid #173d5930;border-radius:50%;background:#ffffff12;box-shadow:0 0 0 18px #ffffff08}.tree-centre svg{height:68px;width:68px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.tree-centre span{font-size:.875rem}.scene[data-audience=startup] .tree-centre{border-color:#ffffff30}.tree-pillar{position:absolute;width:235px;max-width:30%;padding:16px 5px;color:inherit;border:0;background:none;text-align:center;border-bottom:1px solid #173d5930;transition:background .25s,transform .25s}.scene[data-audience=startup] .tree-pillar{border-bottom-color:#ffffff30}.tree-pillar:hover{background:#ffffff10;transform:translateY(-3px)}.tree-pillar strong{display:block;font-size:clamp(1.125rem,1.8vw,1.6rem);font-weight:400;letter-spacing:-.03em;overflow-wrap:anywhere}.tree-pillar span{display:block;font-size:.875rem;opacity:.75;margin-top:10px;line-height:1.5}.tree-pillar.development{left:0;top:10%}.tree-pillar.manufacturing{right:0;top:10%}.tree-pillar.logistics{left:0;bottom:10%}.tree-pillar.cost{right:0;bottom:10%}.map-hint{text-align:center;font-size:.8125rem;opacity:.7;margin-top:10px}
/* --- BLOCK: Pillar content stays on the canvas --- */
.pillar-panel{position:absolute;inset:75px 5% 15px;z-index:3;background:#b8dcec;display:flex;flex-direction:column;opacity:0;transform:translateY(18px);transition:opacity .35s,transform .35s;padding:25px 5%;border:1px solid #173d5925;border-radius:8px;pointer-events:none;overflow:auto}.scene[data-audience=startup] .pillar-panel{background:#123f62;border-color:#ffffff30}.pillar-panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.pillar-panel button{align-self:flex-start;padding:6px 0;color:inherit;border:0;background:none;font-size:.875rem;border-bottom:1px solid currentColor}.pillar-panel h2{font-size:clamp(2rem,3.5vw,3.5rem);margin:25px 0}.pillar-panel p{max-width:750px;margin:0 0 20px;line-height:1.7}.pillar-panel ul{padding-left:20px;margin:0;max-width:750px}.pillar-panel li{padding:8px 0;line-height:1.7}.tree,.scene-map-title,.map-hint{transition:opacity .25s}.map-scene.has-panel .tree,.map-scene.has-panel .scene-map-title,.map-scene.has-panel .map-hint{opacity:0;pointer-events:none}
/* --- BLOCK: Small-screen composition and motion preferences --- */
@media(max-width:760px){.site-header{padding:25px 6%;flex-wrap:nowrap}.site-header .brand img{width:50px}.brand span{font-size:.875rem;letter-spacing:.12em}.scene-contact{font-size:.8125rem}.site-footer{padding:18px 6%;font-size:.75rem}.slogan{top:27%;left:5%;right:5%;font-size:clamp(2.25rem,8.4vw,3.6rem)}.choices{top:54%;bottom:19%}.audience-choice{padding:20px 8px;gap:17px}.choice-title{font-size:clamp(1.1rem,4.8vw,1.7rem)}.choice-action{font-size:.875rem}.intro-scene .choose-note{bottom:14%;font-size:.75rem}.map-scene{inset:90px 6% 60px}.scene-top{flex-wrap:wrap;gap:10px}.scene-map-title{margin-top:18px;font-size:1.5rem}.tree{min-height:390px}.tree-centre{width:112px;height:112px;gap:6px}.tree-centre svg{width:44px;height:44px}.tree-centre span{font-size:.75rem}.tree-pillar{width:45%;max-width:45%;padding:12px 2px}.tree-pillar strong{font-size:1rem}.tree-pillar span{font-size:.875rem;margin-top:6px}.tree-pillar.development,.tree-pillar.manufacturing{top:1%}.tree-pillar.logistics,.tree-pillar.cost{bottom:1%}.tree-lines{opacity:.23}.map-hint{margin-top:16px;font-size:.75rem}.pillar-panel{inset:58px 0 0;padding:22px}.pillar-panel h2{font-size:2rem}.scene-top .perspective-label{font-size:.8125rem}.scene-top button{font-size:.8125rem}}
@media(max-height:650px) and (min-width:761px){.map-scene{inset:80px 5% 55px}.scene-map-title{margin-top:8px}.tree{min-height:280px}.tree-centre{width:125px;height:125px}.tree-centre svg{width:45px;height:45px}.tree-pillar{padding:9px 0}.tree-pillar span{margin-top:5px}}
@media(prefers-reduced-motion:reduce){.blue-field,.intro-scene,.map-scene,.pillar-panel{transition:none!important}.scene.is-map .map-scene{transform:none}}
/* --- BLOCK: Contrast and programmatic focus --- */
.scene-contact{color:#f1f7fb}body[data-audience=investor] .scene-contact{color:#173d59}body[data-audience=startup] .brand img{filter:brightness(0) invert(1)}.scene-map-title:focus,.pillar-panel h2:focus{outline:none}

/* --- BLOCK: Hover dominance shares the colour-takeover animation --- */
@property --split{syntax:'<percentage>';inherits:true;initial-value:50%}
.scene{--split:50%;transition:--split .85s cubic-bezier(.65,0,.2,1)}
.scene:not(.is-map){transition-duration:.6s}
.blue-field{transition:none}
.blue-field.light,.scene[data-audience=investor] .blue-field.light{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.blue-field.dark,.scene[data-audience=startup] .blue-field.dark{clip-path:inset(0 0 0 var(--split))}
.scene[data-audience=investor]{--split:100%}
.scene[data-audience=startup]{--split:0%}
.choices{top:0;bottom:0;grid-template-columns:var(--split) calc(100% - var(--split))}
.audience-choice{padding-top:30svh;padding-bottom:0}
.audience-choice:hover{background:none}
.choice-title{transition:transform .6s ease}
.slogan{background-image:linear-gradient(90deg,#173d59 calc((var(--split) - 8%) / .84),#f1f7fb calc((var(--split) - 8%) / .84))}
.intro-scene .choose-note{background-image:linear-gradient(90deg,#173d59 var(--split),#f1f7fb var(--split))}
@media(hover:hover) and (pointer:fine){
  .scene:not(.is-map):has(.audience-choice.investor:hover){--split:65%}
  .scene:not(.is-map):has(.audience-choice.startup:hover){--split:35%}
  .audience-choice:hover .choice-title{transform:scale(1.06)}
}
.scene:not(.is-map):has(.audience-choice.investor:focus-visible){--split:65%}
.scene:not(.is-map):has(.audience-choice.startup:focus-visible){--split:35%}
@media(max-width:760px){.slogan{background-image:linear-gradient(90deg,#173d59 calc((var(--split) - 5%) / .9),#f1f7fb calc((var(--split) - 5%) / .9))}}
@media(prefers-reduced-motion:reduce){.scene,.choice-title{transition:none!important}}

/* --- BLOCK: A camera moving through one connected skill tree --- */
.tree{--camera-x:0px;--camera-y:0px;--camera-zoom:1;transform-origin:0 0;transform:translate(var(--camera-x),var(--camera-y)) scale(var(--camera-zoom));transition:transform .9s cubic-bezier(.5,0,.15,1);will-change:transform}
.map-scene.has-panel .tree,.map-scene.has-panel .scene-map-title,.map-scene.has-panel .map-hint{opacity:1;pointer-events:auto}
.tree-pillar{transition:opacity .45s,background .25s,transform .25s}
.tree.is-focused .tree-pillar{opacity:.3;pointer-events:none}
.tree.is-focused .tree-pillar.selected{opacity:0}
.tree.is-focused .tree-lines{opacity:.5}
.pillar-panel{inset:auto;left:50%;top:50%;padding:28px 34px;border-radius:12px;transform:translate(-50%,-50%) scale(.7);transform-origin:center;opacity:0;transition:transform .75s cubic-bezier(.5,0,.15,1),opacity .3s;box-shadow:0 12px 80px #173d5912;overflow:auto;scrollbar-width:thin;display:block}
.pillar-panel.is-open{transform:translate(-50%,-50%) scale(1);opacity:1;transition-delay:.12s}
.pillar-panel h2{font-size:clamp(1.75rem,3vw,2.6rem);margin:20px 0}
.pillar-panel li{font-size:.9375rem;padding:6px 0;line-height:1.65}
.pillar-panel p{font-size:.9375rem;margin-bottom:14px}
.map-scene.has-panel .map-hint{opacity:.45}
@media(max-width:760px){.pillar-panel{padding:20px 22px}.pillar-panel h2{font-size:1.65rem}.pillar-panel li{font-size:.875rem}.tree.is-focused .tree-centre{opacity:.65}}
@media(prefers-reduced-motion:reduce){.tree,.tree-pillar,.pillar-panel{transition:none!important}}

/* --- BLOCK: Branch regions become richer away from the central bulb --- */
.branch-hue{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;--branch-rgb:80,192,183;background:radial-gradient(ellipse farthest-corner at var(--bulb-x,50%) var(--bulb-y,50%),rgba(var(--branch-rgb),0) 0%,rgba(var(--branch-rgb),.12) 20%,rgba(var(--branch-rgb),.6) 65%,rgba(var(--branch-rgb),.92) 100%);transition:opacity 1s ease}
.scene.branch-active .branch-hue{opacity:1}.scene[data-branch=manufacturing] .branch-hue{--branch-rgb:157,151,225}.scene[data-branch=logistics] .branch-hue{--branch-rgb:230,190,90}.scene[data-branch=cost] .branch-hue{--branch-rgb:235,145,136}
.scene[data-audience=startup][data-branch=development] .branch-hue{--branch-rgb:34,119,130}.scene[data-audience=startup][data-branch=manufacturing] .branch-hue{--branch-rgb:93,74,151}.scene[data-audience=startup][data-branch=logistics] .branch-hue{--branch-rgb:141,107,38}.scene[data-audience=startup][data-branch=cost] .branch-hue{--branch-rgb:154,71,77}
.intro-scene{z-index:1}.map-scene{z-index:2}
/* --- BLOCK: Information grows as connected leaves, without a box --- */
.pillar-panel,.scene[data-audience=startup] .pillar-panel{background:none;border:0;box-shadow:none;border-radius:0;padding:12px 16px;overflow:auto}
.pillar-panel h2{text-align:center;font-size:clamp(2rem,3.7vw,3.3rem);margin:22px 0 30px}
.pillar-copy>p{max-width:680px;text-align:center;margin:0 auto 28px}
.information-branches{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:25px 110px;padding:24px 12px 24px;isolation:isolate}
.information-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;opacity:.45;z-index:-1}
.information-leaf{position:relative;align-self:center;margin:0!important;font-size:.9375rem!important;line-height:1.7!important;padding:12px 0!important;opacity:0;transform:translateY(7px);transition:opacity .45s,transform .55s;transition-delay:calc(.35s + var(--leaf-order)*.09s)}
.information-leaf.left{text-align:right}.information-leaf.right{text-align:left}.pillar-panel.is-open .information-leaf{opacity:1;transform:none}
.information-lines path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease .25s}.pillar-panel.is-open .information-lines path{stroke-dashoffset:0}
.tree.is-focused .tree-lines{opacity:.65}.tree.is-focused .tree-centre{opacity:.9}
@media(max-width:760px){.pillar-panel{padding:10px 5px}.pillar-panel h2{font-size:1.9rem;margin-bottom:24px}.information-branches{grid-template-columns:1fr;gap:12px;padding:5px 0 16px 30px}.information-lines{display:none}.information-branches:before{content:'';position:absolute;left:6px;top:0;bottom:10px;width:1px;background:currentColor;opacity:.35}.information-leaf.left,.information-leaf.right{text-align:left;font-size:.9375rem!important}.information-leaf:before{content:'';position:absolute;left:-24px;top:25px;width:16px;height:1px;background:currentColor;opacity:.5}}
@media(prefers-reduced-motion:reduce){.branch-hue,.information-leaf,.information-lines path{transition:none!important}}
.information-leaf.left{grid-column:1}.information-leaf.right{grid-column:2}
@media(max-width:760px){.information-leaf.left,.information-leaf.right{grid-column:1}}
/* Keep the travelling world beneath the persistent navigation. */
.tree-viewport{position:relative;flex:1;min-height:340px;display:flex;overflow:hidden;width:100%;margin-top:10px}.tree-viewport .tree{height:100%;min-height:340px}.tree-viewport .tree-pillar{pointer-events:auto}.tree-viewport .tree.is-focused .tree-pillar{pointer-events:none}
@media(max-width:760px){.tree-viewport,.tree-viewport .tree{min-height:390px}}
@media(min-width:761px){.pillar-panel h2{font-size:clamp(2rem,3vw,2.7rem);margin:16px 0 20px}.information-branches{gap:16px 110px;padding:16px 12px}.information-leaf{padding:8px 0!important;line-height:1.6!important}}

/* --- BLOCK: Wider branches and a smaller glowing return bulb --- */
.map-scene{left:3%;right:3%}.tree{max-width:none}
.tree-centre{width:85px;height:85px;padding:0;gap:5px;color:inherit;z-index:4;background:#ffffff08;box-shadow:0 0 18px 5px #fff6,0 0 45px 12px #fff2;transition:box-shadow .3s,background .3s,border-color .3s}
.tree-centre svg{width:34px;height:34px}.tree-centre span{font-size:.75rem}
.tree-centre:hover,.tree-centre:focus-visible{background:#ffffff20;box-shadow:0 0 25px 10px #fffb,0 0 65px 22px #fff5;border-color:#ffffff90}
.scene[data-audience=startup] .tree-centre{box-shadow:0 0 18px 5px #b9e8ff50,0 0 45px 12px #b9e8ff20}
.scene[data-audience=startup] .tree-centre:hover,.scene[data-audience=startup] .tree-centre:focus-visible{box-shadow:0 0 25px 10px #b9e8ff90,0 0 65px 22px #b9e8ff45}
.pillar-panel{pointer-events:none}.pillar-panel.is-open{pointer-events:none}.pillar-copy{pointer-events:auto}.pillar-panel .close-pillar{display:none}
.pillar-panel h2{margin-top:5px}
@media(min-width:761px){.information-branches{gap:clamp(22px,4vh,42px) clamp(120px,14vw,210px);padding:20px 12px}.information-leaf{font-size:1rem!important}.pillar-panel h2{font-size:clamp(2.2rem,3.4vw,3.2rem);margin-bottom:25px}}
@media(max-width:760px){.map-scene{left:4%;right:4%}.tree-centre{width:56px;height:56px;gap:2px}.tree-centre svg{width:22px;height:22px}.tree-centre span{font-size:.625rem}.pillar-panel{padding:8px 0}.tree-centre{box-shadow:0 0 14px 4px #fff6,0 0 30px 8px #fff2}}

/* --- BLOCK: One readable trunk, with measured connections to every content leaf --- */
.tree.is-focused .tree-lines,.tree.is-focused .tree-pillar{opacity:0}
.focused-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;opacity:0;pointer-events:none;transition:opacity .4s .65s}
.tree.is-focused .focused-lines{opacity:.38}
.scene[data-audience] .pillar-panel{padding:12px 110px 12px 24px}
.scene[data-audience] .pillar-panel[data-side=left]{padding:12px 24px 12px 110px}
.pillar-panel h2{text-align:left;margin:0 0 20px;font-size:clamp(2rem,3vw,3rem)}
.pillar-copy>p{text-align:left;max-width:none;margin:0 0 24px;line-height:1.65}
.information-branches{display:flex;flex-direction:column;gap:22px;padding:0;isolation:auto}
.information-leaf{width:100%;max-width:none!important;align-self:stretch;text-align:left!important;padding:0!important;font-size:1rem!important;line-height:1.6!important;transform:none!important}
.information-lines,.information-branches:before,.information-leaf:before{display:none}
.map-scene.has-panel .map-hint{opacity:0}
@media(max-width:760px){
 .scene[data-audience] .pillar-panel{padding:8px 62px 8px 8px}.scene[data-audience] .pillar-panel[data-side=left]{padding:8px 8px 8px 62px}
 .pillar-panel h2{font-size:1.6rem;margin-bottom:16px}.pillar-copy>p{font-size:.875rem;margin-bottom:20px}
 .information-branches{gap:18px}.information-leaf{font-size:.875rem!important}
}

.scene[data-audience] .pillar-panel[data-side=right] h2,.scene[data-audience] .pillar-panel[data-side=right] .pillar-copy>p,.scene[data-audience] .pillar-panel[data-side=right] .information-leaf{text-align:right!important}