/* Mobile/Desktop visibility toggles */
.mob-only { display: none !important; }
.desk-only { }

/* ═══════════════════════════════════════════════════════════
   KORIX — mobile-v4.css (complete)
   Single source of truth for ALL responsive styles.
   100% inside @media queries — CANNOT affect desktop.
   Created: 28 March 2026
   Pages: home, contact, services, industries, ai-pilot,
          work, about, shishir, 4 case studies, LC hub, LC articles
   ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   TABLET (≤1024px)
   ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* ── NAV ── */
  .nav { padding: 0 20px !important; height: 52px !important; max-width: 100vw !important; }
  .nav-links { display: none !important; }
  .nav-logo img, .site-logo-img { height: 36px !important; max-width: 155px !important; }
  .tog, .nav-cta { display: none !important; }
  #ham {
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-direction: column !important; gap: 5px !important;
    width: 40px !important; height: 40px !important;
    background: none !important; border: none !important;
    cursor: pointer !important; z-index: 10000 !important;
    flex-shrink: 0 !important; padding: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .ham-line {
    display: block !important; width: 20px !important; height: 1.5px !important;
    background: rgba(247,242,232,.8) !important; border-radius: 0 !important;
    transition: all .3s cubic-bezier(.16,1,.3,1) !important;
  }
  .nav-r { display: flex !important; align-items: center !important; gap: 0 !important; flex-shrink: 0 !important; margin-left: auto !important; }

  /* ── HERO PADDING (all pages) ── */
  .hero-wrap, .about-hero, .services-hero, .industries-hero,
  .work-hero, .contact-hero, .pilot-hero, .insights-hero,
  .cs-hero, .shishir-hero, .lc-hero, .lca-hero { padding-top: 80px !important; }

  /* ── CONTACT ── */
  .contact-wrap { grid-template-columns: 1fr !important; }
  .contact-left { padding: 80px 32px 48px !important; border-right: none !important; border-bottom: 1px solid var(--bdr) !important; }
  .contact-right { padding: 48px 32px 80px !important; }

  /* ── GENERIC GRID COLLAPSES ── */
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1.15fr 0.85fr"],
  [style*="grid-template-columns:1.2fr 0.8fr"],
  [style*="grid-template-columns:1fr 1.5fr"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns:1fr 140px"],
  [style*="grid-template-columns:1fr 160px"],
  [style*="grid-template-columns:1.3fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 2fr 1fr 1fr !important;
    font-size: 13px !important;
  }

  /* ── DECORATIVE GLOWS ── */
  .hero-glow,
  [style*="width:600px"][style*="position:absolute"],
  [style*="width:500px"][style*="position:absolute"] { display: none !important; }

  /* ── SECTIONS ── */
  .wrap.sec { padding: 48px 32px !important; }
  .wrap { padding-left: 32px !important; padding-right: 32px !important; }

  /* ── HOMEPAGE: chapters ── */
  .chapters { grid-template-columns: 1fr !important; }
  .ch-nav { position: relative !important; top: auto !important; height: auto !important; padding: 28px 32px 0 !important; border-right: none !important; border-bottom: 1px solid var(--bdr) !important; }
  .svc-canvas-wrap { display: none !important; }
  .svc-mobile-vis { display: block !important; }

  /* ── HOMEPAGE: hero visual hidden on mobile ── */
  .hero-inner { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* ── WORK PAGE: hero ── */
  .work-hero .hero-inner { grid-template-columns: 1fr !important; }
  .work-hero .rvr { display: block !important; }

  /* ── ABOUT PAGE: hero ── */
  .about-hero .hero-inner { grid-template-columns: 1fr !important; }

  /* ── CASE STUDIES: hero ── */
  .cs-hero .hero-inner, [class*="cs-hero"] .hero-inner { grid-template-columns: 1fr !important; }

  /* ── SHISHIR: hero grid ── */
  .shishir-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* ── SERVICES: orbital shrink ── */
  .svc-orbit-node { font-size: 9px !important; white-space: normal !important; max-width: 60px !important; text-align: center !important; }
  .svc-orbit-lines, .svc-orbit-ring { display: none !important; }

  /* ── FOOTER ── */
  .foot { padding: 48px 32px 32px !important; }
  .foot-inner { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

/* ──────────────────────────────────────────────────────────
   PHONE (≤768px)
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── NAV ── */
  .nav { padding: 0 16px !important; height: 52px !important; }

  /* ── HEADINGS ── */
  h1.ph, .ph { font-size: 36px !important; line-height: 1.15 !important; }
  h2.sh, .sh { font-size: 28px !important; line-height: 1.2 !important; }
  .cta-h { font-size: 30px !important; line-height: 1.2 !important; }
  .ey { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: #E8903A !important; margin-bottom: 10px !important; display: block !important; }

  /* ── SECTIONS ── */
  .wrap.sec { padding: 36px 20px !important; }
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .sec { padding: 48px 0 !important; }

  /* ── CONTACT ── */
  .contact-left { padding: 72px 20px 40px !important; }
  .contact-right { padding: 40px 20px 60px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .contact-left h1.ph { font-size: 36px !important; }

  /* ── ALL REMAINING GRIDS → 1-COL ── */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; font-size: 12px !important; gap: 4px !important; }
  [style*="grid-template-columns:repeat(7,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── GAP REDUCTIONS ── */
  [style*="gap:72px"] { gap: 32px !important; }
  [style*="gap:64px"] { gap: 28px !important; }
  [style*="gap:56px"] { gap: 24px !important; }
  [style*="gap:48px"] { gap: 20px !important; }

  /* ── CTA BUTTONS — full width with padding ── */
  .ba, .bg_ { display: block !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; font-size: 16px !important; min-height: 44px !important; max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; }
  .cta-sec .ba, .cta-sec .bg_, [class*="-cta"] .ba, [class*="-cta"] .bg_ { max-width: 320px !important; }
  .cta-sec, [class*="-cta"], .svc-cta, .ind-cta, .work-cta, .about-cta { padding-left: 24px !important; padding-right: 24px !important; }
  .cta-sub, .cta-note, .cta-board { padding-left: 8px !important; padding-right: 8px !important; }

  /* ── TOUCH TARGETS ── */
  #ham { min-width: 44px; min-height: 44px; }
  .ann { min-height: 44px; display: flex; align-items: center; }
  .tog { width: 44px !important; height: 44px !important; }
  .faq-icon { width: 44px !important; height: 44px !important; }
  .cookie-accept, .cookie-decline { min-height: 44px !important; }
  .faq-btn { min-height: 44px !important; }

  /* ── SOCIAL ICONS ── */
  .fsoc { width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; background: rgba(247,242,232,.06) !important; border: 1px solid rgba(247,242,232,.1) !important; }
  .fsoc svg { display: block !important; width: 18px !important; height: 18px !important; }
  /* Hide original socials in brand column on mobile */
  .fsocs { display: none !important; }
  /* foot-socials-mobile now styled in footer block below */


  /* ── SERVICES PAGE: hero orbital hide + tab bar fix ── */
  .svc-orbital { display: block !important; max-width: 240px !important; margin: 0 auto !important; overflow: visible !important; }
  .svc-hero .hero-inner { gap: 24px !important; }
  .svc-tabs, .ind-tabs { z-index: 9990 !important; }
  .svc-tabs.visible, .ind-tabs.visible { top: 52px !important; }
  .svc-tab, .ind-tab { pointer-events: auto !important; display: inline-block !important; width: auto !important; max-width: none !important; padding: 10px 14px !important; min-height: 44px !important; }
  .svc-tabs-inner, .ind-tabs-inner { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* ── SERVICES PAGE: card borders on mobile ── */
  .svc-section {
    border: 1px solid rgba(247,242,232,.06) !important;
    border-radius: 16px !important;
    padding: 28px 20px !important;
    background: var(--bg2) !important;
  }
  .svc-dark-band .svc-section {
    border-color: rgba(247,242,232,.10) !important;
    background: rgba(247,242,232,.03) !important;
  }
  .svc-dark-band {
    border-top: none !important;
    border-bottom: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* ── FAQ — unstick + fix layout on mobile ── */
  .rvl[style*="sticky"], .rvl { position: relative !important; top: auto !important; margin-bottom: 24px !important; }
  .rvl .sh { font-size: 24px !important; }
  .rvl .ey { font-size: 10px !important; letter-spacing: .15em !important; }
  .rvl p { font-size: 14px !important; letter-spacing: normal !important; }
  .rvl a { font-size: 14px !important; word-break: break-word !important; letter-spacing: normal !important; }


  /* ── HOMEPAGE: hero ── */
  .hero-wrap { min-height: auto !important; height: auto !important; padding-top: 40px !important; padding-bottom: 40px !important; }
  .hero-inner { min-height: auto !important; height: auto !important; }

  /* ── HOMEPAGE: chapters ── */
  .ch-nav { padding: 16px 20px 0 !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; overflow-x: auto !important; }
  .ch-tab { padding: 8px 14px !important; border-left: none !important; border-bottom: 2px solid transparent !important; min-height: 44px !important; }
  .ch-tab.act { border-left: none !important; border-bottom-color: var(--a) !important; }

  /* ── HOMEPAGE: timeline ── */
  #tsvg { display: none !important; }
  .tl-weeks { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .tl-week { border-left: 3px solid rgba(232,144,58,.5) !important; padding: 12px 20px !important; margin-left: 16px !important; }
  .tl-outcomes { grid-template-columns: 1fr 1fr !important; }

  /* ── HOMEPAGE: work cards ── */
  .work-h-card.work-h-open .work-h-collapsed { display: none !important; }

  /* ── CASE STUDIES: hero visual hide on small ── */
  .cs-hero .rvr { display: none !important; }

  /* ── SHISHIR: stats ── */
  [class*="shishir"] [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── LEARNING CENTER ── */
  .lc-hero { min-height: auto !important; padding: 80px 20px 40px !important; }
  .lc-feat { grid-template-columns: 1fr !important; }
  .lc-grid { grid-template-columns: 1fr !important; }


  /* ══════════════════════════════════════════
     HOMEPAGE MOBILE FIXES (29 Mar 2026)
     ══════════════════════════════════════════ */

  /* ── Why AI Fails: inline 2-col → 1-col ── */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Work accordion: horizontal → vertical stack ── */
  .work-h-wrap {
    flex-direction: column !important;
    height: auto !important;
    margin-top: 16px !important;
  }
  .work-h-card {
    flex: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--bdr) !important;
    min-height: auto !important;
  }
  .work-h-card:last-child { border-bottom: none !important; }
  .work-h-card.work-h-open { min-height: auto !important; }
  .work-h-collapsed {
    padding: 10px 20px !important;
    position: relative !important;
  }
  .work-h-num { font-size: 24px !important; margin-bottom: 4px !important; }
  .work-h-expanded {
    position: relative !important;
    padding: 16px 20px 20px !important;
  }
  .work-h-card.work-h-open .work-h-collapsed { display: none !important; }

  /* ── Testimonials: featured quote ── */
  [style*="padding:48px 56px"] {
    padding: 28px 20px !important;
  }
  [style*="grid-template-columns:1fr auto"][style*="gap:40px"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ── Testimonials: 2-col → 1-col ── */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:14px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Testimonials: 3-col → 1-col ── */
  [style*="grid-template-columns:1fr 1fr 1fr"][style*="gap:14px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── FAQ: 2-col → 1-col, unstick left ── */
  [style*="grid-template-columns:1fr 1.3fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [style*="grid-template-columns:1fr 1.3fr"] > .rvl {
    position: static !important;
  }

  /* ── Chapter content: reduce padding ── */
  .ch-content {
    padding: 0 20px 40px 20px !important;
  }
  .ch-panel {
    padding: 32px 0 40px !important;
    min-height: auto !important;
  }

  /* ── Chapters nav: horizontal tabs (override hp-fixes column) ── */
  .ch-nav {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── Large inline headings: cap at 30px ── */
  h2[style*="font-size:48px"] {
    font-size: 30px !important;
    letter-spacing: -1px !important;
  }


  /* ── FIX 1: Ann pill not squeezed ── */
  .ann .ann-pill {
    display: inline-block !important;
    flex-shrink: 0 !important;
    padding: 3px 10px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* ── FIX 2: Footer social icons contained ── */
  .foot-socials-mobile {
    flex-wrap: wrap !important;
    padding: 24px 20px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── FIX 3: Footer CTA box left-aligned ── */
  .foot-inner > div:nth-child(4) .ba {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── FIX 4: FAQ CTA container reduce padding ── */
  [style*="margin-top:48px"][style*="border-radius:16px"][style*="background:var(--ag)"] {
    padding: 24px 20px !important;
  }
  [style*="margin-top:48px"][style*="border-radius:16px"][style*="background:var(--ag)"] .ba {
    font-size: 13px !important;
    padding: 12px 16px !important;
    white-space: nowrap !important;
  }

  /* ── FIX 5: Work collapsed card compact ── */
  .work-h-card:not(.work-h-open) {
    min-height: auto !important;
  }
  .work-h-card.work-h-open {
    min-height: auto !important;
  }
  .work-h-num {
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }

  /* ── FIX 6: Timeline dots center-aligned ── */
  .tl-out {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 16px !important;
  }
  .tl-dot {
    margin: 0 auto 8px !important;
  }

  /* ── FIX 7: What We Build cards not clipped ── */
  section.wrap {
    box-sizing: border-box !important;
    max-width: 100vw !important;
  }

  /* ── FIX 8: What We Build visual animations ── */
  @keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .rv [style*="JetBrains Mono"] > div,
  .rv [style*="font-family:'JetBrains Mono'"] > div {
    opacity: 0;
    animation: fadeSlideUp 0.4s ease forwards;
  }
  .rv [style*="JetBrains Mono"] > div:nth-child(1),
  .rv [style*="font-family:'JetBrains Mono'"] > div:nth-child(1) { animation-delay: 0.2s; }
  .rv [style*="JetBrains Mono"] > div:nth-child(2),
  .rv [style*="font-family:'JetBrains Mono'"] > div:nth-child(2) { animation-delay: 0.4s; }
  .rv [style*="JetBrains Mono"] > div:nth-child(3),
  .rv [style*="font-family:'JetBrains Mono'"] > div:nth-child(3) { animation-delay: 0.6s; }
  .rv [style*="yourplatform"] + div > div {
    opacity: 0;
    animation: fadeSlideUp 0.3s ease forwards;
  }
  .rv [style*="yourplatform"] + div > div:nth-child(1) { animation-delay: 0.2s; }
  .rv [style*="yourplatform"] + div > div:nth-child(2) { animation-delay: 0.35s; }
  .rv [style*="yourplatform"] + div > div:nth-child(3) { animation-delay: 0.5s; }
  .rv [style*="yourplatform"] + div > div:nth-child(4) { animation-delay: 0.65s; }
  .rv [style*="Test Suite"] div[style*="flex-direction:column"] > div {
    opacity: 0;
    animation: fadeSlideUp 0.3s ease forwards;
  }
  .rv [style*="Test Suite"] div[style*="flex-direction:column"] > div:nth-child(1) { animation-delay: 0.15s; }
  .rv [style*="Test Suite"] div[style*="flex-direction:column"] > div:nth-child(2) { animation-delay: 0.3s; }
  .rv [style*="Test Suite"] div[style*="flex-direction:column"] > div:nth-child(3) { animation-delay: 0.45s; }
  .rv [style*="Test Suite"] div[style*="flex-direction:column"] > div:nth-child(4) { animation-delay: 0.6s; }

  /* ── FIX 9: Hero bg/grid subtle on mobile ── */
  .hero-bg, .hero-grid {
    opacity: 0.15 !important;
  }

  /* ── FIX 10: Trust stats keep 3-col + visible border ── */
  .hero-inner [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .hero-inner [style*="box-shadow:inset"] {
    box-shadow: inset 0 0 0 1.5px rgba(247,242,232,.15) !important;
  }

  /* ── FOOTER (approved 29 Mar) ── */
  .foot { padding: 40px 20px 28px !important; }
  .foot-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px 20px !important; margin-bottom: 32px !important; }

  /* Brand column: logo + description, full-width, left-aligned */
  .foot-inner > div:first-child { grid-column: 1 / -1 !important; text-align: left !important; padding-bottom: 24px !important; border-bottom: 1px solid var(--bdr) !important; }
  .foot-inner > div:first-child svg[viewBox='0 0 1024 933'] { height: 44px !important; width: auto !important; }

  /* Description visible */
  .fdesc { display: block !important; font-size: 13px !important; color: var(--t3) !important; line-height: 1.6 !important; margin-bottom: 0 !important; }

  /* Hide: badge, contact details, desktop socials */
  .fbadge { display: none !important; }
  .foot-inner > div:first-child > div:last-child { display: none !important; }

  /* Column headings */
  .foot-inner .fch { font-size: 13px !important; font-weight: 700 !important; margin-bottom: 12px !important; color: var(--t1) !important; letter-spacing: 0.02em !important; }

  /* Column links */
  .foot-inner > div:nth-child(2) .fl,
  .foot-inner > div:nth-child(3) .fl { font-size: 14px !important; padding: 6px 0 !important; display: block !important; color: var(--t3) !important; line-height: 1.8 !important; }

  /* Get Started column: full-width, left-aligned */
  .foot-inner > div:nth-child(4) { grid-column: 1 / -1 !important; text-align: left !important; padding-top: 24px !important; border-top: 1px solid var(--bdr) !important; }
  .foot-inner > div:nth-child(4) .fch { text-align: left !important; }
  .foot-inner > div:nth-child(4) .fl { display: block !important; text-align: left !important; padding: 4px 0 !important; font-size: 14px !important; color: var(--t3) !important; }

  /* CTA card */
  .foot-inner > div:nth-child(4) > div[style*="margin-top"] { max-width: 320px !important; margin: 20px 0 0 !important; text-align: left !important; }

  /* Social icons row */
  .foot-socials-mobile { display: flex !important; justify-content: center !important; gap: 12px !important; padding: 24px 0 !important; border-top: 1px solid var(--bdr) !important; }
  .foot-socials-mobile .fsoc { width: 44px !important; height: 44px !important; border-radius: 10px !important; background: rgba(247,242,232,.04) !important; border: 1px solid rgba(247,242,232,.08) !important; }
  .foot-socials-mobile .fsoc svg { width: 18px !important; height: 18px !important; }

  /* Copyright bar */
  .fbot { text-align: center !important; padding-top: 20px !important; flex-direction: column !important; gap: 6px !important; border-top: none !important; }
  .fbot br { display: none !important; }
  .fbot .fcp { font-size: 11px !important; }
  .foot .fl { min-height: 44px !important; display: flex !important; align-items: center !important; }

  /* ── SCROLL/FLOAT ── */
  .scroll-top { min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; }
  .wa-float { bottom: 16px !important; right: 16px !important; width: 48px !important; height: 48px !important; }
  .cookie-banner { max-width: 100vw !important; box-sizing: border-box !important; }
  .cookie-inner { flex-direction: column !important; align-items: stretch !important; text-align: center !important; }
  body.cookie-visible .wa-float { bottom: 190px !important; }
  body.cookie-visible .scroll-top { bottom: 270px !important; }

  /* ── INPUTS ── */
  input, select, textarea { font-size: 16px !important; }

  /* ── RECAPTCHA ── */
  .grecaptcha-badge { visibility: hidden !important; }

  /* ── INLINE PADDING 72px OVERRIDES ── */
  [style*="padding:0 72px"],
  [style*="padding:28px 72px"],
  [style*="padding:32px 72px"],
  [style*="padding:48px 72px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   SMALL PHONE (≤480px)
   ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  h1.ph, .ph { font-size: 30px !important; }
  .wrap.sec { padding: 28px 16px !important; }
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .nav { padding: 0 12px !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
  .foot-inner { grid-template-columns: 1fr 1fr !important; gap: 20px 12px !important; }
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────────────────────
   IPHONE 14 (≤390px)
   ────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
  h1.ph, .ph { font-size: 26px !important; }
  .nav { padding: 0 10px !important; }
}

/* ──────────────────────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Mobile-only sections + AI Pilot overrides ── */
@media (max-width: 768px) {
  .mob-only { display: block !important; }
  #pilot-calendar { padding: 60px 0 !important; }
  #pilot-calendar .wrap { padding: 0 20px !important; }
  [style*="repeat(7,1fr)"] { display: none !important; }
}

@media (max-width: 768px) {
  .desk-only { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE FIXES — 29 Mar 2026 — APPENDED LAST (wins cascade)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* FIX 1: Ann pill capsule shape */
  a.ann .ann-pill {
    display: inline-block !important;
    flex-shrink: 0 !important;
    padding: 3px 10px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    border-radius: 20px !important;
  }

  /* FIX 2: Footer social icons in frame */
  .foot-socials-mobile {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 24px 20px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-top: 1px solid var(--bdr) !important;
  }

  /* FIX 3: Footer CTA left-aligned */
  .foot-inner > div:nth-child(4) .ba {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* FIX 4: FAQ CTA box less padding */
  [style*="margin-top:48px"][style*="background:var(--ag)"] {
    padding: 24px 20px !important;
  }
  [style*="margin-top:48px"][style*="background:var(--ag)"] .ba {
    font-size: 13px !important;
    padding: 12px 16px !important;
    white-space: nowrap !important;
  }

  /* FIX 5: Work collapsed cards compact */
  .work-h-wrap .work-h-card {
    min-height: auto !important;
  }
  .work-h-wrap .work-h-card.work-h-open {
    min-height: auto !important;
  }
  .work-h-wrap .work-h-collapsed {
    padding: 8px 16px !important;
  }
  .work-h-wrap .work-h-num {
    font-size: 18px !important;
    margin-bottom: 0 !important;
  }
  .work-h-wrap .work-h-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  .work-h-wrap .work-h-cat {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }
  /* Hide the stat + status on collapsed cards to save space */
  .work-h-card:not(.work-h-open) .work-h-collapsed > div[style*="font-family"] {
    display: none !important;
  }
  .work-h-card:not(.work-h-open) .work-h-collapsed > div[style*="font-size:11px"] {
    display: none !important;
  }

  /* FIX 6: Timeline dots centered */
  .tl-out {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 16px !important;
  }
  .tl-dot {
    margin: 0 auto 8px !important;
  }

  /* FIX 7: What We Build not clipped */
  section.wrap {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: visible !important;
  }

  /* FIX 9: Hero bg/grid subtle */
  .hero-bg, .hero-grid {
    opacity: 0.15 !important;
  }

  /* FIX 10: Trust stats 3-col + border */
  .hero-inner [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .hero-inner [style*="box-shadow:inset"] {
    box-shadow: inset 0 0 0 1.5px rgba(247,242,232,.15) !important;
  }
}

/* ══ FINAL FIXES — 29 Mar v2 ══ */
@media (max-width: 768px) {
  /* Work cards: hide expanded div on collapsed cards completely */
  .work-h-card:not(.work-h-open) .work-h-expanded {
    display: none !important;
  }
  
  /* Timeline dots: visible, centered */
  .tl-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 0 8px !important;
  }
  .tl-out {
    padding: 16px !important;
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════════════
   ANIMATED SERVICE VISUALS — Mobile (29 Mar 2026)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--t1);
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  line-height:1.5;
  padding:20px 16px;
  max-width:414px;
  margin:0 auto;
  overflow-x:hidden;
}
h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:22px;color:var(--t1);margin-bottom:6px}
.section-label{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--a);margin-bottom:16px}

/* --- Card wrapper --- */

/* --- Base animation element --- */
.sa{
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .5s ease,transform .5s ease;
}
.in-view .sa{
  opacity:1;
  transform:translateX(0);
}

/* --- Named delay classes --- */
.sa-d1{transition-delay:.1s}
.sa-d2{transition-delay:.2s}
.sa-d3{transition-delay:.3s}
.sa-d4{transition-delay:.4s}
.sa-d5{transition-delay:.5s}
.sa-d6{transition-delay:.6s}
.sa-d7{transition-delay:.7s}
.sa-d8{transition-delay:.8s}
.sa-d9{transition-delay:.9s}
.sa-d10{transition-delay:1s}
.sa-d11{transition-delay:1.1s}
.sa-d12{transition-delay:1.2s}

/* =====================================================
   01 — AI: Neural Network
   ===================================================== */
.nn-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:8px;
  width:100%;
  height:120px;
  position:relative;
  margin-bottom:16px;
}
.nn-node{
  width:10px;height:10px;
  border-radius:50%;
  background:var(--t4);
  justify-self:center;align-self:center;
  position:relative;
  z-index:2;
}
/* Pulse animations — paused until in-view */
.nn-node{animation:nnPulse 2.4s ease-in-out infinite;animation-play-state:paused}
.in-view .nn-node{animation-play-state:running}

.sa-ai-1 .nn-node{animation-delay:0s}
.sa-ai-2 .nn-node{animation-delay:.3s}
.sa-ai-3 .nn-node{animation-delay:.6s}
.sa-ai-4 .nn-node{animation-delay:.15s}
.sa-ai-5 .nn-node{animation-delay:.45s}
.sa-ai-6 .nn-node{animation-delay:.75s}
.sa-ai-7 .nn-node{animation-delay:.1s}
.sa-ai-8 .nn-node{animation-delay:.4s}
.sa-ai-9 .nn-node{animation-delay:.7s}
.sa-ai-10 .nn-node{animation-delay:.2s}
.sa-ai-11 .nn-node{animation-delay:.5s}
.sa-ai-12 .nn-node{animation-delay:.8s}
.sa-ai-13 .nn-node{animation-delay:.05s}
.sa-ai-14 .nn-node{animation-delay:.35s}
.sa-ai-15 .nn-node{animation-delay:.65s}

@keyframes nnPulse{
  0%,100%{background:var(--t4);box-shadow:none;transform:scale(1)}
  50%{background:var(--a);box-shadow:0 0 8px var(--ab);transform:scale(1.3)}
}

/* Connection lines via SVG */
.nn-svg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  z-index:1;pointer-events:none;
}
.nn-line{stroke:var(--bdr2);stroke-width:1;fill:none}

/* Packets traveling along paths */
.nn-packet{
  r:3;fill:var(--a);
  opacity:0;
  filter:drop-shadow(0 0 4px var(--at));
}
.nn-packet{animation:nnPacketMove 3s linear infinite;animation-play-state:paused}
.in-view .nn-packet{animation-play-state:running}
.nn-pkt-1{animation-delay:0s}
.nn-pkt-2{animation-delay:.6s}
.nn-pkt-3{animation-delay:1.2s}
.nn-pkt-4{animation-delay:1.8s}
.nn-pkt-5{animation-delay:.3s}
.nn-pkt-6{animation-delay:.9s}
@keyframes nnPacketMove{
  0%{offset-distance:0%;opacity:0}
  5%{opacity:1}
  95%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}

/* Log ticker */
.nn-log{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  line-height:1.8;
  color:var(--t3);
  border-top:1px solid var(--bdr);
  padding-top:10px;
}
.nn-log-line{
  opacity:0;
  transform:translateY(4px);
  transition:opacity .4s ease,transform .4s ease;
}
.in-view .sa-ai-log1{opacity:1;transform:translateY(0);transition-delay:.8s}
.in-view .sa-ai-log2{opacity:1;transform:translateY(0);transition-delay:1.1s}
.in-view .sa-ai-log3{opacity:1;transform:translateY(0);transition-delay:1.4s}
.nn-log-line .nn-ts{color:var(--t4)}
.nn-log-line .nn-label{color:var(--a)}
.nn-log-line .nn-val{color:var(--g)}

/* =====================================================
   02 — Web: Browser with Code Typing
   ===================================================== */
.browser{
  background:var(--bg3);
  border:1px solid var(--bdr);
  border-radius:10px;
  overflow:hidden;
}
.browser-chrome{
  display:flex;align-items:center;
  padding:10px 12px;
  background:var(--bg);
  border-bottom:1px solid var(--bdr);
  gap:8px;
}
.browser-dots{display:flex;gap:5px}
.browser-dot{width:8px;height:8px;border-radius:50%}
.browser-dot--r{background:#EF4444}
.browser-dot--y{background:#FBBF24}
.browser-dot--g{background:#22C55E}
.browser-url{
  flex:1;
  background:var(--bg3);
  border:1px solid var(--bdr);
  border-radius:6px;
  padding:4px 10px;
  font-family:'DM Sans',sans-serif;
  font-size:10px;
  color:var(--t3);
}
.browser-body{padding:14px;display:flex;gap:12px}
.browser-content{flex:1}
.browser-bar{
  height:8px;
  border-radius:4px;
  background:var(--bgc);
  margin-bottom:8px;
  position:relative;
  overflow:hidden;
}
.browser-bar::after{
  content:'';
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(247,242,232,.06),transparent);
  animation:shimmer 2s ease-in-out infinite;
  animation-play-state:paused;
}
.in-view .browser-bar::after{animation-play-state:running}
.browser-bar--w70{width:70%}
.browser-bar--w90{width:90%}
.browser-bar--w50{width:50%}
.browser-bar--w80{width:80%}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.sa-web-bar1{transition-delay:.2s}
.sa-web-bar2{transition-delay:.3s}
.sa-web-bar3{transition-delay:.4s}
.sa-web-bar4{transition-delay:.5s}

/* Code typing */
.browser-code{
  width:45%;
  background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:8px;
  padding:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  line-height:1.7;
  color:var(--t3);
  position:relative;
  overflow:hidden;
}
.code-line{
  white-space:nowrap;
  overflow:hidden;
  width:0;
  transition:none;
}
.in-view .sa-web-code1{animation:typeIn .6s steps(20) .6s forwards}
.in-view .sa-web-code2{animation:typeIn .6s steps(20) 1s forwards}
.in-view .sa-web-code3{animation:typeIn .6s steps(20) 1.4s forwards}
.in-view .sa-web-code4{animation:typeIn .6s steps(20) 1.8s forwards}
.in-view .sa-web-code5{animation:typeIn .6s steps(20) 2.2s forwards}
@keyframes typeIn{
  from{width:0;opacity:1}
  to{width:100%;opacity:1}
}
.code-kw{color:var(--a)}
.code-str{color:var(--g)}
.code-fn{color:var(--sw)}

.code-cursor{
  display:inline-block;
  width:1px;height:12px;
  background:var(--a);
  vertical-align:middle;
  margin-left:2px;
  animation:blink 1s step-end infinite;
  animation-play-state:paused;
}
.in-view .code-cursor{animation-play-state:running}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* =====================================================
   03 — Mobile: Phone Mockups
   ===================================================== */
.phones-row{
  display:flex;
  justify-content:center;
  gap:10px;
  padding:10px 0;
}
.phone-frame{
  width:90px;height:160px;
  background:var(--bg);
  border:1.5px solid var(--bdr2);
  border-radius:14px;
  padding:6px;
  position:relative;
  overflow:hidden;
}
.phone-frame--center{transform:translateY(-8px)}
.phone-frame--left{transform:rotate(-5deg) translateY(4px)}
.phone-frame--right{transform:rotate(5deg) translateY(4px)}
.phone-notch{
  width:36px;height:5px;
  background:var(--bg3);
  border-radius:3px;
  margin:2px auto 6px;
}
.phone-screen{font-size:7px;color:var(--t3);padding:2px 4px}
.phone-noti{
  background:var(--bgc);
  border:1px solid var(--bdr);
  border-radius:6px;
  padding:4px 6px;
  margin-bottom:4px;
  font-size:7px;
  color:var(--t2);
}
.phone-noti-dot{
  display:inline-block;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--a);
  margin-right:3px;
  vertical-align:middle;
}
.phone-chart-bar{
  display:inline-block;
  width:8px;
  border-radius:2px 2px 0 0;
  background:var(--ab);
  margin-right:2px;
  vertical-align:bottom;
}
.phone-chart-bar--active{background:var(--a)}
.phone-metric{
  font-family:'Space Grotesk',sans-serif;
  font-size:14px;font-weight:700;
  color:var(--t1);
  margin-bottom:2px;
}
.phone-metric-label{font-size:6px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}

/* popIn animation */
.sa-mob-1{transition-delay:.15s}
.sa-mob-2{transition-delay:.3s}
.sa-mob-3{transition-delay:.45s}
.in-view .sa-mob-pop{
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.sa-mob-pop{opacity:0;transform:scale(.85)}
.in-view .sa-mob-1.sa-mob-pop{animation-delay:.15s}
.in-view .sa-mob-2.sa-mob-pop{animation-delay:.3s}
.in-view .sa-mob-3.sa-mob-pop{animation-delay:.45s}
@keyframes popIn{
  from{opacity:0;transform:scale(.85) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* =====================================================
   04 — UI/UX: Wireframe with Cursor
   ===================================================== */
.wf-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto;
  gap:8px;
  position:relative;
  padding:8px;
  background:
    radial-gradient(circle,var(--bdr) 1px,transparent 1px);
  background-size:16px 16px;
  border-radius:8px;
}
.wf-block{
  background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:8px;
  padding:10px 8px;
  font-family:'DM Sans',sans-serif;
  font-size:9px;
  font-weight:500;
  color:var(--t3);
  text-align:center;
  transition:border-color .4s ease,box-shadow .4s ease;
  position:relative;
}
.wf-block--wide{grid-column:1/-1}
.wf-block--tall{grid-row:span 2}

/* Cursor */
.wf-cursor{
  position:absolute;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--a);
  box-shadow:0 0 0 4px var(--ab),0 0 12px var(--at);
  z-index:10;
  pointer-events:none;
  opacity:0;
  animation:wfCursorMove 8s ease-in-out infinite;
  animation-play-state:paused;
}
.in-view .wf-cursor{animation-play-state:running}

/* Cursor movement keyframes — visits each component */
@keyframes wfCursorMove{
  0%{top:18px;left:25%;opacity:0}
  4%{opacity:1}
  /* Navbar */
  5%,14%{top:18px;left:50%;opacity:1}
  /* Hero */
  18%,27%{top:68px;left:25%;opacity:1}
  /* Sidebar */
  31%,40%{top:120px;left:75%;opacity:1}
  /* Card Grid */
  44%,53%{top:168px;left:25%;opacity:1}
  /* Metrics */
  57%,66%{top:168px;left:75%;opacity:1}
  /* Footer */
  70%,82%{top:218px;left:50%;opacity:1}
  88%{opacity:1}
  92%{opacity:0;top:218px;left:50%}
  100%{opacity:0;top:18px;left:25%}
}

/* Component highlight sync with cursor */
.wf-block{animation:none}
.in-view .sa-ux-navbar .wf-block{animation:wfHighlight 8s ease-in-out infinite}
.in-view .sa-ux-hero .wf-block{animation:wfHighlight 8s ease-in-out infinite;animation-delay:-6.56s}
.in-view .sa-ux-sidebar .wf-block{animation:wfHighlight 8s ease-in-out infinite;animation-delay:-5.52s}
.in-view .sa-ux-cards .wf-block{animation:wfHighlight 8s ease-in-out infinite;animation-delay:-4.48s}
.in-view .sa-ux-metrics .wf-block{animation:wfHighlight 8s ease-in-out infinite;animation-delay:-3.44s}
.in-view .sa-ux-footer .wf-block{animation:wfHighlight 8s ease-in-out infinite;animation-delay:-2.4s}
@keyframes wfHighlight{
  0%,3%{border-color:var(--bdr);box-shadow:none}
  5%{border-color:var(--at);box-shadow:0 0 12px var(--ag),inset 0 0 8px var(--ag)}
  14%{border-color:var(--at);box-shadow:0 0 12px var(--ag),inset 0 0 8px var(--ag)}
  18%{border-color:var(--bdr);box-shadow:none}
  100%{border-color:var(--bdr);box-shadow:none}
}

.sa-ux-1{transition-delay:.1s}
.sa-ux-2{transition-delay:.2s}
.sa-ux-3{transition-delay:.3s}
.sa-ux-4{transition-delay:.35s}
.sa-ux-5{transition-delay:.4s}
.sa-ux-6{transition-delay:.5s}

/* =====================================================
   05 — QA: Test Runner Terminal
   ===================================================== */
.term{
  background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:10px;
  overflow:hidden;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
}
.term-bar{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;
  background:var(--bg3);
  border-bottom:1px solid var(--bdr);
}
.term-bar-dot{width:6px;height:6px;border-radius:50%;background:var(--t4)}
.term-bar-title{font-size:9px;color:var(--t3);margin-left:auto}
.term-body{padding:12px}

/* Progress bar */
.qa-progress{
  height:6px;
  background:var(--bgc);
  border-radius:3px;
  margin-bottom:14px;
  overflow:hidden;
}
.qa-progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--a),var(--g));
  border-radius:3px;
  animation:qaFill 3s ease-out forwards;
  animation-play-state:paused;
}
.in-view .qa-progress-fill{animation-play-state:running;animation-delay:.3s}
@keyframes qaFill{
  0%{width:0%}
  100%{width:100%}
}

/* Test rows */
.qa-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 0;
  border-bottom:1px solid var(--bdr);
  opacity:0;
  transform:translateX(-6px);
}
.in-view .qa-row{
  animation:qaSlideIn .4s ease forwards;
}
.sa-qa-1{animation-delay:.5s !important}
.sa-qa-2{animation-delay:.9s !important}
.sa-qa-3{animation-delay:1.3s !important}
.sa-qa-4{animation-delay:1.7s !important}
.sa-qa-5{animation-delay:2.1s !important}
@keyframes qaSlideIn{
  from{opacity:0;transform:translateX(-6px)}
  to{opacity:1;transform:translateX(0)}
}

.qa-dot{
  width:7px;height:7px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--a);
}
.in-view .qa-dot{animation:qaDotPass 1s ease forwards}
.sa-qa-1 .qa-dot{animation-delay:.8s !important}
.sa-qa-2 .qa-dot{animation-delay:1.2s !important}
.sa-qa-3 .qa-dot{animation-delay:1.6s !important}
.sa-qa-4 .qa-dot{animation-delay:2.0s !important}
.sa-qa-5 .qa-dot{animation-delay:2.4s !important}
@keyframes qaDotPass{
  0%{background:var(--a);box-shadow:0 0 4px var(--at)}
  100%{background:var(--g);box-shadow:0 0 4px rgba(34,197,94,.3)}
}

.qa-name{color:var(--t2);flex:1}
.qa-time{
  color:var(--t4);
  font-size:9px;
  opacity:0;
}
.in-view .qa-time{animation:qaTimeIn .3s ease forwards}
.sa-qa-1 .qa-time{animation-delay:1s !important}
.sa-qa-2 .qa-time{animation-delay:1.4s !important}
.sa-qa-3 .qa-time{animation-delay:1.8s !important}
.sa-qa-4 .qa-time{animation-delay:2.2s !important}
.sa-qa-5 .qa-time{animation-delay:2.6s !important}
@keyframes qaTimeIn{
  from{opacity:0}to{opacity:1}
}

/* Summary row */
.qa-summary{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  opacity:0;
}
.in-view .qa-summary{animation:qaSlideIn .4s ease 2.8s forwards}
.qa-pass{color:var(--g)}
.qa-total{color:var(--t3)}

/* =====================================================
   06 — SEO: Rankings + Traffic Chart
   ===================================================== */
.seo-rankings{margin-bottom:16px}
.seo-row{
  display:flex;align-items:center;gap:8px;
  padding:7px 0;
  border-bottom:1px solid var(--bdr);
  opacity:0;
  transform:translateX(-6px);
}
.in-view .seo-row{animation:seoSlideIn .4s ease forwards}
.sa-seo-1{animation-delay:.2s !important}
.sa-seo-2{animation-delay:.4s !important}
.sa-seo-3{animation-delay:.6s !important}
.sa-seo-4{animation-delay:.8s !important}
@keyframes seoSlideIn{
  from{opacity:0;transform:translateX(-6px)}
  to{opacity:1;transform:translateX(0)}
}

.seo-kw{
  flex:1;
  font-size:11px;
  color:var(--t2);
}
.seo-pos{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--t1);
  width:32px;
  text-align:right;
}
.seo-change{
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;
  font-weight:500;
  background:rgba(34,197,94,.12);
  color:var(--g);
  padding:2px 6px;
  border-radius:4px;
  opacity:0;
  transform:scale(.8);
}
.in-view .seo-change{animation:seoBadgeIn .3s ease forwards}
.sa-seo-1 .seo-change{animation-delay:.5s !important}
.sa-seo-2 .seo-change{animation-delay:.7s !important}
.sa-seo-3 .seo-change{animation-delay:.9s !important}
.sa-seo-4 .seo-change{animation-delay:1.1s !important}
@keyframes seoBadgeIn{
  from{opacity:0;transform:scale(.8)}
  to{opacity:1;transform:scale(1)}
}

/* Traffic chart */
.seo-chart{
  background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:10px;
  padding:14px;
}
.seo-chart-header{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:10px;
}
.seo-chart-label{font-size:11px;color:var(--t3)}
.seo-chart-pct{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--g);
  opacity:0;
}
.in-view .seo-chart-pct{animation:seoCountIn .6s ease 1.2s forwards}
@keyframes seoCountIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

.seo-sparkline{width:100%;height:60px}
.seo-sparkline-path{
  fill:none;
  stroke:var(--g);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:300;
  stroke-dashoffset:300;
  animation:seoDraw 2s ease forwards;
  animation-play-state:paused;
}
.in-view .seo-sparkline-path{animation-play-state:running;animation-delay:.4s}
@keyframes seoDraw{
  from{stroke-dashoffset:300}
  to{stroke-dashoffset:0}
}
.seo-sparkline-fill{
  fill:url(#seoGrad);
  opacity:0;
}
.in-view .seo-sparkline-fill{animation:seoFadeIn .6s ease 2s forwards}
@keyframes seoFadeIn{from{opacity:0}to{opacity:.15}}

.seo-chart-footer{
  display:flex;gap:12px;
  margin-top:8px;
  font-size:9px;
  color:var(--t3);
}
.seo-chart-dot{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  margin-right:4px;
  vertical-align:middle;
}
.seo-chart-dot--g{background:var(--g)}
.seo-chart-dot--a{background:var(--a)}
}

/* ══ FIXES: AI packets + UX cursor (29 Mar) ══ */
@media (max-width: 768px) {
  /* FIX: AI packets visible — SVG animateMotion handles movement */
  .nn-packet {
    opacity: 0.8 !important;
    r: 3 !important;
    fill: var(--a) !important;
    filter: drop-shadow(0 0 6px var(--at)) !important;
  }

  /* FIX: UX cursor stays inside card */
  .wf-grid {
    position: relative !important;
    overflow: hidden !important;
    min-height: 200px !important;
  }

  /* Override cursor keyframes with percentage-based values */
  @keyframes wfCursorMove {
    0%   { top:8%; left:25%; opacity:0; }
    4%   { opacity:1; }
    5%,14%   { top:8%; left:50%; opacity:1; }
    18%,27%  { top:30%; left:25%; opacity:1; }
    31%,40%  { top:55%; left:75%; opacity:1; }
    44%,53%  { top:72%; left:25%; opacity:1; }
    57%,66%  { top:72%; left:75%; opacity:1; }
    70%,82%  { top:90%; left:50%; opacity:1; }
    88%  { opacity:1; }
    92%  { opacity:0; top:90%; left:50%; }
    100% { opacity:0; top:8%; left:25%; }
  }
}

/* ══ FIX: AI neural network node alignment ══ */
@media (max-width: 768px) {
  .nn-grid {
    gap: 0 !important;
    height: 120px !important;
    padding: 0 !important;
  }
}

/* ══ FIX: Services orbital — show on mobile, scaled down ══ */
@media (max-width: 768px) {
  .svc-orbital {
    display: block !important;
    max-width: 260px !important;
    margin: 0 auto !important;
  }
  .svc-orbit-node {
    font-size: 9px !important;
    padding: 4px 8px !important;
  }
  .svc-orbit-node span {
    font-size: 7px !important;
  }
  .svc-orbit-core {
    width: 80px !important;
    height: 80px !important;
  }
  .svc-orbit-core svg {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ══ FIX: Services orbital proper mobile containment ══ */
@media (max-width: 768px) {
  .svc-orbital {
    display: block !important;
    max-width: 220px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    transform: scale(0.85) !important;
    transform-origin: center center !important;
  }
  .svc-orbit-node {
    font-size: 8px !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
  }
  .svc-orbit-node span {
    display: none !important;
  }
  .svc-orbit-core {
    width: 70px !important;
    height: 70px !important;
  }
  .svc-orbit-core svg {
    width: 30px !important;
    height: 30px !important;
  }
  /* Hide connecting SVG lines on mobile — too cluttered */
  .svc-orbit-lines {
    display: none !important;
  }

  /* FIX: Footer social icons in frame */
  .foot-socials-mobile .fsoc {
    width: 40px !important;
    height: 40px !important;
  }
  .foot-socials-mobile {
    padding: 20px 20px !important;
    overflow: hidden !important;
  }
}

/* ══ FINAL: Services orbital mobile — clean override ══ */
@media (max-width: 768px) {
  /* Show orbital, contained but visible */
  .svc-orbital {
    display: block !important;
    max-width: 280px !important;
    margin: 20px auto 0 !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Show rings — they ARE the orbital */
  .svc-orbit-ring {
    display: block !important;
  }

  /* Show connecting lines + traveling dots */
  .svc-orbit-lines {
    display: block !important;
  }

  /* Core smaller */
  .svc-orbit-core {
    width: 80px !important;
    height: 80px !important;
  }
  .svc-orbit-core svg {
    width: 32px !important;
    height: 32px !important;
  }

  /* Node labels — compact, no overflow */
  .svc-orbit-node {
    font-size: 9px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    max-width: none !important;
    text-align: center !important;
  }
  /* Hide subtitles on mobile to save space */
  .svc-orbit-node span {
    display: none !important;
  }
}

/* ══ Orbital bigger on mobile ══ */
@media (max-width: 768px) {
  .svc-orbital {
    max-width: 340px !important;
  }
  .svc-orbit-core {
    width: 100px !important;
    height: 100px !important;
  }
  .svc-orbit-core svg {
    width: 40px !important;
    height: 40px !important;
  }
  .svc-orbit-node {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
}

/* ══ Orbital node spacing on mobile ══ */
@media (max-width: 768px) {
  /* Push top/bottom nodes further from center */
  .svc-orbit-node[style*="top:2%"] {
    top: -8% !important;
  }
  .svc-orbit-node[style*="bottom:2%"] {
    bottom: -8% !important;
  }
  /* Push side nodes further out */
  .svc-orbit-node[style*="top:18%"][style*="right:"] {
    top: 12% !important;
    right: -18% !important;
  }
  .svc-orbit-node[style*="bottom:18%"][style*="right:"] {
    bottom: 12% !important;
    right: -16% !important;
  }
  .svc-orbit-node[style*="bottom:18%"][style*="left:-"] {
    bottom: 12% !important;
    left: -18% !important;
  }
  .svc-orbit-node[style*="top:18%"][style*="left:-"] {
    top: 12% !important;
    left: -18% !important;
  }
}

/* ══ Orbital full width on mobile ══ */
@media (max-width: 768px) {
  .svc-hero .hero-inner > .rv.d2 {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding: 20px 0 !important;
  }
  .svc-orbital {
    max-width: 100% !important;
    width: 90vw !important;
    max-height: 90vw !important;
  }
  .svc-orbit-core {
    width: 110px !important;
    height: 110px !important;
  }
  .svc-orbit-core svg {
    width: 44px !important;
    height: 44px !important;
  }
  .svc-orbit-node {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
}


/* ═══ Services page mobile — safe rules only ═══ */
@media screen and (max-width: 768px) {
  /* Orbital visible and sized */
  .svc-orbital { max-width: 280px !important; overflow: visible !important; }
  .svc-hero { overflow: visible !important; }

  /* Trust stats horizontal */
  .svc-trust [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  /* Visuals full width */
  .svc-visual { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  .svc-section > div:last-child { width: 100% !important; }
}


/* Service sections visible on mobile */
@media screen and (max-width: 768px) {
  .svc-section, .svc-section.rv,
  .svc-section > *, .svc-section.rv > *,
  .svc-dark-band .rv, .wrap.sec .rv, section .rv {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}


/* Dark band sections: card border on mobile */
@media screen and (max-width: 768px) {
  .svc-dark-band {
    border: 1px solid rgba(247,242,232,.06) !important;
    border-radius: 14px !important;
    margin: 0 20px 16px !important;
    padding: 28px 20px !important;
  }
}


/* ═══ Footer socials — clean override (Chrome fix) ═══ */
.foot-socials-mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  .foot-socials-mobile {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 20px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-top: 1px solid var(--bdr) !important;
  }
  .foot-socials-mobile .fsoc {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(247,242,232,.04) !important;
    border: 1px solid rgba(247,242,232,.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .foot-socials-mobile .fsoc svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
  }
}


/* ═══ Search box wider + CTA centering ═══ */
@media screen and (max-width: 768px) {
  .mob-search {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .mob-search input {
    width: 100% !important;
    font-size: 16px !important;
  }
  /* CTA section: force center everything */
  .cta-sec {
    text-align: center !important;
    align-items: center !important;
  }
  .cta-h {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .cta-sub {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .cta-btns {
    justify-content: center !important;
  }
}


/* Footer Get Started column: stack vertically */
.foot-inner > div:nth-child(4) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.foot-inner > div:nth-child(4) .fl {
  padding: 6px 0 !important;
  line-height: 1.8 !important;
  min-height: auto !important;
}

/* ── Logo responsive scaling (new horizontal lockup) ── */
@media (max-width: 768px) {
  .nav-logo img, .site-logo-img { height: 30px !important; max-width: 128px !important; }
}
@media (max-width: 480px) {
  .nav-logo img, .site-logo-img { height: 28px !important; max-width: 120px !important; }
}

/* ══════════════════════════════════════════════════════════
   CASE STUDY INNER PAGES — Mobile Fixes (31 Mar 2026)
   Pages: document-ai, lead-intelligence, financial-planning-ai, mobile-app
   ══════════════════════════════════════════════════════════ */

/* ── TABLET (≤1024px) ── */
@media (max-width: 1024px) {

  /* Hero section: reduce excessive top padding (inline 128-140px) */
  .page-child section:first-of-type {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
  }

  /* cs-hero-grid: ensure stacking (backup for main-v3 rule) */
  .cs-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Results section: reduce outer padding from 72px */
  .page-child section > div[style*="padding:0 72px"],
  .page-child section > div[style*="padding: 0 72px"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Results stat numbers: shrink from 52px */
  .page-child [style*="repeat(4,1fr)"] [style*="font-size:52px"] {
    font-size: 36px !important;
  }

  /* Results stat padding: tighten */
  .page-child [style*="repeat(4,1fr)"] > div {
    padding: 24px 16px !important;
  }

  /* Mid-page CTA: reduce 72px side padding */
  .page-child section[style*="padding:32px 72px"] {
    padding: 24px 32px !important;
  }

  /* Mid-page CTA inner: stack on tablet */
  .page-child section[style*="padding:32px 72px"] > div,
  .page-child section[style*="padding:24px 32px"] > div {
    flex-wrap: wrap !important;
  }

  /* Bottom CTA: reduce excessive 96px padding */
  .page-child section[style*="padding:96px 0"] {
    padding: 56px 0 !important;
  }

  /* Pipeline system steps: keep grid but reduce gap */
  .page-child [style*="grid-template-columns:auto 1fr"] {
    gap: 14px !important;
  }
}

/* ── PHONE (≤768px) ── */
@media (max-width: 768px) {

  /* Hero: tighter padding */
  .page-child section:first-of-type {
    padding-top: 72px !important;
    padding-bottom: 32px !important;
  }

  /* Hero h1: handled by .ph rules already, but ensure line breaks */
  .cs-hero-grid h1.ph {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

  /* Hero key metrics: wrap and fill width */
  .cs-hero-grid [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"] {
    gap: 10px !important;
  }
  .cs-hero-grid [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"] > div {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
  }

  /* Hero description: smaller */
  .cs-hero-grid p[style*="font-size:18px"] {
    font-size: 15px !important;
  }

  /* Results section: further padding reduction */
  .page-child section > div[style*="padding:0 72px"],
  .page-child section > div[style*="padding: 0 72px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Results stat numbers: smaller on phone */
  .page-child [style*="repeat(4,1fr)"] [style*="font-size:52px"] {
    font-size: 28px !important;
  }

  /* Results grid: 2 cols at 768px */
  .page-child [style*="repeat(4,1fr)"][style*="gap:0"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  /* Fix border-right on results when in 2-col: remove right border on even items */
  .page-child [style*="repeat(4,1fr)"][style*="gap:0"] > div:nth-child(2n) {
    border-right: none !important;
  }
  /* Add bottom border to first row */
  .page-child [style*="repeat(4,1fr)"][style*="gap:0"] > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--bdr) !important;
  }

  /* Mid-page CTA: stack button below text */
  .page-child section[style*="padding:32px 72px"],
  .page-child section[style*="padding:24px 32px"] {
    padding: 20px 20px !important;
  }

  /* Bottom CTA padding */
  .page-child section[style*="padding:96px 0"],
  .page-child section[style*="padding:56px 0"] {
    padding: 40px 20px !important;
  }

  /* Pipeline system: stack auto 1fr grids */
  .page-child [style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .page-child [style*="grid-template-columns:auto 1fr"] > div:first-child {
    margin: 0 auto !important;
  }

  /* Approach 2x2 grid: stack to 1 col */
  .page-child [style*="repeat(2,1fr)"][style*="gap:16px"] {
    grid-template-columns: 1fr !important;
  }

  /* Approach cards: reduce padding */
  .page-child [style*="repeat(2,1fr)"] > div[style*="padding:28px"] {
    padding: 20px !important;
  }

  /* Governance/ownership .two sections: handled by main CSS collapse */

  /* Ownership 2x2 grid: keep at 2 cols on phone for compact items */

  /* Related projects: single column */
  .page-child [style*="repeat(3,1fr)"][style*="gap:16px"] {
    grid-template-columns: 1fr !important;
  }

  /* FAQ section: unstick handled globally, reduce gap */
  .page-child [style*="1fr 1.3fr"] {
    gap: 24px !important;
  }

  /* FAQ details: tighter padding */
  .page-child details[style*="padding:20px 24px"] {
    padding: 16px !important;
  }

  /* Before/After card: ensure readable */
  .page-child [style*="Before KORIX"] ~ div,
  .page-child div[style*="padding:20px"][style*="background:var(--bg2)"] {
    padding: 16px !important;
  }
}

/* ── SMALL PHONE (≤480px) ── */
@media (max-width: 480px) {

  /* Hero: minimal padding */
  .page-child section:first-of-type {
    padding-top: 64px !important;
    padding-bottom: 24px !important;
  }

  /* Hero h1 */
  .cs-hero-grid h1.ph {
    font-size: 28px !important;
  }

  /* Hero metrics: stack to 2x2 */
  .cs-hero-grid [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"] > div {
    flex: 1 1 calc(50% - 5px) !important;
    padding: 10px 12px !important;
  }
  .cs-hero-grid [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"] > div [style*="font-size:24px"] {
    font-size: 20px !important;
  }

  /* Results stat numbers */
  .page-child [style*="repeat(4,1fr)"] [style*="font-size:52px"] {
    font-size: 24px !important;
  }

  /* Results stats: single column */
  .page-child [style*="repeat(4,1fr)"][style*="gap:0"] {
    grid-template-columns: 1fr !important;
  }
  .page-child [style*="repeat(4,1fr)"][style*="gap:0"] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--bdr) !important;
  }
  .page-child [style*="repeat(4,1fr)"][style*="gap:0"] > div:last-child {
    border-bottom: none !important;
  }

  /* Pipeline split: stack auto-approved / human-review */
  .page-child [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] {
    grid-template-columns: 1fr !important;
  }

  /* Bottom CTA: tighter */
  .page-child section[style*="padding:96px 0"],
  .page-child section[style*="padding:56px 0"],
  .page-child section[style*="padding:40px 20px"] {
    padding: 32px 16px !important;
  }

  /* CTA heading: smaller */
  .page-child .cta-h {
    font-size: 26px !important;
  }
}

/* ── IPHONE 14 (≤390px) ── */
@media (max-width: 390px) {
  .cs-hero-grid h1.ph {
    font-size: 24px !important;
  }
  .cs-hero-grid [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"] > div [style*="font-size:24px"] {
    font-size: 18px !important;
  }
}