/* === all styles unchanged from original === */
        :root {
            --walnut: #2a1b12;
            --walnut2: #3a2517;
            --bronze: #9c6b3e;
            --bronze-dk: #7c5430;
            --brass: #c9963f;
            --brass-lt: #e3b96b;
            --cream: #f6eee0;
            --paper: #fbf7f0;
            --ink: #2e2118;
            --ink-soft: #5c4c3c;
            --line: #e3d6c1;
            --line-dk: rgba(255, 255, 255, .14);
            --wa: #25D366;
            --shadow: 0 18px 40px -16px rgba(42, 27, 18, .38);
            --shadow-sm: 0 6px 18px -8px rgba(42, 27, 18, .28);
            --r: 4px;
            --rlg: 8px;
            --maxw: 1240px;
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }
        html {
            scroll-behavior: smooth
        }
        img {
            max-width: 100%;
            display: block
        }
        a {
            color: inherit;
            text-decoration: none
        }
        button {
            font: inherit;
            cursor: pointer;
            border: none;
            background: none;
            color: inherit;
            outline: none
        }
        ul {
            list-style: none
        }
        input,
        select,
        textarea {
            font: inherit;
            color: inherit
        }
        svg {
            display: block
        }
        body {
            background: var(--cream);
            color: var(--ink);
            font-family: 'Cairo', sans-serif;
            line-height: 1.65;
            overflow-x: hidden
        }
        body.ltr {
            font-family: 'Inter', sans-serif
        }
        html.rtl {
            direction: rtl
        }
        html.ltr {
            direction: ltr
        }
        html[lang="ar"] .en {
            display: none !important;
        }
        html[lang="en"] .ar {
            display: none !important;
        }
        body.rtl h1,
        body.rtl h2,
        body.rtl h3,
        body.rtl h4 {
            font-family: 'Cairo', sans-serif;
            font-weight: 700
        }
        body.ltr h2,
        body.ltr h3 {
            font-family: 'Fraunces', serif
        }
        body.ltr .hero-h1,
        body.ltr .page-h1 {
            font-family: 'Fraunces', serif;
            font-style: italic
        }
        body.rtl .hero-h1,
        body.rtl .page-h1 {
            font-family: 'Aref Ruqaa', serif
        }
        h1,
        h2,
        h3,
        h4 {
            line-height: 1.25;
            color: var(--walnut);
            font-weight: 700
        }
        p {
            color: var(--ink-soft)
        }
        .wrap {
            max-width: var(--maxw);
            margin-inline: auto;
            padding-inline: 24px
        }
        .sec {
            padding-block: 72px
        }
        .sec-sm {
            padding-block: 44px
        }
        .bg-paper {
            background: var(--paper)
        }
        .bg-dark {
            background: var(--walnut);
            color: #f1e6d6
        }
        .bg-dark p {
            color: #cdbba0
        }
        .bg-dark h2,
        .bg-dark h3 {
            color: #fff
        }
        .center {
            text-align: center
        }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--bronze-dk);
            font-weight: 700;
            margin-bottom: 10px
        }
        body.rtl .eyebrow {
            letter-spacing: 0;
            text-transform: none;
            font-size: 15px
        }
        .eyebrow::before {
            content: "";
            width: 22px;
            height: 2px;
            background: var(--brass);
            display: inline-block
        }
        h2.ht {
            font-size: clamp(24px, 3.6vw, 38px);
            margin-bottom: 12px
        }
        .sec-head {
            max-width: 680px;
            margin-bottom: 40px
        }
        .sec-head.center {
            margin-inline: auto;
            text-align: center
        }
        .lede {
            font-size: 17px;
            color: var(--ink-soft)
        }
        .divider {
            width: 56px;
            height: 3px;
            background: var(--brass);
            margin-block: 16px
        }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 13px 28px;
            border-radius: var(--r);
            font-weight: 700;
            font-size: 15px;
            transition: transform .18s, box-shadow .18s, background .18s;
            white-space: nowrap
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--brass), var(--bronze));
            color: #fff;
            box-shadow: var(--shadow-sm)
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow)
        }
        .btn-outline {
            border: 1.5px solid var(--bronze);
            color: var(--bronze-dk);
            background: transparent
        }
        .btn-outline:hover {
            background: var(--bronze);
            color: #fff
        }
        .btn-ghost {
            border: 1.5px solid rgba(255, 255, 255, .5);
            color: #fff
        }
        .btn-ghost:hover {
            background: rgba(255, 255, 255, .12)
        }
        .btn-wa {
            background: var(--wa);
            color: #fff
        }
        .btn-wa:hover {
            background: #1ebe5d;
            transform: translateY(-2px)
        }
        .btn-sm {
            padding: 9px 18px;
            font-size: 13.5px
        }
        .btn svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0
        }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 60;
            background: rgba(246, 238, 224, .94);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--line)
        }
        .hdr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 10px 4vw;
        }
        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 1;
            min-width: 0;
            cursor: pointer
        }
        .brand-logo {
            height: 46px;
            width: auto;
            border-radius: 4px;
            object-fit: contain;
            background: transparent;
            flex-shrink: 0
        }
        .brand-txt {
            display: flex;
            flex-direction: column;
            line-height: 1.2
        }
        .brand-txt strong {
            font-size: 16px;
            color: var(--walnut);
            font-weight: 700
        }
        body.ltr .brand-txt strong {
            font-family: 'Fraunces', serif;
            font-style: italic
        }
        .brand-txt span {
            font-size: 11px;
            color: var(--bronze-dk)
        }
        .main-nav {
            display: flex;
            align-items: center;
            gap: 22px
        }
        .main-nav a {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            position: relative;
            padding-block: 6px;
            cursor: pointer
        }
        .main-nav a::after {
            content: "";
            position: absolute;
            bottom: 0;
            inset-inline: 0;
            height: 2px;
            background: var(--brass);
            transform: scaleX(0);
            transition: transform .2s;
            transform-origin: center
        }
        .main-nav a:hover::after,
        .main-nav a.active::after {
            transform: scaleX(1)
        }
        .main-nav a.active {
            color: var(--bronze-dk)
        }
        .hdr-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0
        }
        .lang-toggle {
            display: flex;
            border: 1.5px solid var(--bronze);
            border-radius: 30px;
            overflow: hidden;
            font-size: 13px;
            font-weight: 700;
            flex-shrink: 0
        }
        .lang-toggle button {
            padding: 6px 13px;
            color: var(--bronze-dk);
            transition: background .2s, color .2s
        }
        .lang-toggle button.active {
            background: var(--bronze);
            color: #fff
        }
        .menu-btn {
            display: none;
            flex-direction: column;
            gap: 5px;
            width: 40px;
            height: 40px;
            min-width: 40px;
            align-items: center;
            justify-content: center;
            border: 1.5px solid var(--bronze);
            border-radius: 6px;
            background: transparent;
            padding: 0;
            flex-shrink: 0;
            box-sizing: border-box
        }
        .menu-btn span {
            width: 22px;
            height: 2px;
            background: var(--bronze-dk);
            display: block;
            transition: transform .3s, opacity .3s
        }
        .menu-btn.open span:nth-child(1) {
            transform: translateY(7px) rotate(45deg)
        }
        .menu-btn.open span:nth-child(2) {
            opacity: 0
        }
        .menu-btn.open span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg)
        }
        .nav-overlay {
            position: fixed;
            inset: 0;
            background: rgba(42, 27, 18, 0.5);
            z-index: 54;
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease, visibility .35s ease;
            backdrop-filter: blur(2px)
        }
        .nav-overlay.open {
            opacity: 1;
            visibility: visible
        }
        .grid {
            display: grid;
            gap: 24px
        }
        .g2 {
            grid-template-columns: repeat(2, 1fr)
        }
        .g3 {
            grid-template-columns: repeat(3, 1fr)
        }
        .g4 {
            grid-template-columns: repeat(4, 1fr)
        }
        .card {
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: var(--rlg);
            overflow: hidden;
            transition: transform .25s, box-shadow .25s;
            display: flex;
            flex-direction: column
        }
        .card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow)
        }
        .card-img {
            aspect-ratio: 4/3;
            overflow: hidden;
            margin: 16px 16px 0;
            border-radius: 4px
        }
        .card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s
        }
        .card:hover .card-img img {
            transform: scale(1.06)
        }
        .card-body {
            padding: 18px 20px 24px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1
        }
        .card-body h3 {
            font-size: 17px
        }
        .card-body p {
            font-size: 14px
        }
        .card-lnk {
            margin-top: auto;
            font-weight: 700;
            color: var(--bronze-dk);
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0
        }
        .card-lnk svg {
            width: 13px;
            height: 13px;
            transition: transform .2s
        }
        html.rtl .card-lnk svg {
            transform: scaleX(-1)
        }
        .card:hover .card-lnk svg {
            transform: translateX(4px)
        }
        html.rtl .card:hover .card-lnk svg {
            transform: scaleX(-1) translateX(4px)
        }
        .feat {
            display: flex;
            gap: 14px;
            align-items: flex-start
        }
        .feat .ico {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--walnut);
            display: flex;
            align-items: center;
            justify-content: center
        }
        .feat .ico svg {
            width: 22px;
            height: 22px;
            stroke: var(--brass-lt);
            stroke-width: 1.5;
            fill: none
        }
        .feat h4 {
            font-size: 16px;
            margin-bottom: 4px
        }
        .feat p {
            font-size: 14px
        }
        .split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 52px;
            align-items: center
        }
        .stat {
            text-align: center
        }
        .stat strong {
            display: block;
            font-size: clamp(28px, 3.8vw, 40px);
            color: var(--brass-lt);
            font-family: 'Fraunces', serif
        }
        .stat span {
            font-size: 13px;
            color: #cdbba0;
            letter-spacing: .04em
        }
        .t-card {
            max-width: 740px;
            margin-inline: auto;
            text-align: center;
            position: relative;
            z-index: 2
        }
        .t-quote {
            font-size: clamp(18px, 2.4vw, 24px);
            line-height: 1.7;
            color: #f5e8d3;
            margin-bottom: 20px
        }
        body.ltr .t-quote {
            font-family: 'Fraunces', serif;
            font-style: italic
        }
        .t-name {
            font-weight: 700;
            color: var(--brass-lt)
        }
        .t-role {
            font-size: 13px;
            color: #b5a390
        }
        .stars {
            display: flex;
            gap: 4px;
            justify-content: center;
            margin-bottom: 14px
        }
        .stars svg {
            width: 16px;
            height: 16px;
            fill: var(--brass)
        }
        .faq-item {
            border-bottom: 1px solid var(--line)
        }
        .faq-q {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 20px 4px;
            text-align: start;
            font-weight: 700;
            font-size: 16px;
            color: var(--walnut);
            cursor: pointer
        }
        .faq-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1.5px solid var(--bronze);
            position: relative;
            transition: background .2s
        }
        .faq-icon::before,
        .faq-icon::after {
            content: "";
            position: absolute;
            background: var(--bronze);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
        }
        .faq-icon::before {
            width: 10px;
            height: 1.5px
        }
        .faq-icon::after {
            width: 1.5px;
            height: 10px;
            transition: transform .25s, opacity .25s
        }
        .faq-item.open .faq-icon {
            background: var(--bronze)
        }
        .faq-item.open .faq-icon::before,
        .faq-item.open .faq-icon::after {
            background: #fff
        }
        .faq-item.open .faq-icon::after {
            opacity: 0;
            transform: translate(-50%, -50%) rotate(90deg)
        }
        .faq-ans {
            max-height: 0;
            overflow: hidden;
            transition: max-height .36s ease
        }
        .faq-ans-in {
            padding: 0 4px 22px;
            font-size: 15px;
            color: var(--ink-soft);
            max-width: 740px;
            line-height: 1.75
        }
        .filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 32px
        }
        .fbtn {
            padding: 9px 20px;
            border: 1.5px solid var(--bronze);
            border-radius: 30px;
            font-size: 13px;
            font-weight: 700;
            color: var(--bronze-dk);
            transition: background .2s, color .2s;
            cursor: pointer
        }
        .fbtn.active,
        .fbtn:hover {
            background: var(--bronze);
            color: #fff
        }
        .gal-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px
        }
        .g-item {
            position: relative;
            aspect-ratio: 1/1;
            overflow: hidden;
            border-radius: 4px;
            cursor: pointer
        }
        .g-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s
        }
        .g-item:hover img {
            transform: scale(1.08)
        }
        .g-tag {
            position: absolute;
            bottom: 8px;
            inset-inline: 8px;
            font-size: 11px;
            color: #fff;
            background: rgba(20, 12, 7, .6);
            padding: 4px 10px;
            border-radius: 20px;
            backdrop-filter: blur(3px);
            opacity: 0;
            transition: opacity .25s;
            font-weight: 600;
            text-align: center
        }
        .g-item:hover .g-tag {
            opacity: 1
        }
        .g-item.hide {
            display: none !important
        }
        .form-field {
            margin-bottom: 16px
        }
        .form-field label {
            display: block;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 6px;
            color: var(--walnut)
        }
        .form-field input,
        .form-field select,
        .form-field textarea {
            width: 100%;
            padding: 12px 14px;
            border: 1.5px solid var(--line);
            border-radius: var(--r);
            background: var(--paper);
            font-size: 15px;
            transition: border-color .2s
        }
        .form-field input:focus,
        .form-field select:focus,
        .form-field textarea:focus {
            outline: none;
            border-color: var(--bronze)
        }
        .form-field textarea {
            min-height: 120px;
            resize: vertical
        }
        .inf-row {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            padding-block: 16px;
            border-bottom: 1px solid var(--line)
        }
        .inf-row .ico {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--cream);
            border: 1.5px solid var(--bronze);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }
        .inf-row .ico svg {
            width: 20px;
            height: 20px;
            stroke: var(--bronze-dk);
            stroke-width: 1.5;
            fill: none
        }
        .inf-row h4 {
            font-size: 15px;
            margin-bottom: 3px
        }
        .inf-row p {
            font-size: 14px
        }
        .blog-card {
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: var(--rlg);
            overflow: hidden;
            transition: transform .25s, box-shadow .25s
        }
        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow)
        }
        .blog-thumb {
            aspect-ratio: 16/9;
            overflow: hidden
        }
        .blog-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s
        }
        .blog-card:hover .blog-thumb img {
            transform: scale(1.06)
        }
        .blog-body {
            padding: 20px
        }
        .blog-body h3 {
            font-size: 17px;
            margin-bottom: 8px;
            color: var(--walnut)
        }
        .blog-body p {
            font-size: 14px;
            margin-bottom: 14px
        }
        .readmore {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--bronze-dk);
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0
        }
        .site-footer {
            background: var(--walnut);
            color: #cdbba0;
            padding-block: 60px 24px
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
            gap: 36px;
            margin-bottom: 48px
        }
        .footer-brand p {
            color: #b5a082;
            font-size: 13.5px;
            max-width: 260px;
            line-height: 1.7
        }
        .footer-col h5 {
            color: #f1e6d6;
            font-size: 14px;
            margin-bottom: 14px;
            font-weight: 700
        }
        .footer-col ul li {
            margin-bottom: 10px
        }
        .footer-col a,
        .footer-col span {
            font-size: 13.5px;
            color: #cdbba0;
            transition: color .2s;
            cursor: pointer
        }
        .footer-col a:hover,
        .footer-col span:hover {
            color: var(--brass-lt)
        }
        .footer-social {
            display: flex;
            gap: 10px;
            margin-top: 14px
        }
        .footer-social a {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, .2);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color .2s, background .2s
        }
        .footer-social a:hover {
            border-color: var(--brass);
            background: rgba(201, 150, 63, .15)
        }
        .footer-social a svg {
            width: 15px;
            height: 15px;
            stroke: #f1e6d6;
            fill: none
        }
        .footer-bottom {
            border-top: 1px solid var(--line-dk);
            padding-top: 22px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 12.5px;
            color: #9c8a72
        }
        .wa-float {
            position: fixed;
            bottom: 24px;
            inset-inline-end: 24px;
            z-index: 80;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: var(--wa);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .45);
            animation: wa-pulse 2.8s infinite;
            text-decoration: none
        }
        .wa-float svg {
            width: 28px;
            height: 28px;
            fill: #fff
        }
        @keyframes wa-pulse {
            0% {
                box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .45), 0 0 0 0 rgba(37, 211, 102, .5)
            }
            70% {
                box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .45), 0 0 0 16px rgba(37, 211, 102, 0)
            }
            100% {
                box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .45), 0 0 0 0 rgba(37, 211, 102, 0)
            }
        }
        .map-frame {
            width: 100%;
            height: 380px;
            border: 0;
            border-radius: var(--rlg);
            filter: sepia(.15) saturate(1.1)
        }
        .page {
            display: none
        }
        .page.active {
            display: block
        }
        .rev {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity .55s ease, transform .55s ease
        }
        .rev.in {
            opacity: 1;
            transform: none
        }
        .joi {
            position: relative;
            display: block;
            overflow: hidden;
            border-radius: 4px
        }
        .joi img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }
        .joi::before,
        .joi::after,
        .joi .j1,
        .joi .j2 {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            pointer-events: none;
            z-index: 2
        }
        .joi::before {
            top: -6px;
            inset-inline-start: -6px;
            border-top: 2.5px solid var(--brass);
            border-inline-start: 2.5px solid var(--brass)
        }
        .joi::after {
            bottom: -6px;
            inset-inline-end: -6px;
            border-bottom: 2.5px solid var(--brass);
            border-inline-end: 2.5px solid var(--brass)
        }
        .joi .j1 {
            top: -6px;
            inset-inline-end: -6px;
            border-top: 2.5px solid var(--brass);
            border-inline-end: 2.5px solid var(--brass)
        }
        .joi .j2 {
            bottom: -6px;
            inset-inline-start: -6px;
            border-bottom: 2.5px solid var(--brass);
            border-inline-start: 2.5px solid var(--brass)
        }
        .hero {
            position: relative;
            min-height: 80vh;
            display: flex;
            align-items: flex-end;
            background-size: cover;
            background-position: center;
            overflow: hidden
        }
        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(26, 16, 9, .28) 0%, rgba(26, 16, 9, .52) 45%, rgba(26, 16, 9, .93) 100%)
        }
        .hero-in {
            position: relative;
            z-index: 2;
            padding-block: 60px 80px;
            color: #fff
        }
        .hero-h1 {
            color: #fff !important;
            font-size: clamp(30px, 5vw, 60px);
            max-width: 860px;
            margin-bottom: 16px;
            line-height: 1.15
        }
        .lede-h {
            color: #eddec8;
            max-width: 580px;
            font-size: 18px;
            margin-bottom: 28px
        }
        .hero-cta {
            display: flex;
            gap: 14px;
            flex-wrap: wrap
        }
        .crumbs {
            display: flex;
            gap: 8px;
            align-items: center;
            font-size: 13px;
            color: #e0ceaf;
            margin-bottom: 14px
        }
        .page-hero {
            min-height: 44vh
        }
        .saw {
            height: 24px;
            width: 100%;
            background-image: linear-gradient(135deg, var(--cream) 25%, transparent 25.5%), linear-gradient(45deg, var(--cream) 25%, transparent 25.5%);
            background-size: 24px 24px;
            background-color: var(--bronze)
        }
        .saw.dk {
            background-image: linear-gradient(135deg, var(--walnut) 25%, transparent 25.5%), linear-gradient(45deg, var(--walnut) 25%, transparent 25.5%)
        }
        .saw.pp {
            background-image: linear-gradient(135deg, var(--paper) 25%, transparent 25.5%), linear-gradient(45deg, var(--paper) 25%, transparent 25.5%)
        }
        .ba-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0
        }
        .ba-box {
            position: relative
        }
        .ba-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }
        .ba-label {
            position: absolute;
            top: 8px;
            inset-inline-start: 8px;
            background: var(--walnut);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 3px
        }
        .ba-label.after {
            background: var(--brass);
            inset-inline-start: auto;
            inset-inline-end: 8px
        }
        /* Responsive */
        @media(max-width:1080px) {
            .g4 {
                grid-template-columns: repeat(2, 1fr)
            }
            .g3 {
                grid-template-columns: repeat(2, 1fr)
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr
            }
            .gal-grid {
                grid-template-columns: repeat(3, 1fr)
            }
        }
        @media(max-width:920px) {
            .main-nav {
                position: absolute;
                top: 100%;
                inset-inline: 0;
                background: var(--paper);
                border-bottom: 1px solid var(--line);
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                padding: 0 24px;
                gap: 0;
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                visibility: hidden;
                transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.3s ease, visibility 0.35s;
                z-index: 55;
                box-shadow: 0 12px 24px -12px rgba(42, 27, 18, .15)
            }
            .main-nav.open {
                max-height: calc(100vh - 70px);
                padding: 16px 24px 24px;
                opacity: 1;
                visibility: visible;
                overflow-y: auto
            }
            .main-nav a {
                padding: 14px 8px;
                border-bottom: 1px solid var(--line);
                font-size: 16px
            }
            .menu-btn {
                display: flex
            }
            .brand-txt {
                display: none
            }
            .hdr-actions {
                position: relative;
                z-index: 70
            }
        }
        @media(max-width:760px) {
            .g2,
            .g3,
            .g4 {
                grid-template-columns: 1fr
            }
            .split {
                grid-template-columns: 1fr;
                gap: 28px
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 28px
            }
            .gal-grid {
                grid-template-columns: repeat(2, 1fr)
            }
            .sec {
                padding-block: 48px
            }
            .hero {
                min-height: 86vh
            }
            .hero-cta {
                flex-direction: column
            }
            .hero-cta .btn {
                width: 100%;
                justify-content: center
            }
            .bg-dark .g4 {
                grid-template-columns: repeat(2, 1fr)
            }
            .g-tag {
                opacity: 1;
                bottom: 4px;
                inset-inline: 4px;
                padding: 3px 6px;
                font-size: 10px
            }
            .page-hero {
                min-height: 35vh
            }
            .brand-logo {
                height: 40px
            }
            .hdr-actions .btn-wa span {
                display: none !important
            }
            .hdr-actions .btn-wa {
                padding: 0 !important;
                width: 40px !important;
                height: 40px !important;
                min-width: 40px !important;
                justify-content: center;
                border-radius: 6px;
                flex-shrink: 0
            }
            .hdr-actions .btn-wa svg {
                margin: 0;
                width: 20px;
                height: 20px
            }
            .lang-toggle button {
                padding: 6px 10px;
                font-size: 12px
            }
            .faq-side {
                position: static !important;
                top: auto !important
            }
            .ba-grid {
                grid-template-columns: 1fr 1fr
            }
            .ba-box img {
                height: 180px
            }
        }
        @media(max-width:480px) {
            .footer-grid {
                grid-template-columns: 1fr
            }
            .wrap {
                padding-inline: 16px
            }
            .gal-grid {
                gap: 8px;
                grid-template-columns: repeat(2, 1fr)
            }
            .hdr {
                padding: 8px 12px;
                gap: 6px
            }
            .hdr-actions {
                gap: 6px
            }
            .brand-logo {
                height: 34px
            }
            .lang-toggle button {
                padding: 4px 8px;
                font-size: 11px
            }
            .hdr-actions .btn-wa {
                width: 36px !important;
                height: 36px !important;
                min-width: 36px !important
            }
            .hdr-actions .btn-wa svg {
                width: 18px !important;
                height: 18px !important
            }
            .menu-btn {
                width: 36px !important;
                height: 36px !important;
                min-width: 36px !important;
                gap: 4px
            }
            .menu-btn span {
                width: 20px
            }
            .menu-btn.open span:nth-child(1) {
                transform: translateY(6px) rotate(45deg)
            }
            .menu-btn.open span:nth-child(3) {
                transform: translateY(-6px) rotate(-45deg)
            }
            .ba-box img {
                height: 140px !important
            }
            .wa-float {
                width: 50px;
                height: 50px;
                bottom: 16px;
                inset-inline-end: 16px
            }
            .wa-float svg {
                width: 24px;
                height: 24px
            }
            .btn {
                white-space: normal;
                line-height: 1.3
            }
            .hero-h1 {
                font-size: clamp(26px, 7vw, 36px)
            }
            .lede-h {
                font-size: 15px
            }
            .filter-bar {
                gap: 6px
            }
            .fbtn {
                padding: 6px 12px;
                font-size: 11px
            }
            .stat strong {
                font-size: 26px
            }
            .stat span {
                font-size: 11px
            }
            .bg-dark .g4 {
                grid-template-columns: 1fr 1fr;
                gap: 16px
            }
            .sec-head {
                margin-bottom: 24px
            }
            .card-img {
                margin: 10px 10px 0
            }
            .card-body {
                padding: 12px 14px 18px
            }
            .card-body h3 {
                font-size: 15px
            }
            .card-body p {
                font-size: 13px
            }
            .blog-body {
                padding: 14px
            }
            .blog-body h3 {
                font-size: 15px
            }
            .blog-body p {
                font-size: 13px
            }
            .inf-row {
                padding-block: 12px;
                gap: 12px
            }
            .inf-row .ico {
                width: 38px;
                height: 38px
            }
            .inf-row .ico svg {
                width: 17px;
                height: 17px
            }
            .inf-row h4 {
                font-size: 14px
            }
            .inf-row p {
                font-size: 13px
            }
            .faq-q {
                font-size: 14px;
                padding: 16px 4px
            }
            .faq-ans-in {
                font-size: 14px;
                padding: 0 4px 16px
            }
            .site-footer {
                padding-block: 40px 16px
            }
            .footer-grid {
                gap: 24px;
                margin-bottom: 28px
            }
            .footer-brand p {
                font-size: 13px;
                max-width: 100%
            }
            .footer-col h5 {
                font-size: 13px;
                margin-bottom: 10px
            }
            .footer-col a,
            .footer-col span {
                font-size: 12.5px
            }
            .footer-bottom {
                font-size: 11px;
                flex-direction: column;
                align-items: center;
                text-align: center
            }
            .map-frame {
                height: 240px
            }
        }
        @media(max-width:400px) {
            .gal-grid {
                grid-template-columns: 1fr 1fr;
                gap: 6px
            }
            .bg-dark .g4 {
                grid-template-columns: 1fr 1fr;
                gap: 12px
            }
            .hero-h1 {
                font-size: clamp(22px, 6vw, 30px)
            }
            .lede-h {
                font-size: 14px
            }
            .brand-logo {
                height: 30px
            }
            .hdr-actions .btn-wa {
                width: 32px !important;
                height: 32px !important;
                min-width: 32px !important
            }
            .hdr-actions .btn-wa svg {
                width: 16px !important;
                height: 16px !important
            }
            .menu-btn {
                width: 32px !important;
                height: 32px !important;
                min-width: 32px !important;
                gap: 3px
            }
            .menu-btn span {
                width: 18px
            }
            .menu-btn.open span:nth-child(1) {
                transform: translateY(5px) rotate(45deg)
            }
            .menu-btn.open span:nth-child(3) {
                transform: translateY(-5px) rotate(-45deg)
            }
            .lang-toggle button {
                padding: 3px 6px;
                font-size: 10px
            }
            .btn {
                font-size: 13px;
                padding: 10px 18px
            }
            .btn-sm {
                font-size: 12px;
                padding: 7px 12px
            }
            .sec {
                padding-block: 32px
            }
            .sec-sm {
                padding-block: 28px
            }
            .wrap {
                padding-inline: 12px
            }
            .ba-grid {
                grid-template-columns: 1fr 1fr
            }
            .ba-box img {
                height: 110px !important
            }
            .ba-label {
                font-size: 9px;
                padding: 2px 6px
            }
            .stat strong {
                font-size: 22px
            }
            .stat span {
                font-size: 10px
            }
            .g-tag {
                font-size: 8px;
                padding: 2px 4px;
                bottom: 2px;
                inset-inline: 2px
            }
            .fbtn {
                padding: 4px 10px;
                font-size: 10px
            }
            .filter-bar {
                gap: 4px
            }
            .hero-in {
                padding-block: 40px 60px
            }
            .page-hero {
                min-height: 30vh
            }
            .crumbs {
                font-size: 11px
            }
            .faq-q {
                font-size: 13px;
                padding: 14px 4px
            }
            .faq-ans-in {
                font-size: 13px
            }
            .t-quote {
                font-size: 16px
            }
            .t-name {
                font-size: 14px
            }
            .t-role {
                font-size: 12px
            }
            .map-frame {
                height: 180px
            }
            .joi::before,
            .joi::after,
            .joi .j1,
            .joi .j2 {
                width: 14px;
                height: 14px
            }
            .joi::before {
                top: -4px;
                inset-inline-start: -4px;
                border-width: 2px
            }
            .joi::after {
                bottom: -4px;
                inset-inline-end: -4px;
                border-width: 2px
            }
            .joi .j1 {
                top: -4px;
                inset-inline-end: -4px;
                border-width: 2px
            }
            .joi .j2 {
                bottom: -4px;
                inset-inline-start: -4px;
                border-width: 2px
            }
            .wa-float {
                width: 44px;
                height: 44px;
                bottom: 12px;
                inset-inline-end: 12px
            }
            .wa-float svg {
                width: 20px;
                height: 20px
            }
        }
        @media(max-width:360px) {
            .gal-grid {
                grid-template-columns: 1fr 1fr;
                gap: 4px
            }
            .bg-dark .g4 {
                grid-template-columns: 1fr 1fr;
                gap: 8px
            }
            .hero-h1 {
                font-size: clamp(20px, 5.5vw, 26px)
            }
            .lede-h {
                font-size: 13px
            }
            .brand-logo {
                height: 28px
            }
            .lang-toggle button {
                padding: 2px 5px;
                font-size: 9px
            }
            .hdr {
                padding: 6px 8px;
                gap: 4px
            }
            .btn {
                font-size: 12px;
                padding: 8px 14px
            }
            .sec {
                padding-block: 24px
            }
            .wrap {
                padding-inline: 8px
            }
            .ba-box img {
                height: 90px !important
            }
            .stat strong {
                font-size: 20px
            }
            .stat span {
                font-size: 9px
            }
            .g-tag {
                font-size: 7px;
                padding: 1px 3px
            }
            .fbtn {
                padding: 3px 8px;
                font-size: 9px
            }
            .hero-in {
                padding-block: 30px 40px
            }
            .faq-q {
                font-size: 12px;
                padding: 12px 4px
            }
            .faq-ans-in {
                font-size: 12px
            }
            .t-quote {
                font-size: 14px
            }
            .map-frame {
                height: 150px
            }
            .footer-brand p {
                font-size: 12px
            }
            .footer-col a,
            .footer-col span {
                font-size: 11.5px
            }
            .footer-bottom {
                font-size: 10px
            }
            .wa-float {
                width: 38px;
                height: 38px;
                bottom: 10px;
                inset-inline-end: 10px
            }
            .wa-float svg {
                width: 18px;
                height: 18px
            }
        }