/* =========================================================================
   ASI MOBILE CORE  -  STRICTLY ISOLATED
   Liquid Glass Design System  -  Phase 5 Production
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Syncopate:wght@700&display=swap');

/* ===================== DESIGN TOKENS (Shared Foundation) ===================== */
:root {
  --bg-body: #f4f5f9;
  --bg-white: #ffffff;
  --bg-warm: #f9fafb;
  --bg-section-alt: #eef0f6;
  --bg-hero-gradient: linear-gradient(135deg, #e4e9f4 0%, #f4f5f9 35%, #e8ecf8 65%, #f0f2f8 100%);

  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: 1px solid rgba(255, 255, 255, 0.7);
  --glass-border-subtle: 1px solid rgba(0, 0, 0, 0.06);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  --backdrop-blur: blur(20px);

  --text-heading: #0c0f1a;
  --text-body: #3a3f54;
  --text-muted: #727891;
  --text-white: #ffffff;

  --blue-midnight: #0f1b3d;
  --blue-deep: #1a3a7a;
  --blue-core: var(--blue-deep);
  --blue-bright: var(--blue-core);
  --blue-sky: var(--accent-primary);

  --accent-primary: var(--blue-core);
  --accent-primary-soft: rgba(var(--blue-deep-rgb), 0.08);
  --accent-primary-glow: rgba(var(--blue-deep-rgb), 0.25);

  --accent-gradient: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-core) 40%, var(--blue-bright) 100%);
  
  --p3-accent-blue: var(--blue-deep);
  --p3-accent-purple: var(--accent-primary);
  
  --page-padding: 1.5rem; /* Mobile default */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --font-sans: "Outfit", sans-serif;
  --font-headline: "Outfit", sans-serif;
  --font-mono: "Roboto Mono", monospace;
  
  --fluid-h1: clamp(2.4rem, 10vw, 3.2rem);
  --fluid-h2: clamp(1.8rem, 8vw, 2.4rem);
}

[data-theme="dark"] {
  --bg-body: #000000;
  --bg-white: #000000;
  --bg-warm: #000000;
  --bg-section-alt: #000000;
  --bg-hero-gradient: linear-gradient(135deg, #000 0%, #000 100%);

  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-strong: rgba(0, 0, 0, 0.95);
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
  --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.05);

  --text-heading: #ffffff;
  --text-body: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.45);

  --accent-primary: var(--accent-secondary);
  --accent-primary-soft: rgba(var(--accent-secondary-rgb), 0.1);
  --accent-primary-glow: rgba(var(--accent-secondary-rgb), 0.3);
  --accent-gradient: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);

  --p3-accent-blue: var(--accent-secondary);
  --p3-accent-purple: var(--accent-primary);
}

/* ===================== NAVIGATION ===================== */
/* Desktop nav is hidden on mobile by style.css (display:none!important).
   Do NOT re-style .vault-nav here — only .mobile-nav is visible. */
.vault-nav {
  display: none !important;
}


/* Vault-nav internals (.nav-inner, .nav-right, etc.) are NOT styled here
   because the desktop nav is hidden on mobile. Only .mobile-nav is visible.
   See style.css for the .mobile-nav component styles. */

/* Hard Overrides for Brand/Sub-Nav Visibility (inside vault-nav) */
html.is-mobile .mega-dropdown,
body.is-mobile .mega-dropdown,
.is-mobile .mega-dropdown,
.is-mobile .nav-dropdown,
.is-mobile .theme-tooltip,
.is-mobile .theme-hint,
.is-mobile .brand-divider {
  display: none !important;
}

.is-mobile .brand-logo {
  height: 32px !important;
  width: auto !important;
}

/* ===================== STICKY SUB-NAV ===================== */
.sticky-sub-nav {
  position: fixed;
  top: 70px; /* Below main nav */
  left: 0;
  width: 100%;
  background: rgba(10, 15, 28, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 1900;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-sub-nav.is-visible {
  transform: translateY(0);
}

.sub-nav-inner {
  display: flex;
  overflow-x: auto;
  padding: 1rem var(--page-padding);
  gap: 2rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.sub-nav-inner::-webkit-scrollbar {
  display: none; /* Clean scroll */
}

.sub-nav-link {
  white-space: nowrap;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sub-nav-link.active {
  color: var(--accent-primary);
  font-weight: 600;
}

[data-theme='light'] .sticky-sub-nav {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme='dark'] .sticky-sub-nav {
  background: rgba(10, 15, 28, 0.85);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { 
  scroll-behavior: smooth; 
  scroll-padding-top: 120px;
  -webkit-font-smoothing: antialiased; 
}

/* Global tap highlight suppression  -  native app feel */
a, button, [onclick], .accordion-header, .mobile-view-more, .btn {
    -webkit-tap-highlight-color: transparent;
}
body { 
    background: var(--bg-body); 
    color: var(--text-body); 
    font-family: var(--font-sans); 
    font-size: 15px; 
    line-height: 1.6; 
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.3s ease;
}

h1, h2, h3 { font-family: var(--font-headline); color: var(--text-heading); line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; }
h1 { font-size: var(--fluid-h1); }
h2 { font-size: var(--fluid-h2); }
p { max-width: 100%; color: var(--text-body); }

.container { width: 100%; padding: 0 var(--page-padding); }

/* ===================== BUTTON SYSTEM ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.8rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%; /* Default to full-width for mobile UX */
}

.btn-primary {
  background: var(--accent-gradient);
  color: var(--text-white);
  box-shadow: 0 4px 15px var(--accent-primary-glow);
}

.btn-secondary {
  background: var(--bg-white);
  color: var(--text-heading);
  border: var(--glass-border-subtle);
  box-shadow: var(--glass-shadow);
}

[data-theme='dark'] .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.btn-lg {
  padding: 1.1rem 2.2rem;
  font-size: 1.1rem;
  border-radius: var(--radius-md);
}

/* ===================== GLASS PANEL FOUNDATION ===================== */
.glass-card {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: background 0.4s ease, border-color 0.3s ease;
}

.is-mobile #hero-section {
    height: auto !important;
    min-height: 100vh !important;
    padding-bottom: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
}

.is-mobile #competency {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.is-mobile #clients {
    padding-top: 0.5rem !important;
    padding-bottom: 0.75rem !important;
}

.is-mobile #outcomes {
    padding-top: 0.75rem !important;
    padding-bottom: 1.5rem !important;
}

.is-mobile .outcomes-mega {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    border-radius: var(--radius-lg) !important;
}

.is-mobile .digital-immersive {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
    border-radius: var(--radius-lg) !important;
}

.is-mobile #case-studies {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
}

.is-mobile #product-studies {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
}

.is-mobile #sample-reports {
    padding-top: 1rem !important;
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)) !important; /* Notch-safe */
}

.is-mobile .section {
    padding: 4rem 0 !important; /* Global baseline for any remaining sections */
}

/* Ensure container-level side padding is preserved */
.is-mobile .section .container,
.is-mobile #competency .container {
    padding-left: var(--page-padding) !important;
    padding-right: var(--page-padding) !important;
}

.is-mobile .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 3rem !important;
}

.is-mobile .hero-visual {
    margin-top: 2rem !important;
}

/* ===================== SECTION 2: MOBILE PIPELINE (REBUILT) ===================== */
.is-mobile #competency {
    background: var(--bg-body) !important;
    position: relative;
    overflow: visible;
    min-height: auto !important;
}

/* --- Global Mobile Header Polish (Center Aligned) --- */
.is-mobile .section-header.centered {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem !important;
}

/* Feature Header Standard (Strategic Projects & Digital Transformation) */
.is-mobile .mega-header,
.is-mobile .di-header {
    text-align: left !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.is-mobile .mega-label.section-centered {
    justify-content: center !important;
}

.is-mobile .mega-label {
    justify-content: flex-start !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
}

.is-mobile .mega-label span {
    font-size: 0.8rem !important;
    letter-spacing: 2px !important;
}

.is-mobile .section-header h2 .highlight,
.is-mobile .mega-title .highlight,
.is-mobile .di-header h2 .highlight {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.is-mobile .section-header h2,
.is-mobile .mega-title,
.is-mobile .di-header h2 {
    margin-bottom: 1rem !important;
    font-size: 2.4rem !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    font-weight: 800 !important;
}

.is-mobile .section-header p,
.is-mobile .mega-desc,
.is-mobile .di-header p {
    text-align: inherit !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    color: var(--text-muted) !important;
}

/* --- Specific: Rename Pipeline Headings via CSS --- */
.is-mobile #competency .mega-label span {
    display: none !important;
}

.is-mobile #competency .mega-label::after {
    content: "Our Core";
    display: inline-block;
}

.is-mobile #competency .section-header h2 {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
}

.is-mobile #competency .section-header h2::after {
    content: "ASI Core Competency";
    font-size: 2.4rem !important;
    line-height: 1.1;
    display: block;
    color: var(--text-heading);
    font-weight: 800;
    margin-bottom: 1rem !important;
    text-align: center !important;
}

/* Kill ALL desktop pipeline artifacts */
.is-mobile .highway-canvas,
.is-mobile .synergy-bridge,
.is-mobile #competency::before,
.is-mobile #competency::after,
.is-mobile .pw-asi-core::after {
    display: none !important;
    animation: none !important;
}

.is-mobile .mobile-only { display: flex !important; }

/* Pipeline container  -  vertical column */
.is-mobile .pipe-layout-v3 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    gap: 0 !important;
    max-width: none !important;
    position: relative !important;
}

/* ── Node Styling ── */
.is-mobile .linear-node {
    text-align: center !important;
    width: 100% !important;
    padding: 1.5rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.is-mobile .node-label {
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 3px !important;
    color: var(--accent-primary) !important;
    margin-bottom: 0.5rem !important;
    opacity: 0.8;
    text-transform: uppercase;
}

.is-mobile .node-title {
    font-family: var(--font-headline) !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--text-heading) !important;
    margin: 0 !important;
    max-width: 260px;
}

/* Core Node  -  Gradient + Glow Halo */
.is-mobile .core-node .node-title {
    font-size: 1.5rem !important;
    background: var(--accent-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px var(--accent-primary-glow));
}

.is-mobile .core-node .node-label {
    color: var(--accent-primary) !important;
    opacity: 1;
    font-weight: 600;
}

/* ── Glowy Axis Connectors ── */
.is-mobile .axis-connector {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 50px;
    position: relative;
}

.is-mobile .axis-line {
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, var(--accent-primary), transparent);
    opacity: 0.6;
    box-shadow: 0 0 8px var(--accent-primary-glow), 0 0 16px var(--accent-primary-glow);
    border-radius: 2px;
    animation: lineGlow 3s ease-in-out infinite;
    position: relative; /* For particle positioning */
}

/* V3 Data Flow Particle */
.is-mobile .axis-line::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 12px;
    background: var(--accent-primary);
    filter: blur(1px) drop-shadow(0 0 8px var(--accent-primary-glow));
    border-radius: 100px;
    opacity: 0;
    animation: axisParticle 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* WP3: Dual Data Stream  -  Second Particle */
.is-mobile .axis-line::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 8px;
    background: var(--accent-primary);
    filter: blur(1px) drop-shadow(0 0 6px var(--accent-primary-glow));
    border-radius: 100px;
    opacity: 0;
    animation: axisParticle 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.75s;
}

@keyframes axisParticle {
    0% { transform: translateX(-50%) translateY(0); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { transform: translateX(-50%) translateY(40px); opacity: 0; }
}

@keyframes lineGlow {
    0%, 100% { opacity: 0.4; box-shadow: 0 0 4px var(--accent-primary-glow); }
    50% { opacity: 0.8; box-shadow: 0 0 12px var(--accent-primary-glow), 0 0 24px var(--accent-primary-glow); }
}

.is-mobile .axis-arrow {
    margin-top: 2px;
    font-size: 1rem;
    color: var(--accent-primary);
    opacity: 0.9;
    z-index: 5;
    filter: drop-shadow(0 0 6px var(--accent-primary-glow));
    animation: arrowPulse 2s infinite ease-in-out;
}

@keyframes arrowPulse {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(3px); opacity: 1; }
}

/* ── Inline Data Tags  -  Hidden on mobile ── */
.is-mobile .inline-data {
    display: none !important;
}

/* ── HIDE BOTH SUB-NAVS ON MOBILE ── */
.is-mobile .sticky-sub-nav,
.is-mobile #automotive-sub-nav,
.is-mobile .context-sub-nav,
.is-mobile #contextual-sub-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── CLIENTS: Horizontal Single-Row Marquee ── */
.is-mobile #clients {
    background: var(--bg-body) !important;
    overflow: hidden !important;
}

.is-mobile #clients .trust-heading {
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--accent-primary) !important;
    opacity: 0.7;
    text-align: center !important;
    margin-bottom: 1.25rem !important;
    padding: 0 var(--page-padding) !important;
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
}

.is-mobile #clients .marquee-container-v1 {
    overflow: hidden !important;
    width: 100% !important;
}

.is-mobile #clients .marquee-track-v1 {
    display: flex !important;
    gap: 3rem !important;
    animation: mobileMarquee 30s linear infinite !important;
    width: max-content !important;
}

@keyframes mobileMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.is-mobile #clients .marquee-logo-v1 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 32px !important;
    min-width: 60px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.is-mobile #clients .marquee-logo-v1 img {
    max-width: 80px !important;
    max-height: 28px !important;
    filter: grayscale(100%) !important;
    opacity: 0.7 !important;
}

/* Theme Support for Linear Axis */
[data-theme='light'] {
    --logo-invert: 0;
}
[data-theme='dark'] {
    --logo-invert: 1;
}

[data-theme='light'] .is-mobile .node-title {
    color: #1a1a1a !important;
}

/* ===================== THE ISOLATED HERO ===================== */
.is-mobile #hero-section {
    position: relative;
    padding-top: 7.5rem !important;
    padding-bottom: 3.5rem;
    overflow: hidden;
    background: var(--bg-hero-gradient);
}



.is-mobile .hero-headline {
    margin-bottom: 2rem;
}

.is-mobile .mega-desc,
.is-mobile .hero-subtitle {
    font-size: 1rem !important; /* Standardized mobile subtitle */
    color: var(--text-muted);
}

.is-mobile .hero-headline .highlight {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme='dark'] .is-mobile .hero-headline .highlight {
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.is-mobile .hero h1 {
    font-size: 2.8rem;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    text-wrap: balance; /* Premium break control */
    position: relative;
    z-index: 1;
}

.is-mobile .hero h1 .text-gradient {
    filter: drop-shadow(0 2px 4px rgba(var(--blue-core-rgb), 0.15));
}

[data-theme='light'] .is-mobile .hero h1 .text-gradient {
    filter: drop-shadow(0 2px 4px rgba(var(--blue-deep-rgb), 0.08));
}

.is-mobile .hero-sub {
    font-size: 1rem; /* Standardized mobile subtitle */
    color: var(--text-muted);
    margin-bottom: 3rem;
}

/* DIRECTION 1: INTEGRATED DATA STRIP (Horizontal) */
.is-mobile .hero-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding: 1.25rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    gap: 0.5rem;
}

[data-theme='light'] .is-mobile .hero-stats-row {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.6);
}

.is-mobile .h-stat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.5rem;
    position: relative;
    background: transparent !important;
    border: none !important;
}

.is-mobile .h-stat-col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
}

[data-theme='light'] .is-mobile .h-stat-col:not(:last-child)::after {
    background: rgba(0, 0, 0, 0.18);
}

.is-mobile .h-stat-col:last-child {
    grid-column: auto;
    border-top: none;
}

.is-mobile .h-stat-val {
    font-size: 1.6rem; /* High-density scaling */
    font-weight: 800;
    color: var(--accent-primary);
    display: block;
    line-height: 1;
    margin-bottom: 0.2rem;
    letter-spacing: -0.02em;
    filter: drop-shadow(0 0 8px var(--accent-primary-glow)); /* Telemetry Glow */
}

.is-mobile .h-stat-label {
    font-size: 0.65rem; /* Tiny dashboard label */
    font-weight: 700;
    color: var(--text-heading);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.is-mobile .h-stat-desc {
    display: none; /* Suppress descriptions in high-density strip */
}

/* HERO CTAS  -  Dynamic Grid */
.is-mobile .hero-ctas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

/* Secondary CTAs in 2-column row */
.is-mobile .hero-ctas .btn:nth-child(n+2) {
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
}

.is-mobile .hero-ctas .btn:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

.is-mobile .hero-ctas .btn:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
}

/* When viewport is wide enough, 2-col for secondary */
@media (min-width: 360px) {
    .is-mobile .hero-ctas {
        grid-template-columns: 1fr 1fr;
    }
    .is-mobile .hero-ctas .btn:first-child {
        grid-column: 1 / -1; /* Full width for primary */
    }
    .is-mobile .hero-ctas .btn:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }
    .is-mobile .hero-ctas .btn:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }
}

/* REMOVE HERO VIDEO / HUD ON MOBILE */
.is-mobile .auto-hud-wrapper,
.is-mobile .auto-hud-container,
.is-mobile .hud-video,
.is-mobile .hud-scanner {
    display: none !important;
}

/* ===================== UTILITIES ===================== */
.desktop-only { display: none; }
.is-desktop .mobile-only { display: none !important; }
.mobile-only { display: block; }
[data-device='mobile'] .desktop-only { display: none !important; }

/* ===================== ACCORDION SYSTEM ===================== */

/* Hide desktop showcases & di-cards on mobile */
.is-mobile .showcase.desktop-only,
.is-mobile .di-card.desktop-only {
    display: none !important;
}

/* Show mobile accordion */
.is-mobile .mobile-accordion {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--glass-bg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.is-mobile .mobile-accordion:active {
    transform: scale(0.99); /* Tactile Feedback */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

[data-theme='light'] .is-mobile .mobile-accordion {
    border-color: rgba(0, 0, 0, 0.08);
    background: var(--bg-white);
}

/* Accordion Item */
.is-mobile .accordion-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 0px solid var(--accent-primary);
    position: relative;
    transition: border-left-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme='light'] .is-mobile .accordion-item {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.is-mobile .accordion-item:last-child {
    border-bottom: none;
}

.is-mobile .accordion-item.active {
    border-left-width: 3px;
}

/* Accordion Header (always visible) */
.is-mobile .accordion-header {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.85rem 0.75rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
    gap: 0.75rem;
}

.is-mobile .accordion-header:active {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme='light'] .is-mobile .accordion-header:active {
    background: rgba(0, 0, 0, 0.02);
}

.is-mobile .acc-number {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 1px;
    min-width: 24px;
}

.is-mobile .acc-title {
    flex: 1;
    font-family: var(--font-headline);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.3;
}

.is-mobile .acc-duration {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.is-mobile .acc-chevron {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
    margin-left: 0.5rem;
}

.is-mobile .accordion-item.active .acc-chevron {
    transform: rotate(180deg);
    color: var(--accent-primary);
}

/* Accordion Body (collapsed by default) */
.is-mobile .accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 0.75rem;
}

.is-mobile .accordion-item.active .accordion-body {
    max-height: 800px; /* Large enough for any content */
    padding: 0 0.75rem 1rem;
}

/* Inside accordion: section labels */
.is-mobile .acc-section-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme='light'] .is-mobile .acc-section-label {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

/* Input items */
.is-mobile .acc-input-item {
    font-size: 0.85rem;
    color: var(--text-body);
    padding: 0.35rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.4;
}

.is-mobile .acc-input-item i {
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-top: 4px;
}

/* Activity pills */
.is-mobile .acc-activity {
    font-size: 0.85rem;
    color: var(--text-heading);
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.is-mobile .acc-activity i {
    color: var(--accent-primary);
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

/* Outcome items */
.is-mobile .acc-outcomes-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue-bright, var(--accent-secondary));
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.is-mobile .acc-outcome-item {
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[data-theme='light'] .is-mobile .acc-outcome-item {
    border-top-color: rgba(0, 0, 0, 0.04);
}

.is-mobile .acc-outcome-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 0.15rem;
}

.is-mobile .acc-outcome-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.is-mobile .acc-highlight {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--blue-bright, var(--accent-secondary));
    margin-bottom: 0.5rem;
}

/* ===================== STRATEGIC PROJECTS: HIDE DESKTOP SHOWCASES ===================== */
.is-mobile .outcomes-mega .showcase {
    display: none !important;
}

/* ===================== DIGITAL TRANSFORMATION: HIDE DESKTOP CARDS ===================== */
.is-mobile .digital-immersive .di-card {
    display: none !important;
}

/* Keep section headers visible */
.is-mobile .outcomes-mega .mega-header,
.is-mobile .digital-immersive .di-header {
    display: block !important;
}

/* Case & Product Card Tactile Feedback */
.is-mobile .case-study-card,
.is-mobile .product-study-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.is-mobile .case-study-card:active,
.is-mobile .product-study-card:active {
    transform: scale(0.985) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* ===================== CASE & PRODUCT STUDIES: PROGRESSIVE REVEAL ===================== */

/* Hide filter pills on mobile */
.is-mobile .case-filters-wrapper,
.is-mobile .product-filters-wrapper {
    display: none !important;
}

/* JS-driven: cards beyond initial 2 are hidden via inline style, not nth-child */
.is-mobile .case-study-card.mobile-hidden,
.is-mobile .product-study-card.mobile-hidden {
    display: none !important;
}

.is-mobile .case-study-card.mobile-reveal,
.is-mobile .product-study-card.mobile-reveal {
    display: flex !important;
    animation: fadeSlideUp 0.4s ease forwards;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hide "Apex" section wrapper entirely on mobile (card already hidden but wrapper adds 4rem gap) */
.is-mobile .footer-premium-card,
.is-mobile .footer-premium-card ~ *,
.is-mobile section:has(.footer-premium-card) {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide desktop "View All" button wrappers on mobile (their 3rem margin creates dead space) */
.is-mobile #case-studies .btn-secondary.magnetic-btn,
.is-mobile #product-studies .btn-secondary.magnetic-btn {
    display: none !important;
}

.is-mobile #case-studies > div[style*="text-align:center"],
.is-mobile #product-studies div[style*="text-align:center"] {
    display: none !important;
}

/* "View More" button styling */
.is-mobile .mobile-view-more {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.9rem 2rem;
    margin-top: 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: transparent;
    border: 1px solid var(--accent-primary-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
}

.is-mobile .mobile-view-more:active {
    transform: scale(0.97); /* Higher tension tactile feedback */
    background: var(--accent-primary-soft);
}

/* ===================== EXPAND GRID BUTTON - MOBILE SUPPORT ===================== */
/* Product studies use the same expand-grid-btn on both desktop & mobile */
.is-mobile .expand-grid-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.75rem 2rem;
    font-family: var(--font-mono);
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    -webkit-tap-highlight-color: transparent;
}

.is-mobile .expand-grid-btn:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.08);
}

.is-mobile .expand-grid-btn i {
    font-size: 0.6rem;
    transition: transform 0.3s;
}

[data-theme='light'] .is-mobile .expand-grid-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

[data-theme='light'] .is-mobile .expand-grid-btn:active {
    background: rgba(0, 0, 0, 0.06);
}

/* Center-CTA container for mobile */
.is-mobile .center-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.is-mobile .center-cta .global-page-link {
    margin-top: 0.5rem;
}

/* ===================== KINETIC SCROLL REVEAL (V3) ===================== */
.is-mobile .reveal-card {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: opacity, transform;
}

.is-mobile .reveal-card.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ===================== ACCORDION STAGGER (V3) ===================== */
/* Base state: Hidden and offset */
.is-mobile .accordion-body > * {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reveal when parent is active */
.is-mobile .accordion-item.active .accordion-body > * {
    opacity: 1;
    transform: translateX(0);
}

/* Phase 1: Input Labels */
.is-mobile .accordion-item.active .acc-section-label:nth-of-type(1) { transition-delay: 0.1s; }
.is-mobile .accordion-item.active .acc-input-item:nth-of-type(1) { transition-delay: 0.15s; }
.is-mobile .accordion-item.active .acc-input-item:nth-of-type(2) { transition-delay: 0.2s; }
.is-mobile .accordion-item.active .acc-input-item:nth-of-type(3) { transition-delay: 0.25s; }

/* Phase 2: Execution */
.is-mobile .accordion-item.active .acc-section-label:nth-of-type(2) { transition-delay: 0.35s; }
.is-mobile .accordion-item.active .acc-activity:nth-of-type(1) { transition-delay: 0.4s; }
.is-mobile .accordion-item.active .acc-activity:nth-of-type(2) { transition-delay: 0.45s; }
.is-mobile .accordion-item.active .acc-activity:nth-of-type(3) { transition-delay: 0.5s; }

/* Phase 3: Outcomes */
.is-mobile .accordion-item.active .acc-outcomes-label { transition-delay: 0.6s; }
.is-mobile .accordion-item.active .acc-highlight { transition-delay: 0.65s; }
.is-mobile .accordion-item.active .acc-outcome-item:nth-of-type(1) { transition-delay: 0.7s; }
.is-mobile .accordion-item.active .acc-outcome-item:nth-of-type(2) { transition-delay: 0.75s; }
.is-mobile .accordion-item.active .acc-outcome-item:nth-of-type(3) { transition-delay: 0.8s; }

/* Safety: future-proof for 4th/5th children */
.is-mobile .accordion-item.active .acc-input-item:nth-of-type(4) { transition-delay: 0.3s; }
.is-mobile .accordion-item.active .acc-input-item:nth-of-type(5) { transition-delay: 0.35s; }
.is-mobile .accordion-item.active .acc-activity:nth-of-type(4) { transition-delay: 0.55s; }
.is-mobile .accordion-item.active .acc-activity:nth-of-type(5) { transition-delay: 0.6s; }
.is-mobile .accordion-item.active .acc-outcome-item:nth-of-type(4) { transition-delay: 0.85s; }
.is-mobile .accordion-item.active .acc-outcome-item:nth-of-type(5) { transition-delay: 0.9s; }

.is-mobile .mobile-view-more.hidden {
    display: none !important;
}

/* Sample Reports High-Density Mobile Polish */
.is-mobile #sample-reports .glass-card {
    padding: 2rem 1.25rem !important; /* Compact interior padding for mobile cards */
}



/* Desktop: hide mobile-only buttons */
.mobile-view-more,
.mobile-accordion {
    display: none;
}

/* ===================== DYNAMIC GLASS DEPTH (V3) ===================== */
.is-mobile .glass-depth {
    --glass-intensity: 0;
    transition: backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    /* Base styling inherited from .glass-card, but we modulate depth */
    backdrop-filter: blur(calc(12px + (var(--glass-intensity) * 15px))) !important;
    -webkit-backdrop-filter: blur(calc(12px + (var(--glass-intensity) * 15px))) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, calc(0.1 + (var(--glass-intensity) * 0.2))) !important;
    border-color: rgba(255, 255, 255, calc(0.08 + (var(--glass-intensity) * 0.1))) !important;
}

[data-theme='light'] .is-mobile .glass-depth {
    box-shadow: 0 10px 40px rgba(var(--blue-core-rgb), calc(0.05 + (var(--glass-intensity) * 0.1))) !important;
    border-color: rgba(0, 0, 0, calc(0.05 + (var(--glass-intensity) * 0.05))) !important;
}

/* ===================== HERO STAT PULSE (V3) ===================== */
@keyframes statPulse {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.1); filter: brightness(1.4) drop-shadow(0 0 15px var(--accent-primary-glow)); }
    100% { transform: scale(1); filter: brightness(1); }
}

.is-mobile .h-stat-val.pulse {
    animation: statPulse 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.is-mobile .h-stat-val .count {
    display: inline-block;
    will-change: transform, filter;
}

/* ===================== HAPTIC RIPPLE FEEDBACK (V3) ===================== */
.mobile-view-more,
.mobile-accordion,
.btn-primary,
.btn-secondary {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.is-mobile .mobile-view-more::after,
.is-mobile .btn-primary::after,
.is-mobile .btn-secondary::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

@keyframes rippleEffect {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(15); opacity: 0; }
}

/* Note: Triggers on mobile :active state */
.is-mobile .mobile-view-more:active::after,
.is-mobile .btn-primary:active::after,
.is-mobile .btn-secondary:active::after {
    animation: rippleEffect 0.6s ease-out;
}

/* ===================== MARQUEE POLISH (V5) ===================== */
/* 3D Cylindrical effect removed  -  uniform wobble didn't look cylindrical */


.is-mobile .mesh-blob {
    display: none !important;
}

/* Glass refract header removed — the :active backdrop-filter on
   #global-header caused a visual flash and blocked touch events
   on mobile by triggering heavy compositor recalculation. */

/* ===================== DARK THEME MOBILE OVERRIDES (V5) ===================== */

/* Hero Secondary CTAs  -  ensure white text on dark bg */
[data-theme='dark'] .is-mobile .hero-ctas .btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

[data-theme='dark'] .is-mobile .hero-ctas .btn-secondary:active {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Hero Stats Row  -  glass on pure black */
[data-theme='dark'] .is-mobile .hero-stats-row {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

/* Stat dividers */
[data-theme='dark'] .is-mobile .h-stat-col:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.15);
}

/* Accordion dark polish */
[data-theme='dark'] .is-mobile .mobile-accordion {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

[data-theme='dark'] .is-mobile .accordion-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    border-left-color: var(--accent-secondary);
}

[data-theme='dark'] .is-mobile .accordion-header:active {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme='dark'] .is-mobile .acc-section-label {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme='dark'] .is-mobile .acc-outcomes-label {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme='dark'] .is-mobile .acc-outcome-item {
    border-top-color: rgba(255, 255, 255, 0.04);
}

/* View More button dark mode */
[data-theme='dark'] .is-mobile .mobile-view-more {
    color: var(--accent-secondary);
    border-color: rgba(var(--accent-secondary-rgb), 0.15);
}

[data-theme='dark'] .is-mobile .mobile-view-more:active {
    background: rgba(var(--accent-secondary-rgb), 0.08);
}

/* Case & Product Study Cards dark glass */
[data-theme='dark'] .is-mobile .case-study-card,
[data-theme='dark'] .is-mobile .product-study-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Clients heading dark opacity */
[data-theme='dark'] .is-mobile #clients .trust-heading {
    color: var(--accent-secondary) !important;
    opacity: 0.6;
}

/* Sample Reports dark glass */
[data-theme='dark'] .is-mobile #sample-reports .glass-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===================== WP7: MICRO-INTERACTION ANIMATIONS (V5) ===================== */

/* 7B: CTA Active Glow */
.is-mobile .btn-primary:active {
    box-shadow: 0 0 20px var(--accent-primary-glow), 0 4px 15px var(--accent-primary-glow) !important;
    transform: scale(0.98);
}

/* 7C: Section Heading Scroll Reveals - ONLY for elements with .reveal */
.is-mobile .section-header.reveal,
.is-mobile .mega-header.reveal,
.is-mobile .di-header.reveal {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.is-mobile .section-header.reveal.visible,
.is-mobile .mega-header.reveal.visible,
.is-mobile .di-header.reveal.visible,
.is-mobile .section-header:not(.reveal),
.is-mobile .mega-header:not(.reveal),
.is-mobile .di-header:not(.reveal) {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

/* 7D: Stat Number "Breathing"  -  Live Data Feel */
@keyframes statBreathe {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 8px var(--accent-primary-glow)); }
    50% { filter: brightness(1.04) drop-shadow(0 0 12px var(--accent-primary-glow)); }
}

.is-mobile .h-stat-val.breathing {
    animation: statBreathe 3s ease-in-out infinite;
}

/* ===================== WP8: OUTCOMES SUB-GRID MOBILE STACKING ===================== */
.is-mobile .outcomes-mega .sc-engine {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
}

.is-mobile .outcomes-mega .showcase {
    grid-template-columns: 1fr !important;
}

.is-mobile .sc-visual {
    min-height: 250px !important;
}

.is-mobile .sc-content {
    padding: 2rem 1.5rem !important;
}

/* ===================== WP9: MOBILE SAFE-INSET PADDING ===================== */
/* Hard 1.5rem - cannot use var(--page-padding) as desktop CSS overrides it */

.is-mobile section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    overflow-x: hidden;
}

.is-mobile .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    max-width: 100% !important;
    overflow-x: hidden;
}

.is-mobile .hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.is-mobile .hero .container-hook,
.is-mobile .hero .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.is-mobile .outcomes-mega {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.is-mobile .digital-immersive {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.is-mobile .pipeline-v3 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.is-mobile .mobile-accordion {
    padding: 0;
}

.is-mobile .hero-ctas {
    padding: 0;
    gap: 0.75rem;
}

.is-mobile .hero-ctas .btn {
    width: 100%;
}

/* Section headers breathe */
.is-mobile .section-header,
.is-mobile .mega-header,
.is-mobile .di-header {
    padding-left: 0;
    padding-right: 0;
}

/* ===================== WP10: MOBILE-ONLY / DESKTOP-ONLY VISIBILITY ===================== */
.is-mobile .mobile-only {
    display: block !important;
}

.is-mobile .desktop-only,
.is-mobile .showcase,
.is-mobile .di-card {
    display: none !important;
}

/* But keep container wrappers visible */
.is-mobile .outcomes-mega > .container {
    display: block !important;
}

/* ===================== WP11: PIPELINE SECTION - MOBILE FIX ===================== */
/* Reduce desktop's 8rem vertical padding, ensure heading is visible */
.is-mobile .pipeline-v3 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.is-mobile .pipeline-v3 .section-header {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 2rem;
}

.is-mobile .pipeline-v3 .section-header h2 {
    font-size: var(--fluid-h2);
    line-height: 1.1;
}

.is-mobile .pipeline-v3 .section-header p {
    font-size: 0.95rem;
    margin-top: 0.75rem;
}

/* Mobile pipeline nodes styling */
.is-mobile .linear-node {
    text-align: center;
    padding: 1.5rem 1rem;
}

.is-mobile .node-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}

.is-mobile .node-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-heading);
}

.is-mobile .core-node {
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    padding: 2rem 1.25rem;
}

.is-mobile .axis-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0;
    color: var(--accent-primary);
    opacity: 0.5;
    font-size: 1.2rem;
}

/* ===================== WP12: CASE STUDY CARDS - MOBILE BREATHING ROOM ===================== */
/* Scale cards slightly and add inner margins so they don't touch edges */
.is-mobile .case-studies-grid,
.is-mobile .product-studies-grid {
    gap: 1.25rem !important;
    padding: 0 !important;
}

.is-mobile .cs-card,
.is-mobile .case-study-card,
.is-mobile .product-study-card {
    margin: 0 0.25rem !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

/* Card image area - scale to fit mobile */
.is-mobile .cs-card .cs-banner,
.is-mobile .case-study-card .cs-banner,
.is-mobile .product-study-card .study-img-wrapper {
    max-height: 200px;
}

/* Card content - comfortable padding */
.is-mobile .cs-card .cs-body,
.is-mobile .case-study-card .cs-body,
.is-mobile .product-study-card .study-content {
    padding: 1.25rem 1rem !important;
}

/* Filters - scrollable on mobile */
.is-mobile .filters-wrapper,
.is-mobile .case-filters-wrapper {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.is-mobile .filters-wrapper::-webkit-scrollbar {
    display: none;
}

.is-mobile .filter-pill {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.75rem !important;
    padding: 0.5rem 1rem !important;
}

/* ===================== WP13: SECTION PADDING REFINEMENT ===================== */
/* Tighter sections on mobile */
.is-mobile .section,
.is-mobile .section-alt {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.is-mobile .outcomes-mega {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.is-mobile .digital-immersive {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* CTA section */
.is-mobile .cta-section,
.is-mobile .final-cta {
    padding: 3rem 1.5rem !important;
}

/* ===================== WP14: CARD SCALE-DOWN ===================== */
/* Case study and product study cards - scaled down for mobile breathing room */
.is-mobile .cs-card,
.is-mobile .case-study-card {
    transform: scale(0.92) !important;
    transform-origin: top center;
}

.is-mobile .product-study-card,
.is-mobile .study-card {
    transform: scale(0.92) !important;
    transform-origin: top center;
}

/* ===================== WP15: BACK-TO-TOP BUTTON - MOBILE SHRINK ===================== */
/* Reduce from 48px to 36px, move closer to corner so it doesn't overlap content */
.is-mobile .back-to-top-wrap {
    width: 36px !important;
    height: 36px !important;
    bottom: 16px !important;
    right: 12px !important;
}

.is-mobile .scroll-progress-ring {
    width: 36px !important;
    height: 36px !important;
}

.is-mobile .scroll-progress-ring circle {
    stroke-width: 2 !important;
}

/* Recalculate stroke-dasharray for smaller radius: 2π × (18-1) ≈ 106.8 */
.is-mobile .scroll-progress-bar {
    stroke-dasharray: 106.8 !important;
    stroke-dashoffset: 106.8 !important;
}

.is-mobile .back-to-top {
    width: 30px !important;
    height: 30px !important;
    top: 3px !important;
    left: 3px !important;
    font-size: 0.7rem !important;
}

/* Hide the tooltip on mobile - no hover on touch */
.is-mobile .back-to-top-wrap::before {
    display: none !important;
}

/* ===================== WP16: STRATEGIC + DT SECTION - TIGHTER PADDING ===================== */
/* Reduce side padding on these content-heavy sections for more content room */
.is-mobile .outcomes-mega {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.is-mobile .digital-immersive {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Section headers within these sections still get comfortable padding */
.is-mobile .outcomes-mega .section-header,
.is-mobile .outcomes-mega .mega-header,
.is-mobile .digital-immersive .di-header {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Accordion items - fill the available width */
.is-mobile .mobile-accordion {
    margin-left: 0;
    margin-right: 0;
}