@media (max-width: 768px){

  html,
  body{
    overflow-x:hidden!important;
  }

  .topbar{
    display:none!important;
  }

  .header,
  .site-header{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    height:auto!important;
    min-height:0!important;
    padding:12px 12px 10px!important;
    background:#070908!important;
    z-index:50!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
  }

  .header-inner,
  .site-header .container{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
  }

  .logo{
    order:1!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  .logo-mark{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    font-size:14px!important;
    margin:0 0 5px!important;
  }

  .logo-title{
    font-size:15px!important;
    line-height:1.1!important;
    letter-spacing:.24em!important;
    margin:0!important;
  }

  .logo-sub{
    font-size:8px!important;
    line-height:1.2!important;
    letter-spacing:.30em!important;
    margin:3px 0 0!important;
  }

  .nav-left,
  .nav-right,
  .nav{
    order:2!important;
    width:100%!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:7px 13px!important;
    margin:0!important;
    padding:0!important;
  }

  .nav-left a,
  .nav-right a,
  .nav a{
    font-size:9px!important;
    line-height:1.1!important;
    letter-spacing:.18em!important;
    padding:2px 0!important;
    margin:0!important;
    white-space:nowrap!important;
  }

  .lang,
  .lang-select,
  select.lang{
    order:3!important;
    width:92px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 12px!important;
    margin:2px auto 0!important;
    border-radius:999px!important;
    font-size:11px!important;
    letter-spacing:.20em!important;
    color:#fff!important;
    background:#090b0a!important;
    border:1px solid rgba(184,165,105,.42)!important;
  }

  .hero{
    min-height:calc(100vh - 118px)!important;
    height:auto!important;
    padding:46px 22px 170px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    background-color:#020303!important;
    background-size:auto 68%!important;
    background-position:center bottom!important;
    background-repeat:no-repeat!important;
  }

  .hero::before{
    background:linear-gradient(180deg,rgba(0,0,0,.64),rgba(0,0,0,.18) 46%,rgba(0,0,0,.72))!important;
  }

  .hero-content{
    width:100%!important;
    max-width:330px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    position:relative!important;
    z-index:2!important;
  }

  .hero .eyebrow,
  .eyebrow{
    font-size:9px!important;
    line-height:1.55!important;
    letter-spacing:.34em!important;
    margin:0 0 22px!important;
  }

  .hero h1{
    font-size:38px!important;
    line-height:1.06!important;
    letter-spacing:-.035em!important;
    max-width:285px!important;
    margin:0 0 22px!important;
  }

  .hero-text{
    font-size:15px!important;
    line-height:1.5!important;
    max-width:285px!important;
    margin:0 0 22px!important;
  }

  .actions{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:10px!important;
  }

  .actions .btn,
  .hero .btn{
    width:245px!important;
    min-height:46px!important;
    height:46px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    font-size:9px!important;
    letter-spacing:.20em!important;
  }

  .ai-chat-button,
  .floating-whatsapp{
    position:fixed!important;
    right:13px!important;
    left:auto!important;
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    min-height:58px!important;
    border-radius:50%!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:8px!important;
    line-height:1.15!important;
    letter-spacing:.08em!important;
    z-index:100!important;
    box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
  }

  .ai-chat-button{
    bottom:calc(92px + env(safe-area-inset-bottom))!important;
    background:#b7a263!important;
    color:#fff!important;
  }

  .floating-whatsapp{
    bottom:calc(24px + env(safe-area-inset-bottom))!important;
    background:#003b2b!important;
    color:#fff!important;
  }

  .ai-chat{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    bottom:calc(18px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    border-radius:22px!important;
    z-index:200!important;
  }

  .lux-extra-section,
  .noble-africa-mission,
  .collections,
  .bespoke,
  .vip-meet,
  .footer-strip{
    scroll-margin-top:20px!important;
  }
}

@media (max-width: 430px){

  .header,
  .site-header{
    padding:10px 10px 9px!important;
    gap:7px!important;
  }

  .logo-mark{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    font-size:13px!important;
  }

  .logo-title{
    font-size:14px!important;
    letter-spacing:.22em!important;
  }

  .logo-sub{
    font-size:7px!important;
    letter-spacing:.28em!important;
  }

  .nav-left,
  .nav-right,
  .nav{
    gap:6px 10px!important;
  }

  .nav-left a,
  .nav-right a,
  .nav a{
    font-size:8px!important;
    letter-spacing:.16em!important;
  }

  .lang,
  .lang-select,
  select.lang{
    width:84px!important;
    height:32px!important;
    min-height:32px!important;
    font-size:10px!important;
  }

  .hero{
    min-height:calc(100vh - 104px)!important;
    padding:42px 20px 160px!important;
    background-size:auto 64%!important;
    background-position:center bottom!important;
  }

  .hero-content{
    max-width:300px!important;
  }

  .hero .eyebrow,
  .eyebrow{
    font-size:8px!important;
    letter-spacing:.32em!important;
    margin-bottom:20px!important;
  }

  .hero h1{
    font-size:34px!important;
    line-height:1.08!important;
    max-width:255px!important;
    margin-bottom:20px!important;
  }

  .hero-text{
    font-size:14px!important;
    line-height:1.5!important;
    max-width:260px!important;
  }

  .actions .btn,
  .hero .btn{
    width:225px!important;
    min-height:44px!important;
    height:44px!important;
    font-size:8px!important;
  }

  .ai-chat-button,
  .floating-whatsapp{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
    font-size:7px!important;
  }
}

@media (max-width: 768px){
  .hero{
    padding-bottom:220px!important;
  }

  .hero-content{
    display:flex!important;
    flex-direction:column!important;
    min-height:calc(100vh - 260px)!important;
  }

  .hero .actions,
  .actions{
    margin-top:auto!important;
    padding-top:120px!important;
    position:relative!important;
    z-index:5!important;
  }

  .hero .btn,
  .actions .btn{
    background:rgba(0,45,33,.82)!important;
    backdrop-filter:blur(8px)!important;
  }

  .hero .btn:first-child,
  .actions .btn:first-child{
    background:rgba(0,0,0,.34)!important;
  }
}

@media (max-width: 430px){
  .hero{
    padding-bottom:230px!important;
  }

  .hero-content{
    min-height:calc(100vh - 245px)!important;
  }

  .hero .actions,
  .actions{
    padding-top:135px!important;
  }
}

@media (max-width: 768px){
  .hero .actions,
  .actions{
    margin-top:260px!important;
    padding-top:0!important;
    transform:translateY(90px)!important;
  }

  .hero{
    padding-bottom:330px!important;
  }
}

@media (max-width: 430px){
  .hero .actions,
  .actions{
    margin-top:300px!important;
    transform:translateY(120px)!important;
  }

  .hero{
    padding-bottom:380px!important;
  }
}

@media (max-width: 768px){
  .hero{
    min-height:calc(100vh - 210px)!important;
    height:auto!important;
    padding-bottom:0!important;
  }

  .hero .actions,
  .actions{
    margin-top:34px!important;
    padding-top:0!important;
    transform:none!important;
    position:relative!important;
    top:72px!important;
    z-index:5!important;
  }
}

@media (max-width: 430px){
  .hero{
    min-height:calc(100vh - 230px)!important;
    height:auto!important;
    padding-bottom:0!important;
  }

  .hero .actions,
  .actions{
    margin-top:28px!important;
    transform:none!important;
    position:relative!important;
    top:86px!important;
  }
}

@media (max-width: 768px){
  .hero .hero-text,
  .hero-text{
    position:relative!important;
    top:-18px!important;
    margin-bottom:8px!important;
  }
}

@media (max-width: 430px){
  .hero .hero-text,
  .hero-text{
    top:-22px!important;
    margin-bottom:6px!important;
  }
}