/* ===========================================================
   INTUS — Horizontal content track + pixel-wipe overlay.
   The track is a fixed full-screen viewport; sections become
   full-screen panels laid out in a row and translated sideways.
   Hidden until the journey hands off (body.hh-active).
   =========================================================== */

/* fixed viewport that clips the sideways track */
.hh-wrap{position:fixed;inset:0;z-index:3;overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease,ease)}
body.hh-active .hh-wrap{opacity:1;visibility:visible}

.hh-track{display:flex;height:100vh;will-change:transform}

/* each section becomes a full-screen panel */
.hh-track > .hh-panel{
  flex:0 0 100vw;width:100vw;height:100vh;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:34px;
  padding:130px 7vw 70px;overflow-y:auto;overflow-x:hidden;
  background:var(--stone,#F4F1EC);
  border-left:1px solid rgba(26,26,26,.06);
}
/* every direct block of a section stacks full-width and centers */
.hh-track > .hh-panel > *{width:100%;max-width:1180px;margin:0;flex:0 0 auto}

/* if a panel's content is taller than the screen, scroll inside it (top-aligned) */
.hh-track > .hh-panel.is-tall{justify-content:flex-start}

/* the footer + contact are wider panels */
.hh-track > .footer.hh-panel{flex:0 0 80vw;width:80vw;display:block;justify-content:flex-start}

/* reveal: while horizontal, the current panel's .reveal items animate in */
body.hh-active .hh-panel.hh-current .reveal{opacity:1;transform:none}

/* the source container is emptied once panels move into the track */
body.hh-active .home-content{display:none}

/* ---- tighten section internals for the horizontal panel context ---- */
.hh-track > .hh-panel.section{padding-top:130px;padding-bottom:70px}
.hh-track > .hh-panel .section-head{margin-bottom:34px}
.hh-track > .hh-panel .about__grid{gap:48px;align-items:start}
.hh-track > .hh-panel .stats{margin-top:36px;padding-top:34px;gap:28px}
.hh-track > .hh-panel .about__intro p{font-size:1rem;line-height:1.6;margin:14px 0}
.hh-track > .hh-panel .display{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.hh-track > .hh-panel .lead{font-size:1.05rem;margin:18px 0}
/* the stats sit in their own row, full width, never beside the grid */
.hh-track > .hh-panel .stats{grid-template-columns:repeat(4,1fr)}

/* ---------- pixel-block REVEAL ----------
   The incoming layer is lifted above everything and clip-path'd into
   diagonal pixel blocks while the outgoing scene shows through the gaps.
   No black anywhere — the new scene dissolves directly over the old. */
.hh-revealing{z-index:55!important;opacity:1!important;visibility:visible!important;
  transform:none!important;pointer-events:none}
/* while a layer is revealing, make sure BOTH layers can paint
   (don't let .ij-released hide the journey we're revealing TO) */
.ij-journey.hh-revealing{opacity:1!important;visibility:visible!important}
/* legacy canvas (unused now) */
.hh-wipe{display:none}

@media (max-width:860px){
  .hh-track > .hh-panel{padding:96px 24px 48px}
  .hh-track > .footer.hh-panel{flex:0 0 92vw;width:92vw}
}
@media (prefers-reduced-motion:reduce){
  .hh-wrap{transition:none}
}