/* ICODE MEDIA SITE FOUNDATION V4 · global geometry repair */
:root{
  --if-bg:#f6f7f7;
  --if-paper:#fff;
  --if-soft:#eef1f2;
  --if-ink:#111417;
  --if-muted:#626a70;
  --if-copper:#c66f3d;
  --if-navy:#0f2933;
  --if-line:rgba(17,20,23,.10);
}
html{background:#f6f7f7!important;scroll-padding-top:104px}
body{background:#f6f7f7!important;color:#111417!important;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;overflow-x:clip!important}
body>main:not(.hv4-home), main:not(.hv4-home){width:100%!important;max-width:none!important;min-width:0!important;overflow:visible!important;background:#f6f7f7!important}
body>main:not(.hv4-home) img,main:not(.hv4-home) img{max-width:100%!important;height:auto}

/* Header stays compact, readable and centered */
.cinema-header{
  top:14px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;
  width:min(1460px,calc(100% - 32px))!important;max-width:1460px!important;min-height:76px!important;
  grid-template-columns:150px minmax(0,1fr) auto!important;gap:14px!important;padding:9px 12px 9px 16px!important;
  background:rgba(255,255,255,.96)!important;border:1px solid rgba(17,20,23,.09)!important;border-radius:20px!important;
  box-shadow:0 14px 40px rgba(14,30,36,.085)!important;backdrop-filter:blur(18px)!important
}
.cinema-logo{min-width:0!important;padding:0!important}.cinema-logo:after{display:none!important}
.cinema-logo img,.mobile-scene-logo img{
  width:136px!important;max-width:136px!important;height:auto!important;opacity:1!important;
  filter:brightness(0) saturate(100%) invert(49%) sepia(54%) saturate(1000%) hue-rotate(337deg) brightness(94%) contrast(88%)!important
}
.simple-main-nav{display:flex!important;justify-content:center!important;align-items:center!important;gap:clamp(10px,1vw,20px)!important}
.simple-main-nav>a{min-height:46px!important;display:inline-flex!important;align-items:center!important;color:#293035!important;font-size:12.4px!important;font-weight:750!important;white-space:nowrap!important}
.simple-main-nav .simple-erp-link,.simple-main-nav .simple-erp-link span{color:#0f2933!important;font-size:inherit!important;font-weight:800!important}
.cinema-project-btn{min-width:142px!important;height:48px!important;padding:0 16px!important;border-radius:12px!important;background:#111417!important;border-color:#111417!important;color:#fff!important;font-size:11.5px!important}
.cinema-project-btn:hover{background:#c66f3d!important;border-color:#c66f3d!important}
.cinema-whatsapp-btn{width:46px!important;height:46px!important;border-radius:12px!important;background:#eef1f2!important;border-color:rgba(15,41,51,.12)!important;color:#0f2933!important}

/* Known internal page shells get real gutters instead of edge-sticking or narrow squeezed columns */
.service-detail-hero,.service-detail-includes,.service-process,.service-faq,.service-next,
.portfolio-studio-hero,.archive-head,.page-v2,.page-v1,.article-v2,.article-v1{
  width:min(1280px,calc(100% - 64px))!important;max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;
  min-width:0!important;height:auto!important;max-height:none!important;overflow:visible!important
}
.service-detail-hero{padding-top:132px!important;padding-bottom:72px!important;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr)!important;gap:64px!important;align-items:center!important}
.service-detail-hero>div,.service-detail-hero>aside{min-width:0!important}
.service-detail-hero h1,.portfolio-studio-hero h1,.archive-head h1{
  color:#111417!important;font-family:"Manrope","Inter",sans-serif!important;font-size:clamp(44px,4.7vw,68px)!important;line-height:1!important;letter-spacing:-.05em!important
}
.service-detail-hero>div>p{max-width:680px!important;color:#626a70!important;font-size:17px!important;line-height:1.68!important}
.service-detail-hero aside{height:auto!important;max-height:none!important;overflow:visible!important;padding:28px!important;background:#fff!important;border:1px solid rgba(17,20,23,.08)!important;border-radius:20px!important;box-shadow:0 18px 44px rgba(14,30,36,.055)!important}
.service-detail-includes,.service-process,.service-faq,.service-next{padding-top:72px!important;padding-bottom:72px!important}
.service-detail-includes>div:last-child{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
.service-detail-includes>div:last-child span{min-width:0!important;padding:14px!important;background:#f0f3f4!important;border:1px solid rgba(17,20,23,.08)!important;border-radius:11px!important;color:#343c42!important}
.process-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
.process-grid article{min-width:0!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:22px!important;background:#fff!important;border:1px solid rgba(17,20,23,.08)!important;border-radius:16px!important}
.faq-list details{height:auto!important;max-height:none!important;overflow:visible!important;background:#fff!important;border-color:rgba(17,20,23,.08)!important}

/* Generic grids */
.service-index-grid,.portfolio-hub-grid,.industry-cards,.blog-grid,.archive-grid,.about-pillar-grid,.about-capability-board{min-width:0!important;max-width:100%!important}
.service-index-grid>a,.portfolio-hub-grid>a,.industry-cards>a,.blog-grid>a,.archive-card,.portfolio-service-card,.about-node,.about-pillar-grid article,.about-capability-board>a{
  min-width:0!important;height:auto!important;max-height:none!important;overflow:visible!important
}
.about-premium,.about-premium section{height:auto!important;max-height:none!important;overflow:visible!important}
.about-premium{width:100%!important;padding-left:max(28px,calc((100vw - 1280px)/2))!important;padding-right:max(28px,calc((100vw - 1280px)/2))!important}
.legacy-content{width:min(860px,100%)!important;max-width:860px!important;margin-left:auto!important;margin-right:auto!important}
.legacy-content img,.legacy-content iframe{max-width:100%!important;height:auto!important}

/* Footer */
.v2-footer>section,.footer-grid,.footer-bottom{width:min(1240px,calc(100% - 64px))!important;max-width:1240px!important;margin-left:auto!important;margin-right:auto!important}

/* Mobile */
@media(max-width:920px){
  .cinema-header{width:calc(100% - 24px)!important;min-height:70px!important;grid-template-columns:1fr auto!important;padding:9px 10px 9px 14px!important}
  .cinema-logo img{width:142px!important;max-width:142px!important}
  .service-detail-hero{grid-template-columns:1fr!important;gap:28px!important}
  .process-grid,.service-detail-includes>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .service-detail-hero,.service-detail-includes,.service-process,.service-faq,.service-next,.portfolio-studio-hero,.archive-head,.page-v2,.page-v1,.article-v2,.article-v1{
    width:calc(100% - 36px)!important
  }
  .service-detail-hero,.portfolio-studio-hero,.archive-head{padding-top:108px!important}
  .process-grid,.service-detail-includes>div:last-child{grid-template-columns:1fr!important}
  .about-premium{padding-left:18px!important;padding-right:18px!important}
  .v2-footer>section,.footer-grid,.footer-bottom{width:calc(100% - 36px)!important}
}

/* ICODE-V41-POLISH-START */
/* Sticky header must keep exactly the same light treatment after scroll. */
body .cinema-header,
body .cinema-header.scrolled{
  background:rgba(255,255,255,.97)!important;
  border-color:rgba(17,20,23,.09)!important;
  box-shadow:0 14px 40px rgba(14,30,36,.085)!important;
  color:#111417!important;
}
body .cinema-header.scrolled .simple-main-nav>a,
body .cinema-header.scrolled .nav-erp-stack .simple-erp-link,
body .cinema-header .simple-main-nav>a,
body .cinema-header .nav-erp-stack .simple-erp-link{
  color:#293035!important;
}
body .cinema-header.scrolled .simple-main-nav>a:hover,
body .cinema-header .simple-main-nav>a:hover{
  color:#A9562C!important;
}
body .cinema-header.scrolled .cinema-mobile-trigger span,
body .cinema-header .cinema-mobile-trigger span{
  background:#111417!important;
}

/* ERP / CRM + separate clickable LIVE DEMO label. */
.nav-erp-stack{
  position:relative;
  min-width:76px;
  min-height:54px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.nav-erp-stack .simple-erp-link{
  min-height:38px!important;
  display:flex!important;
  align-items:flex-end!important;
  padding:0 3px 7px!important;
  color:#0F2933!important;
  font-family:"Inter",sans-serif!important;
  font-size:12.4px!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}
.nav-live-demo{
  position:absolute;
  top:-2px;
  left:50%;
  transform:translateX(-50%);
  min-width:64px;
  height:18px;
  padding:0 8px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#DDA06E!important;
  border:1px solid rgba(111,68,40,.18)!important;
  box-shadow:0 5px 12px rgba(147,89,52,.12)!important;
  color:#2B1A10!important;
  font-family:"Inter",sans-serif!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  line-height:1!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  z-index:3;
  animation:icodeLiveDemoNudge 5.6s ease-in-out infinite;
}
.nav-live-demo:hover{
  background:#E7B486!important;
  color:#21130B!important;
  transform:translateX(-50%) translateY(-1px);
}
@keyframes icodeLiveDemoNudge{
  0%,86%,100%{transform:translateX(-50%) rotate(0deg)}
  89%{transform:translateX(-50%) rotate(-1.2deg)}
  92%{transform:translateX(-50%) rotate(1.2deg)}
  95%{transform:translateX(-50%) rotate(-.7deg)}
  98%{transform:translateX(-50%) rotate(.5deg)}
}
.mobile-live-demo{
  display:inline-flex;
  margin-inline-start:8px;
  padding:4px 7px;
  border-radius:999px;
  background:#DDA06E;
  color:#2B1A10!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  vertical-align:middle;
}

/* All public "live demo" CTAs keep the warm beige identity. */
a.erp-live-demo-cta,
.erp-page a[href*="/crm/demo/login"],
.service-detail-hero a[href*="/crm/demo/login"],
.hv4-erp a[href*="/crm/demo/login"]{
  background:linear-gradient(135deg,#E9BE99,#DDA06E)!important;
  border-color:#DDA06E!important;
  color:#24160E!important;
  box-shadow:0 12px 28px rgba(147,89,52,.15)!important;
}
a.erp-live-demo-cta:hover,
.erp-page a[href*="/crm/demo/login"]:hover,
.service-detail-hero a[href*="/crm/demo/login"]:hover,
.hv4-erp a[href*="/crm/demo/login"]:hover{
  background:linear-gradient(135deg,#F0CBAA,#E4AA79)!important;
  border-color:#D09463!important;
  color:#1D120C!important;
}

@media(max-width:1180px){
  .nav-erp-stack{min-width:66px}
  .nav-erp-stack .simple-erp-link{font-size:11px!important}
  .nav-live-demo{min-width:58px;font-size:6.4px!important}
}
@media(max-width:920px){
  .nav-erp-stack{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .nav-live-demo{animation:none!important}
}
/* ICODE-V41-POLISH-END */
