/* 00-tokens.css */
/**
 * Case Study styles shared by the case studies page and reusable spotlight blocks.
 * Token system aligned to about.css structure for design consistency.
 */

/* ════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Comprehensive token system for case studies - matches about.css quality
   ════════════════════════════════════════════════════════════════════════════ */

.case-study-template,
.case-study-archive,
.single-case-study {

    /* ══════════════════════════════════════════
       COLORS - Core Palette
       ══════════════════════════════════════════ */
    --cs-color-cyan: #00e5ff;
    --cs-color-magenta: #ff00e0;
    --cs-color-amber: #ff6b00;

    /* Text hierarchy */
    --cs-color-ink: #eaf2ff;
    --cs-color-ink-primary: #e8f0ff;
    --cs-color-muted: #c5d8f2;
    --cs-color-faint: #8a9ab8;
    --cs-color-ink-contrast: #041225;

    /* Cyan at key opacities */
    --cs-cyan-5: rgba(0, 229, 255, 0.05);
    --cs-cyan-10: rgba(0, 229, 255, 0.10);
    --cs-cyan-15: rgba(0, 229, 255, 0.15);
    --cs-cyan-22: rgba(0, 229, 255, 0.22);
    --cs-cyan-30: rgba(0, 229, 255, 0.30);
    --cs-cyan-45: rgba(0, 229, 255, 0.45);
    --cs-cyan-60: rgba(0, 229, 255, 0.60);
    --cs-cyan-90: rgba(0, 229, 255, 0.90);

    /* Magenta at key opacities */
    --cs-magenta-5: rgba(255, 0, 224, 0.05);
    --cs-magenta-12: rgba(255, 0, 224, 0.12);
    --cs-magenta-15: rgba(255, 0, 224, 0.15);
    --cs-magenta-25: rgba(255, 0, 224, 0.25);
    --cs-magenta-30: rgba(255, 0, 224, 0.30);
    --cs-magenta-40: rgba(255, 0, 224, 0.40);

    /* Amber at key opacities */
    --cs-amber-15: rgba(255, 107, 0, 0.15);
    --cs-amber-22: rgba(255, 107, 0, 0.22);
    --cs-amber-30: rgba(255, 107, 0, 0.30);

    /* Surfaces (glass layers) */
    --cs-surface-void: rgba(4, 8, 18, 0.92);
    --cs-surface-deep: rgba(6, 12, 28, 0.75);
    --cs-surface-card: rgba(10, 18, 38, 0.32);
    --cs-surface-card-hover: rgba(12, 22, 44, 0.42);
    --cs-surface-elevated: rgba(16, 28, 52, 0.48);
    --cs-color-surface: rgba(6, 12, 30, 0.9);
    --cs-color-surface-soft: rgba(4, 10, 26, 0.82);

    /* Strokes/borders */
    --cs-color-stroke: rgba(0, 229, 255, 0.22);
    --cs-color-stroke-strong: rgba(0, 229, 255, 0.35);

    /* ══════════════════════════════════════════
       SPACING - Fluid scale (4px base)
       ══════════════════════════════════════════ */
    --cs-space-1: clamp(4px, 0.25vw + 2px, 6px);
    --cs-space-2: clamp(8px, 0.5vw + 4px, 12px);
    --cs-space-3: clamp(12px, 1vw + 4px, 18px);
    --cs-space-4: clamp(16px, 1.5vw + 4px, 24px);
    --cs-space-5: clamp(24px, 2.5vw + 4px, 36px);
    --cs-space-6: clamp(32px, 3.5vw + 4px, 48px);
    --cs-space-7: clamp(48px, 5vw + 8px, 72px);
    --cs-space-8: clamp(64px, 7vw + 8px, 96px);
    --cs-space-section: clamp(72px, 10vw, 128px);

    /* Legacy spacing aliases */
    --cs-space-xs: 4px;
    --cs-space-sm: 8px;
    --cs-space-md: 12px;
    --cs-space-lg: 18px;
    --cs-space-xl: 24px;
    --cs-space-2xl: 32px;
    --cs-space-3xl: 40px;
    --cs-space-4xl: 48px;

    /* Padding presets */
    --cs-pad-inline: clamp(5%, 7vw, 8%);
    --cs-pad-inline-mobile: clamp(8vw, 11vw, 13vw);
    --cs-pad-block-lg: clamp(64px, 9vw, 96px);
    --cs-pad-block-xl: clamp(78px, 10vw, 118px);
    --cs-pad-block-deliverables: clamp(80px, 10vh, 96px);
    --cs-gap-hero: clamp(36px, 6vw, 52px);
    --cs-gap-hero-mobile: clamp(22px, 7vw, 32px);

    /* ══════════════════════════════════════════
       BORDER RADIUS - Proportional scale
       ══════════════════════════════════════════ */
    --cs-radius-1: clamp(6px, 0.75vw, 10px);
    --cs-radius-2: clamp(10px, 1.25vw, 16px);
    --cs-radius-3: clamp(14px, 1.75vw, 22px);
    --cs-radius-4: clamp(20px, 2.5vw, 32px);
    --cs-radius-full: 9999px;

    /* Legacy radius aliases */
    --cs-radius-md: 18px;
    --cs-radius-lg: clamp(32px, 8vw, 48px);

    /* ══════════════════════════════════════════
       TYPOGRAPHY - Clear hierarchy
       ══════════════════════════════════════════ */
    --cs-text-display: clamp(2.5rem, 5vw + 0.5rem, 3.8rem);
    --cs-text-h1: clamp(3rem, 6vw, 3.8rem);
    --cs-text-h2: clamp(2rem, 4vw, 2.6rem);
    --cs-text-h3: clamp(1.4rem, 3vw, 1.8rem);
    --cs-text-body-lg: clamp(1.05rem, 1.25vw + 0.125rem, 1.2rem);
    --cs-text-body: 1rem;
    --cs-text-small: 0.9rem;
    --cs-text-caption: 0.88rem;
    --cs-text-eyebrow: 0.78rem;
    --cs-text-xs: 0.7rem;

    /* Line heights */
    --cs-leading-none: 1;
    --cs-leading-tight: 1.15;
    --cs-leading-snug: 1.35;
    --cs-leading-normal: 1.55;
    --cs-leading-relaxed: 1.7;
    --cs-leading-loose: 1.85;
    --cs-lh-body: 1.7;
    --cs-lh-tight: 1.4;

    /* Letter spacing */
    --cs-tracking-tighter: -0.03em;
    --cs-tracking-tight: -0.015em;
    --cs-tracking-normal: 0;
    --cs-tracking-wide: 0.04em;
    --cs-tracking-wider: 0.08em;
    --cs-tracking-eyebrow: 0.12em;
    --cs-tracking-kicker: 0.22em;

    /* Font weights */
    --cs-weight-normal: 400;
    --cs-weight-medium: 500;
    --cs-weight-semibold: 600;
    --cs-weight-bold: 700;

    /* Max line widths */
    --cs-max-line-mobile: 34ch;
    --cs-max-line-caption: 36ch;
    --cs-max-prose: 720px;

    /* ══════════════════════════════════════════
       SHADOWS - Depth layers
       ══════════════════════════════════════════ */
    --cs-shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.15);
    --cs-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.22);
    --cs-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.30);
    --cs-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.38);
    --cs-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.45);
    --cs-shadow-2xl: 0 32px 80px rgba(0, 0, 0, 0.55);

    /* Panel shadows (branded) */
    --cs-shadow-panel: 0 40px 110px rgba(3, 8, 24, 0.6);
    --cs-shadow-soft: 0 18px 44px rgba(3, 10, 26, 0.45);
    --cs-shadow-card: 0 24px 60px rgba(4, 6, 14, 0.65);

    /* Glow effects - cyan */
    --cs-glow-cyan-xs: 0 0 12px rgba(0, 229, 255, 0.15);
    --cs-glow-cyan-sm: 0 0 20px rgba(0, 229, 255, 0.22);
    --cs-glow-cyan-md: 0 0 36px rgba(0, 229, 255, 0.30);
    --cs-glow-cyan-lg: 0 0 56px rgba(0, 229, 255, 0.40);
    --cs-glow-cyan-xl: 0 0 80px rgba(0, 229, 255, 0.50);
    --cs-shadow-cyan: 0 18px 40px rgba(0, 229, 255, 0.28);

    /* Glow effects - magenta */
    --cs-glow-magenta-sm: 0 0 20px rgba(255, 0, 224, 0.18);
    --cs-glow-magenta-md: 0 0 36px rgba(255, 0, 224, 0.28);

    /* Text shadows (neon glow) */
    --cs-text-glow-xs: 0 0 10px rgba(0, 229, 255, 0.25);
    --cs-text-glow-sm: 0 0 18px rgba(0, 229, 255, 0.35);
    --cs-text-glow-md: 0 0 28px rgba(0, 229, 255, 0.45);
    --cs-text-glow-lg: 0 0 40px rgba(0, 229, 255, 0.55);
    --cs-text-glow-title:
        0 0 36px rgba(0, 229, 255, 0.32),
        0 0 44px rgba(255, 116, 228, 0.26),
        0 0 34px rgba(255, 107, 0, 0.24);

    /* ══════════════════════════════════════════
       BORDERS
       ══════════════════════════════════════════ */
    --cs-border-thin: 1px;
    --cs-border-regular: 2px;
    --cs-border-thick: 3px;
    --cs-border-accent: 4px;

    /* ══════════════════════════════════════════
       MOTION - Timing
       ══════════════════════════════════════════ */
    --cs-duration-instant: 0.1s;
    --cs-duration-fast: 0.2s;
    --cs-duration-normal: 0.3s;
    --cs-duration-slow: 0.45s;
    --cs-duration-slower: 0.6s;
    --cs-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --cs-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --cs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --cs-ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* ══════════════════════════════════════════
       BLUR - Glassmorphism
       ══════════════════════════════════════════ */
    --cs-blur-sm: blur(8px);
    --cs-blur-md: blur(16px);
    --cs-blur-lg: blur(28px);
    --cs-blur-xl: blur(40px);

    /* ══════════════════════════════════════════
       Z-INDEX - Stacking
       ══════════════════════════════════════════ */
    --cs-z-base: 1;
    --cs-z-card: 10;
    --cs-z-sticky: 100;
    --cs-z-overlay: 1000;

    /* ══════════════════════════════════════════
       FOCUS STATES - Accessibility
       ══════════════════════════════════════════ */
    --cs-focus-color: #00e5ff;
    --cs-focus-outline: 2px solid var(--cs-focus-color);
    --cs-focus-shadow: 0 0 0 4px rgba(0, 229, 255, 0.18);
    --cs-focus-ring: var(--cs-focus-outline);

    /* ══════════════════════════════════════════
       GRADIENTS - Branded backgrounds
       ══════════════════════════════════════════ */
    --cs-grad-bg: var(--gradient-neon-night);
    --cs-grad-cta: linear-gradient(135deg, rgba(0, 229, 255, 0.24), rgba(0, 229, 255, 0.12));
    --cs-grad-hero:
        radial-gradient(120% 120% at 16% 18%, rgba(255, 116, 228, 0.26), transparent 68%),
        radial-gradient(140% 130% at 84% 14%, rgba(0, 229, 255, 0.24), transparent 72%),
        radial-gradient(150% 160% at 50% 120%, rgba(255, 107, 0, 0.24), transparent 80%),
        linear-gradient(175deg, rgba(6, 12, 30, 0.92), rgba(3, 8, 22, 0.88));
    --cs-grad-card:
        linear-gradient(160deg, rgba(4, 12, 30, 0.82), rgba(12, 26, 54, 0.86));

    /* ══════════════════════════════════════════
       LEGACY ALIASES (for backwards compatibility)
       ══════════════════════════════════════════ */
    --cs-ink: var(--cs-color-ink);
    --cs-muted: var(--cs-color-muted);
    --cs-surface: var(--cs-color-surface);
    --cs-surface-soft: var(--cs-color-surface-soft);
    --cs-panel-shadow: var(--cs-shadow-panel);

    /* ══════════════════════════════════════════
       BASE STYLES
       ══════════════════════════════════════════ */
    /* Transparent to let body neon-grid background show through */
    background: transparent;
    color: var(--cs-color-ink);
    position: relative;
    overflow: hidden;
}

/* 01-base.css */
.case-study-page {
    background: transparent;
}

/* Guard against duplicate block rendering when the page template/pattern is preloaded twice. */

.case-study-page + .case-study-page {
    display: none;
}

.case-study-query .wp-block-post-template {
    display: flex;
    flex-direction: column;
    gap: clamp(44px, 7vw, 72px);
}

/* ════════════════════════════════════════════════════════════════════════════
   CHIPS & TERM BADGES
   Category chips and term badges used in archives and cards
   ════════════════════════════════════════════════════════════════════════════ */

.case-study-chip,
.case-study-term-chips .wp-block-post-terms__term {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-1);
    min-height: 44px;
    border-radius: var(--cs-radius-full);
    border: var(--cs-border-thin) solid rgba(12, 20, 34, 0.12);
    background:
        linear-gradient(135deg, rgba(79, 240, 255, 0.68) 0%, rgba(255, 116, 228, 0.72) 55%, rgba(255, 107, 0, 0.72) 100%);
    color: var(--cs-color-ink-contrast);
    font-size: var(--cs-text-xs);
    letter-spacing: var(--cs-tracking-eyebrow);
    text-transform: uppercase;
    padding: 0;
    box-shadow: var(--cs-shadow-sm);
    text-decoration: none;
}

.case-study-chip a,
.case-study-term-chips .wp-block-post-terms__term a {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-1);
    min-height: 44px;
    padding: var(--cs-space-md) var(--cs-space-xl);
    border-radius: inherit;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: none;
    transition: transform var(--cs-duration-fast) var(--cs-ease-out), box-shadow var(--cs-duration-fast) var(--cs-ease-out);
    box-shadow: inset 0 0 0 1px rgba(4, 18, 36, 0.18);
}

.case-study-chip a:hover,
.case-study-chip a:focus-visible,
.case-study-term-chips .wp-block-post-terms__term a:hover,
.case-study-term-chips .wp-block-post-terms__term a:focus-visible {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 0 16px rgba(79, 240, 255, 0.32);
    transform: translateY(-1px);
    outline: none;
}

.case-study-term-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cs-space-2);
}

.case-study-term-chips .wp-block-post-terms__separator,
.case-study-term-chips .wp-block-post-terms__prefix {
    display: none;
}

/* 02-hero.css */
/* stylelint-disable no-descending-specificity -- intentional cascade layering for complex layouts */
/* ════════════════════════════════════════════════════════════════════════════
   HERO SECTIONS
   Full-width hero variants for archive and single case study pages
   ════════════════════════════════════════════════════════════════════════════ */

.case-study-hero {
    position: relative;
    display: grid;
    gap: var(--cs-gap-hero);
    padding: var(--cs-pad-block-lg) var(--cs-pad-inline) var(--cs-pad-block-xl);
    /* Glassmorphism: dark glass panel, no colorful gradients */
    background: rgba(6, 12, 30, 0.78);
    backdrop-filter: blur(12px);
    border-radius: var(--cs-radius-lg);
    border: 1px solid rgba(79, 240, 255, 0.22);
    box-shadow:
        0 42px 120px rgba(3, 8, 24, 0.5),
        inset 0 0 0 1px rgba(79, 240, 255, 0.08);
    overflow: hidden;
    color: var(--cs-color-ink);
    isolation: isolate;
}

.case-study-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/wp-content/uploads/2025/10/neon-triangles-cyberpunk-wires-abstract.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
}

/* Full-page neon triangles background - extends above template to cover header */

.case-study-template::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("/wp-content/uploads/2025/10/neon-triangles-cyberpunk-wires-abstract.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    opacity: 0.18;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
}

.case-study-hero > * {
    position: relative;
    z-index: 1;
}

.case-hero {
    position: relative;
    padding: clamp(92px, 11vw, 136px) clamp(5%, 7vw, 9%);
    /* Glassmorphism: dark glass panel, no colorful gradients */
    background: rgba(6, 12, 30, 0.78);
    backdrop-filter: blur(12px);
    border-radius: clamp(32px, 7vw, 46px);
    border: 1px solid rgba(79, 240, 255, 0.22);
    box-shadow:
        0 42px 120px rgba(3, 8, 24, 0.5),
        inset 0 0 0 1px rgba(79, 240, 255, 0.08);
    color: var(--cs-color-ink);
    overflow: hidden;
}

.case-hero::after {
    content: none;
}

.case-hero > * {
    position: relative;
    z-index: 1;
}

.case-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: var(--cs-tracking-kicker);
    font-size: var(--cs-text-eyebrow);
    font-weight: var(--cs-weight-bold);
    color: var(--cs-color-cyan);
    margin: 0;
}

.case-hero__title {
    margin: var(--cs-space-2) 0;
    font-size: var(--cs-text-h1);
    line-height: var(--cs-leading-none);
    text-shadow: var(--cs-text-glow-title);
    color: var(--cs-color-ink);
}

.case-hero__intro {
    margin: 0 0 var(--cs-space-4);
    color: var(--cs-color-muted);
    max-width: var(--cs-max-prose);
    font-size: var(--cs-text-body-lg);
    line-height: var(--cs-leading-relaxed);
}

.case-hero__metrics {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cs-space-3);
}

.case-hero__metrics li {
    display: flex;
    flex-direction: column;
    gap: var(--cs-space-1);
    padding: var(--cs-space-3) var(--cs-space-4);
    border-radius: var(--cs-radius-2);
    background: var(--cs-grad-card);
    border: var(--cs-border-thin) solid var(--cs-cyan-15);
    min-width: clamp(160px, 30%, 220px);
    box-shadow: inset 0 0 0 1px var(--cs-magenta-12);
}

.case-hero__metrics li strong {
    font-size: var(--cs-text-body-lg);
    color: var(--cs-color-cyan);
}

.case-hero__metrics li span {
    font-size: var(--cs-text-small);
    color: var(--cs-color-muted);
}

.case-hero__actions .wp-block-button__link {
    box-shadow: 0 14px 38px rgba(79, 240, 255, 0.28);
}

.case-hero__actions .cta-button.is-outline .wp-block-button__link,
.case-hero__actions .cta-button.is-outline {
    background: rgba(8, 11, 22, 0.88) !important;
    border: 1px solid rgba(0, 229, 255, 0.52) !important;
    color: var(--cs-color-cyan) !important;
    box-shadow: none;
}

.case-hero__image {
    max-width: clamp(240px, 34vw, 420px);
    width: 100%;
    margin-left: auto;
}

.case-hero__image img {
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(4, 6, 14, 0.65);
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTENT SECTIONS
   Reusable section containers for case study body content
   ════════════════════════════════════════════════════════════════════════════ */

.case-section {
    width: min(1000px, 92vw);
    margin: 0 auto;
}

.case-section__title {
    margin: 0 0 var(--cs-space-3);
    font-size: var(--cs-text-h2);
    text-shadow: var(--cs-text-glow-sm);
}

.case-section__intro {
    margin: 0;
    color: var(--cs-color-muted);
    font-size: var(--cs-text-body-lg);
    line-height: var(--cs-leading-relaxed);
}

.case-section__list {
    margin: 0;
    padding-left: 1.2em;
    color: var(--cs-color-muted);
    line-height: var(--cs-leading-loose);
}

.case-section__list li {
    margin: 0.35em 0;
}

.case-section__list--metrics {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: var(--cs-space-3);
}

.case-section__list--metrics li {
    padding: var(--cs-space-4) var(--cs-space-5);
    border-radius: var(--cs-radius-2);
    background: var(--cs-grad-card);
    border: var(--cs-border-thin) solid var(--cs-cyan-15);
}

.case-section__list--metrics strong {
    color: var(--cs-color-magenta);
}

.case-mid-cta {
    background:
        linear-gradient(150deg, rgba(4, 12, 30, 0.9), rgba(8, 18, 40, 0.92));
    box-shadow: var(--cs-shadow-lg);
    color: var(--cs-color-ink);
}

.case-mid-cta__title {
    margin: 0;
    font-size: var(--cs-text-h3);
    color: var(--cs-color-ink);
}

.case-mid-cta__body {
    margin: 0;
    color: var(--cs-color-muted);
}

.case-section--quote blockquote {
    margin: 0;
    background:
        linear-gradient(135deg, rgba(10, 18, 44, 0.88), rgba(4, 10, 26, 0.86));
    border-radius: var(--cs-radius-3);
    padding: var(--cs-space-6);
    border-inline-start: var(--cs-border-accent) solid var(--cs-magenta-40);
    box-shadow: var(--cs-shadow-lg);
}

.case-section--quote blockquote p {
    font-size: var(--cs-text-body-lg);
    line-height: var(--cs-leading-relaxed);
    color: var(--cs-color-ink);
}

.case-section--quote blockquote cite {
    margin-top: var(--cs-space-3);
    display: block;
    font-size: var(--cs-text-small);
    color: var(--cs-color-muted);
}

.case-gallery {
    gap: var(--cs-space-4);
}

.case-gallery .wp-block-image img {
    border-radius: var(--cs-radius-2);
    box-shadow: var(--cs-shadow-lg);
}

.case-section--cta {
    text-align: center;
    background:
        linear-gradient(155deg, rgba(8, 14, 34, 0.88), rgba(3, 8, 22, 0.9));
    box-shadow: var(--cs-shadow-lg);
}

.case-section--cta .case-section__title {
    margin-bottom: var(--cs-space-2);
}

.case-section--cta .case-section__intro {
    margin-bottom: var(--cs-space-4);
}

.case-study-hero .wp-block-heading,
.case-study-hero .case-study-summary {
    max-width: min(760px, 100%);
}

.section-kicker {
    text-transform: uppercase;
    letter-spacing: var(--cs-tracking-kicker);
    font-size: var(--cs-text-eyebrow);
    font-weight: var(--cs-weight-bold);
    color: var(--cs-color-amber);
}

.case-study-panel__title,
.case-study-index__title {
    font-size: var(--cs-text-h2);
}

.case-study-title {
    font-family: var(--font-display);
    font-size: var(--cs-text-h1);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--cs-color-ink);
    text-shadow:
        0 0 36px rgba(79, 240, 255, 0.32),
        0 0 44px rgba(255, 116, 228, 0.26),
        0 0 34px rgba(255, 107, 0, 0.24);
    margin-bottom: clamp(16px, 3vw, 24px);
}

.case-study-summary {
    font-size: clamp(1.05rem, 2.8vw, 1.3rem);
    line-height: var(--cs-lh-body);
    color: var(--cs-color-muted);
    max-width: min(720px, 100%);
}

.case-study-hero .case-study-summary a {
    color: var(--cs-color-cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(79, 240, 255, 0.65);
    padding-bottom: 1px;
    font-weight: 600;
}

.case-study-hero .case-study-summary a:hover,
.case-study-hero .case-study-summary a:focus-visible {
    color: var(--cs-color-amber);
    border-bottom-color: rgba(255, 255, 255, 0.85);
}

/* 03-index.css */
/* ════════════════════════════════════════════════════════════════════════════
   INDEX & SPOTLIGHT
   Archive page layout, spotlight section, and featured case study grid
   ════════════════════════════════════════════════════════════════════════════ */

.case-study-index {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(48px, 8vw, 72px);
    padding-block: var(--cs-pad-block-deliverables);
    padding-inline: var(--cs-pad-inline);
    margin-inline: auto;
    max-width: min(1400px, 96vw);
    border-radius: var(--cs-radius-lg);
    /* Glassmorphism: dark glass panel */
    background: rgba(6, 12, 30, 0.78);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(79, 240, 255, 0.22);
    box-shadow:
        0 42px 120px rgba(3, 8, 24, 0.5),
        inset 0 0 0 1px rgba(79, 240, 255, 0.08);
    overflow: hidden;
    isolation: isolate;
}

/* Triangle pattern texture overlay */

.case-study-index::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/wp-content/uploads/2025/10/neon-triangles-cyberpunk-wires-abstract.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
}

/* Content z-index for index section */

.case-study-index > * {
    position: relative;
    z-index: 1;
}

.case-study-spotlight {
    /* Clean glassmorphism - no colorful gradients */
    background: rgba(6, 12, 30, 0.75);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-top: -2px;
    margin-bottom: -2px;
    border-top: 1px solid rgba(79, 240, 255, 0.18);
    border-bottom: 1px solid rgba(79, 240, 255, 0.18);
}

.case-study-index .wp-block-query {
    margin: 0;
}

.case-study-spotlight::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle, rgba(79, 240, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 116, 228, 0.08) 1px, transparent 1px);
    background-size: 46px 46px, 74px 74px;
    background-position: 0 0, 23px 23px;
    animation: shimmer 60s linear infinite;
    opacity: 0.35;
    pointer-events: none;
    z-index: 1;
}

.case-study-spotlight::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: clamp(72px, 16vw, 200px);
    background: linear-gradient(180deg, rgba(8, 12, 28, 0) 0%, rgba(8, 12, 28, 0.8) 100%);
    pointer-events: none;
    z-index: 2;
}

.case-study-spotlight > * {
    position: relative;
    z-index: 3;
}

@keyframes shimmer {
    from { transform: translate(0, 0); }
    to { transform: translate(50px, 50px); }
}

/* ════════════════════════════════════════════════════════════════════════════
   CASE STUDY CARDS
   Individual case study preview cards with hover effects and CTAs
   ════════════════════════════════════════════════════════════════════════════ */

.case-study-card {
    /* Clean dark glass card */
    background: rgba(8, 14, 34, 0.85);
    border: var(--cs-border-thin) solid var(--cs-cyan-22);
    position: relative;
    transition: all var(--cs-duration-slow) var(--cs-ease-in-out);
    box-shadow: var(--cs-shadow-panel);
    border-radius: var(--cs-radius-3);
}

.case-study-card__visual {
    position: relative;
    border-radius: var(--cs-radius-2);
    overflow: hidden;
    /* Subtle dark glass background */
    background: rgba(6, 14, 30, 0.9);
    box-shadow: var(--cs-shadow-md);
    min-height: clamp(220px, 32vw, 340px);
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.case-study-card__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(5, 12, 24, 0.12), transparent 44%);
    pointer-events: none;
}

.case-study-card__visual .case-study-card__logo {
    width: clamp(220px, 38vw, 360px);
    max-width: 100%;
    margin: 0;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cs-space-6);
    background: #ffffff;
    box-shadow: var(--cs-shadow-md);
}

.case-study-card__visual .case-study-card__logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(var(--cs-glow-cyan-md));
}

.case-study-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--cs-radius-4);
    background: linear-gradient(135deg, var(--cs-cyan-60), var(--cs-magenta-40), var(--cs-amber-30));
    z-index: -1;
    opacity: 0.35;
    filter: blur(14px);
    transition: opacity var(--cs-duration-slower) var(--cs-ease-out), filter var(--cs-duration-slower) var(--cs-ease-out);
}

.case-study-card:hover::before,
.case-study-card:focus-within::before {
    opacity: 0.75;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        filter: blur(8px);
        opacity: 0.9;
    }

    50% {
        filter: blur(12px);
        opacity: 1;
    }
}

.case-study-card h3,
.case-study-card h4 {
    color: var(--cs-color-ink);
    margin: 0;
    text-shadow: none;
}

.case-study-card p,
.case-study-card ul {
    color: var(--cs-color-muted);
    line-height: var(--cs-leading-relaxed);
    margin: 0;
    text-shadow: none;
}

.case-study-card ul {
    list-style: none;
    padding-left: 0;
}

.case-study-card ul li {
    margin-bottom: var(--cs-space-sm);
    padding-left: var(--cs-space-xl - 6px);
    position: relative;
}

.case-study-card ul li::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    width: var(--cs-space-sm);
    height: var(--cs-space-sm);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cs-cyan-90), var(--cs-magenta-40));
    box-shadow: var(--cs-glow-cyan-xs);
}

.case-study-card .wp-block-post-title a {
    color: var(--cs-color-ink);
    text-decoration: none;
    text-shadow: var(--cs-text-glow-sm);
    transition: color var(--cs-duration-fast) var(--cs-ease-out), text-shadow var(--cs-duration-fast) var(--cs-ease-out);
}

.case-study-card .wp-block-post-title a:hover,
.case-study-card .wp-block-post-title a:focus-visible {
    color: var(--cs-color-amber);
    text-shadow: 0 0 28px rgba(255, 0, 224, 0.32);
    outline: none;
}

.case-study-card .cta-button {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-md);
    padding: calc(var(--cs-space-md) + 1px) calc(var(--cs-space-2xl) - 2px);
    border-radius: var(--cs-radius-full);
    font-size: var(--cs-text-small);
    letter-spacing: var(--cs-tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    background: linear-gradient(120deg, var(--cs-color-magenta) 0%, var(--cs-color-cyan) 55%, #ffc400 100%);
    color: var(--cs-color-ink-contrast);
    border: 0;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        var(--cs-shadow-cyan),
        var(--cs-glow-magenta-md);
    transition: box-shadow var(--cs-duration-fast) var(--cs-ease-out), transform var(--cs-duration-fast) var(--cs-ease-out), letter-spacing var(--cs-duration-fast) var(--cs-ease-out);
}

.case-study-card .cta-button::after {
    content: "›";
    font-size: 1.15em;
    transition: transform var(--cs-duration-fast) var(--cs-ease-out);
}

.case-study-card .cta-button:hover,
.case-study-card .cta-button:focus-visible {
    letter-spacing: var(--cs-tracking-eyebrow);
    transform: translateX(2px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.24),
        var(--cs-glow-cyan-lg),
        var(--cs-glow-magenta-md);
    outline: none;
}

.case-study-card .cta-button:hover::after,
.case-study-card .cta-button:focus-visible::after {
    transform: translateX(6px);
}

.case-study-card .wp-block-group {
    position: relative;
    z-index: 2;
}

.case-study-card .wp-block-group > * + * {
    margin-top: var(--cs-space-3);
}

/* 04-single.css */
/* stylelint-disable no-descending-specificity -- intentional cascade layering for complex layouts */
/* ════════════════════════════════════════════════════════════════════════════
   DATA TABLES
   Comparison and specification tables within case studies
   ════════════════════════════════════════════════════════════════════════════ */

.case-study-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(11, 14, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--cs-radius-md);
    overflow: hidden;
}

.case-study-table td {
    padding: var(--cs-space-lg) calc(var(--cs-space-lg) + 2px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--cs-color-muted);
}

.case-study-table tr:last-child td {
    border-bottom: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   SINGLE CASE STUDY
   Full case study page layout and content styling
   ════════════════════════════════════════════════════════════════════════════ */

.single-case_study .single-article.container {
    width: min(920px, 94vw);
    margin: clamp(56px, 9vw, 88px) auto;
    padding: 0;
}

.single-case_study .single-article__inner {
    background:
        radial-gradient(140% 160% at 18% 12%, rgba(255, 116, 228, 0.18), transparent 68%),
        radial-gradient(150% 180% at 80% 14%, rgba(79, 240, 255, 0.18), transparent 72%),
        linear-gradient(172deg, rgba(6, 14, 34, 0.96), rgba(2, 6, 18, 0.88));
    border-radius: 36px;
    border: 1px solid rgba(79, 240, 255, 0.22);
    box-shadow:
        0 46px 120px rgba(3, 8, 24, 0.62),
        inset 0 0 0 1px rgba(255, 116, 228, 0.12),
        0 0 60px rgba(79, 240, 255, 0.25);
    padding: clamp(48px, 7vw, 76px) clamp(44px, 7vw, 84px);
    color: var(--cs-color-muted);
}

.single-case_study .single-article__inner .entry-content h2,
.single-case_study .single-article__inner .entry-content h3,
.single-case_study .single-article__inner .entry-content h4 {
    color: var(--cs-color-ink);
}

.single-case_study .single-article__inner .entry-content a {
    color: var(--cs-color-cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 196, 0, 0.5);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
}

.single-case_study .single-article__inner .entry-content a:hover,
.single-case_study .single-article__inner .entry-content a:focus-visible {
    color: var(--cs-color-amber);
    border-color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 0 18px rgba(79, 240, 255, 0.32);
    outline: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   COMMENT FORM
   Styled comment form for case study feedback
   ════════════════════════════════════════════════════════════════════════════ */

.comment-form--neon {
    margin-top: clamp(48px, 8vw, 72px);
    padding: clamp(36px, 6vw, 48px) clamp(32px, 5vw, 44px);
    border-radius: var(--cs-radius-lg);
    border: 1px solid rgba(79, 240, 255, 0.18);
    background:
        linear-gradient(170deg, rgba(4, 12, 30, 0.94), rgba(2, 6, 18, 0.86));
    box-shadow:
        0 34px 92px rgba(3, 8, 24, 0.55),
        inset 0 0 0 1px rgba(255, 0, 224, 0.12);
    color: var(--cs-color-muted);
}

.comment-form--neon label {
    display: block;
    font-weight: var(--cs-weight-semibold);
    letter-spacing: var(--cs-tracking-normal);
    color: var(--cs-color-ink);
    margin-bottom: var(--cs-space-2);
}

.comment-form--neon input[type="text"],
.comment-form--neon input[type="email"],
.comment-form--neon input[type="url"],
.comment-form--neon textarea {
    width: 100%;
    border-radius: var(--cs-radius-2);
    border: var(--cs-border-thin) solid var(--cs-cyan-30);
    background: var(--cs-surface-void);
    color: var(--cs-color-ink);
    padding: var(--cs-space-4) var(--cs-space-5);
    box-shadow:
        var(--cs-shadow-lg),
        inset 0 0 0 1px var(--cs-cyan-10);
    transition: border-color var(--cs-duration-fast) var(--cs-ease-out), box-shadow var(--cs-duration-fast) var(--cs-ease-out);
}

.comment-form--neon input[type="text"]:focus,
.comment-form--neon input[type="email"]:focus,
.comment-form--neon input[type="url"]:focus,
.comment-form--neon textarea:focus {
    border-color: var(--cs-magenta-40);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        var(--cs-glow-cyan-md);
    outline: none;
}

.comment-form--neon .submit,
.comment-form--neon .wp-block-button__link {
    margin-top: var(--cs-space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-2);
    padding: var(--cs-space-3) var(--cs-space-6);
    border-radius: var(--cs-radius-full);
    border: 0;
    font-weight: var(--cs-weight-bold);
    letter-spacing: var(--cs-tracking-wide);
    text-transform: uppercase;
    background: linear-gradient(120deg, var(--cs-color-magenta) 0%, var(--cs-color-cyan) 55%, #ffc400 100%);
    color: var(--cs-color-ink-contrast);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        var(--cs-glow-cyan-md);
    cursor: pointer;
    transition: transform var(--cs-duration-fast) var(--cs-ease-out), box-shadow var(--cs-duration-fast) var(--cs-ease-out);
}

.comment-form--neon .submit:hover,
.comment-form--neon .submit:focus-visible,
.comment-form--neon .wp-block-button__link:hover,
.comment-form--neon .wp-block-button__link:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.24),
        0 22px 64px rgba(0, 229, 255, 0.4);
    outline: none;
}

.comment-form--neon .comment-notes,
.comment-form--neon .logged-in-as {
    color: var(--cs-color-muted);
}

.case-study-table td:first-child {
    font-weight: var(--cs-weight-semibold);
    color: var(--cs-color-cyan);
    text-transform: uppercase;
    font-size: var(--cs-text-small);
    letter-spacing: var(--cs-tracking-wider);
}

.case-study-table td:nth-child(2) {
    color: var(--cs-color-muted);
    font-weight: var(--cs-weight-medium);
}

.case-study-table td:nth-child(3) {
    font-weight: var(--cs-weight-semibold);
}

.case-study-hero .wp-block-heading,
.case-study-hero h2 {
    text-shadow: var(--cs-text-glow-title);
    color: var(--cs-color-ink);
}

.case-study-hero .case-study-summary {
    color: var(--cs-color-muted);
}

.case-study-hero__grid {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.case-study-hero__content,
.case-study-hero__media {
    display: grid;
    gap: clamp(14px, 3vw, 22px);
}

.case-study-hero__content {
    align-content: start;
}

.case-study-hero__media {
    align-content: start;
    justify-items: end;
}

.case-study-hero__visual {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: end;
    gap: clamp(16px, 2.6vw, 22px);
}

/* 05-visual.css */
/* stylelint-disable no-descending-specificity -- intentional cascade layering for complex layouts */
/* ═══════════════════════════════════════════════════════════════════════════
   INLINE SNAPSHOT - Images-First Layout
   The snapshot card flows naturally below images, letting visuals be the hero
   ═══════════════════════════════════════════════════════════════════════════ */

.case-study-hero__visual .case-study-hero__image {
    position: relative;
    z-index: 1;
}

/* Snapshot card - inline below images */

.case-study-hero__visual .case-study-snapshot {
    position: relative;
    width: 100%;
    z-index: 2;
    margin-top: clamp(12px, 2vw, 18px);

    /* Clean elevation without overwhelming */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 12px 28px rgba(3, 8, 24, 0.35),
        0 0 0 1px rgba(79, 240, 255, 0.12);

    /* Smooth transitions for hover */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

/* Subtle hover lift */

.case-study-hero__visual .case-study-snapshot:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18),
        0 16px 36px rgba(3, 8, 24, 0.4),
        0 0 0 1px rgba(79, 240, 255, 0.2);
}

/* Remove anchor decorations - no longer needed for inline layout */

.case-study-hero__visual .case-study-snapshot::before,
.case-study-hero__visual .case-study-snapshot::after {
    display: none;
}

/* Secondary image spacing */

.case-study-hero__visual .case-study-hero__image--secondary {
    margin-bottom: 0;
}

.case-study-hero .case-study-hero__result-card {
    background: linear-gradient(155deg, rgba(6, 12, 30, 0.9), rgba(10, 20, 48, 0.9));
    border-color: rgba(79, 240, 255, 0.26);
    box-shadow:
        0 26px 80px rgba(3, 8, 24, 0.68),
        inset 0 0 0 1px rgba(255, 116, 228, 0.12);
    backdrop-filter: blur(16px);
    color: var(--cs-color-ink);
    margin-top: clamp(4px, 0.8vw, 16px);
    padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.6vw, 26px);
    justify-self: stretch;
}

.case-study-result__label {
    margin: 0 0 var(--cs-space-1);
    font-size: var(--cs-text-eyebrow);
    letter-spacing: var(--cs-tracking-eyebrow);
    text-transform: uppercase;
    font-weight: var(--cs-weight-bold);
    color: var(--cs-color-cyan);
}

.case-study-result__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--cs-space-3);
    font-size: var(--cs-text-small);
    color: var(--cs-color-muted);
}

.case-study-hero .case-study-hero__result-card .case-study-result__points a {
    display: inline;
    color: inherit;
    text-decoration-color: rgba(79, 240, 255, 0.7);
    text-underline-offset: 0.15em;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    letter-spacing: normal;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    line-height: 1.45;
}

.case-study-result__points li {
    position: relative;
    line-height: var(--cs-lh-tight);
    background: var(--cs-color-surface);
    border-radius: var(--cs-radius-2);
    padding: var(--cs-space-md) var(--cs-space-lg) var(--cs-space-md) calc(var(--cs-space-xl) + 12px);
    border: var(--cs-border-thin) solid var(--cs-cyan-22);
    box-shadow: var(--cs-shadow-lg);
    word-break: normal;
    overflow-wrap: anywhere;
}

.case-study-result__points li::before {
    content: "";
    position: absolute;
    left: var(--cs-space-3);
    top: 1.05em;
    width: var(--cs-space-3);
    height: var(--cs-space-3);
    border-radius: var(--cs-radius-full);
    background: linear-gradient(135deg, var(--cs-cyan-90), var(--cs-magenta-40));
    box-shadow: var(--cs-glow-cyan-sm);
}

.case-study-result__points li span {
    display: inline;
}

.case-study-result__footer {
    margin: var(--cs-space-2) 0 0;
    font-size: var(--cs-text-small);
    color: var(--cs-color-muted);
}

.case-study-result__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-1);
    padding: var(--cs-space-1) var(--cs-space-3);
    border-radius: var(--cs-radius-full);
    background: var(--cs-cyan-15);
    border: var(--cs-border-thin) solid var(--cs-cyan-22);
    color: var(--cs-color-cyan);
    text-transform: uppercase;
    letter-spacing: var(--cs-tracking-eyebrow);
    font-size: var(--cs-text-xs);
    font-weight: var(--cs-weight-semibold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAUNCH SNAPSHOT - Icon-driven feature pills with hover states
   ═══════════════════════════════════════════════════════════════════════════ */

/* Snapshot Card Container */

.case-study-snapshot {
    position: relative;
    background: linear-gradient(155deg, rgba(6, 12, 30, 0.94), rgba(10, 20, 48, 0.92));
    border: var(--cs-border-thin) solid rgba(79, 240, 255, 0.28);
    border-radius: var(--cs-radius-3);
    box-shadow: 0 32px 90px rgba(3, 8, 24, 0.7), inset 0 0 0 1px rgba(255, 116, 228, 0.1);
    backdrop-filter: var(--cs-blur-lg);
    overflow: visible; /* Allow anchor point to extend outside */
}

/* Header with Live badge */

.snapshot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cs-space-4) var(--cs-space-5);
    border-bottom: var(--cs-border-thin) solid var(--cs-cyan-15);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.06), transparent);
}

.snapshot-label {
    font-size: var(--cs-text-eyebrow);
    font-weight: var(--cs-weight-bold);
    letter-spacing: var(--cs-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cs-color-cyan);
}

.snapshot-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-1);
    padding: var(--cs-space-1) var(--cs-space-3);
    border-radius: var(--cs-radius-full);
    background: linear-gradient(135deg, rgba(79, 240, 255, 0.2), rgba(79, 240, 255, 0.08));
    border: var(--cs-border-thin) solid var(--cs-cyan-30);
    color: var(--cs-color-cyan);
    font-size: var(--cs-text-xs);
    font-weight: var(--cs-weight-semibold);
    text-transform: uppercase;
}

.snapshot-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--cs-radius-full);
    background: var(--cs-color-cyan);
    box-shadow: 0 0 8px var(--cs-color-cyan);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.85);
    }
}

/* Feature Pills */

.snapshot-features {
    display: grid;
    gap: var(--cs-space-2);
    padding: var(--cs-space-4);
}

.snapshot-feature {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--cs-space-3);
    padding: var(--cs-space-3) var(--cs-space-4);
    border-radius: var(--cs-radius-2);
    background: var(--cs-surface-card);
    border: var(--cs-border-thin) solid var(--cs-cyan-10);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.snapshot-feature:hover {
    background: var(--cs-surface-card-hover);
    border-color: var(--cs-cyan-30);
    box-shadow: var(--cs-glow-cyan-sm);
    transform: translateX(4px);
}

.snapshot-feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--cs-radius-1);
    background: linear-gradient(135deg, var(--cs-cyan-15), var(--cs-magenta-12));
    color: var(--cs-color-cyan);
}

.snapshot-feature__icon svg {
    width: 20px;
    height: 20px;
}

.snapshot-feature__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.snapshot-feature__title {
    font-size: var(--cs-text-small);
    font-weight: var(--cs-weight-semibold);
    color: var(--cs-color-ink);
}

.snapshot-feature__desc {
    font-size: var(--cs-text-xs);
    color: var(--cs-color-muted);
}

.snapshot-feature__arrow {
    color: var(--cs-color-cyan);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s;
}

.snapshot-feature:hover .snapshot-feature__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Footer */

.snapshot-footer {
    padding: var(--cs-space-3) var(--cs-space-5);
    background: linear-gradient(180deg, transparent, rgba(0, 229, 255, 0.04));
    border-top: var(--cs-border-thin) solid var(--cs-cyan-10);
}

.snapshot-milestone {
    display: flex;
    align-items: center;
    gap: var(--cs-space-3);
    flex-wrap: wrap;
}

.snapshot-milestone__badge {
    padding: var(--cs-space-1) var(--cs-space-3);
    border-radius: var(--cs-radius-full);
    background: var(--cs-amber-15);
    border: var(--cs-border-thin) solid var(--cs-amber-22);
    color: var(--cs-color-amber);
    font-size: var(--cs-text-xs);
    font-weight: var(--cs-weight-semibold);
    text-transform: uppercase;
}

.snapshot-milestone__text {
    font-size: var(--cs-text-small);
    color: var(--cs-color-muted);
}

.case-study-hero__metrics-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: clamp(14px, 2.8vw, 22px);
    list-style: none;
    margin: 0;
    padding: 0;
    justify-items: center;
}

.case-study-metric {
    display: grid;
    gap: var(--cs-space-1);
    padding: var(--cs-space-3) var(--cs-space-4);
    border-radius: var(--cs-radius-2);
    background: var(--cs-surface-deep);
    border: var(--cs-border-thin) solid var(--cs-cyan-22);
    box-shadow: var(--cs-shadow-lg);
    backdrop-filter: var(--cs-blur-md);
    color: var(--cs-color-ink);
}

/* Third stat card centered on second row (pyramid focal point) */

.case-study-metric:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% + var(--cs-space-5));
    justify-self: center;
}

.case-study-metric--lead {
    padding: clamp(16px, 2.6vw, 22px) clamp(20px, 3vw, 28px);
    background: linear-gradient(155deg, rgba(6, 12, 30, 0.92), rgba(12, 22, 48, 0.88));
    border-color: rgba(79, 240, 255, 0.32);
    box-shadow:
        0 30px 80px rgba(6, 14, 36, 0.58),
        inset 0 0 0 1px rgba(255, 116, 228, 0.12);
}

.case-study-metric__value {
    margin: 0;
    font-weight: var(--cs-weight-bold);
    font-size: var(--cs-text-h3);
    letter-spacing: var(--cs-tracking-wide);
    text-transform: uppercase;
}

.case-study-metric__label {
    margin: 0;
    font-size: var(--cs-text-small);
    line-height: var(--cs-leading-snug);
    color: var(--cs-color-muted);
}

.case-study-hero__social-proof {
    border-top: 1px solid rgba(79, 240, 255, 0.18);
    padding-top: clamp(12px, 2.4vw, 18px);
}

.case-study-social-proof__logos {
    margin: 0;
    font-size: var(--cs-text-eyebrow);
    letter-spacing: var(--cs-tracking-kicker);
    text-transform: uppercase;
    line-height: var(--cs-leading-normal);
    color: var(--cs-color-ink-primary);
}

.case-study-social-proof__logos a {
    text-transform: none;
    letter-spacing: var(--cs-tracking-normal);
    font-weight: var(--cs-weight-semibold);
    color: var(--cs-color-cyan);
    text-decoration: none;
    border-bottom: var(--cs-border-thin) solid var(--cs-cyan-45);
    padding-bottom: 1px;
}

.case-study-social-proof__logos a:hover,
.case-study-social-proof__logos a:focus-visible {
    color: var(--cs-color-amber);
    border-bottom-color: rgba(255, 255, 255, 0.85);
}

.case-study-social-proof__quote {
    margin: 0;
    font-size: var(--cs-text-body-lg);
    line-height: var(--cs-leading-relaxed);
    color: var(--cs-color-muted);
}

.case-study-social-proof__cite {
    display: inline-block;
    margin-left: var(--cs-space-1);
    color: var(--cs-color-ink);
    font-weight: var(--cs-weight-semibold);
}

.case-study-scroll-link {
    margin: 0;
    font-size: var(--cs-text-eyebrow);
    letter-spacing: var(--cs-tracking-kicker);
    text-transform: uppercase;
    color: var(--cs-color-muted);
    text-align: center;
}

.case-study-scroll-link a {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-2);
    color: inherit;
    text-decoration: none;
    padding: var(--cs-space-md) var(--cs-space-3xl);
    border-radius: var(--cs-radius-full);
    border: var(--cs-border-thin) solid var(--cs-cyan-22);
    background: var(--cs-surface-deep);
    box-shadow: var(--cs-shadow-soft);
    transition: color var(--cs-duration-fast) var(--cs-ease-out), border-color var(--cs-duration-fast) var(--cs-ease-out), transform var(--cs-duration-fast) var(--cs-ease-out), box-shadow var(--cs-duration-fast) var(--cs-ease-out);
}

.case-study-scroll-link a:hover,
.case-study-scroll-link a:focus-visible {
    color: var(--cs-color-ink);
    border-color: var(--cs-cyan-45);
    transform: translateY(-2px);
    box-shadow: var(--cs-glow-cyan-lg);
    outline: none;
}

.case-study-hero__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: clamp(12px, 2.6vw, 18px);
    align-items: center;
}

/* 06-panels.css */
/* ════════════════════════════════════════════════════════════════════════════
   CTA ACTION BUTTONS
   Primary (gradient) and secondary (underline) call-to-action styles
   ════════════════════════════════════════════════════════════════════════════ */

.case-study-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cs-space-2);
    border-radius: var(--cs-radius-2);
    font-size: var(--cs-text-body-lg);
    font-weight: var(--cs-weight-semibold);
    padding: var(--cs-space-3) var(--cs-space-6);
    text-decoration: none;
    letter-spacing: var(--cs-tracking-wide);
    transition: transform var(--cs-duration-fast) var(--cs-ease-out), box-shadow var(--cs-duration-fast) var(--cs-ease-out), background var(--cs-duration-fast) var(--cs-ease-out), color var(--cs-duration-fast) var(--cs-ease-out), border-color var(--cs-duration-fast) var(--cs-ease-out);
}

.case-study-action--primary {
    background: rgba(0, 229, 255, 0.15);
    color: var(--cs-color-cyan);
    border: 1px solid rgba(0, 229, 255, 0.5);
    box-shadow:
        0 0 20px rgba(0, 229, 255, 0.15),
        inset 0 0 0 1px rgba(0, 229, 255, 0.1);
}

.case-study-action--primary:hover,
.case-study-action--primary:focus-visible {
    background: rgba(0, 229, 255, 0.25);
    color: var(--cs-color-ink);
    border-color: rgba(0, 229, 255, 0.7);
    transform: translateY(-2px);
    box-shadow:
        0 0 32px rgba(0, 229, 255, 0.28),
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(0, 229, 255, 0.2);
    outline: none;
}

.case-study-action--primary span:last-child {
    font-size: 1rem;
}

.case-study-action--secondary {
    color: var(--cs-color-cyan);
    border-bottom: var(--cs-border-regular) solid rgba(0, 229, 255, 0.4);
    padding-inline: 0;
    padding-block: var(--cs-space-2);
    align-self: center;
    width: auto;
    background: transparent;
}

.case-study-action--secondary:hover,
.case-study-action--secondary:focus-visible {
    color: var(--cs-color-ink);
    border-bottom-color: var(--cs-color-cyan);
    transform: translateY(-1px);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
    outline: none;
}

.case-study-index__panel {
    position: relative;
    display: grid;
    gap: clamp(28px, 5vw, 44px);
    padding: var(--cs-pad-block-lg) var(--cs-pad-inline) var(--cs-pad-block-xl);
    border-radius: var(--cs-radius-lg);
    border: 1px solid rgba(79, 240, 255, 0.22);
    /* Glassmorphism: dark glass panel, no colorful gradients */
    background: rgba(6, 12, 30, 0.78);
    backdrop-filter: blur(12px);
    box-shadow:
        0 42px 120px rgba(3, 8, 24, 0.5),
        inset 0 0 0 1px rgba(79, 240, 255, 0.08);
    overflow: hidden;
    color: var(--cs-color-ink);
    isolation: isolate;
}

.case-study-index__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/wp-content/uploads/2025/10/neon-triangles-cyberpunk-wires-abstract.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
}

.case-study-index__panel > * {
    position: relative;
    z-index: 1;
}

.case-study-index__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 28px);
}

.case-study-index__intro {
    display: grid;
    gap: clamp(12px, 2.4vw, 18px);
    max-width: min(640px, 100%);
}

.case-study-index__summary {
    color: var(--cs-color-muted);
    max-width: min(640px, 100%);
}

.case-study-index__meta {
    margin: 0;
    align-self: flex-start;
}

.case-study-index__list {
    position: relative;
}

.case-study-query {
    margin: 0;
}

.case-study-index__panel .case-study-index__empty {
    background: var(--cs-surface-deep);
    border-color: var(--cs-cyan-30);
    box-shadow: inset 0 0 0 1px var(--cs-magenta-12);
    color: var(--cs-color-muted);
}

.case-study-index__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cs-space-4);
    color: var(--cs-color-muted);
}

.case-study-index__note {
    margin: 0;
    font-size: clamp(0.9rem, 1.6vw, 1rem);
}

.case-study-index__cta {
    margin: 0;
    display: flex;
    align-items: center;
}

.case-study-index__cta .case-study-action {
    display: inline-flex;
}

.case-study-hero__image {
    max-width: clamp(240px, 34vw, 420px);
    width: 100%;
    margin-left: auto;
}

.case-study-hero__image img {
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(4, 6, 14, 0.65);
    width: 100%;
    height: auto;
}

/* Focus states for image links */

.case-study-hero__visual figure a:focus-visible,
.case-study-deliverables figure a:focus-visible,
.case-study-panel figure a:focus-visible {
    outline: var(--cs-focus-outline);
    outline-offset: 4px;
    border-radius: var(--cs-radius-2);
}

.case-study-hero__visual figure a:focus-visible img,
.case-study-deliverables figure a:focus-visible img,
.case-study-panel figure a:focus-visible img {
    box-shadow: var(--cs-glow-cyan-md), var(--cs-shadow-lg);
}

/* Global focus visible utility for missed elements */

.case-study-template a:focus-visible:not([class*="action"], [class*="button"], [class*="chip"]) {
    outline: var(--cs-focus-outline);
    outline-offset: 2px;
}

.single-case-study .case-study-body .wp-block-group,
.single-case-study .case-study-body .wp-block-columns,
.single-case-study .case-study-body .wp-block-group.alignwide {
    margin-top: 0;
}

.single-case-study .case-study-body > * + * {
    margin-top: clamp(48px, 8vw, 72px);
}

.single-case-study .case-study-body .wp-block-post-content,
.single-case-study .case-study-body .entry-content {
    position: relative;
    padding: clamp(40px, 6vw, 64px);
    border-radius: 28px;
    /* Glassmorphism: dark glass panel, no colorful gradients */
    background: rgba(6, 12, 30, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(79, 240, 255, 0.15);
    box-shadow:
        0 40px 110px rgba(0, 8, 24, 0.4),
        inset 0 0 0 1px rgba(79, 240, 255, 0.06);
    color: var(--cs-color-ink);
}

.single-case-study .case-study-body .wp-block-post-content > *,
.single-case-study .case-study-body .entry-content > * {
    position: relative;
    z-index: 1;
}

.case-study-cta-stack .wp-block-button__link {
    background: rgba(0, 229, 255, 0.15) !important;
    color: var(--cs-color-cyan) !important;
    border: 1px solid rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
    text-shadow: none;
}

.case-study-cta-stack .wp-block-button__link.is-outline {
    color: var(--cs-color-cyan);
    border: 1px solid rgba(0, 229, 255, 0.4) !important;
    background: rgba(6, 12, 30, 0.6) !important;
    box-shadow: none;
}

.case-study-cta-stack .wp-block-button__link:hover,
.case-study-cta-stack .wp-block-button__link:focus-visible {
    background: rgba(0, 229, 255, 0.25) !important;
    transform: translateY(-1px);
    box-shadow: 0 0 32px rgba(0, 229, 255, 0.28);
    color: var(--cs-color-ink) !important;
    border-color: rgba(0, 229, 255, 0.7);
}

.case-study-template {
    position: relative;
    padding: 0;
    width: 100%;
    max-width: none;
    overflow: hidden;
    /* Let body background (vignette + neon grid) show through */
    background: transparent;
}

main.site-content.case-study-template {
    padding-top: calc(var(--mcd-admin-bar-offset, 0px));
    background: transparent;
}

.case-study-frame {
    width: 100%;
    background: transparent;
}

/* 07-responsive.css */
/* stylelint-disable no-descending-specificity -- intentional cascade layering for complex layouts */
/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Mobile-first responsive adjustments for all case study components
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .case-study-spotlight .wp-block-columns {
        flex-direction: column;
        gap: var(--cs-space-6);
    }

    .case-study-hero {
        padding: clamp(68px, 18vw, 98px) clamp(8vw, 11vw, 13vw);
        gap: clamp(28px, 10vw, 40px);
    }

    .case-study-hero__content,
    .case-study-hero__media {
        justify-items: stretch;
    }

    .case-study-hero__visual {
        justify-items: stretch;
        gap: var(--cs-space-5);
    }

    /* Tablet snapshot adjustments */

    .case-study-hero__visual .case-study-snapshot {
        margin-top: var(--cs-space-4);
    }

    .case-study-hero__result-card {
        margin-top: var(--cs-space-3);
    }

    .case-study-hero__metrics-list {
        grid-template-columns: 1fr;
        gap: var(--cs-space-4);
    }

    .case-study-metric:nth-child(3) {
        grid-column: auto;
        max-width: 100%;
    }

    .case-study-hero__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .case-study-action {
        justify-content: center;
        width: 100%;
    }

    .case-study-index__panel {
        padding: clamp(48px, 18vw, 72px) clamp(8vw, 12vw, 14vw);
        gap: clamp(24px, 8vw, 32px);
    }

    .case-study-index__header {
        gap: clamp(18px, 6vw, 26px);
    }

    .case-study-index__footer {
        justify-content: center;
        text-align: center;
    }

    .case-study-index__note {
        width: 100%;
    }

    .case-study-index__cta {
        width: 100%;
        justify-content: center;
    }

    .case-study-index__cta .case-study-action {
        width: 100%;
    }

    .case-study-hero::after {
        display: none;
    }

    .case-study-hero::before {
        background-size: clamp(420px, 120vw, 780px);
        background-position: center;
        opacity: 0.36;
    }

    .case-hero {
        padding: clamp(72px, 16vw, 96px) clamp(8vw, 10vw, 12vw);
    }

    .case-hero__metrics li {
        min-width: 100%;
    }

    .case-hero__image {
        margin-top: var(--cs-space-6);
        max-width: 100%;
    }

    .case-study-spotlight .case-study-card,
    .case-study-index .case-study-card {
        padding: 40px 26px;
    }

    .case-study-query .wp-block-post-template {
        gap: var(--cs-space-7);
    }

    .case-study-hero__image {
        margin-top: 0;
        margin-left: 0;
        max-width: 100%;
    }

    .case-study-index {
        gap: clamp(32px, 12vw, 48px);
    }

    .case-study-card {
        width: min(520px, 100%);
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    /* Mobile snapshot - compact styling */

    .snapshot-features {
        padding: var(--cs-space-3);
    }

    .snapshot-feature {
        padding: var(--cs-space-2) var(--cs-space-3);
    }

    .snapshot-feature__icon {
        width: 36px;
        height: 36px;
    }

    /* Hide connector line on mobile */

    .case-study-hero__visual .case-study-hero__image--secondary::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Disable all animations and transitions for motion-sensitive users */

    .case-study-card,
    .case-study-card::before,
    .case-study-spotlight::before,
    .case-study-action,
    .case-study-action::after,
    .case-study-chip a,
    .case-study-scroll-link a,
    .case-study-performance-card__link,
    .case-study-cta-stack .wp-block-button__link,
    .comment-form--neon .submit,
    .case-study-hero .case-study-summary a,
    .case-study-deliverables a {
        animation: none;
        transition: none;
    }

    /* Keep essential visual changes but remove motion */

    .case-study-card:hover,
    .case-study-action:hover,
    .case-study-action--primary:hover,
    .case-study-action--secondary:hover {
        transform: none;
    }

    /* Ensure focus states remain visible without animation */

    *:focus-visible {
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION SPACING OVERRIDES
   Higher specificity to override .case-study-template .wp-block-group reset
   ════════════════════════════════════════════════════════════════════════════ */

.case-study-template .case-study-deliverables.wp-block-group {
    margin-top: var(--cs-space-section);
}

.case-study-template .case-study-index.wp-block-group {
    margin-top: var(--cs-space-section);
}

/* 08-deliverables.css */
/* stylelint-disable no-descending-specificity -- intentional cascade layering for complex layouts */
/* CTA inside deliverables */

.case-study-panel__cta {
    margin-top: var(--cs-space-2);
}

.case-study-panel__cta .case-study-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cs-space-3) var(--cs-space-4);
    border-radius: var(--cs-radius-2);
    gap: var(--cs-space-2);
    position: relative;
    min-height: 44px;
    background: var(--cs-grad-cta);
    border: var(--cs-border-thin) solid var(--cs-cyan-30);
    color: var(--cs-color-ink-primary);
    box-shadow:
        var(--cs-glow-cyan-sm),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    transition: transform var(--cs-duration-fast) var(--cs-ease-out), box-shadow var(--cs-duration-fast) var(--cs-ease-out), background-color var(--cs-duration-fast) var(--cs-ease-out), color var(--cs-duration-fast) var(--cs-ease-out), border-color var(--cs-duration-fast) var(--cs-ease-out);
}

.case-study-panel__cta .case-study-action:hover,
.case-study-panel__cta .case-study-action:focus-visible {
    background: linear-gradient(135deg, var(--cs-cyan-22), var(--cs-cyan-10));
    color: var(--cs-color-ink);
    border-color: var(--cs-cyan-60);
    transform: translateY(-1px);
    box-shadow:
        var(--cs-glow-cyan-md),
        0 0 0 2px var(--cs-cyan-15);
    outline: none;
}

.case-study-panel__cta .case-study-action:active {
    transform: translateY(0);
    box-shadow:
        var(--cs-glow-cyan-sm),
        0 0 0 1px var(--cs-cyan-22);
}

.case-study-panel__cta .case-study-action::after {
    content: "›";
    display: inline-block;
    font-size: var(--cs-text-body);
    line-height: var(--cs-leading-none);
    transition: transform var(--cs-duration-fast) var(--cs-ease-out);
    color: inherit;
}

.case-study-panel__cta .case-study-action:hover::after,
.case-study-panel__cta .case-study-action:focus-visible::after {
    transform: translateX(3px);
}

/* Base panel styles - consistent section spacing */

.case-study-panel {
    position: relative;
    padding-block: var(--cs-space-section);
    padding-inline: var(--cs-pad-inline);
}

.case-study-panel + .case-study-panel {
    margin-top: var(--cs-space-5);
}

/* Deliverables & impact section - Glassmorphism panel with triangle texture */

.case-study-deliverables {
    scroll-margin-top: clamp(80px, 12vh, 120px);
    padding-block: var(--cs-pad-block-deliverables);
    padding-top: clamp(64px, 8vw, 96px);
    padding-inline: var(--cs-pad-inline);
    position: relative;
    margin-inline: auto;
    max-width: min(1400px, 96vw);
    border-radius: var(--cs-radius-lg);
    /* Glassmorphism: dark glass panel */
    background: rgba(6, 12, 30, 0.78);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(79, 240, 255, 0.22);
    box-shadow:
        0 42px 120px rgba(3, 8, 24, 0.5),
        inset 0 0 0 1px rgba(79, 240, 255, 0.08);
    overflow: hidden;
    isolation: isolate;
}

/* Triangle pattern texture overlay */

.case-study-deliverables::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/wp-content/uploads/2025/10/neon-triangles-cyberpunk-wires-abstract.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
}

.case-study-deliverables h2,
.case-study-deliverables .wp-block-heading {
    scroll-margin-top: inherit;
}

.case-study-deliverables > p:first-of-type {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(6, 12, 30, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: var(--cs-color-cyan);
    font-weight: var(--cs-weight-semibold);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.15);
}

.case-study-deliverables h2 {
    text-shadow: none;
}

.case-study-deliverables .wp-block-columns {
    align-items: flex-start;
    gap: clamp(32px, 3vw, 56px);
}

.case-study-deliverables .wp-block-column:first-child {
    max-width: 640px;
}

.case-study-deliverables figure {
    margin: 0;
}

.case-study-panel__caption {
    margin-top: var(--cs-space-1);
    font-size: var(--cs-text-caption);
    color: var(--cs-color-muted);
    text-align: left;
}

.case-study-panel__intro {
    margin-bottom: var(--cs-space-2);
}

.case-study-deliverables .case-study-panel__intro a,
.case-study-deliverables .case-study-panel__list a,
.case-study-deliverables .case-study-panel__caption a {
    color: var(--cs-color-cyan);
    text-decoration: none;
    transition: color var(--cs-duration-fast) var(--cs-ease-out), text-decoration-color var(--cs-duration-fast) var(--cs-ease-out), box-shadow var(--cs-duration-fast) var(--cs-ease-out), background-color var(--cs-duration-fast) var(--cs-ease-out);
    font-weight: var(--cs-weight-semibold);
}

.case-study-deliverables .case-study-panel__intro a:hover,
.case-study-deliverables .case-study-panel__list a:hover,
.case-study-deliverables .case-study-panel__caption a:hover {
    color: var(--cs-color-ink);
    background: var(--cs-cyan-10);
    border-radius: var(--cs-radius-1);
}

.case-study-deliverables .case-study-panel__intro a:focus-visible,
.case-study-deliverables .case-study-panel__list a:focus-visible,
.case-study-deliverables .case-study-panel__caption a:focus-visible {
    outline: var(--cs-focus-outline);
    outline-offset: 2px;
    background: var(--cs-cyan-10);
    box-shadow: var(--cs-focus-shadow);
    border-radius: var(--cs-radius-1);
    text-decoration-color: var(--cs-cyan-90);
}

.case-study-deliverables .case-study-panel__list strong {
    color: var(--cs-color-ink);
}

.case-study-deliverables .case-study-panel__intro,
.case-study-deliverables .case-study-panel__list {
    color: var(--cs-color-ink-primary);
}

.case-study-panel__list {
    line-height: var(--cs-leading-relaxed);
    margin-top: var(--cs-space-3);
}

.case-study-panel__list li {
    padding: var(--cs-space-3) 0 var(--cs-space-4);
    border-bottom: var(--cs-border-thin) solid var(--cs-cyan-10);
}

.case-study-panel__list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.case-study-panel__list li strong {
    display: block;
    margin-bottom: var(--cs-space-1);
    font-size: var(--cs-text-body);
}

.case-study-panel__nav {
    margin-top: var(--cs-space-5);
    gap: var(--cs-space-3);
}

.case-study-panel__nav-item {
    margin: 0;
}

@media (max-width: 767px) {
    .case-study-hero {
        gap: var(--cs-gap-hero-mobile);
    }

    .case-study-summary,
    .case-study-hero__proof {
        max-width: var(--cs-max-line-mobile);
    }

    .case-study-hero__proof {
        margin-top: var(--cs-space-1);
        line-height: var(--cs-leading-normal);
    }

    .case-study-hero__metrics-list {
        gap: var(--cs-space-3);
    }

    .case-study-hero__visual {
        gap: var(--cs-space-4);
    }

    .case-study-panel__nav {
        justify-content: center;
        text-align: center;
    }

    .case-study-panel__nav .case-study-action {
        width: 100%;
        justify-content: center;
        padding-block: 12px;
    }

    .case-study-performance {
        padding-inline: var(--cs-pad-inline-mobile);
    }
}

.case-study-performance__metrics {
    max-width: var(--cs-max-line-caption);
}

/* 09-performance.css */
/* ════════════════════════════════════════════════════════════════════════════
   PERFORMANCE METRICS CARD
   Styled card component for displaying GTmetrix/Lighthouse metrics
   ════════════════════════════════════════════════════════════════════════════ */

/* Performance section - Glassmorphism panel with triangle texture */

.case-study-performance {
    position: relative;
    padding-block: var(--cs-pad-block-deliverables);
    padding-inline: var(--cs-pad-inline);
    margin-inline: auto;
    max-width: min(1400px, 96vw);
    border-radius: var(--cs-radius-lg);
    /* Glassmorphism: dark glass panel */
    background: rgba(6, 12, 30, 0.78);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(79, 240, 255, 0.22);
    box-shadow:
        0 42px 120px rgba(3, 8, 24, 0.5),
        inset 0 0 0 1px rgba(79, 240, 255, 0.08);
    overflow: hidden;
    isolation: isolate;
}

/* Triangle pattern texture overlay */

.case-study-performance::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/wp-content/uploads/2025/10/neon-triangles-cyberpunk-wires-abstract.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
}

/* Content z-index for performance section */

.case-study-performance > * {
    position: relative;
    z-index: 1;
}

.case-study-performance-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--cs-space-5);
    padding: var(--cs-space-5) var(--cs-space-6);
    border-radius: var(--cs-radius-3);
    background: var(--cs-grad-card);
    border: var(--cs-border-thin) solid var(--cs-cyan-22);
    box-shadow: var(--cs-shadow-lg);
}

.case-study-performance-card__grade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    padding: var(--cs-space-4);
    border-radius: var(--cs-radius-2);
    background: linear-gradient(135deg, var(--cs-cyan-15), var(--cs-cyan-5));
    border: var(--cs-border-thin) solid var(--cs-cyan-30);
}

.case-study-performance-card__grade-letter {
    font-size: var(--cs-text-display);
    font-weight: var(--cs-weight-bold);
    color: var(--cs-color-cyan);
    line-height: var(--cs-leading-none);
    text-shadow: var(--cs-text-glow-sm);
}

.case-study-performance-card__grade-score {
    font-size: var(--cs-text-small);
    color: var(--cs-color-muted);
    margin-top: var(--cs-space-1);
}

.case-study-performance-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cs-space-3);
}

.case-study-performance-card__metric {
    display: flex;
    flex-direction: column;
    gap: var(--cs-space-1);
    padding: var(--cs-space-3);
    border-radius: var(--cs-radius-1);
    background: var(--cs-surface-card);
    border: var(--cs-border-thin) solid var(--cs-cyan-10);
}

.case-study-performance-card__metric-value {
    font-size: var(--cs-text-h3);
    font-weight: var(--cs-weight-bold);
    color: var(--cs-color-ink);
    line-height: var(--cs-leading-tight);
}

.case-study-performance-card__metric-label {
    font-size: var(--cs-text-xs);
    color: var(--cs-color-muted);
    text-transform: uppercase;
    letter-spacing: var(--cs-tracking-wider);
}

.case-study-performance-card__footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--cs-space-3);
    border-top: var(--cs-border-thin) solid var(--cs-cyan-10);
    font-size: var(--cs-text-small);
    color: var(--cs-color-muted);
}

.case-study-performance-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-1);
    color: var(--cs-color-cyan);
    text-decoration: none;
    font-weight: var(--cs-weight-semibold);
    transition: color var(--cs-duration-fast) var(--cs-ease-out);
}

.case-study-performance-card__link:hover,
.case-study-performance-card__link:focus-visible {
    color: var(--cs-color-ink);
}

@media (max-width: 767px) {
    .case-study-performance-card {
        grid-template-columns: 1fr;
        gap: var(--cs-space-4);
    }

    .case-study-performance-card__grade {
        flex-direction: row;
        gap: var(--cs-space-3);
        justify-content: flex-start;
    }

    .case-study-performance-card__metrics {
        grid-template-columns: 1fr;
    }

    .case-study-index__panel {
        padding-inline: var(--cs-pad-inline-mobile);
    }
}

/* Content z-index for deliverables section */

.case-study-deliverables > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .case-study-deliverables {
        --max-line: var(--cs-max-line-mobile);
        scroll-margin-top: 88px;
        padding-inline: var(--cs-pad-inline-mobile);
    }

    .case-study-deliverables .wp-block-column {
        margin-bottom: var(--cs-space-6);
    }

    .case-study-deliverables figure {
        margin-top: var(--cs-space-3);
    }

    .case-study-deliverables figure:first-of-type {
        margin-top: var(--cs-space-1);
    }

    .case-study-deliverables .case-study-panel__intro,
    .case-study-deliverables .case-study-panel__list,
    .case-study-deliverables .case-study-panel__caption {
        max-width: var(--max-line);
    }
}

/* 10-feature-blocks.css */
/* ════════════════════════════════════════════════════════════════════════════
   STACKED FEATURE BLOCKS
   Full-width screenshot blocks with brief callouts for deliverables showcase
   ════════════════════════════════════════════════════════════════════════════ */

.case-study-feature-blocks {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 6vw, 72px);
    margin-top: clamp(32px, 4vw, 48px);
}

.case-study-feature-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 32px);
    position: relative;
}

.case-study-feature-block__media {
    position: relative;
    border-radius: var(--cs-radius-3);
    overflow: hidden;
    box-shadow: var(--cs-shadow-lg);
    border: 1px solid var(--cs-cyan-22);
    transition: transform var(--cs-duration-normal) var(--cs-ease-out),
                box-shadow var(--cs-duration-normal) var(--cs-ease-out);
}

.case-study-feature-block__media:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--cs-cyan-30);
}

.case-study-feature-block__media a {
    display: block;
    line-height: 0;
}

.case-study-feature-block__media img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--cs-duration-normal) var(--cs-ease-out);
}

.case-study-feature-block__media:hover img {
    transform: scale(1.02);
}

.case-study-feature-block__content {
    display: flex;
    flex-direction: column;
    gap: var(--cs-space-2);
}

.case-study-feature-block__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cs-cyan-30), var(--cs-cyan-20));
    color: var(--cs-color-ink);
    font-weight: var(--cs-weight-bold);
    font-size: var(--cs-text-sm);
    box-shadow: 0 4px 12px rgba(0, 229, 255, 0.2);
}

.case-study-feature-block__title {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: var(--cs-weight-bold);
    color: var(--cs-color-ink);
    margin: 0;
    line-height: 1.3;
}

.case-study-feature-block__desc {
    font-size: var(--cs-text-body);
    color: var(--cs-color-ink-primary);
    margin: 0;
    max-width: 600px;
    line-height: var(--cs-leading-relaxed);
}

.case-study-feature-block__desc a {
    color: var(--cs-color-cyan);
    text-decoration: none;
    font-weight: var(--cs-weight-semibold);
    transition: color var(--cs-duration-fast) var(--cs-ease-out);
}

.case-study-feature-block__desc a:hover {
    color: var(--cs-color-ink);
    background: var(--cs-cyan-10);
    border-radius: var(--cs-radius-1);
}

.case-study-feature-block__tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid var(--cs-cyan-22);
    border-radius: 999px;
    font-size: var(--cs-text-xs);
    font-weight: var(--cs-weight-semibold);
    color: var(--cs-color-cyan);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: fit-content;
}

/* Mobile-specific feature block with phone frame */

.case-study-feature-block--mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 4vw, 56px);
}

.case-study-feature-block--mobile .case-study-feature-block__media {
    max-width: 320px;
    margin: 0 auto;
    border-radius: 32px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4),
                inset 0 0 0 8px rgba(40, 44, 52, 0.9),
                inset 0 0 0 9px rgba(0, 229, 255, 0.15);
}

.case-study-feature-block--mobile .case-study-feature-block__content {
    order: -1;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .case-study-feature-block--mobile {
        grid-template-columns: 1fr;
    }

    .case-study-feature-block--mobile .case-study-feature-block__content {
        order: 0;
        text-align: center;
        align-items: center;
    }

    .case-study-feature-block--mobile .case-study-feature-block__media {
        max-width: 280px;
    }
}

@media (max-width: 767px) {
    .case-study-feature-blocks {
        gap: clamp(40px, 5vw, 56px);
    }

    .case-study-feature-block__content {
        text-align: center;
        align-items: center;
    }

    .case-study-feature-block__desc {
        max-width: 100%;
    }

    .case-study-feature-block--mobile .case-study-feature-block__media {
        max-width: 260px;
    }
}