/* Reference-led treatment. Scope: mobile hero, story, audience and method only. */
:root{--rowad-heading-font:'Sakkal Majalla','Traditional Arabic',Tahoma,serif}
body :is(h1,h2,h3,h4,h5,h6){font-family:var(--rowad-heading-font)!important;font-weight:500!important;font-style:normal}
.story,.reference-light{isolation:isolate}
.story>.wrap,.reference-light>.wrap{position:relative;z-index:1}
.section-wave{position:absolute;left:0;display:block;width:100%;pointer-events:none;z-index:0}
.story{padding-top:70px;padding-bottom:125px;background:radial-gradient(ellipse at 12% 80%,#33006638,transparent 62%),linear-gradient(180deg,#0d061c,#160824)}
.story .wave-story-top{height:68px;top:-35px;overflow:visible;filter:drop-shadow(0 0 5px #9966ff66)}
.story .wave-story-bottom{height:160px;bottom:-1px}
.story h2 em{color:#c0a0f7;background:linear-gradient(100deg,#d6b9ff,#9966ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.1em}
.story h2{line-height:1.18}
.reference-light{--body:#3e2453;color:#330066;background:radial-gradient(ellipse at 75% 42%,#ffffffcf,transparent 65%),linear-gradient(115deg,#e9dcf1,#f5edf8 56%,#eee2f5);border:0;position:relative}
.reference-light .interior-kicker{color:#330066;justify-content:flex-start;font-size:19px}
.reference-light .interior-kicker>span{border-color:#33006680;color:#330033}
.reference-light h2{color:#230b3b;font-weight:600;line-height:1.12}
.reference-light h2 em{font-style:normal;color:#8145b7}
.reference-light p{color:#30173f;font-size:26px;line-height:1.5;font-weight:400}
.reference-light .detail-icon{display:block;width:36px;height:36px;color:#7335a7;flex-shrink:0}
.audience-v3.reference-light{padding:76px 0 110px;overflow:hidden}
.audience-v3 .wave-audience-top{height:180px;top:0;opacity:.84}
.audience-v3 .wave-audience-bottom{height:130px;bottom:-1px}
.audience-v3 .audience-layout{display:block;max-width:920px}
.audience-v3 .audience-layout>div:first-child,.audience-v3 .audience-body>p{max-width:800px;margin-right:0;margin-left:auto}
.audience-v3 h2{font-size:clamp(44px,4.5vw,62px);margin:22px 0 28px}
.audience-v3 h2 em{position:relative;display:inline-block;padding-bottom:13px}
.audience-v3 h2 em:after{content:'';position:absolute;bottom:3px;right:3%;width:94%;height:4px;background:linear-gradient(90deg,transparent,#9966ff88,#7131a2);clip-path:polygon(0 80%,54% 0,100% 75%,56% 55%)}
.audience-v3 .audience-body>p{font-size:26px;line-height:1.48}
.audience-v3 .inline-stats{max-width:700px;margin:34px auto 0;gap:40px;display:grid;grid-template-columns:1fr 1fr;direction:rtl}
.audience-v3 .inline-stats>div{position:relative;overflow:hidden;isolation:isolate;min-height:190px;padding:17px 16px 24px;gap:4px;border:1px solid #b894d3;border-radius:27px;background:radial-gradient(ellipse at 75% 0,#9966ff22,transparent 70%),linear-gradient(135deg,#c8aed36e,#ffffff9c);box-shadow:inset 0 1px 1px #ffffffdc,0 8px 20px #33006612,0 0 11px #ffffffb0}
.audience-v3 .inline-stats>div:before,.audience-v3 .inline-stats>div:after{display:none}
.audience-v3 .inline-stats strong{position:relative;z-index:1;font:600 64px/1 Georgia,serif;color:#330066;margin:1px 0}
.audience-v3 .inline-stats span{position:relative;z-index:1;color:#290d40;font-size:27px;line-height:1.2}
.audience-v3 .inline-stats .detail-icon{position:relative;z-index:1;width:38px;height:36px}
.audience-v3 .inline-stats .stat-wave{position:absolute;bottom:0;left:0;width:100%;height:51px;z-index:0;pointer-events:none}
.method-v3.reference-light{padding:54px 0 105px;overflow:visible}
.method-v3 .wave-method-top{height:112px;top:-50px;opacity:.42}
.method-v3 .wave-method-bottom{height:100px;bottom:-1px;opacity:.95}
.method-v3 .method-layout{display:block;max-width:920px;padding-top:0;border:0}
.method-v3 .method-layout>div:first-child{max-width:800px;margin-right:0;margin-left:auto}
.method-v3 h2{font-size:clamp(43px,4.3vw,58px);margin:20px 0 25px}
.method-v3 .method-layout>div:first-child>p{font-size:26px;line-height:1.45}
.method-v3 .method-chart{max-width:800px;margin:0 auto;padding:30px 0 0}
.method-v3 .ratio-track{position:relative;isolation:isolate;display:flex;direction:rtl;gap:0;width:100%;height:96px;margin:0 0 30px;border:1px solid #fdf5ff;border-radius:60px;overflow:hidden;background:#e2cdef;box-shadow:0 10px 20px #7739ab1c,0 0 10px #fff9}
.method-v3 .ratio-track>div{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:8px 3px;flex-shrink:0;min-width:0}
.method-v3 .ratio-track>.ratio-practical{flex-basis:70%;width:70%;color:white;background:radial-gradient(ellipse at 50% 0,#9966ff75,transparent 75%),linear-gradient(110deg,#330066,#330033);box-shadow:inset 0 0 20px #9966ff80;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%)}
.method-v3 .ratio-track>.ratio-theory{flex-basis:30%;width:30%;color:#330066;background:radial-gradient(ellipse at 20% 20%,#fff8,transparent 85%),linear-gradient(120deg,#dcc7ef,#edddf6)}
.method-v3 .ratio-track:after{content:'';position:absolute;left:30%;top:-10%;height:120%;width:2px;background:linear-gradient(transparent,#fff,#fff,transparent);transform:skewX(-20deg);box-shadow:0 0 9px 2px #fff,0 0 19px 2px #bb8cff;pointer-events:none}
.method-v3 .ratio-track strong{font:600 38px/1 Georgia,serif}
.method-v3 .ratio-track span{font-size:25px;line-height:1.05;font-weight:600}
.method-v3 .ratio-copy{gap:28px;text-align:center;margin-bottom:28px;align-items:start}
.method-v3 .ratio-copy>div{padding:0 14px}
.method-v3 .ratio-copy>div:first-child{border-left:1px solid #9c6db66b}
.method-v3 .ratio-copy .detail-icon{margin:0 auto 5px;width:40px;height:40px}
.method-v3 .ratio-copy h3{font-size:32px;line-height:1.18;font-weight:600;color:#260c3b;margin:3px 0 12px}
.method-v3 .ratio-copy p{font-size:25px;line-height:1.4;margin:0}
.method-v3 .method-note{position:relative;max-width:690px;margin:0 auto;border:1px solid #bb92d166;border-radius:50px;background:linear-gradient(90deg,#e6d2f057,#ffffff44,#e1c9ee80);color:#663095;text-align:center;font-size:23px;font-weight:600;line-height:1.3;padding:12px 18px}
.method-v3 .method-note:before{content:'';position:absolute;width:7px;height:7px;top:-4px;left:calc(50% - 3.5px);background:#8751b4;transform:rotate(45deg);box-shadow:0 0 0 5px #efe3f6}
@media(max-width:760px){
 .hero .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'title' 'description' 'art' 'actions';padding-top:12px;gap:0;min-height:auto}
 .hero .hero-grid>div:first-child{display:contents}
 .hero .hero-grid h1{grid-area:title;text-align:center;align-self:center;font-size:clamp(60px,17.5vw,76px);line-height:1.08;margin:17px 0 6px;padding:3px 0 5px;letter-spacing:0}
 .hero .hero-grid>div:first-child>p{grid-area:description;font-size:clamp(21px,5.8vw,25px);line-height:1.45;text-align:center;max-width:100%;margin:0;padding:2px 0;color:#ccb1e7}
 .hero .hero-grid>.art{grid-area:art;width:100%;height:clamp(255px,76vw,330px);margin:0;transform:none}
 .hero .hero-grid>.art .portal{width:clamp(220px,65vw,285px);height:clamp(220px,65vw,285px);left:calc(50% - clamp(110px,32.5vw,142.5px));top:18px}
 .hero .hero-grid>.art .core{inset:18%}
 .hero .hero-grid>.art .core img{width:78%;height:auto;object-fit:contain}
 .hero .hero-grid>.art .ring{filter:drop-shadow(0 0 4px #9966ff50)}
 .hero .hero-grid .actions{grid-area:actions;display:grid;grid-template-columns:1fr;width:100%;max-width:380px;justify-self:center;gap:9px;margin:2px 0 25px}
 .hero .hero-grid .actions .btn{min-height:48px;width:100%;font-size:clamp(19px,5.3vw,22px);line-height:1.2;padding:11px 18px}
 .hero .nav>.btn{font-size:19px;min-height:38px;padding:8px 17px}
 .ticker{margin-top:0;padding:12px 0;box-shadow:0 -5px 17px #9966ff1f,0 8px 23px #9966ff1c,inset 0 0 15px #9966ff15}
 .ticker-track{font-size:22px}
 .story{padding:43px 0 95px}
 .story .wave-story-top{height:40px;top:-19px}
 .story .wave-story-bottom{height:115px}
 .story .story-grid{gap:26px}
 .story h2{font-size:clamp(34px,9.8vw,40px);line-height:1.17;margin:17px 0 21px}
 .story p{font-size:clamp(19px,5.4vw,22px);line-height:1.55;font-weight:400;margin-bottom:18px}
 .story-copy .lead{font-size:clamp(21px,5.8vw,24px);line-height:1.5;padding-right:12px;margin-bottom:24px}
 .story .interior-kicker{font-size:16px}
 .story .idea-map{padding:16px;border-radius:18px;background:linear-gradient(135deg,#33006622,#33003330)}
 .story .map-top,.story .map-top>span:last-child{font-size:17px}
 .story .map-bottom{font-size:16px}
 .story .map-node{font-size:20px;padding:6px 14px}
 .story .map-project strong{font-size:24px;line-height:1.3}
 .reference-light .interior-kicker{font-size:16px;gap:10px}
 .reference-light .interior-kicker>span{font-size:15px;padding-left:10px}
 .reference-light>.wrap{width:calc(100% - 40px)}
 .audience-v3.reference-light{padding:58px 0 76px}
 .audience-v3 .wave-audience-top{height:105px}
 .audience-v3 .wave-audience-bottom{height:88px}
 .audience-v3 h2{font-size:clamp(34px,9.6vw,40px);line-height:1.15;margin:18px 0 20px}
 .audience-v3 h2 em{padding-bottom:10px}
 .audience-v3 .audience-body>p{font-size:clamp(19px,5.3vw,22px);line-height:1.5;margin-bottom:0}
 .audience-v3 .inline-stats{gap:16px;margin-top:25px;max-width:none}
 .audience-v3 .inline-stats>div{min-height:151px;padding:13px 7px 19px;border-radius:20px;gap:4px}
 .audience-v3 .inline-stats .detail-icon{width:29px;height:28px}
 .audience-v3 .inline-stats strong{font-size:clamp(44px,12vw,54px);line-height:1;margin:0}
 .audience-v3 .inline-stats span{font-size:clamp(18px,5.1vw,22px);line-height:1.2;white-space:nowrap}
 .audience-v3 .inline-stats .stat-wave{height:37px}
 .method-v3.reference-light{padding:33px 0 82px}
 .method-v3 .wave-method-top{height:78px;top:-33px}
 .method-v3 .wave-method-bottom{height:82px}
 .method-v3 h2{font-size:clamp(33px,9.2vw,40px);line-height:1.14;margin:17px 0 21px}
 .method-v3 .method-layout>div:first-child>p{font-size:clamp(19px,5.3vw,22px);line-height:1.5}
 .method-v3 .method-chart{padding-top:25px}
 .method-v3 .ratio-track{height:75px;margin-bottom:24px}
 .method-v3 .ratio-track strong{font-size:clamp(26px,7.3vw,32px)}
 .method-v3 .ratio-track span{font-size:clamp(18px,5vw,22px);line-height:1.1}
 .method-v3 .ratio-copy{gap:12px;margin-bottom:25px}
 .method-v3 .ratio-copy>div{padding:0 6px}
 .method-v3 .ratio-copy .detail-icon{width:32px;height:32px;margin-bottom:5px}
 .method-v3 .ratio-copy h3{font-size:clamp(23px,6.3vw,27px);margin:4px 0 10px;line-height:1.2}
 .method-v3 .ratio-copy p{font-size:clamp(18px,5vw,21px);line-height:1.4}
 .method-v3 .method-note{font-size:clamp(17px,4.6vw,20px);line-height:1.35;padding:11px 13px;border-radius:32px}
}
@media(min-width:761px) and (max-width:1050px){
 .audience-v3 .audience-layout,.method-v3 .method-layout{width:84%}
 .reference-light p,.audience-v3 .audience-body>p,.method-v3 .method-layout>div:first-child>p{font-size:25px}
}
@media(prefers-reduced-motion:reduce){.reference-light .ratio-track{animation:none}}

/* Keep decorative strokes transparent and the seamless ticker anchored left. */
.section-wave path[stroke]{fill:none}
.ticker{direction:ltr}


.section-wave path[stroke]{filter:drop-shadow(0 0 3px #b888ee88)}

/* Give the narrow 30% segment enough breathing room for Arabic glyphs. */
.method-v3 .ratio-track>.ratio-theory{padding-inline:8px}
.method-v3 .ratio-track>.ratio-theory span{font-size:21px;line-height:1.35;white-space:nowrap}
@media(max-width:760px){.method-v3 .ratio-track>.ratio-theory span{font-size:clamp(14px,3.9vw,17px);line-height:1.35}.method-v3 .ratio-track>.ratio-theory{padding-inline:4px}}
.audience-v3 .inline-stats strong,.method-v3 .ratio-track strong,.hr-counts strong{font-family:Arial,Tahoma,sans-serif;font-weight:600;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.035em}