/* =========================================
   SERVICES PAGE STYLES
   ========================================= */

/* =========================================
   HERO — same animated gradient + spotlight
   treatment as the About page hero (duplicated
   here under its own class so this page doesn't
   need to load about.css).
   ========================================= */
.services-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    padding: 8rem 0 3rem;
    overflow: hidden;
    isolation: isolate;

    /* Updated live by services.js so the spotlight tracks the cursor */
    --hero-mx: 50%;
    --hero-my: 50%;

    background: linear-gradient(135deg,
                var(--color-navy) 0%,
                var(--color-navy-dark) 50%,
                var(--color-navy) 100%);
    background-size: 200% auto;
    background-position: 0% center;
    animation: servicesHeroGradientShift 18s ease-in-out infinite;
}

@keyframes servicesHeroGradientShift {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}

.services-hero::before {
    content: "";
    position: absolute;
    inset: -25%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38% 42% at 22% 28%, rgba(14, 23, 48, 0.55) 0%, rgba(14, 23, 48, 0) 66%),
        radial-gradient(34% 38% at 78% 70%, rgba(24, 38, 74, 0.60) 0%, rgba(24, 38, 74, 0) 68%),
        radial-gradient(30% 34% at 62% 16%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
    animation: servicesHeroAurora 26s ease-in-out infinite alternate;
}

@keyframes servicesHeroAurora {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
    50%  { transform: translate3d(3%, 3%, 0) scale(1.08); }
    100% { transform: translate3d(-2%, 2%, 0) scale(1.03); }
}

.services-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(circle 420px at var(--hero-mx) var(--hero-my),
                rgba(255, 255, 255, 0.20) 0%,
                rgba(14, 23, 48, 0.35) 38%,
                rgba(255, 255, 255, 0) 72%);
}

.services-hero.is-pointer-active::after { opacity: 1; }

.services-hero-container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.services-hero .overline {
    color: var(--color-accent);
}

.services-hero h2 {
    color: var(--color-white);
    margin-bottom: 0;
}

.highlight-blue {
    color: var(--color-blue);
}

.services-hero h2 .highlight-blue {
    color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
    .services-hero,
    .services-hero::before {
        animation: none;
    }
}

@media (max-width: 640px) {
    .services-hero { padding: 6rem 0 2.5rem; }
}

/* =========================================
   SECTION 1 — HOW THEY CONNECT
   ========================================= */
.lifecycle-section {
    background-color: var(--color-white);
}

.lifecycle-intro {
    /* Spans the same left/right edges as the three cards below it
       (Advise / Architect & Deploy / Manage & Secure), so the copy
       reads as one centered block anchored to the card grid rather
       than a narrower column floating above it. */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
}

.lifecycle-intro .desc-text {
    color: var(--color-gray);
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 1.1rem;
}

.lifecycle-intro .desc-text:last-of-type {
    margin-bottom: 0;
}

/* ---- Interactive timeline ----
   The node row uses the exact same grid (columns + gap) as the card
   grid below it, so each icon sits perfectly centered above its card
   regardless of viewport width. The connecting line's position is
   then measured in JS from the actual rendered node centers and
   written back as inline left/right offsets — this keeps it pixel
   -accurate instead of guessing at percentages. */
.lifecycle-timeline {
    position: relative;
    max-width: 100%;
    margin: 0 auto 1.75rem;
}

.lifecycle-line {
    position: absolute;
    top: 28px;
    height: 3px;
    background-color: var(--color-gray);
    border-radius: 3px;
    overflow: hidden;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}


.lifecycle-line-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--color-blue), var(--color-accent));
    transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.lifecycle-node-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.lifecycle-node {
    position: relative;
    z-index: 2;
    justify-self: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

.lifecycle-node-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-navy);
    color: var(--color-white);
    font-size: 1.15rem;
    box-shadow: 0 8px 20px rgba(24, 38, 74, 0.22);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.lifecycle-node:hover .lifecycle-node-circle {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(40, 65, 162, 0.3);
}

.lifecycle-node.active .lifecycle-node-circle {
    background-color: var(--color-blue);
    transform: scale(1.08);
    box-shadow: 0 14px 30px rgba(40, 65, 162, 0.35);
}

/* ---- Cards ---- */
.lifecycle-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 1.75rem;
}

.lifecycle-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 2px solid rgba(40, 65, 162, 0.18);
    border-radius: 18px;
    padding: 2rem 1.85rem;
    text-align: left;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Large faint watermark icon, echoing the node above it — a quieter,
   more professional stand-in for the badge that used to sit here. */
.lifecycle-card-watermark {
    position: absolute;
    right: -0.75rem;
    bottom: -1rem;
    font-size: 6.5rem;
    color: var(--color-navy);
    opacity: 0.04;
    transform: rotate(-8deg);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
}

/* Left accent bar that grows in on hover/active, echoing the line's
   progress fill above without needing a separate badge. */
.lifecycle-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--color-blue), var(--color-accent));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.lifecycle-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.lifecycle-card-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-blue);
}

.lifecycle-card-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-light);
    line-height: 1;
    transition: color 0.4s ease;
}

.lifecycle-card h3 {
    position: relative;
    font-size: 1.25rem;
    color: var(--color-navy);
    margin-bottom: 0.75rem;
}

.lifecycle-card-hook {
    position: relative;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.5;
    margin-bottom: 0.6rem;
}

.lifecycle-card-desc {
    position: relative;
    font-size: 0.92rem;
    color: var(--color-gray);
    line-height: 1.65;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.lifecycle-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-blue);
    font-weight: 700;
    font-size: 0.92rem;
    transition: gap 0.3s ease, color 0.3s ease;
}

.lifecycle-more i {
    font-size: 0.82rem;
    transition: transform 0.3s ease;
}

.lifecycle-card:hover,
.lifecycle-card.active {
    border-color: var(--color-blue);
    box-shadow: 0 22px 45px rgba(24, 38, 74, 0.12);
    transform: translateY(-6px);
}

.lifecycle-card:hover .lifecycle-more,
.lifecycle-card.active .lifecycle-more {
    gap: 0.9rem;
    color: var(--color-navy);
}

.lifecycle-card:hover .lifecycle-card-number,
.lifecycle-card.active .lifecycle-card-number {
    color: #e4eaf2;
}

.lifecycle-card:hover .lifecycle-card-watermark,
.lifecycle-card.active .lifecycle-card-watermark {
    opacity: 0.07;
    transform: rotate(0deg) scale(1.08);
}

.lifecycle-card:hover .lifecycle-card-accent,
.lifecycle-card.active .lifecycle-card-accent {
    transform: scaleY(1);
}

@media (max-width: 900px) {
    .lifecycle-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 0;
    }
    /* Mobile keeps only the 3 content boxes — the interactive
       timeline above them (connecting line + icon nodes) is
       desktop-only wayfinding and isn't needed once the boxes are
       already stacked and fully visible. */
    .lifecycle-timeline { display: none; }
}

@media (max-width: 640px) {
    .lifecycle-intro { margin-bottom: 3rem; }
}