/* Responsive Overrides - SAA Single Hero Page */

/* Global desktop styles for submenu wrapper elements (using W3C display: contents to keep desktop flex layout flat) */
.nav-menu-wrapper {
  display: contents;
}
.nav-menu-main {
  display: contents;
}
.nav-menu-sub {
  display: none;
}
.mobile-chevron {
  display: none !important;
}

/* Mobile menu dropdown & sliding submenu wrapper */
@media (max-width: 900px) {
  /* Disable custom WebKit scrollbars on mobile layout for clean look */
  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-thumb {
    background: transparent !important;
    display: none !important;
  }

  .nav-menu {
    display: block; /* Change from flex to block to hide overflow container */
    position: absolute !important;
    top: 70px;
    left: 0;
    width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.98); /* Light premium theme */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Soft shadow below dropdown */
    padding: 0;
    overflow: hidden; /* Restricts the sliding submenu viewport */
    opacity: 0;
    transform: translateY(-20px) scale(0.96); /* Scale + Translate entry animation */
    transform-origin: top center;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.35s;
    z-index: 999;
  }

  .services-dropdown,
  .solutions-dropdown,
  .industries-dropdown,
  .vibe-dropdown,
  .insights-dropdown {
    display: none !important; /* Hide desktop mega menus on mobile viewports */
  }

  /* Reset layout structure of menu item containers on mobile to resolve the huge gap issue */
  .services-nav-item,
  .solutions-nav-item,
  .industries-nav-item,
  .vibe-nav-item,
  .insights-nav-item {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    position: static !important;
  }

  .nav-menu.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
  }

  /* Slider container holding Level 1, Level 2 Services, Solutions, Industries, Vibe, and Insights */
  .nav-menu-wrapper {
    display: flex;
    width: 600%; /* Spans 6 viewports wide */
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Slide active states shifting slider horizontal viewport width (steps of 16.6666%) */
  .nav-menu.services-active .nav-menu-wrapper {
    transform: translateX(-16.6666%);
  }

  .nav-menu.solutions-active .nav-menu-wrapper {
    transform: translateX(-33.3333%);
  }

  .nav-menu.industries-active .nav-menu-wrapper {
    transform: translateX(-50%);
  }

  .nav-menu.vibe-active .nav-menu-wrapper {
    transform: translateX(-66.6666%);
  }

  .nav-menu.insights-active .nav-menu-wrapper {
    transform: translateX(-83.3333%);
  }

  /* Level 1: Main menu */
  .nav-menu-main {
    display: flex;
    flex-direction: column;
    width: 16.6666%;
    padding: var(--spacing-sm) var(--spacing-md);
    box-sizing: border-box;
    gap: 0;
  }

  /* Level 2: Submenu */
  .nav-menu-sub {
    display: flex;
    flex-direction: column;
    width: 16.6666%;
    padding: var(--spacing-sm) var(--spacing-md);
    box-sizing: border-box;
  }

  /* Main Menu Items Stagger Animation Setup */
  .nav-menu-main > * {
    opacity: 0;
    transform: translateY(25px); /* Increased from 15px for visible sweep */
    will-change: transform, opacity;
  }

  .nav-menu.active .nav-menu-main > * {
    animation: slideInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* 0.5s for smoother curve */
  }

  .nav-menu.active .nav-menu-main > *:nth-child(1) { animation-delay: 0.05s; }
  .nav-menu.active .nav-menu-main > *:nth-child(2) { animation-delay: 0.1s; }
  .nav-menu.active .nav-menu-main > *:nth-child(3) { animation-delay: 0.15s; }
  .nav-menu.active .nav-menu-main > *:nth-child(4) { animation-delay: 0.2s; }
  .nav-menu.active .nav-menu-main > *:nth-child(5) { animation-delay: 0.25s; }

  .nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    width: 100%;
    color: #1e293b; /* Darker Slate for high contrast on light background */
    padding: var(--spacing-xs) 0; /* Tightened padding to fix gap issue */
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    letter-spacing: 0.05em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    transition: color 0.2s ease;
  }

  .nav-link:hover, .nav-link:active {
    color: #4f46e5; /* Indigo accent on hover */
  }

  .nav-arrow {
    display: none !important; /* Hide desktop caret on mobile */
  }

  .mobile-chevron {
    display: block !important;
    width: 6px;
    height: 10px;
    color: #94a3b8; /* Muted slate chevron */
  }

  /* Back Button (Stripe style) */
  .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4f46e5; /* Indigo link */
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: var(--spacing-xs) 0;
    margin-bottom: var(--spacing-sm);
    align-self: flex-start;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    will-change: transform, opacity;
  }

  .btn-back svg {
    width: 6px;
    height: 10px;
    color: #4f46e5;
  }

  .nav-menu.services-active .btn-back,
  .nav-menu.solutions-active .btn-back,
  .nav-menu.industries-active .btn-back,
  .nav-menu.vibe-active .btn-back,
  .nav-menu.insights-active .btn-back {
    animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.05s;
  }

  /* Scrollable submenu container */
  .mobile-submenu-body {
    max-height: 380px; /* Limits submenu height and enables vertical scroll */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-right: var(--spacing-xs);
    -ms-overflow-style: none;  /* IE and Edge - Hide scrollbar */
    scrollbar-width: none;  /* Firefox - Hide scrollbar */
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .mobile-submenu-body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .mobile-submenu-body::-webkit-scrollbar-track,
  .mobile-submenu-body::-webkit-scrollbar-thumb {
    background: transparent !important;
    display: none !important;
  }

  /* Submenu header and links */
  .submenu-column {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(25px); /* Increased from 15px */
    will-change: transform, opacity;
  }

  .nav-menu.services-active .submenu-column,
  .nav-menu.solutions-active .submenu-column,
  .nav-menu.industries-active .submenu-column,
  .nav-menu.vibe-active .submenu-column,
  .nav-menu.insights-active .submenu-column {
    animation: slideInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* Match 0.5s duration */
  }

  .nav-menu.services-active .submenu-column:nth-child(1),
  .nav-menu.solutions-active .submenu-column:nth-child(1),
  .nav-menu.industries-active .submenu-column:nth-child(1),
  .nav-menu.vibe-active .submenu-column:nth-child(1),
  .nav-menu.insights-active .submenu-column:nth-child(1) { animation-delay: 0.1s; }
  .nav-menu.services-active .submenu-column:nth-child(2),
  .nav-menu.solutions-active .submenu-column:nth-child(2),
  .nav-menu.industries-active .submenu-column:nth-child(2),
  .nav-menu.vibe-active .submenu-column:nth-child(2),
  .nav-menu.insights-active .submenu-column:nth-child(2) { animation-delay: 0.15s; }
  .nav-menu.services-active .submenu-column:nth-child(3),
  .nav-menu.solutions-active .submenu-column:nth-child(3),
  .nav-menu.industries-active .submenu-column:nth-child(3),
  .nav-menu.vibe-active .submenu-column:nth-child(3),
  .nav-menu.insights-active .submenu-column:nth-child(3) { animation-delay: 0.2s; }
  .nav-menu.services-active .submenu-column:nth-child(4),
  .nav-menu.solutions-active .submenu-column:nth-child(4),
  .nav-menu.industries-active .submenu-column:nth-child(4),
  .nav-menu.vibe-active .submenu-column:nth-child(4),
  .nav-menu.insights-active .submenu-column:nth-child(4) { animation-delay: 0.25s; }

  .submenu-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b; /* Muted Slate */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
  }

  .submenu-list {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Tight list spacing */
    margin-bottom: var(--spacing-sm);
  }

  .submenu-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: #334155; /* Slate-700 */
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: block;
    transition: color 0.2s ease;
  }

  .submenu-link:hover, .submenu-link:active {
    color: #4f46e5;
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(25px); /* Increased from 15px */
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Hamburger transform when menu is active */
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2rem;
    line-height: 1.3;
  }
}


/* second section */
/* ===========================
   TABLET
=========================== */
@media (max-width:1024px){

    .outcomes-header{
        grid-template-columns:1fr;
        gap:30px;
        text-align:center;
    }

    .outcomes-title,
    .outcomes-intro{
        max-width:700px;
        margin:0 auto;
    }

    .outcomes-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .outcome-feature-card,
    .outcome-confidence-card{
        grid-column:span 2;
    }

    .outcome-standard-card,
    .outcome-wide-card{
        grid-column:span 1;
    }

    /* Tablet only: make the final card a full row and place the preceding
       card's illustration beneath its content. */
    .outcomes-grid > .outcome-wide-card:last-child{
        grid-column:span 2;
    }

    .outcomes-grid > .outcome-wide-card:nth-last-child(2) .digital-figure{
        width:64%;
        height:48%;
        right:auto;
        bottom:4%;
        left:14%;
    }

    .outcome-card{
        min-height:380px;
    }

    .outcome-feature-card{
        min-height:450px;
    }

    .outcome-copy{
        max-width:75%;
        padding:26px;
    }

    .outcome-feature-card .outcome-copy{
        max-width:55%;
        padding:36px;
    }

    .outcome-standard-card .card-title,
    .outcome-wide-card .card-title{
        white-space:nowrap;
    }

    .visual-rocket{
        width:52%;
    }

    .digital-figure,
    .risk-figure{
        width:42%;
    }

    .outcome-confidence-card p{
        left:24px;
        bottom:24px;
        font-size:1rem;
    }

    /* Keep the confidence-card caption readable over its background image. */
    .outcome-confidence-card::after{
        content:"";
        position:absolute;
        right:0;
        bottom:0;
        left:0;
        height:42%;
        z-index:1;
        pointer-events:none;
        background:linear-gradient(to top, rgba(8, 2, 39, .82) 0%, rgba(8, 2, 39, .42) 58%, transparent 100%);
    }

    .outcome-confidence-card p{
        z-index:2;
    }

    .outcome-points{
        margin-top:28px;
    }



   .outcome-standard-card .outcome-copy {
    max-width: 100%;
}

.data-figure {
    bottom: 3%;
}

.ai-figure {
    bottom: 6%;
}

.visibility-figure {
    bottom: 8%;
    
}
}

/* ===========================
   MOBILE
=========================== */
@media (max-width:767px){



    .outcomes-section{
        padding:70px 0;
    }

    .outcomes-header{
        grid-template-columns:1fr;
        text-align:center;
        gap:20px;
        margin-bottom:35px;
    }

    .outcomes-title{
        max-width:100%;
    }

    .outcomes-intro{
        max-width:100%;
    }

    .outcomes-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .outcome-feature-card,
    .outcome-standard-card,
    .outcome-wide-card,
    .outcome-confidence-card{
        grid-column:unset;
    }

    .outcome-card{
        min-height:340px;
    }

    .outcome-feature-card{
        min-height:544px;
    }

    .outcome-standard-card,
    .outcome-wide-card{
        min-height:340px;
        aspect-ratio:auto;
    }

    .outcome-copy{
        max-width:100%;
        padding:24px;
    }

    .outcome-feature-card .outcome-copy{
      column-gap: 8px;
        max-width:100%;
        padding:0px;
    }

    .outcome-standard-card .card-title,
    .outcome-wide-card .card-title{
        white-space:normal;
    }

    .outcome-card .card-title{
      margin: 0px 0 0px;
        font-size:1.35rem;
    }

    .outcome-card .card-desc{
        font-size:.9rem;
    }

    .outcome-points{
        flex-direction:column;
        gap:15px;
        margin-top:24px;
    }

    .outcome-points li{
        width:100%;
        border-right:none;
        border-bottom:1px solid #ececec;
        padding:0 0 15px;
    }

    .outcome-points li:last-child{
        border-bottom:none;
    }

    .visual-rocket{
        width:65%;
        object-fit:contain;
        object-position:right bottom;
    }

    .visual-confidence{
        object-position:center;
    }

    /* Keep the PNG illustrations inside their cards on small screens. */
    .outcome-figure img{
        display:block;
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .data-figure,
    .ai-figure,
    .visibility-figure{
        height:36%;
        bottom:5%;
    }

    .digital-figure,
    .risk-figure{
        width:68%;
        height:36%;
        right:auto;
        bottom:5%;
        left:16%;
    }

    .outcome-confidence-card p{
        left:20px;
        right:20px;
        bottom:20px;
        font-size:1rem;
        gap:14px;
    }

    .outcome-confidence-card .outcome-icon{
        width:52px;
        height:52px;
    }

    /* A single explicit grid column prevents the tablet full-width rule from
       creating an extra, clipped column on phones. */
    .outcomes-grid > .outcome-card,
    .outcomes-grid > .outcome-wide-card:last-child{
        grid-column:1;
        min-width:0;
    }

    /* Phone cards use a vertical composition: copy first, illustration below. */
    .outcome-standard-card,
    .outcome-wide-card{
        min-height:321px;
    }

    .outcome-standard-card .outcome-copy,
    .outcome-wide-card .outcome-copy{
      max-width:100%;
        display:grid;
        grid-template-columns:44px minmax(0, 1fr);
        column-gap:14px;
        align-items:start;
        padding:0px 0px 0;
    }

    .outcome-standard-card .outcome-icon,
    .outcome-wide-card .outcome-icon{
        display:grid;
        width:44px;
        height:44px;
        margin:0;
    }

    .outcome-standard-card .card-title,
    .outcome-wide-card .card-title{
        grid-column:2;
        grid-row:1;
        margin:2px 0 10px;
        font-size:1.15rem;
        line-height:1.3;
        letter-spacing:0;
    }

    .outcome-standard-card .card-desc,
    .outcome-wide-card .card-desc{
        max-width:100%;
        grid-column:2;
        grid-row:2;
        font-size:.82rem;
        line-height:1.55;
    }

    .outcome-standard-card .outcome-figure,
    .outcome-wide-card .outcome-figure{
        width:64%;
        height:48%;
        right:auto;
        bottom:0%;
        left:19%;
    }

    .outcome-feature-card .outcome-points{
        flex-direction:row;
        gap:0;
        margin-top:24px;
    }

    .outcome-feature-card .outcome-points li{
        width:33.333%;
        border-right:1px solid #ded2f5;
        border-bottom:none;
        padding:0 6px;
    }

    .outcome-feature-card .outcome-points li:first-child{
        padding-left:0;
    }

    .outcome-feature-card .outcome-points li:last-child{
        border-right:none;
        padding-right:0;
    }

    .outcomes-grid > .outcome-wide-card:nth-last-child(2) .digital-figure{
        
        height:45%;
     
        bottom:2%;
      
    }

    
}


@media (max-width:320px){

  

    .outcomes-section{
        padding:70px 0;
    }

    .outcomes-header{
        grid-template-columns:1fr;
        text-align:center;
        gap:20px;
        margin-bottom:35px;
    }

    .outcomes-title{
        max-width:100%;
    }

    .outcomes-intro{
        max-width:100%;
    }

    .outcomes-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .outcome-feature-card,
    .outcome-standard-card,
    .outcome-wide-card,
    .outcome-confidence-card{
        grid-column:unset;
    }

    .outcome-card{
        min-height:340px;
    }

    .outcome-feature-card{
        min-height:544px;
    }

    .outcome-standard-card,
    .outcome-wide-card{
        min-height:340px;
        aspect-ratio:auto;
    }

    .outcome-copy{
        max-width:100%;
        padding:24px;
    }

    .outcome-feature-card .outcome-copy{
      column-gap: 8px;
        max-width:100%;
        padding:0px;
    }

    .outcome-standard-card .card-title,
    .outcome-wide-card .card-title{
        white-space:normal;
    }

    .outcome-card .card-title{
      margin: 0px 0 0px;
        font-size:1.2rem;
    }

    .outcome-card .card-desc{
        font-size:.8rem;
    }

    .outcome-points{
        flex-direction:column;
        gap:15px;
        margin-top:24px;
    }

    .outcome-points li {
      font-size: 0.7rem;
    }

    .outcome-icon {
    width: 49px;
    height: 49px;
    }

    .outcome-point-icon {
    width: 49px;
    height: 49px;
    }

    .outcome-points li{
        width:100%;
        border-right:none;
        border-bottom:1px solid #ececec;
        padding:0 0 15px;
    }

    .outcome-points li:last-child{
        border-bottom:none;
    }

    .visual-rocket{
        width:65%;
        object-fit:contain;
        object-position:right bottom;
    }

    .visual-confidence{
        object-position:center;
    }

    /* Keep the PNG illustrations inside their cards on small screens. */
    .outcome-figure img{
        display:block;
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .data-figure,
    .ai-figure,
    .visibility-figure{
        height:36%;
        bottom:5%;
    }

    .digital-figure,
    .risk-figure{
        width:68%;
        height:36%;
        right:auto;
        bottom:5%;
        left:16%;
    }

    .outcome-confidence-card p{
          line-height: 1.9;
        left:20px;
        right:20px;
        bottom:20px;
        font-size:0.68rem;
        gap:14px;
    }

    .outcome-confidence-card .outcome-icon{
        width:52px;
        height:52px;
    }

    /* A single explicit grid column prevents the tablet full-width rule from
       creating an extra, clipped column on phones. */
    .outcomes-grid > .outcome-card,
    .outcomes-grid > .outcome-wide-card:last-child{
        grid-column:1;
        min-width:0;
    }

    /* Phone cards use a vertical composition: copy first, illustration below. */
    .outcome-standard-card,
    .outcome-wide-card{
        min-height:321px;
    }

    .outcome-standard-card .outcome-copy,
    .outcome-wide-card .outcome-copy{
      max-width:100%;
        display:grid;
        grid-template-columns:44px minmax(0, 1fr);
        column-gap:14px;
        align-items:start;
        padding:0px 0px 0;
    }

    .outcome-standard-card .outcome-icon,
    .outcome-wide-card .outcome-icon{
        display:grid;
        width:44px;
        height:44px;
        margin:0;
    }

    .outcome-standard-card .card-title,
    .outcome-wide-card .card-title{
        grid-column:2;
        grid-row:1;
        margin:2px 0 10px;
        font-size:0.95rem;
        line-height:1.3;
        letter-spacing:0;
    }

    .outcome-standard-card .card-desc,
    .outcome-wide-card .card-desc{
        max-width:100%;
        grid-column:2;
        grid-row:2;
        font-size:.72rem;
        line-height:1.55;
    }

    .outcome-standard-card .outcome-figure,
    .outcome-wide-card .outcome-figure{
        width:64%;
        height:48%;
        right:auto;
        bottom:0%;
        left:19%;
    }

    .outcome-feature-card .outcome-points{
        flex-direction:row;
        gap:0;
        margin-top:24px;
    }

    .outcome-feature-card .outcome-points li{
        width:33.333%;
        border-right:1px solid #ded2f5;
        border-bottom:none;
        padding:0 6px;
    }

    .outcome-feature-card .outcome-points li:first-child{
        padding-left:0;
    }

    .outcome-feature-card .outcome-points li:last-child{
        border-right:none;
        padding-right:0;
    }

    .outcomes-grid > .outcome-wide-card:nth-last-child(2) .digital-figure{
        
        height:45%;
     
        bottom:2%;
      
    }

    
}

@media (max-width:320px){
    .proof-study-content h3 {
    margin: 15px 0 10px;
    color: #1c1b32;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.025em;
}
}