/* Case study pages. Builds on landing.css and service.css. */

.cs-hero { background:
        radial-gradient(720px 440px at 80% 40%, rgba(56, 189, 248, .2), transparent 70%),
        radial-gradient(620px 400px at 95% 95%, rgba(251, 191, 36, .14), transparent 70%),
        linear-gradient(180deg, var(--lx-ink) 0%, var(--lx-ink-2) 100%); }

/* ---------------------------------------------------------------- 3D results wall (hub hero) */
.cs-wall { perspective: 1200px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; transform-style: preserve-3d; }
.cs-wall__tile {
    padding: 18px 18px 16px; border-radius: 18px; color: #e2e8f0;
    background: linear-gradient(150deg, rgba(16, 36, 68, .94), rgba(7, 19, 36, .9));
    border: 1px solid rgba(147, 197, 253, .24);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .07);
    transform: rotateY(-14deg) rotateX(6deg) translateZ(calc(var(--i) * 6px));
    animation: cs-float 9s ease-in-out infinite; animation-delay: calc(var(--i) * -1.2s);
}
.cs-wall__tile:nth-child(even) { transform: rotateY(-14deg) rotateX(6deg) translateY(18px); }
@keyframes cs-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.cs-wall__tile strong { display: block; font-size: 32px; line-height: 1; font-weight: 700; color: #fff; background: linear-gradient(120deg, #fde68a, #93c5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cs-wall__tile span { display: block; margin-top: 8px; font-size: 13.5px; color: #cbd5e1; }
.cs-wall__tile small { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #93c5fd; }
@media (max-width: 960px) { .cs-wall__tile, .cs-wall__tile:nth-child(even) { transform: none; animation: none; } }

/* ---------------------------------------------------------------- filter */
.cs-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-filter button { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #334155; background: #fff; border: 1px solid var(--lx-line); cursor: pointer; transition: all .2s; }
.cs-filter button:hover { border-color: #2563eb; color: #044aa9; }
.cs-filter button.is-active { color: #fff; background: linear-gradient(135deg, #2563eb, #044aa9); border-color: transparent; }

/* ---------------------------------------------------------------- tags */
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cs-tags span { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #044aa9; background: rgba(37, 99, 235, .1); }
.cs-tags .cs-tags__client { color: #92400e; background: rgba(251, 191, 36, .16); }

/* ---------------------------------------------------------------- featured + grid */
.cs-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; padding: 34px; border-radius: 26px; background: #fff; border: 1px solid var(--lx-line); box-shadow: 0 40px 80px -50px rgba(4, 74, 169, .45); }
.cs-feature h3 { margin-top: 14px; font-size: 26px; line-height: 1.25; color: #142736; }
.cs-feature h3 a { color: inherit; text-decoration: none; }
.cs-feature h3 a:hover { color: #044aa9; }
.cs-feature__copy > p:not(.cs-tags) { margin: 12px 0 16px; font-size: 16px; line-height: 1.7; color: var(--lx-muted); }
.cs-feature__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; border-radius: 22px; background: linear-gradient(150deg, #0b1d38, #071324); }
.cs-feature__metrics div { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(148, 163, 184, .18); }
.cs-feature__metrics strong { display: block; font-size: 30px; font-weight: 700; color: #fde68a; }
.cs-feature__metrics span { display: block; margin-top: 4px; font-size: 13px; color: #cbd5e1; }

.cs-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cs-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.cs-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--lx-line); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.cs-card:hover { border-color: rgba(37, 99, 235, .45); box-shadow: 0 30px 60px -36px rgba(4, 74, 169, .5); }
.cs-card__metric { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.cs-card__metric strong { font-size: 32px; font-weight: 700; line-height: 1; color: #044aa9; }
.cs-card__metric span { font-size: 13.5px; color: var(--lx-muted); }
.cs-card h3 { font-size: 18px; line-height: 1.35; color: #142736; }
.cs-card__summary { font-size: 14.5px; line-height: 1.65; color: var(--lx-muted); }
.cs-card .lx-link-arrow { margin-top: auto; }
@media (max-width: 1024px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-feature { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cs-grid, .cs-grid--two { grid-template-columns: 1fr; } .cs-feature { padding: 22px; } }

/* ---------------------------------------------------------------- numbered guide / lessons */
.cs-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cs-guide__item { position: relative; padding: 26px 26px 24px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--lx-line); }
.cs-guide__n { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #2563eb, #044aa9); box-shadow: 0 10px 20px -10px rgba(4, 74, 169, .8); }
.cs-guide__item h3 { margin-top: 14px; font-size: 18px; color: #142736; }
.cs-guide__item p { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--lx-muted); }
@media (max-width: 760px) { .cs-guide { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- client snapshot (detail hero) */
.cs-snap-stage { perspective: 1300px; display: flex; justify-content: center; }
.cs-snap {
    width: min(400px, 100%); padding: 26px; border-radius: 24px; color: #e2e8f0;
    background: linear-gradient(150deg, rgba(16, 36, 68, .95), rgba(7, 19, 36, .92));
    border: 1px solid rgba(147, 197, 253, .26);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: rotateY(-15deg) rotateX(7deg); animation: cs-tilt 9s ease-in-out infinite;
}
@keyframes cs-tilt { 0%, 100% { transform: rotateY(-15deg) rotateX(7deg); } 50% { transform: rotateY(-7deg) rotateX(3deg) translateY(-10px); } }
.cs-snap__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fbbf24; }
.cs-snap dl { margin: 14px 0 0; display: grid; gap: 0; }
.cs-snap dl div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(148, 163, 184, .16); }
.cs-snap dt { font-size: 12.5px; color: #93c5fd; }
.cs-snap dd { margin: 0; font-size: 14px; color: #fff; }
@media (max-width: 960px) { .cs-snap { transform: none; animation: none; } }

/* ---------------------------------------------------------------- metrics band */
.cs-band { position: relative; margin-top: -36px; z-index: 2; }
.cs-band__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cs-band__item { padding: 22px; border-radius: 20px; text-align: center; background: #fff; border: 1px solid var(--lx-line); box-shadow: 0 30px 60px -36px rgba(4, 74, 169, .5); }
.cs-band__item strong { display: block; font-size: 36px; font-weight: 700; line-height: 1; color: #044aa9; }
.cs-band__item span { display: block; margin-top: 8px; font-size: 14px; color: var(--lx-muted); }
@media (max-width: 760px) { .cs-band__grid { grid-template-columns: 1fr 1fr; } .cs-band { margin-top: 20px; } }

/* ---------------------------------------------------------------- approach steps (dark section) */
.cs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.cs-step { position: relative; padding: 24px 22px; border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(148, 163, 184, .2); }
.cs-step::before { content: ""; position: absolute; top: 34px; right: -16px; width: 16px; height: 2px; background: linear-gradient(90deg, #60a5fa, transparent); }
.cs-step:last-child::before { display: none; }
.cs-step__phase { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0b1d38; background: #fbbf24; }
.cs-step h3 { margin-top: 14px; font-size: 17px; color: #fff; }
.cs-step p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: #cbd5e1; }
@media (max-width: 1024px) { .cs-steps { grid-template-columns: 1fr 1fr; } .cs-step::before { display: none; } }
@media (max-width: 640px) { .cs-steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- quote */
.cs-quote { position: relative; margin: 0; padding: 34px 30px 28px; border-radius: 26px; color: #e2e8f0; background: linear-gradient(150deg, #0b1d38, #071324); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.cs-quote__mark { position: absolute; top: -18px; left: 26px; font-size: 90px; line-height: 1; color: #fbbf24; font-family: Georgia, serif; }
.cs-quote blockquote { margin: 0; font-size: 19px; line-height: 1.6; color: #fff; }
.cs-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.cs-quote__avatar { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; color: #0b1d38; background: linear-gradient(135deg, #fde68a, #93c5fd); }
.cs-quote strong { display: block; color: #fff; }
.cs-quote small { display: block; font-size: 13px; color: #93c5fd; }

@media (prefers-reduced-motion: reduce) { .cs-wall__tile, .cs-snap { animation: none !important; } }