/* ==========================================================================
   RESPONSIVE.CSS — mobile + tablet polish, loaded LAST so it wins.
   Goal: tighter vertical rhythm, every grid collapses cleanly, no overflow.
   ========================================================================== */

/* ==========================================================================
   GLOBAL DENSITY + PREMIUM POLISH (applies all screen sizes)
   Tighter, more confident spacing + refined depth = premium feel.
   ========================================================================== */

/* --- Tighter section rhythm everywhere (was 72-110px → 64px) --- */
.services, .process, .tech-stack, .portfolio-preview, .achievements,
.testimonials, .faq, .problems-section, .why-section, .steps-section,
.tailored-section, .compare-section, .cases-section {
  padding: 64px 0;
}
.clients-strip { padding: 36px 0; }
.hero-testimonial-block { padding: 48px 0; }

/* --- Hero: kill the full-viewport emptiness, tighten internal gaps --- */
.hero { min-height: auto; padding: 132px 32px 64px; }
.hero-subtitle { margin: 0 auto 32px; }
.hero-actions { margin-bottom: 48px; }

/* --- Section headers: tighter, premium proportion --- */
.section-header { margin: 0 auto 40px; }
.section-title { letter-spacing: -2px; }
.section-tag { letter-spacing: 2px; }

/* --- Premium card depth: soft layered shadow + crisp hairline border,
       smoother lift on hover (replaces flat 1px borders) --- */
.service-card, .value-card, .problem-card, .tailored-tile, .blog-card,
.testi-card, .testimonial, .ach-card, .industry-card, .step-row-card,
.compare-table-wrap, .role-card {
  border: 1px solid rgba(30, 42, 138, 0.08);
  box-shadow: 0 1px 2px rgba(16, 24, 64, 0.04), 0 8px 24px -16px rgba(16, 24, 64, 0.18);
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s cubic-bezier(.2,.8,.2,1),
              border-color .25s ease;
}
.service-card:hover, .value-card:hover, .problem-card:hover,
.tailored-tile:hover, .blog-card:hover, .testi-card:hover,
.industry-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(16, 24, 64, 0.06), 0 24px 48px -20px rgba(30, 42, 138, 0.28);
  border-color: rgba(245, 166, 35, 0.45);
}

/* --- Refined body typography: subtle negative tracking = premium --- */
body { letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
.section-subtitle { font-size: 17px; }

/* --- Buttons: a touch more presence + spring on hover --- */
.btn { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s; }
.btn-primary:hover, .btn-yellow:hover { transform: translateY(-2px); }

/* --- Crisp full-bleed hairline divider between alternating sections --- */
.services, .tech-stack, .achievements, .why-section, .tailored-section {
  border-top: 1px solid rgba(30, 42, 138, 0.06);
}

/* ---------- TABLET + DESKTOP-MODE-ON-PHONE (<= 1024px) ----------
   "Desktop site" toggle on a phone forces ~980px layout. We treat that
   whole range like a large-phone: hamburger nav, single nav source,
   readable type, single-column case cards. So it never looks like a
   shrunken desktop. */
@media (max-width: 1024px) {
  .container { padding: 0 28px; }

  /* Grids step down */
  .why-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tailored-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .values-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .problems-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Nav: ONLY the hamburger drives the menu in this range — the inline
     desktop links must be fully hidden until the toggle opens them.
     (Fixes desktop-mode-on-phone showing both menu + burger.) */
  .nav-menu {
    display: flex !important;       /* keep it a flex column when open */
    position: fixed;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 18px 22px 24px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .nav-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-toggle { display: flex !important; }
  .nav-link { font-size: 16px; padding: 13px 16px; }
  .nav-cta { margin-left: 0; justify-content: center; margin-top: 4px; }

  /* Readability: scale type up relative to layout so it isn't tiny on a
     physical phone showing the 980px desktop layout */
  .hero-title { font-size: clamp(40px, 7vw, 64px) !important; }
  .hero-subtitle { font-size: 18px !important; }
  .section-title { font-size: clamp(30px, 5vw, 44px) !important; }
  .section-subtitle { font-size: 17px !important; }

  /* Case-study carousel: stack so it reads on a narrow physical screen */
  .case-card { grid-template-columns: 1fr !important; }
  .case-card-media { min-height: 260px !important; height: 280px !important; }

  /* Brochure tab to bottom so it doesn't sit over the logo */
  .brochure-float { top: auto !important; bottom: 90px !important; }
  .brochure-float-card { display: none !important; }
}

/* ---------- PHONE (<= 768px) ---------- */
@media (max-width: 768px) {
  /* Global container + section rhythm — cut desktop padding roughly in half */
  .container { padding: 0 20px; }

  section,
  .services, .process, .tech-stack, .portfolio-preview, .achievements,
  .testimonials, .faq, .problems-section, .why-section, .steps-section,
  .tailored-section, .compare-section, .clients-strip, .cases-section,
  .hero-testimonial-block {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .section-header { margin-bottom: 24px !important; }
  .hero { padding: 88px 20px 40px !important; }

  /* Section headings smaller + tighter */
  .section-title,
  .why-section-head h2, .problems-section h2,
  .steps-section .section-head h2, .compare-section .section-head h2 {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.15 !important;
  }
  .section-subtitle { font-size: 15px !important; }
  .section-header { margin-bottom: 32px !important; }

  /* ALL multi-column grids collapse to ONE column */
  .services-grid,
  .testimonials-grid,
  .portfolio-grid,
  .why-grid,
  .tailored-grid,
  .values-grid,
  .problems-grid,
  .team-grid,
  .achievements-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Tech grid: 3 across is fine for small icon tiles */
  .tech-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }

  /* Process / steps: single column, hide the centre connector line */
  .process-timeline { grid-template-columns: 1fr !important; gap: 20px !important; }
  .process-timeline::before { display: none !important; }
  .steps-list::before { left: 20px !important; }
  .step-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-left: 48px !important;
    margin-bottom: 32px !important;
    direction: ltr !important;
  }
  .step-row::before { left: 20px !important; }
  .step-row-art { min-height: 120px !important; }
  .step-art-box { width: 100% !important; height: 130px !important; }

  /* Hero — controlled height, no forced 100vh emptiness */
  .hero { min-height: auto !important; padding: 96px 20px 48px !important; }
  .hero-title { font-size: clamp(30px, 8.5vw, 44px) !important; letter-spacing: -1px !important; }
  .hero-subtitle { font-size: 16px !important; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { justify-content: center; width: 100%; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .hero-scroll { display: none !important; }

  /* Hero floating orbs — shrink + clip so they don't bleed weird on small screens */
  .hero-orb { filter: blur(60px) !important; }
  .hero-orb-1 { width: 240px !important; height: 240px !important; }
  .hero-orb-2 { width: 200px !important; height: 200px !important; }
  .hero-orb-3 { width: 160px !important; height: 160px !important; }

  /* Case-study carousel cards stack image over text */
  .case-card { grid-template-columns: 1fr !important; }
  .case-card-media { min-height: 200px !important; height: 200px !important; }
  .case-card-body { padding: 24px 20px 28px !important; }
  .case-title { font-size: 21px !important; }
  .case-blurb { font-size: 14px !important; }
  .carousel-arrow { display: none !important; }  /* dots are enough on touch */

  /* Clients strip → 3 across, smaller */
  .clients-strip-row { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .client-logo-pill { font-size: 14px !important; }

  /* Comparison table — allow horizontal scroll inside its own wrapper */
  .compare-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .compare-table { min-width: 520px; }

  /* Cards: trim heavy inner padding */
  .service-card, .value-card, .problem-card, .tailored-tile, .blog-card { padding: 22px 20px !important; }
  .why-card { padding: 16px 12px !important; }

  /* Achievements numbers smaller */
  .ach-num { font-size: 38px !important; }

  /* Footer compact */
  .footer { padding: 36px 0 20px !important; }
  .footer-grid { gap: 28px !important; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Floating brochure tab — move to bottom so it never overlaps logo/content */
  .brochure-float { top: auto !important; bottom: 84px !important; }
  .brochure-float-tab {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    border-radius: 0 100px 100px 0 !important;
    padding: 9px 14px 9px 10px !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
  }
  .brochure-float-icon { transform: none !important; }
  .brochure-float-card { display: none !important; }  /* hover card useless on touch — modal opens on tap */

  /* Sticky CTA — full-width bottom bar, above the brochure tab */
  .sticky-cta {
    left: 12px !important; right: 12px !important; bottom: 12px !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    padding: 11px 14px !important;
  }

  /* Page hero (inner pages) tighter */
  .page-hero { padding: 90px 20px 40px !important; min-height: auto !important; }
  .page-hero-content h1 { font-size: clamp(28px, 8vw, 40px) !important; }
}

/* ---------- TAP TARGETS (touch usability, all phone widths) ---------- */
@media (max-width: 768px) {
  /* Carousel dots: keep visual size small but expand the tappable area */
  .carousel-dot {
    position: relative;
  }
  .carousel-dot::after {
    content: '';
    position: absolute;
    inset: -16px;  /* 9px dot + 32px padding = ~41px tap target */
  }
  /* Service "Learn more" links: add vertical padding for easier tapping */
  .service-link {
    padding: 8px 0 !important;
    display: inline-flex !important;
  }
  /* Hamburger toggle: bump to comfortable 44px */
  .nav-toggle { padding: 10px !important; }
}

/* ---------- SMALL PHONE (<= 480px) ---------- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-title { font-size: clamp(26px, 9vw, 36px) !important; }
  .hero-stats { grid-template-columns: 1fr 1fr !important; }
  .tech-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .clients-strip-row { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-num { font-size: 28px !important; }
  .ach-num { font-size: 34px !important; }
  .testi-card, .testimonial { min-width: 0 !important; }
  /* Marquee text smaller */
  .marquee-track { font-size: 16px !important; gap: 18px !important; }
}