/* fonixmarketing.com — maps the shared scroll-story kit onto the site's v3 tokens.
   The light site opens with ONE deliberate dark cinematic band (the animation is shot on #000008);
   the header uses its light-on-dark variant until the band has scrolled away (html.fm-past, set by site.js). */
.fm-stage{--st-bg:#000008;--st-fg:#F5F7FC;--st-muted:#B4BED6;--st-accent:var(--gold-3,#E8B96F);--st-line:rgba(232,185,111,.24);
  --st-maxw:var(--wrap,1240px);--st-gutter:var(--gut,clamp(20px,4vw,40px));--st-nav:var(--hdr,80px);
  --st-display:var(--f-head);--st-display-weight:800;--fm-r:clamp(22px,3vw,40px);
  background:transparent}
.fm-stage .st-poster-start{background-image:url(rise-start.jpg)}
.fm-stage .st-poster-end{background-image:url(rise-end.jpg)}
/* the band ends as a rounded dark card lifting off the white page */
.fm-stage .st-pin{background:var(--st-bg);border-radius:0 0 var(--fm-r) var(--fm-r)}
.fm-stage .st-copy{padding-top:calc(var(--st-nav) + 24px)}
.fm-stage .st-story{max-width:min(560px,44vw)}
.fm-stage .st-kicker{display:inline-flex;align-items:center;gap:10px;font:700 14px/1.3 var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--st-accent)}
.fm-stage .st-kicker::before{content:"";flex:none;width:22px;height:3px;border-radius:2px;background:var(--gold-2,#D9A254)}
html[lang=ar] .fm-stage .st-kicker{letter-spacing:0;text-transform:none;font-size:15px}
.fm-stage .st-title{font-size:clamp(38px,4.4vw,66px);line-height:1.03;letter-spacing:-.035em}
.fm-stage .st-final .st-title{font-size:clamp(52px,7vw,104px);line-height:1}
html[lang=ar] .fm-stage .st-title{letter-spacing:0;line-height:1.3;font-weight:700}
html[lang=ar] .fm-stage .st-final .st-title{line-height:1.25}
.fm-stage .st-title em{line-height:.95}
.fm-stage .st-lede{font-size:clamp(17px,1.35vw,20px);line-height:1.65;max-width:50ch}
html[lang=ar] .fm-stage .st-lede{line-height:1.85}
.fm-stage .st-actions{gap:14px;margin-top:10px}
/* same buttons/classes as the old hero, re-skinned for the dark band (site's own gold + light styles) */
.fm-stage .btn-primary{background:linear-gradient(135deg,var(--gold-3),var(--gold-2));color:#1d1406;box-shadow:0 14px 30px -14px rgba(217,162,84,.65)}
.fm-stage .btn-primary:hover{background:linear-gradient(135deg,#F0C987,var(--gold-3));color:#1d1406}
.fm-stage .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.3)}
.fm-stage .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.fm-stage .st-steps span{font:600 12px/1 var(--f-head);letter-spacing:.14em;text-transform:uppercase}
html[lang=ar] .fm-stage .st-steps span{letter-spacing:0;font-size:13px}

/* header over the dark band: same layout, light ink, dark glass once scrolled */
html:not(.fm-past) body:has(.fm-stage):not(.nav-open) .hdr .brand b{color:#fff}
html:not(.fm-past) body:has(.fm-stage):not(.nav-open) .hdr .brand i{color:var(--gold-3)}
html:not(.fm-past) body:has(.fm-stage):not(.nav-open) .hdr .nav a{color:#E3E8F4}
html:not(.fm-past) body:has(.fm-stage):not(.nav-open) .hdr .nav a:hover{background:rgba(255,255,255,.1);color:#fff}
html:not(.fm-past) body:has(.fm-stage):not(.nav-open) .hdr .lsw{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
html:not(.fm-past) body:has(.fm-stage):not(.nav-open) .hdr .lsw a{color:#AEB9D3}
html:not(.fm-past) body:has(.fm-stage):not(.nav-open) .hdr .lsw a[aria-current]{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
html:not(.fm-past) body:has(.fm-stage):not(.nav-open) .hdr .btn-primary{background:linear-gradient(135deg,var(--gold-3),var(--gold-2));color:#1d1406;box-shadow:none}
html:not(.fm-past) body:has(.fm-stage):not(.nav-open) .hdr .burger{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
html:not(.fm-past) body:has(.fm-stage):not(.nav-open) .hdr .burger span:not(.sr){background:#fff}
html:not(.fm-past) body:has(.fm-stage):not(.nav-open) .hdr.scrolled{background:rgba(0,0,8,.62);box-shadow:0 1px 0 rgba(255,255,255,.08)}
/* without JS the header never changes state: give it a solid dark bar so it reads over the band and the page */
html.no-js body:has(.fm-stage) .hdr{background:#000008}

@media (max-width:760px){
  .fm-stage{--fm-r:22px}
  .fm-stage .st-story{max-width:none}
  .fm-stage .st-rail{flex-basis:56px}
  .fm-stage .st-title{font-size:clamp(30px,8.4vw,40px)}
  .fm-stage .st-final .st-title{font-size:clamp(40px,12vw,54px)}
  .fm-stage .st-lede{font-size:16px;line-height:1.6}
  .fm-stage .st-kicker{font-size:12px}
  html[lang=ar] .fm-stage .st-kicker{font-size:13.5px}
  .fm-stage .btn-lg{min-height:52px;padding:0 22px;font-size:16px}
  .fm-stage .st-actions{gap:10px}
  .fm-stage .st-steps span{font-size:10.5px;letter-spacing:.1em}
  /* keep the WhatsApp bubble clear of the cue on phones */
  .fm-stage .st-cue .st-wrap{padding-inline-end:76px}
}
@media (max-width:400px){.fm-stage .st-rail{display:none}}
@media (max-width:380px){.fm-stage .btn-lg{padding:0 18px;font-size:15px}}
/* portrait tablets (761–1100 px, portrait): the desktop split would put the copy over the swirl, so use the
   phone composition — picture on top, copy below. site.js re-centres the picture (data-sx/zoom) here. */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .fm-stage .st-media{bottom:auto;height:56%}
  .fm-stage .st-media::after,html[dir="rtl"] .fm-stage .st-media::after{background:linear-gradient(0deg,var(--st-bg) 0%,color-mix(in srgb,var(--st-bg) 30%,transparent) 28%,transparent 52%),
    linear-gradient(180deg,color-mix(in srgb,var(--st-bg) 70%,transparent) 0%,transparent 22%)}
  .fm-stage .st-copy{align-items:flex-end;padding:0 0 110px}
  .fm-stage .st-story{max-width:640px}
  .fm-stage .st-media{height:58%}
  .fm-stage .st-title{font-size:clamp(44px,7vw,64px)}
  .fm-stage .st-final .st-title{font-size:clamp(58px,9.4vw,88px)}
  .fm-stage .st-lede{font-size:19px}
  html[lang=ar] body .fm-stage .st-title{font-size:clamp(36px,5.6vw,52px)}
  html[lang=ar] body .fm-stage .st-final .st-title{font-size:clamp(46px,7.6vw,70px)}
}
/* Arabic display type runs larger per word: scale it down a step */
html[lang=ar] .fm-stage .st-title{font-size:clamp(32px,3.7vw,56px)}
html[lang=ar] .fm-stage .st-final .st-title{font-size:clamp(44px,5.4vw,82px)}
@media (max-width:760px){
  html[lang=ar] .fm-stage .st-title{font-size:clamp(27px,7.4vw,36px)}
  html[lang=ar] .fm-stage .st-final .st-title{font-size:clamp(36px,10vw,46px)}
}
html[lang=ar] .fm-stage .st-lede{max-width:44ch}
/* the old hero's trust row (counts only), kept as a slim strip between the stage and the marquee */
.fm-trust{padding:26px 0 22px}
.fm-trust .trust{margin:0;justify-content:center;gap:10px 40px}

/* phones: lighter start poster (LCP) */
@media (max-width:760px){.fm-stage .st-poster-start{background-image:url(rise-start-m.jpg)}}