/* ==========================================================================
   TECOGNIX TECHNOLOGIES — MASTER RESPONSIVE STYLESHEET
   Pixel-Perfect Layouts, Fixed Header, Zero Overflow & Mobile Optimization
   ========================================================================== */

/* Global Overflow Safety */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* --------------------------------------------------------------------------
   1. LAPTOPS & DESKTOPS (<= 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hero-editorial-split {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
  }

  .capabilities-flex {
    grid-template-columns: repeat(3, 1fr);
  }

  .industry-pillars-bento {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .industry-process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .about-magazine-grid,
  .solutions-editorial-split,
  .deep-dive-story-block,
  .deep-dive-story-block.reversed,
  .why-architectural-container,
  .contact-editorial-layout {
    gap: 3rem;
  }

  .footer-editorial-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   2. TABLETS & SMALL LAPTOPS (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --header-height: 84px;
    --header-height-scrolled: 74px;
  }

  /* Fixed Header Mobile Adaptation */
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: var(--header-height) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.08) !important;
    z-index: 9999 !important;
  }

  .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prominent Bigger Logo on Tablet & Mobile */
  .brand-logo img {
    height: 72px !important;
    max-height: 72px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .site-header.header-scrolled .brand-logo img {
    height: 58px !important;
    max-height: 58px !important;
  }

  /* Hide Desktop Navigation & Mega Menu */
  .nav-menu {
    display: none !important;
  }

  /* Hide Header CTA Button on Mobile/Tablet so Logo and Hamburger have full space */
  .header-right-actions .btn {
    display: none !important;
  }

  /* Display Touch-Friendly Hamburger Button */
  .mobile-menu-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 8px !important;
    background: var(--bg-subtle-tint) !important;
    border: 1.5px solid var(--border-medium) !important;
    color: var(--text-pure) !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  /* All Grids Collapse on Tablets */
  .hero-editorial-split,
  .subpage-hero-grid,
  .about-magazine-grid,
  .solutions-editorial-split,
  .deep-dive-story-block,
  .deep-dive-story-block.reversed,
  .equation-grid,
  .why-architectural-container,
  .fusion-bento-grid,
  .vm-pillars-container,
  .why-pillars-bento,
  .outcomes-matrix-grid,
  .challenges-transformation-grid,
  .faq-bento-grid,
  .industries-matrix-grid,
  .industry-pillars-bento,
  .industry-process-grid,
  .contact-editorial-layout {
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
    width: 100% !important;
  }

  .outcomes-fluid-grid {
    grid-template-columns: 1fr !important;
  }

  .capabilities-flex {
    grid-template-columns: repeat(2, 1fr);
  }

  .solution-pillar-hero-card {
    padding: 2.5rem 2rem !important;
  }

  .solution-pillar-header,
  .solution-pillar-header.reversed {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .subdomain-bento-grid,
  .subdomain-bento-grid.grid-2,
  .subdomain-bento-grid.grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  .cyber-domain-bento {
    padding: 2.5rem 2rem !important;
  }

  .cyber-domain-header,
  .cyber-domain-header.reversed {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .cyber-cards-matrix,
  .cyber-cards-matrix.cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .incident-process-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .about-features-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .solution-sticky-photo-pane {
    position: static;
    margin-top: 2rem;
    width: 100%;
    box-sizing: border-box;
  }

  .solution-photo-frame {
    height: 280px;
  }

  .why-sticky-feature-card {
    position: static;
    margin-top: 2rem;
  }

  .footer-editorial-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   3. PHABLETS & MOBILE SCREENS (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-height: 80px;
    --header-height-scrolled: 70px;
  }

  .container,
  .container-narrow {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .section {
    padding: 3.75rem 0;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .section-sm {
    padding: 2.5rem 0;
  }

  .section-header-editorial {
    margin-bottom: 2rem;
  }

  /* Fixed Header Height & Brand Logo */
  .brand-logo img {
    height: 64px !important;
    max-height: 64px !important;
  }

  .site-header.header-scrolled .brand-logo img {
    height: 52px !important;
    max-height: 52px !important;
  }

  /* Hero Section Mobile */
  .hero-human-editorial {
    padding-top: calc(var(--header-height) + 1.5rem);
    padding-bottom: 3.5rem;
  }

  .hero-display-title {
    font-size: clamp(2.1rem, 7.5vw, 3rem);
    margin-bottom: 1.15rem;
    word-break: break-word;
  }

  .hero-editorial-subheading {
    font-size: 1.12rem;
    margin-bottom: 1rem;
  }

  .hero-narrative-paragraph {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
  }

  .hero-button-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.85rem;
  }

  .hero-button-group .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-main-photo {
    height: 280px !important;
    max-height: 280px !important;
    object-fit: cover !important;
  }

  .hero-main-photo-frame {
    border-radius: 16px;
    overflow: hidden;
  }

  .hero-floating-hud-top,
  .hero-floating-hud-bottom {
    position: static !important;
    margin-top: 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    animation: none !important;
  }

  /* Capabilities Bar */
  .capabilities-flex {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .capability-card,
  .capability-item {
    padding: 1.15rem 1.25rem;
  }

  /* About Magazine Section */
  .about-photo-large {
    height: 260px;
  }

  .about-inset-card {
    position: static;
    margin-top: 1rem;
    max-width: 100%;
    box-sizing: border-box;
  }

  .equation-row-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* About Page 4 Value Cards Stack */
  .about-features-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    margin: 1.5rem 0 !important;
  }

  .about-feature-item {
    padding: 1.15rem 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .fusion-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .vm-pillars-container {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }

  .vm-pillar-card {
    padding: 2rem 1.5rem !important;
  }

  /* Brand Statement Credo */
  .brand-statement-monument {
    padding: 4.5rem 0;
  }

  .statement-quote-huge {
    font-size: clamp(1.35rem, 4.5vw, 1.85rem);
    line-height: 1.45;
  }

  /* Solutions Showcase & Preview Card */
  .solution-nav-card {
    padding: 1.5rem 1.25rem;
  }

  .solution-card-title {
    font-size: 1.25rem;
  }

  .solution-sticky-photo-pane {
    position: static;
    margin-top: 1.5rem;
    border-radius: 14px;
    width: 100%;
  }

  .solution-photo-frame {
    height: 220px;
  }

  .solution-photo-body {
    padding: 1.5rem 1.25rem;
    box-sizing: border-box;
  }

  .solution-photo-body .btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Deep-Dive Story Blocks */
  .deep-dive-story-block {
    margin-bottom: 3.5rem;
    gap: 1.75rem;
  }

  .deep-dive-photo-img {
    height: 240px;
  }

  .editorial-title {
    font-size: clamp(1.75rem, 5.5vw, 2.4rem);
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .feature-check-list {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin: 1.25rem 0 1.75rem;
  }

  .deep-dive-content-block .btn {
    width: 100%;
    justify-content: center;
  }

  .equation-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .outcomes-fluid-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .hero-visual-img {
    height: 240px !important;
  }

  /* Cyber Domain Bento Mobile */
  .cyber-domain-bento {
    padding: 1.75rem 1.25rem !important;
    margin-bottom: 2.5rem !important;
    border-radius: 16px !important;
  }

  .cyber-domain-header,
  .cyber-domain-header.reversed {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .cyber-domain-title {
    font-size: 1.65rem !important;
  }

  .cyber-visual-box img {
    height: 220px !important;
  }

  .cyber-cards-matrix,
  .cyber-cards-matrix.cols-3 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.85rem !important;
  }

  .cyber-card-item,
  .cyber-card-item.col-span-2,
  .cyber-card-item[style] {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .incident-process-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 1.25rem !important;
    margin-top: 2rem !important;
  }

  .incident-step-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.5rem 1.25rem !important;
  }

  /* Solutions Hub Mobile Redesign */
  .solution-pillar-hero-card {
    padding: 1.75rem 1.25rem !important;
    margin-bottom: 2.5rem !important;
    border-radius: 16px !important;
  }

  .solution-pillar-header,
  .solution-pillar-header.reversed {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 1.75rem !important;
    padding-bottom: 1.5rem !important;
  }

  .solution-pillar-title {
    font-size: 1.65rem !important;
  }

  .solution-pillar-img {
    height: 220px !important;
  }

  .subdomain-bento-grid,
  .subdomain-bento-grid.grid-2,
  .subdomain-bento-grid.grid-5 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .subdomain-card {
    padding: 1.5rem 1.25rem !important;
  }

  .vendor-chips-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  .solutions-jump-bar {
    padding: 0.6rem 0.75rem !important;
    margin-bottom: 2.5rem !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .jump-tab-link {
    font-size: 0.85rem !important;
    padding: 0.45rem 0.85rem !important;
  }

  /* Why Businesses Choose Tecognix — Fixed Mobile Stack */
  .why-numbered-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .why-numbered-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    padding: 1.4rem 1.15rem !important;
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .why-numbered-row .why-num-digit {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--accent-primary) !important;
    margin-bottom: 0.2rem !important;
  }

  .why-numbered-row .why-row-heading {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-pure) !important;
    margin-bottom: 0.35rem !important;
    line-height: 1.3 !important;
  }

  .why-numbered-row .why-row-text {
    font-size: 0.96rem !important;
    color: var(--text-medium) !important;
    line-height: 1.6 !important;
    width: 100% !important;
  }

  .why-numbered-row .why-row-arrow {
    display: none !important;
  }

  .why-sticky-feature-card {
    padding: 1.75rem 1.25rem;
    margin-top: 1.5rem;
  }

  /* Industries Page Responsive Fixes (NO OVERFLOW) */
  .industries-matrix-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }

  .industry-sector-card {
    padding: 1.75rem 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .industry-pillars-bento {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
    margin-top: 2rem !important;
  }

  .industry-bento-card {
    padding: 1.75rem 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Process Grid (4-Step Lifecycle) -> 1 COLUMN ON MOBILE */
  .industry-process-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
    margin-top: 2rem !important;
  }

  .industry-process-card {
    padding: 1.5rem 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .industries-matrix-editorial {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .industry-item-card {
    padding: 1.5rem 1.25rem;
  }

  /* Why Us 6 Pillars & 10 Outcomes */
  .why-pillars-bento {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }

  .why-pillar-card {
    padding: 1.75rem 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .outcomes-matrix-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  .outcome-matrix-card {
    padding: 1.25rem 1.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Resources Page 4 Challenges & FAQs */
  .challenges-transformation-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }

  .challenge-transform-card {
    padding: 1.5rem 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .faq-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }

  .faq-bento-card {
    padding: 1.75rem 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Technology That Creates Measurable Business Value — 1 Column */
  .promise-outcomes-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  .promise-outcome-row {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.15rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  .promise-text-content {
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
    color: var(--text-pure) !important;
  }

  /* Consultation Form — 1 Column Inputs */
  .form-editorial-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .form-field {
    width: 100% !important;
  }

  .input-editorial {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  .form-editorial-card {
    padding: 1.75rem 1.25rem !important;
  }

  /* Footer */
  .site-footer-editorial {
    padding: 3.5rem 0 2rem;
  }

  .footer-editorial-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   4. SMALL MOBILE SCREENS (<= 400px - iPhone SE / 375px & 320px)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  :root {
    --header-height: 76px;
    --header-height-scrolled: 68px;
  }

  .container,
  .container-narrow {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Bigger Prominent Logo on Small Mobile */
  .brand-logo img {
    height: 58px !important;
    max-height: 58px !important;
  }

  .site-header.header-scrolled .brand-logo img {
    height: 48px !important;
    max-height: 48px !important;
  }

  .hero-display-title {
    font-size: 1.95rem;
    line-height: 1.2;
  }

  .hero-editorial-subheading {
    font-size: 1.05rem;
  }

  .editorial-title {
    font-size: 1.6rem;
  }

  .editorial-tag {
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
  }

  .tech-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
  }

  .btn {
    font-size: 0.92rem;
    padding: 0.85rem 1.25rem;
  }

  .solution-photo-body {
    padding: 1.25rem 1rem;
  }

  .solution-photo-body .btn {
    font-size: 0.88rem;
    padding: 0.8rem 1rem;
  }
}