/* ------------------------------------------------------------------
   Strait Contractors - mobile layer  (v2)
   Every layout rule lives inside a max-width media query, so the
   desktop rendering is unchanged.
   The header is matched through the hamburger button itself
   (div:has(> .sc-mbtn)) because the page runtime resets className
   on the elements it owns.
------------------------------------------------------------------ */

.sc-mbtn{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;margin:0;padding:0;border:0;background:transparent;border-radius:11px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sc-mbtn:active{background:rgba(0,0,0,.06)}
.sc-mbtn i{display:block;position:relative;width:20px;height:2px;background:#1d1d1f;border-radius:2px;transition:background .15s ease}
.sc-mbtn i::before,.sc-mbtn i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#1d1d1f;border-radius:2px;transition:transform .22s ease,top .22s ease}
.sc-mbtn i::before{top:-6px}
.sc-mbtn i::after{top:6px}

@media (max-width:860px){

  .sc-mbtn{display:flex}
  .sc-mbtn[aria-expanded="true"] i{background:transparent}
  .sc-mbtn[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
  .sc-mbtn[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

  /* header row: logo left, hamburger right, single line */
  .sc-mrow,
  div:has(> .sc-mbtn){position:relative!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;height:56px!important;padding:0 16px!important;gap:12px!important}
  .sc-mrow img,
  div:has(> .sc-mbtn) > * img,
  div:has(> .sc-mbtn) > img{height:26px!important;width:auto!important;max-width:60vw!important}

  /* the element just before the button is the nav: becomes a drop panel */
  .sc-mnav,
  div:has(> .sc-mbtn) > *:nth-last-child(2){display:none!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;flex-wrap:nowrap!important;gap:0!important;margin:0!important;padding:6px 10px 12px!important;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 14px 30px rgba(0,0,0,.10);max-height:calc(100vh - 56px);overflow-y:auto;-webkit-overflow-scrolling:touch}

  div:has(> .sc-mbtn[aria-expanded="true"]) > *:nth-last-child(2){display:flex!important}

  .sc-mnav > *,
  div:has(> .sc-mbtn) > *:nth-last-child(2) > *{display:block!important;width:100%!important;box-sizing:border-box;text-align:left!important;font-size:16px!important;line-height:1.3!important;padding:14px 14px!important;border-radius:12px!important;white-space:normal!important;margin:0!important}
  .sc-mnav > * + *,
  div:has(> .sc-mbtn) > *:nth-last-child(2) > * + *{border-top:1px solid rgba(0,0,0,.06)}

  /* generic rescues, applied by mobile.js */
  .sc-fixw{width:auto!important;max-width:100%!important;height:auto!important}
  .sc-pad{padding-top:clamp(44px,11vw,var(--sc-pt,64px))!important;padding-bottom:clamp(44px,11vw,var(--sc-pb,64px))!important}
  .sc-big{font-size:clamp(26px,7.2vw,var(--sc-fs,40px))!important}
  .sc-tall{height:var(--sc-mh,320px)!important}
  .sc-minh{height:auto!important;min-height:var(--sc-mh,320px)!important}
  img.sc-fixw{width:100%!important}
  img.sc-tall,img.sc-minh{width:100%!important;object-fit:cover}

  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  img,svg,video{max-width:100%}
}

@media (max-width:480px){
  .sc-mrow,
  div:has(> .sc-mbtn){padding:0 14px!important}
}