/* ==========================================================================
   responsive.css — breakpoints mirror the reference: 1024px (tablet) & 767px
   ========================================================================== */

/* ---------- <= 1024px ---------------------------------------------------- */
@media (max-width:1024px){
  .con{max-width:1024px;padding:0 32px}
  h1{font-size:40px}

  /* header: collapse the menu behind a toggle */
  .site-head{padding:20px 20px 0}
  .logo{width:38%;max-width:38%}
  .logo img{width:68%}
  .head-nav{
    width:70%;position:relative;padding:4px 4px 4px 12px;
    display:flex;align-items:center;
  }
  .nav-toggle{display:inline-flex}
  .menu{
    position:absolute;top:100%;left:0;right:0;margin-top:8px;
    flex-direction:column;background:var(--navy);border-radius:6px;
    box-shadow:0 4px 24px 0 rgba(0,0,0,.12);
    display:none;z-index:30;
  }
  .menu.is-open{display:flex}
  .menu > li{width:100%}
  .menu > li:not(:last-child){border-bottom:1px dotted var(--white-47)}
  .menu > li > a{padding:14px 24px}
  .menu .has-sub > a::after{float:right;margin-top:6px}
  .menu ul.sub{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;box-shadow:none;border-radius:0;display:none;
    background:rgba(0,0,0,.15);
  }
  .menu li.is-open > ul.sub{display:block}
  .menu li:hover > ul.sub{opacity:1;visibility:visible}
  .menu ul.sub a{padding:12px 40px}

  /* generic column collapse */
  .row--stack-t{flex-direction:column}
  .row--rev-t{flex-direction:column-reverse}
  .row--fit{flex-wrap:wrap}
  .w-24,.w-28,.w-30,.w-32,.w-36,.w-40,.w-42,.w-44,.w-46,.w-48,
  .w-54,.w-56,.w-58,.w-60,.w-64,.w-72{width:100%}
  .grid-2 > *,.cards-2 > *{width:100%}
  .grid-3 > *{width:calc((100% - 24px)/2)}
  .grid-4 > *{width:calc((100% - 24px)/2)}
  .posts > *{width:50%}
  .rev2{margin:-16px}
  .rev2 > *{width:calc(50% - 32px);margin:16px}
  .tcard--lg{padding:32px}
  .num{font-size:72px}
  .svcgrid{gap:24px}
  .svcgrid > *{width:calc((100% - 24px)/2)}
  .img-cover-380 img{height:360px}
  .img-cover-600 img{height:400px}
  .wpanel{padding:40px}
  .wpanel > *{width:100%}
  .bpanel > *{width:100%}
  .ptitle{padding:110px 0 80px}
  .ptitle--start{padding-top:128px}
  .ptitle--start .ptitle__in{width:88%;margin:0 auto;text-align:center}
  .ptitle--start .eyebrow{justify-content:center}
  .pband > *{width:46%}
  .side--pull{margin-top:0}
  .minirow{flex-direction:row;justify-content:space-between}
  .minirow > *{width:48%}
  .flipgrid > *{width:calc((100% - 32px)/2)}
  .flipgrid .flip{height:380px}
  .grid-2--40{gap:32px}
  .prow,.satrow{flex-direction:column}
  .prow--rev{flex-direction:column}
  .prow__img,.prow__body,.satrow__img,.satrow__body{width:100%}
  .prow__img img,.prow--rev .prow__img img{border-radius:6px 6px 0 0}
  .prow__body,.prow--rev .prow__body{border-radius:0 0 6px 6px}
  .satrow__img img{height:400px}
  .satrow__body{padding:48px 40px}
  .notecard{padding:60px 40px}
  .qgrid{gap:40px}
  .qgrid > *{width:calc((100% - 40px)/2)}
  .mvcard{padding:32px 32px 0}
  .quoteband{padding:160px 0}
  .formcard{padding:40px}
  .side-4{margin-top:80px;flex-direction:row;flex-wrap:wrap;gap:40px}
  .side-4 > *{width:calc((100% - 40px)/2)}
  .w-52,.w-66,.w-68{width:100%}
  .w-34{width:100%}
  .gap-64{gap:40px}
  .gap-80,.gap-40-100{gap:40px}
  .push-100{margin-bottom:0}
  .addrow{flex-direction:column;align-items:center}
  .addrow__img{width:100%}
  .addrow__card{width:90%;margin:-120px 0 0}
  .joincard{flex-direction:column;align-items:flex-start;gap:24px;padding:48px 60px}
  .gallery-wide img{height:340px}
  .gallery-4{flex-wrap:wrap}
  .gallery-4 img{width:calc((100% - 10px)/2);height:260px}
  .quoteband--tall{padding:240px 0 200px}
  .jobcard{padding:32px}
  .bloggrid{gap:40px 32px}
  .bloggrid > *{width:calc((100% - 32px)/2)}
  .ptitle--post{padding:140px 0 120px}
  .ptitle--post .ptitle__in{width:100%}
  .side--pull-180{margin-top:40px}
  .entry__pair img{height:240px}
  .replybox{padding:40px}
  .cstack{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:28px}
  .cstack > *{width:48%}
  .cbtns{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:24px}
  .mapbox{margin-top:60px}
  .err--dark{padding:120px 0}

  .ml-60,.ml-80,.ml-100{margin-left:0}
  .pull-60,.pull-100,.pull-120{margin-top:60px}
  .mt-100,.pad-t-100{margin-top:80px}
  .headband{padding:80px 0 100px}

  .hero{background-position:center left}
  .hero__card{padding:128px 32px 100px;width:54%}
  .bookcard{margin:0}
  .imgpair__main,.imgpair--r .imgpair__main{margin:0}
  .imgpair__main img{height:400px}
  .imgpair__inset{margin-top:-120px}
  .imgpair--r .imgpair__inset{margin-top:-120px}
  .apanel{margin-top:60px}
  .emg{padding-bottom:380px;align-items:flex-start}
  .emg__card{width:100%}
  .flip{height:320px}
  .scard,.lcard{flex-wrap:wrap}
  .scard__media,.scard__body,.lcard__media,.lcard__body{width:100%;flex:0 0 100%}
  .scard__media img{height:280px}
  .ptitle__in{width:80%}

  .ctaband__in{max-width:100%;padding-left:32px}
  .ctaband__img{width:36%;padding-top:20px}
  .ctaband__img img{width:100%}
  .ctaband__card{width:64%;margin-left:-40px;padding:40px 32px 40px 48px}

  .site-foot{padding:60px 48px}
  .foot-cols{flex-wrap:wrap;justify-content:space-between;row-gap:64px}
  .foot-col{width:100%;text-align:center}
  .foot-col--contact,.foot-col--info{width:44%;flex:0 0 44%;text-align:left}
  .foot-col--insta{flex:0 0 100%;width:100%}
  .foot-logo{width:32%;margin:0 auto 8px}
  .site-foot .socials{justify-content:center}
  .insta a{width:calc((100% - 40px)/6)}
  .copybar{padding:32px 20px}
  .copybar .con{flex-direction:column;text-align:center}
  .copybar__links{width:100%;justify-content:center}
  .copybar__note{width:100%;text-align:center}
}

/* ---------- <= 767px ---------------------------------------------------- */
@media (max-width:767px){
  .con{max-width:767px;padding:0 20px}
  .pkg{padding:40px 24px}
  h1{font-size:34px}
  h2{font-size:26px}
  h5{line-height:1.9em}
  .t-big{font-size:60px}

  .site-head{padding:16px 10px 0}
  .logo{width:56%;max-width:56%}
  .logo img{width:80%}
  .head-info,.site-head .socials{display:none}
  .head-nav{width:38%}
  .head-phone{width:62%;padding:18px 16px;font-size:14px}

  .hero{
    padding-bottom:232px;background-position:bottom center;background-size:100% auto;
    flex-direction:column;
  }
  .hero__card{width:100%;padding:100px 12px 48px;text-align:center;align-items:center}
  .hero__card .btn{align-self:center}
  .grid-3 > *,.grid-4 > *,.posts > *{width:100%}
  .flip{height:300px}
  .emgstrip .con{flex-direction:column;text-align:center;gap:24px}
  .emgstrip{padding:40px}
  .trust li{flex:0 0 42%}
  .trust img{width:84%}
  .ptitle__in{width:92%}
  .ptitle{padding:80px 0 60px}
  .form .fg--half{width:100%}
  .plist__row{flex-wrap:wrap}
  .plist__sep{display:none}
  .plist__p{margin-left:auto}
  .faq__ic{width:28px;height:28px}
  .faq__ic svg{width:12px;height:12px}
  .scard__body,.lcard__body{padding:24px}
  .lcard__body{text-align:center}
  .lcard .ilist li{justify-content:center}

  .ctaband__in{flex-direction:column;padding:12px}
  .ctaband__img{width:100%;order:2;margin-top:20px;text-align:center;padding-top:0}
  .ctaband__img img{width:80%;margin:0 auto}
  .ctaband__card{
    width:100%;order:1;margin:0 0 20px;padding:60px 20px;text-align:center;
  }
  .ctaband__card .btn{align-self:center;padding:16px 32px}
  .ctaband__links{justify-content:center}

  .site-foot{padding:60px 20px}
  .foot-col,.foot-col--contact,.foot-col--info{width:100%;flex:0 0 100%;text-align:center}
  .foot-list li,.foot-links li{justify-content:center}
  .foot-logo{width:64%}
  .insta a{width:calc((100% - 16px)/3)}
  .imgpair__inset img{width:80%}
  .counter{align-items:center;text-align:center}
  .stats{flex-direction:column;gap:20px}
  .rev2 > *{width:100%;margin:12px 0}
  .rev2{margin:0}
  .err__code{font-size:100px}
  .err{padding:80px 0}
  .jobrow{padding:24px;text-align:center;justify-content:center}
  .jobrow__meta{justify-content:center}
  .entry blockquote{padding:24px}
  .side__box{padding:24px}
  .svcgrid > *{width:100%}
  .img-cover-380 img{height:220px}
  .img-cover-600 img{height:260px}
  .wpanel{padding:24px}
  .bpanel{padding:8px}
  .bpanel > *{padding:20px 16px}
  .ptitle--start .ptitle__in{width:92%}
  .pband > *{width:100%}
  .pband{gap:24px}
  .minirow{flex-direction:column}
  .minirow > *{width:100%}
  .carousel{flex-wrap:wrap;gap:16px}
  .carousel > *{width:100%}
  .side__box--navy{padding:32px 20px}
  .flipgrid > *{width:100%}
  .flipgrid .flip{height:300px}
  .grid-2--40{gap:24px}
  .prow__img img{height:220px}
  .prow__body{padding:40px 24px}
  .satrow__img img{height:320px}
  .satrow__body{padding:40px 20px}
  .notecard{padding:60px 20px;margin:20px}
  .qgrid{gap:32px}
  .qgrid > *{width:100%}
  .quoteband{padding:140px 0}
  .mvcard{padding:20px 20px 0}
  .formcard{padding:40px 20px}
  .side-4{flex-direction:column;gap:40px}
  .side-4 > *{width:100%}
  .addrow__card{width:90%;margin:-80px 0 0;padding:32px 20px}
  .addrow__img{min-height:240px}
  .joincard{padding:48px 32px}
  .gallery-wide img{height:240px}
  .gallery-4 img{width:100%;height:240px}
  .applybox{padding:40px 16px}
  .quoteband--tall{padding:200px 0 160px}
  .bloggrid > *{width:100%}
  .bloggrid{gap:40px}
  .ptitle--post{padding:120px 0 100px}
  .entry__pair{flex-direction:column;gap:16px}
  .entry__pair > *{width:100%}
  .entry__pair img{height:220px}
  .morehead{gap:12px;margin:60px 0 32px}
  .morehead h3{white-space:normal;text-align:center}
  .replybox{padding:32px 20px}
  .cstack{flex-direction:column;gap:24px}
  .cstack > *{width:100%}
  .msgbox{padding:40px 16px}
  .mapbox{margin-top:40px}
  .mapbox img,.mapbox iframe{height:300px}
  .err--dark{padding:100px 0}
  .err__p{font-size:17px}
}