/* kedmati.com — maps the shared scroll-story kit onto the site's tokens (cream / teal / navy, Manrope) */
.kd-stage{--st-bg:#f7efe2;--st-fg:var(--navy,#123F5D);--st-muted:var(--muted,#5A7183);--st-accent:var(--teal-deep,#17807F);
  --st-line:rgba(18,63,93,.14);--st-maxw:var(--maxw,1180px);--st-gutter:24px;--st-nav:77px;
  --st-display:var(--font);--st-display-weight:var(--bold,800)}
/* the site gives every <section> block padding; the stage starts under the sticky header so the pin begins at scroll 0 */
.kd-stage{padding-block:0;margin-top:calc(-1 * var(--st-nav))}
.kd-stage .st-poster-start{background-image:url(home-start.jpg)}
.kd-stage .st-poster-end{background-image:url(home-end.jpg)}
.kd-stage .st-title{letter-spacing:-.028em;line-height:1.06}
html[lang="ar"] .kd-stage .st-title{letter-spacing:0;line-height:1.35}
.kd-stage .kd-hl{color:var(--teal-deep,#17807F)}
.kd-stage .eyebrow{justify-self:start;margin:0;background:rgba(223,243,242,.92)}
.kd-stage .st-lede{color:var(--muted,#5A7183);max-width:42ch}
.kd-stage .st-actions{gap:14px}
.kd-stage .hero-points{margin-top:4px}
.kd-stage .st-steps span{font-weight:600;letter-spacing:.02em}
/* the site's own CTA hover lift is kept; GSAP moves the scene, not the buttons */
@media (max-width:820px){.kd-stage{--st-bottom:calc(69px + env(safe-area-inset-bottom,0px))}}
@media (max-width:760px){
  .kd-stage .hero-points{display:none}
  .kd-stage .eyebrow{font-size:.78rem;padding:6px 13px}
  .kd-stage .st-actions{gap:10px}
  .kd-stage .st-actions .btn{min-height:48px;padding:10px 20px;font-size:.95rem}
}
@media (min-width:761px) and (max-height:760px){.kd-stage .hero-points{display:none}}
/* posters approximate the canvas placement (contain) so the hand-over is seamless */
.kd-stage .st-poster{background-size:contain;background-position:85% 55%}
html[dir="rtl"] .kd-stage .st-poster{background-position:15% 55%}
/* portrait tablets: the desktop side-by-side squeezes the villa under the words, so use the phone
   arrangement (picture on top, words below); the canvas is widened to the left so the off-centre
   subject sits near the middle of the band */
@media (min-width:761px) and (max-width:1024px) and (orientation:portrait){
  .kd-stage .st-media{bottom:auto;height:55%}
  .kd-stage .st-media::after,html[dir="rtl"] .kd-stage .st-media::after{background:linear-gradient(0deg,var(--st-bg) 0%,color-mix(in srgb,var(--st-bg) 30%,transparent) 26%,transparent 50%),
    linear-gradient(180deg,color-mix(in srgb,var(--st-bg) 70%,transparent) 0%,transparent 22%)}
  .kd-stage .st-media canvas{left:-30%;right:auto;width:130%}
  html[dir="rtl"] .kd-stage .st-media canvas{left:0}
  .kd-stage .st-poster{background-position:50% 60%}
  .kd-stage .st-copy{align-items:flex-end;padding:0 0 calc(84px + var(--st-bottom))}
  .kd-stage .st-story{max-width:620px}
}
/* phones: words sit under the picture, so the RTL mirror is not needed (it would push the tools off the left edge) */
@media (max-width:760px){html[dir="rtl"] .kd-stage.st-mirror-rtl canvas,html[dir="rtl"] .kd-stage.st-mirror-rtl .st-poster{transform:none}}

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