/* HUMANATE, ONE SYSTEM: component styles (2026-10-11). States everywhere: idle, hover (illumination), pressed, chosen (.sel), locked.
   Phones get different behaviour, not smaller copies: ladders, spines and stacked gates with 44px+ targets. */
.humo{left:50%;right:auto;translate:-50% 0}
@media (max-width:760px){ .humo{left:auto;right:16px;translate:0 0} }
.say b{font-weight:500}

/* FORK */
.p-fork{position:relative;width:100%;height:min(440px,62svh)}
.p-fork svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.p-fork .br{fill:none;stroke:rgba(var(--b),.3);stroke-width:1;transition:stroke var(--motion-illumination),stroke-width var(--motion-illumination),opacity var(--motion-illumination)}
.p-fork.has .br{opacity:.35}
.p-fork .br.lit,.p-fork .br.sel{stroke:var(--hi);stroke-width:2;opacity:1;filter:drop-shadow(0 0 8px rgba(var(--a),.9))}
.p-node{position:absolute;left:3.3%;top:50%;width:11px;height:11px;margin:-5.5px;rotate:45deg;background:rgb(var(--a));box-shadow:0 0 0 1.5px #fff,0 0 0 7px rgba(var(--a),.2)}
.p-gate{position:absolute;right:0;width:min(46%,340px);padding:0 0 0 0;text-align:left;translate:0 -100%;transition:opacity var(--motion-illumination),translate var(--motion-selection)}
.p-gate.g0{top:calc(21% - 14px)} .p-gate.g1{top:calc(79% - 14px)}
.p-gate .n{display:block;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.p-gate b{display:block;margin-top:8px;font-family:var(--title);font-weight:200;font-size:clamp(26px,min(2.6vw,4.6svh),40px);line-height:1.05;letter-spacing:-.02em}
.p-gate .l{display:block;margin-top:8px;font-size:15px;color:var(--mute)}
.p-fork.has .p-gate:not(:hover):not(:focus-visible):not(.sel){opacity:.45}
.p-gate:hover,.p-gate:focus-visible{translate:6px -100%} .p-gate:active{translate:3px -100%}
@media (max-width:900px){
  .p-fork{height:auto;display:grid;gap:10px} .p-fork svg,.p-node{display:none}
  .p-gate,.p-gate:hover,.p-gate:active{position:relative;right:auto;top:auto!important;width:100%;translate:0 0;min-height:112px;padding:18px 18px 18px 22px;box-shadow:inset 2px 0 0 rgba(var(--b),.4),inset 0 0 0 .5px rgba(var(--b),.16);background:rgba(var(--ground),.7)}
  .p-gate.sel{box-shadow:inset 2px 0 0 var(--hi),inset 0 0 0 .5px rgba(var(--b),.7);background:rgba(var(--a),.14)}
  .p-fork.has .p-gate:not(.sel){opacity:.6}
}

/* LEVELS */
.p-levels{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;width:100%;max-width:760px;padding-top:34px;align-items:end}
.p-band{position:absolute;top:0;left:calc(5 * (100% + 6px) / 9);right:0;height:22px;pointer-events:none}
.p-band i{position:absolute;inset:8px 0 0;border:solid rgba(var(--b),.6);border-width:1px 1px 0}
.p-band em{position:absolute;left:50%;top:0;translate:-50% 0;padding:0 10px;background:rgb(var(--ground));font-style:normal;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.p-lv{position:relative;height:124px;padding:12px 10px;border-radius:2px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;transform-origin:50% 100%;
  background:rgba(var(--ground),.7);box-shadow:inset 0 0 0 .5px rgba(var(--b),.16);scale:.9;opacity:.46;
  transition:scale var(--motion-selection),opacity var(--motion-selection),background-color var(--motion-illumination),box-shadow var(--motion-illumination)}
.p-lv b{font-family:var(--title);font-weight:200;font-size:28px;line-height:1}
.p-lv span{font-size:10px;line-height:1.3;color:var(--mute);overflow-wrap:anywhere}
.p-lv.in{scale:1;opacity:1;background:rgba(var(--a),.1);box-shadow:inset 0 0 0 .5px rgba(var(--b),.42)}
.p-lv:hover,.p-lv:focus-visible{scale:1.03;opacity:1} .p-lv:active{scale:.98}
.p-lv.sel{scale:1.08;opacity:1;background:rgba(var(--a),.24);box-shadow:inset 0 0 0 1px var(--hi),0 18px 44px -18px rgba(var(--a),.9)}
.p-read{display:none}
/* wide screens: the climb. Each level stands taller than the last; the band we back carries the pathway colour and a rule beneath it. */
@media (min-width:901px){
  .p-levels{gap:8px;max-width:720px;padding-top:0}
  .p-lv,.p-lv.in{height:calc(62px + var(--i) * 25px);max-height:calc(8svh + var(--i) * 3.6svh);padding:13px 0 0;align-items:center;justify-content:flex-start;scale:1;opacity:1;
    background:linear-gradient(180deg,rgba(var(--b),.07),rgba(var(--b),0));box-shadow:inset 0 0 0 .5px rgba(var(--b),.13);transition:translate var(--motion-selection),background var(--motion-illumination),box-shadow var(--motion-illumination)}
  .p-lv span{display:none}
  .p-lv b{font-size:22px;color:var(--faint);transition:color var(--motion-illumination)}
  .p-lv.in{background:linear-gradient(180deg,rgba(var(--a),.36),rgba(var(--a),.03));box-shadow:inset 0 0 0 .5px rgba(var(--b),.42)}
  .p-lv.in b{color:var(--paper)}
  .p-lv:hover,.p-lv:focus-visible{scale:1;translate:0 -5px;box-shadow:inset 0 0 0 .5px rgba(var(--b),.8)} .p-lv:hover b{color:#fff} .p-lv:active{scale:1;translate:0 -2px}
  .p-lv.sel{scale:1;translate:0 -8px;background:linear-gradient(180deg,#fff,var(--hi) 22%,rgba(var(--a),.55));box-shadow:0 22px 50px -22px rgba(var(--a),.95)}
  .p-lv.sel b{color:#06070c}
  .p-band{position:static;grid-row:2;height:auto;margin-top:4px;padding-top:10px;border-top:1px solid var(--c);text-align:center}
  .p-band em{position:static;translate:none;padding:0;background:none}
  .p-read{display:flex;align-items:baseline;gap:14px;grid-row:3;grid-column:1/-1;min-height:1.5em;margin-top:22px;font-size:14px;color:var(--mute)}
  .p-read b{font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--c)}
}
@media (max-width:900px){
  .p-levels{grid-template-columns:repeat(5,minmax(0,1fr));padding-top:0;max-width:none}
  .p-band{display:none}
  .p-lv{height:46px;padding:0 12px;scale:1;flex-direction:row;align-items:center;justify-content:center;order:5}
  .p-lv:not(.in) span{display:none} .p-lv b{font-size:20px}
  .p-lv.in{grid-column:1/-1;height:56px;justify-content:flex-start;gap:16px} .p-lv.in span{font-size:13px}
  .p-lv.in:nth-of-type(9){order:1} .p-lv.in:nth-of-type(8){order:2} .p-lv.in:nth-of-type(7){order:3} .p-lv.in:nth-of-type(6){order:4}
  .p-lv:hover,.p-lv.sel{scale:1}
}

/* ORBIT */
.p-orbit{position:relative;width:min(100%,74svh,620px);aspect-ratio:1}
.p-orbit svg{position:absolute;inset:0;width:100%;height:100%}
.p-orbit .ringl{fill:none;stroke:rgba(var(--b),.16);stroke-width:1}
.p-orbit .run{fill:#fff;opacity:0;filter:drop-shadow(0 0 3px rgb(var(--a)))}
/* the centre is the same node the route starts from on the first screen */
.p-hub{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px;rotate:45deg;background:rgb(var(--a));box-shadow:0 0 0 1.5px #fff,0 0 0 7px rgba(var(--a),.2);pointer-events:none}
.p-orbit.has .p-orb:not(.sel):not(:hover):not(:focus-visible) span{color:var(--faint)}
.p-orb:focus-visible,.p-stop:focus-visible{outline:none}
.p-orb:focus-visible i,.p-stop:focus-visible i{outline:1px solid var(--hi);outline-offset:5px}
.p-orbit .sp{stroke:rgba(var(--b),.16);stroke-width:1;transition:stroke var(--motion-illumination)}
.p-orbit .sp.lit{stroke:rgba(var(--b),.6)} .p-orbit .sp.sel{stroke:var(--hi)}
.p-orb{position:absolute;width:0;height:0}
.p-orb i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;rotate:45deg;background:rgb(var(--ground));box-shadow:inset 0 0 0 1px rgba(var(--b),.6);transition:background var(--motion-selection),box-shadow var(--motion-selection),scale var(--motion-selection)}
.p-orb::before{content:"";position:absolute;left:-26px;top:-26px;width:52px;height:52px}
.p-orb span{position:absolute;top:-11px;white-space:nowrap;font-size:15px;color:var(--mute);transition:color var(--motion-illumination)}
.p-orb.rgt span{left:20px} .p-orb.lft span{right:20px} .p-orb.topc span{left:0;top:-38px;translate:-50% 0} .p-orb.botc span{left:0;top:18px;translate:-50% 0}
.p-orb:hover span,.p-orb:focus-visible span{color:var(--paper)} .p-orb:hover i{scale:1.2;box-shadow:inset 0 0 0 1px var(--hi)}
.p-orb.sel i{background:rgb(var(--a));box-shadow:0 0 0 1.5px #fff,0 0 0 8px rgba(var(--a),.2);scale:1.25} .p-orb.sel span{color:#fff}
@media (max-width:900px){
  .p-orbit{width:100%;aspect-ratio:auto;display:grid;gap:0;padding-left:20px;box-shadow:inset 1px 0 0 rgba(var(--b),.22)}
  .p-orbit svg,.p-hub{display:none}
  .p-orb{position:relative;left:auto!important;top:auto!important;width:100%;height:48px;display:flex;align-items:center}
  .p-orb::before{left:-20px;top:0;width:100%;height:48px}
  .p-orb i{left:-25px;top:19px;width:10px;height:10px} .p-orb span,.p-orb.lft span,.p-orb.rgt span,.p-orb.topc span,.p-orb.botc span{position:static;translate:0 0;font-size:16px}
}

/* PATH */
.p-path{position:relative;width:100%;max-width:820px;height:min(260px,34svh)}
.p-path svg,.p-curve svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ln{fill:none;stroke:rgba(var(--b),.26);stroke-width:1} .lnf{fill:none;stroke:var(--hi);stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(var(--a),.9))}
.p-stop{position:absolute;width:0;height:0}
.p-stop::before{content:"";position:absolute;left:-24px;top:-24px;width:48px;height:76px}
.p-stop i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;rotate:45deg;background:rgb(var(--ground));box-shadow:inset 0 0 0 1px rgba(var(--b),.5);transition:background var(--motion-selection),box-shadow var(--motion-selection),scale var(--motion-selection)}
.p-stop span{position:absolute;left:0;top:18px;translate:-50% 0;white-space:nowrap;text-align:center;font-size:14px;color:var(--faint);transition:color var(--motion-illumination)}
.p-stop em{display:block;margin-bottom:4px;font-style:normal;font-size:10.5px;letter-spacing:.14em}
.p-stop.past i{background:var(--hi);box-shadow:none} .p-stop.past span{color:var(--mute)}
.p-stop.sel i{background:rgb(var(--a));box-shadow:0 0 0 1.5px #fff,0 0 0 7px rgba(var(--a),.2);scale:1.2} .p-stop.sel span{color:#fff} .p-stop.sel em{color:var(--c)}
.p-stop:hover span{color:var(--paper)}
@media (max-width:900px){
  .p-path{height:auto;display:grid;padding-left:20px;box-shadow:inset 1px 0 0 rgba(var(--b),.22)} .p-path svg{display:none}
  .p-stop{position:relative;left:auto!important;top:auto!important;width:100%;height:50px;display:flex;align-items:center}
  .p-stop::before{left:-20px;top:0;width:100%;height:50px} .p-stop i{left:-25px;top:20px}
  .p-stop span{position:static;translate:0 0;text-align:left;font-size:16px;display:flex;gap:12px;align-items:baseline} .p-stop em{margin:0}
}

/* RING */
.p-ring{position:relative;width:min(100%,68svh,520px);aspect-ratio:1}
.p-ring svg{width:100%;height:100%;overflow:visible}
.p-ring .seg{cursor:pointer;outline:none}
.p-ring .hit{fill:none;stroke:transparent;stroke-width:34}
.p-ring .a{fill:none;stroke:rgba(var(--b),.3);stroke-width:3;stroke-linecap:butt;transition:stroke var(--motion-selection),stroke-width var(--motion-selection),filter var(--motion-selection)}
.p-ring text{font-family:var(--sub);font-size:9px;fill:rgba(238,240,246,.6);transition:fill var(--motion-illumination)}
.p-ring .seg:hover .a,.p-ring .seg:focus-visible .a{stroke:rgba(var(--b),.75);stroke-width:5} .p-ring .seg:hover text,.p-ring .seg:focus-visible text{fill:#fff}
.p-ring .seg.sel .a{stroke:var(--hi);stroke-width:6;filter:drop-shadow(0 0 5px rgba(var(--a),.9))} .p-ring .seg.sel text{fill:var(--c)}
.p-count{position:absolute;left:50%;top:50%;translate:-50% -50%;text-align:center;font-size:14px;color:var(--mute);pointer-events:none}
.p-count b{font-family:var(--title);font-weight:200;font-size:54px;line-height:1;color:var(--paper)} .p-count span{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.p-ring.full .p-count b{color:var(--c)}

/* CURVE */
.p-curve{width:100%;max-width:860px}
.p-curve .plot{position:relative;height:clamp(140px,26svh,230px)}
.p-curve .ar{fill:url(#cg)}
.p-curve .st{position:absolute;width:0;height:0}
.p-curve button.st::before{content:"";position:absolute;left:-30px;top:-44px;width:60px;height:66px}
.p-curve button.st:hover b,.p-curve button.st:focus-visible b{color:var(--paper)} .p-curve button.st:focus-visible{outline:none} .p-curve button.st:focus-visible i{outline:1px solid var(--hi);outline-offset:5px}
.p-curve .st.off{opacity:.55}
.p-curve .amt{transition:opacity var(--motion-illumination)}
.p-curve.unset .amt{opacity:.32} .p-curve.unset .mk{opacity:.45}
.p-curve .st i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;rotate:45deg;background:rgb(var(--ground));box-shadow:inset 0 0 0 1px rgba(var(--b),.45)}
.p-curve .st.focus i{box-shadow:inset 0 0 0 1.5px var(--c),0 0 0 5px rgba(var(--a),.18)}
.p-curve .st b{position:absolute;left:0;bottom:14px;translate:-50% 0;white-space:nowrap;font-weight:400;font-size:13px;color:var(--mute);transition:color var(--motion-illumination)}
.p-curve .st.sel b{color:var(--c)}
.p-curve .mk{position:absolute;width:16px;height:16px;margin:-8px;border-radius:50%;background:rgb(var(--a));box-shadow:0 0 0 2px #fff,0 0 20px rgba(var(--a),.9);transition:left .15s linear,top .15s linear}
.p-curve .ask{display:flex;align-items:baseline;justify-content:space-between;margin-top:22px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.p-curve .amt{font-family:var(--title);font-weight:200;font-size:30px;letter-spacing:-.02em;text-transform:none;color:var(--paper)}
.p-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:none}
.p-range::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--hi) var(--p,0%),rgba(var(--b),.2) var(--p,0%))}
.p-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;background:rgb(var(--a));box-shadow:0 0 0 2px #fff,0 0 0 8px rgba(var(--a),.16);cursor:grab}
.p-range::-moz-range-track{height:2px;background:rgba(var(--b),.2)} .p-range::-moz-range-progress{height:2px;background:var(--hi)}
.p-range::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:rgb(var(--a));box-shadow:0 0 0 2px #fff}
@media (max-width:900px){ .p-curve .st b{font-size:11px;bottom:12px} .p-curve .plot{height:150px} }

/* FORM */
.p-form{width:100%;max-width:520px}
.p-form .step{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.p-form .step i{flex:1;height:1px;background:linear-gradient(90deg,var(--hi) calc(var(--p)*100%),rgba(var(--b),.2) calc(var(--p)*100%))}
.p-form .fld{display:block;margin-top:26px}
.p-form .fld span{display:block;font-family:var(--title);font-weight:200;font-size:clamp(24px,min(2.4vw,4.2svh),34px);line-height:1.1;letter-spacing:-.02em}
.p-form input:not([type=checkbox]),.p-form textarea{display:block;width:100%;margin-top:18px;padding:12px 0;border:0;border-bottom:1px solid rgba(var(--b),.35);border-radius:0;background:none;color:var(--paper);font:300 20px/1.4 var(--sub);outline:none;resize:none;transition:border-color var(--motion-illumination)}
.p-form input:focus,.p-form textarea:focus{border-bottom-color:var(--hi)}
.p-form ::placeholder{color:var(--faint)}
.p-form .note{margin-top:12px;font-size:13px;color:var(--mute)}
.p-form .ack{display:flex;gap:14px;align-items:flex-start;margin-top:26px;padding:18px;font-size:14.5px;line-height:1.5;cursor:pointer}
.p-form .ack input{position:absolute;opacity:0}
.p-form .ack i{flex:none;position:relative;width:16px;height:16px;margin-top:3px;box-shadow:inset 0 0 0 1px var(--c);transition:background var(--motion-selection)}
.p-form .ack input:checked+i{background:var(--c)} .p-form .ack input:checked+i::after{content:"";position:absolute;left:5.5px;top:2px;width:4px;height:8px;border:solid rgb(var(--ground));border-width:0 1.5px 1.5px 0;rotate:45deg}
.p-form .ack input:focus-visible+i{outline:1px solid var(--hi);outline-offset:3px}

/* LIST */
.p-list{width:100%;max-width:640px}
.p-row{display:grid;grid-template-columns:44px 1fr 20px;align-items:center;column-gap:8px;width:100%;min-height:clamp(78px,12.6svh,104px);padding:clamp(10px,2svh,18px) 0;text-align:left;border-top:.5px solid rgba(var(--b),.22);transition:padding var(--motion-selection),opacity var(--motion-illumination)}
.p-row:last-child{border-bottom:.5px solid rgba(var(--b),.22)}
.p-row em{grid-row:1/3;font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--faint)}
.p-row b{font-family:var(--title);font-weight:200;font-size:clamp(26px,min(2.6vw,4.6svh),38px);line-height:1.05;letter-spacing:-.02em}
.p-row span{grid-column:2;font-size:15px;color:var(--mute)}
.p-row svg{grid-row:1/3;grid-column:3;width:18px;height:18px;opacity:.35;transition:translate var(--motion-illumination),opacity var(--motion-illumination)}
.p-list:focus-within .p-row:not(:focus-visible):not(.sel){opacity:.5}
@media (hover:hover){ .p-list:hover .p-row:not(:hover){opacity:.5} }
.p-row:hover,.p-row:focus-visible,.p-row.sel{padding-left:14px} .p-row:hover svg,.p-row.sel svg{opacity:1;translate:4px 0} .p-row.sel em,.p-row.sel b{color:var(--c)}

/* APP */
.p-app{width:100%;max-width:780px;padding:8px}
.p-app img{display:block;width:100%;height:auto;max-height:58svh;object-fit:cover;object-position:top left}
.p-pt{position:absolute;width:0;height:0}
.p-pt::before{content:"";position:absolute;left:-22px;top:-22px;width:44px;height:44px}
.p-pt i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;rotate:45deg;background:rgb(var(--ground));box-shadow:inset 0 0 0 1.5px var(--c),0 0 0 6px rgba(var(--a),.25);transition:background var(--motion-selection),scale var(--motion-selection)}
.p-pt span{position:absolute;left:18px;top:-13px;padding:4px 10px;white-space:nowrap;font-size:12.5px;background:rgba(var(--ground),.9);box-shadow:inset 0 0 0 .5px rgba(var(--b),.4);opacity:0;translate:-6px 0;transition:opacity var(--motion-illumination),translate var(--motion-illumination)}
.p-pt:hover span,.p-pt:focus-visible span,.p-pt.sel span{opacity:1;translate:0 0} .p-pt.sel i{background:var(--c);scale:1.15}
.p-app .cap,.p-seal .cap{margin-top:10px;font-size:11.5px;color:var(--faint)}
@media (max-width:900px){ .p-pt span{display:none} }

/* SEAL */
.p-seal{width:100%;max-width:460px;padding:26px}
.p-seal .k{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.p-seal .code{margin-top:14px;font-family:var(--title);font-weight:200;font-size:36px;letter-spacing:-.01em}
.p-seal .who{display:flex;gap:6px;margin-top:14px}
.p-seal .who i{height:12px;flex:1;background:rgba(var(--b),.22);transition:background var(--motion-progress),flex var(--motion-progress)}
.p-seal.open .who i{background:var(--hi)} .p-seal.open .who i:nth-child(2n){flex:2}
.p-seal .hold{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:24px;border-radius:2px;box-shadow:inset 0 0 0 .5px var(--c);overflow:hidden;font-size:15px;touch-action:none;user-select:none;-webkit-user-select:none}
.p-seal .hold i{position:absolute;inset:0;background:rgba(var(--a),.3);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.p-seal .hold b{position:relative;z-index:1;font-weight:400}
.p-seal.open .hold{box-shadow:inset 0 0 0 1px var(--hi)}

/* APP, as views */
.p-app{padding:0;max-width:820px}
.p-app .shot{padding:8px}
.p-app .shot img{display:block;width:100%;aspect-ratio:16/10;height:auto;max-height:52svh;object-fit:cover;object-position:top left;transition:opacity var(--motion-illumination)}
.p-tabs{display:flex;gap:0;margin-top:14px;box-shadow:inset 0 -1px 0 rgba(var(--b),.2)}
.p-tab{flex:1;min-height:48px;padding:10px 12px;text-align:left;font-size:14.5px;color:var(--mute);box-shadow:inset 0 -1px 0 transparent;transition:color var(--motion-illumination),box-shadow var(--motion-selection)}
.p-tab em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--faint);margin-bottom:3px}
.p-tab:hover,.p-tab:focus-visible{color:var(--paper)}
.p-tab.sel{color:#fff;box-shadow:inset 0 -2px 0 var(--hi)} .p-tab.sel em{color:var(--c)}
@media (max-width:900px){ .p-tab{font-size:13px;padding:8px 6px} }

/* PATH, wide screens: step names wrap under their node instead of running into the next one */
@media (min-width:901px){
  .p-stop span{width:128px;white-space:normal;text-wrap:balance;line-height:1.25;top:20px}
  .p-path{height:min(300px,38svh)}
}

/* CARDS: Creative Studio's pathway card, in the pathway colour. The photograph is toned to the pathway and dissolves into the card. */
.p-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);width:100%;max-width:700px}
.p-cards.n3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.p-card{display:flex;flex-direction:column;justify-content:flex-end;height:clamp(340px,60svh,520px);padding:0;overflow:hidden;text-align:left;background-color:rgb(var(--ground))}
.p-card .art{position:absolute;inset:0 0 30% 0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 34%,rgba(0,0,0,.5) 66%,transparent 96%);mask-image:linear-gradient(180deg,#000 34%,rgba(0,0,0,.5) 66%,transparent 96%)}
.p-card::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;--vf:rgba(var(--b),.9);
  background-image:linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf));
  background-repeat:no-repeat;background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  box-shadow:inset 0 0 0 .5px rgba(var(--b),.18);transition:box-shadow var(--motion-illumination)}
.p-card:hover::after,.p-card:focus-visible::after,.p-card.sel::after{box-shadow:inset 0 0 0 .5px rgba(var(--b),.7),inset 0 0 40px -18px rgba(var(--a),.8)}
.p-card .art img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.7);scale:1.02;transition:filter var(--motion-illumination)}
.p-card .art::before{content:"";position:absolute;inset:0;z-index:1;background:rgb(var(--a));mix-blend-mode:color;opacity:.55}
.p-card .art::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(var(--ground),.28)}
.p-card .tx{position:relative;z-index:3;display:block;padding:0 clamp(16px,1.8vw,30px) clamp(18px,2vw,28px)}
.p-card .n{display:block;margin-bottom:10px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.p-card b{display:block;font-family:var(--title);font-weight:200;font-size:clamp(22px,min(2.1vw,3.8svh),32px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.p-card .l{display:block;margin-top:10px;font-size:14.5px;line-height:1.45;color:var(--mute)}
.p-card .st{display:inline-flex;align-items:center;gap:12px;margin-top:18px;font-size:14px;font-weight:400}
.p-card .st svg{width:30px;height:30px;padding:7px;border-radius:2px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.4);transition:translate var(--motion-selection),background var(--motion-illumination),color var(--motion-illumination)}
button.p-card:hover,button.p-card:focus-visible,.p-card.sel{background-color:rgb(var(--ground))}
.p-card:hover .art img,.p-card:focus-visible .art img,.p-card.sel .art img{filter:grayscale(1) contrast(1.08) brightness(.92)}
.p-card:hover .st svg,.p-card:focus-visible .st svg,.p-card.sel .st svg{translate:4px 0;background:#f4f2f7;color:#0b0a12}
.p-cards.has .p-card:not(.sel):not(:hover):not(:focus-visible){opacity:.45}
/* phones: the same card, lying down. The photograph sits behind the right-hand side and the whole row is the target. */
@media (max-width:900px){
  .p-cards,.p-cards.n3{grid-template-columns:minmax(0,1fr);gap:10px;max-width:none}
  .p-card{height:auto;min-height:128px;justify-content:center}
  .p-card .art{inset:0 0 0 38%;-webkit-mask-image:linear-gradient(90deg,transparent 2%,rgba(0,0,0,.45) 40%,#000 86%);mask-image:linear-gradient(90deg,transparent 2%,rgba(0,0,0,.45) 40%,#000 86%)}
  .p-card .tx{padding:18px 18px 18px 20px;max-width:78%}
  .p-card .st{margin-top:12px} .p-card .st svg{width:26px;height:26px;padding:6px}
  .p-card .l{font-size:14px}
}

/* EARTH: the planet fills the room; the landing places are named on it; the portal window is drawn on a canvas above the stage */
.room .film{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s var(--ease)}
.room .film.on{opacity:1}
.room .film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.12) 36%,transparent 52%,rgba(0,0,0,.86) 100%)}
.portal-cv{position:fixed;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}
.screen.wide{align-content:start;padding-top:clamp(4px,3svh,40px)}
.screen.wide .sys{position:static;height:auto;min-height:0}
.p-earth{position:absolute;inset:0;pointer-events:none}
.p-land{position:absolute;width:0;height:0;pointer-events:auto;transition:opacity var(--motion-illumination)}
.p-land::before{content:"";position:absolute;left:-80px;top:-96px;width:160px;height:122px}
.p-land::after{content:"";position:absolute;left:-.5px;top:-38px;width:1px;height:28px;background:linear-gradient(180deg,rgba(var(--b),.9),rgba(var(--b),.2))}
.p-land i{position:absolute;left:-5.5px;top:-5.5px;width:11px;height:11px;rotate:45deg;background:rgb(var(--ground));box-shadow:inset 0 0 0 1.5px var(--hi),0 0 0 6px rgba(var(--a),.22);transition:background var(--motion-selection),scale var(--motion-selection)}
.p-land span{position:absolute;left:0;bottom:46px;translate:-50% 0;white-space:nowrap;text-align:center;font-family:var(--title);font-weight:200;font-size:clamp(19px,1.75vw,27px);line-height:1.1;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6);transition:translate var(--motion-selection)}
.p-land em{display:block;margin-bottom:6px;font-family:var(--sub);font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--c)}
.p-land:hover i,.p-land:focus-visible i,.p-land.sel i{background:var(--hi);scale:1.2}
.p-land:hover span,.p-land:focus-visible span{translate:-50% -4px}
.p-land:focus-visible{outline:none} .p-land:focus-visible i{outline:1px solid var(--hi);outline-offset:5px}
.p-earth:hover .p-land:not(:hover){opacity:.55}
.p-earth.going .p-land{opacity:0;pointer-events:none}
@media (max-width:900px){ .p-land span{font-size:19px;bottom:40px} .p-land::after{top:-34px;height:26px} }

/* PATH pictures: one photograph per step, behind the line. Faint, toned to the pathway, and dissolved at every edge so it reads as
   light in the room, not a picture in a box. */
.room .scene{position:absolute;inset:0;pointer-events:none;transition:opacity .9s var(--ease);
  /* no circle (user, 2026-10-11): the picture comes in from the right-hand side of the room and eases out to the left, top and bottom */
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.5) 52%,#000 78%),linear-gradient(180deg,transparent 4%,#000 30%,#000 64%,transparent 96%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.5) 52%,#000 78%),linear-gradient(180deg,transparent 4%,#000 30%,#000 64%,transparent 96%);mask-composite:intersect}
.room .scene.off{opacity:0}
.room .scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;opacity:0;scale:1.04;filter:grayscale(1) contrast(1.1) brightness(.75);transition:opacity .7s var(--ease),scale 1.6s var(--ease)}
.room .scene img.on{opacity:.2;scale:1}
.room .scene::after{content:"";position:absolute;inset:0;background:rgb(var(--a));mix-blend-mode:color;opacity:.7}
@media (max-width:900px){
  .room .scene{-webkit-mask-image:linear-gradient(180deg,transparent 34%,#000 66%,#000 80%,transparent);-webkit-mask-composite:source-over;mask-image:linear-gradient(180deg,transparent 34%,#000 66%,#000 80%,transparent);mask-composite:add}
  .room .scene img{object-position:center} .room .scene img.on{opacity:.2}
}

/* PANELS: doors side by side; the open one is wide and shows its photograph */
.p-panels{display:flex;gap:8px;width:100%;max-width:840px;height:clamp(300px,54svh,440px)}
.p-pan{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:2px;text-align:left;background:rgba(var(--ground),.72);transition:flex-grow .8s var(--ease),background-color var(--motion-illumination)}
.p-pan.sel{flex-grow:6.5}
.p-pan::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;--vf:rgba(var(--b),.9);
  background-image:linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf));
  background-repeat:no-repeat;background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  box-shadow:inset 0 0 0 .5px rgba(var(--b),.16);transition:box-shadow var(--motion-illumination)}
.p-pan.sel::after{box-shadow:inset 0 0 0 .5px rgba(var(--b),.6)}
.p-pan .art{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease);-webkit-mask-image:linear-gradient(180deg,#000 20%,rgba(0,0,0,.35) 62%,transparent 92%);mask-image:linear-gradient(180deg,#000 20%,rgba(0,0,0,.35) 62%,transparent 92%)}
.p-pan .art img{position:absolute;left:50%;top:0;width:auto;min-width:100%;height:100%;translate:-50% 0;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.8)}
.p-pan .art::after{content:"";position:absolute;inset:0;background:rgb(var(--a));mix-blend-mode:color;opacity:.6}
.p-pan.sel .art{opacity:.62}
.p-pan em{position:absolute;left:16px;top:16px;z-index:2;font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.16em;color:var(--faint);transition:color var(--motion-illumination)}
.p-pan.sel em{color:var(--c)}
.p-pan .v{position:absolute;left:14px;bottom:18px;z-index:2;writing-mode:vertical-rl;rotate:180deg;white-space:nowrap;font-size:14px;color:var(--mute);transition:opacity .3s,color var(--motion-illumination)}
.p-pan:hover .v{color:var(--paper)} .p-pan.sel .v{opacity:0}
.p-pan .h{position:absolute;left:22px;bottom:22px;z-index:2;width:min(340px,30vw);opacity:0;translate:0 10px;transition:opacity .25s,translate .5s var(--ease)}
.p-pan.sel .h{opacity:1;translate:0 0;transition:opacity .5s .3s,translate .7s var(--ease) .3s}
.p-pan .h b{display:block;font-family:var(--title);font-weight:200;font-size:clamp(22px,min(2.1vw,3.8svh),32px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.p-pan .h span{display:block;margin-top:10px;font-size:15px;line-height:1.45;color:var(--mute)}
.p-pan:focus-visible{outline:1px solid var(--hi);outline-offset:3px}
@media (max-width:900px){
  .p-panels{flex-direction:column;height:auto;max-width:none;gap:6px}
  .p-pan{flex:none;min-height:52px} .p-pan.sel{min-height:168px}
  .p-pan em{top:20px} .p-pan .v{writing-mode:horizontal-tb;rotate:none;left:52px;top:16px;bottom:auto;font-size:16px}
  .p-pan .h{left:18px;bottom:16px;width:auto;right:18px}
  .p-pan .art{-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)} .p-pan.sel .art{opacity:.5}
}

/* ORBIT centre: a circle that holds the photograph of the field in question. Empty, it holds the node. */
.p-orbit .ringl.in{stroke:rgba(var(--b),.3)}
.p-disc{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;overflow:hidden;pointer-events:none}
.p-disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.1;filter:grayscale(1) contrast(1.08) brightness(.95);transition:opacity .5s var(--ease),scale 1.4s var(--ease)}
.p-disc img.on{opacity:.9;scale:1}
.p-disc::after{content:"";position:absolute;inset:0;background:rgb(var(--a));mix-blend-mode:color;opacity:.55}
.p-hub{transition:opacity var(--motion-illumination),scale var(--motion-selection)}
.p-orbit.pic .p-hub{opacity:0;scale:.3}
@media (max-width:900px){ .p-disc{display:none} }

/* LIST, cleaner pass */
.p-row b{font-size:clamp(22px,min(2.05vw,3.7svh),30px)}
.p-row span{margin-top:4px;font-size:14px;color:var(--faint)}
.p-row{min-height:clamp(72px,11.4svh,92px)}
.p-list:focus-within .p-row:not(:focus-visible):not(.sel){opacity:.7}
@media (hover:hover){ .p-list:hover .p-row:not(:hover){opacity:.7} }
.p-row:hover span,.p-row.sel span{color:var(--mute)}

/* small capital labels (user, 2026-10-11: "cleaner, less bold"): regular weight, a little less tracking, everywhere */
.q .k,.p-gate .n,.p-card .n,.p-band em,.p-read b,.p-curve .ask,.p-form .step,.p-seal .k,.p-land em,.p-pan em,.route .lab em,.hd-k{font-weight:400;letter-spacing:.16em}
.q .k{font-size:11.5px}

/* CHECK */
.p-check{width:100%;max-width:600px}
.p-tick{display:flex;align-items:flex-start;gap:20px;width:100%;padding:clamp(12px,2.2svh,20px) 0;text-align:left;border-top:.5px solid rgba(var(--b),.2)}
.p-tick > i{flex:none;position:relative;width:22px;height:22px;margin-top:5px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(var(--b),.55);transition:background var(--motion-selection),box-shadow var(--motion-selection),scale var(--motion-selection)}
.p-tick > i::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border:solid rgb(var(--ground));border-width:0 1.5px 1.5px 0;rotate:45deg;opacity:0;transition:opacity var(--motion-selection)}
.p-tick b{display:block;font-family:var(--title);font-weight:200;font-size:clamp(22px,min(2.05vw,3.7svh),30px);line-height:1.1;letter-spacing:-.02em;transition:color var(--motion-illumination)}
.p-tick span span{display:block;margin-top:5px;font-size:14.5px;color:var(--mute)}
.p-tick:hover > i,.p-tick:focus-visible > i{box-shadow:inset 0 0 0 1px var(--hi);scale:1.08}
.p-tick:active > i{scale:.94}
.p-tick.sel > i{background:var(--hi);box-shadow:none} .p-tick.sel > i::after{opacity:1}
.p-tick.sel b{color:var(--c)}
.p-tick:focus-visible{outline:none} .p-tick:focus-visible > i{outline:1px solid var(--hi);outline-offset:4px}
.p-meter{display:flex;align-items:center;gap:16px;padding-top:18px;border-top:.5px solid rgba(var(--b),.2);font-size:13px;color:var(--mute);white-space:nowrap}
.p-meter b{font-family:var(--title);font-weight:200;font-size:24px;line-height:1;color:var(--paper);margin-right:-8px}
.p-meter i{flex:1;height:2px;background:rgba(var(--b),.18)} .p-meter u{display:block;height:100%;background:var(--hi);transition:width var(--motion-progress)}
.p-check.full .p-meter b{color:var(--c)}
@media (max-width:900px){ .p-meter{display:none} .p-tick{padding:12px 0} }

/* PILLARS */
.screen.wide .q{max-width:min(58rem,100%)}
.screen.wide .q .say:empty{display:none}
.p-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,44px);width:100%;margin-top:clamp(28px,7svh,72px)}
.p-pil{padding-top:20px;border-top:.5px solid rgba(var(--b),.35);transition:border-color var(--motion-illumination)}
.p-pil em{display:block;font-style:normal;font-size:11px;letter-spacing:.16em;color:var(--c)}
.p-pil b{display:block;margin-top:14px;font-family:var(--title);font-weight:200;font-size:clamp(22px,min(2.1vw,3.8svh),32px);line-height:1.08;letter-spacing:-.02em}
.p-pil span{display:block;margin-top:10px;max-width:26ch;font-size:15px;line-height:1.45;color:var(--mute)}
.p-pil:hover{border-top-color:var(--hi)}
@media (max-width:900px){ .p-pillars{grid-template-columns:minmax(0,1fr);gap:0;margin-top:6px} .p-pil{padding:14px 0} .p-pil b{margin-top:6px} .p-pil span{max-width:none;margin-top:4px} }

/* four pathway cards across a wide opening screen */
.p-cards.n4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;margin-top:clamp(18px,4svh,40px)}
.p-cards.n4 .p-card{height:clamp(220px,37svh,320px)}
.p-cards.n4 .p-card .art{inset:0 0 40% 0}
.p-cards.n4 .p-card b{font-size:clamp(20px,min(1.8vw,3.3svh),27px)}
.p-cards.n4 .p-card .l{font-size:13.5px}
.p-cards.n4 .p-card .st{margin-top:12px}
@media (max-width:900px){ .p-cards.n4{grid-template-columns:minmax(0,1fr);margin-top:0} .p-cards.n4 .p-card{height:auto;min-height:112px} .p-cards.n4 .p-card .art{inset:0 0 0 38%} }

/* CARDS, on choosing (user, 2026-10-11): the chosen card holds; the others shrink back and fade out */
.p-cards .p-card{transition:scale .55s var(--ease),opacity .45s var(--ease),translate var(--motion-selection),background-color var(--motion-illumination)}
.p-cards.has .p-card:not(.sel){scale:.9!important;opacity:0!important;pointer-events:none}
.p-cards.has .p-card.sel{scale:1.02}

/* a card's picture expanding into the page */
.p-zoom{position:fixed;z-index:9;pointer-events:none;background-size:cover;background-repeat:no-repeat;filter:grayscale(1) contrast(1.08) brightness(.78);
  transition:left 1s cubic-bezier(.65,0,.35,1),top 1s cubic-bezier(.65,0,.35,1),width 1s cubic-bezier(.65,0,.35,1),height 1s cubic-bezier(.65,0,.35,1),opacity .85s var(--ease)}
.p-zoom::after{content:"";position:absolute;inset:0;background:rgb(var(--a));mix-blend-mode:color;opacity:.55}
.p-zoom.go{left:0!important;top:0!important;width:100vw!important;height:100vh!important}
.p-zoom.out{opacity:0}

.p-zoom{filter:none;overflow:hidden;background:rgb(var(--ground))}
.p-zoom::before{content:"";position:absolute;inset:0;background:var(--im) var(--pos,center)/cover no-repeat;filter:grayscale(1) contrast(1.08) brightness(.78)}
.p-zoom::before{content:none}
.p-zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.78)}

/* STEPS: glass cards in the frame */
.p-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);width:100%;margin-top:clamp(24px,6svh,64px)}
.p-step{position:relative;min-height:clamp(190px,30svh,260px);padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;
  background-color:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 .5px rgba(var(--b),.22),inset 0 1px 0 rgba(255,255,255,.08);
  transition:background-color var(--motion-illumination),box-shadow var(--motion-illumination),translate var(--motion-selection)}
.p-step:hover{background-color:rgba(var(--a),.1);box-shadow:inset 0 0 0 .5px rgba(var(--b),.7),0 0 40px -16px rgba(var(--a),.7);translate:0 -4px}
.p-step em{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.p-step b{display:block;margin-top:auto;padding-top:28px;font-family:var(--title);font-weight:200;font-size:clamp(22px,min(2.1vw,3.8svh),32px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.p-step span{display:block;margin-top:10px;font-size:15px;line-height:1.45;color:var(--mute)}
/* the line to the next step, with a node at its end */
.p-step:not(:last-child)::after{content:"";position:absolute;left:100%;top:50%;width:clamp(28px,4vw,64px);height:1px;background:linear-gradient(90deg,rgba(var(--b),.7),rgba(var(--b),.25))}
.p-step:not(:last-child)::before{content:"";position:absolute;left:calc(100% + clamp(28px,4vw,64px) / 2);top:50%;width:7px;height:7px;margin:-3.5px;rotate:45deg;background:var(--hi);z-index:1}
@media (max-width:900px){
  .p-steps{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:4px} .p-step{min-height:0;padding:18px 20px} .p-step b{padding-top:14px}
  .p-step:not(:last-child)::after{left:28px;top:100%;width:1px;height:22px;background:rgba(var(--b),.5)} .p-step:not(:last-child)::before{left:28px;top:calc(100% + 11px)}
}
/* the field circle is empty until a field is rested on or chosen (its tint was showing as a solid disc) */
.p-disc::after{opacity:0;transition:opacity .4s} .p-orbit.pic .p-disc::after{opacity:.55}

/* FORM, richer questions: buttons to choose, a dragger over named stops, a place to drop files */
.p-form{max-width:600px}
.p-form .step i{height:2px}
.p-form .fld .qn{display:block;font-family:var(--title);font-weight:200;font-size:clamp(24px,min(2.4vw,4.2svh),34px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.p-form .opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.p-form .opt{min-height:44px;padding:0 18px;border-radius:2px;font-size:15px;color:var(--mute);box-shadow:inset 0 0 0 .5px rgba(var(--b),.35);transition:background var(--motion-illumination),box-shadow var(--motion-illumination),color var(--motion-illumination),scale var(--motion-selection)}
.p-form .opt:hover,.p-form .opt:focus-visible{color:var(--paper);box-shadow:inset 0 0 0 .5px var(--hi)} .p-form .opt:active{scale:.97}
.p-form .opt.sel{color:#0b0a08;background:var(--hi);box-shadow:none}
.p-form .rv{display:block;margin-top:22px;font-family:var(--title);font-weight:200;font-size:28px;letter-spacing:-.02em;color:var(--c);transition:opacity var(--motion-illumination)} .p-form .rv.unset{opacity:.4;color:var(--paper)}
.p-form .p-range{margin-top:4px}
.p-form .ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--faint)}
.p-form .drop{display:block;margin-top:22px;padding:26px 20px;text-align:center;cursor:pointer;background-color:rgba(255,255,255,.04)}
.p-form .drop input{position:absolute;opacity:0;width:1px;height:1px}
.p-form .drop b{display:block;font-weight:400;font-size:16px} .p-form .drop span{display:block;margin-top:4px;font-size:13px;color:var(--mute)}
.p-form .drop:hover,.p-form .drop.over,.p-form .drop:focus-within{background-color:rgba(var(--a),.12);box-shadow:inset 0 0 0 .5px rgba(var(--b),.8)}
.p-form .names{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.p-form .names li{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 12px;font-size:13px;box-shadow:inset 0 0 0 .5px rgba(var(--b),.4)}
.p-form .names button{width:22px;height:22px;color:var(--mute)} .p-form .names button:hover{color:var(--paper)}

/* Google Material Symbols (Outlined), a three-icon subset stored with the site, at weight 200 so the strokes sit with the titles */
@font-face{font-family:"MS One";src:url("fonts/MaterialSymbols-one.woff2?v=2") format("woff2");font-weight:200;font-display:block}
.ms{font-family:"MS One";font-weight:200;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased}
/* STEPS: the number in a small glass square in the top right corner; the icon above the title */
.p-step em{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:36px;height:36px;border-radius:2px;font-family:var(--title);font-weight:200;font-size:17px;letter-spacing:0;color:var(--paper);
  background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 .5px rgba(var(--b),.4),inset 0 1px 0 rgba(255,255,255,.12)}
.p-step .ms{margin-top:auto;font-size:34px;color:var(--c)}
.p-step .ms + b{margin-top:16px;padding-top:0}
@media (max-width:900px){ .p-step em{right:14px;top:14px;width:32px;height:32px} .p-step .ms{font-size:28px} .p-step .ms + b{margin-top:10px} }

/* LEVELS: a hover card above each level says what it means before you choose (user, 2026-10-11) */
.p-lv .tip{display:none}
@media (min-width:901px){
  .p-lv .tip{display:block;position:absolute;left:50%;bottom:calc(100% + 16px);z-index:5;width:230px;padding:16px 18px;text-align:left;pointer-events:none;
    background-color:rgba(var(--ground),.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;visibility:hidden;translate:-50% 8px;
    transition:opacity var(--motion-illumination),translate var(--motion-selection),visibility 0s linear .4s}
  .p-lv:hover .tip,.p-lv:focus-visible .tip{opacity:1;visibility:visible;translate:-50% 0;transition:opacity var(--motion-illumination),translate var(--motion-selection),visibility 0s}
  .p-lv .tip em{display:block;font-style:normal;font-size:10.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
  .p-lv .tip i{display:block;margin-top:8px;font-style:normal;font-family:var(--title);font-weight:200;font-size:19px;line-height:1.15;letter-spacing:-.01em;color:var(--paper)}
  .p-lv .tip u{display:block;margin-top:10px;text-decoration:none;font-size:13px;line-height:1.4;color:var(--mute)}
  .p-lv .tip::before{content:"";position:absolute;left:50%;top:100%;width:1px;height:16px;background:rgba(var(--b),.6)}
  .p-lv:nth-of-type(n+8) .tip{left:auto;right:0;translate:0 8px} .p-lv:nth-of-type(n+8):hover .tip,.p-lv:nth-of-type(n+8):focus-visible .tip{translate:0 0} .p-lv:nth-of-type(n+8) .tip::before{left:auto;right:35px}
  .p-read{display:none!important}
}

/* PATH over its photograph (user, 2026-10-11: fix visibility). The picture was washing the whole side of the screen bright blue.
   It is now a dark, quiet picture with only a hint of the pathway colour, and the line and its labels are drawn to be read over it. */
.room .scene img{filter:grayscale(1) contrast(1.05) brightness(.6)}
.room .scene img.on{opacity:.3}
.room .scene::after{mix-blend-mode:normal;opacity:1;background:linear-gradient(rgba(var(--a),.1),rgba(var(--a),.1)),radial-gradient(60% 46% at 68% 52%,rgba(var(--ground),.62),rgba(var(--ground),.2) 70%,transparent)}
.p-path .ln{stroke:rgba(var(--b),.55)}
.p-stop span{color:rgba(238,240,246,.78);text-shadow:0 1px 14px rgba(var(--ground),.95),0 0 3px rgba(var(--ground),.9)}
.p-stop em{color:rgba(238,240,246,.6)}
.p-stop i{background:rgb(var(--ground));box-shadow:inset 0 0 0 1.5px rgba(var(--b),.9)}
.p-stop:hover span,.p-stop.sel span{color:#fff}
@media (max-width:900px){ .room .scene img.on{opacity:.26} }

/* GUIDE: what, why, how, who, when, where next */
.p-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);width:100%;margin-top:clamp(20px,5svh,52px)}
.p-g{min-height:clamp(118px,19svh,170px);padding:clamp(16px,1.7vw,26px);display:flex;flex-direction:column;background-color:rgba(255,255,255,.045);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 0 0 .5px rgba(var(--b),.2);transition:background-color var(--motion-illumination),box-shadow var(--motion-illumination),translate var(--motion-selection)}
.p-g:hover{background-color:rgba(var(--a),.1);box-shadow:inset 0 0 0 .5px rgba(var(--b),.65);translate:0 -3px}
.p-g dt{font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.p-g dd{margin-top:auto;padding-top:16px;font-size:clamp(15px,1.2vw,17.5px);line-height:1.4;color:var(--paper);text-wrap:pretty}
.p-g.next{background-color:rgba(var(--a),.13);box-shadow:inset 0 0 0 .5px rgba(var(--b),.6)}
@media (max-width:900px){ .p-guide{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:4px} .p-g{min-height:0;padding:14px 16px} .p-g dd{padding-top:8px;font-size:15px} }
.screen.wide .q p{max-width:64ch}

/* STEMS drawn like the card borders (user, 2026-10-11): the same hairline, one flat tone, and a plain outlined node with no halo.
   Applies to the hero cards on both sites and the landing labels on the Exchange. */
@media (min-width:901px){
  .p-cards.stem .p-card::before,html[data-path="venture"] .p-cards.n4 .p-card::before{width:.5px;min-width:.5px;background:rgba(var(--b),.42)}
  .p-cards.stem .p-card .tx::after,html[data-path="venture"] .p-cards.n4 .p-card .tx::after{width:9px;height:9px;margin-left:-4.5px;background:rgb(var(--ground));box-shadow:inset 0 0 0 .5px rgba(var(--b),.9)}
  .p-cards.stem .p-card:hover::before,.p-cards.stem .p-card.sel::before,html[data-path="venture"] .p-cards.n4 .p-card:hover::before,html[data-path="venture"] .p-cards.n4 .p-card.sel::before{background:rgba(var(--b),.9)}
  .p-cards.stem .p-card::after,html[data-path="venture"] .p-cards.n4 .p-card::after{box-shadow:inset 0 0 0 .5px rgba(var(--b),.22)}
}
.p-land::after{width:.5px;background:rgba(var(--b),.42)}
.p-land i{box-shadow:inset 0 0 0 .5px rgba(var(--b),.9)}

/* STEPS (user, 2026-10-11): the number sits right in the top right corner with no border; the explanation appears on hover */
.p-step em{right:0;top:0;width:40px;height:40px;border-radius:0;box-shadow:none;background:rgba(255,255,255,.08)}
@media (hover:hover) and (min-width:901px){
  .p-step > span{max-height:0;margin-top:0;opacity:0;overflow:hidden;translate:0 6px;transition:max-height .6s var(--ease),margin-top .6s var(--ease),opacity .35s var(--ease),translate .6s var(--ease)}
  .p-step:hover > span,.p-step:focus-within > span{max-height:7em;margin-top:10px;opacity:1;translate:0 0}
  .p-step b{transition:color var(--motion-illumination)} .p-step:hover b{color:var(--hi)}
  .p-step{cursor:none}
}
@media (max-width:900px){ .p-step em{right:0;top:0;width:34px;height:34px} }
/* STEPS: on hover the step's photograph comes up behind its text, toned to the pathway and dissolved toward the bottom */
.p-step{overflow:hidden}
.p-step:not(:last-child){overflow:visible}
.p-step .art{position:absolute;inset:0;margin:0;overflow:hidden;opacity:0;transition:opacity .6s var(--ease);-webkit-mask-image:linear-gradient(180deg,#000 10%,rgba(0,0,0,.45) 55%,transparent 88%);mask-image:linear-gradient(180deg,#000 10%,rgba(0,0,0,.45) 55%,transparent 88%)}
.p-step .art img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.8);scale:1.08;transition:scale 1.4s var(--ease)}
.p-step .art::after{content:"";position:absolute;inset:0;background:rgb(var(--a));mix-blend-mode:color;opacity:.55}
.p-step > b,.p-step > span,.p-step > .ms{position:relative;z-index:1}
.p-step em{z-index:2}
.p-step:hover .art,.p-step:focus-within .art{opacity:.6} .p-step:hover .art img{scale:1}
@media (hover:none),(max-width:900px){ .p-step .art{display:none} }
/* (user, 2026-10-11) no diamond on the line between step cards; the line itself is the cards' inner hairline */
.p-step:not(:last-child)::before{content:none}
.p-step:not(:last-child)::after{background:rgba(var(--b),.3)}

/* A PATHWAY'S OWN HERO (user, 2026-10-11): each pathway starts on a header hero, then scrolls through what we do, section by
   section, and ends on the questions. The hero is centred, large and quiet, with a cue to scroll. */
.screen.hero{align-content:center;text-align:center;padding-top:0}
.screen.hero .q{max-width:none;margin:0 auto}
.screen.hero .q h2{max-width:20ch;margin:0 auto;font-size:clamp(34px,min(4.6vw,8svh),70px);line-height:1.04}
.screen.hero .q p{max-width:52ch;margin:22px auto 0;font-size:17px}
.screen.hero .q::after{content:"Scroll";display:block;width:fit-content;margin:clamp(28px,7svh,64px) auto 0;padding-top:46px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  background:linear-gradient(180deg,rgba(var(--b),.9),rgba(var(--b),0)) 50% 0/1px 34px no-repeat;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{background-size:1px 0}55%{background-size:1px 34px}100%{background-size:1px 34px;opacity:.5}}
.screen.hero .sys{display:none}
.p-pillars.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-pillars.n3 .p-pil span{max-width:34ch}
@media (max-width:900px){ .screen.hero{align-content:start;padding-top:8svh} .screen.hero .q h2{font-size:clamp(30px,9vw,42px)} .screen.hero .q::after{content:"Continue below"} }
@media (prefers-reduced-motion:reduce){ .screen.hero .q::after{animation:none} }

/* CARDS (user, 2026-10-11): at rest a card is its picture, its title and "Explore". Resting on it (or choosing it) brings up
   the example line and its tags. On phones, where there is no hover, both are always shown. */
.p-card .tg{display:flex;flex-wrap:wrap;gap:6px}
.p-card .tg i{font-style:normal;padding:4px 9px;font-size:11.5px;letter-spacing:.02em;color:var(--hi);box-shadow:inset 0 0 0 .5px rgba(var(--b),.4)}
@media (hover:hover) and (min-width:901px){
  html .p-cards .p-card .l,html .p-cards .p-card .tg{max-height:0;min-height:0!important;margin-top:0!important;opacity:0;overflow:hidden;translate:0 6px;
    transition:max-height .6s var(--ease),margin-top .6s var(--ease),opacity .35s var(--ease),translate .6s var(--ease)}
  html .p-cards .p-card:hover .l,html .p-cards .p-card:focus-visible .l,html .p-cards .p-card.sel .l{max-height:4.6em;margin-top:8px!important;opacity:1;translate:0 0}
  html .p-cards .p-card:hover .tg,html .p-cards .p-card:focus-visible .tg,html .p-cards .p-card.sel .tg{max-height:5em;margin-top:12px!important;opacity:1;translate:0 0}
}
@media (max-width:900px){ .p-card .tg{margin-top:10px} }
@media (hover:hover) and (min-width:901px){
  /* when the text opens, the picture steps back so the words read cleanly */
  html .p-cards .p-card .art{transition:opacity .5s var(--ease)}
  html .p-cards .p-card:hover .art,html .p-cards .p-card:focus-visible .art,html .p-cards .p-card.sel .art{opacity:.3}
  html .p-cards .p-card:hover .l,html .p-cards .p-card:focus-visible .l,html .p-cards .p-card.sel .l{color:var(--paper)}
}
/* the funding curve (user, 2026-10-11): the marker, the lit line, the shaded area and the slider handle move as one.
   The marker used to ease into place 0.15s behind the rest. */
.p-curve .mk{transition:opacity var(--motion-illumination)}
/* seven fields: four across, two rows, a little tighter */
.p-pillars.n7{gap:clamp(14px,2.2svh,26px) clamp(18px,2.4vw,40px);margin-top:clamp(18px,4svh,44px)}
.p-pillars.n7 .p-pil{padding-top:14px} .p-pillars.n7 .p-pil b{margin-top:8px;font-size:clamp(19px,min(1.7vw,3.1svh),26px)} .p-pillars.n7 .p-pil span{margin-top:6px;font-size:14px;max-width:30ch}

/* JOURNEY: the venture-building motion graphic */
.p-jour{width:100%;margin-top:clamp(14px,3.4svh,40px)}
.p-jour .meters{display:flex;gap:clamp(20px,3vw,48px);max-width:620px}
.p-jour .meters p{flex:1;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.p-jour .meters i{display:block;height:3px;margin-top:9px;background:rgba(var(--b),.15)}
.p-jour .meters u{display:block;height:100%;background:var(--hi);transition:width 1.1s var(--ease)}
.p-jour .risk u{background:rgba(255,255,255,.5)}
.p-jour .track{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(8px,1.2vw,20px);margin-top:clamp(16px,3svh,28px);padding-bottom:36px}
.p-jour .gate{position:relative;min-height:clamp(88px,14svh,128px);padding:clamp(12px,1.3vw,18px);display:flex;flex-direction:column;justify-content:space-between;text-align:left;
  background-color:rgba(255,255,255,.035);opacity:.5;transition:opacity .7s var(--ease),background-color .7s var(--ease),box-shadow .7s var(--ease),translate var(--motion-selection)}
.p-jour .gate em{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);transition:color .5s}
.p-jour .gate b{font-family:var(--title);font-weight:200;font-size:clamp(16px,1.5vw,22px);line-height:1.1;letter-spacing:-.01em}
.p-jour .gate::before{content:"";position:absolute;left:50%;top:calc(100% + 22px);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:rgb(var(--ground));box-shadow:inset 0 0 0 1px rgba(var(--b),.45);background-image:none;transition:background-color .5s}
.p-jour .gate.done,.p-jour .gate.cur{opacity:1}
.p-jour .gate.done{box-shadow:inset 0 0 0 .5px rgba(var(--b),.55)} .p-jour .gate.done em{color:var(--c)} .p-jour .gate.done::before{background-color:var(--hi)}
.p-jour .gate.cur{background-color:rgba(var(--a),.16);box-shadow:inset 0 0 0 .5px var(--hi),0 0 40px -16px rgba(var(--a),.8);translate:0 -4px} .p-jour .gate.cur em{color:var(--hi)}
.p-jour .gate:hover{opacity:1}
.p-jour .rail,.p-jour .fill{position:absolute;bottom:14px;height:1px;background:rgba(var(--b),.28)}
.p-jour .fill{background:var(--hi);transition:width 1.1s var(--ease)}
.p-jour .orb{position:absolute;bottom:14px;width:12px;height:12px;margin:0 0 -6px -6px;border-radius:50%;background:rgb(var(--a));box-shadow:0 0 0 2px #fff,0 0 22px 2px rgba(var(--a),.9);transition:left 1.1s var(--ease)}
.p-jour .cap{min-height:3em;margin-top:6px;font-size:16px;color:var(--mute)} .p-jour .cap b{font-weight:500;color:var(--paper)}
@media (max-width:900px){ .p-jour .track{gap:5px} .p-jour .gate{min-height:76px;padding:8px} .p-jour .gate b{font-size:12px} .p-jour .gate em{font-size:9px;letter-spacing:.08em} .p-jour .cap{font-size:15px} }

/* TEAM: who is on the work, and when */
.p-team{display:grid;grid-template-columns:minmax(110px,210px) repeat(var(--n),minmax(0,1fr));column-gap:clamp(6px,.9vw,14px);row-gap:clamp(7px,1.3svh,12px);align-items:center;width:100%;margin-top:clamp(14px,3.4svh,40px)}
.p-team .ph{padding-bottom:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);border-bottom:.5px solid rgba(var(--b),.3)}
.p-team .nm{font-size:15px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .p-team .nm.core{color:var(--paper)}
.p-team .bar{display:block;height:clamp(20px,3.4svh,30px);border-radius:2px;background:rgba(var(--a),.26);box-shadow:inset 0 0 0 .5px rgba(var(--b),.55);transform-origin:0 50%;animation:teamIn 1s var(--ease) both;animation-delay:calc(.5s + var(--i) * .16s)}
.p-team .bar.core{background:linear-gradient(90deg,var(--hi),rgba(var(--a),.55));box-shadow:none}
@keyframes teamIn{from{transform:scaleX(0);opacity:0}}
@media (max-width:900px){ .p-team{grid-template-columns:104px repeat(var(--n),minmax(0,1fr))} .p-team .ph{font-size:8.5px;letter-spacing:.04em} .p-team .nm{font-size:12.5px} }
@media (prefers-reduced-motion:reduce){ .p-team .bar{animation:none} }

/* TEAM bars (renamed from .bar) */
.p-team .tb{display:block;height:clamp(20px,3.4svh,30px);border-radius:2px;background:rgba(var(--a),.26);box-shadow:inset 0 0 0 .5px rgba(var(--b),.55);transform-origin:0 50%;animation:teamIn 1s var(--ease) both;animation-delay:calc(.5s + var(--i) * .16s)}
.p-team .tb.core{background:linear-gradient(90deg,var(--hi),rgba(var(--a),.55));box-shadow:none}
@media (prefers-reduced-motion:reduce){ .p-team .tb{animation:none} }

/* JOURNEY as cards you travel through: the card you are on opens wide and tells you what happens there */
.p-jour .track{display:flex}
.p-jour .gate{flex:1 1 0;min-width:0;min-height:clamp(140px,24svh,210px);justify-content:flex-start;transition:flex-grow .9s var(--ease),opacity .7s var(--ease),background-color .7s var(--ease),box-shadow .7s var(--ease),translate var(--motion-selection)}
.p-jour .gate.cur{flex-grow:2.6}
.p-jour .gate b{margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.p-jour .gate span{display:block;max-height:0;opacity:0;overflow:hidden;font-size:14.5px;line-height:1.4;color:var(--mute);transition:max-height .7s var(--ease),opacity .4s var(--ease),margin-top .7s var(--ease)}
.p-jour .gate.cur span{max-height:6em;margin-top:8px;opacity:1;transition:max-height .9s var(--ease) .15s,opacity .6s var(--ease) .35s,margin-top .9s var(--ease) .15s}
.p-jour .gate.cur b{font-size:clamp(20px,1.9vw,28px);white-space:normal}
.p-jour .cap{min-height:1.5em;font-size:14px}
.p-jour .fill,.p-jour .orb{transition:none}
@media (max-width:900px){
  .p-jour .track{flex-direction:column;padding-bottom:0;gap:6px} .p-jour .rail,.p-jour .fill,.p-jour .orb,.p-jour .gate::before{display:none}
  .p-jour .gate{min-height:48px;flex:none;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 12px;padding:12px 14px} .p-jour .gate b{margin:0;font-size:17px} .p-jour .gate em{font-size:10px} .p-jour .gate span{flex-basis:100%}
  .p-jour .gate.cur{translate:none} .p-jour .gate.cur b{font-size:19px}
}

/* CARDS (user, 2026-10-11): "Explore" and its arrow sit bottom right; the arrow has no box */
.p-card .st{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.p-card .st svg{width:18px;height:18px;padding:0;box-shadow:none;background:none!important;color:inherit!important}
.p-card:hover .st svg,.p-card:focus-visible .st svg,.p-card.sel .st svg{translate:5px 0}

/* CARDS (user, 2026-10-11): the picture stays on hover, and "Explore" is pinned in the bottom right corner on both sites */
.p-card .st{position:absolute!important;right:clamp(14px,1.4vw,20px);bottom:clamp(12px,1.3vw,16px);z-index:3;margin:0!important}
.p-card .tx{padding-bottom:clamp(44px,3.6vw,52px)!important}
@media (hover:hover) and (min-width:901px){
  html .p-cards .p-card:hover .art,html .p-cards .p-card:focus-visible .art,html .p-cards .p-card.sel .art{opacity:1}
  /* (user, later 2026-10-11) on hover the picture fades away into the card’s black so the words read; the chosen card keeps its picture for the zoom */
  html .p-cards .p-card .art{transition:opacity .6s var(--ease)}
  html .p-cards .p-card:not(.sel):hover .art,html .p-cards .p-card:not(.sel):focus-visible .art{opacity:.07}
  /* the picture keeps its top; a soft shade rises behind the words so they read */
  html .p-cards .p-card .art{inset:0!important}
  html .p-cards .p-card .art::after{transition:opacity .5s var(--ease)}
  html .p-cards .p-card:hover .art::after,html .p-cards .p-card:focus-visible .art::after,html .p-cards .p-card.sel .art::after{background:linear-gradient(180deg,rgba(var(--ground),.05) 0%,rgba(var(--ground),.55) 30%,rgba(var(--ground),.9) 62%,rgb(var(--ground)))}
}

/* JOURNEY cards carry a photograph each (user, 2026-10-11): faint on the stages ahead, clear on the one you are on */
.p-jour .gate .art{position:absolute;inset:0;margin:0;overflow:hidden;opacity:.28;transition:opacity .8s var(--ease);-webkit-mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.5) 52%,transparent 86%);mask-image:linear-gradient(180deg,#000 8%,rgba(0,0,0,.5) 52%,transparent 86%)}
.p-jour .gate .art img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.85);scale:1.06;transition:scale 1.6s var(--ease)}
.p-jour .gate .art::after{content:"";position:absolute;inset:0;background:rgb(var(--a));mix-blend-mode:color;opacity:.55}
.p-jour .gate > em,.p-jour .gate > b,.p-jour .gate > span{position:relative;z-index:1}
.p-jour .gate.done .art{opacity:.45} .p-jour .gate.cur .art{opacity:.8} .p-jour .gate.cur .art img{scale:1}
.p-jour .gate em{text-shadow:0 1px 8px rgba(var(--ground),.9)}
@media (max-width:900px){ .p-jour .gate .art{-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000)} }

/* JOURNEY cards, fuller (user, 2026-10-11): what we do at the stage, what you get, and the work involved as tags */
.p-jour .gate{min-height:clamp(180px,31svh,270px)}
.p-jour .gate.cur{flex-grow:3.2}
.p-jour .gate.cur span{max-height:9em;font-size:15px;color:var(--paper)}
.p-jour .gate .tg{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .4s var(--ease),margin-top .7s var(--ease)}
.p-jour .gate.cur .tg{max-height:5em;margin-top:12px;opacity:1;transition:max-height .9s var(--ease) .2s,opacity .6s var(--ease) .45s,margin-top .9s var(--ease) .2s}
.p-jour .gate .tg i{font-style:normal;padding:4px 9px;font-size:11.5px;letter-spacing:.02em;white-space:nowrap;color:var(--hi);box-shadow:inset 0 0 0 .5px rgba(var(--b),.45);background:rgba(var(--ground),.4)}
.p-jour .gate .art{-webkit-mask-image:linear-gradient(180deg,#000 4%,rgba(0,0,0,.4) 44%,transparent 74%);mask-image:linear-gradient(180deg,#000 4%,rgba(0,0,0,.4) 44%,transparent 74%)}
@media (max-width:900px){ .p-jour .gate{min-height:48px} .p-jour .gate .tg{flex-basis:100%} }

/* JOURNEY (user, 2026-10-11): a stage is its number, a line icon and its name. The photograph is not there at rest: it comes in only
   under the pointer (or keyboard focus); on touch screens, which have no hover, the stage you tapped shows it. Icons are Google
   Material Symbols Outlined at weight 200 / grade -25 (fonts/MaterialSymbols-one.woff2), drawn bare: no box, no rim, no fill. */
html .p-jour .gate .art,html .p-jour .gate.done .art,html .p-jour .gate.cur .art{opacity:0}
html .p-jour .gate:hover .art,html .p-jour .gate:focus-visible .art{opacity:.8}
@media (hover:none){ html .p-jour .gate.cur .art{opacity:.8} }
.p-jour .gate .ms{position:relative;z-index:1;margin-top:auto;font-size:clamp(26px,2.2vw,34px);color:var(--c);background:none;box-shadow:none;border:0;padding:0;transition:color .5s var(--ease)}
.p-jour .gate .ms + b{margin-top:12px}
.p-jour .gate.done .ms{color:var(--hi)} .p-jour .gate.cur .ms{color:var(--paper)}
@media (max-width:900px){ .p-jour .gate .ms{margin:0;font-size:20px;align-self:center} .p-jour .gate .ms + b{margin-top:0} }
/* JOURNEY: the travelling light sits above the stage pins, and the pin of the stage it is on steps aside, so no small square shows on it */
.p-jour .orb{z-index:3}
.p-jour .gate.cur::before{opacity:0}
/* JOURNEY: with six stages the names wrap onto two lines instead of being cut off ("Model & dy...") */
@media (min-width:901px){
  .p-jour .gate:not(.cur) b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font-size:clamp(14px,1.25vw,18px);line-height:1.15}
}

/* TEAM chart, animated (user, 2026-10-11): navy frosted bars with a faint neon edge. Each bar draws in, then a soft light
   travels along it in turn, so the chart reads as work moving through the stages. Resting on a bar lifts it. */
.p-team .tb{position:relative;overflow:hidden;background:rgba(10,20,62,.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 0 0 .5px rgba(96,152,255,.38),0 0 22px -14px rgba(96,152,255,.9);transition:box-shadow .4s var(--ease),background .4s var(--ease),translate .4s var(--ease)}
.p-team .tb::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(120,170,255,.4),transparent);translate:-110% 0;animation:teamSweep 5.2s var(--ease) infinite;animation-delay:calc(1.6s + var(--i) * .5s)}
@keyframes teamSweep{0%{translate:-110% 0}45%,100%{translate:320% 0}}
.p-team .tb:hover{translate:0 -2px;background:rgba(14,30,92,.7);box-shadow:inset 0 0 0 .5px rgba(96,152,255,.95),0 0 30px -10px rgba(96,152,255,.95)}
.p-team .tb.core{background:linear-gradient(90deg,rgba(220,232,255,.9),rgba(96,152,255,.5) 55%,rgba(20,40,120,.6));box-shadow:0 0 30px -12px rgba(96,152,255,.95)}
.p-team .tb.core::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.p-team .ph{position:relative;border-bottom-color:rgba(96,152,255,.3)}
.p-team .ph:not(:first-child)::after{content:"";position:absolute;left:0;bottom:-.5px;height:1px;width:100%;background:rgba(120,170,255,.95);transform-origin:0 50%;transform:scaleX(0);animation:teamPh 5.2s var(--ease) infinite}
.p-team .ph:nth-child(3)::after{animation-delay:1.3s} .p-team .ph:nth-child(4)::after{animation-delay:2.6s} .p-team .ph:nth-child(5)::after{animation-delay:3.9s}
@keyframes teamPh{0%{transform:scaleX(0);opacity:1}22%{transform:scaleX(1);opacity:1}34%,100%{transform:scaleX(1);opacity:0}}
html[data-path="exchange"] .p-team .tb{background:rgba(40,32,14,.5);box-shadow:inset 0 0 0 .5px rgba(var(--b),.4)}
@media (prefers-reduced-motion:reduce){ .p-team .tb::after,.p-team .ph::after{animation:none} }

/* SMALL CAPITAL LABELS AND NUMBERS (user, 2026-10-11): never bold. Light weight, in a gradient from white to the pathway's
   light tone (white to light blue on Venture, white to light gold on the Exchange). */
.q .k,.p-card .n,.p-band em,.p-read b,.p-curve .ask > span,.p-seal .k,.p-land em,.p-pan em,.route .lab em,.hd-k,.p-jour .gate em,.p-jour .meters p span,.p-pil em,.p-stop em,.p-lv .tip em,.p-g dt,.p-team .ph,.p-step em{
  font-weight:300!important;letter-spacing:.18em}
.q .k,.p-card .n,.p-band em,.p-read b,.p-curve .ask > span,.p-seal .k,.p-land em,.p-pan em,.route .lab em,.hd-k,.p-jour .gate em,.p-jour .meters p span,.p-pil em,.p-stop em,.p-lv .tip em,.p-g dt{
  width:fit-content;background:linear-gradient(90deg,#fff,var(--c));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none}
.p-team .ph{color:var(--hi)} .p-step em{color:#fff}
.p-jour .gate em{opacity:.45;transition:opacity .5s} .p-jour .gate.done em,.p-jour .gate.cur em{opacity:1}
.p-stop em{margin-left:auto;margin-right:auto;opacity:.6} .p-stop.sel em,.p-stop.past em{opacity:1}

/* TEAM: people on the bars */
.p-team .tb .pp{position:absolute;left:6px;top:50%;z-index:1;display:flex;translate:0 -50%}
.p-team .tb .pp svg{width:clamp(18px,3svh,26px);height:clamp(18px,3svh,26px);margin-right:-6px;padding:3px;border-radius:50%;fill:rgba(238,240,246,.82);background:rgba(var(--ground),.9);box-shadow:inset 0 0 0 .5px rgba(var(--b),.7)}
.p-team .tb.core .pp svg{fill:rgb(var(--ground));background:rgba(255,255,255,.9);box-shadow:none}
/* "Powered by specialists from": a small sliding strip, top right, fading at both ends */
.p-cred{position:absolute;right:var(--gut);top:clamp(8px,4svh,46px);width:min(360px,34vw);text-align:right}
.p-cred > span{display:block;font-size:11px;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.p-cred .mq{margin-top:12px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.p-cred .tr{display:flex;align-items:center;gap:34px;width:max-content;animation:credSlide 26s linear infinite}
.p-cred b{flex:none;display:flex;align-items:center;height:26px;font-family:var(--title);font-weight:300;font-size:15px;letter-spacing:-.01em;white-space:nowrap;color:rgba(238,240,246,.72)}
.p-cred b img{display:block;width:auto;filter:brightness(0) invert(1);opacity:.72}   /* logos in a soft white */
.p-cred:hover .tr{animation-play-state:paused}
@keyframes credSlide{to{transform:translateX(calc(-50% - 17px))}}
@media (max-width:900px){ .p-cred{position:static;width:auto;margin-top:22px;text-align:left} }
@media (prefers-reduced-motion:reduce){ .p-cred .tr{animation:none} }

/* TEAM: stock portraits on the bars, and the "your team" row as four boxes of what you bring */
.p-team .tb{overflow:visible}
.p-team .tb::after{display:none}
.p-team .tb .pp{left:-1px}
.p-team .tb .pp img{display:block;width:clamp(26px,4.4svh,38px);height:clamp(26px,4.4svh,38px);border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.05);box-shadow:0 0 0 1.5px rgb(var(--ground)),0 0 0 2px rgba(var(--b),.7);transition:filter .4s,scale .4s var(--ease)}
.p-team .tb:hover .pp img{filter:none;scale:1.12}
.p-team .tb.box{display:grid;place-items:center;height:clamp(28px,4.6svh,40px);background:rgba(255,255,255,.06)!important;box-shadow:inset 0 0 0 .5px rgba(var(--b),.5)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.p-team .tb.box b{font-weight:300;font-size:13.5px;letter-spacing:.02em;color:var(--paper)}
.p-team{row-gap:clamp(10px,1.8svh,16px)}
.p-cred b img{max-width:92px;object-fit:contain}

/* TEAM as pipelines (user, 2026-10-11): each specialist is dropped into their pipeline at the stage they join, travels along
   it, and leaves at the end; the pipe fills behind them. It loops, one after another. */
.p-team .tb.box b{font-style:normal}
.p-cred b img{max-width:130px}
.p-team .tb:not(.box){--d:calc(1.2s + var(--i) * .7s)}
.p-team .tb:not(.box)::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(96,152,255,.05),rgba(96,152,255,.34));transform-origin:0 50%;transform:scaleX(0);animation:pipeFill 7s var(--ease) var(--d) infinite}
.p-team .tb:not(.box) .pp{left:0;animation:pipeRide 7s var(--ease) var(--d) infinite both}
@keyframes pipeRide{0%{left:0;transform:translateY(-46px) scale(.6);opacity:0}10%{left:0;transform:none;opacity:1}16%{left:0}80%{left:calc(100% - clamp(26px,4.4svh,38px))}92%{left:calc(100% - clamp(26px,4.4svh,38px));opacity:1;transform:none}100%{left:calc(100% - clamp(26px,4.4svh,38px));opacity:0;transform:translateY(10px) scale(.8)}}
@keyframes pipeFill{0%,16%{transform:scaleX(0);opacity:1}80%,92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.p-team .tb:not(.box):hover .pp,.p-team .tb:not(.box):hover::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .p-team .tb:not(.box) .pp,.p-team .tb:not(.box)::before{animation:none} .p-team .tb:not(.box)::before{transform:none;opacity:.6} }

/* LANES: the fractional team, redrawn. Lanes down the side, stages across, people as glass pipelines with a portrait and a title. */
.p-cred{position:static;width:min(560px,100%);margin:clamp(6px,1.6svh,16px) 0 0;text-align:left;justify-self:start}
.p-cred .mq{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.screen.wide .sys:has(.p-lanes){display:block}
.p-lanes{display:grid;grid-template-columns:minmax(96px,170px) repeat(var(--n),minmax(0,1fr));column-gap:clamp(6px,.9vw,14px);align-items:center;width:100%;margin-top:clamp(14px,3.2svh,34px)}
.p-lanes .ph{padding-bottom:12px;font-size:11px;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--hi)}
.p-lanes .rule{grid-column:1/-1;align-self:start;height:.5px;background:rgba(var(--b),.22)}
.p-lanes .ln{grid-column:1;padding:clamp(12px,2.2svh,20px) 0;font-family:var(--title);font-weight:200;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.01em;color:var(--paper)}
.p-lanes .pipe{position:relative;display:flex;align-items:center;gap:10px;min-width:0;height:clamp(36px,5.6svh,46px);padding:0 14px 0 4px;border-radius:999px;overflow:hidden;transform-origin:0 50%;
  background:rgba(var(--fill,5,10,30),.6);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 0 0 .5px rgba(var(--b),.3);
  animation:laneIn .9s var(--ease) both;animation-delay:calc(.5s + var(--i) * .14s);transition:box-shadow .4s var(--ease),translate .4s var(--ease)}
.p-lanes .pipe::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--a),.42),rgba(var(--a),.06) 70%,transparent);transform-origin:0 50%;animation:laneFill 1.4s var(--ease) both;animation-delay:calc(.8s + var(--i) * .14s)}
.p-lanes .pipe::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);translate:-110% 0;animation:teamSweep 6s var(--ease) infinite;animation-delay:calc(2.4s + var(--i) * .45s)}
.p-lanes .pipe img,.p-lanes .pipe svg{position:relative;z-index:1;flex:none;width:clamp(28px,4.6svh,38px);height:clamp(28px,4.6svh,38px);border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.05);box-shadow:0 0 0 1px rgba(var(--b),.6);
  animation:laneDrop .8s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.7s + var(--i) * .14s);transition:filter .4s}
.p-lanes .pipe svg{padding:5px;fill:rgba(238,240,246,.8);background:rgb(var(--ground))}
.p-lanes .pipe b{position:relative;z-index:1;min-width:0;font-weight:300;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--paper)}
.p-lanes .pipe:hover{translate:0 -2px;box-shadow:inset 0 0 0 .5px rgba(var(--b),.85),0 0 10px -4px rgba(var(--a),.6)} .p-lanes .pipe:hover img{filter:none}
@keyframes laneIn{from{opacity:0;transform:scaleX(.2)}}
@keyframes laneFill{from{transform:scaleX(0)}}
@keyframes laneDrop{from{opacity:0;transform:translateY(-34px) scale(.5)}}
@media (max-width:900px){ .p-lanes{grid-template-columns:74px repeat(var(--n),minmax(0,1fr));column-gap:4px} .p-lanes .ph{font-size:8px;letter-spacing:.04em} .p-lanes .ln{font-size:14px} .p-lanes .pipe{padding:0 6px 0 3px;gap:5px} .p-lanes .pipe b{font-size:10.5px} }
@media (prefers-reduced-motion:reduce){ .p-lanes .pipe,.p-lanes .pipe::before,.p-lanes .pipe::after,.p-lanes .pipe img{animation:none} }
.p-cred small{display:block;margin-top:8px;font-size:11px;line-height:1.4;color:var(--faint)}

/* EVERY SMALL CAPITAL HEADER IS EXTRA LIGHT (user, 2026-10-11, said twice): the title face at its lightest weight, on all of them,
   including the chart's stage headings and the strip label. */
.q .k,.p-card .n,.p-band em,.p-read b,.p-curve .ask > span,.p-seal .k,.p-land em,.p-pan em,.route .lab em,.hd-k,.p-jour .gate em,.p-jour .meters p span,.p-pil em,.p-stop em,.p-lv .tip em,.p-g dt,.p-team .ph,.p-step em,
.p-lanes .ph,.p-cred > span,.p-form .step,.screen.hero .q::after{font-family:var(--title)!important;font-weight:200!important;font-size:12px;letter-spacing:.2em}
/* the sentence and the logos are one block (user, 2026-10-11): no label between them, the logos sit straight under the sentence */
.p-cred > span:empty{display:none}
.screen.wide:has(.p-lanes){row-gap:clamp(10px,1.6svh,16px)}
.p-cred{margin-top:0} .p-cred .mq{margin-top:0}
/* logo strip: even optical size and one even gap */
.p-cred .tr{gap:44px} .p-cred b{height:32px} .p-cred b img{max-width:none}
@keyframes credSlide{to{transform:translateX(calc(-50% - 22px))}}
.p-cred{width:min(640px,100%)}

/* LANES, the story (user, 2026-10-11): each specialist enters at their stage to solve an issue. The portrait drops in, the pipe
   fills behind them, and the issue at the far end is struck through and ticked. It plays in turn and repeats. */
.p-lanes .pipe{--t:11s;--d:calc(.6s + var(--i) * .55s);animation:none}
.p-lanes .pipe::before{animation:laneFill2 var(--t) var(--ease) var(--d) infinite both}
.p-lanes .pipe::after{display:none}
.p-lanes .pipe img,.p-lanes .pipe svg{animation:laneDrop2 var(--t) cubic-bezier(.3,1.4,.5,1) var(--d) infinite both}
.p-lanes .pipe b{flex:none}
.p-lanes .iss{position:relative;z-index:1;display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto;padding-left:12px;font-size:12.5px;white-space:nowrap;overflow:hidden;color:var(--mute);animation:issText var(--t) linear var(--d) infinite both}
.p-lanes .iss::after{content:"";position:absolute;left:32px;right:0;top:50%;height:1px;background:currentColor;transform-origin:0 50%;animation:issLine var(--t) var(--ease) var(--d) infinite both}
.p-lanes .iss i{flex:none;position:relative;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(var(--b),.7);animation:issDot var(--t) var(--ease) var(--d) infinite both}
.p-lanes .iss i::after{content:"";position:absolute;left:4.5px;top:2.5px;width:3.5px;height:6.5px;border:solid rgb(var(--ground));border-width:0 1.5px 1.5px 0;rotate:45deg}
@keyframes laneDrop2{0%{opacity:0;transform:translateY(-34px) scale(.5)}7%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes laneFill2{0%,6%{transform:scaleX(0);opacity:1}26%,94%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes issText{0%,24%{color:var(--paper)}30%,94%{color:var(--faint)}100%{color:var(--paper)}}
@keyframes issLine{0%,24%{transform:scaleX(0)}31%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes issDot{0%,24%{background:transparent}30%,94%{background:var(--hi);box-shadow:none}100%{background:transparent}}
.p-lanes .pipe:hover::before,.p-lanes .pipe:hover img,.p-lanes .pipe:hover .iss,.p-lanes .pipe:hover .iss::after,.p-lanes .pipe:hover .iss i{animation-play-state:paused}
.p-cred small{display:none}
@media (max-width:900px){ .p-lanes .iss{display:none} }
@media (prefers-reduced-motion:reduce){ .p-lanes .pipe::before,.p-lanes .pipe img,.p-lanes .iss,.p-lanes .iss::after,.p-lanes .iss i{animation:none} }
/* (user, 2026-10-11) the pipelines are glass: a clear frosted body with a light top edge, and the same gradient filling inside it */
.p-lanes .pipe{background:rgba(255,255,255,.055);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -8px 14px -10px rgba(var(--a),.5)}
.p-lanes .pipe::before{background:linear-gradient(90deg,rgba(var(--a),.5),rgba(var(--a),.14) 70%,rgba(var(--a),.04))}
.p-lanes .pipe:hover{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.3),0 0 10px -4px rgba(var(--a),.6)}
/* (user, 2026-10-11) a lighter fill in the pipelines, and air between the headline, the logos and the chart */
.p-lanes .pipe::before{background:linear-gradient(90deg,rgba(var(--b),.3),rgba(var(--b),.1) 70%,rgba(var(--b),.03))}
.p-lanes .pipe{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.2)}
.screen.wide:has(.p-lanes) .q p{margin-top:clamp(18px,3.4svh,34px)}
.screen.wide:has(.p-lanes){row-gap:clamp(14px,2.4svh,24px)}
.p-lanes{margin-top:clamp(26px,5.5svh,58px)}
.p-lanes .ln{padding:clamp(10px,1.9svh,18px) 0}
/* (user, 2026-10-11) clean spacing: the chart is lighter on the eye. Slimmer pipelines, more air between lanes, quieter rules
   and labels, and the whole chart held narrower than the screen. */
.p-lanes{max-width:1120px;column-gap:clamp(10px,1.4vw,22px)}
.p-lanes .pipe{height:clamp(30px,4.6svh,36px);padding:0 14px 0 3px;gap:10px}
.p-lanes .pipe img,.p-lanes .pipe svg{width:clamp(24px,3.8svh,30px);height:clamp(24px,3.8svh,30px)}
.p-lanes .pipe b{font-size:13px} .p-lanes .iss{font-size:12px}
.p-lanes .ln{padding:clamp(15px,2.7svh,24px) 0;font-size:clamp(16px,1.35vw,20px);color:var(--mute)}
.p-lanes .rule{background:rgba(var(--b),.12)}
.p-lanes .ph{padding-bottom:16px;color:var(--mute)}
.p-cred{width:min(520px,100%)} .p-cred .tr{gap:40px} .p-cred b{height:28px} .p-cred b img{scale:.86;opacity:.6}
@keyframes credSlide{to{transform:translateX(calc(-50% - 20px))}}
/* (user, 2026-10-11: "more transparent frozen glass", "simplicity is efficiency") the pipelines are nearly clear frosted glass:
   a faint body, a hairline edge, and only a whisper of fill. The chart lines up with the headline. */
.p-lanes{margin-left:0;margin-right:auto}
.p-lanes .pipe{background:rgba(255,255,255,.028);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}
.p-lanes .pipe::before{background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 70%,transparent)}
.p-lanes .pipe:hover{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.38)}
.p-lanes .pipe img,.p-lanes .pipe svg{box-shadow:none}
/* LANES, fit pass (2026-10-12). A pipeline that covers one stage is too short for a title and an issue: there the issue keeps its
   tick and drops its words (the words stay in the tooltip). On phones the chart cannot be read by position, so each lane becomes
   a heading with its specialists side by side, and the stages are written under each title. */
.p-lanes .when{display:none}
.p-lanes .pipe{container-type:inline-size}
@container (max-width:270px){ .p-lanes .iss{gap:0;padding-left:8px;font-size:0} .p-lanes .iss::after{display:none} }
@media (max-width:700px){
  .p-lanes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;margin-top:clamp(16px,3svh,28px)}
  .p-lanes .ph,.p-lanes .rule{display:none}
  .p-lanes .ln{grid-column:1/-1!important;grid-row:auto!important;padding:clamp(10px,1.8svh,16px) 0 6px;font-family:var(--title);font-weight:200;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
  .p-lanes .ln:first-of-type{padding-top:0}
  .p-lanes .pipe{grid-column:auto!important;grid-row:auto!important;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:8px;row-gap:1px;height:clamp(38px,5.4svh,44px);padding:0 10px 0 4px}
  .p-lanes .pipe img,.p-lanes .pipe svg{grid-row:1/3;align-self:center;width:30px;height:30px}
  .p-lanes .pipe b{font-size:11.5px;line-height:1.15}
  .p-lanes .when{position:relative;z-index:1;display:block;min-width:0;font-size:9.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mute)}
}

/* LIST, look "focus" (2026-10-12): a focus accordion. See ui.list in parts.js. */
.p-list.focus{position:relative;max-width:700px}
.p-list.focus .mk{position:absolute;left:0;top:0;z-index:2;width:1.5px;height:0;background:var(--hi);opacity:0;pointer-events:none;transition:translate .55s var(--ease),opacity .35s var(--ease)}
.p-list.focus .p-row,.p-list.focus .p-row:hover,.p-list.focus .p-row:focus-visible,.p-list.focus .p-row.sel{padding-left:20px}
.p-list.focus .p-row{grid-template-columns:44px minmax(0,1fr) auto 30px;column-gap:10px;min-height:0;padding-top:clamp(15px,2.5svh,24px);padding-bottom:clamp(15px,2.5svh,24px);padding-right:4px;transition:opacity .45s var(--ease),background-color .45s var(--ease)}
.p-list.focus .p-row em{grid-row:1;grid-column:1;align-self:center}
.p-list.focus .p-row b{grid-row:1;grid-column:2;color:rgba(255,255,255,.82);transition:color .4s var(--ease)}
.p-list.focus .p-row .l{grid-row:2;grid-column:2;max-height:0;margin-top:0;opacity:0;overflow:hidden;translate:0 8px;color:var(--mute);transition:max-height .55s var(--ease),margin-top .55s var(--ease),opacity .4s var(--ease),translate .55s var(--ease)}
.p-list.focus .p-row .art{grid-row:1/3;grid-column:3;position:relative;display:block;width:0;height:0;overflow:hidden;opacity:0;transition:width .55s var(--ease),height .55s var(--ease),opacity .45s var(--ease),margin .55s var(--ease)}
.p-list.focus .p-row .art img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.86);scale:1.14;transition:scale 1.2s var(--ease)}
.p-list.focus .p-row .art::before{content:"";position:absolute;inset:0;z-index:1;background:rgb(var(--a));mix-blend-mode:color;opacity:.55}
/* corner marks on the photograph, as on the cards */
.p-list.focus .p-row .art::after{content:"";position:absolute;inset:0;z-index:2;--k:var(--hi);
  background:linear-gradient(var(--k),var(--k)) left top/10px 1px no-repeat,linear-gradient(var(--k),var(--k)) left top/1px 10px no-repeat,linear-gradient(var(--k),var(--k)) right top/10px 1px no-repeat,linear-gradient(var(--k),var(--k)) right top/1px 10px no-repeat,
    linear-gradient(var(--k),var(--k)) left bottom/10px 1px no-repeat,linear-gradient(var(--k),var(--k)) left bottom/1px 10px no-repeat,linear-gradient(var(--k),var(--k)) right bottom/10px 1px no-repeat,linear-gradient(var(--k),var(--k)) right bottom/1px 10px no-repeat;
  box-shadow:inset 0 0 0 .5px rgba(var(--b),.22)}
.p-list.focus .p-row .st{grid-row:1/3;grid-column:4;align-self:center;display:grid;place-items:center;width:30px;height:30px;color:var(--paper);box-shadow:inset 0 0 0 .5px rgba(var(--b),.3);transition:background-color .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease)}
.p-list.focus .p-row .st svg{grid-area:1/1;width:15px;height:15px;opacity:0;translate:-4px 0;transition:opacity .35s var(--ease),translate .45s var(--ease),scale .45s var(--ease)}
.p-list.focus .p-row .st .tk{translate:0 0;scale:.6}
.p-list.focus .p-row.open{background-color:rgba(var(--a),.07)}
.p-list.focus .p-row.open b{color:#fff}
.p-list.focus .p-row.open .l{max-height:3.2em;margin-top:7px;opacity:1;translate:0 0}
.p-list.focus .p-row.open .art{width:clamp(120px,12.5vw,184px);height:clamp(74px,11.5svh,104px);margin-left:14px;margin-right:8px;opacity:1}
.p-list.focus .p-row.open .art img{scale:1}
.p-list.focus .p-row.open .st{box-shadow:inset 0 0 0 .5px rgba(var(--b),.75)}
.p-list.focus .p-row.open .st svg:not(.tk){opacity:1;translate:0 0}
.p-list.focus .p-row.sel .st{background-color:var(--hi);box-shadow:none;color:#06070c}
.p-list.focus .p-row.sel .st svg:not(.tk){opacity:0;translate:4px 0}
.p-list.focus .p-row.sel .st .tk{opacity:1;scale:1}
.p-list.focus.lit .p-row:not(.open){opacity:.42}
.p-list.focus.lit .p-row.open,.p-list.focus .p-row.sel.open{opacity:1}
.p-list.focus.lit .p-row.sel:not(.open){opacity:.7}
/* touch and narrow screens: nothing depends on hover. Every line is shown, the photograph is left out, the tick still marks the choice */
@media (hover:none),(max-width:900px){
  .p-list.focus .p-row .l{max-height:none;margin-top:5px;opacity:1;translate:0 0}
  .p-list.focus .p-row .art{display:none}
  .p-list.focus.lit .p-row:not(.open){opacity:.6}
  .p-list.focus .p-row,.p-list.focus .p-row:hover,.p-list.focus .p-row.sel{padding-left:14px}
}
@media (prefers-reduced-motion:reduce){ .p-list.focus .mk,.p-list.focus .p-row *{transition:none!important} }
/* the open row: title and line sit together beside the photograph; the list keeps its place while rows open (min-height set in ui.list) */
.p-list.focus .p-row b{align-self:end} .p-list.focus .p-row .l{align-self:start}
.p-list.focus .p-row .st .tk{width:17px;height:17px}
.p-list.focus.lit .p-row.sel:not(.open){opacity:.85}
.p-list.focus .p-row.sel .st .tk{scale:1.25}
/* (user, 2026-10-12) the logo row runs the whole line, as wide as the chart under it, and no sentence sits above it. The strip
   holds four sets of the logos so the row stays full while it slides. */
.p-cred{width:100%;max-width:1120px;margin-top:clamp(8px,1.8svh,18px)}
.p-cred .tr{gap:56px;animation-duration:60s}
.p-cred .mq{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
@keyframes credSlide{to{transform:translateX(calc(-50% - 28px))}}

/* icons on the pathway cards (user, 2026-10-12): Material Symbols at the thin weight (200), bare, the same size and colour as on the steps and stages */
.p-card .ms{display:block;margin-bottom:12px;font-size:clamp(26px,2.2vw,34px);color:var(--c)}
@media (max-width:900px){ .p-card .ms{font-size:26px;margin-bottom:8px} }

/* LANES, the chart explains itself (user, 2026-10-12: "easily understood ON THE GRAPH"). Stages are numbered and point one way;
   a hairline drops from each stage so a pipeline's start and end can be read off; a key sits under the chart; and whatever is
   under the pointer (a name, a stage, a lane) lights its part of the chart, quiets the rest, and is said in words in .say. */
.p-lanes{--cg:clamp(10px,1.4vw,22px);column-gap:var(--cg)}
.p-lanes .ph{position:relative;display:flex;align-items:baseline;gap:9px;margin:0;border:0;background:none;text-align:left;text-transform:uppercase;transition:color .35s var(--ease)}
.p-lanes button.ph{cursor:pointer}
.p-lanes .ph i{font-style:normal;opacity:.5}
.p-lanes .ph.ax i{opacity:.7}
.p-lanes button.ph::after{content:"";position:absolute;left:0;right:0;bottom:-.5px;height:1px;background:var(--hi);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.p-lanes .ph.on,.p-lanes button.ph:hover,.p-lanes button.ph:focus-visible{color:var(--paper);outline:0}
.p-lanes .ph.on::after{transform:none}
.p-lanes .col{align-self:stretch;margin-left:calc(var(--cg) / -2);border-left:.5px solid rgba(var(--b),.1);pointer-events:none;transition:background .4s var(--ease),border-color .4s var(--ease)}
.p-lanes .col.on{border-left-color:rgba(var(--b),.32);background:linear-gradient(180deg,rgba(var(--b),.07),rgba(var(--b),.015))}
.p-lanes .ln{cursor:default;transition:color .35s var(--ease),opacity .35s var(--ease)}
.p-lanes .ln.on{color:var(--paper)}
.p-lanes .pipe{cursor:pointer;transition:opacity .35s var(--ease),box-shadow .4s var(--ease),translate .4s var(--ease)}
.p-lanes .pipe:focus-visible{outline:0;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.6)}
.p-lanes.foc .pipe:not(.on){opacity:.26}
.p-lanes.foc .ln:not(.on){opacity:.45}
.p-lanes .pipe.on{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.42)} .p-lanes .pipe.on img{filter:none}
/* a lit pipeline holds still and shows its gap in full, so it can be read */
.p-lanes .pipe.on::before,.p-lanes .pipe.on img,.p-lanes .pipe.on .iss,.p-lanes .pipe.on .iss::after,.p-lanes .pipe.on .iss i{animation:none}
.p-lanes .pipe.on .iss{color:var(--paper)} .p-lanes .pipe.on .iss::after{transform:scaleX(0)} .p-lanes .pipe.on .iss i{background:var(--hi);box-shadow:none}
.p-lanes .say{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;min-height:24px;margin:clamp(16px,3svh,30px) 0 0;font-size:13.5px;line-height:1.4;color:var(--mute)}
.p-lanes .say b{font-weight:400;color:var(--paper)}
.p-lanes .say em{margin-right:10px;font-family:var(--title);font-style:normal;font-weight:200;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--hi)}
.p-lanes .say .key{display:inline-flex;align-items:center;gap:10px;font-size:12.5px}
.p-lanes .say .kd{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.42)}
.p-lanes .say .kb{width:34px;height:11px;border-radius:99px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.4)}
.p-lanes .say .kt{position:relative;width:13px;height:13px;border-radius:50%;background:var(--hi)}
.p-lanes .say .kt::after{content:"";position:absolute;left:4.2px;top:2.2px;width:3.2px;height:6px;border:solid rgb(var(--ground));border-width:0 1.5px 1.5px 0;rotate:45deg}
.p-lanes .say .hint{display:none}
@media (max-width:900px){ .p-lanes{--cg:4px} .p-lanes .ph{gap:4px} }
@media (max-width:700px){
  .p-lanes{--cg:8px}
  .p-lanes .ph,.p-lanes .col{display:none}
  .p-lanes .say{min-height:34px;margin-top:14px;gap:2px 12px;font-size:12px}
  .p-lanes .say .key{display:none} .p-lanes .say .hint{display:inline}
  .p-lanes .say em{margin-right:7px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){ .p-lanes .ph::after,.p-lanes .col,.p-lanes .pipe{transition:none} }

/* (user, 2026-10-12) on a full-width screen the doors run the whole content width, edge to edge with the headline, so the row
   sits evenly in the viewport instead of as an 840px block */
@media (min-width:901px){ .screen.wide .p-panels{max-width:none;height:clamp(260px,calc(100svh - 390px),520px)} .screen.wide .p-pan .h{width:min(420px,34vw)} }
/* the shortened logo strip fades at both ends, so a logo arrives and leaves softly instead of being cut */
.p-cred .mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* LANES, the goal column (user, 2026-10-12: "to the right put portfolio goals"). A last column after the stages says what each
   lane arrives at. With it the chart runs the full content width. It lights with its lane. On phones it sits on the lane heading. */
.p-lanes .ln small{display:none}
.p-lanes.g{max-width:none;grid-template-columns:minmax(96px,170px) repeat(var(--n),minmax(0,1fr)) minmax(150px,210px)}
.p-lanes .ph.gh{padding-left:calc(var(--cg) / 2 + 6px);color:var(--hi)}
.p-lanes .gl{align-self:stretch;display:flex;align-items:center;gap:10px;margin-left:calc(var(--cg) / -2);padding-left:calc(var(--cg) + 6px);border-left:.5px solid rgba(var(--b),.3);font-size:13.5px;line-height:1.25;color:var(--mute);transition:color .35s var(--ease),opacity .35s var(--ease)}
.p-lanes .gl i{flex:none;position:relative;width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(var(--b),.7)}
.p-lanes .gl i::after{content:"";position:absolute;inset:4.5px;border-radius:50%;background:var(--hi)}
.p-lanes .gl.on{color:var(--paper)}
.p-lanes.foc .gl:not(.on){opacity:.4}
@media (max-width:900px){ .p-lanes.g{grid-template-columns:74px repeat(var(--n),minmax(0,1fr)) 96px} .p-lanes .gl{gap:6px;padding-left:10px;font-size:10.5px} .p-lanes .gl i{display:none} }
@media (max-width:700px){
  .p-lanes.g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-lanes .gl{display:none}
  .p-lanes .ln{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .p-lanes .ln small{display:block;font-family:var(--body,inherit);font-size:10.5px;letter-spacing:0;text-transform:none;color:var(--hi)}
}
@media (prefers-reduced-motion:reduce){ .p-lanes .gl{transition:none} }

/* LANES, the calm pass (user, 2026-10-12: "make it easier to work out, it's a bit challenging"). A row now reads as one line:
   the lane, who joins and when, the goal. The chart builds once, left to right, and then holds still: nothing loops while it is
   being read. The gap a specialist closes is no longer written struck through on every bar; the bar keeps its tick, and the words
   appear on the bar and in the line under the chart when the name is pointed at. */
.p-lanes .pipe{--d:calc(.5s + var(--i) * .26s)}
.p-lanes .pipe::before{animation:laneFill 1.1s var(--ease) var(--d) both}
.p-lanes .pipe img,.p-lanes .pipe svg{animation:laneDrop .8s cubic-bezier(.3,1.4,.5,1) var(--d) both}
.p-lanes .iss{animation:none;gap:0;padding-left:8px;font-size:0;color:var(--paper)}
.p-lanes .iss::after{display:none}
.p-lanes .iss i{animation:issTick .5s var(--ease) calc(var(--d) + .9s) both}
@keyframes issTick{from{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--b),.7)}to{background:var(--hi);box-shadow:none}}
.p-lanes .pipe.on .iss{gap:8px;font-size:12px}
@container (max-width:270px){ .p-lanes .pipe.on .iss{gap:0;font-size:0} }
.p-lanes .say .how{color:var(--mute)} .p-lanes .say .how.tip{color:var(--faint)}
@media (max-width:700px){ .p-lanes .say .how{display:none} }
@media (prefers-reduced-motion:reduce){ .p-lanes .pipe::before,.p-lanes .pipe img,.p-lanes .pipe svg,.p-lanes .iss i{animation:none} .p-lanes .iss i{background:var(--hi);box-shadow:none} }

/* LANES, stripped back (user, 2026-10-12: "aesthetically simpler and less complex to figure out"). What is left is a plain table:
   stage names, a quiet line between rows, the people as bars, and the goal as words. Gone: the vertical guide lines, the stage
   numbers, the ticks and gap words on the bars, the goal markers and the goal divider. The detail lives in the one line under
   the chart, on demand. */
.p-lanes .col{display:none}
.p-lanes button.ph i{display:none}
.p-lanes button.ph::after{display:none}
.p-lanes .iss,.p-lanes .pipe.on .iss{display:none}
.p-lanes .pipe::before{background:none;animation:none}
.p-lanes .pipe{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16)}
.p-lanes .pipe.on,.p-lanes .pipe:hover{translate:none;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.45)}
.p-lanes .rule{background:rgba(var(--b),.1)}
.p-lanes .ph.gh{padding-left:0;color:var(--mute)}
.p-lanes .gl{margin-left:0;padding-left:0;border-left:0;gap:10px;color:var(--paper)}
.p-lanes .gl i{width:auto;height:auto;border-radius:0;box-shadow:none;font-style:normal;color:var(--hi)}
.p-lanes .gl i::after{content:"\2192";position:static;inset:auto;background:none;border-radius:0}
.p-lanes.foc .pipe:not(.on){opacity:.3}
.p-lanes .say{font-size:13px} .p-lanes .say .how{color:var(--faint)}

/* FACT FILE (user, 2026-10-12): the example profile that opens beside a person's bar. The house frame with corner marks; it
   unrolls from the bar, the portrait turns from grey to colour under a passing line, and the facts arrive one by one. */
.p-lanes{position:relative}
.p-lanes .p-file{position:absolute;left:0;top:0;z-index:6;width:min(320px,100%);padding:14px 16px 16px;pointer-events:none;opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);
  background-color:rgba(var(--fill,5,10,30),.9);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  transition:opacity .25s var(--ease),clip-path .25s var(--ease),visibility 0s .25s}
.p-lanes .p-file.up{clip-path:inset(100% 0 0 0)}
.p-lanes .p-file.in{opacity:1;visibility:visible;clip-path:inset(0);transition:opacity .3s var(--ease),clip-path .6s var(--ease),visibility 0s}
.p-file .top{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px}
.p-file em{font-family:var(--title);font-style:normal;font-weight:200;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--hi)}
.p-file .top em:last-child{color:var(--mute)}
.p-file .who{display:flex;align-items:center;gap:14px;padding-bottom:14px}
.p-file .who .pic{position:relative;flex:none;display:block;width:64px;height:64px;padding:0;overflow:hidden;border-radius:2px}
.p-file .who img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.p-file.in .who img{animation:fileTone .9s var(--ease) .25s both}
.p-file .who .pic::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hi);opacity:0}
.p-file.in .who .pic::after{animation:fileScan .9s var(--ease) .25s both}
.p-file .who b{display:block;font-family:var(--title);font-weight:200;font-size:21px;line-height:1.1;letter-spacing:-.01em;color:var(--paper)}
.p-file .who small{display:block;margin-top:5px;font-size:12.5px;color:var(--mute)}
.p-file .facts p{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:baseline;gap:10px;margin:0;padding:8px 0;border-top:.5px solid rgba(var(--b),.14);font-size:13px;line-height:1.3;color:var(--paper);opacity:0;translate:0 6px}
.p-file.in .facts p{opacity:1;translate:0 0;transition:opacity .45s var(--ease),translate .45s var(--ease);transition-delay:calc(.3s + var(--r) * .08s)}
.p-file .facts em{color:var(--mute)}
.p-file .tk{display:inline-flex;gap:3px;margin-right:9px;vertical-align:middle}
.p-file .tk u{width:14px;height:3px;background:rgba(var(--b),.22);text-decoration:none}
.p-file .tk u.y{background:var(--hi)}
@keyframes fileTone{from{filter:grayscale(1) contrast(1.05)}to{filter:none}}
@keyframes fileScan{0%{top:0;opacity:.9}90%{opacity:.9}100%{top:100%;opacity:0}}
@media (max-width:700px){ .p-lanes .p-file{width:100%;padding:12px 14px 14px} .p-file .who .pic{width:52px;height:52px} .p-file .facts p{grid-template-columns:96px minmax(0,1fr);padding:6px 0;font-size:12.5px} }
@media (prefers-reduced-motion:reduce){ .p-lanes .p-file,.p-lanes .p-file.in,.p-file.in .facts p{transition:none} .p-file.in .who img{animation:none;filter:none} .p-file.in .who .pic::after{animation:none} }

/* TEAM TABLE, TIDY PASS (user, 2026-10-12: "make the labels neater and cleaner and the table too").
   One label style per kind, one text size inside the table, even rows, and the table closed by a rule above and below.
   Desktop and tablet only; the phone layout (700px and under) is a different arrangement and is left as it is. */
@media (min-width:701px){
  .p-lanes .ph{padding-bottom:14px;font-size:10.5px;font-weight:400;letter-spacing:.16em;color:rgba(var(--b),.6)}
  .p-lanes .ph.ax i{display:none}
  .p-lanes .ph.gh{padding-left:22px;color:rgba(var(--b),.6)}
  .p-lanes .rule{background:rgba(var(--b),.14)}
  .p-lanes .ln{align-self:center;padding:clamp(15px,2.5svh,22px) 0;font-family:inherit;font-weight:400;font-size:14.5px;letter-spacing:0;color:rgba(255,255,255,.9)}
  .p-lanes .pipe{height:34px;padding:0 14px 0 3px;gap:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}
  .p-lanes .pipe img,.p-lanes .pipe svg{width:28px;height:28px}
  .p-lanes .pipe b{font-weight:400;font-size:13px;letter-spacing:0;color:rgba(255,255,255,.88)}
  .p-lanes .gl{align-self:stretch;gap:9px;margin-left:0;padding-left:22px;border-left:.5px solid rgba(var(--b),.14);font-size:13px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.9)}
  .p-lanes .gl i{font-size:13px;color:var(--hi)}
  .p-lanes .say{grid-column:1/-1;margin:0;padding-top:14px;border-top:.5px solid rgba(var(--b),.14)}
}