/* ===========================
   RESPONSIVE STYLES
   Single approach: max-width breakpoints only (desktop-first).
   Breakpoints (largest to smallest): 1400, 1100, 1080, 1023, 900, 767, 700,
   560, 480 - each media query below appears exactly once and holds every
   rule for that width, grouped by shared chrome/components first, then by
   page. Site chrome (topbar/navbar/footer) and shared components (.cta,
   .panel, FAQ accordion, cta-final) stay unscoped, matching index.css.
=========================== */

@media (max-width:1400px){
  /* ===========================
     COMMON COMPONENTS
  =========================== */
  /* Section padding - tablet & desktop (container handles horizontal spacing above this width) */
  section,
  .footer{padding:2rem 3rem;}
  /* Home Hero */
  .home .hero .content{padding:2rem 3rem;}

  /* ===========================
     PAGE: ABOUT
  =========================== */
  /* Why Choose Us - stack to a single column here (rather than at 900px);
     the 2-col 0.85fr/1.15fr split only leaves enough room for 3 comfortable
     floating cards once the container is at its full 1400px, so anywhere
     below that the 3 cards were getting squeezed down to ~120-190px wide
     with heavily wrapped text */
  .about .why .row{grid-template-columns:1fr;gap:50px;}
  .about .why .media{padding-bottom:0;}
  .about .why .media img{height:480px;}
  .about .why .cards{position:static;margin-top:-46px;left:auto;right:auto;padding:0 20px;}
  .about .why .cards .card{padding:26px 16px;}

  /* ===========================
     PAGE: REVIEWS
  =========================== */
  /* Base index.css sizes below are the large-screen (>1400) tier; freeze
     these back to the tablet/desktop sizes since they already read fine
     at this width and don't need the large-screen bump. */
  /* .reviews .sources .card .logo{font-size:15px;}
  .reviews .sources .card strong{font-size:24px;}
  .reviews .sources .card > span{font-size:12.5px;}
  .reviews .sources .btn{font-size:14px;} */
  .reviews .rating .stat .icon-circle{width:44px;height:44px;}
  .reviews .rating .stat .icon-circle .icon{width:20px;height:20px;}
  .reviews .rating .stat strong{font-size:30px;}
  .reviews .rating .stat span{font-size:13px;}
  .reviews .grid-reviews .person .avatar{width:40px;height:40px;font-size:13px;}
  .reviews .grid-reviews .person strong{font-size:13.5px;}
  .reviews .grid-reviews .person span{font-size:12px;}
  .reviews .grid-reviews .verified{font-size:11.5px;}
  .reviews .grid-reviews .date{font-size:11.5px;}
  .reviews .wall .hub strong{font-size:26px;}
  .reviews .wall .hub span{font-size:12px;}
  .reviews .wall .node{font-size:13px;}
}

@media (max-width:1100px){
  /* ===========================
     NAVBAR
  =========================== */
  /* Mobile menu - switches before the navbar runs out of horizontal room */
  .navbar .links{position:fixed;top:84px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;justify-content:flex-start;padding:34px 24px;gap:6px;transform:translateX(-100%);transition:transform .3s ease;overflow-y:auto;}
  .navbar .links.open{transform:translateX(0);}
  .navbar .links a{display:block;padding:14px 4px;width:100%;border-bottom:1px solid var(--gray-100);}
  .navbar .phone{display:none;}
  .navbar .toggle{display:flex;}

  /* ===========================
     PAGE: HOME
  =========================== */
  /* Feature Strip - switches to 2x2 before the row gets too cramped for 4 columns */
  .home .feature .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;}
  .home .feature .item{border-right:none;padding:0;}
}

@media (max-width:1080px){
  /* ===========================
     FOOTER
  =========================== */
  .footer .main .row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .footer .main .row > div{border-right:none;padding-right:0;}

  /* ===========================
     PAGE: HOME
  =========================== */
  /* Services */
  .home .services .grid{grid-template-columns:repeat(3,minmax(0,1fr));}

  /* About / Why Choose Us */
  .home .about .panel .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}

  /* Stats */
  .home .stats .row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px;}

  /* Industries */
  .home .industries .grid{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* Testimonials */
  .home .testimonials .page{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}

  /* ===========================
     PAGE: ABOUT
  =========================== */
  /* Banner */
  .about .banner{min-height:520px;}
  .about .banner h1{font-size:44px;}
  .about .banner .highlights{display:none;}

  /* Stats - 2-col grid; the 5th/leftover item falls into column 1 (left)
     via normal grid auto-placement, aligning under the column above it.
     Padding is zeroed (column-gap handles spacing instead) because the
     base :first-child/:last-child padding rules only zero out the very
     first and last item overall, not every item that lands in column 1 -
     leaving items 3 and 5 indented relative to item 1 otherwise. */
  .about .stats .row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px;column-gap:40px;}
  .about .stats .stat{padding:0;}
  .about .stats .stat::after{display:none;}

  /* Industries We Serve */
  .about .industries .grid{grid-template-columns:repeat(4,1fr);row-gap:28px;}

  /* ===========================
     PAGE: SERVICES
  =========================== */
  /* Banner */
  .services .banner{min-height:420px;}
  .services .banner h1{font-size:44px;}
  .services .banner .subheading{font-size:19px;}

  /* Service Entries */
  .services .entries .entry{grid-template-columns:1fr 1fr;}
  .services .entries .panel{grid-column:1 / -1;}

  /* ===========================
     PAGE: CONTACT
  =========================== */
  /* Banner / Form */
  .contact .banner h1{font-size:44px;}
  .contact .form-wrap .row{grid-template-columns:1fr;}
  .contact .form-wrap{margin-top:-80px;}

  /* Trust Bar */
  .contact .trust .bar{grid-template-columns:1fr 1fr;row-gap:28px;padding:30px 32px;}
  .contact .trust .item{padding:0 20px;}
  .contact .trust .item:nth-child(2)::after{display:none;}

  /* Resources */
  .contact .resources .row{grid-template-columns:1fr;gap:56px;}

  /* ===========================
     PAGE: INDUSTRIES
  =========================== */
  .industries .hero h1{font-size:42px;}
  .industries .grid-section .grid{grid-template-columns:repeat(3,1fr);}
  .industries .why .grid{grid-template-columns:repeat(2,1fr);}
  .industries .process .track{grid-template-columns:repeat(4,1fr);row-gap:32px;}
  .industries .process .track::before{display:none;}
  /* .industries .cases .grid{grid-template-columns:repeat(2,1fr);} */
  .industries .tech .grid{grid-template-columns:repeat(3,1fr);}
  .industries .testimonials .grid{grid-template-columns:repeat(2,1fr);}
  .industries .faq .row{grid-template-columns:1fr;gap:20px;}
  .industries .faq .illustration{min-height:260px;order:-1;}
  .industries .faq .illustration .art{max-width:220px;}

  /* ===========================
     PAGE: REVIEWS
  =========================== */
  .reviews .hero h1{font-size:38px;}
  .reviews .rating .grid{grid-template-columns:repeat(2,1fr);}
  .reviews .featured .card{padding:40px;}
  .reviews .grid-reviews .masonry{column-count:2;}
  .reviews .videos .grid{grid-template-columns:repeat(2,1fr);}
  /* .reviews .stories .story{grid-template-columns:1fr;text-align:left;}
  .reviews .stories .story .result{border-left:none;border-top:1px solid var(--gray-100);padding-left:0;padding-top:20px;text-align:left;} */
  .reviews .love .grid{grid-template-columns:repeat(2,1fr);}
  /* .reviews .sources .grid{grid-template-columns:repeat(2,1fr);} */
  .reviews .faq .row{grid-template-columns:1fr;gap:20px;}
  .reviews .faq .illustration{min-height:260px;order:-1;}
  .reviews .faq .illustration .art{max-width:220px;}
}

@media (max-width:1023px){
  /* ===========================
     TYPOGRAPHY
  =========================== */
  h1{font-size:34px;}
  h2{font-size:32px;}
  h3{font-size:20px;}
  h4{font-size:18px;}
  h5{font-size:16px;}
  h6{font-size:15px;}
  p,li,button,.btn{font-size:14px;}
  .industries .grid-section .card .more{
    font-size:14px;
  }
}

@media (max-width:900px){
  /* ===========================
     TOPBAR
  =========================== */
  .topbar{display:none;}

  /* ===========================
     FOOTER
  =========================== */
  .footer .main .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .footer .cta .row{flex-direction:column;text-align:center;padding:32px 24px;}

  /* Shared .cta component — used by both this footer banner and the home page's industries banner */
  .cta .left{flex-direction:column;}

  /* ===========================
     PAGE: HOME
  =========================== */
  /* Hero */
  .home .hero .row{grid-template-columns:1fr;}
  .home .hero .image{height:280px;order:-1;}

  /* Services */
  .home .services .head{flex-direction:column;align-items:flex-start;gap:16px;}
  .home .services .text{text-align:left;max-width:none;}
  .home .services .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}

  /* About */
  .home .about .row{grid-template-columns:1fr;}
  .home .about .list{grid-template-columns:1fr;}

  /* Industries */
  .home .industries .cta{flex-direction:column;text-align:center;padding:36px 28px;}

  /* Stats */
  .home .stats .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}

  /* Testimonials — one card per page on narrow screens */
  .home .testimonials .page{grid-template-columns:1fr;}

  /* ===========================
     PAGE: ABOUT
  =========================== */
  /* Banner */
  .about .banner{min-height:460px;}
  .about .banner h1{font-size:36px;}
  .about .banner .row{max-width:100%;}

  /* Story */
  .about .story .row{grid-template-columns:1fr;gap:60px;}
  .about .story .media{order:-1;}
  .about .story .content p{max-width:100%;}

  /* Mission */
  .about .mission .grid{grid-template-columns:1fr 1fr;}

  /* Why Choose Us - narrower image now that the container itself is narrower
     (row/cards stacking already happened at the 1080px tier above) */
  .about .why .media img{height:360px;}

  /* Closing CTA */
  .about .close .row{flex-direction:column;align-items:flex-start;gap:28px;}
  .about .close .text,
  .about .close .text p{max-width:100%;}

  /* ===========================
     PAGE: SERVICES
  =========================== */
  /* Banner */
  .services .banner{min-height:380px;}
  .services .banner .row{max-width:100%;}

  /* Service Entries */
  .services .entries .entry{grid-template-columns:1fr;}
  .services .entries .media img{height:240px;}
  .services .entries .entry + .entry{margin-top:48px;padding-top:48px;}

  /* Help Bar */
  .services .help .bar{flex-direction:column;align-items:flex-start;padding:28px 26px;}
  .services .help .right{width:100%;flex-direction:column;align-items:flex-start;gap:20px;}
  .services .help .right .divider{width:100%;height:1px;}
  .services .help .right .btn{width:100%;justify-content:center;}

  /* ===========================
     PAGE: CONTACT
  =========================== */
  /* Banner / Form */
  .contact .banner{min-height:460px;}
  .contact .banner .row{max-width:100%;}
  .contact .form-wrap{margin-top:-60px;}
  .quote-form .grid{grid-template-columns:1fr;}
  .quote-modal__dialog{padding:34px;}

  /* Closing CTA Band */
  .contact .cta-band .bar{flex-direction:column;align-items:flex-start;padding:200px 28px 28px;}
  .contact .cta-band .bar::before{
    background:
      linear-gradient(180deg, rgba(10,24,48,.15) 0%, rgba(10,24,48,.85) 45%, rgba(10,24,48,.97) 60%),
      url("../images/hero-bg.png");
    background-repeat:no-repeat,no-repeat;
    background-size:100% 100%, 550% auto;
    background-position:0 0, 71% 75%;
  }

  /* ===========================
     PAGE: INDUSTRIES
  =========================== */
  .industries .hero{min-height:480px;}
  .industries .hero .row{max-width:100%;}
  .industries .trusted .stats{gap:40px;}
  .industries .grid-section .grid{grid-template-columns:repeat(2,1fr);}
  .industries .challenges .row{grid-template-columns:1fr;gap:40px;}
  .industries .why .grid{grid-template-columns:repeat(2,1fr);}
  .industries .metrics .row{justify-content:center;}
  .industries .metrics .stat{min-width:45%;}
  .industries .metrics .stat:not(:last-child)::after{display:none;}
  .industries .process .track{grid-template-columns:repeat(2,1fr);}
  /* .industries .cases .grid{grid-template-columns:1fr;} */
  .industries .tech .grid{grid-template-columns:repeat(2,1fr);}
  .industries .testimonials .grid{grid-template-columns:1fr;}
  .industries .faq .illustration{min-height:200px;}
  .industries .faq .illustration .art{max-width:180px;}
  .industries .faq .faq-cta{padding:32px 28px;}
  .industries .faq-item .q .text{
    font-size:14px;
  }
  .industries .faq-item .a p{
   font-size:13px;
  }

  /* ===========================
     PAGE: REVIEWS
  =========================== */
  .reviews .hero{min-height:420px;}
  .reviews .hero .row{max-width:100%;}
  .reviews .featured .card{padding:32px 24px;}
  .reviews .featured .card > p{font-size:17px;}
  .reviews .featured .company-logo{display:none;}
  .reviews .grid-reviews .masonry{column-count:1;}
  .reviews .videos .grid{grid-template-columns:1fr;}
  .reviews .love .grid{grid-template-columns:1fr;}
  /* .reviews .sources .grid{grid-template-columns:1fr;} */
  .reviews .wall .cloud{height:320px;}
  .reviews .wall .node{width:44px;height:44px;font-size:11px;}
  .reviews .wall .hub{width:110px;height:110px;}
  .reviews .wall .hub strong{font-size:20px;}
  /* PAGE:INDUSTRIES */
  .industries .metrics span {
    font-size: 16px;
  }
}

@media (max-width:767px){
  /* ===========================
     COMMON COMPONENTS
  =========================== */
  /* Section padding - mobile */
  section,
  .footer{padding:2rem 1.5rem;}
  /* Home Hero */
  .home .hero .content{padding:2rem 1.5rem;}
}

@media (max-width:700px){
  /* ===========================
     PAGE: ABOUT
  =========================== */
  /* Industries We Serve */
  .about .industries .grid{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:560px){
  /* ===========================
     FOOTER
  =========================== */
  .footer .main .row{grid-template-columns:1fr;}
  .footer .bottom .row{flex-direction:column;text-align:center;}
  .footer .bottom a{margin:0 10px;}

  /* ===========================
     PAGE: HOME
  =========================== */
  /* Services */
  .home .services .grid{grid-template-columns:1fr;}

  /* Feature Strip */
  .home .feature .row{grid-template-columns:1fr;}

  /* Stats — single column so the odd 5th item doesn't sit alone next to empty space */
  .home .stats .row{grid-template-columns:1fr;row-gap:24px;}

  /* Industries */
  .home .industries .grid{grid-template-columns:1fr;}

  /* ===========================
     PAGE: ABOUT
  =========================== */
  /* Banner */
  .about .banner{min-height:420px;}
  .about .banner h1{font-size:28px;}
  .about .banner p{max-width:100%;}

  /* Story */
  .about .story .media img{height:300px;}
  .about .story .shield{width:120px;height:136px;left:24px;bottom:-30px;}
  .about .story .shield strong{font-size:30px;}
  .about .story .shield span{font-size:10.5px;}

  /* Stats - reset the 1080px tier's flex-wrap back to a single column.
     display:flex (not block) so row-gap actually creates space after each
     item's divider - block doesn't support gap, which left the next
     item's content touching the divider above it. */
  .about .stats .row{display:flex;flex-direction:column;row-gap:28px;}
  .about .stats .stat{display:flex;padding:0;}
  .about .stats .stat:not(:last-child){padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12);}

  /* Mission */
  .about .mission .grid{grid-template-columns:1fr;}
  .about .mission .card{padding:30px;}

  /* Why Choose Us */
  .about .why .cards{grid-template-columns:1fr;margin-top:-30px;}
  .about .why .content > p{max-width:100%;}

  /* Closing CTA */
  .about .close .actions{width:100%;}
  .about .close .actions .btn{width:100%;justify-content:center;}

  /* ===========================
     PAGE: SERVICES
  =========================== */
  /* Banner */
  .services .banner{min-height:360px;}
  .services .banner h1{font-size:32px;}
  .services .banner .subheading{font-size:16px;}

  /* Service Entries */
  .services .entries .content{padding-left:0;padding-top:88px;}
  .services .entries .content .icon-circle{top:0;left:0;width:68px;height:68px;}
  .services .entries .content .icon-circle .icon{width:30px;height:30px;}
  .services .entries .content h3{font-size:24px;}
  .services .entries .content .tags{gap:16px;}
  .services .entries .panel{padding:26px 22px;}

  /* Help Bar */
  .services .help .left{flex-direction:column;align-items:flex-start;gap:14px;}
  .services .help .left p{max-width:100%;}

  /* ===========================
     PAGE: CONTACT
  =========================== */
  /* Banner / Form */
  .contact .banner{min-height:auto;}
  .contact .banner h1{font-size:32px;}
  .contact .banner .subheading{font-size:17px;}
  .contact .banner .actions{flex-direction:column;}
  .contact .banner .actions .btn{width:100%;justify-content:center;}
  .contact .form-wrap{margin-top:-40px;}
  .contact .form-card{padding:26px 22px;}
  .contact .info-panel{padding:30px 24px;}
  .quote-modal__dialog{padding:26px 22px;}
  .quote-modal__head{gap:12px;}

  /* Trust Bar */
  .contact .trust .bar{grid-template-columns:1fr;padding:26px 22px;}
  .contact .trust .item{padding:0;}
  .contact .trust .item::after{display:none;}
  .contact .trust .item:not(:last-child){padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--gray-100);}

  /* Resources */
  .contact .resources .services-col .list li{grid-template-columns:80px 24px 1fr;gap:10px;}
  .contact .resources .services-col .thumb img{height:60px;}
  .contact .resources .services-col .list > li > .icon{width:24px;height:24px;}
  .contact .resources .faq-item .q{padding:16px;gap:12px;}
  .contact .resources .faq-item .q .text{font-size:13.5px;}
  .contact .resources .faq-item .a p{padding:0 16px 18px 58px;}
  .contact .resources .office-col .map iframe{height:220px;}

  /* Closing CTA Band */
  .contact .cta-band .bar{padding:180px 22px 24px;}
  .contact .cta-band .actions{flex-direction:column;align-items:stretch;width:100%;}
  .contact .cta-band .actions .btn{width:100%;justify-content:center;}
  .contact .cta-band .call-box{justify-content:center;}

  /* ===========================
     PAGE: INDUSTRIES
  =========================== */
  .industries .hero h1{font-size:32px;}
  .industries .hero .actions .btn{width:100%;justify-content:center;}
  .industries .trusted .stat strong{font-size:32px;}
  .industries .trusted .logos{gap:26px;}
  .industries .grid-section .grid{grid-template-columns:1fr;}
  .industries .why .grid{grid-template-columns:1fr;}
  .industries .metrics .stat{min-width:100%;}
  .industries .tech .grid{grid-template-columns:1fr;}
  .industries .cta-final .bar,
  .reviews .cta-final .bar{padding:44px 24px;}
  .industries .cta-final h2,
  .reviews .cta-final h2{font-size:26px;}
  .industries .faq .illustration{min-height:160px;margin-bottom:8px;}
  .industries .faq .illustration .art{max-width:140px;}
  .industries .faq .illustration .shape{filter:blur(36px);}
  .industries .faq .accordion .a p,
  .reviews .faq .accordion .a p{padding-left:20px;}
  .industries .faq .faq-cta{flex-direction:column;text-align:center;padding:28px 22px;}
  .industries .faq .faq-cta .actions{width:100%;justify-content:center;}
  .industries .faq .faq-cta .actions .btn{flex:1;justify-content:center;}

  /* ===========================
     PAGE: REVIEWS
  =========================== */
  .reviews .hero h1{font-size:30px;}
  .reviews .hero .actions .btn{width:100%;justify-content:center;}
  .reviews .rating .grid{grid-template-columns:1fr;}
  .reviews .featured .card{padding:26px 20px;}
  /* .reviews .stories .story{padding:26px 22px;} */
  .reviews .faq .illustration{min-height:200px;}
  .reviews .faq .illustration .art{max-width:180px;}
  .reviews .cta-final .actions{flex-direction:column;align-items:stretch;}
}

@media (max-width:480px){
  /* ===========================
     NAVBAR
  =========================== */
  /* CTA shrinks to icon-only so it stops overlapping the logo */
  .navbar .actions{gap:10px;}
  .navbar .btn-primary{padding:12px 14px;}
  .navbar .btn-primary span{display:none;}

  /* ===========================
     PAGE: ABOUT
  =========================== */
  /* Industries We Serve */
  .about .industries .grid{grid-template-columns:repeat(2,1fr);}
  .about .industries .item .icon{width:44px;height:44px;}
}