/* =========================
   BODY OVERRIDE
   ========================= */
body { color: #09072e; background: #f3f3f1; }

/* =========================
   HEADER — COLOR OVERRIDES ONLY
   ========================= */
.header-nav a          { color: #09072e; }
.header-nav a::after   { background: #09072e; }

.header-socials a {
    color: #09072e;
    background: rgba(9, 7, 46, 0.06);
    border-color: rgba(9, 7, 46, 0.14);
}
.header-socials a:hover  { background: var(--color-primary); color: #fff; }

.menu-toggle             { background: rgba(9, 7, 46, 0.06); border-color: rgba(9, 7, 46, 0.18); }
.menu-toggle span        { background: #09072e; }
.menu-toggle:hover       { background: var(--color-primary); border-color: var(--color-primary); }
.menu-toggle:hover span  { background: #fff; }

/* =========================
   PAGE WRAPPER
   ========================= */
.services-page { width: 100%; background: #f3f3f1; padding: 200px 120px 120px; }
.services-container { max-width: 1300px; margin: auto; }

/* =========================
   HERO
   ========================= */
.services-hero { max-width: 820px; margin-bottom: 100px; }

.services-hero h1 {
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    line-height: 1.05;
    letter-spacing: -2px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #09072e;
}

.hero-desc {
    font-size: 1.1rem;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* =========================
   SERVICE BLOCK
   ========================= */
.service-block {
    margin-bottom: 96px;
    padding-bottom: 96px;
    border-bottom: 1px solid #e0dedd;
    contain: layout;
}
.service-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.service-block-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 36px; }

.service-number {
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em;
    color: #aaa; text-transform: uppercase; padding-top: 6px; min-width: 28px;
}

.service-block h2 {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 8px; color: #09072e;
}

.service-block p { color: #888; font-size: 1rem; font-weight: 500; line-height: 1.5; }

/* Image Grid */
.service-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.img-card {
    border-radius: 16px; overflow: hidden; background: #e8e8e6;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.img-card:hover     { box-shadow: 0 14px 40px rgba(0,0,0,0.12); transform: translateY(-4px); will-change: transform; }
.img-card:not(:hover) { will-change: auto; }

.img-card img {
    width: 100%; height: 280px; object-fit: cover; display: block;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.img-card:hover img { transform: scale(1.04); }

.service-images--contain .img-card { background: #fff; border: 1px solid #e8e8e6; }
.service-images--contain .img-card img { height: auto; min-height: 200px; max-height: 360px; object-fit: contain; padding: 16px; }

/* Slider */
.ex-slider-outer { position: relative; padding: 0 30px; margin: 0 -30px; }
.ex-slider-viewport { overflow: hidden; }
.ex-slider-track {
    display: flex; gap: 16px; align-items: start;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.ex-slide { flex: 0 0 calc((100% - 32px) / 3); min-width: 0; }

.ex-slider-btn {
    position: absolute; top: 40%; transform: translateY(-50%); z-index: 10;
    width: 52px; height: 52px; border: none; border-radius: 50%;
    background: #fff; color: #09072e; font-size: 1.05rem; cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,0.14); display: flex; align-items: center; justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.ex-slider-btn:hover { background: var(--color-primary); color: #fff; transform: translateY(-50%) scale(1.08); }
.ex-slider-btn.prev { left: 0; }
.ex-slider-btn.next { right: 0; }

.ex-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.ex-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; border: none; cursor: pointer; padding: 0; transition: background 0.25s ease, transform 0.25s ease; }
.ex-dot.active { background: #09072e; transform: scale(1.35); }

/* Short Cards */
.short-card {
    border-radius: 18px; overflow: hidden; background: #111;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.short-card:hover     { box-shadow: 0 16px 48px rgba(0,0,0,0.2); transform: translateY(-5px); will-change: transform; }
.short-card:not(:hover) { will-change: auto; }
.short-frame { position: relative; width: 100%; padding-bottom: 177.78%; height: 0; overflow: hidden; border-radius: 18px; contain: strict; }
.short-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 18px; }

/* 3D Cards */
.img-card--contain {
    background: #fff; border: 1px solid #e8e8e6; border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.img-card--contain:hover     { box-shadow: 0 14px 40px rgba(0,0,0,0.12); transform: translateY(-4px); will-change: transform; }
.img-card--contain:not(:hover) { will-change: auto; }
.img-card--contain img { width: 100%; height: 280px; object-fit: contain; padding: 16px; display: block; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.img-card--contain:hover img { transform: scale(1.04); }

/* Scroll Animations */
[data-anim] {
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-duration: 0.75s;
    transition-delay: var(--delay, 0s);
}
[data-anim="fade-up"]  { opacity: 0; transform: translateY(40px); }
[data-anim="fade-in"]  { opacity: 0; }
[data-anim].is-visible { opacity: 1; transform: none; }

/* =========================
   REDUCED MOTION
   ========================= */
@media (prefers-reduced-motion: reduce) {
    [data-anim] { transition: none !important; opacity: 1 !important; transform: none !important; }
    .img-card, .img-card img, .img-card--contain, .img-card--contain img,
    .short-card, .ex-slider-track, .ex-slider-btn, .ex-dot { transition: none !important; }
    .img-card:hover, .img-card--contain:hover, .short-card:hover { transform: none; will-change: auto; }
    .img-card:hover img, .img-card--contain:hover img { transform: none; }
}

/* =========================
   MOBILE NAV OVERRIDE
   ========================= */
@media (max-width: 900px) {
    .menu-toggle {
        background: rgba(9, 7, 46, 0.06);
        border-color: rgba(9, 7, 46, 0.18);
    }
    .menu-toggle span { background: #09072e; }
    .menu-toggle.active {
        background: rgba(76, 94, 255, 0.15);
        border-color: rgba(76, 94, 255, 0.5);
    }
    .menu-toggle.active span { background: #fff; }
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1200px) { .services-page { padding: 160px 60px 100px; } }

@media (max-width: 900px) {
    .services-page  { padding: 130px 32px 80px; }
    .services-hero  { margin-bottom: 70px; }
    .service-block  { margin-bottom: 64px; padding-bottom: 64px; }
    .service-images { grid-template-columns: repeat(2, 1fr); }
    .ex-slide       { flex: 0 0 calc((100% - 16px) / 2); }
}

@media (max-width: 600px) {
    .services-page  { padding: 110px 18px 60px; }
    .services-hero  { margin-bottom: 50px; }
    .service-block  { margin-bottom: 50px; padding-bottom: 50px; }
    .service-images { grid-template-columns: 1fr; }
    .img-card img   { height: 220px; }
    .service-images--contain .img-card img { min-height: 160px; max-height: 260px; }
    .ex-slide       { flex: 0 0 100%; }
    .ex-slider-outer { padding: 0 46px; margin: 0 -46px; }
    .ex-slider-btn  { width: 40px; height: 40px; font-size: 0.9rem; }
}