
/* UnitedProject V6.2 — global phone/tablet adaptation */
:root{--up-safe-l:env(safe-area-inset-left,0px);--up-safe-r:env(safe-area-inset-right,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{max-width:100vw;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,picture,video,canvas,svg,iframe{max-width:100%;height:auto}
input,textarea,select,button{max-width:100%;font:inherit}
table{max-width:100%}
pre,code{overflow-wrap:anywhere}
.up-mobile-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:900px){
  .container,.wrap,.dl-wrap,.hero-inner,.footer-inner{
    width:auto!important;max-width:none!important;
    margin-left:max(16px,var(--up-safe-l))!important;
    margin-right:max(16px,var(--up-safe-r))!important;
  }
  h1{font-size:clamp(30px,9vw,52px)!important;overflow-wrap:anywhere}
  h2{font-size:clamp(22px,7vw,36px)!important;overflow-wrap:anywhere}
  .grid,.cards,.stats,.formgrid,.dl-cards,.dl-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:620px){
  body{font-size:14px}
  .container,.wrap,.dl-wrap,.hero-inner,.footer-inner{
    margin-left:max(12px,var(--up-safe-l))!important;
    margin-right:max(12px,var(--up-safe-r))!important;
  }
  .grid,.cards,.stats,.formgrid,.dl-cards,.dl-info-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .card,.stat,.dl-card,.dl-info-card{min-width:0!important}
  .top,.hero-actions,.actions,.toolbar,.filters{flex-wrap:wrap!important}
  .hero-actions>a,.hero-actions>button{max-width:100%}
  input,select,textarea{font-size:16px!important} /* prevent iOS zoom */
  .table,table{font-size:12px}
  .table th,.table td,table th,table td{padding:8px 7px}
}
@media(max-width:430px){
  h1{font-size:clamp(28px,10vw,42px)!important}
  .btn,button{min-height:44px}
  .dl-hero{padding-top:58px!important}
  .dl-card{padding:18px!important}
}
@media(max-width:360px){
  .container,.wrap,.dl-wrap,.hero-inner,.footer-inner{
    margin-left:max(9px,var(--up-safe-l))!important;
    margin-right:max(9px,var(--up-safe-r))!important;
  }
  h1{font-size:28px!important}
  h2{font-size:21px!important}
  .card,.stat,.dl-card,.dl-info-card{border-radius:14px!important}
}
@media(orientation:landscape) and (max-height:500px){
  .dl-hero{padding-top:42px!important;padding-bottom:38px!important}
}
@media(hover:none) and (pointer:coarse){
  a,button,[role=button]{-webkit-tap-highlight-color:transparent}
  button,.btn,a.btn{min-height:44px}
}


/* =========================================================
   V6.3 INDEX + HEADER PHONE HARD FIX
   IMPORTANT: applies ONLY below 900px. Desktop remains unchanged.
   ========================================================= */
@media (max-width:900px){
  /* HEADER */
  .top-bar{
    width:100%!important;
    padding:10px max(14px,var(--up-safe-r)) 10px max(14px,var(--up-safe-l))!important;
    gap:10px!important;
    flex-wrap:wrap!important;
  }
  .top-left{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px 15px!important;
    min-width:0!important;
  }
  .top-left span{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .top-right{width:100%!important}
  .switcher-block{justify-content:flex-start!important}

  .site-header{width:100%!important}
  .site-nav{
    width:100%!important;
    max-width:100%!important;
    min-height:88px!important;
    padding:12px max(12px,var(--up-safe-r)) 12px max(12px,var(--up-safe-l))!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:10px!important;
  }
  .logo-box{
    min-width:0!important;
    width:100%!important;
    display:block!important;
  }
  .logo-box a{display:block!important;max-width:100%!important}
  .logo-box span{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding:13px 12px!important;
    font-size:clamp(19px,6vw,30px)!important;
    line-height:1!important;
    letter-spacing:clamp(.08em,1.4vw,.16em)!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  .mobile-toggle{
    width:48px!important;
    height:48px!important;
    min-height:48px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    justify-self:end!important;
    color:#fff!important;
    font-size:25px!important;
  }
  .nav-panel{
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:100vw!important;
    padding:16px max(16px,var(--up-safe-r)) 22px max(16px,var(--up-safe-l))!important;
  }
  .nav-links,.header-actions{width:100%!important}
  .nav-links a,.header-link{width:100%!important;display:flex!important;padding:11px 4px!important}

  /* HERO */
  .hero-wrapper.hero-cinematic{
    width:100%!important;
    max-width:100%!important;
    min-height:auto!important;
    overflow:hidden!important;
    padding:38px 0 180px!important;
  }
  .hero-inner.hero-layout{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:24px max(18px,var(--up-safe-r)) 20px max(18px,var(--up-safe-l))!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:42px!important;
  }
  .hero-copy{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    text-align:left!important;
  }
  .eyebrow{
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    font-size:clamp(7px,2.1vw,9px)!important;
    line-height:1.6!important;
    letter-spacing:.11em!important;
    overflow-wrap:anywhere!important;
  }

  /* The word UNITEDPROJECT is intentionally forced to fit inside viewport. */
  .hero-copy h1{
    width:100%!important;
    max-width:100%!important;
    margin:18px 0 16px!important;
    font-size:clamp(32px,10.1vw,62px)!important;
    line-height:.94!important;
    letter-spacing:-.065em!important;
    white-space:nowrap!important;
    overflow:visible!important;
    word-break:normal!important;
  }
  .hero-copy p{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    font-size:clamp(12px,3.5vw,15px)!important;
    line-height:1.75!important;
    overflow-wrap:break-word!important;
  }
  .hero-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:11px!important;
    margin-top:24px!important;
  }
  .hero-actions a,
  .hero-actions button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:56px!important;
    padding:14px 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
  }
  .hero-actions a span{max-width:100%!important;overflow-wrap:anywhere!important}

  .hero-mini-facts{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:25px!important;
    padding-top:18px!important;
  }
  .hero-mini-facts>div,
  .hero-mini-facts>div:last-child{
    grid-column:auto!important;
    width:100%!important;
    justify-content:flex-start!important;
    min-width:0!important;
  }
  .hero-mini-facts span{
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .hero-showcase{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:0!important;
    perspective:none!important;
    display:flex!important;
    justify-content:center!important;
  }
  .showcase-card{
    width:min(100%,430px)!important;
    max-width:100%!important;
    margin:0 auto!important;
    transform:none!important;
    animation:none!important;
    border-radius:24px!important;
  }
  .showcase-media{height:clamp(270px,82vw,390px)!important}
  .showcase-orbit{display:none!important}
  .floating-chip{display:none!important}

  .hero-stats-wide{
    left:max(16px,var(--up-safe-l))!important;
    right:max(16px,var(--up-safe-r))!important;
    bottom:24px!important;
    transform:none!important;
    width:auto!important;
    max-width:none!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .hero-stats-wide>div{min-width:0!important}
  .hero-scroll{display:none!important}
}

@media (max-width:560px){
  .hero-wrapper.hero-cinematic{padding:24px 0 190px!important}
  .hero-inner.hero-layout{
    padding-left:max(14px,var(--up-safe-l))!important;
    padding-right:max(14px,var(--up-safe-r))!important;
    gap:34px!important;
  }
  .hero-copy h1{
    font-size:clamp(30px,10.05vw,46px)!important;
    letter-spacing:-.07em!important;
  }
  .hero-copy p{font-size:13px!important}
  .showcase-card{width:100%!important}
  .showcase-media{height:clamp(250px,78vw,330px)!important}
  .showcase-logo{font-size:clamp(25px,8vw,32px)!important}
  .showcase-city{font-size:7px!important;letter-spacing:.18em!important}
  .showcase-status{top:13px!important;left:13px!important;font-size:7px!important}
  .showcase-bottom{padding:14px 11px 8px 13px!important}
  .showcase-bottom strong{font-size:10px!important}
  .hero-stats-wide{
    left:max(12px,var(--up-safe-l))!important;
    right:max(12px,var(--up-safe-r))!important;
  }
}

@media (max-width:375px){
  .logo-box span{
    font-size:19px!important;
    letter-spacing:.09em!important;
    padding-inline:8px!important;
  }
  .hero-copy h1{
    font-size:clamp(28px,9.8vw,37px)!important;
    letter-spacing:-.075em!important;
  }
  .hero-actions a,.hero-actions button{min-height:52px!important;font-size:12px!important}
}

@media (max-width:330px){
  .logo-box span{font-size:17px!important}
  .hero-copy h1{font-size:28px!important}
}
