/* Phone layout (the mockup was desktop-only). Loads last, so it wins over page CSS. */
@media (max-width:767px){
  /* top bar */
  .topbar .tb-in{justify-content:center!important;gap:22px!important;font-size:13px!important;padding-inline:16px!important}
  .topbar .tb-in a{font-size:13px!important}
  .topbar .tb-phone svg{width:12px;height:12px}

  /* trust bar: 2 x 2 */
  .trust-in{display:grid!important;grid-template-columns:1fr 1fr;gap:22px 14px!important;padding-block:32px!important}
  .trust-in .ti-sep{display:none!important}
  .trust-in .ti{display:flex!important;flex-direction:column;align-items:flex-start;gap:8px!important;width:auto!important;text-align:left}
  .trust-in .ti svg{width:34px!important;height:34px!important}
  .trust-in .ti h3{font-size:14.5px!important;line-height:1.25!important;margin:0!important}
  .trust-in .ti p{font-size:12.5px!important;line-height:1.4!important;margin:2px 0 0!important}
  .trust-in{padding-inline:20px!important;justify-items:stretch}
  .trust-in .ti{min-width:0!important;margin:0!important;max-width:none!important;justify-self:stretch!important}
  .trust-in .ti h3,.trust-in .ti p{white-space:normal!important;text-align:left!important;width:auto!important}
  .trust-in .ti>div{min-width:0}

  /* service cards: photo on top, text below (the frosted overlay is too tall for a phone) */
  .svc-col{height:auto!important}
  .svc-card{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;overflow:hidden}
  .svc-card>img{position:static!important;width:100%!important;height:210px!important;object-fit:cover}
  .svc-card .svc-frost{position:static!important;inset:auto!important;width:auto!important;transform:none!important;margin:0!important;border-radius:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:22px 22px 26px!important}

  /* Who We Clean For: 2 columns, photo over label */
  .ind-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:22px 14px!important;border:0!important}
  .ind-grid .ind{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;padding:0!important;border:0!important;min-height:0!important}
  .ind-grid .ind::before,.ind-grid .ind::after{display:none!important}
  .ind-grid .ind-img{width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
  .ind-grid .ind span{font-size:15px!important;line-height:1.3!important}

  /* As Recognized By: 2 columns, logos sized to fit */
  .aw-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:30px 12px!important}
  .aw-row .awl{width:auto!important;min-width:0!important;display:flex!important;flex-direction:column;align-items:center;gap:12px!important}
  .aw-row .aw-logo-box{width:100%!important;height:64px!important;display:flex!important;align-items:center;justify-content:center}
  .aw-orig .aw-row .awl img{height:64px!important;max-width:100%!important;width:auto!important;object-fit:contain}
  .aw-row img[src*="aw-cityvetted"]{transform:scale(1.6)!important}
  .aw-row .awl>span:last-child{font-size:11px!important;letter-spacing:.08em!important;text-align:center;line-height:1.35}
  .aw-row .awl:last-child{grid-column:1 / -1}

  /* closing call to action: equal full-width buttons */
  .cta-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;width:100%}
  .cta-actions .cta-call{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  .cta-actions .svc-btn{width:100%!important;min-height:52px!important;height:52px!important;padding:0 14px!important;display:flex!important;align-items:center;justify-content:center;text-align:center;white-space:nowrap!important;font-size:13px!important;letter-spacing:.1em!important;box-sizing:border-box}
  .cta-actions .cta-call small{display:none!important}

  /* footer: link lists side by side */
  .ft-top{display:grid!important;grid-template-columns:1fr 1fr!important;gap:36px 18px!important}
  .ft-top>.ft-about,.ft-top>.ft-contact{grid-column:1 / -1}
  .ft-top h3{font-size:12px!important;letter-spacing:.12em}
  .ft-top ul a{font-size:14px!important}
  .ft-top ul a{line-height:1.35!important;display:inline-block}

  .ind-grid::before,.ind-grid::after{display:none!important}
  .ind-grid .ind:nth-child(n),.ind-grid.com-grid .ind:nth-child(n){border:0!important;box-shadow:none!important}

  /* every pill button keeps its label on one line */
  .svc-btn,.btn,.ctas a,button[type=submit]{white-space:nowrap!important;font-size:12.5px!important;letter-spacing:.07em!important;padding-left:18px!important;padding-right:18px!important;max-width:100%;box-sizing:border-box}

  /* every hero: full-width photo on top, then headline, buttons and rating on linen */
  .hero{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;max-height:none!important;padding-top:116px!important;background:#F5F2ED!important}
  .hero::after,.hero::before{display:none!important}
  .hero>.poster,.hero>video{position:relative!important;inset:auto!important;order:-1!important;flex:none;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:4/3;object-fit:cover!important;transform:none!important;filter:none!important;animation:none!important;border-radius:0}
  /* homepage: one still photo on phones, no slideshow */
  .hero>video{display:none!important}
  .hero:not(.svc-hero)>.poster{display:block!important;opacity:1!important;object-position:80% 50%!important}
  /* service pages use tall photos, so give them a squarer frame */
  .svc-hero.split>.poster{aspect-ratio:1/1;object-position:50% 40%!important}
  .hero .hero-copy{position:relative!important;inset:auto!important;transform:none!important;display:block!important;height:auto!important;min-height:0!important;padding:28px 24px 36px!important;background:#F5F2ED!important}
  .hero .hero-left{max-width:none!important;padding:0!important;display:block!important}
  .hero .crumbs{margin-bottom:12px}
  .hero .crumbs,.hero .crumbs a{color:#193579!important;text-shadow:none!important}
  .hero h1{color:#193579!important;text-shadow:none!important;font-size:clamp(31px,9vw,40px)!important;line-height:1.08!important;margin:0 0 14px!important}
  .hero .lede{color:#2E3A55!important;text-shadow:none!important;font-size:17px!important;line-height:1.55!important;margin:0!important;max-width:none!important}
  .hero .ctas{width:100%!important;max-width:none!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;margin-top:24px!important}
  .hero .ctas a{width:100%!important;justify-content:center;text-align:center;border:1.5px solid #193579!important}
  .hero .hero-right{position:static!important;inset:auto!important;transform:none!important;margin-top:22px!important;width:auto!important}

  /* per-page photo framing so each person stays in the shot */
  .hero>.poster[src*="spc-hero4"]{object-position:100% 50%!important}
  .hero>.poster[src*="about-hero"]{object-position:85% 50%!important}
  .hero>.poster[src*="contact-hero"]{object-position:92% 50%!important}
  .hero>.poster[src*="sp-window-hero"]{object-position:50% 55%!important}
  .hero>.poster[src*="svc-hero-room"]{object-position:100% 50%!important}
  .hero>.poster[src*="com-hero14"]{object-position:100% 50%!important}

  /* trust bar: centered 2 x 2 with thin dividers */
  .trust-in{grid-template-columns:1fr 1fr!important;gap:0!important;padding:8px 16px!important;align-items:stretch}
  .trust-in .ti{align-items:center!important;justify-content:flex-start!important;text-align:center!important;padding:22px 8px!important;gap:8px!important}
  .trust-in .ti h3,.trust-in .ti p{text-align:center!important}
  .trust-in .ti svg{width:38px!important;height:38px!important}

  /* homepage hero: smaller Google rating */
  .hero:not(.svc-hero) .rating-badge,.svc-hero .rating-badge{display:inline-flex!important;width:auto!important;padding:8px 14px 8px 12px!important;gap:10px!important}
  .rating-badge svg{width:22px!important;height:22px!important}
  .rating-badge .rb-top b{font-size:20px!important;line-height:1.1}
  .rating-badge .stars{font-size:14px!important;line-height:1.4}
  .rating-badge small{font-size:12.5px!important;margin-top:0!important}

  /* photo and text sections: even spacing, photo offset always to the right */
  .zz-in{gap:56px!important;padding-block:56px!important}
  .zz-row{gap:22px!important}
  .zz-row .zz-copy>*:last-child{margin-bottom:0!important}
  .zz-row.flip .zz-photo{margin-left:0!important;margin-right:20px!important}
  .zz-row.flip .zz-photo::before{left:0!important;transform:translate(12px,12px)!important}

  /* map: full map, nothing faded over the top */
  .map-band{overflow:hidden}
  .map-band{grid-template-columns:minmax(0,1fr)!important}
  .map-frame{width:100%!important;margin:0!important}
  .map-zoom{position:relative;height:320px;overflow:hidden;grid-row:2}
  .map-zoom .map-frame{position:absolute!important;top:0;left:0;transform-origin:0 0}
  .map-zoom .mpin i,.map-zoom .mpin.hq::before{scale:var(--pin,1)}
  .map-zoom .mpin::after{width:calc(var(--zone,110px) * var(--zk,1));height:calc(var(--zone,110px) * var(--zk,1));margin:calc(var(--zone,110px) * var(--zk,1) / -2) 0 0 calc(var(--zone,110px) * var(--zk,1) / -2)}
  .map-frame::after{display:none!important}

  /* phones only show what earns its space */
  .site-head .topbar{display:none!important}
  .hero{padding-top:var(--head-h,124px)!important}
  .hero .hero-right{display:none!important}
  .trust-in .ti p{display:none!important}
  .trust-in .ti{padding:18px 8px!important}
  .zz-copy p:nth-of-type(n+3){display:none!important}
  .ft-top>div:not(.ft-about):not(.ft-contact){display:none!important}
  .map-credit{font-size:9px!important}

  /* trust bar: thin lines between the four items, tighter text */
  .trust-in{gap:1px!important;background:rgba(255,255,255,.22)!important;padding:0!important;margin:0!important}
  .trust-in .ti{background:#193579!important;padding:22px 12px!important;border:0!important}
  .trust-in .ti h3{font-size:14px!important;line-height:1.3!important;max-width:15ch;margin-inline:auto!important}

  .trust-in>.ti:last-child:nth-child(4n+1){grid-column:1 / -1}
  .homes-strip .hs-label{font-size:13px!important;letter-spacing:.14em!important;line-height:1.6!important;padding-inline:20px!important;margin-bottom:18px!important}
  .homes-strip .trust-in .ti h3{max-width:none}

  /* service cards: keep heads in the photo */
  .svc-card>img{height:260px!important;object-position:50% 18%!important}
  .svc-card>img[src*="u-residential4"]{object-position:50% 55%!important}
  .svc-card>img[src*="u-specialized"]{object-position:50% 45%!important}

  /* photo and text sections: same gap above every heading */
  .zz-row .zz-copy>*:first-child{margin-top:0!important}
  .zz-row .zz-copy .eyebrow,.zz-row .zz-copy>p:first-child{margin-top:0!important}

  /* As Recognized By: one row of logos that scrolls on its own */
  .awards-in{overflow:hidden}
  .aw-row{display:flex!important;flex-wrap:nowrap!important;gap:44px!important;padding-right:0!important;width:max-content!important;animation:none!important;will-change:transform;grid-template-columns:none!important}
  .aw-row .awl{flex:none!important;grid-column:auto!important}
  .aw-row .awl>span:last-child{display:none!important}
  .aw-row .aw-logo-box{width:auto!important;height:58px!important}
  .aw-orig .aw-row .awl img{height:58px!important;max-width:none!important}
  .aw-orig .aw-row .awl img[src]{height:54px!important;max-width:none!important;width:auto!important}
  .aw-row .aw-logo-box{height:60px!important}
  /* Our Clients: same scrolling row */
  .clients-in{overflow:hidden}
  .cl-row{display:flex!important;flex-wrap:nowrap!important;gap:48px!important;padding-right:0!important;width:max-content!important;grid-template-columns:none!important;animation:none!important;will-change:transform;margin:0!important}
  .cl-row li{flex:none!important;width:auto!important;display:flex;align-items:center}
  .cl-row img{height:52px!important;width:auto!important;max-width:none!important;transform:none!important}
  .cl-row li{height:64px!important}
  .cl-row li img[src]{height:auto!important;max-height:56px!important;max-width:none!important}
  .cl-row li img[src*="cl-pm1"]{width:64px!important}
  .cl-row li img[src*="cl-proequity"]{width:120px!important}
  .cl-row li img[src*="cl-sir"]{width:104px!important}
  .cl-row li img[src*="cl-tm"]{width:150px!important}
  .cl-row li img[src*="cl-compass"]{width:110px!important}
  .cl-row li img[src*="cl-jfcs"]{width:78px!important}
}

/* phone menu panel (built by mobile-nav.js) */
.menu-btn span{display:block;width:24px;height:2px;margin:5px 0;border-radius:2px;background:#193579}
.menu-btn{padding:8px 0!important;line-height:0}
.mnav{position:fixed;inset:0;z-index:1000;overflow-y:auto;background:#F5F2ED;padding:0 max(24px,env(safe-area-inset-right,0px)) 32px max(24px,env(safe-area-inset-left,0px))}
.mnav[hidden]{display:none}
html.mnav-open,html.mnav-open body{overflow:hidden}
.mnav-head{display:flex;align-items:center;justify-content:space-between;height:76px;border-bottom:1px solid #E2D9CC}
.mnav-head .logo img{height:46px;width:auto;display:block}
.mnav-close{position:relative;width:32px;height:32px;border:0;background:none;cursor:pointer}
.mnav-close span{position:absolute;left:4px;top:15px;width:24px;height:2px;border-radius:2px;background:#193579;transform:rotate(45deg)}
.mnav-close span+span{transform:rotate(-45deg)}
.mnav-list{display:flex;flex-direction:column}
.mnav-list>a,.mnav-list summary{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid #E2D9CC;font:500 19px var(--sans);color:#193579;text-decoration:none;cursor:pointer;list-style:none}
.mnav-list summary::-webkit-details-marker{display:none}
.mnav-list summary::after{content:"+";font-size:24px;line-height:1;color:#193579}
.mnav-list details[open] summary::after{content:"\2212"}
.mnav-sub{display:flex;flex-direction:column;padding:6px 0 14px;border-bottom:1px solid #E2D9CC}
.mnav-sub a{padding:10px 0 10px 14px;font-size:16px;color:#2E3A55;text-decoration:none}
.mnav-sub a.mnav-all{font-weight:600;color:#193579}
.mnav-cta{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.mnav-cta .svc-btn{display:flex;justify-content:center;align-items:center;height:52px;white-space:nowrap}
.mnav-cta .svc-btn.ghost{background:#fff;color:#193579;border:1.5px solid #193579}
@keyframes aw-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* phone and tablet header (built by mobile-nav.js); hidden on desktop */
.mhead-cta,.mhead-nav{display:none}
@media (max-width:900px){
  /* header (like orangebag.co): logo left, Book Online right, menu links in rows underneath */
  .head-in{display:grid!important;grid-template-columns:auto 1fr auto!important;grid-template-rows:auto auto;align-items:center;justify-items:stretch;row-gap:0!important;padding:16px 20px 0!important;height:auto!important}
  .head-in .logo{grid-column:1;grid-row:1;justify-self:start;align-self:center}
  .head-in .logo img{height:58px!important;width:auto!important}
  .head-in .menu-btn{display:none!important}
  .mhead-cta{grid-column:3;grid-row:1;justify-self:end;align-self:center;display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;background:#193579;color:#fff!important;font:600 12.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
  .mhead-nav{grid-column:1 / -1;grid-row:2;position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin-top:14px;padding:12px 0 13px;border-top:1px solid #E2D9CC}
  .mhead-nav>a,.mhead-nav>button{display:inline-flex;align-items:center;gap:4px;padding:3px 0;border:0;background:none;font:500 15px var(--sans);color:#193579;text-decoration:none;cursor:pointer}
  .mhead-nav>button svg{width:12px;height:12px;transition:transform .2s}
  .mhead-nav>button[aria-expanded="true"] svg{transform:rotate(180deg)}
  .mhead-drop{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;flex-direction:column;padding:8px 0;background:#fff;border-radius:14px;box-shadow:0 14px 34px rgba(25,53,121,.18)}
  .mhead-drop.open{display:flex}
  .mhead-drop a{padding:11px 20px;font-size:15.5px;color:#2E3A55;text-decoration:none}
  .mhead-drop a.mhead-all{font-weight:600;color:#193579}
}