/*
  MSASPL Professional Theme — 22 Aug 2026
  Brand palette aligned to the MSASPL logo: indigo / cyan / white.
  This file intentionally loads after the exported Next.js stylesheet.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --ms-indigo: #34459b;
  --ms-indigo-dark: #1c2d70;
  --ms-indigo-deep: #111f4f;
  --ms-blue: #2f82bf;
  --ms-cyan: #20afc4;
  --ms-cyan-dark: #128da5;
  --ms-cyan-soft: #eaf9fb;
  --ms-ink: #17233a;
  --ms-muted: #607187;
  --ms-line: #d9e4ee;
  --ms-surface: #f5f9fc;
  --ms-white: #ffffff;
  --ms-radius: 14px;
  --ms-shadow: 0 18px 50px rgba(27, 51, 111, .12);
  --ms-shadow-soft: 0 10px 30px rgba(27, 51, 111, .07);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', Arial, sans-serif !important;
  color: var(--ms-ink);
  background: var(--ms-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.brand, .desktop-nav, .mobile-nav, .button, .header-cta,
.form-heading, .eyebrow, .overline, .menu-label {
  font-family: 'Manrope', Arial, sans-serif !important;
}

h1, h2, h3 { letter-spacing: -.035em; }
a { text-underline-offset: 3px; }

/* Header — clean corporate treatment */
.site-header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(52,69,155,.14) !important;
  box-shadow: 0 8px 28px rgba(17,31,79,.07);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.brand strong { color: var(--ms-indigo-deep) !important; font-weight: 800; }
.brand small { color: #657792 !important; font-weight: 600; }
.desktop-nav > a,
.services-menu > summary {
  color: #263956 !important;
  font-weight: 700 !important;
  letter-spacing: .075em !important;
}
.desktop-nav > a:hover,
.services-menu > summary:hover { color: var(--ms-cyan-dark) !important; }
.services-menu > summary:after { color: var(--ms-cyan-dark) !important; }
.services-popover {
  background: rgba(255,255,255,.99) !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: 12px;
  box-shadow: 0 24px 65px rgba(17,31,79,.18) !important;
}
.menu-label { color: var(--ms-cyan-dark) !important; }
.services-popover a {
  color: #30445f !important;
  border-top-color: #e7eef4 !important;
  border-radius: 7px;
}
.services-popover a:hover {
  color: var(--ms-indigo) !important;
  background: var(--ms-cyan-soft) !important;
}
.header-cta {
  color: #fff !important;
  border: 0 !important;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ms-indigo), var(--ms-cyan-dark)) !important;
  box-shadow: 0 9px 22px rgba(52,69,155,.20);
}
.header-cta:hover { color: #fff !important; background: linear-gradient(135deg, var(--ms-indigo-dark), var(--ms-cyan)) !important; }
.mobile-nav summary { border-color: #cfdce8 !important; border-radius: 8px; }
.mobile-nav summary span { background: var(--ms-indigo) !important; }
.mobile-nav nav {
  background: #fff !important;
  border-bottom-color: var(--ms-line) !important;
  box-shadow: 0 18px 35px rgba(17,31,79,.12);
}
.mobile-nav nav a { color: #2d405d !important; border-color: #e5edf4 !important; }
.mobile-nav .mobile-service-links a { color: #607187 !important; }
.mobile-nav-label { color: var(--ms-cyan-dark) !important; }

/* Hero — logo-led indigo/cyan system */
.hero {
  background:
    radial-gradient(circle at 83% 23%, rgba(32,175,196,.34), transparent 29%),
    radial-gradient(circle at 7% 92%, rgba(47,130,191,.25), transparent 30%),
    linear-gradient(135deg, #111f4f 0%, #273a88 58%, #25386f 100%) !important;
}
.hero:after { border-color: rgba(117,226,236,.25) !important; }
.hero-grid { opacity: .34 !important; }
.hero h1 { color: #fff !important; font-weight: 800 !important; letter-spacing: -.055em !important; }
.hero-lead { color: #d9e4f1 !important; }
.hero-promise { color: #7ce4ed !important; letter-spacing: .08em !important; }
.eyebrow, .hero .overline { color: #87e8ef !important; }
.eyebrow {
  background: rgba(32,175,196,.10) !important;
  border-color: rgba(124,228,237,.35) !important;
  border-radius: 7px;
}
.status-dot { background: #87e8ef !important; box-shadow: 0 0 14px rgba(135,232,239,.75) !important; }
.button {
  border-radius: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .075em !important;
}
.button-primary {
  background: linear-gradient(135deg, #20afc4, #34c4d4) !important;
  color: #102452 !important;
  box-shadow: 0 10px 25px rgba(14,159,181,.22);
}
.button-primary:hover { background: linear-gradient(135deg, #37c5d5, #64dbe5) !important; }
.button-secondary { color: #f0f7ff !important; border-color: rgba(224,240,255,.46) !important; }
.button-secondary:hover { background: rgba(255,255,255,.08) !important; border-color: #7ce4ed !important; }
.trust-line { color: #b7c7db !important; }
.trust-line span + span:before { color: #7ce4ed !important; }

/* Lab carousel */
.lab-slideshow {
  background: #0c183d !important;
  border-color: rgba(124,228,237,.36) !important;
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(6,15,42,.45) !important;
  overflow: hidden;
}
.lab-slideshow:hover { box-shadow: 0 38px 92px rgba(6,15,42,.55), 0 0 45px rgba(32,175,196,.16) !important; }
.slideshow-topline, .slide-controls { background: rgba(9,21,57,.96); }

/* Proof / capability sections */
.proof-strip { background: #fff !important; border-bottom: 1px solid var(--ms-line); }
.proof-item strong, .proof-statement span { color: var(--ms-indigo) !important; }
.proof-item span, .proof-statement strong { color: #44566f !important; }
.capability-section { background: linear-gradient(180deg, #fff 0%, #f5f9fc 100%) !important; }
.section-heading h2 { color: var(--ms-indigo-deep); font-weight: 750; }
.section-heading > p, .split-heading > p { color: var(--ms-muted) !important; }
.overline { color: var(--ms-cyan-dark) !important; font-weight: 800 !important; }
.capability-card {
  background: #fff !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: var(--ms-radius) !important;
  box-shadow: var(--ms-shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.capability-card:hover {
  transform: translateY(-4px);
  border-color: rgba(32,175,196,.55) !important;
  box-shadow: var(--ms-shadow);
}
.capability-card h3 { color: var(--ms-indigo-deep) !important; font-weight: 750; }
.capability-card p, .capability-card li { color: #52657a !important; }
.capability-card li span, .capability-link { color: var(--ms-cyan-dark) !important; }

/* Standards / darker technical sections */
.standards-section {
  background-color: var(--ms-indigo-deep) !important;
  background-image:
    linear-gradient(90deg, rgba(124,228,237,.055) 1px, transparent 1px),
    linear-gradient(rgba(124,228,237,.055) 1px, transparent 1px) !important;
}
.standards-section h2, .standards-section h3 { color: #fff !important; }
.standards-copy > p:not(.overline), .standard-row > span:last-child { color: #b7c7db !important; }
.standards-note { background: rgba(32,175,196,.10) !important; border-left-color: #66d8e3 !important; }
.standard-row { border-color: rgba(208,227,244,.14) !important; }
.standard-row strong { color: #eef7ff !important; }

/* About / process / team / FAQ */
.about-section, .team-section { background: #f5f9fc !important; }
.about-section h2, .team-section h2, .faq-section h2, .process-section h2 { color: var(--ms-indigo-deep) !important; }
.about-copy p, .team-copy, .faq-item p { color: #52657a !important; }
.process-card, .team-card, .faq-item {
  border-color: var(--ms-line) !important;
}

/* Contact — premium white form on brand field */
.contact-section {
  background:
    radial-gradient(circle at 10% 15%, rgba(32,175,196,.20), transparent 30%),
    linear-gradient(135deg, #111f4f 0%, #263b82 100%) !important;
}
.contact-copy h2 { color: #fff !important; }
.contact-copy > p:not(.overline) { color: #cbd8e8 !important; }
.contact-points a, .contact-points address { color: #eef7ff !important; }
.contact-points span { color: #7ce4ed !important; }
.contact-form {
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: 16px !important;
  padding: 30px !important;
  box-shadow: 0 28px 70px rgba(5,15,49,.30) !important;
}
.form-heading {
  color: #71829a !important;
  border-bottom-color: #e2ebf2 !important;
  font-weight: 700 !important;
}
.form-status { color: var(--ms-cyan-dark) !important; }
.contact-form label > span { color: #42556e !important; font-weight: 750 !important; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  color: #17233a !important;
  background: #fafdff !important;
  border: 1px solid #cbd9e5 !important;
  border-radius: 9px !important;
  font-family: 'Inter', Arial, sans-serif !important;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--ms-cyan) !important;
  box-shadow: 0 0 0 4px rgba(32,175,196,.11);
}
.contact-form option { color: #17233a !important; background: #fff !important; }
.contact-form textarea::placeholder { color: #8797aa !important; }
.contact-form .form-submit {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ms-indigo), var(--ms-cyan-dark)) !important;
}
.contact-form .form-submit:hover { background: linear-gradient(135deg, var(--ms-indigo-dark), var(--ms-cyan)) !important; }
.contact-form .form-submit:disabled { cursor: wait; opacity: .72; transform: none !important; }
.form-help { color: #61738a !important; font-size: 11px !important; }
.form-help.success { color: #0a7a51 !important; font-weight: 700; }
.form-help.error { color: #b42318 !important; font-weight: 700; }
.msaspl-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; }
.location-panel { border-radius: 16px; overflow: hidden; }

/* Service pages */
.service-hero {
  background:
    radial-gradient(circle at 83% 26%, rgba(32,175,196,.28), transparent 31%),
    linear-gradient(135deg, #111f4f 0%, #273a88 62%, #22336c 100%) !important;
}
.service-hero h1 { color: #fff !important; font-weight: 800 !important; }
.service-summary { color: #d1dced !important; }
.service-back { color: #a9bbd1 !important; }
.service-back:hover { color: #7ce4ed !important; }
.service-identifier { border-color: rgba(124,228,237,.30) !important; border-radius: 14px; }
.service-content-section { background: #f6f9fc !important; }
.service-intro p, .service-detail-section p, .service-detail-section li { color: #445a70 !important; }
.service-sidebar { border-top-color: #bed0df !important; }
.sidebar-label, .service-sidebar > a span, .service-sidebar > a:hover { color: var(--ms-cyan-dark) !important; }
.sidebar-contact { background: #e8f5f8 !important; border-radius: 10px; }
.sidebar-contact a { color: var(--ms-indigo) !important; }

/* Footer */
.site-footer { background: #0d183d !important; }
.footer-rule { background: linear-gradient(90deg, transparent, #20afc4, #34459b, transparent) !important; }
.site-footer .brand strong { color: #fff !important; }
.site-footer .brand small { color: #a9bad0 !important; }
.footer-brand > p, .footer-column a, .footer-column span, .footer-address, .footer-disclaimer p { color: #9fb0c6 !important; }
.footer-column h2 { color: #69d8e4 !important; }
.footer-column a:hover { color: #8eeaf0 !important; }
.footer-bottom { border-color: rgba(197,216,237,.13) !important; }

/* Accessibility */
*:focus-visible { outline: 3px solid rgba(32,175,196,.45); outline-offset: 3px; }

@media (max-width: 980px) {
  .mobile-nav nav { top: 78px !important; }
  .hero-layout { gap: 42px !important; }
}

@media (max-width: 720px) {
  .site-header { background: rgba(255,255,255,.98) !important; }
  .hero { padding-top: 125px !important; }
  .hero h1 { font-size: clamp(42px, 13vw, 58px) !important; }
  .contact-form { padding: 22px !important; border-radius: 12px !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .service-hero h1 { font-size: clamp(42px, 12vw, 58px) !important; }
}

/* =========================================================
   MSASPL VISIBILITY FIX — 22 Aug 2026, 19:06 IST
   Dark sections must use light headings. These selectors are
   intentionally specific + !important to override the exported
   Next.js styles and earlier brand rules.
   ========================================================= */
.process-section .section-heading h2,
.deliverables-section h2,
.faq-section .faq-heading h2 {
  color: #F2F8FF !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.process-section .process-step h3 {
  color: #DCEBFA !important;
}
.process-section .process-step p {
  color: #AFC2D4 !important;
}
.deliverables-section .section-intro,
.faq-section .faq-heading > p:last-child {
  color: #AFC2D4 !important;
}
.process-section .overline,
.deliverables-section .overline,
.faq-section .overline {
  color: #40D3E5 !important;
}

/* === MSASPL HIGH PRIORITY FIX 20260822-1930 === */
/* Carousel: guaranteed visible captions and controls */
.lab-slideshow { position:relative !important; }
.lab-slide figcaption {
  z-index:6 !important;
  left:18px !important; right:18px !important; bottom:18px !important;
  padding:16px 18px !important;
  background:linear-gradient(90deg,rgba(4,14,37,.94),rgba(4,14,37,.70),rgba(4,14,37,.18)) !important;
  border-left:3px solid #5DE8EE !important;
  text-shadow:0 2px 8px rgba(0,0,0,.72) !important;
}
.lab-slide figcaption span {
  color:#7CE4ED !important;
  font-family:'Inter',Arial,sans-serif !important;
  font-size:11px !important; font-weight:800 !important; letter-spacing:.12em !important;
}
.lab-slide figcaption strong {
  color:#FFFFFF !important;
  font-family:'Manrope','Inter',Arial,sans-serif !important;
  font-size:18px !important; font-weight:750 !important; line-height:1.35 !important;
}
.slideshow-topline, .slide-controls { color:#F3F9FF !important; }
.slideshow-topline span:first-child, .slide-counter { color:#DCEBFA !important; }
.console-live { color:#7CE4ED !important; }
.slide-arrow { z-index:9 !important; }
.slideshow-video-link {
  display:block !important; padding:12px 18px !important; text-align:center !important;
  color:#7CE4ED !important; background:#081536 !important; border-top:1px solid rgba(124,228,237,.20) !important;
  font-family:'Manrope','Inter',Arial,sans-serif !important; font-size:12px !important; font-weight:800 !important;
  letter-spacing:.06em !important;
}
.slideshow-video-link:hover { background:#0D214D !important; color:#FFFFFF !important; }
/* Hero now intentionally has one action only */
.hero-actions { align-items:center !important; }
/* WhatsApp */
.whatsapp-float {
  position:fixed !important; right:22px !important; bottom:22px !important; z-index:9999 !important;
  display:flex !important; align-items:center !important; gap:9px !important;
  padding:10px 14px 10px 10px !important; border-radius:999px !important;
  background:#25D366 !important; color:#062A16 !important; box-shadow:0 12px 32px rgba(0,0,0,.28) !important;
  font-family:'Manrope','Inter',Arial,sans-serif !important; font-size:12px !important; font-weight:800 !important;
}
.whatsapp-float span { display:grid !important; place-items:center !important; width:30px !important; height:30px !important; border-radius:50% !important; background:#fff !important; color:#128C4A !important; font-size:10px !important; }
.whatsapp-float:hover { transform:translateY(-2px) !important; }
.msaspl-hp { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
@media(max-width:640px){
  .lab-slide figcaption{left:10px !important;right:10px !important;bottom:10px !important;padding:12px 13px !important;}
  .lab-slide figcaption strong{font-size:15px !important;}
  .whatsapp-float{right:14px !important;bottom:14px !important;padding:8px 11px 8px 8px !important;}
  .whatsapp-float strong{font-size:11px !important;}
}