/* ═══════════════════════════════════════════════════════════
   TESS — Premium Corporate Redesign Stylesheet
   Design Language: McKinsey / Deloitte / Stripe style
   ═══════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─── */
:root {
  --navy:        #082F63;
  --navy-dark:   #041D3F;
  --navy-deep:   #021127;
  --royal:       #145DA0;
  --royal-light: #1E82D0;
  --gold:        #D4AF37;
  --gold-light:  #F3D065;
  --gold-dark:   #A9851B;
  --white:       #FFFFFF;
  --light:       #F8FAFC;
  --border:      rgba(8, 47, 99, 0.08);
  --border-light:rgba(255, 255, 255, 0.15);
  
  /* Text */
  --txt-dark:    #0F172A;
  --txt-mid:     #334155;
  --txt-muted:   #64748B;
  
  /* System */
  --shadow-sm:   0 1px 8px rgba(8, 47, 99, 0.04);
  --shadow-md:   0 12px 30px rgba(8, 47, 99, 0.08);
  --shadow-lg:   0 20px 50px rgba(8, 47, 99, 0.12);
  --shadow-xl:   0 32px 80px rgba(8, 47, 99, 0.18);
  
  /* Radius & Curves */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur:    0.4s;
  --nav-h:  80px;
  
  /* Fonts */
  --font-head: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-num:  'Manrope', sans-serif;
}

/* ─── CSS RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--txt-dark);
  background: var(--light);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; border-radius: 4px; }

/* ─── SCROLL BAR & PROGRESS ─── */
.scroll-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--royal), var(--gold));
  z-index: 9999; transition: width 0.1s linear;
}

/* ─── UTILITIES & LAYOUT ─── */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.section { padding: 120px 0; position: relative; overflow: hidden; }
.bg-white { background: var(--white); }
.bg-light { background: var(--light); }
.bg-navy  { background: var(--navy-dark); color: var(--white); }

/* Headers */
.s-head { margin-bottom: 72px; }
.s-head.center { text-align: center; }
.s-head.center .s-sub { margin: 0 auto; }

.s-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--royal); background: rgba(20, 93, 160, 0.08);
  padding: 6px 16px; border-radius: 50px;
  border: 1px solid rgba(20, 93, 160, 0.12); margin-bottom: 20px;
}
.s-tag.light {
  color: var(--gold); background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.2);
}

.s-title {
  font-family: var(--font-head); font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800; color: var(--navy); line-height: 1.2; margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.s-title.light { color: var(--white); }

.s-sub {
  font-size: 1.05rem; color: var(--txt-muted); max-width: 680px; line-height: 1.8;
}
.s-sub.light { color: rgba(255, 255, 255, 0.65); }

/* Buttons */
.btn-gold {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 36px; border-radius: 50px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--navy-dark); font-family: var(--font-head); font-size: 0.92rem; font-weight: 700;
  transition: all var(--dur) var(--ease);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
}

.btn-outline-white {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 34px; border-radius: 50px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--white); font-family: var(--font-head); font-size: 0.92rem; font-weight: 600;
  backdrop-filter: blur(8px); transition: all var(--dur) var(--ease);
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn-navy {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: 50px;
  background: var(--navy); color: var(--white);
  font-family: var(--font-head); font-size: 0.9rem; font-weight: 600;
  transition: all var(--dur) var(--ease); box-shadow: var(--shadow-sm);
}
.btn-navy:hover {
  background: var(--royal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
}

/* Reveals */
.fade-up   { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.fade-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.fade-right{ opacity: 0; transform: translateX(40px);  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.fade-up.vis, .fade-left.vis, .fade-right.vis { opacity: 1; transform: none; }

/* ─── PREMIUM NAVBAR ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h); z-index: 1000;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), height 0.3s var(--ease);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px;
}
.brand { display: flex; align-items: center; }
.brand-logo-img { height: 52px; width: auto; display: block; transition: opacity 0.3s var(--ease), filter 0.3s var(--ease); object-fit: contain; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)); }
.nav.solid .brand-logo-img { filter: none; }
.brand:hover .brand-logo-img { opacity: 0.88; }

.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-a {
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.8); padding: 8px 16px; border-radius: 8px;
  transition: color 0.25s var(--ease); position: relative;
}
.nav-a::after {
  content: ''; position: absolute; bottom: 0; left: 16px; right: 16px;
  height: 2px; background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transition: transform 0.25s var(--ease);
}
.nav-a:hover, .nav-a.active { color: var(--white); }
.nav-a:hover::after, .nav-a.active::after { transform: scaleX(1); }

.nav-btn {
  display: inline-flex; align-items: center; padding: 12px 24px;
  background: var(--white); color: var(--navy);
  font-family: var(--font-head); font-size: 0.85rem; font-weight: 700;
  border-radius: 50px; border: 1.5px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s var(--ease); box-shadow: var(--shadow-sm);
}
.nav-btn:hover {
  background: var(--gold); color: var(--navy-dark);
  border-color: var(--gold); transform: translateY(-1px);
}

.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 1001; }
.burger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--dur) var(--ease); }
.burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Nav Solid Mode (on scroll) */
.nav.solid {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 30px rgba(8, 47, 99, 0.05); height: 72px;
}

.nav.solid .nav-a { color: var(--txt-mid); }
.nav.solid .nav-a:hover, .nav.solid .nav-a.active { color: var(--navy); }
.nav.solid .nav-a::after { background: var(--royal); }
.nav.solid .nav-btn {
  background: var(--navy); color: var(--white); border-color: var(--navy);
}
.nav.solid .nav-btn:hover {
  background: var(--royal); border-color: var(--royal);
}
.nav.solid .burger span { background: var(--navy); }

/* Mobile Drawer */
.drawer {
  position: fixed; top: 0; right: 0; width: 320px; height: 100vh;
  background: var(--navy-deep); z-index: 999; transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  padding: calc(var(--nav-h) + 20px) 36px 40px;
  display: flex; flex-direction: column; gap: 32px;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.3);
}
.drawer.open { transform: translateX(0); }
.drawer ul { display: flex; flex-direction: column; gap: 8px; }
.dr-a {
  display: block; padding: 14px 0; font-size: 1.05rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.25s var(--ease);
}
.dr-a:hover { color: var(--gold); padding-left: 8px; }
.dr-btn {
  display: inline-flex; justify-content: center; align-items: center;
  padding: 16px; background: var(--gold); color: var(--navy-dark);
  font-family: var(--font-head); font-weight: 700; border-radius: 50px;
}
.drawer-overlay { position: fixed; inset: 0; background: rgba(8, 29, 63, 0.6); backdrop-filter: blur(4px); z-index: 998; display: none; }
.drawer-overlay.show { display: block; }

/* ─── 1. HERO SECTION ─── */
.hero {
  position: relative; min-height: 100vh; display: flex;
  align-items: center; overflow: hidden; padding-top: var(--nav-h);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.35) saturate(1.15); }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(8, 29, 63, 0.9) 0%, rgba(8, 47, 99, 0.7) 60%, rgba(8, 47, 99, 0.3) 100%);
}
.particles-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-layout {
  position: relative; z-index: 2; width: 100%;
  max-width: 1240px; margin: 0 auto; padding: 60px 28px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center;
}
.hero-left { max-width: 640px; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); background: rgba(212, 175, 55, 0.12); border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 8px 22px; border-radius: 50px; margin-bottom: 28px; white-space: nowrap;
}
.kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 2.2s ease infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:0.6} }

.hero-h1 {
  font-family: var(--font-head); font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800; color: var(--white); line-height: 1.15;
  letter-spacing: -0.025em; margin-bottom: 24px;
}
.hero-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-p { font-size: 1.15rem; color: rgba(255, 255, 255, 0.8); line-height: 1.8; margin-bottom: 40px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }

.hero-trust {
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-lg);
  padding: 20px 32px; gap: 32px; width: max-content;
}
.trust-item { display: flex; flex-direction: column; }
.trust-num { font-family: var(--font-num); font-size: 1.8rem; font-weight: 800; color: var(--gold); line-height: 1.2; display: inline; }
.trust-sfx { font-family: var(--font-num); font-size: 1.8rem; font-weight: 800; color: var(--gold); line-height: 1.2; }
.trust-lbl { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); margin-top: 2px; white-space: nowrap; }
.trust-sep { width: 1px; height: 36px; background: rgba(255, 255, 255, 0.15); }

/* Floating Cards (Hero Right) */
.hero-right { display: flex; align-items: center; justify-content: flex-end; }
.float-grid { display: grid; grid-template-columns: 1fr; gap: 20px; width: 100%; max-width: 380px; }
.fg-card {
  display: flex; align-items: center; gap: 18px; padding: 22px 24px;
  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-md);
  transition: all var(--dur) var(--ease);
  animation: floatCard 6s ease-in-out infinite;
}
.fg-card:nth-child(2) { animation-delay: 1.5s; animation-duration: 7s; }
.fg-card:nth-child(3) { animation-delay: 3s; animation-duration: 6.5s; }
.fg-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(212, 175, 55, 0.35);
  transform: translateY(-5px) !important;
}
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.fg-icon {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--royal), var(--navy));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--white);
}
.fg-body { display: flex; flex-direction: column; }
.fg-body strong { font-size: 0.88rem; font-weight: 700; color: var(--white); }
.fg-body span { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }

.hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
  animation: scrollLine 2.2s ease infinite;
}
@keyframes scrollLine {
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ─── 2. COMPANY INTRODUCTION ─── */
.about-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center;
}
.about-visual { position: relative; }
.about-img {
  width: 100%; height: 500px; object-fit: cover;
  border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
}
.about-visual::after {
  content: ''; position: absolute; -inset: 12px;
  border: 2px solid var(--gold); border-radius: calc(var(--r-xl) + 8px);
  z-index: -1; opacity: 0.3; top: 16px; left: 16px; width: 100%; height: 100%;
}
.about-lead {
  font-family: var(--font-head); font-size: 1.35rem; font-weight: 700;
  color: var(--navy); line-height: 1.5; margin-bottom: 24px;
}
.about-p { font-size: 1.02rem; color: var(--txt-muted); line-height: 1.8; margin-bottom: 32px; }

/* ─── 3. CORE SERVICES ─── */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.service-card {
  padding: 0; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: all 0.4s var(--ease); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; height: 380px; position: relative; overflow: hidden;
}
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent-color, var(--royal));
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
  z-index: 2;
}
.service-card:hover {
  transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent;
}
.service-card:hover::before { transform: scaleX(1); }

.svc-header {
  flex-shrink: 0; padding: 36px 36px 0;
}
.svc-icon {
  width: 56px; height: 56px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color, #145DA0) 8%, white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--accent-color, #145DA0);
  margin-bottom: 24px; transition: all 0.3s var(--ease);
}
.service-card:hover .svc-icon {
  background: var(--accent-color, #145DA0); color: var(--white);
}
.service-card h3 {
  font-family: var(--font-head); font-size: 1.2rem; font-weight: 700;
  color: var(--navy); margin-bottom: 12px;
}
.svc-scroll-area {
  flex: 1; overflow-y: auto; padding: 0 36px 36px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.15) transparent;
  scroll-behavior: smooth;
}
.svc-scroll-area::-webkit-scrollbar { width: 5px; }
.svc-scroll-area::-webkit-scrollbar-track { background: transparent; }
.svc-scroll-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 10px; }
.svc-scroll-area::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }
.svc-short { font-size: 0.95rem; color: var(--txt-mid); line-height: 1.6; margin-bottom: 16px; }
.svc-detail {
  font-size: 0.88rem; color: var(--txt-muted);
}
.svc-detail p { margin-bottom: 12px; line-height: 1.6; }
.svc-detail ul { display: flex; flex-direction: column; gap: 6px; }
.svc-detail li { display: flex; align-items: center; gap: 8px; color: var(--txt-dark); font-weight: 500; }
.svc-detail li i { color: var(--accent-color); font-size: 0.75rem; }

/* ─── 4. WHY CHOOSE TESS ─── */
.why-section {
  background-color: var(--navy-dark);
  background-image: radial-gradient(circle at 80% 20%, rgba(20, 93, 160, 0.25) 0%, transparent 60%);
}
.timeline-wrap { position: relative; max-width: 900px; margin: 60px auto 0; padding: 20px 0; }
.timeline-line {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: rgba(212, 175, 55, 0.2); transform: translateX(-50%);
}
.timeline-item {
  display: flex; justify-content: flex-start; width: 50%;
  padding-right: 48px; position: relative; margin-bottom: 48px;
}
.timeline-item.reverse {
  align-self: flex-end; justify-content: flex-end;
  padding-right: 0; padding-left: 48px; margin-left: 50%;
}
.timeline-badge {
  position: absolute; top: 22px; right: -20px; width: 40px; height: 40px;
  border-radius: 50%; background: var(--gold); color: var(--navy-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 800; font-size: 0.95rem;
  box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.15); z-index: 2;
}
.timeline-item.reverse .timeline-badge { left: -20px; right: auto; }
.timeline-item .glass-card { width: 100%; }
.timeline-card h3 { font-family: var(--font-head); font-size: 1.15rem; color: var(--white); margin-bottom: 10px; }
.timeline-card p { font-size: 0.88rem; color: rgba(255, 255, 255, 0.65); line-height: 1.7; }

/* ─── 5. INDUSTRIES WE SERVE ─── */
.ind-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.ind-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: all 0.4s var(--ease); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.ind-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-lg);
  border-color: rgba(20, 93, 160, 0.15);
}
.ind-card.featured {
  grid-column: span 3; display: grid; grid-template-columns: 1.3fr 1fr; align-items: stretch;
}
.ind-img-box { width: 100%; height: 250px; overflow: hidden; position: relative; }
.ind-card.featured .ind-img-box { height: 100%; min-height: 320px; }
.ind-image {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.ind-card:hover .ind-image { transform: scale(1.04); }

.ind-info { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; }
.ind-info h3 {
  font-family: var(--font-head); font-size: 1.2rem; font-weight: 700;
  color: var(--navy); margin-bottom: 10px;
}
.ind-info p { font-size: 0.88rem; color: var(--txt-muted); line-height: 1.6; }

/* ─── 6. STATISTICS ─── */
.stats-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  position: relative; overflow: hidden;
}
.stats-overlay {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 10% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 45%),
                    radial-gradient(circle at 90% 50%, rgba(20, 93, 160, 0.18) 0%, transparent 40%);
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; z-index: 1;
}
.stat-card {
  text-align: center; padding: 48px 24px;
  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-lg);
  transition: all var(--dur) var(--ease);
}
.stat-card:hover {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(212, 175, 55, 0.3);
  transform: translateY(-6px);
}
.stat-icon { font-size: 1.8rem; color: var(--gold); margin-bottom: 16px; }
.stat-num-box { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: 8px; }
.stat-count { font-family: var(--font-num); font-size: 3rem; font-weight: 800; color: var(--white); }
.stat-sfx { font-family: var(--font-num); font-size: 1.8rem; font-weight: 800; color: var(--gold); }
.stat-label { font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); font-weight: 500; }

/* ─── 7. CONSULTATION CTA ─── */
.cta-banner {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-deep) 100%);
  position: relative; text-align: center; overflow: hidden; padding: 120px 0;
}
.cta-glow {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.15) 0%, transparent 60%);
}
.cta-box { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.cta-box h2 {
  font-family: var(--font-head); font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800; color: var(--white); line-height: 1.25; margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.cta-box p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); line-height: 1.8; margin-bottom: 40px; }

/* ─── 8. FOOTER ─── */
.footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.65); border-top: 1px solid rgba(255, 255, 255, 0.05); }
.footer-main { padding: 80px 0 60px; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 60px; }

.ft-logo-row { display: flex; align-items: center; margin-bottom: 24px; }
.ft-logo-img { height: 56px; width: auto; display: block; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45)); }
.ft-logo-name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 800; color: var(--white); }
.ft-logo-sub { font-size: 0.55rem; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; }

.ft-desc { font-size: 0.88rem; color: rgba(255, 255, 255, 0.5); line-height: 1.7; margin-bottom: 24px; max-width: 320px; }
.ft-socials { display: flex; gap: 12px; }
.ft-social-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); transition: all 0.3s var(--ease);
}
.ft-social-btn:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); transform: translateY(-3px); }

.ft-header {
  font-family: var(--font-head); font-size: 0.85rem; font-weight: 700; color: var(--white);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px;
  padding-bottom: 12px; position: relative;
}
.ft-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--gold); }
.ft-links { display: flex; flex-direction: column; gap: 10px; }
.ft-links a { font-size: 0.88rem; color: rgba(255, 255, 255, 0.55); transition: all 0.25s var(--ease); display: flex; align-items: center; gap: 6px; }
.ft-links a::before { content: '›'; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: all 0.2s; }
.ft-links a:hover { color: var(--white); padding-left: 8px; }
.ft-links a:hover::before { opacity: 1; transform: translateX(0); }

.ft-contact-list { display: flex; flex-direction: column; gap: 16px; }
.ft-contact-item { display: flex; gap: 12px; align-items: flex-start; }
.ft-contact-icon { color: var(--gold); font-size: 0.95rem; margin-top: 2px; }
.ft-contact-text strong { display: block; font-size: 0.82rem; color: var(--white); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.ft-contact-text span, .ft-contact-text a { font-size: 0.84rem; color: rgba(255, 255, 255, 0.5); }
.ft-contact-text a:hover { color: var(--gold); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 24px 0; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 0.82rem; color: rgba(255, 255, 255, 0.35); }
.ft-legal-links { display: flex; align-items: center; gap: 16px; }
.ft-legal-links a { font-size: 0.82rem; color: rgba(255, 255, 255, 0.35); transition: color 0.2s; }
.ft-legal-links a:hover { color: var(--gold); }

/* ─── MODAL CONSULTATION FORM ─── */
.booking-modal {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease);
}
.booking-modal.show { opacity: 1; pointer-events: auto; }
.booking-modal-overlay { position: absolute; inset: 0; background: rgba(8, 29, 63, 0.55); backdrop-filter: blur(8px); }
.booking-modal-content {
  position: relative; z-index: 2; width: 100%; max-width: 600px;
  padding: 44px 40px; border-radius: var(--r-xl);
  transform: scale(0.92); transition: transform 0.35s var(--ease);
  color: var(--white); background: rgba(8, 31, 63, 0.95);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.booking-modal.show .booking-modal-content { transform: scale(1); }
.booking-modal-close {
  position: absolute; top: 24px; right: 24px; font-size: 2rem;
  color: rgba(255, 255, 255, 0.5); transition: color 0.2s;
}
.booking-modal-close:hover { color: var(--white); }

.booking-modal h3 { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; margin-bottom: 8px; color: var(--white); }
.booking-modal > p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 28px; }

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cf-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cf-group label { font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.cf-group input, .cf-group textarea, .cf-group select {
  padding: 13px 16px; border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px; font-size: 0.92rem; color: var(--white);
  background: rgba(255, 255, 255, 0.06); transition: all 0.3s;
}
.cf-group input::placeholder, .cf-group textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.cf-group select option { background: var(--navy-dark); color: var(--white); }
.cf-group input:focus, .cf-group textarea:focus, .cf-group select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}
.cf-group textarea { resize: vertical; min-height: 100px; }
.cf-success {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding: 16px 20px; background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 10px; color: #86efac;
}
.cf-success[hidden] { display: none; }
.cf-success i { font-size: 1.3rem; color: #22c55e; }

/* ─── BACK TO TOP ─── */
.btt {
  position: fixed; bottom: 30px; right: 30px; width: 48px; height: 48px;
  border-radius: 50%; background: linear-gradient(135deg, var(--royal), var(--navy));
  color: var(--white); font-size: 1rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(8,47,99,0.35); z-index: 900;
  opacity: 0; transform: translateY(20px); transition: all var(--dur) var(--ease); pointer-events: none;
}
.btt.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.btt:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--navy-dark); transform: translateY(-3px);
}

/* ─── RESPONSIVE MEDIA QUERIES ─── */
@media (max-width: 1100px) {
  .hero-layout { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .hero-left { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
  .hero-actions { justify-content: center; }
  .hero-right { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-img { height: 380px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-card.featured { grid-column: span 2; grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .nav-menu, .nav-btn { display: none; }
  .burger { display: flex; }
  .timeline-line { left: 24px; }
  .timeline-item { width: 100%; padding-right: 0; padding-left: 48px; margin-left: 0; }
  .timeline-item.reverse { justify-content: flex-start; padding-left: 48px; margin-left: 0; }
  .timeline-badge { left: 4px; right: auto; }
  .timeline-item.reverse .timeline-badge { left: 4px; }
}

@media (max-width: 768px) {
  :root { --nav-h: 70px; }
  .section { padding: 80px 0; }
  .services-grid { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: 1fr; }
  .ind-card.featured { grid-column: span 1; }
  .stats-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .cf-row { grid-template-columns: 1fr; gap: 0; }
  .booking-modal-content { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .hero-trust { display: none; }
  .btt { bottom: 20px; right: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — Phase 2 Styles (inherits all Phase 1 tokens)
   ═══════════════════════════════════════════════════════════ */

/* ─── PAGE LAYOUT ─── */
.about-page-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}

/* ─── STICKY SIDE NAV ─── */
.about-sidenav{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;background:var(--white);border-right:1px solid var(--border);padding:48px 0;display:flex;flex-direction:column;gap:4px;scrollbar-width:none}
.about-sidenav::-webkit-scrollbar{display:none}
.sidenav-label{font-size:0.68rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--txt-muted);padding:0 28px 12px}
.sidenav-link{display:flex;align-items:center;gap:10px;padding:10px 28px;font-size:0.88rem;font-weight:500;color:var(--txt-mid);transition:all .25s var(--ease);border-left:3px solid transparent}
.sidenav-link i{font-size:.8rem;width:16px;color:var(--txt-muted);transition:color .25s}
.sidenav-link:hover{color:var(--navy);background:rgba(8,47,99,.04);border-left-color:rgba(8,47,99,.2)}
.sidenav-link:hover i{color:var(--royal)}
.sidenav-link.active{color:var(--navy);font-weight:600;background:rgba(20,93,160,.06);border-left-color:var(--gold)}
.sidenav-link.active i{color:var(--gold)}
.sidenav-divider{height:1px;background:var(--border);margin:12px 28px}

/* ─── ABOUT CONTENT ─── */
.about-content{overflow:hidden}

/* ─── ABOUT HERO ─── */
.about-hero{position:relative;height:480px;display:flex;align-items:center;overflow:hidden}
.about-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:brightness(.35) saturate(1.1)}
.about-hero-veil{position:absolute;inset:0;background:linear-gradient(110deg,rgba(8,29,63,.92) 0%,rgba(8,47,99,.7) 60%,rgba(8,47,99,.4) 100%)}
.about-hero-content{position:relative;z-index:2;padding:0 60px;max-width:700px}
.about-hero-content h1{font-family:var(--font-head);font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;color:var(--white);line-height:1.2;letter-spacing:-.025em;margin-bottom:16px}
.about-hero-content p{font-size:1.05rem;color:rgba(255,255,255,.78);line-height:1.75;max-width:560px}

/* ─── ABOUT SECTION ─── */
.about-section{padding:80px 60px;border-bottom:1px solid var(--border)}
.about-section:last-child{border-bottom:none}

/* ─── COMPANY PROFILE ─── */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.profile-img{width:100%;height:360px;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.profile-text .about-lead{font-family:var(--font-head);font-size:1.2rem;font-weight:700;color:var(--navy);line-height:1.5;margin-bottom:18px}
.profile-text p{font-size:.97rem;color:var(--txt-muted);line-height:1.85;margin-bottom:14px}
.profile-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.profile-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:50px;font-size:.8rem;font-weight:600;color:var(--royal);background:rgba(20,93,160,.07);border:1px solid rgba(20,93,160,.12)}
.profile-pill i{font-size:.72rem}

/* ─── VISION & MISSION ─── */
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.vm-card{padding:44px 40px;border-radius:var(--r-lg);position:relative;overflow:hidden}
.vm-card.vision{background:linear-gradient(135deg,var(--navy) 0%,var(--royal) 100%);color:var(--white)}
.vm-card.mission{background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-md)}
.vm-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:22px}
.vm-card.vision .vm-icon{background:rgba(255,255,255,.15);color:var(--gold)}
.vm-card.mission .vm-icon{background:rgba(20,93,160,.08);color:var(--royal)}
.vm-card h3{font-family:var(--font-head);font-size:1.25rem;font-weight:800;margin-bottom:14px}
.vm-card.vision h3{color:var(--white)}
.vm-card.mission h3{color:var(--navy)}
.vm-card p{font-size:.97rem;line-height:1.8}
.vm-card.vision p{color:rgba(255,255,255,.8)}
.vm-card.mission p{color:var(--txt-mid)}

/* ─── CORE VALUES ─── */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value-card{padding:36px 28px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);transition:all .4s var(--ease);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.value-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--royal),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.value-card:hover::before{transform:scaleX(1)}
.value-num{font-family:var(--font-num);font-size:3rem;font-weight:800;color:rgba(8,47,99,.06);line-height:1;margin-bottom:-8px}
.value-icon{width:52px;height:52px;border-radius:12px;background:rgba(20,93,160,.08);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--royal);margin-bottom:18px;transition:all .3s var(--ease)}
.value-card:hover .value-icon{background:var(--royal);color:var(--white)}
.value-card h3{font-family:var(--font-head);font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.value-card p{font-size:.88rem;color:var(--txt-muted);line-height:1.7}

/* ─── JOURNEY TIMELINE ─── */
.journey-timeline{position:relative;padding:20px 0}
.jt-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(to bottom,transparent,var(--gold) 10%,var(--gold) 90%,transparent);transform:translateX(-50%)}
.jt-item{display:flex;align-items:flex-start;gap:48px;margin-bottom:56px;position:relative}
.jt-item:last-child{margin-bottom:0}
.jt-item.left{flex-direction:row-reverse}
.jt-content{flex:1;padding:32px 36px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:all .4s var(--ease)}
.jt-item.left .jt-content{text-align:right}
.jt-content:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(212,175,55,.3)}
.jt-year{font-family:var(--font-num);font-size:2rem;font-weight:800;color:var(--gold);line-height:1;margin-bottom:8px}
.jt-content h3{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.jt-content p{font-size:.88rem;color:var(--txt-muted);line-height:1.7}
.jt-dot{position:absolute;top:32px;left:50%;transform:translateX(-50%);width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--royal));border:4px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--gold);z-index:2;box-shadow:0 0 0 6px rgba(212,175,55,.1);transition:all .4s var(--ease)}
.jt-item:hover .jt-dot{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--navy-dark);transform:translateX(-50%) scale(1.1)}
.jt-spacer{flex:1}

/* ─── LEADERSHIP CARDS ─── */
.team-section-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.leader-card{display:flex;gap:24px;padding:36px 32px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);transition:all .4s var(--ease)}
.leader-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(20,93,160,.12)}
.leader-photo{width:90px;height:90px;border-radius:50%;object-fit:cover;object-position:center top;flex-shrink:0;border:3px solid var(--gold);box-shadow:0 4px 16px rgba(212,175,55,.2)}
.leader-info{flex:1}
.leader-role{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:6px}
.leader-name{font-family:var(--font-head);font-size:1.15rem;font-weight:800;color:var(--navy);margin-bottom:8px}
.leader-bio{font-size:.86rem;color:var(--txt-muted);line-height:1.7;margin-bottom:14px}
.leader-tags{display:flex;flex-wrap:wrap;gap:6px}
.leader-tag{font-size:.73rem;font-weight:600;padding:4px 12px;border-radius:50px;background:rgba(20,93,160,.07);color:var(--royal);border:1px solid rgba(20,93,160,.12)}


/* Management / Advisory grids */
.mgmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mgmt-card{text-align:center;padding:36px 24px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:all .4s var(--ease)}
.mgmt-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.mgmt-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center top;margin:0 auto 16px;border:3px solid var(--gold)}
.mgmt-role{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:6px}
.mgmt-name{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.mgmt-bio{font-size:.83rem;color:var(--txt-muted);line-height:1.65}

.advisory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.advisory-card{padding:36px 28px;background:var(--light);border:1px solid var(--border);border-radius:var(--r-lg);transition:all .4s var(--ease);position:relative;overflow:hidden}
.advisory-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--royal),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.advisory-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);background:var(--white)}
.advisory-card:hover::after{transform:scaleX(1)}
.advisory-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--royal),var(--navy));display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-size:1.2rem;font-weight:800;color:var(--white);margin-bottom:18px;border:2px solid rgba(212,175,55,.3)}
.advisory-card h3{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.advisory-title{font-size:.78rem;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.advisory-card p{font-size:.85rem;color:var(--txt-muted);line-height:1.65}

/* ─── WHY CHOOSE US ─── */
.why-about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.why-about-card{display:flex;gap:20px;padding:32px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:all .4s var(--ease)}
.why-about-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(20,93,160,.12)}
.why-about-icon{width:52px;height:52px;border-radius:12px;background:rgba(20,93,160,.07);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--royal);flex-shrink:0;transition:all .3s var(--ease)}
.why-about-card:hover .why-about-icon{background:var(--royal);color:var(--white)}
.why-about-text h3{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.why-about-text p{font-size:.88rem;color:var(--txt-muted);line-height:1.7}

/* ─── COMPETITIVE ADVANTAGES ─── */
.advantage-list{display:flex;flex-direction:column;gap:20px}
.advantage-item{display:flex;align-items:flex-start;gap:20px;padding:28px 32px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:all .4s var(--ease)}
.advantage-item:hover{transform:translateX(6px);box-shadow:var(--shadow-md);border-color:rgba(212,175,55,.3)}
.advantage-num{font-family:var(--font-num);font-size:2rem;font-weight:800;color:rgba(8,47,99,.07);line-height:1;min-width:48px}
.advantage-body h3{font-family:var(--font-head);font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.advantage-body p{font-size:.88rem;color:var(--txt-muted);line-height:1.7}
.advantage-icon{width:44px;height:44px;border-radius:10px;background:rgba(212,175,55,.1);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--gold);flex-shrink:0;margin-left:auto}

/* ─── METHODOLOGY ─── */
.methodology-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;padding-top:60px}
.methodology-steps::before{content:'';position:absolute;top:30px;left:calc(12.5% + 20px);right:calc(12.5% + 20px);height:2px;background:linear-gradient(90deg,var(--royal),var(--gold),var(--royal))}
.meth-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:0 16px;position:relative}
.meth-step-num{position:absolute;top:-52px;font-family:var(--font-num);font-size:.7rem;font-weight:700;color:var(--royal);letter-spacing:.1em;background:var(--light);padding:3px 10px;border-radius:50px;border:1px solid rgba(20,93,160,.15)}
.meth-icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--royal));display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--gold);box-shadow:0 6px 20px rgba(8,47,99,.25);z-index:1;transition:all .4s var(--ease)}
.meth-step:hover .meth-icon{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--navy-dark);transform:scale(1.1)}
.meth-step h3{font-family:var(--font-head);font-size:.92rem;font-weight:700;color:var(--navy)}
.meth-step p{font-size:.82rem;color:var(--txt-muted);line-height:1.6}

/* ─── MILESTONES ─── */
.milestone-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.milestone-card{text-align:center;padding:40px 20px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:all .4s var(--ease);position:relative;overflow:hidden}
.milestone-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--royal),var(--gold))}
.milestone-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.milestone-icon{font-size:1.8rem;color:var(--gold);margin-bottom:12px}
.milestone-count{font-family:var(--font-num);font-size:2.8rem;font-weight:800;color:var(--navy);line-height:1;margin-bottom:4px;display:inline}
.milestone-sfx{font-family:var(--font-num);font-size:1.8rem;font-weight:800;color:var(--gold)}
.milestone-label{font-size:.88rem;color:var(--txt-muted);font-weight:500;margin-top:6px}

/* ─── GALLERY ─── */
.gallery-grid{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:260px 260px;gap:16px}
.gallery-item{border-radius:var(--r-lg);overflow:hidden;position:relative}
.gallery-item.span-col{grid-row:span 2}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,29,63,.6) 0%,transparent 60%);opacity:0;transition:opacity .4s var(--ease);display:flex;align-items:flex-end;padding:24px}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-overlay span{font-family:var(--font-head);font-size:.9rem;font-weight:700;color:var(--white)}

/* ─── ABOUT RESPONSIVE ─── */
@media(max-width:1100px){
  .about-page-layout{grid-template-columns:1fr}
  .about-sidenav{display:none}
  .about-hero-content,.about-section{padding-left:28px;padding-right:28px}
  .profile-grid,.vm-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .team-section-grid{grid-template-columns:1fr}
  .mgmt-grid{grid-template-columns:repeat(2,1fr)}
  .advisory-grid{grid-template-columns:repeat(2,1fr)}
  .why-about-grid{grid-template-columns:1fr}
  .methodology-steps{grid-template-columns:repeat(2,1fr);padding-top:0}
  .methodology-steps::before{display:none}
  .meth-step-num{position:static;background:transparent}
  .milestone-row{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .gallery-item,.gallery-item.span-col{height:260px;grid-row:span 1}
}
@media(max-width:768px){
  .values-grid,.mgmt-grid,.advisory-grid,.milestone-row{grid-template-columns:1fr}
  .leader-card{flex-direction:column;align-items:center;text-align:center}
  .leader-tags{justify-content:center}
}

/* ═══════════════════════════════════════════════════════════
   PHASE 3 — SERVICE PAGES STYLES
   ═══════════════════════════════════════════════════════════ */

/* ─── SERVICE HUB — services.html ─── */
.svc-hub-hero{padding:140px 80px 100px;text-align:center;background:linear-gradient(160deg,var(--navy-dark) 0%,var(--navy) 55%,var(--royal) 100%);position:relative;overflow:hidden}
.svc-hub-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -20%,rgba(212,175,55,.18),transparent);pointer-events:none}
.svc-hub-hero h1{font-family:var(--font-head);font-size:clamp(2.4rem,4.5vw,3.8rem);font-weight:800;color:var(--white);letter-spacing:-.03em;line-height:1.15;margin-bottom:20px}
.svc-hub-hero p{font-size:1.1rem;color:rgba(255,255,255,.75);max-width:620px;margin:0 auto 36px;line-height:1.75}

.svc-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:80px}
.svc-hub-card{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:48px 36px 40px;background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:0;transition:all .45s var(--ease);cursor:pointer}
.svc-hub-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-xl);border-color:transparent}
.svc-hub-card-accent{position:absolute;top:0;left:0;right:0;height:5px;border-radius:var(--r-xl) var(--r-xl) 0 0;transition:height .35s var(--ease)}
.svc-hub-card:hover .svc-hub-card-accent{height:8px}
.svc-hub-icon-wrap{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:24px;transition:all .35s var(--ease)}
.svc-hub-card:hover .svc-hub-icon-wrap{transform:scale(1.08) rotate(-4deg)}
.svc-hub-card-num{font-family:var(--font-num);font-size:0.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-muted);margin-bottom:10px}
.svc-hub-card h2{font-family:var(--font-head);font-size:1.2rem;font-weight:800;color:var(--navy);line-height:1.3;margin-bottom:14px}
.svc-hub-card p{font-size:.88rem;color:var(--txt-muted);line-height:1.75;flex:1}
.svc-hub-card-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:.85rem;font-weight:700;color:var(--royal);transition:gap .25s var(--ease)}
.svc-hub-card:hover .svc-hub-card-link{gap:14px}
.svc-hub-card-link i{transition:transform .25s var(--ease)}
.svc-hub-card:hover .svc-hub-card-link i{transform:translateX(4px)}

/* ─── INDIVIDUAL SERVICE PAGE ─── */

/* Hero — unique per page via modifier classes */
.svc-hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;padding:120px 80px 80px}
.svc-hero-bg{position:absolute;inset:0;z-index:0}
.svc-hero-content{position:relative;z-index:2;max-width:680px}
.svc-hero-breadcrumb{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px}
.svc-hero-breadcrumb a{color:var(--gold);opacity:.9}
.svc-hero-breadcrumb i{font-size:.65rem}
.svc-hero-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border-radius:50px;border:1px solid rgba(212,175,55,.35);background:rgba(212,175,55,.08);color:var(--gold);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px}
.svc-hero-title{font-family:var(--font-head);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;color:var(--white);line-height:1.15;letter-spacing:-.03em;margin-bottom:20px}
.svc-hero-lead{font-size:1.05rem;color:rgba(255,255,255,.78);line-height:1.8;max-width:560px;margin-bottom:36px}
.svc-hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.svc-hero-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:0;border-top:1px solid rgba(255,255,255,.1);padding-top:36px;max-width:500px}
.svc-hero-stat{padding:0 24px 0 0;border-right:1px solid rgba(255,255,255,.12)}
.svc-hero-stat:first-child{padding-left:0}
.svc-hero-stat:last-child{border-right:none}
.svc-hero-stat-num{font-family:var(--font-num);font-size:1.8rem;font-weight:800;color:var(--gold);line-height:1}
.svc-hero-stat-sfx{font-family:var(--font-num);font-size:1.1rem;font-weight:800;color:var(--gold)}
.svc-hero-stat-label{font-size:.78rem;color:rgba(255,255,255,.55);margin-top:4px}

/* Hero visual (right side illustration) */
.svc-hero-visual{position:absolute;right:0;top:0;bottom:0;width:45%;z-index:1;display:flex;align-items:center;justify-content:center}

/* Establishment hero — blueprint grid */
.svc-hero--establishment .svc-hero-bg{background:linear-gradient(125deg,#021127 0%,#082F63 60%,#145DA0 100%)}
.svc-hero--establishment .svc-hero-bg::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(212,175,55,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.06) 1px,transparent 1px);background-size:40px 40px}

/* Regulatory hero — structured columns */
.svc-hero--regulatory .svc-hero-bg{background:linear-gradient(125deg,#0a1628 0%,#082F63 50%,#0c3d7a 100%)}
.svc-hero--regulatory .svc-hero-bg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(212,175,55,.04) 60px,rgba(212,175,55,.04) 61px),repeating-linear-gradient(90deg,transparent,transparent 120px,rgba(20,93,160,.08) 120px,rgba(20,93,160,.08) 121px)}

/* Accreditation hero — radiating star pattern */
.svc-hero--accreditation .svc-hero-bg{background:radial-gradient(ellipse at 30% 50%,#145DA0,#082F63 50%,#021127 100%)}
.svc-hero--accreditation .svc-hero-bg::after{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg at 80% 50%,transparent 0deg,rgba(212,175,55,.04) 30deg,transparent 60deg,rgba(212,175,55,.04) 90deg,transparent 120deg,rgba(212,175,55,.04) 150deg,transparent 180deg,rgba(212,175,55,.04) 210deg,transparent 240deg,rgba(212,175,55,.04) 270deg,transparent 300deg,rgba(212,175,55,.04) 330deg,transparent 360deg)}

/* Growth hero — diagonal lines */
.svc-hero--growth .svc-hero-bg{background:linear-gradient(135deg,#021127 0%,#082F63 40%,#0f5a8a 100%)}
.svc-hero--growth .svc-hero-bg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 30px,rgba(212,175,55,.05) 30px,rgba(212,175,55,.05) 31px)}

/* Career hero — dot matrix */
.svc-hero--career .svc-hero-bg{background:linear-gradient(150deg,#041D3F 0%,#082F63 45%,#1a4a7a 100%)}
.svc-hero--career .svc-hero-bg::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(212,175,55,.15) 1px,transparent 1px);background-size:28px 28px}

/* Strategic hero — hexagonal pattern */
.svc-hero--strategic .svc-hero-bg{background:linear-gradient(120deg,#021127 0%,#082F63 55%,#0e2d5a 100%)}
.svc-hero--strategic .svc-hero-bg::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 4 L52 18 L52 46 L28 60 L4 46 L4 18 Z' fill='none' stroke='rgba(212,175,55,0.06)' stroke-width='1'/%3E%3Cpath d='M28 52 L52 66 L52 94 L28 108 L4 94 L4 66 Z' fill='none' stroke='rgba(212,175,55,0.06)' stroke-width='1'/%3E%3C/svg%3E");background-size:56px 96px}

/* ─── SERVICE SECTIONS ─── */
.svc-section{padding:88px 80px;border-bottom:1px solid var(--border)}
.svc-section:last-of-type{border-bottom:none}
.svc-section--alt{background:var(--light)}
.svc-section--dark{background:linear-gradient(135deg,var(--navy-dark),var(--navy))}

/* Section Header */
.svc-s-head{margin-bottom:56px}
.svc-s-head.center{text-align:center}
.svc-s-head.center .svc-s-sub{margin:12px auto 0;max-width:620px}
.svc-s-tag{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--royal);background:rgba(20,93,160,.07);padding:6px 16px;border-radius:50px;border:1px solid rgba(20,93,160,.12);margin-bottom:14px}
.svc-s-title{font-family:var(--font-head);font-size:clamp(1.8rem,2.8vw,2.5rem);font-weight:800;color:var(--navy);letter-spacing:-.025em;line-height:1.2;margin-bottom:14px}
.svc-s-title.light{color:var(--white)}
.svc-s-sub{font-size:1rem;color:var(--txt-muted);line-height:1.8;max-width:560px}
.svc-s-sub.light{color:rgba(255,255,255,.7)}

/* ─── OVERVIEW SPLIT ─── */
.svc-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.svc-overview-grid.reverse{direction:rtl}
.svc-overview-grid.reverse > *{direction:ltr}
.svc-overview-text p{font-size:.97rem;color:var(--txt-muted);line-height:1.85;margin-bottom:16px}
.svc-overview-text p:last-child{margin-bottom:0}
.svc-overview-text .svc-lead{font-family:var(--font-head);font-size:1.2rem;font-weight:700;color:var(--navy);line-height:1.5;margin-bottom:20px}
.svc-overview-visual{display:flex;align-items:center;justify-content:center}

/* SVG Illustration box */
.svc-illus-box{width:100%;max-width:460px;aspect-ratio:1 / 0.85;border-radius:var(--r-xl);position:relative;overflow:hidden;box-shadow:var(--shadow-xl)}

/* ─── BENEFITS ─── */
.svc-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-benefit-card{padding:36px 28px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:all .4s var(--ease);position:relative;overflow:hidden}
.svc-benefit-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.svc-benefit-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc-benefit-card:hover::after{transform:scaleX(1)}
.svc-benefit-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:20px;transition:all .3s var(--ease)}
.svc-benefit-card:hover .svc-benefit-icon{transform:scale(1.08)}
.svc-benefit-card h3{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.svc-benefit-card p{font-size:.87rem;color:var(--txt-muted);line-height:1.72}

/* ─── PROCESS TIMELINE ─── */
.svc-process-wrap{display:flex;flex-direction:column;gap:0;position:relative}
.svc-process-wrap::before{content:'';position:absolute;left:40px;top:24px;bottom:24px;width:2px;background:linear-gradient(to bottom,var(--gold),var(--royal))}
.svc-process-item{display:flex;gap:40px;align-items:flex-start;padding:32px 0;position:relative}
.svc-process-item:not(:last-child){border-bottom:1px dashed rgba(8,47,99,.06)}
.svc-process-dot{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:3px solid var(--gold);background:var(--white);box-shadow:0 0 0 8px rgba(212,175,55,.07),var(--shadow-sm);z-index:1;transition:all .4s var(--ease)}
.svc-process-item:hover .svc-process-dot{background:linear-gradient(135deg,var(--navy),var(--royal));border-color:var(--gold)}
.svc-process-dot-inner{display:flex;flex-direction:column;align-items:center;gap:2px}
.svc-process-dot-num{font-family:var(--font-num);font-size:.65rem;font-weight:800;color:var(--txt-muted);letter-spacing:.06em}
.svc-process-dot i{font-size:1.1rem;color:var(--royal);transition:color .35s var(--ease)}
.svc-process-item:hover .svc-process-dot i{color:var(--gold)}
.svc-process-content{flex:1;padding-top:12px}
.svc-process-phase{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:8px}
.svc-process-content h3{font-family:var(--font-head);font-size:1.15rem;font-weight:800;color:var(--navy);margin-bottom:10px}
.svc-process-content p{font-size:.9rem;color:var(--txt-muted);line-height:1.75}
.svc-process-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.svc-process-tag{font-size:.75rem;font-weight:600;padding:5px 14px;border-radius:50px;background:rgba(20,93,160,.07);color:var(--royal);border:1px solid rgba(20,93,160,.1)}

/* Alternative horizontal process (for variety) */
.svc-process-h{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;padding-top:80px}
.svc-process-h::before{content:'';position:absolute;top:34px;left:calc(10% + 16px);right:calc(10% + 16px);height:2px;background:linear-gradient(90deg,var(--gold),var(--royal),var(--gold))}
.svc-process-h-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:0 12px;position:relative}
.svc-process-h-dot{width:68px;height:68px;border-radius:50%;background:var(--white);border:3px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--royal);box-shadow:var(--shadow-sm);position:relative;z-index:1;transition:all .4s var(--ease)}
.svc-process-h-step:hover .svc-process-h-dot{background:linear-gradient(135deg,var(--navy),var(--royal));color:var(--gold);border-color:var(--gold);transform:scale(1.1);box-shadow:var(--shadow-lg)}
.svc-process-h-num{position:absolute;top:-56px;font-family:var(--font-num);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--royal);background:var(--light);padding:4px 12px;border-radius:50px;border:1px solid rgba(20,93,160,.12);white-space:nowrap}
.svc-process-h-step h3{font-family:var(--font-head);font-size:.9rem;font-weight:700;color:var(--navy)}
.svc-process-h-step p{font-size:.8rem;color:var(--txt-muted);line-height:1.6}

/* ─── INDUSTRIES SERVED ─── */
.svc-industries-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc-industry-pill{display:flex;align-items:center;gap:14px;padding:20px 24px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);transition:all .35s var(--ease);cursor:default}
.svc-industry-pill:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(20,93,160,.12)}
.svc-industry-pill-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;background:rgba(20,93,160,.07);color:var(--royal);transition:all .3s var(--ease)}
.svc-industry-pill:hover .svc-industry-pill-icon{background:var(--navy);color:var(--gold)}
.svc-industry-pill-label{font-family:var(--font-head);font-size:.9rem;font-weight:700;color:var(--navy);line-height:1.2}
.svc-industry-pill-sub{font-size:.75rem;color:var(--txt-muted);margin-top:2px}

/* ─── FAQ ─── */
.svc-faq-list{display:flex;flex-direction:column;gap:12px}
.svc-faq-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:box-shadow .3s var(--ease)}
.svc-faq-item.open{box-shadow:var(--shadow-md);border-color:rgba(20,93,160,.15)}
.svc-faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 28px;cursor:pointer;user-select:none}
.svc-faq-q h3{font-family:var(--font-head);font-size:.97rem;font-weight:700;color:var(--navy);line-height:1.4}
.svc-faq-icon{width:32px;height:32px;border-radius:50%;background:rgba(20,93,160,.07);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--royal);flex-shrink:0;transition:all .3s var(--ease)}
.svc-faq-item.open .svc-faq-icon{background:var(--royal);color:var(--white);transform:rotate(45deg)}
.svc-faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .3s var(--ease)}
.svc-faq-a p{padding:0 28px 22px;font-size:.9rem;color:var(--txt-muted);line-height:1.8}
.svc-faq-item.open .svc-faq-a{max-height:500px}

/* ─── RELATED SERVICES ─── */
.svc-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-related-card{padding:32px 28px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:all .4s var(--ease);display:flex;flex-direction:column;gap:12px}
.svc-related-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(20,93,160,.1)}
.svc-related-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.svc-related-card h3{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--navy)}
.svc-related-card p{font-size:.85rem;color:var(--txt-muted);line-height:1.7;flex:1}
.svc-related-link{display:inline-flex;align-items:center;gap:6px;font-size:.83rem;font-weight:700;transition:gap .2s var(--ease)}
.svc-related-card:hover .svc-related-link{gap:12px}

/* ─── SERVICE CTA STRIP ─── */
.svc-cta-strip{padding:80px;background:linear-gradient(135deg,var(--navy-dark),var(--navy));display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.svc-cta-strip-text h2{font-family:var(--font-head);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:800;color:var(--white);letter-spacing:-.02em;margin-bottom:10px}
.svc-cta-strip-text p{font-size:.97rem;color:rgba(255,255,255,.7);line-height:1.75;max-width:500px}
.svc-cta-strip-actions{display:flex;gap:14px;flex-shrink:0;flex-wrap:wrap}

/* ─── UNIQUE ILLUSTRATION COMPONENTS ─── */

/* Animated diagram — Concentric rings */
.svc-ring-diagram{width:340px;height:340px;position:relative;display:flex;align-items:center;justify-content:center;margin:0 auto}
.svc-ring{position:absolute;border-radius:50%;border:2px solid;animation:svc-ring-pulse 3s ease-in-out infinite}
.svc-ring:nth-child(1){width:100%;height:100%;border-color:rgba(212,175,55,.12);animation-delay:0s}
.svc-ring:nth-child(2){width:78%;height:78%;border-color:rgba(20,93,160,.2);animation-delay:.5s}
.svc-ring:nth-child(3){width:56%;height:56%;border-color:rgba(212,175,55,.3);animation-delay:1s}
.svc-ring:nth-child(4){width:34%;height:34%;background:linear-gradient(135deg,var(--navy),var(--royal));border-color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--gold)}
@keyframes svc-ring-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:.7}}

/* Orbit dots around ring diagram */
.svc-orbit-dot{position:absolute;width:36px;height:36px;border-radius:50%;background:var(--white);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--royal);box-shadow:var(--shadow-sm)}

/* Animated stat card strip */
.svc-stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.svc-stat-item{padding:36px 28px;background:var(--white);text-align:center;border-right:1px solid var(--border);transition:all .35s var(--ease)}
.svc-stat-item:last-child{border-right:none}
.svc-stat-item:hover{background:var(--navy);transform:none}
.svc-stat-item:hover .svc-stat-num,.svc-stat-item:hover .svc-stat-sfx{color:var(--gold)}
.svc-stat-item:hover .svc-stat-label{color:rgba(255,255,255,.65)}
.svc-stat-num{font-family:var(--font-num);font-size:2.4rem;font-weight:800;color:var(--navy);line-height:1;transition:color .35s}
.svc-stat-sfx{font-family:var(--font-num);font-size:1.5rem;font-weight:800;color:var(--gold);transition:color .35s}
.svc-stat-label{font-size:.82rem;color:var(--txt-muted);margin-top:8px;transition:color .35s}

/* Checklist (for detailed deliverables) */
.svc-checklist{display:flex;flex-direction:column;gap:12px}
.svc-check-item{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);transition:all .3s var(--ease)}
.svc-check-item:hover{border-color:rgba(20,93,160,.12);box-shadow:var(--shadow-sm)}
.svc-check-icon{width:28px;height:28px;border-radius:50%;background:rgba(20,93,160,.08);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--royal);flex-shrink:0;margin-top:1px}
.svc-check-text h4{font-family:var(--font-head);font-size:.92rem;font-weight:700;color:var(--navy);margin-bottom:3px}
.svc-check-text p{font-size:.83rem;color:var(--txt-muted);line-height:1.6}

/* Animated progress bars (Accreditation) */
.svc-progress-list{display:flex;flex-direction:column;gap:18px}
.svc-progress-item h4{font-family:var(--font-head);font-size:.9rem;font-weight:700;color:var(--navy);margin-bottom:8px;display:flex;justify-content:space-between}
.svc-progress-item h4 span{color:var(--gold)}
.svc-progress-bar-bg{height:8px;background:rgba(20,93,160,.08);border-radius:50px;overflow:hidden}
.svc-progress-bar{height:100%;border-radius:50px;background:linear-gradient(90deg,var(--royal),var(--gold));transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
.svc-progress-bar.animate{transform:scaleX(1)}

/* Card grid with numbered steps (growth) */
.svc-numbered-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.svc-numbered-card{display:flex;gap:20px;padding:28px 24px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);transition:all .4s var(--ease)}
.svc-numbered-card:hover{transform:translateX(6px);box-shadow:var(--shadow-md);border-color:rgba(212,175,55,.25)}
.svc-nc-num{font-family:var(--font-num);font-size:2.5rem;font-weight:800;color:rgba(8,47,99,.07);line-height:1;min-width:44px}
.svc-nc-body h3{font-family:var(--font-head);font-size:.97rem;font-weight:700;color:var(--navy);margin-bottom:7px}
.svc-nc-body p{font-size:.85rem;color:var(--txt-muted);line-height:1.7}

/* ─── SERVICE PAGE RESPONSIVE ─── */
@media(max-width:1100px){
  .svc-hub-grid{grid-template-columns:repeat(2,1fr);padding:48px}
  .svc-hero{padding:100px 32px 64px;min-height:auto}
  .svc-hero-visual{display:none}
  .svc-section{padding:64px 32px}
  .svc-overview-grid{grid-template-columns:1fr;gap:40px}
  .svc-benefits-grid{grid-template-columns:repeat(2,1fr)}
  .svc-industries-grid{grid-template-columns:repeat(2,1fr)}
  .svc-process-h{grid-template-columns:repeat(3,1fr);padding-top:0}
  .svc-process-h::before{display:none}
  .svc-process-h-num{position:static;margin-bottom:8px;background:transparent}
  .svc-stat-strip{grid-template-columns:repeat(2,1fr)}
  .svc-stat-item:nth-child(2){border-right:none}
  .svc-stat-item:nth-child(3){border-top:1px solid var(--border)}
  .svc-related-grid{grid-template-columns:repeat(2,1fr)}
  .svc-cta-strip{padding:48px 32px;flex-direction:column}
}
@media(max-width:768px){
  .svc-hub-grid{grid-template-columns:1fr;padding:28px}
  .svc-benefits-grid{grid-template-columns:1fr}
  .svc-industries-grid{grid-template-columns:repeat(2,1fr)}
  .svc-stat-strip{grid-template-columns:1fr}
  .svc-stat-item{border-right:none;border-bottom:1px solid var(--border)}
  .svc-stat-item:last-child{border-bottom:none}
  .svc-related-grid{grid-template-columns:1fr}
  .svc-numbered-grid{grid-template-columns:1fr}
  .svc-process-h{grid-template-columns:1fr}
  .svc-hub-hero{padding:100px 28px 72px}
}

/* ═══════════════════════════════════════════════════════════
   PHASE 4 — COMPARISON TABLES & SPECIAL WORKFLOWS
   ═══════════════════════════════════════════════════════════ */
.comp-table-wrap{width:100%;overflow-x:auto;margin:32px 0;border-radius:var(--r-lg);box-shadow:var(--shadow-md);border:1px solid var(--border)}
.comp-table{width:100%;border-collapse:collapse;text-align:left;background:var(--white);font-size:.9rem}
.comp-table th{background:var(--navy-dark);color:var(--white);font-family:var(--font-head);font-weight:700;padding:18px 24px;border-bottom:3px solid var(--gold)}
.comp-table td{padding:16px 24px;border-bottom:1px solid var(--border);color:var(--txt-mid)}
.comp-table tr:last-child td{border-bottom:none}
.comp-table tr:nth-child(even){background:rgba(8, 47, 99, 0.02)}
.comp-table tr:hover{background:rgba(212, 175, 55, 0.05)}
.comp-highlight{font-weight:700;color:var(--navy)}
.comp-check{color:green;font-size:1.1rem}
.comp-cross{color:#e11d48;font-size:1.1rem}

/* Step-by-step consultancy workflow */
.consultancy-workflow{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;margin-top:40px}
.workflow-step{background:var(--white);padding:32px 24px;border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm);position:relative;transition:all .35s var(--ease)}
.workflow-step:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.workflow-step-num{position:absolute;top:-20px;left:24px;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg, var(--navy), var(--royal));color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-weight:800;font-size:1.1rem;box-shadow:var(--shadow-sm);border:2px solid var(--white)}
.workflow-step h3{font-family:var(--font-head);font-size:1.1rem;font-weight:800;color:var(--navy);margin-top:10px;margin-bottom:12px}
.workflow-step p{font-size:.85rem;color:var(--txt-muted);line-height:1.6}

/* Timeline animations/styles for subservices */
.sub-timeline{position:relative;padding-left:36px;margin:24px 0}
.sub-timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--border)}
.sub-timeline-item{position:relative;margin-bottom:28px}
.sub-timeline-item::before{content:'';position:absolute;left:-32px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--white);box-shadow:0 0 0 4px rgba(212,175,55,.15);transition:all .3s}
.sub-timeline-item:hover::before{background:var(--royal);box-shadow:0 0 0 6px rgba(20,93,160,.25)}
.sub-timeline-title{font-family:var(--font-head);font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.sub-timeline-desc{font-size:.85rem;color:var(--txt-muted);line-height:1.6}

@media(max-width:992px){
  .consultancy-workflow{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:576px){
  .consultancy-workflow{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   PHASE 5 — PORTFOLIO, BEFORE/AFTER & CASE STUDY DESIGNS
   ═══════════════════════════════════════════════════════════ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.project-card-large {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all 0.4s var(--ease);
  display: flex;
  flex-direction: column;
}
.project-card-large:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--gold);
}
.project-card-img {
  width: 100%;
  height: 240px;
  background: linear-gradient(135deg, var(--navy-dark), var(--royal));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-card-img svg {
  opacity: 0.8;
  transition: transform 0.4s var(--ease);
}
.project-card-large:hover .project-card-img svg {
  transform: scale(1.08) rotate(2deg);
}
.project-card-content {
  padding: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-card-tag {
  display: inline-flex;
  padding: 6px 14px;
  background: rgba(20, 93, 160, 0.08);
  color: var(--royal);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: flex-start;
}
.project-card-large h3 {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.3;
}
.project-card-large p {
  font-size: 0.9rem;
  color: var(--txt-muted);
  line-height: 1.7;
  margin-bottom: 24px;
  flex: 1;
}
.project-card-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.project-card-stat-num {
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
}
.project-card-stat-lbl {
  font-size: 0.75rem;
  color: var(--txt-muted);
  margin-top: 2px;
}

/* Before / After comparisons */
.ba-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 32px 0;
}
.ba-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ba-card--before {
  border-left: 4px solid #e11d48;
}
.ba-card--after {
  border-left: 4px solid #10b981;
  background: linear-gradient(to bottom right, var(--white), rgba(16, 185, 129, 0.02));
}
.ba-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ba-card--before .ba-badge {
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
}
.ba-card--after .ba-badge {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}
.ba-card h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 20px;
}
.ba-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ba-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--txt-mid);
}
.ba-item i {
  margin-top: 3px;
}
.ba-card--before .ba-item i {
  color: #e11d48;
}
.ba-card--after .ba-item i {
  color: #10b981;
}

/* Image gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, var(--navy), var(--royal));
}
.gallery-item-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 47, 99, 0.8), transparent);
  opacity: 0.8;
  transition: opacity 0.3s;
}
.gallery-item:hover .gallery-item-veil {
  opacity: 0.95;
}
.gallery-item-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: var(--white);
  z-index: 2;
}
.gallery-item-text h4 {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.gallery-item-text p {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

@media(max-width:992px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .ba-container {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width:576px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}