/* =========================================
   S D DECORATORS — PREMIUM PUBLIC WEBSITE
========================================= */

:root{
    --bg:#f6f7fb;
    --surface:#ffffff;
    --surface-soft:#faf9ff;

    --text:#111827;
    --muted:#687386;
    --line:#e7e9f0;

    --primary:#6d28d9;
    --primary-dark:#4c1d95;
    --secondary:#db2777;
    --gold:#f59e0b;

    --navy:#111827;

    --shadow-sm:0 8px 24px rgba(17,24,39,.06);
    --shadow-md:0 18px 45px rgba(17,24,39,.10);
    --shadow-lg:0 28px 70px rgba(17,24,39,.14);

    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:28px;

    --container:1380px;
}


/* =========================================
   RESET
========================================= */

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


html{
    scroll-behavior:smooth;
    scroll-padding-top:92px;
}


body{
    min-height:100vh;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:var(--bg);
    color:var(--text);

    line-height:1.5;

    overflow-x:hidden;
}


img{
    max-width:100%;
}


button,
input,
select,
textarea{
    font:inherit;
}


a{
    color:inherit;
}


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

.header{
    position:sticky;
    top:0;
    z-index:1000;

    width:100%;

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

    border-bottom:
        1px solid rgba(231,233,240,.9);

    backdrop-filter:
        blur(16px);

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

    box-shadow:
        0 4px 22px
        rgba(17,24,39,.05);
}


.header-inner{
    width:min(
        var(--container),
        calc(100% - 48px)
    );

    min-height:78px;

    margin:auto;

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

    gap:30px;
}


.brand{
    display:flex;
    align-items:center;

    gap:12px;

    text-decoration:none;
}


.brand-mark{
    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:white;

    font-size:14px;
    font-weight:900;
    letter-spacing:.5px;

    box-shadow:
        0 10px 24px
        rgba(109,40,217,.24);
}


.brand-text{
    display:flex;
    flex-direction:column;

    line-height:1.15;
}


.brand-text strong{
    font-size:23px;
    letter-spacing:-.6px;
}


.brand-text small{
    margin-top:4px;

    color:var(--muted);

    font-size:10px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:1px;
}


.navbar{
    display:flex;
    align-items:center;

    gap:6px;
}


.navbar > a{
    position:relative;

    padding:10px 12px;

    border-radius:10px;

    text-decoration:none;

    color:#333746;

    font-size:14px;
    font-weight:750;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.navbar > a:not(.admin-btn):hover{
    color:var(--primary);
    background:#f3efff;
}


.navbar .admin-btn{
    margin-left:8px;

    padding:11px 17px;

    background:var(--navy);

    color:white;

    border-radius:11px;

    box-shadow:
        0 10px 24px
        rgba(17,24,39,.16);
}


.navbar .admin-btn:hover{
    background:#222b3d;

    transform:
        translateY(-1px);
}


/* MOBILE MENU BUTTON */

.menu-toggle{
    display:none;

    width:44px;
    height:44px;

    border:0;
    border-radius:12px;

    background:#f4f2fb;

    cursor:pointer;
}


.menu-toggle span{
    display:block;

    width:20px;
    height:2px;

    margin:4px auto;

    border-radius:999px;

    background:var(--text);

    transition:.25s ease;
}


.menu-toggle.active span:nth-child(1){
    transform:
        translateY(6px)
        rotate(45deg);
}


.menu-toggle.active span:nth-child(2){
    opacity:0;
}


.menu-toggle.active span:nth-child(3){
    transform:
        translateY(-6px)
        rotate(-45deg);
}


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

.hero{
    position:relative;

    width:100%;

    padding:
        28px 0 68px;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(109,40,217,.09),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 8%,
            rgba(219,39,119,.08),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f7fd 100%
        );
}


.hero-shell{
    width:min(
        var(--container),
        calc(100% - 48px)
    );

    margin:auto;
}


/* SHORT WIDE BANNER
   Recommended source image: 1920 × 560 px
   Ratio = 24 / 7
*/

.hero-banner{
    width:100%;

    aspect-ratio:24 / 7;

    overflow:hidden;

    border-radius:var(--radius-lg);

    background:#e9e8ef;

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

    box-shadow:
        var(--shadow-md);
}


.hero-banner[hidden]{
    display:none !important;
}


.hero-banner img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:
        transform .8s ease;
}


.hero-banner:hover img{
    transform:
        scale(1.015);
}


/* HERO TEXT BELOW BANNER */

.hero-content{
    position:relative;

    max-width:1000px;

    margin:
        34px auto 0;

    padding:
        0 22px;

    text-align:center;
}


.hero-eyebrow{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    margin-bottom:14px;

    padding:8px 13px;

    border:
        1px solid
        #e4ddff;

    border-radius:999px;

    background:#f4f0ff;

    color:var(--primary);

    font-size:11px;
    font-weight:900;

    letter-spacing:1.15px;
}


#publicHeroTitle{
    max-width:900px;

    margin:
        0 auto 13px;

    font-size:
        clamp(
            34px,
            4.3vw,
            58px
        );

    line-height:1.08;

    letter-spacing:-1.8px;

    background:
        linear-gradient(
            110deg,
            #151827 12%,
            var(--primary) 58%,
            var(--secondary) 100%
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}


.hero-subtitle{
    margin-bottom:10px;

    color:#3c4353;

    font-size:
        clamp(
            15px,
            1.5vw,
            19px
        );

    font-weight:750;

    line-height:1.65;
}


.hero-description{
    max-width:720px;

    margin:
        0 auto 24px;

    color:var(--muted);

    font-size:15px;

    line-height:1.75;
}


.hero-buttons{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    flex-wrap:wrap;
}


/* =========================================
   BUTTONS
========================================= */

.btn{
    display:inline-flex;

    min-height:46px;

    align-items:center;
    justify-content:center;

    padding:12px 20px;

    border:0;

    border-radius:12px;

    text-decoration:none;

    font-size:14px;
    font-weight:850;

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.btn:hover{
    transform:
        translateY(-2px);
}


.btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #7c3aed
        );

    color:white;

    box-shadow:
        0 12px 28px
        rgba(109,40,217,.24);
}


.btn-primary:hover{
    box-shadow:
        0 16px 34px
        rgba(109,40,217,.31);
}


.btn-secondary{
    background:white;

    color:#2a2e3b;

    border:
        1px solid
        #dedfea;

    box-shadow:var(--shadow-sm);
}


.btn-secondary:hover{
    border-color:#cbbef8;

    color:var(--primary);
}


/* =========================================
   COMMON SECTION
========================================= */

.section{
    position:relative;

    padding:
        82px 0;
}


.section-shell{
    width:min(
        var(--container),
        calc(100% - 48px)
    );

    margin:auto;
}


.section-heading{
    max-width:720px;

    margin:
        0 auto 36px;

    text-align:center;
}


.section-kicker{
    display:inline-block;

    margin-bottom:8px;

    color:var(--primary);

    font-size:11px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:1.4px;
}


.section-heading h2{
    margin-bottom:10px;

    color:var(--text);

    font-size:
        clamp(
            29px,
            3vw,
            42px
        );

    line-height:1.15;

    letter-spacing:-1px;
}


.section-heading p{
    color:var(--muted);

    font-size:15px;

    line-height:1.7;
}


/* =========================================
   NOTIFICATIONS
========================================= */

.notification-section{
    background:#f5f4f9;
}


.public-notification-list{
    max-width:960px;

    margin:auto;

    display:grid;

    gap:14px;
}


.public-notification-card{
    position:relative;

    padding:20px 22px;

    overflow:hidden;

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

    border:
        1px solid
        var(--line);

    border-radius:16px;

    box-shadow:var(--shadow-sm);

    text-align:left;

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


.public-notification-card::before{
    content:"";

    position:absolute;
    left:0;
    top:0;
    bottom:0;

    width:4px;

    background:
        linear-gradient(
            180deg,
            var(--primary),
            var(--secondary)
        );
}


.public-notification-card:hover{
    transform:
        translateY(-3px);

    border-color:#d8d0f3;

    box-shadow:var(--shadow-md);
}


.public-notification-top{
    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

    margin-bottom:9px;
}


.public-notification-type,
.public-pinned-badge{
    display:inline-flex;

    align-items:center;

    min-height:26px;

    padding:5px 9px;

    border-radius:999px;

    font-size:10px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.6px;
}


.public-notification-type{
    background:#eee9ff;
    color:var(--primary);
}


.public-pinned-badge{
    background:#fff4d6;
    color:#9a5b00;
}


.public-notification-card h3{
    margin-bottom:6px;

    color:var(--text);

    font-size:17px;
}


.public-notification-message{
    color:var(--muted);

    font-size:14px;

    line-height:1.65;
}


.notification-pinned{
    background:
        linear-gradient(
            135deg,
            #fffdf7,
            #ffffff
        );
}


.notification-view-btn{
    display:inline-flex;

    margin-top:12px;

    color:var(--primary);

    text-decoration:none;

    font-size:12px;
    font-weight:850;
}


.notification-view-btn:hover{
    text-decoration:underline;
}


/* =========================================
   SERVICES
========================================= */

.services-section{
    background:white;
}


.cards{
    display:grid;

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

    gap:18px;
}


.card{
    position:relative;

    min-height:210px;

    padding:28px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfaff
        );

    border:
        1px solid
        var(--line);

    border-radius:20px;

    box-shadow:
        0 8px 26px
        rgba(17,24,39,.05);

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


.card::after{
    content:"";

    position:absolute;

    right:-36px;
    bottom:-50px;

    width:120px;
    height:120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(109,40,217,.09),
            transparent 68%
        );
}


.card:hover{
    transform:
        translateY(-6px);

    border-color:#dcd2fb;

    box-shadow:
        var(--shadow-md);
}


.service-number{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    margin-bottom:22px;

    border-radius:12px;

    background:#f0ebff;

    color:var(--primary);

    font-size:12px;
    font-weight:900;
}


.card h3{
    margin-bottom:9px;

    color:var(--text);

    font-size:19px;
}


.card p{
    color:var(--muted);

    font-size:14px;

    line-height:1.65;
}


/* =========================================
   GALLERY
========================================= */

.gallery-section{
    background:
        linear-gradient(
            180deg,
            #f7f6fb,
            #ffffff
        );
}


.gallery-grid{
    display:grid;

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

    gap:20px;
}


.public-gallery-card{
    overflow:hidden;

    background:white;

    border:
        1px solid
        var(--line);

    border-radius:20px;

    box-shadow:var(--shadow-sm);

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


.public-gallery-card:hover{
    transform:
        translateY(-6px);

    box-shadow:var(--shadow-md);
}


.gallery-image-wrap{
    position:relative;

    width:100%;

    aspect-ratio:4 / 3;

    overflow:hidden;

    background:#ececf2;
}


.public-gallery-card img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .45s ease;
}


.public-gallery-card:hover img{
    transform:
        scale(1.055);
}


.public-gallery-info{
    padding:18px;
}


.public-gallery-info span{
    display:inline-block;

    margin-bottom:7px;

    color:var(--primary);

    font-size:10px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.9px;
}


.public-gallery-info h3{
    margin-bottom:6px;

    color:var(--text);

    font-size:18px;
}


.public-gallery-info p{
    color:var(--muted);

    font-size:13px;

    line-height:1.6;
}


/* =========================================
   STATE / LOADING
========================================= */

.state-message{
    grid-column:
        1 / -1;

    width:100%;

    padding:28px;

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

    border:
        1px dashed
        #d8dbe5;

    border-radius:15px;

    color:var(--muted);

    text-align:center;
}


.error-state{
    color:#b42318;

    background:#fff7f7;

    border-color:#f1c5c5;
}


/* =========================================
   ENQUIRY
========================================= */

.enquiry-section{
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(109,40,217,.07),
            transparent 28%
        ),
        #f6f7fb;
}


.enquiry-box{
    max-width:980px;

    margin:auto;

    padding:
        30px;

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

    border:
        1px solid
        var(--line);

    border-radius:24px;

    box-shadow:var(--shadow-md);
}


.enquiry-grid{
    display:grid;

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

    gap:18px;
}


.full-input{
    grid-column:
        1 / -1;
}


.input-group{
    margin-bottom:18px;
}


.input-group label{
    display:block;

    margin-bottom:8px;

    color:#3d4250;

    font-size:13px;
    font-weight:800;
}


.enquiry-box input,
.enquiry-box select,
.enquiry-box textarea{
    width:100%;

    padding:13px 14px;

    border:
        1px solid
        #d8dbe5;

    border-radius:11px;

    background:#fbfcfe;

    color:var(--text);

    font-size:14px;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.enquiry-box textarea{
    resize:vertical;
}


.enquiry-box input:focus,
.enquiry-box select:focus,
.enquiry-box textarea:focus{
    border-color:#9d80ee;

    background:white;

    box-shadow:
        0 0 0 4px
        rgba(109,40,217,.09);
}


.enquiry-services-block{
    margin:
        4px 0 20px;
}


.enquiry-service-title{
    margin-bottom:12px;

    font-size:15px;
}


.enquiry-services{
    display:grid;

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

    gap:10px;
}


.enquiry-services label{
    display:flex;

    align-items:center;

    gap:9px;

    padding:12px;

    border:
        1px solid
        var(--line);

    border-radius:11px;

    background:#f9f9fc;

    color:#454b5c;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}


.enquiry-services label:hover{
    border-color:#cbbcf4;

    background:#f5f1ff;
}


.enquiry-services input{
    width:auto;
    accent-color:var(--primary);
}


.enquiry-submit-btn{
    min-width:175px;
}


.enquiry-response{
    min-height:22px;

    margin-top:14px;

    font-size:13px;
    font-weight:800;
}


.enquiry-response.info{
    color:#2563eb;
}


.enquiry-response.success{
    color:#15803d;
}


.enquiry-response.error{
    color:#b42318;
}


/* =========================================
   CONTACT
========================================= */

.contact-section{
    padding-top:28px;

    background:white;
}


.contact-card{
    max-width:1100px;

    margin:auto;

    padding:
        38px 42px;

    display:flex;

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

    gap:30px;

    overflow:hidden;

    border-radius:26px;

    background:
        linear-gradient(
            115deg,
            #21113e 0%,
            #4c1d95 55%,
            #8b2f69 100%
        );

    color:white;

    box-shadow:
        0 24px 55px
        rgba(76,29,149,.22);
}


.contact-kicker{
    display:inline-block;

    margin-bottom:8px;

    color:#f7d98b;

    font-size:10px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:1.2px;
}


.contact-card h2{
    margin-bottom:7px;

    font-size:
        clamp(
            25px,
            3vw,
            38px
        );

    line-height:1.15;
}


.contact-card p{
    color:
        rgba(255,255,255,.78);

    font-size:14px;
}


.contact-btn{
    flex:0 0 auto;

    background:white;

    color:var(--primary-dark);

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


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

.footer{
    margin-top:70px;

    background:#0f1521;

    color:white;
}


.footer-inner{
    width:min(
        var(--container),
        calc(100% - 48px)
    );

    min-height:118px;

    margin:auto;

    display:flex;

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

    gap:30px;
}


.footer strong{
    font-size:18px;
}


.footer p{
    margin-top:5px;

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

    font-size:12px;
}


.copyright{
    text-align:right;
}


/* =========================================
   REVEAL ANIMATION
========================================= */

.reveal{
    opacity:0;

    transform:
        translateY(18px);

    transition:
        opacity .55s ease,
        transform .55s ease;
}


.reveal.is-visible{
    opacity:1;

    transform:none;
}


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

    html{
        scroll-behavior:auto;
    }

    .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

}


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

@media(max-width:1024px){

    .header-inner,
    .hero-shell,
    .section-shell,
    .footer-inner{
        width:
            min(
                100% - 36px,
                var(--container)
            );
    }


    .navbar{
        gap:2px;
    }


    .navbar > a{
        padding:
            9px 8px;

        font-size:13px;
    }


    .cards,
    .gallery-grid{
        grid-template-columns:
            repeat(2,1fr);
    }


    .hero-content{
        margin-top:28px;
    }

}


/* =========================================
   MOBILE NAV + LAYOUT
========================================= */

@media(max-width:820px){

    html{
        scroll-padding-top:78px;
    }


    .header-inner{
        min-height:70px;
    }


    .brand-mark{
        width:40px;
        height:40px;
    }


    .brand-text strong{
        font-size:19px;
    }


    .brand-text small{
        display:none;
    }


    .menu-toggle{
        display:block;
    }


    .navbar{
        position:absolute;

        top:calc(100% + 1px);
        left:18px;
        right:18px;

        display:none;

        padding:12px;

        flex-direction:column;
        align-items:stretch;

        gap:3px;

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

        border:
            1px solid
            var(--line);

        border-radius:0 0 18px 18px;

        box-shadow:var(--shadow-md);
    }


    .navbar.open{
        display:flex;
    }


    .navbar > a{
        width:100%;

        padding:11px 12px;
    }


    .navbar .admin-btn{
        margin:
            6px 0 0;

        text-align:center;
    }


    .hero{
        padding:
            18px 0 54px;
    }


    .hero-shell{
        width:
            calc(100% - 28px);
    }


    /*
       Keep banner compact on mobile too.
       The centre of the banner is preserved.
    */
    .hero-banner{
        aspect-ratio:24 / 7;

        border-radius:19px;
    }


    .hero-content{
        margin-top:24px;

        padding:
            0 8px;
    }


    #publicHeroTitle{
        letter-spacing:-1px;
    }


    .section{
        padding:
            66px 0;
    }


    .section-shell{
        width:
            calc(100% - 28px);
    }


    .section-heading{
        margin-bottom:28px;
    }


    .contact-card{
        padding:
            30px 26px;

        flex-direction:column;
        align-items:flex-start;
    }


    .footer-inner{
        min-height:auto;

        padding:
            30px 0;

        flex-direction:column;
        align-items:flex-start;
    }


    .copyright{
        text-align:left;
    }

}


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

@media(max-width:620px){

    .cards,
    .gallery-grid,
    .enquiry-grid{
        grid-template-columns:1fr;
    }


    .full-input{
        grid-column:auto;
    }


    .card{
        min-height:auto;
    }


    .enquiry-box{
        padding:
            22px 18px;

        border-radius:18px;
    }


    .enquiry-services{
        grid-template-columns:
            repeat(2,1fr);
    }


    .hero-buttons{
        width:100%;
    }


    .hero-buttons .btn{
        flex:
            1 1 150px;
    }

}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media(max-width:420px){

    .header-inner{
        width:
            calc(100% - 22px);
    }


    .hero-shell,
    .section-shell,
    .footer-inner{
        width:
            calc(100% - 20px);
    }


    .brand-text strong{
        font-size:17px;
    }


    .hero-banner{
        border-radius:15px;
    }


    .hero-eyebrow{
        font-size:9px;
        letter-spacing:.8px;
    }


    .enquiry-services{
        grid-template-columns:1fr;
    }


    .contact-card{
        padding:
            26px 20px;
    }

}

/* =========================
   LIVE CONTACT INFORMATION
========================= */

.contact-main{
    flex:1;
}


.contact-intro{
    margin-bottom:22px;
}


.public-contact-details{
    display:grid;

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

    gap:10px 25px;

    margin-top:20px;
}


.public-contact-item{
    display:flex;

    flex-direction:column;

    gap:4px;
}


.public-contact-item span{
    color:
        rgba(255,255,255,0.60);

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;
}


.public-contact-item a,
.public-contact-item strong{
    color:white;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    line-height:1.5;
}


.public-contact-item a:hover{
    text-decoration:underline;
}


/* ACTION AREA */

.public-contact-actions{
    min-width:190px;

    display:flex;

    flex-direction:column;

    gap:10px;
}


.contact-action-btn{
    display:flex;

    justify-content:center;

    align-items:center;

    min-height:44px;

    padding:11px 17px;

    border-radius:11px;

    text-decoration:none;

    font-size:13px;

    font-weight:800;

    transition:.2s;
}


.contact-action-btn:hover{
    transform:
        translateY(-2px);
}


.contact-call-btn{
    background:white;

    color:#4c1d95;
}


.contact-whatsapp-btn{
    background:#16a34a;

    color:white;
}


.contact-map-btn{
    background:#2563eb;

    color:white;
}


.contact-enquiry-btn{
    background:#f59e0b;

    color:#111827;
}


/* SOCIAL LINKS */

.public-social-links{
    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

    margin-top:5px;
}


.public-social-links a{
    color:
        rgba(255,255,255,.85);

    font-size:11px;

    font-weight:700;

    text-decoration:none;
}


.public-social-links a:hover{
    color:white;

    text-decoration:underline;
}


/* MOBILE */

@media(max-width:768px){

    .public-contact-details{
        grid-template-columns:1fr;
    }


    .public-contact-actions{
        width:100%;

        min-width:0;
    }


    .contact-action-btn{
        width:100%;
    }

}
/* =========================================
   LIVE SERVICE IMAGE
========================================= */

.service-card-image{
    display:block;
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:14px;
    margin-bottom:18px;
}

@media(max-width:620px){
    .service-card-image{
        height:180px;
    }
}

/* ============================================================
   STEP 11D-5
   PUBLIC WEBSITE FINAL MOBILE UI
============================================================ */


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

@media(max-width:900px){

    .section-shell,
    .hero-shell,
    .header-inner,
    .footer-inner{

        width:100%;

        max-width:100%;

        padding-left:20px;

        padding-right:20px;
    }


    .cards{

        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;
    }


    .gallery-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;
    }


    .enquiry-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;
    }

}


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

@media(max-width:768px){


    /* ========================================================
       GENERAL
    ======================================================== */

    html{

        scroll-behavior:smooth;

        overflow-x:hidden;
    }


    body{

        width:100%;

        max-width:100%;

        overflow-x:hidden;
    }


    img{

        max-width:100%;

        height:auto;
    }


    .section{

        padding-top:55px !important;

        padding-bottom:55px !important;
    }


    .section-shell,
    .hero-shell,
    .header-inner,
    .footer-inner{

        width:100%;

        max-width:100%;

        padding-left:15px;

        padding-right:15px;
    }


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

    .header{

        position:sticky;

        top:0;

        z-index:1500;
    }


    .header-inner{

        min-height:64px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:12px;
    }


    .brand{

        min-width:0;

        text-decoration:none;
    }


    .brand-text{

        display:flex;

        flex-direction:column;

        min-width:0;
    }


    .brand-text strong{

        font-size:16px !important;

        line-height:1.2;

        white-space:nowrap;
    }


    .brand-text small{

        margin-top:2px;

        font-size:10px !important;

        white-space:nowrap;
    }


    /* HAMBURGER */

    .menu-toggle{

        width:42px;

        height:42px;

        flex-shrink:0;

        display:flex !important;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:5px;

        padding:0;

        border:none;

        border-radius:10px;

        cursor:pointer;
    }


    .menu-toggle span{

        width:20px;

        height:2px;

        border-radius:5px;
    }


    /* MOBILE NAV */

    .navbar{

        position:absolute;

        top:calc(100% + 8px);

        left:15px;

        right:15px;

        display:none;

        flex-direction:column;

        align-items:stretch;

        gap:5px;

        padding:12px;

        border-radius:14px;

        box-shadow:
            0 16px 35px
            rgba(15,23,42,.18);

        z-index:1600;
    }


    .navbar.open{

        display:flex;
    }


    .navbar a{

        width:100%;

        padding:11px 12px;

        border-radius:8px;

        text-align:left;

        font-size:13px;
    }


    .navbar .admin-btn{

        margin-top:5px;

        text-align:center;
    }


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

    .hero{

        padding-top:20px !important;
    }


    .hero-banner{

        width:100%;

        aspect-ratio:24 / 7;

        border-radius:14px !important;

        overflow:hidden;
    }


    .hero-banner img{

        width:100%;

        height:100%;

        object-fit:cover;

        display:block;
    }


    .hero-content{

        padding:
            26px 4px
            10px !important;

        text-align:center;
    }


    .hero-eyebrow{

        font-size:10px !important;

        letter-spacing:1px !important;
    }


    .hero-content h1{

        margin-top:10px;

        font-size:
            clamp(
                28px,
                9vw,
                40px
            ) !important;

        line-height:1.12;
    }


    .hero-subtitle{

        margin-top:12px;

        font-size:14px !important;

        line-height:1.6;
    }


    .hero-description{

        max-width:100%;

        margin-left:auto;

        margin-right:auto;

        font-size:13px !important;

        line-height:1.65;
    }


    .hero-buttons{

        display:flex;

        flex-direction:column;

        gap:10px;

        width:100%;

        margin-top:20px;
    }


    .hero-buttons .btn{

        width:100%;

        min-height:46px;

        display:flex;

        align-items:center;

        justify-content:center;
    }


    /* ========================================================
       SECTION HEADING
    ======================================================== */

    .section-heading{

        margin-bottom:25px !important;

        text-align:center;
    }


    .section-heading h2{

        font-size:
            clamp(
                25px,
                7vw,
                32px
            ) !important;

        line-height:1.2;
    }


    .section-heading p{

        max-width:100%;

        margin-left:auto;

        margin-right:auto;

        font-size:13px !important;

        line-height:1.65;
    }


    .section-kicker{

        font-size:10px !important;
    }


    /* ========================================================
       NOTIFICATIONS
    ======================================================== */

    .public-notification-list{

        display:grid;

        grid-template-columns:1fr !important;

        gap:12px !important;
    }


    .public-notification-card{

        padding:16px !important;

        border-radius:13px !important;
    }


    .public-notification-top{

        display:flex;

        flex-wrap:wrap;

        gap:7px;
    }


    .public-notification-card h3{

        font-size:17px !important;
    }


    .public-notification-message{

        font-size:13px !important;

        line-height:1.6;
    }


    /* ========================================================
       SERVICES
    ======================================================== */

    .cards{

        grid-template-columns:
            1fr !important;

        gap:13px !important;
    }


    .card{

        min-height:auto !important;

        padding:20px !important;

        border-radius:15px !important;
    }


    .service-card-image{

        width:100%;

        height:170px;

        object-fit:cover;

        border-radius:11px;
    }


    .service-number{

        margin-bottom:14px !important;
    }


    .card h3{

        font-size:18px !important;
    }


    .card p{

        font-size:13px !important;

        line-height:1.6;
    }


    /* ========================================================
       GALLERY
    ======================================================== */

    .gallery-grid{

        grid-template-columns:
            1fr !important;

        gap:14px !important;
    }


    .public-gallery-card{

        border-radius:15px !important;

        overflow:hidden;
    }


    .gallery-image-wrap{

        aspect-ratio:4 / 3;
    }


    .gallery-image-wrap img{

        width:100%;

        height:100%;

        object-fit:cover;
    }


    .public-gallery-info{

        padding:15px !important;
    }


    /* ========================================================
       ENQUIRY
    ======================================================== */

    .enquiry-box{

        padding:18px !important;

        border-radius:15px !important;
    }


    .enquiry-grid{

        grid-template-columns:
            1fr !important;

        gap:0 !important;
    }


    .enquiry-box .input-group{

        width:100%;

        margin-bottom:15px;
    }


    .enquiry-box input,
    .enquiry-box select,
    .enquiry-box textarea{

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

        font-size:16px !important;

        border-radius:9px !important;
    }


    .enquiry-box input,
    .enquiry-box select{

        min-height:47px;
    }


    .enquiry-box textarea{

        min-height:110px;

        resize:vertical;
    }


    .enquiry-services{

        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;

        gap:8px !important;
    }


    .enquiry-services label{

        width:100%;

        min-height:45px;

        padding:9px 10px;

        display:flex;

        align-items:center;

        gap:8px;
    }


    .enquiry-submit-btn{

        width:100%;

        min-height:48px;
    }


    /* ========================================================
       CONTACT
    ======================================================== */

    .contact-card{

        display:flex !important;

        flex-direction:column !important;

        align-items:stretch !important;

        gap:22px !important;

        padding:22px !important;

        border-radius:16px !important;
    }


    .contact-main{

        width:100%;
    }


    .contact-main h2{

        font-size:25px !important;

        line-height:1.2;
    }


    .contact-intro{

        font-size:13px;

        line-height:1.6;
    }


    .public-contact-details{

        grid-template-columns:
            1fr !important;

        gap:12px !important;
    }


    .public-contact-actions{

        width:100%;

        min-width:0 !important;
    }


    .contact-action-btn{

        width:100%;

        min-height:45px;
    }


    .public-social-links{

        width:100%;

        margin-top:6px;

        justify-content:center;
    }


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

    .footer-inner{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:12px;

        text-align:center;

        padding-top:25px;

        padding-bottom:25px;
    }


    .footer-inner strong{

        font-size:16px;
    }


    .footer-inner p{

        font-size:11px;

        line-height:1.5;
    }


    /* ========================================================
       LONG TEXT SAFETY
    ======================================================== */

    .section *,
    .footer *{

        overflow-wrap:break-word;
    }

}


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

@media(max-width:480px){


    .section{

        padding-top:45px !important;

        padding-bottom:45px !important;
    }


    .section-shell,
    .hero-shell,
    .header-inner,
    .footer-inner{

        padding-left:12px;

        padding-right:12px;
    }


    .navbar{

        left:10px;

        right:10px;
    }


    .hero-content h1{

        font-size:28px !important;
    }


    .enquiry-box{

        padding:15px !important;
    }


    .enquiry-services{

        grid-template-columns:
            1fr !important;
    }


    .contact-card{

        padding:18px !important;
    }

}

/* ============================================================
   FINAL MOBILE BUG FIX
   Hero Buttons + Enquiry Checkboxes
============================================================ */


/* ============================================================
   HERO BUTTON FIX
============================================================ */

@media(max-width:768px){

    .hero-buttons{

        display:flex !important;

        flex-direction:column !important;

        width:100% !important;

        gap:10px !important;

        margin-top:20px !important;
    }


    .hero-buttons .btn{

        /* IMPORTANT:
           old flex:1 1 150px remove */
        flex:none !important;

        width:100% !important;

        height:auto !important;

        min-height:48px !important;

        max-height:none !important;

        padding:13px 18px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        border-radius:12px !important;

        font-size:14px !important;

        line-height:1.2 !important;
    }

}


/* ============================================================
   ENQUIRY SERVICE CHECKBOX FIX
============================================================ */

@media(max-width:768px){

    .enquiry-services{

        display:grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;

        gap:10px !important;
    }


    .enquiry-services label{

        width:100% !important;

        min-height:48px !important;

        height:auto !important;

        padding:11px 12px !important;

        display:flex !important;

        align-items:center !important;

        justify-content:flex-start !important;

        gap:9px !important;

        border-radius:10px !important;

        cursor:pointer;
    }


    /*
       VERY IMPORTANT:
       generic input mobile CSS must NOT
       apply full width to checkboxes
    */

    .enquiry-services input[type="checkbox"],
    .enquiry-services .service-checkbox{

        width:18px !important;

        height:18px !important;

        min-width:18px !important;

        min-height:18px !important;

        max-width:18px !important;

        max-height:18px !important;

        padding:0 !important;

        margin:0 !important;

        flex:
            0 0 18px !important;

        appearance:auto !important;
    }


    .enquiry-services label span{

        flex:1;

        margin:0;

        font-size:13px;

        line-height:1.3;

        text-align:left;
    }

}


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

@media(max-width:480px){

    /*
       1 column looks cleaner
       on very small phones
    */

    .enquiry-services{

        grid-template-columns:
            1fr !important;
    }


    .hero-buttons .btn{

        min-height:46px !important;

        padding:12px 15px !important;
    }

}

/* ============================================================
   COMPACT / NARROW PUBLIC HEADER
============================================================ */

.header{
    padding:0 !important;
}

.header-inner{
    min-height:54px !important;
    padding-top:5px !important;
    padding-bottom:5px !important;
}

/* BRAND */

.brand-text strong{
    font-size:15px !important;
    line-height:1.15 !important;
}

.brand-text small{
    margin-top:1px !important;
    font-size:9px !important;
}

/* DESKTOP NAV */

.navbar{
    gap:4px !important;
}

.navbar a{
    padding:8px 10px !important;
    font-size:12px !important;
}

.navbar .admin-btn{
    padding:8px 12px !important;
}


/* ============================================================
   MOBILE COMPACT HEADER
============================================================ */

@media(max-width:768px){

    .header-inner{
        min-height:52px !important;
        padding-left:14px !important;
        padding-right:14px !important;
        padding-top:4px !important;
        padding-bottom:4px !important;
    }

    .brand-text strong{
        font-size:15px !important;
    }

    .brand-text small{
        font-size:8.5px !important;
    }

    /* SMALLER HAMBURGER */

    .menu-toggle{
        width:38px !important;
        height:38px !important;

        border-radius:9px !important;
    }

    .menu-toggle span{
        width:18px !important;
        height:2px !important;
    }

    /* MOBILE DROPDOWN */

    .navbar{
        top:calc(100% + 5px) !important;

        left:12px !important;
        right:12px !important;

        padding:9px !important;

        gap:3px !important;

        border-radius:12px !important;
    }

    .navbar a{
        padding:9px 10px !important;
        font-size:12px !important;
    }

}


/* ============================================================
   SMALL PHONE
============================================================ */

@media(max-width:480px){

    .header-inner{
        min-height:50px !important;

        padding-left:11px !important;
        padding-right:11px !important;
    }

    .brand-text strong{
        font-size:14px !important;
    }

    .brand-text small{
        font-size:8px !important;
    }

    .menu-toggle{
        width:36px !important;
        height:36px !important;
    }

    .menu-toggle span{
        width:17px !important;
    }

}