/* Recall motion layer — split hero with a contained terrain panel + restrained scroll transitions.
   Drop-in on top of site.css; the rest of the markup is unchanged. */

/* ---------- scroll progress under the header ---------- */
.scroll-bar{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;background:var(--sky);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- hero ---------- */
.hx{position:relative;height:300vh;background:var(--paper);color:var(--ink)}
/* light hero, same look as the original: topographic lines on the right, soft sky glow */
.hx-stick{background-color:var(--paper);background-image:linear-gradient(100deg,var(--paper) 12%,rgba(250,251,252,.55) 48%,rgba(250,251,252,0) 75%),url(../img/topo.svg);background-size:cover,cover;background-position:center,right center;background-repeat:no-repeat}
.hx-stick::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 85% 30%,rgba(137,206,239,.28),transparent 70%);pointer-events:none}
.hx-grid{position:relative;z-index:1}
.hx-stick{position:sticky;top:calc(env(safe-area-inset-top,0px) + 61px);height:calc(100vh - 61px);min-height:580px;overflow:hidden;display:flex;align-items:center}
.hx-grid{width:100%;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,1rem + 3vw,4rem);align-items:center;height:100%;padding-block:clamp(1.5rem,4vh,3rem)}
.hx-copy{display:flex;flex-direction:column;gap:1.6rem;min-width:0}
.hx-stages{display:grid}
.hx-stage{grid-area:1/1;display:flex;flex-direction:column;gap:1.15rem;align-self:center;visibility:hidden}
.hx-stage.on{visibility:visible}
.hx-stage>*{will-change:transform,opacity}
.hx-stage .eyebrow{color:var(--blue)}
.hx h1,.hx h2{color:var(--forest);font-size:clamp(2.2rem,1.5rem + 2.6vw,3.7rem);line-height:1.14;margin:0}
.hx h1 span,.hx h2 em{color:var(--blue);font-style:normal}
.hx .lead{color:var(--muted);max-width:46ch;margin:0}
.hx .kick{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}

/* step indicator: three short bars that fill with scroll */
.hx-steps{list-style:none;margin:0;padding:0;display:flex;gap:1.1rem}
.hx-steps li{display:flex;flex-direction:column;gap:.45rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);transition:color .4s}
.hx-steps li.on{color:#fff}
.hx-steps i{display:block;width:72px;height:2px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.hx-steps i::after{content:"";position:absolute;inset:0;background:var(--sky);transform-origin:0 50%;transform:scaleX(var(--f,0))}

/* the terrain keeps its own column (never behind the copy) but has no frame: its edges feather into the background */
.hx-viz{position:relative;height:min(100%,640px);min-height:420px}
.hx-viz canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.js-motion .hx-viz{opacity:0;transition:opacity 1.4s ease .15s}
.js-motion .hx.ready .hx-viz{opacity:1}

/* HUD inside the panel */
.hx-hud{position:absolute;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.55rem;pointer-events:none;white-space:nowrap;z-index:2}
.hx-hud b{color:var(--forest);font-weight:600}
.hx-hud .live{width:7px;height:7px;border-radius:50%;background:#5FD3A8;box-shadow:0 0 0 0 rgba(95,211,168,.6);animation:hxpulse 2s infinite}
@keyframes hxpulse{70%{box-shadow:0 0 0 10px rgba(95,211,168,0)}100%{box-shadow:0 0 0 0 rgba(95,211,168,0)}}
.hx-hud.tl{top:18px;left:20px}
.hx-hud.tr{top:18px;right:20px}
.hx-hud.bl{bottom:18px;left:20px;transition:opacity .4s}
.hx-meter{display:inline-flex;gap:3px}
.hx-meter i{width:12px;height:4px;border-radius:2px;background:rgba(30,43,55,.12);transition:background .3s}
.hx-meter i.r{background:#D65A3E}.hx-meter i.g{background:#1A9670}
.hx-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:opacity .4s;pointer-events:none;z-index:1}
.hx-hint .arrow{display:inline-block;animation:hxbob 1.6s ease-in-out infinite}
@keyframes hxbob{50%{transform:translateY(4px)}}

@media (max-width:1100px){.hx-hud.tl span:last-child{display:none}.hx-hud.tl{gap:0}}
@media (max-width:860px){
  .hx{height:260vh}
  .hx-stick{top:calc(env(safe-area-inset-top,0px) + 57px);height:calc(100svh - 57px);min-height:0;align-items:stretch}
  .hx-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,38%) auto;gap:1.1rem;padding-block:14px 2.6rem;align-content:start}
  .hx-viz{order:-1;height:100%;min-height:0}
  .hx-stick{background-image:linear-gradient(180deg,rgba(250,251,252,.35),rgba(250,251,252,.85)),url(../img/topo.svg)}
  .hx-copy{gap:1rem}
  .hx-steps{gap:.7rem}.hx-steps i{width:48px}.hx-steps li{font-size:.6rem}
  .hx h1,.hx h2{font-size:2rem}
  .hx .lead{font-size:.98rem}
  .hx-hud.bl{display:none}
  .hx-hud.tl,.hx-hud.tr{top:12px}.hx-hud.tl{left:14px}.hx-hud.tr{right:14px}
  .hx-hint{bottom:10px}
}

/* ---------- reveals for the rest of the page ---------- */
.js-motion [data-rv]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js-motion [data-rv].in{opacity:1;transform:none}
.js-motion .wr{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.js-motion .wr>span{display:inline-block;transform:translate3d(0,108%,0);transition:transform .85s cubic-bezier(.2,.75,.15,1);transition-delay:var(--d,0s)}
.js-motion .wsplit.in .wr>span{transform:none}

/* statement: words light up as you read down the page */
.js-motion .statement .sw{opacity:.16;transition:opacity .25s linear}
.js-motion .statement .sw.lit{opacity:1}

/* dark sections open out from an inset card to full width */
.js-motion .section--dark{clip-path:inset(0 var(--cx,0px) round var(--cr,0px))}

/* how-we-work rail: a solid line draws over the dashed one; steps light as it reaches them */
.rail::after{content:"";position:absolute;top:23px;left:24px;right:24px;height:2px;background:var(--blue);transform-origin:0 50%;transform:scaleX(var(--rp,0));pointer-events:none}
.js-motion .rail .n{transition:background .35s,transform .35s,box-shadow .35s}
.js-motion .rail li.lit .n{background:var(--blue);box-shadow:0 0 0 6px rgba(46,134,171,.14)}
@media (max-width:900px){.rail::after{display:none}}

/* gallery + image masks: photos wipe up into place, then drift slightly with scroll */
.js-motion .gallery figure{clip-path:inset(100% 0 0 0 round 12px);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);transition-delay:var(--d,0s)}
.js-motion .gallery.in figure{clip-path:inset(0 0 0 0 round 12px)}
.js-motion .gallery img{transform:scale(1.18) translate3d(0,var(--py,0px),0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.js-motion .gallery.in figure img{transform:scale(1.08) translate3d(0,var(--py,0px),0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.js-motion .gallery.in figure:hover img{transform:scale(1.12) translate3d(0,var(--py,0px),0)}

/* logos: greyscale until scrolled into view, then colour fades in */
.js-motion .logos img{transition:filter .9s ease,opacity .9s ease;transition-delay:var(--td,0s)}
.js-motion .logos li.tint img{filter:none;opacity:1}

/* pillar cards: soft 3D tilt toward the cursor */
.pillar{transform-style:preserve-3d;will-change:transform}
.pillar .tilt-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(137,206,239,.28),transparent 60%)}
.pillar:hover .tilt-glow{opacity:1}

@media (prefers-reduced-motion:reduce){
  .hx-hud .live,.hx-hint .arrow{animation:none}
  .js-motion [data-rv],.js-motion .wr>span,.js-motion .gallery figure,.js-motion .gallery img{opacity:1!important;transform:none!important;transition:none!important;clip-path:none!important}
}