/* --- BLOCK: Two deliberately composed palettes, not a colour inversion --- */
body{--stage:#151715;--text:#eee9e0;--quiet:#aaa79f;--copper:#a57c57;--circuit-accent:#efaa60;--ambient:212,135,58;background:var(--stage)}
body[data-theme=light]{--stage:#f4f0e7;--text:#302e29;--quiet:#6d685f;--copper:#98734f;--circuit-accent:#ad501e;--ambient:177,103,42}
.scene{background:var(--stage);transition:background .5s,--split .85s cubic-bezier(.65,0,.2,1)}
.scene:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E")}
.scene.is-map:after{opacity:.075}.blue-field{transition:opacity .7s}.scene.is-map .blue-field{opacity:0}
body[data-audience] .site-header,body[data-audience] .site-footer,body[data-audience] .map-scene,body[data-audience] .scene-contact{color:var(--text)}
body[data-audience] .brand img{filter:brightness(0) invert(.94)}
body[data-theme=light][data-audience] .brand img{filter:brightness(0) opacity(.85)}
.header-actions{display:flex;align-items:center;gap:26px}.theme-toggle{display:flex;align-items:center;gap:8px;border:0;border-left:1px solid #8885;padding:3px 0 3px 22px;background:none;font-size:.75rem;color:inherit}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.theme-toggle:hover{color:var(--circuit-accent)}.site-footer{color:var(--quiet)!important}
body:not([data-audience]) .site-footer{color:#173d59!important}
.scene .branch-hue{opacity:0;background:radial-gradient(ellipse 430px 360px at var(--bulb-x,50%) var(--bulb-y,50%),rgba(var(--ambient),.075),transparent 80%);transition:opacity .8s}
.scene.is-map .branch-hue{opacity:1}.scene.branch-active .branch-hue{opacity:1;background:radial-gradient(ellipse 550px 500px at var(--bulb-x) var(--bulb-y),rgba(var(--ambient),.065),transparent 85%)}
.scene-map-title{color:var(--text);font-weight:400;font-size:clamp(1.5rem,2.7vw,2.5rem);margin-top:28px;letter-spacing:-.04em}
.scene-top .change-perspective{border-color:rgba(var(--ambient),.3)}.scene-top .perspective-label,.map-hint{color:var(--quiet)}
.map-scene.has-panel .scene-map-title,.map-scene.has-panel .map-hint{opacity:0;pointer-events:none}
.map-scene.has-panel .tree-viewport{overflow:visible}

/* --- BLOCK: Fine measured copper traces leave clear space for the content --- */
.circuit-world{position:relative;width:100%;height:100%;min-height:340px;flex:1}
.circuit-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--copper);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;overflow:visible}
.circuit-lines>path{transition:stroke .4s,opacity .5s;stroke-opacity:.85}
.circuit-lines>path.is-lit,.circuit-lines>path.is-selected{stroke-width:3;stroke:var(--circuit-accent);stroke-opacity:1;filter:drop-shadow(0 0 5px rgba(var(--ambient),.22))}
.detail-traces{stroke-width:2.25;stroke:var(--copper);stroke-opacity:.75;transition:opacity .5s}.detail-traces circle{fill:var(--copper);stroke:none}
body[data-theme=light] .circuit-lines>path.is-lit,body[data-theme=light] .circuit-lines>path.is-selected{filter:none;stroke-width:3}

/* --- BLOCK: An abstract idea core with controlled light and crafted geometry --- */
.circuit-core{position:absolute;left:50%;top:50%;width:92px;height:92px;transform:translate(-50%,-50%);border:1.5px solid var(--copper);border-radius:50%;padding:0;background:var(--stage);color:var(--text);z-index:3;box-shadow:0 0 0 10px rgba(var(--ambient),.025),0 0 50px rgba(var(--ambient),.075);transition:left .95s cubic-bezier(.5,0,.15,1),top .95s cubic-bezier(.5,0,.15,1),width .95s,height .95s,box-shadow .4s}
.core-ring{position:absolute;inset:10px;border:1.5px solid var(--copper);border-radius:50%;opacity:.65}
.core-ring:before,.core-ring:after{content:'';position:absolute;width:5px;height:5px;top:calc(50% - 2.5px);border-radius:50%;background:var(--copper)}.core-ring:before{left:-14px}.core-ring:after{right:-14px}
.core-light{position:absolute;inset:29%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffddac,#d29551 50%,#754728);box-shadow:0 0 22px rgba(var(--ambient),.28);transition:box-shadow .4s}
body[data-theme=light] .core-light{background:radial-gradient(circle at 35% 30%,#e3bd87,#a56b3b 60%,#754b2c);box-shadow:0 2px 8px #754b2c20}
.circuit-core span{position:absolute;top:calc(100% + 22px);left:-25px;right:-25px;text-align:center;font-size:.8125rem;letter-spacing:.02em;pointer-events:none}
.circuit-core:hover,.circuit-core:focus-visible{box-shadow:0 0 0 10px rgba(var(--ambient),.04),0 0 55px rgba(var(--ambient),.14)}
.circuit-core:hover .core-light,.circuit-core:focus-visible .core-light{box-shadow:0 0 28px rgba(var(--ambient),.5)}
.circuit-core:focus-visible{outline:2px solid var(--circuit-accent);outline-offset:8px}
.circuit-world.is-focused .circuit-core{left:10%;top:78%;width:74px;height:74px}

/* --- BLOCK: Purposeful schematic, name and audience-specific question --- */
.circuit-sector{position:absolute;width:27%;max-width:300px;left:18%;top:23%;transform:translate(-50%,-50%);text-align:center;color:var(--text);z-index:2;transition:left .95s cubic-bezier(.5,0,.15,1),top .95s cubic-bezier(.5,0,.15,1),transform .95s cubic-bezier(.5,0,.15,1),width .95s,opacity .4s}
.circuit-sector.manufacturing{left:82%;top:23%}.circuit-sector.logistics{left:18%;top:78%}.circuit-sector.cost{left:82%;top:78%}
.pillar-schematic{width:64px;height:58px;fill:none;stroke:var(--copper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 14px;display:block;transition:opacity .35s,stroke .4s}
.pillar-schematic .construction{stroke-opacity:.3;stroke-width:.8}
.pillar-title{margin:0;font-size:clamp(1.15rem,1.75vw,1.6rem);font-weight:400;letter-spacing:-.025em;outline:none;transition:font-size .95s,color .4s}
.pillar-question{font-size:.8125rem;color:var(--quiet);margin:11px 0 0;line-height:1.55;transition:opacity .25s}
.sector-choice{position:absolute;inset:-18px -12px;border:0;background:none;cursor:pointer;border-radius:3px}
.sector-choice:focus-visible{outline:1px solid var(--circuit-accent);outline-offset:7px}
.circuit-sector.is-lit .pillar-title,.circuit-sector.is-lit .pillar-schematic{color:var(--circuit-accent);stroke:var(--circuit-accent)}
.circuit-sector:before{content:'';position:absolute;inset:-30px;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(ellipse,rgba(var(--ambient),.06),transparent 75%);transition:opacity .4s}
.circuit-sector.is-lit:before{opacity:1}

/* --- BLOCK: The selected title stays connected as the reading space unfolds --- */
.circuit-world.is-focused .circuit-sector:not(.is-selected){opacity:0;pointer-events:none}
.circuit-world.is-focused .circuit-sector.is-selected{left:30%;top:7%;width:67%;max-width:none;transform:none;text-align:left}
.circuit-world.is-focused .pillar-title{font-size:clamp(1.9rem,3vw,2.75rem)}
.circuit-world.is-focused .pillar-schematic{display:none}
.circuit-world.is-focused .pillar-question{opacity:0;pointer-events:none}
.circuit-world.is-focused .sector-choice{visibility:hidden;pointer-events:none}
.solar-content{position:absolute;left:30%;top:22%;width:67%;max-height:73%;display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,.4fr);gap:clamp(25px,4vw,65px);padding:0 4px 24px 0;z-index:2;opacity:0;transform:translateY(10px);pointer-events:none;overflow:auto;scrollbar-width:thin;transition:opacity .45s,transform .65s;color:var(--text)}
.circuit-world.is-focused .solar-content{opacity:1;transform:none;pointer-events:auto;transition-delay:.45s}
.solar-content .pillar-copy{min-width:0}.solar-content .pillar-copy>p{font-size:.9375rem;line-height:1.7;text-align:left;margin:0 0 26px;max-width:none;color:var(--quiet)}
.section-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.section-points li{padding:0;font-size:.9375rem;line-height:1.7}
.sector-figures{display:flex;flex-direction:column;gap:28px}.section-figure{margin:0;color:var(--copper)}
.section-figure svg{display:block;width:100%;max-height:180px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.section-figure svg text{fill:var(--quiet);stroke:none;font-family:Arial,sans-serif;font-size:10px;text-anchor:middle}
.section-figure figcaption{font-size:.6875rem;line-height:1.5;color:var(--quiet);text-align:center;margin-top:10px}

/* --- BLOCK: Small screens preserve the structure and comfortable reading --- */
@media(max-width:760px){
 .header-actions{gap:14px}.theme-toggle{padding-left:13px}.theme-toggle span{display:none}.brand{gap:8px}.brand span{font-size:.75rem}
 .map-scene{left:6%;right:6%}.scene-map-title{font-size:1.5rem;margin-top:25px}
 .circuit-sector{width:37%;left:22%;top:22%}.circuit-sector.manufacturing{left:78%;top:22%}.circuit-sector.logistics{left:22%;top:78%}.circuit-sector.cost{left:78%;top:78%}
 .pillar-schematic{width:48px;height:43px;margin-bottom:12px}.pillar-title{font-size:1rem}.pillar-question{font-size:.75rem;line-height:1.5;margin-top:9px}
 .circuit-core{width:68px;height:68px}.circuit-core span{font-size:.75rem;top:calc(100% + 17px)}.core-ring{inset:8px}
 .circuit-world.is-focused .circuit-core{left:6%;top:12%;width:44px;height:44px}.circuit-world.is-focused .core-ring{inset:5px}
 .circuit-world.is-focused .circuit-sector.is-selected{left:23%;top:5%;width:74%}.circuit-world.is-focused .pillar-title{font-size:1.75rem}
 .solar-content{left:23%;top:20%;width:74%;max-height:76%;display:block}.sector-figures{display:none}
 .section-points{gap:21px}.section-points li,.solar-content .pillar-copy>p{font-size:.875rem;line-height:1.65}
}
@media(max-width:420px){.header-actions{gap:10px}.site-header .brand img{width:37px}.scene-contact{font-size:.75rem}.theme-toggle{padding-left:10px}}
@media(prefers-reduced-motion:reduce){.circuit-core,.circuit-sector,.pillar-title,.pillar-question,.solar-content,.circuit-lines>path{transition:none!important}}

/* --- BLOCK: Small terminal dots make each connection explicit --- */
.circuit-terminal{fill:var(--copper);stroke:none;transition:fill .4s,opacity .4s}
.circuit-terminal.is-lit{fill:var(--circuit-accent)}
/* The perspective control inherits the active palette for either audience. */
.scene[data-audience] .map-scene{color:var(--text)}
@media(max-width:420px){.circuit-sector .pillar-question{max-width:96px;margin:9px auto 0}}

/* --- BLOCK: Only the four pillar titles remain in the overview --- */
.pillar-question,.circuit-core span{display:none}

/* --- BLOCK: Each area expands in its original direction --- */
.circuit-world.is-focused[data-focus-x=left] .circuit-sector.is-selected,.circuit-world[data-focus-x=left] .solar-content{left:9%;width:67%}
.circuit-world.is-focused[data-focus-x=right] .circuit-sector.is-selected,.circuit-world[data-focus-x=right] .solar-content{left:30%;width:67%}
.circuit-world.is-focused[data-focus-y=bottom] .circuit-sector.is-selected{top:30%}
.circuit-world[data-focus-y=bottom] .solar-content{top:45%;max-height:50%}
.circuit-world.is-focused[data-focus-x=left] .circuit-core{left:90%}
.circuit-world.is-focused[data-focus-y=bottom] .circuit-core{top:12%}
.scene.branch-active .branch-hue{background:radial-gradient(ellipse 65% 65% at var(--light-x) var(--light-y),rgba(var(--ambient),.085),transparent 85%)}
@media(max-width:760px){
 .circuit-world.is-focused[data-focus-x=left] .circuit-sector.is-selected,.circuit-world[data-focus-x=left] .solar-content{left:13%;width:80%}
 .circuit-world.is-focused[data-focus-x=right] .circuit-sector.is-selected,.circuit-world[data-focus-x=right] .solar-content{left:23%;width:74%}
 .circuit-world.is-focused[data-focus-x=left] .circuit-core{left:94%}
 .circuit-world.is-focused[data-focus-y=bottom] .circuit-sector.is-selected{top:20%}
 .circuit-world[data-focus-y=bottom] .solar-content{top:35%;max-height:60%}
}

/* --- BLOCK: A simple copper bulb belongs to the same drawn circuit --- */
.core-bulb{position:absolute;left:27%;top:18%;width:46%;height:64%;fill:none;stroke:var(--copper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.core-bulb .bulb-glass{fill:rgba(var(--ambient),.035)}
.core-bulb .bulb-filament{stroke:var(--circuit-accent);stroke-width:2.6;filter:drop-shadow(0 0 3px rgba(var(--ambient),.3))}
.core-bulb .bulb-base{stroke-width:2.3}
.circuit-core:hover .bulb-filament,.circuit-core:focus-visible .bulb-filament,.circuit-core.is-sending .bulb-filament{filter:drop-shadow(0 0 5px rgba(var(--ambient),.8))}
.circuit-core.is-sending{box-shadow:0 0 0 10px rgba(var(--ambient),.04),0 0 45px rgba(var(--ambient),.2)}
.circuit-pulse{stroke:var(--circuit-accent);stroke-width:4;stroke-dasharray:12 100;stroke-dashoffset:12;stroke-opacity:1;filter:drop-shadow(0 0 4px rgba(var(--ambient),.6));pointer-events:none}
.circuit-sector.is-lit .pillar-title{text-shadow:0 0 15px rgba(var(--ambient),.2)}
body[data-theme=light] .circuit-sector.is-lit .pillar-title{text-shadow:0 0 12px rgba(var(--ambient),.12)}
/* Titles are map controls, so pointer gestures should not select their text. */
.pillar-title,.pillar-schematic,.circuit-core{user-select:none}

/* --- BLOCK: Light travels freely; its route is never drawn as a permanent line --- */
.circuit-lines>path:not(.circuit-pulse),.circuit-terminal,.detail-traces{display:none}
.core-ring:before,.core-ring:after{display:none}
.circuit-lines>.circuit-pulse{stroke-width:5;stroke-dasharray:3 100;stroke-dashoffset:3;stroke-opacity:1;filter:drop-shadow(0 0 3px rgba(var(--ambient),.85)) drop-shadow(0 0 8px rgba(var(--ambient),.4))}

/* --- BLOCK: A bright light packet with a short, fading wake --- */
.light-packet{pointer-events:none;filter:drop-shadow(0 0 3px rgba(var(--ambient),.8)) drop-shadow(0 0 7px rgba(var(--ambient),.4))}
.light-head{fill:var(--circuit-accent);stroke:none}
.light-trail{fill:none;stroke:var(--circuit-accent);stroke-linecap:round}
.circuit-sector:before{inset:-55px;background:radial-gradient(ellipse,rgba(var(--ambient),.16),rgba(var(--ambient),.045) 45%,transparent 75%);transition:opacity .6s}
.circuit-sector.is-lit .pillar-schematic{filter:drop-shadow(0 0 7px rgba(var(--ambient),.3))}
.circuit-sector.is-lit .pillar-title{text-shadow:0 0 16px rgba(var(--ambient),.35)}
body[data-theme=light] .circuit-sector.is-lit .pillar-title{text-shadow:0 0 14px rgba(var(--ambient),.22)}

/* --- BLOCK: The same pillar glides into place while its reading space unfolds --- */
.circuit-sector{transition:opacity .7s ease}
.pillar-title,.pillar-schematic{transform-origin:left top}
.pillar-title{transition:color .4s,text-shadow .6s}
.circuit-world.is-focused .circuit-sector.is-selected .pillar-schematic{display:block;position:absolute;left:-60px;top:3px;width:42px;height:38px;margin:0}
.circuit-core{transition:left 1.1s cubic-bezier(.22,1,.36,1),top 1.1s cubic-bezier(.22,1,.36,1),width 1.1s,height 1.1s,box-shadow .6s}
.scene-map-title,.map-hint{transition:opacity .7s ease}
.solar-content{transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.circuit-world.is-focused .solar-content{transition:opacity .7s ease .55s,transform .9s cubic-bezier(.22,1,.36,1) .55s}
.circuit-world.is-focused .section-points li{animation:unfold-copy .7s ease both;animation-delay:calc(.65s + var(--item-order,0)*.07s)}
@keyframes unfold-copy{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:760px){.circuit-world.is-focused .circuit-sector.is-selected .pillar-schematic{left:-43px;top:3px;width:32px;height:29px}}
@media(prefers-reduced-motion:reduce){.circuit-world.is-focused .solar-content{transition:none}.circuit-world.is-focused .section-points li{animation:none}}

/* --- BLOCK: The entrance shares the map's neutral palette and clear hover contrast --- */
body{--landing-ink:var(--text)}
.scene{--landing-left:var(--stage);--landing-right:color-mix(in srgb,var(--stage),var(--text) 4%)}
.blue-field.light{background:var(--landing-left)}
.blue-field.dark{background:var(--landing-right)}
.blue-field{transition:background .6s ease,opacity .7s ease}
.slogan,.intro-scene .choose-note{background:none;color:var(--landing-ink)}
.audience-choice,.audience-choice.startup{color:var(--landing-ink);transition:color .5s ease}
body:not([data-audience]) .site-header,body:not([data-audience]) .scene-contact{color:var(--landing-ink)}
body:not([data-audience]) .site-footer{color:var(--landing-ink)!important;opacity:.65}
body:not([data-audience]) .brand img{filter:brightness(0) invert(.94)}
body[data-theme=light]:not([data-audience]) .brand img{filter:brightness(0) opacity(.85)}
.scene:not(.is-map):has(.audience-choice.investor:focus-visible){--landing-left:#fffdf9;--landing-right:#d8d5ce}
.scene:not(.is-map):has(.audience-choice.startup:focus-visible){--landing-left:#d8d5ce;--landing-right:#fffdf9}
body:has(.scene:not(.is-map) .audience-choice:focus-visible){--landing-ink:#302e29}
body:not([data-audience]):has(.audience-choice:focus-visible) .brand img{filter:brightness(0) opacity(.85)}
@media(hover:hover) and (pointer:fine){
 .scene:not(.is-map):has(.audience-choice.investor:hover){--landing-left:#fffdf9;--landing-right:#d8d5ce}
 .scene:not(.is-map):has(.audience-choice.startup:hover){--landing-left:#d8d5ce;--landing-right:#fffdf9}
 body:has(.scene:not(.is-map) .audience-choice:hover){--landing-ink:#302e29}
 body:not([data-audience]):has(.audience-choice:hover) .brand img{filter:brightness(0) opacity(.85)}
 .scene:not(.is-map):has(.audience-choice.investor:hover) .audience-choice.startup,
 .scene:not(.is-map):has(.audience-choice.startup:hover) .audience-choice.investor{color:#78746d}
}
.scene:not(.is-map):has(.audience-choice.investor:focus-visible) .audience-choice.startup,
.scene:not(.is-map):has(.audience-choice.startup:focus-visible) .audience-choice.investor{color:#78746d}
@media(prefers-reduced-motion:reduce){.blue-field,.audience-choice{transition:none!important}}
/* Audience choices are full-screen controls rather than selectable copy. */
.intro-scene,.site-header{user-select:none}

/* --- BLOCK: Warm gold is the shared accent for actions and interaction states --- */
body{--accent:var(--circuit-accent);--blue:var(--accent);--landing-accent:var(--copper)}
.choice-action{color:var(--landing-accent);border-color:currentColor;transition:color .4s,padding .2s}
.audience-choice:hover .choice-title,.audience-choice:focus-visible .choice-title{color:var(--landing-accent)}
body .site-header .scene-contact{color:var(--accent);border-color:currentColor}
body .site-header .scene-contact:hover{color:var(--accent);opacity:.75}
.scene-top .change-perspective{border-color:var(--copper)}
.scene-top .change-perspective:hover{color:var(--accent)}
button:focus-visible,a:focus-visible{outline-color:var(--accent)}
::selection{background:rgba(var(--ambient),.25)}
body:has(.scene:not(.is-map) .audience-choice:focus-visible){--landing-accent:#98734f}
body:not([data-audience]):has(.audience-choice:focus-visible) .site-header .scene-contact{color:var(--landing-accent)}
@media(hover:hover) and (pointer:fine){
 body:has(.scene:not(.is-map) .audience-choice:hover){--landing-accent:#98734f}
 body:not([data-audience]):has(.audience-choice:hover) .site-header .scene-contact{color:var(--landing-accent)}
}

/* --- BLOCK: Two illustrated centrepieces share one continuous map --- */
.circuit-core{width:240px;height:300px;border:0;border-radius:0;background:none;box-shadow:none}
.circuit-core .core-ring,.circuit-core .core-bulb{display:none}
.core-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:filter .5s;user-select:none}
.balance-art{display:none}
.scene[data-audience=investor] .bulb-art{display:none}
.scene[data-audience=investor] .balance-art{display:block}
.circuit-core:hover,.circuit-core:focus-visible,.circuit-core.is-sending{box-shadow:none}
.circuit-core:hover .core-art,.circuit-core:focus-visible .core-art,.circuit-core.is-sending .core-art{filter:drop-shadow(0 0 12px rgba(var(--ambient),.3))}
.circuit-world.is-focused .circuit-core{width:100px;height:125px}
.pillar-schematic{width:100px;height:90px;margin-bottom:18px}
.pillar-number{display:block;color:var(--copper);font-size:.75rem;letter-spacing:.12em;margin-bottom:14px}
.scene[data-audience=startup] .pillar-schematic{stroke-width:1.4;filter:drop-shadow(1px 1px 0 rgba(var(--ambient),.12))}
.scene[data-audience=investor] .pillar-schematic{stroke-width:1.8}
.circuit-world.is-focused .pillar-number{position:absolute;left:-60px;top:-20px;font-size:.65rem}
@media(max-width:760px){
 .circuit-core{width:155px;height:205px}
 .pillar-schematic{width:65px;height:59px;margin-bottom:12px}
 .pillar-number{font-size:.65rem;margin-bottom:8px}
 .circuit-world.is-focused .circuit-core{width:65px;height:82px}
 .circuit-world.is-focused .pillar-number{left:-43px;top:-16px}
}

/* --- BLOCK: Grounded sketch illustrations and a quieter gold palette --- */
body{--circuit-accent:#c5a16f;--ambient:162,128,79;--copper:#a48964}
body[data-theme=light]{--circuit-accent:#927047;--ambient:148,112,66;--copper:#927754}
.core-art{filter:saturate(.45) brightness(.94) contrast(.92)}
.circuit-core:hover .core-art,.circuit-core:focus-visible .core-art,.circuit-core.is-sending .core-art{filter:saturate(.45) brightness(.98) contrast(.92) drop-shadow(0 0 7px rgba(var(--ambient),.16))}
.pillar-schematic{width:170px;height:170px;margin-bottom:8px;background-image:url('assets/pillar-sketches.webp');background-repeat:no-repeat;background-size:200% 200%;filter:saturate(.55) contrast(.92)}
.sketch-development{background-position:0 0}
.sketch-manufacturing{background-position:100% 0}
.sketch-logistics{background-position:0 100%}
.sketch-cost{background-position:100% 100%}
.scene[data-audience=startup] .pillar-schematic,.scene[data-audience=investor] .pillar-schematic{filter:saturate(.55) contrast(.92)}
.circuit-sector.is-lit .pillar-schematic{filter:saturate(.6) contrast(.92) drop-shadow(0 0 6px rgba(var(--ambient),.12))}
.circuit-sector:before{background:radial-gradient(ellipse,rgba(var(--ambient),.09),rgba(var(--ambient),.025) 45%,transparent 75%)}
.light-packet{filter:drop-shadow(0 0 2px rgba(var(--ambient),.5)) drop-shadow(0 0 5px rgba(var(--ambient),.2))}
.circuit-world.is-focused .circuit-sector.is-selected .pillar-schematic{width:48px;height:48px;top:0}
@media(max-width:760px){
 .pillar-schematic{width:110px;height:110px}
 .circuit-world.is-focused .circuit-sector.is-selected .pillar-schematic{width:34px;height:34px;top:0}
}

/* --- BLOCK: Sketchbook space for makers, composed geometry for investors --- */
.scene[data-audience=startup]{background-image:linear-gradient(rgba(var(--ambient),.075) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ambient),.075) 1px,transparent 1px);background-size:32px 32px;background-position:center center}
.scene[data-audience=investor] .pillar-schematic{background-image:url('assets/pillar-investor.webp');width:150px;height:150px;filter:saturate(.4) contrast(.94)}
.scene[data-audience=investor] .pillar-title{letter-spacing:0;font-size:clamp(1.1rem,1.6vw,1.4rem)}
.scene[data-audience=investor] .pillar-number{letter-spacing:.18em}
.scene[data-audience=investor] .circuit-world.is-focused .pillar-title{font-size:clamp(1.9rem,3vw,2.75rem)}
.scene[data-audience=investor] .circuit-world.is-focused .pillar-schematic{width:48px;height:48px}

/* --- BLOCK: Light arrival illuminates the whole destination softly --- */
.circuit-sector:before{inset:-55px;background:radial-gradient(ellipse,rgba(var(--ambient),.25),rgba(var(--ambient),.09) 40%,transparent 75%);transition:opacity .65s ease}
.circuit-sector.is-lit .pillar-title{text-shadow:0 0 8px rgba(var(--ambient),.5),0 0 25px rgba(var(--ambient),.3)}
body[data-theme=light] .circuit-sector.is-lit .pillar-title{text-shadow:0 0 10px rgba(var(--ambient),.3),0 0 25px rgba(var(--ambient),.2)}
.scene[data-audience] .circuit-sector.is-lit .pillar-schematic{filter:saturate(.65) contrast(.96) drop-shadow(0 0 8px rgba(var(--ambient),.5)) drop-shadow(0 0 22px rgba(var(--ambient),.3))}
.pillar-schematic{transition:filter .65s ease}
.circuit-core:hover .core-art,.circuit-core:focus-visible .core-art,.circuit-core.is-sending .core-art{filter:saturate(.55) brightness(1) contrast(.94) drop-shadow(0 0 12px rgba(var(--ambient),.4)) drop-shadow(0 0 28px rgba(var(--ambient),.2))}
.light-packet{filter:drop-shadow(0 0 3px rgba(var(--ambient),.8)) drop-shadow(0 0 9px rgba(var(--ambient),.4))}
@media(max-width:760px){
 .scene[data-audience=investor] .pillar-schematic{width:100px;height:100px}
 .scene[data-audience=investor] .pillar-title{font-size:1rem}
 .scene[data-audience=investor] .circuit-world.is-focused .pillar-title{font-size:1.75rem}
 .scene[data-audience=investor] .circuit-world.is-focused .pillar-schematic{width:34px;height:34px}
}

/* --- BLOCK: A simpler map heading and tactile illustrated depth --- */
.scene-top{display:none!important}
.scene-map-title{color:var(--circuit-accent);font-size:clamp(2rem,4.2vw,3.5rem);font-weight:400;letter-spacing:-.055em;margin-top:22px}
.scene[data-audience=startup] .scene-map-title{font-style:italic}
.tree-viewport{overflow:visible}
.scene[data-audience] .pillar-schematic{filter:saturate(.5) contrast(.96) drop-shadow(0 3px 3px rgba(65,47,24,.18));transition:filter .35s}
.core-art{filter:saturate(.48) brightness(.95) contrast(.96) drop-shadow(0 4px 4px rgba(65,47,24,.18))}
.circuit-core:hover .core-art,.circuit-core:focus-visible .core-art,.circuit-core.is-sending .core-art{filter:saturate(.55) brightness(1) contrast(.96) drop-shadow(0 4px 4px rgba(65,47,24,.18)) drop-shadow(0 0 15px rgba(var(--ambient),.45))}
/* Arrival applies the full illumination in that frame, without a second fade-in. */
.scene[data-audience] .circuit-sector.is-lit .pillar-schematic{transition:none;filter:saturate(.65) contrast(.98) drop-shadow(0 3px 3px rgba(65,47,24,.18)) drop-shadow(0 0 9px rgba(var(--ambient),.55)) drop-shadow(0 0 24px rgba(var(--ambient),.35))}
.circuit-sector.is-lit:before,.circuit-sector.is-lit .pillar-title{transition:none}

/* --- BLOCK: The brand mark takes the same accent as its illuminated wordmark --- */
.brand-symbol{position:relative;display:inline-grid;flex:none;line-height:0}
.brand-symbol img,.brand-tint{grid-area:1/1}
.brand-tint{display:block;width:100%;height:100%;background:var(--circuit-accent);mask:url('assets/logo.webp') center/contain no-repeat;opacity:0;pointer-events:none}
.site-header .brand.is-lit{color:var(--circuit-accent);filter:drop-shadow(0 0 7px rgba(var(--ambient),.5));text-shadow:0 0 15px rgba(var(--ambient),.35)}
.site-header .brand.is-lit img{opacity:0}
.site-header .brand.is-lit .brand-tint{opacity:1}
@media(max-width:760px){.scene-map-title{font-size:2.2rem;margin-top:12px}}

/* --- BLOCK: Give each illustration its complete source area without sprite bleed --- */
.scene[data-audience=startup] .sketch-development{background-size:200% 193%}
.scene[data-audience=startup] .sketch-logistics{background-size:200% 220%}

/* --- BLOCK: Light starts at arrival, then blooms gently rather than switching on --- */
.scene[data-audience] .circuit-sector.is-lit .pillar-schematic{transition:filter .55s ease}
.circuit-sector.is-lit:before,.circuit-sector.is-lit .pillar-title{transition:opacity .55s ease,color .55s ease,text-shadow .55s ease}

/* --- BLOCK: The map is one sheet that pans into its four corners --- */
.scene[data-audience=startup]{background-image:none}
.circuit-world{transform-origin:50% 50%;transform:translate(var(--camera-x,0%),var(--camera-y,0%)) scale(var(--camera-scale,1));transition:transform 1.6s cubic-bezier(.45,0,.2,1);isolation:isolate}
.circuit-world:before{content:'';position:absolute;inset:-200%;z-index:-1;pointer-events:none}
.scene[data-audience=startup] .circuit-world:before{background-image:linear-gradient(rgba(var(--ambient),.075) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ambient),.075) 1px,transparent 1px);background-size:32px 32px}
.circuit-sector{transition:left 1.6s cubic-bezier(.45,0,.2,1),top 1.6s cubic-bezier(.45,0,.2,1),transform 1.6s cubic-bezier(.45,0,.2,1),width 1.6s ease,opacity 1.2s ease}
.circuit-world.is-focused .circuit-sector:not(.is-selected){opacity:.06}
.scene[data-audience] .circuit-world.is-focused .circuit-sector.is-selected{left:var(--read-x);top:var(--read-title-y);width:var(--read-width);transform:none}
.scene[data-audience] .circuit-world.is-focused .pillar-title{font-size:clamp(1.35rem,2.2vw,1.9rem)}
.pillar-title{transition:font-size 1.6s ease,color .55s,text-shadow .55s}
.scene[data-audience] .circuit-world.is-focused .circuit-sector.is-selected .pillar-schematic{width:48px;height:48px;left:-55px;top:-5px}
.scene[data-audience] .circuit-world.is-focused .circuit-core{left:50%;top:50%;width:500px;height:625px;transform:translate(-50%,-50%);transition:width 1.6s cubic-bezier(.45,0,.2,1),height 1.6s cubic-bezier(.45,0,.2,1)}
.circuit-core{transition:width 1.6s cubic-bezier(.45,0,.2,1),height 1.6s cubic-bezier(.45,0,.2,1)}
.scene[data-audience] .circuit-world .solar-content{left:var(--read-x,30%);top:var(--read-body-y,22%);width:var(--read-width,67%);max-height:var(--read-height,65%)}
.circuit-world.is-focused .solar-content{transition:opacity .9s ease .65s,transform 1.2s ease .65s}
.circuit-world.is-focused .section-points li{animation:none}
.solar-content .pillar-copy>p,.section-points li{font-size:.67rem;line-height:1.7}
.section-points{gap:17px}
.scene-map-title,.map-hint{transition:opacity 1.2s ease}
@media(max-width:760px){
 .scene[data-audience] .circuit-world.is-focused .circuit-core{width:330px;height:440px}
 .scene[data-audience] .circuit-world.is-focused .circuit-sector.is-selected .pillar-schematic{width:30px;height:30px;left:-34px;top:0}
 .scene[data-audience] .circuit-world.is-focused .pillar-title{font-size:1.25rem}
 .solar-content .pillar-copy>p,.section-points li{font-size:.6rem}
}
@media(prefers-reduced-motion:reduce){.circuit-world,.circuit-core,.circuit-sector,.pillar-title{transition:none!important}}

/* --- BLOCK: Hover light ends when the reading space opens --- */
.circuit-world.is-focused .circuit-sector:before{opacity:0;transition:none}
.scene.branch-active .branch-hue{opacity:0;transition:none}
.circuit-world.is-focused .circuit-sector.is-selected .pillar-title{color:var(--circuit-accent);text-shadow:none}

/* --- BLOCK: Startup icons carry their own restrained drafting marks --- */
.pillar-schematic{position:relative}
.sketch-guides{display:none;position:absolute;left:-12%;top:-12%;width:124%;height:124%;overflow:visible;pointer-events:none;fill:none;stroke:var(--copper);stroke-width:.65;stroke-linecap:round;stroke-linejoin:round}
.scene[data-audience=startup] .sketch-guides{display:block}
.sketch-ground{opacity:.21}.sketch-construction{opacity:.18;stroke-width:.5}.sketch-dimensions{opacity:.5}.sketch-ticks{stroke-width:1}
.scene[data-audience=startup] .circuit-world.is-focused .sketch-guides{opacity:.7}
