/* =============================================================================
   CASE STUDIES — page-specific sections
   =============================================================================
   Requires ax-system.css (loaded first): tokens, type scale, buttons, section
   shell, hero, CTA, header/footer, motion. This file styles ONLY this page's
   sections, reusing the shared tokens and editorial registers so Case Studies
   reads as one system with the rest of the site. No glow, no glass, no amber.

   This was a RESTRUCTURE — the reviewed case-study content is preserved.
   Page-unique registers:
     cs-story   · the case-study editorial spread (centerpiece)
     cs-panel   · the directional stat trio (quiet, not the legacy dark panel)
     cs-step    · the Challenge / Solution / Outcome narrative + outcome tags
     cs-impact  · delivery-impact rows (key → statement)
     cs-spine   · the lifecycle (numbered, navy top rules)
   ============================================================================= */


/* =============================================================================
   SECTION 2 — THE STORIES. Each case study is an editorial spread: a head
   (number · meta · name · lede · directional stat trio) over the stepped
   Challenge / Solution / Outcome narrative. Two-column on desktop.
   ============================================================================= */
.cs-stories {
    border-top: 1px solid var(--ax-border);
}

.cs-story {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) 1.05fr;
    gap: clamp(28px, 5vw, 80px);
    padding: clamp(44px, 5.5vw, 80px) 0;
    border-bottom: 1px solid var(--ax-border);
}

/* Head column */
.cs-story__head {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 clamp(20px, 3vw, 36px);
    align-self: start;
}

.cs-story__no {
    font-family: var(--ax-font-head);
    font-weight: 500;
    font-size: 13px;
    color: var(--ax-accent-soft);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.cs-story__meta {
    font-family: var(--ax-font-body);
    font-size: clamp(12px, 1vw, 13px);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ax-accent-soft);
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cs-story__sep { color: var(--ax-border); }

.cs-story__name {
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: clamp(25px, 3vw, 38px);
    letter-spacing: -0.028em;
    line-height: 1.05;
    color: var(--ax-text);
    margin: 0;
    text-wrap: balance;
}

.cs-story__lede {
    font-family: var(--ax-font-body);
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6;
    color: var(--ax-text-2);
    margin: clamp(18px, 2vw, 22px) 0 0;
    max-width: 46ch;
}

/* Directional stat trio — quiet, hairline-topped, navy figures. No dark panel. */
.cs-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 24px);
    margin: clamp(26px, 3vw, 36px) 0 0;
    padding-top: clamp(22px, 2.6vw, 30px);
    border-top: 1px solid var(--ax-border);
}
.cs-panel__item { display: flex; flex-direction: column; gap: 5px; }

.cs-panel__v {
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: clamp(20px, 2vw, 27px);
    letter-spacing: -0.024em;
    line-height: 1;
    color: var(--ax-accent);
    margin: 0;
}
.cs-panel__k {
    font-family: var(--ax-font-body);
    font-size: clamp(12px, 1vw, 13px);
    line-height: 1.4;
    color: var(--ax-text-3);
    margin: 0;
}

/* Body — the stepped narrative. Each step: navy uppercase label + paragraph. */
.cs-story__body {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 36px);
    min-width: 0;
}

.cs-step__label {
    display: block;
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: clamp(12px, 1vw, 13px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ax-accent-soft);
    margin-bottom: 12px;
}

.cs-step__txt {
    font-family: var(--ax-font-body);
    font-size: clamp(15px, 1.3vw, 16.5px);
    line-height: 1.66;
    color: var(--ax-text-2);
    margin: 0;
}
/* The outcome paragraph reads in near-black — it is the point of the story. */
.cs-step--out .cs-step__txt { color: var(--ax-text); }

/* Outcome tags — quiet hairline pills (same register as the role/skill tags). */
.cs-tags {
    list-style: none;
    margin: clamp(18px, 2vw, 22px) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.cs-tags li {
    font-family: var(--ax-font-body);
    font-size: 13px;
    line-height: 1;
    color: var(--ax-text-2);
    padding: 8px 14px;
    border: 1px solid var(--ax-border);
    border-radius: 999px;
}


/* =============================================================================
   SECTION 3 — DELIVERY IMPACT. Key → statement rows (qualitative value).
   ============================================================================= */
.cs-impact__lead { margin-top: 20px; }

.cs-impact {
    margin: clamp(8px, 1.5vw, 16px) 0 0;
    padding: 0;
    border-top: 1px solid var(--ax-border-2);
}

.cs-impact__row {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) 1.2fr;
    gap: 0 clamp(32px, 5vw, 72px);
    align-items: baseline;
    padding: clamp(24px, 3vw, 36px) 0;
    border-bottom: 1px solid var(--ax-border-2);
}

.cs-impact__k {
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: clamp(19px, 2vw, 27px);
    letter-spacing: -0.022em;
    line-height: 1.15;
    color: var(--ax-text);
    margin: 0;
    text-wrap: balance;
}

.cs-impact__d {
    font-family: var(--ax-font-body);
    font-size: clamp(15px, 1.25vw, 16.5px);
    line-height: 1.6;
    color: var(--ax-text-2);
    margin: 0;
}


/* =============================================================================
   SECTION 4 — HOW WE DELIVER. Five-step lifecycle, navy top rules; plus the
   quiet text link to the Agentic SDLC. (Mirrors AI-Solutions delivery phases.)
   ============================================================================= */
.cs-deliver__lead { margin-top: 20px; }

.cs-spine {
    list-style: none;
    margin: clamp(8px, 1.5vw, 16px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(22px, 2.6vw, 40px);
}

.cs-spine__step {
    padding-top: 22px;
    border-top: 2px solid var(--ax-accent);
}

.cs-spine__no {
    font-family: var(--ax-font-head);
    font-weight: 500;
    font-size: 13px;
    color: var(--ax-text-3);
    font-variant-numeric: tabular-nums;
    display: block;
    margin-bottom: 16px;
}

.cs-spine__k {
    font-family: var(--ax-font-head);
    font-weight: 600;
    font-size: clamp(18px, 1.8vw, 23px);
    letter-spacing: -0.02em;
    color: var(--ax-text);
    margin: 0 0 10px;
}

.cs-spine__d {
    font-family: var(--ax-font-body);
    font-size: clamp(14px, 1.15vw, 15px);
    line-height: 1.55;
    color: var(--ax-text-2);
    margin: 0;
}

.cs-spine__link {
    margin: clamp(36px, 4.5vw, 56px) 0 0;
    font-family: var(--ax-font-body);
    font-size: clamp(15px, 1.3vw, 17px);
}
.cs-spine__link a {
    color: var(--ax-accent);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s var(--ax-ease);
}
.cs-spine__link a:hover { border-bottom-color: var(--ax-accent); }
.cs-spine__link span { display: inline-block; transition: transform 0.25s var(--ax-ease); }
.cs-spine__link a:hover span { transform: translateX(3px); }


/* =============================================================================
   RESPONSIVE — TABLET  ≤ 980px
   ============================================================================= */
@media (max-width: 980px) {

    /* Story: stack head over the narrative */
    .cs-story { grid-template-columns: 1fr; gap: 32px; }

    /* Impact: stack key over statement */
    .cs-impact__row { grid-template-columns: 1fr; gap: 8px; }

    /* Lifecycle: wrap to a comfortable grid */
    .cs-spine { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}


/* =============================================================================
   RESPONSIVE — MOBILE  ≤ 640px
   ============================================================================= */
@media (max-width: 640px) {

    .cs-story { padding: 40px 0; }
    .cs-story__head { grid-template-columns: 32px 1fr; gap: 0 14px; }
    .cs-story__name { font-size: clamp(24px, 7.5vw, 30px); }
    .cs-panel { grid-template-columns: 1fr; gap: 14px; }
    .cs-panel__item { flex-direction: row; align-items: baseline; gap: 10px; }

    .cs-spine { grid-template-columns: 1fr; gap: 24px; }
}