/* Landing page motion layer (Robbie 2026-11-14). Everything here is decoration: pages read fine without it. */
.lp-hero{isolation:isolate}
.lp-liquid{position:absolute;inset:0;width:100%;height:100%;z-index:1;mix-blend-mode:screen;opacity:.75;pointer-events:none}
.lp-hero::before{z-index:1}
.lp-wave{position:absolute;left:0;right:0;width:100%;height:clamp(40px,7vw,110px);z-index:3;pointer-events:none;display:block}
.lp-wave.bottom{bottom:-1px}
.lp-wave.top{top:-1px}
.lp-trust{position:relative;overflow:hidden}
.lp-trust .wrap{position:relative;z-index:2;padding-block:clamp(40px,6vw,80px)}

/* morphing type */
.lp .w{display:inline-block;white-space:nowrap}
.lp .ch{display:inline-block;will-change:transform,filter,opacity}
.lp-hero h1 em .ch{background:linear-gradient(100deg,#8DB4FF 0%,#FFFFFF 35%,#8DB4FF 55%,#4F8BFF 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lpShine 6s linear infinite}
@keyframes lpShine{to{background-position:-300% 0}}

/* spine */
.lp-spine-wrap{margin-top:36px;display:flex;gap:28px;align-items:center}
.lp-spine{height:clamp(200px,calc(100vh - 560px),400px);width:auto;flex:none;overflow:visible}
/* keep the whole sticky panel (heading + spine) inside the screen under the two-row header */
@media (min-width:961px){.lp-split .panel>div{top:160px}.lp-split .panel h2{font-size:clamp(32px,3.4vw,48px)}.lp-spine-wrap{margin-top:28px}}
.lp-spine .v{fill:rgba(141,180,255,.22);stroke:rgba(141,180,255,.55);stroke-width:1.2;transition:fill .45s,stroke .45s,filter .45s}
.lp-spine .d{fill:rgba(255,255,255,.08)}
.lp-spine .v.warm{fill:rgba(141,180,255,.45);stroke:#8DB4FF}
.lp-spine .v.hot{fill:#FF6B5E;stroke:#FFB4AC;filter:drop-shadow(0 0 8px rgba(255,107,94,.9))}
.lp-spine-key{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);display:grid;gap:10px}
.lp-spine-key b{color:#fff;font-weight:400;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.01em;text-transform:none;font-family:var(--font);display:block;min-height:2.6em;transition:opacity .3s}

/* cause steps: scroll-driven, all text visible */
.lp-step{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:clamp(28px,6vh,64px) 0;border-bottom:1px solid var(--rule);transition:opacity .4s}
.lp-step:first-child{border-top:1px solid var(--rule)}
.lp-step .num{font-family:var(--mono);color:var(--blue);font-size:15px;padding-top:6px}
.lp-step h3{font-size:clamp(22px,2.4vw,30px);font-weight:400}
.lp-step p{margin-top:10px;color:var(--muted);max-width:44ch}
.lp-m .lp-step{opacity:.28}
.lp-m .lp-step.on{opacity:1}
@media (min-width:961px){.lp-split .list{align-content:start;padding-block:12vh 30vh}.lp-step{min-height:34vh;align-content:center}}

/* comparison strike */
.lp-cmp .them .txt{background:linear-gradient(currentColor,currentColor) 0 55%/var(--strike,0%) 1.5px no-repeat}

/* booking steps progress line */
.lp-steps{position:relative}
.lp-steps::after{content:"";position:absolute;left:-14px;top:0;width:2px;height:100%;background:var(--blue);transform-origin:top;transform:scaleY(var(--fill,1))}
@media (max-width:560px){.lp-steps::after{left:-10px}}

/* phones: a small spine stays pinned beside the causes */
.lp-mob-spine{display:none}
@media (max-width:960px){
  .lp-split .panel .lp-spine-wrap{display:none}
  .lp-split .list{display:grid;grid-template-columns:78px 1fr;column-gap:12px;align-content:start}
  .lp-mob-spine{display:block;grid-column:1;grid-row:1/span 4;position:sticky;top:96px;align-self:start;background:var(--deep,#0A1B3D);border-radius:8px;padding:10px 6px}
  .lp-mob-spine .lp-spine{width:100%;height:auto;max-height:calc(100vh - 140px)}
  .lp-step{grid-column:2;grid-template-columns:30px 1fr;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .lp-liquid{display:none}
  .lp-hero h1 em .ch{animation:none}
  .lp-m .lp-step{opacity:1}
}