:root{
     --ink:#11110f;
    --paper:#f5f1eb;
    --cream:#e8e1d5;
    --muted:#77756e;
     --accent:#000;
    --line:rgba(17,17,15,.14);
    --white:#fff;
}
 *{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"DM Sans",sans-serif;
    overflow-x:hidden
}
img {
    max-width: 100%;
}
/* .container {
    max-width: 90%;
} */
 body.loaded .preloader{
    opacity:0;
    visibility:hidden;
    pointer-events:none
}
.preloader{
    position:fixed;
    inset:0;
    background:var(--ink);
    z-index:9999;
    display:grid;
    place-items:center;
    transition:.8s ease
}
.loader-mark{
    font:700 30px Manrope;
    letter-spacing:.08em;
    color:#fff
}
.loader-mark img {
    width: 450px;
}
.loader-mark span{
    color:var(--accent)
}
 .scroll-progress{
    position:fixed;
    top:0;
    left:0;
    height:3px;
    width:0;
    background: linear-gradient(to right, #d80e77, #dd6c25, #eb9c1a, #5ab757);
    z-index:1001
}
 .cursor-glow{
    position:fixed;
    width:240px;
    height:240px;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle,rgba(183,155,109,.13),transparent 65%);
    transform:translate(-50%,-50%);
    z-index:2
}
.navbar {
    padding: 24px 0;
    transition: .4s;
    z-index: 1000;
    color: #fff;
    background: rgb(255 255 255 / 60%);
    backdrop-filter: blur(10px);
    width: 100%;
    margin: 0 auto 0;
    /* border-radius: 80px; */
}
.navbar.scrolled{
    padding:13px 0;
    background:rgb(255 255 255 / 85%);
    backdrop-filter: blur(10px);
}
.navbar-brand{
    font:700 18px Manrope;
    letter-spacing:.08em;
    color:inherit!important
}
.navbar-brand img {
    height: 50px;
}
.navbar-brand span{
    color:var(--accent)
}
.navbar-brand b{
    font-weight:400;
    opacity:.5
}
.nav-link{
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:.13em;
    color: #000!important;
    opacity:.8
}
.nav-link:hover{
    opacity:1
}
.nav-cta{
    color:#000;
    text-decoration:none;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.12em;
    border:1px solid rgba(0,0,0,.35);
    padding:12px 16px
}
.nav-cta span{
    color:#000;
    margin-left:14px
}
.navbar-toggler{
    border: 0;
    padding: 0;
}
.navbar-toggler span{
    display:block;
    width:25px;
    height:1px;
    background:#000;
    margin:6px
}
.modal-close {
    display: inline-block;
    font-size: 24px;
    height: 35px;
    width: 35px;
    text-align: center;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer;
}
.modal-content {
    padding: 20px;
    background-color: #ffffffd9;
    backdrop-filter: blur(10px);
}
.modal-content .intro-form-card {
    padding: 0;
    background-color: transparent;
}
.modal-content .intro-form-card button {
    margin: 0;
}
.hero{
    min-height:100vh;
    position:relative;
    color:#fff;
    /* display:flex; */
    align-items:center;
    overflow:hidden;
    background:#222
}
.hero-media,.hero-overlay{
    position:absolute;
    inset:0
}
.hero-media{
    background-image:url("../images/hero-banner.png");
    background-size:cover;
    background-position:center;
    transform:scale(1.04)
}
.hero-overlay {
    background: linear-gradient(-90deg, #f5f1eb00 0%, #f5f1ebad 77%, #f5f1eb 100%);
}
 .hero-content{
    position:relative;
    z-index:3;
    padding-top: 180px;
    margin: 0 auto;
}
.hero-content h4 {
    color: #d9101a;
}
.hero-kicker,.eyebrow{
    font-size:14px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:700
}
.hero h1{
    font:600 clamp(58px,9vw,120px)/.95 Manrope;
    letter-spacing:-.065em;
    margin:24px 0 35px;
    color: #00799f;
}
.hero h1 em,.section-title em,.architecture-copy em,.cta-section h2 em,.about h2 em{
    font-family:Georgia,serif;
    font-weight:400;
    letter-spacing:-.07em
}
.hero-copy{
    font-size:16px;
    line-height:2;
    max-width:550px;
    color:#000
}
.hero-actions{
    display:flex;
    gap:28px;
    align-items:center;
    margin-top:35px
}
.btn-premium{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
    padding:16px 18px;
    background:#fff;
    color:#111;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.11em;
    font-size:14px;
    font-weight:700;
    transition:.35s
}
.btn-premium:hover{
    background:var(--accent);
    color:#fff;
    transform:translateY(-3px)
}
.hero .nav-cta {
    background-color: #ffffff8c;
    padding: 16px 18px;
}
.btn-premium span{
    font-size:16px
}
.text-link,.arrow-link{
    color:#000;
    text-decoration:none;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.12em
}
.text-link span,.arrow-link span{
    margin-left:12px;
    color:var(--accent)
}
.hero-bottom{
    position:absolute;
    z-index:4;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    border-top:1px solid rgba(255,255,255,.2);
    margin:0 40px;
    padding:18px 0;
    gap:70px
}
.hero-bottom div{
    display:flex;
    flex-direction:column;
    gap:5px
}
.hero-bottom small{
    font-size:8px;
    letter-spacing:.18em;
    opacity:.5
}
.hero-bottom strong{
    font-size:11px;
    font-weight:500
}
.card-list {
    position: relative;
    margin: 30px auto;
}
.hero-card {
    background-color: #ffffffd4;
    color: #121820;
    height: 175px;
    padding: 15px;
}
.hero-card h3 {
    font-family: Georgia, serif;
}
.hero-card p {
    color: #5f6670;
    margin: 10px 0;
    font-size: 15px;
}
.hero-card span {
    display: block;
    height: 3px;
    width: 30px;
    background-color: #00799f;
}
.scroll-note{
    position:absolute;
    right:40px;
    bottom:115px;
    font-size:9px;
    letter-spacing:.18em;
    writing-mode:vertical-rl;
    opacity:.65
}
.scroll-note span{
    color:var(--accent);
    font-size:16px;
    margin-top:12px
}
 .section-pad{
    padding:100px 0
}
.intro{
    background:var(--paper)
}
.intro ul.connect-card {
    padding: 20px;
    background-color: #ffffff7d;
}

.intro ul.connect-card li {
    width: 33.33%;
}
.section-title{
    font:600 clamp(42px,5vw,74px)/.95 Manrope;
    letter-spacing:-.06em;
    margin:25px 0
}
.lead-copy{
    font:500 25px/1.35 Manrope;
    letter-spacing:-.025em;
    max-width:650px
}
.muted-copy{
    color:var(--muted);
    line-height:1.8;
    max-width:600px
}
.arrow-link{
    color:var(--ink);
    display:inline-block;
    margin-top:25px;
    border-bottom:1px solid var(--line);
    padding-bottom:10px
}
ul.contact-info {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.contact-info li {
    padding: 0 0 0 55px;
    margin-bottom: 15px;
    position: relative;
}
ul.contact-info li::before {
    content: '';
    display: inline-block;
    width: 45px;
    height: 45px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: 2px;
}
ul.contact-info li svg {
    position: absolute;
    left: 11px;
    top: 12px;
}

ul.contact-info li label {
    font-size: 12px;
}

.intro-form-background-image {
    padding: 30px;
}

.intro-form-card {
    padding: 30px;
    background-color: #ffffffd9;
}
.intro-form-card h3 {
    font-family: Georgia, serif;
}
.intro-form-card .form-control {
    margin-bottom: 25px;
}
.intro-form-card button {
    margin-top: 50px;
    color: #fff;
    background-color: #000;
}

 .stats-section{
    background:var(--ink);
    color:#fff;
    padding:60px 0
}
.stat{
    min-height:150px;
    padding:20px 30px;
    border-left:1px solid rgba(255,255,255,.13);
    display:block;
    align-items:center;
    gap:20px;
    justify-content: center;
}
.stat:first-child {
    border-left: 0;
}
.stat strong{
    font:600 clamp(50px,6vw,78px) Manrope;
    letter-spacing:-.08em;
}
.stat span{
    display: block;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.12em;
    line-height:1.5;
    opacity:.55
}
.spaces{
    background:#ebe7df
}
.img-2 {
    margin-bottom: 24px;
}
.img-4 {
    margin-top: 24px;
}
.spaces .section-title {
    font-size: 66px;
}
.spaces ul {
    list-style-type: none;
}
.spaces ul li {
    position: relative;
    padding: 20px 0 20px 120px;
}
.spaces ul li span {
    position: absolute;
}
.spaces ul li + li {
    border-top: 1px solid #00799f;
}
.spaces ul li:first-child {
    padding-top: 0;
}
.spaces ul li:last-child {
    padding-bottom: 0;
}
.spaces h3 {
    font-family: Georgia, serif;
}
.spaces p {
    margin-bottom: 0;
}
.spaces ul li span {
    position: absolute;
    font-family: Georgia, serif;
    font-size: 80px;
    left: 0;
    top: 50%;
    margin-top: -48px;
    line-height: 1;
    vertical-align: middle;
    color: #00799f;
}
.spaces .muted-copy {
    max-width: none;
}
.section-number{
    font-size:10px;
    color:var(--muted);
    letter-spacing:.15em
}
.space-grid{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:20px
}
.space-card{
    background:#fff;
    overflow:hidden;
    position:relative
}
.space-card.large{
    grid-row:span 2
}
.space-image{
    height:330px;
    background-size:cover;
    background-position:center;
    transition:transform .8s
}
.space-card.large .space-image{
    height:590px
}
.img-office{
    background-image:url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1300&q=85")
}
.img-retail{
    background-image:url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1200&q=85")
}
.img-lounge{
    background-image:url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1200&q=85")
}
.space-card:hover .space-image{
    transform:scale(1.04)
}
.space-content{
    padding:25px 28px 30px
}
.space-content>span{
    font-size:9px;
    color:var(--accent);
    letter-spacing:.15em
}
.space-content h3{
    font:600 25px Manrope;
    letter-spacing:-.04em;
    margin:12px 0 8px
}
.space-content p{
    font-size:13px;
    color:var(--muted);
    max-width:380px
}
.space-content a{
    display:inline-block;
    color:var(--ink);
    text-decoration:none;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.15em;
    margin-top:8px
}
.space-content a b{
    color:var(--accent);
    font-size:15px;
    margin-left:15px
}
 .experience{
    background:var(--paper)
}
.amenity-list{
    border-top:1px solid var(--line)
}
.amenity{
    display:grid;
    grid-template-columns:55px 1fr 25px;
    align-items:center;
    gap:15px;
    padding:22px 0;
    border-bottom:1px solid var(--line);
    transition:all .3s;
}
.amenity:hover {
    padding-left:10px;
    transition:all .3s;
}
.amenity span{
    font-size:14px;
    color:var(--accent)
}
.amenity b{
    font:500 16px Manrope
}
.amenity i{
    font-style:normal;
    color:var(--accent)
}
.ame-card {
    background-color: #000;
    height: 300px;
    margin-bottom: 30px;
    position: relative;
}
.ame-card .caption {
    padding: 10px 15px;
    position: absolute;
    right: 10px;
    left: 10px;
    bottom: 10px;
    color: #000;
    background-color: #ffffffcb;
    backdrop-filter: blur(10px);
}
.ame-card .caption h4 {
    font-size: 22px;
}
.ame-card .caption p {
    margin-bottom: 0;
}
.architecture{
    min-height:760px;
    position:relative;
    color:#fff;
    display:flex;
    align-items:center;
    overflow:hidden
}
/* .architecture-image{
    position:absolute;
    inset:0;
    background-image:linear-gradient(90deg,rgba(5,5,5,.85),rgba(5,5,5,.25)),url("https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=2200&q=85");
    background-size:cover;
    background-position:center
} */
.architecture-copy{
    position:relative;
    z-index:2;
    width:100%;
    margin:auto;
}
.architecture-copy h2,.cta-section h2{
    font:600 clamp(52px,7vw,75px)/1.1 Manrope;
    letter-spacing:-.07em;
    margin:25px 0;
    color: #000;
}
.architecture-copy p{
    max-width:390px;
    line-height:1.7;
    color:#000;
    margin-bottom:35px
}
 .location{
    background:var(--paper)
}
.location .muted-copy {
    max-width: none;
}
.connect-list{
    border-top:1px solid var(--line)
}
.connect{
    display:flex;
    justify-content:space-between;
    padding:22px 0;
    border-bottom:1px solid var(--line);
    font-size:13px
}
.connect b{
    font:600 18px Manrope
}
ul.connectivity-features {
    list-style-type: none;
    text-align: left;
    padding: 0;
    margin: 0;
}

ul.connectivity-features li {
    padding: 30px 0;
}
ul.connectivity-features li + li {
    border-top: 1px solid #00799f;
}
ul.connectivity-features li h4 {
    font-size: 21px;
}
ul.connectivity-features li p {
    margin: 0;
}
.map-box{
    height:470px;
    background:#ddd8cd;
    position:relative;
    overflow:hidden
}
.map-grid{
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(17,17,15,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,15,.08) 1px,transparent 1px);
    background-size:60px 60px;
    transform:rotate(-8deg) scale(1.2)
}
.map-pin{
    position:absolute;
    left:52%;
    top:45%;
    transform:translate(-50%,-50%);
    text-align:center
}
.map-pin span{
    display:block;
    width:28px;
    height:28px;
    background:var(--ink);
    border:7px solid var(--accent);
    border-radius:50%;
    margin:auto;
    box-shadow:0 0 0 20px rgba(183,155,109,.15)
}
.map-pin b{
    display:block;
    margin-top:18px;
    font:700 11px/1.3 Manrope;
    letter-spacing:.13em
}
.map-label{
    position:absolute;
    font-size:8px;
    letter-spacing:.15em;
    color:#777
}
.l1{
    left:15%;
    top:28%
}
.l2{
    right:17%;
    top:22%
}
.l3{
    left:25%;
    bottom:22%
}
 .cta-section{
    padding:130px 0 110px;
    background:var(--ink);
    color:#fff;
    position:relative;
    overflow:hidden
}
.cta-bg{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 80% 20%,rgba(183,155,109,.18),transparent 35%)
}
.cta-section p{
    color:rgba(255,255,255,.55);
    line-height:1.7
}
ul.connect-card {
    list-style-type: none;
    background-color: #fff;
    border: 1px solid #31758a4d;
    margin: 20px 0 0;
    padding: 30px;
    text-align: center;
}
ul.connect-card li {
    width: 16.66%;
    display: inline-block;
    float: left;
    border-right: 1px solid #00799f;
}
ul.connect-card li:last-child {
    border-right: 0;
}
ul.connect-card li span {
    display: block;
    height: 40px;
    width: 40px;   
    margin: 0 auto 20px;
}
ul.connect-card li label {
    font-size: 20px;
    font-weight: 600;
    min-height: 65px;
}
.lead-form input,.lead-form select{
    width:100%;
    height:58px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.04);
    color:#fff;
    padding:0 18px;
    outline:0;
    border-radius:0;
    font:13px "DM Sans"
}
.lead-form select option{
    color:#111
}
.lead-form input:focus,.lead-form select:focus{
    border-color:var(--accent)
}
.lead-form button{
    height:58px;
    width:100%;
    border:0;
    background:var(--accent);
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:10px;
    font-weight:700
}
.lead-form button span{
    float:right;
    font-size:16px
}
.about h2,.cta-section h2{
    font:600 clamp(52px,7vw,75px)/1.1 Manrope;
    letter-spacing:-.07em;
    margin:25px 0;
    color: #000;
}
.about {
    background-image: url(../images/about-bg.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: #fff;
}
.about p{
    max-width:390px;
    line-height:1.7;
    color:#000;
    margin-bottom:35px
}
.about .eg-logo {
    width: 350px;
}
.form-note{
    margin:18px 0 0;
    color:var(--accent)!important
}
 footer{
    background:#0b0b0a;
    color:#fff
}
.footer-copy{
    color:#666;
    max-width:340px;
    line-height:1.7
}
.footer-brand{
}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    display:flex;
    justify-content:space-between;
    color:#555;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.1em
}
.container> .navbar-brand{
    color:#fff
}
.col-lg-2 small,.col-lg-3 small{
    display:block;
    color:var(--accent);
    font-size:16px;
    letter-spacing:.18em;
    margin-bottom:17px
}
.col-lg-2 a{
    display:block;
    color:#888;
    text-decoration:none;
    font-size:14px;
    margin:10px 0
}
.col-lg-2 a:hover{
    color:#fff
}
.col-lg-3 p{
    font-size:14px;
    line-height:1.8;
    color:#888
}
 .floating-enquire{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:900
}
.floating-enquire a{
    display:flex;
    gap:20px;
    align-items:center;
    background:var(--accent);
    color:#fff;
    text-decoration:none;
    padding:15px 18px;
    font-size:16px;
    font-weight:700;
    letter-spacing:.14em;
    box-shadow:0 10px 30px rgba(0,0,0,.2)
}
.floating-enquire span{
    font-size:15px
}
 .reveal{
    opacity:0;
    transform:translateY(35px);
    transition:opacity .8s ease,transform .8s ease
}
.reveal.visible{
    opacity:1;
    transform:none
}
 @media(max-width:991px){
    .navbar{
        background:rgb(255 255 255 / 60%);
        padding: 10px 0;
    }
    .navbar.scrolled {
        padding: 5px 0;
    }
    .navbar-collapse{
        padding:20px 0
    }
    .nav-cta{
        display:inline-block;
        margin-top:12px
    }
    .hero-bottom{
        margin:0 20px;
        gap:25px
    }
    .hero-bottom div:nth-child(2){
        display:none
    }
    .scroll-note{
        right:20px;
    }
    .section-pad{
        padding:40px 0
    }
    .space-grid{
        grid-template-columns:1fr
    }
    .space-card.large{
        grid-row:auto
    }
    .space-card.large .space-image{
        height:400px
    }
    .architecture{
        min-height:650px
    }
    .map-box{
        margin-top:65px
    }
}
 @media(max-width:575px){
    .hero h1 {
        font-size: 40px;
        line-height: 1;
    }
    .hero-copy{
        font-size:14px
    }
    .hero-actions{
        gap:18px;
        display: block;
        text-align: center;
    }
    .hero-bottom{
        display:none
    }
    .section-title{
        font-size:40px
    }
    .lead-copy{
        font-size:21px
    }
    .stat{
        min-height:120px;
        padding:15px 8px;
        gap:8px
    }
    .stat strong{
        font-size:43px
    }
    .stat span{
        font-size:11px
    }
    .space-card.large .space-image,.space-image{
        height:300px
    }
    .architecture-copy h2,.cta-section h2{
        font-size:43px
    }
    .map-box{
        height:330px
    }
    .footer-bottom{
        gap:15px;
        flex-direction:column
    }
    .cursor-glow{
        display:none
    }
    .about .eg-logo {
        width: 200px;
    }
    .hero-content {
        padding: 120px 0 0 0;
        width: 100%;
    }
    .hero {
        min-height: auto;
    }
    .loader-mark img {
        width: 300px;
    }
    .card-list {
        width: 100%;
    }
    .hero-card {
        padding: 10px;
        height: 172px;
        margin: 7.5px 0;
    }
    .intro-form-background-image {
        padding: 10px;
    }
    .stats-section {
        padding: 30px 0;
    }
    .stat:nth-child(3) {
        border-left: 0;
    }
    .stat:nth-child(3), .stat:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, .13);
    }
    .spaces .section-title {
        font-size: 43px;
    }
    .spaces ul {
        padding: 0;
        margin: 0;
    }
    .spaces ul li {
        position: relative;
        padding: 20px 0 20px 0;
    }
    .spaces ul li:first-child {
        padding-top: 20px;
    }
    .spaces ul li span {
        font-size: 40px;
        top: 15px;
        margin-top: 0;
    }
    .spaces h3 {
        padding-left: 60px;
    }
    ul.connect-card {
        padding: 15px;
    }
    ul.connect-card li {
        width: 50%;
        padding: 15px 0;
        border-top: 1px solid #00799f;
    }
    ul.connect-card li:nth-child(even){
        border-right: 0;
    }
    ul.connect-card li:nth-child(1),
    ul.connect-card li:nth-child(2) {
        border-top: 0;
    }
    ul.connect-card li label {
        font-size: 16px;
        min-height: 52px;
    }
    ul.connect-card li p {
        margin: 0;
    }
    ul.connect-card li span {
        margin: 0 auto 10px;
    }
    .architecture-image img {
        width: 100%;
    }
    .about h2, .cta-section h2 {
        font-size: 40px;
    }
    .about .eg-logo {
        width: 250px;
        margin-top: 40px;
    }
    .hero-card p {
        font-size: 14px;
    }
    .intro-form-card button {
        margin: 0 !important;
    }
}