/* ============================================================
   S D DECORATORS — PREMIUM PUBLIC BUSINESS UI
   Elegant event/decorator visual layer + mobile-first polish.
============================================================ */

:root{
    --sd-navy-950:#061426;
    --sd-navy-900:#091b31;
    --sd-navy-800:#102b4b;
    --sd-gold-600:#b7791f;
    --sd-gold-500:#d9a441;
    --sd-gold-400:#edc46c;
    --sd-gold-200:#f8e8bb;
    --sd-cream:#fffaf0;
    --sd-ink:#142033;
    --sd-muted:#667085;
    --sd-bg:#f6f7f9;
    --sd-surface:#ffffff;
    --sd-line:#e7e9ee;
    --sd-shadow-sm:0 5px 18px rgba(15,23,42,.06);
    --sd-shadow-md:0 16px 42px rgba(15,23,42,.10);
    --sd-shadow-lg:0 30px 80px rgba(3,14,28,.18);
    --sd-radius:18px;
}

body{
    background:
        radial-gradient(circle at 100% 8%,rgba(217,164,65,.05),transparent 24rem),
        linear-gradient(180deg,#fafbfc,var(--sd-bg)) !important;
    color:var(--sd-ink) !important;
    font-family:Inter,"Segoe UI",Arial,Helvetica,sans-serif !important;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

::selection{background:var(--sd-gold-200);color:var(--sd-navy-950);}

/* ---------- HEADER ---------- */
.header{
    background:rgba(255,255,255,.94) !important;
    border-bottom:1px solid rgba(9,27,49,.08) !important;
    box-shadow:0 5px 24px rgba(9,27,49,.055) !important;
    backdrop-filter:blur(18px) saturate(135%) !important;
}

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

.brand{
    position:relative;
    min-height:48px;
    padding-left:59px;
}

.brand::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:45px;
    height:45px;
    transform:translateY(-50%);
    border-radius:14px;
    background:var(--sd-navy-950) url('/icons/icon-192.png') center/cover no-repeat;
    box-shadow:0 8px 20px rgba(6,20,38,.18),0 0 0 1px rgba(217,164,65,.20);
}

.brand-text strong{
    color:var(--sd-navy-950) !important;
    font-size:18px !important;
    font-weight:850;
    letter-spacing:-.35px;
}

.brand-text small{
    color:var(--sd-gold-600) !important;
    font-size:8.5px !important;
    font-weight:850 !important;
    letter-spacing:.12em !important;
}

.navbar{gap:2px !important;}
.navbar > a{
    color:#3f4b5e !important;
    font-size:12.5px !important;
    font-weight:720 !important;
    border-radius:9px !important;
}
.navbar > a:not(.admin-btn):hover,
.navbar > a:not(.admin-btn).active{
    color:var(--sd-navy-950) !important;
    background:#f7f1e2 !important;
}

#navbar #installAppBtn,
#navbar .admin-btn{
    width:auto !important;
    min-width:112px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 14px !important;
    border:1px solid transparent !important;
    border-radius:10px !important;
    background:linear-gradient(135deg,var(--sd-navy-900),var(--sd-navy-800)) !important;
    color:#fff !important;
    box-shadow:0 7px 18px rgba(9,27,49,.14) !important;
    font-size:12.5px !important;
    font-weight:760 !important;
}

#navbar #installAppBtn{
    border-color:#e0bd6a !important;
    background:linear-gradient(135deg,#f3d482,#d9a441) !important;
    color:#1e2836 !important;
    box-shadow:0 7px 18px rgba(183,121,31,.18) !important;
}

/* ---------- HERO ---------- */
.hero{
    position:relative;
    isolation:isolate;
    padding:30px 0 72px !important;
    background:
        radial-gradient(circle at 13% 10%,rgba(237,196,108,.20),transparent 24rem),
        radial-gradient(circle at 88% 15%,rgba(61,109,164,.18),transparent 27rem),
        linear-gradient(135deg,#061426 0%,#0a1f39 52%,#10345a 100%) !important;
    overflow:hidden;
}

.hero::before{
    content:"SD";
    position:absolute;
    z-index:-1;
    right:-.05em;
    bottom:-.28em;
    color:rgba(255,255,255,.025);
    font-family:Georgia,"Times New Roman",serif;
    font-size:min(43vw,620px);
    font-weight:700;
    line-height:1;
    letter-spacing:-.12em;
    pointer-events:none;
}

.hero::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:54px 54px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 88%);
}

.hero-shell{position:relative;}

.hero-banner{
    margin-bottom:28px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:22px !important;
    overflow:hidden;
    background:#0a1f39;
    box-shadow:var(--sd-shadow-lg) !important;
}
.hero-banner img{width:100%;height:100%;object-fit:cover;}

.hero-content{
    max-width:840px !important;
    padding:45px 0 8px !important;
    text-align:left !important;
}

.hero-eyebrow{
    display:inline-flex !important;
    align-items:center;
    gap:9px;
    padding:8px 12px !important;
    border:1px solid rgba(237,196,108,.27);
    border-radius:999px;
    background:rgba(237,196,108,.08);
    color:var(--sd-gold-400) !important;
    font-size:10px !important;
    font-weight:850 !important;
    letter-spacing:.14em !important;
}
.hero-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sd-gold-400);box-shadow:0 0 0 4px rgba(237,196,108,.12);}

.hero-content h1{
    max-width:790px;
    margin-top:22px !important;
    color:#fff !important;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(42px,6vw,72px) !important;
    font-weight:700;
    line-height:1.02 !important;
    letter-spacing:-2.6px !important;
    text-shadow:0 8px 30px rgba(0,0,0,.18);
}

.hero-subtitle{
    margin-top:20px !important;
    color:var(--sd-gold-400) !important;
    font-size:17px !important;
    font-weight:750 !important;
    letter-spacing:.01em;
}
.hero-description{
    max-width:670px;
    margin-top:12px !important;
    color:#c8d4e3 !important;
    font-size:15px !important;
    line-height:1.75 !important;
}

.hero-buttons{justify-content:flex-start !important;gap:11px !important;margin-top:28px !important;}
.hero-buttons .btn{
    min-height:48px !important;
    padding:0 21px !important;
    border-radius:11px !important;
    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:.01em;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease !important;
}
.hero-buttons .btn:hover{transform:translateY(-2px) !important;}
.btn-primary{
    border:1px solid #e8bf60 !important;
    background:linear-gradient(135deg,#f1d079,#d39a31) !important;
    color:#182436 !important;
    box-shadow:0 11px 28px rgba(217,164,65,.20) !important;
}
.btn-secondary{
    border:1px solid rgba(255,255,255,.22) !important;
    background:rgba(255,255,255,.07) !important;
    color:#fff !important;
    box-shadow:none !important;
    backdrop-filter:blur(8px);
}

/* ---------- SECTION SYSTEM ---------- */
.section{padding:74px 0 !important;}
.section:nth-of-type(even){background:rgba(255,255,255,.66);}
.section-heading{max-width:720px !important;margin-bottom:32px !important;}
.section-kicker{
    color:var(--sd-gold-600) !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.15em !important;
    text-transform:uppercase;
}
.section-heading h2{
    margin-top:8px !important;
    color:var(--sd-navy-950) !important;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(30px,4vw,44px) !important;
    line-height:1.08;
    letter-spacing:-1.1px !important;
}
.section-heading p{margin-top:11px !important;color:var(--sd-muted) !important;font-size:14px !important;line-height:1.7 !important;}

/* ---------- NOTIFICATIONS ---------- */
.public-notification-list{display:grid;gap:12px;}
.public-notification-card{
    position:relative;
    overflow:hidden;
    border:1px solid var(--sd-line) !important;
    border-radius:15px !important;
    background:#fff !important;
    box-shadow:var(--sd-shadow-sm) !important;
}
.public-notification-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sd-gold-500);}
.public-notification-card.notification-pinned{border-color:#ead6a7 !important;background:linear-gradient(90deg,#fffaf0,#fff) !important;}
.notification-view-btn{border-radius:9px !important;background:var(--sd-navy-900) !important;color:#fff !important;}
.public-notification-type,.public-pinned-badge{border-radius:999px !important;font-weight:800 !important;}

/* ---------- SERVICES ---------- */
.cards{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:18px !important;
}
.card{
    position:relative;
    overflow:hidden;
    border:1px solid var(--sd-line) !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:var(--sd-shadow-sm) !important;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease !important;
}
.card:hover{transform:translateY(-4px) !important;box-shadow:var(--sd-shadow-md) !important;border-color:#d9dde5 !important;}
.card h3{color:var(--sd-navy-950) !important;font-family:Georgia,"Times New Roman",serif;letter-spacing:-.25px;}
.card p{color:var(--sd-muted) !important;}
.service-number{color:var(--sd-gold-600) !important;font-weight:900 !important;}
.service-card-image{border-radius:13px !important;overflow:hidden;}

/* ---------- GALLERY ---------- */
.gallery-section{background:#eef2f5 !important;}
.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:18px !important;}
.public-gallery-card{
    overflow:hidden;
    border:1px solid #dde2e9 !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:var(--sd-shadow-sm) !important;
    transition:transform .2s ease,box-shadow .2s ease !important;
}
.public-gallery-card:hover{transform:translateY(-4px);box-shadow:var(--sd-shadow-md) !important;}
.gallery-image-wrap{aspect-ratio:4/3;overflow:hidden;background:#e7ebf0;}
.gallery-image-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.public-gallery-card:hover .gallery-image-wrap img{transform:scale(1.035);}
.public-gallery-info{padding:17px !important;}
.public-gallery-info h3{color:var(--sd-navy-950) !important;font-family:Georgia,"Times New Roman",serif;}

/* ---------- ENQUIRY ---------- */
.enquiry-section{
    background:
        radial-gradient(circle at 90% 20%,rgba(217,164,65,.08),transparent 24rem),
        #fff !important;
}
.enquiry-box{
    padding:28px !important;
    border:1px solid var(--sd-line) !important;
    border-radius:22px !important;
    background:linear-gradient(180deg,#fff,#fbfcfd) !important;
    box-shadow:var(--sd-shadow-md) !important;
}
.input-group label{color:#344054 !important;font-size:12px !important;font-weight:800 !important;}
.input-group input,
.input-group select,
.input-group textarea{
    border:1px solid #d9dee7 !important;
    border-radius:11px !important;
    background:#fff !important;
    color:var(--sd-ink) !important;
    transition:border-color .18s ease,box-shadow .18s ease !important;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{
    outline:none !important;
    border-color:var(--sd-gold-500) !important;
    box-shadow:0 0 0 4px rgba(217,164,65,.13) !important;
}
.enquiry-service-title{color:var(--sd-navy-950) !important;font-weight:800 !important;}
.enquiry-services label{
    border:1px solid #e2e6ec !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#425066 !important;
}
.enquiry-services label:hover{border-color:#dfc17b !important;background:#fffaf0 !important;}
.enquiry-submit-btn{
    min-height:50px;
    border:none !important;
    border-radius:11px !important;
    background:linear-gradient(135deg,var(--sd-navy-900),var(--sd-navy-800)) !important;
    color:#fff !important;
    box-shadow:0 10px 24px rgba(9,27,49,.17) !important;
    font-weight:800 !important;
}

/* ---------- CONTACT ---------- */
.contact-section{
    background:linear-gradient(145deg,var(--sd-navy-950),#0b2747) !important;
}
.contact-section .section-kicker{color:var(--sd-gold-400) !important;}
.contact-section .section-heading h2{color:#fff !important;}
.contact-section .section-heading p{color:#b9c7d8 !important;}
.contact-card{
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:22px !important;
    background:rgba(255,255,255,.07) !important;
    box-shadow:0 24px 60px rgba(0,0,0,.16) !important;
    backdrop-filter:blur(10px);
}
.contact-kicker{color:var(--sd-gold-400) !important;}
.contact-main h3,.public-contact-item strong{color:#fff !important;}
.contact-intro,.public-contact-item,.public-contact-item a{color:#c8d4e3 !important;}
.contact-action-btn{
    border-radius:11px !important;
    border:1px solid rgba(255,255,255,.15) !important;
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
}
.contact-action-btn:hover{border-color:rgba(237,196,108,.45) !important;background:rgba(237,196,108,.10) !important;}
.public-social-links a{color:var(--sd-gold-400) !important;}

/* ---------- FOOTER ---------- */
.footer{
    border-top:1px solid rgba(255,255,255,.08) !important;
    background:#04101f !important;
    color:#b4c2d2 !important;
}
.footer strong{color:#fff !important;}
.footer-inner p{color:#93a4b8 !important;}

/* ---------- STATES / MOTION ---------- */
.state-message{
    border:1px dashed #d8dde5 !important;
    border-radius:13px;
    background:rgba(255,255,255,.72);
    color:#7a8798 !important;
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ---------- TABLET ---------- */
@media(max-width:980px){
    .cards,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
    .hero-content{max-width:760px !important;}
}

/* ---------- MOBILE ---------- */
@media(max-width:768px){
    html{scroll-padding-top:64px !important;}
    .header-inner{min-height:60px !important;padding:6px 13px !important;}
    .brand{min-height:44px;padding-left:52px;}
    .brand::before{width:40px;height:40px;border-radius:12px;}
    .brand-text strong{font-size:15px !important;}
    .brand-text small{font-size:7.7px !important;}

    .menu-toggle{
        width:40px !important;
        height:40px !important;
        border:1px solid #e8e9ed !important;
        border-radius:11px !important;
        background:#f8f6f0 !important;
    }
    .navbar{
        top:calc(100% + 7px) !important;
        left:10px !important;
        right:10px !important;
        padding:10px !important;
        border:1px solid #e2e6ec !important;
        border-radius:15px !important;
        background:rgba(255,255,255,.98) !important;
        box-shadow:0 18px 50px rgba(9,27,49,.16) !important;
    }
    .navbar > a{min-height:42px;display:flex;align-items:center;padding:0 12px !important;font-size:13px !important;}
    #navbar #installAppBtn,#navbar .admin-btn{width:100% !important;min-width:0 !important;height:43px !important;min-height:43px !important;}

    .hero{padding:22px 0 54px !important;}
    .hero-content{padding:28px 0 4px !important;text-align:left !important;}
    .hero-content h1{font-size:clamp(34px,11vw,49px) !important;letter-spacing:-1.6px !important;}
    .hero-subtitle{font-size:14px !important;line-height:1.5;}
    .hero-description{font-size:13.5px !important;line-height:1.7 !important;}
    .hero-buttons{flex-direction:row !important;gap:9px !important;}
    .hero-buttons .btn{width:auto !important;flex:1 1 0 !important;min-height:46px !important;padding:0 14px !important;}

    .section{padding:55px 0 !important;}
    .section-heading{margin-bottom:24px !important;}
    .section-heading h2{font-size:32px !important;}
    .cards,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
    .card,.public-gallery-card{border-radius:15px !important;}
    .enquiry-box{padding:19px !important;border-radius:17px !important;}
    .enquiry-grid{grid-template-columns:1fr !important;}
    .input-group input,.input-group select,.input-group textarea{font-size:16px !important;} /* avoids iOS zoom */
}

@media(max-width:520px){
    .hero-buttons{flex-direction:column !important;}
    .hero-buttons .btn{width:100% !important;flex:none !important;}
    .cards,.gallery-grid{grid-template-columns:1fr !important;}
    .section{padding:48px 0 !important;}
    .section-shell,.hero-shell,.header-inner,.footer-inner{padding-left:12px !important;padding-right:12px !important;}
    .hero-banner{border-radius:15px !important;margin-bottom:14px;}
    .hero-content{padding-top:22px !important;}
    .hero-content h1{font-size:36px !important;}
    .section-heading h2{font-size:29px !important;}
    .enquiry-services{grid-template-columns:1fr !important;}
    .contact-card{border-radius:17px !important;}
}


/* ============================================================
   MOBILE HOTFIX — 2026-08-23
   Final conflict-resolution layer for narrow phones.
============================================================ */
@media(max-width:768px){
    .header-inner{
        width:100% !important;
        max-width:100% !important;
    }

    .brand{
        min-width:0 !important;
        max-width:calc(100% - 52px) !important;
        flex:1 1 auto !important;
    }

    .brand-text{
        min-width:0 !important;
        overflow:hidden;
    }

    .brand-text strong{
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .menu-toggle{
        flex:0 0 40px !important;
    }

    .navbar{
        max-height:calc(100dvh - 78px) !important;
        overflow-y:auto !important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    #navbar #installAppBtn,
    #navbar .admin-btn{
        flex:0 0 auto !important;
    }
}

@media(max-width:380px){
    .header-inner{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .brand{
        padding-left:48px !important;
    }

    .brand::before{
        width:38px !important;
        height:38px !important;
    }

    .hero-content h1{
        font-size:32px !important;
        line-height:1.04 !important;
    }

    .section-heading h2{
        font-size:27px !important;
    }
}