.project-details{background:radial-gradient(ellipse at 0 10%,#ddceb030,transparent 60%),var(--sand);border-block:1px solid #cbbca133;overflow:hidden;height:auto;max-height:none;min-height:var(--section-height);padding:120px 0;display:flex;align-items:center}.project-layout{display:grid;grid-template-columns:.95fr 1.1fr;gap:7%;align-items:stretch}.project-image{height:auto;min-height:420px;margin:15px 20px 22px 15px}.project-image>.depth-card{position:absolute;inset:0}.project-image img{object-position:62% center}.project-copy{display:flex;flex-direction:column;min-width:0}.project-copy>h2{font-size:49px;margin:0 0 20px;flex-shrink:0}.project-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;flex-shrink:0}.project-tabs button{height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #c9b99a77;background:#f8f4eb77;color:#8a8376;font-size:12px;padding:6px 2px;transition:background .35s,border-color .35s,transform .35s}.project-tabs button span{font-size:8px;color:#ae9973}.project-tabs button[aria-selected=true]{background:linear-gradient(145deg,#fdfbf5,#e6d8bf);border-color:#c0a575;color:#806941;box-shadow:0 5px 14px #765a3012}.project-tabs button:hover{transform:translateY(-2px)}.project-panels{flex:1;display:grid;align-items:center;min-height:0;margin-top:21px;padding:25px 28px;border:1px solid #d4c9b680;background:linear-gradient(140deg,#fffdf580,#f9f5edb3);box-shadow:0 18px 45px -35px #68533755}/* Every panel shares one grid cell, so the card always takes the tallest panel's height and keeps the same size on every tab. */.project-panel{grid-area:1/1;width:100%}.project-panel[hidden]{display:block!important;visibility:hidden}.project-panel h3{font-size:31px;letter-spacing:0;margin-bottom:21px}.project-panel>p{font-size:14px;line-height:1.8;margin-bottom:21px}.project-panel>p:last-child{margin:0}.project-panel .rera-note{font-size:11px;line-height:1.65;color:#9a927e;border-top:1px solid var(--line);padding-top:17px;overflow-wrap:anywhere}.connection{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.connection:first-child{border:0;padding-top:0}.connection:last-child{padding-bottom:0}.connection>span{font-size:8px;letter-spacing:.08em;color:#a58d61;padding-top:3px}.connection h4{font:400 14px/1.45 var(--sans);color:#74796b;margin:0 0 3px}.connection p{font-size:12px;line-height:1.5;color:#96917f}
/* Luxury entrance (keyframes in motion.css): the arch image flips in from the left, copy glides in from the right, tabs rise one by one and the panel swings into place. */
.motion-ready .project-copy[data-reveal],.motion-ready .project-image[data-reveal]{opacity:1;transform:none;transition:none}.motion-ready .project-copy:not(.is-visible)>*,.motion-ready .project-image:not(.is-visible){opacity:0}
.motion-ready .project-image.is-visible{animation:lux-flip-left 2s .15s cubic-bezier(.16,1,.3,1) both}.motion-ready .project-image.is-visible img{animation:lux-settle 3s .15s cubic-bezier(.2,.65,.25,1) both}
.motion-ready .project-copy.is-visible .lux-rule{animation:lux-draw 1.4s cubic-bezier(.77,0,.18,1) both}.motion-ready .project-copy.is-visible .lux-eyebrow span:last-child{animation:lux-from-right 1.2s .35s cubic-bezier(.16,1,.3,1) both}.motion-ready .project-copy.is-visible>h2{animation:lux-focus-right 1.7s .2s cubic-bezier(.16,1,.3,1) both}.motion-ready .project-copy.is-visible .project-tabs button{animation:lux-rise 1.1s cubic-bezier(.16,1,.3,1) both}.motion-ready .project-copy.is-visible .project-tabs button:nth-child(1){animation-delay:.55s}.motion-ready .project-copy.is-visible .project-tabs button:nth-child(2){animation-delay:.67s}.motion-ready .project-copy.is-visible .project-tabs button:nth-child(3){animation-delay:.79s}.motion-ready .project-copy.is-visible .project-tabs button:nth-child(4){animation-delay:.91s}.motion-ready .project-copy.is-visible .project-panels{animation:lux-panel 1.6s 1s cubic-bezier(.16,1,.3,1) both}
@media(min-width:992px) and (max-height:780px){.project-details{padding:90px 0}.project-copy>h2{font-size:43px;margin-bottom:13px}.project-tabs button{height:47px;font-size:11px}.project-panels{padding:18px 21px;margin-top:16px}.project-panel h3{font-size:28px;margin-bottom:17px}.project-panel>p{font-size:13px;line-height:1.75;margin-bottom:18px}.project-panel .rera-note{font-size:10px;padding-top:14px}.connection{padding:8px 0}.connection h4{font-size:12px;line-height:1.4}.connection p{font-size:11px;line-height:1.45}.project-image{margin-top:13px;margin-bottom:20px}}
/* Responsive: on narrow desktops the image column widens a little; from tablet down the image sits on top at a 4:3 shape (so each tab's photo shows properly) with the tabs and card below. */
@media(max-width:1199px){.project-layout{grid-template-columns:1fr 1.1fr;gap:5%}}
@media(max-width:991px){.project-details{padding:80px 0;min-height:0}.project-layout{grid-template-columns:1fr;gap:44px}.project-image{width:min(100% - 28px,640px);justify-self:center;height:auto;min-height:0;aspect-ratio:4/3;margin:10px 18px 16px 10px}.project-image img{object-position:center 45%}.project-copy>h2{margin-bottom:18px}.project-panels{padding:24px}.project-tabs{gap:6px}.project-tabs button{font-size:12px}.project-panel>p{font-size:15px}.connection h4{font-size:14px}.connection p{font-size:12.5px}}
@media(max-width:600px){.project-details{padding:60px 0}.project-layout{gap:32px}.project-image{width:calc(100% - 14px);aspect-ratio:4/3;margin:4px 10px 10px 4px}.project-image .arch-frame,.project-image .arch-frame:before,.project-image .arch-frame:after,.project-image .arch-frame>img{border-radius:120px 120px 3px 3px}.project-copy>h2{margin-bottom:14px}.project-tabs{grid-template-columns:repeat(2,1fr)}.project-tabs button{height:48px;font-size:12px;gap:3px}.project-tabs button span{font-size:9px}.project-panels{padding:20px 18px;margin-top:14px}.project-panel h3{font-size:25px;margin-bottom:14px}.project-panel>p{font-size:14.5px;line-height:1.75;margin-bottom:14px}.project-panel .rera-note{font-size:11px;line-height:1.6;padding-top:12px}.connection{grid-template-columns:62px 1fr;gap:8px;padding:9px 0}.connection h4{font-size:13.5px;line-height:1.4}.connection p{font-size:12px;line-height:1.5}.connection>span{font-size:9px}}
@media(max-width:359px){.project-image .arch-frame,.project-image .arch-frame:before,.project-image .arch-frame:after,.project-image .arch-frame>img{border-radius:90px 90px 3px 3px}.project-panels{padding:16px 14px}.project-tabs button{font-size:11px}}