/*
Theme Name: Hello Elementor Child — Spark Solutions
Description: Premium Spark Solutions public website.
*/

/* =========================================================
   DESIGN SYSTEM
   ========================================================= */
:root {
    --color-accent: #F5A623;
    --bg: #080808;
    --bg-2: #0d0d0d;
    --surface: #121212;
    --line: rgba(255,255,255,.09);
    --white: #fff;
    --text: #d7d7d7;
    --muted: #777;
    --gold: #F5A623;
    --gold-light: #F7C948;
    --container: 1280px;
    --ease: cubic-bezier(.22,1,.36,1);
}

/* =========================================================
   FIX: FIXED HEADER OFFSET — ARCHITECTURAL
   ========================================================= */
body {
    padding-top: 80px;
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--white);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

/* =========================================================
   CONTAINER
   ========================================================= */
.spark-container {
    width: min(var(--container), calc(100% - 64px)) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* =========================================================
   HERO
   ========================================================= */
.spark-hero {
    min-height: 100vh !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 82% 48%, rgba(245,166,35,0.08), transparent 28%), var(--bg) !important;
    border-bottom: 1px solid var(--line) !important;
}

.spark-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 100vh;
    padding: 120px 0 60px;
    width: 100%;
}

.spark-hero-copy {
    flex: 1 1 45% !important;
    max-width: 50% !important;
    min-width: 280px !important;
    position: relative !important;
    z-index: 5 !important;
}

.spark-hero-visual {
    flex: 1 1 45% !important;
    max-width: 50% !important;
    min-height: 500px !important;
    height: auto !important;
    min-width: 280px !important;
    position: relative !important;
    isolation: isolate !important;
}

/* Hero Content */
.spark-eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
    color: var(--gold) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
}

.spark-eyebrow-line {
    width: 28px !important;
    height: 1px !important;
    background: var(--gold) !important;
    flex: 0 0 auto !important;
}

.spark-hero-title {
    max-width: 780px !important;
    margin: 0 !important;
    font-size: clamp(54px, 6.4vw, 96px) !important;
    line-height: .91 !important;
    letter-spacing: -.065em !important;
    font-weight: 700 !important;
}

.spark-text-accent {
    color: var(--gold) !important;
}

.spark-hero-description {
    max-width: 590px !important;
    margin: 34px 0 0 !important;
    color: #8c8c8c !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

.spark-hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 38px !important;
}

.spark-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    min-height: 52px !important;
    padding: 0 25px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    transition: .4s var(--ease) !important;
    border: none !important;
    cursor: pointer !important;
}

.spark-btn-primary {
    background: var(--gold) !important;
    color: #080808 !important;
}

.spark-btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 60px rgba(245,166,35,.2) !important;
}

.spark-btn-ghost {
    border: 1px solid rgba(255,255,255,.16) !important;
    background: transparent !important;
    color: #fff !important;
}

.spark-btn-ghost:hover {
    border-color: rgba(255,255,255,.5) !important;
}

.spark-btn-arrow {
    font-size: 16px !important;
    line-height: 1 !important;
    transition: transform .4s var(--ease) !important;
}

.spark-btn:hover .spark-btn-arrow {
    transform: translate(3px, -3px) !important;
}

.spark-hero-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 55px !important;
    color: #555 !important;
    font-size: 9px !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.spark-meta-dot {
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: var(--gold) !important;
}

/* 3D Container */
.spark-hero-visual canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3 !important;
}

.spark-3d-fallback {
    position: absolute !important;
    inset: 12% !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: rgba(255,255,255,.12) !important;
    font-size: 11px !important;
    letter-spacing: .4em !important;
    pointer-events: none !important;
}

.spark-orbit {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(520px, 85%) !important;
    height: 180px !important;
    border: 1px solid rgba(245,166,35,.11) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) rotate(-22deg) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.spark-orbit.orbit-two {
    transform: translate(-50%, -50%) rotate(58deg) !important;
    opacity: .45 !important;
}

.spark-scroll-indicator {
    position: absolute !important;
    z-index: 5 !important;
    left: max(32px, calc((100vw - var(--container)) / 2)) !important;
    bottom: 32px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    color: #555 !important;
    font-size: 8px !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
}

.spark-scroll-line {
    display: block !important;
    position: relative !important;
    width: 70px !important;
    height: 1px !important;
    background: rgba(255,255,255,.12) !important;
}

.spark-scroll-line::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 22px !important;
    height: 1px !important;
    background: var(--gold) !important;
    animation: sparkScroll 2.2s ease-in-out infinite !important;
}

@keyframes sparkScroll {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(48px); }
}

/* =========================================================
   RESPONSIVE — HERO
   ========================================================= */
@media (max-width: 768px) {
    .spark-hero-inner {
        flex-direction: column !important;
        padding-top: 100px !important;
        gap: 30px !important;
    }
    .spark-hero-copy,
    .spark-hero-visual {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    .spark-hero-visual {
        min-height: 300px !important;
    }
    .spark-hero-title {
        font-size: clamp(45px, 13vw, 68px) !important;
    }
    .spark-hero-description {
        font-size: 14px !important;
    }
    .spark-hero-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .spark-btn {
        width: 100% !important;
    }
    .spark-hero-meta {
        margin-top: 35px !important;
    }
    .spark-orbit {
        width: 290px !important;
        height: 100px !important;
    }
    .spark-scroll-indicator {
        display: none !important;
    }
}

/* =========================================================
   SECTION SYSTEM
   ========================================================= */
.spark-section {
    position: relative !important;
    padding: 150px 0 !important;
}

.section-padding {
    padding: 6rem 0 !important;
}

.spark-section-header {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 90px !important;
    align-items: end !important;
    margin-bottom: 4rem !important;
}

.spark-section-kicker {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 8px !important;
    color: #555 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.spark-section-kicker span:first-child {
    color: var(--gold) !important;
    font-size: 11px !important;
}

.spark-section-title {
    max-width: 850px !important;
    margin: 0 !important;
    font-size: clamp(44px, 5.4vw, 76px) !important;
    line-height: .95 !important;
    letter-spacing: -.055em !important;
    font-weight: 600 !important;
}

.spark-section-description {
    max-width: 540px !important;
    margin: 25px 0 0 !important;
    color: #727272 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

/* =========================================================
   SERVICES
   ========================================================= */
.spark-services {
    background: var(--bg-2) !important;
}

.spark-services-list {
    margin-top: 90px !important;
    border-top: 1px solid var(--line) !important;
}

.spark-service-row {
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) 50px !important;
    align-items: center !important;
    gap: 30px !important;
    padding: 45px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    transition: padding .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease) !important;
    text-decoration: none !important;
}

.spark-service-row:hover {
    padding-left: 24px !important;
    padding-right: 24px !important;
    border-color: rgba(245,166,35,.28) !important;
    background: rgba(255,255,255,.012) !important;
}

.spark-service-number {
    color: #4a4a4a !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
}

.spark-service-main h3 {
    margin: 0 0 10px !important;
    color: #fff !important;
    font-size: clamp(28px, 3vw, 45px) !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
    font-weight: 600 !important;
}

.spark-service-main p {
    max-width: 650px !important;
    margin: 0 !important;
    color: #686868 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

.spark-service-arrow {
    color: var(--gold) !important;
    font-size: 25px !important;
    transition: transform .4s var(--ease) !important;
}

.spark-service-row:hover .spark-service-arrow {
    transform: translate(5px, -5px) !important;
}

/* =========================================================
   PAGE HEADER SYSTEM
   ========================================================= */
.spark-page-header {
    padding: 140px 0 40px;
    background: var(--bg, #0a0a0a);
    border-bottom: 1px solid var(--line, rgba(255,255,255,.09));
}
.spark-page-header-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.spark-page-header-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--muted, #777);
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.spark-page-number {
    color: var(--gold, #F5A623);
    font-weight: 700;
    font-size: 14px;
}
.spark-page-label {
    color: var(--text-secondary, #aaa);
}
.spark-page-subtitle {
    max-width: 600px;
    margin: 0;
    color: var(--muted, #777);
    font-size: 18px;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .spark-page-header {
        padding: 100px 0 30px;
    }
    .spark-page-subtitle {
        font-size: 15px;
    }
}

/* =========================================================
   SERVICES PAGE — DETAIL SECTIONS
   ========================================================= */
.service-detail {
    padding: 100px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.service-detail:last-child {
    border-bottom: 0;
}
.service-detail .service-number {
    font-size: 14px;
    color: var(--gold, #F5A623);
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
}
.service-detail h2 {
    font-size: clamp(36px, 4vw, 56px);
    line-height: .95;
    letter-spacing: -.045em;
    font-weight: 600;
    margin: 0 0 15px;
}
.service-detail .service-desc {
    max-width: 600px;
    color: #777;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 25px;
}
.service-detail .service-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 30px;
}
.service-detail .service-list li {
    color: #aaa;
    font-size: 14px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.service-detail .service-list li::before {
    content: "✦";
    color: var(--gold, #F5A623);
    margin-right: 10px;
    font-size: 10px;
}
.service-detail .btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--gold, #F5A623);
    color: #080808;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none;
    transition: .3s;
}
.service-detail .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 60px rgba(245,166,35,.2);
}
.service-detail .btn .arrow {
    font-size: 16px;
    transition: transform .3s;
}
.service-detail .btn:hover .arrow {
    transform: translate(3px, -3px);
}
.service-detail:nth-child(even) {
    background: var(--bg-2, #0d0d0d);
}

/* =========================================================
   WORK PAGE
   ========================================================= */
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}
.work-card {
    background: var(--surface, #121212);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
    transition: .4s;
}
.work-card:hover {
    transform: translateY(-8px);
    border-color: rgba(245,166,35,0.2);
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.work-card .image {
    height: 240px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    font-size: 12px;
    letter-spacing: .1em;
    position: relative;
    overflow: hidden;
}
.work-card .image .placeholder-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(245,166,35,0.15);
    color: var(--gold, #F5A623);
    font-size: 9px;
    padding: 4px 12px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.work-card .content {
    padding: 24px 24px 28px;
}
.work-card .content .category {
    color: var(--gold, #F5A623);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 600;
}
.work-card .content h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 8px 0 4px;
    line-height: 1.2;
}
.work-card .content .client {
    color: #777;
    font-size: 13px;
}
.work-card .content .result {
    color: var(--gold, #F5A623);
    font-size: 13px;
    margin-top: 10px;
    font-weight: 500;
}
.work-card .content .link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold, #F5A623);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 16px;
    transition: .3s;
}
.work-card .content .link:hover {
    gap: 14px;
}

/* =========================================================
   CASE STUDIES
   ========================================================= */
.cs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 60px;
}
.cs-card {
    background: var(--surface, #121212);
    border-radius: 16px;
    padding: 32px 30px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: .4s;
}
.cs-card:hover {
    border-color: rgba(245,166,35,0.2);
    transform: translateY(-4px);
}
.cs-card .cs-client {
    color: var(--gold, #F5A623);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.cs-card .cs-industry {
    color: #555;
    font-size: 11px;
    letter-spacing: .05em;
    margin-bottom: 12px;
}
.cs-card h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.2;
}
.cs-card .cs-challenge {
    color: #777;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}
.cs-card .cs-result {
    color: var(--gold, #F5A623);
    font-size: 14px;
    font-weight: 500;
}
.cs-card .cs-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold, #F5A623);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 16px;
    transition: .3s;
}
.cs-card .cs-link:hover {
    gap: 14px;
}
.cs-placeholder {
    text-align: center;
    padding: 80px 40px;
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 16px;
    grid-column: 1 / -1;
}
.cs-placeholder .icon {
    font-size: 48px;
    color: var(--gold, #F5A623);
    opacity: .3;
    margin-bottom: 20px;
}
.cs-placeholder h3 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px;
}
.cs-placeholder p {
    color: #777;
    font-size: 16px;
    max-width: 480px;
    margin: 0 auto 25px;
    line-height: 1.7;
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 60px 0;
}
.about-visual {
    min-height: 500px;
    background: var(--surface, #121212);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    position: relative;
    overflow: hidden;
}
.about-visual .deco {
    position: absolute;
    border: 1px solid rgba(245,166,35,0.08);
    border-radius: 50%;
    pointer-events: none;
}
.about-visual .deco:nth-child(1) {
    width: 300px;
    height: 120px;
    right: -40px;
    top: 60px;
    transform: rotate(-20deg);
}
.about-visual .deco:nth-child(2) {
    width: 220px;
    height: 90px;
    right: 10px;
    bottom: 80px;
    transform: rotate(40deg);
}
.about-visual .label {
    position: relative;
    z-index: 2;
    color: var(--gold, #F5A623);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.about-content h2 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 600;
    margin: 0 0 25px;
}
.about-content p {
    color: #777;
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 20px;
    max-width: 540px;
}
.about-principles {
    margin-top: 80px;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 60px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}
.about-principles .principle {
    text-align: center;
}
.about-principles .principle .num {
    font-size: 28px;
    font-weight: 700;
    color: var(--gold, #F5A623);
    opacity: .3;
    line-height: 1;
    margin-bottom: 10px;
}
.about-principles .principle h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 5px;
}
.about-principles .principle p {
    color: #666;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    max-width: 100%;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding: 60px 0 120px;
    background: var(--bg-2, #0d0d0d);
}
.contact-info h2 {
    font-size: clamp(36px, 4vw, 52px);
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 600;
    margin: 0 0 20px;
}
.contact-info p {
    color: #777;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 460px;
}
.contact-info .detail {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: #aaa;
    font-size: 14px;
}
.contact-info .detail .icon {
    color: var(--gold, #F5A623);
    font-size: 18px;
    width: 24px;
    text-align: center;
}

/* =========================================================
   FORM
   ========================================================= */
.spark-form {
    max-width: 100%;
}
.spark-form .form-step {
    display: none;
}
.spark-form .form-step.active {
    display: block;
}
.spark-form .form-group {
    margin-bottom: 18px;
}
.spark-form label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #ddd;
    margin-bottom: 5px;
}
.spark-form label .required {
    color: var(--gold, #F5A623);
}
.spark-form input,
.spark-form select,
.spark-form textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface, #121212);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    transition: .3s;
}
.spark-form input:focus,
.spark-form select:focus,
.spark-form textarea:focus {
    outline: none;
    border-color: var(--gold, #F5A623);
    box-shadow: 0 0 0 3px rgba(245,166,35,0.1);
}
.spark-form select option {
    background: #121212;
}
.spark-form textarea {
    min-height: 100px;
    resize: vertical;
}
.spark-form .form-progress {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}
.spark-form .form-progress span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transition: .3s;
}
.spark-form .form-progress span.active {
    background: var(--gold, #F5A623);
}
.spark-form .form-progress span.done {
    background: var(--gold, #F5A623);
    opacity: .4;
}
.spark-form .form-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 12px;
}
.spark-form .btn-next,
.spark-form .btn-prev {
    padding: 12px 28px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: .3s;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.spark-form .btn-next {
    background: var(--gold, #F5A623);
    color: #080808;
}
.spark-form .btn-prev {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: #aaa;
}
.spark-form .btn-next:hover {
    transform: scale(1.03);
}
.spark-form .btn-prev:hover {
    border-color: rgba(255,255,255,0.3);
}
.spark-form .form-success {
    display: none;
    text-align: center;
    padding: 40px;
}
.spark-form .form-success .icon {
    font-size: 48px;
    margin-bottom: 20px;
}
.spark-form .form-success h3 {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 10px;
}
.spark-form .form-success p {
    color: #777;
    font-size: 16px;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.7;
}

/* =========================================================
   RESPONSIVE — ADDITIONAL
   ========================================================= */
@media (max-width: 1024px) {
    .service-detail .service-list {
        grid-template-columns: 1fr;
    }
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cs-grid {
        grid-template-columns: 1fr;
    }
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .about-visual {
        min-height: 320px;
    }
    .about-principles {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .service-detail {
        padding: 60px 0;
    }
    .service-detail .btn {
        width: 100%;
        justify-content: center;
    }
    .work-grid {
        grid-template-columns: 1fr;
    }
    .work-card .image {
        height: 180px;
    }
    .cs-grid {
        grid-template-columns: 1fr;
    }
    .cs-card {
        padding: 24px 20px;
    }
    .cs-placeholder {
        padding: 50px 24px;
    }
    .about-principles {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .about-visual {
        min-height: 220px;
        padding: 24px;
    }
    .contact-grid {
        padding: 30px 0 80px;
    }
    .spark-form .form-nav {
        flex-direction: column;
    }
    .spark-form .btn-next,
    .spark-form .btn-prev {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   WORK CTA ANIMATION (Portfolio section)
   ========================================================= */
@keyframes sparkPulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
    50% { transform: scale(1.1) rotate(180deg); opacity: 1; }
}

/* =========================================================
   NAVIGATION ACTIVE STATE
   ========================================================= */
.nav-menu .current-menu-item a {
    color: var(--gold, #F5A623) !important;
}
.nav-menu .current-menu-item a::after {
    width: 100% !important;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   SERVICE 3D CONTAINER
   ========================================================= */
.service-3d-container {
    background: var(--surface, #121212);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    min-height: 300px;
    overflow: hidden;
    position: relative;
}

.service-3d-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* =========================================================
   TOUCH TARGETS — Mobile ke liye
   ========================================================= */
a,
button,
input[type="submit"],
input[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 16px !important;
}

/* Navigation links touch target */
.nav-menu a {
    padding: 10px 14px !important;
    display: inline-block !important;
}

/* =========================================================
   PREMIUM FOOTER — SPARK SOLUTIONS
   ========================================================= */
.spark-footer {
    background: #0a0a0a;
    border-top: 2px solid rgba(245, 166, 35, 0.15);
    padding: 60px 0 30px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.spark-footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.spark-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.spark-footer-logo {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #ffffff;
    margin-bottom: 6px;
}

.spark-footer-slogan {
    color: #F5A623;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.spark-footer-desc {
    color: #888;
    font-size: 0.85rem;
    line-height: 1.7;
    max-width: 300px;
    margin-bottom: 18px;
}

.spark-footer-social {
    display: flex;
    gap: 14px;
    margin-top: 8px;
}

.spark-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    color: #aaa;
    transition: all 0.3s ease;
    text-decoration: none;
}

.spark-social-link:hover {
    border-color: #F5A623;
    background: rgba(245,166,35,0.1);
    color: #F5A623;
    transform: translateY(-3px);
}

.spark-social-link svg {
    width: 18px;
    height: 18px;
}

.spark-footer-title {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0 0 18px;
    padding-bottom: 10px;
    position: relative;
}

.spark-footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: #F5A623;
    border-radius: 2px;
}

.spark-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spark-footer-links li {
    margin-bottom: 10px;
}

.spark-footer-links a {
    color: #888;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    position: relative;
}

.spark-footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #F5A623;
    transition: width 0.3s ease;
}

.spark-footer-links a:hover {
    color: #ffffff;
}

.spark-footer-links a:hover::after {
    width: 100%;
}

.spark-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spark-footer-contact li {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    color: #888;
    font-size: 0.85rem;
    line-height: 1.6;
    align-items: flex-start;
}

.spark-footer-contact li a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}

.spark-footer-contact li a:hover {
    color: #F5A623;
}

.spark-footer-icon {
    flex-shrink: 0;
    width: 20px;
    color: #F5A623;
    font-size: 1rem;
}

.spark-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.spark-footer-copy {
    color: #555;
    font-size: 0.8rem;
}

.spark-footer-copy strong {
    color: #F5A623;
    font-weight: 600;
}

.spark-footer-legal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spark-footer-legal a {
    color: #555;
    text-decoration: none;
    font-size: 0.75rem;
    transition: color 0.3s ease;
}

.spark-footer-legal a:hover {
    color: #F5A623;
}

.spark-footer-dot {
    color: #333;
    font-size: 0.6rem;
}

@media (max-width: 1024px) {
    .spark-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .spark-footer {
        padding: 40px 0 20px;
    }
    .spark-footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-bottom: 30px;
    }
    .spark-footer-desc {
        max-width: 100%;
    }
    .spark-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding-top: 20px;
    }
    .spark-footer-legal {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =========================================================
   CLEAN PREMIUM HEADER & NAVIGATION
   ========================================================= */

/* ----- Header Container ----- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 18px 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

.site-header.scrolled {
    padding: 12px 0;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ----- Inner Flex Container ----- */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 56px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ----- Logo ----- */
.logo-text {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.logo-text:hover {
    color: #F5A623;
}

/* ----- Desktop Navigation ----- */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
    align-items: center;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 8px 0;
    position: relative;
    transition: color 0.3s ease;
    white-space: nowrap;
}

/* Gold underline hover & active */
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #F5A623;
    transition: width 0.3s ease;
}

.nav-menu a:hover,
.nav-menu .current-menu-item a {
    color: #ffffff;
}

.nav-menu a:hover::after,
.nav-menu .current-menu-item a::after {
    width: 100%;
}

/* ----- CTA Button (desktop) ----- */
.btn-nav {
    padding: 0.6rem 1.8rem;
    font-size: 0.8rem;
    flex-shrink: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ----- Mobile Toggle ----- */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    align-items: center;
}

.nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Toggle active state (X animation) */
.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ----- Mobile Menu Overlay ----- */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.nav-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ----- Mobile Menu (slide-in) ----- */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-overlay {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: #0a0a0a;
        padding: 5rem 2rem 2rem;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
        overflow-y: auto;
        border-left: 1px solid rgba(255,255,255,0.05);
        display: block;
    }

    .main-nav.active {
        right: 0;
    }

    .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        width: 100%;
    }

    .nav-menu a {
        font-size: 1.2rem;
        padding: 8px 0;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    .btn-nav {
        display: none;
    }
}

/* ----- For desktop, hide overlay ----- */
@media (min-width: 769px) {
    .nav-overlay {
        display: none !important;
    }
}

/* ----- Touch target size (accessibility) ----- */
.nav-menu a,
.btn-nav,
.nav-toggle {
    min-height: 44px;
    min-width: 44px;
}
/* =========================================================
   PREMIUM FORM — ENHANCED
   ========================================================= */

/* Form container background */
.spark-form {
    max-width: 100%;
}

/* Input fields — larger, cleaner */
.spark-form input,
.spark-form select,
.spark-form textarea {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    transition: all 0.3s ease;
}

.spark-form input:focus,
.spark-form select:focus,
.spark-form textarea:focus {
    outline: none;
    border-color: var(--gold, #F5A623);
    box-shadow: 0 0 0 4px rgba(245,166,35,0.1);
    background: rgba(255,255,255,0.06);
}

/* Labels */
.spark-form label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #ccc;
    margin-bottom: 6px;
    letter-spacing: .03em;
}

.spark-form label .required {
    color: var(--gold, #F5A623);
}

/* Buttons - Premium Gold */
.spark-form .btn-next {
    background: linear-gradient(135deg, #F5A623, #D4891A);
    color: #080808;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 50px;
    border: none;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 52px;
}

.spark-form .btn-next:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 40px rgba(245,166,35,0.3);
}

.spark-form .btn-prev {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: #aaa;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 52px;
}

.spark-form .btn-prev:hover {
    border-color: rgba(255,255,255,0.3);
}

/* Form progress dots */
.spark-form .form-progress span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.spark-form .form-progress span.active {
    background: var(--gold, #F5A623);
    box-shadow: 0 0 20px rgba(245,166,35,0.3);
}

.spark-form .form-progress span.done {
    background: var(--gold, #F5A623);
    opacity: 0.4;
}

/* Success message */
.spark-form .form-success {
    display: none;
    text-align: center;
    padding: 40px 20px;
}

.spark-form .form-success .icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.spark-form .form-success h3 {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 10px;
}

.spark-form .form-success p {
    color: #777;
    font-size: 16px;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Trust badge */
.spark-form .form-trust {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    color: #555;
    font-size: 12px;
    letter-spacing: .1em;
}

/* Responsive */
@media (max-width: 768px) {
    .spark-form {
        padding: 1.5rem !important;
    }
    .spark-form .btn-next,
    .spark-form .btn-prev {
        width: 100%;
        text-align: center;
    }
    .spark-form .form-nav {
        flex-direction: column;
        gap: 10px;
    }
}
/* =========================================================
   GOLDEN HIGHLIGHTED MENU
   ========================================================= */

/* Active menu item with gold background */
.nav-menu .current-menu-item a {
    background: var(--gold, #F5A623) !important;
    color: #080808 !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* Hover effect for active menu item (keep consistent) */
.nav-menu .current-menu-item a:hover {
    background: var(--gold-light, #F7C948) !important;
    color: #080808 !important;
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(245, 166, 35, 0.3);
}

/* Remove underline for active menu item (since background is enough) */
.nav-menu .current-menu-item a::after {
    display: none !important;
}

/* For non-active menu items - keep them premium */
.nav-menu a {
    padding: 8px 14px !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
}

/* Hover effect for non-active menu items */
.nav-menu a:hover {
    background: rgba(245, 166, 35, 0.08) !important;
    color: #ffffff !important;
}

/* Mobile menu active item style */
@media (max-width: 768px) {
    .nav-menu .current-menu-item a {
        background: var(--gold, #F5A623) !important;
        color: #080808 !important;
        padding: 10px 18px !important;
        border-radius: 12px !important;
        display: inline-block !important;
        width: auto !important;
    }
}
/* =========================================================
   PREMIUM GOLDEN MENU — FULL BACKGROUND
   ========================================================= */

/* ----- Full Navigation Background ----- */
.site-header {
    background: var(--gold, #F5A623) !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    padding: 12px 0 !important;
}

/* When scrolled — keep it solid gold */
.site-header.scrolled {
    background: var(--gold, #F5A623) !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    padding: 8px 0 !important;
    box-shadow: 0 4px 30px rgba(245, 166, 35, 0.3) !important;
}

/* ----- Logo ----- */
.logo-text {
    color: #080808 !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
}

.logo-text:hover {
    color: #080808 !important;
    opacity: 0.8 !important;
}

/* ----- Menu Items (White Text) ----- */
.nav-menu a {
    color: #080808 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.04em !important;
    position: relative !important;
}

/* Remove underline default */
.nav-menu a::after {
    display: none !important;
}

/* ----- Hover Effect (Lighter Gold / White BG) ----- */
.nav-menu a:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #080808 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* ----- Active Page (White Background) ----- */
.nav-menu .current-menu-item a {
    background: #ffffff !important;
    color: #080808 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.nav-menu .current-menu-item a:hover {
    background: #ffffff !important;
    color: #080808 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15) !important;
}

/* ----- CTA Button (Dark) ----- */
.btn-nav {
    background: #080808 !important;
    color: var(--gold, #F5A623) !important;
    border: none !important;
    padding: 8px 24px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

.btn-nav:hover {
    background: #1a1a1a !important;
    color: var(--gold-light, #F7C948) !important;
    transform: scale(1.04) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* ----- Mobile Menu (Hamburger) ----- */
.nav-toggle span {
    background: #080808 !important;
}

/* Mobile Menu Overlay */
@media (max-width: 768px) {

    .site-header {
        padding: 10px 0 !important;
    }

    .site-header.scrolled {
        padding: 8px 0 !important;
    }

    /* Logo color on mobile */
    .logo-text {
        color: #080808 !important;
    }

    /* Mobile menu panel */
    .main-nav {
        background: var(--gold, #F5A623) !important;
        border-left: 2px solid #080808 !important;
    }

    .main-nav .nav-menu a {
        color: #080808 !important;
        font-size: 1.2rem !important;
        padding: 12px 18px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        width: 100% !important;
        text-align: left !important;
        border-radius: 0 !important;
    }

    .main-nav .nav-menu a:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: none !important;
    }

    .main-nav .nav-menu .current-menu-item a {
        background: #ffffff !important;
        color: #080808 !important;
        border-radius: 8px !important;
    }

    .btn-nav {
        display: none !important;
    }

    /* Show mobile CTA inside menu */
    .main-nav .mobile-cta {
        display: block !important;
        margin-top: 20px !important;
    }

    .main-nav .mobile-cta a {
        display: block !important;
        background: #080808 !important;
        color: var(--gold, #F5A623) !important;
        padding: 14px 20px !important;
        border-radius: 12px !important;
        text-align: center !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: .08em !important;
    }

    .main-nav .mobile-cta a:hover {
        background: #1a1a1a !important;
        color: var(--gold-light, #F7C948) !important;
    }
}

/* ----- For desktop, mobile-cta hidden ----- */
@media (min-width: 769px) {
    .mobile-cta {
        display: none !important;
    }
}
/* =========================================================
   PREMIUM DARK FOOTER — GOLD ACCENTS
   ========================================================= */

.spark-footer {
    background: #0a0a0a !important;
    border-top: 2px solid rgba(245, 166, 35, 0.15) !important;
    padding: 60px 0 30px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.spark-footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Grid Layout */
.spark-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ----- Column 1: Brand ----- */
.spark-footer-logo {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #ffffff;
    margin-bottom: 6px;
}

.spark-footer-slogan {
    color: var(--gold, #F5A623);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.spark-footer-desc {
    color: #888;
    font-size: 0.85rem;
    line-height: 1.7;
    max-width: 300px;
    margin-bottom: 18px;
}

/* ----- Social Links ----- */
.spark-footer-social {
    display: flex;
    gap: 14px;
    margin-top: 8px;
}

.spark-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #aaa;
    transition: all 0.3s ease;
    text-decoration: none;
}

.spark-social-link:hover {
    border-color: var(--gold, #F5A623);
    background: rgba(245, 166, 35, 0.1);
    color: var(--gold, #F5A623);
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(245, 166, 35, 0.15);
}

.spark-social-link svg {
    width: 18px;
    height: 18px;
    stroke: currentColor !important;
}

/* ----- Column Titles ----- */
.spark-footer-title {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0 0 18px;
    padding-bottom: 10px;
    position: relative;
}

.spark-footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--gold, #F5A623);
    border-radius: 2px;
}

/* ----- Footer Links ----- */
.spark-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spark-footer-links li {
    margin-bottom: 10px;
}

.spark-footer-links a {
    color: #888;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    position: relative;
}

.spark-footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold, #F5A623);
    transition: width 0.3s ease;
}

.spark-footer-links a:hover {
    color: #ffffff;
}

.spark-footer-links a:hover::after {
    width: 100%;
}

/* ----- Contact Info ----- */
.spark-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spark-footer-contact li {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    color: #888;
    font-size: 0.85rem;
    line-height: 1.6;
    align-items: flex-start;
}

.spark-footer-contact li a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}

.spark-footer-contact li a:hover {
    color: var(--gold, #F5A623);
}

.spark-footer-icon {
    flex-shrink: 0;
    width: 20px;
    color: var(--gold, #F5A623);
    font-size: 1rem;
}

/* ----- Bottom Bar ----- */
.spark-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.spark-footer-copy {
    color: #555;
    font-size: 0.8rem;
}

.spark-footer-copy strong {
    color: var(--gold, #F5A623);
    font-weight: 600;
}

.spark-footer-legal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spark-footer-legal a {
    color: #555;
    text-decoration: none;
    font-size: 0.75rem;
    transition: color 0.3s ease;
}

.spark-footer-legal a:hover {
    color: var(--gold, #F5A623);
}

.spark-footer-dot {
    color: #333;
    font-size: 0.6rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .spark-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .spark-footer {
        padding: 40px 0 20px !important;
    }
    .spark-footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-bottom: 30px;
    }
    .spark-footer-desc {
        max-width: 100%;
    }
    .spark-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding-top: 20px;
    }
    .spark-footer-legal {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* =========================================================
   FIX: FORM ABOVE HEADER
   ========================================================= */
#lead-form {
    position: relative;
    z-index: 1001 !important;
}

#lead-form .spark-form {
    position: relative;
    z-index: 1;
}

/* Ensure button is clickable */
.btn-next[type="submit"] {
    position: relative;
    z-index: 1002 !important;
    pointer-events: auto !important;
}
/* =========================================================
   COMPLETE MOBILE RESPONSIVE SYSTEM
   Covers: Home, Services, About, Work, Case Studies, Contact
   ========================================================= */

/* =========================================================
   GLOBAL MOBILE RULES — 360px to 767px
   ========================================================= */
@media (max-width: 767px) {

    /* ----- RESET ALL CONTAINERS ----- */
    .spark-container,
    .container,
    .elementor-container,
    .elementor-section-wrap,
    .elementor-widget-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ----- FORCE ALL GRIDS TO STACK ----- */
    .spark-compare,
    .spark-growth-steps,
    .ai-grid,
    .spark-principles,
    .spark-editorial-grid,
    .about-grid,
    .work-grid,
    .cs-grid,
    .services-grid,
    .service-detail > div,
    .contact-grid,
    .spark-section-header,
    .spark-services-list,
    .about-principles,
    .values-grid,
    .industries-grid,
    .mission-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* ----- METRICS: 2-column on mobile ----- */
    .spark-metrics-grid,
    .results-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
        width: 100% !important;
    }

    /* ----- FLEX STACKS ----- */
    .spark-hero-inner,
    .spark-footer-grid,
    .footer-inner,
    .header-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
    }

    /* ----- SECTION PADDING ----- */
    .spark-section,
    .section-padding,
    .service-detail,
    .page-hero,
    .spark-page-header {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* =========================================================
       TYPOGRAPHY — MOBILE
       ========================================================= */

    /* Headings */
    .spark-hero-title {
        font-size: clamp(40px, 12vw, 56px) !important;
        line-height: 1.02 !important;
        max-width: 100% !important;
    }

    .spark-section-title,
    .page-hero h1,
    .about-content h2,
    .contact-info h2,
    .service-detail h2,
    .spark-final-cta-content h2 {
        font-size: clamp(32px, 8vw, 44px) !important;
        line-height: 1.08 !important;
        max-width: 100% !important;
    }

    /* Body text */
    .spark-hero-description,
    .spark-section-description,
    .page-hero p,
    .about-content p,
    .contact-info p,
    .service-detail .service-desc,
    .spark-final-cta-content p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        max-width: 100% !important;
    }

    /* Labels */
    .section-label,
    .hero-label,
    .spark-section-kicker,
    .page-hero .subtitle {
        font-size: 0.75rem !important;
        letter-spacing: 0.2em !important;
    }

    /* =========================================================
       HERO — MOBILE
       ========================================================= */
    .spark-hero-inner {
        padding: 100px 0 40px !important;
        gap: 20px !important;
    }

    .spark-hero-copy {
        max-width: 100% !important;
        text-align: center !important;
        flex: 1 1 100% !important;
        padding: 0 !important;
    }

    .spark-hero-actions {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 24px !important;
    }

    .spark-btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 50px !important;
        padding: 12px 20px !important;
        font-size: 12px !important;
    }

    .spark-hero-meta {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 20px !important;
        font-size: 8px !important;
    }

    .spark-hero-visual {
        max-width: 100% !important;
        min-height: 280px !important;
        flex: 1 1 100% !important;
        margin-top: 10px !important;
    }

    .spark-eyebrow {
        justify-content: center !important;
    }

    .spark-scroll-indicator {
        display: none !important;
    }

    /* =========================================================
       DIFFERENTIATION — MOBILE
       ========================================================= */
    .spark-compare {
        gap: 16px !important;
    }

    .spark-compare-col {
        padding: 16px !important;
        width: 100% !important;
    }

    .spark-compare-vs {
        text-align: center !important;
        padding: 8px 0 !important;
        font-size: 18px !important;
    }

    .spark-compare-col ul li {
        font-size: 14px !important;
        padding: 6px 0 !important;
    }

    /* =========================================================
       GROWTH SYSTEM — MOBILE
       ========================================================= */
    .spark-growth-step {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 16px !important;
        text-align: left !important;
    }

    .spark-growth-step .step-num {
        font-size: 24px !important;
        flex-shrink: 0 !important;
        min-width: 40px !important;
        margin-bottom: 0 !important;
        opacity: 0.5 !important;
    }

    .spark-growth-step h4 {
        font-size: 16px !important;
        margin-bottom: 2px !important;
    }

    .spark-growth-step p {
        font-size: 13px !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    /* =========================================================
       SERVICES / CAPABILITIES — MOBILE
       ========================================================= */
    .spark-services-list {
        margin-top: 30px !important;
    }

    .spark-service-row {
        grid-template-columns: 30px 1fr 24px !important;
        gap: 12px !important;
        padding: 20px 0 !important;
    }

    .spark-service-number {
        font-size: 10px !important;
    }

    .spark-service-main h3 {
        font-size: 20px !important;
        margin-bottom: 4px !important;
    }

    .spark-service-main p {
        font-size: 13px !important;
        max-width: 100% !important;
        line-height: 1.5 !important;
    }

    .spark-service-arrow {
        font-size: 20px !important;
    }

    /* =========================================================
       COMMERCIAL MINDSET / METRICS — MOBILE
       ========================================================= */
    .spark-metrics-grid {
        gap: 12px !important;
        margin-top: 30px !important;
    }

    .spark-metric {
        padding: 16px !important;
    }

    .spark-metric .number {
        font-size: 28px !important;
    }

    .spark-metric .label {
        font-size: 13px !important;
    }

    .spark-metric .desc {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* =========================================================
       AI SECTION — MOBILE
       ========================================================= */
    .ai-grid {
        gap: 14px !important;
        margin-top: 30px !important;
    }

    .ai-grid .ai-item {
        padding: 16px !important;
    }

    .ai-grid .ai-item h4 {
        font-size: 15px !important;
    }

    .ai-grid .ai-item p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* =========================================================
       WHY SPARK — MOBILE
       ========================================================= */
    .spark-editorial-grid {
        gap: 16px !important;
    }

    .spark-principles {
        margin-top: 30px !important;
        gap: 0 !important;
        border-top: none !important;
    }

    .spark-principle {
        padding: 16px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }

    .spark-principle:last-child {
        border-bottom: none !important;
    }

    .spark-principle:not(:first-child) {
        padding-left: 0 !important;
    }

    .spark-principle h3 {
        font-size: 20px !important;
        margin-top: 8px !important;
        margin-bottom: 6px !important;
    }

    .spark-principle p {
        font-size: 14px !important;
        max-width: 100% !important;
        line-height: 1.6 !important;
    }

    /* =========================================================
       PAGE HEADER — MOBILE
       ========================================================= */
    .spark-page-header {
        padding: 100px 0 30px !important;
        text-align: center !important;
    }

    .spark-page-header-inner {
        align-items: center !important;
        gap: 8px !important;
    }

    .spark-page-header-meta {
        justify-content: center !important;
        font-size: 11px !important;
    }

    .spark-page-number {
        font-size: 13px !important;
    }

    .spark-page-subtitle {
        font-size: 15px !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* =========================================================
       SERVICES DETAIL — MOBILE
       ========================================================= */
    .service-detail > div {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .service-detail .service-list {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .service-detail .service-list li {
        font-size: 13px !important;
    }

    .service-detail .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px !important;
    }

    .service-3d-container {
        min-height: 200px !important;
    }

    /* =========================================================
       ABOUT PAGE — MOBILE
       ========================================================= */
    .about-grid {
        gap: 30px !important;
        padding: 30px 0 !important;
        text-align: center !important;
    }

    .about-visual {
        min-height: 220px !important;
        padding: 24px !important;
    }

    .about-content h2 {
        font-size: clamp(32px, 8vw, 44px) !important;
    }

    .about-content p {
        max-width: 100% !important;
        font-size: 15px !important;
    }

    .about-principles {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 30px !important;
        padding-top: 24px !important;
    }

    .about-principles .principle .num {
        font-size: 24px !important;
    }

    .about-principles .principle h4 {
        font-size: 16px !important;
    }

    .about-principles .principle p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* Industries */
    .industries-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-top: 30px !important;
    }

    .industry-card {
        padding: 20px !important;
    }

    .industry-card .icon {
        font-size: 24px !important;
    }

    .industry-card h4 {
        font-size: 14px !important;
    }

    .industry-card p {
        font-size: 12px !important;
    }

    /* Mission & Vision */
    .mission-grid {
        gap: 20px !important;
        margin-top: 30px !important;
    }

    .mission-item {
        padding: 24px !important;
    }

    .mission-item h3 {
        font-size: 20px !important;
    }

    .mission-item p {
        font-size: 14px !important;
    }

    /* Values */
    .values-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 30px !important;
    }

    .value-card {
        padding: 20px !important;
    }

    .value-card .icon {
        font-size: 24px !important;
    }

    .value-card h4 {
        font-size: 16px !important;
    }

    .value-card p {
        font-size: 13px !important;
    }

    /* Trust logos */
    .trust-logos {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .trust-logos span {
        font-size: 12px !important;
    }

    /* =========================================================
       WORK PAGE — MOBILE
       ========================================================= */
    .work-grid {
        gap: 16px !important;
        margin-top: 30px !important;
    }

    .work-card .image {
        height: 180px !important;
    }

    .work-card .content {
        padding: 16px !important;
    }

    .work-card .content h3 {
        font-size: 18px !important;
    }

    .work-card .content .client {
        font-size: 13px !important;
    }

    .work-card .content .result {
        font-size: 13px !important;
    }

    .work-card .image .placeholder-badge {
        font-size: 8px !important;
        padding: 3px 10px !important;
    }

    /* =========================================================
       CASE STUDIES — MOBILE
       ========================================================= */
    .cs-grid {
        gap: 16px !important;
        margin-top: 30px !important;
    }

    .cs-card {
        padding: 16px !important;
    }

    .cs-card h3 {
        font-size: 19px !important;
    }

    .cs-card .cs-client {
        font-size: 11px !important;
    }

    .cs-card .cs-industry {
        font-size: 11px !important;
    }

    .cs-card .cs-challenge {
        font-size: 14px !important;
    }

    .cs-card .cs-result {
        font-size: 14px !important;
    }

    .cs-placeholder {
        padding: 30px 16px !important;
    }

    .cs-placeholder h3 {
        font-size: 20px !important;
    }

    .cs-placeholder p {
        font-size: 14px !important;
        max-width: 100% !important;
    }

    /* =========================================================
       CONTACT PAGE — MOBILE
       ========================================================= */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 30px 0 60px !important;
    }

    .contact-info h3 {
        font-size: 24px !important;
    }

    .contact-info .tagline {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }

    .contact-detail {
        font-size: 13px !important;
        padding: 12px 0 !important;
    }

    .contact-form-card {
        padding: 1.5rem !important;
    }

    .contact-form-card h4 {
        font-size: 20px !important;
    }

    .contact-form-card .form-sub {
        font-size: 14px !important;
    }

    .contact-form-card input,
    .contact-form-card select,
    .contact-form-card textarea {
        font-size: 15px !important;
        padding: 14px !important;
        min-height: 48px !important;
    }

    .contact-form-card .btn-submit {
        font-size: 15px !important;
        padding: 14px !important;
        min-height: 50px !important;
    }

    .contact-stats {
        gap: 16px !important;
        padding: 20px 0 !important;
        flex-wrap: wrap !important;
    }

    .contact-stats .stat .number {
        font-size: 24px !important;
    }

    .contact-stats .stat .label {
        font-size: 12px !important;
    }

    /* =========================================================
       FORM — MOBILE (Multi-step)
       ========================================================= */
    .spark-form {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .spark-form .form-group {
        margin-bottom: 16px !important;
    }

    .spark-form input,
    .spark-form select,
    .spark-form textarea {
        font-size: 15px !important;
        padding: 14px !important;
        min-height: 48px !important;
        width: 100% !important;
    }

    .spark-form .form-nav {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }

    .spark-form .btn-next,
    .spark-form .btn-prev {
        width: 100% !important;
        text-align: center !important;
        padding: 14px !important;
        min-height: 50px !important;
        font-size: 13px !important;
    }

    .spark-form .form-progress {
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .spark-form .form-progress span {
        width: 10px !important;
        height: 10px !important;
    }

    .spark-form .form-success {
        padding: 30px 16px !important;
    }

    .spark-form .form-success h3 {
        font-size: 22px !important;
    }

    .spark-form .form-success p {
        font-size: 14px !important;
    }

    /* =========================================================
       FINAL CTA — MOBILE
       ========================================================= */
    .spark-final-cta {
        padding: 80px 0 !important;
    }

    .spark-final-cta-content h2 {
        font-size: clamp(36px, 10vw, 52px) !important;
        max-width: 100% !important;
    }

    .spark-final-cta-content p {
        font-size: 15px !important;
        padding: 0 0.5rem !important;
        max-width: 100% !important;
    }

    /* =========================================================
       FOOTER — MOBILE
       ========================================================= */
    .spark-footer {
        padding: 40px 0 20px !important;
    }

    .spark-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding-bottom: 24px !important;
    }

    .spark-footer-desc {
        max-width: 100% !important;
    }

    .spark-footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
        padding-top: 16px !important;
    }

    .spark-footer-legal {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .spark-footer-social {
        justify-content: center !important;
    }

    /* =========================================================
       NAVIGATION — MOBILE (Full-screen overlay)
       ========================================================= */

    /* Header – fixed, stays on top */
    .site-header {
        padding: 12px 0 !important;
        background: var(--gold, #F5A623) !important;
        z-index: 1000 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .header-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem !important;
        padding: 0 1.25rem !important;
        width: 100% !important;
        min-height: 56px !important;
    }

    .logo-text {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #080808 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }

    .btn-nav {
        display: none !important;
    }

    .nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        background: none !important;
        border: none !important;
        padding: 8px !important;
        min-height: 44px !important;
        min-width: 44px !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
        z-index: 1002 !important;
        position: relative !important;
    }

    .nav-toggle span {
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background: #080808 !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
        transform-origin: center !important;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    .nav-toggle.active span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px) !important;
    }

    .main-nav {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        background: #0a0a0a !important;
        padding: 5rem 2rem 2rem !important;
        z-index: 999 !important;
        overflow-y: auto !important;
        transform: translateX(100%) !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        border-left: none !important;
        box-shadow: none !important;
    }

    .main-nav.active {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .nav-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .nav-menu li {
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-menu a {
        display: block !important;
        padding: 16px 0 !important;
        font-size: 1.25rem !important;
        font-weight: 500 !important;
        color: #F5F3EF !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
        border-radius: 0 !important;
        background: transparent !important;
        letter-spacing: 0.02em !important;
    }

    .nav-menu a:hover,
    .nav-menu a:focus {
        color: #C8A45A !important;
        background: transparent !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .nav-menu .current-menu-item a {
        color: #C8A45A !important;
        background: transparent !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding-left: 0 !important;
    }

    .nav-menu .current-menu-item a::after {
        content: '';
        display: block;
        width: 30px;
        height: 2px;
        background: #C8A45A;
        margin-top: 4px;
        transition: width 0.3s ease;
    }

    .mobile-cta {
        display: block !important;
        margin-top: 30px !important;
        padding-top: 24px !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
    }

    .mobile-cta a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #C8A45A !important;
        color: #111111 !important;
        padding: 16px 24px !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        transition: background 0.3s ease !important;
        min-height: 52px !important;
        text-decoration: none !important;
        width: 100% !important;
    }

    .mobile-cta a:hover {
        background: #D4B06A !important;
        color: #080808 !important;
    }

    .nav-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 998 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.4s ease !important;
    }

    .nav-overlay.active {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}
/* =========================================================
   FINAL MOBILE MENU OVERRIDE — HIGHEST SPECIFICITY
   ========================================================= */
@media (max-width: 767px) {

    /* Force full-screen menu background */
    #main-nav.main-nav {
        background: #0a0a0a !important;
        transform: translateX(100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #main-nav.main-nav.active {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Force ALL links inside menu to be white */
    #main-nav.main-nav .nav-menu a,
    #main-nav.main-nav .nav-menu li a {
        color: #F5F3EF !important;
        background: transparent !important;
        font-size: 1.25rem !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        display: block !important;
        text-decoration: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-weight: 500 !important;
        min-height: auto !important;
    }

    /* Hover/focus – gold accent */
    #main-nav.main-nav .nav-menu a:hover,
    #main-nav.main-nav .nav-menu a:focus {
        color: #C8A45A !important;
        background: transparent !important;
    }

    /* Active page – gold underline */
    #main-nav.main-nav .nav-menu .current-menu-item a {
        color: #C8A45A !important;
        background: transparent !important;
        padding-left: 0 !important;
    }

    #main-nav.main-nav .nav-menu .current-menu-item a::after {
        content: '';
        display: block;
        width: 30px;
        height: 2px;
        background: #C8A45A;
        margin-top: 4px;
    }

    /* Mobile CTA – clearly visible */
    #main-nav.main-nav .mobile-cta {
        display: block !important;
        margin-top: 30px !important;
        padding-top: 24px !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
    }

    #main-nav.main-nav .mobile-cta a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #C8A45A !important;
        color: #111111 !important;
        padding: 16px 24px !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        text-decoration: none !important;
        min-height: 52px !important;
        width: 100% !important;
        border: none !important;
    }

    #main-nav.main-nav .mobile-cta a:hover {
        background: #D4B06A !important;
        color: #080808 !important;
    }

    /* Overlay – ensures it's visible but not interfering */
    #nav-overlay.nav-overlay {
        background: rgba(0,0,0,0.5) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}
/* =========================================================
   SERVICES PAGE — PREMIUM MOBILE DESIGN
   ========================================================= */
@media (max-width: 767px) {

    /* ---------- Service Detail Sections ---------- */
    .service-detail {
        padding: 50px 0 !important;
        position: relative !important;
    }

    /* Add subtle divider between sections */
    .service-detail:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20%;
        right: 20%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(245,166,35,0.15), transparent);
    }

    /* Force single column for all service content */
    .service-detail > div,
    .service-detail .elementor-row,
    .service-detail .elementor-column,
    .service-detail .elementor-widget-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ---------- Service Number (Gold Accent) ---------- */
    .service-detail .service-number {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.25em !important;
        color: #C8A45A !important;
        text-transform: uppercase !important;
        margin-bottom: 8px !important;
        display: block !important;
        opacity: 0.8 !important;
    }

    /* ---------- Service Heading ---------- */
    .service-detail h2 {
        font-size: 32px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.03em !important;
        margin: 0 0 14px 0 !important;
        font-weight: 600 !important;
        color: #ffffff !important;
    }

    /* ---------- Description ---------- */
    .service-detail .service-desc {
        font-size: 15px !important;
        line-height: 1.75 !important;
        color: #999 !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        padding-right: 0 !important;
    }

    /* ---------- Service List – Premium Styling ---------- */
    .service-detail .service-list {
        display: block !important;
        margin-bottom: 24px !important;
        padding: 0 !important;
    }

    .service-detail .service-list li {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        font-size: 14px !important;
        color: #ccc !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.04) !important;
        width: 100% !important;
        font-weight: 400 !important;
        letter-spacing: 0.02em !important;
    }

    .service-detail .service-list li::before {
        content: "◆" !important;
        color: #C8A45A !important;
        font-size: 8px !important;
        flex-shrink: 0 !important;
        opacity: 0.6 !important;
    }

    /* ---------- 3D Container ---------- */
    .service-detail .service-3d-container {
        width: 100% !important;
        min-height: 220px !important;
        max-width: 100% !important;
        margin: 20px 0 24px 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: rgba(255,255,255,0.03) !important;
        border: 1px solid rgba(255,255,255,0.04) !important;
        position: relative !important;
    }

    /* 3D container placeholder text */
    .service-detail .service-3d-container::after {
        content: '✦ Interactive 3D';
        position: absolute;
        bottom: 16px;
        right: 16px;
        font-size: 9px;
        letter-spacing: 0.1em;
        color: rgba(255,255,255,0.12);
        text-transform: uppercase;
    }

    /* ---------- CTA Button – Premium Gold ---------- */
    .service-detail .btn,
    .service-detail .service-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 16px 28px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: center !important;
        background: linear-gradient(135deg, #C8A45A, #B8923E) !important;
        color: #0a0a0a !important;
        border: none !important;
        border-radius: 50px !important;
        transition: all 0.3s ease !important;
        min-height: 54px !important;
        text-decoration: none !important;
        box-shadow: 0 4px 30px rgba(200, 164, 90, 0.2) !important;
    }

    .service-detail .btn:hover,
    .service-detail .service-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 40px rgba(200, 164, 90, 0.35) !important;
        background: linear-gradient(135deg, #D4B06A, #C8A45A) !important;
    }

    .service-detail .btn .arrow,
    .service-detail .service-btn .arrow {
        font-size: 18px !important;
        transition: transform 0.3s ease !important;
    }

    .service-detail .btn:hover .arrow,
    .service-detail .service-btn:hover .arrow {
        transform: translateX(4px) !important;
    }

    /* ---------- Even/odd background variation ---------- */
    .service-detail:nth-child(even) {
        background: #0a0a0a !important;
    }

    .service-detail:nth-child(odd) {
        background: #050505 !important;
    }

    /* ---------- Spacing between sections ---------- */
    .service-detail:not(:last-child) {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   TABLET FIX — Services (768px to 1024px)
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {

    .service-detail {
        padding: 70px 0 !important;
    }

    .service-detail > div {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
        align-items: center !important;
    }

    .service-detail .service-list {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 24px !important;
    }

    .service-detail h2 {
        font-size: 36px !important;
    }

    .service-detail .service-3d-container {
        min-height: 280px !important;
    }

    .service-detail .btn {
        width: auto !important;
        padding: 14px 32px !important;
    }
}