/* ==========================================================================
   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:78.57%}
  .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}
  /* The whole menu is a collapsed accordion from 1024px down, so the Services
     mega-panel has to drop back to one flowing column here - not at 767px.
     As a three-column grid inside the accordion each service name would get
     about a third of the panel width and wrap to three lines. */
  .menu ul.sub--mega{
    display:block;width:auto;padding:0;grid-template-columns:none;
  }
  .menu ul.sub--mega a{padding:12px 40px;border-radius:0;font-size:14px}
  .menu ul.sub--mega li:not(:last-child){border-bottom:1px dotted var(--white-47)}
  .menu ul.sub--mega li:nth-last-child(2),
  .menu ul.sub--mega li:last-child{margin-top:0;padding-top:0;border-top:0}

  /* 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)}
  /* Locality service cards: two up on a tablet, so two rows are visible before
     Show More rather than one. */
  .asvc__grid{gap:24px}
  .asvc__grid > .asvc__i{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:34.02%;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:92.43%}
  .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}
  .trustband__h{font-size:24px}
  .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:68.04%}
  .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%}
  /* One card per row on a phone. Four full-width cards is already a long
     scroll, so Show More matters most here. */
  .asvc__grid > .asvc__i{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}
  /* Slightly smaller and tucked closer in on a phone, where thumb reach
     matters and the buttons sit over real content. */
  .hs-float{right:14px;bottom:14px;gap:10px}
  .hs-float__btn{width:48px;height:48px}
  .hs-float__btn svg{width:23px;height:23px}
  /* No hover on touch, so the slide-out label would never be seen. */
  .hs-float__tip{display:none}
}