@font-face{font-family:"Nexa";src:url("../fonts/Nexa-ExtraLight.woff") format("woff");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Nexa";src:url("../fonts/Nexa-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Nexa";src:url("../fonts/Nexa-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nexa";src:url("../fonts/Nexa-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
:root{
--maroon:#4c1129;
--maroon-2:#611836;
--maroon-dark:#37091d;
--gold:#915a26;
--gold-soft:#a9743f;
--grey-bg:#ebebeb;
--grey-soft:#f4f4f4;
--ink:#161616;
--muted:#5c5c5c;
--line:#d9d9d9;
--white:#fff;
--container:1240px;
--pad:24px;
--radius:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:"Nexa",system-ui,sans-serif;
font-weight:400;
color:var(--ink);
background:var(--white);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:200;line-height:1.15;letter-spacing:.005em}
.container{width:min(88.2vw,1800px);margin-block:0;margin-inline:max(5.9vw,calc((100vw - 1800px)/2));padding:0} /* V6.6: scrollbar-immune, aligns with the vw content-wraps (was 88%/scrollbar-narrowed) */
@media(max-width:1080px){.container:not(.now-cta-holder){width:auto;margin-inline:6%}} /* V6.6: mobile/tablet — 6% margins to match the content wraps' margin:0 6% */
.section{padding:clamp(50px,5.43vw,110px) 0}
.eyebrow{display:inline-block;font-size:clamp(.95rem,1.181vw,24px);font-weight:200;line-height:1;letter-spacing:.01em;text-transform:none;color:#000;background:#f1f1f1;padding:.26em .5em;border-radius:8px;margin-bottom:2.13vw}
.section-title{font-size:clamp(1.9rem,3.428vw,70px);font-weight:300;margin-bottom:.67em;letter-spacing:.01em;line-height:1.08}
.arrow{display:inline-block;transition:transform .25s ease}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-size:.95rem;letter-spacing:.02em;cursor:pointer;border:none;transition:all .25s ease}
.btn-primary{background:var(--maroon);color:#fff;padding:16px 26px;border-radius:8px}
.btn-primary:hover{background:var(--maroon-2)}
.btn-primary:hover .arrow{transform:translateX(5px)}
.btn-hero{background:var(--maroon);color:#fff;padding:0 18px 0 19px;border-radius:9px;justify-content:space-between;width:clamp(280px,18.65vw,381px);height:clamp(46px,3.13vw,64px);font-size:clamp(16px,1.181vw,24px);font-weight:700;gap:24px}
.btn-hero:hover{background:var(--maroon-2)}
.arrow-long{width:clamp(24px,1.74vw,36px);height:auto;flex:none;transition:transform .25s ease}
.btn-hero:hover .arrow-long{transform:translateX(6px)}
.btn-contact{background:var(--maroon);color:#fff;padding:0;border-radius:10px;width:clamp(150px,11.22vw,229px);height:clamp(42px,3.07vw,63px);line-height:1;text-align:center;justify-content:center;font-size:clamp(16px,1.181vw,24px);font-weight:300}
.btn-contact:hover{background:var(--maroon-2)}
.learn{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink);border-top:1px solid var(--line);padding-top:14px;margin-top:14px;transition:color .2s}
.learn:hover{color:var(--maroon)}
.learn:hover .arrow{transform:translateX(5px)}
/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;color:#fff}
.brand-logo{height:clamp(46px,3.9vw,74px);width:auto;display:block}
/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .4s cubic-bezier(.4,0,.2,1),background .3s ease,box-shadow .3s ease,padding .3s ease,border-color .3s ease;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);will-change:transform}
.header-inner{display:flex;align-items:center;gap:34px}
.main-nav{flex:1}
.main-nav>ul{display:flex;justify-content:flex-start;align-items:center;gap:clamp(24px,3.26vw,66px);padding-left:clamp(20px,4.59vw,94px)}
.main-nav a{color:#fff;font-size:clamp(15px,1.181vw,24px);font-weight:200;letter-spacing:.01em;padding:8px 0;position:relative;opacity:.96;white-space:nowrap}
.main-nav a:hover,.main-nav a.active{opacity:1}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:#fff;transition:width .25s ease}
.main-nav a:hover::after{width:100%}
.has-dropdown{position:relative}
.nav-parent{cursor:pointer}
.dropdown{position:absolute;top:100%;left:0;min-width:282px;background:#fff;border-radius:7px;box-shadow:0 18px 50px rgba(0,0,0,.18);padding:0;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s ease}
.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown li:nth-child(n+3) a{border-top:1px solid #e8e8e8}
.dropdown a{display:block;color:var(--ink);padding:8px 14px;border-radius:0;opacity:1;font-size:clamp(15px,1.181vw,24px);font-weight:200;line-height:1.3;white-space:nowrap}
.dropdown a::after{display:none}
.dropdown li:first-child a{background:var(--maroon);color:#fff}
.dropdown:hover li:first-child a{background:#fff;color:var(--ink)}
.dropdown a:hover{background:var(--maroon)!important;color:#fff!important}
.btn-contact{flex:none}
/* scrolled state */
.site-header.scrolled{background:var(--maroon);box-shadow:0 6px 24px rgba(0,0,0,.16);padding:8px 0;border-bottom-color:transparent}
/* hide-on-scroll-down / reveal-on-scroll-up (Execor-style) — DESKTOP ONLY */
.site-header.nav-hidden{transform:translateY(-100%)}
/* mobile: keep the header pinned as before (never hide on scroll) */
@media(max-width:860px){.site-header.nav-hidden{transform:none}}
/* nav toggle (mobile) */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
.nav-toggle span{width:26px;height:2px;background:#fff;transition:.3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- Hero ---------- */
.hero{position:relative;color:#fff}
.hero-frame{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden} /* fill the viewport so the apart bar sits below the fold */
.hero-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center} /* fills screen; on ~16:9 windows only a sliver of the photo edge trims */
.hero-overlay{display:none}
.hero-body{position:absolute;inset:0;z-index:2}
.hero-content{position:absolute;top:41%;left:0;right:0}
.hero h1{font-size:clamp(30px,4.044vw,83px);font-weight:300;line-height:1.2;margin-bottom:1.56vw}
.hero h1 .accent{color:var(--maroon)}
.hero-sub{font-size:clamp(17px,1.652vw,34px);font-weight:200;max-width:44em;margin:0 0 4.1vw;opacity:1;line-height:1.2}
/* What sets us apart bar */
.apart-bar{position:relative;z-index:2;background:var(--maroon)}
.apart-inner{display:flex;align-items:center;justify-content:space-between;gap:30px 40px;flex-wrap:wrap;padding:clamp(20px,2.28vw,47px) 0}
.apart-label{color:#fff;font-size:clamp(15px,1.181vw,24px);font-weight:700;white-space:nowrap}
.apart-item{display:flex;align-items:center;gap:14px;color:#fff;font-size:clamp(14px,1.181vw,24px);font-weight:200}
.ico-check-circle{width:clamp(22px,1.77vw,36px);height:clamp(22px,1.77vw,36px);flex:none;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ---------- Properties ---------- */
.properties{background:var(--grey-bg);padding-bottom:clamp(60px,6.96vw,142px)}
.property-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.65vw,34px);margin-top:3.76vw}
.property-card{background:#efefef;border:1px solid #000;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s ease,transform .3s ease}
.property-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.10);transform:translateY(-4px)}
.property-media{position:relative;aspect-ratio:355/361;overflow:hidden}
.property-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.property-card:hover .property-media img{transform:scale(1.05)}
.property-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.48) 100%)}
.property-media h3{position:absolute;left:clamp(16px,1.594vw,33px);bottom:3.56vw;transform:translateY(50%);z-index:2;color:#fff;font-size:clamp(20px,1.889vw,39px);font-weight:400;line-height:1.2}
.property-card:first-child .property-media h3{font-size:clamp(18px,1.671vw,34px)}
.card-icon{position:absolute;top:1.45vw;left:1.21vw;z-index:2;width:clamp(40px,3.22vw,66px);height:clamp(40px,3.22vw,66px);fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:butt}
.property-bullets{padding:1.53vw 1.42vw 1.24vw 1.36vw;display:flex;flex-direction:column;gap:0}
.property-bullets li{font-size:clamp(12px,.826vw,17px);font-weight:200;color:#000;padding-left:clamp(12px,.97vw,20px);position:relative;line-height:1.2}
.property-bullets li::before{content:"";position:absolute;left:0;top:.42em;width:4px;height:4px;border-radius:50%;background:#000}
.learn-box{margin:auto 1.09vw 1.3vw;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border-radius:5px;padding:0 1.24vw;height:clamp(44px,3.13vw,64px);font-size:clamp(12px,.826vw,17px);font-weight:700;color:#000;transition:box-shadow .2s}
.learn-box:hover{box-shadow:0 6px 16px rgba(0,0,0,.07)}
.learn-arrow{width:clamp(24px,1.74vw,36px);height:auto;flex:none;transition:transform .25s ease}
.learn-box:hover .learn-arrow{transform:translateX(5px)}
/* ---------- Now selling banner ---------- */
.now-selling{position:relative;background:var(--grey-bg);padding-bottom:clamp(70px,8.03vw,164px)}
.now-banner{position:relative;width:100%;aspect-ratio:1694/858;background-size:cover;background-position:center;overflow:hidden;color:#fff}
.now-banner-shade{display:none}
.now-banner .container{position:relative;z-index:2;height:100%;display:flex;align-items:flex-start}
.now-text{padding-top:5.95vw}
.now-kicker{display:block;font-size:1em;font-weight:300;letter-spacing:.005em}
.now-text h2{font-size:clamp(2.2rem,4.828vw,99px);font-weight:300;line-height:1.2;margin-bottom:1.86vw}
.now-text p{margin:0;font-size:clamp(1.05rem,1.889vw,39px);font-weight:400;max-width:none;line-height:1.2}
/* straddling EXPLORE MORE button */
.now-cta-holder{position:absolute;left:max(5.9vw,calc((100vw - 1800px)/2));transform:none;bottom:clamp(34px,4.25vw,87px);width:min(88.2vw,1800px);margin-inline:0;height:0;pointer-events:none} /* V6.6: match new .container geometry (margin-inline:0 cancels the inherited .container margin) */
.now-cta{position:absolute;right:0;bottom:0;width:clamp(260px,20.72vw,424px);height:clamp(220px,18.66vw,382px);pointer-events:auto;color:#fff;border-radius:14px;overflow:hidden;
background:linear-gradient(180deg,rgba(76,17,41,.7) 0%,rgba(76,17,41,.85) 70%,var(--maroon) 82%);
display:flex;flex-direction:column;padding:3.81vw 2.27vw 1.56vw 2.36vw;transition:filter .25s}
.now-cta:hover{filter:brightness(1.12)}
.now-cta-label{font-size:clamp(2rem,3.035vw,62px);font-weight:400;line-height:1.2;letter-spacing:.01em}
.now-cta-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:flex-end}
.now-cta-arrow{width:clamp(24px,1.8vw,37px);height:auto;transition:transform .25s ease}
.now-cta:hover .now-cta-arrow{transform:translateX(6px)}
/* ---------- Discover band ---------- */
.discover{background:url("../images/discover-bg.jpg") center/cover no-repeat,var(--maroon);color:#fff;position:relative;overflow:hidden;min-height:17.71vw;display:flex;align-items:center;padding:3vw 0}
.discover-title{font-size:clamp(1.7rem,3.922vw,80px);font-weight:300;letter-spacing:.01em;line-height:1.1}
/* ---------- What we do (tabs) ---------- */
.whatwedo{background:var(--grey-bg);padding:clamp(80px,14.7vw,300px) 0 clamp(34px,3.66vw,75px)}
.tabs{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #361108;margin-bottom:4.88vw}
.tab{background:none;border:none;cursor:pointer;font-family:inherit;font-size:clamp(.85rem,1.446vw,30px);font-weight:700;color:#000;padding:0 0 clamp(20px,4.95vw,101px);position:relative;transition:opacity .2s;white-space:nowrap}
.tab:not(.active){opacity:.88}
.tab:hover{opacity:1}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:#361108}
.tab-panel{display:none;grid-template-columns:44.24% 1fr;gap:7.36%;align-items:start;animation:fade .4s ease}
.tab-panel.active{display:grid}
.tab-text p{margin:0;font-size:clamp(1rem,1.529vw,31px);font-weight:200;color:#000;line-height:1.467;max-width:none}
.tab-img img{width:100%;border-radius:12px;aspect-ratio:1.437/1;object-fit:cover}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---------- Investment opportunities ---------- */
.invest{background:var(--grey-bg);padding-bottom:clamp(60px,6.71vw,137px)}
.invest-lead{font-size:clamp(1.15rem,2.172vw,44px);font-weight:200;color:#000;max-width:87%;line-height:1.2;margin-bottom:clamp(46px,5.15vw,105px)}
.invest-points{display:grid;grid-template-columns:32.91% 41.72% 25.37%;gap:0;background-image:linear-gradient(#000,#000),linear-gradient(#000,#000);background-repeat:no-repeat;background-size:1px clamp(40px,4.43vw,90px);background-position:32.93% 2.51vw,74.68% 2.51vw}
.ip{display:flex;flex-direction:column;align-items:center;justify-self:center;gap:clamp(14px,2.02vw,41px);text-align:center;padding:0;position:relative}
.ip:first-child{justify-self:start}
.ip:last-child{justify-self:end}
.ico-circle{width:clamp(24px,1.77vw,36px);height:clamp(24px,1.77vw,36px);fill:none;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ip span{font-size:clamp(1.05rem,2.172vw,44px);font-weight:200;color:#000;line-height:1.2}
/* ---------- News ---------- */
.news{background:var(--grey-bg);padding-bottom:clamp(30px,3.15vw,64px)}
.news-head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:clamp(34px,6.53vw,134px)}
.news-head .section-title{margin-bottom:0}
.news-head p{width:40.1%;flex:none;font-size:clamp(.92rem,1.181vw,24px);font-weight:200;color:#000;line-height:1.2;margin:.885vw 0 0}
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.65vw,34px)}
.news-card{display:flex;flex-direction:column}
.news-media{border-radius:14px;overflow:hidden;aspect-ratio:355/490.6;margin-bottom:clamp(18px,2.59vw,53px)}
.news-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.news-card:hover .news-media img{transform:scale(1.06)}
.news-card h3{font-size:clamp(.95rem,1.174vw,24px);font-weight:200;color:#000;line-height:1.2;margin-bottom:clamp(12px,1.17vw,24px)}
.news-card .learn{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:none;border-top:none;padding:0 clamp(12px,.86vw,18px) 0 clamp(14px,1.06vw,22px);height:clamp(44px,3.13vw,64px);border-radius:8px;box-shadow:none;font-size:clamp(12px,.826vw,17px);font-weight:700;color:#000}
.news-card .learn:hover{color:var(--maroon)}
.learn-arrow-news{width:clamp(24px,1.74vw,36px);height:auto;flex:none;color:#141414;transition:transform .25s ease}
.news-card .learn:hover .learn-arrow-news{transform:translateX(4px);color:var(--maroon)}
/* ---------- Contact (client contact-layout design, 1126px canvas zoom-scaled to fit) ---------- */
.contact{background:var(--grey-bg);padding-bottom:clamp(40px,4.37vw,89px)}
.fq-cl-wrap{width:100%;max-width:2032px;margin:0 auto;overflow-x:clip} /* clip sub-pixel spill from the zoom-scaled canvas so it can't force a page-level horizontal scrollbar */
.fq-cl-canvas{position:relative;inline-size:1126px;min-block-size:946px;color:#111;font-family:"Nexa",system-ui,sans-serif;font-weight:300;transform-origin:top left}
.fq-cl-canvas h1,.fq-cl-canvas h2,.fq-cl-canvas p{margin:0}
.fq-cl-canvas img{max-width:none}
.fq-cl-canvas input,.fq-cl-canvas textarea,.fq-cl-canvas button{font:inherit}
.fq-cl-canvas .contact-heading{position:absolute;inset-block-start:43px;inset-inline-start:72px;inline-size:395px;font-size:38px;font-weight:300;line-height:1.0;letter-spacing:0}
.fq-cl-canvas .image-panel{position:absolute;inset-block-start:199px;inset-inline-start:65px;inline-size:513px}
.fq-cl-canvas .image-panel>img{display:block;inline-size:513px;block-size:416px;object-fit:cover;object-position:50% 50%;border-radius:10px}
.fq-cl-canvas .question-panel{position:absolute;inset-block-start:338px;inset-inline-start:33px;inline-size:376px;min-block-size:80px;padding:13px 25px 12px;border-radius:6px;background:rgb(31 6 18 / .88);color:#fff;text-align:center}
.fq-cl-canvas .question-panel h2{margin-block-end:10px;font-size:14px;font-weight:300;line-height:1}
.fq-cl-canvas .question-panel p{font-size:9.5px;line-height:1.16;color:rgb(255 255 255 / .82)}
.fq-cl-canvas .info-panel{position:absolute;inset-block-start:415px;inset-inline-start:33px;inline-size:376px;block-size:199px;padding:29px 17px 19px 22px;border-radius:0 0 7px 7px;background:#c7bcc1;color:#3f3539;font-style:normal}
.fq-cl-canvas .info-row{position:relative;display:grid;grid-template-columns:44px 1fr 25px;align-items:center;column-gap:14px;min-block-size:44px}
.fq-cl-canvas .info-row+.info-row{border-block-start:1px solid rgb(76 67 71 / .35);padding-block-start:14px;margin-block-start:10px}
.fq-cl-canvas .icon-box{position:relative;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:9px;background:#fff;color:#5a0d2a}
.fq-cl-canvas .icon-box img{display:block;inline-size:27px;block-size:27px}
.fq-cl-canvas .info-copy{font-size:14px;line-height:1.18}
.fq-cl-canvas .info-copy small{display:block;margin-block-end:3px;font-size:12px;line-height:1;color:#5f575a}
.fq-cl-canvas .text-arrow{position:relative;display:inline-block;inline-size:20px;block-size:10px;color:#3f3539}
.fq-cl-canvas .text-arrow::before{content:"";position:absolute;inset-block-start:50%;inset-inline:0;block-size:1.3px;background:currentColor;transform:translateY(-50%)}
.fq-cl-canvas .text-arrow::after{content:"";position:absolute;inset-block-start:50%;inset-inline-end:0;inline-size:7px;block-size:7px;border-block-start:1.4px solid currentColor;border-inline-end:1.4px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.fq-cl-canvas .form-card{position:absolute;inset-block-start:118px;inset-inline-start:577px;inline-size:493px;block-size:697px;overflow:hidden;border-radius:15px;background:#fff;color:#484046}
.fq-cl-canvas .form-card>header{display:flex;align-items:center;block-size:81px;padding-inline:31px;background:#531329}
.fq-cl-canvas .form-card>header img{display:block;inline-size:140px;block-size:auto}
.fq-cl-canvas form{position:relative;block-size:616px;padding:0;margin:0}
.fq-cl-canvas form-field{position:absolute;display:grid;gap:3px}
.fq-cl-canvas form-field[data-field=first-name]{inset-block-start:10px;inset-inline-start:29px;inline-size:209px}
.fq-cl-canvas form-field[data-field=second-name]{inset-block-start:10px;inset-inline-start:256px;inline-size:209px}
.fq-cl-canvas form-field[data-field=email]{inset-block-start:78px;inset-inline-start:29px;inline-size:435px}
.fq-cl-canvas form-field[data-field=phone]{inset-block-start:145px;inset-inline-start:29px;inline-size:435px}
.fq-cl-canvas form-field[data-field=company]{inset-block-start:213px;inset-inline-start:29px;inline-size:209px}
.fq-cl-canvas form-field[data-field=job-title]{inset-block-start:213px;inset-inline-start:256px;inline-size:209px}
.fq-cl-canvas form-field[data-field=message]{inset-block-start:278px;inset-inline-start:29px;inline-size:435px}
.fq-cl-canvas label{font-size:13.5px;line-height:1.2;color:#575057}
.fq-cl-canvas input,.fq-cl-canvas textarea{inline-size:100%;border:1px solid #9e9e9e;border-radius:4px;background:#fff;color:#222;outline:none}
.fq-cl-canvas input{block-size:34px;padding-inline:9px}
.fq-cl-canvas textarea{display:block;block-size:113px;resize:none;padding:8px 9px}
.fq-cl-canvas input:focus,.fq-cl-canvas textarea:focus{border-color:#531329;box-shadow:0 0 0 1px #531329}
.fq-cl-canvas .submit-row{position:absolute;inset-block-start:427px;inset-inline-start:29px;display:flex;align-items:center;block-size:34px;padding:0}
.fq-cl-canvas .submit-row button{display:inline-flex;align-items:center;justify-content:space-between;inline-size:164px;block-size:34px;padding-inline:14px 13px;border:0;border-radius:4px;background:#5a0d2a;color:#fff;cursor:pointer;font-size:13px;font-weight:300;text-align:start}
.fq-cl-canvas .submit-row .text-arrow{color:#fff;inline-size:22px}
.fq-cl-canvas .form-divider{position:absolute;inset-block-start:489px;inset-inline-start:29px;inline-size:435px;block-size:1px;background:#888}
@media(max-width:860px){
.fq-cl-canvas{inline-size:100%;min-block-size:0;zoom:1 !important;padding:0}
.fq-cl-canvas .contact-heading{position:static;inline-size:min(360px,100%);margin-block-end:26px;font-size:30px}
.fq-cl-canvas .image-panel{position:static;inline-size:100%;margin-block-end:26px}
.fq-cl-canvas .image-panel>img{inline-size:100%;block-size:auto;aspect-ratio:513/416}
.fq-cl-canvas .question-panel,.fq-cl-canvas .info-panel{position:relative;inset:auto;inline-size:calc(100% - 40px);margin-inline:20px}
.fq-cl-canvas .question-panel{margin-block-start:-92px}
.fq-cl-canvas .question-panel h2{font-size:16px}
.fq-cl-canvas .question-panel p{font-size:11px}
.fq-cl-canvas .info-panel{block-size:auto}
.fq-cl-canvas .info-copy{font-size:15px}
.fq-cl-canvas .info-copy small{font-size:13px}
.fq-cl-canvas .form-card{position:static;inline-size:100%;block-size:auto;margin-block-start:30px}
.fq-cl-canvas form{block-size:auto;display:flex;flex-direction:column;gap:15px;padding:22px 24px 28px}
.fq-cl-canvas form-field[data-field]{position:static;inset-block-start:auto;inset-inline-start:auto;inline-size:auto;min-inline-size:0}
.fq-cl-canvas input,.fq-cl-canvas textarea{min-inline-size:0}
.fq-cl-canvas label{font-size:15px}
.fq-cl-canvas input{block-size:44px}
.fq-cl-canvas textarea{block-size:120px}
.fq-cl-canvas .submit-row{position:static;inset-block-start:auto;inset-inline-start:auto;block-size:auto;margin-block-start:4px}
.fq-cl-canvas .submit-row button{inline-size:180px;block-size:46px;font-size:15px}
.fq-cl-canvas .form-divider{position:static;inset-block-start:auto;inset-inline-start:auto;margin-block-start:6px}
}
/* ---------- Footer ---------- */
.site-footer{background:var(--maroon);color:#fff;position:relative}
.footer-stripes{height:clamp(60px,6.61vw,135px);background:linear-gradient(180deg,var(--maroon) 0 5.36%,#ebebeb 5.36% 9.82%,var(--maroon) 9.82% 16.96%,#ebebeb 16.96% 21.43%,var(--maroon) 21.43% 29.46%,#ebebeb 29.46% 33.93%,var(--maroon) 33.93% 41.96%,#ebebeb 41.96% 47.32%,var(--maroon) 47.32% 56.25%,#ebebeb 56.25% 60.71%,var(--maroon) 60.71% 73.21%,#ebebeb 73.21% 78.57%,var(--maroon) 78.57% 95.54%,#ebebeb 95.54% 100%)}
.footer-inner{display:grid;grid-template-columns:24.45% 1fr;gap:0;padding-top:2.1vw;padding-bottom:clamp(60px,7.56vw,155px)}
/* V2 footer: single nav row, top-aligned with the brand paragraph */
.footer-nav{display:flex;align-items:flex-start;flex-wrap:wrap;padding-top:4.42vw}
.footer-nav a{font-size:clamp(.85rem,1.01vw,21px);font-weight:200;line-height:1.2;color:#fff;opacity:1;transition:opacity .2s;white-space:nowrap}
.footer-nav a:hover{opacity:.75}
.footer-nav a:nth-child(2){margin-left:3.52vw}
.footer-nav a:nth-child(3){margin-left:3.75vw}
.footer-nav a:nth-child(4){margin-left:2.57vw}
.footer-nav a:nth-child(5){margin-left:2.63vw}
.footer-col{padding-top:4.64vw}
.footer-brand .footer-logo{margin-bottom:1.67vw}
.footer-brand .brand-logo{height:clamp(42px,3.1vw,64px)}
.footer-brand p{margin:0;font-size:clamp(.95rem,1.174vw,24px);font-weight:200;max-width:7.8em;opacity:1;line-height:1.2;color:#fff}
.footer-col h4{font-size:clamp(.9rem,1.01vw,21px);font-weight:200;margin-bottom:1.7vw;line-height:1.2;color:#fff}
.footer-col li{margin-bottom:0;line-height:1.2}
.footer-col a{font-size:clamp(.85rem,1.01vw,21px);font-weight:200;opacity:1;transition:opacity .2s}
.footer-col a:hover{opacity:.75}
.footer-contact li{font-size:clamp(.85rem,1.01vw,21px);font-weight:200;opacity:1;margin-bottom:0;line-height:1.2}
/* ---------- Reveal animation (eased + JS-staggered via --rd) ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,.7,.3,1),transform .8s cubic-bezier(.16,.7,.3,1);transition-delay:var(--rd,0s)}
.reveal.in{opacity:1;transform:none}
/* ===========================================================
Responsive
=========================================================== */
@media(max-width:1080px){
.property-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
.footer-inner{grid-template-columns:1fr;gap:24px}
.footer-col{padding-top:0}
.footer-brand{grid-column:1/-1}
.footer-nav{padding-top:0;gap:18px 26px}
.footer-nav a:nth-child(n){margin-left:0}
.news-head br{display:none}
}
@media(max-width:860px){
.section{padding:70px 0}
.nav-toggle{display:flex}
.btn-contact{display:none}
.main-nav{position:fixed;inset:64px 0 auto 0;background:var(--maroon);margin:0;max-height:0;overflow:hidden;transition:max-height .35s ease}
.main-nav.open{max-height:80vh;box-shadow:0 20px 40px rgba(0,0,0,.3)}
/* pic 1 — clean full-width vertical menu (was: align-items:center made
items shrink-to-fit & float centered, with scattered short dividers) */
.main-nav>ul{flex-direction:column;align-items:stretch;gap:0;padding:6px 0}
.main-nav>ul>li{padding:0}
.main-nav>ul>li:not(:last-child){border-bottom:1px solid rgba(255,255,255,.13)}
.main-nav a{display:block;padding:15px 26px;text-align:left;border-bottom:none;opacity:1}
.main-nav a::after{display:none}
.dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:rgba(0,0,0,.16);border-radius:0;padding:0;margin-top:2px;overflow:hidden}
.dropdown a{display:block;color:#fff !important;background:transparent !important;padding:13px 26px 13px 44px;font-size:15px;font-weight:200;border-top:1px solid rgba(255,255,255,.09)}
.dropdown li:first-child a{border-top:none}
.site-header{background:var(--maroon)}
.tab-panel.active{grid-template-columns:1fr;gap:26px}
/* tabs: scroll horizontally instead of overflowing / overlapping */
.tabs{justify-content:flex-start;gap:clamp(20px,5vw,34px);overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none}
.contact-grid{grid-template-columns:1fr}
.contact-info{width:auto;margin-left:0}
/* now-selling: taller banner + CTA stacked BELOW it (no overlap with the heading) */
.now-banner{aspect-ratio:auto;min-height:clamp(320px,88vw,430px)}
.now-selling{padding-bottom:0}
.now-cta-holder{position:static;transform:none;width:88%;max-width:none;margin:clamp(18px,4vw,30px) auto clamp(30px,7vw,48px);height:auto}
.now-cta{position:static;width:100%;height:auto;min-height:clamp(140px,40vw,180px);background:var(--maroon)}
/* phones: shift the cover focal point to keep the tower in frame */
.hero-photo{object-position:64% center}
}
@media(max-width:560px){
.property-grid,.news-grid{grid-template-columns:1fr}
.footer-inner{grid-template-columns:1fr 1fr}
.invest-points{display:flex;flex-direction:column;gap:24px;background:none}
.ip{border-top:1px solid #ccc;padding-top:24px}
.contact-form .f-row{grid-template-columns:1fr}
.hero-content{top:38%}
/* pic 2 — size the CTA to its content instead of full-bleed width */
.btn-hero{width:auto;min-width:0;justify-content:center;gap:14px;padding:0 24px}
}
/* ===========================================================
Properties page (properties.html) — matches PDF page 2
PDF pt = px @1694 viewport; vw = px / 16.94
=========================================================== */
.properties-page .site-header{background:var(--maroon);border-bottom-color:transparent}
/* grey hero band (page top → ~y700) */
.prop-hero{background:var(--grey-bg);padding-top:11.79vw;min-height:41.32vw}
.prop-breadcrumb{font-size:clamp(15px,1.877vw,38px);font-weight:200;line-height:1;color:#000}
.prop-breadcrumb a{color:#000}
.prop-breadcrumb a:hover{color:var(--maroon)}
.prop-hero-rule{height:1px;background:#000;margin-top:2.04vw}
.prop-h1{font-size:clamp(28px,3.428vw,70px);font-weight:300;line-height:1.08;letter-spacing:.005em;color:#000;margin-top:2.07vw} /* V6.5 audit: unified with news/about/investment page titles (was 5.45vw/110px outlier) */
.prop-intro{font-size:clamp(15px,1.877vw,38px);font-weight:200;line-height:1.2;color:#000;margin-top:3.54vw;max-width:50em}
/* project rows (white). V2: country headers (Qatar/Kuwait) + all-square images */
.prop-main{background:#fff;padding-top:5.73vw;padding-bottom:17.7vw}
.prop-country{font-size:clamp(38px,5.45vw,110px);font-weight:300;line-height:1.08;letter-spacing:.005em;color:#000;margin:0 0 4.98vw}
.prop-country.kw{margin-bottom:6.11vw} /* Kuwait header → first Kuwait row */
.prop-row{display:flex;align-items:flex-start;gap:5.58vw;margin-bottom:9.42vw}
.prop-row.rev{flex-direction:row-reverse}
.prop-figure{flex:none;margin:0}
.prop-figure img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.prop-figure.square{width:43.3vw;aspect-ratio:1/1}
.prop-figure.sq{width:44.6vw;aspect-ratio:755/733} /* V2 Kuwait square images */
.prop-text{flex:1;min-width:0;padding-top:2.62vw} /* chip pill top 44.4px below image top (V2) */
.prop-chip{display:inline-block;background:var(--maroon);color:#fff;font-size:clamp(14px,1.623vw,33px);font-weight:200;line-height:1;padding:.49vw 1.16vw;border-radius:clamp(5px,.35vw,7px)}
.prop-h2{font-size:clamp(28px,3.253vw,66px);font-weight:400;line-height:1.2;letter-spacing:0;color:#000;margin-top:2.72vw}
.prop-para{font-size:clamp(14px,1.623vw,33px);font-weight:200;line-height:1.2;color:#000;margin-top:2.72vw;max-width:22.5em}
.prop-bullets{margin-top:2.36vw}
.prop-bullets li{font-size:clamp(14px,1.623vw,33px);font-weight:200;line-height:1.2;color:#000;position:relative;padding-left:2.05vw}
.prop-bullets li::before{content:"";position:absolute;left:.15vw;top:.56em;width:.4vw;height:.4vw;min-width:5px;min-height:5px;border-radius:50%;background:#000}
/* Kuwait rows — square image, text top-aligned (chip ~72px below image top) */
.prop-row.ksq{align-items:flex-start;gap:4.43vw}
.prop-row.ksq .prop-text{padding-top:3.85vw} /* row 5: chip pill 65.2 below image top */
.prop-row.gap-p2 .prop-text{padding-top:3.53vw} /* row 6: 59.8 */
.prop-row.gap-end .prop-text{padding-top:2.82vw} /* row 7: 47.7 */
.prop-row.ksq .prop-para{margin-top:2.48vw;max-width:21.5em} /* PDF wraps: 7/5 lines */
.prop-row.gap-end .prop-para{max-width:25.5em} /* row 7 wraps 4 lines */
.prop-loc{font-size:clamp(14px,1.623vw,33px);font-weight:200;line-height:1.2;color:#000;margin-top:2.18vw;margin-bottom:0}
.prop-row.gap-p1 .prop-loc{margin-top:3.26vw} /* row 5 has a wider gap before Location */
.prop-intro,.prop-para{margin-bottom:0}
/* row-specific gaps (V2 PDF pitches) */
.prop-row.gap-lg{margin-bottom:8.88vw} /* row4 → Kuwait header (150px) */
.prop-row.gap-lg{gap:4.6vw} /* row4 text column is wider in the PDF */
.prop-row.gap-lg .prop-para{max-width:24.1em} /* → 5-line wrap as in the PDF */
.prop-row.gap-p1{margin-bottom:15vw} /* row5 → row6 (254px) */
.prop-row.gap-p2{margin-bottom:16.29vw} /* row6 → row7 (276px) */
.prop-row.gap-end{margin-bottom:0}
/* responsive: stack image-above-text */
@media(max-width:1080px){
.prop-hero{padding-top:20vw;min-height:0;padding-bottom:7vw}
.prop-main{padding-top:11vw}
.prop-country{font-size:clamp(30px,6vw,60px);margin-bottom:24px}
.prop-country.kw{margin-bottom:24px;margin-top:20px}
.prop-row,.prop-row.rev,.prop-row.ksq{flex-direction:column;align-items:stretch;gap:26px;margin-bottom:66px}
.prop-row.gap-lg,.prop-row.gap-p1,.prop-row.gap-p2{margin-bottom:66px}
.prop-figure.square,.prop-figure.sq{width:100%}
.prop-text,.prop-row.ksq .prop-text{padding-top:0}
.prop-breadcrumb,.prop-intro{font-size:clamp(15px,2.2vw,21px)}
.prop-intro{max-width:none;margin-top:20px}
.prop-h1{font-size:clamp(30px,5vw,60px)}
.prop-chip,.prop-para,.prop-bullets li,.prop-loc{font-size:clamp(16px,2.3vw,22px)}
.prop-h2{font-size:clamp(28px,4.4vw,46px);margin-top:20px}
.prop-para{margin-top:16px;max-width:40em}
.prop-bullets{margin-top:22px}
.prop-bullets li{padding-left:22px}
.prop-bullets li::before{left:2px}
.prop-loc{margin-top:24px}
}
@media(max-width:560px){
.prop-hero{padding-top:25vw}
}
/* ===========================================================
News page (news.html) — matches PDF page 3 (breadcrumb omitted)
PDF pt = px @1694 viewport; vw = px / 16.94
=========================================================== */
.news-page .site-header{background:var(--maroon);border-bottom-color:transparent}
/* grey hero band (H1 kept at its PDF position; no breadcrumb) */
.np-hero{background:var(--grey-bg);padding-top:14.64vw;min-height:41.32vw}
.np-h1{font-size:clamp(28px,3.428vw,70px);font-weight:300;line-height:1.08;letter-spacing:.005em;color:#000}
.np-intro{font-size:clamp(15px,1.877vw,38px);font-weight:200;line-height:1.2;color:#000;margin:5.21vw 0 0;max-width:71.5vw} /* line 1 breaks after "…milestones, and" as in the PDF */
/* white cards area */
.np-main{background:#fff;padding-top:6.97vw;padding-bottom:26.4vw}
/* vw-based grid so images stay exactly 355.2px (20.97vw) regardless of scrollbar; first card at x≈100 */
.np-grid{display:grid;grid-template-columns:repeat(4,20.97vw);column-gap:1.535vw;row-gap:1.77vw;margin-left:5.915vw} /* V2: 2 rows of 4 image-only cards, 30px row-gap */
.np-card{display:flex;flex-direction:column}
.np-media{width:100%;aspect-ratio:355/490.6;border-radius:clamp(10px,.83vw,17px);overflow:hidden}
.np-media img{width:100%;height:100%;object-fit:cover;display:block}
.np-body{padding-left:1.51vw}
.np-body h3{font-size:clamp(15px,1.174vw,24px);font-weight:200;line-height:1.2;color:#000;margin-top:2.70vw;white-space:nowrap} /* titles use
; nowrap keeps them 2 lines (browser Nexa renders a hair wider than the PDF) */
.np-body p{font-size:clamp(12px,.826vw,17px);font-weight:200;line-height:1.2;color:#000;margin:.886vw 0 0}
.np-readmore{display:block;width:max-content;max-width:100%;font-size:clamp(12px,.826vw,17px);font-weight:700;line-height:1.2;color:#000;margin-top:0}
.np-readmore:hover{color:var(--maroon)}
/* responsive */
@media(max-width:1080px){
.np-hero{padding-top:20vw;min-height:0;padding-bottom:7vw}
.np-h1{font-size:clamp(30px,5vw,60px)}
.np-intro{font-size:clamp(15px,2.2vw,22px);max-width:none;margin-top:20px}
.np-main{padding-top:44px;padding-bottom:90px}
.np-grid{grid-template-columns:1fr 1fr;column-gap:28px;row-gap:40px;margin:0 6%}
.np-body{padding-left:6px}
.np-body h3{font-size:clamp(17px,2.3vw,22px);margin-top:20px;white-space:normal}
.np-body p{font-size:clamp(14px,1.6vw,16px);margin-top:12px}
.np-readmore{font-size:clamp(14px,1.6vw,16px);margin-top:10px}
}
@media(max-width:560px){
.np-hero{padding-top:26vw}
.np-grid{grid-template-columns:1fr;row-gap:38px;margin:0 6%}
}
/* ===========================================================
About page (about.html) — matches PDF page 4 (breadcrumb omitted)
PDF pt = px @1694 viewport; vw = px / 16.94
=========================================================== */
.about-page .site-header{background:var(--maroon);border-bottom-color:transparent}
.ab-wrap{width:min(88.2vw,1800px);margin-inline:max(5.9vw,calc((100vw - 1800px)/2))} /* PDF x100->1594, scrollbar-immune; V6.6: same formula as .container */
/* alternating full-width bands (heights = PDF band boundaries) */
.ab-hero{background:var(--grey-bg);min-height:28.63vw;padding-top:14.64vw} /* 0->485; H1 box 248 */
.ab-overview{background:#fff;min-height:55.20vw;padding-top:4.53vw} /* 485->1420; content 561.8 */
.ab-vm{background:var(--grey-bg);min-height:41.03vw;padding-top:7.38vw} /* 1420->2115; content 1545 */
.ab-lead{background:#fff;min-height:63.76vw;padding-top:12.56vw} /* 2115->3195; H2 2327.8 */
.ab-group{background:var(--grey-bg);min-height:39.85vw;padding-top:6.94vw} /* 3195->3870; H2 3312.6 */
.ab-tail{background:#fff;height:17.7vw} /* ~300px white before footer */
/* hero */
.ab-h1{font-size:clamp(28px,3.428vw,70px);font-weight:300;line-height:1.08;letter-spacing:.005em;color:#000}
.ab-tagline{font-size:clamp(15px,1.877vw,38px);font-weight:200;line-height:1.2;color:#000;margin-top:4.06vw}
/* shared H2 + body + image */
.ab-h2{font-size:clamp(28px,3.253vw,66px);font-weight:400;line-height:1.2;letter-spacing:0;color:#000;margin:0}
.ab-body p{font-size:clamp(14px,1.623vw,33px);font-weight:200;line-height:1.2;color:#000;max-width:36.95vw;margin:0}
.ab-body p+p{margin-top:1.2em}
.ab-strong{font-weight:700}
.ab-img{flex:none;margin:0}
.ab-img img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
/* Company overview — image LEFT, text RIGHT */
.ab-overview .ab-row{display:flex;gap:12.69vw;align-items:flex-start}
.ab-overview .ab-img{width:35.66vw;aspect-ratio:604/734.5}
.ab-overview .ab-col{flex:1;min-width:0;padding-top:.35vw}
.ab-overview .ab-body{margin-top:1.55vw}
/* Vision & Mission — vision LEFT, mission RIGHT */
.ab-vm .ab-cols{display:grid;grid-template-columns:49.14vw 1fr}
.ab-label{font-weight:700}
.ab-vision .ab-label{display:block;font-size:clamp(14px,1.623vw,33px);line-height:1.2;color:#000;margin-top:4.36vw}
.ab-vision .ab-vpara{font-size:clamp(14px,1.623vw,33px);font-weight:200;line-height:1.2;color:#000;max-width:36.95vw;margin-top:2.02vw}
.ab-mission .ab-label{display:block;font-size:clamp(14px,1.623vw,33px);line-height:1.2;color:#000}
.ab-mission .ab-item{font-size:clamp(14px,1.623vw,33px);font-weight:200;line-height:1.2;color:#000;max-width:36.9vw;margin:0}
.ab-mission .ab-item:first-of-type{margin-top:2.35vw}
.ab-mission .ab-item+.ab-item{margin-top:1.95vw}
/* Leadership — text LEFT, image RIGHT */
.ab-lead .ab-cols{display:grid;grid-template-columns:45.5vw 35.66vw}
.ab-lead .ab-body{max-width:34.24vw;margin-top:4.92vw}
.ab-lead .ab-img{aspect-ratio:604/660.1;margin-top:.68vw}
/* Group strength — H2 LEFT, body RIGHT */
.ab-group .ab-cols{display:grid;grid-template-columns:48.5vw 1fr}
.ab-group .ab-body{max-width:none;margin-top:.87vw} /* PDF line breaks are manual (see
in markup) */
.ab-group .ab-body p{max-width:none}
/* responsive */
@media(max-width:1080px){
.ab-wrap{width:auto;margin:0 6%}
.ab-hero{min-height:0;padding-top:20vw;padding-bottom:8vw}
.ab-overview,.ab-vm,.ab-lead,.ab-group{min-height:0;padding-top:48px;padding-bottom:48px}
.ab-tail{height:60px}
.ab-h1{font-size:clamp(30px,5vw,60px)}
.ab-tagline{font-size:clamp(15px,2.2vw,22px);margin-top:16px}
.ab-h2{font-size:clamp(26px,4.4vw,44px)}
.ab-body p,.ab-vision .ab-vpara,.ab-mission .ab-item,.ab-vision .ab-label,.ab-mission .ab-label{font-size:clamp(15px,2.3vw,20px);max-width:none}
.ab-overview .ab-row{flex-direction:column;gap:24px}
.ab-overview .ab-img,.ab-lead .ab-img{width:100%;margin-top:0}
.ab-overview .ab-col{padding-top:0}
.ab-overview .ab-body{margin-top:16px}
.ab-vm .ab-cols,.ab-group .ab-cols{grid-template-columns:1fr;gap:34px}
.ab-group .ab-body br{display:none}
.ab-lead .ab-cols{display:flex;flex-direction:column-reverse;gap:26px}
.ab-lead .ab-body{max-width:none;margin-top:16px}
.ab-vision .ab-label{margin-top:22px}
.ab-vision .ab-vpara{margin-top:12px}
.ab-mission{margin-top:8px}
.ab-mission .ab-item:first-of-type{margin-top:16px}
.ab-mission .ab-item+.ab-item{margin-top:16px}
.ab-group .ab-body{margin-top:16px}
}
@media(max-width:560px){
.ab-hero{padding-top:26vw}
}
/* ===========================================================
Investment Corner page (investment-corner.html) — V2 page 6 (breadcrumb omitted)
PDF pt = px @1694 viewport; vw = px / 16.94. Pure text, alternating bands.
=========================================================== */
.ic-page .site-header{background:var(--maroon);border-bottom-color:transparent}
.ic-wrap{width:min(88.2vw,1800px);margin-inline:max(5.9vw,calc((100vw - 1800px)/2))} /* PDF x100->1594, scrollbar-immune; V6.6: same formula as .container */
.ic-hero{background:var(--grey-bg);min-height:47.23vw;padding-top:14.64vw} /* 0->800; H1 248 */
.ic-white1{background:#fff;min-height:83.24vw;padding-top:11.2vw} /* 800->2210; H2 989.7 */
.ic-grey{background:var(--grey-bg);min-height:125.15vw;padding-top:5.18vw} /* 2210->4330; H2 2297.8 */
.ic-white2{background:#fff;min-height:76.4vw;padding-top:7.94vw} /* 4330->; H2 4464.5 */
.ic-h1{font-size:clamp(28px,3.428vw,70px);font-weight:300;line-height:1.08;letter-spacing:.005em;color:#000;margin:0}
.ic-intro{margin-top:4.55vw}
.ic-intro p{font-size:clamp(15px,1.877vw,38px);font-weight:200;line-height:1.2;letter-spacing:-.007em;color:#000;margin:0} /* -.007em keeps P1 at 3 lines to match PDF */
.ic-intro p+p{margin-top:1.2em}
.ic-h2{font-size:clamp(28px,3.253vw,66px);font-weight:400;line-height:1.2;letter-spacing:0;color:#000;margin:0}
.ic-h2.sec{margin-top:8.81vw} /* "The country..." — after 6-line Top-Service para */
.ic-h2.secB{margin-top:7.51vw} /* "Your chosen..." — after 10-item checklist */
.ic-rule{height:2px;background:#361108}
.ic-rule.w1{width:39.9vw;margin-top:1.806vw} /* under "Investment Opportunities" (PDF y1086.5) */
.ic-rule.w2{width:24.8vw;margin-top:2.33vw} /* under "Investment Tips" (PDF y2403.5, w420) */
.ic-rule.w3{width:24.8vw;margin-top:1.28vw} /* under "Investment Policy" (PDF y4552.5, w420) */
.ic-sub{font-size:clamp(18px,1.806vw,37px);font-weight:700;line-height:1.2;color:var(--maroon);margin-top:4.23vw}
.ic-sub.b{margin-top:6vw} /* sub after a body block (no rule above) */
.ic-sub.t{margin-top:2.7vw} /* "Top Investment" — tighter under Tips rule */
.ic-lead{font-size:clamp(18px,1.806vw,37px);font-weight:700;line-height:1.2;color:var(--maroon);margin-top:3.58vw}
.ic-body{margin-top:2.64vw}
.ic-body.rg{margin-top:4.8vw} /* Policy intro para — wider gap under rule */
.ic-body.rg2{margin-top:5.06vw} /* Policy closing para — after the » list */
.ic-body p{font-size:clamp(13px,1.505vw,31px);font-weight:200;line-height:1.2;color:#000;margin:0}
.ic-body p+p{margin-top:1.2em}
.ic-list{margin-top:4.70vw;padding:0;list-style:none}
.ic-list li{font-size:clamp(13px,1.505vw,31px);font-weight:200;line-height:1.2;color:#000;position:relative;padding-left:2.41vw}
.ic-list li::before{content:"\00BB";position:absolute;left:.27vw;top:0;color:#000}
.ic-list.tight{margin-top:3.71vw} /* Policy » list — under its 3-line paragraph */
.ic-tail{background:#fff;height:29.5vw} /* ~500px white before footer */
/* responsive */
@media(max-width:1080px){
.ic-wrap{width:auto;margin:0 6%}
.ic-hero{min-height:0;padding-top:20vw;padding-bottom:8vw}
.ic-white1,.ic-grey,.ic-white2{min-height:0;padding-top:52px;padding-bottom:52px}
.ic-tail{height:70px}
.ic-h1{font-size:clamp(30px,5vw,60px)}
.ic-intro p{font-size:clamp(15px,2.3vw,22px)}
.ic-h2{font-size:clamp(26px,4.4vw,44px)}
.ic-h2.sec{margin-top:56px}
.ic-sub,.ic-sub.b,.ic-lead{font-size:clamp(17px,2.5vw,26px)}
.ic-sub{margin-top:32px}.ic-sub.b{margin-top:40px}.ic-lead{margin-top:44px}
.ic-rule{margin-top:14px}
.ic-body{margin-top:18px}
.ic-body p,.ic-list li{font-size:clamp(14px,2vw,19px)}
.ic-list{margin-top:34px}.ic-list.tight{margin-top:18px}
.ic-list li{padding-left:26px}
.ic-list li::before{left:2px}
}
@media(max-width:560px){
.ic-hero{padding-top:26vw}
}
/* ===========================================================
V6 — mobile polish
Pages were already responsive; these refine spacing/typography
on phones so nothing sits edge-to-edge or breaks awkwardly.
=========================================================== */
@media(max-width:860px){
/* Contact canvas (homepage): give the reflowed content side gutters */
.contact .fq-cl-wrap{padding-inline:20px}
.fq-cl-canvas .contact-heading{inline-size:100%}
.fq-cl-canvas .question-panel,
.fq-cl-canvas .info-panel{inline-size:calc(100% - 24px);margin-inline:12px}
/* Let hero/banner copy flow to the screen width instead of forcing
the PDF's desktop line breaks (which wrap raggedly on phones) */
.hero-sub br,.now-text p br{display:none}
/* Comfortable reading measure for the flowing sub-copy */
.hero-sub{max-width:34em}
.now-text p{max-width:40em}
/* Slightly larger tap target for footer links */
.footer-nav a{padding-block:4px}
}
@media(max-width:560px){
/* Tame the hero headline on small phones so it never crowds the edges */
.hero h1{font-size:clamp(28px,8.4vw,40px);line-height:1.18}
.hero-sub{font-size:clamp(15px,4.4vw,19px)}
.hero-content{top:33%}
/* Give the NOW SELLING banner headline a touch more room */
.now-text h2{font-size:clamp(30px,8.6vw,44px)}
.now-text{padding-top:9vw}
/* Ensure the contact heading scales down cleanly */
.fq-cl-canvas .contact-heading{font-size:clamp(24px,7vw,30px)}
}
@media(max-width:380px){
.hero h1{font-size:26px}
.section-title,.discover-title{font-size:clamp(26px,8.5vw,32px)}
}
/* ===========================================================
V6.1 — mobile view fixes (menu + hero CTA edited in-place above)
Phone/tablet-only refinements from client feedback; desktop (>860px) untouched.
=========================================================== */
@media(max-width:860px){
/* pic 3 — "What Sets Us Apart": tidy vertical stack instead of the
space-between wrap that scattered the label & items unevenly */
.apart-inner{flex-direction:column;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;gap:15px;padding:22px 0}
.apart-label{font-size:16px;margin-bottom:2px}
.apart-item{font-size:15px}
}
@media(max-width:560px){
/* pic 4 — Explore Our Properties: shorter (landscape) images so they
stop dominating, and larger, roomier card text */
.property-media{aspect-ratio:3/2}
.property-media h3{font-size:22px;left:18px;bottom:14px;transform:none;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.property-card:first-child .property-media h3{font-size:20px}
.card-icon{width:38px;height:38px;top:14px;left:14px}
.property-bullets{padding:18px 20px 10px;gap:8px}
.property-bullets li{font-size:15px;padding-left:18px}
.property-bullets li::before{top:.55em}
.learn-box{margin:6px 16px 18px;height:54px;padding:0 18px;font-size:14px}
.learn-arrow{width:30px}
/* pic 5 — EXPLORE MORE: compact horizontal CTA (label + arrow, centered)
instead of a tall near-empty maroon box */
.now-cta{flex-direction:row;align-items:center;justify-content:space-between;
height:auto;min-height:0;padding:22px 24px;gap:16px;border-radius:12px}
.now-cta-label{font-size:26px;line-height:1.1}
.now-cta-foot{margin-top:0;align-items:center}
.now-cta-arrow{width:34px}
}
/* ===========================================================
V6.2 — mobile view fixes (client feedback); desktop (>860px) untouched
=========================================================== */
@media(max-width:860px){
/* pic 3a — kill the strip of page content that showed between the header
and the first menu item (header is ~61px but shrinks to ~49px when
scrolled, while the panel started at a fixed 64px). Let the panel fill
from the very top; its maroon bg sits BEHIND the header controls, so
there is never a gap at any scroll position */
.main-nav{top:0;padding-top:64px;z-index:1}
.logo,.nav-toggle{position:relative;z-index:2}
/* pic 3b — remove the bright white line under "The Townhouses": a desktop
rule (.dropdown li:nth-child(n+3) a → #e8e8e8) was leaking onto the 3rd
dropdown item ("First Hotel"). Match the faint uniform divider instead */
.dropdown li:nth-child(n+3) a{border-top:1px solid rgba(255,255,255,.09)}
}
@media(max-width:560px){
/* pic 1 — Media & News cards: shorter (landscape) images + larger text,
same balance fix applied to the property cards in V6.1 */
.news-media{aspect-ratio:3/2;margin-bottom:16px}
.news-card h3{font-size:18px;margin-bottom:14px}
.news-card .learn{height:54px;font-size:14px;padding:0 18px}
.learn-arrow-news{width:30px}
/* pic 2 — Footer: single column with a clean vertical link list instead of
the uneven two-per-row wrap (was a leftover 1fr 1fr grid) */
.footer-inner{grid-template-columns:1fr;gap:20px}
.footer-nav{flex-direction:column;gap:14px;padding-top:2px}
.footer-nav a{margin-left:0}
}
/* ===========================================================
V6.4 — Motion & animation
Compositor-only (transform/opacity). Scroll reveals cascade via the
per-group --rd stagger set in main.js. All motion honours
prefers-reduced-motion (static + a subtle hover fallback).
=========================================================== */
/* Hero photo — gentle one-time "settle" zoom on load (subtle, not a large zoom) */
@keyframes fq-hero-settle{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero-photo{animation:fq-hero-settle 15s cubic-bezier(.16,.7,.3,1) both;transform-origin:58% 42%}
/* Hero copy — a touch slower for a premium entrance */
.hero-content .reveal{transition-duration:.9s}
/* Check icons pop in with their row (inherit the row's --rd stagger) */
.apart-item.reveal .ico-check-circle,
.ip.reveal .ico-circle{opacity:0;transform:scale(.55);transition:transform .6s cubic-bezier(.34,1.45,.5,1) var(--rd,0s),opacity .45s ease var(--rd,0s)}
.apart-item.reveal.in .ico-check-circle,
.ip.reveal.in .ico-circle{opacity:1;transform:scale(1)}
/* Card hover — a little more lift + depth (compositor-only) */
.property-card{transition:box-shadow .35s ease,transform .35s cubic-bezier(.16,.7,.3,1)}
.property-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.14)}
.news-card{transition:transform .35s cubic-bezier(.16,.7,.3,1)}
.news-card:hover{transform:translateY(-4px)}
.news-card .news-media{transition:box-shadow .35s ease}
.news-card:hover .news-media{box-shadow:0 18px 40px rgba(0,0,0,.16)}
/* Tactile press feedback on the primary actions */
.btn-hero:active,.btn-contact:active,.now-cta:active,.learn-box:active{transform:scale(.975)}
.learn-box{transition:box-shadow .2s ease,transform .18s ease}
/* Logo subtle hover */
.brand-logo{transition:transform .3s ease}
.logo:hover .brand-logo{transform:scale(1.03)}
/* ===========================================================
V7 — audit fixes + card-sign animation
=========================================================== */
/* fix: the hamburger button fell back to the UA font (Arial) */
.nav-toggle{font:inherit}
/* homepage "Learn more" now deep-links to the project rows — keep the
anchored row clear of the fixed header when it scrolls into view */
.prop-row,.prop-country{scroll-margin-top:96px}
/* contact form: success note (main.js reveals it on submit; the element
was missing so the form cleared silently). Sits beside the Submit
button inside the client's fixed 1126px canvas. */
.fq-cl-canvas .form-note{position:absolute;inset-block-start:427px;inset-inline-start:210px;inline-size:254px;display:flex;align-items:center;block-size:34px;margin:0;font-size:12.5px;line-height:1.35;font-weight:400;color:#5a0d2a}
.fq-cl-canvas .form-note[hidden]{display:none}
/* ---- Card signs (✕ / ✳ / +) — Execor-style decorative motion ----
1) each stroke draws itself in as the card reveals (staggered)
2) then the whole sign spins imperceptibly slowly, forever
3) hovering the card gently enlarges the sign (scale property, so it
never fights the rotate animation for `transform`) */
.card-icon line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}
.property-card.in .card-icon line{stroke-dashoffset:0}
.property-card.in .card-icon line:nth-child(1){transition-delay:calc(var(--rd,0s) + .30s)}
.property-card.in .card-icon line:nth-child(2){transition-delay:calc(var(--rd,0s) + .42s)}
.property-card.in .card-icon line:nth-child(3){transition-delay:calc(var(--rd,0s) + .54s)}
.property-card.in .card-icon line:nth-child(4){transition-delay:calc(var(--rd,0s) + .66s)}
.property-card.in .card-icon line:nth-child(5){transition-delay:calc(var(--rd,0s) + .78s)}
.property-card.in .card-icon line:nth-child(6){transition-delay:calc(var(--rd,0s) + .90s)}
@keyframes fq-sign-spin{from{rotate:0deg}to{rotate:360deg}}
.card-icon{transform-origin:center;animation:fq-sign-spin 26s linear infinite;transition:scale .45s ease}
.property-card:hover .card-icon{scale:1.14}
/* arrow micro-nudges on the CTAs that were missing them */
.arrow-long,.now-cta-arrow,.learn-arrow-news{transition:transform .3s ease}
.btn-hero:hover .arrow-long{transform:translateX(6px)}
.now-cta:hover .now-cta-arrow{transform:translateX(6px)}
.news-card .learn:hover .learn-arrow-news{transform:translateX(5px)}
/* footer links — same underline-grow as the header nav */
.footer-nav a{position:relative}
.footer-nav a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:#fff;transition:width .25s ease}
.footer-nav a:hover::after{width:100%}
@media(max-width:860px){
.fq-cl-canvas .form-note{position:static;inset-block-start:auto;inset-inline-start:auto;inline-size:auto;block-size:auto;margin-block-start:10px}
.fq-cl-canvas .form-note[hidden]{display:none}
}
/* ===========================================================
News1 — press wall (news1.html): top-fold clipping covers,
hover View / Download actions, lightbox viewer
=========================================================== */
.pw-main{padding:clamp(50px,6vw,110px) 0 clamp(60px,7vw,130px)}
.pw-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.1vw,36px)}
.pw-card{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.07);transition:transform .35s cubic-bezier(.16,.7,.3,1),box-shadow .35s ease}
.pw-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.16)}
.pw-card>img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top}
.pw-chip{position:absolute;left:14px;bottom:14px;z-index:2;background:var(--maroon);color:#fff;font-size:clamp(11px,.77vw,15px);font-weight:400;letter-spacing:.04em;padding:.45em 1em;border-radius:100px;pointer-events:none}
/* hover overlay with the two actions */
.pw-actions{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.1vw,20px);background:linear-gradient(to top,rgba(31,6,18,.82),rgba(76,17,41,.55) 55%,rgba(76,17,41,.32));opacity:0;transition:opacity .3s ease}
.pw-card:hover .pw-actions,.pw-card:focus-within .pw-actions{opacity:1}
.pw-btn{display:inline-flex;align-items:center;gap:9px;height:clamp(42px,2.9vw,52px);padding:0 clamp(18px,1.5vw,28px);border-radius:5px;font-family:inherit;font-size:clamp(12px,.85vw,16px);font-weight:700;letter-spacing:.02em;cursor:pointer;transition:transform .25s ease,background .25s ease,color .25s ease;transform:translateY(8px)}
.pw-card:hover .pw-btn,.pw-card:focus-within .pw-btn{transform:translateY(0)}
.pw-btn svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pw-view{background:#fff;border:1px solid #fff;color:var(--maroon)}
.pw-view:hover{background:var(--grey-bg)}
.pw-down{background:transparent;border:1px solid rgba(255,255,255,.85);color:#fff}
.pw-down:hover{background:rgba(255,255,255,.14)}
.pw-btn:active{transform:scale(.97)}
/* touch devices: no hover — keep the actions visible as a bottom bar */
@media (hover:none){
.pw-actions{opacity:1;align-items:flex-end;justify-content:flex-end;padding:0 12px 12px;background:linear-gradient(to top,rgba(31,6,18,.72),transparent 42%)}
.pw-btn{transform:none;height:40px;padding:0 14px;font-size:12px}
.pw-chip{bottom:64px}
}
/* lightbox */
.pw-lightbox{position:fixed;inset:0;z-index:200;background:rgba(12,3,8,.9);display:flex;align-items:center;justify-content:center}
.pw-lightbox[hidden]{display:none}
body.pw-lb-open{overflow:hidden}
.pw-lb-figure{margin:0;max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:12px}
.pw-lb-img{display:block;max-width:100%;max-height:calc(88vh - 44px);object-fit:contain;border-radius:6px;background:#fff}
.pw-lb-caption{color:#fff;font-size:clamp(12px,.9vw,16px);font-weight:200;text-align:center;letter-spacing:.02em}
.pw-lb-close,.pw-lb-prev,.pw-lb-next{position:fixed;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:50%;cursor:pointer;transition:background .25s ease}
.pw-lb-close:hover,.pw-lb-prev:hover,.pw-lb-next:hover{background:rgba(255,255,255,.24)}
.pw-lb-close{top:22px;right:26px;width:46px;height:46px;font-size:17px}
.pw-lb-prev,.pw-lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px;line-height:1;padding-bottom:4px}
.pw-lb-prev{left:22px}
.pw-lb-next{right:22px}
@media(max-width:860px){
.pw-grid{grid-template-columns:1fr;gap:20px}
.pw-lb-prev{left:8px}
.pw-lb-next{right:8px}
.pw-lb-prev,.pw-lb-next{width:42px;height:42px;font-size:24px}
.pw-lb-close{top:12px;right:12px;width:42px;height:42px}
.pw-lb-figure{max-width:96vw}
}
/* ===========================================================
Footer credits — Designed by Debrams · Developed by mogi
=========================================================== */
.footer-credits{border-top:1px solid rgba(255,255,255,.14);margin-top:clamp(26px,2.4vw,46px);padding:clamp(14px,1.2vw,22px) 0 clamp(20px,1.8vw,34px)}
.footer-credits p{margin:0;font-size:clamp(11px,.77vw,14px);font-weight:200;letter-spacing:.03em;color:rgba(255,255,255,.55)}
.footer-credits a{color:rgba(255,255,255,.85);font-weight:400;transition:color .25s ease}
.footer-credits a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* ---- Respect reduced-motion: static + instant, keep a gentle shadow hover ---- */
@media (prefers-reduced-motion: reduce){
.reveal{opacity:1 !important;transform:none !important;transition:none !important}
.apart-item .ico-check-circle,.ip .ico-circle{opacity:1 !important;transform:none !important;transition:none !important}
.hero-photo{animation:none !important}
.property-card:hover,.news-card:hover,.news-card:hover .news-media{transform:none !important}
.card-icon{animation:none !important;transition:none !important}
.card-icon line{stroke-dashoffset:0 !important;transition:none !important}
.property-card:hover .card-icon{scale:none !important}
.arrow-long,.now-cta-arrow,.learn-arrow-news,.footer-nav a::after{transition:none !important}
.pw-card:hover{transform:none !important}
.pw-actions,.pw-btn{transition:none !important}
.pw-card:hover .pw-btn,.pw-card:focus-within .pw-btn{transform:none !important}
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-delay:0ms !important}
}
/* ---- Contact form honeypot: must never be visible or focusable ---- */
.fq-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* ---- Error state for the form status line ---- */
.form-note.form-note-error{color:#b3261e}
/* ---- Contact form: invalid field state ----
box-shadow rather than a thicker border, so the fixed-canvas layout
does not shift when a field is marked. */
.fq-cl-canvas input.field-error,
.fq-cl-canvas textarea.field-error{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e;background:#fdf7f7}