/* home.css: the home page only (pinned WebGL hero, tool demos, numbers, services, process). Loads after ridge.css. */
/* hero (static by default; .live turns it into the pinned WebGL stage) */
.hero{position:relative;background:var(--bg)}
.stage{position:relative}
.scene{position:absolute;left:0;top:0;width:100%;height:100vh;height:100svh;display:block;background:var(--bg)}
.scrim{position:absolute;left:0;top:0;width:100%;height:100vh;height:100svh;pointer-events:none;z-index:1}
.scrim-a{background:radial-gradient(115% 95% at 0% 100%,rgba(5,6,7,.92) 0%,rgba(5,6,7,.62) 36%,rgba(5,6,7,0) 64%)}
.scrim-b{opacity:0;background:linear-gradient(90deg,rgba(5,6,7,.9) 0%,rgba(5,6,7,.62) 30%,rgba(5,6,7,0) 52%)}
.beats{position:relative;z-index:3}
.b0{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav) + 32px) var(--g) clamp(48px,9vh,100px)}
.h-hero{font:300 clamp(40px,6.1vw,92px)/1.07 var(--sans);letter-spacing:-.04em;max-width:9.4em;text-wrap:balance}
.lede{margin-top:clamp(18px,2.6vh,28px);font:300 clamp(16px,1.3vw,19px)/1.6 var(--sans);color:var(--mid);max-width:33em}
.b0 .mk:first-of-type{margin-top:clamp(22px,3.4vh,36px)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.origin{margin-top:clamp(18px,2.6vh,28px);font:400 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.b0 .mk + .mk{margin-top:0}
.beats-rest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding:clamp(64px,10vh,120px) var(--g);border-top:1px solid var(--line)}
.beat-k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.h-beat{margin-top:16px;font:300 clamp(30px,3vw,44px)/1.06 var(--sans);letter-spacing:-.035em;text-wrap:balance}
.beat-sub{margin-top:18px;color:var(--mid);max-width:30em;font-size:clamp(15px,1.15vw,18px);line-height:1.6}
@media (max-width:900px){.beats-rest{grid-template-columns:1fr}}

.hud,.overlay,.hud-line{display:none}
.live .hero{height:300vh;height:300svh}
.live .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.live .scene,.live .scrim{height:100%}
.live .beats{position:absolute;inset:0;pointer-events:none}
.live .beat{position:absolute}
.live .b0{left:var(--g);right:var(--g);bottom:clamp(40px,9vh,100px);min-height:0;padding:0;pointer-events:auto}
.live .beats-rest{position:absolute;inset:0;padding:0;border:0;display:block}
.live .b1,.live .b2,.live .b3{left:var(--g);top:50%;width:min(38vw,560px);translate:0 -50%}
.live .beat-k{display:none}
.live .h-beat{margin-top:0;font-size:clamp(36px,4.7vw,76px);line-height:1.07}
.live .beat-sub{margin-top:clamp(18px,2.6vh,26px)}
.live .hud{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hud > div{position:absolute;display:flex;align-items:center;gap:10px}
.hud-tl{left:var(--g);top:calc(var(--nav) + 18px)}
.hud-tl b{font-weight:500;color:var(--mid)}
.hud-tr{right:var(--g);top:calc(var(--nav) + 18px);color:var(--text)}
.hud-tr::before{content:"";width:6px;height:6px;border:1px solid var(--text);transform:rotate(45deg)}
.hud-bl{left:var(--g);bottom:22px}
.hud-br{right:var(--g);bottom:22px}
.hud-br span{transition:color .5s}
.hud-br span.on{color:var(--text)}
.hud-br i{width:16px;height:1px;background:var(--line2)}
.hud-bar{position:relative;width:96px;height:1px;margin-left:10px;background:var(--line2)}
.hud-bar b,.hud-line b{position:absolute;inset:0;background:var(--text);transform-origin:0 50%;transform:scaleX(0)}
.live .overlay{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
.ov{position:absolute;inset:0;opacity:0;visibility:hidden}
.ovl{position:absolute;left:0;top:0;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);white-space:nowrap}
.ovl.c{translate:-50% -50%}.ovl.r{translate:calc(-100% - 4px) -50%}.ovl.l{translate:0 -50%}.ovl.rr{translate:-100% -50%}
.ovl.dm{color:var(--dim)}
.kpl{line-height:1.2;color:var(--dim)}
.kpl .sh{display:none}
.kpl b{display:block;margin-top:8px;font:600 clamp(15px,1.5vw,22px)/1 var(--sans);letter-spacing:-.01em;color:var(--text);text-transform:none}
.roll{display:inline-block;height:1.2em;line-height:1.2;overflow:hidden;vertical-align:top}
.roll > span{display:block}
.roll i{display:block;height:1.2em;line-height:1.2;font-style:normal}
.pill-l .roll i:first-child{color:var(--acc)}
.pill-l .roll i:last-child{color:var(--text)}
@media (max-width:768px){
  .live .hero{height:300vh;height:300svh}
  .live .b0{bottom:clamp(26px,5vh,56px)}
  .live .b1,.live .b2,.live .b3{top:auto;bottom:clamp(30px,6vh,64px);right:var(--g);width:auto;translate:none}
  .live .h-beat{font-size:clamp(34px,10vw,46px)}
  .live .hud-tl,.live .hud-br,.hud-town{display:none}
  .live .hud-bl{top:calc(var(--nav) + 12px);bottom:auto}
  .live .hud-tr{top:calc(var(--nav) + 12px)}
  .live .hud{font-size:9.5px;letter-spacing:.1em}
  .live .hud-line{display:block;position:absolute;left:0;right:0;top:var(--nav);height:1px;background:var(--line);z-index:2}
  .scrim-a{background:linear-gradient(0deg,rgba(5,6,7,.96) 0%,rgba(5,6,7,.8) 36%,rgba(5,6,7,0) 60%)}
  .scrim-b{background:linear-gradient(0deg,rgba(5,6,7,.96) 0%,rgba(5,6,7,.72) 30%,rgba(5,6,7,0) 44%)}
  .ovl{font-size:8.5px;letter-spacing:.1em}
  .kpl .lg{display:none}.kpl .sh{display:inline}
  .kpl b{font-size:13px;margin-top:5px}
  .lede{font-size:15.5px}
}


/* tools */
.tools{border-top:1px solid var(--line)}
.tools::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(221,227,234,.075) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(75% 55% at 50% 45%,#000 20%,transparent 80%);mask-image:radial-gradient(75% 55% at 50% 45%,#000 20%,transparent 80%);pointer-events:none}
.tgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.tool{grid-column:1/-1;display:flex;flex-direction:column;gap:16px;min-width:0}
.tool-intake{grid-column:1/7}.tool-dispatch{grid-column:7/-1}
@media (max-width:1080px){.tool-intake,.tool-dispatch{grid-column:1/-1}}
.panel{position:relative;background:linear-gradient(180deg,rgba(221,227,234,.045),rgba(221,227,234,.012) 38%),rgba(12,15,18,.84);border:1px solid var(--line);border-radius:16px;box-shadow:inset 0 1px 0 rgba(221,227,234,.06),0 40px 90px -50px rgba(0,0,0,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden;flex:1}
.ph{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.led{width:7px;height:7px;border-radius:50%;background:var(--text);box-shadow:0 0 0 3px rgba(221,227,234,.08);flex:none}
.ph h3{font:600 14px/1 var(--sans);letter-spacing:0}
.tag{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line2);padding:5px 8px;border-radius:999px;white-space:nowrap}
.replay{margin-left:auto;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);background:transparent;border:1px solid var(--line2);border-radius:999px;padding:8px 12px;cursor:pointer;transition:color .3s,border-color .3s}
.replay:hover{color:var(--text);border-color:#3A434D}
.pb{padding:clamp(14px,1.6vw,20px)}
.tool-cap{font-size:14.5px;line-height:1.6;color:var(--mid);max-width:46em}
.tool-cap b{font-weight:600;color:var(--text)}

/* records */
.rec-top{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-bottom:14px}
.search{flex:1 1 260px;display:flex;align-items:center;gap:10px;background:rgba(5,6,7,.6);border:1px solid var(--line);border-radius:10px;padding:0 12px;transition:border-color .3s}
.search:focus-within{border-color:#4A545F}
.search svg{flex:none;color:var(--dim)}
.search input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);font:400 14px/1 var(--sans);padding:12px 0;outline:none}
.search input::placeholder{color:var(--dim)}
.rec-count{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.rec-count b{color:var(--text);font-weight:500}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.kpi{background:#090B0E;padding:14px 16px}
.kpi > span{display:block;font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.kpi b{display:block;margin-top:8px;font:300 clamp(24px,2.4vw,34px)/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi-late > span{color:var(--mid)}
.rtable{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rrow{display:grid;grid-template-columns:2.3fr 1.5fr .8fr 1.1fr .9fr;gap:14px;align-items:center;padding:13px 16px;border-top:1px solid var(--line);font-size:14px;line-height:1.35;transition:background-color .7s}
.rrow:first-child{border-top:0}
.rhead{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:#090B0E;padding-block:11px}
.c-job{color:var(--text);font-weight:400;min-width:0}
.c-cust{color:var(--mid);min-width:0}
.c-due{font:400 12px/1 var(--mono);color:var(--mid);transition:color .6s}
.c-val{text-align:right;font:400 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:7px;font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line2);border-radius:999px;padding:6px 9px;color:var(--mid);white-space:nowrap;transition:color .6s,border-color .6s}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.rrow.is-late{background:rgba(224,105,63,.075)}
.rrow.is-late .pill{color:var(--acc);border-color:rgba(224,105,63,.55)}
.rrow.is-late .c-due{color:var(--acc)}
.rrow.is-done .pill{color:var(--text);border-color:#4A545F}
.rempty{padding:16px;color:var(--dim);font-size:14px;border-top:1px solid var(--line)}
@media (max-width:700px){
  .rhead{display:none}
  .rrow{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"job job val" "cust due st";row-gap:9px}
  .c-job{grid-area:job}.c-val{grid-area:val}.c-cust{grid-area:cust;font-size:13px}.c-due{grid-area:due}.c-st{grid-area:st}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* intake */
.intake{display:grid;gap:14px}
.msg{background:rgba(5,6,7,.6);border:1px solid var(--line);border-radius:12px;padding:16px}
.msg-text{margin-top:12px;font:400 15px/1.7 var(--sans);color:var(--mid)}
.msg-text mark{background:transparent;color:inherit;border-radius:3px;padding:1px 2px;box-shadow:inset 0 -1px 0 rgba(221,227,234,.22);transition:background-color .6s,color .6s,box-shadow .6s}
.msg-text mark.on{background:rgba(221,227,234,.1);color:var(--text);box-shadow:inset 0 -1px 0 var(--text)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.fields > div{background:#090B0E;padding:12px 14px;min-width:0}
.fields dt{font:500 9.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fields dd{margin-top:7px;font:400 14px/1.35 var(--sans);color:var(--text);min-height:1.35em;overflow-wrap:anywhere}
.fields dd.empty{color:var(--dim)}
.intake-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.istate{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}
.btn{font:600 13px/1 var(--sans);color:var(--bg);background:var(--text);border:0;border-radius:999px;padding:12px 16px;cursor:pointer;transition:background-color .4s,color .4s}
.btn[disabled]{background:var(--line);color:var(--dim);cursor:default}
@media (max-width:420px){.fields{grid-template-columns:1fr}}

/* dispatch */
.board{display:grid;grid-template-columns:minmax(48px,.6fr) repeat(5,minmax(0,1fr));gap:5px}
.bh{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:2px 2px 6px}
.crew{font:600 12px/1.2 var(--sans);display:flex;flex-direction:column;justify-content:center;padding-right:4px}
.crew small{display:block;margin-top:3px;font:400 11px/1.2 var(--sans);color:var(--dim)}
.slot{position:relative;min-height:64px;border-radius:8px;background:rgba(5,6,7,.55);border:1px dashed #1F262D;display:grid;align-content:start;padding:4px;transition:border-color .4s,background-color .4s}
.slot > .chip{grid-area:1/1}
.slot > .chip + .chip{margin:10px 0 0 8px}
.slot.conflict{border:1px solid rgba(221,227,234,.75);background:repeating-linear-gradient(135deg,rgba(221,227,234,.09) 0 5px,transparent 5px 10px)}
.slot.conflict::after{content:"Conflict";position:absolute;right:4px;bottom:-7px;font:500 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--text);color:var(--bg);padding:3px 5px;border-radius:4px;z-index:2}
.chip{display:block;width:100%;min-width:0;overflow-wrap:break-word;text-align:left;font:500 10.5px/1.25 var(--sans);letter-spacing:-.005em;color:var(--text);background:#141A20;border:1px solid #28303A;border-radius:6px;padding:7px 5px;cursor:pointer;box-shadow:0 8px 18px -10px rgba(0,0,0,.9);transition:border-color .3s;position:relative;z-index:1}
.chip small{display:block;margin-top:3px;font:400 10px/1.2 var(--sans);color:var(--dim)}
.chip:hover{border-color:#4A545F}
.tray{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:10px 12px;border:1px dashed #1F262D;border-radius:10px;min-height:60px}
.tray-slots{display:flex;gap:8px;flex-wrap:wrap}
.tray-slots .chip{width:auto}
.dstat{margin-top:12px;font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}
.dstat.bad{color:var(--text)}
@media (max-width:640px){
  .board{grid-template-columns:40px repeat(3,minmax(0,1fr));gap:5px}
  .bcorner{grid-area:1/1}
  .crew{grid-row:1;flex-direction:row;align-items:baseline;gap:6px;flex-wrap:wrap;padding:0 2px 6px;font-size:11.5px}
  .crew small{margin-top:0;font-size:10.5px}
  .crew-a{grid-column:2}.crew-b{grid-column:3}.crew-c{grid-column:4}
  .bh{grid-column:1;align-self:center;padding:0}
  .bh:nth-child(2){grid-row:2}.bh:nth-child(3){grid-row:3}.bh:nth-child(4){grid-row:4}.bh:nth-child(5){grid-row:5}.bh:nth-child(6){grid-row:6}
  .slot[data-k^="A"]{grid-column:2}.slot[data-k^="B"]{grid-column:3}.slot[data-k^="C"]{grid-column:4}
  .slot[data-k$="0"]{grid-row:2}.slot[data-k$="1"]{grid-row:3}.slot[data-k$="2"]{grid-row:4}.slot[data-k$="3"]{grid-row:5}.slot[data-k$="4"]{grid-row:6}
  .slot{min-height:50px}
  .chip small{display:none}
  .chip{font-size:10.5px;padding:7px 5px;letter-spacing:-.01em}
}

/* services */
.svc{border-top:1px solid var(--line)}
.svc li{position:relative;display:grid;grid-template-columns:minmax(0,180px) minmax(0,1.25fr) minmax(0,1fr) 48px;gap:16px 36px;align-items:baseline;padding:clamp(26px,4.4vh,44px) 0;border-bottom:1px solid var(--line)}
.svc li::before{content:"";position:absolute;inset:0 -16px;background:rgba(221,227,234,.03);opacity:0;transition:opacity .5s;pointer-events:none;border-radius:8px}
.svc-title{font:300 clamp(26px,3vw,44px)/1.1 var(--sans);letter-spacing:-.03em}
.svc p{color:var(--mid);font-size:16px;line-height:1.6;max-width:30em}
.svc-dots{align-self:center;justify-self:end;width:40px;height:22px;background-image:radial-gradient(circle,var(--dim) 1.3px,transparent 1.7px);background-size:8px 8px;opacity:.45;transition:opacity .5s,transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine){.svc li:hover::before{opacity:1}.svc li:hover .svc-dots{opacity:1;transform:translateX(6px)}}
@media (max-width:900px){.svc li{grid-template-columns:1fr;gap:10px}.svc-dots{display:none}}
.pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:clamp(64px,10vh,110px)}
.pt{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 24px 28px;min-height:168px;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.pt p{font:300 clamp(17px,1.35vw,20px)/1.45 var(--sans);text-wrap:balance}
.pt-price p{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pt-price b{font:300 clamp(44px,4.4vw,64px)/.9 var(--sans);letter-spacing:-.045em}
.pt-price span{font-size:15px;color:var(--mid)}
@media (max-width:900px){.pts{grid-template-columns:1fr}.pt{min-height:0}}

/* process */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);padding-top:48px}
.track{position:absolute;left:0;right:0;top:12px;height:1px;background:var(--line)}
.track-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--dim),var(--text));transform-origin:0 50%}
.step{position:relative}
.step::before{content:"";position:absolute;top:-41px;left:0;width:10px;height:10px;transform:rotate(45deg);background:var(--bg);border:1px solid #3A434D;transition:background-color .5s,border-color .5s}
.step.on::before{background:var(--text);border-color:var(--text)}
.step-n{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--dim);transition:color .5s}
.step.on .step-n{color:var(--text)}
.step h3{margin-top:16px;font:600 clamp(20px,1.7vw,25px)/1.2 var(--sans);letter-spacing:-.015em}
.step p{margin-top:12px;color:var(--mid);font-size:15px;line-height:1.65}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;padding-top:0;padding-left:38px;gap:44px}
  .track{left:4px;right:auto;top:6px;bottom:0;width:1px;height:auto}
  .track-fill{transform-origin:50% 0;background:linear-gradient(180deg,var(--dim),var(--text))}
  .step::before{top:2px;left:-38px}
}

/* tools: link out to the full working tools */
.tool-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.tools-all{margin-top:clamp(36px,6vh,64px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}

/* numbers: the ROI calculator */
.numbers{border-top:1px solid var(--line)}
.roi{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start}
.roi-in{padding:clamp(18px,2vw,28px)}
.roi-f + .roi-f{margin-top:18px}
.roi-f label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:400 15px/1.3 var(--sans);color:var(--text)}
.roi-f output{font:500 13px/1 var(--mono);color:var(--mid);font-variant-numeric:tabular-nums}
.roi-note{margin-top:22px;font-size:13.5px;line-height:1.55;color:var(--dim);max-width:40em}
.roi-big{display:flex;align-items:flex-start;gap:.04em;font:300 clamp(64px,9vw,148px)/.9 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.roi-big .cur{font-size:.42em;margin-top:.14em;color:var(--acc)}
.roi-cap{margin-top:14px;color:var(--mid);font-size:clamp(15px,1.2vw,17px)}
.roi-mini{margin-top:clamp(28px,5vh,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.roi-mini > div{padding:18px 16px 4px 0;min-width:0}
.roi-mini b{display:block;white-space:nowrap;font:300 clamp(28px,2.8vw,40px)/1 var(--sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.roi-mini span{display:block;margin-top:8px}
.roi-bar{margin-top:26px;height:10px;border-radius:999px;background-image:radial-gradient(circle,rgba(221,227,234,.18) 1.4px,transparent 1.8px);background-size:10px 10px;position:relative;overflow:hidden}
.roi-bar i{position:absolute;inset:0;background-image:radial-gradient(circle,var(--text) 1.4px,transparent 1.8px);background-size:10px 10px;transform-origin:0 50%;width:75%}
.roi-legend{margin-top:10px;display:flex;justify-content:space-between;gap:12px}
@media (max-width:900px){.roi{grid-template-columns:1fr}.roi-mini{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.roi-mini{grid-template-columns:1fr}}