/* ═══════════════════════════════════════════════
   KWRAP — Design Refresh Layer
   Loaded last. Polishes the existing champagne-gold
   luxury theme without altering structure/layout.
   ═══════════════════════════════════════════════ */

:root {
    /* Brushed-metal gold sheen + harmonized glow (matches --gold #d0a24a) */
    --gold-sheen: linear-gradient(160deg, #f3d693 0%, #d0a24a 45%, #b07e2e 75%, #e8c578 100%);
    --gold-glow: rgba(208, 162, 74, 0.35);
    --gold-glow-soft: rgba(208, 162, 74, 0.12);
    --shadow-card: 0 18px 40px -24px rgba(0, 0, 0, 0.85);
    --shadow-card-hover: 0 28px 60px -28px rgba(0, 0, 0, 0.9);
    --shadow-gold: 0 14px 34px -16px var(--gold-glow);
}

/* ─── Text selection ─── */
::selection {
    background: var(--gold);
    color: var(--dark);
}

/* ─── Refined scrollbar (WebKit) ─── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--gold-dark), #8a6a28);
    border-radius: 10px;
    border: 2px solid var(--dark);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ═══════════════ BRUSHED-METAL GOLD ═══════════════
   Apply the metallic sheen to the key display numbers
   and gold display type. Graceful fallback to solid gold. */
.hero-title .gold,
.loader-logo,
.nav-brand-fallback,
.stat-number,
.pricing-amount,
.about-experience .num {
    background: var(--gold-sheen);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold); /* fallback for non-clip browsers */
}
/* about-experience sits on a solid gold tile — keep it dark, no sheen */
.about-experience .num {
    background: none;
    -webkit-text-fill-color: var(--dark);
    color: var(--dark);
}

/* ═══════════════ BUTTONS ═══════════════ */
.btn-primary {
    background: var(--gold-sheen);
    background-size: 100% 100%;
    box-shadow: var(--shadow-gold);
    will-change: transform;
}
.btn-primary:hover {
    background: var(--gold-sheen);
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -16px var(--gold-glow);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline {
    backdrop-filter: blur(4px);
}
.btn-outline:hover {
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1px var(--gold-glow-soft), 0 10px 30px -20px var(--gold-glow);
}

/* ═══════════════ CARD DEPTH ═══════════════
   Soft base shadow + richer hover. Transforms left to the
   existing rules so featured-card scaling stays intact. */
.service-card,
.pricing-card,
.testimonial-card,
.material-card,
.gallery-slide {
    box-shadow: var(--shadow-card);
}
.service-card:hover {
    box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--gold-glow-soft);
}
.pricing-card:hover {
    box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--gold-glow-soft);
}
.pricing-card.featured {
    box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--gold-glow-soft);
}
.gallery-slide:hover,
.material-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* Subtle gold top-edge accent on pricing cards (mirrors service-card) */
.pricing-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.pricing-card:hover::after { opacity: 1; }
.pricing-card.featured::after { opacity: 1; }

/* ═══════════════ HARMONIZED GLOWS ═══════════════
   Replace the hard #FFD700 glows with the champagne tone. */
.ba-divider {
    box-shadow: 0 0 20px var(--gold-glow), 0 0 60px var(--gold-glow-soft);
}
.ba-handle {
    background: var(--gold-sheen);
    box-shadow: 0 0 30px var(--gold-glow), 0 4px 20px rgba(0, 0, 0, 0.5);
}
.hero .swiper-pagination-bullet-active {
    box-shadow: 0 0 14px var(--gold-glow);
}
.navbar.scrolled {
    border-bottom: 1px solid var(--gold-glow-soft);
}

/* ═══════════════ SECTION DEPTH ═══════════════
   A whisper of dimension on the flat dark surfaces. */
.services-section,
.process-section,
.faq-section,
.materials-section,
.contact-section {
    background-image:
        radial-gradient(120% 80% at 50% -10%, rgba(208, 162, 74, 0.045) 0%, transparent 55%);
    background-repeat: no-repeat;
}

/* ═══════════════ SECTION TAG ACCENT ═══════════════ */
.section-tag::before,
.hero-tag::before {
    background: linear-gradient(90deg, transparent, var(--gold));
}

/* ═══════════════ ICON TILES ═══════════════
   Gold tiles get the metallic sheen on hover. */
.service-card:hover .service-icon,
.ba-highlight:hover .ba-highlight-icon,
.process-step:hover .process-num {
    background: var(--gold-sheen);
    color: var(--dark);
    border-color: var(--gold);
}

/* ═══════════════ FORM FOCUS ═══════════════ */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow-soft);
}

/* ═══════════════ NAV LINK SHEEN ═══════════════ */
.nav-links a::after {
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

/* ═══════════════ TESTIMONIAL ACCENT ═══════════════ */
.testimonial-card { position: relative; overflow: hidden; }
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -10px; right: 24px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 7rem;
    line-height: 1;
    color: var(--gold-glow-soft);
    pointer-events: none;
}

/* ═══════════════ LOADER LOGO ═══════════════ */
.loader-logo-img {
    display: block;
    height: 76px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}
@media (max-width: 768px) {
    .loader-logo-img { height: 58px; }
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce) {
    .btn-primary, .btn-primary:hover, .btn-primary:active { transform: none; }
}