/*
 * KAYAN — Mobile-only header and hero continuity fixes.
 * Loaded after existing stylesheets; desktop styling is intentionally untouched.
 */
@media (max-width:760px){
  /* Keep the brand optically centered and lower it into the header row. */
  .header .nav{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    grid-template-rows:104px auto !important;
    min-height:0 !important;
    padding:0 0 8px !important;
    align-items:center !important;
  }
  .header .nav .brand{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:center !important;
    align-self:center !important;
    position:relative !important;
    z-index:4 !important;
    transform:translateY(-9px);
    margin:0 !important;
  }
  .header .nav .brand img{
    display:block;
    position:static !important;
    top:auto !important;
    width:184px !important;
    height:98px !important;
    max-width:none !important;
    object-fit:contain !important;
  }

  /* Compact icon-only actions: WhatsApp and message/envelope. */
  .header .nav .header-actions{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    align-self:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    direction:ltr !important;
    z-index:5 !important;
  }
  .header .nav .header-action{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:43px !important;
    min-width:43px !important;
    height:43px !important;
    min-height:43px !important;
    padding:0 !important;
    border-radius:7px !important;
    gap:0 !important;
    font-size:0 !important;
    line-height:0 !important;
  }
  .header .nav .header-action span{display:none !important}
  .header .nav .header-action svg{
    display:block !important;
    width:21px !important;
    height:21px !important;
    flex:0 0 21px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.7 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }
  .header .nav .request-action{color:#171109 !important}
  .header .nav .whatsapp-action{color:#ead7ad !important}

  /* Keep the hero photograph behind the text for its full mobile height.
     Previous mobile rules positioned it at the bottom with auto height,
     which visually separated the image from the hero content. */
  .hero{
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-color:#090b0e !important;
    isolation:isolate;
  }
  .hero-content{
    position:relative !important;
    z-index:4 !important;
    padding:clamp(105px,24vw,138px) 0 30px !important;
  }
}
@media(max-width:480px){
  .header .nav{
    grid-template-rows:100px auto !important;
    padding-bottom:7px !important;
  }
  .header .nav .brand{transform:translateY(-9px)}
  .header .nav .brand img{
    width:170px !important;
    height:91px !important;
  }
  .header .nav .header-actions{gap:6px !important}
  .hero-content{padding-top:clamp(96px,25vw,116px) !important;}
  .header .nav .header-action{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    min-height:40px !important;
  }
  .header .nav .header-action svg{
    width:20px !important;
    height:20px !important;
    flex-basis:20px !important;
  }
}