:root {
            --brand-dark:    #1e293b;
            --brand-accent:  #d4af37;
            --brand-light:   #f8fafc;
        }

        * { box-sizing: border-box; }

        body { font-family: 'Inter', sans-serif; }

        .font-display  { font-family: 'Playfair Display', serif; }
        .font-serif    { font-family: 'Playfair Display', serif; }
        .font-sans     { font-family: 'Inter', sans-serif; }

        /* ── colours ── */
        .text-brand-accent { color: var(--brand-accent); }
        .text-brand-dark   { color: var(--brand-dark);   }
        .bg-brand-accent   { background-color: var(--brand-accent); }
        .bg-brand-dark     { background-color: var(--brand-dark);   }
        .bg-brand-light    { background-color: var(--brand-light);  }
        .border-brand-accent { border-color: var(--brand-accent); }

        /* ── header scroll ── */
        #main-header.scrolled {
            background: var(--brand-dark) !important;
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            box-shadow: 0 4px 30px rgba(0,0,0,.35);
        }
        .animated-underline { position: relative; }
        .animated-underline::after {
            content: '';
            position: absolute;
            bottom: -2px; left: 0;
            width: 0; height: 1px;
            background: var(--brand-accent);
            transition: width .3s ease;
        }
        .animated-underline:hover::after { width: 100%; }

        /* ── hero ── */
        .contact-hero {
            position: relative;
            overflow: hidden;
        }
        .hero-bg-image {
            position: absolute; inset: 0;
            background: url('../asset/Images/hand-shake.webp') center/cover no-repeat;
        }
        .hero-gradient {
            position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(30,41,59,.96) 0%, rgba(30,41,59,.8) 60%, rgba(30,41,59,.6) 100%);
        }
        .hero-grid-overlay {
            position: absolute; inset: 0; opacity: .04;
            background-image:
                linear-gradient(rgba(201,168,76,.5) 1px, transparent 1px),
                linear-gradient(90deg, rgba(201,168,76,.5) 1px, transparent 1px);
            background-size: 60px 60px;
        }
        .hero-accent-line {
            position: absolute; left: 0; top: 0; bottom: 0;
            width: 4px;
            background: linear-gradient(to bottom, transparent, var(--brand-accent), transparent);
        }

        /* ── section label ── */
        .section-label {
            display: inline-flex; align-items: center; gap: .6rem;
            font-size: .65rem; font-weight: 700;
            letter-spacing: .2em; text-transform: uppercase;
            color: var(--brand-accent);
        }
        .section-label::before {
            content: '';
            display: block; width: 28px; height: 1px;
            background: var(--brand-accent);
        }

        /* ── scroll indicator ── */
        .scroll-indicator {
            position: absolute; bottom: 2.5rem; left: 50%;
            transform: translateX(-50%);
            display: flex; flex-direction: column; align-items: center; gap: .6rem;
        }
        .scroll-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--brand-accent);
            animation: scrollBounce 1.6s ease-in-out infinite;
        }
        @keyframes scrollBounce {
            0%,100% { transform: translateY(0); opacity:1; }
            50%      { transform: translateY(8px); opacity:.4; }
        }

        /* ── marquee ── */
        .marquee-content {
            display: flex;
            animation: marquee 28s linear infinite;
        }
        @keyframes marquee {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* ── reveal animations ── */
        .reveal, .reveal-left, .reveal-right {
            opacity: 0;
            transition: opacity .7s ease, transform .7s ease;
        }
        .reveal        { transform: translateY(30px); }
        .reveal-left   { transform: translateX(-40px); }
        .reveal-right  { transform: translateX(40px); }
        .reveal.visible,
        .reveal-left.visible,
        .reveal-right.visible {
            opacity: 1;
            transform: translate(0);
        }

        /* ── contact card ── */
        .contact-card {
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
        }
        .contact-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(0,0,0,.1);
            border-color: var(--brand-accent) !important;
        }

        /* ── form ── */
        .form-group { position: relative; }
        .form-input {
            width: 100%;
            padding: .85rem 1rem .85rem 3rem;
            border: 1.5px solid #e2e8f0;
            border-radius: .75rem;
            font-size: .95rem;
            color: var(--brand-dark);
            background: #fff;
            outline: none;
            transition: border-color .25s, box-shadow .25s;
        }
        .form-input:focus {
            border-color: var(--brand-accent);
            box-shadow: 0 0 0 3px rgba(201,168,76,.15);
        }
        .form-input::placeholder { color: #94a3b8; }
        .form-icon {
            position: absolute; left: .9rem; top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            pointer-events: none;
            width: 18px; height: 18px;
            transition: color .25s;
        }
        .form-group:focus-within .form-icon { color: var(--brand-accent); }
        .form-group textarea ~ .form-icon { top: 1.1rem; transform: none; }
        textarea.form-input { padding-left: 3rem; resize: vertical; min-height: 140px; }

        select.form-input { appearance: none; cursor: pointer; }

        .form-label {
            display: block; margin-bottom: .45rem;
            font-size: .8rem; font-weight: 600;
            letter-spacing: .04em; color: var(--brand-dark);
        }

        /* ── submit button ── */
        .btn-submit {
            display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
            padding: 1rem 2.5rem;
            background: var(--brand-accent);
            color: var(--brand-dark);
            font-weight: 700; font-size: .85rem;
            letter-spacing: .1em; text-transform: uppercase;
            border-radius: 9999px;
            border: none; cursor: pointer;
            transition: background .25s, transform .2s, box-shadow .25s;
            box-shadow: 0 6px 24px rgba(201,168,76,.35);
        }
        .btn-submit:hover {
            background: var(--brand-dark);
            color: var(--brand-accent);
            transform: translateY(-2px);
            box-shadow: 0 10px 32px rgba(30,41,59,.3);
        }
        .btn-submit:active { transform: translateY(0); }

        /* ── success banner ── */
        .success-banner {
            display: none;
            background: linear-gradient(135deg, #065f46, #047857);
            color: #fff;
            border-radius: .75rem;
            padding: 1rem 1.5rem;
            gap: .8rem;
            align-items: center;
        }
        .success-banner.show { display: flex; }

        /* ── map embed ── */
        .map-frame {
            width: 100%; height: 100%; min-height: 340px;
            border: none; border-radius: 1rem;
            filter: saturate(.9) brightness(.95);
        }

        /* ── CTA section ── */
        .cta-section {
            background: var(--brand-dark);
            position: relative; overflow: hidden;
        }
        .cta-pattern {
            position: absolute; inset: 0; opacity: .04;
            background-image:
                linear-gradient(rgba(201,168,76,.5) 1px, transparent 1px),
                linear-gradient(90deg, rgba(201,168,76,.5) 1px, transparent 1px);
            background-size: 80px 80px;
        }

        /* ── gold divider ── */
        .gold-divider::before {
            content: '';
            display: block; width: 40px; height: 1px;
            background: var(--brand-accent);
            margin-bottom: .5rem;
        }

        /* ── FAQ accordion ── */
        .faq-item { border-bottom: 1px solid #e2e8f0; }
        .faq-question {
            width: 100%; text-align: left;
            display: flex; justify-content: space-between; align-items: center;
            padding: 1.2rem 0;
            font-weight: 600; font-size: .95rem; color: var(--brand-dark);
            cursor: pointer; border: none; background: none;
            transition: color .2s;
        }
        .faq-question:hover { color: var(--brand-accent); }
        .faq-icon { transition: transform .3s ease; flex-shrink: 0; }
        .faq-answer {
            max-height: 0; overflow: hidden;
            transition: max-height .4s ease, padding .3s ease;
            font-size: .9rem; color: #64748b; line-height: 1.75;
        }
        .faq-item.open .faq-answer  { max-height: 300px; padding-bottom: 1.1rem; }
        .faq-item.open .faq-icon    { transform: rotate(45deg); }
        .faq-item.open .faq-question { color: var(--brand-accent); }

        /* ── mobile menu ── */
        #mobile-menu.open  { transform: translateX(0); }
        #mobile-backdrop.open { opacity: 1; pointer-events: auto; }