/* ============ RESET & BASE ============ */
:root{
  --navy: #0c1a2e;
  --navy-2: #13233b;
  --blue: #2f6fed;
  --blue-dark: #1f4fc2;
  --light-bg: #f4f6fa;
  --alt-bg: #eef1f6;
  --text-dark: #10192b;
  --text-body: #5b6472;
  --text-light: #ffffff;
  --text-light-muted: rgba(255,255,255,.72);
  --border: #e3e7ee;
  --radius: 4px;
  --container: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text-dark);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.01em;}
p{margin:0;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;
  padding:14px 28px;
  font-size:14px;
  font-weight:600;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-dark); }
.btn-ghost{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-outline{ border-color:var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; }

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-img{ height:54px; width:auto; display:block; }
.logo-text{ font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--navy); }
.main-nav{ display:flex; gap:32px; }
.main-nav a{ font-size:14px; font-weight:500; color:var(--text-dark); }
.main-nav a:hover{ color:var(--blue); }
.header-cta{ display:flex; align-items:center; gap:20px; }
.header-phone{ font-size:14px; font-weight:600; color:var(--navy); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background:var(--navy); }

/* ============ HERO ============ */
.hero{
  background:
    linear-gradient(120deg, rgba(9,17,32,.92) 15%, rgba(9,17,32,.55) 60%),
    repeating-linear-gradient(115deg, #16324f 0 40px, #1c3d5e 40px 80px);
  color:#fff;
  padding:120px 0 100px;
}
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.04em;
  color:var(--text-light-muted); margin-bottom:22px;
}
.hero h1{
  font-size:clamp(38px,6vw,64px);
  line-height:1.08;
  max-width:680px;
  margin-bottom:26px;
}
.hero-sub{
  font-size:17px; max-width:480px; color:var(--text-light-muted); margin-bottom:36px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-actions.center{ justify-content:center; }

/* ============ PILLARS STRIP ============ */
.pillars-strip{ background:var(--navy-2); }
.pillars-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
}
.pillar{
  color:#fff; font-size:13px; font-weight:600; letter-spacing:.03em;
  padding:22px 20px; border-right:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:10px;
}
.pillar:last-child{ border-right:0; }
.pillar-num{ color:var(--blue); font-weight:700; }

/* ============ SECTION GENERAL ============ */
.section{ padding:110px 0; }
.section-light-band{ background:var(--light-bg); }
.section-alt{ background:var(--alt-bg); }
.section-dark{ background:var(--navy); color:#fff; }

.section-label{
  font-size:13px; font-weight:700; letter-spacing:.04em;
  color:var(--blue); margin-bottom:16px;
}
.section-label.light{ color:#7ea9ff; }
.section-title{
  font-size:clamp(28px,3.6vw,40px);
  line-height:1.18;
  max-width:640px;
  margin-bottom:22px;
  color:var(--text-dark);
}
.section-title.light{ color:#fff; }
.section-intro{
  font-size:16px; color:var(--text-body); max-width:560px; margin-bottom:48px;
}
.section-intro.light{ color:var(--text-light-muted); }

/* ============ CARD GRIDS ============ */
.card-grid{ display:grid; gap:28px; }
.card-grid.four-col{ grid-template-columns:repeat(4,1fr); }
.card-grid.three-col{ grid-template-columns:repeat(3,1fr); }

.feature-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 26px;
}
.feature-icon{
  width:44px; height:44px; border-radius:8px;
  background:var(--light-bg); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:20px;
}
.feature-card h3{ font-size:17px; margin-bottom:10px; }
.feature-card p{ font-size:14px; color:var(--text-body); margin-bottom:16px; }
.text-link{ font-size:13px; font-weight:600; color:var(--blue); }

/* ============ STRATEGY / DARK TWO COL ============ */
.two-col-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:start;
}
.tag-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-row span{
  font-size:13px; padding:8px 14px; border-radius:20px;
  border:1px solid rgba(255,255,255,.25); color:var(--text-light-muted);
}
.methodology-panel{
  background:var(--navy-2); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:34px;
}
.panel-label{ font-size:13px; font-weight:700; letter-spacing:.04em; color:#7ea9ff; margin-bottom:22px; }
.methodology-list li{
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08);
  font-size:15px; font-weight:600; color:#fff;
  display:flex; align-items:center; gap:12px;
}
.methodology-list li::before{
  content:"→"; color:var(--blue);
}
.methodology-list li:last-child{ border-bottom:0; }

/* ============ SERVICES ============ */
.service-card{
  padding:30px 26px; border-radius:var(--radius); background:var(--light-bg);
}
.service-icon{
  width:44px; height:44px; border-radius:8px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; margin-bottom:18px; border:1px solid var(--border);
}
.service-card h3{ font-size:16px; margin-bottom:10px; }
.service-card p{ font-size:14px; color:var(--text-body); margin-bottom:16px; }
.center-cta{ text-align:center; margin-top:44px; }

/* ============ PROCESS STEPS ============ */
.process-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:24px;
}
.process-step{
  border-top:3px solid var(--blue); padding-top:20px;
}
.step-num{ display:block; font-size:13px; font-weight:700; color:var(--blue); margin-bottom:14px; }
.process-step h3{ font-size:17px; margin-bottom:10px; }
.process-step p{ font-size:14px; color:var(--text-body); }

/* ============ INDUSTRIES ============ */
.industry-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); margin-bottom:12px;
}
.industry-card{
  background:#fff; padding:30px 22px; font-size:15px; font-weight:600;
}

/* ============ EXPERTISE (dark) ============ */
.expertise-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start;
}
.expertise-photo{
  margin-top:30px; height:280px; border-radius:8px;
  overflow:hidden; border:1px solid rgba(255,255,255,.1);
}
.expertise-photo img{ width:100%; height:100%; object-fit:cover; }
.expertise-list{
  display:grid; grid-template-columns:1fr 1fr; gap:0 40px;
}
.expertise-list li{
  padding:18px 0; border-bottom:1px solid rgba(255,255,255,.1);
  font-size:15px; font-weight:600;
}

/* ============ PROJECTS ============ */
.project-card{
  border:1px dashed var(--border); border-radius:var(--radius);
  padding:60px 26px; text-align:center; background:var(--light-bg);
}
.project-placeholder{ font-weight:700; font-size:15px; margin-bottom:10px; color:var(--text-dark); }
.project-desc{ font-size:13px; color:var(--text-body); }

/* ============ WHY GRID ============ */
.why-item h3{ font-size:16px; margin-bottom:10px; }
.why-item p{ font-size:14px; color:var(--text-body); }

/* ============ PARTNER SECTION ============ */
.partner-grid{ align-items:center; }
.partner-photo{
  height:340px; border-radius:8px; overflow:hidden;
}
.partner-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============ CTA BAND ============ */
.cta-band{
  background:var(--navy); color:#fff; text-align:center; padding:100px 0;
}
.cta-band h2{ font-size:clamp(28px,4vw,42px); margin-bottom:18px; }
.cta-band p{ color:var(--text-light-muted); max-width:520px; margin:0 auto 36px; font-size:16px; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--navy-2); color:var(--text-light-muted); }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding:80px 24px 50px;
}
.footer-logo-img{
  height:60px; width:auto; background:#fff; padding:10px 14px;
  border-radius:6px;
}
.footer-name{ color:#fff; font-weight:700; margin:16px 0 12px; font-size:16px; }
.footer-tag{ font-size:14px; max-width:280px; }
.footer-col h4{ color:#fff; font-size:14px; margin-bottom:18px; }
.footer-col a, .footer-col p{ display:block; font-size:14px; margin-bottom:12px; color:var(--text-light-muted); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom-inner{
  display:flex; justify-content:space-between; padding:22px 24px; font-size:13px;
}

/* ============ GALLERY SLIDER ============ */
.gallery-section{ padding-bottom:60px; }
.gallery-wrap{
  position:relative;
  display:flex; align-items:center; gap:12px;
  max-width:var(--container);
  margin:0 auto; padding:0 24px;
}
.gallery-track{
  display:flex; gap:22px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:6px 2px 28px;
  -ms-overflow-style:none; scrollbar-width:none;
}
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-slide{
  flex:0 0 auto; width:340px; scroll-snap-align:start;
  border-radius:10px; overflow:hidden; position:relative;
  background:#000; box-shadow:0 10px 30px rgba(10,20,40,.12);
  transition:transform .35s ease, box-shadow .35s ease;
}
.gallery-slide:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(10,20,40,.2); }
.gallery-slide img, .gallery-slide video{
  width:340px; height:420px; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.gallery-slide:hover img{ transform:scale(1.05); }
.gallery-slide-video video{ background:#000; }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  color:#fff; font-size:14px; font-weight:600; letter-spacing:.01em;
}
.gallery-arrow{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--border); background:#fff; color:var(--navy);
  font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.gallery-arrow:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.gallery-dots{
  display:flex; justify-content:center; gap:8px; margin-top:8px;
}
.gallery-dots .dot{
  width:8px; height:8px; border-radius:50%; background:var(--border);
  cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.gallery-dots .dot.active{ background:var(--blue); transform:scale(1.3); }

@media (max-width:720px){
  .gallery-slide, .gallery-slide img, .gallery-slide video{ width:78vw; height:340px; }
  .gallery-arrow{ display:none; }
}

/* ============ SERVICE DETAILS MODAL ============ */
.service-modal-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(9,17,32,.6);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:cmcFade .18s ease;
}
@keyframes cmcFade{ from{ opacity:0; } to{ opacity:1; } }
.service-modal{
  position:relative;
  background:#fff; border-radius:14px;
  max-width:520px; width:100%;
  max-height:85vh; overflow-y:auto;
  padding:38px 34px 32px;
  box-shadow:0 30px 70px rgba(8,16,35,.4);
  animation:cmcPop .2s ease;
}
.service-modal-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); background:#fff; color:var(--navy);
  font-size:18px; line-height:1; cursor:pointer;
}
.service-modal-close:hover{ background:var(--light-bg); }
.service-modal-icon{
  width:48px; height:48px; border-radius:10px;
  background:var(--light-bg); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:18px;
}
.service-modal-title{ font-size:21px; margin-bottom:12px; color:var(--text-dark); }
.service-modal-body{ font-size:14.5px; line-height:1.7; color:var(--text-body); margin-bottom:22px; }
.service-modal-list-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-body); margin-bottom:10px; }
.service-modal-list{ margin-bottom:26px; }
.service-modal-list li{
  font-size:13.5px; color:var(--text-dark); padding:8px 0 8px 22px;
  border-bottom:1px solid var(--border); position:relative;
}
.service-modal-list li:last-child{ border-bottom:0; }
.service-modal-list li::before{
  content:"✓"; position:absolute; left:0; top:8px; color:var(--blue); font-weight:700; font-size:13px;
}
.service-modal-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.service-modal-actions .btn{ flex:1; text-align:center; min-width:140px; }

@media (max-width:560px){
  .service-modal{ padding:30px 22px 26px; }
}

/* ============ CHAT WIDGET ============ */

#cmcChatRoot{ position:fixed; right:22px; bottom:22px; z-index:999; font-family:'Inter',sans-serif; }
#cmcChatToggle{
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:var(--blue); color:#fff; box-shadow:0 10px 30px rgba(18,40,80,.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
#cmcChatToggle:hover{ transform:scale(1.06); background:var(--blue-dark); }
#cmcChatToggle svg{ width:26px; height:26px; }
#cmcIconClose{ display:none; }
#cmcChatToggle.open #cmcIconChat{ display:none; }
#cmcChatToggle.open #cmcIconClose{ display:block; }

#cmcChatPanel{
  position:absolute; right:0; bottom:76px;
  width:360px; max-width:calc(100vw - 32px);
  height:520px; max-height:70vh;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 20px 60px rgba(10,20,45,.28);
  display:flex; flex-direction:column;
  border:1px solid var(--border);
  animation:cmcPop .18s ease;
}
@keyframes cmcPop{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:translateY(0);} }
.cmc-hidden{ display:none !important; }

.cmc-chat-header{
  background:var(--navy); color:#fff; padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.cmc-chat-title{ font-weight:700; font-size:15px; margin:0; }
.cmc-chat-sub{ font-size:12px; color:var(--text-light-muted); margin:2px 0 0; }
.cmc-rep-link{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3);
  font-size:11px; font-weight:600; padding:7px 10px; border-radius:20px; cursor:pointer; white-space:nowrap;
}
.cmc-rep-link:hover{ background:rgba(255,255,255,.22); }

.cmc-view{ flex:1; display:flex; flex-direction:column; min-height:0; }

.cmc-messages{
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  background:var(--light-bg);
}
.cmc-msg{ max-width:82%; padding:10px 13px; border-radius:12px; font-size:13.5px; line-height:1.5; }
.cmc-msg-bot{ background:#fff; border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:3px; }
.cmc-msg-user{ background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; }
.cmc-msg-bot .cmc-msg-cta{
  display:inline-block; margin-top:8px; font-size:12px; font-weight:700;
  color:var(--blue); cursor:pointer; text-decoration:underline;
}

.cmc-quick-row{ display:flex; gap:8px; flex-wrap:wrap; padding:0 14px 10px; background:var(--light-bg); }
.cmc-quick-row button{
  font-size:11.5px; font-weight:600; background:#fff; border:1px solid var(--border);
  color:var(--navy); padding:7px 11px; border-radius:16px; cursor:pointer;
}
.cmc-quick-row button:hover{ border-color:var(--blue); color:var(--blue); }

.cmc-input-row{ display:flex; border-top:1px solid var(--border); padding:10px; gap:8px; }
.cmc-input-row input{
  flex:1; border:1px solid var(--border); border-radius:20px; padding:10px 14px; font-size:13.5px; outline:none;
}
.cmc-input-row input:focus{ border-color:var(--blue); }
.cmc-input-row button{
  width:38px; height:38px; border-radius:50%; border:none; background:var(--blue); color:#fff; cursor:pointer; font-size:15px;
}

/* rep form */
.cmc-rep-scroll{ padding:18px; overflow-y:auto; flex:1; }
.cmc-back-link{ background:none; border:none; color:var(--blue); font-size:12.5px; font-weight:600; cursor:pointer; padding:0; margin-bottom:14px; }
.cmc-rep-heading{ font-weight:700; font-size:16px; margin-bottom:4px; }
.cmc-rep-sub{ font-size:12.5px; color:var(--text-body); margin-bottom:16px; }
.cmc-field-label{ display:block; font-size:11.5px; font-weight:700; color:var(--text-body); margin:12px 0 5px; text-transform:uppercase; letter-spacing:.03em; }
.cmc-field{ width:100%; border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:13.5px; font-family:inherit; outline:none; }
.cmc-field:focus{ border-color:var(--blue); }
.cmc-textarea{ resize:vertical; }

.cmc-voice-box{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cmc-record-btn{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border);
  padding:9px 14px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--navy);
}
.cmc-record-btn.recording{ border-color:#e0453c; color:#e0453c; }
.cmc-record-dot{ width:9px; height:9px; border-radius:50%; background:#e0453c; }
.cmc-record-btn.recording .cmc-record-dot{ animation:cmcPulse 1s infinite; }
@keyframes cmcPulse{ 0%,100%{ opacity:1;} 50%{ opacity:.25;} }
.cmc-record-timer{ font-size:12px; color:var(--text-body); font-variant-numeric:tabular-nums; }
#cmcAudioPreview{ height:34px; max-width:100%; }
.cmc-record-clear{ background:none; border:none; color:#b23; font-size:12px; cursor:pointer; text-decoration:underline; padding:0; }
.cmc-mic-hint{ font-size:11.5px; color:#b23; margin-top:6px; min-height:14px; }
.cmc-submit-btn{ width:100%; margin-top:18px; text-align:center; }
.cmc-rep-status{ font-size:12.5px; margin-top:10px; text-align:center; min-height:16px; }

@media (max-width:480px){
  #cmcChatPanel{ right:-6px; width:calc(100vw - 20px); height:76vh; max-height:76vh; }
}

/* ============ RESPONSIVE ============ */


@media (max-width:960px){
  .card-grid.four-col{ grid-template-columns:repeat(2,1fr); }
  .card-grid.three-col{ grid-template-columns:repeat(2,1fr); }
  .two-col-grid, .expertise-grid, .partner-grid{ grid-template-columns:1fr; gap:40px; }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .industry-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:720px){
  .main-nav{
    position:absolute; top:76px; left:0; right:0;
    background:#fff; flex-direction:column; gap:0;
    max-height:0; overflow:hidden; border-bottom:1px solid var(--border);
    transition:max-height .25s ease;
  }
  .main-nav.open{ max-height:400px; }
  .main-nav a{ padding:16px 24px; border-bottom:1px solid var(--border); }
  .header-phone{ display:none; }
  .nav-toggle{ display:flex; }
  .pillars-grid{ grid-template-columns:1fr; }
  .pillar{ border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .card-grid.four-col, .card-grid.three-col{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .industry-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .section{ padding:70px 0; }
  .hero{ padding:90px 0 70px; }
}