/* ===== Phase 6 design layer (v6) ==========================================================================
   Loaded after v4.css + light.css on every page (stamped by server/site-shell.js). Changes LOOK and MOTION only —
   no text, links, URLs, schema or IDs live here. References: cinematic full-screen hero (Cinetic), immersive horizontal
   discovery (Midnight Video), strict type + scroll discipline (Klad).
   Rules kept: emerald = buttons/accents, blue = text links, red = LIVE only while on air, one primary action per screen.
   Every motion has a prefers-reduced-motion off switch (bottom of file). Selector prefix ":root body:not(#_x)" beats the
   light.css "body:not(#_x)" rules without editing them. */
:root{--v6-ease:cubic-bezier(.16,1,.3,1);--v6-fast:.28s;--v6-slow:.9s;--v6-hair:rgba(20,20,20,.08)}

/* ---------- 1. Nav: hides while you read down, comes back the moment you scroll up (v6.js toggles .v6-hide) */
:root body:not(#_x) .bx-nav{transition:transform .42s var(--v6-ease),background-color .25s,box-shadow .25s;will-change:transform}
:root body:not(#_x) .bx-nav.v6-hide{transform:translate3d(0,-100%,0)}
:root body:not(#_x) .bx-nav.v6-solid{box-shadow:0 1px 0 var(--v6-hair),0 10px 30px -18px rgba(20,20,20,.25)}

/* ---------- 2. Focus states, one ring everywhere (keyboard only) */
:root body:not(#_x) :is(a,button,summary,[role=button],input,select,textarea,[tabindex]):focus-visible{outline:2px solid #0C6B4F!important;outline-offset:3px!important;border-radius:6px}
:root body:not(#_x) .lx-hero :is(a,button):focus-visible,:root body:not(#_x) .bx-foot :is(a,button):focus-visible{outline-color:#7CC4A6!important}
:root body:not(#_x) .v6-skip{position:absolute;left:12px;top:-60px;z-index:2000;padding:10px 16px;border-radius:999px;background:#141414;color:#fff;font:500 14px/1 var(--sans);transition:top .2s}
:root body:not(#_x) .v6-skip:focus{top:12px}

/* ---------- 3. Cinematic homepage hero: full screen, dark overlay behind the text, slow push-in once */
:root body:not(#_x) .st.lx-hero{min-height:calc(100svh - var(--nav-h,72px))!important;align-items:flex-end}
:root body:not(#_x) .lx-hero .st-player .st-poster{transform-origin:62% 40%;animation:v6-push 14s var(--v6-ease) both}
/* layered overlay: a left scrim for the copy + a floor for the buttons (the top stays clear so status badges keep their colour) */
:root body:not(#_x) .lx-hero .lx-hero-shade{background:
  linear-gradient(90deg,rgba(8,8,8,.72) 0%,rgba(8,8,8,.48) 34%,rgba(8,8,8,.12) 62%,rgba(8,8,8,0) 80%),
  linear-gradient(0deg,rgba(8,8,8,.7) 0%,rgba(8,8,8,.25) 32%,rgba(8,8,8,0) 55%)!important}
:root body:not(#_x) .lx-hero .lx-hero-in{padding-bottom:clamp(36px,5.5vw,84px)!important;gap:16px!important}
:root body:not(#_x) .lx-hero h1{font-size:clamp(56px,9vw,148px)!important;line-height:.96!important;letter-spacing:-.04em!important;max-width:11ch}
:root body:not(#_x) .lx-hero .lx-hero-sub{max-width:46ch;font-size:clamp(16.5px,1.35vw,20px)}
:root body:not(#_x) .lx-hero .st-on{font-size:12px;letter-spacing:.24em}
/* the caption strip stays clear of the floating WhatsApp button */
:root body:not(#_x) .lx-hero .st-cap{padding-right:clamp(0px,6vw,88px)}
/* scroll cue: a hairline that draws down, decoration only */
:root body:not(#_x) .lx-hero::after{content:""!important;display:block!important;position:absolute;left:50%;bottom:0;width:1px;height:clamp(28px,5vh,56px);background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.75))!important;transform-origin:top;animation:v6-cue 2.4s var(--v6-ease) 1.6s infinite;pointer-events:none}
@media(max-width:599px){
  :root body:not(#_x) .st.lx-hero{min-height:calc(100svh - var(--nav-h,62px))!important}
  :root body:not(#_x) .lx-hero .lx-hero-in{padding-top:clamp(120px,34vh,280px)!important;padding-bottom:40px!important}
  :root body:not(#_x) .lx-hero h1{font-size:clamp(46px,13.5vw,60px)!important}
  :root body:not(#_x) .lx-hero .lx-hero-shade{background:linear-gradient(0deg,rgba(8,8,8,.86) 0%,rgba(8,8,8,.6) 42%,rgba(8,8,8,.12) 72%,rgba(8,8,8,0) 100%)!important}
  :root body:not(#_x) .lx-hero::after{display:none!important}
}
/* page-load reveal — plays once per visit (html.v6-seen is set from the 2nd page on), always ends fully visible */
:root:not(.v6-seen) body:not(#_x) .lx-hero .lx-hero-in>*{animation:v6-rise var(--v6-slow) var(--v6-ease) both}
:root:not(.v6-seen) body:not(#_x) .lx-hero .lx-hero-in>:nth-child(1){animation-delay:.15s}
:root:not(.v6-seen) body:not(#_x) .lx-hero .lx-hero-in>:nth-child(2){animation-delay:.28s}
:root:not(.v6-seen) body:not(#_x) .lx-hero .lx-hero-in>:nth-child(3){animation-delay:.44s}
:root:not(.v6-seen) body:not(#_x) .lx-hero .lx-hero-in>:nth-child(4){animation-delay:.58s}
:root:not(.v6-seen) body:not(#_x) .lx-hero .lx-hero-in>:nth-child(5){animation-delay:.72s}
:root.v6-seen body:not(#_x) .lx-hero .st-player .st-poster{animation:none}

/* ---------- 4. Section rhythm + type discipline (all pages) */
:root body:not(#_x) .rx-row{border-top:1px solid var(--v6-hair);padding-top:clamp(18px,2vw,28px)}
:root body:not(#_x) .rx-row h2,:root body:not(#_x) .rx-guide>.bx-wrap>h2{letter-spacing:-.034em!important;line-height:.98!important}
:root body:not(#_x) .bx-eyebrow{letter-spacing:.24em}
:root body:not(#_x) main section{scroll-margin-top:calc(var(--nav-h,72px) + 16px)}
/* content pages: a calmer, wider header with a hairline rule */
:root body:not(#_x).bx-content main>header,:root body:not(#_x).bx-content article>header{position:relative}
:root body:not(#_x).bx-content h1{letter-spacing:-.038em!important;text-wrap:balance}
:root body:not(#_x) h2,:root body:not(#_x) h3{text-wrap:balance}
:root body:not(#_x) p{text-wrap:pretty}
/* reading progress on long content pages (v6.js adds .v6-prog only where there's an <article>) */
:root body:not(#_x) .v6-prog{position:fixed;left:0;top:0;z-index:1001;height:2px;width:100%;background:#0C6B4F;transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}

/* ---------- 5. Scroll storytelling, used selectively: "How it works" + "Four ways" pin the heading while steps pass */
@media(min-width:1000px){
  :root body:not(#_x) :is(.hm-how,.hm-four)>.bx-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start}
  :root body:not(#_x) :is(.hm-how,.hm-four)>.bx-wrap>h2{position:sticky;top:calc(var(--nav-h,72px) + 40px);margin:0!important;font-size:clamp(40px,4.4vw,72px)!important}
  :root body:not(#_x) :is(.hm-how,.hm-four) .rx-steps{display:grid!important;grid-template-columns:1fr!important;gap:0!important;margin:0!important}
  :root body:not(#_x) :is(.hm-how,.hm-four) .rx-steps>div{min-height:38vh;padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--v6-hair);opacity:.38;transition:opacity .5s var(--v6-ease)}
  :root body:not(#_x) :is(.hm-how,.hm-four) .rx-steps>div:last-child{min-height:0}
  :root body:not(#_x) :is(.hm-how,.hm-four) .rx-steps>div.v6-on{opacity:1}
  :root body:not(#_x) :is(.hm-how,.hm-four) .rx-steps .n{font:500 clamp(14px,1vw,16px)/1 var(--display);letter-spacing:.06em;color:#0C6B4F}
  :root body:not(#_x) :is(.hm-how,.hm-four) .rx-steps h3{font-size:clamp(26px,2.4vw,40px)!important;letter-spacing:-.024em!important;margin:14px 0 10px}
  :root body:not(#_x) :is(.hm-how,.hm-four) .rx-steps p{max-width:44ch;font-size:17px}
}
/* without JS every step is fully visible */
:root.no-js body:not(#_x) :is(.hm-how,.hm-four) .rx-steps>div{opacity:1}

/* ---------- 6. Horizontal rails (phones/tablets): channels, doors and areas swipe sideways with snap points */
@media(max-width:899px){
  :root body:not(#_x) :is(.chn-g,.rx-areas,.hm-doors>.bx-wrap){display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;grid-auto-columns:min(78vw,340px)!important;gap:14px!important;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut,16px);padding:4px var(--gut,16px) 18px!important;margin-inline:calc(var(--gut,16px)*-1)!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  :root body:not(#_x) :is(.chn-g,.rx-areas,.hm-doors>.bx-wrap)::-webkit-scrollbar{display:none}
  :root body:not(#_x) :is(.chn-g,.rx-areas,.hm-doors>.bx-wrap)>*{scroll-snap-align:start;min-width:0}
  :root body:not(#_x) .hm-doors>.bx-wrap{max-width:none}
}
/* desktop: the channel row reads as one film strip */
@media(min-width:900px){
  :root body:not(#_x) .chn-c .chn-m img{transition:transform 1.1s var(--v6-ease),filter .6s}
  :root body:not(#_x) .chn-c:hover .chn-m img{transform:scale(1.06)}
}

/* ---------- 7. Cards: one card language (hairline + soft shadow + lift) */
:root body:not(#_x) :is(.bx-home,.gc-card,.hp-card,.inc,.wb-i,.hd-ask){transition:transform .45s var(--v6-ease),box-shadow .45s var(--v6-ease),border-color .3s}
@media(hover:hover){:root body:not(#_x) :is(.bx-home,.hp-card,.inc):hover{transform:translateY(-4px)}}

/* ---------- 8. Paid placement labels (Phase 5): neutral, readable, never red (red = LIVE) and never a button colour */
:root body:not(#_x) .bx-spon,:root body:not(#_x) .wl-spon{display:inline-flex;align-items:center;margin-left:6px;padding:5px 9px;border-radius:999px;background:rgba(20,20,20,.72)!important;color:#fff!important;font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root body:not(#_x) .lx-spon{background:rgba(20,20,20,.72)!important}

/* ---------- 9. Scroll reveal for section headers (v6.js adds .v6-in when on screen; no-JS = always visible) */
:root.js body:not(#_x) .v6-r{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--v6-ease),transform .9s var(--v6-ease)}
:root.js body:not(#_x) .v6-r.v6-in{opacity:1;transform:none}

@keyframes v6-rise{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@keyframes v6-push{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes v6-cue{0%{transform:scaleY(0);opacity:0}30%{opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ---------- 10. Reduced motion: nothing moves, everything is visible */
@media(prefers-reduced-motion:reduce){
  :root body:not(#_x) .bx-nav{transition:none!important}
  :root body:not(#_x) .bx-nav.v6-hide{transform:none!important}
  :root body:not(#_x) .lx-hero .st-player .st-poster,:root body:not(#_x) .lx-hero .lx-hero-in>*{animation:none!important}
  :root body:not(#_x) .lx-hero::after{display:none!important}
  :root body:not(#_x) :is(.hm-how,.hm-four) .rx-steps>div{opacity:1!important;transition:none!important}
  :root.js body:not(#_x) .v6-r{opacity:1!important;transform:none!important;transition:none!important}
  :root body:not(#_x) :is(.bx-home,.gc-card,.hp-card,.inc,.wb-i,.hd-ask,.chn-c .chn-m img){transition:none!important;transform:none!important}
  :root body:not(#_x) :is(.chn-g,.rx-areas,.hm-doors>.bx-wrap){scroll-behavior:auto}
}