/* Native-scroll story styling. The sticky visual is never transformed. */
:root { --scroll-story-header: 88px; }
.scroll-story { --story-ink:#18392c; --story-paper:#edf2e9; --story-accent:#a4db45; --story-accent-ink:#386c16; position:relative; padding:clamp(4rem,8vw,8rem) clamp(1.25rem,5vw,6rem); background:var(--story-paper); color:var(--story-ink); overflow:clip; }
.scroll-story[data-scroll-story="fasterpr"] { --story-ink:#171313; --story-paper:#f7f0e5; --story-accent:#d6322c; --story-accent-ink:#ae2823; }
.scroll-story[data-scroll-story="tog"] { --story-ink:#403b20; --story-paper:#d9d5ad; --story-accent:#fbf3df; --story-accent-ink:#645c1f; }
.scroll-story[data-scroll-story="fasterid"] { --story-ink:#dceff1; --story-paper:#082a42; --story-accent:#35b9b1; --story-accent-ink:#82e6df; }
.scroll-story[data-scroll-story="shuaa"] { --story-ink:#144b4b; --story-paper:#fff8e7; --story-accent:#e1793e; --story-accent-ink:#b65a24; direction:rtl; }
.scroll-story-heading { max-width:48rem; margin:0 auto clamp(3rem,7vw,7rem); }
.scroll-story-eyebrow,.motion-panel-kicker { display:block; margin-bottom:.8rem; color:var(--story-accent-ink); font:700 .72rem/1.2 system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.scroll-story-heading h2 { max-width:13ch; margin:0; font-size:clamp(2.25rem,5.5vw,5.8rem); line-height:.95; letter-spacing:-.055em; }
.scroll-story-heading p { max-width:42rem; margin:1.5rem 0 0; font-size:clamp(1rem,1.35vw,1.25rem); line-height:1.65; }
.scroll-story-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; max-width:1280px; margin:auto; }
.scroll-story-visual { min-width:0; align-self:start; }
.scroll-story-frame { position:relative; min-height:25rem; padding:clamp(1rem,3vw,2.5rem); isolation:isolate; perspective:900px; border:1px solid color-mix(in srgb,var(--story-ink) 18%,transparent); background:color-mix(in srgb,var(--story-paper) 80%,white); box-shadow:0 24px 60px rgb(0 0 0 / .12); }
.scroll-story-panel { position:relative; min-height:20rem; padding:clamp(1.3rem,4vw,3.5rem); border:1px solid color-mix(in srgb,var(--story-ink) 18%,transparent); background:var(--story-paper); color:var(--story-ink); overflow:hidden; }
.scroll-story-panel + .scroll-story-panel { margin-top:1rem; }
.scroll-story-panel h3 { max-width:12ch; margin:0; font-size:clamp(1.7rem,3vw,3.25rem); line-height:.98; letter-spacing:-.045em; }
.scroll-story-panel p { max-width:29rem; margin:1rem 0 0; line-height:1.6; }
.scroll-story-chapters { display:grid; gap:1.25rem; }
.scroll-story-chapter { min-height:clamp(22rem,58vh,42rem); padding:clamp(1.5rem,4vw,3.5rem); border-top:1px solid color-mix(in srgb,var(--story-ink) 30%,transparent); }
.scroll-chapter-number { display:block; margin-bottom:1rem; color:var(--story-accent-ink); font:700 .78rem/1 system-ui,sans-serif; letter-spacing:.14em; }
.scroll-story-chapter h3 { max-width:13ch; margin:0; font-size:clamp(1.8rem,3.4vw,4rem); line-height:1; letter-spacing:-.04em; }
.scroll-story-chapter p { max-width:34rem; line-height:1.65; }
.scroll-story-link { display:inline-flex; margin-top:.75rem; color:inherit; font-weight:700; text-underline-offset:.25em; }
.scroll-story-caption { display:none; }
/* Supplied scene compositions */
.motion-board { display:grid; gap:.7rem; margin-top:1.4rem; }
.motion-board-top,.motion-board-bottom { display:flex; justify-content:space-between; gap:1rem; font:700 .62rem/1.2 system-ui,sans-serif; letter-spacing:.09em; }
.motion-board-status { color:var(--story-accent-ink); }
.motion-task { display:grid; grid-template-columns:1.8rem 1fr; gap:.7rem; align-items:start; padding:.8rem 1rem; border:1px solid color-mix(in srgb,var(--story-ink) 22%,transparent); background:color-mix(in srgb,var(--story-paper) 70%,white); box-shadow:0 9px 20px rgb(0 0 0 / .08); }.motion-task>span { color:var(--story-accent-ink); font:700 .7rem/1.4 system-ui,sans-serif; }.motion-task small,.motion-task strong { display:block; }.motion-task small { font:600 .58rem/1.3 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }.motion-task strong { margin-top:.15rem; font-size:.92rem; line-height:1.25; }
.motion-paper { position:relative; min-height:11rem; margin-top:1.4rem; padding:1.5rem; background:#fffdf7; color:#211d18; box-shadow:10px 13px 0 color-mix(in srgb,var(--story-accent) 38%,transparent),0 18px 30px rgb(0 0 0 / .14); }
.motion-paper-mast,.motion-paper-footer { display:flex; justify-content:space-between; gap:.75rem; font:700 .58rem/1.2 system-ui,sans-serif; letter-spacing:.11em; }
.motion-paper-mast span { opacity:.6; }.motion-paper-lines { display:grid; gap:.38rem; margin-top:1.2rem; }.motion-paper-lines i { display:block; height:1px; background:#211d1830; }.motion-paper-lines i:nth-child(2) { width:78%; }.motion-paper-lines i:nth-child(3) { width:58%; }.motion-paper-footer { margin-top:1.2rem; align-items:end; }.motion-paper-footer b { font-size:1.4rem; color:var(--story-accent); }
.motion-paper-rule { display:block; height:1px; margin:.8rem 0; background:color-mix(in srgb,#211d18 34%,transparent); }
.motion-photo { position:relative; display:block; width:min(100%,28rem); margin:1rem 0 0; background:#eee; box-shadow:0 18px 24px rgb(0 0 0 / .2); }
.motion-photo img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.motion-photo-caption { display:block; padding:.5rem .65rem; font:600 .72rem/1.2 system-ui,sans-serif; }
.motion-photo-caption span { display:block; font-size:.53rem; letter-spacing:.08em; }.motion-photo-caption h3 { margin:.35rem 0; font-size:1.2rem; }
.motion-network { position:relative; min-height:14rem; margin-top:1rem; border:1px solid color-mix(in srgb,var(--story-accent) 55%,transparent); }
.motion-network svg { position:absolute; inset:0; width:100%; height:100%; }
.motion-network-center { position:absolute; inset:50% auto auto 50%; display:grid; place-items:center; width:4.5rem; height:4.5rem; transform:translate(-50%,-50%); border-radius:50%; background:var(--story-accent); color:var(--story-paper); font-size:2rem; font-weight:800; }.motion-network-center span { display:block; max-width:8rem; margin-top:.35rem; color:var(--story-ink); font:600 .58rem/1.2 system-ui,sans-serif; text-align:center; }.motion-node { position:absolute; display:grid; gap:.25rem; min-width:4rem; font:600 .65rem/1.2 system-ui,sans-serif; transform-origin:center; }.motion-node span { color:var(--story-accent); font-size:.55rem; }.motion-node-0{left:8%;top:16%}.motion-node-1{right:8%;top:16%;text-align:right}.motion-node-2{left:8%;bottom:16%}.motion-node-3{right:8%;bottom:16%;text-align:right}
.motion-book { min-height:12rem; margin-top:1rem; padding:2rem; transform-style:preserve-3d; border:1px solid color-mix(in srgb,var(--story-ink) 32%,transparent); background:linear-gradient(105deg,#fffdf5 0 48%,#f1e7c9 49% 51%,#fffdf5 52%); box-shadow:0 18px 30px rgb(0 0 0 / .12); }.motion-arch { overflow:hidden; }.motion-arch img { width:100%; height:100%; object-fit:cover; opacity:.78; }.motion-book .motion-verse { position:relative; margin:-4rem 1rem 0; background:#fff8e7ed; }
.motion-verse { margin-top:1rem; padding:1.2rem; border-right:3px solid var(--story-accent); font-size:clamp(1.1rem,2vw,1.7rem); line-height:1.8; }
.motion-arch { position:relative; min-height:12rem; margin-top:1rem; border:2px solid var(--story-accent); border-bottom:0; border-radius:12rem 12rem 0 0; }
.scroll-motion-toggle,.sefog-motion-toggle { appearance:none; min-height:44px; margin:.75rem 0; padding:.45rem .85rem; border:1px solid currentColor; border-radius:99px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.scroll-motion-toggle:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
[data-scroll-reveal] { transition:opacity .6s ease,transform .6s cubic-bezier(.15,.6,.2,1); }
body.business-scroll-motion-on [data-scroll-reveal]:not(.scroll-reveal-visible) { opacity:.01; transform:translateY(18px); }
@media (min-width:900px) {
  .scroll-story-layout { grid-template-columns:minmax(20rem,.9fr) minmax(20rem,1fr); gap:clamp(3rem,9vw,11rem); align-items:start; }
  .scroll-story.is-scroll-ready .scroll-story-visual { position:sticky; top:calc(var(--scroll-story-header) + 1rem); }
  .scroll-story-frame { min-height:clamp(23.75rem,60vh,39rem); }
  .scroll-story.is-scroll-ready .scroll-story-panel { position:absolute; inset:0; min-height:0; margin:0; display:flex; flex-direction:column; justify-content:center; pointer-events:none; }
  .scroll-story-caption { position:relative; display:flex; align-items:center; gap:.85rem; min-height:2.5rem; padding:.8rem 1rem 0; font:700 .66rem/1 system-ui,sans-serif; letter-spacing:.08em; }
  .scroll-story-index { color:var(--story-accent-ink); }
  .scroll-story-progress { width:5rem; height:2px; transform:scaleX(.02); transform-origin:0 50%; background:var(--story-accent); }
  .scroll-story.is-scroll-ready .scroll-story-chapter { min-height:clamp(36rem,94vh,64rem); display:flex; flex-direction:column; justify-content:center; }
}
@media (max-width:899px) { .scroll-story { padding-block:3.5rem; } .scroll-story-frame { min-height:0; padding:0; border:0; box-shadow:none; background:transparent; } .scroll-story-panel { min-height:0; } .scroll-story-panel:not(:first-child) { display:none; } .scroll-story-chapter { min-height:0; padding-block:2.5rem; } }
html[dir="rtl"] .scroll-story[data-scroll-story="shuaa"] .scroll-story-heading h2 { max-width:15ch; font-family:'Noto Sans Arabic',Tahoma,sans-serif; font-size:clamp(2rem,4.5vw,4.75rem); line-height:1.32; letter-spacing:0; } html[dir="rtl"] .scroll-story[data-scroll-story="shuaa"] .scroll-story-heading p,html[dir="rtl"] .scroll-story[data-scroll-story="shuaa"] .scroll-story-chapter p { line-height:2; } html[dir="rtl"] .scroll-story[data-scroll-story="shuaa"] .scroll-story-chapter h3 { line-height:1.45; letter-spacing:0; }
body.business-scroll-motion-off .scroll-story-visual { position:static !important; } body.business-scroll-motion-off .scroll-story-chapter { min-height:0 !important; }
@media (prefers-reduced-motion:reduce),print { .scroll-story-visual { position:static !important; } .scroll-story-frame { min-height:0 !important; } .scroll-story-panel { position:relative !important; inset:auto !important; display:block !important; min-height:0 !important; margin-top:1rem !important; opacity:1 !important; transform:none !important; visibility:visible !important; } .scroll-story-panel:first-child { margin-top:0 !important; } .scroll-story-chapter { min-height:0 !important; } [data-scroll-reveal] { opacity:1 !important; transform:none !important; transition:none !important; } .scroll-motion-toggle,.sefog-motion-toggle { display:none !important; } }

body.business-scroll-motion-on [data-scroll-reveal="left"]:not(.scroll-reveal-visible) { transform:translateX(-12px); }
body.business-scroll-motion-on [data-scroll-reveal="right"]:not(.scroll-reveal-visible) { transform:translateX(12px); }
body.business-scroll-motion-on [data-scroll-reveal="scale"]:not(.scroll-reveal-visible) { transform:scale(.98); }
@media (prefers-reduced-motion:reduce) { body.business-scroll-motion-on [data-scroll-reveal] { transform:none !important; opacity:1 !important; } }

/* The printed, photographic and diagram compositions retain their own material. */
.scroll-story-fasterpr .scroll-story-chapter h3,.scroll-story-fasterpr .motion-paper h3,.scroll-story-tog .scroll-story-chapter h3,.scroll-story-tog .motion-photo-caption h3 { font-family:var(--display,Georgia,serif); font-weight:500; letter-spacing:-.025em; }
.scroll-story-sefog .scroll-story-frame { background-image:linear-gradient(#18392c08 1px,transparent 1px),linear-gradient(90deg,#18392c08 1px,transparent 1px); background-size:28px 28px; }
.scroll-story-sefog .motion-task { padding:1.1rem; }
.scroll-story-sefog .motion-task strong { font-size:1rem; }
.scroll-story-fasterid .motion-network { min-height:clamp(14rem,34vh,23rem); }
.scroll-story-tog .motion-photo img { aspect-ratio:auto; height:clamp(15rem,38vh,25rem); object-position:center 25%; }
.scroll-story-shuaa .scroll-story-panel { padding:1.5rem; }
.scroll-story-shuaa .motion-book { padding:1rem; }
.scroll-story-shuaa .motion-arch { min-height:0; }
.scroll-story-shuaa .motion-arch img { display:block; height:11rem; }
.scroll-story-shuaa .motion-book .motion-verse { margin:-1.5rem 0 0; padding:1rem; }
.scroll-story-shuaa .motion-verse h3 { max-width:none; font-size:clamp(1.3rem,2.2vw,2rem); line-height:1.6; letter-spacing:0; }
.scroll-story-shuaa .motion-verse small,.scroll-story-shuaa .motion-verse p,.scroll-story-shuaa .motion-verse>span { font-size:.85rem; line-height:1.7; }
.scroll-story-shuaa .scroll-chapter-number,.scroll-story-shuaa .scroll-story-index { direction:ltr; unicode-bidi:isolate; }
.scroll-story-shuaa .scroll-story-eyebrow { letter-spacing:0; font-family:inherit; }

@media (max-width:899px) { body.business-scroll-motion-on [data-scroll-reveal="left"]:not(.scroll-reveal-visible),body.business-scroll-motion-on [data-scroll-reveal="right"]:not(.scroll-reveal-visible) { transform:translateY(12px); } }
