/* ==========================================================================
   Project landing page — nine scroll-driven scenes.
   ========================================================================== */
.is-landing .td-main,.td-l{background:var(--ink);color:var(--stone)}
.td-l{--text:var(--stone);--muted:rgba(243,240,233,.66);--line:rgba(243,240,233,.14)}
.td-menu-btn--cta{background:var(--oxblood);border-color:var(--oxblood)}
.td-menu-btn--cta .td-squares i{background:var(--stone)}
.td-l-eyebrow{color:#E2A9B0;margin-bottom:18px}
.td-l-title{font-size:clamp(2.2rem,5.6vw,5.2rem);line-height:1.02;font-weight:600;letter-spacing:-.02em;text-transform:uppercase;max-width:14em}
html[lang=ar] .td-l-title{text-transform:none;letter-spacing:0;line-height:1.3}

/* 1 — Opening */
.td-l1{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.td-l1__media{position:absolute;inset:0}
.td-l1__media img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(50% - var(--beam)),#000 calc(50% - var(--beam) + 5%),#000 calc(50% + var(--beam) - 5%),transparent calc(50% + var(--beam)));
  mask-image:linear-gradient(90deg,transparent calc(50% - var(--beam)),#000 calc(50% - var(--beam) + 5%),#000 calc(50% + var(--beam) - 5%),transparent calc(50% + var(--beam)))}
.td-l1{--beam:7%}
.td-l1__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.4),transparent 40%,rgba(16,16,16,.9))}
.td-l1__beam{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(243,240,233,.95) 30%,rgba(243,240,233,.95) 70%,transparent);box-shadow:0 0 40px 6px rgba(243,240,233,.25)}
.td-l1__inner{position:relative;padding-bottom:clamp(3rem,8vh,6rem)}
.td-l1__logo{width:clamp(180px,22vw,340px);height:auto;margin-bottom:clamp(1.5rem,4vh,2.5rem)}
.td-l1__headline{font-size:clamp(2.6rem,7vw,6.6rem);line-height:1;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;max-width:12em}
html[lang=ar] .td-l1__headline{text-transform:none;line-height:1.25;letter-spacing:0}
.td-l1__sub{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--muted);margin-top:18px;max-width:30em}
.td-l1__meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted)}
.td-l1__meta span:first-child{color:#E2A9B0}
.td-l1__cue{position:absolute;inset-inline-end:var(--gutter);bottom:clamp(3rem,8vh,6rem);color:var(--muted);writing-mode:vertical-rl}

/* 2 — Monorail window */
.td-l2{position:relative}
.td-l2__stage{position:relative;height:100svh;min-height:620px;overflow:hidden;display:grid;place-items:center}
.td-l2__window{position:absolute;inset:0;clip-path:inset(22% 26% 30% 26% round 48px);will-change:clip-path}
.td-l2__window img{width:100%;height:100%;object-fit:cover;transform:scale(1.25);transform-origin:50% 50%}
.td-l2__window::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.55),transparent 35%,transparent 55%,rgba(16,16,16,.85))}
.td-l2__copy{position:absolute;top:calc(var(--header) + 4vh);inset-inline:0;z-index:2}
.td-l2__copy p{color:var(--muted);max-width:30em;margin-top:14px;font-size:1.08rem}
.td-l2__line{position:absolute;bottom:clamp(2rem,6vh,4rem);inset-inline:0;z-index:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.td-l2__line::before{content:"";position:absolute;inset-inline:var(--gutter);top:calc(1.6em + 9px);height:1px;background:rgba(243,240,233,.5)}
.td-l2__line li{display:grid;gap:10px;align-content:start;position:relative}
.td-l2__min{font-weight:600;font-size:1.05rem;white-space:nowrap;height:1.6em}
.td-l2__stop{width:11px;height:11px;background:var(--ink);border:1px solid var(--stone)}
.td-l2__line li:first-child .td-l2__stop{background:var(--oxblood);border-color:var(--oxblood)}
.td-l2__place{font-size:.88rem;color:var(--muted)}
@media (max-width:760px){
  .td-l2__line{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .td-l2__line::before{display:none}
  .td-l2__window{clip-path:inset(30% 10% 34% 10% round 28px)}
}

/* 3 — Location */
.td-l3{padding-block:var(--sec)}
.td-l3__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.td-l3__answer{color:var(--muted);margin-top:20px;font-size:1.08rem;max-width:32em}
.td-l3__rings{display:grid;gap:0;margin-top:32px;border-top:1px solid var(--line)}
.td-l3__ring{padding-block:16px;border-bottom:1px solid var(--line)}
.td-l3__ring .td-mono{color:#E2A9B0;margin-bottom:6px}
.td-l3__names{font-size:1.08rem}
.td-l3__map{position:relative;background:var(--stone);aspect-ratio:16/10;overflow:hidden}
.td-l3__map img{width:100%;height:100%;object-fit:cover}
.td-l3__pin{position:absolute;left:57%;top:41%;width:18px;height:18px;transform:translate(-50%,-50%)}
.td-l3__pin i,.td-l3__pin::before,.td-l3__pin::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--oxblood)}
.td-l3__pin::before,.td-l3__pin::after{background:transparent;border:1px solid var(--oxblood);animation:tdPulse 2.6s var(--ease) infinite}
.td-l3__pin::after{animation-delay:1.3s}
@keyframes tdPulse{from{transform:scale(1);opacity:1}to{transform:scale(5);opacity:0}}
@media (max-width:900px){.td-l3__grid{grid-template-columns:1fr}}

/* 4 — Form generation */
.td-l4__stage{position:relative;height:100svh;min-height:620px;display:grid;grid-template-rows:auto 1fr auto;padding-block:calc(var(--header) + 3vh) 4vh;background:#000}
.td-l4__frames{position:relative;margin-inline:auto;width:min(90vw,1000px);height:100%}
.td-l4__frame{position:absolute;inset:0;opacity:0}
.td-l4__frame:first-child{opacity:1}
.td-l4__frame img{width:100%;height:100%;object-fit:contain}
.td-l4__steps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line)}
.td-l4__steps li{display:grid;gap:4px;padding-top:12px;font-size:.84rem;color:rgba(243,240,233,.4);border-top:2px solid transparent;margin-top:-1px;transition:color .3s,border-color .3s}
.td-l4__steps li.is-active{color:var(--stone);border-color:#E2A9B0}
@media (max-width:760px){.td-l4__steps{grid-template-columns:repeat(7,1fr)}.td-l4__steps li span:last-child{display:none}}

/* 5 — Façade louvers */
@property --slat{syntax:"<percentage>";inherits:false;initial-value:100%}
.td-l5__stage{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
.td-l5__media{position:absolute;inset:0;background:var(--ink)}
.td-l5__media img{width:100%;height:100%;object-fit:cover;--slat:0%;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 var(--slat),transparent var(--slat) 8.333%);
  mask-image:repeating-linear-gradient(90deg,#000 0 var(--slat),transparent var(--slat) 8.333%)}
.td-l5__light{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,236,200,.18) 45%,transparent 60%);background-size:250% 100%;background-position:100% 0;mix-blend-mode:screen;pointer-events:none}
.td-l5__stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(16,16,16,.9));pointer-events:none}
.td-l5__copy{position:relative;z-index:2;padding-bottom:clamp(3rem,8vh,5rem)}
.td-l5__copy p:not(.td-l-eyebrow){color:var(--muted);max-width:34em;margin-top:16px;font-size:1.05rem}

/* 6 — Plaza */
.td-l6{padding-block:var(--sec);background:var(--stone);color:var(--ink);--text:var(--ink);--muted:var(--muted);--line:rgba(16,16,16,.14)}
.td-l6 .td-l-eyebrow{color:var(--oxblood)}
.td-l6__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,2vw,28px);align-items:end}
.td-l6__a{grid-column:1/span 7;aspect-ratio:16/10}
.td-l6__copy{grid-column:8/span 5;align-self:center}
.td-l6__copy p:not(.td-l-eyebrow){color:#5E5A53;margin-top:16px;font-size:1.05rem}
.td-l6__b{grid-column:3/span 5;aspect-ratio:16/10}
.td-l6__c{grid-column:8/span 5;aspect-ratio:16/10}
@media (max-width:900px){.td-l6__a,.td-l6__copy,.td-l6__b,.td-l6__c{grid-column:1/-1}}

/* 7 — Mix */
.td-l7{padding-block:var(--sec)}
.td-l7__mix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.td-l7__mix li{display:grid;gap:8px;padding-top:22px;padding-inline-end:20px;border-inline-end:1px solid var(--line)}
.td-l7__mix li+li{padding-inline-start:22px}
.td-l7__mix li:last-child{border:0}
.td-l7__mix strong{font-size:clamp(4rem,12vw,11rem);line-height:.9;font-weight:500;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.td-l7__mix span{color:var(--muted);font-size:1.1rem}
@media (max-width:620px){.td-l7__mix{grid-template-columns:1fr}.td-l7__mix li{border:0;border-bottom:1px solid var(--line);padding:18px 0!important}}

/* 8 — Units */
.td-l8{color:var(--ink);--text:var(--ink);--muted:#5E5A53;--line:rgba(16,16,16,.14)}
.td-l8 .td-l-eyebrow{color:var(--oxblood)}

/* 9 — After dark */
.td-l9{position:relative;padding-block:clamp(6rem,14vw,11rem) 2rem;overflow:hidden}
.td-l9__media{position:absolute;inset:0;z-index:0}
.td-l9__media img{width:100%;height:100%;object-fit:cover;opacity:.55}
.td-l9__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.8),rgba(16,16,16,.55) 40%,rgba(16,16,16,.95))}
.td-l9__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.td-l9__copy p:not(.td-l-eyebrow){color:var(--muted);margin-top:16px;max-width:28em}
.td-l9__direct{display:grid;margin-top:28px;border-top:1px solid var(--line)}
.td-l9__direct a{display:flex;justify-content:space-between;align-items:baseline;padding-block:14px;border-bottom:1px solid var(--line)}
.td-l9__direct strong{font-size:1.4rem;font-weight:500}
.td-l9__form{background:rgba(16,16,16,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:clamp(22px,3.5vw,44px);border:1px solid var(--line)}
.td-l9__disc{position:relative;z-index:1;color:rgba(243,240,233,.45);margin-top:clamp(3rem,6vw,5rem)}
@media (max-width:900px){.td-l9__grid{grid-template-columns:1fr}}

/* Without JavaScript or with reduced motion: show everything in place. */
html:not(.js) .td-l2__window,.td-l.no-motion .td-l2__window{clip-path:none}
html:not(.js) .td-l2__window img,.td-l.no-motion .td-l2__window img{transform:none}
html:not(.js) .td-l5__media img,.td-l.no-motion .td-l5__media img{-webkit-mask-image:none;mask-image:none}
html:not(.js) .td-l1,.td-l.no-motion .td-l1{--beam:70%}
@media (prefers-reduced-motion:reduce){
  .td-l2__window{clip-path:none}.td-l2__window img{transform:none}
  .td-l5__media img{-webkit-mask-image:none;mask-image:none}
  .td-l1{--beam:70%}
  .td-l4__frame{position:relative;opacity:1}
}