/* Scrolling is native. Visual layers alone move in response to its position. */
.reading-progress{display:none;position:fixed;z-index:80;inset:0 0 auto;height:3px;pointer-events:none;background:var(--gold-deep);transform-origin:left;transform:scaleX(var(--reading-progress,0))}
.motion-enabled .reading-progress{display:block}
[dir=rtl] .reading-progress{transform-origin:right}
.motion-enabled .hero{clip-path:inset(0 var(--hero-inset,0px));background:var(--ink)}
.motion-enabled .hero>img{top:-70px;height:calc(100% + 140px);translate:0 var(--hero-image-y,0px);scale:var(--hero-zoom,1.035);will-change:translate;animation:hero-settle 2.8s cubic-bezier(.2,.65,.3,1) both}
.motion-enabled .hero-content{translate:0 var(--hero-copy-y,0px);opacity:var(--hero-copy-opacity,1);will-change:translate}
.motion-enabled .hero-content:focus-within{opacity:1}
.hero-word{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.motion-enabled .hero-content h1{animation:none}
.motion-enabled .hero-word{animation:title-unveil 1.35s cubic-bezier(.16,1,.3,1) var(--entrance-delay,0ms) both}
@keyframes title-unveil{from{opacity:0;translate:0 .65em;clip-path:inset(0 0 100%)}to{opacity:1;translate:0 0;clip-path:inset(-.2em -.1em)}}
.motion-frame{display:none;position:absolute;inset:24px;width:calc(100% - 48px);height:calc(100% - 48px);pointer-events:none;fill:none;stroke:#e6d7ba75;stroke-width:1}
.motion-frame rect{stroke-dasharray:1;stroke-dashoffset:1}
.motion-enabled .motion-frame{display:block}
.motion-enabled .hero .motion-frame{inset:26px 28px 78px;width:calc(100% - 56px);height:calc(100% - 104px)}
.motion-enabled .hero .motion-frame rect{animation:frame-draw 2.6s .45s cubic-bezier(.3,.1,.1,1) both}
.motion-enabled .coast-interlude .motion-frame{inset:24px 24px 54px;height:calc(100% - 78px)}
.motion-enabled .coast-interlude .motion-frame rect{stroke-dashoffset:var(--frame-offset,1)}
@keyframes frame-draw{from{stroke-dashoffset:1;opacity:0}15%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
.motion-enabled .hero-rule{transform-origin:top;animation:draw-hero-rule 1.5s .2s cubic-bezier(.2,.7,.3,1) both}
.motion-enabled .scroll-arrow{animation:scroll-invitation 2.2s 1.4s 3}
@keyframes draw-hero-rule{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes scroll-invitation{0%,100%{translate:0 0}45%{translate:0 7px}}

/* Large typography drifts across the break between the introduction and assets. */
.signature-motion{overflow:hidden;overflow:clip;padding:0 0 clamp(2.5rem,5vw,5.5rem);margin-top:clamp(-3rem,-3vw,-1rem);color:var(--ink);user-select:none}
.signature-motion-track{display:flex;justify-content:center;align-items:center;gap:.2em;width:max-content;min-width:100%;font:400 clamp(4.5rem,13.8vw,13rem)/1.15 var(--display);letter-spacing:-.055em;white-space:nowrap;direction:ltr;color:#142d4e24}
.signature-motion-track em{font-weight:400;color:var(--gold-deep)}
.signature-motion-track>span{font-size:.17em;margin:0 1.8em;font-style:normal;color:var(--gold-deep)}
.motion-enabled .signature-motion-track{translate:var(--signature-x,0px) 0;will-change:translate}
.motion-enabled .signature-motion-track>span{rotate:var(--signature-turn,0deg)}

/* Word spans retain spaces, emphasis and complete Arabic words. */
.motion-word{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.motion-enabled .motion-word{opacity:var(--word-opacity,.3);translate:0 var(--word-y,20px)}
.motion-heading{overflow:visible}

/* Larger travel and stagger make entrances visible, while keyboard focus can
   immediately finish any entrance containing an interactive element. */
.motion-enabled .motion-reveal{opacity:0;translate:0 52px;transition:opacity 1s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),translate 1.25s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms)}
.motion-enabled .motion-reveal.motion-visible{opacity:1;translate:0 0}
.motion-enabled .motion-reveal:focus-within{opacity:1;translate:0 0;transition-delay:0ms}
.motion-enabled .section-index.motion-reveal{translate:0 20px;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.16,1,.3,1),opacity .7s,translate 1s}
.motion-enabled[dir=rtl] .section-index.motion-reveal{clip-path:inset(0 0 0 100%)}
.motion-enabled .section-index.motion-visible{clip-path:inset(0);translate:0 0}
.motion-enabled[dir=rtl] .section-index.motion-visible{clip-path:inset(0)}
.motion-enabled .project-card.motion-reveal{translate:0 90px;rotate:1.5deg;transform-origin:50% 100%;transition:opacity 1s var(--reveal-delay,0ms),translate 1.25s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),rotate 1.25s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),transform .4s,box-shadow .4s,border-color .4s}
.motion-enabled .project-card:nth-child(2).motion-reveal{rotate:-1.5deg}
.motion-enabled .project-card.motion-visible,.motion-enabled .project-card:nth-child(2).motion-visible,.motion-enabled .project-card.motion-reveal:focus-within,.motion-enabled .project-card:nth-child(2).motion-reveal:focus-within{rotate:0deg;translate:0 0}
.motion-enabled .project-card.motion-visible:hover{transform:translateY(-8px)}
.motion-enabled .project-details>div{position:relative}
.motion-enabled .project-details>div:after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;background:var(--gold-deep);opacity:.45;transform:scaleX(0);transform-origin:left;transition:transform 1.3s cubic-bezier(.16,1,.3,1) calc(var(--reveal-delay,0ms) + 250ms)}
.motion-enabled[dir=rtl] .project-details>div:after{transform-origin:right}
.motion-enabled .project-details>div:nth-child(2):after{transition-delay:calc(var(--reveal-delay,0ms) + 380ms)}
.motion-enabled .project-details>div:nth-child(3):after{transition-delay:calc(var(--reveal-delay,0ms) + 510ms)}
.motion-enabled .project-card.motion-visible .project-details>div:after{transform:scaleX(1)}
.motion-enabled .project-hotel .project-details>div:after{background:var(--gold)}
.project-card{position:relative;isolation:isolate}
.project-card:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,25%),#fff4,transparent 65%);transition:opacity .55s}
@media(hover:hover) and (pointer:fine){
  .motion-enabled .project-card.motion-pointer.motion-visible{transform:perspective(1100px) translateY(-8px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));box-shadow:0 24px 44px #142d4e16}
  .motion-enabled .project-card.motion-pointer:before{opacity:1}
}
.motion-enabled .principles>div{position:relative;border-top-color:transparent}
.motion-enabled .principles>div:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:#a8bbd0;transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms)}
.motion-enabled[dir=rtl] .principles>div:before{transform-origin:right}
.motion-enabled .principles>div.motion-visible:before{transform:scaleX(1)}

/* The coastal scene opens from an inset frame while image and text move at
   different speeds. Overscan covers both extremes without exposed image edges. */
.motion-enabled .coast-interlude{height:clamp(540px,78svh,820px);clip-path:inset(0 var(--coast-inset,0px) round var(--coast-radius,0px));background:var(--ink)}
.motion-enabled .coast-interlude>img{inset:-130px 0 auto;height:calc(100% + 260px);translate:0 var(--coast-image-y,0px);scale:var(--coast-scale,1.06);transform:none;transition:none;will-change:translate}
.motion-enabled .coast-interlude:hover>img{transform:none}
.motion-enabled .coast-interlude-copy{translate:0 var(--coast-copy-y,0px);position:relative;z-index:1}
.motion-enabled .coast-interlude h2{font-size:clamp(3rem,5.3vw,5.6rem)}

/* A gold line traces the four investment steps as the reader reaches them. */
.motion-enabled .process{position:relative;border-top:0}
.motion-enabled .process:before,.motion-enabled .process:after{content:"";position:absolute;inset-block:35px;inset-inline-start:14px;width:1px;background:#f5f1e829;pointer-events:none}
.motion-enabled .process:after{background:var(--gold);transform-origin:top;transform:scaleY(var(--process-progress,0))}
.motion-enabled .process>div{position:relative;z-index:1;padding-block:2.4rem;grid-template-columns:28px minmax(0,1fr);border-bottom-color:#f5f1e821;column-gap:1.8rem}
.motion-enabled .process>div>span{display:grid;place-items:center;padding:0;margin-top:2px;width:29px;height:29px;border:1px solid #d0b37c40;border-radius:50%;background:var(--ink);color:#b3c3d8;transition:background .55s,border-color .55s,color .55s,box-shadow .55s}
.motion-enabled .process>.motion-step-active>span{color:var(--ink);background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px #d0b37c0c}
@media(min-width:981px){.motion-enabled .opportunity-grid{align-items:start}.motion-enabled .opportunity-copy{position:sticky;top:140px}.motion-enabled .process{margin-top:0}.motion-enabled .process>div{min-height:158px}}

@media(max-width:700px){
  .motion-enabled .hero .motion-frame{inset:16px 12px 78px;width:calc(100% - 24px);height:calc(100% - 94px);stroke:#e6d7ba45}
  .motion-enabled .coast-interlude .motion-frame{inset:18px 12px 46px;width:calc(100% - 24px);height:calc(100% - 64px)}
  .motion-enabled .hero-word{animation-duration:1.1s}
  .motion-enabled .hero>img{top:-52px;height:calc(100% + 104px)}
  .motion-enabled .motion-reveal{translate:0 30px;transition-duration:.8s,1s}
  .motion-enabled .project-card.motion-reveal{translate:0 55px;rotate:0deg}
  .motion-enabled .project-card:nth-child(2).motion-reveal{rotate:0deg}
  .motion-enabled .project-card.motion-visible{translate:0 0}
  .motion-enabled .coast-interlude{height:480px}
  .motion-enabled .coast-interlude>img{inset-block-start:-70px;height:calc(100% + 140px)}
  .motion-enabled .coast-interlude h2{font-size:2.8rem}
  .motion-enabled .process>div{padding-block:1.7rem;column-gap:1.2rem}
  .motion-enabled[dir=rtl] .coast-interlude h2{font-size:2.3rem}
}
@media(prefers-reduced-motion:reduce){
  .reading-progress,.motion-frame{display:none!important}
  .hero-word{opacity:1!important;translate:none!important;clip-path:none!important;animation:none!important}
  .project-card:before{display:none}
  .motion-enabled .project-card.motion-pointer.motion-visible{transform:none}
  .motion-word,.signature-motion-track,.hero>img,.hero-content,.coast-interlude>img,.coast-interlude-copy,.motion-reveal{translate:none!important;scale:none!important;rotate:none!important;opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .hero,.coast-interlude,.section-index{clip-path:none!important}
  .motion-enabled .opportunity-copy{position:static}
}
@media print{
  .reading-progress,.signature-motion,.motion-frame{display:none!important}
  .hero-word{opacity:1!important;translate:none!important;clip-path:none!important;animation:none!important}
  .motion-word,.motion-reveal{opacity:1!important;translate:none!important;rotate:none!important;transform:none!important}
  .motion-enabled .opportunity-copy{position:static}
  .motion-enabled .section-index{clip-path:none}
  .motion-enabled .hero,.motion-enabled .coast-interlude{clip-path:none;background:transparent}
  .motion-enabled .hero-content,.motion-enabled .coast-interlude-copy{translate:none;opacity:1}
}
@media(max-width:700px){.motion-enabled[lang=es] h2.motion-heading{font-size:clamp(2.1rem,9.6vw,2.8rem)}}