/* Homepage composition: editorial copy with a wider, embedded living system. */
#connected{height:220vh;min-height:1100px}
#connected .story-sticky{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:5%;padding:70px 6%;min-height:640px;max-height:none;overflow:visible}
#connected .story-text h2{font-size:clamp(34px,3.4vw,58px)}
.home-system{min-width:0;align-self:center}
.home-system .ecosystem{height:430px;margin:0;max-width:none}
.home-system .eco-node{width:118px;display:block;text-align:center;padding:8px 0}
.home-system .eco-node svg{width:30px;height:30px;margin-bottom:8px}
.home-system .eco-node strong{font-size:14px;line-height:1.4}
.home-system .eco-node small{display:none}
.home-system .eco-hub{top:52.7778%;opacity:var(--foreground,0);background:none}
.home-system .eco-hub>span{font-size:clamp(18px,1.7vw,28px);letter-spacing:.09em}
.home-system .eco-line{stroke-linecap:round;stroke-width:2}
.home-system .eco-bottom{display:block;padding-top:22px;margin-top:12px}
.home-system .eco-state{font-size:22px}
.home-system .eco-bottom p{font-size:14px;line-height:1.65;margin-bottom:0}
.home-system .eco-controls{margin-top:20px;gap:16px;font-size:13px}
.home-system .eco-controls input{flex:1;min-width:50px;max-width:220px;height:3px}
.home-system .eco-controls button{font-size:13px;min-height:36px;white-space:nowrap}
.home-system [hidden]{display:none!important}
@media(min-width:1700px){#connected .story-sticky{padding-left:9%;padding-right:7%;gap:6%}.home-system .ecosystem{height:480px}}
@media(max-width:1100px){#connected .story-sticky{padding-left:5%;padding-right:5%;gap:3%;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}.home-system .eco-node{width:94px}.home-system .eco-node strong{font-size:14px}}
@media(max-width:900px){#connected{height:auto;min-height:0}#connected .story-sticky{display:block;position:relative;top:0;height:auto;min-height:0;padding:75px 7%;overflow:hidden}#connected .story-text{max-width:580px}#connected .story-text h2{font-size:clamp(38px,6vw,52px)}.home-system{margin-top:35px}.home-system .ecosystem{height:400px}.home-system .eco-node{width:105px}.home-system .eco-hub>span{font-size:24px}}
@media(max-width:500px){.home-system .ecosystem{height:380px}.home-system .eco-node{width:82px}.home-system .eco-node svg{width:27px;height:27px}.home-system .eco-hub>span{font-size:16px;letter-spacing:.06em}.home-system .eco-controls{gap:12px;font-size:12px}.home-system .eco-controls button{font-size:12px}.home-system .eco-state{font-size:22px}}
@media(prefers-reduced-motion:reduce){#connected{height:auto;min-height:0}#connected .story-sticky{position:relative;height:auto;min-height:0;padding-top:90px;padding-bottom:90px}}
/* A tighter stage with larger points of interest. */
@media(min-width:901px){
 #connected{height:246.9vh;min-height:1350px}
 #connected .story-sticky{height:clamp(700px,85svh,900px);min-height:700px;padding-top:35px;padding-bottom:35px}
 .home-system .ecosystem{height:clamp(470px,55vh,600px)}
 .home-system .eco-node{width:132px}
 .home-system .eco-node svg{width:42px;height:42px;margin-bottom:10px}
 .home-system .eco-node strong{font-size:17px}
 .home-system .eco-bottom{display:flex;align-items:center;gap:22px;padding-top:18px;margin-top:10px}
 .home-system .eco-bottom>div:first-child{flex:1}
 .home-system .eco-controls{margin:0;gap:12px;flex-wrap:wrap;justify-content:flex-end;max-width:230px}
 .home-system .eco-controls input{width:92px;flex:none}
 .home-system .eco-controls button{min-height:28px}
 .home-system .eco-state{font-size:24px}
}
.home-system .eco-node.engaged strong{color:#f3e6ff}
@media(min-width:901px) and (max-width:1200px){.home-system .eco-node{width:108px}.home-system .eco-node strong{font-size:15px}.home-system .eco-bottom{display:block}.home-system .eco-controls{max-width:none;margin-top:12px;justify-content:flex-start}}
@media(max-width:900px){.home-system .eco-node svg{width:35px;height:35px}.home-system .eco-node strong{font-size:15px}.home-system .eco-bottom{margin-top:18px}.home-system .ecosystem{height:420px}}
@media(max-width:500px){.home-system .eco-node strong{font-size:14px}.home-system .eco-node svg{width:30px;height:30px}.home-system .ecosystem{height:390px}}
@media(prefers-reduced-motion:reduce){#connected{height:auto;min-height:0}#connected .story-sticky{height:auto;min-height:0}}

/* Fill the viewport while keeping the composition centred inside it. */
.direction-three .spectrum-intro{height:auto;min-height:100svh;min-height:100dvh;max-height:none;padding-bottom:150px}
@media(min-width:901px){#connected .story-sticky{height:auto;min-height:100svh;min-height:100dvh;max-height:none;align-content:center}}
.home-system .eco-signal{stroke-width:3.5}
@media(max-width:900px){.home-system .eco-signal{stroke-width:3}}
@media(prefers-reduced-motion:reduce){#connected .story-sticky{min-height:0}}
.home-system-track{display:contents}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
 #connected{height:auto;min-height:0}
 #connected .story-sticky{display:block;position:relative;height:auto;min-height:0;padding-bottom:0;overflow:visible}
 .home-system-track{display:block;height:260svh;margin-top:25px}
 .home-system{position:sticky;top:0;margin:0;height:100svh;min-height:480px;display:flex;flex-direction:column;justify-content:center;padding:22px 0;box-sizing:border-box}
 .home-system .ecosystem{flex:none;height:clamp(280px,55svh,470px)}
 .home-system .eco-bottom{width:100%;flex:none;margin-top:16px;padding-top:14px}
 .home-system .eco-controls{margin-top:12px}
}
@media(max-width:900px) and (max-height:520px) and (prefers-reduced-motion:no-preference){
 .home-system{min-height:340px;padding:12px 0}
 .home-system .ecosystem{height:210px}
 .home-system .eco-bottom{margin-top:8px;padding-top:8px;display:flex;gap:12px;align-items:center}
 .home-system .eco-bottom p{display:none}
 .home-system .eco-controls{margin-top:0;flex:1}
}

/* Portrait flow: inputs above, outcomes below, with upright labels. */
@media(max-width:900px){.home-system .eco-hub{left:50%;top:50%}.home-system .eco-hub>span{font-size:24px;letter-spacing:.09em}.home-system .eco-node{width:90px}.home-system .ecosystem{height:clamp(360px,60svh,520px)}}
@media(max-width:500px){.home-system .eco-node{width:82px}.home-system .eco-node strong{font-size:14px}.home-system .eco-node svg{width:28px;height:28px;margin-bottom:5px}}
@media(max-width:900px) and (max-height:520px){.home-system .ecosystem{height:240px}.home-system .eco-node{display:flex;width:135px;gap:6px}.home-system .eco-node strong{font-size:12px}.home-system .eco-node svg{width:23px;height:23px;margin:0}.home-system .eco-hub>span{font-size:20px}}

/* A gradual lift in colour as the business connects. */
.home-system .eco-node{color:var(--input-colour,#a9c5d8)}
.home-system .eco-node.output{color:var(--output-colour,#c3aed2)}
.home-system .eco-node svg{filter:drop-shadow(0 0 5px rgb(137 172 255 / calc(var(--p,0)*.18)))}

.home-system .eco-signal{stroke:url(#pulse-gradient)}