/* Parallax home preview. Colors, font and spacing come from the site's own tokens. */
.design-parallax{overflow-x:clip}
.px-media{position:absolute;inset:0;overflow:hidden;background:var(--deep2)}
.px-media img{position:absolute;inset-inline:0;inset-block-start:-20%;width:100%;height:140%;max-width:none;object-fit:cover;will-change:transform}

/* Hero: the photo trails behind a solid panel that runs ahead of it */
.px-hero{position:relative;min-height:min(92svh,920px);display:flex;align-items:flex-end;overflow:hidden;background:var(--deep)}
.px-hero__disc{position:absolute;inset-block-end:-11vw;inset-inline-end:-7vw;width:34vw;aspect-ratio:1;border-radius:50%;background:var(--amber);opacity:.96}
.px-hero__in{position:relative;width:100%;padding-block:clamp(90px,14svh,160px) clamp(84px,11svh,130px)}
.px-hero__panel{width:min(100%,690px);background:var(--surface);color:#fff;border-radius:var(--radius-lg);padding:clamp(24px,4vw,56px);will-change:transform}
.px-hero .kicker{display:inline-block;background:var(--deep);border-radius:14px;padding:5px 14px;font-size:.92rem;line-height:1.6;margin-block-end:18px}
.px-hero .display{color:#fff}
.px-hero .lead{margin-block-start:14px;color:#fff}
.px-hero .btn-row{margin-block-start:clamp(20px,3vw,30px)}

.px-doors{position:relative;z-index:2;margin-block-start:-54px}
.px-doors .doors{margin-block-start:0}

/* One number, with the heart drifting behind it */
.px-total{position:relative;overflow:hidden;padding-block:clamp(90px,17svh,190px);text-align:center}
.px-total__mark{position:absolute;inset-block-start:50%;inset-inline-start:50%;width:min(58vw,600px);max-width:none;margin:calc(min(58vw,600px) * -.485) calc(min(58vw,600px) * -.5) 0;opacity:.13}
html[dir="rtl"] .px-total__mark{margin-inline:calc(min(58vw,600px) * -.5) 0}
.px-total__in{position:relative}
.px-total__n{display:block;font:700 clamp(4.2rem,2rem + 12vw,12rem)/1.05 Plex,sans-serif;color:var(--green-text);direction:ltr;font-variant-numeric:tabular-nums}
.px-total p{margin-block-start:10px;font-size:clamp(1.15rem,1rem + .9vw,1.8rem);font-weight:600;color:var(--deep)}

/* Stories: a window onto a slower photo, with a card crossing it */
.px-story{position:relative;display:flex;align-items:center;min-height:min(92svh,860px);overflow:hidden}
.px-story__in{position:relative;width:100%;display:flex;padding-block:clamp(70px,11svh,120px)}
.px-story--2 .px-story__in,.px-story--4 .px-story__in{justify-content:flex-end}
.px-card{width:min(100%,540px);border-radius:var(--radius-lg);padding:clamp(24px,3.6vw,50px);will-change:transform}
.px-story--1 .px-card{background:var(--deep);color:#fff}
.px-story--2 .px-card,.px-story--4 .px-card{background:#fff}
.px-story--3 .px-card{background:var(--surface);color:#fff}
.px-story--1 .display,.px-story--3 .display{color:#fff}
.px-card .lead{margin-block-start:10px}
.px-story--1 .lead,.px-story--3 .lead{color:#fff}
.px-stat{display:flex;flex-direction:column;margin-block-start:clamp(16px,2.4vw,26px)}
.px-num{font:700 clamp(2.8rem,2rem + 3.2vw,5rem)/1.1 Plex,sans-serif;color:var(--green-text);direction:ltr;align-self:flex-start;font-variant-numeric:tabular-nums}
.px-story--1 .px-num,.px-story--3 .px-num{color:var(--amber)}
.px-stat>span{font-weight:600}

/* Numbers: columns drift against each other */
.px-nums{background:var(--deep);color:#fff;padding-block:clamp(70px,11svh,130px);overflow:hidden}
.px-nums__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(18px,3vw,40px)}
.px-nums__n{display:flex;flex-direction:column;padding-inline-start:clamp(12px,1.4vw,20px);border-inline-start:3px solid var(--amber);will-change:transform}
.px-nums__n strong{font:700 clamp(2.1rem,1.6rem + 1.9vw,3.5rem)/1.15 Plex,sans-serif;direction:ltr;align-self:flex-start}
.px-nums__link{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-block-start:clamp(38px,5vw,60px);padding-block-start:16px;border-block-start:1px solid var(--green);text-decoration:none;color:#fff}
.px-nums__link strong{font-size:1.2rem;color:var(--amber)}
.px-nums__link:hover span{text-decoration:underline;text-underline-offset:5px}

/* Beyond Riyadh: three columns at three speeds */
.px-beyond{background:var(--mist);padding-block:var(--band) calc(var(--band) + 60px);overflow:hidden}
.px-beyond__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-block-start:clamp(30px,5vw,70px);align-items:start}
.px-beyond__item{background:#fff;border-radius:var(--radius);overflow:hidden;will-change:transform}
.px-beyond__item:nth-child(2){margin-block-start:clamp(40px,7vw,100px)}
.px-beyond__win{position:relative;aspect-ratio:4/4.4}
.px-beyond__copy{padding:clamp(18px,2vw,26px)}
.px-beyond__copy h3{font:700 clamp(1.35rem,1.2rem + .6vw,1.8rem)/1.4 Plex,sans-serif;color:var(--green-text)}
.px-beyond__copy p{margin-block-start:6px;color:var(--mute)}

/* Closing call over a slow photo */
.px-call{position:relative;overflow:hidden;margin-block-start:var(--band);padding-block:clamp(80px,15svh,170px)}
.px-call .last-call{position:relative;margin-block:0;padding-block:0}

@media (max-width:900px){
	.px-nums__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.px-beyond__grid{grid-template-columns:minmax(0,1fr)}
	.px-beyond__item:nth-child(2){margin-block-start:0}
	.px-beyond__win{aspect-ratio:16/11}
}
@media (max-width:760px){
	.px-hero{min-height:auto}
	.px-hero__in{padding-block:clamp(190px,42svh,300px) 76px}
	.px-hero__disc{width:52vw;inset-block-end:auto;inset-block-start:-14vw;inset-inline-end:-14vw}
	.px-story{min-height:auto}
	.px-story__in{padding-block:clamp(200px,44svh,320px) 28px}
	.px-card{width:100%}
	.px-total__mark{width:86vw;margin:-42vw -43vw 0}
	html[dir="rtl"] .px-total__mark{margin-inline:-43vw 0}
}