/* ==========================================================
   ICODE MEDIA · PREMIUM SAND HEADER V2
   Warmer, clearer, more premium header for the beige art direction.
   ========================================================== */

.cinema-header{
  position:relative!important;
  min-height:82px!important;
  padding:12px 14px 12px 18px!important;
  border:1px solid rgba(67,45,30,.15)!important;
  border-radius:24px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,0)),
    linear-gradient(135deg,#fbf7f1 0%,#f5eee6 56%,#eee2d5 100%)!important;
  box-shadow:
    0 18px 45px rgba(72,49,33,.09),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(126,82,50,.05)!important;
  backdrop-filter:blur(20px) saturate(1.06)!important;
  overflow:visible!important;
}

.cinema-header:after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  bottom:-1px;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(184,116,69,.42),transparent);
  pointer-events:none;
}

/* Logo becomes one unified copper lockup, including the I-CODE MEDIA wordmark. */
.cinema-logo{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  min-width:190px!important;
  padding-right:22px!important;
}
.cinema-logo:after{
  content:"";
  position:absolute;
  right:4px;
  top:16%;
  width:1px;
  height:68%;
  background:linear-gradient(180deg,transparent,rgba(107,75,53,.18),transparent);
}
.cinema-logo img{
  width:176px!important;
  max-width:176px!important;
  height:auto!important;
  opacity:1!important;
  filter:
    brightness(0)
    saturate(100%)
    invert(49%)
    sepia(32%)
    saturate(1180%)
    hue-rotate(336deg)
    brightness(96%)
    contrast(89%)!important;
}

/* Navigation is deliberately much easier to read than the previous tiny version. */
.simple-main-nav{
  gap:clamp(22px,2vw,34px)!important;
}
.simple-main-nav>a,
.cinema-desktop-nav>a{
  min-height:50px!important;
  color:#2b211a!important;
  font-size:12.5px!important;
  font-weight:820!important;
  letter-spacing:-.012em!important;
}
.simple-main-nav>a:after{
  left:50%!important;
  right:50%!important;
  bottom:3px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#b87445,#d79a68)!important;
  transition:left .22s ease,right .22s ease,opacity .22s ease!important;
  opacity:0!important;
}
.simple-main-nav>a:hover,
.simple-main-nav>a:focus-visible,
.cinema-desktop-nav>a:hover,
.cinema-desktop-nav>a:focus-visible{
  color:#a45f36!important;
}
.simple-main-nav>a:hover:after,
.simple-main-nav>a:focus-visible:after{
  left:8%!important;
  right:8%!important;
  opacity:1!important;
}

/* Keep ERP / CRM readable as a normal destination, not a visual puzzle. */
.simple-main-nav .simple-erp-link,
.simple-main-nav .simple-erp-link span{
  color:#2b211a!important;
}

/* Right side controls. */
.cinema-header-actions{
  gap:10px!important;
  align-items:center!important;
}
.cinema-whatsapp-btn{
  width:48px!important;
  height:48px!important;
  border:1px solid rgba(184,116,69,.28)!important;
  border-radius:15px!important;
  background:#fffaf4!important;
  color:#a55f35!important;
  box-shadow:0 8px 22px rgba(75,51,34,.07)!important;
}
.cinema-whatsapp-btn:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(184,116,69,.52)!important;
  background:#f3e5d6!important;
}
.cinema-whatsapp-btn svg{
  stroke:#a55f35!important;
  color:#a55f35!important;
}
.cinema-whatsapp-btn img{
  filter:
    brightness(0)
    saturate(100%)
    invert(44%)
    sepia(43%)
    saturate(1131%)
    hue-rotate(337deg)
    brightness(91%)
    contrast(87%)!important;
}

.cinema-project-btn{
  min-width:158px!important;
  height:50px!important;
  padding:0 18px!important;
  border:1px solid #a76038!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#b87445,#a66038)!important;
  color:#fffaf5!important;
  font-size:11.5px!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  box-shadow:0 12px 28px rgba(132,77,43,.19)!important;
}
.cinema-project-btn:hover,
.cinema-project-btn:focus-visible{
  transform:translateY(-2px)!important;
  background:linear-gradient(135deg,#aa653d,#91502e)!important;
  border-color:#91502e!important;
  color:#fff!important;
  box-shadow:0 15px 34px rgba(113,66,39,.23)!important;
}

/* Keep any arrow/icon crisp. */
.cinema-project-btn svg,
.cinema-project-btn i{
  color:inherit!important;
  stroke:currentColor!important;
}

/* Tablet: maintain readability without squeezing everything into dust particles. */
@media(max-width:1240px){
  .cinema-header{
    grid-template-columns:180px minmax(0,1fr) auto!important;
    padding-left:15px!important;
  }
  .cinema-logo{
    min-width:170px!important;
    padding-right:15px!important;
  }
  .cinema-logo img{
    width:158px!important;
    max-width:158px!important;
  }
  .simple-main-nav{
    gap:16px!important;
  }
  .simple-main-nav>a,
  .cinema-desktop-nav>a{
    font-size:10.6px!important;
  }
  .cinema-project-btn{
    min-width:138px!important;
    font-size:10.4px!important;
  }
}

@media(max-width:1040px){
  .simple-main-nav{
    gap:13px!important;
  }
  .simple-main-nav>a,
  .cinema-desktop-nav>a{
    font-size:9.6px!important;
  }
  .cinema-logo img{
    width:150px!important;
    max-width:150px!important;
  }
  .cinema-project-btn{
    min-width:126px!important;
  }
}

/* Mobile gets the same art direction instead of reverting to washed-out beige. */
@media(max-width:920px){
  .cinema-header{
    min-height:74px!important;
    padding:10px 12px 10px 16px!important;
    border-radius:20px!important;
    grid-template-columns:1fr auto!important;
  }
  .cinema-logo{
    min-width:0!important;
    padding-right:0!important;
  }
  .cinema-logo:after{
    display:none!important;
  }
  .cinema-logo img{
    width:164px!important;
    max-width:164px!important;
  }
  .cinema-mobile-trigger{
    width:50px!important;
    height:50px!important;
    border:1px solid rgba(76,53,37,.15)!important;
    border-radius:15px!important;
    background:#e8dbce!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important;
  }
  .cinema-mobile-trigger span{
    background:#2b211a!important;
  }
}

@media(max-width:520px){
  .cinema-header{
    min-height:70px!important;
    padding:9px 10px 9px 14px!important;
    border-radius:18px!important;
  }
  .cinema-logo img{
    width:148px!important;
    max-width:148px!important;
  }
  .cinema-mobile-trigger{
    width:46px!important;
    height:46px!important;
    border-radius:14px!important;
  }
}