/* ==========================================================================
   Service detail page

   Deliberately lean: the page is assembled almost entirely from shared
   components (.split, .grid-3, .solution-card, .process-section, .stack-chip,
   .faq-node, .cta-banner-wrapper). What lives here is only what those
   components do not already provide.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------
   Sits under the fixed header, so it carries the header offset itself; the
   old .page-wrap wrapper is gone. */
.svc-hero {
    background-color: #eef2f7;
    background-image: var(--aurora-blue), var(--aurora-sky), var(--aurora-warm),
                      linear-gradient(135deg, var(--tint-blue), var(--light-bg));
    background-repeat: no-repeat;
    background-size: 160% 160%, 150% 150%, 140% 140%, 100% 100%;
    animation: auroraDrift 120s var(--ease-in-out) infinite alternate;
    position: relative;
    overflow: hidden;
}
.svc-hero-inner { padding-top: calc(var(--header-h) + var(--sp-9)); position: relative; z-index: 2; }

.svc-hero-copy h1 {
    font-size: var(--fs-4xl, var(--fs-3xl));
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: 1.08;
    color: var(--dark-bg);
    margin-bottom: var(--sp-3);
}
.svc-tagline {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    color: var(--ink-1);
    font-weight: 600;
    margin-bottom: var(--sp-4);
    max-width: 34rem;
}
.svc-intro {
    font-size: var(--fs-base);
    line-height: 1.75;
    color: var(--text-main);
    margin-bottom: var(--sp-5);
    max-width: 36rem;
}

.svc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}

/* Was an inline style="" on the paragraph — the last one on this page. */
.hero-note {
    font-size: var(--fs-xs);
    color: var(--slate-500);
    font-style: italic;
    margin-top: var(--sp-4);
    max-width: 34rem;
}

/* The hero photo is the tallest thing in its column; capping it stops a
   1600x1067 source from dictating the height of the whole hero. */
.svc-hero-media { max-height: 460px; box-shadow: var(--el-3); }

/* .badge-wrapper centres by default (section headers). In two-column copy it
   has to sit with the text. */
.badge-wrapper.is-left { text-align: left; }

/* Left-aligned section heading inside a .split column. */
.svc-h2 {
    font-size: var(--fs-2xl);
    color: var(--dark-bg);
    font-weight: 700;
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-4);
}

/* --- Icon badge (hero) --- */
.icon-badge {
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background-color: var(--badge-bg);
    color: var(--primary-color);
    font-size: 24px;
    margin-bottom: var(--sp-4);
}

/* --- Panels / lists (shared with the "What changes" split) --- */
.panel {
    background: var(--plane-0);
    border: 1px solid var(--hair-1);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
}
.panel h2, .panel h3 { color: var(--dark-bg); margin-bottom: var(--sp-3); }
.panel p { line-height: 1.7; margin-bottom: var(--sp-4); }

.service-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.service-list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-weight: 600; color: var(--dark-bg); font-size: var(--fs-sm); }
.service-list .icon { color: var(--primary-color); margin-top: 3px; flex-shrink: 0; }

.pill-list { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.pill-list span {
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--hair-1);
    color: var(--primary-color);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* --- "Sounds familiar?" ---------------------------------------------------
   Not a card: a hairline-ruled block with an oversized index number, so the
   section reads differently from the two card grids that follow it. */
.svc-signal {
    border-left: 3px solid var(--hair-2);
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
}
.svc-signal-num {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--primary-color);
    opacity: 0.35;
    margin-bottom: var(--sp-2);
    font-variant-numeric: tabular-nums;
}
.svc-signal p { font-size: var(--fs-base); line-height: 1.7; color: var(--ink-1); }

/* --- Scope cards --- */
.solution-card h3 { font-size: var(--fs-lg); color: var(--dark-bg); margin-bottom: var(--sp-3); }
.solution-card p { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-main); }

/* --- Honest limits -------------------------------------------------------
   Amber rather than brand blue: this section is a caution, and colouring it
   like the rest of the page would bury the point of it. */
.limit-card {
    background: var(--white);
    border: 1px solid var(--hair-1);
    border-top: 3px solid var(--amber);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
}
.limit-icon { display: block; color: var(--amber); margin-bottom: var(--sp-4); }
.limit-icon .icon { width: var(--icon-lg); height: var(--icon-lg); }
.limit-card h3 { font-size: var(--fs-base); color: var(--dark-bg); margin-bottom: var(--sp-3); }
.limit-card p { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-main); }

/* --- Tool strip ---
   A single quiet band between two heavy sections; the full section rhythm
   would give it more room than it earns. */
.svc-tools { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }

/* --- Cross-links ---
   .service-card ships without the .svc-icon / .svc-more treatment outside the
   homepage, so the arrow affordance is defined here. */
/* Flex column so the "Explore" affordance pins to the bottom edge of every
   card instead of floating wherever its paragraph happened to end. */
.service-card { display: flex; flex-direction: column; height: 100%; }
.service-card > .icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--primary-color); margin-bottom: var(--sp-4); }
.service-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.service-card p { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-main); margin-bottom: var(--sp-4); }
.service-card .svc-more {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-color);
}
.service-card .svc-more .icon { transition: transform var(--dur-2) var(--ease-out); }
.service-card:hover .svc-more .icon { transform: translateX(3px); }

/* --- Responsive --- */
@media (max-width: 900px) {
    .svc-hero-inner { padding-top: calc(var(--header-h) + var(--sp-7)); }
    .svc-hero-copy h1 { font-size: var(--fs-3xl); }
    .svc-hero-media { max-height: 300px; }
    .svc-tagline, .svc-intro, .hero-note { max-width: none; }
}

@media (max-width: 560px) {
    .svc-hero-actions { flex-direction: column; align-items: stretch; }
    .svc-hero-actions .btn-primary,
    .svc-hero-actions .btn-dark-pill { width: 100%; }
}