/* ==========================================================================
   Develomart motion & editorial sections
   Loaded on top of style.css. Every animation is opt-in through a data
   attribute, and nothing is hidden unless JavaScript confirmed it can run,
   so the page is readable with scripts blocked.
   ========================================================================== */

:root{
  --dm-ease:cubic-bezier(.16,1,.3,1);
  --dm-slow:1.1s;
  --dm-mid:.75s;
}

/* --------------------------------------------------------------------------
   1. Preloader
   -------------------------------------------------------------------------- */
.dm-preloader{
  position:fixed;inset:0;z-index:9999;background:var(--dm-paper);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 clamp(20px,5vw,64px) clamp(28px,6vh,64px);
  transition:opacity .6s var(--dm-ease),visibility .6s;
}
.dm-preloader__word{font-family:var(--dm-serif);font-size:clamp(1.6rem,6vw,3.4rem);line-height:1}
body.rtl .dm-preloader__word{font-family:var(--dm-arabic)}
.dm-preloader__count{font-size:clamp(1.6rem,6vw,3.4rem);font-variant-numeric:tabular-nums;color:var(--dm-muted)}
.dm-preloader__bar{position:absolute;inset-inline:0;inset-block-end:0;height:2px;background:var(--dm-accent);width:0;transition:width .25s linear}
.dm-preloader.is-done{opacity:0;visibility:hidden}
html.dm-loading,html.dm-loading body{overflow:hidden}

/* --------------------------------------------------------------------------
   2. Reveal primitives
   -------------------------------------------------------------------------- */
.dm-motion [data-reveal]{opacity:0;transition:opacity var(--dm-slow) var(--dm-ease),transform var(--dm-slow) var(--dm-ease)}
.dm-motion [data-reveal="up"],.dm-motion [data-reveal=""]{transform:translateY(34px)}
.dm-motion [data-reveal="left"]{transform:translateX(-40px)}
.dm-motion [data-reveal="right"]{transform:translateX(40px)}
.dm-motion [data-reveal="scale"]{transform:scale(.94)}
.dm-motion [data-reveal="fade"]{transform:none}
.dm-motion [data-reveal].is-in{opacity:1;transform:none}

/* Image mask: the picture wipes up as it scales down into place */
.dm-motion [data-reveal="mask"]{opacity:1;clip-path:inset(100% 0 0 0)}
.dm-motion [data-reveal="mask"] > img,.dm-motion [data-reveal="mask"] > picture > img{transform:scale(1.18);transition:transform 1.6s var(--dm-ease)}
.dm-motion [data-reveal="mask"]{transition:clip-path 1.3s var(--dm-ease)}
.dm-motion [data-reveal="mask"].is-in{clip-path:inset(0 0 0 0)}
.dm-motion [data-reveal="mask"].is-in > img,.dm-motion [data-reveal="mask"].is-in > picture > img{transform:scale(1)}

/* Line-by-line heading reveal */
.dm-motion .dm-line{display:block;overflow:hidden}
.dm-motion .dm-line > span{display:block;transform:translateY(110%);transition:transform 1s var(--dm-ease)}
.dm-motion .dm-line.is-in > span{transform:none}

.dm-rule{height:1px;background:var(--dm-line);transform-origin:left center}
body.rtl .dm-rule{transform-origin:right center}
.dm-motion .dm-rule{transform:scaleX(0);transition:transform 1.2s var(--dm-ease)}
.dm-motion .dm-rule.is-in{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  .dm-motion [data-reveal],
  .dm-motion .dm-line > span,
  .dm-motion .dm-rule,
  .dm-motion [data-reveal="mask"] > img{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;
  }
  .dm-preloader{display:none}
}

/* --------------------------------------------------------------------------
   3. Cinematic hero
   -------------------------------------------------------------------------- */
.dm-stage{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--dm-ink)}
.dm-stage__media{position:absolute;inset:0}
.dm-stage__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.dm-stage__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.15) 100%)}
.dm-stage__inner{position:relative;width:100%;padding:0 0 clamp(40px,7vh,88px);color:#fff}
.dm-stage__eyebrow{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:18px}
.dm-stage h1{font-size:clamp(2.6rem,7.5vw,6rem);line-height:1.02;margin:0 0 22px;color:#fff}
.dm-stage__lede{max-width:46ch;font-size:clamp(1rem,1.6vw,1.16rem);color:rgba(255,255,255,.86)}
.dm-stage__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:34px}
.dm-stage__scroll{display:flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.dm-stage__scroll i{display:block;width:1px;height:40px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.dm-stage__scroll i::after{content:"";position:absolute;inset-inline:0;top:-100%;height:100%;background:var(--dm-accent);animation:dm-drip 2.4s var(--dm-ease) infinite}
@keyframes dm-drip{0%{top:-100%}60%,100%{top:100%}}
.dm-stage .dm-btn--accent{color:#fff}

/* --------------------------------------------------------------------------
   4. Statement block
   -------------------------------------------------------------------------- */
.dm-statement{padding:clamp(72px,12vh,150px) 0}
.dm-statement__eyebrow{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dm-muted);margin-bottom:26px}
.dm-statement h2{font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.24;max-width:20ch;margin:0}
.dm-statement__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,80px);align-items:start}
@media(max-width:820px){.dm-statement__grid{grid-template-columns:1fr}}
.dm-statement__body{font-size:1.02rem;line-height:1.8;color:var(--dm-muted);padding-top:10px}

/* --------------------------------------------------------------------------
   5. Sticky stack: media pins while the copy scrolls past
   -------------------------------------------------------------------------- */
.dm-stack{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:900px){.dm-stack{grid-template-columns:1fr}}
.dm-stack__media{position:sticky;top:110px;aspect-ratio:4/5;overflow:hidden;background:var(--dm-sand)}
@media(max-width:900px){.dm-stack__media{position:relative;top:0;aspect-ratio:16/10}}
.dm-stack__media img{width:100%;height:100%;object-fit:cover}
.dm-stack__panels{display:flex;flex-direction:column;gap:clamp(48px,10vh,120px);padding:clamp(20px,6vh,80px) 0}
.dm-stack__panel h3{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:12px}
.dm-stack__num{font-size:.74rem;letter-spacing:.2em;color:var(--dm-accent);margin-bottom:14px}

/* --------------------------------------------------------------------------
   6. Pinned horizontal scroll
   -------------------------------------------------------------------------- */
.dm-hscroll{position:relative}
.dm-hscroll__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.dm-hscroll__track{display:flex;gap:clamp(16px,2vw,28px);padding-inline:clamp(20px,6vw,80px);will-change:transform}
.dm-hscroll__item{flex:none;width:clamp(260px,32vw,460px)}
.dm-hscroll__item figure{margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--dm-sand)}
.dm-hscroll__item img{width:100%;height:100%;object-fit:cover}
.dm-hscroll__item figcaption{padding-top:14px;font-size:.9rem}
.dm-hscroll__item figcaption span{display:block;color:var(--dm-muted);font-size:.8rem;margin-top:3px}
.dm-hscroll__lead{flex:none;width:clamp(240px,26vw,380px);align-self:center}
.dm-hscroll__lead h2{margin-bottom:12px}
/* Without JS, or on small screens, it degrades to a normal swipe strip */
.dm-hscroll:not(.is-pinned) .dm-hscroll__pin{position:relative;height:auto;padding:clamp(48px,8vh,90px) 0}
.dm-hscroll:not(.is-pinned) .dm-hscroll__track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:14px}
.dm-hscroll:not(.is-pinned) .dm-hscroll__item{scroll-snap-align:start}

/* --------------------------------------------------------------------------
   7. Counters
   -------------------------------------------------------------------------- */
.dm-figures{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dm-line);border-block:1px solid var(--dm-line)}
@media(max-width:820px){.dm-figures{grid-template-columns:repeat(2,1fr)}}
.dm-figures div{background:var(--dm-paper);padding:clamp(24px,4vw,44px) clamp(18px,2vw,28px)}
.dm-figures strong{display:block;font-family:var(--dm-serif);font-size:clamp(2rem,4.5vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums}
body.rtl .dm-figures strong{font-family:var(--dm-arabic)}
.dm-figures span{display:block;margin-top:10px;font-size:.82rem;color:var(--dm-muted)}

/* --------------------------------------------------------------------------
   8. Location / points of interest
   -------------------------------------------------------------------------- */
.dm-poi{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
@media(max-width:900px){.dm-poi{grid-template-columns:1fr}}
.dm-poi__media{aspect-ratio:1/1;overflow:hidden;background:var(--dm-sand)}
.dm-poi__media img{width:100%;height:100%;object-fit:cover}
.dm-poi__list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--dm-line)}
.dm-poi__list li{border-bottom:1px solid var(--dm-line)}
.dm-poi__btn{
  width:100%;background:none;border:0;font:inherit;text-align:start;cursor:pointer;
  padding:16px 0;display:flex;justify-content:space-between;gap:16px;align-items:baseline;color:var(--dm-ink);
}
.dm-poi__btn:hover{color:var(--dm-accent-deep)}
.dm-poi__btn span{font-size:.82rem;color:var(--dm-muted);white-space:nowrap}
.dm-poi__body{max-height:0;overflow:hidden;transition:max-height .5s var(--dm-ease)}
.dm-poi__body p{padding-bottom:16px;margin:0;font-size:.92rem;color:var(--dm-muted)}
.dm-poi__item.is-open .dm-poi__body{max-height:260px}
.dm-poi__item.is-open .dm-poi__btn{color:var(--dm-accent-deep)}

/* --------------------------------------------------------------------------
   9. Payment / milestone plan
   -------------------------------------------------------------------------- */
.dm-plan-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--dm-line)}
.dm-plan-steps li{display:flex;gap:clamp(16px,4vw,48px);align-items:baseline;padding:clamp(16px,2.4vw,26px) 0;border-bottom:1px solid var(--dm-line)}
.dm-plan-steps strong{font-family:var(--dm-serif);font-size:clamp(1.5rem,3vw,2.2rem);min-width:4ch;color:var(--dm-accent-deep)}
body.rtl .dm-plan-steps strong{font-family:var(--dm-arabic)}
.dm-plan-steps span{font-size:.98rem}

/* --------------------------------------------------------------------------
   10. Full-bleed parallax band
   -------------------------------------------------------------------------- */
.dm-band{position:relative;min-height:70vh;display:flex;align-items:center;overflow:hidden;background:var(--dm-ink)}
.dm-band__media{position:absolute;inset:-12% 0}
.dm-band__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.dm-band__media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.dm-band__inner{position:relative;color:#fff;padding:clamp(56px,10vh,110px) 0;max-width:56ch}
.dm-band h2{color:#fff;font-size:clamp(1.6rem,3.6vw,2.8rem)}
.dm-band p{color:rgba(255,255,255,.86)}

/* --------------------------------------------------------------------------
   11. Marquee
   -------------------------------------------------------------------------- */
.dm-marquee{overflow:hidden;border-block:1px solid var(--dm-line);padding:18px 0}
.dm-marquee__track{display:flex;gap:52px;width:max-content;animation:dm-marquee 38s linear infinite}
.dm-marquee span{font-family:var(--dm-serif);font-size:clamp(1.1rem,2vw,1.6rem);color:var(--dm-muted);white-space:nowrap}
.dm-marquee span::after{content:"—";color:var(--dm-accent);margin-inline-start:52px}
@keyframes dm-marquee{to{transform:translateX(-50%)}}
body.rtl .dm-marquee__track{animation-direction:reverse}
@media(prefers-reduced-motion:reduce){.dm-marquee__track{animation:none}}

/* --------------------------------------------------------------------------
   12. Header behaviour on scroll
   -------------------------------------------------------------------------- */
.dm-header{transition:transform .45s var(--dm-ease),background .3s ease,border-color .3s ease}
body.dm-hide-header .dm-header{transform:translateY(-101%)}
body.dm-over-hero .dm-header{background:transparent;border-bottom-color:transparent}
body.dm-over-hero .dm-header .dm-brand,
body.dm-over-hero .dm-header .dm-nav a,
body.dm-over-hero .dm-header .dm-btn--ghost{color:#fff}
body.dm-over-hero .dm-header .dm-btn--ghost{border-color:rgba(255,255,255,.6)}
body.dm-over-hero .dm-burger span{background:#fff}

/* Elementor's editor and preview must never be animated out of view */
.elementor-editor-active [data-reveal],
.elementor-editor-active .dm-line > span{opacity:1!important;transform:none!important;clip-path:none!important}

/* Video heroes fill the stage the same way images do */
.dm-stage__media video,.dm-band__media video{width:100%;height:100%;object-fit:cover}