/* ==========================
   HEADER
========================== */

:root{

    --primary:#0B2E33;
    --secondary:#C9A24E;
    --secondary-light:#E7D7A5;
    --white:#ffffff;
    --transition:.35s ease;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

/* respects the OS-level "reduce motion" setting — some people
   get genuinely dizzy/nauseated from smooth-scroll animations,
   this turns it back to an instant jump for them */
@media (prefers-reduced-motion: reduce){

    html{

        scroll-behavior:auto;

    }

}

body{
    font-family:"Inter",sans-serif;
    overflow-x:hidden;
}

.container{
    width:min(1400px,92%);
    margin:auto;
}
/* ==========================
   HEADER
========================== */

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;

    padding:18px 0;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.18),
        rgba(0,0,0,0)
    );

    transition:
        background .4s ease,
        padding .4s ease,
        box-shadow .4s ease;

}

.header .container{

    display:flex;
    align-items:center;
    justify-content:space-between;

    transition:.35s ease;

}

/* ==========================
   LOGO
========================== */

.logo{

    display:flex;
    align-items:center;

}

.logo img{

    height:58px;
    width:auto;
    display:block;

    transition:
        transform .35s ease,
        filter .35s ease,
        height .35s ease;

}

.logo:hover img{

    transform:scale(1.04);

    filter:drop-shadow(
        0 10px 20px rgba(201,162,78,.22)
    );

}

/* ==========================
   HEADER ACTIONS
========================== */

.header-right{

    display:flex;
    align-items:center;
    gap:16px;

}

/* ==========================
   CALL BUTTON
========================== */

.call-btn{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    height:56px;

    padding:0 24px;

    border-radius:8px;

    text-decoration:none;

    color:#fff;

    border:1px solid rgba(255,255,255,.16);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

    transition:
        all .35s ease;

}

.call-btn svg{

    transition:.35s ease;

}

.call-btn:hover{

    transform:translateY(-3px);

    background:#ffffff;

    color:#0B2E33;

    box-shadow:
        0 18px 38px rgba(0,0,0,.12);

}

.call-btn:hover svg{

    transform:rotate(-12deg);

}

/* ==========================
   APPOINTMENT BUTTON
========================== */

.appointment-btn{

    position:relative;

    overflow:hidden;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:56px;

    padding:0 34px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        #F8E8B5 0%,
        #E4C879 20%,
        #D2AA54 50%,
        #BF913D 80%,
        #F3DB92 100%
    );

    color:#0B2E33;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    letter-spacing:1.8px;

    text-transform:uppercase;

    box-shadow:
        0 14px 34px rgba(201,162,78,.35),
        inset 0 1px 0 rgba(255,255,255,.65);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.appointment-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-150%;

    width:55%;
    height:100%;

    background:linear-gradient(
        115deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );

    transform:skewX(-25deg);

}

.appointment-btn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 22px 50px rgba(201,162,78,.48),
        inset 0 1px 0 rgba(255,255,255,.8);

}

.appointment-btn:hover::before{

    left:180%;

    transition:left .9s ease;

}

/* ==========================
   STICKY HEADER
========================== */

.header.scrolled{

    padding:12px 0;

    background:rgba(255,248,232,.96);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    border-bottom:1px solid rgba(201,162,78,.15);

    box-shadow:
        0 12px 40px rgba(0,0,0,.08);

}

.header.scrolled .container{

    padding:0 10px;

}

.header.scrolled .logo img{

    height:50px;

}

.header.scrolled .call-btn{

    color:#0B2E33;

    background:rgba(255,255,255,.65);

    border:1px solid rgba(11,46,51,.12);

}

.header.scrolled .call-btn:hover{

    background:#0B2E33;

    color:#fff;

}

.header.scrolled .appointment-btn{

    box-shadow:
        0 14px 35px rgba(201,162,78,.30);

}

/* ==========================
   TABLET
========================== */

@media(max-width:768px){

.header{

    padding:14px 0;

}

.logo img{

    height:44px;

}

.header-right{

    gap:10px;

}

.call-btn{

    width:44px;

    height:44px;

    padding:0;

}

.call-btn span{

    display:none;

}

.call-btn svg{

    width:18px;

    height:18px;

}

.appointment-btn{

    height:44px;

    padding:0 18px;

    font-size:11px;

    letter-spacing:1px;

}

.header.scrolled{

    padding:10px 0;

}

.header.scrolled .logo img{

    height:40px;

}

}

/* ==========================
   MOBILE
========================== */

@media(max-width:480px){

.container{

    width:94%;

}

.logo img{

    height:38px;

}

.header-right{

    gap:8px;

}

.call-btn{

    width:42px;

    height:42px;

}

.appointment-btn{

    height:42px;

    padding:0 16px;

    font-size:10px;

    letter-spacing:.8px;

}

.header.scrolled .logo img{

    height:36px;

}

}

/*=========================
HERO
==========================*/

.hero{

    position:relative;

    height:100vh;

    min-height:850px;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-bg{

    position:absolute;

    inset:0;

    background:url(images/Gaurs-Alaris-hero.png)
    center center/cover no-repeat;

    transform:scale(1.05);

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    90deg,
    rgba(0,0,0,.70),
    rgba(0,0,0,.25)
    );

}

.hero .container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:minmax(0,1.2fr) minmax(420px,.8fr);

    gap:80px;

    align-items:center;

}

.hero-content{

    color:#fff;

}

.hero-tag{

    display:inline-block;

    padding:10px 20px;

    border:1px solid rgba(255,255,255,.2);

    backdrop-filter:blur(10px);

    border-radius:40px;

    margin-bottom:25px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:13px;

}


.hero h1{

    font-size:clamp(3rem, 5vw, 5.2rem);
    font-family:"Cormorant Garamond";
    line-height:1.05;

    letter-spacing:-1px;

    margin-bottom:14px;

}

.hero h2{

    font-size:clamp(1.6rem,3vw,2.8rem);

    line-height:1.15;

    margin-bottom:25px;

    color:#DDBA6E;

    font-family:"Cormorant Garamond";

}

.hero p{

    max-width:650px;

    font-size:19px;

    line-height:1.8;

    color:#f5f5f5;

}

/* ==========================
   HERO HIGHLIGHTS
   (fluid clamp() sizing keeps BSP / unit / location
   in a single row from 320px up — no more vertical
   stacking or wrapping on small screens)
========================== */

.hero-highlights{

    display:flex;

    gap:clamp(12px, 3vw, 35px);

    margin:clamp(24px, 5vw, 45px) 0;

}

.highlight{

    display:flex;

    flex-direction:column;

    flex:1 1 0;

    min-width:0;

}

.highlight strong{

    color:#DDBA6E;

    font-size:clamp(15px, 4.2vw, 28px);

    white-space:nowrap;

}

.highlight span{

    color:white;

    font-size:clamp(10px, 2.6vw, 15px);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.primary-btn{

    background:#DDBA6E;

    color:#072127;

    padding:18px 40px;

    border-radius:5px;

    text-decoration:none;

    font-weight:700;

}

.secondary-btn{

    border:1px solid white;

    color:white;

    padding:18px 40px;

    text-decoration:none;

    border-radius:5px;

}

.hero-form{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(5px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:18px;

    padding:45px;

    color:white;

}

.hero-form h3{

    font-size:34px;

    margin-bottom:15px;

    font-family:"Cormorant Garamond";

}

.hero-form p{

    margin-bottom:30px;

    color:#ddd;

}

.hero-form form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.hero-form input,

.hero-form select{

    height:58px;

    border:none;

    border-radius:6px;

    padding:0 18px;

    font-size:16px;

}

.hero-form button{

    height:60px;

    background:#DDBA6E;

    color:#072127;

    border:none;

    border-radius:6px;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

}

/* ==========================
   HERO FORM — status message + honeypot
   This targets .hero-form specifically since that form lives
   outside .popup-content. Add this alongside your existing
   .hero-form styles (already in your stylesheet).
========================== */

.hero-form .popup-honeypot{

    position:absolute;

    left:-9999px;

    width:1px;

    height:1px;

    overflow:hidden;

}

.hero-form-status{

    margin:0;

    min-height:16px;

    font-size:13px;

    text-align:center;

}

/* light-on-dark colors since .hero-form sits on the dark hero background */

.hero-form-status.success{

    color:#8fe3a8;

}

.hero-form-status.error{

    color:#ff9b8a;

}

.hero-form button[disabled]{

    opacity:.6;

    cursor:not-allowed;

}

/*=========================================
RESPONSIVE
=========================================*/

/* Laptop */
@media (max-width:1200px){

.hero .container{

    grid-template-columns:1fr .85fr;

    gap:50px;

}

.hero h1{

    font-size:60px;

}

.hero h2{

    font-size:36px;

}

.hero-form{

    padding:35px;

}

}


/* Tablet */
@media (max-width:991px){

.hero{

    height:auto;

    min-height:auto;

    padding:140px 0 80px;

}

.hero .container{

    grid-template-columns:1fr;

    gap:50px;

}

.hero-content{

    text-align:center;

}

.hero p{

    margin:auto;

}

.hero-highlights{

    justify-content:center;

}

.highlight{

    text-align:center;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-form{

    width:100%;

    max-width:600px;

    margin:auto;

}

}


/* Mobile */
@media (max-width:768px){

.header{

    padding:14px 0;

}

.logo img{

    height:42px;

}

.appointment-btn{

    height:42px;

    padding:0 18px;

    font-size:11px;

    letter-spacing:1px;

}

.hero{

    padding:120px 0 60px;

}

.hero-bg{

    transform:none;

    background-position:center;

}

.hero-overlay{

    background:linear-gradient(
        rgba(0,0,0,.72),
        rgba(0,0,0,.55)
    );

}

.hero-tag{

    font-size:11px;

    padding:8px 16px;

    letter-spacing:1px;

}

.hero h1{

    font-size:42px;

    line-height:1.1;

}

.hero h2{

    font-size:28px;

    margin-bottom:20px;

}

.hero p{

    font-size:16px;

    line-height:1.7;

}

.hero-highlights{

    gap:14px;

}

.hero-buttons{

    flex-direction:column;

    gap:15px;

}

.primary-btn,

.secondary-btn{

    width:100%;

    text-align:center;

    padding:16px 20px;

}

.hero-form{

    padding:28px;

    border-radius:15px;

}

.hero-form h3{

    font-size:28px;

}

.hero-form p{

    font-size:15px;

    margin-bottom:20px;

}

.hero-form input,

.hero-form select,

.hero-form button{

    height:54px;

    font-size:15px;

}

}


/* Small Mobile */
@media (max-width:480px){

.container{

    width:92%;

}

.logo img{

    height:36px;

}

.appointment-btn{

    padding:0 14px;

    font-size:10px;

}

.hero{

    padding:105px 0 50px;

}

.hero-tag{

    display:block;

    width:fit-content;

    margin:0 auto 20px;

}

.hero h1{

    font-size:34px;

}

.hero h2{

    font-size:22px;

}

.hero p{

    font-size:15px;

}

.hero-form{

    padding:22px;

}

.hero-form h3{

    font-size:24px;

}

}

/*====================================
ABOUT PROJECT
=====================================*/

.about-project{

    padding:120px 0;

    background:#fff;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:#C9A24E;

    letter-spacing:3px;

    font-size:13px;

    font-weight:600;

}

.section-title h2{

    margin-top:18px;

    font-size:54px;

    font-family:"Cormorant Garamond";

    color:#0B2E33;

    line-height:1.2;

}

.section-title strong{

    color:#C9A24E;

    font-weight:700;

}

.about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-image{

    overflow:hidden;

    border-radius:18px;

}

.about-image img{

    width:100%;

    display:block;

    border-radius:18px;

    transition:.6s;

}

.about-image:hover img{

    transform:scale(1.05);

}

.about-content p{

    margin-bottom:28px;

    color:#5f666d;

    font-size:17px;

    line-height:1.9;

}

.about-content strong{

    color:#0B2E33;

}

.project-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-top:40px;

}

.feature-card{

    background:#faf7f2;

    border-left:4px solid #C9A24E;

    padding:28px;

    border-radius:12px;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.feature-card h3{

    color:#0B2E33;

    font-size:38px;

    font-family:"Cormorant Garamond";

}

.feature-card span{

    color:#777;

    font-size:15px;

}

/*====================================
ABOUT PROJECT RESPONSIVE
=====================================*/

/* Large Tablet */
@media (max-width: 1199px){

    .about-project{

        padding:100px 0;

    }

    .about-wrapper{

        gap:50px;

    }

    .section-title h2{

        font-size:46px;

    }

}

/* Tablet */
@media (max-width: 991px){

    .about-project{

        padding:90px 0;

    }

    .about-wrapper{

        grid-template-columns:1fr;

        gap:45px;

    }

    .about-image{

        order:1;

        max-width:700px;

        margin:0 auto;

    }

    .about-content{

        order:2;

    }

    .section-title{

        margin-bottom:45px;

    }

    .section-title h2{

        font-size:40px;

    }

    .about-content p{

        text-align:center;

        font-size:16px;

    }

    .project-features{

        max-width:650px;

        margin:35px auto 0;

    }

}

/* Mobile */
@media (max-width:768px){

    .about-project{

        padding:70px 0;

    }

    .section-title{

        margin-bottom:35px;

    }

    .section-title span{

        font-size:12px;

        letter-spacing:2px;

    }

    .section-title h2{

        font-size:34px;

        line-height:1.25;

    }

    .about-image{

        border-radius:14px;

    }

    .about-image img{

        border-radius:14px;

    }

    .about-content p{

        font-size:15px;

        line-height:1.8;

        margin-bottom:22px;

    }

    .project-features{

        grid-template-columns:repeat(2,1fr);

        gap:16px;

        margin-top:30px;

    }

    .feature-card{

        padding:22px 18px;

        text-align:center;

        border-left:none;

        border-top:4px solid #C9A24E;

    }

    .feature-card h3{

        font-size:30px;

    }

    .feature-card span{

        font-size:13px;

    }

}

/* Small Mobile */
@media (max-width:480px){

    .about-project{

        padding:60px 0;

    }

    .section-title h2{

        font-size:28px;

    }

    .about-content p{

        font-size:15px;

        line-height:1.75;

    }

    .project-features{

        grid-template-columns:1fr;

        gap:14px;

    }

    .feature-card{

        padding:20px;

    }

    .feature-card h3{

        font-size:28px;

    }

}
.about-image{

    position:relative;

    margin-top:-30px;

    box-shadow:0 30px 60px rgba(0,0,0,.15);

}

@media (max-width:991px){

    .about-image{

        margin-top:0;

    }

}

/*==================================
AMENITIES
===================================*/

.amenities{

    padding:120px 0;
    background:#f8f7f4;
    overflow:hidden;

}

/*==========================
SECTION TITLE
==========================*/

.amenities .section-title{

    text-align:center;
    max-width:760px;
    margin:0 auto;

}

.amenities .section-title span{

    display:inline-block;

    color:#C9A24E;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.amenities .section-title h2{

    font-size:56px;

    font-family:"Cormorant Garamond";

    color:#0B2E33;

    line-height:1.1;

    margin-bottom:22px;

}

.amenities .section-title h2 strong{

    color:#C9A24E;
    font-weight:600;

}

.amenities .section-title p{

    color:#666;
    line-height:1.9;
    font-size:18px;

}

/*==========================
FEATURED IMAGE
==========================*/

.amenity-banner{

    width:55%;

    margin:70px auto 90px;

    position:relative;

    transition:.35s ease;

}

.amenity-banner img{

    width:100%;

    display:block;

    border-radius:24px;

    box-shadow:

        0 30px 70px rgba(0,0,0,.10);

    transition:.35s ease;

}

.amenity-banner:hover{

    transform:translateY(-8px);

}

.amenity-banner:hover img{

    box-shadow:

        0 40px 90px rgba(0,0,0,.16);

}

/*==========================
GRID
==========================*/

.amenities-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

/*==========================
CARD
==========================*/

.amenity-card{

    background:#fff;

    padding:38px;

    border-radius:22px;

    border:1px solid #ece7de;

    position:relative;

    transition:.35s ease;

    overflow:hidden;

}

.amenity-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:0;

    background:#C9A24E;

    transition:.35s;

}

.amenity-card:hover{

    transform:translateY(-8px);

    border-color:#C9A24E;

    box-shadow:

        0 22px 60px rgba(0,0,0,.08);

}

.amenity-card:hover::before{

    height:100%;

}

/*==========================
NUMBER
==========================*/

.number{

    font-size:60px;

    font-family:"Cormorant Garamond";

    color:#C9A24E;

    opacity:.14;

    line-height:1;

    margin-bottom:18px;

}

/*==========================
TEXT
==========================*/

.amenity-card h3{

    font-size:24px;

    font-family:"Cormorant Garamond";

    color:#0B2E33;

    margin-bottom:15px;

    line-height:1.3;

}

.amenity-card p{

    color:#666;

    line-height:1.8;

    font-size:16px;

}

/*==========================
BOTTOM CTA
==========================*/

.amenity-footer{

    text-align:center;

    margin-top:80px;

}

.amenity-footer h3{

    font-size:42px;

    font-family:"Cormorant Garamond";

    color:#0B2E33;

    margin-bottom:25px;

}

.amenity-footer a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:58px;

    padding:0 38px;

    border-radius:6px;

    background:linear-gradient(
        135deg,
        #DDBA6E,
        #C89B43
    );

    color:#0B2E33;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.amenity-footer a:hover{

    transform:translateY(-4px);

    box-shadow:

        0 15px 40px rgba(201,162,78,.30);

}

/*==========================
TABLET
==========================*/

@media(max-width:991px){

    .amenities{

        padding:90px 0;

    }

    .amenities .section-title h2{

        font-size:46px;

    }

    .amenity-banner{

        width:80%;

        margin:50px auto 70px;

    }

    .amenities-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/*==========================
MOBILE
==========================*/

@media(max-width:768px){

    .amenities{

        padding:70px 0;

    }

    .amenities .section-title{

        max-width:100%;

    }

    .amenities .section-title h2{

        font-size:36px;

    }

    .amenities .section-title p{

        font-size:16px;

    }

    .amenity-banner{

        width:100%;

        margin:40px auto 50px;

    }

    .amenities-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .amenity-card{

        padding:28px;

    }

    .number{

        font-size:44px;

    }

    .amenity-card h3{

        font-size:22px;

    }

    .amenity-footer{

        margin-top:55px;

    }

    .amenity-footer h3{

        font-size:30px;

    }

    .amenity-footer a{

        width:100%;

    }

}

/*==================================
MASTER PLAN
===================================*/

.masterplan{

    padding:110px 0;

    background:#fff;

}

.masterplan-image{

    position:relative;

    width:75%;

    margin:60px auto 0;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.10);

}

.masterplan-image img{

    width:100%;

    display:block;

    border-radius:18px;

    transition:transform .5s ease;

}

.masterplan-image:hover img{

    transform:scale(1.04);

}

.masterplan-content{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

}

.masterplan-content a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    background:rgba(255,255,255,.92);

    color:#0B2E33;

    font-weight:600;

    backdrop-filter:blur(10px);

    transition:.3s ease;

}

.masterplan-content a:hover{

    background:#C9A24E;

    color:#0B2E33;

}

.masterplan-content a:focus-visible{

    outline:2px solid #C9A24E;

    outline-offset:3px;

}

/* Large Tablet */
@media (max-width:1199px){

    .masterplan{

        padding:90px 0;

    }

    .masterplan-image{

        width:85%;

    }

}

/* Tablet */
@media (max-width:991px){

    .masterplan{

        padding:80px 0;

    }

    .masterplan-image{

        width:100%;

        margin-top:45px;

        border-radius:14px;

    }

    .masterplan-image img{

        border-radius:14px;

    }

    .masterplan-content a{

        padding:14px 28px;

        font-size:15px;

    }

}

/* Mobile */
@media (max-width:768px){

    .masterplan{

        padding:65px 0;

    }

    .masterplan-image{

        margin-top:35px;

        border-radius:12px;

    }

    .masterplan-image img{

        border-radius:12px;

    }

    .masterplan-content a{

        padding:13px 24px;

        font-size:14px;

    }

}

/* Small Mobile */
@media (max-width:480px){

    .masterplan{

        padding:55px 0;

    }

    .masterplan-content a{

        padding:12px 20px;

        font-size:13px;

        text-align:center;

    }

}

/*==================================
UNIT PLANS
===================================*/

.unit-plans{

    padding:120px 0;

    background:#f8f7f4;

}

.unit-grid{

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

.unit-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

    border:1px solid #ece7de;

}

.unit-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.unit-image{

    overflow:hidden;

    aspect-ratio:16 / 9;

}

.unit-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transform:scale(1.02);

    transition:transform .5s ease;

}

.unit-card:hover .unit-image img{

    transform:scale(1.08);

}

.unit-content{

    padding:35px;

    text-align:center;

}

.unit-content h3{

    font-size:clamp(26px, 3vw, 34px);

    color:#0B2E33;

    font-family:"Cormorant Garamond";

    margin-bottom:10px;

}

.size{

    display:block;

    color:#C9A24E;

    font-weight:700;

    margin-bottom:20px;

}

.unit-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:30px;

}

.unit-content a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:54px;

    padding:0 32px;

    background:linear-gradient(
        135deg,
        #DDBA6E,
        #C89B43
    );

    color:#0B2E33;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.unit-content a:hover{

    transform:translateY(-3px);

}

.unit-content a:focus-visible{

    outline:2px solid #0B2E33;

    outline-offset:3px;

}

/* Tablet */
@media (max-width:991px){

    .unit-plans{

        padding:90px 0;

    }

    .unit-grid{

        gap:28px;

    }

    .unit-content{

        padding:30px;

    }

}

/* Mobile */
@media(max-width:768px){

.unit-plans{

    padding:70px 0;

}

.unit-grid{

    grid-template-columns:1fr;

    gap:24px;

    margin-top:40px;

}

.unit-content{

    padding:28px;

}

.unit-content a{

    width:100%;

}

}

/* Small Mobile */
@media(max-width:480px){

.unit-plans{

    padding:55px 0;

}

.unit-grid{

    gap:18px;

    margin-top:30px;

}

.unit-card{

    border-radius:16px;

}

.unit-content{

    padding:22px;

}

.unit-content p{

    font-size:15px;

    margin-bottom:22px;

}

.unit-content a{

    height:50px;

    font-size:15px;

}

}

/*==================================
WALKTHROUGH
===================================*/

.walkthrough{

    padding:120px 0;

    background:#f8f7f4;

}

/* ==========================
   BOX — a real video thumbnail:
   fixed video-like aspect ratio, image fills it,
   gradient only at the bottom so the image stays visible
========================== */

.walkthrough-box{

    width:72%;

    margin:60px auto 0;

    position:relative;

    aspect-ratio:16 / 9;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

    transition:transform .35s ease, box-shadow .35s ease;

    box-shadow:
        0 30px 70px rgba(0,0,0,.12);

}

.walkthrough-box img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .6s ease;

}

.walkthrough-box:hover img{

    transform:scale(1.04);

}

/* bottom-only gradient — keeps the thumbnail readable as an image,
   not a fully tinted overlay */
.walkthrough-box::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,0) 45%
    );

}

/* ==========================
   BADGE — small "video" tag, top-left,
   like a duration/label chip on a real video card
========================== */

.walkthrough-badge{

    position:absolute;

    top:20px;

    left:20px;

    z-index:2;

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 16px;

    border-radius:50px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(8px);

    color:#0B2E33;

    font-size:12px;

    font-weight:600;

    letter-spacing:.4px;

}

.walkthrough-badge svg{

    flex-shrink:0;

}

/* ==========================
   PLAY BUTTON — the only thing centered in the box now
========================== */

.walkthrough-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

}

.play-wrapper{

    position:relative;

    width:90px;

    height:90px;

}

.play-ring{

    position:absolute;

    inset:0;

    border:2px solid rgba(255,255,255,.65);

    border-radius:50%;

    animation:pulse 2.4s infinite;

}

.play-button{

    position:absolute;

    inset:14px;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(18px);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:transform .35s ease;

}

.walkthrough-box:hover .play-button,
.walkthrough-box:focus-visible .play-button{

    transform:scale(1.1);

}

.walkthrough-box:hover,
.walkthrough-box:focus-visible{

    transform:translateY(-6px);

    box-shadow:
        0 40px 90px rgba(0,0,0,.18);

}

.walkthrough-box:focus-visible{

    outline:2px solid #C9A24E;

    outline-offset:4px;

}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    100%{

        transform:scale(1.35);

        opacity:0;

    }

}

@media (prefers-reduced-motion: reduce){

    .play-ring{

        animation:none;

    }

}

/* ==========================
   CAPTION — title + description live outside the box now,
   reads like a video title under a thumbnail
========================== */

.walkthrough-caption{

    max-width:640px;

    margin:28px auto 0;

    text-align:center;

}

.walkthrough-caption h3{

    font-size:28px;

    font-family:"Cormorant Garamond";

    color:#0B2E33;

    margin-bottom:8px;

}

.walkthrough-caption p{

    color:#666;

    line-height:1.7;

    font-size:16px;

}

/* Large Tablet */
@media (max-width:1199px){

    .walkthrough{

        padding:90px 0;

    }

    .walkthrough-box{

        width:85%;

    }

}

/* Tablet */
@media (max-width:991px){

    .walkthrough{

        padding:80px 0;

    }

    .walkthrough-box{

        width:100%;

        margin-top:45px;

        border-radius:18px;

    }

    .play-wrapper{

        width:76px;

        height:76px;

    }

}

/* Mobile */
@media (max-width:768px){

    .walkthrough{

        padding:65px 0;

    }

    .walkthrough-box{

        margin-top:35px;

        border-radius:14px;

    }

    .walkthrough-badge{

        top:14px;

        left:14px;

        padding:6px 12px;

        font-size:11px;

    }

    .play-wrapper{

        width:64px;

        height:64px;

    }

    .play-button svg{

        width:18px;

        height:18px;

    }

    .walkthrough-caption{

        margin-top:20px;

    }

    .walkthrough-caption h3{

        font-size:22px;

    }

    .walkthrough-caption p{

        font-size:14px;

    }

}

/* Small Mobile */
@media (max-width:480px){

    .walkthrough{

        padding:55px 0;

    }

    .walkthrough-box{

        border-radius:12px;

    }

    .walkthrough-badge{

        font-size:10px;

        padding:5px 10px;

    }

    .play-wrapper{

        width:54px;

        height:54px;

    }

    .walkthrough-caption h3{

        font-size:19px;

    }

    .walkthrough-caption p{

        font-size:13px;

    }

}

/*==================================
FOOTER
===================================*/

.footer{

    position:relative;

    padding:100px 0 30px;

    color:#fff;

    background:
    radial-gradient(circle at top right,
    rgba(201,162,78,.08),
    transparent 40%),

    linear-gradient(
    180deg,
    #163b3b,
    #0b2e33 45%,
    #06181d
    );

    overflow:hidden;

}

/* Background Texture */

.footer-pattern{

    position:absolute;

    inset:0;

    opacity:.04;

    background-image:

    radial-gradient(#ffffff 1px, transparent 1px);

    background-size:28px 28px;

}

/*========================*/

.footer-top{

    position:relative;

    text-align:center;

    margin-bottom:80px;

}

.footer-top h2{

    font-size:72px;

    font-family:"Cormorant Garamond";

    color:#DDBA6E;

    margin-bottom:15px;

}

.footer-top p{

    max-width:650px;

    margin:auto;

    color:rgba(255,255,255,.8);

    line-height:1.9;

    font-size:18px;

}

.footer-top a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:35px;

    height:58px;

    padding:0 42px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #DDBA6E,
        #C89B43
    );

    color:#0B2E33;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.footer-top a:hover{

    transform:translateY(-5px);

}

.footer-top a:focus-visible{

    outline:2px solid #DDBA6E;

    outline-offset:4px;

}

/*========================*/

.footer-grid{

    position:relative;

    display:grid;

    grid-template-columns:1.6fr 1fr 1fr 1.1fr;

    gap:60px;

    padding:60px 0;

    border-top:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.footer-column h3{

    color:#DDBA6E;

    margin-bottom:24px;

    font-size:22px;

    font-family:"Cormorant Garamond";

}

.footer-column p{

    color:rgba(255,255,255,.72);

    line-height:1.85;

    font-size:15px;

    margin-bottom:16px;

}

.footer-column ul{

    list-style:none;

}

.footer-column li{

    margin-bottom:14px;

    color:rgba(255,255,255,.72);

    line-height:1.6;

    font-size:15px;

}

.footer-column a{

    color:rgba(255,255,255,.72);

    text-decoration:none;

    transition:color .3s ease, padding-left .3s ease;

}

.footer-column a:hover{

    color:#DDBA6E;

    padding-left:6px;

}

.footer-column a:focus-visible{

    outline:2px solid #DDBA6E;

    outline-offset:3px;

}

/* Brand column */

.footer-brand p:last-of-type{

    margin-bottom:24px;

}

.footer-social{

    display:flex;

    gap:12px;

}

.footer-social a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.18);

    color:rgba(255,255,255,.85);

    transition:.3s ease;

}

.footer-social a:hover{

    background:#DDBA6E;

    border-color:#DDBA6E;

    color:#0B2E33;

}

/* Contact column */

.footer-column address{

    font-style:normal;

}

.footer-whatsapp{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:8px;

    height:46px;

    padding:0 22px;

    border-radius:8px;

    border:1px solid rgba(221,186,110,.4);

    color:#DDBA6E !important;

    font-size:14px;

    font-weight:600;

    transition:.3s ease;

}

.footer-whatsapp:hover{

    background:rgba(221,186,110,.12);

    padding-left:22px !important;

}

/*========================*/

.footer-legal{

    position:relative;

    padding:28px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.footer-legal p{

    color:rgba(255,255,255,.55);

    font-size:12.5px;

    line-height:1.8;

    margin-bottom:10px;

}

.footer-legal p:last-child{

    margin-bottom:0;

}

.footer-legal strong{

    color:rgba(255,255,255,.8);

}

.footer-legal a{

    color:#DDBA6E;

    text-decoration:underline;

}

/*========================*/

.footer-bottom{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:24px;

    font-size:14px;

    color:rgba(255,255,255,.65);

}

.footer-bottom strong{

    color:#DDBA6E;

}

/* Tablet */
@media(max-width:1199px){

.footer-grid{

    grid-template-columns:1fr 1fr;

    gap:45px 40px;

}

.footer-brand{

    grid-column:1 / -1;

}

}

/* Mobile */
@media(max-width:768px){

.footer{

    padding:70px 0 25px;

}

.footer-top{

    margin-bottom:50px;

}

.footer-top h2{

    font-size:44px;

}

.footer-top p{

    font-size:16px;

}

.footer-top a{

    width:100%;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:40px;

    padding:45px 0;

}

.footer-brand{

    grid-column:auto;

}

.footer-column{

    text-align:center;

}

.footer-social{

    justify-content:center;

}

.footer-column a:hover{

    padding-left:0;

}

.footer-legal{

    text-align:center;

}

.footer-bottom{

    flex-direction:column;

    gap:10px;

    text-align:center;

}

}

/*==========================
POPUP
==========================*/

.popup{

    position:fixed;

    inset:0;

    background:rgba(6,24,29,.72);

    backdrop-filter:blur(4px);

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    z-index:9999;

}

.popup.active{

    display:flex;

}

.popup-content{

    width:420px;

    max-width:100%;

    max-height:100vh;

    overflow-y:auto;

    background:#fff;

    padding:42px;

    border-radius:16px;

    position:relative;

    box-shadow:0 40px 90px rgba(0,0,0,.35);

}

.close-popup{

    position:absolute;

    right:10px;

    top:10px;

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#0B2E33;

    font-size:18px;

    line-height:1;

    cursor:pointer;

    box-shadow:0 8px 24px rgba(0,0,0,.18);

    transition:background .3s ease, color .3s ease, transform .3s ease;

}

.close-popup:hover{

    background:#0B2E33;

    color:#DDBA6E;

    transform:rotate(90deg);

}

.close-popup:focus-visible{

    outline:2px solid #C9A24E;

    outline-offset:2px;

}

/* ==========================
   BRAND HEADER
   Two logos side by side — Gaurs Group (parent) and
   Gaur Alaris (project) — separated by a thin hairline,
   centered above the form like a letterhead
========================== */

.popup-brand{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin-bottom:10px;

}

.popup-logo{

    height:30px;

    width:auto;

    display:block;

    object-fit:contain;

}

.popup-logo-group{

    height:26px;

}

.popup-logo-divider{

    width:1px;

    height:24px;

    background:#e3ddd0;

}

/* ==========================
   Location
========================== */

.popup-trust{

    text-align:center;

    font-size:8px;

    font-weight:400;

    letter-spacing:.2px;

    color:#8a8f88;

    margin-bottom:18px;

    padding-bottom:14px;

    border-bottom:1px solid #ece7de;

}

/* ==========================
   TITLE / SUBTITLE
========================== */

.popup-content h3{

    font-family:"Cormorant Garamond";

    font-size:23px;

    color:#0B2E33;

    margin-bottom:6px;

    line-height:1.2;

    text-align:center;

}

.popup-content > p{

    color:#666;

    margin-bottom:18px;

    font-size:12.5px;

    line-height:1.55;

    text-align:center;

}

/* ==========================
   FORM FIELDS
========================== */

#enquiryForm{

    display:flex;

    flex-direction:column;

    gap:11px;

}

.popup-content input[type="text"],
.popup-content input[type="tel"],
.popup-content input[type="email"],
.popup-content select{

    width:100%;

    height:40px;

    padding:0 14px;

    border:1px solid #e3ddd0;

    border-radius:7px;

    font-size:13px;

    font-family:"Inter",sans-serif;

    color:#0B2E33;

    background:#fff;

    transition:border-color .25s ease;

}

.popup-honeypot{

    position:absolute;

    left:-9999px;

    width:1px;

    height:1px;

    overflow:hidden;

}

.popup-content textarea{

    width:100%;

    padding:11px 14px;

    border:1px solid #e3ddd0;

    border-radius:7px;

    font-size:13px;

    font-family:"Inter",sans-serif;

    color:#0B2E33;

    background:#fff;

    resize:vertical;

    min-height:64px;

    transition:border-color .25s ease;

}

.popup-content textarea:focus{

    outline:none;

    border-color:#C9A24E;

    box-shadow:0 0 0 3px rgba(201,162,78,.15);

}

/* ==========================
   PHONE — country code prefix, like the reference
========================== */

.popup-phone-group{

    display:flex;

    align-items:stretch;

    border:1px solid #e3ddd0;

    border-radius:7px;

    overflow:hidden;

    transition:border-color .25s ease, box-shadow .25s ease;

}

.popup-phone-group:focus-within{

    border-color:#C9A24E;

    box-shadow:0 0 0 3px rgba(201,162,78,.15);

}

.popup-country-code{

    display:flex;

    align-items:center;

    gap:5px;

    padding:0 12px;

    background:#faf7f2;

    border-right:1px solid #e3ddd0;

    font-size:13px;

    font-weight:600;

    color:#0B2E33;

    white-space:nowrap;

    flex-shrink:0;

}

.popup-phone-group input[type="tel"]{

    border:none;

    border-radius:0;

}

.popup-phone-group input[type="tel"]:focus{

    box-shadow:none;

}

.popup-content select{

    appearance:none;

    -webkit-appearance:none;

    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%230B2E33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");

    background-repeat:no-repeat;

    background-position:right 14px center;

    background-size:14px;

    padding-right:36px;

}

.popup-content input:focus,
.popup-content select:focus{

    outline:none;

    border-color:#C9A24E;

    box-shadow:0 0 0 3px rgba(201,162,78,.15);

}

/* ==========================
   DND CONSENT CHECKBOX
========================== */

.popup-consent{

    display:flex;

    align-items:flex-start;

    gap:8px;

    padding:11px;

    background:#faf7f2;

    border-radius:7px;

    cursor:pointer;

}

.popup-consent input[type="checkbox"]{

    flex-shrink:0;

    width:15px;

    height:15px;

    margin-top:1px;

    accent-color:#C9A24E;

    cursor:pointer;

}

.popup-consent span{

    font-size:10px;

    line-height:1.5;

    color:#6b6f68;

}

/* ==========================
   SUBMIT BUTTON
========================== */

.popup-content button[type="submit"]{

    width:100%;

    height:45px;

    background:linear-gradient(
        135deg,
        #DDBA6E,
        #C89B43
    );

    border:none;

    border-radius:7px;

    color:#0B2E33;

    font-weight:700;

    font-size:14px;

    cursor:pointer;

    transition:transform .3s ease, box-shadow .3s ease;

}

.popup-content button[type="submit"]:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 35px rgba(201,162,78,.35);

}

.popup-content button[type="submit"]:focus-visible{

    outline:2px solid #0B2E33;

    outline-offset:3px;

}

/* ==========================
   PRIVACY MICROCOPY
========================== */

.popup-privacy{

    margin:0;

    font-size:10px !important;

    line-height:1.55;

    color:#999 !important;

    text-align:center;

}

.popup-privacy a{

    color:#0B2E33;

    text-decoration:underline;

}

/* ==========================
   MOBILE
========================== */

@media(max-width:480px){

.popup{

    padding:14px;

}

.popup-content{

    padding:24px 18px;

    border-radius:12px;

}

.popup-content h3{

    font-size:20px;

}

.popup-trust{

    gap:6px 10px;

    margin-bottom:14px;

    padding-bottom:12px;

}

.popup-trust span{

    font-size:10px;

}

}

/*==================================
MOBILE STICKY CTA
Fixed bottom bar with WhatsApp + Call, mobile only.
===================================*/

.mobile-sticky-cta{

    display:none;

}

@media(max-width:768px){

.mobile-sticky-cta{

    display:flex;

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    z-index:998; /* below .popup (9999) so the enquiry form always sits on top */

    box-shadow:0 -10px 30px rgba(0,0,0,.12);

    /* respect the home-indicator area on notched iPhones */
    padding-bottom:env(safe-area-inset-bottom, 0);

}

.mobile-sticky-cta a{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:58px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    letter-spacing:.2px;

    transition:filter .2s ease;

}

.mobile-sticky-cta a:active{

    filter:brightness(.92);

}

.mobile-sticky-cta a:focus-visible{

    outline:2px solid #DDBA6E;

    outline-offset:-3px;

}

/* WhatsApp side — kept as WhatsApp's own green so it reads
   instantly as "this opens WhatsApp" rather than a generic button */

.sticky-whatsapp{

    background:#0B5D3B; /* Dark Green */

    color:#fff;

    border-right:1px solid rgba(255,255,255,.15);
}

/* Call side — your brand's dark teal + gold, matches the rest of the site */

.sticky-call{

    background:linear-gradient(135deg,#DDBA6E 0%, #F2D08B 45%, #C89E45 100%);

    color:#000;

}

}

/* Small Mobile */
@media(max-width:480px){

.mobile-sticky-cta a{

    height:54px;

    font-size:13px;

    gap:6px;

}

}

/* Prevent site content (mainly the footer) from being hidden
   behind the fixed bar — add this to your existing footer rule
   at the same 768px breakpoint, don't duplicate the selector */

@media(max-width:768px){

.footer{

    padding-bottom:calc(70px + env(safe-area-inset-bottom, 0));

}

}