:root {
    --primary: #c88a24;
    --secondary: #061827;
    --accent: #d6a84f;
    --body: #081a29;
    --heading: #fff;
    --radius: 14px;
    --button-radius: 8px;
    --container: 1240px;
    --ease: cubic-bezier(.2,.72,.2,1)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--body);
    color: #dce5ec;
    font-family: Inter,sans-serif;
    overflow-x: hidden
}

.site-container {
    width: min(var(--container),92vw);
    margin: 0 auto
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    backdrop-filter: blur(18px)
}

.nav-bar {
    background: rgba(4,18,30,.78);
    border-bottom: 1px solid rgba(255,255,255,.07)
}

.nav-wrap {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand-wide img {
    width: 92px;
    max-height: 74px;
    height: auto;
    display: block
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px
}

    .main-nav a {
        color: #cad5df;
        text-decoration: none;
        font-size: 12px;
        transition: .25s
    }

        .main-nav a:hover {
            color: #f0cb6d
        }

    .main-nav .nav-cta {
        padding: 11px 17px;
        border: 1px solid rgba(214,168,79,.35);
        border-radius: var(--button-radius);
        color: #061827;
        background: linear-gradient(135deg,#f4d889,#c88a24);
        font-weight: 700
    }

        .main-nav .nav-cta span {
            margin-left: 6px
        }

.mobile-menu-btn {
    display: none;
    border: 0;
    background: transparent;
    padding: 8px
}

    .mobile-menu-btn span {
        display: block;
        width: 22px;
        height: 2px;
        margin: 5px 0;
        background: #f0cb6d;
        border-radius: 3px
    }

.page-shell {
    padding-top: 108px
}

.public-section {
    position: relative;
    padding: 105px 0;
    background: linear-gradient(180deg,#061827,#071b2d)
}

    .public-section:nth-child(even) {
        background: #071e31
    }

.section-hero {
    min-height: 820px;
    padding-top: 120px;
    overflow: hidden;
    background: radial-gradient(circle at 80% 20%,rgba(214,168,79,.12),transparent 30%),linear-gradient(180deg,#061827,#041320)
}

    .section-hero:after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 72% 62%,rgba(214,168,79,.08),transparent 28%);
        pointer-events: none
    }

    .section-hero .site-container {
        position: relative;
        z-index: 1
    }

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 50px;
    align-items: center;
    min-height: 650px
}

.hero-copy {
    max-width: 700px
}

.eyebrow {
    display: inline-block;
    color: #d6a84f;
    font-size: 10px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    font-weight: 700
}

.hero-copy h1 {
    font-family: Georgia,Poppins,serif;
    font-size: clamp(44px,5.6vw,78px);
    line-height: 1.04;
    color: #fff;
    margin: 16px 0 18px
}

    .hero-copy h1:after {
        content: "";
        display: block;
        width: 80px;
        height: 2px;
        margin-top: 18px;
        background: linear-gradient(90deg,#e8c778,transparent)
    }

.hero-copy p {
    max-width: 650px;
    color: #a6b4c1;
    font-size: 15px;
    line-height: 1.9;
    margin: 0
}

.hero-actions {
    display: flex;
    gap: 13px;
    margin-top: 30px;
    flex-wrap: wrap
}

.gold-btn, .outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 19px;
    border-radius: var(--button-radius);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: .35s var(--ease)
}

.gold-btn {
    border: 1px solid rgba(255,230,154,.25);
    background: linear-gradient(135deg,#f4d889,#c88a24);
    color: #061827;
    box-shadow: 0 12px 35px rgba(200,138,36,.18)
}

    .gold-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 45px rgba(200,138,36,.28)
    }

.outline-btn {
    border: 1px solid rgba(214,168,79,.35);
    background: rgba(255,255,255,.02);
    color: #fff
}

    .outline-btn:hover {
        border-color: #d6a84f;
        transform: translateY(-3px);
        background: rgba(214,168,79,.06)
    }

.hero-highlights {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
    margin-top: 42px
}

    .hero-highlights div {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #a9b7c4;
        font-size: 10px
    }

    .hero-highlights img {
        width: 24px;
        height: 24px;
        filter: drop-shadow(0 0 7px rgba(214,168,79,.3));
        color: #d6a84f
    }

.hero-visual {
    position: relative;
    min-height: 560px;
    display: grid;
    place-items: center
}

    .hero-visual:before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle,#d6a84f 0,rgba(214,168,79,.12) 28%,transparent 68%);
        filter: blur(10px);
        opacity: .45
    }

    .hero-visual > img {
        position: relative;
        width: 100%;
        max-width: 640px;
        filter: drop-shadow(0 35px 80px rgba(0,0,0,.38));
        animation: heroFloat 7s ease-in-out infinite
    }

.hero-stamp {
    position: absolute;
    left: 4%;
    bottom: 12%;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(214,168,79,.28);
    border-radius: 12px;
    background: rgba(6,24,39,.72);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 50px rgba(0,0,0,.25)
}

    .hero-stamp strong {
        font-family: Poppins;
        font-size: 22px;
        color: #e9ca72
    }

    .hero-stamp span {
        font-size: 9px;
        color: #9aabba;
        margin-top: 3px
    }

.trust-strip {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.015)
}

    .trust-strip > div {
        padding: 24px 20px;
        display: grid;
        grid-template-columns: 30px 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        border-right: 1px solid rgba(255,255,255,.06)
    }

        .trust-strip > div:last-child {
            border-right: 0
        }

    .trust-strip img {
        grid-row: 1/3;
        width: 23px;
        height: 23px;
        margin-top: 2px;
        color: #d6a84f
    }

    .trust-strip strong {
        font-size: 12px;
        color: #f1f5f8
    }

    .trust-strip span {
        font-size: 10px;
        color: #7e91a4;
        margin-top: 4px
    }

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px
}

    .section-heading h2 {
        font-family: Georgia,Poppins,serif;
        color: #fff;
        font-size: clamp(30px,4vw,52px);
        margin: 10px 0 0
    }

    .section-heading p {
        max-width: 500px;
        color: #8fa1b3;
        font-size: 12px;
        line-height: 1.8;
        margin: 0
    }

.product-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.lux-card {
    position: relative;
    border: 1px solid rgba(214,168,79,.12);
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(180deg,rgba(9,31,49,.9),rgba(5,19,31,.92));
    box-shadow: 0 18px 50px rgba(0,0,0,.15);
    transition: .45s var(--ease)
}

    .lux-card:hover {
        transform: translateY(-8px);
        border-color: rgba(214,168,79,.34);
        box-shadow: 0 28px 70px rgba(0,0,0,.27)
    }

.card-media, .service-media {
    position: relative;
    overflow: hidden;
    background: #0a2135
}

.card-media {
    height: 280px
}

    .card-media img, .service-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .7s var(--ease)
    }

.lux-card:hover .card-media img, .service-card:hover .service-media img {
    transform: scale(1.06)
}

.media-shine {
    position: absolute;
    inset: -20% -55% auto;
    height: 120px;
    transform: rotate(-20deg);
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);
    animation: none
}

.lux-card:hover .media-shine {
    animation: shine 1.15s ease
}

.card-content {
    padding: 21px
}

.card-kicker {
    color: #d6a84f;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px
}

.card-content h3, .service-content h3 {
    font-family: Poppins;
    color: #fff;
    font-size: 17px;
    margin: 8px 0 8px
}

.card-content p, .service-content p {
    color: #8fa1b3;
    font-size: 12px;
    line-height: 1.8;
    margin: 0
}

.card-link {
    display: inline-flex;
    gap: 7px;
    color: #e1ba62;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    margin-top: 17px
}

.about-split {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 55px;
    align-items: center
}

.about-media {
    position: relative
}

    .about-media img {
        width: 100%;
        display: block;
        border-radius: 18px;
        border: 1px solid rgba(214,168,79,.2);
        box-shadow: 0 25px 70px rgba(0,0,0,.22)
    }

.corner-label {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 8px 11px;
    border: 1px solid rgba(214,168,79,.25);
    background: rgba(4,18,30,.78);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    font-size: 9px;
    color: #e3c87c;
    letter-spacing: 1.2px
}

.about-copy h2 {
    font-family: Georgia,Poppins,serif;
    font-size: clamp(34px,4vw,56px);
    color: #fff;
    margin: 10px 0 18px
}

.about-copy p {
    color: #99aaba;
    line-height: 1.9;
    font-size: 13px
}

.about-facts {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin: 27px 0
}

    .about-facts div {
        padding: 13px;
        border-top: 1px solid rgba(214,168,79,.22)
    }

    .about-facts strong {
        display: block;
        color: #ebca72;
        font-size: 14px
    }

    .about-facts span {
        display: block;
        color: #718499;
        font-size: 9px;
        margin-top: 4px
    }

.service-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.service-card {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;
    overflow: hidden;
    background: rgba(8,28,45,.75);
    transition: .45s var(--ease)
}

    .service-card:hover {
        transform: translateY(-7px);
        border-color: rgba(214,168,79,.32);
        box-shadow: 0 28px 65px rgba(0,0,0,.25)
    }

.service-media {
    height: 210px
}

.service-content {
    padding: 19px
}

.service-icon-wrap {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(214,168,79,.3);
    background: rgba(214,168,79,.07);
    margin-bottom: 12px
}

.service-icon-text {
    color: #e8c778
}

.stats-panel {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 35px;
    padding: 34px;
    border: 1px solid rgba(214,168,79,.17);
    border-radius: 18px;
    background: linear-gradient(135deg,rgba(214,168,79,.08),rgba(8,32,51,.82));
    box-shadow: 0 25px 70px rgba(0,0,0,.14)
}

.stats-heading h2 {
    font-family: Georgia,Poppins,serif;
    font-size: 40px;
    color: #fff;
    margin: 10px 0 12px
}

.stats-heading p {
    color: #91a3b3;
    line-height: 1.8;
    font-size: 12px
}

.stats-grid-public {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px
}

    .stats-grid-public > div {
        padding: 20px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.06);
        background: rgba(3,17,30,.35)
    }

    .stats-grid-public strong {
        display: block;
        color: #f0cd75;
        font-family: Poppins;
        font-size: 24px
    }

    .stats-grid-public span {
        display: block;
        color: #8192a5;
        font-size: 10px;
        margin-top: 4px
    }

.cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 35px;
    border: 1px solid rgba(214,168,79,.28);
    border-radius: 18px;
    background: radial-gradient(circle at 85% 50%,rgba(214,168,79,.14),transparent 30%),linear-gradient(135deg,#0b2a46,#061827)
}

    .cta-panel h2 {
        font-family: Georgia,Poppins,serif;
        font-size: 42px;
        color: #fff;
        margin: 9px 0
    }

    .cta-panel p {
        color: #91a4b6;
        font-size: 12px;
        line-height: 1.8;
        margin: 0;
        max-width: 680px
    }

.cta-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0
}

.contact-layout {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 35px;
    align-items: start
}

.contact-intro h2 {
    font-family: Georgia,Poppins,serif;
    font-size: 50px;
    color: #fff;
    margin: 10px 0 14px
}

.contact-intro > p {
    color: #91a4b6;
    font-size: 13px;
    line-height: 1.9;
    max-width: 620px
}

.contact-list {
    display: grid;
    gap: 14px;
    margin-top: 26px
}

    .contact-list > div {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,.05)
    }

.contact-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(214,168,79,.23);
    border-radius: 11px;
    background: rgba(214,168,79,.05);
    flex-shrink: 0
}

    .contact-icon img {
        width: 18px;
        height: 18px;
        color: #d6a84f
    }

.contact-list small {
    display: block;
    color: #6f8296;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px
}

.contact-list strong, .contact-list a {
    display: block;
    color: #e4eaf0;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 3px
}

.contact-form-wrap {
    padding: 1px;
    border-radius: 18px;
    background: linear-gradient(140deg,rgba(214,168,79,.28),rgba(255,255,255,.06),rgba(214,168,79,.12))
}

.contact-form {
    padding: 27px;
    border-radius: 17px;
    background: #071a2a;
    box-shadow: 0 22px 70px rgba(0,0,0,.2)
}

.form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px
}

.form-group-public, .contact-form > div {
    margin-bottom: 13px
}

.contact-form label {
    display: block;
    color: #dce5ec;
    font-size: 10px;
    font-weight: 600;
    margin: 0 0 7px
}

    .contact-form label b {
        color: #e5bb60
    }

.public-input {
    width: 100%;
    height: 46px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;
    background: #0b253c;
    color: #fff;
    padding: 0 13px;
    outline: none;
    transition: .25s
}

    .public-input::placeholder {
        color: #62778d
    }

    .public-input:focus {
        border-color: #d6a84f;
        box-shadow: 0 0 0 3px rgba(214,168,79,.08);
        background: #0d2a43
    }

.contact-form textarea.public-input {
    height: 135px;
    padding: 12px;
    resize: vertical
}

.custom-select {
    position: relative
}

.custom-select-trigger {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;
    background: #0b253c;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 11px
}

.custom-select.open .custom-select-trigger {
    border-color: #d6a84f;
    box-shadow: 0 0 0 3px rgba(214,168,79,.08)
}

.custom-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 7px);
    padding: 7px;
    display: none;
    border: 1px solid rgba(214,168,79,.22);
    border-radius: 11px;
    background: #0c243a;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    z-index: 50
}

.custom-select.open .custom-select-menu {
    display: grid;
    animation: drop .18s ease both
}

.custom-select-menu button {
    height: 36px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #cbd6de;
    text-align: left;
    padding: 0 10px;
    font-size: 11px;
    cursor: pointer
}

    .custom-select-menu button:hover {
        background: rgba(214,168,79,.1);
        color: #f0cd75
    }

.form-submit {
    width: 100%;
    margin-top: 4px
}

.form-ok, .form-error {
    margin-top: 13px;
    padding: 11px 12px;
    border-radius: 9px;
    font-size: 11px
}

.form-ok {
    color: #9ce4ad;
    background: rgba(40,167,69,.08);
    border: 1px solid rgba(40,167,69,.17)
}

.form-error {
    color: #ff9ca7;
    background: rgba(220,53,69,.08);
    border: 1px solid rgba(220,53,69,.16)
}

.empty-public {
    padding: 110px 0;
    text-align: center
}

.site-footer {
    padding: 70px 0 22px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: #03121f
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1.15fr 1fr;
    gap: 35px
}

.footer-logo {
    width: 210px
}

.footer-top p {
    max-width: 450px;
    color: #72859a;
    font-size: 11px;
    line-height: 1.8
}

.footer-top > a, .footer-top > div:not(.footer-brand-block) > a {
    display: block;
    color: #91a4b6;
    font-size: 11px;
    text-decoration: none;
    margin: 10px 0;
    transition: .2s
}

    .footer-top > a:hover, .footer-top > div > a:hover {
        color: #d6a84f
    }

.footer-kicker {
    display: block;
    color: #d6a84f;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    margin-bottom: 12px
}

.footer-copy {
    display: block;
    color: #788a9e;
    font-size: 10px;
    line-height: 1.8;
    margin: 9px 0
}

.footer-socials {
    display: flex;
    gap: 8px;
    margin-top: 16px
}

.social-link {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(214,168,79,.15);
    border-radius: 9px;
    background: rgba(255,255,255,.02);
    color: #d6a84f;
    transition: .3s
}

    .social-link:hover {
        transform: translateY(-3px);
        border-color: #d6a84f;
        background: rgba(214,168,79,.07)
    }

    .social-link img {
        width: 16px;
        height: 16px;
        color: currentColor
    }

.social-fallback {
    font-size: 13px
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 45px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.05);
    color: #5f7387;
    font-size: 9px
}

body.js-enabled .reveal {
    opacity: 0;
    will-change: opacity,transform;
    transition: opacity var(--reveal-duration,700ms) var(--ease),transform var(--reveal-duration,700ms) var(--ease)
}

    body.js-enabled .reveal.in-view {
        opacity: 1;
        transform: none
    }

body.js-enabled .fade-up {
    transform: translateY(36px)
}

body.js-enabled .fade-down {
    transform: translateY(-36px)
}

body.js-enabled .fade-left {
    transform: translateX(38px)
}

body.js-enabled .fade-right {
    transform: translateX(-38px)
}

body.js-enabled .zoom-in {
    transform: scale(.93)
}

body.js-enabled .scale {
    transform: scale(.96)
}

@keyframes heroFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-10px) rotate(-.7deg)
    }
}

@keyframes shine {
    0% {
        transform: translate(-65%) rotate(-20deg)
    }

    100% {
        transform: translate(180%) rotate(-20deg)
    }
}

@keyframes drop {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(max-width:1050px) {
    .main-nav {
        gap: 18px
    }

    .hero-grid {
        gap: 30px
    }

    .hero-highlights {
        grid-template-columns: repeat(2,1fr)
    }

    .product-grid, .service-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .footer-top {
        grid-template-columns: 1.6fr 1fr 1fr
    }

        .footer-top > div:last-child {
            display: none
        }

    .trust-strip {
        grid-template-columns: repeat(2,1fr)
    }

        .trust-strip > div:nth-child(2) {
            border-right: 0
        }
}

@media(max-width:820px) {
    .main-nav {
        position: absolute;
        left: 4vw;
        right: 4vw;
        top: calc(100% + 8px);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px;
        border: 1px solid rgba(214,168,79,.18);
        border-radius: 14px;
        background: #061827;
        box-shadow: 0 22px 65px rgba(0,0,0,.35)
    }

        .main-nav.open {
            display: flex;
            animation: drop .2s ease both
        }

        .main-nav a {
            padding: 12px 10px
        }

    .mobile-menu-btn {
        display: block
    }

    .brand-wide img {
        width: 82px !important;
        max-height: 66px;
    }

    .page-shell {
        padding-top: 100px
    }

    .hero-grid, .about-split, .stats-panel, .contact-layout {
        grid-template-columns: 1fr
    }

    .hero-visual {
        order: -1;
        min-height: 350px
    }

        .hero-visual > img {
            max-width: 520px
        }

    .hero-stamp {
        left: 14%;
        bottom: 6%
    }

    .cta-panel {
        align-items: flex-start;
        flex-direction: column
    }

    .cta-actions {
        width: 100%
    }

        .cta-actions .gold-btn, .cta-actions .outline-btn {
            flex: 1
        }

    .contact-layout {
        gap: 22px
    }
}

@media(max-width:600px) {
    .nav-wrap {
        min-height: 70px
    }

    .hero-copy h1 {
        font-size: 43px
    }

    .hero-copy p {
        font-size: 13px
    }

    .hero-visual {
        min-height: 270px
    }

    .hero-stamp {
        left: 4%;
        bottom: 2%
    }

    .hero-highlights {
        grid-template-columns: 1fr 1fr;
        gap: 15px
    }

    .public-section {
        padding: 75px 0
    }

    .section-hero {
        min-height: auto;
        padding-top: 84px
    }

    .section-heading {
        display: block
    }

        .section-heading p {
            margin-top: 15px
        }

    .product-grid, .service-grid, .form-two, .about-facts, .footer-top, .stats-grid-public {
        grid-template-columns: 1fr
    }

    .trust-strip {
        grid-template-columns: 1fr
    }

        .trust-strip > div, .trust-strip > div:nth-child(2) {
            border-right: 0;
            border-bottom: 1px solid rgba(255,255,255,.06)
        }

            .trust-strip > div:last-child {
                border-bottom: 0
            }

    .card-media {
        height: 235px
    }

    .service-media {
        height: 200px
    }

    .about-copy h2, .contact-intro h2, .stats-heading h2, .cta-panel h2 {
        font-size: 36px
    }

    .about-facts {
        gap: 0
    }

        .about-facts div {
            border-top: 1px solid rgba(214,168,79,.18);
            padding: 12px 0
        }

    .cta-panel {
        padding: 25px
    }

    .cta-actions {
        flex-direction: column
    }

    .footer-bottom {
        flex-direction: column;
        line-height: 1.7
    }

    .footer-top > div:last-child {
        display: block
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .hero-visual > img, .reveal {
        animation: none !important;
        transition: none !important
    }
}

/* =====================================================
   Dynamic Theme System - Public Website
   ===================================================== */
body {
    --site-bg: var(--dark-bg);
    --site-surface: var(--dark-surface);
    --site-surface-alt: var(--dark-surface-alt);
    --site-text: var(--dark-text);
    --site-muted: var(--dark-muted);
    --site-border: var(--dark-border);
    --site-header: var(--dark-header);
    --site-footer: var(--dark-footer);
    --site-input: var(--dark-input);
    --site-shadow: var(--dark-shadow);
    background: var(--site-bg) !important;
    color: var(--site-text) !important;
}

    body[data-theme="light"] {
        --site-bg: var(--light-bg);
        --site-surface: var(--light-surface);
        --site-surface-alt: var(--light-surface-alt);
        --site-text: var(--light-text);
        --site-muted: var(--light-muted);
        --site-border: var(--light-border);
        --site-header: var(--light-header);
        --site-footer: var(--light-footer);
        --site-input: var(--light-input);
        --site-shadow: var(--light-shadow);
    }

.site-header {
    background: var(--site-header) !important;
    border-color: var(--site-border) !important;
}

.nav-bar {
    background: color-mix(in srgb,var(--site-header) 96%,transparent) !important;
    border-color: var(--site-border) !important;
}

.main-nav a:not(.nav-cta), .footer-copy, .footer-top p {
    color: var(--site-muted) !important;
}

.hero-copy h1, .section-heading h2, .about-copy h2, .stats-heading h2, .cta-panel h2, .contact-intro h2 {
    color: var(--site-text) !important;
}

.hero-copy p, .section-heading p, .about-copy p, .contact-intro > p {
    color: var(--site-muted) !important;
}

.lux-card, .service-card, .stats-panel, .contact-form, .contact-form-wrap, .cta-panel, .trust-strip, .stats-grid-public > div {
    background: var(--site-surface) !important;
    border-color: var(--site-border) !important;
    box-shadow: 0 24px 65px var(--site-shadow);
}

.card-content h3, .service-content h3, .contact-list strong, .contact-list a {
    color: var(--site-text) !important;
}

.card-content p, .service-content p, .contact-list small, .stats-grid-public span {
    color: var(--site-muted) !important;
}

.public-input, .custom-select-trigger {
    color: var(--site-text) !important;
    background: var(--site-input) !important;
    border-color: var(--site-border) !important;
}

    .public-input::placeholder {
        color: var(--site-muted) !important;
    }

.custom-select-menu {
    background: var(--site-surface) !important;
    border-color: var(--site-border) !important;
    box-shadow: 0 20px 50px var(--site-shadow);
}

    .custom-select-menu button {
        color: var(--site-text) !important;
    }

.site-footer {
    background: var(--site-footer) !important;
    border-color: var(--site-border) !important;
}

.footer-kicker, .footer-top > a:hover, .footer-top > div > a:hover {
    color: var(--gold) !important;
}

.footer-top > a, .footer-top > div:not(.footer-brand-block) > a {
    color: var(--site-muted) !important;
}

[dir="rtl"] body {
    text-align: right;
}

[dir="rtl"] .main-nav {
    direction: rtl;
}

[dir="rtl"] .hero-copy, .rtl .hero-copy {
    text-align: right;
}

[dir="rtl"] .contact-list > div {
    flex-direction: row-reverse;
}

[dir="rtl"] .contact-form {
    direction: rtl;
}

[dir="rtl"] .custom-select-menu button {
    text-align: right;
}

@media(max-width:820px) {
    [dir="rtl"] .main-nav {
        left: 4vw;
        right: 4vw;
    }
}

body[data-theme="light"] .public-section,
body[data-theme="light"] .public-section:nth-child(even),
body[data-theme="light"] .section-hero {
    background: var(--site-bg) !important;
}

    body[data-theme="light"] .section-hero:after {
        background: radial-gradient(circle at 72% 62%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 28%);
    }

body[data-theme="light"] .hero-copy h1:after {
    background: linear-gradient(90deg,var(--gold),transparent);
}

body[data-theme="light"] .hero-stamp {
    background: color-mix(in srgb,var(--site-surface) 88%,transparent);
    border-color: var(--site-border);
    box-shadow: 0 18px 50px var(--site-shadow);
}

    body[data-theme="light"] .hero-stamp span,
    body[data-theme="light"] .hero-highlights div {
        color: var(--site-muted);
    }

body[data-theme="light"] .outline-btn {
    color: var(--site-text);
    background: var(--site-surface);
    border-color: color-mix(in srgb,var(--gold) 38%,var(--site-border));
}

body[data-theme="light"] .nav-cta {
    color: #fff !important;
}

body[data-theme="light"] .mobile-menu-btn span {
    background: var(--gold);
}

body[data-theme="light"] .trust-strip {
    background: var(--site-surface-alt) !important;
}

body[data-theme="light"] .about-media img {
    box-shadow: 0 25px 70px var(--site-shadow);
}

body[data-theme="light"] .corner-label {
    background: color-mix(in srgb,var(--site-surface) 90%,transparent);
}

body[data-theme="light"] .hero-visual > img {
    filter: drop-shadow(0 25px 55px var(--site-shadow));
}

[dir="rtl"] .nav-cta span {
    margin-left: 0;
    margin-right: 6px;
}

/* ================================
   Bilingual page builder
================================ */
.builder-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 18px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ui-border,#dde3ea);
}

    .builder-section-title .builder-section-icon {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: linear-gradient(135deg,var(--gold,#d6a84f),color-mix(in srgb,var(--gold,#d6a84f) 55%,#fff));
        color: #122033;
        font-size: 10px;
        font-weight: 800;
    }

    .builder-section-title strong {
        display: block;
        font-size: 13px;
        color: var(--ui-text,#102033);
    }

    .builder-section-title small {
        display: block;
        margin-top: 3px;
        color: var(--ui-muted,#66758a);
        font-size: 10px;
    }

.content-ar-preview {
    margin-top: 4px;
    color: #c89a3d;
    font-size: 11px;
}

.muted-line {
    margin-top: 3px;
    color: #7c8da0;
    font-size: 10px;
}

.generic-builder-section {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.35fr);
    gap: 40px;
    align-items: center;
    padding: clamp(38px,6vw,90px) 0;
}

    .generic-builder-section .generic-media {
        border-radius: var(--radius,14px);
        overflow: hidden;
        box-shadow: 0 20px 55px var(--site-shadow);
    }

        .generic-builder-section .generic-media img {
            display: block;
            width: 100%;
            max-height: 560px;
            object-fit: cover;
        }

.generic-copy h2 {
    margin: 8px 0 14px;
}

.generic-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 12px;
}

.generic-description {
    color: var(--site-muted);
    font-size: 14px;
    line-height: 1.95;
    white-space: pre-line;
}

@media(max-width:820px) {
    .generic-builder-section {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* =====================================================
   Public polish pass — mobile header, footer and icons
   ===================================================== */
.site-header {
    overflow: visible;
}

.social-link img,
.contact-icon img {
    width: 18px !important;
    height: 18px !important;
    display: block;
    filter: brightness(0) saturate(100%) invert(74%) sepia(31%) saturate(705%) hue-rotate(359deg) brightness(92%) contrast(87%);
}

.social-link {
    box-shadow: inset 0 0 0 1px rgba(214,168,79,.02);
}

.contact-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
}

.contact-list > div {
    align-items: center;
    min-width: 0;
}

    .contact-list > div > div:last-child {
        min-width: 0;
        flex: 1;
    }

.contact-list strong, .contact-list a {
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.site-footer .footer-logo {
    max-width: 100%;
    height: auto;
}

.site-footer .footer-brand-block {
    min-width: 0;
}

.main-nav {
    z-index: 1001;
}

.mobile-menu-btn {
    width: 42px;
    height: 42px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid rgba(214,168,79,.18);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
}

    .mobile-menu-btn span {
        width: 20px !important;
        margin: 3px 0 !important;
    }

@media(max-width:820px) {
    .nav-bar {
        background: color-mix(in srgb,var(--site-header) 98%,transparent) !important;
    }

    .nav-wrap {
        min-height: 66px !important;
        width: min(var(--container),94vw) !important;
        gap: 10px;
    }

    .brand-wide {
        min-width: 0;
        max-width: calc(100% - 54px);
    }

        .brand-wide img {
            width: 82px !important;
            max-width: 100%;
            height: auto;
        }

    .mobile-menu-btn {
        display: flex !important;
        flex: 0 0 42px;
    }

    .main-nav {
        left: 12px !important;
        right: 12px !important;
        top: calc(100% + 6px) !important;
        padding: 10px !important;
        background: var(--site-surface) !important;
        border-color: var(--site-border) !important;
        box-shadow: 0 24px 60px var(--site-shadow) !important;
        border-radius: 16px !important;
    }

        .main-nav a {
            color: var(--site-text) !important;
            border-radius: 10px;
            padding: 12px 13px !important;
            font-size: 11px !important;
        }

            .main-nav a:hover {
                background: color-mix(in srgb,var(--gold) 8%,transparent);
            }

        .main-nav .nav-cta {
            color: #061827 !important;
        }

    .site-footer {
        padding: 56px 0 18px;
    }

    .footer-top {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 28px !important;
    }

    .footer-logo {
        width: 190px !important;
    }

    .footer-socials {
        gap: 9px !important;
    }

    .social-link {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
}

@media(max-width:600px) {
    .nav-wrap {
        min-height: 62px !important;
    }

    .brand-wide img {
        width: 72px !important;
        max-height: 58px;
    }

    .mobile-menu-btn {
        width: 42px !important;
        height: 42px !important;
    }

    .page-shell {
        padding-top: 96px;
    }

    .public-section {
        padding: 66px 0;
    }

    .section-hero {
        padding-top: 78px;
    }

    .hero-grid {
        min-height: 0;
    }

    .hero-visual {
        min-height: 240px !important;
    }

        .hero-visual > img {
            max-width: 100% !important;
        }

    .hero-copy h1 {
        font-size: clamp(34px,10vw,48px) !important;
    }

    .hero-copy p {
        font-size: 12px;
        line-height: 1.8;
    }

    .hero-highlights {
        gap: 10px !important;
    }

        .hero-highlights div {
            font-size: 9px;
        }

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

    .about-copy h2, .contact-intro h2, .stats-heading h2, .cta-panel h2 {
        font-size: 34px !important;
    }

    .contact-list {
        gap: 0;
        margin-top: 22px;
    }

        .contact-list > div {
            gap: 13px;
            padding: 15px 0;
        }

    .contact-icon {
        width: 44px;
        height: 44px;
    }

    .contact-list strong, .contact-list a {
        font-size: 12px;
    }

    .footer-top {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .footer-brand-block {
        padding-bottom: 4px;
    }

    .footer-top p {
        font-size: 11px;
        line-height: 1.9;
    }

    .footer-socials {
        margin-top: 18px !important;
        gap: 10px !important;
    }

    .social-link {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        background: rgba(214,168,79,.055);
    }

    .footer-bottom {
        margin-top: 30px !important;
        padding-top: 16px !important;
    }
}

@media(prefers-reduced-motion:reduce) {
    .mobile-menu-btn, .main-nav, .social-link, .contact-icon {
        transition: none !important;
    }
}

body[data-theme="light"] .mobile-menu-btn {
    background: var(--site-surface-alt) !important;
}

body[data-theme="light"] .main-nav {
    background: var(--site-surface) !important;
}

.media-missing {
    display: grid !important;
    place-items: center;
    background: radial-gradient(circle at 50% 38%,rgba(214,168,79,.14),transparent 28%), linear-gradient(145deg,var(--site-surface-alt),var(--site-bg)) !important;
    min-height: 100%;
}

    .media-missing::before {
        content: "MSA";
        font: 700 32px Poppins;
        color: var(--gold);
        letter-spacing: 4px;
        opacity: .72;
    }

.hero-visual.media-missing {
    min-height: 300px;
}

.about-media.media-missing {
    min-height: 320px;
    border-radius: 18px;
    overflow: hidden;
}

.generic-media.media-missing {
    min-height: 280px;
    border-radius: var(--radius);
    overflow: hidden;
}

.card-media.media-missing::before, .service-media.media-missing::before {
    font-size: 22px;
}

@media(max-width:600px) {
    .about-media.media-missing, .generic-media.media-missing {
        min-height: 230px;
    }
}

/* =========================================================
   MSA GOLD — Premium Utility Header
   ========================================================= */

.market-strip {
    position: relative;
    z-index: 1002;
    min-height: 42px;
    padding: 6px 0;
    background: var(--site-header, #ffffff);
    border-bottom: 1px solid var(--site-border, #e7dfcf);
    color: var(--site-muted, #657384);
}

.market-inner {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.market-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
}

.market-company {
    color: var(--gold, #c88a24);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.05px;
    white-space: nowrap;
}

.market-divider {
    width: 1px;
    height: 14px;
    background: var(--site-border, #ded6c6);
    flex: 0 0 1px;
}

.market-location {
    color: var(--site-muted, #697787);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .25px;
    white-space: nowrap;
}

.market-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    direction: ltr;
}

.market-contact,
.market-domain {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--site-muted, #5d6c7c) !important;
    text-decoration: none !important;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

    .market-contact:hover {
        color: var(--gold, #c88a24) !important;
    }

.market-domain {
    padding-left: 3px;
    font-weight: 600;
    opacity: .82;
}

.contact-mini-icon {
    margin-right: 5px;
    font-size: 10px;
    color: var(--gold, #c88a24);
}

/* ---------- Language switch ---------- */

.language-switch {
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 9px 3px 4px;
    border: 1px solid color-mix( in srgb, var(--gold, #c88a24) 32%, var(--site-border, #e4dfd4) );
    border-radius: 999px;
    background: color-mix( in srgb, var(--gold, #c88a24) 6%, var(--site-surface, #ffffff) );
    color: var(--site-text, #243444) !important;
    text-decoration: none !important;
    font-size: 8px;
    font-weight: 800;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

    .language-switch:hover {
        transform: translateY(-1px);
        border-color: var(--gold, #c88a24);
        box-shadow: 0 5px 16px color-mix(in srgb, var(--gold, #c88a24) 12%, transparent);
    }

.language-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient( 135deg, var(--gold, #c88a24), var(--accent, #d6a84f) );
    color: #162535;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .2px;
}

.language-label {
    color: var(--site-text, #243444);
    white-space: nowrap;
}

.language-arrow {
    color: var(--gold, #c88a24);
    font-size: 10px;
    line-height: 1;
}

/* ---------- Dark mode ---------- */

.theme-toggle-pill {
    height: 30px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 7px !important;
    padding: 3px 9px 3px 5px !important;
    border: 1px solid color-mix( in srgb, var(--gold, #c88a24) 28%, var(--site-border, #e4dfd4) ) !important;
    border-radius: 999px !important;
    background: var(--site-surface-alt, #f7f8fa) !important;
    color: var(--site-text, #243444) !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

    .theme-toggle-pill:hover {
        transform: translateY(-1px);
        border-color: var(--gold, #c88a24) !important;
    }

.theme-icon {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix( in srgb, var(--gold, #c88a24) 12%, transparent );
    color: var(--gold, #c88a24);
    font-size: 11px;
    line-height: 1;
}

.theme-toggle-track {
    position: relative;
    width: 30px;
    height: 17px;
    flex: 0 0 30px;
    border-radius: 999px;
    background: #8a96a3;
    display: block;
    transition: background .25s ease;
}

.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,.28);
    transition: transform .25s ease, background .25s ease;
}

.theme-toggle-text {
    min-width: 34px;
    color: var(--site-text, #243444);
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: .45px;
    text-align: center;
}

/* JS only needs to toggle .is-on; the visual label remains stable. */
.theme-toggle-pill.is-on .theme-toggle-track {
    background: var(--gold, #d6a84f);
}

.theme-toggle-pill.is-on .theme-toggle-thumb {
    transform: translateX(13px);
}

.theme-toggle-pill.is-on .theme-icon {
    background: color-mix( in srgb, var(--gold, #d6a84f) 18%, transparent );
}

body[data-dark-mode-enabled="false"] .theme-toggle-pill,
body[data-dark-mode-enabled="false"] .site-theme-toggle {
    display: none !important;
}

/* ---------- RTL ---------- */

[dir="rtl"] .market-inner {
    direction: rtl;
}

[dir="rtl"] .market-brand {
    flex-direction: row;
}

[dir="rtl"] .market-actions {
    direction: ltr;
}

[dir="rtl"] .market-contact,
[dir="rtl"] .market-domain {
    direction: ltr;
}

[dir="rtl"] .theme-toggle-thumb {
    left: auto;
    right: 2px;
}

[dir="rtl"] .theme-toggle-pill.is-on .theme-toggle-thumb {
    transform: translateX(-13px);
}

/* ---------- Dark theme ---------- */

body[data-theme="dark"] .market-strip {
    background: color-mix( in srgb, var(--site-header, #061827) 96%, #000 4% );
}

body[data-theme="dark"] .language-switch,
body[data-theme="dark"] .theme-toggle-pill {
    background: color-mix( in srgb, #ffffff 5%, var(--site-surface, #081c2d) ) !important;
}

body[data-theme="dark"] .market-company {
    color: var(--gold, #d6a84f);
}

body[data-theme="dark"] .market-divider {
    background: rgba(255,255,255,.12);
}

/* ---------- Tablet ---------- */

@media (max-width: 1050px) {
    .market-inner {
        gap: 15px;
    }

    .market-location {
        display: none;
    }

    .market-company {
        font-size: 8.5px;
    }

    .market-contact,
    .market-domain {
        font-size: 8.5px;
    }
}

/* ---------- Mobile ---------- */

@media (max-width: 820px) {
    .market-strip {
        min-height: 40px;
        padding: 5px 0;
    }

    .market-inner {
        min-height: 30px;
        width: min(var(--container), 94vw);
        gap: 8px;
    }

    .market-company {
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 7.5px;
        letter-spacing: .55px;
    }

    .market-divider,
    .market-location {
        display: none;
    }

    .market-actions {
        gap: 5px;
    }

    .market-contact,
    .market-domain {
        display: none;
    }

    .language-switch,
    .theme-toggle-pill {
        height: 27px !important;
    }

    .language-switch {
        padding-right: 7px;
        gap: 5px;
    }

    .language-icon {
        width: 20px;
        height: 20px;
        font-size: 6.5px;
    }

    .language-label {
        font-size: 7px;
    }

    .theme-icon {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    .theme-toggle-track {
        width: 27px;
        height: 16px;
        flex-basis: 27px;
    }

    .theme-toggle-thumb {
        width: 12px;
        height: 12px;
    }

    .theme-toggle-pill.is-on .theme-toggle-thumb {
        transform: translateX(11px);
    }

    [dir="rtl"] .theme-toggle-pill.is-on .theme-toggle-thumb {
        transform: translateX(-11px);
    }
}

@media (max-width: 480px) {
    .market-company {
        max-width: 145px;
        font-size: 7px;
    }

    .language-label {
        display: none;
    }

    .language-switch {
        width: 29px;
        padding: 3px;
        justify-content: center;
    }

    .language-arrow {
        display: none;
    }

    .theme-toggle-text {
        display: none;
    }

    .theme-toggle-pill {
        padding: 3px 5px !important;
    }
}


/* =========================================================
   MSA — Requested visual updates
   1) Smaller header logo
   2) Contact section direction: EN = form left / info right,
      AR = info left / form right
   3) Premium product-page entrance animation
   ========================================================= */

/* Header logo: keep the square company mark compact inside the nav. */
.brand-wide {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

    .brand-wide img {
        width: 92px !important;
        max-width: 92px;
        height: auto;
        max-height: 74px;
        object-fit: contain;
    }

/* Contact section direction */
[dir="ltr"] .contact-layout {
    direction: ltr;
}

[dir="ltr"] .contact-intro {
    order: 2;
}

[dir="ltr"] .contact-form-wrap {
    order: 1;
}

[dir="rtl"] .contact-layout {
    direction: rtl;
}

[dir="rtl"] .contact-intro {
    order: 1;
}

[dir="rtl"] .contact-form-wrap {
    order: 2;
}

/* Product page — cinematic, luxury-style reveal */
.products-showcase {
    isolation: isolate;
    overflow: hidden;
}

    .products-showcase::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        left: 50%;
        top: 42%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--gold) 14%, transparent), transparent 68%);
        filter: blur(10px);
        opacity: .65;
        pointer-events: none;
        z-index: -1;
        animation: productsAura 7s ease-in-out infinite;
    }

    .products-showcase .section-heading h2 {
        position: relative;
    }

        .products-showcase .section-heading h2::after {
            content: "";
            display: block;
            width: 0;
            height: 2px;
            margin-top: 13px;
            background: linear-gradient(90deg, var(--gold), transparent);
            transition: width 1.1s var(--ease);
        }

    .products-showcase .section-heading.in-view h2::after {
        width: 105px;
    }

body.js-enabled .products-showcase .product-card {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(54px) scale(.88) rotateX(8deg);
    transform-origin: center bottom;
    perspective: 900px;
    transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

    body.js-enabled .products-showcase .product-card.in-view {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1) rotateX(0);
    }

    body.js-enabled .products-showcase .product-card:nth-child(2) {
        transition-delay: 110ms;
    }

    body.js-enabled .products-showcase .product-card:nth-child(3) {
        transition-delay: 220ms;
    }

    body.js-enabled .products-showcase .product-card:nth-child(4) {
        transition-delay: 330ms;
    }

    body.js-enabled .products-showcase .product-card:nth-child(5) {
        transition-delay: 440ms;
    }

    body.js-enabled .products-showcase .product-card:nth-child(6) {
        transition-delay: 550ms;
    }

.products-showcase .product-card {
    transform-style: preserve-3d;
}

    .products-showcase .product-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(125deg, transparent 20%, color-mix(in srgb, var(--gold) 70%, transparent), transparent 70%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity .45s ease;
        pointer-events: none;
        z-index: 3;
    }

    .products-showcase .product-card:hover::before {
        opacity: 1;
    }

    .products-showcase .product-card:hover {
        transform: translateY(-12px) scale(1.018) !important;
        box-shadow: 0 32px 85px color-mix(in srgb, var(--gold) 18%, rgba(0,0,0,.3));
    }

.products-showcase .card-media {
    position: relative;
}

    .products-showcase .card-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.16) 45%, transparent 67%);
        transform: translateX(-130%);
        transition: transform .9s var(--ease);
        pointer-events: none;
    }

.products-showcase .product-card:hover .card-media::after {
    transform: translateX(130%);
}

.products-showcase .media-shine {
    animation: productShine 4.5s ease-in-out infinite;
    animation-delay: 1.1s;
}

@keyframes productShine {
    0%, 58%, 100% {
        transform: translateX(-70%) rotate(-20deg);
        opacity: 0;
    }

    66% {
        transform: translateX(120%) rotate(-20deg);
        opacity: 1;
    }

    73% {
        transform: translateX(180%) rotate(-20deg);
        opacity: 0;
    }
}

@keyframes productsAura {
    0%, 100% {
        transform: translate(-50%, -50%) scale(.9);
        opacity: .45;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: .8;
    }
}

@media(max-width:820px) {
    .brand-wide img {
        width: 82px !important;
        max-width: 82px;
        max-height: 66px;
    }

    [dir="ltr"] .contact-intro,
    [dir="ltr"] .contact-form-wrap,
    [dir="rtl"] .contact-intro,
    [dir="rtl"] .contact-form-wrap {
        order: initial;
    }
}

@media(max-width:600px) {
    .brand-wide img {
        width: 72px !important;
        max-width: 72px;
        max-height: 58px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .products-showcase::before,
    .products-showcase .media-shine {
        animation: none !important;
    }
}


/* =====================================================
   FIX: Make SVG Icons Visible on Dark Background
   ===================================================== */

.trust-strip img,
.hero-highlights img,
.contact-icon img {
    filter: brightness(0) saturate(100%) invert(72%) sepia(52%) saturate(700%) hue-rotate(5deg) brightness(94%) contrast(92%);
}

/* Keep icons clear on hover */
.trust-strip > div:hover img,
.hero-highlights div:hover img,
.contact-list > div:hover .contact-icon img {
    filter: brightness(0) saturate(100%) invert(82%) sepia(55%) saturate(900%) hue-rotate(5deg) brightness(100%) contrast(95%);
}

/* Better visibility in light mode */
body[data-theme="light"] .trust-strip img,
body[data-theme="light"] .hero-highlights img,
body[data-theme="light"] .contact-icon img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(55%) saturate(850%) hue-rotate(5deg) brightness(92%) contrast(95%);
}


/* =====================================================
   MSA GOLD — Final requested tweaks
   ===================================================== */

/* Smaller footer logo */
.site-footer .footer-logo {
    width: 85px !important;
    max-width: 85px !important;
    height: auto;
}

/* Continuous hero title typewriter */
.hero-copy h1.typing-title {
    white-space: normal;
}

    .hero-copy h1.typing-title .typing-text {
        display: inline;
    }

    .hero-copy h1.typing-title .typing-cursor {
        display: inline-block;
        width: 3px;
        height: 0.9em;
        margin-left: 5px;
        vertical-align: -0.05em;
        background: var(--gold, #d6a84f);
        border-radius: 2px;
        animation: typingCursorBlink .65s step-end infinite;
    }

@keyframes typingCursorBlink {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

@media(max-width:600px) {
    .site-footer .footer-logo {
        width: 75px !important;
        max-width: 75px !important;
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-copy h1.typing-title .typing-cursor {
        animation: none;
        opacity: 1;
    }
}


/* =====================================================
   FINAL: Smaller Footer Logo
   ===================================================== */

.site-footer .footer-brand-block .footer-logo {
    width: 85px !important;
    max-width: 85px !important;
    height: auto !important;
    display: block;
}

@media (max-width: 600px) {
    .site-footer .footer-brand-block .footer-logo {
        width: 75px !important;
        max-width: 75px !important;
    }
}


/* =====================================================
   FINAL FIX — Navbar moves to the opposite side
   English:
      Navigation LEFT  |  Logo RIGHT
      Order: Home ... Get a Quote

   Arabic:
      Logo LEFT         |  Navigation RIGHT
      Order: Get a Quote ... Home
   ===================================================== */

@media (min-width: 821px) {

    /* Keep the flex axis predictable; do not let RTL
       change the physical placement of the siblings. */
    .nav-wrap {
        direction: ltr;
    }

    /* English: DOM = Logo, MenuButton, Nav
       Reverse the row => Nav on the LEFT, Logo on the RIGHT. */
    html[lang="en"] .nav-wrap,
    html[lang^="en"] .nav-wrap {
        flex-direction: row-reverse;
    }

    /* Arabic: normal row => Logo on the LEFT, Nav on the RIGHT. */
    html[lang="ar"] .nav-wrap,
    html[lang^="ar"] .nav-wrap {
        flex-direction: row;
    }

    /* English keeps the normal page order. */
    html[lang="en"] .main-nav,
    html[lang^="en"] .main-nav {
        direction: ltr;
        flex-direction: row;
    }

    /* Arabic is the exact visual mirror of English. */
    html[lang="ar"] .main-nav,
    html[lang^="ar"] .main-nav {
        direction: ltr;
        flex-direction: row-reverse;
    }
}


/* =====================================================
   CONTINUOUS PRODUCTS LIFT
   Each product rises and falls in sequence forever.
   ===================================================== */

/* =====================================================
   Products Sequential Lift
   One card at a time
   ===================================================== */

.products-showcase .product-card.product-lift {
    animation: productLiftSequence 950ms var(--ease) both !important;
    will-change: transform;
    z-index: 2;
}

@keyframes productLiftSequence {
    0% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(-22px);
    }

    65% {
        transform: translateY(-22px);
    }

    100% {
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .products-showcase .product-card.product-lift {
        animation-duration: 850ms !important;
    }

    @keyframes productLiftSequence {
        0% {
            transform: translateY(0);
        }

        35% {
            transform: translateY(-15px);
        }

        65% {
            transform: translateY(-15px);
        }

        100% {
            transform: translateY(0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .products-showcase .product-card.product-lift {
        animation: none !important;
    }
}

@media (max-width: 600px) {
    .products-showcase .product-card.product-lift {
        animation-duration: 850ms !important;
    }

    @keyframes productLiftSequence {
        0% {
            transform: translateY(0) scale(1) rotateX(0);
        }

        24% {
            transform: translateY(-14px) scale(1.01) rotateX(-.7deg);
        }

        50% {
            transform: translateY(-18px) scale(1.015) rotateX(-1deg);
        }

        74% {
            transform: translateY(-8px) scale(1.005) rotateX(-.3deg);
        }

        100% {
            transform: translateY(0) scale(1) rotateX(0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .products-showcase .product-card.product-lift {
        animation: none !important;
    }
}
/* =====================================================
   CONTINUOUS PRODUCT CARDS LIFT
   ===================================================== */

.products-showcase .product-card.product-lift {
    animation: productLiftSequence 950ms var(--ease) both !important;
    will-change: transform;
    z-index: 2;
}

@keyframes productLiftSequence {
    0% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(-22px);
    }

    65% {
        transform: translateY(-22px);
    }

    100% {
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .products-showcase .product-card.product-lift {
        animation-duration: 850ms !important;
    }

    @keyframes productLiftSequence {
        0% {
            transform: translateY(0);
        }

        35% {
            transform: translateY(-15px);
        }

        65% {
            transform: translateY(-15px);
        }

        100% {
            transform: translateY(0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .products-showcase .product-card.product-lift {
        animation: none !important;
    }
}
/* =====================================================
   HERO TITLE REPEATING ANIMATION
   ===================================================== */

.hero-copy h1 .hero-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(25px);
    filter: blur(4px);
}

.hero-copy h1.hero-title-animate .hero-word {
    animation: heroWordReveal 0.65s var(--ease) forwards;
}

    /* ظهور الكلمات واحدة وراء التانية */

    .hero-copy h1.hero-title-animate .hero-word:nth-child(1) {
        animation-delay: 0s;
    }

    .hero-copy h1.hero-title-animate .hero-word:nth-child(2) {
        animation-delay: 0.07s;
    }

    .hero-copy h1.hero-title-animate .hero-word:nth-child(3) {
        animation-delay: 0.14s;
    }

    .hero-copy h1.hero-title-animate .hero-word:nth-child(4) {
        animation-delay: 0.21s;
    }

    .hero-copy h1.hero-title-animate .hero-word:nth-child(5) {
        animation-delay: 0.28s;
    }

    .hero-copy h1.hero-title-animate .hero-word:nth-child(6) {
        animation-delay: 0.35s;
    }

@keyframes heroWordReveal {
    0% {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
/* =====================================================
   HERO TYPEWRITER ANIMATION
   ===================================================== */

.hero-copy h1 {
    min-height: 3.25em;
}

.hero-type-cursor {
    display: inline-block;
    margin-left: 4px;
    color: #d6a84f;
    font-weight: 400;
    animation: heroCursorBlink 0.7s step-end infinite;
}

@keyframes heroCursorBlink {
    0%, 50% {
        opacity: 1;
    }

    51%, 100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy h1 {
        min-height: auto;
    }

    .hero-type-cursor {
        animation: none;
    }
}
.about-stats-editor {
    margin-top: 24px;
}

.about-stat-editor {
    padding: 22px;
    margin-top: 16px;
    border: 1px solid var(--ui-border, #dde3ea);
    border-radius: 14px;
    background: var(--ui-surface, #fff);
}

    .about-stat-editor h4 {
        margin: 0 0 18px;
        font-size: 15px;
    }

.form-hint {
    margin-top: 12px;
    color: #7b8794;
    font-size: 12px;
}

@media (max-width: 700px) {
    .about-stat-editor {
        padding: 15px;
    }
}
.about-facts div {
    position: relative;
    padding: 13px;
    border-top: 1px solid rgba(214,168,79,.22);
}

.about-fact-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 7px rgba(214,168,79,.25));
}
/* =========================================
   About Stats Icons - Dark Mode
   ========================================= */

body[data-theme="dark"] .about-fact-icon {
    filter: brightness(0) saturate(100%) invert(71%) sepia(54%) saturate(650%) hue-rotate(357deg) brightness(98%) contrast(92%) drop-shadow(0 0 7px rgba(214, 168, 79, 0.35));
    opacity: 1;
}