/* ============================================================
   ASAMOIL MOBILE DESIGN STANDARD — V44
   Matches the approved Homepage mobile visual language.
   Desktop is untouched.
   ============================================================ */

@media (max-width: 720px) {

  /* ---------- Shared mobile header ---------- */
  .site-header{
    background:#171c1e!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }
  .topline{display:none!important}
  .nav-shell{
    height:74px!important;
    min-height:74px!important;
    align-items:center!important;
  }
  .brand img{
    width:190px!important;
    height:auto!important;
  }
  .menu-toggle{
    display:flex!important;
    width:44px!important;
    height:44px!important;
    border:0!important;
    background:transparent!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:5px!important;
  }
  .menu-toggle span{
    width:23px!important;
    height:2px!important;
    background:#f4f5f2!important;
  }
  .nav{
    top:74px!important;
    background:#232b2d!important;
    box-shadow:0 16px 22px rgba(0,0,0,.5)!important;
  }
  .nav>a{border-bottom-color:#46504e!important}

  /* ---------- Shared hero eyebrow ---------- */
  .about-hero .eyebrow,
  .sv-hero .eyebrow,
  .ps-hero .eyebrow,
  .serve-hero .eyebrow,
  .nw-hero .eyebrow,
  .why-hero .eyebrow{
    font-size:7.8px!important;
    letter-spacing:.13em!important;
    line-height:1.2!important;
    gap:12px!important;
  }

  /* ---------- Shared hero headline ---------- */
  .about-hero h1,
  .sv-hero h1,
  .ps-hero h1,
  .serve-hero h1,
  .nw-hero h1,
  .why-hero h1{
    font-size:clamp(3rem,11vw,4.2rem)!important;
    line-height:1.04!important;
    letter-spacing:-.055em!important;
    margin-top:22px!important;
    margin-bottom:24px!important;
    padding-bottom:.08em!important;
  }

  /* ---------- Shared supporting paragraph ---------- */
  .about-hero p,
  .sv-hero p,
  .ps-hero p,
  .serve-hero p,
  .nw-hero p,
  .why-hero p{
    max-width:100%!important;
    font-size:11px!important;
    line-height:1.65!important;
    color:#edf1f0!important;
    margin-top:0!important;
  }

  /* ---------- Hero vertical rhythm ---------- */
  .about-hero .wrap,
  .sv-hero .wrap,
  .ps-hero .wrap,
  .serve-hero-inner,
  .nw-hero .wrap,
  .why-hero-inner{
    padding-top:78px!important;
    padding-bottom:66px!important;
  }

  /* ---------- Shared mobile CTA typography/shape ---------- */
  .button{
    width:max-content!important;
    min-width:168px!important;
    max-width:100%!important;
    min-height:50px!important;
    height:50px!important;
    padding:0 15px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    box-sizing:border-box!important;
    font-family:inherit!important;
    font-size:12.5px!important;
    font-weight:800!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .button > span{
    flex:0 0 auto!important;
    font-family:inherit!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1!important;
  }

  /* Keep hero actions compact like the approved Homepage */
  .sv-hero .button,
  .serve-hero .button,
  .nw-hero .button,
  .why-hero .button{
    margin-top:0!important;
  }

  .sv-hero .wrap > .button{
    margin-top:28px!important;
  }

  .serve-hero-actions,
  .nw-hero-actions,
  .why-hero-actions{
    margin-top:28px!important;
    gap:16px!important;
    align-items:flex-start!important;
  }

  /* Secondary text links follow the same compact scale */
  .serve-hero .text-link,
  .nw-hero .text-link,
  .why-hero .text-link{
    font-size:12.5px!important;
    padding:10px 0!important;
    white-space:nowrap!important;
  }

  /* Avoid full-width CTA overrides inherited from older mobile rules */
  .about-cta .button,
  .sv-cta .button,
  .ps-cta .button,
  .serve-cta .button,
  .nw-cta .button,
  .why-cta .button{
    width:max-content!important;
    min-width:168px!important;
    max-width:100%!important;
  }
}

@media (max-width: 420px) {
  .brand img{width:190px!important}

  .about-hero h1,
  .sv-hero h1,
  .ps-hero h1,
  .serve-hero h1,
  .nw-hero h1,
  .why-hero h1{
    font-size:3rem!important;
  }

  .button{
    min-width:168px!important;
    min-height:50px!important;
    height:50px!important;
    font-size:12.5px!important;
  }
}


/* V45 — move mobile eyebrow/supporting header + main headline upward,
   while leaving the paragraph in its current position. */
@media (max-width:720px){
  .about-hero .eyebrow,
  .sv-hero .eyebrow,
  .ps-hero .eyebrow,
  .serve-hero .eyebrow,
  .nw-hero .eyebrow,
  .why-hero .eyebrow{
    transform:translateY(-22px)!important;
  }

  .about-hero h1,
  .sv-hero h1,
  .ps-hero h1,
  .serve-hero h1,
  .nw-hero h1,
  .why-hero h1{
    transform:translateY(-22px)!important;
  }

  .about-hero p,
  .sv-hero p,
  .ps-hero p,
  .serve-hero p,
  .nw-hero p,
  .why-hero p{
    transform:none!important;
  }
}

/* V46 final — Our Network mobile crop and tighter upper composition */
@media (max-width:720px){
  .nw-hero::before{background-position:72% 62%!important}
  .nw-hero .eyebrow,.nw-hero h1{transform:translateY(-48px)!important}
  .nw-hero p,.nw-hero-actions{transform:none!important}
}
@media (max-width:420px){.nw-hero::before{background-position:76% 64%!important}}

/* V47 final — Why AsamOil mobile crop shifted right to reveal fleet */
@media (max-width:720px){.why-hero-image{background-position:82% 50%!important}}
@media (max-width:420px){.why-hero-image{background-position:86% 50%!important}}

/* V48 — mobile hero/supporting paragraph text +50% only */
@media (max-width:720px){
  .about-hero p,
  .sv-hero p,
  .ps-hero p,
  .serve-hero p,
  .nw-hero p,
  .why-hero p{
    font-size:16.5px!important;
  }
}