/* ===== HCL-1 (17 Oct 2026) home close: #contact briefing, evidence, promise band, related guides.
   Marco: "too edged, rugged ... the boxes ... zero animations". Soft rounded surfaces, no hard bars/offset frames,
   graphics + scroll motion. Hidden states only under html.hcl-mo (added by hcl.js) = fail-visible. ===== */
@property --hcl-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.ox{--hcl-ease:cubic-bezier(.22,1,.36,1);--hcl-sh:0 1px 0 rgba(11,23,41,.04),0 22px 48px -28px rgba(11,23,41,.42)}

/* ---------- shared: rounded highlight pills ---------- */
.ox :is(#contact,.ox-ev,.ox-sign) .ox-chip{display:inline;padding:0 .24em;border-radius:.2em;color:#fff;
 background:linear-gradient(100deg,#2E7D5B,#3FBF84 45%,#2E7D5B 90%) 0 0/220% 100%;animation:hclFlow 7s linear infinite}
.ox .ox-sign .ox-chip--ink{background:linear-gradient(100deg,#0B1729,#14233F 45%,#0B1729 90%) 0 0/220% 100%;box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
@keyframes hclFlow{to{background-position:-220% 0}}
.hcl-mo .ox :is(#contact,.ox-ev,.ox-sign) .ox-chip{clip-path:inset(0 100% 0 0 round .24em);transition:clip-path 1.1s var(--hcl-ease) .35s}
.hcl-mo .ox :is(#contact,.ox-ev,.ox-sign).hcl-in .ox-chip{clip-path:inset(0 0 0 0 round .24em)}

/* shared reveal */
.hcl-mo .ox .hcl-r{opacity:0;translate:0 34px;transition:opacity .8s var(--hcl-ease) calc(var(--i,0)*90ms),translate 1s var(--hcl-ease) calc(var(--i,0)*90ms),scale 1s var(--hcl-ease) calc(var(--i,0)*90ms),filter .8s linear calc(var(--i,0)*90ms)}
.hcl-mo .ox .hcl-in .hcl-r{opacity:1;translate:0 0}

/* ---------- 05 partner briefing ---------- */
.ox #contact{position:relative;isolation:isolate;overflow:clip;
 background:radial-gradient(900px 520px at 88% 30%,rgba(63,191,132,.17),transparent 62%),radial-gradient(760px 480px at 6% 96%,rgba(224,122,47,.13),transparent 60%),#0B1729}
.hcl-aura{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hcl-aura i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:hclDrift 22s ease-in-out infinite alternate}
.hcl-aura i:nth-child(1){width:440px;height:440px;left:52%;top:-120px;background:#2E7D5B}
.hcl-aura i:nth-child(2){width:360px;height:360px;left:-80px;bottom:-140px;background:#E07A2F;opacity:.28;animation-duration:27s}
.hcl-aura i:nth-child(3){width:300px;height:300px;left:30%;top:40%;background:#14233F;opacity:.9;animation-duration:31s}
@keyframes hclDrift{0%{translate:0 0}50%{translate:60px 40px}100%{translate:-40px 70px}}
.hcl-net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}
.hcl-net line{stroke:rgba(195,202,212,.22);stroke-width:1;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset 2.2s var(--hcl-ease) calc(var(--i,0)*70ms)}
.hcl-net circle{fill:#3FBF84;opacity:0;transition:opacity .6s linear calc(var(--i,0)*70ms + .4s)}
.hcl-net circle.hot{fill:#E07A2F}
.ox #contact.hcl-in .hcl-net line,html:not(.hcl-mo) .hcl-net line{stroke-dashoffset:0}
.ox #contact.hcl-in .hcl-net circle,html:not(.hcl-mo) .hcl-net circle{opacity:.85}
.hcl-net .pulse{fill:#3FBF84;opacity:.9;filter:drop-shadow(0 0 6px #3FBF84)}

.ox #contact .ox-btn--hot{position:relative;overflow:hidden;border-radius:999px;padding-inline:34px;box-shadow:0 14px 34px -12px rgba(224,122,47,.75);transition:translate .35s var(--hcl-ease),box-shadow .35s,background-color .2s,color .2s}
.ox #contact .ox-btn--hot::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:hclShine 4.6s ease-in-out 1.5s infinite}
@keyframes hclShine{0%,62%{left:-60%}100%{left:130%}}
.ox #contact .ox-btn--hot:hover{translate:0 -3px;box-shadow:0 22px 44px -14px rgba(224,122,47,.85)}

.ox #contact .ox-facts{gap:12px}
.ox #contact .ox-facts>div{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:16px 18px 17px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:translate .4s var(--hcl-ease),border-color .3s}
.ox #contact .ox-facts>div:hover{translate:0 -4px;border-color:rgba(63,191,132,.5)}
.ox #contact .ox-facts>div:last-child dt::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#3FBF84;vertical-align:1px;box-shadow:0 0 0 0 rgba(63,191,132,.7);animation:hclPing 2s ease-out infinite}
@keyframes hclPing{to{box-shadow:0 0 0 10px rgba(63,191,132,0)}}
.ox #contact .ox-facts a{color:#F2B183;text-underline-offset:4px}

/* the case card: soft white card, living gradient edge, float + tilt */
.ox #contact .ox-term--case{position:relative;margin:0;border:2px solid transparent;border-radius:28px;overflow:hidden;
 background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--hcl-a),#3FBF84,#E07A2F 30%,#14233F 55%,#3FBF84) border-box;
 box-shadow:0 50px 90px -40px rgba(0,0,0,.75),0 0 110px -30px rgba(63,191,132,.45);
 animation:hclSpin 9s linear infinite,hclFloat 8s ease-in-out infinite;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--hcl-ease)}
@keyframes hclSpin{to{--hcl-a:360deg}}
@keyframes hclFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.ox #contact .ox-term--case::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(63,191,132,.13),transparent);animation:hclScan 5.5s ease-in-out infinite}
@keyframes hclScan{0%{top:-30%}60%,100%{top:110%}}
.ox #contact .ox-term figcaption{padding:18px 26px;border-bottom:1px solid #ECE8E1;background:linear-gradient(180deg,#FBF8F3,#fff)}
.ox #contact .ox-term--case .ox-tag{border-radius:999px;padding:7px 12px 6px 26px;position:relative;background:#2E7D5B}
.ox #contact .ox-term--case .ox-tag::before{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#B9F5D6;animation:hclPing 2s ease-out infinite}
.ox #contact .ox-case{padding:6px 22px 4px}
.ox #contact .ox-case li{align-items:center;gap:14px;padding:16px 4px;border-top:1px solid #EFEBE4}
.ox #contact .ox-case li>span{display:flex;align-items:center;gap:14px;font:600 13.5px/1.3 var(--body);letter-spacing:.06em}
.hcl-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#EEF6F1;color:#2E7D5B}
.hcl-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hcl-ico path{stroke-dasharray:60;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--hcl-ease) calc(var(--i,0)*160ms + .5s)}
.hcl-mo .ox #contact:not(.hcl-in) .hcl-ico path{stroke-dashoffset:60}
.ox #contact .ox-case b{font-size:clamp(38px,3.6vw,56px);letter-spacing:-.02em;background:linear-gradient(135deg,#0B1729,#14233F 60%,#2E7D5B);-webkit-background-clip:text;background-clip:text;color:transparent}
.ox #contact .ox-case li:last-child b{background:none;color:#2E7D5B;position:relative;display:grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(46,125,91,.18)}
.ox #contact .ox-case li:last-child b::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;border-top-color:#3FBF84;border-right-color:#3FBF84;animation:hclRot 2.8s linear infinite}
@keyframes hclRot{to{rotate:360deg}}
.ox #contact .ox-case li:last-child .hcl-ico{background:#E8F7EF}
.hcl-mo .ox #contact .ox-case li{opacity:0;translate:24px 0;transition:opacity .7s var(--hcl-ease) calc(var(--i,0)*160ms + .45s),translate .9s var(--hcl-ease) calc(var(--i,0)*160ms + .45s)}
.hcl-mo .ox #contact.hcl-in .ox-case li{opacity:1;translate:0 0}
.ox .ox-term--case .ox-note{font-style:italic}

/* ---------- the evidence ---------- */
.ox .ox-ev{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(700px 380px at 92% 8%,rgba(63,191,132,.1),transparent 65%),radial-gradient(640px 360px at 0% 100%,rgba(224,122,47,.08),transparent 60%),#FBF8F3}
.hcl-stamp{position:absolute;right:max(2vw,calc(50% - 760px));top:24px;width:190px;height:190px;z-index:-1;color:#2E7D5B;opacity:.14;pointer-events:none;animation:hclRot 40s linear infinite}
.hcl-stamp text{font:800 13px/1 var(--disp,sans-serif);letter-spacing:.2em;fill:currentColor}
.ox .ox-ev .ox-note{position:relative;border-left:0;border-radius:20px;padding:16px 20px 16px 62px;background:#fff;box-shadow:var(--hcl-sh);color:#0B1729}
.ox .ox-ev .ox-note::before{content:"";position:absolute;left:18px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;
 background:#2E7D5B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 0 0 6px rgba(46,125,91,.12)}
.ox .ox-ev .ox-rail--src{gap:18px;padding:16px 4px 34px;margin:-16px -4px -34px;grid-auto-columns:calc((100% - 72px)/5)}
.ox .ox-ev .ox-rail--src>li,.ox .ox-ev .ox-rail--src>li:first-child,.ox .ox-ev .ox-rail--src>li:last-child{position:relative;border:0;border-radius:24px;background:#fff;box-shadow:var(--hcl-sh);overflow:clip;transition:translate .5s var(--hcl-ease),box-shadow .5s}
.ox .ox-ev .ox-rail--src>li::before{content:"";position:absolute;left:22px;right:22px;top:0;height:4px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#2E7D5B,#3FBF84,#E07A2F);transform-origin:0 50%;transition:scale 1.2s var(--hcl-ease) calc(var(--i,0)*110ms + .3s)}
.hcl-mo .ox .ox-ev:not(.hcl-in) .ox-rail--src>li::before{scale:0 1}
.ox .ox-ev .ox-rail--src>li:hover{translate:0 -10px;box-shadow:0 1px 0 rgba(11,23,41,.04),0 34px 60px -30px rgba(11,23,41,.55)}
.ox .ox-ev .ox-rail--src>li:has(a:hover){border-top-color:transparent}
.ox .ox-ev .ox-rail--src li a,.ox .ox-ev .ox-rail--src li a:hover{position:relative;height:100%;padding:26px 22px 70px;background:transparent;color:#0B1729}
.ox .ox-ev .ox-rail--src li a:hover b.ox-h4{color:#2E7D5B}
.ox .ox-ev .ox-rail--src li a:hover>span:last-child{color:#0B1729}
.ox .ox-ev .ox-rail--src li a:hover .ox-rail__meta{color:#5F646D}
.ox .ox-ev .ox-rail--src .ox-tag{border-radius:50%;width:42px;height:42px;min-width:0;padding:0;background:linear-gradient(140deg,#EE8C45,#E07A2F);box-shadow:0 8px 18px -8px rgba(224,122,47,.8);transition:rotate .6s var(--hcl-ease)}
.ox .ox-ev .ox-rail--src li:hover .ox-tag{rotate:-12deg}
.ox .ox-ev .ox-rail__meta{font-size:12.5px}
.hcl-doc{position:absolute;right:18px;bottom:16px;width:44px;height:52px;color:#2E7D5B;opacity:.35;transition:opacity .4s,translate .5s var(--hcl-ease)}
.hcl-doc path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--hcl-ease) calc(var(--i,0)*110ms + .5s)}
.hcl-mo .ox .ox-ev:not(.hcl-in) .hcl-doc path{stroke-dashoffset:80}
.ox .ox-ev li:hover .hcl-doc{opacity:.8;translate:0 -4px}
.hcl-go{position:absolute;left:22px;bottom:22px;font:700 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#A9501A;transition:letter-spacing .4s var(--hcl-ease)}
.ox .ox-ev li:hover .hcl-go{letter-spacing:.14em}
.hcl-mo .ox .ox-ev .ox-rail--src>li{opacity:0;translate:0 60px;scale:.94;transition:opacity .8s var(--hcl-ease) calc(var(--i,0)*110ms),translate 1.1s var(--hcl-ease) calc(var(--i,0)*110ms),scale 1.1s var(--hcl-ease) calc(var(--i,0)*110ms),box-shadow .5s}
.hcl-mo .ox .ox-ev.hcl-in .ox-rail--src>li{opacity:1;translate:0 0;scale:1}
.hcl-mo .ox .ox-ev.hcl-in .ox-rail--src>li:hover{translate:0 -10px}
@media (max-width:1024px){.ox .ox-ev .ox-rail--src{grid-auto-columns:calc((100% - 36px)/2.4)}}
@media (max-width:767px){.ox .ox-ev .ox-rail--src{grid-auto-columns:80%}.hcl-stamp{width:120px;height:120px;top:10px}}

/* ---------- promise band ---------- */
.ox .ox-sign{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(70px,7vw,110px);
 background:radial-gradient(60% 120% at 50% 120%,rgba(63,191,132,.55),transparent 60%),linear-gradient(120deg,#1E5C42,#2E7D5B 45%,#2a8a62 70%,#1E5C42) 0 0/240% 100%;animation:hclFlow 18s linear infinite}
.hcl-route{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hcl-route .r{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:2 14;stroke-linecap:round;animation:hclDash 3s linear infinite}
.hcl-route .r2{stroke:rgba(255,255,255,.1);stroke-width:1.5}
@keyframes hclDash{to{stroke-dashoffset:-32}}
.hcl-route .dot{fill:#fff;filter:drop-shadow(0 0 8px #B9F5D6)}
.hcl-route .dot.o{fill:#F2B183;filter:drop-shadow(0 0 8px #E07A2F)}
.ox .ox-sign p{text-shadow:0 10px 40px rgba(11,23,41,.25)}
.ox .ox-sign p>span{display:inline-block}
.hcl-mo .ox .ox-sign .hcl-w{display:inline-block;opacity:0;translate:0 .5em;filter:blur(10px);transition:opacity .9s var(--hcl-ease) calc(var(--i,0)*220ms),translate 1.1s var(--hcl-ease) calc(var(--i,0)*220ms),filter .9s var(--hcl-ease) calc(var(--i,0)*220ms)}
.hcl-mo .ox .ox-sign.hcl-in .hcl-w{opacity:1;translate:0 0;filter:none}
.ox .ox-sign .ox-chip--ink{position:relative;margin-top:.26em}
.ox #contact .ox-h2,.ox .ox-ev .ox-h2{line-height:1.16}
@supports (animation-timeline:view()){
 .hcl-mo .ox .ox-sign .ox-wrap{animation:hclZoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
 @keyframes hclZoom{from{scale:.86;opacity:.4}to{scale:1;opacity:1}}
}

/* ---------- related guides ---------- */
.ox .ox-related ul{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.ox .ox-related li{padding:0;font-size:16px}
.ox .ox-related li::before{display:none}
.ox .ox-related li a{display:flex;align-items:center;min-height:58px;height:100%;padding:12px 52px 12px 20px;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(11,23,41,.04),0 12px 28px -22px rgba(11,23,41,.45);color:#14233F;font-weight:600;text-decoration:none;position:relative;overflow:hidden;transition:translate .35s var(--hcl-ease),box-shadow .35s,color .3s}
.ox .ox-related li a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#EEF6F1,#FDF1E7);opacity:0;transition:opacity .35s}
.ox .ox-related li a{isolation:isolate}
.ox .ox-related li a::after{content:"";position:absolute;right:16px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
 background:#E07A2F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1729' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;transition:translate .35s var(--hcl-ease),scale .35s}
.ox .ox-related li a:hover{translate:0 -3px;color:#1E5C42;box-shadow:0 1px 0 rgba(11,23,41,.04),0 20px 36px -22px rgba(11,23,41,.55)}
.ox .ox-related li a:hover::before{opacity:1}
.ox .ox-related li a:hover::after{translate:4px 0;scale:1.1}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion:reduce){
 .ox :is(#contact,.ox-ev,.ox-sign) .ox-chip,.ox .ox-sign,.hcl-aura i,.ox #contact .ox-term--case,.ox #contact .ox-term--case::after,.ox #contact .ox-btn--hot::after,.hcl-stamp,.hcl-route .r,.ox #contact .ox-case li:last-child b::after,.ox #contact .ox-facts>div:last-child dt::before,.ox #contact .ox-term--case .ox-tag::before{animation:none!important}
 .ox #contact .ox-term--case::after,.ox #contact .ox-btn--hot::after{display:none}
}
@media print{.hcl-mo .ox *{opacity:1!important;translate:none!important;filter:none!important;clip-path:none!important}}
/* ===== end HCL-1 ===== */

/* ===== HCL-2 (17 Oct 2026) "Confirmed-handoff standard" band + "What better homeless services demand" cards.
   Was: flat list, hard white slab, 20 square boxes, no graphic, no motion. Now: lit route rail, orbit graphic, soft glass cards.
   Class .hcl-led is added by hcl.js; hidden states only under html.hcl-mo (fail-visible). ===== */
.ox .hcl-led{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(820px 480px at 8% 18%,rgba(63,191,132,.14),transparent 62%),radial-gradient(700px 440px at 96% 92%,rgba(224,122,47,.1),transparent 60%),#0B1729}
.hcl-led .hcl-aura i:nth-child(1){left:-6%;top:-160px}
.hcl-led .hcl-aura i:nth-child(2){left:auto;right:-80px;bottom:-120px}
.ox .hcl-led .ox-badge{display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:14px 22px 14px 18px;border-radius:999px;background:linear-gradient(135deg,#fff,#FBF8F3);color:#0B1729;box-shadow:0 18px 40px -20px rgba(0,0,0,.7),0 0 0 6px rgba(255,255,255,.06);border:0}
.ox .hcl-led .ox-badge::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:#E07A2F;box-shadow:0 0 0 0 rgba(224,122,47,.7);animation:hclPingO 2.2s ease-out infinite}
@keyframes hclPingO{to{box-shadow:0 0 0 12px rgba(224,122,47,0)}}
.hcl-orbit{display:block;width:min(330px,86%);height:auto;margin:30px 0 4px;overflow:visible}
.hcl-orbit .rg{fill:none;stroke:rgba(195,202,212,.22);stroke-width:1.5;stroke-dasharray:3 9}
.hcl-orbit .rg2{stroke:rgba(63,191,132,.18);stroke-dasharray:none}
.hcl-orbit .nd{fill:#0B1729;stroke:#3FBF84;stroke-width:2;animation:hclNode 7.2s linear infinite}
.hcl-orbit .nt{fill:#3FBF84;font:800 15px/1 var(--disp,sans-serif);text-anchor:middle;dominant-baseline:central;animation:hclNodeT 7.2s linear infinite}
@keyframes hclNode{0%,3%{fill:#3FBF84;filter:drop-shadow(0 0 8px #3FBF84)}16%,100%{fill:#0B1729;filter:none}}
@keyframes hclNodeT{0%,3%{fill:#0B1729}16%,100%{fill:#3FBF84}}
.hcl-orbit .core{fill:url(#hclCore)}
.hcl-orbit .ck{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.hcl-orbit .cl{fill:#B9F5D6;font:700 10.5px/1 var(--body,sans-serif);letter-spacing:.2em;text-anchor:middle}
.hcl-orbit .pu{fill:#E07A2F;filter:drop-shadow(0 0 8px #E07A2F)}
.hcl-orbit .spin{transform-origin:160px 160px;animation:hclRot 60s linear infinite}

.ox .hcl-led .ox-stages{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ox .hcl-led .ox-stages::before{content:"";position:absolute;left:25px;top:30px;bottom:30px;width:2px;border-radius:2px;background:rgba(255,255,255,.12)}
.ox .hcl-led .ox-stages::after{content:"";position:absolute;left:25px;top:30px;bottom:30px;width:2px;border-radius:2px;background:linear-gradient(180deg,#3FBF84,#E07A2F);transform-origin:50% 0;scale:1 var(--p,1);box-shadow:0 0 14px rgba(63,191,132,.7)}
.hcl-run{position:absolute;left:21px;top:26px;bottom:26px;width:10px;pointer-events:none}
.hcl-run i{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px 3px rgba(185,245,214,.9);animation:hclRun 4.6s ease-in-out infinite}
@keyframes hclRun{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 10px);opacity:0}}
.ox .hcl-led .ox-stages>li{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:22px;align-items:center;margin:0;padding:16px 22px 16px 0;border:0;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:translate .45s var(--hcl-ease),box-shadow .45s,background-color .45s}
.ox .hcl-led .ox-stages>li:hover{translate:6px 0;box-shadow:inset 0 0 0 1px rgba(63,191,132,.55),0 24px 40px -26px rgba(0,0,0,.8)}
.ox .hcl-led .ox-stages>li>span{grid-row:1/span 2;display:grid;place-items:center;width:52px;height:52px;margin-left:0;border-radius:50%;background:#0B1729;color:#3FBF84;font:800 18px/1 var(--disp);box-shadow:0 0 0 2px rgba(63,191,132,.4);position:relative;z-index:1;transition:background-color .5s,color .5s,box-shadow .5s,scale .5s var(--hcl-ease)}
.ox .hcl-led .ox-stages>li>b{align-self:end;font:800 clamp(18px,1.5vw,22px)/1.15 var(--disp);letter-spacing:.01em;text-transform:uppercase;color:#fff}
.ox .hcl-led .ox-stages>li>em{align-self:start;margin-top:4px;font:500 15.5px/1.45 var(--body);font-style:normal;color:#C3CAD4}
.ox .hcl-led .ox-stages>li:last-child>span::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #3FBF84;opacity:0;animation:hclRingOut 2.4s ease-out infinite}
@keyframes hclRingOut{0%{opacity:.7;scale:.9}100%{opacity:0;scale:1.45}}
.hcl-mo .ox .hcl-led .ox-stages>li:not(.is-lit)>span{background:#0B1729;color:#6E7C90;box-shadow:0 0 0 2px rgba(255,255,255,.14);scale:.9}
.hcl-mo .ox .hcl-led .ox-stages>li.is-lit>span{background:#3FBF84;color:#0B1729;box-shadow:0 0 0 6px rgba(63,191,132,.2),0 0 28px rgba(63,191,132,.6);scale:1}
.hcl-mo .ox .hcl-led .ox-stages>li:not(.is-lit)>b,.hcl-mo .ox .hcl-led .ox-stages>li:not(.is-lit)>em{opacity:.5}
.ox .hcl-led .ox-stages>li>b,.ox .hcl-led .ox-stages>li>em{transition:opacity .5s}

.ox .hcl-led .ox-demand{position:relative;margin-top:clamp(40px,5vw,70px)}
.ox .hcl-led .ox-demand ul{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.ox .hcl-led .ox-demand li{border:0;background:none;margin:0;padding:0}
.ox .hcl-led .ox-demand li a{position:relative;display:block;height:100%;padding:26px 24px 64px;border-radius:26px;border:0;text-decoration:none;color:#C3CAD4;font:500 15.5px/1.55 var(--body);background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:clip;isolation:isolate;transition:translate .5s var(--hcl-ease),box-shadow .5s}
.ox .hcl-led .ox-demand li a::before{content:"";position:absolute;inset:-1px;z-index:-1;background:radial-gradient(260px 160px at 0% 0%,rgba(63,191,132,.28),transparent 70%);opacity:0;transition:opacity .5s}
.ox .hcl-led .ox-demand li a:hover{translate:0 -8px;box-shadow:inset 0 0 0 1px rgba(63,191,132,.6),0 34px 56px -30px rgba(0,0,0,.9)}
.ox .hcl-led .ox-demand li a:hover::before{opacity:1}
.ox .hcl-led .ox-demand li a b{display:block;margin-bottom:10px;font:800 clamp(18px,1.5vw,22px)/1.15 var(--disp);text-transform:uppercase;color:#3FBF84}
.hcl-dn{position:absolute;left:24px;bottom:22px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(63,191,132,.16);color:#3FBF84;font:800 13px/1 var(--disp)}
.ox .hcl-led .ox-demand li a::after{content:"";position:absolute;right:20px;bottom:18px;width:34px;height:34px;border-radius:50%;background:#E07A2F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1729' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;transition:translate .4s var(--hcl-ease),scale .4s}
.ox .hcl-led .ox-demand li a:hover::after{translate:5px 0;scale:1.1}
.hcl-mo .ox .hcl-led .ox-demand li.hcl-r{translate:0 50px;scale:.95}
.hcl-mo .ox .hcl-led.hcl-in .ox-demand li.hcl-r{translate:0 0;scale:1}
@media (max-width:900px){.hcl-orbit{margin:22px 0 10px}}
@media (max-width:767px){.ox .hcl-led .ox-stages>li{column-gap:16px;padding-right:16px;grid-template-columns:46px minmax(0,1fr)}.ox .hcl-led .ox-stages>li>span{width:46px;height:46px;font-size:16px}.ox .hcl-led .ox-stages::before,.ox .hcl-led .ox-stages::after{left:22px}.hcl-run{left:18px}}
@media (prefers-reduced-motion:reduce){.hcl-run i,.hcl-orbit .nd,.hcl-orbit .nt,.hcl-orbit .spin,.ox .hcl-led .ox-badge::before,.ox .hcl-led .ox-stages>li:last-child>span::after{animation:none!important}.hcl-run{display:none}}
/* ===== end HCL-2 ===== */


/* ===== HCL-3 (17 Oct 2026) Desert ("California's own state auditor called it a data desert"): soft rounded chart card,
   rising rounded bars, dashed ghost columns for the years with no data, glass quote, $9.4B ring + count-up, closer underline.
   Class .hcl-des is added by hcl.js (gated ?hcl3=1); hidden states only under html.hcl-mo (fail-visible). ===== */
.ox #desert.hcl-des{isolation:isolate}
.ox #desert.hcl-des .ox-quote{position:relative;max-width:1120px;padding:clamp(26px,3vw,40px) clamp(24px,3.4vw,48px);border:0;border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 70px -46px rgba(0,0,0,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:clip}
.ox #desert.hcl-des .ox-quote::before{content:"\201C";position:absolute;right:clamp(16px,3vw,44px);top:-.16em;font:900 clamp(140px,16vw,240px)/1 var(--disp);color:#3FBF84;opacity:.13;pointer-events:none}
.ox #desert.hcl-des .ox-quote::after{content:"";position:absolute;left:0;top:18%;bottom:18%;width:5px;border-radius:0 6px 6px 0;background:linear-gradient(180deg,#3FBF84,#E07A2F);box-shadow:0 0 22px rgba(63,191,132,.7)}
.ox #desert.hcl-des .ox-quote cite{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.07);color:#C9D2DE}
.ox #desert.hcl-des .ox-quote cite::before{content:"";width:8px;height:8px;border-radius:50%;background:#E07A2F;animation:hclPingO 2.2s ease-out infinite}

/* chart card (drawn behind the figure so the bars and the dune keep their alignment) */
.ox #desert.hcl-des .ox-chart{isolation:isolate;margin-bottom:68px}
.ox #desert.hcl-des .ox-chart::before{content:"";position:absolute;z-index:-1;inset:-30px -30px -44px;border-radius:32px;background:radial-gradient(520px 260px at 12% 0%,rgba(63,191,132,.14),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.ox #desert.hcl-des .ox-chart .ox-h4{position:relative;padding-top:2px}
.ox #desert.hcl-des .ox-bars{border-bottom:0;position:relative}
.ox #desert.hcl-des .ox-bars::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,#3FBF84 0 40%,rgba(224,122,47,.9) 40% 100%);opacity:.8}
.ox #desert.hcl-des .ox-bars li{transition:translate .4s var(--hcl-ease)}
.ox #desert.hcl-des .ox-bars li::after{width:min(86%,150px);margin-inline:auto;border-radius:20px 20px 6px 6px;background:linear-gradient(180deg,#5BE0A6,#2E7D5B 78%,#1E5C42);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 22px 44px -18px rgba(63,191,132,.65);transform-origin:50% 100%}
.ox #desert.hcl-des .ox-bars li:not(.is-na):hover{translate:0 -8px}
.ox #desert.hcl-des .ox-bars .is-na::after{height:clamp(70px,9vw,120px);width:min(86%,150px);margin-inline:auto;border:2px dashed rgba(224,122,47,.65);border-bottom:0;border-radius:20px 20px 6px 6px;background:repeating-linear-gradient(135deg,rgba(224,122,47,.1) 0 8px,transparent 8px 18px);box-shadow:none;animation:hclGhost 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0)*.35s)}
@keyframes hclGhost{0%,100%{opacity:.55}50%{opacity:1}}
.ox #desert.hcl-des .ox-bars .is-na b{position:relative;z-index:1;display:inline-block;align-self:center;padding:6px 14px;border-radius:999px;background:rgba(224,122,47,.16);box-shadow:inset 0 0 0 1px rgba(224,122,47,.45);margin-bottom:clamp(56px,7vw,86px)}
.ox #desert.hcl-des .ox-bars span{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.07);left:50%;right:auto;translate:-50% 0;width:max-content}
.hcl-mo .ox #desert.hcl-des:not(.hcl-in) .ox-bars li:not(.is-na)::after{scale:1 0}
.hcl-mo .ox #desert.hcl-des .ox-bars li:not(.is-na)::after{transition:scale 1.3s var(--hcl-ease) calc(var(--i,0)*170ms + .35s)}
.hcl-mo .ox #desert.hcl-des:not(.hcl-in) .ox-bars li>b,.hcl-mo .ox #desert.hcl-des:not(.hcl-in) .ox-bars li>span{opacity:0;translate:0 14px}
.hcl-mo .ox #desert.hcl-des .ox-bars li>b,.hcl-mo .ox #desert.hcl-des .ox-bars li>span{transition:opacity .7s linear calc(var(--i,0)*170ms + .9s),translate .9s var(--hcl-ease) calc(var(--i,0)*170ms + .9s)}
.hcl-mo .ox #desert.hcl-des:not(.hcl-in) .ox-bars::after{scale:0 1}
.ox #desert.hcl-des .ox-bars::after{transform-origin:0 50%;transition:scale 1.6s var(--hcl-ease) .2s}

/* $9.4B card */
.ox #desert.hcl-des .ox-figs{border-top:0}
.ox #desert.hcl-des .ox-figs li,.ox #desert.hcl-des .ox-figs li+li{display:flex;align-items:center;gap:22px;width:fit-content;max-width:100%;margin:0;padding:22px 34px 22px 24px;border:0;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),0 30px 56px -34px rgba(0,0,0,.9)}
.ox #desert.hcl-des .ox-figs b{background:linear-gradient(135deg,#fff,#B9F5D6 70%);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.ox #desert.hcl-des .ox-figs li>span{margin:0;max-width:16ch;color:#C9D2DE}
.hcl-ring{flex:none;width:92px;height:92px}
.hcl-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.hcl-ring .t{stroke:rgba(255,255,255,.12)}
.hcl-ring .f{stroke:#E07A2F;stroke-dasharray:1;stroke-dashoffset:.4;filter:drop-shadow(0 0 6px rgba(224,122,47,.7));transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.8s var(--hcl-ease) .5s}
.hcl-ring .g{stroke:#3FBF84}
.hcl-ring text{fill:#fff;font:800 20px/1 var(--disp);text-anchor:middle;dominant-baseline:central}
.hcl-mo .ox #desert.hcl-des:not(.hcl-in) .hcl-ring .f{stroke-dashoffset:1}

/* closer */
.ox #desert.hcl-des .ox-closer{position:relative;padding-bottom:.42em}
.ox #desert.hcl-des .ox-closer::after{content:"";position:absolute;left:0;bottom:0;width:min(220px,40%);height:8px;border-radius:8px;background:linear-gradient(90deg,#E07A2F,#F2B183);transform-origin:0 50%;transition:scale 1.2s var(--hcl-ease) .3s}
.hcl-mo .ox #desert.hcl-des:not(.hcl-in) .ox-closer::after{scale:0 1}
.ox #desert.hcl-des .ox-note{max-width:96ch}
@media (min-width:768px){.ox #desert.hcl-des .ox-chart{margin-bottom:104px}.ox #desert.hcl-des .ox-figs{margin-bottom:44px}}
@media (max-width:767px){.ox #desert.hcl-des .ox-chart::before{inset:-20px -14px -40px;border-radius:24px}.ox #desert.hcl-des .ox-figs li{padding:18px 22px 18px 18px;gap:16px}.hcl-ring{width:72px;height:72px}.ox #desert.hcl-des .ox-bars li:not(.is-na)::after,.ox #desert.hcl-des .ox-bars .is-na::after{width:92%}.ox #desert.hcl-des .ox-bars .is-na b{margin-bottom:60px}.ox #desert.hcl-des .ox-bars span{padding:3px 6px;font-size:11px}}
@media (prefers-reduced-motion:reduce){.ox #desert.hcl-des .ox-bars .is-na::after,.ox #desert.hcl-des .ox-quote cite::before{animation:none!important}}
/* ===== end HCL-3 ===== */
