/* ==========================================================================
   DIKORAT AL-IMTIAZ — PREMIUM ARABIC LANDING PAGE STYLESHEET
   Business  : ديكورات الامتياز لورق الجدران والديكورات
   Target    : Eastern Province, Saudi Arabia (Dammam, Khobar, Jubail, Qatif)
   Theme     : Luxury Dark + Metallic Gold
   Direction : RTL (Right-to-Left)
   Font      : Cairo (Google Fonts)
   ========================================================================== */

/* ==========================================================================
   TABLE OF CONTENTS
   ──────────────────────────────────────────────────────────────────────────
    1.  CSS Custom Properties (Design Tokens)
    2.  CSS Reset & Base Styles
    3.  Typography & Global Utilities
    4.  Layout — Container
    5.  Buttons & CTAs
    6.  Header & Navigation
    7.  Hero Section
    8.  Services Section
    9.  Why Choose Us Section
   10.  CTA Contact Section
   11.  Site Footer
   12.  Keyframe Animations
   13.  Responsive — Media Queries (1024px, 768px, 480px, 360px)
   ========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES — DESIGN TOKENS
   All colors, type scale, spacing, radii, shadows, and transitions are
   defined here as CSS variables for consistent theming across the page.
   ========================================================================== */
:root {

    /* ── Color: Backgrounds ── */
    --bg-page:       #0f0f0f;           /* Deep black page background            */
    --bg-secondary:  #1a1a1a;           /* Dark charcoal — alternate sections     */
    --bg-card:       #161616;           /* Service & feature card backgrounds     */
    --bg-elevated:   #222222;           /* Slightly lifted surfaces               */
    --bg-footer:     #080808;           /* Near-black footer                      */

    /* ── Color: Gold Palette (Brand Accent) ── */
    --gold-primary:  #D4AF37;           /* Core rich metallic gold                */
    --gold-light:    #F3E5AB;           /* Warm light gold (highlights)           */
    --gold-dark:     #B8962E;           /* Deep gold (hover states)               */
    --gold-muted:    #C5A059;           /* Muted gold (secondary accents)         */
    --gold-glow:     rgba(212,175,55,0.12); /* Subtle gold fill (backgrounds)     */
    --gold-border:   rgba(212,175,55,0.30); /* Gold borders & dividers            */

    /* ── Color: Text ── */
    --text-primary:  #F8F8FF;           /* Off-white — headings                   */
    --text-body:     #E0E0E0;           /* Light gray — body copy                 */
    --text-muted:    #9A9A9A;           /* Muted gray — captions, subtitles       */
    --text-faint:    #555555;           /* Very faint — footer small print        */

    /* ── Typography ── */
    --font:          'Cairo', 'Tajawal', 'Segoe UI', sans-serif;

    /* Type scale using clamp for fluid sizing */
    --text-xs:       0.75rem;           /* 12px */
    --text-sm:       0.875rem;          /* 14px */
    --text-base:     1rem;              /* 16px */
    --text-lg:       1.125rem;          /* 18px */
    --text-xl:       1.25rem;           /* 20px */
    --text-2xl:      1.5rem;            /* 24px */
    --text-3xl:      1.875rem;          /* 30px */
    --text-4xl:      2.25rem;           /* 36px */
    --text-5xl:      3rem;              /* 48px */
    --text-6xl:      3.75rem;           /* 60px */

    /* ── Spacing Scale ── */
    --s-1:  0.25rem;   /* 4px  */
    --s-2:  0.5rem;    /* 8px  */
    --s-3:  0.75rem;   /* 12px */
    --s-4:  1rem;      /* 16px */
    --s-5:  1.25rem;   /* 20px */
    --s-6:  1.5rem;    /* 24px */
    --s-8:  2rem;      /* 32px */
    --s-10: 2.5rem;    /* 40px */
    --s-12: 3rem;      /* 48px */
    --s-16: 4rem;      /* 64px */
    --s-20: 5rem;      /* 80px */
    --s-24: 6rem;      /* 96px */

    /* ── Border Radius ── */
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-2xl:  24px;
    --r-full: 9999px;

    /* ── Box Shadows ── */
    --shadow-sm:     0 2px 8px  rgba(0,0,0,0.4);
    --shadow-md:     0 4px 20px rgba(0,0,0,0.5);
    --shadow-lg:     0 8px 40px rgba(0,0,0,0.6);
    --shadow-gold:         0 0 20px rgba(212,175,55,0.18),
                           0 4px 20px rgba(0,0,0,0.5);
    --shadow-gold-strong:  0 0 40px rgba(212,175,55,0.32),
                           0 8px 40px rgba(0,0,0,0.6);

    /* ── Transitions ── */
    --t-fast:   all 0.2s ease;
    --t-base:   all 0.3s ease;
    --t-slow:   all 0.5s ease;
    --t-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ── Z-Index Ladder ── */
    --z-below:   -1;
    --z-base:     0;
    --z-raised:   10;
    --z-overlay:  50;
    --z-sticky:   200;
}


/* ==========================================================================
   2. CSS RESET & BASE STYLES
   A minimal reset that normalizes browser defaults for consistent rendering.
   ========================================================================== */

/* Box-sizing: border-box for all elements */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Remove default list bullets */
ul, ol { list-style: none; }

/* Normalize anchors */
a { color: inherit; text-decoration: none; }

/* Responsive images */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Smooth page-level anchor scrolling */
html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-page);
}

/* ── Body — Master styles ──
   Sets font, color, direction, and the subtle damask-inspired CSS pattern.
   The diagonal lines at ultra-low opacity mimic the ornamental texture
   visible in the brand logo without requiring an external asset.
   ────────────────────────────────────────────────────────────────────────── */
body {
    font-family: var(--font);
    font-size:   var(--text-base);
    font-weight: 400;
    line-height: 1.7;
    color:       var(--text-body);
    background-color: var(--bg-page);

    /* Pure dark background with subtle gold shine overlay */
    background-image:
        radial-gradient(ellipse at top right, rgba(212,175,55,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(212,175,55,0.05) 0%, transparent 50%);
    background-attachment: fixed;

    /* RTL text direction */
    direction:  rtl;
    text-align: right;

    /* Crisp sub-pixel font rendering */
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Prevent horizontal scroll */
    overflow-x: hidden;
}


/* ==========================================================================
   3. TYPOGRAPHY & GLOBAL UTILITIES
   ========================================================================== */

/* Heading defaults */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    color:       var(--text-primary);
    line-height: 1.25;
    font-weight: 800;
}

/* Body paragraph */
p {
    line-height: 1.8;
    color: var(--text-body);
}

/* ── Metallic Gold Text Utility ──
   Uses a CSS gradient clipped to the text characters, producing the
   characteristic multi-tone metallic shimmer of the brand's gold palette.
   ────────────────────────────────────────────────────────────────────────── */
.gold-text {
    background: linear-gradient(
        135deg,
        var(--gold-dark)  0%,
        var(--gold-primary) 35%,
        var(--gold-light)   55%,
        var(--gold-primary) 75%,
        var(--gold-dark)  100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Block-level display helper (used inside headings for line breaks) */
.block { display: block; }

/* ── Section Badge — small pill label above headings ── */
.section-badge {
    display:        inline-block;
    font-size:      var(--text-xs);
    font-weight:    700;
    letter-spacing: 0.12em;
    color:          var(--gold-primary);
    background:     var(--gold-glow);
    border:         1px solid var(--gold-border);
    padding:        var(--s-1) var(--s-4);
    border-radius:  var(--r-full);
    margin-bottom:  var(--s-4);
}

/* ── Section Title (H2s) ── */
.section-title {
    font-size:     clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
    font-weight:   900;
    color:         var(--text-primary);
    margin-bottom: var(--s-4);
    line-height:   1.3;
}

/* ── Section Subtitle — descriptive paragraph below H2 ── */
.section-subtitle {
    font-size:   var(--text-lg);
    color:       var(--text-muted);
    max-width:   640px;
    margin:      0 auto var(--s-6);
    line-height: 1.8;
}

/* ── Ornamental Gold Section Divider ──
   A centered horizontal line with a diamond ◆ in the middle,
   built entirely from CSS — no images needed.
   ────────────────────────────────────────────────────────────────────────── */
.section-divider {
    position:      relative;
    width:         100px;
    height:        2px;
    background:    linear-gradient(
        90deg,
        transparent,
        var(--gold-primary),
        transparent
    );
    margin:        var(--s-4) auto var(--s-12);
    border-radius: var(--r-full);
}

/* Diamond ornament centered on the divider line */
.section-divider::before {
    content:   '◆';
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);
    color:     var(--gold-primary);
    font-size: 9px;
    line-height: 1;
    background: var(--bg-page);
    padding: 0 var(--s-2);
}

/* ── Section Header wrapper ── */
.section-header { text-align: center; }


/* ==========================================================================
   4. LAYOUT — CONTAINER
   Centered max-width container with horizontal padding for all sections.
   ========================================================================== */
.container {
    width:         100%;
    max-width:     1200px;
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  var(--s-6);
    padding-right: var(--s-6);
}


/* ==========================================================================
   5. BUTTONS & CTAs
   A complete button system with primary (gold filled) and outline variants,
   plus a shimmer hover effect via a sliding pseudo-element.
   ========================================================================== */

/* ── Base button ── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--s-2);
    padding:         var(--s-3) var(--s-8);
    border-radius:   var(--r-full);
    font-family:     var(--font);
    font-size:       var(--text-base);
    font-weight:     700;
    letter-spacing:  0.03em;
    cursor:          pointer;
    transition:      var(--t-base);
    position:        relative;
    overflow:        hidden;
    white-space:     nowrap;
    border:          2px solid transparent;
    user-select:     none;
    -webkit-user-select: none;
}

/* ── Shimmer sweep on hover (via sliding pseudo-element) ── */
.btn::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       -100%;   /* Starts off-screen to the left  */
    width:      100%;
    height:     100%;
    background: linear-gradient(
        90deg,
        transparent   0%,
        rgba(255,255,255,0.18) 50%,
        transparent 100%
    );
    transition: left 0.55s ease;
}

/* Trigger the sweep on hover */
.btn:hover::before { left: 100%; }

/* ── Primary (Gold Fill) Button ── */
.btn-primary {
    background: linear-gradient(
        135deg,
        var(--gold-dark)    0%,
        var(--gold-primary) 50%,
        var(--gold-muted)  100%
    );
    color:        #0f0f0f;              /* Dark text on gold for high contrast */
    border-color: var(--gold-primary);
    box-shadow:   var(--shadow-gold);
}

.btn-primary:hover {
    background: linear-gradient(
        135deg,
        var(--gold-primary) 0%,
        var(--gold-light)   50%,
        var(--gold-primary) 100%
    );
    box-shadow: var(--shadow-gold-strong);
    transform:  translateY(-3px);
    color:      #0f0f0f;
}

.btn-primary:active { transform: translateY(-1px); }

/* ── Outline Button ── */
.btn-outline {
    background:   transparent;
    color:        var(--gold-primary);
    border-color: var(--gold-border);
}

.btn-outline:hover {
    background:   var(--gold-glow);
    border-color: var(--gold-primary);
    box-shadow:   var(--shadow-gold);
    transform:    translateY(-3px);
    color:        var(--gold-light);
}

/* ── Large size modifier ── */
.btn-large {
    padding:   var(--s-4) var(--s-10);
    font-size: var(--text-lg);
}


/* ==========================================================================
   6. HEADER & NAVIGATION
   Sticky glassmorphism navbar with logo, links, and CTA button.
   ========================================================================== */

/* ── Sticky header shell ── */
.site-header {
    position:  sticky;
    top:       0;
    left:      0;
    right:     0;
    z-index:   var(--z-sticky);

    /* Frosted glass effect */
    background:        rgba(8, 8, 8, 0.92);
    backdrop-filter:   blur(18px);
    -webkit-backdrop-filter: blur(18px);

    /* Hairline gold bottom border */
    border-bottom: 1px solid var(--gold-border);
    box-shadow:    0 4px 30px rgba(0,0,0,0.55);
}

/* ── Nav inner padding ── */
.navbar { padding: var(--s-3) 0; }

/* ── Flex row: logo | links | CTA ── */
.nav-container {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--s-6);
}

/* ── Logo link ── */
.logo-link {
    display:     flex;
    align-items: center;
    gap:         var(--s-3);
    flex-shrink: 0;
    transition:  var(--t-fast);
}

.logo-link:hover { opacity: 0.85; }

/* Logo image — circular crop with subtle glow */
.logo-img {
    width:         60px;
    height:        60px;
    object-fit:    contain;
    border-radius: var(--r-md);
    /* Soft gold drop-shadow beneath the logo */
    filter: drop-shadow(0 0 8px rgba(212,175,55,0.3));
}

/* ── Logo text stack ── */
.logo-text {
    display:        flex;
    flex-direction: column;
    line-height:    1.2;
}

/* Business name — metallic gold shimmer */
.logo-name {
    font-size:   var(--text-xl);
    font-weight: 900;
    background: linear-gradient(
        135deg,
        var(--gold-dark),
        var(--gold-primary),
        var(--gold-light),
        var(--gold-primary)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tagline below name */
.logo-tagline {
    font-size:   var(--text-xs);
    color:       var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* ── Horizontal nav links ── */
.nav-links {
    display:         flex;
    align-items:     center;
    gap:             var(--s-6);
    flex:            1;
    justify-content: center;
}

/* Individual nav link */
.nav-link {
    font-size:   var(--text-base);
    font-weight: 500;
    color:       var(--text-muted);
    transition:  var(--t-fast);
    position:    relative;
    padding-bottom: 2px;
}

/* ── Animated underline on nav link hover ──
   Starts at zero width and expands from right (RTL).
   ────────────────────────────────────────────────────────────────────────── */
.nav-link::after {
    content:       '';
    position:      absolute;
    bottom:        -2px;
    right:         0;
    width:         0;
    height:        2px;
    background:    var(--gold-primary);
    transition:    width 0.3s ease;
    border-radius: var(--r-full);
}

.nav-link:hover {
    color: var(--gold-primary);
}

.nav-link:hover::after { width: 100%; }

/* ── Pill-shaped CTA in the navbar ── */
.nav-cta-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--s-2);
    padding:         var(--s-2) var(--s-5);
    background:      linear-gradient(135deg, var(--gold-dark), var(--gold-primary));
    color:           #0f0f0f;
    border-radius:   var(--r-full);
    font-size:       var(--text-sm);
    font-weight:     700;
    transition:      var(--t-base);
    flex-shrink:     0;
    box-shadow:      0 0 14px rgba(212,175,55,0.25);
    white-space:     nowrap;
}

.nav-cta-btn:hover {
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
    box-shadow: 0 0 28px rgba(212,175,55,0.42);
    transform:  translateY(-2px);
    color:      #0f0f0f;
}


/* ==========================================================================
   7. HERO SECTION
   Full-viewport intro with H1, CTA buttons, and animated stat bar.
   Multi-layer radial gradient background creates depth without images.
   ========================================================================== */

.hero-section {
    position:        relative;
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    padding:         var(--s-20) 0 var(--s-16);

    /* Hero background with image overlay */
    background:
        linear-gradient(to bottom, rgba(15, 15, 15, 0.8), rgba(8, 8, 8, 0.9)),
        url('images/hero-bg.jpg') center/cover no-repeat;
}

/* Gold top-edge hairline */
.hero-section::before {
    content:  '';
    position: absolute;
    top:      0;
    left:     0;
    right:    0;
    height:   2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--gold-border)  25%,
        var(--gold-primary) 50%,
        var(--gold-border)  75%,
        transparent 100%
    );
    z-index: 1;
}

/* Radial vignette overlay for depth */
.hero-overlay {
    position:       absolute;
    inset:          0;
    background:     radial-gradient(
        circle at center,
        transparent 25%,
        rgba(0,0,0,0.35) 100%
    );
    pointer-events: none;
}

/* Center content block */
.hero-content {
    position:   relative;
    z-index:    var(--z-raised);
    text-align: center;
    max-width:  920px;
    margin:     0 auto;
}

/* ── Floating location badge ── */
.hero-badge {
    display:        inline-block;
    font-size:      var(--text-sm);
    font-weight:    700;
    letter-spacing: 0.1em;
    color:          var(--gold-primary);
    border:         1px solid var(--gold-border);
    background:     var(--gold-glow);
    padding:        var(--s-2) var(--s-6);
    border-radius:  var(--r-full);
    margin-bottom:  var(--s-6);

    /* Gentle floating animation */
    animation: floatBadge 3s ease-in-out infinite;
}

/* ── H1 — Primary SEO Keyword Heading ── */
.hero-title {
    font-size:     clamp(var(--text-3xl), 5.5vw, var(--text-6xl));
    font-weight:   900;
    color:         var(--text-primary);
    line-height:   1.22;
    margin-bottom: var(--s-6);

    /* Entrance animation */
    animation: fadeInUp 0.85s ease-out 0.15s both;
}

/* ── Hero descriptive paragraph ── */
.hero-subtitle {
    font-size:     clamp(var(--text-base), 2vw, var(--text-xl));
    color:         var(--text-muted);
    line-height:   1.85;
    margin-bottom: var(--s-10);
    max-width:     700px;
    margin-left:   auto;
    margin-right:  auto;

    animation: fadeInUp 0.85s ease-out 0.35s both;
}

.hero-subtitle strong { color: var(--gold-primary); }

/* ── CTA Button Group ── */
.hero-cta-group {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--s-5);
    flex-wrap:       wrap;
    margin-bottom:   var(--s-16);

    animation: fadeInUp 0.85s ease-out 0.55s both;
}

/* ── Statistics Row ──
   Glass card effect — backdrop-filter for frosted look.
   ────────────────────────────────────────────────────────────────────────── */
.hero-stats {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--s-8);
    padding:         var(--s-5) var(--s-10);
    background:      rgba(255,255,255,0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:          1px solid var(--gold-border);
    border-radius:   var(--r-2xl);
    box-shadow:      var(--shadow-gold);

    animation: fadeInUp 0.85s ease-out 0.75s both;
}

.stat-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--s-1);
}

/* Gold number — gradient shimmer */
.stat-number {
    font-size:   var(--text-3xl);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(
        135deg,
        var(--gold-dark),
        var(--gold-primary),
        var(--gold-light)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size:   var(--text-sm);
    color:       var(--text-muted);
    font-weight: 500;
}

/* Vertical divider between stats */
.stat-divider {
    width:        1px;
    height:       44px;
    background:   var(--gold-border);
    flex-shrink:  0;
}

/* ── Scroll Indicator Arrow ── */
.scroll-indicator {
    position:  absolute;
    bottom:    var(--s-8);
    left:      50%;
    transform: translateX(-50%);
    z-index:   var(--z-raised);
}

.scroll-arrow {
    display:      block;
    width:        22px;
    height:       22px;
    border-right: 2px solid var(--gold-primary);
    border-bottom: 2px solid var(--gold-primary);
    transform:    rotate(45deg);
    animation:    scrollBounce 1.6s ease-in-out infinite;
    opacity:      0.65;
}


/* ==========================================================================
   8. SERVICES SECTION
   Responsive CSS Grid of 7 service cards. Cards animate in sequentially.
   ========================================================================== */

.services-section {
    padding:  var(--s-24) 0;
    position: relative;
    background: linear-gradient(
        180deg,
        var(--bg-page)      0%,
        var(--bg-secondary) 50%,
        var(--bg-page)     100%
    );
}

/* ── 3-column grid (collapses responsively) ── */
.services-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--s-6);
    align-items:           stretch;
}

/* ── Individual card ── */
.service-card {
    display:          flex;
    flex-direction:   column;
    background-color: var(--bg-card);
    border:           1px solid rgba(212,175,55,0.13);
    border-radius:    var(--r-xl);
    overflow:         hidden;
    transition:       var(--t-base);
    box-shadow:       var(--shadow-md);

    /* Cards start invisible and slide up via staggered animation */
    opacity:   0;
    transform: translateY(24px);
    animation: cardReveal 0.6s ease-out forwards;
}

/* Stagger delay — each card enters 100ms after the previous */
.service-card:nth-child(1) { animation-delay: 0.10s; }
.service-card:nth-child(2) { animation-delay: 0.20s; }
.service-card:nth-child(3) { animation-delay: 0.30s; }
.service-card:nth-child(4) { animation-delay: 0.40s; }
.service-card:nth-child(5) { animation-delay: 0.50s; }
.service-card:nth-child(6) { animation-delay: 0.60s; }
.service-card:nth-child(7) { animation-delay: 0.70s; }

/* ── Card hover: lift + gold glow ── */
.service-card:hover {
    transform:    translateY(-7px);
    border-color: var(--gold-border);
    box-shadow:   var(--shadow-gold-strong);
}

/* ── Featured card variant (7th card — slightly wider glow) ── */
.service-card--featured {
    border-color: rgba(212,175,55,0.22);
}

/* ── Card image container ── */
.card-image-wrapper {
    position:  relative;
    overflow:  hidden;
    height:    200px;
    flex-shrink: 0;
}

/* Image itself */
.card-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.55s ease;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-elevated));
}

/* Zoom in image on card hover */
.service-card:hover .card-img { transform: scale(1.06); }

/* ── Gradient overlay on image (bottom-up fade) ── */
.card-img-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.10) 50%,
        transparent      100%
    );
    display:         flex;
    align-items:     flex-end;
    justify-content: flex-start;
    padding:         var(--s-4);
    transition:      var(--t-base);
}

.card-icon {
    font-size:  2rem;
    filter:     drop-shadow(0 0 10px rgba(212,175,55,0.55));
    transition: var(--t-base);
}

.service-card:hover .card-icon { transform: scale(1.12); }

/* ── Card body (text area) ── */
.card-body {
    padding:        var(--s-5) var(--s-6);
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            var(--s-3);
}

/* ── H3 card title with right-side gold accent bar ── */
.card-title {
    font-size:    var(--text-xl);
    font-weight:  800;
    color:        var(--text-primary);
    line-height:  1.35;
    padding-right: var(--s-3);
    border-right: 3px solid var(--gold-primary);
    transition:   var(--t-fast);
}

.service-card:hover .card-title { color: var(--gold-light); }

/* Card description */
.card-desc {
    font-size:   var(--text-sm);
    color:       var(--text-muted);
    line-height: 1.8;
    flex:        1;
}

.card-desc strong { color: var(--gold-muted); }

/* ── Card footer (CTA button) ── */
.card-footer {
    padding:     var(--s-4) var(--s-6);
    border-top:  1px solid rgba(212,175,55,0.09);
}

/* Card action button — full-width outline style */
.card-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    padding:         var(--s-3) var(--s-4);
    background:      transparent;
    border:          1px solid var(--gold-border);
    border-radius:   var(--r-md);
    color:           var(--gold-primary);
    font-size:       var(--text-sm);
    font-weight:     600;
    font-family:     var(--font);
    transition:      var(--t-base);
    cursor:          pointer;
}

.card-btn:hover {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold-primary));
    color:      var(--bg-page);
    border-color: var(--gold-primary);
    box-shadow:   var(--shadow-gold);
    transform:    translateY(-2px);
}


/* ==========================================================================
   9. WHY CHOOSE US SECTION
   Two-column layout: features grid (left) + SEO text block (right).
   ========================================================================== */

.why-us-section {
    padding:  var(--s-24) 0;
    position: relative;
    background: var(--bg-page);
}

/* Hairline gold rule at the very top of the section */
.why-us-section::before {
    content:  '';
    display:  block;
    width:    100%;
    height:   1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--gold-border) 20%,
        var(--gold-primary) 50%,
        var(--gold-border) 80%,
        transparent
    );
    margin-bottom: var(--s-24);
}

/* ── Two-column layout: features | SEO content ── */
.why-us-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--s-12);
    align-items:           start;
}

/* ── 2×3 grid of feature cards ── */
.features-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--s-4);
}

/* ── Feature card ── */
.feature-card {
    position:   relative;
    overflow:   hidden;
    background: var(--bg-card);
    border:     1px solid rgba(212,175,55,0.11);
    border-radius: var(--r-lg);
    padding:    var(--s-5);
    transition: var(--t-base);
}

/* Corner gold glow — revealed on hover */
.feature-card::after {
    content:   '';
    position:  absolute;
    top:       0;
    right:     0;
    width:     70px;
    height:    70px;
    background: radial-gradient(
        circle at top right,
        rgba(212,175,55,0.12),
        transparent 70%
    );
    opacity:    0;
    transition: opacity 0.3s ease;
}

.feature-card:hover::after   { opacity: 1; }

.feature-card:hover {
    border-color: var(--gold-border);
    transform:    translateY(-4px);
    box-shadow:   var(--shadow-gold);
}

/* Feature emoji/icon */
.feature-icon {
    font-size:     1.9rem;
    display:       block;
    margin-bottom: var(--s-3);
}

/* H3 feature title */
.feature-title {
    font-size:     var(--text-base);
    font-weight:   800;
    color:         var(--gold-primary);
    margin-bottom: var(--s-2);
    line-height:   1.3;
}

/* Feature description */
.feature-desc {
    font-size:   var(--text-sm);
    color:       var(--text-muted);
    line-height: 1.8;
}

/* ── SEO-Rich Text Block ──
   This block is intentionally text-dense to help search engines
   understand the business's geographic coverage and service range.
   It is styled elegantly to avoid feeling like a keyword dump.
   ────────────────────────────────────────────────────────────────────────── */
.seo-content-block {
    position:      relative;
    overflow:      hidden;
    background:    var(--bg-card);
    border:        1px solid var(--gold-border);
    border-radius: var(--r-xl);
    padding:       var(--s-8);
    box-shadow:    var(--shadow-gold);
}

/* Decorative radial corner accent */
.seo-content-block::before {
    content:   '';
    position:  absolute;
    top:       0;
    right:     0;
    width:     130px;
    height:    130px;
    background: radial-gradient(
        circle at top right,
        rgba(212,175,55,0.13),
        transparent 70%
    );
    pointer-events: none;
}

/* H3 title inside SEO block */
.seo-block-title {
    font-size:     var(--text-2xl);
    font-weight:   800;
    color:         var(--gold-primary);
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--gold-border);
    line-height:   1.4;
}

/* Body paragraphs inside SEO block */
.seo-content-block p {
    font-size:     var(--text-base);
    color:         var(--text-body);
    line-height:   1.85;
    margin-bottom: var(--s-5);
}

.seo-content-block p:last-of-type { margin-bottom: 0; }

.seo-content-block p strong {
    color:       var(--gold-light);
    font-weight: 600;
}

/* ── Locations served list inside SEO block ── */
.locations-served {
    margin-top:    var(--s-6);
    padding:       var(--s-5);
    background:    rgba(212,175,55,0.04);
    border:        1px solid rgba(212,175,55,0.18);
    border-radius: var(--r-lg);
}

/* H4 inside locations block */
.locations-title {
    font-size:     var(--text-base);
    font-weight:   800;
    color:         var(--gold-primary);
    margin-bottom: var(--s-4);
    display:       flex;
    align-items:   center;
    gap:           var(--s-2);
}

/* Locations list */
.locations-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--s-2);
}

.locations-list li {
    display:       flex;
    align-items:   center;
    gap:           var(--s-3);
    font-size:     var(--text-sm);
    color:         var(--text-body);
    padding:       var(--s-2) 0;
    border-bottom: 1px solid rgba(212,175,55,0.07);
    transition:    var(--t-fast);
}

.locations-list li:last-child { border-bottom: none; }

.locations-list li:hover { color: var(--gold-light); }

/* Gold diamond bullet */
.locations-list li > span:first-child {
    color:       var(--gold-primary);
    font-size:   var(--text-xs);
    flex-shrink: 0;
}

.locations-list li strong { color: var(--gold-primary); }


/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */

.testimonials-section {
    padding: var(--s-20) 0;
    background-color: var(--bg-secondary);
    position: relative;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-6);
    margin-top: var(--s-10);
}

.testimonial-card {
    background: var(--bg-card);
    padding: var(--s-8) var(--s-6);
    border-radius: var(--r-xl);
    border: 1px solid var(--gold-border);
    box-shadow: var(--shadow-md);
    transition: var(--t-base);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-gold);
}

.testimonial-card .stars {
    font-size: var(--text-xl);
    margin-bottom: var(--s-4);
    letter-spacing: 2px;
}

.testimonial-text {
    font-size: var(--text-base);
    color: var(--text-body);
    font-style: italic;
    line-height: 1.8;
    margin-bottom: var(--s-6);
    position: relative;
    flex-grow: 1;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    align-items: center;
    margin-top: auto;
}

.testimonial-author .author-name {
    color: var(--gold-primary);
    font-weight: 700;
    font-size: var(--text-lg);
}

.testimonial-author .author-loc {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ==========================================================================
   10. CTA CONTACT SECTION
   Full-width call-to-action with contact information cards.
   ========================================================================== */

.cta-section {
    position:   relative;
    padding:    var(--s-24) 0;
    text-align: center;
    overflow:   hidden;
    border-top:    1px solid var(--gold-border);
    border-bottom: 1px solid var(--gold-border);

    /* Warm gold radial center glow */
    background:
        radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.09) 0%, transparent 65%),
        linear-gradient(135deg, #080808 0%, var(--bg-secondary) 50%, #080808 100%);
}

/* Flanking radial overlays for depth */
.cta-overlay {
    position:       absolute;
    inset:          0;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(212,175,55,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 50%, rgba(212,175,55,0.06) 0%, transparent 50%);
    pointer-events: none;
}

.cta-content { position: relative; z-index: var(--z-raised); }

/* H2 CTA title */
.cta-title {
    font-size:     clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
    font-weight:   900;
    color:         var(--text-primary);
    margin-bottom: var(--s-4);
}

.cta-subtitle {
    font-size:     var(--text-lg);
    color:         var(--text-muted);
    margin-bottom: var(--s-10);
    max-width:     620px;
    margin-left:   auto;
    margin-right:  auto;
    line-height:   1.8;
}

.cta-subtitle strong { color: var(--gold-primary); }

/* Button row */
.cta-buttons {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--s-5);
    flex-wrap:       wrap;
    margin-bottom:   var(--s-12);
}

/* ── Contact info cards row ── */
.contact-cards {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--s-5);
    flex-wrap:       wrap;
}

.contact-card {
    display:         flex;
    align-items:     center;
    gap:             var(--s-3);
    padding:         var(--s-4) var(--s-6);
    background:      rgba(255,255,255,0.025);
    border:          1px solid var(--gold-border);
    border-radius:   var(--r-xl);
    transition:      var(--t-base);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.contact-card:hover {
    background: var(--gold-glow);
    border-color: var(--gold-primary);
    transform:  translateY(-3px);
    box-shadow: var(--shadow-gold);
}

.contact-card-icon { font-size: 1.6rem; }

.contact-card-label {
    display:       block;
    font-size:     var(--text-xs);
    color:         var(--text-muted);
    margin-bottom: 2px;
}

.contact-card-value {
    display:     block;
    font-size:   var(--text-base);
    font-weight: 700;
    color:       var(--gold-primary);
    transition:  var(--t-fast);
}

.contact-card-value:hover { color: var(--gold-light); }


/* ==========================================================================
   11. SITE FOOTER
   Four-column grid with brand, services, locations, and contact info.
   ========================================================================== */

.site-footer {
    background-color: var(--bg-footer);
    padding-top:      var(--s-16);
    border-top:       1px solid var(--gold-border);
}

/* ── 4-column footer grid ── */
.footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap:                   var(--s-10);
    padding-bottom:        var(--s-12);
}

/* ── Brand column ── */
.footer-brand {
    display:        flex;
    flex-direction: column;
    gap:            var(--s-4);
}

.footer-logo {
    width:         70px;
    height:        70px;
    object-fit:    contain;
    border-radius: var(--r-md);
    filter: drop-shadow(0 0 6px rgba(212,175,55,0.25));
}

/* Metallic gold business name */
.footer-brand-name {
    font-size:   var(--text-xl);
    font-weight: 900;
    background: linear-gradient(
        135deg,
        var(--gold-dark),
        var(--gold-primary),
        var(--gold-light)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand-desc {
    font-size:   var(--text-sm);
    color:       var(--text-faint);
    line-height: 1.8;
    max-width:   280px;
}

/* ── Column heading ── */
.footer-col-title {
    font-size:     var(--text-base);
    font-weight:   800;
    color:         var(--gold-primary);
    margin-bottom: var(--s-5);
    position:      relative;
    padding-bottom: var(--s-3);
}

/* Short gold underline accent */
.footer-col-title::after {
    content:       '';
    position:      absolute;
    bottom:        0;
    right:         0;
    width:         28px;
    height:        2px;
    background:    var(--gold-primary);
    border-radius: var(--r-full);
}

/* ── Links inside footer columns ── */
.footer-links {
    display:        flex;
    flex-direction: column;
    gap:            var(--s-3);
}

.footer-link {
    font-size:   var(--text-sm);
    color:       var(--text-faint);
    transition:  var(--t-fast);
    display:     block;
}

/* Indent on hover (RTL-aware — uses padding-right) */
.footer-link:hover {
    color:         var(--gold-primary);
    padding-right: var(--s-2);
}

/* ── Contact address block ── */
.footer-contact {
    font-style:     normal;
    display:        flex;
    flex-direction: column;
    gap:            var(--s-4);
}

.footer-contact-item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--s-3);
}

.contact-icon {
    font-size:   var(--text-base);
    flex-shrink: 0;
    margin-top:  2px;
}

/* ── Footer bottom bar ── */
.footer-bottom {
    border-top: 1px solid rgba(212,175,55,0.08);
    padding:    var(--s-6) 0;
}

/* Gradient rule above copyright */
.footer-divider {
    width:  100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,0.2),
        transparent
    );
    margin-bottom: var(--s-6);
}

.footer-bottom-content {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--s-4);
}

.copyright {
    font-size: var(--text-sm);
    color:     var(--text-faint);
}

.copyright strong { color: var(--gold-muted); }

/* SEO footer location links */
.footer-seo-text {
    font-size: var(--text-sm);
    color:     var(--text-faint);
}

.footer-seo-text a {
    color:      var(--gold-muted);
    transition: var(--t-fast);
}

.footer-seo-text a:hover { color: var(--gold-primary); }


/* ==========================================================================
   12. KEYFRAME ANIMATIONS
   ========================================================================== */

/* Fade up entrance (hero text, stats) */
@keyframes fadeInUp {
    from {
        opacity:   0;
        transform: translateY(32px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/* Gentle vertical float (hero badge) */
@keyframes floatBadge {
    0%, 100% { transform: translateY(0px);  }
    50%       { transform: translateY(-5px); }
}

/* Bouncing scroll arrow */
@keyframes scrollBounce {
    0%, 100% { transform: rotate(45deg) translateY(0);   opacity: 0.65; }
    50%       { transform: rotate(45deg) translateY(7px); opacity: 1;    }
}

/* Service card entrance */
@keyframes cardReveal {
    from {
        opacity:   0;
        transform: translateY(24px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/* Pulsing gold border glow (can be applied selectively) */
@keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(212,175,55,0.15); }
    50%       { box-shadow: 0 0 28px rgba(212,175,55,0.40); }
}


/* ==========================================================================
   13. RESPONSIVE — MEDIA QUERIES
   Breakpoints: 1024px (tablet landscape), 768px (tablet), 480px (phone),
                360px (very small phone)
   ========================================================================== */

/* ── TABLET LANDSCAPE / SMALL LAPTOP (≤ 1024px) ── */
@media (max-width: 1024px) {

    /* Services: switch from 3 to 2 columns */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Why-us: stack into single column */
    .why-us-layout {
        grid-template-columns: 1fr;
    }

    /* Features: spread across 3 columns on wide tablets */
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer: 2 columns */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-8);
    }
}

/* ── TABLET PORTRAIT (≤ 768px) ── */
@media (max-width: 768px) {

    /* ─ Navigation ─ */
    /* Hide full nav links — rely on nav CTA button */
    .nav-links {
        display: none;
    }

    .logo-tagline {
        display: none;
    }

    /* ─ Hero ─ */
    .hero-section {
        min-height: 92vh;
        padding:    var(--s-16) 0 var(--s-12);
    }

    .hero-stats {
        gap:     var(--s-5);
        padding: var(--s-4) var(--s-5);
    }

    .stat-number { font-size: var(--text-2xl); }

    /* ─ Services: 2-column on tablet ─ */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-4);
    }

    /* ─ Features: 2-column on tablet ─ */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ─ Contact cards: vertical stack ─ */
    .contact-cards {
        flex-direction: column;
        align-items:    stretch;
        max-width:      420px;
        margin-left:    auto;
        margin-right:   auto;
    }

    /* ─ Footer: single column ─ */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }

    .footer-brand-desc { max-width: 100%; }

    .footer-bottom-content {
        flex-direction: column;
        text-align:     center;
    }
}

/* ── MOBILE PHONES (≤ 480px) ── */
@media (max-width: 480px) {

    /* Tighter global padding */
    .container {
        padding-left:  var(--s-4);
        padding-right: var(--s-4);
    }

    /* ─ Hero CTA: stack buttons vertically ─ */
    .hero-cta-group {
        flex-direction: column;
        align-items:    stretch;
    }

    .hero-cta-group .btn {
        text-align:      center;
        justify-content: center;
    }

    /* ─ Stats: vertical stack ─ */
    .hero-stats {
        flex-direction: column;
        gap: var(--s-4);
    }

    /* Horizontal dividers become horizontal rules */
    .stat-divider {
        width:  50px;
        height: 1px;
    }

    /* ─ Services: single column on phones ─ */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* ─ Features: single column on phones ─ */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* ─ CTA: stack buttons vertically ─ */
    .cta-buttons {
        flex-direction: column;
        align-items:    stretch;
    }

    .cta-buttons .btn {
        text-align:      center;
        justify-content: center;
    }

    /* ─ Nav elements ─ */
    .nav-cta-btn {
        font-size: 0.75rem;
        padding:   var(--s-2) var(--s-3);
    }

    .logo-img {
        width:  46px;
        height: 46px;
    }

    .logo-name { font-size: var(--text-base); }

    /* ─ Reduce section vertical padding ─ */
    .services-section,
    .why-us-section,
    .cta-section {
        padding: var(--s-16) 0;
    }

    .seo-content-block { padding: var(--s-5); }
}

/* ── VERY SMALL PHONES (≤ 360px) ── */
@media (max-width: 360px) {

    .hero-badge {
        font-size: 0.68rem;
        padding:   var(--s-1) var(--s-3);
    }

    .btn-large {
        padding:   var(--s-3) var(--s-5);
        font-size: var(--text-base);
    }

    .hero-stats { padding: var(--s-3) var(--s-3); }
}