/* ============================================================ RESPONSIVE — link this AFTER style.css <link rel="stylesheet" href="css/responsive.css" /> ============================================================ */
/* ============================================================ 1. max-width: 1919px — Large desktops ============================================================ */
 @media (max-width: 1919px) {
     .header-inner {
         width: 92%;
    }
     .caps-container {
         gap: 5rem 7rem;
         max-width: 80%;
    }
     .footer-main ,.footer-bottom,.process-container{
         max-width: 80%;
    }
     .about-container {
         max-width: 65%;
         gap: 2rem;
    }
    .mm-logo {
        width: 178px;
    }
    .mm-top {
        margin: 0rem auto 3rem;
    }
    .banner-section {
        height: 710px;
         max-height: 710px;
     overflow: hidden;
    }














}
/* ============================================================ 2. max-width: 1599px — Standard desktops ============================================================ */
 @media (max-width: 1599px) {
     .header-inner {
         width: 96%;
         padding-top: 20px;
    }
     .nav-list {
         width: 76%;
    }
     .logo-circle {
         width: 172px;
         height: 172px;
    }
     .header-nav {
         margin-right: 3%;
    }
     .hamburger-btn {
         width: 36px;
         height: 36px;
    }
     .banner-section {
         height: 630px;
          max-height: 630px;
     overflow: hidden;
    }
     .banner-heading {
         font-size: clamp(3.5rem, 11vw, 11rem);
         margin-top: 15%;
    }
     .banner-subtext {
         font-size: clamp(1.5rem, 1.4vw, 3rem);
    }
     .caps-container {
         gap: 5rem 2.5rem;
         max-width: 87%;
    }
     .caps-img {
         width: 282px;
         min-width: 282px;
    }
     .caps-content {
         gap: 3px;
         padding-top: 8px;
    }
     .caps-title {
         font-size: 16px;
    }
     .process-section {
         padding: 4rem 0 6rem;
    }
     .process-container {
         max-width: 85%;
    }
     .footer-main, .footer-bottom {
         max-width: 94%;
    }
     .about-container {
         max-width: 70%;
         gap: 2rem;
    }
     .about-banner .banner-heading {
         margin-top: 18% !important;
         font-size: clamp(3.5rem, 10.5vw, 13.5rem);
    }
    .cc-banner .banner-heading {
        margin-top: 28% !important;
        letter-spacing: 0.04em;
        font-size: clamp(3.5rem, 8vw, 8rem);
    }
     .contact-container {
         max-width: 70%;
         gap: 3rem;
    }
     .contact-section {
         padding: 4rem 0 5rem;
         margin: 2rem 0;
    }
     .contact-heading {
         font-size: clamp(1.6rem, 3vw, 2rem);
    }
     .contact-subtext {
         font-size: 16px;
    }
     .contact-cta {
         font-size: 14px;
    }
     .office-city {
         font-size: 16px;
    }
     .thrive-list li {
         font-size: clamp(1.1rem, 1.1vw, 1rem);
    }
     .banner-thrive {
         bottom: 12%;
         font-size: clamp(3rem, 12vw, 11rem);
    }
     .banner-body-text {
         left: 10%;
         top: 46%;
         font-size: clamp(0.90rem, 1.25vw, 1.15rem);
         line-height: 1.7;
    }
    .ow-container {
        max-width: 85%;
    }
    .ow-intro {
        margin: 0 auto 3rem;
    }
    .ow-section {
        padding: 4rem 0 5rem;
    }
    .mm-social-btn {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
    .mm-top {
        margin: 0rem auto 3rem;
        width: 92%;
    }
    .mm-body{
        width: 92%;
    }
    .mm-logo {
        width: 164px;
    }
    .mobile-menu {
        padding: 2rem;
    }
    .mobile-nav-list li a {
        padding: 1rem 0;
        font-size: clamp(1rem, 2vw, 1.55rem);
    }
    .mm-contact-heading {
        font-size: clamp(2.2rem, 2vw, 1.6rem);
    }
    .mm-contact-items {
        gap: 26px;
    }
    .mm-contact-item i {
        font-size: 18px;
        margin-top: 4px;
    }
    .mm-contact-item {
        font-size: 16px;
    }

}
/* ============================================================ 3. max-width: 1359px — Small desktops / large laptops ============================================================ */
 @media (max-width: 1359px) {
     :root {
         --header-h: 100px;
         --logo-size: 160px;
    }
     .caps-img {
         width: 220px;
         min-width: 220px;
    }
     .caps-container {
         gap: 3.5rem 4rem;
    }
     .nav-link {
         font-size: 14px;
         padding: 6px;
    }
     .banner-section {
         height: 542px;
          max-height: 542px;
     overflow: hidden;
    }
     .banner-heading {
         margin-top: 15%;
    }
     .thrive-list li {
         font-size: clamp(1.1rem, 1.1vw, 1.4rem);
    }

    .header-inner {
        width: 98%;
        padding-top: 16px;
    }
    .logo-circle {
        width: 158px;
        height: 158px;
    }
    
    .banner-body-text {
        top: 44%;
        font-size: clamp(0.98rem, 1.25vw, 1.25rem);
    }
    .ow-intro {
        font-size: clamp(0.90rem, 1.4vw, 1.0rem);
        margin: 0 auto 3rem;
    }

    .footer-main, .footer-bottom {
        max-width: 96%;
        padding: 48px 24px;
    }
    .footer-logo {
        width: 182px;
    }
    .footer-main {
        gap: 24px;
    }
    .footer-contact-item i, .footer-address i, .footer-cities i {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        max-width: 32px;
        border-radius: 4px;
    }
    .footer-address, .footer-cities {
        gap: 6px;
    }
    .about-section ,.caps-section,.process-section,.culture-section{
        padding: 4rem 0;
    }


    .about-container {
        max-width: 78%;
        gap: 1.5rem;
    }
    .caps-container {
        gap: 3rem 2rem;
    }
    .process-img-wrap {
        max-width: 224px;
    }
    .process-card-title {
        font-size: 18px;
    }
    .cc-banner .banner-heading {
        margin-top: 30% !important;
        font-size: clamp(3.5rem, 8.5vw, 8.5rem);
    }
    .hiring-container {
        max-width: 72%;
    }

    .cc-banner .banner-section::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 64%; /* bottom 40% gradient */
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
        pointer-events: none;
        display: none;
        }
        .culture-text {
            font-size: clamp(0.9rem, 2vw, 20px);
        }
        .banner-heading {
            margin-top: 18%;
        }
        .about-banner .banner-heading {
            margin-top: 24% !important;
            font-size: clamp(3.5rem, 10.5vw, 13.5rem);
        }
        .mobile-nav-list li a {
        padding: 1rem 0;
        font-size: clamp(1.5rem, 2vw, 1.55rem);
    }
    .ow-play-btn svg{
        width: 60px;
        height: 60px;
    }


}
/* ============================================================ 4. max-width: 1199px — Laptops / tablets landscape ============================================================ */
 @media (max-width: 1199px) {
     :root {
         --header-h: 88px;
         --logo-size: 148px;
    }
    /* Header */
    
     .nav-link {
         font-size: 14px;
         padding: 6px;
         letter-spacing: 0;
    }
     .nav-list {
         width: 80%;
    }
    
    .logo-circle {
        width: 142px;
        height: 142px;
    }
    .header-inner {
        padding: 16px 0 0 0;
        width: 96%;
    }
    .banner-thrive {
        bottom: 12%;
        font-size: clamp(6rem, 14vw, 12rem);
    }
    .banner-heading {
        margin-top: 26%;
    }
    /* Banner */
     .banner-section {
         height: 494px;
          max-height: 494px;
     overflow: hidden;
    }
    /* Process */
     .process-container {
         max-width: 88%;
    }
    /* Caps */
    .caps-container {
        max-width: 92%;
        gap: 3rem 2rem;
    }
    .caps-img {
        width: 200px;
        min-width: 200px;
    }
    .caps-card {
        gap: 16px;
    }
    /* About */
     .about-container {
         max-width: 78%;
    }
     .footer-main {
        max-width: 94%;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
         gap: 50px;
    }
    .footer-bottom {
        max-width: 88%;
        padding: 24px 0;
    }
     .contact-container {
         max-width: 88%;
    }
     .contact-offices {
         gap: 1.5rem 3rem;
    }
     .hiring-container {
         max-width: 88%;
    }
     .ow-container {
         max-width: 88%;
    }
    .ow-section{
        padding: 48px 0;
    }
    .ow-card-sub {
        font-size: 14px;
    }
    .thrive-list li {
        font-size: clamp(1rem, 1vw, 1.2rem);
    }
    .footer-contact {
        width: 600px;
    }
    .about-banner .banner-heading {
        margin-top: 28% !important;
        font-size: clamp(4.5rem, 11.5vw, 12.5rem);
    }
    .about-bottom-img {
        width: 192px;
    }
    .about-section, .caps-section, .process-section, .culture-section {
        padding: 60px 0;
    }
    .caps-title {
        font-size: 14px;
    }
    .caps-tagline,.caps-list li {
        font-size: 12px;
    }
    .caps-btn {
        margin-top: 8px;
    }
    .process-img-wrap {
        max-width: 192px;
    }
    .cc-banner .banner-heading {
        margin-top: 36% !important;
        font-size: clamp(5rem, 7.5vw, 9rem);
    }
    .hiring-hero {
        margin-bottom: 2.5rem;
    }
    .contact-banner .banner-heading {
        margin-top: 32% !important;
    }
    .mm-top {
        margin: 0rem auto 2rem;
        width: 96%;
    }
    .mm-logo {
        width: 154px;
    }

}
/* ============================================================ 5. max-width: 991px — Tablets portrait ============================================================ */
 @media (max-width: 991px) {
     :root {
         --header-h: 74px;
         --logo-size: 130px;
    }
    .logo-circle {
        width: 136px;
        height: 136px;
    }
    /* Header — hide desktop nav */
     .header-nav {
         display: none;
    }
     .header-inner {
         padding: 0 1.5rem;
         padding-top: 16px;
    }
    .banner-heading {
        margin-top: 36%;
    }
    

    /* Mobile menu */
    .mobile-menu {
        min-width: 260px;
        padding: 2rem;
    }
    .mm-top {
        margin: 0rem auto 2rem;
        width: 100%;
    }
    .mm-body {
        width: 96%;
    }
    .mm-logo { 
        width: 140px; 
    }
    .mobile-menu {
    transform: translateX(-100%);
    transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
  }

  .mobile-menu.is-open {
    transform: translateX(0);
  }
    /* Banner */
     .banner-section {
         height: 452px;
          max-height: 452px;
     overflow: hidden;
    }
     .banner-heading {
         -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
    }
    /* Process */
     .process-container {
         max-width: 90%;
    }
     .process-grid {
         grid-template-columns: 1fr;
         max-width: 480px;
         margin: 0 auto;
    }
     .process-card {
         padding-bottom: 2rem;
         border-bottom: 1px solid #efefef;
    }
     .process-card:last-child {
         border-bottom: none;
         padding-bottom: 0;
    }
    /* Caps */
    .caps-container {
        grid-template-columns: 1fr;
        max-width: 85%;
        gap: 5rem;
    }
    .caps-card {
        gap: 3rem;
    }
     .caps-img {
         width: 252px;
         min-width: 252px;
    }
    .caps-title {
        font-size: 16px;
    }
    .process-title {
        font-size: clamp(2rem, 4.5vw, 3.5rem);
    }
    /* About */
     .about-container {
         max-width: 80%;
    }
    .process-img-wrap {
        max-width: 264px;
    }
    .process-subtitle {
        font-size: 16px;
        margin-bottom: 0.5rem;
    }
    /* Thrive */
     .thrive-list {
         flex-wrap: wrap;
         gap: 0.5rem 2.5rem;
         padding: 6px 20px;
    }
     .thrive-banner {
         min-height: 90px;
         padding: 1.25rem 0;
    }
    .thrive-bg-inner span {
        font-size: clamp(6.5rem, 8vw, 7.5rem);
    }
    /* Footer */
    .footer-main {
        max-width: 94%;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .footer-bottom {
        max-width: 94%;
        gap: 1rem;
        justify-content: center;
    }
     .footer-right {
         align-items: flex-start;
         grid-column: 1 / -1;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
    }
     .contact-container {
         max-width: 90%;
    }
     .contact-offices {
         gap: 1.5rem 2.5rem;
    }
     .contact-bottom {
         gap: 2.5rem;
    }
     .hiring-container {
         max-width: 90%;
    }
     .apply-link {
         display: none;
    }
    /* hide row-level link on mobile, keep button inside content */
    .banner-body-text {
        top: auto;
        bottom: 42%;
        transform: none;
    }
    .banner-thrive {
        font-size: clamp(3rem, 16vw, 9rem);
    }
     .ow-container {
         max-width: 90%;
    }
     .ow-grid {
         gap: 2rem 2rem;
    }
    .ow-intro {
        margin: 0 auto 2rem;
    }
    .ow-play-btn i {
        width: 46px;
        height: 46px;
    }
    .ow-card-title {
        font-size: 16px;
    }
    .about-banner .banner-heading {
        margin-top: 36% !important;
        font-size: clamp(5.5rem, 13.5vw, 12.5rem);
    }
    .about-lead {
        font-size: 16px;
        line-height: 1.8;
    }
    .about-body {
        font-size: 14px;
        line-height: 1.8;
    }
    .caps-card:nth-child(even){
        justify-content: end;
        gap: 3rem;
    }
    .contact-banner .banner-heading {
        margin-top: 42% !important;
        font-size: clamp(5rem, 12vw, 14rem);
    }
    .contact-section {
        padding: 4rem 0;
        margin: 0;
        background-size: 92%;
    }

}
/* ============================================================ 6. max-width: 767px — Mobile ============================================================ */
 @media (max-width: 767px) {
     :root {
         --header-h: 60px;
         --logo-size: 108px;
    }
    /* Header */
    .header-inner {
        padding: 0 12px;
        padding-top: 12px;
    }
    .site-header{
        height: 80px;
    }
    /* Mobile menu */
    .mobile-menu {
        width: 100%;
        min-width: unset;
        padding: 64px 28px;
    }
    .mobile-nav-list li a::after {
        font-size: 30px;
        height: auto;
    }
    .mm-socials {
        gap: 0.7rem;
    }
    .mm-social-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    /* replace old mobile menu rules with: */
.mobile-menu { padding: 1rem; }
.mm-top { margin-bottom: 1rem; }
.mm-body { grid-template-columns: 1fr; gap: 1rem; }
.mm-logo { width: 112px; }
.mm-contact-heading {
        font-size: 20px;
    }
.mm-contact-item { font-size: 14px; }
.mobile-nav-list li a {
        font-size: 1rem;
        padding: 10px 0;
    }


      .banner-section,
    .banner-section.home-page {
        position: relative;
        height: 230px;
        max-height: 230px;
        overflow: hidden;
        padding-bottom: 3rem;
        display: block;
        padding: 0;
    }
 
    .banner-section.home-page {
        height: 190px;
        max-height: 190px;
    }
 
    .banner-section .video-container {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: inherit;
        overflow: hidden;
    }
 
    .banner-section .video-container video.banner-video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        transform: translate(-50%, -50%);
        aspect-ratio: auto;
    }
 
    .banner-content {
        padding: 0;
    }
 
    .banner-heading {
        -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.9);
        margin-top: 8%;
    }
 
    .about-banner .banner-heading {
        font-size: clamp(5rem, 12.5vw, 11.5rem);
    }
    .banner-section::after, .cc-banner .banner-section::after{
        display: none;
    }

    /* Process */
     .process-section {
         padding: 3rem 1.25rem;
    }
     .process-container {
         max-width: 100%;
    }
    /* Caps */
     .caps-section {
         padding: 3rem 1.25rem;
    }
     .caps-container {
         max-width: 100%;
         grid-template-columns: 1fr;
         gap: 2.5rem;
    }
    
    .caps-card,.caps-card:nth-child(even) {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: start !important;
    }
     .caps-img {
         width: 100%;
         min-width: unset;
         max-width: 280px;
    }
    /* About */
     .about-section {
         padding: 3rem 1.25rem;
    }
     .about-container {
         max-width: 100%;
         gap: 1rem;
    }
     .about-lead {
         font-size: 15px;
    }
     .about-body {
         font-size: 14px;
    }
     .about-bottom-img {
         width: 154px;
    }
    .thrive-banner {
        padding: 12px 0;
    }
    /* Thrive */
     .thrive-list li {
         font-size: 16px;
    }
    .thrive-bg-inner span {
        font-size: clamp(5.5rem, 8vw, 7.5rem);
    }
     .thrive-list {
         gap: 0.5rem 1rem;
    }
    /* Footer */
    .footer-contact {
        width: 100%;
    }
    .footer-main {
        max-width: 100%;
        grid-template-columns: 1fr;
        padding: 36px 16px;
        gap: 2rem;
    }
    .footer-bottom {
        max-width: 100%;
        padding: 1rem 1.25rem;
        text-align: center;
    }
     .footer-right {
         flex-direction: column;
         align-items: flex-start;
    }
    .footer-contact-row {
        flex-direction: column;
        gap: 1rem;
    }
    .footer-contact-item {
        font-size: 16px;
    }
    .footer-cities {
        flex-wrap: wrap;
        gap: 14px;
    }
    .footer-address, .footer-cities,.footer-contact-item {
        gap: 12px;
    }
    .footer-nav {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .footer-nav-col {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 20px 32px;
    }
    .footer-logo {
        width: 160px;
    }
     .contact-section {
         padding: 3.5rem 1.25rem 4rem;
    }
     .contact-container {
         max-width: 100%;
         gap: 3rem;
    }
     .contact-offices {
         grid-template-columns: 1fr;
         gap: 1.5rem;
    }
     .contact-bottom {
         grid-template-columns: 1fr;
         gap: 2rem;
    }
     .contact-info-text {
         max-width: 100%;
    }
    
     .culture-container {
         gap: 1.6rem;
    }
    .hiring-section,.culture-section {
        padding: 2rem 1.25rem;
    }
     .hiring-container {
         max-width: 100%;
    }
     .job-title {
         font-size: 0.95rem;
    }
    .banner-body-text {
        left: 6%;
        right: 6%;
        max-width: 100%;
        bottom: 38%;
        font-size: 14px;
    }
    .banner-thrive {
        font-size: clamp(5rem, 15vw, 9rem);
    }
    .banner-section::after,.cc-banner .banner-section::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 85%;
        /* background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); */
        pointer-events: none;
    }
    .banner-section.home-page::after{
        background: none;
    }
     .banner-thrive {
         -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
    }
    .ow-section,.contact-section {
        padding: 48px 16px;
    }
     .ow-container {
         max-width: 100%;
    }
     .ow-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
    }
     .ow-modal-box {
         width: 95%;
    }
    .ow-card-title {
        font-size: 18px;
    }
    .ow-intro {
        font-size: 16px;
    }
    .logo-circle {
        width: 96px;
        height: 96px;
    }
    .capabilities-banner .banner-heading {
        margin-top: 190px;
        font-size: 42px;
    }
    .banner-subtext {
        font-size: 14px;
    }
    .cc-banner .banner-heading {
        margin-top: 190px !important;
        font-size: 48px;
        line-height: 58px;
    }
    .culture-text {
        font-size: 16px;
        line-height: 1.7;
    }
   
    .contact-banner .banner-heading {
        margin-top: 160px !important;
        font-size:48px;
    }
    .contact-section {
        background-position: center 2%;
    }
    .mute-btn {
        top: auto;
        bottom: 10px;
        right: 10px;
        font-size: 12px;
    }
    .about-banner .banner-heading {
        font-size: 54px;
    }
    .contact-banner .banner-content, .capabilities-banner .banner-content, .cc-banner .banner-content {
        padding: 0 12px;
    }
    .ow-card-overlay {
        padding: 6px 12px;
    }
    .ow-card-title {
        font-size: 16px;
        line-height: 20px;
    }
    .footer-sep{
        display: none;
    }
}