/* ===================================================================
   Case study pages — per-page styles (loads after css/styles.css and css/case-studies.css). Namespace: .story* only.
   =================================================================== */

.story-head { padding-top: 56px; }
.story-back { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; color: var(--text-strong); text-decoration: none; transition: color .2s ease; }
.story-back:hover { color: var(--brand); }
.story-back .icon { transform: rotate(180deg); color: var(--brand); flex: none; }
.story-title { margin: 28px 0 0; max-width: 980px; font-size: 48px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: var(--headline); text-wrap: balance; }
.story-cover { position: relative; margin-top: 40px; aspect-ratio: 1312 / 440; border-radius: var(--case-radius); overflow: hidden; background: #0a1128; }
.story-cover .case-cover__map { background: url("../assets/img/case-studies/globe.png?v=1") 88% 18% / auto 175% no-repeat; opacity: 1; mix-blend-mode: normal; }   /* the Intelica-coloured globe, large on the right and bleeding off (option B — the user, 2026-10-18), instead of the flat map */
.story-date { margin: 16px 0 0; font-size: 15px; line-height: 1.4; color: var(--text); }
.story-body { padding-top: 72px; }
.story-grid { display: grid; grid-template-columns: 340px minmax(0, 760px); column-gap: clamp(64px, 7vw, 120px); justify-content: space-between; align-items: start; }
@media (min-height: 600px) { .story-facts { position: sticky; top: 112px; } }   /* under the 75-px sticky navbar; static on short viewports (WCAG 1.4.10) */
.story-facts__list { margin: 0; padding: 28px; display: grid; gap: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
.story-fact + .story-fact { padding-top: 24px; border-top: 1px solid var(--border); }
.story-fact__label { font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.story-fact__value { margin: 8px 0 0; font-size: 18px; line-height: 1.35; font-weight: 500; color: var(--headline); }
.story-num { font-size: 40px; line-height: 1.05; font-weight: 500; letter-spacing: -0.03em; color: var(--text-strong); white-space: nowrap; }
.story-num__cur { font-size: .6em; letter-spacing: 0; }
.story-fact__note { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; font-weight: 400; color: var(--text); }
.story-article { font-size: 17px; line-height: 1.65; color: var(--text); }
.story-article p { margin: 0; }
.story-article p + p { margin-top: 14px; }
.story-article b { font-weight: 600; color: var(--text-strong); }
.story-section + .story-section, .story-results + .story-section { margin-top: 56px; }
.story-h { margin: 0 0 16px; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--headline); }
.story-lead { font-size: 19px; line-height: 1.45; font-weight: 500; color: var(--text-strong); }
.story-phases { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
.story-phase { padding: 24px 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.story-phase__label { font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.story-phase__title { margin: 8px 0 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--headline); }
.story-article .story-phase__dur { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--text); }
.story-article .story-phase__dur + p { margin-top: 14px; }
.story-list { margin: 10px 0 0; padding-left: 22px; list-style-type: disc; }   /* filled, like the old page — a list inside the phases' <ol> would default to circle */
.story-list li + li { margin-top: 6px; }
.story-list li::marker { color: var(--brand); }
.story-article .story-list + p { margin-top: 14px; }
.story-results { margin-top: 32px; }
.story-outcomes__title { text-align: center; margin-bottom: 32px; }
.story-outcomes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.story-outcome { padding: 8px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.story-outcome + .story-outcome { border-left: 1px solid var(--border); }
.story-outcome__desc { font-size: 15px; line-height: 1.45; color: var(--text); text-wrap: balance; }   /* «Savings realized / within 3 months», not «…within 3 / months» */
.story-quote { padding-block: 104px 24px; }
.story-quote__card { margin: 0 auto; max-width: 928px; padding: 48px 64px 56px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; }
.story-quote__label { margin: 0; font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.story-quote__text { margin: 24px 0 0; font-family: "Crimson Text", Georgia, "Times New Roman", serif; font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--headline); text-wrap: pretty; }
.story-quote__text p { margin: 0; }
.story-quote__text::before { content: "\201C"; content: "\201C" / ""; display: block; font-size: 64px; line-height: .6; color: var(--brand); margin-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .story-back { transition: none; } }