*{box-sizing:border-box;}
body{margin:0;-webkit-font-smoothing:antialiased;font-family:'Manrope',sans-serif;color:#1F2937;background:#FFFFFF;overflow-x:hidden;}
a{color:#C8A45D;text-decoration:none;}
a:hover{color:#0B2341;}
@keyframes heroZoom{from{transform:scale(1);}to{transform:scale(1.1);}}
@keyframes gradPulse{0%,100%{box-shadow:0 0 0 0 rgba(200,164,93,0.4);}50%{box-shadow:0 0 0 12px rgba(200,164,93,0);}}

.midcon-nav-desktop{display:flex;align-items:center;gap:24px;}
.midcon-nav-mobile-btn{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;}
@media (max-width:1039px){
  .midcon-nav-desktop{display:none;}
  .midcon-nav-mobile-btn{display:flex;}
}
.midcon-mobile-menu{position:fixed;top:88px;right:clamp(24px,6vw,64px);left:auto;width:240px;background:rgba(11,35,65,0.9);backdrop-filter:blur(6px);z-index:49;display:none;flex-direction:column;align-items:flex-start;gap:2px;padding:16px 20px 20px;border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,0.3);}
.midcon-mobile-menu.open{display:flex;}

[data-reveal].reveal-hidden{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease;}
[data-reveal]{transition:opacity 0.8s ease,transform 0.8s ease;}
.stagger-item.reveal-hidden{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease;}
.stagger-item{transition:opacity 0.6s ease,transform 0.6s ease;}
.card-hover{transition:transform 0.5s ease,box-shadow 0.5s ease,border-color 0.5s ease;}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(11,35,65,0.12);border-color:#C8A45D;}
.pill-hover{transition:border-color 0.4s ease,color 0.4s ease;}
.pill-hover:hover{border-color:#C8A45D;color:#0B2341;}
.link-hover{transition:background 0.3s ease;}
.link-hover:hover{background:#F8FAFC;}

.faq-item .faq-icon{font-size:20px;font-weight:400;color:#C8A45D;transition:transform 0.3s ease;flex-shrink:0;}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-item .faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease;}
.faq-item.open .faq-answer{max-height:400px;}

.quote-tab{background:transparent;color:#1F2937;opacity:0.65;padding:10px 20px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;border:1px solid transparent;}
.quote-tab.active{background:#0B2341;color:#FFFFFF;opacity:1;border:1px solid #0B2341;}

input:focus,select:focus,textarea:focus{outline:2px solid #C8A45D;}

@media (max-width: 1039px) {
  .midcon-nav-lockup { width: 150px !important; }
  .midcon-nav-ar { font-size: 13px !important; }
  .midcon-nav-en { font-size: 10px !important; }
  .hero-grid { display: flex !important; flex-direction: column !important; gap: 32px !important; padding-bottom: 60px !important; }
  .hero-image-wrap { height: 320px !important; margin: 0 !important; border-radius: 16px !important; overflow: hidden !important; }
  .ci-overlay { height: min(560px, 78vh) !important; }
}

@media (max-width: 1039px) {
  .hero-quote-card { position: static !important; left: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; margin: 24px 0 0 0 !important; box-sizing: border-box; }
  header[style*="padding:150px"] { padding-bottom: 40px !important; }
  /* the radial+linear mask fade was tuned for the desktop side-by-side layout (image blending into the text column on its left). On a stacked mobile layout that fade was making the photo render essentially invisible, so it's dropped in favor of the plain rounded-corner card already set above. */
  .hero-image-wrap > div { mask-image: none !important; -webkit-mask-image: none !important; }
}