/* The welcome page's process film and case study, 2026-10-26 (owner: "write the process,
   rewrite and redesign ... scroll animations and magic motions"). Loaded from
   template-parts/home-scenes.php after hx2070.css.

   How it works is one pinned stage. The section is as tall as the scroll it costs; inside
   it one screen-high panel sticks under the header while seven chapters pass through it,
   each with its real screen guide. home-scenes.php's script sets --p (0 to 1 across the
   film) and --f (0 to 1 within the current chapter), and .is-on / .is-past on each step.
   Without the script, or under reduced motion, .hf-on is never set and the chapters are
   simply a list, each with its film. */

html body .hz .hf-sec.hz-sec{position:relative;padding:120px 0 0;color:#FFFFFF;
  background:radial-gradient(1200px 600px at 80% 20%,rgba(168,235,203,.12),transparent 60%),
             radial-gradient(900px 500px at 10% 90%,rgba(63,157,109,.18),transparent 60%),
             #0B2A22!important}
.hf-sec .hz-head{max-width:1180px;margin:0 auto;padding:0 24px}
html body .hf-sec .hz-chip{color:#A8EBCB!important;border-color:rgba(168,235,203,.35)!important;background:transparent!important}
html body .hf-sec .hz-h2,html body .hf-sec .hz-h2 em{color:#FFFFFF!important}
html body .hf-sec .hz-h2 em{color:#A8EBCB!important;font-style:normal}
html body .hf-sec .hz-sub{color:#C9E9D9!important}

.hf-list{list-style:none;margin:64px auto 0;padding:0 24px 112px;max-width:1180px;display:grid;gap:88px}
.hf-step{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:56px;align-items:center}
.hf-num{display:flex;align-items:center;gap:10px;font:600 12.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.18em;text-transform:uppercase;color:#A8EBCB}
.hf-num i{display:block;width:28px;height:1px;background:currentColor;opacity:.6}
html body .hf-sec .hf-text h3{margin:18px 0 14px;font-size:clamp(1.9rem,3.4vw,2.9rem)!important;line-height:1.06!important;letter-spacing:-.03em;color:#FFFFFF!important;font-weight:700}
html body .hf-sec .hf-text p{margin:0;max-width:30em;font-size:17px!important;line-height:1.6;color:#C9E9D9!important}
/* Headings rise word by word only once their section has .is-in, and a section as tall
   as this film (or the benefits player in home-benefits.php) never reaches the share of
   the screen that sets it, so their headings stayed under the mask. Each heading gets
   its own .is-in as it is scrolled to; key the rise to that instead. */
.hp-go .lp .hf-sec .hz-h2.is-in .lp__w > .hp-w,.hp-go .lp .st .hz-h2.is-in .lp__w > .hp-w{transform:none}
/* The belt's pinned stage sat at top:0, under the 64px header. */
html body .hz .hz-belt .hz-beltStage{top:64px}
.hf-text .hf-pts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
html body .hf-sec .hf-pts li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:#E6F5ED!important}
.hf-pts li::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;
  background:#3F9D6D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.hf-media{position:relative}
.hf-mediaIn{position:relative}
.hf-ghost{display:none}
.hf-rail{display:none}

/* ---- The film ---------------------------------------------------------- */
.hf-on .hf-track{position:relative;height:calc(var(--n) * 78vh + 100vh)}
.hf-on .hf-stick{position:sticky;top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);overflow:hidden;display:flex;align-items:center}
.hf-on .hf-list{position:relative;width:100%;height:min(600px,82%);margin:0 auto;padding:0;display:block}
.hf-on .hf-step{position:absolute;top:0;bottom:0;left:24px;right:96px;pointer-events:none}
.hf-on .hf-step.is-on{pointer-events:auto}

/* Words: rise out of a blur, then lift away. */
.hf-on .hf-text{opacity:0;transform:translateY(48px);filter:blur(8px);transition:opacity .55s ease,transform .9s cubic-bezier(.2,.75,.15,1),filter .6s ease}
.hf-on .is-past .hf-text{transform:translateY(-48px)}
.hf-on .is-on .hf-text{opacity:1;transform:none;filter:none;transition-delay:.12s}
.hf-on .hf-pts li{opacity:0;transform:translateX(-14px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.75,.15,1)}
.hf-on .is-on .hf-pts li{opacity:1;transform:none}
.hf-on .is-on .hf-pts li:nth-child(1){transition-delay:.42s}
.hf-on .is-on .hf-pts li:nth-child(2){transition-delay:.54s}
.hf-on .is-on .hf-pts li:nth-child(3){transition-delay:.66s}

/* The screen: a reel. The next one rises from below, the last one is carried up and away,
   and the live one turns a few degrees as the chapter is scrolled. Out of view it is
   clipped by .hf-media, so the guide player in landing.php sees it leave and pauses it. */
.hf-on .hf-media{overflow:hidden;padding:40px;margin:-40px;perspective:1600px}
.hf-on .hf-mediaIn{opacity:0;transform:translate3d(0,115%,0) rotateX(22deg) scale(.86);transform-origin:50% 100%;
  transition:transform 1.05s cubic-bezier(.2,.75,.12,1),opacity .6s ease}
.hf-on .is-past .hf-mediaIn{transform:translate3d(0,-115%,0) rotateX(-18deg) scale(.86);transform-origin:50% 0}
.hf-on .is-on .hf-mediaIn{opacity:1;transform:rotateY(calc(7deg - var(--f,0) * 14deg)) rotateX(calc(4deg - var(--f,0) * 4deg)) translateY(calc(var(--f,0) * -14px))}
.hf-on .is-on .hf-mediaIn{transition:transform .5s cubic-bezier(.2,.75,.12,1),opacity .6s ease}

/* The chapter number, drawn large over the words. It sat behind the screen, which covered
   it (owner, 2026-10-26); it now stands above the step's label, outlined, and travels with
   the words as they rise and leave. */
.hf-on .hf-text{position:relative}
.hf-on .hf-ghost{display:block;position:absolute;left:-.04em;bottom:100%;margin-bottom:.04em;font:800 clamp(5.5rem,9vw,8.5rem)/.8 Archivo,Inter,sans-serif;letter-spacing:-.05em;color:rgba(168,235,203,.07);-webkit-text-stroke:1.5px rgba(168,235,203,.45);pointer-events:none;opacity:0;transition:opacity .8s ease}
.hf-on .is-on .hf-ghost{opacity:1}

/* The rail: one stop per chapter, filled to where the reader is. */
.hf-on .hf-rail{display:flex;flex-direction:column;justify-content:center;gap:2px;position:absolute;right:24px;top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;z-index:3}
.hf-on .hf-rail::before,.hf-on .hf-rail::after{content:"";position:absolute;right:21px;top:22px;bottom:22px;width:2px;border-radius:2px;background:rgba(168,235,203,.18)}
.hf-on .hf-rail::after{background:#A8EBCB;bottom:auto;height:calc((100% - 44px) * var(--p,0))}
.hf-rail button{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;gap:12px;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;color:#A8EBCB}
.hf-rail button span{position:absolute;right:52px;white-space:nowrap;font-size:12.5px;font-weight:600;letter-spacing:.04em;opacity:0;transform:translateX(6px);transition:opacity .25s ease,transform .25s ease;color:#E6F5ED}
.hf-rail button:hover span,.hf-rail button:focus-visible span,.hf-rail button[aria-current] span{opacity:1;transform:none}
.hf-rail button i{display:block;width:10px;height:10px;margin-right:17px;border-radius:50%;background:#0B2A22;border:2px solid rgba(168,235,203,.5);transition:transform .3s ease,background .3s ease,border-color .3s ease}
.hf-rail button[aria-current] i{background:#A8EBCB;border-color:#A8EBCB;transform:scale(1.35)}
.hf-rail button:focus-visible{outline:2px solid #A8EBCB;outline-offset:2px;border-radius:50%}

@media (max-width:860px){
  .hf-step{grid-template-columns:1fr;gap:28px}
  .hf-media{order:-1}
  .hf-on .hf-list{height:92%}
  .hf-on .hf-step{left:20px;right:20px;display:flex;flex-direction:column;justify-content:center;gap:24px}
  html body .hf-sec .hf-text h3{margin:12px 0 10px;font-size:clamp(1.6rem,7vw,2.1rem)}
  html body .hf-sec .hf-text p{font-size:15.5px}
  .hf-on .hf-pts{display:none}
  .hf-on .hf-media{padding:20px;margin:-20px}
  /* The step is a centred flex column, so without a width the film shrank to its 52px play
     button (owner: "a small ball, that's useless"). Both halves take the full width. */
  .hf-on .hf-step > .hf-text,.hf-on .hf-step > .hf-media{width:100%;align-self:stretch}
  .hf-on .hf-media{width:calc(100% + 40px)}
  .hf-on .hf-mediaIn,.hf-on .hf-media .hz-screen{width:100%}
  .hf-on .hf-rail{flex-direction:row;top:auto;bottom:6px;left:50%;right:auto;transform:translateX(-50%)}
  .hf-on .hf-rail::before,.hf-on .hf-rail::after{top:auto;bottom:21px;left:22px;right:22px;width:auto;height:2px}
  .hf-on .hf-rail::after{right:auto;width:calc((100% - 44px) * var(--p,0));height:2px}
  .hf-rail button{width:34px;justify-content:center}
  .hf-rail button span{display:none}
  .hf-rail button i{margin:0}
  .hf-on .hf-ghost{display:none}
}

/* ---- Features: the sideways slide --------------------------------------
   Owner, 2026-10-26: "restore the side slide with scroll, but not the collapse", then
   "start when the section is in the middle and in view, and continue till the last
   element". home6.js holds the section centred in the screen (.hp-fHold, with its height
   and the stage's top set inline) while the row slides (.hp-fSlide). The row lines up
   with the heading's edge so the first and last cards rest whole inside it. */
html body .lp .hz-sec.hp-fgal{height:auto!important;padding-block:clamp(64px,8vw,112px)!important}
html body .lp .hp-fgal .hp-fRow{padding:4px max(28px,calc(50vw - 610px)) 10px!important}
html body .lp .hp-fgal .hp-fRow.hp-fSlide{overflow:hidden!important;scroll-snap-type:none!important;scroll-behavior:auto!important}
html body .lp .hp-fgal .hp-fRow.hp-fSlide>*{scroll-snap-align:none}
html body .lp .hz-sec.hp-fgal.hp-fHold{justify-content:flex-start!important;overflow:visible!important}
html body .lp .hp-fgal.hp-fHold>.hz-in{position:sticky!important}

/* ---- How it works: a sub-line that can be read ----------------------------
   The sub-line is metered word by word (.hz-sw), and an older rule painted those words in
   dark ink on this dark band, so the line could not be read (owner, 2026-10-27). */
html body .lp .hf-sec .hz-sub,html body .lp .hf-sec .hz-sub .hz-sw{color:#D7EFE3!important;opacity:1!important}

/* ---- What changes: no Previous or Next ------------------------------------
   The wheel steps by its own numbered buttons, so Previous and Next are gone and the
   numbers sit centred (owner, 2026-10-27). */
html body .lp #outcomes .hp-stage__btn{display:none!important}
html body .lp #outcomes .hp-stage__nav{justify-content:center!important}

/* ---- What changes: the wheel and its card ---------------------------------
   The wheel's labels hang past its own box, and the card began 24px inside the right-hand
   one, covering "The practitioner" (owner, 2026-10-26). The wheel takes its own width and
   the gap clears the overhang; the labels also sit above the centre disc, which covered
   the practitioner's number. */
@media (min-width:1000px){
  html body .lp .hp-wheelGrid{grid-template-columns:auto minmax(0,1fr)!important;gap:clamp(64px,6vw,96px)!important}
}
html body .lp .hp-ow .hp-wheel__ring{z-index:2}

/* ---- Case study -------------------------------------------------------- */
.hz-caseFacts{list-style:none;margin:40px auto 0;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hz-caseFacts li{padding:22px 24px;border-radius:20px;background:#FFFFFF;border:1px solid #CFDFD5;font-size:15px;line-height:1.55;color:#4E625C}
.hz-caseFacts b{display:block;margin-bottom:6px;font-size:15.5px;color:#0B1F19}
.hz-case .lc-sec{padding:40px 0 0;background:transparent}
.hz-caseMore{margin:28px 0 0;text-align:center}
@media (max-width:860px){ .hz-caseFacts{grid-template-columns:1fr} }