/* Home page sections after the film and statement. Shared components live in site.css. */

/* ---------- clients ---------- */
.clients{padding-bottom:clamp(44px,5vw,72px)}
.h-clients-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap}
.clients .h-clients-head h2{text-align:left;margin:0;font-size:clamp(28px,3.2vw,46px);line-height:1.12;max-width:22ch}
.clients .marq{margin-top:clamp(32px,3.5vw,48px)}

/* ---------- the stack ---------- */
.h-stack-g{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(40px,6vw,96px);align-items:start}
.h-stack-intro{display:grid;gap:24px;justify-items:start;position:sticky;top:110px}
.h-stack-intro h2{font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.03em;max-width:13ch;text-wrap:balance}
.h-ledger{list-style:none;border-top:1px solid var(--ink)}
.h-ledger li{border-bottom:1px solid var(--line)}
.h-ledger a{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:6px 28px;align-items:baseline;padding:30px 52px 30px 0;transition:background .2s}
.h-ledger a::after{content:"";position:absolute;right:14px;top:50%;width:10px;height:10px;margin-top:-5px;border-top:1.7px solid var(--brand);border-right:1.7px solid var(--brand);transform:rotate(45deg);transition:transform .2s}
.h-ledger a:hover{background:linear-gradient(90deg,transparent,rgba(51,161,255,.06))}
.h-ledger a:hover::after{transform:translateX(4px) rotate(45deg)}
.h-ledger-k{font-size:14px;font-weight:600;color:var(--brand)}
.h-ledger-b{display:grid;gap:6px}
.h-ledger-b b{font-family:var(--display);font-size:clamp(21px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.h-ledger-b span{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:46ch}
.h-ledger-v{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
/* word labels sit in the body face; mono is kept for numbers only */
.h-ledger-v.is-word{font-family:var(--body);font-size:14.5px;font-weight:600;white-space:normal;max-width:17ch;text-align:right;line-height:1.35}

/* ---------- ELD reliability wedge ---------- */
.h-eld{overflow:hidden}
.h-eld .phero-grid{opacity:.45}
.h-eld-in{position:relative}
.h-eld-head{display:grid;gap:20px;max-width:900px}
.h-eld-head .kicker{color:var(--warn)}
.h-eld-head h2{font-size:clamp(36px,4.9vw,70px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.h-eld-head .lede{max-width:64ch}

.h-eld-fix{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,5vw,80px);align-items:center;margin-top:clamp(56px,6vw,96px)}
.h-eld-pic{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--navy-1);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.h-eld-pic img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:78% 50%}
.h-eld-copy{display:grid;gap:24px;align-content:start}
.h-eld-copy h3{font-size:clamp(28px,2.8vw,40px);line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.h-eld-copy .ticks{gap:14px;font-size:16px}

/* ---------- proof ---------- */
.h-srow .srow-n{font-size:clamp(44px,5vw,76px)}
.h-proof-foot{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;margin-top:32px}

/* ---------- deployment ---------- */
.h-deploy-line{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 64px;align-items:start;margin-top:clamp(40px,4.5vw,64px);padding-top:28px;border-top:1px solid var(--ink)}
.h-deploy-line > p{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:58ch}
.h-deploy-line > p b{color:var(--ink);font-weight:600}
.h-deploy-line .link-cta{grid-column:1}
/* .terms (site.css) wraps on its own; on home it only spans the copy + link rows */
.h-terms{grid-row:span 2;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:20px 28px;align-items:start}
.h-terms dd{max-width:17ch}
.h-terms dt{font-size:clamp(21px,1.7vw,25px)}
.h-founder-q{margin:4px 0 0;padding-left:18px;border-left:2px solid var(--brand)}
.h-founder-q p{font-family:var(--display);font-size:clamp(20px,1.8vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.h-founder-q footer{margin-top:6px;font-size:14px;color:var(--ink-2)}
.h-timeline{margin:0;font-size:14px;font-weight:500;line-height:1.7;color:var(--ink)}
.h-eld-copy .btn-row{align-items:center;gap:12px 28px}
.h-eld .h-eld-pdf{color:var(--electric,#5ec2ff)}
/* statement: shorter runway (about 1.1 screens including the pin) */
.statement .pin{height:80svh}

/* ---------- E.L.L.A. ---------- */
.h-ella{overflow:hidden}
.h-ella-orb{position:absolute;right:-12vw;top:-18vw;width:62vw;max-width:860px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(51,161,255,.26),transparent 62%);pointer-events:none}
.h-ella-g{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.h-ella-copy{display:grid;gap:26px;justify-items:start}
.h-ella h2{display:grid;gap:18px}
.h-ella-mark{height:clamp(46px,5vw,76px);width:auto}
.h-ella h2 span{font-size:clamp(30px,3.4vw,48px);line-height:1.1;letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.h-ella-say{border-left:2px solid var(--electric);padding:4px 0 4px 22px;max-width:40ch}
.h-ella-say p{font-family:var(--display);font-size:clamp(20px,1.9vw,26px);font-weight:500;line-height:1.4;letter-spacing:-.015em;color:var(--white)}
.h-ella-say footer{margin-top:10px;font-size:13.5px;color:var(--fg-2)}
.h-ella-foot{display:flex;align-items:center;gap:20px 32px;flex-wrap:wrap;margin-top:4px}
.h-ella-foot .price-big small{color:var(--fg-2)}
.h-ella-pic{margin:0;padding:14px;border-radius:20px;background:#071526;border:1px solid var(--rule);box-shadow:0 50px 100px -40px rgba(0,0,0,.85)}
.h-ella-pic img{width:100%;height:auto;border-radius:10px}

/* ---------- pricing ---------- */
.h-price-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.h-price-col{display:grid;align-content:start;gap:8px;padding:clamp(24px,2.6vw,36px);background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.h-price-col h3{font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:0;color:var(--brand)}
.h-plist div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.h-plist div:last-child{border-bottom:0}
.h-plist dt{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:1.25}
.h-plist dt span{display:block;margin-top:4px;font-family:var(--body);font-size:14.5px;font-weight:400;letter-spacing:0;color:var(--ink-2)}
.h-plist dd{font-family:var(--display);font-size:clamp(32px,3vw,44px);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.h-plist dd small{font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink-2);margin-left:4px}
.h-included{margin-top:8px;padding:16px 18px;border-radius:12px;background:var(--paper);font-size:15px;line-height:1.6;color:var(--ink)}
.h-price-foot{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;margin-top:28px}
.h-price-foot .fine{max-width:60ch;font-size:14.5px}

/* ---------- founder + partners ---------- */
.h-founder-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px clamp(40px,6vw,96px);align-items:end}
.h-founder-copy{display:grid;gap:12px;justify-items:start}
.h-founder-copy p{font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--ink-2);max-width:48ch}
.h-founder h2{font-size:clamp(32px,3.6vw,52px);line-height:1.1;letter-spacing:-.03em;max-width:18ch;text-wrap:balance}
.h-partners-head{display:flex;justify-content:space-between;align-items:center;gap:12px 32px;flex-wrap:wrap;margin-top:clamp(64px,7vw,104px);padding-top:28px;border-top:1px solid var(--line)}
.h-partners-head h3{font-size:20px;letter-spacing:-.015em;color:var(--ink)}
.h-founder .marq{margin-top:28px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .h-ledger a{grid-template-columns:minmax(0,1fr) auto;padding-right:44px}
  .h-ledger-k{grid-column:1/-1}
}
@media (max-width:980px){
  .h-stack-g,.h-eld-fix,.h-ella-g,.h-founder-g,.h-price-g{grid-template-columns:1fr}
  .h-stack-intro{position:static}
  .h-stack-intro h2{max-width:18ch}
  .h-ella-pic{max-width:640px}
}
@media (max-width:600px){
  .h-clients-head{display:grid}
  .h-ledger a{grid-template-columns:1fr;gap:6px;padding:24px 40px 24px 0}
  .h-ledger-v{font-size:13px;color:var(--brand)}
  .h-ledger-v.is-word{text-align:left;max-width:none}
  .h-plist dt{font-size:18px}
  .h-plist dd{font-size:30px;text-align:right}
  .h-plist dd small{display:block;margin:6px 0 0;font-size:13px}
  .h-price-foot .btn-row,.h-eld-copy .btn-row{width:100%}
  .h-price-foot .btn,.h-eld-copy .btn{flex:1 1 auto;justify-content:center}
  .h-eld-copy .btn{white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .h-ledger a,.h-ledger a::after{transition:none}
}

/* ---------- rhythm: keep the post-film story to about seven desktop screens ---------- */
.h-stack,.h-eld,.h-proof,.h-ella,.h-price,.h-founder{padding-block:clamp(64px,6.4vw,100px)}
.h-proof .sh,.h-price .sh{margin-bottom:clamp(32px,3.5vw,48px)}
.h-ledger a{padding-block:24px}
.h-eld-fix{margin-top:clamp(48px,5vw,72px)}
.h-eld-pic img{aspect-ratio:16/10}
.h-partners-head{margin-top:clamp(56px,5.5vw,80px)}
@media (max-width:900px){.h-srow .srow-i:last-child:nth-child(odd){grid-column:1/-1}}

/* ---------- film captions: legible over bright frames ---------- */
.js .beat[data-in="-0.1"]{opacity:1}
.beat::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,13,28,.72) 0%,rgba(3,13,28,.45) 32%,rgba(3,13,28,0) 58%),linear-gradient(to top,rgba(3,13,28,.6) 0%,rgba(3,13,28,0) 48%)}
.beat.right::before{background:linear-gradient(270deg,rgba(3,13,28,.9) 0%,rgba(3,13,28,.82) 34%,rgba(3,13,28,.5) 52%,rgba(3,13,28,0) 70%),linear-gradient(to top,rgba(3,13,28,.6) 0%,rgba(3,13,28,0) 48%)}
.beat[data-in="-0.1"]::before{background:linear-gradient(90deg,rgba(3,13,28,.9) 0%,rgba(3,13,28,.8) 40%,rgba(3,13,28,.5) 56%,rgba(3,13,28,0) 74%),linear-gradient(to top,rgba(3,13,28,.6) 0%,rgba(3,13,28,0) 48%)}
.beat .in{position:relative}
.beat h1,.beat h2,.beat p{text-shadow:0 2px 28px rgba(3,13,28,.6)}
.beat .eyebrow{font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.01em;text-transform:none;color:rgba(244,247,251,.82)}
.beat .eyebrow::before{background:var(--electric)}
.h-cta-call{display:none}
@media (max-width:759px){
  .beat::before,.beat.right::before,.beat[data-in="-0.1"]::before{background:linear-gradient(to top,rgba(5,12,24,.92) 0%,rgba(5,12,24,.78) 42%,rgba(5,12,24,.35) 62%,rgba(5,12,24,0) 78%)}
  .beat.right{justify-content:flex-start}.beat.right .in{text-align:left;justify-items:start}
  .beat h1{font-size:clamp(36px,10.5vw,48px)}
  .beat h2{font-size:clamp(30px,8.6vw,40px)}
  .beat p{font-size:16px}
  .beat .cta .btn{flex:1 1 auto;justify-content:center}
  .h-cta-call{display:inline-flex}.h-cta-see{display:none}
}

/* statement into the light panel: keep the rounded hand-off, drop the empty navy tab */
.notch::after{content:none}

/* ---------- logo marquees ---------- */
.h-head-act{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
.h-marq-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:600;color:var(--ink-2);background:transparent}
.h-marq-btn:hover{color:var(--ink);border-color:var(--ink-2)}
.h-marq-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.h-marq-btn .i-play{display:none;fill:currentColor;stroke:none}
.h-marq-btn[aria-pressed="true"] .i-play{display:block}.h-marq-btn[aria-pressed="true"] .i-pause{display:none}
.h-marq .row{gap:0}
.h-marq ul{list-style:none;display:flex;align-items:center;gap:64px;padding:0 64px 0 0;margin:0}
.h-marq li{display:flex;align-items:center;flex:none}
.h-marq img{height:40px;width:auto;filter:grayscale(1) brightness(.55) contrast(1.2);opacity:.8}
.h-marq img:hover{filter:none;opacity:1}
.h-marq img.is-badge{height:68px}
.h-marq img.is-tall{height:52px}
/* optical balance: Motive is a heavy wide wordmark, KORE a light stacked mark */
.h-marq img[src$="partner-motive.png"]{height:32px}
.h-marq img[src$="partner-kore.png"]{height:46px;filter:grayscale(1) brightness(.35) contrast(1.3)}
.h-marq .word{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:#3d4655;opacity:.85;white-space:nowrap}

@media (max-width:980px){.h-deploy-line{grid-template-columns:1fr}.h-terms{grid-row:auto}}
@media (max-width:600px){.h-terms{grid-template-columns:1fr 1fr}.h-terms>div:last-child{grid-column:1/-1}}
@media (max-width:600px){
  .h-marq ul{gap:44px;padding-right:44px}
  .h-marq img.is-badge{height:60px}
}
@media (min-width:761px){.beat[data-in="-0.1"] h1{font-size:clamp(40px,5.6vw,84px)}}