/* ============================================================================
   ma.php only — the round MAYA emblem in place of the wide wordmark.

   site.css pins .logo to a 200x64 box with !important, which is built for a
   3:1 lockup. This mark is 589x465 (1.27:1), so inside that box it would draw
   at ~81px wide and leave 120px of dead space beside it. The box is released
   here and the height drives the size instead.

   Loads after site.css, so the same-specificity !important rules win.
   ============================================================================ */

/* ---------- desktop ---------- */
.logo{width:auto!important;height:86px!important;padding:0!important;align-self:center!important}
.logo img{width:auto!important;height:100%!important;object-fit:contain!important;filter:none!important}

/* the emblem is taller than the old lockup, so the row loses a little
   vertical padding and the header keeps its overall height */
.header-row{padding:9px 0!important}

/* ---------- mobile: symmetric bar ----------
   [burger]  ……  (round mark, dead centre)  ……  [phone]
            LOCAL EXPERTS · PRICE LOCKED · ALWAYS ON TIME
   The rating slot (.brand-text) is not used on this layout. */
@media (max-width:900px){

  .header-row{position:relative;min-height:0;flex-wrap:wrap;justify-content:space-between;
    align-items:center;gap:0 6px!important;padding:5px 0 7px!important;
    -webkit-text-size-adjust:100%;text-size-adjust:100%}

  /* both side buttons the same width, so the mark sits truly centred */
  .hamburger{order:0;flex:0 0 42px;width:42px;margin:0!important;padding:11px 3px;position:relative;z-index:2}
  .logo{order:1;flex:0 0 auto;width:auto!important;height:96px!important;margin:0!important;padding:0!important;
    align-self:center!important;z-index:1}
  .logo img{width:auto!important;height:100%!important;filter:none!important}
  .car-shortcut{order:2;flex:0 0 auto;margin:0!important;position:relative;z-index:2}
  .brand-text{display:none!important}

  /* the three promises on their own line under the mark */
  .nav-hooks{order:3;flex:0 0 100%;min-width:0;display:flex;flex-direction:row;justify-content:center;
    align-items:center;gap:1.4vw;margin:2px 0 0;padding:0 0 2px;position:relative;z-index:2;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav-hooks::-webkit-scrollbar{display:none}
  .nav-hooks>:first-child{margin-left:auto}
  .nav-hooks>:last-child{margin-right:auto}
  /* vw-sized so the three always share one line, on every phone width */
  .nav-hook{flex:0 0 auto;display:inline-flex;align-items:center;gap:.9vw;height:6vw;max-height:25px;padding:0 2.4vw;
    border:1px solid #e2ebf5;border-radius:999px;background:#f8fbfe;
    box-shadow:none;color:#4a557c;
    font-size:clamp(7px,2.1vw,9px);font-weight:700;letter-spacing:.02em;white-space:nowrap}
  .nav-hook svg{width:2.9vw;height:2.9vw;max-width:12px;max-height:12px;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
  .nav-hook:nth-child(1) svg{stroke:#20bd79}.nav-hook:nth-child(2) svg{stroke:#efad00}.nav-hook:nth-child(3) svg{stroke:#1769d2}

  /* the same chips no longer sit on the photo, and the booking card sits
     just under the picture with a quiet outline badge */
  .hero .header-hooks{display:none!important}
  .hero-copy{z-index:4!important}
  .hero-quick-book{margin:4px auto 10px!important}
  .hero-quick-book::before{
    background:#fff!important;color:#1268c9!important;
    border:1.5px solid #9bc8ee!important;
    font-size:8.5px!important;letter-spacing:.08em!important;padding:6px 13px!important;
    box-shadow:0 4px 12px rgba(18,104,201,.14)!important}

  /* the dropdown hangs off the taller two-line bar */
  .mobile-menu{top:136px!important}
}

/* narrow Android (<=380px — Samsung A, Oppo, Vivo: the majority) */
@media (max-width:380px){
  .logo{height:90px!important}
  .nav-hook{gap:3px;height:20px;padding:0 7px;font-size:7.2px}
  .nav-hook svg{width:9px;height:9px}
  .nav-hooks{gap:4px}
  .mobile-menu{top:128px!important}
}

/* very narrow (<=340px) — old/small phones */
@media (max-width:340px){
  .logo{height:82px!important}
  .nav-hook{padding:0 6px;font-size:6.8px}
  .mobile-menu{top:120px!important}
}

/* desktop has the nav in that space — lockup stays mobile-only */
@media (min-width:901px){
  .brand-text,.nav-hooks{display:none}
}

/* the 600-900px band sets its own 200x66 logo box in site.css — released too */
@media (min-width:600px) and (max-width:900px){
  .logo{width:auto!important;height:100px!important}
}