/* === SERVICES HERO — split layout: IMAGE LEFT | CONTENT RIGHT (mirrors About) === */
.services-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    background-color: var(--color-text-main);
}

/* Image on LEFT */
.services-hero-media {
    position: relative; overflow: hidden;
}
.services-hero-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; opacity: 0.70;
    transform: scale(1.05);
    transition: transform 2.5s var(--ease-out-expo);
}
body.loaded .services-hero-media img { transform: scale(1); }

/* Content on RIGHT */
.services-hero-text {
    background-color: var(--color-bg);
    display: flex; flex-direction: column;
    justify-content: flex-end;
    padding: clamp(60px, 10vw, 140px) clamp(36px, 6vw, 100px);
    isolation: isolate;
}
.services-kicker {
    font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 4px;
    color: var(--color-accent); margin-bottom: 24px;
}
.services-headline {
    font-size: clamp(3rem, 6vw, 7.5rem);
    font-weight: 500; color: var(--color-text-main);
    letter-spacing: -2.5px; line-height: 0.95;
}
.services-hero-sub {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem); color: var(--color-text-muted);
    line-height: 1.7; margin-top: 36px; max-width: 400px;
    border-top: 1px solid var(--color-border); padding-top: 28px;
}

/* Chrome clip-path fix inside overflow:hidden — keep for any .text-reveal in hero */
.services-hero .text-reveal {
    clip-path: none; opacity: 0; transform: translateY(25px);
    transition: opacity 1s var(--ease-out-expo), transform 1.2s var(--ease-out-expo);
}
.services-hero .text-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   DOMAIN BLOCKS
   Image RIGHT, text LEFT for all blocks (uniform layout)
   Aligns image bottom with text bottom via align-items: end
   ============================================================ */
.domain-block {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}
.domain-block:last-child { border-bottom: none; }

.domain-grid {
    display: grid;
    /* Default: Text on LEFT, image on RIGHT */
    grid-template-columns: 1fr 1.3fr;
    gap: var(--grid-gap);
    align-items: end;   /* ← align image bottom with text bottom */
}

/* Alternating logic for desktop */
@media (min-width: 1025px) {
    .domain-block:nth-child(even) .domain-grid {
        grid-template-columns: 1.3fr 1fr;
    }
    .domain-block:nth-child(even) .domain-info {
        order: 2;
        padding-left: 5vw; /* Add some breathing room when on the right */
    }
    .domain-block:nth-child(even) .domain-visuals {
        order: 1;
    }
}

/* No reversal — all blocks have text first, image second in DOM and visually */
.domain-info { display: flex; flex-direction: column; gap: 26px; }

.domain-num {
    font-family: var(--font-body); font-size: clamp(2.2rem, 3.5vw, 3.5rem);
    font-weight: 400; color: #bae6fd; line-height: 1;
}
.domain-title { font-size: clamp(2rem, 3.2vw, 3.6rem); letter-spacing: -1px; line-height: 1.05; }
.domain-desc {
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    color: var(--color-text-muted); line-height: 1.8;
}

.domain-visuals { display: flex; flex-direction: column; gap: 36px; }
.domain-img-wrap {
    width: 100%; aspect-ratio: 4/3;
    background-color: var(--color-curtain); border-radius: 10px; overflow: hidden;
}
.domain-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.5s var(--ease-out-expo);
}
.domain-img-wrap:hover img { transform: scale(1.04); }

.capabilities-list {
    list-style: none; display: grid;
    grid-template-columns: 1fr 1fr; gap: 18px 36px; margin-top: 16px;
}
.capabilities-list li {
    font-family: var(--font-head); font-size: clamp(0.9rem, 1.1vw, 1rem);
    font-weight: 600; padding-bottom: 14px; border-bottom: 1px solid var(--color-border);
    color: var(--color-text-main); display: flex; justify-content: space-between; align-items: center;
}
.capabilities-list li::after { content: '+'; color: var(--color-accent); font-weight: 300; font-size: 1.1rem; }

/* ============================================================
   ELASTIC METHOD SECTION
   ============================================================ */
.methodology-section {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: #ffffff;
    padding: var(--space-lg) var(--edge-padding);
    display: flex; flex-direction: column; justify-content: center;
}
.method-header { margin-bottom: var(--space-md); }
.method-header h2 { font-size: clamp(2.5rem, 4.5vw, 4.5rem); letter-spacing: -2px; color: #ffffff; }

.elastic-container { display: flex; width: 100%; height: 58vh; min-height: 460px; gap: 16px; }
.elastic-panel {
    flex: 1; position: relative; overflow: hidden; border-radius: 10px;
    background-color: rgba(255,255,255,0.08); color: #fff;
    transition: flex 0.8s var(--ease-out-expo), filter 0.8s ease;
    cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(18px, 2.5vw, 36px);
}
.elastic-panel::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
    z-index: 1;
}
.panel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.5; transition: transform 1.5s var(--ease-out-expo); }
.panel-content { position: relative; z-index: 2; display: flex; flex-direction: column; }
.panel-num { font-family: var(--font-body); font-weight: 700; color: rgba(255,255,255,0.7); font-size: 1rem; margin-bottom: 12px; }
.panel-title { font-family: var(--font-head); font-size: clamp(1.3rem, 2.2vw, 2.5rem); font-weight: 500; white-space: nowrap; transition: color 0.4s ease; }
.panel-desc { height: 0; opacity: 0; overflow: hidden; max-width: 380px; margin-top: 12px; font-size: 0.98rem; color: rgba(255,255,255,0.75); line-height: 1.6; transition: opacity 0.4s ease, height 0.6s var(--ease-out-expo); }

.elastic-container:hover .elastic-panel { filter: grayscale(100%) brightness(0.45); }
.elastic-container .elastic-panel:hover { flex: 3.5; filter: grayscale(0%) brightness(1); }
.elastic-container .elastic-panel:hover .panel-bg { transform: scale(1.05); opacity: 0.7; }
.elastic-container .elastic-panel:hover .panel-title { color: #fff; }
.elastic-container .elastic-panel:hover .panel-desc { height: auto; min-height: 80px; opacity: 1; transition-delay: 0.2s; }

/* ==========================================================================
   RESPONSIVE (Services Page)
   ========================================================================== */
@media (max-width: 1200px) {
    /* Collapse services split hero to stacked: image top, text bottom */
    .services-hero { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
    .services-hero-media { height: 55vh; position: relative; }
    .services-hero-media img { position: absolute; }
    /* image on top (first in DOM = first visually), then text */
    .services-hero-media { order: -1; }
    .services-hero-text {
        order: 1; justify-content: flex-start;
        padding-top: 48px; padding-bottom: 56px;
    }
}

@media (max-width: 1024px) {
    /* Stack domain grid vertically — text top, image bottom */
    .domain-grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
    .domain-visuals { order: 1; }  /* image below text */
    .domain-info  { order: -1; }   /* text above */
}
@media (max-width: 768px) {
    .capabilities-list { grid-template-columns: 1fr; gap: 8px; }
    .elastic-container { flex-direction: column; height: auto; gap: 12px; }
    .elastic-panel { min-height: 230px; flex: unset !important; }
    .elastic-container .elastic-panel .panel-desc { height: auto; opacity: 1; display: none; }
    .elastic-container .elastic-panel:hover .panel-desc { display: block; }
    .panel-title { white-space: normal; }
    .services-hero-text { padding: calc(var(--nav-height) + 30px) clamp(20px, 5vw, 36px) 50px; }
    .services-headline { letter-spacing: -2px; font-size: clamp(2.4rem, 9vw, 3.8rem); }
}