/* =========================================================
   TRISTAN HOLDING — MODERN DESIGN SYSTEM v2
   ========================================================= */

/* ─── CSS VARIABLES ─── */
:root {
  /* Brand */
  --th-primary: #3B4DAA;
  --th-primary-dark: #2E3A87;
  --th-primary-light: #E8EDFF;
  --th-primary-50: #F0F3FF;
  --th-accent: #4B61C8;

  /* Text */
  --th-text: #0F172A;
  --th-text-secondary: #334155;
  --th-text-muted: #64748B;
  --th-text-light: #94A3B8;

  /* Backgrounds */
  --th-bg: #FFFFFF;
  --th-bg-subtle: #F8FAFC;
  --th-bg-muted: #F1F5F9;
  --th-bg-dark: #0F172A;
  --th-bg-dark-soft: #1E293B;
  --th-bg-dark-muted: #334155;

  /* Borders */
  --th-border: #E2E8F0;
  --th-border-light: #F1F5F9;

  /* Status */
  --th-success: #10B981;
  --th-warning: #F59E0B;
  --th-error: #EF4444;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.10);
  --shadow-glow: 0 0 20px rgba(59, 77, 170, 0.15);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Spacing (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Legacy vars for backward compat */
  --div-construction: #f59e0b;
  --div-technologies: #06b6d4;
  --div-hospitality: #e11d48;
  --div-logistics: #4f46e5;
  --div-finance: #10b981;
  --div-legal: #475569;
  --div-healthcare: #0ea5e9;
  --div-investment: #7c3aed;
  --header-bg: #ffffff;
}

/* ─── BASE RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--th-text);
  background: var(--th-bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ─── TYPOGRAPHY SCALE ─── */
.th-h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--th-text);
}

.th-h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--th-text);
}

.th-h3 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--th-text);
}

.th-h4 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--th-text);
}

.th-body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--th-text-secondary);
}

.th-body-sm {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--th-text-muted);
}

.th-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-primary);
}

/* ─── CONTAINER ─── */
.th-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

@media (min-width: 768px) {
  .th-container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .th-container {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
}

/* Fluid full-width container */
.th-container-fluid {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

@media (min-width: 768px) {
  .th-container-fluid {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
}

@media (min-width: 1280px) {
  .th-container-fluid {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }
}

@media (min-width: 1536px) {
  .th-container-fluid {
    padding-left: var(--space-24);
    padding-right: var(--space-24);
  }
}

/* ─── BUTTONS ─── */
.th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.th-btn-primary {
  background: var(--th-primary);
  color: #fff;
  border-color: var(--th-primary);
  box-shadow: var(--shadow-md);
}

.th-btn-primary:hover {
  background: var(--th-primary-dark);
  border-color: var(--th-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.th-btn-outline {
  background: transparent;
  color: var(--th-primary);
  border-color: var(--th-border);
}

.th-btn-outline:hover {
  background: var(--th-primary-50);
  border-color: var(--th-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.th-btn-light {
  background: #fff;
  color: var(--th-primary);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.th-btn-light:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.th-btn-ghost {
  background: transparent;
  color: var(--th-text-secondary);
  border-color: transparent;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.th-btn-ghost:hover {
  color: var(--th-primary);
}

.th-btn-sm {
  padding: 10px 20px;
  font-size: 0.875rem;
}

.th-btn-lg {
  padding: 18px 36px;
  font-size: 1rem;
}

/* ─── CARDS ─── */
.th-card {
  background: var(--th-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--th-border);
  padding: var(--space-6);
  transition: all var(--transition-base);
  height: 100%;
}

.th-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.th-card-gradient {
  background: linear-gradient(135deg, var(--th-primary-dark), var(--th-primary));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  overflow: hidden;
  position: relative;
}

.th-card-gradient::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.th-card-dark {
  background: var(--th-bg-dark-soft);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all var(--transition-base);
}

.th-card-dark:hover {
  background: var(--th-bg-dark-muted);
  transform: translateY(-4px);
}

/* ─── BADGES ─── */
.th-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--th-primary-50);
  color: var(--th-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-full);
}

.th-badge-light {
  background: rgba(255,255,255,0.12);
  color: #fff;
  backdrop-filter: blur(4px);
}

/* ─── GLASS EFFECT ─── */
.th-glass {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ─── SECTIONS ─── */
.th-section {
  position: relative;
  width: 100%;
}

.th-section-dark {
  background: var(--th-bg-dark);
  color: #fff;
}

.th-section-subtle {
  background: var(--th-bg-subtle);
}

.th-section-muted {
  background: var(--th-bg-muted);
}

/* ─── SPACING UTILITIES ─── */
.th-py-xl { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.th-py-lg { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.th-py-md { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.th-py-sm { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.th-py-xs { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.th-mb-1 { margin-bottom: var(--space-1); }
.th-mb-2 { margin-bottom: var(--space-2); }
.th-mb-3 { margin-bottom: var(--space-3); }
.th-mb-4 { margin-bottom: var(--space-4); }
.th-mb-6 { margin-bottom: var(--space-6); }
.th-mb-8 { margin-bottom: var(--space-8); }
.th-mb-10 { margin-bottom: var(--space-10); }
.th-mb-12 { margin-bottom: var(--space-12); }

/* ─── GRID ─── */
.th-grid {
  display: grid;
  gap: var(--space-6);
}

.th-grid-2 { grid-template-columns: repeat(2, 1fr); }
.th-grid-3 { grid-template-columns: repeat(3, 1fr); }
.th-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 991px) {
  .th-grid-3, .th-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .th-grid-2, .th-grid-3, .th-grid-4 { grid-template-columns: 1fr; }
}

/* ─── FORMS ─── */
.th-input {
  width: 100%;
  padding: 14px 18px;
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  color: var(--th-text);
  background: var(--th-bg);
  border: 1.5px solid var(--th-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  outline: none;
}

.th-input:hover {
  border-color: #CBD5E1;
}

.th-input:focus {
  border-color: var(--th-primary);
  box-shadow: 0 0 0 4px rgba(59, 77, 170, 0.10);
}

.th-input::placeholder {
  color: var(--th-text-light);
}

.th-form-group {
  margin-bottom: var(--space-5);
}

.th-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--th-text-secondary);
  margin-bottom: var(--space-2);
}

/* ─── DIVIDERS ─── */
.th-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--th-border), transparent);
  margin: var(--space-8) 0;
}

.th-divider-light {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  margin: var(--space-8) 0;
}

/* ─── IMAGE UTILITIES ─── */
.th-img-rounded { border-radius: var(--radius-lg); }
.th-img-xl { border-radius: var(--radius-xl); }
.th-img-cover { width: 100%; height: 100%; object-fit: cover; }

/* ─── ICON BOXES ─── */
.th-icon-box {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--th-primary-dark), var(--th-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}

.th-icon-box-light {
  background: var(--th-primary-50);
  color: var(--th-primary);
}

.th-icon-box-xl {
  width: 72px;
  height: 72px;
  font-size: 1.5rem;
  border-radius: var(--radius-lg);
}

/* ─── ANIMATIONS ─── */
@keyframes thFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes thFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes thSlideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes thPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes thFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.th-animate {
  opacity: 0;
}

.th-animate.visible {
  animation: thFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.th-delay-1 { animation-delay: 0.1s; }
.th-delay-2 { animation-delay: 0.2s; }
.th-delay-3 { animation-delay: 0.3s; }
.th-delay-4 { animation-delay: 0.4s; }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--th-bg-subtle);
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--th-text-light);
}

/* ─── SELECTION ─── */
::selection {
  background: var(--th-primary-light);
  color: var(--th-primary-dark);
}

/* =========================================================
   LEGACY / BACKWARD COMPATIBILITY STYLES
   ========================================================= */

/* Typography & Base */
.candidate-portal-body {
  background: #f4f7fb;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  line-height: 1.2;
}

.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

/* Navbar Base */
#mainNav {
  transition: box-shadow .3s, background .3s, height .3s;
  padding: .75rem 0;
}

#mainNav .nav-link {
  font-weight: 500;
  padding: .5rem .85rem;
  transition: color .2s;
}

#mainNav .nav-link:hover,
#mainNav .nav-link.active {
  color: var(--th-primary);
}

#mainNav .dropdown-menu {
  border: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
  border-radius: 12px;
  padding: .5rem;
  min-width: 600px;
}

#mainNav .dropdown-item {
  border-radius: 8px;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  transition: background .15s;
}

#mainNav .dropdown-item:hover {
  background: #f0f4ff;
  color: var(--th-primary);
}

/* Top Bar */
.top-bar a:hover {
  opacity: .85;
}

/* Hero */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="80" cy="20" r="40" fill="rgba(77,166,255,0.03)"/><circle cx="10" cy="80" r="30" fill="rgba(77,166,255,0.03)"/></svg>') no-repeat;
  background-size: cover;
  pointer-events: none;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-bounce {
  animation: bounce 2s infinite;
}

/* Sector Cards */
.sector-card {
  transition: transform .3s, box-shadow .3s;
}

.sector-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .12) !important;
}

/* Quill Content */
.quill-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #2c3e50;
}

.quill-content h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--th-text);
  margin-top: 2rem;
}

.quill-content h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--th-text);
  margin-top: 1.8rem;
}

.quill-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--th-primary);
  margin-top: 1.5rem;
}

.quill-content p {
  margin-bottom: 1.2rem;
}

.quill-content ul, .quill-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.2rem;
}

.quill-content li {
  margin-bottom: .4rem;
}

.quill-content a {
  color: var(--th-primary);
  font-weight: 600;
}

.quill-content a:hover {
  color: var(--th-primary-dark);
}

.quill-content blockquote {
  border-left: 4px solid var(--th-primary);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: #f0f4ff;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #555;
}

.quill-content pre {
  background: #1a2942;
  color: #e0e0e0;
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
}

.quill-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: 1rem 0;
}

/* Page Hero */
.page-hero {
  padding: 80px 0;
}

.page-hero nav a {
  text-decoration: none;
}

/* Cards */
.card {
  transition: box-shadow .2s;
}

/* Footer */
.footer-main {
  font-size: .9rem;
}

/* Candidate Portal */
.candidate-auth-section {
  padding: 80px 0;
  background: radial-gradient(circle at top left, rgba(77, 166, 255, .14), transparent 35%), linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%);
}

.candidate-auth-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 24px;
  background: #fff;
}

.candidate-auth-intro h1 {
  color: var(--th-text);
  font-weight: 800;
  margin-bottom: .5rem;
}

.auth-badge {
  background: #e8f0fe;
  color: var(--th-primary);
  margin-bottom: 1rem;
}

.candidate-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.candidate-sidebar {
  background: linear-gradient(180deg, var(--th-primary-dark), var(--th-primary));
  color: #fff;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.candidate-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.candidate-brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.candidate-brand-title {
  font-weight: 800;
}

.candidate-brand-subtitle {
  color: #9ab4d6;
  font-size: .85rem;
}

.candidate-nav {
  display: grid;
  gap: .35rem;
}

.candidate-nav-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  color: #dce9f7;
  text-decoration: none;
}

.candidate-nav-link:hover,
.candidate-nav-link.active {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.candidate-sidebar-footer {
  margin-top: auto;
}

.candidate-main {
  padding: 1.5rem;
}

.candidate-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.candidate-topbar-label {
  color: #68778d;
  font-size: .85rem;
}

.candidate-page-title {
  margin: 0;
  color: var(--th-text);
  font-size: 2rem;
  font-weight: 800;
}

.candidate-summary-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border-radius: 999px;
  padding: .7rem 1rem;
  box-shadow: 0 10px 24px rgba(17, 37, 68, .08);
  color: var(--th-primary);
  font-weight: 700;
}

.portal-stat-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.25rem;
  box-shadow: 0 10px 24px rgba(17, 37, 68, .08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portal-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--th-text);
}

.portal-stat-label {
  color: #68778d;
}

.portal-stat-icon {
  font-size: 1.8rem;
  color: var(--th-primary);
}

.portal-timeline,
.portal-history {
  list-style: none;
  padding: 0;
  margin: 0;
}

.portal-timeline li,
.portal-history li {
  padding: 1rem 0;
  border-bottom: 1px solid #eef2f7;
}

.portal-timeline li.is-complete span {
  color: var(--th-text);
  font-weight: 700;
}

.portal-timeline li small,
.portal-history li .small {
  display: block;
  color: #68778d;
}

/* Toasts */
.site-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1200;
  display: grid;
  gap: .75rem;
}

.site-toast {
  min-width: 280px;
  max-width: 360px;
  background: var(--th-primary);
  color: #fff;
  border-radius: 16px;
  padding: 1rem 1.1rem;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .2);
  transform: translateY(-8px);
  opacity: 0;
  transition: all .25s ease;
}

.site-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.site-toast-success { border-left: 4px solid #28a745; }
.site-toast-error { border-left: 4px solid #dc3545; }
.site-toast-message { font-weight: 700; }
.site-toast-details { margin-top: .45rem; font-size: .9rem; color: #c1d4f2; }

/* Service and landing pages */
.service-hero {
  position: relative;
  overflow: hidden;
}

.service-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, .12), transparent 30%), radial-gradient(circle at bottom left, rgba(255, 255, 255, .08), transparent 24%);
  pointer-events: none;
}

.service-hero-blue {
  background: linear-gradient(135deg, #0a1628, var(--th-primary) 55%, #0d5c8a);
}

.service-hero-slate {
  background: linear-gradient(135deg, #16263f, #27486f 58%, #376f8e);
}

.service-hero-warm {
  background: linear-gradient(135deg, #33211a, #7a4027 58%, #c86b2f);
}

.service-kicker {
  display: inline-block;
  margin-bottom: .9rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.service-title {
  max-width: 760px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 1rem;
}

.service-subtitle {
  max-width: 720px;
  font-size: 1.05rem;
}

.service-panel {
  padding: 1.5rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.service-panel-stat {
  color: #ffd28a;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}

.service-card {
  height: 100%;
  padding: 1.35rem 1.4rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e9eef5;
  box-shadow: 0 16px 40px rgba(15, 42, 85, .06);
}

.service-card h3, .service-card h4, .service-step-card h5 {
  color: var(--th-text);
  font-weight: 700;
}

.service-card p, .service-step-card p, .service-mini-card p {
  color: #66758a;
}

.service-mini-card {
  padding: 1.25rem;
  border-radius: 18px;
  background: #f7faff;
  border: 1px solid #e7eef9;
}

.service-mini-card i {
  color: var(--th-primary);
}

.service-step-card {
  position: relative;
  padding: 1.25rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e8edf5;
  box-shadow: 0 14px 30px rgba(15, 42, 85, .05);
}

.service-step-number {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .9rem;
  border-radius: 12px;
  background: #e8f0fe;
  color: var(--th-primary);
  font-weight: 800;
}

.service-list {
  padding-left: 1.2rem;
  color: #5f6f84;
}

.service-list li+li { margin-top: .6rem; }

/* Back to Top */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 92px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--th-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  z-index: 999;
  cursor: pointer;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  transform: scale(1.1);
  background: var(--th-primary-dark);
}

/* Floating WhatsApp button */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
  z-index: 1050;
  transition: transform .2s ease, box-shadow .2s ease;
}

.wa-float:hover, .wa-float:focus {
  transform: scale(1.12);
  box-shadow: 0 6px 28px rgba(37, 211, 102, .55);
  color: #fff;
}

.wa-float svg {
  display: block;
  width: 28px;
  height: 28px;
}

/* Timeline */
.timeline-track .d-flex:last-child>.flex-shrink-0>div+div { display: none; }

/* Form Controls Legacy */
.form-control, .form-select {
  border-radius: var(--radius-md);
  border-color: var(--th-border);
  padding: .75rem 1rem;
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
}

.form-control:focus, .form-select:focus {
  border-color: var(--th-primary);
  box-shadow: 0 0 0 .2rem rgba(59, 77, 170, .12);
}

/* Sections */
section { position: relative; }

/* Utilities */
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.rounded-4 { border-radius: 1rem !important; }
.rounded-3 { border-radius: .75rem !important; }
.shadow { box-shadow: 0 4px 20px rgba(0, 0, 0, .08) !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }

/* Division & Service Cards With Images */
.division-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.division-card:hover .division-card-image img { transform: scale(1.08); }
.division-card-image img { transition: transform 0.5s ease; }
.division-card-icon { transition: all 0.3s ease; }
.division-card:hover .division-card-icon { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }

.service-card-image { position: relative; overflow: hidden; }
.service-card-image img { transition: transform 0.5s ease; }
.service-card:hover .service-card-image img { transform: scale(1.08); }

.card-image-wrapper { position: relative; overflow: hidden; }
.card-image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-image-wrapper:hover::after { opacity: 1; }

/* Mobile */
@media (max-width: 768px) {
  .hero-section { min-height: 0; padding: 60px 0; }
  .page-hero { padding: 40px 0; }
  h1 { font-size: 1.75rem; }
  #mainNav { height: 70px !important; }
  .top-bar-compact { font-size: 0.75rem !important; }
  .top-bar-compact .container { padding-left: 10px; padding-right: 10px; }
  .header-logo { height: 55px !important; }
  #navbarMain {
    background: var(--th-bg);
    margin: 0 -15px;
    padding: 15px;
    border-top: 1px solid var(--th-border);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
  }
  .navbar-nav .nav-link {
    padding: 12px 10px !important;
    border-bottom: 1px solid var(--th-border-light);
    color: var(--th-text) !important;
  }
  footer { padding-bottom: 100px; overflow-wrap: anywhere; word-break: break-word; }
  footer .container { padding-left: 18px !important; padding-right: 18px !important; }
  footer h6 { letter-spacing: .08em !important; }
  footer a, footer li span, footer p { overflow-wrap: anywhere; word-break: break-word; }
  footer .d-grid .btn { white-space: normal; }
  .footer-logo { max-width: 130px; margin-bottom: 1.5rem; }
  .division-nav-float { display: none !important; }
  .candidate-shell { grid-template-columns: 1fr; }
  .candidate-sidebar { padding: 1rem; }
  .candidate-topbar { flex-direction: column; align-items: flex-start; }
  .th-py-xl { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .th-py-lg { padding-top: var(--space-12); padding-bottom: var(--space-12); }
}

@media (max-width: 480px) {
  .top-bar-left, .top-bar-right { font-size: 0.7rem !important; }
}

@media (max-width: 576px) {
  footer.footer-main { text-align: center; padding-bottom: 120px !important; }
  footer.footer-main .row { margin-left: 0; margin-right: 0; }
  footer.footer-main ul { display: inline-block; text-align: left; width: 100%; max-width: 260px; margin: 0 auto; }
  footer.footer-main .d-flex { justify-content: center; }
  footer.footer-main .row > div { margin-bottom: 2.5rem; padding-left: 15px; padding-right: 15px; }
  .footer-main .col-6 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
}

/* Safari fixes */
.fas, .fab, .far {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

/* Mega Menu Mobile Fix */
@media (max-width: 991px) {
  #mainNav .dropdown-menu {
    min-width: 0 !important;
    width: 100% !important;
    max-height: 400px;
    overflow-y: auto;
  }
}


/* ─── HOVER & ANIMATION UTILITIES ─── */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Shimmer loading effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.th-shimmer {
  background: linear-gradient(90deg, var(--th-bg-subtle) 25%, var(--th-bg) 50%, var(--th-bg-subtle) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Pulse glow effect */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 77, 170, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(59, 77, 170, 0); }
}

.th-pulse-glow {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/* Floating animation */
@keyframes thFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.th-float {
  animation: thFloat 4s ease-in-out infinite;
}

.th-float-delay-1 { animation-delay: 0.5s; }
.th-float-delay-2 { animation-delay: 1s; }
.th-float-delay-3 { animation-delay: 1.5s; }

/* Gradient text animation */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.th-gradient-text {
  background: linear-gradient(90deg, var(--th-primary), #6366F1, var(--th-primary));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease infinite;
}

/* Card hover glow */
.th-card-glow {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.th-card-glow:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(59, 77, 170, 0.1), 0 0 0 1px rgba(59, 77, 170, 0.05);
}

/* Magnetic button base */
.th-btn-magnetic {
  transition: transform 0.15s ease-out;
}

/* Rotate on hover */
.th-rotate-hover {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.th-rotate-hover:hover {
  transform: rotate(5deg) scale(1.05);
}

/* Scale on hover */
.th-scale-hover {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.th-scale-hover:hover {
  transform: scale(1.08);
}

/* Underline slide effect */
.th-underline-slide {
  position: relative;
  display: inline-block;
}

.th-underline-slide::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--th-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.th-underline-slide:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Reveal animation */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.th-reveal {
  animation: revealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.th-reveal-delay-1 { animation-delay: 0.1s; opacity: 0; }
.th-reveal-delay-2 { animation-delay: 0.2s; opacity: 0; }
.th-reveal-delay-3 { animation-delay: 0.3s; opacity: 0; }
.th-reveal-delay-4 { animation-delay: 0.4s; opacity: 0; }

/* Grid pattern background */
.th-grid-pattern {
  background-image:
    linear-gradient(rgba(59, 77, 170, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 77, 170, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Dot pattern background */
.th-dot-pattern {
  background-image: radial-gradient(rgba(59, 77, 170, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Noise texture overlay */
.th-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--th-bg-subtle);
}

::-webkit-scrollbar-thumb {
  background: var(--th-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--th-text-muted);
}


/* ─── BORDER ANIMATIONS ─── */

/* 1. Rotating gradient border (conic gradient spin) */
.th-border-spin {
  position: relative;
  border-radius: var(--radius-lg);
  z-index: 0;
  overflow: hidden;
}

.th-border-spin::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--th-primary), #6366F1, #8B5CF6, #3B82F6, var(--th-primary));
  animation: borderSpin 3s linear infinite;
  z-index: -2;
}

.th-border-spin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--th-bg);
  z-index: -1;
}

@keyframes borderSpin {
  to { transform: rotate(360deg); }
}

/* 2. Border draw-on animation (lines draw from corners) */
.th-border-draw {
  position: relative;
}

.th-border-draw::before,
.th-border-draw::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  transition: none;
}

.th-border-draw::before {
  top: 0; left: 0;
  border-top-color: var(--th-primary);
  border-right-color: var(--th-primary);
}

.th-border-draw::after {
  bottom: 0; right: 0;
  border-bottom-color: var(--th-primary);
  border-left-color: var(--th-primary);
}

.th-border-draw:hover::before {
  animation: drawBorderBefore 0.5s ease forwards;
}

.th-border-draw:hover::after {
  animation: drawBorderAfter 0.5s ease 0.25s forwards;
}

@keyframes drawBorderBefore {
  0% { width: 0; height: 0; }
  50% { width: 100%; height: 0; }
  100% { width: 100%; height: 100%; }
}

@keyframes drawBorderAfter {
  0% { width: 0; height: 0; }
  50% { width: 100%; height: 0; }
  100% { width: 100%; height: 100%; }
}

/* 3. Glowing border on hover */
.th-border-glow {
  position: relative;
  transition: all 0.3s ease;
}

.th-border-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--th-primary), #6366F1, var(--th-primary));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  filter: blur(8px);
}

.th-border-glow:hover::before {
  opacity: 0.6;
}

.th-border-glow:hover {
  border-color: var(--th-primary);
  box-shadow: 0 0 20px rgba(59, 77, 170, 0.2);
}

/* 4. Border shimmer (light travels across border) */
.th-border-shimmer {
  position: relative;
  overflow: hidden;
}

.th-border-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, transparent, var(--th-primary), transparent);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderShimmer 2.5s linear infinite;
}

@keyframes borderShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 5. Border pulse (border color pulses) */
.th-border-pulse {
  animation: borderPulse 2s ease-in-out infinite;
}

@keyframes borderPulse {
  0%, 100% { border-color: var(--th-border); }
  50% { border-color: rgba(59, 77, 170, 0.4); }
}

/* 6. Double border hover (inner + outer) */
.th-border-double {
  position: relative;
  transition: all 0.3s ease;
}

.th-border-double::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-lg) - 4px);
  transition: all 0.3s ease;
}

.th-border-double:hover {
  border-color: var(--th-primary);
}

.th-border-double:hover::after {
  border-color: rgba(59, 77, 170, 0.2);
}

/* 7. Gradient border (static, no animation) */
.th-border-gradient {
  position: relative;
  background: var(--th-bg);
  border: none;
}

.th-border-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--th-primary), #6366F1);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 8. Corner accent borders */
.th-border-corners {
  position: relative;
}

.th-border-corners::before,
.th-border-corners::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--th-primary);
  border-style: solid;
  transition: all 0.3s ease;
}

.th-border-corners::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
  border-radius: var(--radius-md) 0 0 0;
}

.th-border-corners::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 var(--radius-md) 0;
}

.th-border-corners:hover::before,
.th-border-corners:hover::after {
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

/* 9. Neon border glow for dark sections */
.th-border-neon {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.th-border-neon:hover {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.15), inset 0 0 15px rgba(99, 102, 241, 0.05);
}

/* 10. Dashed border animation */
.th-border-dashed {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='14' ry='14' stroke='%233B4DAA' stroke-width='1.5' stroke-dasharray='8%2c8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  transition: all 0.3s ease;
}

.th-border-dashed:hover {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='14' ry='14' stroke='%233B4DAA' stroke-width='2' stroke-dasharray='8%2c8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}


/* ─── GLOBAL ENTRANCE ANIMATIONS ─── */

/* Scroll-triggered reveal classes */
.th-reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.th-reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.th-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.th-reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.th-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.th-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.th-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.th-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.th-delay-1 { transition-delay: 0.1s; }
.th-delay-2 { transition-delay: 0.2s; }
.th-delay-3 { transition-delay: 0.3s; }
.th-delay-4 { transition-delay: 0.4s; }
.th-delay-5 { transition-delay: 0.5s; }
.th-delay-6 { transition-delay: 0.6s; }

/* ─── ENHANCED HOVER EFFECTS ─── */

/* Image zoom on hover (for all images in cards) */
.th-img-zoom {
  overflow: hidden;
}

.th-img-zoom img {
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.th-img-zoom:hover img {
  transform: scale(1.08);
}

/* Text reveal on hover */
.th-text-reveal {
  position: relative;
  overflow: hidden;
}

.th-text-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: translateX(-100%);
  transition: none;
}

.th-text-reveal:hover::after {
  animation: textShine 0.6s ease;
}

@keyframes textShine {
  to { transform: translateX(100%); }
}

/* Button ripple effect */
.th-btn-ripple {
  position: relative;
  overflow: hidden;
}

.th-btn-ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 0.8s;
}

.th-btn-ripple:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

/* Link arrow slide */
.th-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

.th-link-arrow:hover {
  gap: 10px;
}

.th-link-arrow i {
  transition: transform 0.3s ease;
}

.th-link-arrow:hover i {
  transform: translateX(4px);
}

/* Card tilt effect base */
.th-tilt {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

/* Staggered list item reveal */
.th-stagger-list > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.th-stagger-list.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.th-stagger-list.is-visible > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.th-stagger-list.is-visible > *:nth-child(3) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
.th-stagger-list.is-visible > *:nth-child(4) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.th-stagger-list.is-visible > *:nth-child(5) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
.th-stagger-list.is-visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.th-stagger-list.is-visible > *:nth-child(7) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }
.th-stagger-list.is-visible > *:nth-child(8) { transition-delay: 0.56s; opacity: 1; transform: translateY(0); }

/* Section separator line animation */
.th-section-line {
  position: relative;
  overflow: hidden;
}

.th-section-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  max-width: 1200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--th-border), transparent);
  transition: transform 1.5s cubic-bezier(0.16,1,0.3,1);
}

.th-section-line.is-visible::before {
  transform: translateX(-50%) scaleX(1);
}

/* Parallax scroll helper */
.th-parallax {
  will-change: transform;
}

/* Smooth image loading */
img {
  opacity: 1;
  transition: opacity 0.3s ease;
}

img[loading] {
  opacity: 0;
}


/* Map dot pulse animation */
@keyframes mapPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

/* =========================================================
   GLOBAL PAGE CONSISTENCY LAYER v1
   Normalises all non-home pages to the unified brand palette.
   Uses CSS specificity to override Bootstrap defaults without
   touching individual view files.
   ========================================================= */

/* ── Shared pulse animation (used in dark hero orbs) ─── */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .5; }
  50%       { transform: scale(1.1); opacity: .8; }
}

/* ── Page Hero: dark variant (#060e1f) ─────────────────── */
/* Normalises hero background to the design system dark bg */
.th-page-hero {
  position: relative;
  overflow: hidden;
  background: var(--th-bg-dark);        /* #0F172A — matches home */
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* ── Page Hero: gradient variant (careers, investors) ─── */
.th-page-hero-gradient {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--th-bg-dark) 0%, var(--th-primary) 100%);
  min-height: 50vh;
  display: flex;
  align-items: center;
}

/* ── Breadcrumb links inside dark heroes ────────────────── */
.th-page-hero .breadcrumb-item a,
.th-page-hero-gradient .breadcrumb-item a {
  color: #A5B4FC;          /* design-system indigo-200 accent */
  transition: color 0.2s ease;
}
.th-page-hero .breadcrumb-item a:hover,
.th-page-hero-gradient .breadcrumb-item a:hover {
  color: #fff;
}
.th-page-hero .breadcrumb-item.active,
.th-page-hero-gradient .breadcrumb-item.active {
  color: rgba(255,255,255,0.55);
}

/* ── Hero badge pill (glass style) ─────────────────────── */
.th-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(165,180,252,0.10);   /* indigo-200 glass */
  color: #A5B4FC;
  border: 1px solid rgba(165,180,252,0.20);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  letter-spacing: 0.02em;
}

/* ── Section badge (light section pill labels) ──────────── */
/* Replaces the ad-hoc background:#e8f0fe;color:#3B4DAA pattern */
.th-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  background: var(--th-primary-50);     /* #F0F3FF */
  color: var(--th-primary);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Section headings – light sections ─────────────────── */
.th-section-title {
  font-weight: 800;
  color: var(--th-text);               /* #0F172A */
  line-height: 1.15;
}

/* ── Alternating section backgrounds ───────────────────── */
/* .bg-white  → already correct */
/* .th-bg-alt → the #f8faff / #f8fafc alternate */
.th-bg-alt {
  background: var(--th-bg-subtle);     /* #F8FAFC */
}

/* ── Muted body text in dark heroes ────────────────────── */
/* Normalises #7ba7c7 / #8aabb8 / #b0c4de to one value */
.th-hero-body {
  color: rgba(255,255,255,0.62);
  line-height: 1.8;
}

/* ── CTA dark section (bottom of most pages) ────────────── */
.th-cta-dark {
  position: relative;
  overflow: hidden;
  background: var(--th-bg-dark);       /* #0F172A unified */
  padding: var(--space-20) 0;
  text-align: center;
}
/* Radial glow overlay */
.th-cta-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%,  rgba(59,77,170,0.12), transparent),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(99,102,241,0.08), transparent);
  pointer-events: none;
}
.th-cta-dark > * { position: relative; z-index: 1; }

.th-cta-dark p {
  color: rgba(255,255,255,0.6);
}

/* ── Icon boxes – gradient (primary → deep) ─────────────── */
.th-icon-grad {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--th-primary-dark), var(--th-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(59,77,170,0.28);
  flex-shrink: 0;
}

/* Rounded circle variant */
.th-icon-grad-circle {
  border-radius: 50%;
}

/* ── Step number badge ──────────────────────────────────── */
.th-step-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--th-primary);
  opacity: 0.3;
  line-height: 1;
}

/* ── Stat cards (used in about_company, etc.) ───────────── */
.th-stat-card {
  text-align: center;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.th-stat-card:hover {
  transform: translateY(-5px);
}
.th-stat-num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--th-primary);
  line-height: 1;
}

/* ── Vision/Mission card – brand-only palette ───────────── */
/* Replaces the rogue green (#1a8a5a) Mission card */
.th-vision-card {
  background: linear-gradient(135deg, var(--th-bg-dark), var(--th-primary));
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1), box-shadow 0.4s;
}
.th-vision-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(59,77,170,0.3);
}
.th-mission-card {
  background: linear-gradient(135deg, #0d3a6e, var(--th-primary));
}

/* ── Floating orb decorations (hero background) ─────────── */
.th-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: pulse 8s ease-in-out infinite;
}
.th-orb-1 {
  top: -10%; right: -5%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,77,170,.3) 0%, transparent 70%);
  animation-duration: 8s;
}
.th-orb-2 {
  bottom: -15%; left: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(13,92,138,.2) 0%, transparent 70%);
  animation-duration: 10s;
  animation-delay: 2s;
}

/* ── Grid pattern overlay (used in many hero/dark sections) */
.th-grid-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

/* ── Bootstrap overrides for consistency ────────────────── */
/* Make sure Bootstrap btn-primary always uses our brand color */
.btn-primary {
  --bs-btn-bg:               var(--th-primary);
  --bs-btn-border-color:     var(--th-primary);
  --bs-btn-hover-bg:         var(--th-primary-dark);
  --bs-btn-hover-border-color: var(--th-primary-dark);
  --bs-btn-active-bg:        var(--th-primary-dark);
  --bs-btn-active-border-color: var(--th-primary-dark);
  --bs-btn-focus-shadow-rgb: 59, 77, 170;
}
.btn-outline-primary {
  --bs-btn-color:            var(--th-primary);
  --bs-btn-border-color:     var(--th-primary);
  --bs-btn-hover-bg:         var(--th-primary);
  --bs-btn-hover-border-color: var(--th-primary);
}
/* Bootstrap text-primary → brand color */
.text-primary {
  color: var(--th-primary) !important;
}

/* ── Contact page: hero accent icon color ───────────────── */
/* Was hardcoded #4da6ff, align to lighter primary accent */
.th-contact-icon-accent {
  color: #A5B4FC;
}

/* ── Timeline / roadmap items ────────────────────────────── */
.th-timeline-step {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.th-timeline-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--th-primary-dark), var(--th-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(59,77,170,0.3);
}

/* ── "By the Numbers" dark stat list ────────────────────── */
.th-stat-list-num {
  font-weight: 900;
  font-size: 2rem;
  color: #A5B4FC;             /* replaces the rainbow #4da6ff/#5dbb7f/#ffc107 */
  min-width: 90px;
}

/* ── Responsive: hide hero orbs on mobile ───────────────── */
@media (max-width: 767px) {
  .th-orb { display: none; }
}

/* =========================================================
   GLOBAL PAGE CONSISTENCY LAYER v2
   Phase-2 normalisation — fixes all remaining off-brand
   colours without touching individual PHP files.
   ========================================================= */

/* ── 1. Yellow warning buttons → brand primary ──────────── */
/* btn-warning is used as a CTA on many service/work-permit pages.
   Redirect to the brand indigo so all CTAs are consistent. */
.btn-warning,
.btn-outline-warning {
  --bs-btn-color:                #fff;
  --bs-btn-bg:                   var(--th-primary);
  --bs-btn-border-color:         var(--th-primary);
  --bs-btn-hover-bg:             var(--th-primary-dark);
  --bs-btn-hover-border-color:   var(--th-primary-dark);
  --bs-btn-hover-color:          #fff;
  --bs-btn-active-bg:            var(--th-primary-dark);
  --bs-btn-active-border-color:  var(--th-primary-dark);
  --bs-btn-active-color:         #fff;
  --bs-btn-focus-shadow-rgb:     59, 77, 170;
}

/* ── 2. Red danger buttons → brand primary ──────────────── */
/* Healthcare section uses btn-danger. Unified to primary. */
.btn-danger {
  --bs-btn-color:                #fff;
  --bs-btn-bg:                   var(--th-primary);
  --bs-btn-border-color:         var(--th-primary);
  --bs-btn-hover-bg:             var(--th-primary-dark);
  --bs-btn-hover-border-color:   var(--th-primary-dark);
  --bs-btn-hover-color:          #fff;
  --bs-btn-active-bg:            var(--th-primary-dark);
  --bs-btn-focus-shadow-rgb:     59, 77, 170;
}

/* ── 3. Green gradient info panels → brand gradient ─────── */
/* Targets the inline linear-gradient(135deg,#0d5c8a,#1a8a5a)
   pattern. CSS can't override inline styles directly, so we
   add a utility class for these panels used in new markup,
   and normalise the surrounding context. */
.th-info-panel {
  background: linear-gradient(135deg, var(--th-bg-dark), var(--th-primary)) !important;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}

/* ── 4. Purple IT panel → brand dark ───────────────────── */
/* IT section uses #1e003d / #5a1a8a purple gradient. */
.th-it-panel {
  background: linear-gradient(135deg, var(--th-bg-dark), #2E3A87) !important;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ── 5. Green check-circle icons → brand accent ─────────── */
/* fa-check-circle coloured #5dbb7f appear in compliance,
   work-permit, and service pages. Unified to brand accent. */
.fa-check-circle[style*="color:#5dbb7f"],
.fa-check-circle[style*="color: #5dbb7f"],
.fa-check-circle[style*="color:#82e0aa"],
.fa-square[style*="color:#5dbb7f"] {
  color: #A5B4FC !important;
}

/* ── 6. Cyan-blue icon accent (#4da6ff) → indigo-200 ────── */
/* Used in contact.php map-pin, compliance shield icon, etc. */
[style*="color:#4da6ff"] {
  color: #A5B4FC !important;
}

/* ── 7. Old muted text colours → design-system token ────── */
/* #7ba7c7, #8aabb8 — used as body text inside dark sections */
[style*="color:#7ba7c7"],
[style*="color: #7ba7c7"] {
  color: rgba(255,255,255,0.60) !important;
}
[style*="color:#8aabb8"],
[style*="color: #8aabb8"] {
  color: rgba(255,255,255,0.62) !important;
}
/* #b0c4de — breadcrumb active / subtle text inside dark sections */
[style*="color:#b0c4de"],
[style*="color: #b0c4de"] {
  color: rgba(255,255,255,0.55) !important;
}

/* ── 8. Old hero dark bg (#060e1f) → design-system dark ─── */
/* Some heroes inline background:#060e1f instead of #0F172A.
   They're close but not identical — normalise via background-color
   override on sections that carry this value. */
section[style*="background:#060e1f"],
section[style*="background: #060e1f"],
div[style*="background:#060e1f"] {
  background: var(--th-bg-dark) !important;
}

/* ── 9. Old CTA gradient (linear-gradient…#060e1f) ─────── */
section[style*="background:linear-gradient(135deg,#060e1f"],
section[style*="background:linear-gradient(135deg,#0a1628,#0d5c8a)"] {
  background: var(--th-bg-dark) !important;
}

/* ── 10. EU-Compliant green badge on compliance page ────── */
/* background:rgba(40,167,69,.2);color:#5dbb7f — convert to
   brand glass indigo style. */
span[style*="color:#5dbb7f"],
span[style*="color: #5dbb7f"] {
  color: #A5B4FC !important;
}
span[style*="background:rgba(40,167,69,.2)"] {
  background: rgba(165,180,252,0.12) !important;
}

/* ── 11. Green text in hero gradient spans ───────────────── */
/* Hero h1 gradient text uses #4da6ff → #0d5c8a which is
   close but slightly off. Normalise to indigo brand accent. */
span[style*="background:linear-gradient(135deg,#4da6ff,#0d5c8a)"] {
  background: linear-gradient(135deg, #A5B4FC, #4B61C8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── 12. Red healthcare badges → brand label ────────────── */
span[style*="background:#fce4e4"] {
  background: var(--th-primary-50) !important;
  color: var(--th-primary) !important;
  border: none;
}
/* Red icon accents in healthcare section */
.fa-check-circle[style*="color:#c0392b"],
i[style*="color:#c0392b"],
i[style*="color:#e74c3c"],
i[style*="color:#8b0000"],
i[style*="color:#d35400"] {
  color: var(--th-primary) !important;
}

/* ── 13. Purple IT badge → brand ────────────────────────── */
span[style*="background:#f3e8ff"] {
  background: var(--th-primary-50) !important;
  color: var(--th-primary) !important;
}
/* Purple text/icon accents in IT section */
[style*="color:#5a1a8a"],
[style*="color: #5a1a8a"] {
  color: var(--th-primary) !important;
}

/* ── 14. Other rainbow icon colours in about_values ──────── */
/* about_values uses varied icon colours per card.
   Normalise all to brand gradient style. */
[style*="color:#8a5a1a"],
[style*="color:#5a1a8a"],
[style*="color:#8a1a1a"],
[style*="color:#1b3d5f"],
[style*="color:#134e72"],
[style*="color:#0a4c6e"],
[style*="color:#0c3f5a"] {
  color: var(--th-primary) !important;
}

/* Icon box backgrounds with off-brand colours */
div[style*="background:#8a5a1a"],
div[style*="background:#5a1a8a"],
div[style*="background:#8a1a1a"],
div[style*="background:#1b3d5f"],
div[style*="background:#134e72"],
div[style*="background:#0a4c6e"],
div[style*="background:#0c3f5a"] {
  background: linear-gradient(135deg, var(--th-primary-dark), var(--th-primary)) !important;
}

/* ── 15. blog / muted text correction ───────────────────── */
/* blog, page.php use #7ba7c7 as muted text colour */
p[style*="color:#7ba7c7"] {
  color: rgba(255,255,255,0.60) !important;
}

/* ── 16. about_compliance green card backgrounds ─────────── */
/* The green "Labour at Scale" card and similar */
div[style*="background:linear-gradient(135deg,#0d5c8a,#1a8a5a)"] {
  background: linear-gradient(135deg, var(--th-bg-dark), var(--th-primary)) !important;
}
p[style*="color:#c8e6c9"],
small[style*="color:#c8e6c9"],
small[style*="color:#a9dfbf"] {
  color: rgba(255,255,255,0.70) !important;
}
i[style*="color:#82e0aa"] {
  color: #A5B4FC !important;
}

/* ── 17. Seasonal work permit green badge ────────────────── */
/* work_permits/process.php — 'Seasonal' uses #1a8a5a */
[style*="background:#1a8a5a"],
div[style*="background: #1a8a5a"] {
  background: var(--th-primary) !important;
}
[style*="color:#1a8a5a"],
[style*="color: #1a8a5a"] {
  color: var(--th-primary) !important;
}

/* ── 18. IT panel purple text accents ───────────────────── */
p[style*="color:#d5b5f5"],
small[style*="color:#b39ddb"] {
  color: rgba(255,255,255,0.68) !important;
}
i[style*="color:#82e0aa"] {
  color: #A5B4FC !important;
}
i[style*="color:#ffc107"] {
  color: #A5B4FC !important;
}

/* ── 19. Service hero for recruitment (btn-warning in hero) */
.service-hero .btn-warning,
.service-hero-blue .btn-warning,
.service-hero-warm .btn-warning {
  background: var(--th-primary) !important;
  border-color: var(--th-primary) !important;
  color: #fff !important;
}

/* ── 20. service-panel-stat golden accent → indigo-200 ──── */
.service-panel-stat {
  color: #A5B4FC;
}