/*
Theme Name: GEOPROVE - Geoscience-Based Infrastructure Risk Expert
Theme URI: https://geoprove.com
Author: GEOPROVE Advisory Group
Author URI: https://geoprove.com
Description: Independent Geotechnical, Geospatial & Water Engineering Advisory for Land, Mining & Marine Infrastructure.
Version: 3.3.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: geoprove
License: Proprietary
*/

/* ==========================================================================
   VERSION 1.1.0 UPDATE LOG & NAVIGASI PERUBAHAN:
   1. [Line ~10,875] Responsif Layar HP Halaman Servis:
      - .service-layout-grid: Stack 1 kolom vertikal di layar <=992px & <=768px.
      - .service-main-content (Artikel utama): Posisi pertama di atas (order: 1).
      - .service-sidebar (5 Core Engineering Pillars): Posisi kedua di bawah (order: 2).
   2. [Line ~18,000] Footer Accordion Menu Dropdown Mobile:
      - Kolom footer otomatis menjadi accordion yang bisa dibuka/tutup di HP.
   3. [Line ~18,080] Optimasi Tabel Perbandingan & Kartu Pilar agar tidak terpotong tepi layar.
   ========================================================================== */

/* ==========================================================================
   CSS CUSTOM PROPERTIES / TOKENS
   ========================================================================== */
:root {
  --primary-navy: #001f3b;     /* SUT Executive Trench Navy */
  --navy-accent: #002b4d;      /* SUT Medium Trench Blue */
  --navy-bg: #000014;          /* SUT Abyssal Midnight Navy */
  --navy-card: #001f3b;        /* SUT Deep Ocean Trench Blue */
  --navy-deep: #00000e;        /* SUT Deepest Abyssal Black-Blue */
  --nav-bg: #001f3b;           /* SUT Trench Blue */
  --text-main: #000014;
  --text-muted: #64748b;
  --text-light: #8f9fb6;
  --border-light: #e2e8f0;
  --border-dark: rgba(0, 217, 252, 0.12);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'STIX Two Text', 'Cambria Math', 'Noto Sans Math', 'DejaVu Sans', sans-serif;
  --font-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-code: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
  --cyan-accent: #00d9fc;      /* SUT Electric Sonar Cyan */
  --cyan-dark: #00c3e3;        /* SUT Vibrant Cyan */
  --blue-accent: #00d9fc;
  --sut-sonar-cyan: #00d9fc;
  --sut-sonar-soft: #b0f3fe;
  --sut-trench-blue: #001f3b;
  --sut-abyssal-navy: #000014;
  --sut-slate-grey: #8f9fb6;
  --emerald-accent: #10b981;
  --amber-accent: #f59e0b;
  --card-bg: #ffffff;
  --section-bg-alt: #f8fafc;
  --transition-smooth: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: #ffffff;
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

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

.container-herrington {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   TOP HEADER (BARIS 1: NAVY GELAP)
   ========================================================================== */
.header-top {
  background-color: var(--navy-bg);
  color: #ffffff;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-dark);
  font-size: 13px;
}
.header-top-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand-logo-area a {
  display: flex;
  flex-direction: column;
}
.brand-logo {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1;
  color: #ffffff;
}
.brand-logo span { color: var(--cyan-accent); }
.brand-subtitle {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #94a3b8;
  margin-top: 4px;
  font-weight: 600;
}
.top-info-group {
  display: flex;
  align-items: center;
  gap: 36px;
}
.info-box {
  display: flex;
  align-items: center;
  gap: 12px;
}
.info-box-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--cyan-accent);
}
.info-box-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: #cbd5e1;
}
.info-box-text strong {
  display: block;
  color: #ffffff;
  font-weight: 700;
}

/* ==========================================================================
   MAIN NAVIGATION (BARIS 2: PUTIH STICKY)
   ========================================================================== */
.site-nav {
  background-color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 76px;
}
.mobile-brand {
  display: none;
  font-size: 22px;
  font-weight: 800;
  color: var(--navy-bg);
}
.mobile-brand span { color: var(--cyan-accent); }

.main-menu {
  display: flex;
  list-style: none;
  gap: 32px;
  height: 100%;
  align-items: center;
}
.menu-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.menu-link {
  font-size: 14.5px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
}
.menu-link:hover, .menu-item.active .menu-link, .menu-item.current-menu-item .menu-link {
  color: #0b141d;
}
.menu-item.active .menu-link::after, .menu-item.current-menu-item .menu-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--navy-bg);
  border-radius: 3px 3px 0 0;
}

/* Sub-menu & Dropdown styling (Desktop Hover Fix & Elevation) */
.dropdown,
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 290px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--navy-bg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
  border-radius: 0 0 4px 4px;
  list-style: none;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 99999 !important;
}

/* Hover Bridge: prevents cursor drop when moving between menu-link and dropdown */
.dropdown::before,
.sub-menu::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
}

/* Universal Hover Selectors for WordPress and Custom classes */
.menu-item:hover > .dropdown,
.menu-item:hover > .sub-menu,
.has-dropdown:hover > .dropdown,
.has-dropdown:hover > .sub-menu,
.menu-item-has-children:hover > .dropdown,
.menu-item-has-children:hover > .sub-menu,
.menu-item.dropdown-open > .dropdown,
.has-dropdown.dropdown-open > .dropdown,
.menu-item.dropdown-open > .sub-menu,
.has-dropdown.dropdown-open > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  display: block !important;
}

/* Smooth Chevron Animation on Desktop Hover */
.menu-item:hover > .menu-link .fa-chevron-down,
.has-dropdown:hover > .menu-link .fa-chevron-down {
  transform: rotate(180deg);
}
.menu-link .fa-chevron-down {
  transition: transform 0.22s ease;
}
.dropdown li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 22px;
  font-size: 13.5px;
  color: #475569;
  font-weight: 500;
  border-bottom: 1px solid #f1f5f9;
}
.dropdown li:last-child a { border-bottom: none; }
.dropdown li a:hover {
  background-color: #f8fafc;
  color: #0b141d;
  font-weight: 600;
  padding-left: 26px;
}

/* ==========================================================================
   DESKTOP SERVICES FLYOUT MENU WITH LIVE BADGES (DEEP BLUE & ELECTRIC CYAN)
   ========================================================================== */
.dropdown-flyout-parent {
  min-width: 340px !important;
  padding: 6px 0 !important;
  background: #08101C !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.75) !important;
  border-radius: 4px !important;
}

.dropdown-flyout-parent > li.dropdown-category-tag {
  padding: 8px 20px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #00e5ff !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 229, 255, 0.05) !important;
}

.dropdown-flyout-parent > li.has-flyout-sub {
  position: relative !important;
}

.dropdown-flyout-parent > li.has-flyout-sub > a.flyout-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.dropdown-flyout-parent > li.has-flyout-sub:hover > a.flyout-trigger {
  background: rgba(0, 229, 255, 0.12) !important;
  color: #00e5ff !important;
  padding-left: 24px !important;
}

.flyout-arrow {
  font-size: 10px !important;
  opacity: 0.6 !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.dropdown-flyout-parent > li.has-flyout-sub:hover .flyout-arrow {
  opacity: 1 !important;
  transform: translateX(3px) !important;
  color: #00e5ff !important;
}

/* Level 2: Sub-menu Meluncur ke Sisi Kanan (left: 100%) */
.flyout-sub-menu {
  display: none !important;
  position: absolute !important;
  top: -6px !important;
  left: 100% !important;
  min-width: 350px !important;
  background: #0D1829 !important;
  border: 1px solid rgba(0, 229, 255, 0.35) !important;
  border-radius: 4px !important;
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.85) !important;
  padding: 8px 0 !important;
  z-index: 99999 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease !important;
  list-style: none !important;
}

/* Jembatan Hover: kursor tidak lepas saat bergeser dari pilar ke sub-menu kanan */
.flyout-sub-menu::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -20px !important;
  width: 20px !important;
  height: 100% !important;
  background: transparent !important;
}

.dropdown-flyout-parent > li.has-flyout-sub:hover > .flyout-sub-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
}

.flyout-sub-tag {
  padding: 8px 18px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #00e5ff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 229, 255, 0.08) !important;
}

.flyout-sub-menu li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 18px !important;
  font-size: 12.5px !important;
  color: #cbd5e1 !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

.flyout-sub-menu li a:hover {
  background: rgba(0, 229, 255, 0.15) !important;
  color: #ffffff !important;
  padding-left: 22px !important;
}

.badge-live-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 3px 6px 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(16, 185, 129, 0.28) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.2) !important;
  margin-left: 8px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

.flyout-view-all a {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #00e5ff !important;
  background: rgba(0, 229, 255, 0.06) !important;
}

.dropdown-hub-cta a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  font-size: 12px !important;
  color: #00e5ff !important;
  background: rgba(0, 229, 255, 0.08) !important;
  border-top: 1px solid rgba(0, 229, 255, 0.2) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   MINIMAL BILINGUAL TOGGLE [ 🌐 EN | ID ]
   ========================================================================== */
.lang-switcher-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 5px 12px;
  margin-right: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.lang-globe-icon {
  font-size: 12px;
  color: #06b6d4;
  margin-right: 2px;
}
.lang-option {
  font-family: var(--font-code, monospace);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #94a3b8;
  text-decoration: none !important;
  transition: all 0.2s ease;
  padding: 2px 4px;
  border-radius: 3px;
}
.lang-option:hover {
  color: #06b6d4;
}
.lang-option.active {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}
.lang-divider {
  font-size: 11px;
  color: #475569;
  user-select: none;
}

/* Mobile Drawer Language Controls: Compact [EN] | [ID] Micro-Boxes */
.drawer-lang-toggle {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-lang-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}
.drawer-lang-label i {
  color: #00e5ff;
  font-size: 11px;
}
.drawer-lang-micro-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #08101C;
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 4px;
  padding: 3px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.drawer-lang-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 4px;
  border-radius: 3px;
  font-family: var(--font-code, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #94a3b8;
  text-decoration: none !important;
  transition: all 0.2s ease;
  line-height: 1;
}
.drawer-lang-box:hover {
  color: #00e5ff;
}
.drawer-lang-box.active {
  background: rgba(0, 229, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(0, 229, 255, 0.45);
  font-weight: 800;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}
.drawer-lang-divider {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  user-select: none;
}
.drawer-wa-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #25d366;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}
.drawer-wa-link:hover {
  opacity: 0.85;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.support-call {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
}
.support-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: #f1f5f9;
  color: var(--navy-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.btn-pill-navy {
  background-color: var(--navy-bg);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
}
.btn-pill-navy:hover {
  background: linear-gradient(135deg, #0088cc 0%, #004d80 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 136, 204, 0.45) !important;
  border-color: rgba(0, 229, 255, 0.6) !important;
  color: #ffffff !important;
}
.btn-pill-navy i {
  font-size: 12px;
  transition: transform 0.2s ease;
}
.btn-pill-navy:hover i {
  transform: translateX(4px);
}

.btn-pill-white {
  background: #ffffff;
  color: var(--navy-bg);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition-smooth);
  border: 1px solid #ffffff;
}
.btn-pill-white:hover {
  background: var(--cyan-accent);
  border-color: var(--cyan-accent);
  color: #0b141d;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 229, 255, 0.3);
}

.btn-pill-outline {
  background-color: transparent;
  color: var(--navy-bg);
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition-smooth);
  border: 1.5px solid #cbd5e1;
}
.btn-pill-outline:hover {
  border-color: var(--navy-bg);
  background-color: #f8fafc;
  transform: translateY(-2px);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--navy-bg);
  cursor: pointer;
}

/* ==========================================================================
   HERO BANNER (PAGE HEADER)
   ========================================================================== */
.page-hero-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(7, 14, 21, 0.94) 0%, rgba(11, 20, 29, 0.90) 100%),
              url('https://geoproverisk.com/wp-content/uploads/2026/09/about-operations-banner-1.jpg') center/cover no-repeat !important;
}
.about-hero-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(7, 14, 21, 0.94) 0%, rgba(11, 20, 29, 0.90) 100%),
              url('https://geoproverisk.com/wp-content/uploads/2026/09/about-hero-banner.jpg') center/cover no-repeat !important;
  padding: 95px 0 80px 0;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.page-hero-banner::after, .about-hero-banner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  background: radial-gradient(circle at 80% 30%, rgba(0, 229, 255, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.hero-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--cyan-accent);
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.25);
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.page-hero-title, .about-hero-title {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 16px;
  color: #ffffff;
}
.page-hero-title span, .about-hero-title span { color: var(--cyan-accent); }
.hero-cyan-divider {
  width: 72px;
  height: 3px;
  background-color: var(--cyan-accent);
  margin-bottom: 20px;
  border-radius: 2px;
}
.breadcrumbs-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #94a3b8;
}
.breadcrumbs-nav a { color: #ffffff; }
.breadcrumbs-nav a:hover { color: var(--cyan-accent); }
.breadcrumbs-nav span.current { color: var(--cyan-accent); font-weight: 600; }

/* ==========================================================================
   HERO CONTAINER (HOMEPAGE)
   ========================================================================== */
.hero-container {
  background-color: var(--navy-bg);
  background-image: linear-gradient(135deg, rgba(7, 14, 21, 0.94) 0%, rgba(11, 20, 29, 0.88) 55%, rgba(11, 20, 29, 0.65) 100%),
                    url('https://geoproverisk.com/wp-content/uploads/2026/09/background-website.jpg');
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: auto;
  padding: 35px 0 50px 0;
  display: flex;
  align-items: center;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.hero-text-wrap {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 10px 0 25px 0;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--cyan-accent);
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.25);
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 22px;
}
.hero-heading {
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.22;
  margin-bottom: 20px;
  color: #ffffff;
  min-height: 2.45em; /* Kunci tepat 2 baris di desktop: bebas efek jatuh / layout shift */
}
.hero-heading span { color: var(--cyan-accent); }
.pxl-title--typewriter-main {
  color: var(--cyan-accent, #00e5ff);
  display: inline-block;
  position: relative;
  border-bottom: 2px solid rgba(0, 229, 255, 0.4);
  min-height: 1.2em;
  vertical-align: baseline;
  white-space: nowrap; /* Mencegah kata turun (enter) di layar desktop */
}
.pxl-title--typewriter-main::after {
  content: "|";
  display: inline-block;
  color: var(--gold-accent, #c5a880);
  font-weight: 300;
  animation: pxlCursorBlink 0.8s infinite;
  margin-left: 4px;
  vertical-align: baseline;
}
@keyframes pxlCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.hero-desc-lead {
  font-size: 16.5px;
  line-height: 1.8;
  color: #cbd5e1;
  margin-bottom: 38px;
  max-width: 720px;
}
.hero-cta-inline {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 42px;
}
.hero-cta-inline .btn-pill-white,
.hero-cta-inline .btn-hero-outline {
  width: 280px;
  min-width: 280px;
  height: 52px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.btn-hero-outline {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  gap: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  transition: var(--transition-smooth);
}
.btn-hero-outline:hover {
  border-color: var(--cyan-accent);
  color: var(--cyan-accent);
  background: rgba(0, 229, 255, 0.08);
  transform: translateY(-2px);
}
.hero-telemetry-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
}
.telemetry-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #94a3b8;
}
.telemetry-item i { color: var(--cyan-accent); font-size: 13px; }
.telemetry-item strong { color: #ffffff; font-weight: 700; }

/* ==========================================================================
   ELEVATED FLOATING SCOPING CARD (HERRINGTON SHOWCASE CLONE)
   ========================================================================== */
.floating-scoping-wrapper {
  position: relative;
  z-index: 25;
  margin-top: -30px; /* Nilai baru: rapi dan tidak menabrak tombol */
  margin-bottom: 50px;
}

.floating-scoping-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  box-shadow: 0 30px 85px rgba(11, 20, 29, 0.12), 0 4px 20px rgba(0, 0, 0, 0.04);
  padding: 0;
  overflow: hidden;
}

/* Top Selector Bar - Centered Grouping like Herrington Clone */
.scoping-selector-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 44px 40px 40px 40px;
  background: #ffffff;
  flex-wrap: wrap;
}

.scoping-label-title {
  display: flex;
  align-items: center;
}

.scoping-label-title h3 {
  font-size: 20px;
  font-weight: 700;
  color: #0b141d;
  letter-spacing: -0.3px;
  margin: 0;
  font-family: var(--font-sans);
  white-space: nowrap;
}

/* Kotak Outline Tambahan (Single Unified Frame) */
.scoping-action-inputs {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 5px 6px 5px 18px;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  max-width: 680px;
  flex-grow: 0;
}

.scoping-action-inputs:focus-within {
  border-color: #0088cc;
  box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.12);
}

.scoping-dropdown-wrap {
  position: relative;
  width: 380px;
  max-width: 100%;
  display: flex;
  align-items: center;
}

.scoping-select-control {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 8px 32px 8px 0 !important;
  font-size: 14.5px;
  color: #475569;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  height: 40px;
  line-height: 1.4;
}

.select-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 11px;
  pointer-events: none;
}

/* Garis Pembatas Tipis Vertikal antara Select & Button */
.scoping-frame-divider {
  width: 1px;
  height: 28px;
  background: #e2e8f0;
  flex-shrink: 0;
}

.btn-scoping-submit {
  background-color: #0b141d;
  color: #ffffff;
  height: 42px;
  padding: 0 22px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
  flex-shrink: 0;
}

.btn-scoping-submit:hover {
  background-color: #0088cc;
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.25);
}

/* 4 Kolom Pilar Bawah (Tinggi Vertikal Lebih Panjang, Lapang, & Garis Pemisah Tegas) */
.scoping-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.pillar-col-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 70px 36px 60px 36px;
  border-right: 1px solid #e2e8f0;
  min-height: 550px;
  transition: background-color 0.3s ease;
  position: relative;
}

.pillar-col-item:last-child {
  border-right: none;
}

.pillar-col-item:hover {
  background-color: #fbfdff;
}

/* Bulatan & Ikon Lebih Besar & Proporsional */
.pillar-icon-circle {
  width: 88px;
  height: 88px;
  border-radius: 4px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #0b141d;
  margin-bottom: 30px;
  border: 2px solid transparent;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.pillar-icon-circle i {
  transition: color 0.35s ease, transform 0.35s ease;
}

.pillar-icon-circle.dark-circle {
  background: #0b141d;
  color: #ffffff;
  border: 2px solid #0b141d;
}

/* Efek Hover Ikon & Bulatan: Berubah Menjadi Biru Marine (#0088cc) */
.pillar-col-item:hover .pillar-icon-circle,
.pillar-icon-circle:hover {
  transform: translateY(-6px);
  background: #f0f9ff;
  color: #0088cc;
  border-color: #0088cc;
  box-shadow: 0 12px 30px rgba(0, 136, 204, 0.22);
}

.pillar-col-item:hover .pillar-icon-circle i,
.pillar-icon-circle:hover i {
  color: #0088cc;
  transform: scale(1.08);
}

/* Dark circle (Pilar 4) saat di-hover */
.pillar-col-item:hover .pillar-icon-circle.dark-circle,
.pillar-icon-circle.dark-circle:hover {
  background: #0088cc;
  border-color: #0088cc;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 136, 204, 0.35);
}

.pillar-col-item:hover .pillar-icon-circle.dark-circle i,
.pillar-icon-circle.dark-circle:hover i {
  color: #ffffff;
  transform: scale(1.08);
}

.pillar-col-item h4 {
  font-size: 22px;
  font-weight: 700;
  color: #0b141d;
  letter-spacing: -0.4px;
  line-height: 1.35;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-desc {
  font-size: 15px;
  line-height: 1.8;
  color: #64748b;
  margin-bottom: 42px;
  flex-grow: 1;
}

.btn-pillar-action {
  background-color: #0b141d;
  color: #ffffff;
  padding: 15px 32px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  max-width: 220px;
  text-align: center;
  transition: all 0.25s ease;
  margin-top: auto;
}

.btn-pillar-action:hover {
  background-color: #0088cc;
  border-color: #0088cc;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 136, 204, 0.28);
  color: #ffffff;
}

/* Custom Dropdown Wrapper untuk Form Bawah (Panah Proporsional) */
.custom-select-wrap {
  position: relative;
  width: 100%;
  display: block;
}

.custom-select-wrap select.input-styled,
.custom-select-wrap select.form-control,
.custom-select-wrap select.form-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px !important;
  cursor: pointer;
}

/* Mengaktifkan dan memposisikan anak panah dropdown */
.custom-select-arrow {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #64748b !important;
  font-size: 13px !important;
  pointer-events: none !important; /* Klik tembus langsung ke pilihan di bawahnya */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.custom-select-wrap:hover .custom-select-arrow,
.custom-select-wrap:focus-within .custom-select-arrow {
  color: #0088cc !important;
}

@media (max-width: 1200px) {
  .scoping-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pillar-col-item:nth-child(2) {
    border-right: none;
  }
  .pillar-col-item:nth-child(1), .pillar-col-item:nth-child(2) {
    border-bottom: 1px solid #e2e8f0;
  }
}

@media (max-width: 992px) {
  .floating-scoping-wrapper {
    margin-top: -40px;
  }
  .scoping-selector-bar {
    padding: 30px 20px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .scoping-label-title h3 {
    white-space: normal;
    font-size: 19px;
    text-align: center;
  }
  .scoping-action-inputs {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    padding: 14px;
    gap: 12px;
    border-radius: 4px;
  }
  .scoping-dropdown-wrap {
    width: 100%;
    max-width: 100%;
  }
  .scoping-select-control {
    padding: 8px 30px 8px 6px !important;
  }
  .scoping-frame-divider {
    display: none;
  }
  .btn-scoping-submit {
    width: 100%;
    justify-content: center;
    height: 46px;
  }
}

@media (max-width: 768px) {
  .scoping-pillars-grid {
    grid-template-columns: 1fr;
  }
  .pillar-col-item {
    min-height: auto;
    padding: 40px 24px;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
  .pillar-col-item:last-child {
    border-bottom: none;
  }
}

/* ==========================================================================
   STANDARDS RIBBON (8 BORDERED CARDS)
   ========================================================================== */
.standards-section {
  padding: 40px 0 90px 0;
  background: #ffffff;
}
.standards-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 46px auto;
}
.standards-title {
  font-size: 34px;
  font-weight: 800;
  color: var(--navy-bg);
  line-height: 1.3;
  margin-bottom: 12px;
}
.standards-desc {
  font-size: 15px;
  color: #64748b;
  line-height: 1.7;
}
.standards-bordered-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.standard-grid-cell {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--transition-smooth);
}
.standard-grid-cell:hover {
  background: #ffffff;
  border-color: var(--blue-accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}
.cell-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: #e0f2fe;
  color: var(--blue-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cell-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  font-family: var(--font-code);
  margin-bottom: 2px;
}
.cell-subtitle {
  font-size: 12px;
  color: #64748b;
  line-height: 1.3;
  display: block;
}

/* ==========================================================================
   SERVICES GRID & CARDS
   ========================================================================== */
.services-showcase-section, .services-main-section {
  padding: 95px 0 100px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.section-head-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
}
.services-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.service-card-main, .service-card-herrington {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 36px 30px;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
}
.service-card-main:hover, .service-card-herrington:hover {
  border-color: var(--navy-bg);
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(11, 20, 29, 0.08);
}
.service-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.service-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  background: #e0f2fe;
  color: var(--blue-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all 0.25s ease;
}
.service-card-main:hover .service-icon-wrap {
  background: var(--navy-bg);
  color: var(--cyan-accent);
}
.service-card-num {
  font-family: var(--font-code);
  font-size: 13.5px;
  font-weight: 700;
  color: #94a3b8;
}
.service-card-main h3, .service-card-herrington h3 {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 12px;
}
.service-card-main p, .service-card-herrington p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 24px;
  flex-grow: 1;
}
.service-standards-tag {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-code);
  color: var(--blue-accent);
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 18px;
  align-self: flex-start;
}
.service-card-link {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy-bg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}
.service-card-main:hover .service-card-link { color: var(--blue-accent); }

/* Category Filter Bar */
.category-filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  justify-content: center;
}
.filter-btn {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  padding: 10px 22px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.filter-btn:hover, .filter-btn.active {
  background: var(--navy-bg);
  border-color: var(--navy-bg);
  color: #ffffff;
}

/* ==========================================================================
   FIDUCIARY CHESSBOARD (50:50 SPLIT)
   ========================================================================== */
.fiduciary-chessboard-section {
  padding: 100px 0;
  background: #ffffff;
}
.chessboard-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 90px;
}
.chessboard-row:last-child { margin-bottom: 0; }
.cb-image-wrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(11, 20, 29, 0.12);
  border: 1px solid var(--border-light);
}
.cb-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-floating-counter {
  position: absolute;
  bottom: 25px;
  right: 25px;
  background: var(--navy-bg);
  border: 1px solid rgba(0, 229, 255, 0.3);
  padding: 20px 24px;
  border-radius: 4px;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.cb-floating-counter strong {
  font-size: 28px;
  font-family: var(--font-code);
  color: var(--cyan-accent);
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.cb-floating-counter span {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #cbd5e1;
}
.cb-content-col h2 {
  font-size: 36px;
  font-weight: 800;
  color: var(--navy-bg);
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}
.cb-content-col p {
  font-size: 15.5px;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 24px;
}
.cb-bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.cb-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: #334155;
  line-height: 1.6;
}
.cb-check-circle {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #e0f2fe;
  color: var(--blue-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 3px;
}

/* ==========================================================================
   INTERACTIVE 4-TABS
   ========================================================================== */
.tabs-section-herrington {
  padding: 95px 0 100px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
.tab-bar-nav {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 40px;
  gap: 8px;
}
.tab-btn-item {
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 700;
  color: #64748b;
  padding: 16px 24px;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: -2px;
}
.tab-btn-item:hover { color: var(--navy-bg); }
.tab-btn-item.active {
  color: var(--navy-bg);
  border-bottom-color: var(--navy-bg);
}
.tab-pane-content {
  display: none;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
  animation: fadeInTab 0.3s ease forwards;
}
.tab-pane-content.active { display: grid; }
@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-image-container {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,0.08);
  border: 1px solid var(--border-light);
}
.tab-text-right h3 {
  font-size: 30px;
  font-weight: 800;
  color: var(--navy-bg);
  line-height: 1.3;
  margin-bottom: 18px;
}
.tab-body-lead {
  font-size: 15px;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 22px;
}
.arrow-bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
}
.arrow-bullet-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #334155;
}
.arrow-bullet-list li i { color: var(--blue-accent); font-size: 12px; }
.dark-callout-pill {
  background: var(--navy-bg);
  color: #ffffff;
  padding: 16px 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.dark-callout-pill i { color: var(--cyan-accent); font-size: 16px; }

/* ==========================================================================
   CASE STUDIES & CORRIDORS
   ========================================================================== */
/* (Obsolete static case studies section rule removed) */

/* (Obsolete static case-item-card styles removed in favor of full-bleed carousel cards) */


/* Corridor Risk Matrix Table */
.matrix-table-wrap {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow-x: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  margin-top: 50px;
}
.corridor-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}
.corridor-matrix-table th {
  background: var(--navy-bg);
  color: #ffffff;
  padding: 16px 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.corridor-matrix-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
.corridor-matrix-table tr:hover td {
  background: #f8fafc;
}

/* ==========================================================================
   METRICS COUNTER STRIP
   ========================================================================== */
.metrics-strip-section {
  background: linear-gradient(135deg, #0b141d 0%, #121c27 100%);
  color: #ffffff;
  padding: 75px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.metric-card-item {
  text-align: center;
  padding: 10px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.metric-card-item:last-child { border-right: none; }
.metric-icon-wrap {
  font-size: 24px;
  color: var(--cyan-accent);
  margin-bottom: 12px;
  opacity: 0.9;
}
.metric-number-display {
  font-size: 46px;
  font-weight: 800;
  font-family: var(--font-code);
  color: #ffffff;
  line-height: 1;
  margin-bottom: 8px;
}
.metric-number-display span { color: var(--cyan-accent); }
.metric-label-display {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.metric-sub-display {
  font-size: 12px;
  color: #94a3b8;
}

/* ==========================================================================
   TESTIMONIALS & PEER REFERENCES
   ========================================================================== */
.testimonials-section {
  padding: 100px 0;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.testimonial-split-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.testimonial-image-wrapper {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}
.testimonial-image-wrapper img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}
.quote-bubble-glass {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  background: rgba(11, 20, 29, 0.85);
  backdrop-filter: blur(8px);
  color: var(--cyan-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: 1px solid rgba(0, 229, 255, 0.3);
}
.testi-title {
  font-size: 34px;
  font-weight: 800;
  color: var(--navy-bg);
  line-height: 1.25;
  margin-bottom: 24px;
}
.peer-slide-block, .testimonial-slide {
  display: none;
  animation: fadeInSlide 0.35s ease forwards;
}
.peer-slide-block.active, .testimonial-slide.active { display: block; }
@keyframes fadeInSlide {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
.testi-quote-text {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: #1e293b;
  line-height: 1.8;
  margin-bottom: 28px;
}
.testi-author-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e2e8f0;
  padding-top: 20px;
}
.author-identity-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.author-meta h4 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}
.author-meta p {
  font-size: 13px;
  color: #64748b;
}
.testi-slider-arrows {
  display: flex;
  gap: 10px;
}
.testi-arrow-btn, .testi-btn {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: var(--navy-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
}
.testi-arrow-btn:hover, .testi-btn:hover {
  background: var(--navy-bg);
  color: #ffffff;
  border-color: var(--navy-bg);
}

/* ==========================================================================
   TRI-BOX SECTION
   ========================================================================== */
.tri-box-section {
  padding: 95px 0;
  background: #ffffff;
}
.tri-box-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.tri-card {
  border-radius: 4px;
  padding: 44px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-smooth);
}
.tri-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}
.tri-card.beige { background: #fdfbf7; border: 1px solid #f1ece1; }
.tri-card.dark { background: var(--navy-bg); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.08); }
.tri-card.grey { background: #f8fafc; border: 1px solid #e2e8f0; }
.tri-card h3 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 14px;
}
.tri-card.beige h3, .tri-card.grey h3 { color: var(--navy-bg); }
.tri-card.dark h3 { color: #ffffff; }
.tri-card-desc {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.tri-card.beige .tri-card-desc, .tri-card.grey .tri-card-desc { color: #64748b; }
.tri-card.dark .tri-card-desc { color: #cbd5e1; }
.tri-card-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 13.5px;
  color: #cbd5e1;
}
.tri-card-checklist li { display: flex; align-items: center; gap: 8px; }
.tri-card-checklist li i { color: var(--cyan-accent); font-size: 12px; }
.tri-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 20px;
}
.tri-card.dark .tri-card-footer { border-top-color: rgba(255, 255, 255, 0.1); }
.tri-footer-link {
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tri-card.beige .tri-footer-link, .tri-card.grey .tri-footer-link { color: var(--navy-bg); }
.tri-card.dark .tri-footer-link { color: var(--cyan-accent); }

/* ==========================================================================
   COUNCIL OF LEADERSHIP (ABOUT US)
   ========================================================================== */
.council-section {
  padding: 100px 0 110px 0;
  background: #f8fafc;
}
.council-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.council-member-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}
.council-member-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.08);
  border-color: #cbd5e1;
}
.member-photo-frame {
  position: relative;
  height: 290px;
  overflow: hidden;
  background: #e2e8f0;
}
.member-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.council-member-card:hover .member-photo-frame img { transform: scale(1.04); }
.member-badge-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(11, 20, 29, 0.85);
  backdrop-filter: blur(8px);
  color: var(--cyan-accent);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 255, 0.3);
  font-family: var(--font-code);
}
.member-info-body {
  padding: 24px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.member-info-body h4 {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
  line-height: 1.3;
}
.member-role {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-accent);
  margin-bottom: 12px;
  display: block;
}
.member-bio-snippet {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 16px;
}
.member-credentials {
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
  font-size: 11.5px;
  color: #475569;
  font-family: var(--font-code);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   PROGRESS BARS (HERRINGTON pxl_progressbar)
   ========================================================================== */
.progress-bar-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 34px;
}
.progress-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}
.progress-item-head span.val {
  font-family: var(--font-code);
  color: var(--blue-accent);
  font-size: 14px;
}
.progress-track {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #0284c7 0%, #00e5ff 100%);
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   TECHNICAL PAPERS & BLOG
   ========================================================================== */
.papers-blog-section, .papers-main-section {
  padding: 95px 0 100px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
.papers-3col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.paper-post-card, .paper-entry-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}
.paper-post-card:hover, .paper-entry-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(11, 20, 29, 0.08);
  border-color: #cbd5e1;
}
.paper-media-wrap, .paper-img-wrap {
  height: 220px;
  position: relative;
  overflow: hidden;
  background: #0b141d;
}
.paper-media-wrap img, .paper-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.paper-post-card:hover .paper-media-wrap img,
.paper-entry-card:hover .paper-img-wrap img {
  transform: scale(1.05);
}
.paper-img-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.recent-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.paper-meta-strip {
  padding: 16px 24px 0 24px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-code);
  color: var(--blue-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.paper-content-box {
  padding: 14px 24px 26px 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.paper-content-box h3 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 10px;
}
.paper-content-box p {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 20px;
}
.paper-link-action {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy-bg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.paper-link-action:hover { color: var(--blue-accent); }

/* Sidebar Widgets for 2-column Papers Layout */
.papers-layout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: start;
}
.sidebar-widget {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 30px;
  margin-bottom: 30px;
}
.sidebar-widget-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy-bg);
  margin-bottom: 18px;
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 10px;
}

/* ==========================================================================
   FAQ ACCORDIONS
   ========================================================================== */
.faq-section {
  padding: 95px 0 110px 0;
  background: #ffffff;
}
.faq-grid-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
}
.faq-accordion-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  transition: var(--transition-smooth);
}
.faq-question {
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.faq-question i {
  font-size: 13px;
  color: #64748b;
  transition: transform 0.25s ease;
}
.faq-item.open .faq-question i {
  transform: rotate(180deg);
  color: var(--blue-accent);
}
.faq-answer {
  display: none;
  padding: 0 26px 24px 26px;
  font-size: 14.5px;
  color: #475569;
  line-height: 1.8;
  border-top: 1px solid transparent;
}
.faq-item.open .faq-answer { display: block; }

/* ==========================================================================
   CONTACT & SCOPING FORM
   ========================================================================== */
.contact-section {
  padding: 95px 0 110px 0;
  background: #ffffff;
}
.contact-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
}
.scoping-form-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 44px 40px;
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.form-group-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.form-group-item label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #475569;
}
.form-input-ctrl {
  width: 100%;
  height: 48px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s ease;
}
.form-input-ctrl:focus { border-color: var(--blue-accent); }
textarea.form-input-ctrl {
  height: 130px;
  padding: 14px 16px;
  resize: vertical;
}

/* ==========================================================================
   PRE-FOOTER CTA COLLABORATION BANNER
   ========================================================================== */
.prefooter-cta-section, .about-cta-section {
  padding: 95px 0;
  background: linear-gradient(135deg, #0b141d 0%, #172534 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.prefooter-cta-section::before, .about-cta-section::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, transparent 70%);
  border-radius: 50%;
}
.prefooter-content-wrap {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.prefooter-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 16px;
  color: #ffffff;
}
.prefooter-desc {
  font-size: 16px;
  color: #94a3b8;
  line-height: 1.75;
  margin-bottom: 34px;
}
.cta-inner-split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 60px;
  align-items: center;
}

/* ==========================================================================
   MAIN FOOTER (MASTER HERRINGTON 4-COLUMN FOOTER)
   ========================================================================== */
.site-footer-herrington {
  background-color: var(--navy-bg);
  color: #ffffff;
  padding: 85px 0 35px 0;
  border-top: 1px solid var(--border-dark);
  font-size: 14px;
}
.footer-columns-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.6fr;
  gap: 50px;
  margin-bottom: 60px;
}
.footer-brand-logo {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
  display: inline-block;
  margin-bottom: 16px;
}
.footer-brand-logo span { color: var(--cyan-accent); }
.footer-about-text {
  color: #94a3b8;
  font-size: 13.5px;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 360px;
}
.footer-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
  margin-bottom: 22px;
}
.footer-contact-block p {
  font-size: 13px;
  color: #cbd5e1;
  margin-bottom: 8px;
  line-height: 1.5;
}
.footer-contact-block strong { color: #ffffff; }
.footer-social-row {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}
.footer-social-row a {
  color: #94a3b8;
  font-size: 13px;
  transition: color 0.2s ease;
}
.footer-social-row a:hover { color: var(--cyan-accent); }
.footer-link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-link-list li a {
  color: #94a3b8;
  font-size: 13.5px;
  transition: all 0.2s ease;
  display: inline-block;
}
.footer-link-list li a:hover {
  color: #ffffff;
  padding-left: 6px;
}

.newsletter-capsule {
  position: relative;
  margin-bottom: 16px;
}
.newsletter-capsule input {
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 0 54px 0 20px;
  font-size: 13px;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease;
}
.newsletter-capsule input:focus { border-color: var(--cyan-accent); }
.newsletter-capsule button {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: #ffffff;
  color: var(--navy-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.newsletter-capsule button:hover {
  background: var(--cyan-accent);
  color: #0b141d;
}
.newsletter-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 14px 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.bell-icon-circle {
  color: var(--cyan-accent);
  font-size: 15px;
  margin-top: 2px;
}
.notice-text {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
}

.footer-bottom-subbar {
  border-top: 1px solid var(--border-dark);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: #64748b;
}
.footer-bottom-links {
  display: flex;
  gap: 16px;
}
.footer-bottom-links a { color: #64748b; transition: color 0.2s ease; }
.footer-bottom-links a:hover { color: #cbd5e1; }
.footer-scroll-top {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.footer-scroll-top:hover {
  background: var(--cyan-accent);
  color: #0b141d;
  transform: translateY(-2px);
}

/* ==========================================================================
   OFFCANVAS MOBILE DRAWER & MODALS
   ========================================================================== */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  height: 100vh;
  background: #0b141d;
  color: #ffffff;
  z-index: 2000;
  padding: 30px 24px;
  box-shadow: 10px 0 30px rgba(0,0,0,0.4);
  transition: left 0.3s ease;
  overflow-y: auto;
}
.mobile-drawer.open { left: 0; }
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 1999;
  display: none;
}
.drawer-overlay.open { display: block; }
.drawer-close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 20px;
  float: right;
  cursor: pointer;
}
.drawer-menu {
  list-style: none;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.drawer-menu li a {
  color: #cbd5e1;
  font-size: 16px;
  font-weight: 600;
}
.drawer-menu li.active a { color: var(--cyan-accent); }

/* Quick Specs Modal */
.spec-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 20, 29, 0.85);
  backdrop-filter: blur(6px);
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.spec-modal-overlay.open { display: flex; }
.spec-modal-card {
  background: #ffffff;
  border-radius: 4px;
  max-width: 620px;
  width: 100%;
  padding: 40px;
  position: relative;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-light);
}
.spec-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
}
.spec-modal-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy-bg);
  margin-bottom: 14px;
}
.spec-modal-body {
  font-size: 14.5px;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 26px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1280px) {
  .container-herrington {
    max-width: 1160px;
    padding: 0 24px;
  }
  .main-menu {
    gap: 18px;
  }
  .menu-link {
    font-size: 13.5px;
    gap: 4px;
  }
  .top-info-group {
    gap: 20px;
  }
  .info-box-text {
    font-size: 11.5px;
  }
  .brand-logo {
    font-size: 23px;
  }
}

@media (max-width: 1200px) {
  .calc-input-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-results-strip { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .result-cell { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 12px; }
  .services-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .chessboard-row { grid-template-columns: 1fr; gap: 40px; }
  .tab-pane-content { grid-template-columns: 1fr; }
  .case-grid-row { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .metric-card-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 20px; }
  .tri-box-grid { grid-template-columns: 1fr; }
  .papers-3col-grid { grid-template-columns: repeat(2, 1fr); }
  .papers-layout-grid { grid-template-columns: 1fr; }
  .council-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-columns-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 992px) {
  .header-top { display: none; }
  .main-menu { display: none; }
  .mobile-menu-btn { display: block; }
  .mobile-brand { display: block; }
  .standards-bordered-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-split-grid { grid-template-columns: 1fr; }
  .contact-split-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .container-herrington { padding: 0 20px; }
  .hero-heading { font-size: 34px; }
  .calc-input-grid { grid-template-columns: 1fr; }
  .calc-results-strip { grid-template-columns: 1fr; }
  .services-grid-6 { grid-template-columns: 1fr; }
  .standards-bordered-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid-row { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: 1fr; }
  .papers-3col-grid { grid-template-columns: 1fr; }
  .council-grid { grid-template-columns: 1fr; }
  .footer-columns-grid { grid-template-columns: 1fr; }
  .footer-bottom-subbar { flex-direction: column; gap: 16px; text-align: center; }
}


/* ==========================================================================
   HERRINGTON TYPEWRITER & DYNAMIC CONSULTING ACCENTS
   ========================================================================== */
.pxl-title--typewriter-badge {
  display: inline-block;
  color: var(--cyan-accent, #00e5ff);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.pxl-title--typewriter-main {
  color: var(--cyan-accent, #00e5ff);
  display: inline-block;
  position: relative;
  border-bottom: 2px solid rgba(0, 229, 255, 0.4);
  min-height: 1.15em;
  vertical-align: bottom;
}

.pxl-title--typewriter-main::after {
  content: "|";
  display: inline-block;
  color: var(--gold-accent, #c5a880);
  font-weight: 300;
  animation: pxlCursorBlink 0.8s infinite;
  margin-left: 4px;
}

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


/* ==========================================================================
   MOBILE VIEWPORT & OVERFLOW-X LEAK ELIMINATION (100% RESPONSIVE)
   ========================================================================== */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: border-box;
}

/* Base Grids */
.service-cards-three-grid,
.corridors-scenarios-grid,
.papers-cards-three-grid,
.case-three-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
}

.desks-two-grid,
.scoping-form-row,
.chessboard-two-col-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
}

/* Tablet & Mobile Breakpoints */
@media (max-width: 992px) {
  /* 1. Navbar: Strictly Logo + Hamburger Only (Dark Midnight Navy) */
  .site-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #000014 !important;
    background-color: #000014 !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
    width: 100% !important;
  }
  .header-top {
    display: none !important;
  }
  .main-menu {
    display: none !important;
  }
  .nav-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin: 0 !important;
  }
  .nav-actions .support-call,
  .nav-actions .btn-pill-navy,
  .nav-actions .btn-pill-white,
  .nav-actions .btn-consultation {
    display: none !important;
  }
  .mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    font-size: 20px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
  }
  .mobile-menu-btn:hover,
  .mobile-menu-btn:active {
    background: rgba(0, 229, 255, 0.2) !important;
    border-color: #00e5ff !important;
    color: #00e5ff !important;
  }
  .nav-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    height: 64px !important;
  }
  .mobile-brand {
    display: block !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    letter-spacing: -0.4px !important;
  }

  /* 2. Responsive Grids collapsing */
  .service-cards-three-grid,
  .corridors-scenarios-grid,
  .papers-cards-three-grid,
  .case-three-columns {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .desks-two-grid,
  .scoping-form-row,
  .chessboard-two-col-text {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .chessboard-row {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .cb-image-wrap {
    min-height: 260px !important;
    max-height: 360px !important;
  }
}

@media (max-width: 768px) {
  .container-herrington {
    padding: 0 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-container {
    background-color: #000014 !important;
    background-image: linear-gradient(
      180deg,
      rgba(0, 0, 20, 0.94) 0%,
      rgba(7, 14, 21, 0.90) 40%,
      rgba(11, 20, 29, 0.88) 75%,
      rgba(0, 0, 20, 0.96) 100%
    ),
    url('https://geoproverisk.com/wp-content/uploads/2026/09/background-website.jpg') !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: auto !important;
    padding: 48px 0 52px 0 !important;
    display: block !important;
    position: relative !important;
    color: #ffffff !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .hero-container::before {
    display: none !important;
  }

  .hero-eyebrow {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 16px !important;
    display: inline-flex !important;
    background: rgba(11, 20, 29, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 229, 255, 0.45) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    padding: 7px 14px !important;
    border-radius: 4px !important;
    color: #00e5ff !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-heading {
    font-size: clamp(25px, 6.4vw, 31px) !important;
    line-height: 1.32 !important;
    letter-spacing: -0.4px !important;
    font-weight: 800 !important;
    margin-bottom: 16px !important;
    min-height: auto !important;
    display: block !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85) !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-heading br {
    display: inline !important;
  }

  .pxl-title--typewriter-main {
    font-size: inherit !important;
    line-height: inherit !important;
    display: inline !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    color: var(--cyan-accent, #00e5ff) !important;
    border-bottom: 2px solid rgba(0, 229, 255, 0.5) !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
  }

  .pxl-title--typewriter-main::after {
    content: "|" !important;
    display: inline !important;
    color: var(--gold-accent, #c5a880) !important;
    font-weight: 300 !important;
    animation: pxlCursorBlink 0.8s infinite !important;
    margin-left: 2px !important;
    vertical-align: baseline !important;
  }

  .hero-desc-lead {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 22px !important;
    color: #cbd5e1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-visual-thumb {
    height: 230px !important;
  }

  .hero-visual-thumb img {
    object-position: center top !important;
  }

  .hero-cta-inline {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hero-cta-inline .btn-pill-white {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    background: #ffffff !important;
    color: #000014 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
  }

  .hero-cta-inline .btn-hero-outline {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .hero-telemetry-row {
    flex-direction: column !important;
    gap: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-top: 20px !important;
  }

  .telemetry-item {
    font-size: 12.5px !important;
    color: #cbd5e1 !important;
  }
  .telemetry-item strong {
    color: #ffffff !important;
  }
  .telemetry-item i {
    color: #00e5ff !important;
  }

  .floating-calculator-card {
    padding: 24px 16px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .calc-input-grid,
  .calc-results-strip {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .calc-cta-bar {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
  }

  .standards-bordered-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .fiduciary-chessboard-section {
    padding: 60px 0 !important;
  }

  .tabs-nav-herrington {
    flex-direction: column !important;
    width: 100% !important;
  }

  .tab-btn-item {
    width: 100% !important;
    text-align: left !important;
  }

  .tab-pane-content {
    padding: 24px 16px !important;
  }

  .metrics-strip-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  .tri-box-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .footer-columns-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .footer-bottom-subbar {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .metrics-strip-inner {
    grid-template-columns: 1fr !important;
  }
  .hero-heading {
    font-size: 30px !important;
    line-height: 1.25 !important;
    min-height: auto !important;
    margin-bottom: 14px !important;
  }
  .pxl-title--typewriter-main {
    font-size: inherit !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }
}


/* ==========================================================================
   HERRINGTON EXECUTIVE DESIGN SYSTEM FOR GEOPROVE
   ========================================================================== */
.btn-glossy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  background: linear-gradient(135deg, #0088cc 0%, #005f9e 100%);
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 136, 204, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-glossy::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%
  );
  transform: rotate(30deg) translateY(-100%);
  transition: transform 0.75s ease;
}
.btn-glossy:hover::before {
  transform: rotate(30deg) translateY(100%);
}
.btn-glossy:hover {
  background: linear-gradient(135deg, #009be6 0%, #006eb8 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 136, 204, 0.4);
}

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  transform: translateY(-2px);
}

.herrington-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 4px;
  background: rgba(0, 180, 216, 0.12);
  color: #00e5ff;
  border: 1px solid rgba(0, 180, 216, 0.28);
}
.herrington-badge .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 8px #00e5ff;
  animation: badgePulse 2s infinite;
}

.section-header-herrington {
  margin-bottom: 48px;
}
.section-header-herrington.text-center {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.pxl-sub-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #0088cc;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.pxl-sub-title::before {
  content: '';
  width: 18px;
  height: 2px;
  background: #0088cc;
}
.pxl-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #0a1526;
  margin-bottom: 16px;
}
.pxl-title.text-white {
  color: #ffffff;
}
.pxl-desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: #475569;
}
.pxl-desc.text-muted {
  color: #94a3b8;
}

/* Herrington Split Hero */
.herrington-hero {
  background: #0a1526;
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(0, 180, 216, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(197, 168, 128, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, rgba(7, 14, 23, 0.98) 0%, rgba(10, 21, 38, 0.92) 100%);
  color: #ffffff;
  padding: 90px 0 100px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-title {
  font-size: 54px;
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.035em;
  margin: 20px 0 22px;
  color: #ffffff;
}
.hero-typed-text {
  color: #00e5ff;
  display: inline-block;
  min-height: 1.15em;
  vertical-align: bottom;
  border-bottom: 2px solid rgba(0, 229, 255, 0.4);
}
.typewriter-cursor {
  color: #c5a880;
  font-weight: 300;
  animation: cursorBlink 0.8s infinite;
  margin-left: 2px;
}
.hero-lead {
  font-size: 16.5px;
  line-height: 1.75;
  color: #cbd5e1;
  margin-bottom: 34px;
  max-width: 620px;
}
.hero-actions-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero-metrics-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.metric-item {
  display: flex;
  flex-direction: column;
}
.metric-item strong {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.metric-item strong span {
  color: #00e5ff;
}
.metric-item span.metric-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
  margin-top: 4px;
}

/* Sonar Radar Card */
.hero-showcase-card {
  background: rgba(15, 29, 50, 0.85);
  border: 1px solid rgba(0, 180, 216, 0.25);
  border-radius: 4px;
  padding: 28px;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  position: relative;
}
.showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.showcase-header-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #00e5ff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.showcase-live-tag {
  font-size: 11px;
  font-weight: 700;
  color: #10b981;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.showcase-live-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}
.corridor-selector-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.corridor-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.corridor-pill.active, .corridor-pill:hover {
  background: rgba(0, 180, 216, 0.18);
  border-color: #00e5ff;
  color: #ffffff;
}
.bathymetry-visualizer {
  background: #070e17;
  border-radius: 4px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
}
.visualizer-svg {
  width: 100%;
  height: 140px;
}
.visualizer-telemetry {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.telemetry-block .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
}
.telemetry-block .val {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 2px;
}
.showcase-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: #94a3b8;
}
.showcase-footer a {
  color: #00e5ff;
  font-weight: 700;
}
.floating-card-badge-top {
  position: absolute;
  top: -14px;
  right: 20px;
  background: #10b981;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Standards Strip */
.standards-strip {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 30px 0;
}
.standards-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.standards-lead-text {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #64748b;
  max-width: 220px;
  line-height: 1.4;
}
.standards-logos-row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.standard-logo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}
.standard-logo-item:hover {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #0088cc;
}
.standard-logo-item i {
  color: #0088cc;
  font-size: 16px;
}

/* Three Pillars */
.pillars-section {
  padding: 95px 0 70px;
  background: #f8fafc;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.pillar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 40px 32px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.pillar-card:hover {
  transform: translateY(-8px);
  border-color: #0088cc;
  box-shadow: 0 20px 48px rgba(10, 21, 38, 0.12);
}
.pillar-num {
  position: absolute;
  top: 28px;
  right: 28px;
  font-size: 38px;
  font-weight: 900;
  color: #e2e8f0;
  letter-spacing: -0.04em;
  line-height: 1;
}
.pillar-card:hover .pillar-num {
  color: rgba(0, 136, 204, 0.15);
}
.pillar-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 4px;
  background: #f0f7ff;
  color: #0088cc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}
.pillar-card:hover .pillar-icon-wrap {
  background: #0088cc;
  color: #ffffff;
  transform: scale(1.05);
}
.pillar-title {
  font-size: 21px;
  font-weight: 800;
  color: #0a1526;
  margin-bottom: 14px;
  line-height: 1.3;
}
.pillar-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: #475569;
  margin-bottom: 24px;
  flex-grow: 1;
}
.pillar-checklist {
  margin-bottom: 24px;
  border-top: 1px solid #e2e8f0;
  padding-top: 18px;
}
.pillar-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #0a1526;
  margin-bottom: 10px;
}
.pillar-checklist li i {
  color: #10b981;
  margin-top: 3px;
}
.pillar-action-link {
  font-size: 13.5px;
  font-weight: 700;
  color: #0088cc;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pillar-action-link:hover {
  gap: 12px;
}

/* Fiduciary Split */
.fiduciary-section {
  padding: 95px 0;
  background: #ffffff;
}
.fiduciary-split-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.fiduciary-media-card {
  position: relative;
}
.fiduciary-img-frame {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(10, 21, 38, 0.12);
}
.fiduciary-img-frame img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}
.fiduciary-floating-counter {
  position: absolute;
  bottom: -25px;
  right: 25px;
  background: #0a1526;
  color: #ffffff;
  padding: 24px 28px;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(10, 21, 38, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 280px;
}
.fiduciary-floating-counter .count-num {
  font-size: 38px;
  font-weight: 900;
  color: #00e5ff;
  line-height: 1;
  margin-bottom: 6px;
}
.fiduciary-floating-counter .count-label {
  font-size: 12px;
  line-height: 1.4;
  color: #cbd5e1;
}
.fiduciary-lead {
  font-size: 16px;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 28px;
}
.fiduciary-comparison-table {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 30px;
}
.comp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
}
.comp-row:last-child {
  border-bottom: none;
}
.comp-row.header {
  background: #f1f5f9;
  font-weight: 800;
  color: #0a1526;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
}
.comp-cell.negative {
  color: #ef4444;
  display: flex;
  align-items: center;
  gap: 6px;
}
.comp-cell.positive {
  color: #10b981;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Services Grid */
.services-section {
  padding: 95px 0;
  background: #070e17;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.service-card-herrington {
  background: #0f1d32;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 38px 32px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.service-card-herrington:hover {
  background: #13243d;
  border-color: rgba(0, 180, 216, 0.4);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.service-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.service-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  background: rgba(0, 180, 216, 0.12);
  color: #00e5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.service-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #c5a880;
  background: rgba(197, 168, 128, 0.12);
  padding: 4px 10px;
  border-radius: 4px;
}
.service-card-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.35;
}
.service-card-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #94a3b8;
  margin-bottom: 22px;
  flex-grow: 1;
}
.service-features-list {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
  margin-bottom: 20px;
}
.service-features-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #cbd5e1;
  margin-bottom: 8px;
}
.service-features-list li i {
  color: #00e5ff;
  font-size: 11px;
}
.service-action-link {
  font-size: 13px;
  font-weight: 700;
  color: #00e5ff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Dedicated Calculator */
.calculator-section {
  padding: 95px 0;
  background: #0a1526;
  color: #ffffff;
}
.calc-card-container {
  background: #0f1d32;
  border: 1px solid rgba(0, 180, 216, 0.3);
  border-radius: 4px;
  padding: 44px;
  box-shadow: 0 20px 48px rgba(10, 21, 38, 0.12);
}
.calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 16px;
}
.calc-header h3 {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
}
.calc-header p {
  font-size: 13.5px;
  color: #94a3b8;
  margin-top: 4px;
}
.calc-engine-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.3);
  padding: 6px 16px;
  border-radius: 4px;
}
.calc-grid-inputs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.calc-input-group label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
  margin-bottom: 8px;
}
.calc-select {
  background: #070e17;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: all 0.3s ease;
}
.calc-select:focus {
  border-color: #00e5ff;
}
.calc-results-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: #070e17;
  border-radius: 4px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 28px;
}
.result-item .r-label {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.result-item .r-val {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}
.result-item .r-val.highlight {
  color: #00e5ff;
}
.calc-bottom-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.calc-footnote {
  font-size: 12px;
  color: #94a3b8;
}

/* Corridors Grid */
.corridors-section {
  padding: 95px 0;
  background: #f8fafc;
}
.corridors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.corridor-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.corridor-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(10, 21, 38, 0.12);
  border-color: #0088cc;
}
.corridor-thumb {
  height: 220px;
  position: relative;
  overflow: hidden;
}
.corridor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.corridor-card:hover .corridor-thumb img {
  transform: scale(1.05);
}
.corridor-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #0a1526;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.corridor-body {
  padding: 28px 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.corridor-specs-strip {
  display: flex;
  gap: 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 12px;
}
.corridor-specs-strip span i {
  color: #0088cc;
  margin-right: 4px;
}
.corridor-title {
  font-size: 18.5px;
  font-weight: 800;
  color: #0a1526;
  margin-bottom: 12px;
  line-height: 1.35;
}
.corridor-desc {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}
.corridor-metric-badge {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 18px;
}

/* Spotlight $18.4M */
.spotlight-section {
  padding: 95px 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.spotlight-box {
  background: #0a1526;
  color: #ffffff;
  border-radius: 4px;
  padding: 50px;
  box-shadow: 0 20px 48px rgba(10, 21, 38, 0.12);
}
.spotlight-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.spotlight-col {
  background: #0f1d32;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
}
.spotlight-step-tag {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.spotlight-step-tag.red { color: #f87171; }
.spotlight-step-tag.cyan { color: #00e5ff; }
.spotlight-step-tag.green { color: #4ade80; }
.spotlight-col h4 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #ffffff;
}
.spotlight-col p {
  font-size: 13.5px;
  color: #cbd5e1;
  line-height: 1.6;
}

/* Papers Grid */
.papers-section {
  padding: 95px 0;
  background: #f8fafc;
}
.papers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.paper-card-herrington {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}
.paper-card-herrington:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(10, 21, 38, 0.12);
  border-color: #0088cc;
}
.paper-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.paper-code {
  font-size: 11px;
  font-weight: 800;
  color: #0088cc;
  background: #f0f7ff;
  padding: 4px 10px;
  border-radius: 4px;
}
.paper-date {
  font-size: 11.5px;
  color: #94a3b8;
}
.paper-title {
  font-size: 18px;
  font-weight: 800;
  color: #0a1526;
  margin-bottom: 12px;
  line-height: 1.4;
}
.paper-excerpt {
  font-size: 13.5px;
  line-height: 1.65;
  color: #475569;
  margin-bottom: 24px;
  flex-grow: 1;
}
.paper-download-btn {
  font-size: 13px;
  font-weight: 700;
  color: #0088cc;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Contact & Regional Desks */
.contact-scoping-section {
  padding: 95px 0;
  background: #070e17;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.scoping-split-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: flex-start;
}
.regional-desks-pane h3 {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}
.regional-desks-pane p.lead {
  font-size: 15px;
  color: #94a3b8;
  line-height: 1.7;
  margin-bottom: 34px;
}
.desk-card-item {
  background: #0f1d32;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.desk-card-item:hover {
  border-color: rgba(0, 180, 216, 0.4);
}
.desk-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.desk-status {
  font-size: 10.5px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
}
.desk-address {
  font-size: 12.5px;
  color: #cbd5e1;
  margin-bottom: 12px;
}
.desk-contacts {
  font-size: 12.5px;
  color: #00e5ff;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scoping-form-box {
  background: #ffffff;
  color: #0f172a;
  border-radius: 4px;
  padding: 44px;
  box-shadow: 0 20px 48px rgba(10, 21, 38, 0.12);
}
.scoping-form-box h4 {
  font-size: 22px;
  font-weight: 800;
  color: #0a1526;
  margin-bottom: 8px;
}
.scoping-form-box p.form-desc {
  font-size: 13.5px;
  color: #475569;
  margin-bottom: 28px;
}
.form-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-group-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.form-group-field label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #0a1526;
  margin-bottom: 6px;
}
.form-control-input, .form-control-select, .form-control-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13.5px;
  color: #0f172a;
  outline: none;
  transition: all 0.3s ease;
  background: #f8fafc;
}
.form-control-input:focus, .form-control-select:focus, .form-control-textarea:focus {
  border-color: #0088cc;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(0, 136, 204, 0.15);
}
.form-control-textarea {
  height: 90px;
  resize: vertical;
}
.form-submit-btn {
  width: 100%;
  padding: 14px;
  background: #0088cc;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
}
.form-submit-btn:hover {
  background: #0073ad;
  transform: translateY(-2px);
}

/* Dynamic Hero Split (Herrington Balanced Layout - Dominant 3D Visual) */
.hero-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
}
@media (max-width: 992px) {
  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.hero-text-wrap {
  min-width: 0;
}
.hero-sector-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-sector-list li {
  font-size: 13.5px;
  line-height: 1.45;
  color: #cbd5e1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hero-sector-list li i {
  color: var(--cyan-accent, #00e5ff);
  font-size: 11px;
  flex-shrink: 0;
}
.hero-sector-list li strong {
  color: #ffffff;
  font-weight: 700;
}
.hero-visual-card {
  background: rgba(10, 20, 38, 0.75);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 50px rgba(0, 229, 255, 0.2);
  position: relative;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  margin-top: -20px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hero-visual-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.8), 0 0 60px rgba(0, 229, 255, 0.28);
}
.hero-visual-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 520px;
  max-height: 620px;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020617;
}
.hero-visual-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-visual-card:hover .hero-visual-thumb img {
  transform: scale(1.03);
}
.hero-visual-badge-top {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #10b981;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-visual-badge-bottom {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(11, 25, 44, 0.88);
  backdrop-filter: blur(8px);
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.3);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-telemetry-body {
  padding: 20px 24px;
}
.corridor-pill-strip {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.corridor-pill-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.corridor-pill-btn.active, .corridor-pill-btn:hover {
  background: rgba(0, 229, 255, 0.18);
  border-color: #00e5ff;
  color: #ffffff;
}
.telemetry-readouts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: #070e17;
  padding: 14px 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.t-cell {
  display: flex;
  flex-direction: column;
}
.t-cell .t-lbl {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.t-cell .t-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 2px;
}

/* Dynamic Service Card Image Headers */
.service-card-media {
  height: 180px;
  position: relative;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  margin: -28px -24px 20px -24px;
}
.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.service-card:hover .service-card-media img {
  transform: scale(1.06);
}
.service-card-badge-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(11, 25, 44, 0.88);
  backdrop-filter: blur(6px);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Floating Image Counter */
.floating-img-counter {
  position: absolute;
  bottom: -20px;
  right: 20px;
  background: var(--navy-bg);
  color: #ffffff;
  padding: 18px 22px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 16px 36px rgba(0,0,0,0.3);
  max-width: 260px;
  z-index: 5;
}
.floating-img-counter .count-big {
  font-size: 32px;
  font-weight: 900;
  color: var(--cyan-accent);
  line-height: 1;
  margin-bottom: 4px;
}
.floating-img-counter .count-txt {
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.35;
}


/* ==========================================================================
   SECTION: FEATURED EXECUTIVE LEAD MAGNET (HERRINGTON WHITE PAPER BLUEPRINT)
   ========================================================================== */
.leadmagnet-section {
  padding: 90px 0;
  background-color: #f1f5f9;
  position: relative;
}
.leadmagnet-card {
  background-color: #000014;
  background-image: radial-gradient(circle at 95% 15%, rgba(0, 217, 252, 0.15) 0%, transparent 50%),
                    radial-gradient(circle at 5% 90%, rgba(0, 31, 59, 0.45) 0%, transparent 45%);
  border: 1px solid rgba(0, 217, 252, 0.3);
  border-radius: 4px;
  box-shadow: 0 25px 60px rgba(0, 0, 20, 0.35);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  padding: 55px 60px;
  position: relative;
  overflow: hidden;
}
.leadmagnet-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00d9fc 0%, #00c3e3 50%, #001f3b 100%);
}

/* Left Content Column */
.leadmagnet-content-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.leadmagnet-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 217, 252, 0.12);
  border: 1px solid rgba(0, 217, 252, 0.4);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #00d9fc;
  text-transform: uppercase;
  margin-bottom: 20px;
  width: fit-content;
}
.leadmagnet-badge .pulse-dot {
  width: 6px;
  height: 6px;
  background-color: #00d9fc;
  border-radius: 50%;
  box-shadow: 0 0 10px #00d9fc;
}
.leadmagnet-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.6px;
  margin-bottom: 18px;
}
.leadmagnet-lead {
  font-size: 15.5px;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 28px;
}
.leadmagnet-highlights-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 30px;
}
.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.highlight-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(0, 229, 255, 0.15);
  border: 1px solid rgba(0, 229, 255, 0.4);
  color: #00e5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 3px;
}
.highlight-text {
  font-size: 14px;
  line-height: 1.6;
  color: #e2e8f0;
}
.highlight-text strong {
  color: #ffffff;
}
.leadmagnet-specs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.spec-pill {
  font-size: 12px;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.04);
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.spec-pill i {
  color: #00e5ff;
  font-size: 11px;
}

/* Right Action Column */
.leadmagnet-action-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.leadmagnet-form-card {
  background: rgba(18, 28, 39, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 34px 30px;
  width: 100%;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  position: relative;
}

/* 3D Report Preview Mockup */
.report-mockup-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  perspective: 800px;
}
.report-book-3d {
  width: 170px;
  height: 220px;
  background: linear-gradient(135deg, #0d1a26 0%, #060d14 100%);
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 255, 0.4);
  box-shadow: -10px 15px 25px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 229, 255, 0.1);
  transform: rotateY(-16deg) rotateX(6deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.report-book-3d:hover {
  transform: rotateY(-8deg) rotateX(2deg) translateY(-4px);
  box-shadow: -14px 22px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 229, 255, 0.25);
}
.report-book-3d::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.3) 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
}
.book-cover-top {
  padding-left: 10px;
}
.book-brand {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}
.book-brand span {
  color: #00e5ff;
}
.book-tag {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #94a3b8;
  text-transform: uppercase;
  margin-top: 3px;
}
.book-cover-title {
  font-size: 11px;
  font-weight: 700;
  color: #00e5ff;
  line-height: 1.35;
  padding-left: 10px;
  letter-spacing: 0.2px;
  border-left: 2px solid #00e5ff;
  margin: 10px 0;
}
.book-cover-meta {
  padding-left: 10px;
  font-size: 8px;
  color: #64748b;
  display: flex;
  justify-content: space-between;
}
.book-seal {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 229, 255, 0.15);
  border: 1px solid rgba(0, 229, 255, 0.3);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}
.book-seal i {
  color: #00e5ff;
}

.form-header-micro {
  text-align: center;
  margin-bottom: 20px;
}
.form-header-micro h3 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}
.form-header-micro p {
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.5;
}

.leadmagnet-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.lm-input-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 6px;
}
.lm-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.lm-input-wrap i {
  position: absolute;
  left: 14px;
  color: #64748b;
  font-size: 13px;
  pointer-events: none;
}
.lm-input {
  width: 100%;
  height: 46px;
  background: rgba(11, 20, 29, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0 14px 0 40px;
  font-size: 13.5px;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lm-input:focus {
  border-color: #00e5ff;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}
.lm-input::placeholder {
  color: #475569;
}

.btn-leadmagnet-download {
  height: 48px;
  width: 100%;
  border: none;
  border-radius: 4px;
  background: #00d9fc;
  color: #000014;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 217, 252, 0.3);
  margin-top: 4px;
}
.btn-leadmagnet-download:hover {
  background: #b0f3fe;
  color: #000014;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 217, 252, 0.45);
}
.leadmagnet-guarantee {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  color: #8f9fb6;
  line-height: 1.4;
  text-align: center;
}
.leadmagnet-guarantee i {
  color: #00d9fc;
  font-size: 11px;
  flex-shrink: 0;
}

/* Lead Magnet Responsive */
@media (max-width: 991px) {
  .leadmagnet-card {
    grid-template-columns: 1fr;
    padding: 40px 25px;
    gap: 35px;
  }
  .leadmagnet-title {
    font-size: 26px;
  }
  .report-mockup-wrapper {
    margin-bottom: 18px;
  }
  .report-book-3d {
    width: 150px;
    height: 195px;
  }
}

/* ==========================================================================
       SECTION 8: REGIONAL DESKS & TECHNICAL PRE-SCOPING (BLUEPRINT SPECIFICATION)
       ========================================================================== */
    .regional-desks-section {
      padding: 95px 0 105px 0;
      background-color: #f8fafc;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
    }
    .desks-section-header {
      text-align: center;
      max-width: 840px;
      margin: 0 auto 55px auto;
    }
    .desks-eyebrow {
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #0088cc;
      display: inline-block;
      margin-bottom: 12px;
    }
    .desks-title {
      font-size: 40px;
      font-weight: 800;
      color: #0b141d;
      letter-spacing: -1px;
      line-height: 1.2;
      margin-bottom: 16px;
      font-family: var(--font-sans);
    }
    .desks-subtitle {
      font-size: 16px;
      line-height: 1.7;
      color: #475569;
    }
    .desks-split-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 48px;
      align-items: flex-start;
    }
    .scoping-card-form {
      background: #ffffff;
      border-radius: 4px;
      padding: 44px;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
      border: 1px solid #e2e8f0;
    }
    .form-badge-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #0088cc;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      padding: 5px 12px;
      border-radius: 4px;
      margin-bottom: 16px;
    }
    .form-title {
      font-size: 26px;
      font-weight: 800;
      color: #0b141d;
      letter-spacing: -0.5px;
      margin-bottom: 10px;
    }
    .form-lead {
      font-size: 14px;
      line-height: 1.6;
      color: #64748b;
      margin-bottom: 28px;
    }
    .form-grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-bottom: 18px;
    }
    .input-field-group {
      margin-bottom: 18px;
    }
    .input-field-group label {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 6px;
    }
    .input-styled, .textarea-styled {
      width: 100%;
      padding: 12px 16px;
      font-size: 14px;
      font-family: var(--font-sans);
      color: #0f172a;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      box-sizing: border-box;
    }
    .input-styled:focus, .textarea-styled:focus {
      outline: none;
      border-color: #0088cc;
      box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.15);
    }
    .btn-submit-scoping {
      width: 100%;
      background: #0b141d;
      color: #ffffff;
      border: none;
      padding: 15px 24px;
      border-radius: 4px;
      font-size: 14.5px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      transition: all 0.25s ease;
      margin-top: 10px;
    }
    .btn-submit-scoping:hover {
      background: #1e293b;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(11, 20, 29, 0.25);
    }

    .regional-desks-column {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .regional-desk-card {
      background: #ffffff;
      border-radius: 4px;
      padding: 30px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
      transition: transform 0.2s ease;
    }
    .regional-desk-card:hover {
      transform: translateY(-2px);
    }
    .desk-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid #f1f5f9;
    }
    .desk-title-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .desk-flag-icon {
      font-size: 26px;
    }
    .desk-name {
      font-size: 17px;
      font-weight: 800;
      color: #0b141d;
      letter-spacing: -0.3px;
    }
    .desk-tagline {
      display: block;
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
    }
    .desk-status-pill {
      font-size: 11px;
      font-weight: 700;
      color: #059669;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      padding: 4px 10px;
      border-radius: 4px;
    }
    .desk-focus-text {
      font-size: 13.5px;
      line-height: 1.6;
      color: #475569;
      margin-bottom: 16px;
    }
    .desk-contact-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .desk-contact-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13.5px;
      color: #334155;
    }
    .desk-contact-item i {
      color: #0088cc;
      width: 16px;
      text-align: center;
    }
    .desk-contact-item a {
      color: #0b141d;
      font-weight: 600;
      text-decoration: none;
    }
    .desk-contact-item a:hover {
      color: #0088cc;
      text-decoration: underline;
    }
    .desk-fiduciary-card {
      background: #0b141d;
      color: #ffffff;
      border-radius: 4px;
      padding: 24px;
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }
    .desk-fiduciary-card .fiduciary-icon {
      width: 44px;
      height: 44px;
      border-radius: 4px;
      background: rgba(0, 229, 255, 0.15);
      color: #00e5ff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .desk-fiduciary-card h5 {
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 6px;
    }
    .desk-fiduciary-card p {
      font-size: 13px;
      line-height: 1.55;
      color: #94a3b8;
      margin: 0;
    }
    @media (max-width: 992px) {
      .desks-split-grid {
        grid-template-columns: 1fr;
      }
      .form-grid-2col {
        grid-template-columns: 1fr;
      }
      .scoping-card-form {
        padding: 28px 20px;
      }
    }


.site-nav.is-sticky {
  box-shadow: 0 8px 30px rgba(11, 20, 29, 0.09) !important;
}



/* ==========================================================================
   LANGUAGE SWITCHER (BILINGUAL EN / ID)
   ========================================================================== */
.lang-switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 6px;
}
.lang-switch-wrap .lang-btn {
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.lang-switch-wrap .lang-btn:hover {
  color: #0088cc;
}
.lang-switch-wrap .lang-btn.active {
  color: #0b141d;
  font-weight: 800;
  border-bottom: 2px solid #0088cc;
  padding-bottom: 1px;
}
.lang-switch-wrap .lang-sep {
  color: #cbd5e1;
  font-size: 10px;
}

/* Mobile Drawer Language Switcher */
.drawer-lang-switch {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 4px;
  margin: 15px 0 20px 0;
  gap: 4px;
}
.drawer-lang-btn {
  flex: 1;
  text-align: center;
  padding: 9px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.2s ease;
}
.drawer-lang-btn.active {
  background: #00e5ff;
  color: #0b141d;
  font-weight: 800;
}
.drawer-lang-btn:not(.active):hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   UNIFIED NAVBAR CTA & ENHANCED MOBILE DRAWER STYLING
   ========================================================================== */
.btn-pill-navy {
      background-color: var(--navy-bg, #0b141d);
      color: #ffffff;
      font-size: 13.5px;
      font-weight: 600;
      padding: 12px 26px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1px solid rgba(0, 229, 255, 0.25);
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(11, 20, 29, 0.25);
    }
    .btn-pill-navy:hover {
      background: linear-gradient(135deg, #0088cc 0%, #004d80 100%) !important;
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(0, 136, 204, 0.45) !important;
      border-color: rgba(0, 229, 255, 0.6) !important;
      color: #ffffff !important;
    }
    .btn-pill-navy i {
      font-size: 12px;
      transition: transform 0.25s ease;
    }
    .btn-pill-navy:hover i {
      transform: translateX(4px);
    }

    /* Offcanvas Mobile Drawer Enhanced */
    .mobile-drawer {
      position: fixed;
      top: 0;
      left: -340px;
      width: 320px;
      max-width: 86vw;
      height: 100vh;
      background: #0b141d;
      color: #ffffff;
      z-index: 2000;
      padding: 24px 18px;
      box-shadow: 12px 0 35px rgba(0,0,0,0.5);
      transition: left 0.32s cubic-bezier(0.16, 1, 0.3, 1);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    .mobile-drawer.open {
      left: 0 !important;
    }
    .drawer-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(4px);
      z-index: 1999;
      display: none;
    }
    .drawer-overlay.open {
      display: block !important;
    }
    .drawer-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .drawer-brand {
      font-size: 20px;
      font-weight: 800;
      color: #ffffff;
      text-decoration: none;
      letter-spacing: -0.3px;
      display: block;
    }
    .drawer-brand span {
      color: #00e5ff;
    }
    .drawer-tagline {
      font-size: 10.5px;
      font-weight: 600;
      color: #00e5ff;
      letter-spacing: 0.3px;
      margin-top: 3px;
      line-height: 1.35;
    }
    .drawer-close {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #ffffff;
      width: 34px;
      height: 34px;
      border-radius: 4px;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .drawer-close:hover {
      background: rgba(0, 229, 255, 0.15);
      color: #00e5ff;
      border-color: #00e5ff;
    }

    /* Drawer Menu List */
    .drawer-menu {
      list-style: none;
      padding: 0;
      margin: 16px 0 0 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
    }
    .drawer-item {
      position: relative;
    }
    .drawer-link-row,
    .drawer-link-direct {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: 4px;
      color: #e2e8f0;
      font-size: 14.5px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;
    }
    .drawer-link-row:hover,
    .drawer-link-direct:hover {
      background: rgba(255, 255, 255, 0.05);
      color: #00e5ff;
    }
    .drawer-item.active > .drawer-link-direct,
    .drawer-item.active > .drawer-link-row {
      color: #00e5ff;
      background: rgba(0, 229, 255, 0.06);
    }
    .drawer-chevron {
      font-size: 11px;
      color: #94a3b8;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
    }
    .drawer-item.open > .drawer-link-row .drawer-chevron {
      transform: rotate(180deg);
      color: #00e5ff;
    }
    .drawer-item.open > .drawer-link-row {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.05);
    }

    /* Submenu Dropdowns */
    .drawer-submenu {
      list-style: none;
      padding: 4px 0 6px 12px;
      margin: 3px 0 6px 10px;
      border-left: 2px solid rgba(0, 229, 255, 0.35);
      display: none;
      flex-direction: column;
      gap: 3px;
      animation: drawerSubFadeIn 0.22s ease;
    }
    @keyframes drawerSubFadeIn {
      from { opacity: 0; transform: translateY(-3px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .drawer-item.open > .drawer-submenu {
      display: flex !important;
    }
    .drawer-submenu-tag {
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.9px;
      color: #00e5ff;
      padding: 4px 8px 2px;
      opacity: 0.9;
    }
    .drawer-submenu li a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 4px;
      color: #94a3b8;
      font-size: 12.5px;
      font-weight: 500;
      line-height: 1.45;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .drawer-submenu li a i {
      font-size: 9px;
      opacity: 0.6;
      color: #00e5ff;
      transition: transform 0.2s ease;
    }
    .drawer-submenu li a:hover {
      color: #ffffff;
      background: rgba(0, 229, 255, 0.08);
    }
    .drawer-submenu li a:hover i {
      opacity: 1;
      transform: translateX(3px);
    }

    /* Mobile Drawer Multi-Pillar Structure */
    .drawer-pillar-group {
      margin-top: 8px;
      margin-bottom: 4px;
      padding-bottom: 6px;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
    }
    .drawer-pillar-group:last-of-type {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .drawer-pillar-head {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      color: #38bdf8 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.6px !important;
      padding: 7px 10px !important;
      background: rgba(56, 189, 248, 0.08) !important;
      border: 1px solid rgba(56, 189, 248, 0.16) !important;
      border-radius: 4px !important;
      margin-bottom: 3px !important;
      cursor: pointer !important;
      user-select: none !important;
      transition: all 0.2s ease !important;
    }
    .drawer-pillar-head:hover {
      background: rgba(56, 189, 248, 0.16) !important;
      color: #ffffff !important;
      border-color: rgba(56, 189, 248, 0.4) !important;
    }
    .drawer-pillar-head i:first-child {
      color: #00e5ff;
      font-size: 10.5px;
      margin-right: 6px;
    }
    .drawer-pillar-chevron {
      font-size: 10px !important;
      color: #38bdf8 !important;
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
    }

    /* Active / Open Pillar Accordion State */
    .drawer-pillar-group.open .drawer-pillar-head {
      background: rgba(0, 229, 255, 0.12) !important;
      border-color: rgba(0, 229, 255, 0.38) !important;
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(0, 229, 255, 0.12) !important;
    }
    .drawer-pillar-group.open .drawer-pillar-chevron {
      transform: rotate(180deg) !important;
      color: #00e5ff !important;
    }

    /* Sub-items List with Glowing Left Category Indicator Line */
    .drawer-pillar-list {
      list-style: none;
      display: none !important;
      padding: 6px 0 6px 12px !important;
      margin: 4px 0 8px 10px !important;
      border-left: 2.5px solid #00e5ff !important;
      box-shadow: -2px 0 10px rgba(0, 229, 255, 0.22) !important;
      flex-direction: column;
      gap: 3px;
      animation: drawerPillarFadeIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes drawerPillarFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .drawer-pillar-group.open .drawer-pillar-list {
      display: flex !important;
    }
    .drawer-pillar-list li a {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 6px !important;
      padding: 6px 8px !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      color: #cbd5e1 !important;
      border-radius: 4px !important;
      text-decoration: none !important;
      transition: all 0.18s ease !important;
      line-height: 1.35 !important;
    }
    .drawer-pillar-list li a:hover {
      color: #ffffff !important;
      background: rgba(0, 229, 255, 0.08) !important;
      padding-left: 11px !important;
    }
    .drawer-pillar-list li a .badge-live-nav {
      flex-shrink: 0;
    }
    .drawer-pillar-explore a {
      font-size: 11px !important;
      font-weight: 700 !important;
      color: #00e5ff !important;
      margin-top: 2px !important;
      padding-top: 4px !important;
      border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
    }
    .drawer-pillar-explore a:hover {
      color: #ffffff !important;
      padding-left: 10px !important;
    }

    /* Bottom Footer Section in Drawer */
    .drawer-footer-section {
      margin-top: 22px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .btn-drawer-capsule {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 13px 20px;
      border-radius: 4px;
      background-color: #0e2032;
      color: #ffffff;
      font-size: 13.5px;
      font-weight: 700;
      text-decoration: none;
      border: 1px solid rgba(0, 229, 255, 0.35);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }
    .btn-drawer-capsule:hover,
    .btn-drawer-capsule:active {
      background: linear-gradient(135deg, #0088cc 0%, #004d80 100%) !important;
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(0, 136, 204, 0.45) !important;
      border-color: rgba(0, 229, 255, 0.7) !important;
      color: #ffffff !important;
    }
    .btn-drawer-capsule i {
      font-size: 12px;
      transition: transform 0.25s ease;
    }
    .btn-drawer-capsule:hover i {
      transform: translateX(4px);
    }

    .drawer-hotline-card {
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 4px;
      text-align: center;
    }
    .drawer-hotline-label {
      font-size: 10.5px;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 2px;
    }
    .drawer-hotline-num {
      font-size: 13.5px;
      font-weight: 700;
      color: #00e5ff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }



/* ==========================================================================
   HERRINGTON CLONE INTEGRATED SECTIONS (HOMEPAGE & ARCHITECTURE)
   ========================================================================== */
/* ==========================================================================
       SECTION: CORE SERVICES (HERRINGTON CLONE LAYOUT)
       ========================================================================== */
    .services-carousel-section {
      background-color: #f6f8fa;
      position: relative;
      padding: 110px 0 100px 0;
      overflow: hidden;
    }

    /* Motif background lengkungan halus khas Herrington di kiri atas */
    .services-carousel-section::before {
      content: "";
      position: absolute;
      top: -120px;
      left: -120px;
      width: 500px;
      height: 500px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      box-shadow: 0 0 0 70px rgba(0, 0, 0, 0.015), 0 0 0 140px rgba(0, 0, 0, 0.01);
      pointer-events: none;
    }

    /* Section Header Center */
    .section-header-herrington {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 55px auto;
      position: relative;
      z-index: 2;
    }
    .sec-eyebrow {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #121c27;
      margin-bottom: 16px;
      display: block;
    }
    .sec-title {
      font-size: 46px;
      font-weight: 600;
      color: #000000;
      line-height: 1.15;
      letter-spacing: -1px;
      margin-bottom: 16px;
      font-family: var(--font-sans);
    }
    .sec-subtitle {
      font-size: 16px;
      color: #64748b;
      margin-bottom: 25px;
    }
    .sec-divider-bar {
      width: 80px;
      height: 3px;
      background-color: #121c27;
      margin: 0 auto;
    }

    /* ==========================================================================
       5-PILLAR BENTO GRID & MOBILE TOUCH-SWIPE SLIDER
       ========================================================================== */
    .pillars-bento-wrapper {
      position: relative;
      margin-bottom: 30px;
    }

    /* Desktop Layout: 3 Columns Top + 2 Columns Bottom */
    .pillars-bento-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 24px;
      position: relative;
      z-index: 2;
    }

    .pillar-bento-card {
      background: #ffffff;
      padding: 0;
      border-radius: 4px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      grid-column: span 2; /* 3 cards in row 1 (2+2+2 = 6) */
      box-sizing: border-box;
      overflow: hidden;
    }
    .pillar-bento-card.pillar-wide {
      grid-column: span 3; /* 2 cards in row 2 (3+3 = 6) */
    }
    .pillar-bento-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 35px rgba(0, 31, 59, 0.08);
      border-color: #cbd5e1;
    }

    /* Thumbnail frame at top of card */
    .pillar-card-thumb {
      width: 100%;
      height: 180px;
      position: relative;
      overflow: hidden;
      background: #0b141d;
    }
    .pillar-bento-card.pillar-wide .pillar-card-thumb {
      height: 200px;
    }
    .pillar-card-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .pillar-bento-card:hover .pillar-card-thumb img {
      transform: scale(1.04);
    }

    /* Card body containing text and metadata */
    .pillar-card-body {
      padding: 22px 24px 26px 24px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      box-sizing: border-box;
    }

    .pillar-bento-card h3 {
      font-size: 20px;
      font-weight: 700;
      color: #001f3b;
      margin-top: 2px;
      margin-bottom: 12px;
      line-height: 1.35;
      letter-spacing: -0.3px;
    }
    .card-scope-text {
      font-size: 14px;
      line-height: 1.6;
      color: #475569;
      margin-bottom: 18px;
    }

    /* Risk Shield Callout Box: Slate Gray Gunmetal Theme (Clean & Architectural) */
    .pillar-risk-shield {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-left: 3px solid #001f3b;
      border-radius: 3px;
      padding: 10px 12px;
      margin-bottom: 18px;
      font-size: 12px;
      line-height: 1.55;
      color: #334155;
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .pillar-risk-shield strong {
      color: #0f172a;
    }
    .pillar-risk-shield i {
      font-size: 13px;
      color: #0088cc;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .pillar-bento-card .card-readmore {
      margin-top: auto;
      font-size: 13.5px;
      font-weight: 700;
      color: #001f3b;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: color 0.2s ease;
    }
    .pillar-bento-card .card-readmore i {
      font-size: 12px;
      transition: transform 0.2s ease;
    }
    .pillar-bento-card:hover .card-readmore i {
      transform: translateX(4px);
    }
    .pillar-bento-card:hover .card-readmore {
      color: #0088cc;
    }

    /* Mobile Swipe Navigation Controls */
    .pillars-mobile-swipe-nav {
      display: none; /* Hidden on desktop */
    }

    /* ==========================================================================
       BLOCK A: HOW WE HELP / 6-STAGE FRAMEWORK
       ========================================================================== */
    .how-we-help-section {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 44px 36px;
      margin-top: 60px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    }
    .framework-header {
      text-align: center;
      max-width: 860px;
      margin: 0 auto 40px auto;
    }
    .sub-badge-eyebrow {
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: 2.5px;
      color: #0088cc;
      text-transform: uppercase;
      margin-bottom: 12px;
      display: block;
    }
    .framework-header h3 {
      font-size: 38px;
      font-weight: 800;
      color: #0b141d;
      margin-bottom: 14px;
      line-height: 1.25;
      letter-spacing: -0.5px;
    }
    .framework-header p {
      font-size: 16px;
      color: #475569;
      line-height: 1.65;
    }
    .six-step-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
    }
    .step-mini-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 22px 18px;
      text-align: left;
      transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .step-mini-card:hover {
      border-color: #0088cc;
      background: #ffffff;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 31, 59, 0.06);
    }
    .step-mini-num {
      font-size: 15px;
      font-weight: 900;
      color: #0088cc;
      font-family: var(--font-code);
      margin-bottom: 8px;
    }
    .step-mini-card h4 {
      font-size: 17px;
      font-weight: 800;
      color: #0b141d;
      margin-bottom: 6px;
    }
    .step-mini-card p {
      font-size: 13.5px;
      color: #475569;
      line-height: 1.55;
    }

    /* ==========================================================================
       BLOCK B: STRATEGIC VALUE / WHY PARTNER WITH GEOPROVE
       ========================================================================== */
    .strategic-value-section {
      margin-top: 75px;
    }
    .strategic-value-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .value-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 4px; /* Sudut agak meruncing tajam gaya Herrington */
      padding: 44px 34px 36px 34px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      position: relative;
      cursor: pointer;
      transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                  border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                  transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                  box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .value-card:hover {
      background: #0f172a; /* Warna gelap pekat Herrington Abyssal Navy */
      border-color: #0f172a;
      transform: translateY(-4px);
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.22);
    }

    /* Baris Atas: Ikon Box & Nomor Urut */
    .value-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 28px;
    }
    .value-card-icon {
      width: 72px;
      height: 72px;
      border-radius: 4px; /* Sudut meruncing halus serasi dengan kartu */
      background: #0f172a; /* Default kotak ikon gelap pekat */
      color: #ffffff;      /* Default ikon putih bersih */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                  color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .value-card-icon i {
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      display: inline-block;
    }
    .value-card-num {
      font-family: var(--font-code, 'SF Mono', monospace);
      font-size: 15px;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 0.5px;
      transition: color 0.35s ease;
      margin-top: 4px;
    }

    /* Interaksi Hover: Kotak Ikon Berubah Warna & Ikon Berputar */
    .value-card:hover .value-card-icon {
      background: #1e293b; /* Kontras elegan di atas background navy pekat */
      color: #38bdf8;      /* Sonar Cyan terang & jelas */
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(56, 189, 248, 0.25);
    }
    .value-card:hover .value-card-icon i {
      transform: rotate(360deg); /* Animasi berputar penuh saat di-hover */
    }
    .value-card:hover .value-card-num {
      color: #38bdf8;
    }

    /* Tipografi Kartu */
    .value-card h4 {
      font-size: 22px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.3;
      margin-bottom: 6px;
      letter-spacing: -0.3px;
      transition: color 0.35s ease;
    }
    .value-sub {
      font-size: 12.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: #0284c7;
      margin-bottom: 16px;
      display: block;
      transition: color 0.35s ease;
    }
    .value-card p {
      font-size: 14.5px;
      color: #475569;
      line-height: 1.65;
      margin-bottom: 22px;
      transition: color 0.35s ease;
    }
    .value-checklist {
      list-style: none;
      padding: 0;
      margin: 0 0 24px 0;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }
    .value-checklist li {
      font-size: 13.5px;
      color: #334155;
      line-height: 1.5;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      transition: color 0.35s ease;
    }
    .value-checklist li i {
      color: #0284c7;
      font-size: 13px;
      margin-top: 3px;
      flex-shrink: 0;
      transition: color 0.35s ease;
    }

    /* Warna Teks Berubah Otomatis Saat Hover Kartu (High-Contrast Mode) */
    .value-card:hover h4 {
      color: #ffffff;
    }
    .value-card:hover .value-sub {
      color: #38bdf8;
    }
    .value-card:hover p {
      color: #cbd5e1;
    }
    .value-card:hover .value-checklist li {
      color: #e2e8f0;
    }
    .value-card:hover .value-checklist li i {
      color: #38bdf8;
    }

    /* Animasi Garis Bawah Simultan (0% -> 100%) */
    .value-card-line-wrap {
      width: 100%;
      height: 2px;
      background: #f1f5f9; /* Samar pada kartu putih default */
      position: relative;
      margin-top: auto;
      overflow: hidden;
      border-radius: 1px;
      transition: background 0.35s ease;
    }
    .value-card-line-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .value-card:hover .value-card-line-wrap {
      background: rgba(255, 255, 255, 0.12); /* Base track saat hover gelap */
    }
    .value-card:hover .value-card-line-fill {
      transform: scaleX(1); /* Menganimasi hidup meluncur dari 0% ke 100% penuh */
    }

    /* Baris Teks Penutup Bawah */
    .services-footer-note {
      text-align: center;
      font-size: 14.5px;
      color: #475569;
      margin-top: 50px;
    }
    .services-footer-note a {
      color: #001f3b;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 0.2s ease;
    }
    .services-footer-note a:hover {
      color: #0088cc;
    }

    /* ==========================================================================
       MOBILE RESPONSIVE RULES (<= 992px)
       ========================================================================== */
    @media (max-width: 992px) {
      .services-carousel-section {
        padding: 60px 0 60px 0 !important;
      }
      .sec-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
      }
      .sec-subtitle {
        font-size: 14px !important;
      }
      .section-header-herrington {
        margin-bottom: 30px !important;
      }

      /* Transform Bento Grid to Native Touch-Swipe Carousel on Mobile */
      .pillars-bento-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 14px !important;
        padding: 10px 16px 20px 16px !important;
        margin: 0 -16px !important;
        scrollbar-width: none !important;
      }
      .pillars-bento-grid::-webkit-scrollbar {
        display: none !important;
      }

      .pillar-bento-card {
        flex: 0 0 82vw !important;
        max-width: 82vw !important;
        min-width: 275px !important;
        scroll-snap-align: center !important;
        padding: 0 !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
      }
      .pillar-bento-card.pillar-wide {
        flex: 0 0 82vw !important;
        max-width: 82vw !important;
      }
      .pillar-card-thumb {
        height: 160px !important;
      }
      .pillar-bento-card.pillar-wide .pillar-card-thumb {
        height: 160px !important;
      }
      .pillar-card-body {
        padding: 20px 18px 22px 18px !important;
      }

      /* Mobile Navigation Indicators */
      .pillars-mobile-swipe-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 10px !important;
      }
      .swipe-hint {
        font-size: 11.5px !important;
        color: #94a3b8 !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
      }
      .pillars-swipe-dots {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
      }
      .swipe-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 4px !important;
        background: #cbd5e1 !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
      }
      .swipe-dot.active {
        width: 24px !important;
        border-radius: 4px !important;
        background: #001f3b !important;
      }

      /* 6-Step Framework Mobile */
      .how-we-help-section {
        padding: 26px 18px !important;
        margin-top: 40px !important;
        border-radius: 4px !important;
      }
      .framework-header h3 {
        font-size: 26px !important;
      }
      .framework-header p {
        font-size: 15px !important;
      }
      .six-step-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
      }
      .step-mini-card {
        padding: 16px 14px !important;
      }
      .step-mini-card h4 {
        font-size: 15px !important;
      }
      .step-mini-card p {
        font-size: 13px !important;
      }

      /* Strategic Value Mobile (Herrington Pattern) */
      .strategic-value-section {
        margin-top: 36px !important;
      }
      .strategic-value-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      .value-card {
        padding: 32px 24px !important;
      }
      .value-card-icon {
        width: 62px !important;
        height: 62px !important;
        font-size: 23px !important;
      }
      .value-card h4 {
        font-size: 20px !important;
      }
      .value-card p {
        font-size: 14px !important;
      }
    }

    @media (max-width: 992px) {
      .services-cards-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
      .services-slider-wrap { padding: 0 !important; width: 100% !important; }
      .herrington-service-card { padding: 26px 20px !important; min-height: auto !important; border-radius: 4px !important; }
      .herrington-service-card h3 { font-size: 19px !important; margin-bottom: 10px !important; }
      .herrington-service-card p { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 20px !important; }
      .nav-arrow { display: none !important; }
      .sec-title { font-size: clamp(24px, 5.5vw, 34px) !important; }
    }

/* ==========================================================================
       SECTION: SPLIT CHESSBOARD (ABOUT US & OUR CORE VALUE)
       ========================================================================== */
    .chessboard-section {
      width: 100%;
      background-color: #ffffff;
      overflow: hidden;
    }

    /* Blok Baris Split 50:50 */
    .split-row {
      display: flex;
      min-height: 640px;
      width: 100%;
    }

    .split-col-image {
      flex: 1;
      position: relative;
      background-size: cover;
      background-position: center;
      min-height: 480px;
    }

    .split-col-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 90px 8%;
      background-color: #ffffff;
    }

    /* Motif Kotak Blur Khas Herrington pada Gambar Kiri Atas */
    .blur-overlay-block {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40%;
      height: 45%;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      border-right: 1px solid rgba(255, 255, 255, 0.4);
      pointer-events: none;
    }

    /* Tipografi Sesuai Screenshot */
    .split-eyebrow {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #121c27;
      margin-bottom: 24px;
      display: block;
    }
    .split-heading {
      font-size: 46px;
      font-weight: 600;
      color: #000000;
      line-height: 1.15;
      letter-spacing: -1px;
      margin-bottom: 24px;
      font-family: var(--font-sans);
    }
    .split-desc {
      font-size: 15px;
      line-height: 1.8;
      color: #64748b;
      margin-bottom: 35px;
    }

    /* Tombol & Video Inline Kanan Atas */
    .cta-video-group {
      display: flex;
      align-items: center;
      gap: 35px;
      flex-wrap: wrap;
    }
    .btn-pill-dark {
      background-color: #121c27;
      color: #ffffff;
      padding: 16px 36px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      transition: background-color 0.3s ease;
    }
    .btn-pill-dark:hover {
      background-color: #000000;
    }

    .video-trigger {
      display: flex;
      align-items: center;
      gap: 15px;
      cursor: pointer;
      color: #000000;
      font-size: 14px;
      font-weight: 600;
    }
    .video-play-btn {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #121c27;
      font-size: 14px;
      transition: transform 0.2s ease, background-color 0.2s ease;
    }
    .video-trigger:hover .video-play-btn {
      transform: scale(1.08);
      background-color: #e2e8f0;
    }

    /* Elemen Khusus Baris Bawah (Our Core Value) */
    .lead-icon-box {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      margin-bottom: 28px;
    }
    .half-circle-icon {
      width: 34px;
      height: 34px;
      border-radius: 4px;
      border: 2px solid #121c27;
      background: linear-gradient(90deg, #121c27 50%, transparent 50%);
      flex-shrink: 0;
      margin-top: 4px;
    }
    .lead-icon-text {
      font-size: 16px;
      color: #121c27;
      line-height: 1.6;
      font-weight: 500;
    }

    /* Checklist Bulat Bercentang Abu-Abu */
    .split-divider-line {
      height: 1px;
      background-color: #e2e8f0;
      width: 100%;
      margin-bottom: 28px;
    }
    .herrington-checklist {
      list-style: none;
      margin-bottom: 35px;
    }
    .herrington-checklist li {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 14.5px;
      color: #334155;
      font-weight: 500;
      margin-bottom: 16px;
    }
    .check-circle {
      width: 22px;
      height: 22px;
      border-radius: 4px;
      background: #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: #475569;
      flex-shrink: 0;
    }

    /* Floating Glassmorphism Counter Box (Kanan Bawah) */
    .floating-metrics-box {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 95%;
      max-width: 680px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-top: 1px solid rgba(255, 255, 255, 0.95);
      border-right: 1px solid rgba(255, 255, 255, 0.95);
      padding: 24px 28px;
      box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.09);
      border-top-right-radius: 16px;
      z-index: 4;
    }

    /* Top Bar: Sensor Telemetry Indicator */
    .metrics-sensor-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 14px;
      margin-bottom: 16px;
      border-bottom: 1px solid rgba(18, 28, 39, 0.08);
      flex-wrap: wrap;
      gap: 10px;
    }
    .sensor-indicator-block {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .sensor-pulse-beacon {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #10b981;
      position: relative;
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
      animation: sensorPulse 2s infinite;
      display: inline-block;
    }
    @keyframes sensorPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
      }
      70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
      }
    }
    .sensor-title-text {
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #0b141d;
    }
    .sensor-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #e6fffa;
      border: 1px solid #a7f3d0;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 10.5px;
      font-weight: 800;
      color: #065f46;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      transition: all 0.3s ease;
    }
    .sensor-live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10b981;
      display: inline-block;
    }

    /* Grid of 4 Cards */
    .metrics-grid-4 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
    .metric-card-item {
      display: flex;
      align-items: center;
      gap: 14px;
      background: rgba(255, 255, 255, 0.75);
      padding: 16px 18px;
      border-radius: 4px;
      border: 1px solid rgba(18, 28, 39, 0.08);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
      transition: all 0.25s ease;
    }
    .metric-card-item:hover {
      background: rgba(255, 255, 255, 0.98);
      border-color: rgba(0, 136, 204, 0.4);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    }
    .metric-icon-circle {
      width: 48px;
      height: 48px;
      border-radius: 4px;
      background: #121c27;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(18, 28, 39, 0.2);
      transition: all 0.3s ease;
    }
    .metric-card-item:hover .metric-icon-circle {
      background: #0088cc;
      color: #ffffff;
      transform: scale(1.06);
    }
    .metric-value {
      font-size: 38px;
      font-weight: 900;
      color: #0b141d;
      line-height: 1;
      margin-bottom: 5px;
      font-family: var(--font-sans);
      letter-spacing: -0.5px;
      display: flex;
      align-items: baseline;
      gap: 2px;
    }
    .countup-num {
      font-size: 38px;
      font-weight: 900;
      color: #0b141d;
      font-variant-numeric: tabular-nums;
    }
    .metric-unit {
      font-size: 22px;
      font-weight: 900;
      color: #0088cc;
      margin-left: 2px;
    }
    .metric-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      color: #475569;
      display: block;
      line-height: 1.35;
    }

    /* Tombol Kembali Ke Atas (Scroll to Top Floating Button) */
    .scroll-to-top-btn {
      position: absolute;
      bottom: 30px;
      right: 30px;
      width: 48px;
      height: 48px;
      border-radius: 4px;
      background: #121c27;
      color: #ffffff;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.2s ease;
      z-index: 5;
    }
    .scroll-to-top-btn:hover {
      background: #000000;
    }

    /* Responsive Queries */
    @media (max-width: 1024px) {
      .split-row { flex-direction: column; }
      .split-col-image { min-height: 440px; }
      .split-col-content { padding: 60px 30px; }
      .floating-metrics-box { 
        position: relative; 
        width: 100%; 
        max-width: 100%;
        border: none; 
        border-radius: 0;
        padding: 24px 20px;
      }
      .split-heading { font-size: 36px; }
    }
    @media (max-width: 640px) {
      .metrics-grid-4 {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .metric-card-item {
        padding: 14px 16px;
      }
      .metric-value, .countup-num {
        font-size: 32px;
      }
      .metric-unit {
        font-size: 19px;
      }
      .metric-label {
        font-size: 10.5px;
      }
    }

/* ==========================================================================
       SECTION: WHY CHOOSE US & 4-TABS (HERRINGTON EXACT CLONE)
       ========================================================================== */
    .tabs-section-herrington {
      background-color: #ffffff;
      padding: 110px 0 120px 0;
      position: relative;
      /* Siluet arsitektural halus di kanan atas sesuai screenshot */
      background-image: radial-gradient(circle at 90% 10%, rgba(18, 28, 39, 0.04) 0%, transparent 60%);
      background-repeat: no-repeat;
    }

    /* Baris Header Atas (Judul Kiri + Tombol Kanan) */
    .tabs-top-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 40px;
      margin-bottom: 55px;
    }
    .tabs-header-text {
      max-width: 820px;
    }
    .tabs-eyebrow {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #121c27;
      margin-bottom: 18px;
      display: block;
    }
    .tabs-main-title {
      font-size: 48px;
      font-weight: 600;
      color: #000000;
      line-height: 1.15;
      letter-spacing: -1.2px;
      margin-bottom: 20px;
      font-family: var(--font-sans);
    }
    .tabs-lead-desc {
      font-size: 16px;
      color: #64748b;
      line-height: 1.7;
    }

    /* 4-Tabs Navigation Bar */
    .tab-bar-nav {
      display: flex;
      border-bottom: 1px solid #e2e8f0;
      margin-bottom: 70px;
      gap: 50px;
    }
    .tab-btn-item {
      background: transparent;
      border: none;
      font-size: 17px;
      font-weight: 700;
      color: #64748b;
      padding: 0 0 20px 0;
      cursor: pointer;
      position: relative;
      font-family: var(--font-sans);
      transition: color 0.2s ease;
    }
    .tab-btn-item:hover {
      color: #000000;
    }
    .tab-btn-item.active {
      color: #000000;
    }
    /* Garis hitam tebal di bawah tab aktif */
    .tab-btn-item.active::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #000000;
    }

    /* Tab Content Grid (50:50) */
    .tab-pane-content {
      display: none;
      grid-template-columns: 1fr 1.3fr;
      gap: 80px;
      align-items: center;
    }
    .tab-pane-content.active {
      display: grid;
    }

    /* Kolom Gambar Kiri dengan Aksen Blur Bawah */
    .tab-image-container {
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      height: 580px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }
    .tab-image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .image-blur-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 65%;
      height: 40%;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      border-right: 1px solid rgba(255, 255, 255, 0.4);
      pointer-events: none;
    }

    /* Kolom Teks Kanan */
    .tab-text-right h3 {
      font-size: 36px;
      font-weight: 600;
      color: #000000;
      line-height: 1.25;
      letter-spacing: -0.5px;
      margin-bottom: 22px;
      font-family: var(--font-sans);
    }
    .tab-text-right p.tab-body-lead {
      font-size: 15px;
      line-height: 1.8;
      color: #64748b;
      margin-bottom: 30px;
    }

    /* List Panah Tipis (→) Sesuai Screenshot */
    .arrow-bullet-list {
      list-style: none;
      margin-bottom: 40px;
    }
    .arrow-bullet-list li {
      font-size: 15px;
      color: #1e293b;
      font-weight: 500;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .arrow-bullet-list li i {
      font-size: 13px;
      color: #64748b;
    }

    /* Dark Callout Pill Box di Bawah */
    .dark-callout-pill {
      background-color: #0f1722;
      color: #ffffff;
      border-radius: 4px;
      padding: 24px 32px;
      display: flex;
      align-items: center;
      gap: 22px;
    }
    .callout-check-circle {
      width: 44px;
      height: 44px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      color: #ffffff;
    }
    .callout-text {
      font-size: 14.5px;
      font-weight: 500;
      line-height: 1.5;
      color: #f1f5f9;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .tabs-top-header { flex-direction: column; align-items: flex-start; }
      .tab-bar-nav { overflow-x: auto; gap: 30px; white-space: nowrap; padding-bottom: 15px; }
      .tab-pane-content { grid-template-columns: 1fr; gap: 40px; }
      .tab-image-container { height: 420px; }
      .tabs-main-title { font-size: 36px; }
      .tab-text-right h3 { font-size: 28px; }
    }
      
/* ==========================================================================
       SECTION: INSTITUTIONAL TRUST & AFFILIATIONS (HERRINGTON CLONE - EN)
       ========================================================================== */
    .trust-partners-section {
      background-color: #ffffff;
      padding: 60px 0 100px 0;
      position: relative;
      background-image: 
        radial-gradient(circle at 88% 15%, rgba(0, 180, 216, 0.045) 0%, transparent 55%),
        radial-gradient(circle at 10% 85%, rgba(18, 28, 39, 0.03) 0%, transparent 50%);
      background-repeat: no-repeat;
    }

    /* Subtle top divider line matching screenshot */
    .section-top-divider {
      display: none !important;
    }

    /* 2-Column Header Row (Title Left + Lead Right) */
    .trust-header-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 60px;
      margin-bottom: 60px;
    }
    .trust-header-left {
      max-width: 600px;
    }
    .trust-eyebrow {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #121c27;
      margin-bottom: 16px;
      display: block;
    }
    .trust-main-title {
      font-size: 44px;
      font-weight: 600;
      color: #000000;
      line-height: 1.15;
      letter-spacing: -1px;
      font-family: var(--font-sans);
    }
    .trust-desc-right {
      max-width: 500px;
      font-size: 14.5px;
      line-height: 1.7;
      color: #64748b;
    }

    /* Bordered 6-Column Grid Ribbon */
    .partners-bordered-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      border: 1px solid #e2e8f0;
      border-radius: 2px;
      overflow: hidden;
      background: #fafbfc;
    }

    .partner-grid-item {
      padding: 28px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-right: 1px solid #e2e8f0;
      background-color: #ffffff;
      transition: all 0.25s ease;
      min-height: 165px;
    }
    .partner-grid-item:last-child {
      border-right: none;
    }
    .partner-grid-item:hover {
      background-color: #f8fafc;
      box-shadow: inset 0 -3px 0 #00e5ff;
    }

    /* Wadah Khusus Logo Bujur Sangkar 512x512 */
    .partner-logo-monochrome,
    .partner-logo-box {
      height: 70px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    .partner-logo-monochrome img,
    .partner-logo-img {
      width: 64px;
      height: 64px;
      max-width: 100%;
      object-fit: contain;
      display: block;
      margin: 0 auto;
      transition: transform 0.25s ease;
    }
    .partner-grid-item:hover .partner-logo-monochrome img,
    .partner-grid-item:hover .partner-logo-img {
      transform: scale(1.08); /* Efek zoom halus saat kursor diarahkan */
    }

    .partner-name {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 4px;
      letter-spacing: -0.2px;
    }

    .partner-role-tag {
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #64748b;
      line-height: 1.35;
    }

    /* Responsive */
    @media (max-width: 1200px) {
      .partners-bordered-grid { grid-template-columns: repeat(3, 1fr); }
      .partner-grid-item { border-bottom: 1px solid #e2e8f0; }
      .partner-grid-item:nth-child(3n) { border-right: none; }
    }
    @media (max-width: 768px) {
      .trust-header-row { flex-direction: column; align-items: flex-start; gap: 20px; }
      .partners-bordered-grid { grid-template-columns: repeat(2, 1fr); }
      .partner-grid-item:nth-child(3n) { border-right: 1px solid #e2e8f0; }
      .partner-grid-item:nth-child(2n) { border-right: none; }
      .trust-main-title { font-size: 32px; }
    }

/* ==========================================================================
       SECTION: SELECTED CASE STUDIES CAROUSEL (HERRINGTON CLONE - EN)
       ========================================================================== */
    .case-studies-section {
      background-color: #0b141d;
      padding-bottom: 90px;
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    /* Dark Top Header Block */
    .case-header-block {
      background-color: #0b141d;
      color: #ffffff;
      padding: 100px 0 60px 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    /* Subtle geometric curved arc on top right */
    .case-header-block::after {
      content: "";
      position: absolute;
      top: -100px;
      right: -100px;
      width: 550px;
      height: 550px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.04);
      box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.015), 0 0 0 120px rgba(255, 255, 255, 0.01);
      pointer-events: none;
    }

    .case-header-inner {
      max-width: 1050px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .case-header-inner .case-subtitle {
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
    }
    .case-eyebrow {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #94a3b8;
      margin-bottom: 16px;
      display: block;
    }
    .case-main-title {
      font-size: 48px;
      font-weight: 600;
      color: #ffffff;
      line-height: 1.15;
      letter-spacing: -1px;
      margin-bottom: 18px;
      font-family: var(--font-sans);
    }
    .case-subtitle {
      font-size: 16px;
      color: #94a3b8;
      line-height: 1.7;
      margin-bottom: 45px;
    }

    /* Interactive Filter Tabs - Capsule Pill Design */
    .case-filter-nav {
      display: flex;
      justify-content: center !important;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin: 10px auto 0 auto;
      width: 100%;
      text-align: center;
    }
    .case-filter-nav .filter-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #94a3b8;
      font-size: 13.5px;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font-sans);
      padding: 9px 20px;
      border-radius: 4px;
      position: relative;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      outline: none;
    }
    .case-filter-nav .filter-btn sup {
      font-size: 11px;
      font-weight: 700;
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.15);
      padding: 1px 7px;
      border-radius: 4px;
      margin-left: 2px;
      top: 0;
    }
    .case-filter-nav .filter-btn:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.25);
      transform: translateY(-1px);
    }
    .case-filter-nav .filter-btn.active {
      color: #0b141d !important;
      background: #00e5ff !important;
      border-color: #00e5ff !important;
      font-weight: 700;
      box-shadow: 0 4px 16px rgba(0, 229, 255, 0.35);
    }
    .case-filter-nav .filter-btn.active sup {
      background: rgba(11, 20, 29, 0.25);
      color: #0b141d;
    }
    .case-filter-nav .filter-btn.active::after {
      display: none;
    }

    /* ==========================================================================
       FULL-BLEED EDGE-TO-EDGE CAROUSEL TRACK (TOUCHING SCREEN EDGES)
       ========================================================================== */
    .case-carousel-wrapper {
      position: relative;
      width: 100vw;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      overflow: hidden;
      padding: 15px 0 35px 0;
      box-sizing: border-box;
    }

    .case-carousel-track {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 24px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 10px 48px 25px 48px;
      cursor: grab;
      user-select: none;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }
    .case-carousel-track::-webkit-scrollbar {
      display: none;
    }
    .case-carousel-track:active {
      cursor: grabbing;
    }

    /* Floating Navigation Arrows (Glassmorphism Circles) */
    .case-nav-arrow {
      all: unset;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 52px;
      height: 52px;
      border-radius: 4px;
      background: rgba(11, 20, 29, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      z-index: 25;
      transition: all 0.25s ease;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }
    .case-nav-arrow.prev { left: 24px; }
    .case-nav-arrow.next { right: 24px; }
    .case-nav-arrow:hover {
      background: #00e5ff;
      color: #0b141d;
      border-color: #00e5ff;
      transform: translateY(-50%) scale(1.08);
      box-shadow: 0 10px 30px rgba(0, 229, 255, 0.45);
    }

    /* Individual Case Item Card */
    .case-item-card {
      position: relative;
      flex: 0 0 380px !important;
      width: 380px !important;
      min-width: 380px !important;
      max-width: 380px !important;
      height: 560px !important;
      border-radius: 4px;
      background-size: cover;
      background-position: center;
      overflow: hidden;
      cursor: pointer;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;
      padding: 36px 30px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-sizing: border-box !important;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
    }
    .case-item-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(7, 14, 21, 0.15) 0%, rgba(7, 14, 21, 0.5) 45%, rgba(7, 14, 21, 0.95) 100%);
      transition: background 0.3s ease;
    }
    .case-item-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
      border-color: rgba(0, 229, 255, 0.4);
    }
    .case-item-card:hover::before {
      background: linear-gradient(180deg, rgba(7, 14, 21, 0.25) 0%, rgba(7, 14, 21, 0.65) 40%, rgba(7, 14, 21, 0.98) 100%);
    }

    /* Top Corner Badge */
    .case-card-badge {
      position: absolute;
      top: 24px;
      left: 24px;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      background: rgba(11, 20, 29, 0.75);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(0, 229, 255, 0.35);
      color: #00e5ff;
      padding: 5px 12px;
      border-radius: 4px;
      z-index: 3;
    }

    .case-card-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
    }
    .case-cat-label {
      font-size: 11.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #94a3b8;
      margin-bottom: 8px;
    }
    .case-item-title {
      font-size: 24px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.25;
      letter-spacing: -0.4px;
      font-family: var(--font-sans);
      margin-bottom: 12px;
    }
    .case-hover-summary {
      font-size: 13.5px;
      line-height: 1.6;
      color: #cbd5e1;
      margin-bottom: 20px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: opacity 0.3s ease;
    }

    /* Card Footer Action Strip */
    .case-card-footer-action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .case-view-detail-text {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.8px;
      color: #00e5ff;
      text-transform: uppercase;
      transition: color 0.2s ease;
    }
    .case-item-card:hover .case-view-detail-text {
      color: #ffffff;
    }
    .round-action-btn {
      width: 44px;
      height: 44px;
      border-radius: 4px;
      background: #ffffff;
      color: #000000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .case-item-card:hover .round-action-btn {
      background: #00e5ff;
      color: #0b141d;
      transform: translateX(3px);
    }

    /* Bottom Control Bar */
    .case-bottom-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 50px;
      padding-top: 25px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .case-bottom-left {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .case-counter-label {
      font-size: 13.5px;
      color: #94a3b8;
      font-weight: 500;
      letter-spacing: 0.3px;
    }
    .case-pagination-wrap {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .case-pagination-dots {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .case-p-dot {
      width: 10px;
      height: 10px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.2);
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .case-p-dot:hover {
      background: rgba(255, 255, 255, 0.5);
    }
    .case-p-dot.active {
      background: #00e5ff;
      width: 24px;
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    }

    /* ==========================================================================
       CASE STUDY MODAL (EXECUTIVE FACTSHEET LIGHTBOX)
       ========================================================================== */
    .case-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(5, 10, 15, 0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      z-index: 99999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .case-modal-backdrop.open {
      display: flex;
      opacity: 1;
    }
    .case-modal-window {
      background: #08101a !important;
      border: 1px solid rgba(0, 229, 255, 0.4) !important;
      border-radius: 4px;
      max-width: 820px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 229, 255, 0.2);
      color: #ffffff !important;
      padding: 42px 38px;
    }
    .case-modal-close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      background: #111c2a;
      color: #ffffff !important;
      font-size: 26px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      z-index: 10;
    }
    .case-modal-close-btn:hover {
      background: #ef4444;
      border-color: #ef4444;
      color: #ffffff !important;
      transform: scale(1.08);
    }
    .modal-factsheet-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #00e5ff !important;
      background: rgba(0, 229, 255, 0.12) !important;
      border: 1px solid rgba(0, 229, 255, 0.3);
      padding: 5px 14px;
      border-radius: 4px;
      margin-bottom: 16px;
    }
    .modal-factsheet-title {
      font-size: 28px;
      font-weight: 700;
      color: #ffffff !important;
      line-height: 1.25;
      letter-spacing: -0.4px;
      margin-bottom: 16px;
      font-family: var(--font-sans);
    }
    .modal-factsheet-desc {
      font-size: 15px;
      line-height: 1.75;
      color: #cbd5e1 !important;
      margin-bottom: 28px;
    }
    .modal-specs-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-bottom: 30px;
      background: #0d1724 !important;
      padding: 22px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .modal-spec-item {
      background: rgba(255, 255, 255, 0.03);
      padding: 14px 16px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }
    .modal-spec-item h5 {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #94a3b8 !important;
      margin-bottom: 6px;
      font-weight: 700;
    }
    .modal-spec-item p {
      font-size: 14px;
      font-weight: 600;
      color: #f8fafc !important;
      margin: 0;
      line-height: 1.45;
    }
    .modal-action-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      flex-wrap: wrap;
    }

    /* ==========================================================================
       RESPONSIVE DESIGN (MOBILE & TABLET)
       ========================================================================== */
    @media (max-width: 1024px) {
      .case-nav-arrow { display: none; }
      .case-item-card {
        flex: 0 0 340px;
        width: 340px;
        height: 520px;
      }
    }

    @media (max-width: 768px) {
      .case-main-title { font-size: 34px; }
      .case-filter-nav { gap: 14px; }
      .case-carousel-wrapper {
        padding: 10px 0 20px 0;
      }
      .case-carousel-track {
        padding: 10px 20px 25px 20px;
        gap: 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .case-item-card {
        flex: 0 0 82vw !important;
        width: 82vw !important;
        min-width: 82vw !important;
        max-width: 82vw !important;
        height: 440px !important;
        padding: 24px 20px !important;
        scroll-snap-align: center !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
      }
      .case-card-badge {
        top: 16px;
        left: 16px;
        font-size: 9.5px;
      }
      .case-item-title {
        font-size: 20px;
      }
      .case-hover-summary {
        font-size: 12.5px;
        -webkit-line-clamp: 2;
        margin-bottom: 14px;
      }
      .case-bottom-bar {
        flex-direction: column;
        gap: 20px;
        align-items: center;
        text-align: center;
      }
      .case-bottom-left {
        flex-direction: column;
        gap: 12px;
        align-items: center;
      }
      .case-modal-window {
        padding: 28px 20px;
      }
      .modal-specs-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .modal-factsheet-title {
        font-size: 22px;
      }
    }
      
/* ==========================================================================
       SECTION: 3-BOX TRI-COLOR CTA BLOCKS (HERRINGTON CLONE - EN)
       ========================================================================== */
    .tri-box-section {
      background-color: #ffffff;
      padding: 90px 0 110px 0;
    }
    .tri-box-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

    .tri-card {
      padding: 55px 45px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 480px;
      position: relative;
    }

    /* Variasi Warna 3 Kotak Sesuai Screenshot */
    .tri-card.beige {
      background-color: #eaf0f6; /* Warna abu-abu es kebiruan khas maritim */
      color: #121c27;
      border: 1px solid #dbe5ee;
    }
    .tri-card.dark {
      background-color: #121c27;
      color: #ffffff;
    }
    .tri-card.grey {
      background-color: #f1f3f5;
      color: #121c27;
    }

    .tri-card-header h3 {
      font-size: 32px;
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.5px;
      margin-bottom: 18px;
      font-family: var(--font-sans);
    }
    .tri-card.dark .tri-card-header h3 {
      color: #ffffff;
    }
    .tri-card.beige .tri-card-header h3,
    .tri-card.grey .tri-card-header h3 {
      color: #121c27;
    }

    .tri-card-desc {
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: 30px;
    }
    .tri-card.dark .tri-card-desc { color: #94a3b8; }
    .tri-card.beige .tri-card-desc,
    .tri-card.grey .tri-card-desc { color: #64748b; }

    .tri-card-divider {
      height: 1px;
      width: 100%;
      margin-bottom: 30px;
    }
    .tri-card.beige .tri-card-divider,
    .tri-card.grey .tri-card-divider { background-color: rgba(0, 0, 0, 0.08); }
    .tri-card.dark .tri-card-divider { background-color: rgba(255, 255, 255, 0.1); }

    /* Checklist Khusus Kartu Tengah (Dark) */
    .tri-card-checklist {
      list-style: none;
      margin-bottom: 40px;
    }
    .tri-card-checklist li {
      font-size: 14.5px;
      color: #f1f5f9;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .tri-card-checklist li i {
      color: #00e5ff;
      font-size: 14px;
    }

    /* Bagian Bawah Kartu: Ikon Kotak + Link Panah */
    .tri-card-footer {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-top: auto;
    }
    .tri-square-icon {
      width: 58px;
      height: 58px;
      background-color: #121c27;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      border-radius: 2px;
    }

    .tri-footer-link {
      font-size: 14.5px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      transition: gap 0.2s ease;
    }
    .tri-card.dark .tri-footer-link { color: #ffffff; }
    .tri-card.beige .tri-footer-link,
    .tri-card.grey .tri-footer-link { color: #121c27; }
    .tri-footer-link:hover { gap: 18px; }

    /* ==========================================================================
       SECTION: TESTIMONIALS (HERRINGTON CLONE - EN)
       ========================================================================== */
    .testimonials-section {
      background-color: #f6f8fa;
      padding: 120px 0;
      position: relative;
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(0, 229, 255, 0.04) 0%, transparent 45%),
        radial-gradient(circle at 88% 80%, rgba(18, 28, 39, 0.035) 0%, transparent 50%);
      background-repeat: no-repeat;
    }
    .testimonial-split-grid {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 90px;
      align-items: center;
    }

    /* Kolom Kiri Gambar dengan Circle Quote Glass */
    .testimonial-image-wrapper {
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      height: 540px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    }
    .testimonial-image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .quote-bubble-glass {
      position: absolute;
      bottom: 25px;
      right: 25px;
      width: 90px;
      height: 90px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 42px;
      color: #ffffff;
      font-family: var(--font-serif);
      line-height: 1;
      box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    }

    /* Kolom Kanan Teks Testimonial */
    .testimonial-content-right {
      display: flex;
      flex-direction: column;
    }
    .testi-eyebrow {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #121c27;
      margin-bottom: 16px;
      display: block;
    }
    .testi-title {
      font-size: 46px;
      font-weight: 600;
      color: #000000;
      line-height: 1.15;
      letter-spacing: -1px;
      margin-bottom: 14px;
      font-family: var(--font-sans);
    }
    .testi-subline {
      font-size: 16px;
      color: #64748b;
      margin-bottom: 22px;
    }
    .testi-bar-divider {
      width: 70px;
      height: 3px;
      background-color: #000000;
      margin-bottom: 40px;
    }

    .testi-quote-text {
      font-size: 18px;
      line-height: 1.8;
      color: #334155;
      margin-bottom: 45px;
      font-weight: 400;
    }

    /* Baris Profil Klien & Bintang */
    .testi-author-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }
    .author-identity-wrap {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .author-identity-wrap img {
      width: 58px;
      height: 58px;
      border-radius: 4px;
      object-fit: cover;
    }
    .author-meta h4 {
      font-size: 16px;
      font-weight: 700;
      color: #121c27;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .author-meta p {
      font-size: 13px;
      color: #64748b;
    }
    .stars-solid {
      color: #121c27;
      font-size: 12px;
      display: inline-flex;
      gap: 3px;
    }

    /* Slider Arrows Tipis Kanan Bawah */
    .testi-slider-arrows {
      display: flex;
      align-items: center;
      gap: 28px;
    }
    .testi-arrow-btn {
      background: transparent;
      border: none;
      color: #94a3b8;
      font-size: 22px;
      cursor: pointer;
      transition: color 0.2s ease, transform 0.2s ease;
    }
    .testi-arrow-btn:hover {
      color: #000000;
      transform: translateX(3px);
    }
    .testi-arrow-btn.prev:hover {
      transform: translateX(-3px);
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .tri-box-grid { grid-template-columns: 1fr; }
      .testimonial-split-grid { grid-template-columns: 1fr; gap: 50px; }
      .testimonial-image-wrapper { height: 420px; }
      .testi-title { font-size: 36px; }
    }
      
/* ==========================================================================
       SECTION: LEADERSHIP & ADVISORY COUNCIL (HERRINGTON CLONE - EN)
       ========================================================================== */
    .leadership-split-section {
      width: 100%;
      background-color: #ffffff;
      padding: 0 0 100px 0;
    }

    .leadership-banner-inner {
      display: flex;
      min-height: 520px;
      width: 100%;
      position: relative;
      overflow: hidden;
      border-radius: 4px;
    }

    /* Kolom Kiri: Foto Tim */
    .leadership-image-col {
      flex: 1;
      position: relative;
      background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1200&q=80');
      background-size: cover;
      background-position: center top;
      min-height: 480px;
    }

    /* Kotak-kotak blur khas Herrington di tepi kanan bawah gambar */
    .leadership-blur-block-1 {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 32%;
      height: 50%;
      background: rgba(255, 255, 255, 0.28);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      border-left: 1px solid rgba(255, 255, 255, 0.4);
      pointer-events: none;
      z-index: 2;
    }
    .leadership-blur-block-2 {
      position: absolute;
      bottom: 50%;
      right: 0;
      width: 28%;
      height: 35%;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255, 255, 255, 0.3);
      border-left: 1px solid rgba(255, 255, 255, 0.3);
      pointer-events: none;
      z-index: 2;
    }

    /* Kolom Kanan: Dark Navy Content Panel */
    .leadership-content-col {
      flex: 1.15;
      background-color: #0e1722;
      color: #ffffff;
      padding: 85px 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    /* Watermark pola kotak-kotak di sudut kanan atas */
    .leadership-content-col::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 220px;
      height: 180px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 55px 55px;
      background-color: rgba(255, 255, 255, 0.02);
      pointer-events: none;
    }

    .leader-eyebrow {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #94a3b8;
      margin-bottom: 40px;
      display: block;
    }

    .leader-main-quote {
      font-size: 24px;
      line-height: 1.55;
      font-weight: 400;
      color: #f1f5f9;
      margin-bottom: 50px;
      letter-spacing: -0.3px;
      font-family: var(--font-sans);
    }

    /* Baris Bawah (Profil Leader Kiri + Link Kanan) */
    .leader-bottom-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 30px;
      padding-top: 15px;
    }

    .leader-person-info {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .leader-avatar-round {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, 0.2);
    }
    .leader-details h4 {
      font-size: 15.5px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 3px;
      font-family: var(--font-sans);
    }
    .leader-details p {
      font-size: 12.5px;
      color: #94a3b8;
    }

    .meet-experts-link {
      font-size: 14.5px;
      font-weight: 600;
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      transition: gap 0.2s ease, color 0.2s ease;
    }
    .meet-experts-link:hover {
      color: #00e5ff;
      gap: 20px;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .leadership-banner-inner { flex-direction: column; }
      .leadership-image-col { min-height: 380px; }
      .leadership-content-col { padding: 60px 35px; }
      .leader-main-quote { font-size: 20px; }
      .leadership-blur-block-1, .leadership-blur-block-2 { display: none; }
    }

/* ==========================================================================
       SECTION: TECHNICAL PAPERS & INTELLIGENCE (HERRINGTON BLOG CLONE - EN)
       ========================================================================== */
    .papers-blog-section {
      background-color: #ffffff;
      padding: 100px 0 120px 0;
      position: relative;
      background-image: 
        radial-gradient(circle at 92% 18%, rgba(0, 180, 216, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 8% 82%, rgba(18, 28, 39, 0.025) 0%, transparent 45%);
      background-repeat: no-repeat;
    }

    .papers-header-wrap {
      text-align: center;
      max-width: 820px;
      margin: 0 auto 65px auto;
    }
    .papers-eyebrow {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #121c27;
      margin-bottom: 16px;
      display: block;
    }
    .papers-title {
      font-size: 46px;
      font-weight: 600;
      color: #000000;
      line-height: 1.15;
      letter-spacing: -1px;
      margin-bottom: 18px;
      font-family: var(--font-sans);
    }
    .papers-subtext {
      font-size: 16px;
      color: #64748b;
      line-height: 1.7;
      margin-bottom: 24px;
    }
    .papers-divider-bar {
      width: 75px;
      height: 3px;
      background-color: #000000;
      margin: 0 auto;
    }

    /* ==========================================================================
       TECHNICAL INTELLIGENCE BENTO GRID
       ========================================================================== */
    .papers-bento-grid {
      display: grid;
      grid-template-columns: 1.25fr 1fr;
      gap: 30px;
      align-items: stretch;
      margin-top: 48px;
    }

    /* Main Hero Bento Card (Flagship / Latest) */
    .paper-bento-hero {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .paper-bento-hero:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 45px rgba(2, 132, 199, 0.1);
      border-color: #cbd5e1;
    }
    .bento-hero-media {
      position: relative;
      height: 330px;
      overflow: hidden;
      background-color: #0f1722;
    }
    .bento-hero-media a {
      display: block;
      width: 100%;
      height: 100%;
    }
    .bento-hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }
    .paper-bento-hero:hover .bento-hero-media img {
      transform: scale(1.05);
    }
    .bento-flagship-pill {
      position: absolute;
      top: 16px;
      left: 16px;
      background: rgba(8, 16, 28, 0.88);
      border: 1px solid rgba(0, 229, 255, 0.45);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #00e5ff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      padding: 6px 13px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      z-index: 2;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    }
    .bento-hero-content {
      padding: 30px 32px 32px 32px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }
    .bento-hero-title {
      font-family: var(--font-serif, "Merriweather", Georgia, serif);
      font-size: 24px;
      font-weight: 700;
      color: #0b141d;
      line-height: 1.35;
      margin: 12px 0 16px 0;
      transition: color 0.2s ease;
    }
    .bento-hero-title a {
      color: inherit;
      text-decoration: none;
    }
    .bento-hero-title a:hover {
      color: #0284c7;
    }
    .bento-hero-desc {
      font-size: 14.5px;
      line-height: 1.75;
      color: #475569;
      margin-bottom: 24px;
      flex-grow: 1;
    }

    /* Side Stack Bento Cards */
    .papers-bento-side {
      display: flex;
      flex-direction: column;
      gap: 24px;
      justify-content: space-between;
    }
    .paper-bento-card-side {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: row;
      height: calc(50% - 12px);
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .paper-bento-card-side:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px rgba(2, 132, 199, 0.08);
      border-color: #cbd5e1;
    }
    .bento-side-media {
      position: relative;
      width: 210px;
      min-width: 210px;
      overflow: hidden;
      background-color: #0f1722;
    }
    .bento-side-media a {
      display: block;
      width: 100%;
      height: 100%;
    }
    .bento-side-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }
    .paper-bento-card-side:hover .bento-side-media img {
      transform: scale(1.06);
    }
    .bento-side-content {
      padding: 24px 26px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: center;
    }
    .bento-side-title {
      font-family: var(--font-serif, "Merriweather", Georgia, serif);
      font-size: 17px;
      font-weight: 700;
      color: #0b141d;
      line-height: 1.4;
      margin: 10px 0 12px 0;
      transition: color 0.2s ease;
    }
    .bento-side-title a {
      color: inherit;
      text-decoration: none;
    }
    .bento-side-title a:hover {
      color: #0284c7;
    }
    .bento-side-desc {
      font-size: 13.5px;
      line-height: 1.65;
      color: #64748b;
      margin-bottom: 16px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Square Date Badge di Pojok Kanan Bawah Foto */
    .paper-date-badge {
      position: absolute;
      bottom: 14px;
      right: 14px;
      background: rgba(18, 28, 39, 0.78);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #ffffff;
      padding: 10px 14px;
      border-radius: 4px;
      text-align: center;
      line-height: 1;
      min-width: 52px;
      z-index: 2;
    }
    .paper-date-badge.compact {
      padding: 6px 10px;
      min-width: 44px;
      bottom: 10px;
      right: 10px;
    }
    .date-day {
      font-size: 20px;
      font-weight: 700;
      display: block;
      margin-bottom: 4px;
    }
    .paper-date-badge.compact .date-day {
      font-size: 16px;
      margin-bottom: 2px;
    }
    .date-month {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #cbd5e1;
    }
    .paper-date-badge.compact .date-month {
      font-size: 10px;
    }

    /* Meta Bar Hitam di Bawah Foto */
    .paper-meta-strip {
      background-color: #0d151e;
      color: #94a3b8;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 6px 12px;
      border-radius: 4px;
      display: inline-block;
      width: fit-content;
      margin-bottom: 4px;
    }
    .paper-meta-strip span {
      color: #cbd5e1;
    }

    .paper-line-sep {
      height: 1px;
      background-color: #e2e8f0;
      width: 100%;
      margin-bottom: 18px;
    }

    /* Continue Reading Link dengan Panah */
    .paper-link-action {
      margin-top: auto;
      font-size: 13.5px;
      font-weight: 700;
      color: #121c27;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      transition: gap 0.2s ease, color 0.2s ease;
    }
    .paper-link-action:hover {
      color: #00e5ff;
      gap: 16px;
    }

    /* Bottom CTA Wrap */
    .papers-bottom-cta {
      margin-top: 48px;
      text-align: center;
      display: flex;
      justify-content: center;
    }
    .papers-explore-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 15px 36px;
      font-size: 14.5px;
      font-weight: 700;
      border-radius: 4px;
      text-decoration: none;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .papers-bento-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .paper-bento-card-side {
        height: auto;
      }
      .papers-title {
        font-size: 34px;
      }
    }
    @media (max-width: 640px) {
      .paper-bento-card-side {
        flex-direction: column;
      }
      .bento-side-media {
        width: 100%;
        min-width: 100%;
        height: 200px;
      }
      .bento-hero-media {
        height: 230px;
      }
      .bento-hero-content {
        padding: 22px;
      }
      .bento-side-content {
        padding: 20px;
      }
      .bento-hero-title {
        font-size: 20px;
      }
    }
      
    /* ==========================================================================
       SECTION: FEATURED EXECUTIVE LEAD MAGNET (HERRINGTON WHITE PAPER BLUEPRINT)
       ========================================================================== */
    .leadmagnet-section {
      padding: 90px 0;
      background-color: #f1f5f9;
      position: relative;
    }
    .leadmagnet-card {
      background-color: #000014;
      background-image: radial-gradient(circle at 95% 15%, rgba(0, 217, 252, 0.15) 0%, transparent 50%),
                        radial-gradient(circle at 5% 90%, rgba(0, 31, 59, 0.45) 0%, transparent 45%);
      border: 1px solid rgba(0, 217, 252, 0.3);
      border-radius: 4px;
      box-shadow: 0 25px 60px rgba(0, 0, 20, 0.35);
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 50px;
      padding: 55px 60px;
      position: relative;
      overflow: hidden;
    }
    .leadmagnet-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #00d9fc 0%, #00c3e3 50%, #001f3b 100%);
    }

    /* Left Content Column */
    .leadmagnet-content-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .leadmagnet-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(0, 217, 252, 0.12);
      border: 1px solid rgba(0, 217, 252, 0.4);
      padding: 6px 14px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #00d9fc;
      text-transform: uppercase;
      margin-bottom: 20px;
      width: fit-content;
    }
    .leadmagnet-badge .pulse-dot {
      width: 6px;
      height: 6px;
      background-color: #00d9fc;
      border-radius: 50%;
      box-shadow: 0 0 10px #00d9fc;
    }
    .leadmagnet-title {
      font-size: 32px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.25;
      letter-spacing: -0.6px;
      margin-bottom: 18px;
    }
    .leadmagnet-lead {
      font-size: 15.5px;
      line-height: 1.7;
      color: #cbd5e1;
      margin-bottom: 28px;
    }
    .leadmagnet-highlights-grid {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 30px;
    }
    .highlight-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .highlight-icon {
      width: 22px;
      height: 22px;
      border-radius: 4px;
      background: rgba(0, 217, 252, 0.15);
      border: 1px solid rgba(0, 217, 252, 0.4);
      color: #00d9fc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      flex-shrink: 0;
      margin-top: 3px;
    }
    .highlight-text {
      font-size: 14px;
      line-height: 1.6;
      color: #e2e8f0;
    }
    .highlight-text strong {
      color: #ffffff;
    }
    .leadmagnet-specs-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .spec-pill {
      font-size: 12px;
      color: #94a3b8;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(255, 255, 255, 0.04);
      padding: 5px 12px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .spec-pill i {
      color: #00d9fc;
      font-size: 11px;
    }

    /* Right Action Column */
    .leadmagnet-action-col {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .leadmagnet-form-card {
      background: rgba(0, 31, 59, 0.85);
      border: 1px solid rgba(0, 217, 252, 0.25);
      border-radius: 4px;
      padding: 34px 30px;
      width: 100%;
      box-shadow: 0 15px 40px rgba(0, 0, 20, 0.5);
      position: relative;
    }

    /* 3D Report Preview Mockup */
    .report-mockup-wrapper {
      display: flex;
      justify-content: center;
      margin-bottom: 24px;
      perspective: 800px;
    }
    .report-book-3d {
      width: 170px;
      height: 220px;
      background: linear-gradient(135deg, #001f3b 0%, #000014 100%);
      border-radius: 4px;
      border: 1px solid rgba(0, 217, 252, 0.4);
      box-shadow: -10px 15px 25px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 217, 252, 0.1);
      transform: rotateY(-16deg) rotateX(6deg);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      position: relative;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .report-book-3d:hover {
      transform: rotateY(-8deg) rotateX(2deg) translateY(-4px);
      box-shadow: -14px 22px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 217, 252, 0.25);
    }
    .report-book-3d::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 12px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.3) 100%);
      border-right: 1px solid rgba(0, 0, 0, 0.4);
    }
    .book-cover-top {
      padding-left: 10px;
    }
    .book-brand {
      font-size: 13px;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: 0.5px;
    }
    .book-brand span {
      color: #00d9fc;
    }
    .book-tag {
      font-size: 7.5px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #8f9fb6;
      text-transform: uppercase;
      margin-top: 3px;
    }
    .book-cover-title {
      font-size: 11px;
      font-weight: 700;
      color: #00d9fc;
      line-height: 1.35;
      padding-left: 10px;
      letter-spacing: 0.2px;
      border-left: 2px solid #00d9fc;
      margin: 10px 0;
    }
    .book-cover-meta {
      padding-left: 10px;
      font-size: 8px;
      color: #8f9fb6;
      display: flex;
      justify-content: space-between;
    }
    .book-seal {
      align-self: flex-end;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(0, 217, 252, 0.15);
      border: 1px solid rgba(0, 217, 252, 0.3);
      padding: 3px 8px;
      border-radius: 3px;
      font-size: 8px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.5px;
    }
    .book-seal i {
      color: #00d9fc;
    }

    .form-header-micro {
      text-align: center;
      margin-bottom: 20px;
    }
    .form-header-micro h3 {
      font-size: 18px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 6px;
    }
    .form-header-micro p {
      font-size: 12.5px;
      color: #8f9fb6;
      line-height: 1.5;
    }

    .leadmagnet-form {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    .lm-input-group label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #cbd5e1;
      margin-bottom: 6px;
    }
    .lm-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .lm-input-wrap i {
      position: absolute;
      left: 14px;
      color: #8f9fb6;
      font-size: 13px;
      pointer-events: none;
    }
    .lm-input {
      width: 100%;
      height: 46px;
      background: rgba(0, 0, 20, 0.8);
      border: 1px solid rgba(0, 217, 252, 0.2);
      border-radius: 4px;
      padding: 0 14px 0 40px;
      font-size: 13.5px;
      color: #ffffff;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .lm-input:focus {
      border-color: #00d9fc;
      box-shadow: 0 0 12px rgba(0, 217, 252, 0.25);
    }
    .lm-input::placeholder {
      color: #64748b;
    }

    .btn-leadmagnet-download {
      height: 48px;
      width: 100%;
      border: none;
      border-radius: 4px;
      background: #00d9fc;
      color: #000014;
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: 0.3px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 217, 252, 0.3);
      margin-top: 4px;
    }
    .btn-leadmagnet-download:hover {
      background: #b0f3fe;
      color: #000014;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 217, 252, 0.45);
    }
    .leadmagnet-guarantee {
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 11px;
      color: #8f9fb6;
      line-height: 1.4;
      text-align: center;
    }
    .leadmagnet-guarantee i {
      color: #00d9fc;
      font-size: 11px;
      flex-shrink: 0;
    }

    /* Lead Magnet Responsive */
    @media (max-width: 991px) {
      .leadmagnet-card {
        grid-template-columns: 1fr;
        padding: 40px 25px;
        gap: 35px;
      }
      .leadmagnet-title {
        font-size: 26px;
      }
      .report-mockup-wrapper {
        margin-bottom: 18px;
      }
      .report-book-3d {
        width: 150px;
        height: 195px;
      }
    }

    /* ==========================================================================
       SECTION 8: REGIONAL DESKS & TECHNICAL PRE-SCOPING (BLUEPRINT SPECIFICATION)
       ========================================================================== */
    .regional-desks-section {
      padding: 95px 0 105px 0;
      background-color: #f8fafc;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
      background-image: 
        radial-gradient(circle at 8% 22%, rgba(0, 180, 216, 0.035) 0%, transparent 45%),
        radial-gradient(circle at 92% 78%, rgba(18, 28, 39, 0.03) 0%, transparent 50%);
      background-repeat: no-repeat;
    }
    .desks-section-header {
      text-align: center;
      max-width: 840px;
      margin: 0 auto 55px auto;
    }
    .desks-eyebrow {
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #0088cc;
      display: inline-block;
      margin-bottom: 12px;
    }
    .desks-title {
      font-size: 40px;
      font-weight: 800;
      color: #0b141d;
      letter-spacing: -1px;
      line-height: 1.2;
      margin-bottom: 16px;
      font-family: var(--font-sans);
    }
    .desks-subtitle {
      font-size: 16px;
      line-height: 1.7;
      color: #475569;
    }
    .desks-split-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 48px;
      align-items: flex-start;
    }
    .scoping-card-form {
      background: #ffffff;
      border-radius: 4px;
      padding: 44px;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
      border: 1px solid #e2e8f0;
    }
    .form-badge-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #0088cc;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      padding: 5px 12px;
      border-radius: 4px;
      margin-bottom: 16px;
    }
    .form-title {
      font-size: 26px;
      font-weight: 800;
      color: #0b141d;
      letter-spacing: -0.5px;
      margin-bottom: 10px;
    }
    .form-lead {
      font-size: 14px;
      line-height: 1.6;
      color: #64748b;
      margin-bottom: 28px;
    }
    .form-grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-bottom: 18px;
    }
    .input-field-group {
      margin-bottom: 18px;
    }
    .input-field-group label {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 6px;
    }
    .input-styled, .textarea-styled {
      width: 100%;
      padding: 12px 16px;
      font-size: 14px;
      font-family: var(--font-sans);
      color: #0f172a;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      box-sizing: border-box;
    }
    .input-styled:focus, .textarea-styled:focus {
      outline: none;
      border-color: #0088cc;
      box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.15);
    }
    .btn-submit-scoping {
      width: 100%;
      background: #0b141d;
      color: #ffffff;
      border: none;
      padding: 15px 24px;
      border-radius: 4px;
      font-size: 14.5px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      transition: all 0.25s ease;
      margin-top: 10px;
    }
    .btn-submit-scoping:hover {
      background: #1e293b;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(11, 20, 29, 0.25);
    }

    .regional-desks-column {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .regional-desk-card {
      background: #ffffff;
      border-radius: 4px;
      padding: 30px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
      transition: transform 0.2s ease;
    }
    .regional-desk-card:hover {
      transform: translateY(-2px);
    }
    .desk-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid #f1f5f9;
    }
    .desk-title-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .desk-flag-icon {
      font-size: 26px;
    }
    .desk-name {
      font-size: 17px;
      font-weight: 800;
      color: #0b141d;
      letter-spacing: -0.3px;
    }
    .desk-tagline {
      display: block;
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
    }
    .desk-status-pill {
      font-size: 11px;
      font-weight: 700;
      color: #059669;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      padding: 4px 10px;
      border-radius: 4px;
    }
    .desk-focus-text {
      font-size: 13.5px;
      line-height: 1.6;
      color: #475569;
      margin-bottom: 16px;
    }
    .desk-contact-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .desk-contact-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13.5px;
      color: #334155;
    }
    .desk-contact-item i {
      color: #0088cc;
      width: 16px;
      text-align: center;
    }
    .desk-contact-item a {
      color: #0b141d;
      font-weight: 600;
      text-decoration: none;
    }
    .desk-contact-item a:hover {
      color: #0088cc;
      text-decoration: underline;
    }
    .desk-fiduciary-card {
      background: #0b141d;
      color: #ffffff;
      border-radius: 4px;
      padding: 24px;
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }
    .desk-fiduciary-card .fiduciary-icon {
      width: 44px;
      height: 44px;
      border-radius: 4px;
      background: rgba(0, 229, 255, 0.15);
      color: #00e5ff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .desk-fiduciary-card h5 {
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 6px;
    }
    .desk-fiduciary-card p {
      font-size: 13px;
      line-height: 1.55;
      color: #94a3b8;
      margin: 0;
    }
    @media (max-width: 992px) {
      .desks-split-grid {
        grid-template-columns: 1fr;
      }
      .form-grid-2col {
        grid-template-columns: 1fr;
      }
      .scoping-card-form {
        padding: 28px 20px;
      }
    }



        /* ==========================================================================
       SECTION 2: BORDERED RIBBON GRID (SESUAI GAMBAR SCREENSHOT)
       ========================================================================== */
    .standards-grid-section {
      background-color: #ffffff;
      padding: 85px 0 95px 0;
      border: none !important;
      position: relative;
    }

    .standards-section-header {
      text-align: center;
      max-width: 840px;
      margin: 0 auto 48px auto;
    }
    .standards-sec-eyebrow {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #121c27;
      margin-bottom: 14px;
      display: block;
    }
    .standards-sec-title {
      font-size: 38px;
      font-weight: 600;
      color: #000000;
      line-height: 1.2;
      letter-spacing: -0.8px;
      margin-bottom: 16px;
      font-family: var(--font-sans);
    }
    .standards-sec-desc {
      font-size: 15px;
      line-height: 1.7;
      color: #64748b;
    }

    /* Grid 4 Kolom x 2 Baris Bersih Tanpa Garis Atas Menerus */
    .standards-bordered-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      border: none !important;
      border-radius: 0;
      overflow: visible;
      background-color: transparent !important;
      box-shadow: none !important;
    }

    /* Setiap Sel / Kartu Mandiri dengan Border Elegan */
    .standard-grid-cell {
      padding: 30px 22px;
      display: flex;
      align-items: center;
      gap: 16px;
      background-color: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      transition: all 0.25s ease;
      min-height: 105px;
    }
    .standard-grid-cell:hover {
      background-color: #ffffff;
      border-color: #cbd5e1;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
      z-index: 2;
    }

    /* Ikon di Samping Kiri Teks */
    .cell-icon-wrap {
      font-size: 20px;
      color: #334155;
      width: 42px;
      height: 42px;
      border-radius: 4px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.25s ease;
    }
    .standard-grid-cell:hover .cell-icon-wrap {
      color: #00e5ff;
      background: #0b141d;
      border-color: #0b141d;
    }

    .cell-content {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .cell-title {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.2px;
      line-height: 1.25;
      margin-bottom: 3px;
      font-family: var(--font-sans);
    }
    .cell-subtitle {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: #64748b;
      line-height: 1.35;
      white-space: normal;
    }
    .standard-grid-cell:hover .cell-title {
      color: #000000;
    }

    /* Responsif untuk Layar Tablet & HP */
    @media (max-width: 1200px) {
      .standards-bordered-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
      }
      .standards-sec-title { font-size: 32px; }
    }
    @media (max-width: 768px) {
      .standards-bordered-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
      }
      .standard-grid-cell {
        padding: 14px 12px !important;
        min-height: auto !important;
        gap: 10px !important;
        border-radius: 4px !important;
      }
      .cell-icon-wrap {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
      }
      .cell-title {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
      }
      .cell-subtitle {
        font-size: 9px !important;
        line-height: 1.25 !important;
        letter-spacing: 0.3px !important;
      }
      .standards-sec-title { font-size: 24px !important; }
      .standards-grid-section { padding: 50px 0 !important; }
    }



/* ==========================================================================
   SECTION: HIGH-CONSEQUENCE INFRASTRUCTURE EXPOSURE AUDIT (SIMPLE & CLEAN)
   ========================================================================== */
.risk-exposure-section {
  background-color: #0b131e;
  padding: 95px 0 100px 0;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

/* Header */
.risk-exposure-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 55px auto;
}
.risk-sec-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #64748b;
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  transition: color 0.3s ease;
}
.risk-exposure-section:hover .risk-sec-eyebrow {
  color: #38bdf8;
}
.risk-main-heading {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.6px;
  margin-bottom: 16px;
  font-family: var(--font-sans);
}
.risk-sub-heading {
  font-size: 15px;
  line-height: 1.7;
  color: #94a3b8;
  max-width: 740px;
  margin: 0 auto;
}

/* 3-Column Simple Cards Grid */
.risk-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

/* Individual Clean Card - Monochrome by Default, Color on Hover */
.risk-simple-card {
  background-color: #0d1520;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 34px 28px 28px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.risk-simple-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
  background-color: #111a26;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.risk-simple-card.card-featured {
  border-color: rgba(255, 255, 255, 0.08);
  background: #0d1520;
}
.risk-simple-card.card-featured:hover {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(180deg, #142030 0%, #101926 100%);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.08);
}

/* Card Head */
.risk-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.risk-simple-icon {
  width: 46px;
  height: 46px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Hover Color Activations for Icons */
.risk-simple-card:hover .icon-spatial {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}
.risk-simple-card.card-featured:hover .icon-geology {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.35);
}
.risk-simple-card:hover .icon-hazard {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.35);
}

.risk-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #64748b;
  transition: color 0.3s ease;
}
.risk-simple-card:hover .risk-tag {
  color: #94a3b8;
}
.tag-featured {
  color: #64748b;
}
.risk-simple-card.card-featured:hover .tag-featured {
  color: #fbbf24;
}

/* Card Content */
.risk-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin-bottom: 12px;
  font-family: var(--font-sans);
  transition: color 0.3s ease;
}
.risk-simple-card:hover .risk-card-title {
  color: #ffffff;
}
.risk-card-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #94a3b8;
  margin-bottom: 22px;
}

/* Issue Checklist */
.risk-issues-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.risk-issues-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #94a3b8;
  transition: color 0.3s ease;
}
.risk-simple-card:hover .risk-issues-list li {
  color: #cbd5e1;
}
.risk-issues-list li i {
  color: #64748b;
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
  transition: color 0.3s ease;
}
.risk-simple-card:hover .risk-issues-list li i {
  color: #ef4444;
}

/* Solution Banner at the Bottom of Each Card */
.risk-card-solution {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 14px 16px;
  margin-top: auto;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.risk-simple-card:hover .risk-card-solution {
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.2);
}
.risk-simple-card.card-featured:hover .risk-card-solution {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.25);
}

.solution-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}
.risk-simple-card:hover .solution-label {
  color: #38bdf8;
}
.risk-simple-card.card-featured:hover .solution-label {
  color: #fbbf24;
}
.solution-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: #94a3b8;
  transition: color 0.3s ease;
}
.risk-simple-card:hover .solution-text {
  color: #e2e8f0;
}

/* Simple Informative Footnote */
.risk-simple-footnote {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #94a3b8;
}
.risk-simple-footnote i {
  color: #64748b;
  font-size: 20px;
  flex-shrink: 0;
  transition: color 0.3s ease;
}
.risk-simple-footnote:hover i {
  color: #38bdf8;
}

/* Responsive (Tablet & HP) */
@media (max-width: 1024px) {
  .risk-cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .risk-exposure-section {
    padding: 60px 0 65px 0;
  }
  .risk-main-heading {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 12px;
  }
  .risk-sub-heading {
    font-size: 13.5px;
    line-height: 1.6;
  }
  .risk-simple-card {
    padding: 22px 18px;
  }
  .risk-card-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .risk-card-desc {
    font-size: 13px;
    margin-bottom: 18px;
  }
  .risk-issues-list li {
    font-size: 12.5px;
  }
  .solution-text {
    font-size: 12px;
  }
  .risk-simple-footnote {
    padding: 16px 18px;
    font-size: 12.5px;
    align-items: flex-start;
  }
  .risk-simple-footnote i {
    margin-top: 2px;
    font-size: 16px;
  }
}



/* ==========================================================================
   TECHNICAL PAPERS / SINGLE POST LAYOUT & EXECUTIVE DOSSIER (SUT ALIGNED)
   ========================================================================== */
.single-hero-banner {
  position: relative;
  background: linear-gradient(rgba(0, 0, 20, 0.88), rgba(0, 31, 59, 0.94)),
              url('https://geoproverisk.com/wp-content/uploads/2026/09/about-operations-banner-1.jpg') center/cover no-repeat;
  padding: 105px 0 85px 0;
  color: #ffffff;
  border-bottom: 1px solid var(--border-dark);
}
.single-hero-content {
  max-width: 960px;
}
.single-hero-title {
  font-family: var(--font-sans);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.25;
  margin-bottom: 20px;
  color: #ffffff;
}
.single-hero-divider {
  width: 70px;
  height: 2px;
  background-color: var(--cyan-accent);
  margin-bottom: 22px;
}
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #94a3b8;
}
.breadcrumbs a {
  color: #ffffff;
  transition: color 0.2s ease;
}
.breadcrumbs a:hover {
  color: var(--cyan-accent);
}
.breadcrumbs i {
  font-size: 11px;
  color: #64748b;
}

/* ==========================================================================
   GEOPROVE SINGLE POST / TECHNICAL WHITE PAPER STYLING (V2.7.0)
   ========================================================================== */
.single-main-section {
  padding: 70px 0 110px 0;
  background: #ffffff;
}
.single-layout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 55px;
  align-items: start;
}
@media (min-width: 993px) {
  .sidebar-wrapper {
    position: sticky;
    top: 95px;
  }
}
@media (max-width: 1024px) {
  .single-layout-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
}

.article-container {
  background: #ffffff;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 6px;
  padding: 48px 52px;
  box-shadow: 0 4px 25px rgba(0, 0, 20, 0.03);
}

.article-top-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13.5px;
  color: #64748b;
}
.author-mini-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.author-mini-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e2e8f0;
}
.article-meta-point {
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-meta-point i {
  color: #94a3b8;
  font-size: 13px;
}

/* Featured Image on Single Article */
.single-featured-image-wrap {
  margin: 10px 0 35px 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 20, 0.08);
  border: 1px solid #e2e8f0;
  background: #000014;
}
.single-featured-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.single-featured-caption {
  font-size: 12.5px;
  color: #64748b;
  padding: 10px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  margin: 0;
  font-style: italic;
  text-align: center;
}

/* The Deck / Lead Paragraph */
.article-lead-deck {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  color: #1e293b;
  margin-bottom: 32px;
  border-left: 4px solid #001f3b;
  padding-left: 20px;
  background: #f8fafc;
  padding: 18px 22px;
  border-radius: 0 4px 4px 0;
}
.article-lead-deck p {
  margin: 0 !important;
  color: #1e293b !important;
}

/* Article Content & Typography */
.article-content {
  font-size: 16px;
  line-height: 1.85;
  color: #334155;
}
.article-content p {
  font-size: 16px;
  line-height: 1.85;
  color: #334155;
  margin-bottom: 24px;
}
.article-content h2 {
  font-family: var(--font-sans, inherit);
  font-size: 26px;
  font-weight: 700;
  color: #000014;
  line-height: 1.35;
  margin: 40px 0 18px 0;
  letter-spacing: -0.5px;
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 10px;
}
.article-content h3 {
  font-family: var(--font-sans, inherit);
  font-size: 20px;
  font-weight: 700;
  color: #001f3b;
  margin: 32px 0 14px 0;
  letter-spacing: -0.3px;
}
.article-content h4 {
  font-size: 17px;
  font-weight: 700;
  color: #001f3b;
  margin: 24px 0 12px 0;
}
.article-content ul,
.article-content ol {
  margin: 18px 0 24px 24px;
  color: #334155;
  line-height: 1.8;
}
.article-content li {
  margin-bottom: 8px;
}
.article-content blockquote {
  background: #f8fafc;
  border-left: 4px solid var(--cyan-accent, #00d9fc);
  padding: 20px 24px;
  margin: 30px 0;
  font-style: italic;
  color: #1e293b;
  font-size: 16.5px;
  line-height: 1.75;
  border-radius: 0 4px 4px 0;
}
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 24px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
  font-size: 14px;
}
.article-content table th {
  background: #001f3b;
  color: #ffffff;
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}
.article-content table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}
.article-content table tr:nth-child(even) {
  background: #f8fafc;
}

/* Executive CTA Panel (B2B Advisory Desk) */
.executive-cta-panel {
  background: linear-gradient(135deg, #00172e 0%, #001f3b 100%) !important;
  color: #ffffff !important;
  padding: 36px 34px !important;
  border-radius: 6px !important;
  border-left: 5px solid var(--cyan-accent, #00d9fc) !important;
  margin-top: 45px !important;
  margin-bottom: 35px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 20, 0.12) !important;
}
.executive-cta-panel .cta-panel-kicker {
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--cyan-accent, #00d9fc) !important;
  margin-bottom: 10px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.executive-cta-panel .cta-panel-title {
  color: #ffffff !important;
  margin-bottom: 12px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
.executive-cta-panel p,
.executive-cta-panel .cta-panel-desc {
  color: #cbd5e1 !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}
.cta-buttons-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.btn-cta-primary {
  background-color: var(--cyan-accent, #00d9fc);
  color: #000014 !important;
  padding: 13px 24px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-cta-primary:hover {
  background-color: #00bfe0;
  transform: translateY(-1px);
}
.btn-cta-secondary {
  background-color: transparent;
  color: #ffffff !important;
  border: 1px solid rgba(0, 217, 252, 0.4);
  padding: 13px 24px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-cta-secondary:hover {
  background: rgba(0, 217, 252, 0.08);
  border-color: var(--cyan-accent, #00d9fc);
}
.cta-desks-grid {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cta-desk-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 14px 16px;
  box-sizing: border-box;
}
.cta-desk-item strong {
  color: #ffffff !important;
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}
.cta-desk-item span {
  color: #94a3b8 !important;
  font-size: 12px;
  display: block;
  margin-bottom: 8px;
  line-height: 1.4;
}
.cta-desk-item .cta-desk-email {
  color: #00d9fc !important;
  background: rgba(0, 217, 252, 0.12) !important;
  border: 1px solid rgba(0, 217, 252, 0.25);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  display: inline-block;
  text-decoration: none;
  word-break: break-all;
  transition: all 0.2s ease;
}
.cta-desk-item .cta-desk-email:hover {
  background: #00d9fc !important;
  color: #001f3b !important;
}

/* Tags & Sharing */
.article-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  margin-top: 30px;
}
.article-tags-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tags-label {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  margin-right: 4px;
}
.tag-pill {
  background: #f1f5f9;
  color: #001f3b;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid #e2e8f0;
}
.tag-pill:hover {
  background: #001f3b;
  color: #ffffff;
}
.article-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  color: #1e293b;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}
.article-share-btn:hover {
  background: #e2e8f0;
}

/* Sidebar Styling */
.sidebar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sidebar-widget {
  background: #ffffff;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 20, 0.03);
}

/* Author Widget */
.author-widget-card {
  padding: 34px 26px;
  text-align: center;
}
.author-avatar-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin: 0 auto 16px auto;
  overflow: hidden;
  border: 3px solid #f1f5f9;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
.author-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-widget-name {
  font-size: 19px;
  font-weight: 700;
  color: #000014;
  margin-bottom: 4px;
}
.author-widget-role {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 14px;
}
.author-widget-bio {
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 18px;
}
.author-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 217, 252, 0.1);
  color: #007a99;
  border: 1px solid rgba(0, 217, 252, 0.35);
  font-weight: 700;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
}

/* Search Widget */
.search-widget-wrap {
  background: transparent;
  border: none;
  box-shadow: none;
}
.search-input-group {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #cbd5e1;
  padding-bottom: 8px;
  transition: border-color 0.2s ease;
}
.search-input-group:focus-within {
  border-color: #001f3b;
}
.search-input-group input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-sans, inherit);
  font-size: 14.5px;
  color: #000014;
  outline: none;
  padding-right: 35px;
}
.search-input-group button {
  position: absolute;
  right: 0;
  background: transparent;
  border: none;
  font-size: 15px;
  color: #64748b;
  cursor: pointer;
}

/* Categories Widget */
.widget-dark-header {
  background-color: #001f3b;
  color: #ffffff;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.category-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: all 0.2s ease;
}
.category-item-row:last-child { border-bottom: none; }
.category-item-row:hover {
  background-color: #f8fafc;
  color: #001f3b;
  padding-left: 24px;
}
.cat-count {
  color: #94a3b8;
  font-weight: 700;
  font-size: 12px;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 12px;
}

/* Latest Papers Widget */
.recent-posts-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.recent-post-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.recent-thumb-square {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: #001f3b;
}
.recent-thumb-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.recent-post-item:hover .recent-thumb-square img {
  transform: scale(1.08);
}
.recent-post-info { flex: 1; }
.recent-date {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 3px;
  display: block;
}
.recent-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.recent-title a {
  color: #1e293b;
  text-decoration: none;
  transition: color 0.2s ease;
}
.recent-title a:hover { color: #001f3b; }

/* Sticky Advisory CTA Widget in Sidebar */
.advisory-sidebar-cta {
  background: linear-gradient(145deg, #00172e 0%, #001f3b 100%);
  color: #ffffff;
  padding: 26px 22px;
  border-radius: 6px;
  border-left: 4px solid var(--cyan-accent, #00d9fc);
  box-shadow: 0 8px 25px rgba(0, 0, 20, 0.08);
}
.sidebar-cta-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cyan-accent, #00d9fc);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-cta-title {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
}
.sidebar-cta-desc {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 18px;
}
.btn-sidebar-advisory-cta {
  display: block;
  text-align: center;
  background: var(--cyan-accent, #00d9fc);
  color: #000014 !important;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 16px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-sidebar-advisory-cta:hover {
  background: #00bfe0;
}

/* ==========================================================================
   SINGLE POST MOBILE RESPONSIVE ADAPTATIONS (Zero Horizontal Overflow)
   ========================================================================== */
@media (max-width: 992px) {
  .single-main-section {
    padding: 35px 0 60px 0 !important;
  }
  .single-layout-grid {
    grid-template-columns: 100% !important;
    gap: 40px !important;
  }
  .sidebar-wrapper {
    position: static !important;
  }
  .article-container {
    padding: 26px 20px !important;
  }
  .single-hero-banner {
    padding: 40px 0 30px 0 !important;
  }
  .single-hero-title {
    font-size: clamp(22px, 5vw, 32px) !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 768px) {
  .article-container {
    padding: 20px 16px !important;
  }
  .article-top-meta {
    gap: 12px 16px !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    font-size: 12px !important;
  }
  .article-lead-deck {
    font-size: 15px !important;
    padding: 14px 16px !important;
    margin-bottom: 22px !important;
  }
  .article-content {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
  .article-content h2 {
    font-size: 21px !important;
    margin: 30px 0 14px 0 !important;
  }
  .article-content h3 {
    font-size: 18px !important;
    margin: 24px 0 12px 0 !important;
  }
  .executive-cta-panel {
    padding: 22px 16px !important;
    margin-top: 35px !important;
  }
  .executive-cta-panel .cta-panel-title {
    font-size: 18px !important;
  }
  .cta-buttons-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .btn-cta-primary,
  .btn-cta-secondary {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }
  .cta-desks-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .article-footer-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .article-share-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   SERVICES & COMPARISON TABLE RESPONSIVE ENHANCEMENTS
   ========================================================================== */
.services-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}

.matrix-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 100%;
}

.comparison-wrapper {
  margin-bottom: 48px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 30px;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  max-width: 100% !important;
}

.comp-table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: 13.5px;
}

@media (max-width: 1024px) {
  .services-grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .services-grid-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .matrix-table-card {
    border-radius: 4px !important;
  }
  .comparison-wrapper {
    padding: 16px 12px !important;
  }
}

/* ==========================================================================
   STRICT MOBILE ZERO-OVERFLOW & PROPORTIONAL COMPACT CARDS
   ========================================================================== */
html, body {
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: border-box !important;
}

/* Explicit overflow visible on navbar to prevent clipping dropdowns */
.site-nav,
.site-nav .container-herrington,
.site-nav .nav-inner,
.site-nav .main-menu,
.site-nav .menu-item {
  overflow: visible !important;
}

section, header:not(.site-nav), footer, main,
.services-hero-banner, .services-intro-strip, .services-grid-section,
.standards-matrix-section, .fiduciary-value-section, .process-flow-section,
.services-cta-banner {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* WordPress Admin Bar sticky offset compatibility */
.admin-bar .site-nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .site-nav {
    top: 46px;
  }
}

.matrix-table-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
  border-radius: 4px !important;
}

.table-scroll-hint {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 10px;
}

@media (max-width: 992px) {
  .table-scroll-hint {
    display: flex !important;
  }
  .container-herrington {
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .service-card-herrington {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 4px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .service-image-box {
    height: 180px !important;
    width: 100% !important;
  }
  .service-content-body {
    padding: 20px 16px !important;
    flex-grow: 1 !important;
  }
  .service-title {
    font-size: 18.5px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  .service-desc {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }
  .service-deliverables-list {
    padding: 10px 0 !important;
    margin-bottom: 14px !important;
    gap: 8px !important;
  }
  .service-card-action {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
  }
  .service-link-btn {
    font-size: 13px !important;
    padding: 9px 15px !important;
    background: #0b141d !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }
  .service-modal-btn {
    font-size: 12px !important;
    padding: 8px 12px !important;
    background: #f1f5f9 !important;
    border-radius: 4px !important;
    color: #475569 !important;
    border: none !important;
    white-space: nowrap !important;
  }
  .services-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .herrington-service-card {
    padding: 26px 20px !important;
    min-height: auto !important;
    border-radius: 4px !important;
  }
}



/* ==========================================================================
   ROBUST DESKTOP DROPDOWN NAVIGATION & HOVER BRIDGE
   ========================================================================== */
.site-nav,
.site-nav .container-herrington,
.site-nav .nav-inner,
.site-nav .main-menu,
.site-nav .menu-item {
  overflow: visible !important;
}

.site-nav {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.dropdown:not(.dropdown-flyout-parent),
.sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 320px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 3px solid #000014 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14) !important;
  border-radius: 0 0 4px 4px !important;
  list-style: none !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease !important;
  z-index: 99999 !important;
  display: block !important;
}

/* Hover Bridge: Prevents cursor drop across the gap */
.dropdown::before,
.sub-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -16px !important;
  left: 0 !important;
  right: 0 !important;
  height: 16px !important;
  background: transparent !important;
}

/* Hover Selectors */
.menu-item:hover > .dropdown,
.menu-item:hover > .sub-menu,
.has-dropdown:hover > .dropdown,
.has-dropdown:hover > .sub-menu,
.menu-item-has-children:hover > .dropdown,
.menu-item-has-children:hover > .sub-menu,
.menu-item.dropdown-open > .dropdown,
.has-dropdown.dropdown-open > .dropdown,
.menu-item.dropdown-open > .sub-menu,
.has-dropdown.dropdown-open > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.dropdown-category-tag {
  padding: 8px 22px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #0088cc !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
}

.dropdown:not(.dropdown-flyout-parent) li a,
.sub-menu li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 22px !important;
  font-size: 13.5px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.dropdown:not(.dropdown-flyout-parent) li:last-child a,
.sub-menu li:last-child a {
  border-bottom: none !important;
}

.dropdown:not(.dropdown-flyout-parent) li a:hover,
.sub-menu li a:hover {
  background-color: #f8fafc !important;
  color: #0b141d !important;
  font-weight: 600 !important;
  padding-left: 26px !important;
}

.menu-item:hover > .menu-link .fa-chevron-down,
.has-dropdown:hover > .menu-link .fa-chevron-down {
  transform: rotate(180deg) !important;
}
.menu-link .fa-chevron-down {
  transition: transform 0.22s ease !important;
}


/* Auxiliary Layout Utilities */
.book-cover { width: 100%; height: 100%; position: relative; }
.book-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; }
.box-icon { display: flex; align-items: center; justify-content: center; }
.desk-body { margin-top: 10px; }
.fiduciary-text { font-size: 14px; color: #64748b; }

/* ==========================================================================
   MAGNETIC FEATURED NAVBAR ITEM: TECHNICAL PAPERS
   Distinctive visual presence, pulsing radar beacon, & high-tech hover trigger
   ========================================================================== */
.menu-item-featured {
  display: flex !important;
  align-items: center !important;
}

.nav-featured-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  background: rgba(0, 136, 204, 0.06) !important;
  border: 1.5px solid #0088cc !important;
  color: #0b141d !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  line-height: 1 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  box-shadow: 0 2px 10px rgba(0, 136, 204, 0.12) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* Bulatan Denyut Aktif (Pulsing Radar Beacon) */
.pulse-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0088cc;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  transition: background-color 0.25s ease;
}

.pulse-beacon::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 4px;
  background: rgba(0, 136, 204, 0.4);
  animation: beaconPulseWave 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes beaconPulseWave {
  0% {
    transform: scale(0.85);
    opacity: 1;
  }
  70% {
    transform: scale(2.4);
    opacity: 0;
  }
  100% {
    transform: scale(0.85);
    opacity: 0;
  }
}

.featured-arrow {
  font-size: 11.5px;
  color: #0088cc;
  transition: transform 0.25s ease, color 0.25s ease;
}

/* HOVER TRIGGER: Bertransformasi menjadi Deep Midnight Navy & Cyan Glare */
.nav-featured-pill:hover,
.menu-item-featured:hover .nav-featured-pill {
  background: #000014 !important;
  color: #ffffff !important;
  border-color: #000014 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 20, 0.25), 0 0 14px rgba(0, 217, 252, 0.35) !important;
}

.nav-featured-pill:hover .pulse-beacon,
.menu-item-featured:hover .pulse-beacon {
  background-color: #00e5ff !important;
}

.nav-featured-pill:hover .pulse-beacon::before,
.menu-item-featured:hover .pulse-beacon::before {
  background: rgba(0, 229, 255, 0.7) !important;
}

.nav-featured-pill:hover .featured-arrow,
.menu-item-featured:hover .featured-arrow {
  color: #00e5ff !important;
  transform: translate(2px, -2px);
}

/* Prevent underline indicator collision on active state */
.menu-item-featured.active .menu-link::after {
  display: none !important;
}

.menu-item-featured.active .nav-featured-pill {
  background: rgba(0, 136, 204, 0.12) !important;
  border-color: #0088cc !important;
}

/* Mobile Drawer Featured Item */
.drawer-item-featured {
  margin: 6px 0 !important;
}

.drawer-item-featured .drawer-featured-pill {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(0, 136, 204, 0.1) !important;
  border: 1px solid rgba(0, 136, 204, 0.35) !important;
  border-radius: 4px !important;
  padding: 11px 16px !important;
  color: #00e5ff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.drawer-item-featured .drawer-featured-pill .drawer-link-text {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.drawer-item-featured .drawer-featured-pill .featured-arrow {
  color: #00e5ff !important;
}

.drawer-item-featured:hover .drawer-featured-pill {
  background: rgba(0, 136, 204, 0.2) !important;
  border-color: #00e5ff !important;
}

/* ==========================================================================
   HALAMAN: SERVICES DIRECTORY & TECHNICAL PRACTICES (HERRINGTON CLONE)
   ========================================================================== */

/* 1. HERO BREADCRUMB BANNER */
.services-hero-banner {
  position: relative !important;
  background: linear-gradient(135deg, rgba(7, 14, 21, 0.95) 0%, rgba(11, 20, 29, 0.88) 100%),
              url('https://geoproverisk.com/wp-content/uploads/2026/09/services-hero-banner.jpg') center/cover no-repeat !important;
  padding: 105px 0 85px 0 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.services-hero-banner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: radial-gradient(circle at 80% 30%, rgba(0, 229, 255, 0.1) 0%, transparent 65%);
  pointer-events: none;
}
.services-hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0;
}
.services-hero-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(0, 229, 255, 0.12) !important;
  border: 1px solid rgba(0, 229, 255, 0.3) !important;
  color: #00e5ff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  margin-bottom: 22px !important;
}
.services-hero-title {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-size: 46px !important;
  font-weight: 800 !important;
  letter-spacing: -1.2px !important;
  line-height: 1.18 !important;
  color: #ffffff !important;
  margin-bottom: 22px !important;
}
.services-hero-title span {
  color: #00e5ff !important;
}
.services-hero-divider {
  width: 54px !important;
  height: 3px !important;
  background-color: #00e5ff !important;
  margin-bottom: 22px !important;
}
.breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: #94a3b8 !important;
}
.breadcrumbs a {
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.breadcrumbs a:hover {
  color: #00e5ff !important;
}
.breadcrumbs i {
  font-size: 10px !important;
  color: #64748b !important;
}
.breadcrumbs .current {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* 2. SECTION 1: FILTER BAR & INTRO */
.services-intro-strip {
  padding: 85px 0 35px 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}
.intro-flex-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 45px !important;
}
.intro-text-side {
  max-width: 780px !important;
}
.intro-tag-blue {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: #0088cc !important;
  margin-bottom: 12px !important;
}
.intro-title-dark {
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px !important;
  color: #0b141d !important;
  line-height: 1.25 !important;
  margin-bottom: 16px !important;
}
.intro-lead-p {
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: #64748b !important;
  margin: 0 !important;
}
.services-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 25px !important;
}
.filter-btn {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 10px 22px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.filter-btn:hover {
  background: #ffffff !important;
  border-color: #0b141d !important;
  color: #0b141d !important;
  transform: translateY(-1px) !important;
}
.filter-btn.active {
  background: #0b141d !important;
  border-color: #0b141d !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(11, 20, 29, 0.15) !important;
}
.filter-count {
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}
.filter-btn.active .filter-count {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* 3. SECTION 2: 6 PRACTICE CARDS GRID (#services-grid) */
.services-grid-section {
  padding: 30px 0 95px 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}
.services-grid-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  width: 100% !important;
}
.service-card-herrington {
  background: #ffffff !important;
  border-radius: 4px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 0 !important; /* WAJIB 0: mematikan padding kartu dari baris sebelumnya */
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
}
.service-card-herrington:hover {
  transform: translateY(-8px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 38px rgba(11, 20, 29, 0.08) !important;
}
.service-card-herrington.featured {
  border-top: 3px solid #00e5ff !important;
}
.service-image-box {
  position: relative !important;
  height: 230px !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #0b141d !important;
}
.service-image-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}
.service-card-herrington:hover .service-image-box img {
  transform: scale(1.08) !important;
}
.service-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(11, 20, 29, 0.75) 0%, transparent 60%) !important;
}
.service-category-badge {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  background: rgba(11, 20, 29, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 2 !important;
}
.service-num-floating {
  position: absolute !important;
  bottom: 14px !important;
  right: 18px !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.35) !important;
  line-height: 1 !important;
  z-index: 2 !important;
}
.service-content-body {
  padding: 30px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  box-sizing: border-box !important;
}
.service-standard-tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #0088cc !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.service-card-title {
  font-size: 20.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: #0b141d !important;
  line-height: 1.35 !important;
  margin: 0 0 14px 0 !important;
}
.service-card-title a {
  color: #0b141d !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.service-card-title a:hover {
  color: #0088cc !important;
}
.service-card-p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #64748b !important;
  margin-bottom: 22px !important;
  flex-grow: 1 !important;
}
.service-deliverables-list {
  list-style: none !important;
  padding: 16px 0 !important;
  margin: 0 0 24px 0 !important;
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.service-deliverables-list li {
  font-size: 13px !important;
  color: #334155 !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.service-deliverables-list li i {
  color: #00e5ff !important;
  font-size: 12px !important;
  margin-top: 3px !important;
}
.service-card-action {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: auto !important;
}
.service-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #0b141d !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.service-link-btn:hover {
  background: #0088cc !important;
  color: #ffffff !important;
  transform: translateX(3px) !important;
}
.service-modal-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}
.service-modal-btn:hover {
  background: #e2e8f0 !important;
  color: #0b141d !important;
}

/* 4. SECTION 3: STANDARDS SPECIFICATION MATRIX */
.standards-matrix-section {
  padding: 95px 0 !important;
  background: #fafbfc !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
}
.matrix-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 55px auto;
}
.matrix-title {
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px !important;
  color: #0b141d !important;
  margin: 12px 0 16px 0 !important;
}
.matrix-sub {
  font-size: 15px !important;
  color: #64748b !important;
  line-height: 1.65 !important;
}
.matrix-table-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  overflow-x: auto !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}
.matrix-table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: left !important;
  font-size: 14px !important;
}
.matrix-table th {
  background: #0b141d !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 18px 24px !important;
  text-transform: uppercase !important;
  font-size: 11.5px !important;
  letter-spacing: 0.8px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.matrix-table th:last-child {
  border-right: none !important;
}
.matrix-table td {
  padding: 20px 24px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #475569 !important;
  vertical-align: top !important;
}
.matrix-table td strong {
  display: block !important;
  color: #0b141d !important;
  font-size: 15px !important;
  margin-bottom: 4px !important;
}
.standard-pill {
  display: inline-block !important;
  background: #f1f5f9 !important;
  color: #0b141d !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
  border: 1px solid #e2e8f0 !important;
}
.fiduciary-gain-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #0284c7 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

/* 5. SECTION 4: FIDUCIARY ADVANTAGE (THE BRAIN, NOT THE BARGE) */
.fiduciary-value-section {
  padding: 100px 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}
.fiduciary-split-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}
.fiduciary-left-side {
  max-width: 540px !important;
}
.fiduciary-heading {
  font-size: 38px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: #0b141d !important;
  line-height: 1.2 !important;
  margin: 18px 0 20px 0 !important;
}
.fiduciary-heading span {
  color: #0088cc !important;
}
.fiduciary-desc-p {
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: #64748b !important;
  margin-bottom: 20px !important;
}
.btn-fiduciary-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #0b141d !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 16px 28px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  margin-top: 15px !important;
  transition: all 0.25s ease !important;
}
.btn-fiduciary-cta:hover {
  background: #0088cc !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}
.fiduciary-cards-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.fiduciary-feature-card {
  display: flex !important;
  gap: 20px !important;
  padding: 26px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  transition: all 0.25s ease !important;
}
.fiduciary-feature-card:hover {
  background: #ffffff !important;
  border-color: #0088cc !important;
  box-shadow: 0 10px 25px rgba(0, 136, 204, 0.08) !important;
  transform: translateX(4px) !important;
}
.feature-card-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 4px !important;
  background: #e0f2fe !important;
  color: #0088cc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
}
.feature-card-body h4 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0b141d !important;
  margin: 0 0 6px 0 !important;
}
.feature-card-body p {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* 6. SECTION 5: 4-STAGE DELIVERY WORKFLOW */
.process-flow-section {
  padding: 95px 0 !important;
  background: #f1f5f9 !important;
  box-sizing: border-box !important;
}
.process-step-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}
.process-step-card {
  background: #ffffff !important;
  border-radius: 4px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 32px 24px !important;
  position: relative !important;
  transition: all 0.25s ease !important;
}
.process-step-card:hover {
  transform: translateY(-5px) !important;
  border-color: #0b141d !important;
  box-shadow: 0 12px 30px rgba(11, 20, 29, 0.06) !important;
}
.process-num-indicator {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0088cc !important;
  margin-bottom: 16px !important;
  background: #eff6ff !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.process-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0b141d !important;
  margin-bottom: 12px !important;
}
.process-desc {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* 7. SECTION 6: BOTTOM EXECUTIVE CTA BANNER */
.services-cta-banner {
  background: linear-gradient(135deg, #0b141d 0%, #070e15 100%) !important;
  padding: 70px 0 !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
}
.cta-flex-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
}
.cta-text-side h3 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 10px 0 !important;
}
.cta-text-side p {
  font-size: 15px !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  max-width: 650px !important;
}
.btn-cta-gold {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #00e5ff !important;
  color: #0b141d !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 16px 32px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.25s ease !important;
}
.btn-cta-gold:hover {
  background: #ffffff !important;
  color: #0b141d !important;
  transform: translateY(-2px) !important;
}

/* 8. RESPONSIVE MEDIA QUERIES FOR SERVICES */
@media (max-width: 1024px) {
  .services-grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .fiduciary-split-wrap {
    grid-template-columns: 1fr !important;
    gap: 45px !important;
  }
  .process-step-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}
@media (max-width: 768px) {
  .services-hero-title {
    font-size: 30px !important;
  }
  .services-grid-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .process-step-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .cta-flex-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ==========================================================================
   HALAMAN: SINGLE SERVICE PRACTICE DEEP DIVE - CBRA (/single-service/)
   ========================================================================== */
/* ==========================================================================
       HERO BREADCRUMB BANNER (HERRINGTON SINGLE SERVICE EXACT PATTERN)
       ========================================================================== */
    .service-hero-banner {
      position: relative;
      background: linear-gradient(135deg, rgba(7, 14, 21, 0.95) 0%, rgba(11, 20, 29, 0.88) 100%),
                  url('https://images.unsplash.com/photo-1544816155-12df9643f363?auto=format&fit=crop&w=2000&q=85') center/cover no-repeat;
      padding: 95px 0 80px 0;
      color: #ffffff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
    }
    .service-hero-banner::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 45%;
      background: radial-gradient(circle at 80% 30%, rgba(0, 229, 255, 0.08) 0%, transparent 60%);
      pointer-events: none;
    }
    .service-hero-content {
      position: relative;
      z-index: 2;
      max-width: 980px;
    }
    .service-hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2.2px;
      color: var(--cyan-accent);
      background: rgba(0, 229, 255, 0.12);
      border: 1px solid rgba(0, 229, 255, 0.25);
      padding: 6px 14px;
      border-radius: 4px;
      margin-bottom: 20px;
    }
    .service-hero-title {
      font-size: 44px;
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1.22;
      margin-bottom: 18px;
      color: #ffffff;
    }
    .service-hero-title span {
      color: var(--cyan-accent);
    }
    .service-hero-divider {
      width: 72px;
      height: 3px;
      background-color: var(--cyan-accent);
      margin-bottom: 22px;
      border-radius: 2px;
    }
    .breadcrumbs {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 14px;
      font-weight: 500;
      color: #94a3b8;
    }
    .breadcrumbs a {
      color: #ffffff;
      transition: color 0.2s ease;
    }
    .breadcrumbs a:hover {
      color: var(--cyan-accent);
    }
    .breadcrumbs i {
      font-size: 11px;
      color: #64748b;
    }
    .breadcrumbs span.current {
      color: var(--cyan-accent);
      font-weight: 600;
    }

    /* ==========================================================================
       MAIN SERVICE SECTION: 2-COLUMN HERRINGTON GRID
       ========================================================================== */
    .service-main-section {
      padding: 80px 0 120px 0;
    }
    .service-layout-grid {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 56px;
      align-items: start;
    }

    /* --------------------------------------------------------------------------
       LEFT COLUMN: STICKY SERVICES SIDEBAR
       -------------------------------------------------------------------------- */
    .service-sidebar {
      position: sticky;
      top: 105px;
      display: flex;
      flex-direction: column;
      gap: 36px;
    }

    .sidebar-widget {
      background: #ffffff;
      border: 1px solid var(--border-light);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
      transition: box-shadow 0.3s ease;
    }
    .sidebar-widget:hover {
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    }

    /* Widget 1: Services Directory Menu */
    .service-menu-widget {
      padding: 12px;
    }
    .service-menu-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .service-nav-item a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: #f8fafc;
      color: #334155;
      font-size: 14px;
      font-weight: 600;
      border-radius: 4px;
      border-left: 3px solid transparent;
      transition: all 0.22s ease;
    }
    .service-nav-item a:hover {
      background: #f1f5f9;
      color: #0b141d;
      padding-left: 22px;
      border-left-color: var(--blue-accent);
    }
    .service-nav-item.active a {
      background: var(--navy-bg);
      color: #ffffff;
      border-left-color: var(--cyan-accent);
      box-shadow: 0 4px 14px rgba(11, 20, 29, 0.18);
    }
    .service-nav-item.active a i {
      color: var(--cyan-accent);
      transform: translateX(3px);
    }
    .service-nav-item a i {
      font-size: 12px;
      color: #94a3b8;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    /* Widget 2: Technical Downloads */
    .widget-dark-header {
      background-color: var(--navy-bg);
      color: #ffffff;
      padding: 20px 24px;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.3px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .widget-dark-header i {
      color: var(--cyan-accent);
    }
    .downloads-widget-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .download-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 16px 18px;
      border-radius: 4px;
      transition: all 0.22s ease;
    }
    .download-card:hover {
      background: #ffffff;
      border-color: #cbd5e1;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    }
    .download-info {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .download-pdf-icon {
      width: 40px;
      height: 40px;
      border-radius: 4px;
      background: #fee2e2;
      color: #dc2626;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .download-text h5 {
      font-size: 13.5px;
      font-weight: 700;
      color: #1e293b;
      line-height: 1.35;
      margin-bottom: 2px;
    }
    .download-text span {
      font-size: 11.5px;
      color: #64748b;
      font-family: var(--font-code);
    }
    .download-action-icon {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      max-width: 36px;
      max-height: 36px;
      flex-shrink: 0;
      border-radius: 4px;
      background: #e2e8f0;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      aspect-ratio: 1 / 1;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      line-height: 1;
      transition: all 0.2s ease;
    }
    .download-action-icon i {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      line-height: 1;
      margin: 0;
    }
    .download-card:hover .download-action-icon {
      background: var(--navy-bg);
      color: var(--cyan-accent);
    }

    /* Widget 3: Fiduciary Hotline & Quick Advisory Card */
    .fiduciary-help-card {
      background: linear-gradient(145deg, #0b141d 0%, #121c27 100%);
      color: #ffffff;
      border-radius: 4px;
      padding: 34px 28px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 12px 30px rgba(11, 20, 29, 0.25);
    }
    .fiduciary-help-card::before {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 140px;
      height: 140px;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 70%);
      border-radius: 50%;
    }
    .fiduciary-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(0, 229, 255, 0.12);
      color: var(--cyan-accent);
      border: 1px solid rgba(0, 229, 255, 0.3);
      padding: 4px 12px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 18px;
    }
    .fiduciary-help-title {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: 12px;
      color: #ffffff;
    }
    .fiduciary-help-desc {
      font-size: 13px;
      color: #94a3b8;
      line-height: 1.6;
      margin-bottom: 24px;
    }
    .fiduciary-call-box {
      display: flex;
      align-items: center;
      gap: 16px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 14px 18px;
      border-radius: 4px;
      margin-bottom: 16px;
    }
    .fiduciary-call-icon {
      width: 44px;
      height: 44px;
      border-radius: 4px;
      background: var(--cyan-accent);
      color: #0b141d;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .fiduciary-call-text span {
      display: block;
      font-size: 11.5px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #94a3b8;
    }
    .fiduciary-call-text a {
      font-size: 17px;
      font-weight: 800;
      color: #ffffff;
      font-family: var(--font-code);
    }
    .fiduciary-call-text a:hover {
      color: var(--cyan-accent);
    }
    .fiduciary-btn {
      display: block;
      text-align: center;
      background: #ffffff;
      color: var(--navy-bg);
      font-weight: 700;
      font-size: 13px;
      padding: 13px 20px;
      border-radius: 4px;
      transition: var(--transition-smooth);
    }
    .fiduciary-btn:hover {
      background: var(--cyan-accent);
      color: #0b141d;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
    }

    /* Widget 4: Institutional Client Testimonial */
    .testimonial-widget-card {
      padding: 26px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid var(--border-light);
    }
    .quote-icon-top {
      font-size: 28px;
      color: var(--cyan-dark);
      opacity: 0.4;
      margin-bottom: 10px;
    }
    .testimonial-quote {
      font-size: 13.5px;
      color: #334155;
      font-style: italic;
      line-height: 1.65;
      margin-bottom: 18px;
    }
    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .author-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #e2e8f0;
      object-fit: cover;
    }
    .author-meta h6 {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
    }
    .author-meta span {
      font-size: 11.5px;
      color: #64748b;
    }

    /* --------------------------------------------------------------------------
       RIGHT COLUMN: MAIN SERVICE BODY
       -------------------------------------------------------------------------- */
    .service-main-content {
      background: #ffffff;
      border: 1px solid var(--border-light);
      border-radius: 4px;
      padding: 48px;
      box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02);
    }

    /* Hero Lead Image */
    .service-lead-visual {
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 40px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }
    .service-lead-visual img {
      width: 100%;
      height: 480px;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .service-lead-visual:hover img {
      transform: scale(1.02);
    }
    .service-visual-badge {
      position: absolute;
      bottom: 24px;
      left: 24px;
      background: rgba(11, 20, 29, 0.92);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(0, 229, 255, 0.4);
      color: #ffffff;
      padding: 14px 22px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .badge-icon-wrap {
      font-size: 24px;
      color: var(--cyan-accent);
    }
    .badge-text strong {
      display: block;
      font-size: 13px;
      letter-spacing: 0.5px;
      color: #ffffff;
    }
    .badge-text span {
      font-size: 11.5px;
      color: #94a3b8;
    }

    /* Executive Statement */
    .service-sub-heading {
      font-size: 12.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2.2px;
      color: var(--blue-accent);
      margin-bottom: 12px;
      display: block;
    }
    .service-main-title {
      font-size: 34px;
      font-weight: 800;
      color: var(--navy-bg);
      line-height: 1.28;
      letter-spacing: -0.6px;
      margin-bottom: 24px;
    }
    .service-lead-paragraph {
      font-size: 16.5px;
      color: #334155;
      line-height: 1.8;
      margin-bottom: 32px;
    }
    .service-lead-paragraph strong {
      color: #0f172a;
      font-weight: 700;
    }

    /* 4-Card Highlight Grid (Herrington Checklist Cards) */
    .feature-points-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 44px;
    }
    .feature-point-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 22px;
      display: flex;
      gap: 16px;
      transition: var(--transition-smooth);
    }
    .feature-point-card:hover {
      background: #ffffff;
      border-color: #cbd5e1;
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    }
    .feature-icon-circle {
      width: 42px;
      height: 42px;
      border-radius: 4px;
      background: #e0f2fe;
      color: var(--blue-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .feature-card-content h4 {
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 6px;
    }
    .feature-card-content p {
      font-size: 13px;
      color: #64748b;
      line-height: 1.55;
    }

    /* Section Separator */
    .content-divider {
      height: 1px;
      background: #e2e8f0;
      margin: 44px 0;
    }

    /* Why Business CBRA / The Fiduciary Advantage */
    .advisory-pillars-header {
      margin-bottom: 28px;
    }
    .advisory-pillars-header h3 {
      font-size: 26px;
      font-weight: 800;
      color: var(--navy-bg);
      margin-bottom: 10px;
    }
    .advisory-pillars-header p {
      font-size: 14.5px;
      color: #64748b;
    }

    .advisory-pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 44px;
    }
    .advisory-pillar-item {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-top: 3px solid #0088cc;
      border-radius: 4px;
      padding: 28px 24px;
      position: relative;
      transition: all 0.25s ease;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      box-shadow: 0 2px 8px rgba(11, 20, 29, 0.03);
    }
    .advisory-pillar-item:hover {
      border-color: #cbd5e1;
      border-top-color: #00d9fc;
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(11, 20, 29, 0.08);
    }
    .advisory-pillar-item .pillar-num,
    .advisory-pillar-badge {
      position: static;
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      font-family: var(--font-code, 'SFMono-Regular', Consolas, monospace);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: #0088cc;
      background: rgba(0, 136, 204, 0.08);
      border: 1px solid rgba(0, 136, 204, 0.22);
      padding: 4px 10px;
      border-radius: 4px;
      margin-bottom: 14px;
      line-height: 1.2;
      transition: all 0.25s ease;
    }
    .advisory-pillar-item:hover .pillar-num,
    .advisory-pillar-item:hover .advisory-pillar-badge {
      background: #0088cc;
      color: #ffffff;
      border-color: #0088cc;
    }
    .advisory-pillar-item h4 {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 12px 0;
      line-height: 1.4;
      letter-spacing: -0.2px;
      transition: color 0.2s ease;
    }
    .advisory-pillar-item:hover h4 {
      color: #0088cc;
    }
    .advisory-pillar-item p {
      font-size: 13.5px;
      color: #64748b;
      line-height: 1.65;
      margin: 0;
      flex-grow: 1;
    }

    /* High-Impact Stat / Callout Box */
    .stat-callout-box {
      background: linear-gradient(135deg, #0b141d 0%, #172534 100%);
      border-radius: 4px;
      padding: 36px 40px;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 48px;
    }
    .stat-callout-text h3 {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 8px;
      color: #ffffff;
    }
    .stat-callout-text p {
      font-size: 13.5px;
      color: #94a3b8;
      line-height: 1.6;
    }
    .stat-numbers-row {
      display: flex;
      gap: 32px;
      flex-shrink: 0;
    }
    .stat-metric {
      text-align: right;
    }
    .stat-metric .num {
      font-size: 38px;
      font-weight: 800;
      color: var(--cyan-accent);
      font-family: var(--font-code);
      line-height: 1;
      margin-bottom: 4px;
    }
    .stat-metric .lbl {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: #cbd5e1;
    }

    /* 4-Step Process Section (Herrington "How It Works" Section) */
    .process-section-title {
      margin-bottom: 30px;
    }
    .process-section-title span {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 700;
      color: var(--blue-accent);
      display: block;
      margin-bottom: 8px;
    }
    .process-section-title h3 {
      font-size: 28px;
      font-weight: 800;
      color: var(--navy-bg);
      line-height: 1.3;
    }

    .process-flow-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin-bottom: 48px;
      position: relative;
    }
    .process-card-step {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 26px 20px;
      position: relative;
      transition: var(--transition-smooth);
      display: flex;
      flex-direction: column;
    }
    .process-card-step:hover {
      background: #ffffff;
      border-color: var(--navy-bg);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    }
    .step-number-badge {
      width: 42px;
      height: 42px;
      border-radius: 4px;
      background: var(--navy-bg);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 800;
      font-family: var(--font-code);
      margin-bottom: 20px;
      border: 2px solid #e2e8f0;
    }
    .process-card-step:hover .step-number-badge {
      background: var(--cyan-accent);
      color: #0b141d;
      border-color: #0b141d;
    }
    .step-content-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 10px;
      line-height: 1.35;
    }
    .step-content-desc {
      font-size: 12.5px;
      color: #64748b;
      line-height: 1.6;
    }

    /* Comparison Table: Contractor vs Independent Geoprove */
    .comparison-wrapper {
      margin-bottom: 48px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 30px;
    }
    .comparison-title {
      font-size: 20px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 6px;
    }
    .comparison-subtitle {
      font-size: 13.5px;
      color: #64748b;
      margin-bottom: 24px;
    }
    .comp-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13.5px;
    }
    .comp-table th {
      background: #0b141d;
      color: #ffffff;
      padding: 14px 18px;
      text-align: left;
      font-weight: 700;
      letter-spacing: 0.5px;
    }
    .comp-table th:first-child { border-radius: 4px 0 0 0; }
    .comp-table th:last-child { border-radius: 0 4px 0 0; }
    .comp-table td {
      padding: 14px 18px;
      border-bottom: 1px solid #e2e8f0;
      color: #334155;
      background: #ffffff;
      vertical-align: top;
    }
    .comp-table tr:last-child td { border-bottom: none; }
    .comp-table td.dim { color: #94a3b8; }
    .comp-table td.highlight {
      font-weight: 600;
      color: #0f172a;
      background: #f0fdf4;
    }
    .tag-check {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #15803d;
      font-weight: 700;
    }
    .tag-warn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #b45309;
      font-weight: 600;
    }

    /* Interactive Soil & Trenchability Tabs */
    .trenchability-section {
      margin-bottom: 48px;
    }
    .tab-nav-row {
      display: flex;
      gap: 10px;
      border-bottom: 2px solid #e2e8f0;
      margin-bottom: 24px;
    }
    .tab-btn {
      background: none;
      border: none;
      padding: 12px 20px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      color: #0b141d;
      border-bottom-color: #0b141d;
    }
    .tab-panel {
      display: none;
      animation: fadeIn 0.3s ease;
    }
    .tab-panel.active {
      display: block;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .tab-content-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 24px;
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 24px;
      align-items: center;
    }
    .tab-tool-img {
      border-radius: 4px;
      overflow: hidden;
      height: 140px;
    }
    .tab-tool-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .tab-tool-body h4 {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 8px;
    }
    .tab-tool-body p {
      font-size: 13.5px;
      color: #475569;
      line-height: 1.6;
      margin-bottom: 12px;
    }
    .tool-limits {
      display: flex;
      gap: 18px;
      font-size: 12px;
      font-family: var(--font-code);
      color: #0f172a;
    }
    .tool-limits span {
      background: #ffffff;
      padding: 4px 10px;
      border-radius: 4px;
      border: 1px solid #e2e8f0;
    }

    /* Interactive Technical FAQ Accordion (Herrington Style) */
    .faq-wrapper {
      margin-bottom: 50px;
    }
    .faq-header-block {
      margin-bottom: 24px;
    }
    .faq-header-block span {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 700;
      color: var(--blue-accent);
      display: block;
      margin-bottom: 6px;
    }
    .faq-header-block h3 {
      font-size: 26px;
      font-weight: 800;
      color: var(--navy-bg);
    }
    .accordion-item {
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      margin-bottom: 12px;
      background: #ffffff;
      overflow: hidden;
      transition: var(--transition-smooth);
    }
    .accordion-item:hover {
      border-color: #cbd5e1;
    }
    .accordion-btn {
      width: 100%;
      padding: 18px 24px;
      text-align: left;
      background: none;
      border: none;
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .accordion-btn:hover {
      background: #f8fafc;
      color: #0b141d;
    }
    .accordion-btn.active {
      color: #0b141d;
      background: #f8fafc;
    }
    .accordion-icon {
      font-size: 14px;
      color: #64748b;
      transition: transform 0.3s ease;
    }
    .accordion-btn.active .accordion-icon {
      transform: rotate(180deg);
      color: var(--cyan-dark);
    }
    .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
      background: #ffffff;
      padding: 0 24px;
    }
    .accordion-body.open {
      max-height: 800px;
      padding: 10px 24px 22px 24px;
    }
    .accordion-body p {
      font-size: 14px;
      color: #475569;
      line-height: 1.7;
    }

    /* Herrington Direct Technical Inquiry / Project Scoping Box */
    .scoping-form-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 4px;
      padding: 38px 40px;
      position: relative;
    }
    .scoping-form-header {
      margin-bottom: 24px;
    }
    .scoping-form-header h3 {
      font-size: 24px;
      font-weight: 800;
      color: var(--navy-bg);
      margin-bottom: 8px;
    }
    .scoping-form-header p {
      font-size: 14px;
      color: #64748b;
    }
    .scoping-form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      margin-bottom: 20px;
    }
    .form-group-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .form-group-item label {
      font-size: 12.5px;
      font-weight: 700;
      color: #334155;
    }
    .form-input, .form-select {
      height: 48px;
      padding: 0 16px;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      font-family: var(--font-sans);
      font-size: 14px;
      color: #0f172a;
      background: #ffffff;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .form-input:focus, .form-select:focus {
      border-color: #0b141d;
      box-shadow: 0 0 0 3px rgba(11, 20, 29, 0.08);
    }
    .form-full-width {
      grid-column: span 2;
    }
    .form-textarea {
      padding: 14px 16px;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      font-family: var(--font-sans);
      font-size: 14px;
      color: #0f172a;
      background: #ffffff;
      outline: none;
      resize: vertical;
      min-height: 100px;
      transition: border-color 0.2s ease;
    }
    .form-textarea:focus {
      border-color: #0b141d;
      box-shadow: 0 0 0 3px rgba(11, 20, 29, 0.08);
    }
    .btn-submit-scoping {
      background: var(--navy-bg);
      color: #ffffff;
      font-size: 14.5px;
      font-weight: 700;
      padding: 14px 34px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      transition: var(--transition-smooth);
    }
    .btn-submit-scoping:hover {
      background: #1e293b;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(11, 20, 29, 0.25);
    }
    .scoping-assurance-note {
      margin-top: 14px;
      font-size: 12px;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Custom select wrap arrow */
    .custom-select-wrap {
      position: relative;
      width: 100%;
    }
    .custom-select-wrap .form-select {
      width: 100%;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 38px;
      cursor: pointer;
    }
    .custom-select-arrow {
      display: flex !important;
    }

    /* ==========================================================================
       RESPONSIVE RULES FOR ALL SERVICE PAGES (/single-service/, /service-slug/)
       ========================================================================== */
    @media (max-width: 992px) {
      /* Invert order on mobile so main article appears first, sidebar below */
      .service-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
      }
      .service-main-content {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }
      .service-sidebar {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        margin-top: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
      }

      .advisory-pillars-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
      .process-flow-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
      }
      .stat-callout-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
      }
    }

    @media (max-width: 768px) {
      .service-main-content {
        padding: 22px 16px !important;
        border-radius: 4px !important;
      }
      .service-hero-title {
        font-size: clamp(24px, 5.5vw, 32px) !important;
        line-height: 1.25 !important;
      }
      .service-sub-heading {
        font-size: 11px !important;
        letter-spacing: 1.5px !important;
      }
      .service-lead-paragraph {
        font-size: 15px !important;
        line-height: 1.75 !important;
        margin-bottom: 24px !important;
      }

      /* Hero Photo & Seamless Caption Strip */
      .service-lead-visual {
        margin-bottom: 24px !important;
        border-radius: 4px !important;
      }
      .service-lead-visual img {
        height: 200px !important;
        width: 100% !important;
      }
      .service-visual-badge {
        position: static !important;
        border-radius: 0 0 4px 4px !important;
        margin-top: 0 !important;
        padding: 12px 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
      }
      .service-visual-badge .badge-icon-wrap {
        font-size: 18px !important;
        flex-shrink: 0 !important;
      }
      .service-visual-badge .badge-text {
        flex: 1 !important;
        min-width: 0 !important;
      }
      .service-visual-badge .badge-text strong {
        font-size: 12px !important;
        line-height: 1.35 !important;
        word-break: break-word !important;
      }
      .service-visual-badge .badge-text span {
        font-size: 11px !important;
        line-height: 1.3 !important;
      }

      /* Feature Points Grid (4-cards) */
      .feature-points-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 28px !important;
      }
      .feature-point-card {
        padding: 16px 14px !important;
      }

      /* Stat Callout Box */
      .stat-callout-box {
        padding: 22px 16px !important;
        margin-bottom: 32px !important;
      }
      .stat-numbers-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        width: 100% !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-top: 16px !important;
      }
      .stat-metric {
        text-align: left !important;
      }
      .stat-metric .num {
        font-size: 26px !important;
      }
      .stat-metric .lbl {
        font-size: 10px !important;
      }

      /* 4-Step Process */
      .process-flow-container {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 32px !important;
      }
      .process-card-step {
        padding: 18px 16px !important;
      }

      /* STACKED COMPARISON MATRIX (MOBILE CARD FORMAT - ZERO CLIPPING) */
      .comparison-wrapper {
        padding: 18px 14px !important;
        border-radius: 4px !important;
        margin-bottom: 32px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      .comparison-title {
        font-size: 17px !important;
        line-height: 1.35 !important;
      }
      .comparison-subtitle {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
      }
      .comp-table {
        display: block !important;
        width: 100% !important;
        border: none !important;
      }
      .comp-table thead {
        display: none !important;
      }
      .comp-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
      }
      .comp-table tr {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      .comp-table tr td {
        padding: 12px 14px !important;
        box-sizing: border-box !important;
        width: 100% !important;
      }
      /* Parameter Title */
      .comp-table tr td:first-child {
        background: #0b141d !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        border-bottom: 2px solid #00e5ff !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
      }
      .comp-table tr td:first-child strong {
        color: #ffffff !important;
      }
      /* Contractor Cell */
      .comp-table tr td:nth-child(2) {
        background: #fff8f8 !important;
        color: #475569 !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        border-bottom: 1px solid #fee2e2 !important;
      }
      .comp-table tr td:nth-child(2)::before {
        content: '⚠️ Standard Contractor Approach:' !important;
        display: block !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        color: #b91c1c !important;
        margin-bottom: 5px !important;
      }
      /* GEOPROVE Fiduciary Cell */
      .comp-table tr td:nth-child(3) {
        background: #f0fdf4 !important;
        color: #1e293b !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        border-bottom: none !important;
      }
      .comp-table tr td:nth-child(3)::before {
        content: '🛡️ GEOPROVE Fiduciary Advantage:' !important;
        display: block !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        color: #059669 !important;
        margin-bottom: 5px !important;
      }

      /* Trenchability Tabs */
      .trenchability-section {
        margin-bottom: 32px !important;
      }
      .tab-content-card {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 16px !important;
      }
      .tab-tool-img {
        height: 160px !important;
        width: 100% !important;
      }
      .tool-limits {
        flex-direction: column !important;
        gap: 6px !important;
      }
      .tool-limits span {
        width: 100% !important;
        box-sizing: border-box !important;
      }

      /* Pre-Scoping Form Card */
      .scoping-form-card {
        padding: 22px 16px !important;
        border-radius: 4px !important;
      }
      .scoping-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }
      .scoping-form-grid .form-full-width {
        grid-column: span 1 !important;
      }
      .btn-submit-scoping {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px 18px !important;
        box-sizing: border-box !important;
      }
      .scoping-assurance-note {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
      }

      /* Sidebar 5-Pillars Navigation Adjustments */
      .service-sidebar .sidebar-widget {
        border-radius: 4px !important;
        padding: 16px 14px !important;
      }
      .pillar-title-link {
        padding: 10px 12px !important;
        font-size: 12.5px !important;
      }
      .pillar-sub-items li a {
        padding: 7px 10px 7px 16px !important;
        font-size: 11.5px !important;
        word-break: break-word !important;
      }
      .sub-badge {
        font-size: 8px !important;
        padding: 1px 4px !important;
        flex-shrink: 0 !important;
      }
      .download-card {
        padding: 12px !important;
        gap: 10px !important;
      }
      .download-text h5 {
        font-size: 12.5px !important;
      }
      .fiduciary-help-card {
        padding: 24px 18px !important;
      }
      .fiduciary-call-box {
        padding: 10px 12px !important;
        gap: 10px !important;
      }
      .fiduciary-call-text a {
        font-size: 14.5px !important;
      }
    }

/* ==========================================================================
   HALAMAN: STRATEGIC CORRIDORS & CASE STUDIES ARCHIVE (/cases/)
   ========================================================================== */
/* ==========================================================================
       HERO BREADCRUMB BANNER (HERRINGTON CASE STUDIES BANNER)
       ========================================================================== */
    .hero-banner {
      background: linear-gradient(135deg, #0b141d 0%, #0f1c29 60%, #070e15 100%);
      color: #ffffff;
      padding: 75px 0 65px 0;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--border-dark);
    }
    .hero-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        radial-gradient(circle at 15% 50%, rgba(0, 229, 255, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(2, 132, 199, 0.07) 0%, transparent 40%),
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
      pointer-events: none;
    }
    .hero-banner-inner {
      position: relative;
      z-index: 2;
      max-width: 960px;
      margin-left: 0;
      margin-right: auto;
      text-align: left;
    }
    .breadcrumb-nav {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12.5px;
      color: #94a3b8;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
    }
    .breadcrumb-nav a:hover {
      color: var(--cyan-accent);
    }
    .breadcrumb-nav i {
      font-size: 9px;
      color: #64748b;
    }
    .hero-tagline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--cyan-accent);
      background: rgba(0, 229, 255, 0.08);
      border: 1px solid rgba(0, 229, 255, 0.25);
      padding: 6px 14px;
      border-radius: 4px;
      margin-bottom: 20px;
    }
    .hero-tagline span {
      width: 7px;
      height: 7px;
      border-radius: 4px;
      background: var(--cyan-accent);
      box-shadow: 0 0 10px var(--cyan-accent);
    }
    .cases-hero-title {
      font-family: var(--font-serif);
      font-size: 46px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.6px;
      margin-bottom: 18px;
      color: #ffffff;
    }
    .cases-hero-title span {
      color: var(--cyan-accent);
    }
    .cases-hero-desc {
      font-size: 17px;
      color: #cbd5e1;
      line-height: 1.7;
      max-width: 820px;
    }

    /* ==========================================================================
       CORRIDOR IMPACT TELEMETRY STRIP (STATS COUNTERS)
       ========================================================================== */
    .telemetry-strip {
      background: #0f1923;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding: 24px 0;
      color: #ffffff;
    }
    .telemetry-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 24px;
    }
    .telemetry-col {
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      padding-right: 20px;
    }
    .telemetry-col:last-child {
      border-right: none;
      padding-right: 0;
    }
    .telemetry-val {
      font-family: var(--font-code);
      font-size: 28px;
      font-weight: 700;
      color: var(--cyan-accent);
      line-height: 1.1;
      margin-bottom: 4px;
      display: flex;
      align-items: baseline;
      gap: 4px;
    }
    .telemetry-val .unit {
      font-size: 16px;
      color: #94a3b8;
      font-weight: 500;
    }
    .telemetry-label {
      font-size: 12.5px;
      font-weight: 600;
      color: #cbd5e1;
      line-height: 1.4;
    }
    .telemetry-sub {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
    }

    /* ==========================================================================
       SECTION 1: FILTER CONTROLS (HERRINGTON PORTFOLIO FILTER)
       ========================================================================== */
    .filter-wrapper {
      padding: 40px 0 20px 0;
      background: #f8fafc;
    }
    .filter-nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--border-light);
    }
    .filter-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .filter-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: 13.5px;
      font-weight: 600;
      padding: 8px 18px;
      border-radius: 4px;
      cursor: pointer;
      transition: var(--transition-smooth);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .filter-btn:hover {
      border-color: #94a3b8;
      color: #0b141d;
      background: #f1f5f9;
    }
    .filter-btn.active {
      background: var(--navy-bg);
      color: #ffffff;
      border-color: var(--navy-bg);
      box-shadow: 0 4px 14px rgba(11, 20, 29, 0.16);
    }
    .filter-count {
      display: inline-block;
      font-size: 11px;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.2);
      margin-left: 4px;
    }
    .filter-btn:not(.active) .filter-count {
      background: #e2e8f0;
      color: #1e293b;
    }
    .filter-meta-hint {
      font-size: 13px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .filter-meta-hint i {
      color: var(--blue-accent);
    }

    /* ==========================================================================
       SECTION 2: CASE STUDIES GRID (HERRINGTON CASE STUDIES 1 STYLE)
       ========================================================================== */
    .cases-grid-section {
      padding: 30px 0 90px 0;
      background: #f8fafc;
    }
    .cases-grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 34px;
    }
    .case-card-herrington {
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
      transition: var(--transition-smooth);
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .case-card-herrington:hover {
      transform: translateY(-7px);
      box-shadow: 0 20px 45px rgba(11, 20, 29, 0.11);
      border-color: #cbd5e1;
    }
    .case-card-herrington.featured-case {
      border: 2px solid var(--blue-accent);
    }

    /* Card Media Box */
    .case-image-box {
      position: relative;
      height: 240px;
      overflow: hidden;
      background-color: var(--navy-bg);
    }
    .case-image-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .case-card-herrington:hover .case-image-box img {
      transform: scale(1.08);
    }
    .case-card-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to top, rgba(11, 20, 29, 0.88) 0%, rgba(11, 20, 29, 0.25) 55%, transparent 100%);
    }

    /* Badges on Image */
    .case-sector-badge {
      position: absolute;
      top: 18px;
      left: 18px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.1px;
      padding: 5px 11px;
      border-radius: 4px;
      background: rgba(11, 20, 29, 0.88);
      color: var(--cyan-accent);
      border: 1px solid rgba(0, 229, 255, 0.35);
      backdrop-filter: blur(4px);
    }
    .case-savings-badge {
      position: absolute;
      top: 18px;
      right: 18px;
      font-size: 11.5px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 4px;
      background: rgba(16, 185, 129, 0.92);
      color: #ffffff;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    }
    .case-corridor-id {
      position: absolute;
      bottom: 14px;
      left: 18px;
      font-family: var(--font-code);
      font-size: 12px;
      font-weight: 700;
      color: #ffffff;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .case-corridor-id i {
      color: var(--cyan-accent);
    }

    /* Card Content Body */
    .case-content-body {
      padding: 28px 26px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }
    .case-title {
      font-family: var(--font-serif);
      font-size: 21px;
      font-weight: 700;
      color: var(--navy-bg);
      line-height: 1.35;
      margin-bottom: 12px;
      transition: var(--transition-smooth);
    }
    .case-card-herrington:hover .case-title {
      color: var(--blue-accent);
    }

    /* Route Specs Strip */
    .corridor-specs-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 10px 12px;
      margin-bottom: 18px;
      gap: 8px;
    }
    .spec-item {
      display: flex;
      flex-direction: column;
    }
    .spec-item .spec-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #94a3b8;
      font-weight: 700;
    }
    .spec-item .spec-val {
      font-family: var(--font-code);
      font-size: 12.5px;
      font-weight: 700;
      color: #1e293b;
    }

    /* Challenge & Solution Blocks */
    .challenge-summary {
      font-size: 13.5px;
      color: #475569;
      line-height: 1.65;
      margin-bottom: 16px;
      flex-grow: 1;
    }
    .challenge-summary strong {
      color: #0f172a;
    }

    .key-points-list {
      list-style: none;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      gap: 9px;
      border-top: 1px solid #f1f5f9;
      padding-top: 16px;
    }
    .key-points-list li {
      font-size: 12.5px;
      color: #334155;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.5;
    }
    .key-points-list li i {
      color: var(--blue-accent);
      font-size: 12px;
      margin-top: 3px;
      flex-shrink: 0;
    }
    .key-points-list li strong {
      color: #0b141d;
    }

    /* Card Footer Actions */
    .case-card-footer {
      border-top: 1px solid #f1f5f9;
      padding-top: 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
    }
    .btn-inspect-telemetry {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy-bg);
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      transition: var(--transition-smooth);
    }
    .btn-inspect-telemetry:hover {
      color: var(--blue-accent);
      gap: 10px;
    }
    .btn-inspect-telemetry i {
      font-size: 11px;
      color: var(--cyan-dark);
      transition: transform 0.2s ease;
    }
    .btn-inspect-telemetry:hover i {
      transform: translateX(3px);
    }
    .case-status-tag {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 4px;
      background: #ecfdf5;
      color: #065f46;
      border: 1px solid #a7f3d0;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .case-status-tag::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
    }

    /* ==========================================================================
       SECTION 3: COMPARATIVE CORRIDOR TELEMETRY MATRIX (TABLE)
       ========================================================================== */
    .matrix-section {
      padding: 85px 0;
      background: #ffffff;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
    }
    .matrix-header {
      text-align: center;
      max-width: 840px;
      margin: 0 auto 50px auto;
    }
    .section-eyebrow {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.6px;
      color: var(--blue-accent);
      margin-bottom: 10px;
      display: inline-block;
    }
    .section-title {
      font-family: var(--font-serif);
      font-size: 36px;
      font-weight: 700;
      color: var(--navy-bg);
      line-height: 1.25;
      margin-bottom: 16px;
    }
    .section-desc {
      font-size: 15.5px;
      color: #64748b;
      line-height: 1.7;
    }

    .table-responsive-wrapper {
      overflow-x: auto;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    }
    .corridor-matrix-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: 13px;
      min-width: 1080px;
    }
    .corridor-matrix-table thead {
      background: var(--navy-bg);
      color: #ffffff;
    }
    .corridor-matrix-table th {
      padding: 16px 20px;
      font-weight: 700;
      letter-spacing: 0.5px;
      border-bottom: 2px solid rgba(255, 255, 255, 0.1);
      font-size: 12.5px;
      text-transform: uppercase;
    }
    .corridor-matrix-table tbody tr {
      border-bottom: 1px solid #e2e8f0;
      transition: background-color 0.2s ease;
    }
    .corridor-matrix-table tbody tr:hover {
      background-color: #f8fafc;
    }
    .corridor-matrix-table td {
      padding: 16px 20px;
      vertical-align: middle;
      color: #334155;
    }
    .corridor-name-cell {
      font-weight: 700;
      color: var(--navy-bg);
      font-size: 13.5px;
    }
    .corridor-name-cell small {
      display: block;
      font-weight: 500;
      color: #64748b;
      font-size: 11.5px;
      margin-top: 2px;
    }
    .code-badge {
      font-family: var(--font-code);
      background: #f1f5f9;
      padding: 3px 7px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      color: #0f172a;
      border: 1px solid #e2e8f0;
    }
    .risk-tag-pill {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 4px;
      background: #fee2e2;
      color: #991b1b;
      margin: 2px 2px;
    }
    .savings-cell {
      font-family: var(--font-code);
      font-weight: 700;
      color: #059669;
    }

    /* ==========================================================================
       SECTION 4: FIDIC GROUND RISK & DSC MITIGATION (TECHNICAL AUTHORITY)
       ========================================================================== */
    .fidic-advisory-section {
      padding: 90px 0;
      background: #0b141d;
      color: #ffffff;
      position: relative;
      overflow: hidden;
    }
    .fidic-advisory-section::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .fidic-split-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }
    .fidic-left h2 {
      font-family: var(--font-serif);
      font-size: 36px;
      font-weight: 700;
      line-height: 1.25;
      margin-bottom: 20px;
      color: #ffffff;
    }
    .fidic-left h2 span {
      color: var(--cyan-accent);
    }
    .fidic-left p {
      font-size: 15.5px;
      color: #94a3b8;
      line-height: 1.7;
      margin-bottom: 24px;
    }
    .fidic-callout-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-left: 4px solid var(--cyan-accent);
      padding: 20px 24px;
      border-radius: 0 4px 4px 0;
      margin-bottom: 28px;
    }
    .fidic-callout-card h4 {
      font-size: 15.5px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 6px;
    }
    .fidic-callout-card p {
      font-size: 13.5px;
      color: #cbd5e1;
      margin-bottom: 0;
      line-height: 1.6;
    }

    .fidic-rights-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .fidic-step-item {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      padding: 22px 24px;
      display: flex;
      gap: 20px;
      align-items: flex-start;
      transition: var(--transition-smooth);
    }
    .fidic-step-item:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(0, 229, 255, 0.3);
      transform: translateX(6px);
    }
    .fidic-num-badge {
      width: 40px;
      height: 40px;
      border-radius: 4px;
      background: rgba(0, 229, 255, 0.12);
      border: 1px solid var(--cyan-accent);
      color: var(--cyan-accent);
      font-size: 15px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .fidic-step-text h4 {
      font-size: 16.5px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 6px;
    }
    .fidic-step-text p {
      font-size: 13px;
      color: #94a3b8;
      line-height: 1.6;
    }

    /* ==========================================================================
       SECTION 5: EXECUTIVE CTA PRE-TENDER BANNER
       ========================================================================== */
    .executive-cta-banner {
      padding: 80px 0;
      background: linear-gradient(135deg, #0b141d 0%, #070e15 100%);
      color: #ffffff;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .cta-flex-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }
    .cta-text-side {
      max-width: 760px;
    }
    .cta-text-side h3 {
      font-family: var(--font-serif);
      font-size: 32px;
      font-weight: 700;
      letter-spacing: -0.5px;
      margin-bottom: 12px;
      color: #ffffff;
    }
    .cta-text-side h3 span {
      color: var(--cyan-accent);
    }
    .cta-text-side p {
      font-size: 15px;
      color: #94a3b8;
      line-height: 1.65;
    }
    .cta-action-side {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }
    .btn-cta-gold {
      background: var(--cyan-accent);
      color: #0b141d;
      font-size: 14.5px;
      font-weight: 700;
      padding: 14px 28px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: var(--transition-smooth);
    }
    .btn-cta-gold:hover {
      background: #ffffff;
      color: #0b141d;
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(0, 229, 255, 0.3);
    }
    .btn-cta-outline {
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
      font-size: 14.5px;
      font-weight: 700;
      padding: 14px 26px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: var(--transition-smooth);
    }
    .btn-cta-outline:hover {
      border-color: #ffffff;
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-3px);
    }

    /* ==========================================================================
       HERRINGTON FOOTER
       ========================================================================== */
    .site-footer {
      background-color: var(--navy-deep);
      color: #ffffff;
      padding: 80px 0 30px 0;
      border-top: 1px solid var(--border-dark);
    }
    .footer-columns-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.5fr;
      gap: 48px;
      margin-bottom: 60px;
    }
    .footer-brand-col p {
      font-size: 13.5px;
      color: #94a3b8;
      line-height: 1.7;
      margin: 18px 0 24px 0;
      max-width: 320px;
    }
    .footer-cert-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .cert-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #cbd5e1;
      font-family: var(--font-code);
    }
    .footer-col-title {
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 22px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .footer-link-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-link-list li a {
      color: #94a3b8;
      font-size: 13.5px;
      transition: all 0.2s ease;
      display: inline-block;
    }
    .footer-link-list li a:hover {
      color: var(--cyan-accent);
      transform: translateX(4px);
    }
    .newsletter-capsule {
      display: flex;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 4px;
      padding: 4px 6px;
      margin-bottom: 14px;
    }
    .newsletter-capsule input {
      background: transparent;
      border: none;
      color: #ffffff;
      padding: 10px 16px;
      font-size: 13px;
      flex-grow: 1;
      outline: none;
      font-family: var(--font-sans);
    }
    .newsletter-capsule button {
      background-color: var(--cyan-accent);
      border: none;
      color: var(--navy-bg);
      width: 38px;
      height: 38px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition-smooth);
    }
    .newsletter-capsule button:hover {
      background-color: #ffffff;
      transform: scale(1.05);
    }
    .newsletter-notice {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 12px;
      color: #64748b;
      line-height: 1.5;
    }
    .bell-icon-circle {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background: rgba(0, 229, 255, 0.1);
      color: var(--cyan-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 11px;
      margin-top: 2px;
    }

    .footer-bottom-subbar {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12.5px;
      color: #64748b;
      flex-wrap: wrap;
      gap: 16px;
    }
    .footer-bottom-links {
      display: flex;
      gap: 16px;
    }
    .footer-bottom-links a {
      color: #64748b;
    }
    .footer-bottom-links a:hover {
      color: #ffffff;
    }
    .footer-scroll-top {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition-smooth);
    }
    .footer-scroll-top:hover {
      background: var(--cyan-accent);
      color: var(--navy-bg);
      transform: translateY(-3px);
    }

    /* ==========================================================================
       MODAL QUICK-INSPECTION DRAWER
       ========================================================================== */
    .case-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(11, 20, 29, 0.85);
      backdrop-filter: blur(5px);
      z-index: 3000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .case-modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    .case-modal-box {
      background: #ffffff;
      width: 100%;
      max-width: 860px;
      max-height: 90vh;
      border-radius: 4px;
      overflow-y: auto;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
      position: relative;
      display: flex;
      flex-direction: column;
      animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes modalSlideUp {
      from { transform: translateY(30px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    .modal-top-bar {
      background: var(--navy-bg);
      color: #ffffff;
      padding: 22px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .modal-title-wrap h3 {
      font-family: var(--font-serif);
      font-size: 22px;
      font-weight: 700;
      color: #ffffff;
    }
    .modal-title-wrap .modal-corridor-sub {
      font-family: var(--font-code);
      font-size: 12px;
      color: var(--cyan-accent);
      margin-top: 4px;
    }
    .modal-close-btn {
      background: rgba(255, 255, 255, 0.1);
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 4px;
      color: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      transition: var(--transition-smooth);
    }
    .modal-close-btn:hover {
      background: #ef4444;
      transform: rotate(90deg);
    }
    .modal-body {
      padding: 30px;
      color: #334155;
    }
    .modal-specs-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 24px;
    }
    .modal-spec-cell {
      display: flex;
      flex-direction: column;
    }
    .modal-spec-cell span {
      font-size: 10.5px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #64748b;
      font-weight: 700;
    }
    .modal-spec-cell strong {
      font-family: var(--font-code);
      font-size: 14px;
      color: var(--navy-bg);
      margin-top: 3px;
    }
    .modal-section-h4 {
      font-size: 15px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--navy-bg);
      margin: 20px 0 10px 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .modal-section-h4 i {
      color: var(--blue-accent);
    }
    .modal-prose {
      font-size: 14px;
      line-height: 1.7;
      color: #475569;
      margin-bottom: 16px;
    }
    .modal-evidence-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
    }
    .modal-evidence-list li {
      font-size: 13.5px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: #f1f5f9;
      padding: 10px 14px;
      border-radius: 4px;
      border-left: 3px solid var(--blue-accent);
    }
    .modal-evidence-list li i {
      color: var(--blue-accent);
      margin-top: 3px;
    }
    .modal-bottom-cta {
      border-top: 1px solid #e2e8f0;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }

    /* Duplicate mobile drawer rules removed */

    /* Responsive */
    @media (max-width: 1200px) {
      .cases-grid-container {
        grid-template-columns: repeat(2, 1fr);
      }
      .telemetry-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .telemetry-col:nth-child(3) {
        border-right: none;
      }
      .fidic-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .footer-columns-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 992px) {
      .top-info-group { display: none; }
      .main-menu, .nav-actions { display: none; }
      .mobile-brand { display: block; }
      .mobile-menu-btn { display: block; }
      .cta-flex-wrap {
        flex-direction: column;
        text-align: center;
      }
      .cta-action-side {
        flex-direction: column;
        width: 100%;
      }
      .cta-action-side a {
        width: 100%;
        justify-content: center;
      }
      .modal-specs-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .container-herrington {
        padding: 0 20px;
      }
      .cases-hero-title {
        font-size: 32px;
      }
      .cases-grid-container {
        grid-template-columns: 1fr;
      }
      .telemetry-grid {
        grid-template-columns: 1fr 1fr;
      }
      .telemetry-col {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 12px;
      }
      .filter-nav-bar {
        flex-direction: column;
        align-items: flex-start;
      }
      .footer-columns-grid {
        grid-template-columns: 1fr;
      }
    }

/* ==========================================================================
   HALAMAN: SINGLE CASE STUDY DEEP DIVE (/single-case/)
   ========================================================================== */
/* ==========================================================================
       HERO BREADCRUMB BANNER (HERRINGTON SINGLE PORTFOLIO HERO)
       ========================================================================== */
    .case-hero-banner {
  background: linear-gradient(135deg, rgba(7, 14, 21, 0.94) 0%, rgba(11, 20, 29, 0.88) 100%),
              url('https://geoproverisk.com/wp-content/uploads/2026/09/corridors-hero-banner.jpg') center/cover no-repeat !important;
}
    .case-hero-banner {
      color: #ffffff;
      padding: 72px 0 68px 0;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--border-dark);
    }
    .case-hero-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        radial-gradient(circle at 12% 45%, rgba(0, 229, 255, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 88% 25%, rgba(2, 132, 199, 0.07) 0%, transparent 40%),
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
      pointer-events: none;
    }
    .case-hero-inner {
      position: relative;
      z-index: 2;
      max-width: 1100px;
    }
    .breadcrumb-nav {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 12.5px;
      color: #94a3b8;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
    }
    .breadcrumb-nav a {
      color: #cbd5e1;
      transition: color 0.2s ease;
    }
    .breadcrumb-nav a:hover {
      color: var(--cyan-accent);
    }
    .breadcrumb-nav i {
      font-size: 9px;
      color: #64748b;
    }
    .breadcrumb-nav span.current {
      color: var(--cyan-accent);
    }

    .hero-case-badges {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 20px;
    }
    .badge-corridor-id {
      background: rgba(0, 229, 255, 0.12);
      border: 1px solid rgba(0, 229, 255, 0.35);
      color: var(--cyan-accent);
      font-family: var(--font-code);
      font-size: 11.5px;
      font-weight: 700;
      padding: 5px 14px;
      border-radius: 4px;
      letter-spacing: 1px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .badge-sector {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #e2e8f0;
      font-size: 11.5px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .badge-savings-pill {
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: #34d399;
      font-size: 11.5px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .case-hero-title {
      font-family: var(--font-serif);
      font-size: 44px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.6px;
      margin-bottom: 18px;
      color: #ffffff;
    }
    .case-hero-title span {
      color: var(--cyan-accent);
    }
    .case-hero-subtitle {
      font-size: 17px;
      line-height: 1.65;
      color: #cbd5e1;
      max-width: 980px;
      margin-bottom: 28px;
    }

    .hero-metrics-strip {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      background: rgba(15, 25, 35, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 18px 24px;
      border-radius: 4px;
      backdrop-filter: blur(10px);
    }
    .metric-chip {
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      padding-right: 12px;
    }
    .metric-chip:last-child {
      border-right: none;
      padding-right: 0;
    }
    .metric-chip-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #94a3b8;
      font-weight: 600;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .metric-chip-label i {
      color: var(--cyan-accent);
      font-size: 10px;
    }
    .metric-chip-value {
      font-family: var(--font-sans);
      font-size: 18px;
      font-weight: 800;
      color: #ffffff;
    }
    .metric-chip-value.accent-green {
      color: #34d399;
    }

    /* ==========================================================================
       MAIN CONTENT 2-COLUMN LAYOUT (HERRINGTON SINGLE PORTFOLIO)
       ========================================================================== */
    .case-detail-section {
      padding: 70px 0 110px 0;
      background-color: #f8fafc;
    }
    .case-layout-grid {
      display: grid;
      grid-template-columns: 1fr 390px;
      gap: 48px;
      align-items: start;
    }

    /* --------------------------------------------------------------------------
       LEFT COLUMN: EDITORIAL CONTENT & TECHNICAL EVIDENCE
       -------------------------------------------------------------------------- */
    .case-main-column {
      background: #ffffff;
      border: 1px solid var(--border-light);
      border-radius: 4px;
      padding: 44px 48px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    }

    .featured-hero-visual {
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 38px;
      border: 1px solid #cbd5e1;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
    }
    .featured-hero-visual img {
      width: 100%;
      height: 440px;
      object-fit: cover;
      display: block;
      transition: transform 0.4s ease;
    }
    .visual-overlay-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(11, 20, 29, 0.92) 0%, rgba(11, 20, 29, 0.4) 75%, transparent 100%);
      padding: 24px 28px 18px;
      color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
    .visual-caption-title {
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 4px;
    }
    .visual-caption-sub {
      font-size: 12.5px;
      color: #cbd5e1;
    }
    .visual-tag-badge {
      background: rgba(0, 229, 255, 0.2);
      border: 1px solid var(--cyan-accent);
      color: var(--cyan-accent);
      font-family: var(--font-code);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      white-space: nowrap;
    }

    /* Section Typography */
    .editorial-section {
      margin-bottom: 48px;
      padding-bottom: 44px;
      border-bottom: 1px solid #edf2f7;
    }
    .editorial-section:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.6px;
      color: var(--blue-accent);
      margin-bottom: 10px;
    }
    .section-eyebrow i {
      font-size: 10px;
    }
    .editorial-h2 {
      font-family: var(--font-serif);
      font-size: 30px;
      font-weight: 700;
      color: #0b141d;
      line-height: 1.3;
      letter-spacing: -0.4px;
      margin-bottom: 18px;
    }
    .editorial-h2 span {
      color: var(--blue-accent);
    }
    .lead-prose {
      font-size: 16px;
      line-height: 1.8;
      color: #334155;
      margin-bottom: 20px;
      font-weight: 400;
    }
    .body-prose {
      font-size: 15px;
      line-height: 1.78;
      color: #475569;
      margin-bottom: 18px;
    }

    /* Highlight Callout Boxes */
    .callout-box-navy {
      background: #0f1923;
      border-left: 4px solid var(--cyan-accent);
      padding: 24px 28px;
      border-radius: 0 4px 4px 0;
      color: #e2e8f0;
      margin: 26px 0;
    }
    .callout-box-navy h4 {
      font-size: 16px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .callout-box-navy h4 i {
      color: var(--cyan-accent);
    }
    .callout-box-navy p {
      font-size: 14px;
      line-height: 1.68;
      color: #cbd5e1;
      margin: 0;
    }

    .callout-box-amber {
      background: #fffbeb;
      border: 1px solid #fef3c7;
      border-left: 4px solid #f59e0b;
      padding: 22px 26px;
      border-radius: 0 4px 4px 0;
      margin: 24px 0;
    }
    .callout-box-amber h4 {
      font-size: 15.5px;
      font-weight: 700;
      color: #92400e;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .callout-box-amber p {
      font-size: 14px;
      line-height: 1.68;
      color: #78350f;
      margin: 0;
    }

    /* 2-Column Sub-grid within Main Editorial */
    .two-col-breakdown {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin: 26px 0;
    }
    .breakdown-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 22px;
      border-radius: 4px;
    }
    .breakdown-card h4 {
      font-size: 15px;
      font-weight: 700;
      color: #0b141d;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .breakdown-card h4 i {
      color: var(--blue-accent);
    }
    .breakdown-card p {
      font-size: 13.5px;
      line-height: 1.65;
      color: #475569;
      margin: 0;
    }

    /* Technical Bulleted Lists */
    .technical-list {
      list-style: none;
      margin: 20px 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .technical-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14.5px;
      line-height: 1.65;
      color: #334155;
    }
    .technical-list li i {
      color: var(--emerald-accent);
      margin-top: 5px;
      font-size: 14px;
      flex-shrink: 0;
    }

    /* --------------------------------------------------------------------------
       INTERACTIVE BEFORE VS AFTER COMPARISON MATRIX
       -------------------------------------------------------------------------- */
    .comparison-section {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 30px;
      margin: 32px 0;
    }
    .comparison-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22px;
    }
    .comparison-header h3 {
      font-family: var(--font-serif);
      font-size: 20px;
      font-weight: 700;
      color: #0b141d;
    }
    .comparison-badge {
      background: #0b141d;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 5px 12px;
      border-radius: 4px;
    }

    .comparison-table {
      width: 100%;
      border-collapse: collapse;
      background: #ffffff;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    .comparison-table th {
      padding: 14px 18px;
      font-size: 12.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      text-align: left;
    }
    .comparison-table th.th-param {
      background: #e2e8f0;
      color: #334155;
      width: 28%;
    }
    .comparison-table th.th-initial {
      background: #fee2e2;
      color: #991b1b;
      width: 36%;
    }
    .comparison-table th.th-geoprove {
      background: #dcfce7;
      color: #166534;
      width: 36%;
    }
    .comparison-table td {
      padding: 13px 18px;
      font-size: 13.5px;
      line-height: 1.5;
      border-bottom: 1px solid #e2e8f0;
      vertical-align: top;
    }
    .comparison-table tr:last-child td {
      border-bottom: none;
    }
    .param-cell {
      font-weight: 600;
      color: #1e293b;
    }
    .initial-cell {
      color: #7f1d1d;
      background: #fff5f5;
    }
    .geoprove-cell {
      color: #14532d;
      background: #f0fdf4;
      font-weight: 500;
    }

    /* --------------------------------------------------------------------------
       INTERACTIVE ROUTE STRATIGRAPHY & TELEMETRY INSPECTOR
       -------------------------------------------------------------------------- */
    .telemetry-inspector-box {
      background: var(--navy-bg);
      border: 1px solid rgba(0, 229, 255, 0.25);
      border-radius: 4px;
      padding: 28px;
      color: #ffffff;
      margin: 32px 0;
    }
    .inspector-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 12px;
    }
    .inspector-title {
      font-family: var(--font-code);
      font-size: 14px;
      font-weight: 700;
      color: var(--cyan-accent);
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .inspector-instruction {
      font-size: 12px;
      color: #94a3b8;
    }

    .segment-selector-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 20px;
    }
    .segment-tab-btn {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #cbd5e1;
      padding: 10px 8px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      transition: all 0.2s ease;
    }
    .segment-tab-btn:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
    }
    .segment-tab-btn.active {
      background: var(--cyan-accent);
      color: #0b141d;
      border-color: var(--cyan-accent);
      font-weight: 700;
    }

    .segment-telemetry-panel {
      background: rgba(15, 25, 35, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      padding: 22px;
    }
    .panel-headline {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
    }
    .panel-headline h4 {
      font-size: 16px;
      font-weight: 700;
      color: #ffffff;
    }
    .panel-risk-tag {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .risk-high { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
    .risk-med { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
    .risk-low { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }

    .telemetry-metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }
    .telemetry-metric-item {
      background: rgba(255, 255, 255, 0.04);
      padding: 10px 12px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .t-label {
      font-size: 10.5px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #94a3b8;
      display: block;
      margin-bottom: 4px;
    }
    .t-val {
      font-family: var(--font-code);
      font-size: 14px;
      font-weight: 700;
      color: var(--cyan-accent);
    }

    .telemetry-notes-text {
      font-size: 13px;
      line-height: 1.6;
      color: #cbd5e1;
    }

    /* --------------------------------------------------------------------------
       RIGHT COLUMN: HERRINGTON STICKY PROJECT SIDEBAR
       -------------------------------------------------------------------------- */
    .case-sidebar {
      position: sticky;
      top: 96px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .sidebar-card-widget {
      background: #ffffff;
      border: 1px solid var(--border-light);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
      transition: box-shadow 0.3s ease;
    }
    .sidebar-card-widget:hover {
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    }

    .widget-header-navy {
      background-color: var(--navy-bg);
      color: #ffffff;
      padding: 18px 22px;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.2px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .widget-header-navy i {
      color: var(--cyan-accent);
      font-size: 14px;
    }

    /* Project Info Table / List */
    .project-meta-list {
      list-style: none;
      padding: 16px 22px;
      display: flex;
      flex-direction: column;
    }
    .project-meta-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 12px 0;
      border-bottom: 1px solid #f1f5f9;
      font-size: 13px;
    }
    .project-meta-item:last-child {
      border-bottom: none;
    }
    .meta-term {
      color: #64748b;
      font-weight: 600;
      width: 42%;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .meta-term i {
      color: var(--blue-accent);
      font-size: 11px;
    }
    .meta-def {
      color: #0b141d;
      font-weight: 700;
      width: 58%;
      text-align: right;
    }
    .meta-def.accent-highlight {
      color: #059669;
    }

    /* Technical Factsheet Download Box */
    .factsheet-widget-body {
      padding: 22px;
      background: #fafbfc;
    }
    .factsheet-card-inner {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.22s ease;
    }
    .factsheet-card-inner:hover {
      border-color: var(--cyan-dark);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    }
    .pdf-icon-box {
      width: 44px;
      height: 44px;
      background: #fee2e2;
      color: #dc2626;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }
    .pdf-info-text {
      flex: 1;
    }
    .pdf-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.3;
      margin-bottom: 2px;
    }
    .pdf-meta {
      font-size: 11.5px;
      color: #64748b;
    }
    .pdf-download-arrow {
      color: var(--blue-accent);
      font-size: 14px;
    }

    /* Pre-Tender Scoping Callout Card */
    .scoping-advisory-card {
      background: linear-gradient(135deg, #0b141d 0%, #152538 100%);
      color: #ffffff;
      padding: 28px 24px;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(0, 229, 255, 0.2);
    }
    .scoping-advisory-card::after {
      content: '';
      position: absolute;
      top: -30px;
      right: -30px;
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .scoping-advisory-card h4 {
      font-family: var(--font-serif);
      font-size: 18px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 10px;
    }
    .scoping-advisory-card p {
      font-size: 13px;
      line-height: 1.6;
      color: #cbd5e1;
      margin-bottom: 20px;
    }
    .btn-gold-scoping {
      background: #f59e0b;
      color: #0b141d;
      font-size: 13px;
      font-weight: 700;
      padding: 11px 20px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      transition: all 0.2s ease;
    }
    .btn-gold-scoping:hover {
      background: #fbbf24;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3);
    }

    /* Statutory Compliance Strip */
    .compliance-badges-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 18px 22px;
      background: #f8fafc;
    }
    .comp-badge-item {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 10px;
      border-radius: 4px;
      text-align: center;
      font-size: 11.5px;
      font-weight: 700;
      color: #334155;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .comp-badge-item i {
      color: var(--blue-accent);
      font-size: 14px;
    }

    /* ==========================================================================
       HERRINGTON CASE POST-NAVIGATION BAR (PREV / ALL / NEXT)
       ========================================================================== */
    .case-nav-bar {
      background: #ffffff;
      border-top: 1px solid var(--border-light);
      border-bottom: 1px solid var(--border-light);
      padding: 24px 0;
    }
    .case-nav-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .nav-project-link {
      display: flex;
      align-items: center;
      gap: 14px;
      max-width: 380px;
    }
    .nav-arrow-circle {
      width: 42px;
      height: 42px;
      border-radius: 4px;
      border: 1px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #334155;
      font-size: 14px;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }
    .nav-project-link:hover .nav-arrow-circle {
      background: var(--navy-bg);
      border-color: var(--navy-bg);
      color: var(--cyan-accent);
      transform: scale(1.05);
    }
    .nav-project-meta span {
      display: block;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #64748b;
      font-weight: 600;
    }
    .nav-project-meta strong {
      display: block;
      font-size: 14px;
      color: #0b141d;
      font-weight: 700;
      line-height: 1.3;
    }
    .nav-all-corridors {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      color: #475569;
      font-size: 12.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 8px 16px;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    .nav-all-corridors i {
      font-size: 16px;
      color: var(--navy-bg);
    }
    .nav-all-corridors:hover {
      background: #f1f5f9;
      color: #0b141d;
    }

    /* ==========================================================================
       RELATED STRATEGIC CORRIDORS (3-COLUMN GRID)
       ========================================================================== */
    .related-cases-section {
      padding: 80px 0 90px 0;
      background-color: #f1f5f9;
    }
    .section-headline-wrap {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 48px auto;
    }
    .section-headline-wrap h2 {
      font-family: var(--font-serif);
      font-size: 34px;
      font-weight: 700;
      color: #0b141d;
      margin-bottom: 12px;
      letter-spacing: -0.5px;
    }
    .section-headline-wrap p {
      font-size: 15px;
      color: #64748b;
    }

    .related-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }
    .related-card {
      background: #ffffff;
      border: 1px solid var(--border-light);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: var(--transition-smooth);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    }
    .related-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
      border-color: #cbd5e1;
    }
    .related-card-img {
      position: relative;
      height: 200px;
      overflow: hidden;
    }
    .related-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .related-card:hover .related-card-img img {
      transform: scale(1.05);
    }
    .related-card-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      background: rgba(11, 20, 29, 0.85);
      backdrop-filter: blur(4px);
      color: var(--cyan-accent);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 4px;
      letter-spacing: 0.5px;
    }
    .related-card-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .related-corridor-id {
      font-family: var(--font-code);
      font-size: 11px;
      color: #64748b;
      margin-bottom: 6px;
    }
    .related-card-title {
      font-family: var(--font-serif);
      font-size: 18px;
      font-weight: 700;
      color: #0b141d;
      margin-bottom: 12px;
      line-height: 1.35;
    }
    .related-card-desc {
      font-size: 13.5px;
      color: #475569;
      line-height: 1.6;
      margin-bottom: 18px;
      flex: 1;
    }
    .related-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 14px;
      border-top: 1px solid #f1f5f9;
      font-size: 12.5px;
    }
    .related-savings {
      color: #059669;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .related-explore-btn {
      color: var(--blue-accent);
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .related-explore-btn:hover {
      color: #0b141d;
    }

    /* ==========================================================================
       SECTION: PRE-TENDER SCOPING CTA BANNER
       ========================================================================== */
    .executive-cta-banner {
      background: linear-gradient(135deg, #0b141d 0%, #152230 60%, #070e15 100%);
      color: #ffffff;
      padding: 68px 0;
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--border-dark);
    }
    .executive-cta-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: radial-gradient(circle at 80% 50%, rgba(0, 229, 255, 0.09) 0%, transparent 50%);
      pointer-events: none;
    }
    .cta-flex-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
      position: relative;
      z-index: 2;
    }
    .cta-text-side {
      max-width: 780px;
    }
    .cta-text-side h3 {
      font-family: var(--font-serif);
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #ffffff;
      letter-spacing: -0.4px;
    }
    .cta-text-side h3 span {
      color: var(--cyan-accent);
    }
    .cta-text-side p {
      font-size: 15px;
      color: #cbd5e1;
      line-height: 1.65;
    }
    .cta-action-side {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }
    .btn-cta-gold {
      background-color: #f59e0b;
      color: #0b141d;
      font-size: 14px;
      font-weight: 700;
      padding: 13px 28px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: var(--transition-smooth);
    }
    .btn-cta-gold:hover {
      background-color: #fbbf24;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
    }
    .btn-cta-outline {
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      padding: 13px 24px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: var(--transition-smooth);
    }
    .btn-cta-outline:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: #ffffff;
    }

    /* ==========================================================================
       HERRINGTON MASTER FOOTER
       ========================================================================== */
    .site-footer {
      background-color: var(--navy-bg);
      color: #94a3b8;
      padding: 75px 0 28px 0;
      border-top: 1px solid var(--border-dark);
      font-size: 14px;
    }
    .footer-columns-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: 48px;
      margin-bottom: 60px;
    }
    .footer-brand-col p {
      margin-top: 16px;
      font-size: 13.5px;
      line-height: 1.68;
      color: #94a3b8;
    }
    .footer-cert-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }
    .cert-badge {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      font-size: 11px;
      font-weight: 700;
      color: #cbd5e1;
      padding: 4px 10px;
      border-radius: 4px;
    }
    .footer-col-title {
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 22px;
      letter-spacing: -0.2px;
    }
    .footer-link-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }
    .footer-link-list a {
      color: #94a3b8;
      transition: var(--transition-smooth);
      font-size: 13.5px;
    }
    .footer-link-list a:hover {
      color: var(--cyan-accent);
      padding-left: 4px;
    }
    .newsletter-capsule {
      display: flex;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 12px;
    }
    .newsletter-capsule input {
      background: transparent;
      border: none;
      padding: 12px 16px;
      color: #ffffff;
      font-size: 13px;
      flex: 1;
      outline: none;
    }
    .newsletter-capsule button {
      background: var(--cyan-accent);
      border: none;
      color: var(--navy-bg);
      padding: 0 18px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.2s ease;
    }
    .newsletter-capsule button:hover {
      background: #ffffff;
    }
    .newsletter-notice {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #64748b;
    }
    .footer-bottom-subbar {
      border-top: 1px solid var(--border-dark);
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12.5px;
      color: #64748b;
    }
    .footer-bottom-links {
      display: flex;
      gap: 24px;
    }
    .footer-bottom-links a:hover {
      color: #cbd5e1;
    }
    .footer-scroll-top {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #cbd5e1;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .footer-scroll-top:hover {
      background: var(--cyan-accent);
      color: var(--navy-bg);
    }

    /* ==========================================================================
       MODAL: TECHNICAL DOSSIER DOWNLOAD SIMULATION
       ========================================================================== */
    .download-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(7, 14, 21, 0.85);
      backdrop-filter: blur(6px);
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .download-modal-overlay.active {
      display: flex;
    }
    .download-modal-box {
      background: #ffffff;
      border-radius: 4px;
      max-width: 520px;
      width: 100%;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      animation: modalSlide 0.28s ease;
    }
    @keyframes modalSlide {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .modal-head {
      background: var(--navy-bg);
      color: #ffffff;
      padding: 20px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .modal-head h3 {
      font-size: 16px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .modal-head h3 i {
      color: var(--cyan-accent);
    }
    .modal-close-icon {
      background: none;
      border: none;
      color: #94a3b8;
      font-size: 18px;
      cursor: pointer;
    }
    .modal-close-icon:hover {
      color: #ffffff;
    }
    .modal-body-content {
      padding: 24px;
    }
    .modal-body-content p {
      font-size: 13.5px;
      color: #475569;
      line-height: 1.6;
      margin-bottom: 18px;
    }
    .modal-input-group {
      margin-bottom: 16px;
    }
    .modal-input-group label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #334155;
      margin-bottom: 6px;
    }
    .modal-input-group input {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      font-size: 14px;
      outline: none;
    }
    .modal-input-group input:focus {
      border-color: var(--blue-accent);
    }
    .btn-modal-submit {
      width: 100%;
      background: var(--navy-bg);
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 12px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background-color 0.2s ease;
    }
    .btn-modal-submit:hover {
      background: var(--cyan-dark);
      color: #ffffff;
    }

    /* Duplicate mobile drawer rules removed */

    /* ==========================================================================
       RESPONSIVE BREAKPOINTS
       ========================================================================== */
    @media (max-width: 1200px) {
      .hero-metrics-strip {
        grid-template-columns: repeat(3, 1fr);
      }
      .case-layout-grid {
        grid-template-columns: 1fr 340px;
        gap: 36px;
      }
      .footer-columns-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
      }
      .related-cards-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 992px) {
      .header-top { display: none; }
      .main-menu { display: none; }
      .support-call { display: none; }
      .mobile-brand { display: block; }
      .mobile-menu-btn { display: block; }
      .case-layout-grid {
        grid-template-columns: 1fr;
      }
      .case-sidebar {
        position: static;
        margin-top: 40px;
      }
      .hero-metrics-strip {
        grid-template-columns: repeat(2, 1fr);
      }
      .two-col-breakdown {
        grid-template-columns: 1fr;
      }
      .telemetry-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .segment-selector-tabs {
        grid-template-columns: repeat(2, 1fr);
      }
      .cta-flex-wrap {
        flex-direction: column;
        align-items: flex-start;
      }
      .case-nav-flex {
        flex-direction: column;
        gap: 20px;
        text-align: center;
      }
      .nav-project-link {
        max-width: 100%;
      }
    }

    @media (max-width: 640px) {
      .container-herrington {
        padding: 0 20px;
      }
      .case-hero-title {
        font-size: 32px;
      }
      .case-main-column {
        padding: 26px 20px;
      }
      .featured-hero-visual img {
        height: 260px;
      }
      .hero-metrics-strip {
        grid-template-columns: 1fr;
      }
      .footer-columns-grid {
        grid-template-columns: 1fr;
      }
      .related-cards-grid {
        grid-template-columns: 1fr;
      }
      .footer-bottom-subbar {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }
      .comparison-table {
        font-size: 12px;
      }
    }

/* ==========================================================================
   HALAMAN: TECHNICAL PAPERS LIBRARY (/papers/)
   ========================================================================== */
/* ==========================================================================
       HERO PAGE BANNER (HERRINGTON BLOG STANDARD HERO EXACT CLONE)
       ========================================================================== */
    .page-hero-banner {
      position: relative;
      background: linear-gradient(rgba(11, 20, 29, 0.85), rgba(11, 20, 29, 0.92)),
                  url('https://geoproverisk.com/wp-content/uploads/2026/09/about-operations-banner-1.jpg') center/cover no-repeat;
      padding: 110px 0 90px 0;
      color: #ffffff;
      border-bottom: 1px solid #334155;
    }
    .page-hero-content {
      max-width: 800px;
    }
    .page-hero-title {
      font-family: var(--font-sans);
      font-size: 48px;
      font-weight: 700;
      letter-spacing: -1.2px;
      line-height: 1.15;
      margin-bottom: 18px;
      color: #ffffff;
    }
    .page-hero-desc {
      font-size: 16px;
      line-height: 1.7;
      color: #cbd5e1;
      margin-bottom: 24px;
      max-width: 720px;
    }
    .page-hero-divider {
      width: 70px;
      height: 2px;
      background-color: #ffffff;
      margin-bottom: 24px;
    }
    .breadcrumbs {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 500;
      color: #94a3b8;
    }
    .breadcrumbs a {
      color: #ffffff;
      transition: color 0.2s ease;
    }
    .breadcrumbs a:hover {
      color: var(--cyan-accent);
    }
    .breadcrumbs i {
      font-size: 11px;
      color: #64748b;
    }

    /* ==========================================================================
       MAIN CONTENT: 2-COLUMN BLOG/PAPER LAYOUT
       ========================================================================== */
    .papers-main-section {
      padding: 85px 0 110px 0;
    }
    .papers-layout-grid {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 60px;
      align-items: start;
    }

    /* --------------------------------------------------------------------------
       LEFT COLUMN: POSTS STREAM
       -------------------------------------------------------------------------- */
    .posts-stream {
      display: flex;
      flex-direction: column;
      gap: 55px;
    }

    /* Standard Card */
    .paper-entry-card {
      background: #ffffff;
      border: 1px solid var(--border-light);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
      transition: all 0.3s ease;
    }
    .paper-entry-card:hover {
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
      transform: translateY(-2px);
    }

    /* Image Box */
    .paper-img-wrap {
      position: relative;
      width: 100%;
      height: 440px;
      overflow: hidden;
      background: #0b141d;
    }
    .paper-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .paper-entry-card:hover .paper-img-wrap img {
      transform: scale(1.04);
    }

    /* Badge Tanggal (Pojok Kiri Atas Khas Herrington) */
    .entry-date-badge {
      position: absolute;
      top: 24px;
      left: 24px;
      width: 60px;
      height: 60px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(8px);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      z-index: 2;
    }
    .badge-day {
      font-size: 20px;
      font-weight: 800;
      color: var(--navy-bg);
      line-height: 1;
    }
    .badge-month {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* Video Center Play Button Overlay (Khas Herrington) */
    .video-play-btn-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 66px;
      height: 66px;
      border-radius: 4px;
      background: rgba(11, 20, 29, 0.85);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 2;
    }
    .video-play-btn-circle:hover {
      background: #000000;
      color: var(--cyan-accent);
      transform: translate(-50%, -50%) scale(1.1);
      border-color: var(--cyan-accent);
    }

    /* Body Konten Paper */
    .paper-entry-body {
      padding: 35px 40px 40px 40px;
    }

    /* Meta Strip Baris (By Author, Category, Comments) */
    .entry-meta-strip {
      display: flex;
      align-items: center;
      gap: 25px;
      padding-bottom: 20px;
      border-bottom: 1px solid #f1f5f9;
      margin-bottom: 24px;
      font-size: 13.5px;
      color: #64748b;
    }
    .meta-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .meta-item i {
      color: #94a3b8;
      font-size: 13px;
    }
    .meta-item a {
      color: #334155;
      font-weight: 600;
    }
    .meta-item a:hover {
      color: #0b141d;
    }

    /* Judul Paper */
    .paper-entry-title {
      font-family: var(--font-sans);
      font-size: 27px;
      font-weight: 700;
      line-height: 1.35;
      color: #0b141d;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }
    .paper-entry-title a:hover {
      color: #2563eb;
    }

    /* Deskripsi Cuplikan */
    .paper-entry-excerpt {
      font-size: 15px;
      line-height: 1.75;
      color: #64748b;
      margin-bottom: 28px;
    }

    /* Link Action: Continue Reading -> */
    .entry-readmore-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 14.5px;
      font-weight: 700;
      color: #0b141d;
      transition: all 0.25s ease;
    }
    .entry-readmore-link i {
      transition: transform 0.25s ease;
      font-size: 13px;
    }
    .entry-readmore-link:hover {
      color: #2563eb;
    }
    .entry-readmore-link:hover i {
      transform: translateX(6px);
    }

    /* --------------------------------------------------------------------------
       SPECIAL POST TYPE: DARK NAVY LINK/QUOTE CARD (EXACT HERRINGTON CLONE)
       -------------------------------------------------------------------------- */
    .paper-dark-link-card {
      background: #111a24;
      border-radius: 4px;
      padding: 45px 50px;
      color: #ffffff;
      display: flex;
      align-items: flex-start;
      gap: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
    }
    .paper-dark-link-card::after {
      content: '';
      position: absolute;
      bottom: -30px;
      right: -30px;
      width: 140px;
      height: 140px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      pointer-events: none;
    }
    .dark-link-circle {
      width: 54px;
      height: 54px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }
    .dark-link-content {
      flex: 1;
    }
    .dark-link-meta {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: #94a3b8;
      margin-bottom: 12px;
      display: flex;
      gap: 16px;
    }
    .dark-link-title {
      font-size: 24px;
      font-weight: 700;
      line-height: 1.35;
      color: #ffffff;
      margin-bottom: 18px;
    }
    .dark-link-title a:hover {
      color: var(--cyan-accent);
    }
    .dark-link-url {
      font-size: 13.5px;
      color: #64748b;
      word-break: break-all;
    }
    .dark-link-url a {
      color: #94a3b8;
    }
    .dark-link-url a:hover {
      color: var(--cyan-accent);
      text-decoration: underline;
    }

    /* --------------------------------------------------------------------------
       PAGINATION (HERRINGTON CIRCLE STYLE)
       -------------------------------------------------------------------------- */
    .pagination-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 20px;
    }
    .page-circle-btn {
      width: 48px;
      height: 48px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      background: #ffffff;
      color: #1e293b;
      border: 1px solid #e2e8f0;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    .page-circle-btn:hover {
      background: #0b141d;
      color: #ffffff;
      border-color: #0b141d;
    }
    .page-circle-btn.active {
      background: #0b141d;
      color: #ffffff;
      border-color: #0b141d;
      cursor: default;
    }

    /* ==========================================================================
       RIGHT COLUMN: SIDEBAR WIDGETS
       ========================================================================== */
    .sidebar-wrapper {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .sidebar-widget {
      background: #ffffff;
      border: 1px solid var(--border-light);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    }

    /* Widget 1: Author/Editor Box (Heather Smith Clone Style) */
    .author-widget-card {
      padding: 40px 30px;
      text-align: center;
    }
    .author-avatar-circle {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      margin: 0 auto 20px auto;
      overflow: hidden;
      border: 3px solid #f1f5f9;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }
    .author-avatar-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .author-widget-name {
      font-size: 20px;
      font-weight: 700;
      color: #0b141d;
      margin-bottom: 4px;
    }
    .author-widget-role {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #94a3b8;
      font-weight: 600;
      margin-bottom: 16px;
    }
    .author-widget-bio {
      font-size: 13.5px;
      line-height: 1.65;
      color: #64748b;
      margin-bottom: 24px;
    }
    .author-social-links {
      display: flex;
      justify-content: center;
      gap: 16px;
      font-size: 13.5px;
      font-weight: 600;
      color: #334155;
    }
    .author-social-links a:hover {
      color: #2563eb;
    }

    /* Widget 2: Search Box */
    .search-widget-wrap {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .search-input-group {
      position: relative;
      display: flex;
      align-items: center;
      border-bottom: 2px solid #cbd5e1;
      padding-bottom: 8px;
      transition: border-color 0.2s ease;
    }
    .search-input-group:focus-within {
      border-color: #0b141d;
    }
    .search-input-group input {
      width: 100%;
      border: none;
      background: transparent;
      font-family: var(--font-sans);
      font-size: 15px;
      color: #0b141d;
      outline: none;
      padding-right: 35px;
    }
    .search-input-group input::placeholder {
      color: #94a3b8;
    }
    .search-input-group button {
      position: absolute;
      right: 0;
      background: transparent;
      border: none;
      font-size: 16px;
      color: #64748b;
      cursor: pointer;
      transition: color 0.2s ease;
    }
    .search-input-group button:hover {
      color: #0b141d;
    }

    /* Widget Header Dark Navy (Khas Herrington) */
    .widget-dark-header {
      background-color: #0b141d;
      color: #ffffff;
      padding: 16px 24px;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.3px;
    }

    /* Widget 3: Categories List */
    .category-item-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 24px;
      border-bottom: 1px solid #f1f5f9;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      transition: background 0.2s ease;
    }
    .category-item-row:last-child {
      border-bottom: none;
    }
    .category-item-row:hover {
      background-color: #f8fafc;
      color: #0b141d;
      padding-left: 28px;
    }
    .cat-count {
      color: #94a3b8;
      font-weight: 700;
    }

    /* Widget 4: Latest Posts / Recent Papers */
    .recent-posts-list {
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .recent-post-item {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .recent-thumb-square {
      width: 68px;
      height: 68px;
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;
      background: #0b141d;
    }
    .recent-thumb-square img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    .recent-post-item:hover .recent-thumb-square img {
      transform: scale(1.08);
    }
    .recent-post-info {
      flex: 1;
    }
    .recent-date {
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
      margin-bottom: 4px;
      display: block;
    }
    .recent-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.4;
      color: #1e293b;
    }
    .recent-title a:hover {
      color: #2563eb;
    }

    /* Widget 5: Tags Cloud */
    .tags-cloud-box {
      padding: 24px;
      font-size: 14px;
      line-height: 1.9;
      color: #475569;
    }
    .tag-link {
      color: #475569;
      font-weight: 500;
      display: inline-block;
      transition: color 0.2s ease;
    }
    .tag-link:hover {
      color: #0b141d;
      font-weight: 700;
    }
    .tag-sep {
      color: #cbd5e1;
      margin: 0 6px;
    }

    /* Widget 6: Subscribe Newsletter */
    .newsletter-widget-content {
      padding: 28px 24px;
    }
    .nl-desc {
      font-size: 13.5px;
      line-height: 1.6;
      color: #64748b;
      margin-bottom: 20px;
    }
    .nl-input-capsule {
      width: 100%;
      padding: 13px 20px;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      font-size: 13.5px;
      font-family: var(--font-sans);
      outline: none;
      margin-bottom: 14px;
      transition: border-color 0.2s ease;
    }
    .nl-input-capsule:focus {
      border-color: #0b141d;
    }
    .btn-nl-submit {
      width: 100%;
      padding: 13px 20px;
      background: #0b141d;
      color: #ffffff;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-nl-submit:hover {
      background: #1e293b;
      transform: translateY(-1px);
    }

/* ==========================================================================
   HALAMAN: ABOUT US & ACADEMIC ADVISORY COUNCIL (/about/)
   ========================================================================== */
/* ==========================================================================
       HERO BREADCRUMB BANNER
       ========================================================================== */
    .about-hero-banner {
      position: relative;
      background: linear-gradient(135deg, rgba(7, 14, 21, 0.94) 0%, rgba(11, 20, 29, 0.90) 100%),
                  url('https://geoproverisk.com/wp-content/uploads/2026/09/about-hero-banner.jpg') center/cover no-repeat;
      padding: 100px 0 85px 0;
      color: #ffffff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
    }
    .about-hero-banner::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 45%;
      background: radial-gradient(circle at 80% 30%, rgba(0, 229, 255, 0.08) 0%, transparent 60%);
      pointer-events: none;
    }
    .about-hero-content {
      position: relative;
      z-index: 2;
      max-width: 980px;
    }
    .about-hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2.2px;
      color: var(--cyan-accent);
      background: rgba(0, 229, 255, 0.12);
      border: 1px solid rgba(0, 229, 255, 0.25);
      padding: 6px 14px;
      border-radius: 4px;
      margin-bottom: 20px;
    }
    .about-hero-title {
      font-size: 46px;
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1.2;
      margin-bottom: 18px;
      color: #ffffff;
    }
    .about-hero-title span {
      color: var(--cyan-accent);
    }
    .about-hero-divider {
      width: 72px;
      height: 3px;
      background-color: var(--cyan-accent);
      margin-bottom: 22px;
      border-radius: 2px;
    }
    .breadcrumbs {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 14px;
      font-weight: 500;
      color: #94a3b8;
    }
    .breadcrumbs a {
      color: #ffffff;
      transition: color 0.2s ease;
    }
    .breadcrumbs a:hover {
      color: var(--cyan-accent);
    }
    .breadcrumbs i {
      font-size: 11px;
      color: #64748b;
    }
    .breadcrumbs span.current {
      color: var(--cyan-accent);
      font-weight: 600;
    }

    /* ==========================================================================
       SECTION 1: SPLIT INTRO & MISSION/VISION CAROUSEL (HERRINGTON pxl_text_carousel3)
       ========================================================================== */
    .intro-split-section {
      padding: 100px 0 90px 0;
      background: #ffffff;
    }
    .intro-split-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 70px;
      align-items: center;
    }
    .section-eyebrow {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 700;
      color: var(--blue-accent);
      display: block;
      margin-bottom: 12px;
    }
    .intro-headline {
      font-size: 38px;
      font-weight: 800;
      color: var(--navy-bg);
      line-height: 1.25;
      letter-spacing: -0.6px;
      margin-bottom: 24px;
    }
    .intro-lead-text {
      font-size: 16px;
      color: #334155;
      line-height: 1.8;
      margin-bottom: 20px;
    }
    .intro-sub-text {
      font-size: 14.5px;
      color: #64748b;
      line-height: 1.75;
      margin-bottom: 34px;
    }
    .intro-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }

    /* Mission & Vision Interactive Card Box */
    .mv-carousel-box {
      background: #0b141d;
      border-radius: 4px;
      padding: 44px 38px;
      color: #ffffff;
      position: relative;
      box-shadow: 0 20px 48px rgba(11, 20, 29, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.08);
      overflow: hidden;
    }
    .mv-carousel-box::before {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .mv-tabs-nav {
      display: flex;
      gap: 10px;
      margin-bottom: 30px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 16px;
    }
    .mv-tab-btn {
      background: none;
      border: none;
      color: #94a3b8;
      font-size: 13.5px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .mv-tab-btn.active {
      color: var(--cyan-accent);
      background: rgba(0, 229, 255, 0.1);
    }
    .mv-tab-content {
      display: none;
      animation: fadeInTab 0.3s ease forwards;
    }
    .mv-tab-content.active {
      display: block;
    }
    @keyframes fadeInTab {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .mv-tab-icon-wrap {
      width: 52px;
      height: 52px;
      border-radius: 4px;
      background: rgba(0, 229, 255, 0.12);
      border: 1px solid rgba(0, 229, 255, 0.3);
      color: var(--cyan-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 22px;
    }
    .mv-tab-title {
      font-size: 24px;
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 14px;
      line-height: 1.3;
    }
    .mv-tab-desc {
      font-size: 14.5px;
      line-height: 1.8;
      color: #cbd5e1;
      margin-bottom: 28px;
    }
    .mv-carousel-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .mv-status-indicator {
      font-size: 12px;
      font-family: var(--font-code);
      color: var(--cyan-accent);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }
    .mv-controls {
      display: flex;
      gap: 10px;
    }
    .mv-nav-btn {
      width: 38px;
      height: 38px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 12px;
    }
    .mv-nav-btn:hover {
      background: var(--cyan-accent);
      color: var(--navy-bg);
      border-color: var(--cyan-accent);
    }

    /* ==========================================================================
       SECTION 2: PARALLAX MARINE OPERATIONS & MILESTONE TRACK
       ========================================================================== */
    .operations-milestone-section {
      position: relative;
      background: #f8fafc;
      padding: 100px 0 90px 0;
    }
    .operations-hero-visual {
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      height: 380px;
      margin-bottom: 50px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
      background: #0b141d;
    }
    .operations-hero-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.88;
    }
    .operations-visual-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(11, 20, 29, 0.3) 0%, rgba(11, 20, 29, 0.85) 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 40px;
      color: #ffffff;
    }
    .operations-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(0, 229, 255, 0.2);
      border: 1px solid rgba(0, 229, 255, 0.4);
      color: var(--cyan-accent);
      padding: 6px 14px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 12px;
      align-self: flex-start;
    }
    .operations-title {
      font-size: 28px;
      font-weight: 800;
      color: #ffffff;
      max-width: 720px;
      line-height: 1.3;
    }

    /* Milestone Cards Track */
    .milestones-track {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      position: relative;
    }
    .milestone-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 32px 26px;
      position: relative;
      transition: var(--transition-smooth);
      display: flex;
      flex-direction: column;
    }
    .milestone-card:hover {
      border-color: var(--navy-bg);
      transform: translateY(-5px);
      box-shadow: 0 14px 32px rgba(11, 20, 29, 0.08);
    }
    .milestone-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
    }
    .milestone-year {
      font-family: var(--font-code);
      font-size: 14px;
      font-weight: 800;
      color: var(--blue-accent);
      background: #e0f2fe;
      padding: 4px 12px;
      border-radius: 4px;
    }
    .milestone-tag {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #94a3b8;
      font-weight: 600;
    }
    .milestone-card h4 {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 10px;
      line-height: 1.35;
    }
    .milestone-card p {
      font-size: 13.5px;
      color: #64748b;
      line-height: 1.65;
    }

    /* ==========================================================================
       SECTION 3: WHY CHOOSE GEOPROVE & ANIMATED PROGRESS BARS
       ========================================================================== */
    .why-choose-section {
      padding: 100px 0 95px 0;
      background: #ffffff;
    }
    .why-split-top {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 60px;
      align-items: center;
      margin-bottom: 80px;
    }
    .why-visual-wrap {
      position: relative;
    }
    .why-main-image {
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 20px 44px rgba(11, 20, 29, 0.12);
      border: 1px solid var(--border-light);
    }
    .why-floating-stat {
      position: absolute;
      bottom: -25px;
      right: -25px;
      background: var(--navy-bg);
      color: #ffffff;
      padding: 24px 28px;
      border-radius: 4px;
      border: 1px solid rgba(0, 229, 255, 0.3);
      box-shadow: 0 16px 36px rgba(0,0,0,0.25);
      max-width: 290px;
    }
    .why-floating-stat strong {
      display: block;
      font-size: 32px;
      font-family: var(--font-code);
      color: var(--cyan-accent);
      line-height: 1;
      margin-bottom: 6px;
    }
    .why-floating-stat span {
      font-size: 12.5px;
      color: #cbd5e1;
      line-height: 1.4;
      display: block;
    }

    .why-content-col h2 {
      font-size: 36px;
      font-weight: 800;
      color: var(--navy-bg);
      line-height: 1.25;
      letter-spacing: -0.5px;
      margin-bottom: 20px;
    }
    .why-content-col p {
      font-size: 15px;
      color: #475569;
      line-height: 1.8;
      margin-bottom: 30px;
    }

    /* Progress Bars (pxl_progressbar style) */
    .progress-bar-group {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 34px;
    }
    .progress-item-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13.5px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 8px;
    }
    .progress-item-head span.val {
      font-family: var(--font-code);
      color: var(--blue-accent);
      font-size: 14px;
    }
    .progress-track {
      width: 100%;
      height: 8px;
      background: #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }
    .progress-fill {
      height: 100%;
      border-radius: 4px;
      background: linear-gradient(90deg, #0284c7 0%, #00e5ff 100%);
      transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* 6-Pillar Value Grid (pxl_icon_box3) */
    .pillars-grid-6 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }
    .pillar-card-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 36px 30px;
      transition: var(--transition-smooth);
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .pillar-card-box:hover {
      background: #ffffff;
      border-color: #cbd5e1;
      transform: translateY(-4px);
      box-shadow: 0 14px 32px rgba(11, 20, 29, 0.06);
    }
    .pillar-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22px;
    }
    .pillar-icon-box {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      background: #e0f2fe;
      color: var(--blue-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: all 0.25s ease;
    }
    .pillar-card-box:hover .pillar-icon-box {
      background: var(--navy-bg);
      color: var(--cyan-accent);
    }
    .pillar-number {
      font-family: var(--font-code);
      font-size: 13px;
      font-weight: 700;
      color: #94a3b8;
    }
    .pillar-card-box h4 {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 12px;
      line-height: 1.3;
    }
    .pillar-card-box p {
      font-size: 13.5px;
      color: #64748b;
      line-height: 1.7;
    }

    /* ==========================================================================
       SECTION 4: PROVEN NUMERICAL METRICS STRIP (HERRINGTON COUNTER STYLE)
       ========================================================================== */
    .metrics-strip-section {
      background: linear-gradient(135deg, #0b141d 0%, #121c27 100%);
      color: #ffffff;
      padding: 75px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
    }
    .metric-card-item {
      text-align: center;
      padding: 10px 24px;
      border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
    .metric-card-item:last-child {
      border-right: none;
    }
    .metric-icon-wrap {
      font-size: 24px;
      color: var(--cyan-accent);
      margin-bottom: 12px;
      opacity: 0.9;
    }
    .metric-number-display {
      font-size: 46px;
      font-weight: 800;
      font-family: var(--font-code);
      color: #ffffff;
      line-height: 1;
      margin-bottom: 8px;
    }
    .metric-number-display span {
      color: var(--cyan-accent);
    }
    .metric-label-display {
      font-size: 14px;
      font-weight: 700;
      color: #f1f5f9;
      margin-bottom: 4px;
      letter-spacing: -0.2px;
    }
    .metric-sub-display {
      font-size: 12px;
      color: #94a3b8;
    }

    /* ==========================================================================
       SECTION 5: THE COUNCIL OF TECHNICAL EXPERTS (LEADERSHIP TEAM)
       ========================================================================== */
    .council-section {
      padding: 100px 0 110px 0;
      background: #f8fafc;
    }
    .section-header-split {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 56px;
    }
    .section-header-split h2 {
      font-size: 36px;
      font-weight: 800;
      color: var(--navy-bg);
      line-height: 1.25;
      margin-top: 6px;
    }
    .council-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 26px;
    }
    .council-member-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      transition: var(--transition-smooth);
      display: flex;
      flex-direction: column;
    }
    .council-member-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 36px rgba(0,0,0,0.08);
      border-color: #cbd5e1;
    }
    .member-photo-frame {
      position: relative;
      height: 290px;
      overflow: hidden;
      background: #e2e8f0;
    }
    .member-photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .council-member-card:hover .member-photo-frame img {
      transform: scale(1.04);
    }
    .member-badge-pill {
      position: absolute;
      top: 14px;
      right: 14px;
      background: rgba(11, 20, 29, 0.85);
      backdrop-filter: blur(8px);
      color: var(--cyan-accent);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 4px;
      border: 1px solid rgba(0, 229, 255, 0.3);
      font-family: var(--font-code);
    }
    .member-info-body {
      padding: 24px 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .member-info-body h4 {
      font-size: 17px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 4px;
      line-height: 1.3;
    }
    .member-role {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--blue-accent);
      margin-bottom: 12px;
      display: block;
    }
    .member-bio-snippet {
      font-size: 12.5px;
      color: #64748b;
      line-height: 1.6;
      margin-bottom: 16px;
    }
    .member-credentials {
      border-top: 1px solid #f1f5f9;
      padding-top: 12px;
      font-size: 11.5px;
      color: #475569;
      font-family: var(--font-code);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* ==========================================================================
       SECTION 6: CLIENT TESTIMONIALS CAROUSEL (HERRINGTON STYLE)
       ========================================================================== */
    .testimonial-section {
      padding: 100px 0;
      background: #ffffff;
      border-top: 1px solid #e2e8f0;
    }
    .testimonial-split-layout {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 60px;
      align-items: center;
    }
    .testimonial-editorial-card {
      background: linear-gradient(135deg, #0b141d 0%, #162433 100%);
      border-radius: 4px;
      padding: 46px 40px;
      color: #ffffff;
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 16px 40px rgba(11, 20, 29, 0.14);
    }
    .quote-emblem {
      font-size: 48px;
      color: var(--cyan-accent);
      line-height: 1;
      margin-bottom: 20px;
      opacity: 0.9;
    }
    .editorial-heading {
      font-size: 26px;
      font-weight: 800;
      color: #ffffff;
      line-height: 1.35;
      margin-bottom: 16px;
    }
    .editorial-desc {
      font-size: 14.5px;
      color: #cbd5e1;
      line-height: 1.75;
      margin-bottom: 26px;
    }
    .trust-stat-mini {
      display: flex;
      align-items: center;
      gap: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 20px;
    }
    .trust-stat-mini strong {
      font-size: 26px;
      font-family: var(--font-code);
      color: var(--cyan-accent);
    }
    .trust-stat-mini span {
      font-size: 12px;
      color: #94a3b8;
      line-height: 1.4;
    }

    /* Carousel Slides Container */
    .testimonial-carousel-wrap {
      position: relative;
    }
    .testimonial-slide {
      display: none;
      animation: fadeInSlide 0.35s ease forwards;
    }
    .testimonial-slide.active {
      display: block;
    }
    @keyframes fadeInSlide {
      from { opacity: 0; transform: translateX(10px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .rating-stars {
      display: flex;
      gap: 4px;
      color: var(--amber-accent);
      font-size: 15px;
      margin-bottom: 18px;
    }
    .testimonial-quote-text {
      font-size: 18px;
      font-style: italic;
      color: #1e293b;
      line-height: 1.8;
      margin-bottom: 30px;
      font-family: var(--font-serif);
    }
    .testimonial-client-meta {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .client-avatar-frame {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--border-light);
      background: #e2e8f0;
      flex-shrink: 0;
    }
    .client-avatar-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .client-identity h5 {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 3px;
    }
    .client-identity span {
      font-size: 13px;
      color: #64748b;
      display: block;
    }
    .testimonial-nav-arrows {
      display: flex;
      gap: 12px;
      margin-top: 36px;
    }
    .testi-btn {
      width: 42px;
      height: 42px;
      border-radius: 4px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: var(--navy-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition-smooth);
      font-size: 13px;
    }
    .testi-btn:hover {
      background: var(--navy-bg);
      color: #ffffff;
      border-color: var(--navy-bg);
    }

    /* ==========================================================================
       SECTION 7: INSTITUTIONAL TRUST & REGULATORY RECOGNITION
       ========================================================================== */
    .accreditations-section {
      padding: 65px 0;
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
    }
    .accred-heading-label {
      text-align: center;
      font-size: 11.5px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #64748b;
      font-weight: 700;
      margin-bottom: 34px;
    }
    .accred-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 30px;
    }
    .accred-logo-item {
      display: flex;
      align-items: center;
      gap: 12px;
      opacity: 0.75;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .accred-logo-item:hover {
      opacity: 1;
      transform: translateY(-2px);
    }
    .accred-logo-item i {
      font-size: 26px;
      color: var(--navy-bg);
    }
    .accred-logo-text {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      letter-spacing: -0.2px;
      line-height: 1.25;
    }
    .accred-logo-text span {
      display: block;
      font-size: 10.5px;
      color: #64748b;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    /* ==========================================================================
       SECTION 8: COLLABORATION CTA BANNER (HERRINGTON SPLIT CTA)
       ========================================================================== */
    .about-cta-section {
      padding: 95px 0;
      background: linear-gradient(135deg, #0b141d 0%, #172534 100%);
      color: #ffffff;
      position: relative;
      overflow: hidden;
    }
    .about-cta-section::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, transparent 70%);
      border-radius: 50%;
    }
    .cta-inner-split {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 60px;
      align-items: center;
    }
    .cta-left-text span {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--cyan-accent);
      font-weight: 700;
      display: block;
      margin-bottom: 10px;
    }
    .cta-left-text h2 {
      font-size: 36px;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 16px;
      color: #ffffff;
    }
    .cta-left-text p {
      font-size: 15px;
      color: #94a3b8;
      line-height: 1.75;
      max-width: 600px;
    }
    .cta-right-action {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 4px;
      padding: 34px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .cta-desk-item {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .cta-desk-icon {
      width: 44px;
      height: 44px;
      border-radius: 4px;
      background: var(--cyan-accent);
      color: #0b141d;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .cta-desk-content span {
      display: block;
      font-size: 11.5px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #94a3b8;
    }
    .cta-desk-content a {
      font-size: 16px;
      font-weight: 800;
      color: #ffffff;
      font-family: var(--font-code);
    }
    .cta-desk-content a:hover {
      color: var(--cyan-accent);
    }
    .btn-white-scoping {
      background: #ffffff;
      color: var(--navy-bg);
      font-size: 14px;
      font-weight: 700;
      padding: 14px 28px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: var(--transition-smooth);
    }
    .btn-white-scoping:hover {
      background: var(--cyan-accent);
      color: #0b141d;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 229, 255, 0.3);
    }

/* ==========================================================================
   HALAMAN: CONTACT & PRE-TENDER SCOPING DESK (/contact/)
   ========================================================================== */
/* ==========================================================================
       HERO BREADCRUMB BANNER
       ========================================================================== */
    .contact-hero-banner {
      position: relative;
      background: linear-gradient(135deg, rgba(7, 14, 21, 0.90) 0%, rgba(11, 20, 29, 0.82) 100%),
                  url('https://geoproverisk.com/wp-content/uploads/2026/09/kapal-survei.jpg') center/cover no-repeat;
      padding: 100px 0 85px 0;
      color: #ffffff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
    }
    .contact-hero-banner::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 50%;
      background: radial-gradient(circle at 80% 30%, rgba(0, 229, 255, 0.09) 0%, transparent 65%);
      pointer-events: none;
    }
    .contact-hero-content {
      position: relative;
      z-index: 2;
      max-width: 960px;
      text-align: left;
      margin: 0;
      padding: 0;
    }
    .contact-hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2.2px;
      color: var(--cyan-accent);
      background: rgba(0, 229, 255, 0.12);
      border: 1px solid rgba(0, 229, 255, 0.25);
      padding: 6px 14px;
      border-radius: 4px;
      margin-bottom: 20px;
    }
    .contact-hero-title {
      font-size: 46px;
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1.2;
      margin-bottom: 18px;
      color: #ffffff;
    }
    .contact-hero-title span {
      color: var(--cyan-accent);
    }
    .contact-hero-divider {
      width: 72px;
      height: 3px;
      background-color: var(--cyan-accent);
      margin-bottom: 22px;
      border-radius: 2px;
    }
    .breadcrumbs {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 14px;
      font-weight: 500;
      color: #94a3b8;
    }
    .breadcrumbs a {
      color: #ffffff;
      transition: color 0.2s ease;
    }
    .breadcrumbs a:hover {
      color: var(--cyan-accent);
    }
    .breadcrumbs i {
      font-size: 11px;
      color: #64748b;
    }
    .breadcrumbs span.current {
      color: var(--cyan-accent);
      font-weight: 600;
    }

    /* ==========================================================================
       SECTION 1: 3-CARD DIRECT CONTACT TOUCHPOINT GRID
       ========================================================================== */
    .touchpoints-section {
      padding: 70px 0 30px 0;
      background: #f8fafc;
      margin-top: -45px;
      position: relative;
      z-index: 10;
    }
    .touchpoints-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }
    .touchpoint-card {
      background: #ffffff;
      border-radius: 4px;
      padding: 40px 34px;
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
      border: 1px solid #e2e8f0;
      position: relative;
      overflow: hidden;
      transition: var(--transition-smooth);
      display: flex;
      flex-direction: column;
    }
    .touchpoint-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: transparent;
      transition: background 0.3s ease;
    }
    .touchpoint-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 45px rgba(11, 20, 29, 0.12);
      border-color: #cbd5e1;
    }
    .touchpoint-card:hover::before {
      background: var(--cyan-accent);
    }
    .card-badge-subtle {
      position: absolute;
      top: 24px;
      right: 24px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 4px 10px;
      border-radius: 4px;
      background: #f1f5f9;
      color: #475569;
    }
    .card-badge-subtle.sg { background: rgba(2, 132, 199, 0.1); color: var(--blue-accent); }
    .card-badge-subtle.id { background: rgba(16, 185, 129, 0.1); color: var(--emerald-accent); }
    .card-badge-subtle.alert { background: rgba(245, 158, 11, 0.1); color: #d97706; }

    .touchpoint-icon-wrapper {
      width: 64px;
      height: 64px;
      border-radius: 4px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: var(--navy-bg);
      margin-bottom: 24px;
      transition: var(--transition-smooth);
    }
    .touchpoint-card:hover .touchpoint-icon-wrapper {
      background: var(--navy-bg);
      color: var(--cyan-accent);
      border-color: var(--navy-bg);
      transform: scale(1.05);
    }
    .touchpoint-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--navy-bg);
      margin-bottom: 12px;
      letter-spacing: -0.3px;
    }
    .touchpoint-desc {
      font-size: 14px;
      color: #64748b;
      line-height: 1.6;
      margin-bottom: 20px;
      flex-grow: 1;
    }
    .touchpoint-details {
      border-top: 1px solid #f1f5f9;
      padding-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-size: 13.5px;
    }
    .touchpoint-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: #334155;
    }
    .touchpoint-item i {
      color: var(--blue-accent);
      font-size: 14px;
      margin-top: 4px;
      flex-shrink: 0;
    }
    .touchpoint-item strong {
      color: #0f172a;
      font-weight: 700;
    }
    .touchpoint-item a {
      color: var(--navy-bg);
      font-weight: 700;
    }
    .touchpoint-item a:hover {
      color: var(--blue-accent);
      text-decoration: underline;
    }

    /* ==========================================================================
       SECTION 2: MAIN SPLIT - SCOPING FORM & CLIENT ENGAGEMENT HUB
       ========================================================================== */
    .scoping-split-section {
      padding: 70px 0 90px 0;
      background: #f8fafc;
    }
    .scoping-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 48px;
      align-items: flex-start;
    }

    /* Form Column */
    .scoping-form-box {
      background: #ffffff;
      border-radius: 4px;
      padding: 48px;
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.05);
      border: 1px solid #e2e8f0;
      position: relative;
    }
    .form-header-tag {
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--blue-accent);
      display: block;
      margin-bottom: 10px;
    }
    .form-header-title {
      font-size: 32px;
      font-weight: 800;
      color: var(--navy-bg);
      line-height: 1.25;
      letter-spacing: -0.5px;
      margin-bottom: 12px;
    }
    .form-header-subtitle {
      font-size: 15px;
      color: #64748b;
      line-height: 1.65;
      margin-bottom: 32px;
    }

    .form-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }
    .form-group {
      margin-bottom: 20px;
      position: relative;
    }
    .form-label {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 8px;
    }
    .form-label span.req {
      color: #ef4444;
    }
    .form-control {
      width: 100%;
      height: 50px;
      padding: 0 16px;
      font-size: 14px;
      font-family: var(--font-sans);
      color: #0f172a;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      transition: var(--transition-smooth);
    }
    .form-control:focus {
      outline: none;
      border-color: var(--blue-accent);
      box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);
    }
    select.form-control {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      background-size: 16px;
      cursor: pointer;
    }
    textarea.form-control {
      height: 120px;
      padding: 14px 16px;
      resize: vertical;
    }

    .nda-assurance-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 24px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .nda-assurance-box input[type="checkbox"] {
      margin-top: 4px;
      width: 18px;
      height: 18px;
      accent-color: var(--navy-bg);
      cursor: pointer;
    }
    .nda-assurance-text {
      font-size: 12.5px;
      color: #475569;
      line-height: 1.5;
    }
    .nda-assurance-text strong {
      color: var(--navy-bg);
    }

    .btn-submit-scoping {
      width: 100%;
      height: 56px;
      background: var(--navy-bg);
      color: #ffffff;
      border: none;
      border-radius: 4px;
      font-size: 15px;
      font-weight: 700;
      font-family: var(--font-sans);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      cursor: pointer;
      transition: var(--transition-smooth);
      box-shadow: 0 4px 15px rgba(11, 20, 29, 0.15);
    }
    .btn-submit-scoping:hover {
      background: #1e293b;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(11, 20, 29, 0.25);
    }
    .btn-submit-scoping i {
      font-size: 14px;
      transition: transform 0.2s ease;
    }
    .btn-submit-scoping:hover i {
      transform: translateX(4px);
    }

    /* Right Hub Column */
    .engagement-hub-box {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .hub-banner-card {
      background: var(--navy-bg);
      color: #ffffff;
      border-radius: 4px;
      padding: 0;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .hub-banner-image-wrap {
      width: 100%;
      height: 220px;
      position: relative;
      overflow: hidden;
      background: #020617;
    }
    .hub-banner-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 35%;
      display: block;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hub-banner-card:hover .hub-banner-img {
      transform: scale(1.04);
    }
    .hub-banner-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(11, 20, 29, 0.05) 0%, rgba(11, 20, 29, 0.4) 55%, var(--navy-bg) 100%);
      pointer-events: none;
    }
    .hub-banner-body {
      padding: 28px 32px 34px 32px;
      position: relative;
      z-index: 2;
    }
    .hub-banner-card::before {
      content: '';
      position: absolute;
      bottom: -40px;
      right: -40px;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .hub-banner-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--cyan-accent);
      margin-bottom: 12px;
      display: block;
    }
    .hub-banner-title {
      font-size: 24px;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 14px;
      color: #ffffff;
    }
    .hub-banner-desc {
      font-size: 14px;
      color: #94a3b8;
      line-height: 1.65;
      margin-bottom: 24px;
    }
    .hub-fiduciary-points {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .hub-fiduciary-points li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: #cbd5e1;
    }
    .hub-fiduciary-points li i {
      color: var(--cyan-accent);
      font-size: 13px;
    }

    .office-card {
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e2e8f0;
      padding: 28px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
      transition: var(--transition-smooth);
    }
    .office-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    }
    .office-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f1f5f9;
    }
    .office-city {
      font-size: 18px;
      font-weight: 800;
      color: var(--navy-bg);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .office-city span.flag {
      font-size: 18px;
    }
    .office-timezone {
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-code);
      background: #f1f5f9;
      color: #475569;
      padding: 4px 8px;
      border-radius: 4px;
    }
    .office-address-text {
      font-size: 13.5px;
      color: #475569;
      line-height: 1.6;
      margin-bottom: 16px;
    }
    .office-contact-rows {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 13px;
      margin-bottom: 18px;
    }
    .office-row {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #334155;
    }
    .office-row i {
      color: var(--blue-accent);
      width: 16px;
      text-align: center;
    }
    .office-action-row {
      display: flex;
      gap: 12px;
    }
    .btn-office-action {
      flex: 1;
      padding: 9px 14px;
      border-radius: 4px;
      font-size: 12.5px;
      font-weight: 600;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid #cbd5e1;
      color: #1e293b;
      background: #ffffff;
      transition: var(--transition-smooth);
    }
    .btn-office-action:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn-office-action.primary {
      background: #f8fafc;
      border-color: var(--blue-accent);
      color: var(--blue-accent);
    }
    .btn-office-action.primary:hover {
      background: var(--blue-accent);
      color: #ffffff;
    }

    /* ==========================================================================
       SECTION 3: STRATEGIC MARITIME CORRIDORS & REGIONAL MAP VISUALIZER
       ========================================================================== */
    .corridor-map-section {
      padding: 85px 0;
      background: var(--navy-bg);
      color: #ffffff;
      position: relative;
      overflow: hidden;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .corridor-map-header {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 50px auto;
    }
    .map-header-tag {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 700;
      color: var(--cyan-accent);
      display: block;
      margin-bottom: 10px;
    }
    .map-header-title {
      font-size: 34px;
      font-weight: 800;
      line-height: 1.25;
      margin-bottom: 16px;
      color: #ffffff;
    }
    .map-header-p {
      font-size: 15px;
      color: #94a3b8;
      line-height: 1.7;
    }

    /* Interactive Map Canvas Container */
    .map-canvas-container {
      background: #081018;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
      position: relative;
      display: grid;
      grid-template-columns: 1fr 340px;
    }
    .map-graphic-pane {
      position: relative;
      padding: 40px;
      min-height: 480px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: radial-gradient(circle at 50% 50%, rgba(2, 132, 199, 0.08) 0%, #070e15 80%);
    }

    /* High Tech Maritime Map Graphic */
    .map-svg-frame {
      width: 100%;
      height: 100%;
      min-height: 400px;
      position: relative;
    }
    .map-grid-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: 40px 40px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      pointer-events: none;
    }

    .node-pin {
      position: absolute;
      transform: translate(-50%, -50%);
      cursor: pointer;
      z-index: 5;
      transition: transform 0.2s ease;
    }
    .node-pin:hover {
      transform: translate(-50%, -50%) scale(1.15);
    }
    .node-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--cyan-accent);
      border: 3px solid #081018;
      box-shadow: 0 0 15px var(--cyan-accent);
      position: relative;
    }
    .node-dot::after {
      content: '';
      position: absolute;
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
      border-radius: 4px;
      border: 1.5px solid var(--cyan-accent);
      animation: ripple 2.2s infinite ease-out;
    }
    @keyframes ripple {
      0% { transform: scale(0.6); opacity: 1; }
      100% { transform: scale(2.2); opacity: 0; }
    }
    .node-label-box {
      position: absolute;
      top: 22px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(11, 20, 29, 0.95);
      border: 1px solid var(--cyan-accent);
      padding: 6px 12px;
      border-radius: 4px;
      white-space: nowrap;
      box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }
    .node-label-title {
      font-size: 11.5px;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: 0.5px;
    }
    .node-label-sub {
      font-size: 9.5px;
      font-family: var(--font-code);
      color: var(--cyan-accent);
    }

    /* Node Locations */
    .node-singapore {
      top: 36%;
      left: 38%;
    }
    .node-jakarta {
      top: 68%;
      left: 64%;
    }

    /* Maritime Corridor Trace Lines */
    .corridor-svg-line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    /* Map Sidebar Telemetry */
    .map-telemetry-pane {
      background: rgba(15, 25, 35, 0.95);
      border-left: 1px solid rgba(255, 255, 255, 0.08);
      padding: 32px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .telemetry-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #94a3b8;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .telemetry-title span.pulse-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--emerald-accent);
      box-shadow: 0 0 8px var(--emerald-accent);
    }
    .telemetry-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .telemetry-item {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 4px;
      padding: 14px;
    }
    .telemetry-label {
      font-size: 11px;
      font-family: var(--font-code);
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 4px;
    }
    .telemetry-val {
      font-size: 14px;
      font-weight: 700;
      color: #ffffff;
    }
    .telemetry-val.highlight {
      color: var(--cyan-accent);
    }
    .telemetry-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      color: var(--emerald-accent);
      font-weight: 600;
      margin-top: 4px;
    }
    .map-external-links {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .map-ext-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      font-size: 12.5px;
      font-weight: 600;
      color: #cbd5e1;
      transition: var(--transition-smooth);
    }
    .map-ext-btn:hover {
      background: rgba(0, 229, 255, 0.1);
      border-color: var(--cyan-accent);
      color: var(--cyan-accent);
    }

    /* ==========================================================================
       SECTION 4: PRE-ENGAGEMENT SCOPING CHECKLIST & FAQ
       ========================================================================== */
    .checklist-faq-section {
      padding: 90px 0;
      background: #ffffff;
    }
    .section-title-wrap {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 55px auto;
    }
    .section-tag-blue {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--blue-accent);
      display: block;
      margin-bottom: 10px;
    }
    .section-heading-dark {
      font-size: 36px;
      font-weight: 800;
      color: var(--navy-bg);
      line-height: 1.25;
      letter-spacing: -0.6px;
      margin-bottom: 16px;
    }
    .section-subheading-muted {
      font-size: 15.5px;
      color: #64748b;
      line-height: 1.7;
    }

    .checklist-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-bottom: 70px;
    }
    .checklist-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 28px 24px;
      transition: var(--transition-smooth);
      position: relative;
    }
    .checklist-card:hover {
      background: #ffffff;
      border-color: #cbd5e1;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
      transform: translateY(-4px);
    }
    .checklist-step-num {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      background: var(--navy-bg);
      color: var(--cyan-accent);
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }
    .checklist-card-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--navy-bg);
      margin-bottom: 10px;
      line-height: 1.35;
    }
    .checklist-card-desc {
      font-size: 13px;
      color: #64748b;
      line-height: 1.6;
    }

    /* Accordion FAQ */
    .faq-container {
      max-width: 900px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .faq-item {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      transition: var(--transition-smooth);
    }
    .faq-item.active {
      background: #ffffff;
      border-color: var(--blue-accent);
      box-shadow: 0 6px 20px rgba(2, 132, 199, 0.06);
    }
    .faq-question {
      padding: 22px 26px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      user-select: none;
    }
    .faq-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--navy-bg);
      line-height: 1.4;
    }
    .faq-icon {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #475569;
      flex-shrink: 0;
      transition: transform 0.25s ease;
    }
    .faq-item.active .faq-icon,
    .faq-item.open .faq-icon {
      transform: rotate(180deg) !important;
      background: var(--navy-bg) !important;
      color: #00e5ff !important;
      border-color: #00e5ff !important;
      box-shadow: 0 0 8px rgba(0, 229, 255, 0.3) !important;
    }
    .faq-answer {
      display: none;
      background: #ffffff;
      padding: 0 26px 24px 26px;
      transition: none;
    }
    .faq-item.active .faq-answer,
    .faq-item.open .faq-answer {
      display: block !important;
      animation: faqAnswerFadeIn 0.22s ease;
    }
    @keyframes faqAnswerFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .faq-answer p {
      font-size: 14.5px;
      color: #475569;
      line-height: 1.75;
      margin: 0;
    }

    /* ==========================================================================
       CONTACT PAGE MOBILE & TABLET RESPONSIVE OVERRIDES
       ========================================================================== */
    @media (max-width: 991px) {
      .contact-hero-banner {
        padding: 60px 0 45px 0 !important;
      }
      .contact-hero-content {
        max-width: 100% !important;
      }
      .contact-hero-title {
        font-size: 28px !important;
        letter-spacing: -0.5px !important;
        line-height: 1.25 !important;
        margin-bottom: 14px !important;
      }
      .contact-hero-tag {
        font-size: 10px !important;
        padding: 4px 10px !important;
        margin-bottom: 14px !important;
      }
      .contact-hero-divider {
        margin-bottom: 16px !important;
      }

      /* Section 1: Touchpoints Cards on Mobile */
      .touchpoints-section {
        padding: 30px 0 15px 0 !important;
        margin-top: 0 !important;
      }
      .touchpoints-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
      .touchpoint-card {
        padding: 24px 20px !important;
      }
      .touchpoint-icon-wrapper {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
        margin-bottom: 16px !important;
      }
      .touchpoint-title {
        font-size: 18px !important;
        margin-bottom: 8px !important;
      }
      .touchpoint-desc {
        font-size: 13px !important;
        margin-bottom: 16px !important;
        line-height: 1.55 !important;
      }
      .touchpoint-details {
        gap: 10px !important;
      }
      .touchpoint-item {
        font-size: 13px !important;
      }

      /* Section 2: Main Split on Mobile */
      .scoping-split-section {
        padding: 35px 0 45px 0 !important;
      }
      .scoping-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
      }
      .scoping-form-box {
        padding: 22px 16px !important;
      }
      .form-header-title {
        font-size: 23px !important;
        margin-bottom: 8px !important;
      }
      .form-header-subtitle {
        font-size: 13px !important;
        margin-bottom: 20px !important;
        line-height: 1.55 !important;
      }
      .form-row-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
      }
      .form-group {
        margin-bottom: 14px !important;
      }
      .form-control {
        padding: 10px 14px !important;
        font-size: 13.5px !important;
      }
      .btn-submit-scoping {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px 20px !important;
        font-size: 14px !important;
      }
      .nda-assurance-box {
        padding: 14px 12px !important;
        margin-bottom: 18px !important;
      }
      .nda-assurance-text {
        font-size: 12px !important;
        line-height: 1.5 !important;
      }

      /* Right Sidebar Hub on Mobile */
      .hub-banner-card {
        padding: 0 !important;
        margin-bottom: 18px !important;
      }
      .hub-banner-image-wrap {
        height: 180px !important;
      }
      .hub-banner-body {
        padding: 22px 18px 26px 18px !important;
      }
      .hub-banner-title {
        font-size: 19px !important;
      }
      .office-card {
        padding: 20px 16px !important;
        margin-bottom: 16px !important;
      }
      .office-action-row {
        flex-direction: column !important;
        gap: 10px !important;
      }
      .btn-office-action {
        width: 100% !important;
        justify-content: center !important;
      }

      /* Section 3: Map Visualizer on Mobile */
      .corridor-map-section {
        padding: 40px 0 !important;
      }
      .map-header-title {
        font-size: 23px !important;
      }
      .map-header-p {
        font-size: 13px !important;
        line-height: 1.55 !important;
      }
      .map-canvas-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
      .map-graphic-pane {
        min-height: 240px !important;
        height: 250px !important;
      }
      .map-telemetry-pane {
        padding: 20px 16px !important;
      }

      /* Section 4: Checklist & FAQ on Mobile */
      .checklist-faq-section {
        padding: 40px 0 !important;
      }
      .section-heading-dark {
        font-size: 23px !important;
      }
      .checklist-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 35px !important;
      }
      .checklist-card {
        padding: 18px 16px !important;
      }
      .faq-container {
        gap: 10px !important;
      }
      .faq-question {
        padding: 16px 16px !important;
        gap: 10px !important;
      }
      .faq-title {
        font-size: 14px !important;
      }
      .faq-answer {
        padding: 0 16px 16px 16px !important;
      }
      .faq-answer p {
        font-size: 13px !important;
        line-height: 1.6 !important;
      }

      /* Section 5: Bottom CTA on Mobile */
      .contact-cta-section {
        padding: 45px 0 !important;
      }
      .cta-flex-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
        text-align: left !important;
      }
      .cta-text-side h3 {
        font-size: 21px !important;
      }
      .cta-text-side p {
        font-size: 13.5px !important;
      }
      .cta-action-side {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
      }
      .btn-cta-gold,
      .btn-cta-transparent {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 18px !important;
      }
    }


    /* ==========================================================================
       SECTION 5: BOTTOM EXECUTIVE CTA BANNER
       ========================================================================== */
    .contact-cta-section {
      padding: 70px 0;
      background: linear-gradient(135deg, #0b141d 0%, #070e15 100%);
      color: #ffffff;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .cta-flex-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }
    .cta-text-side {
      max-width: 700px;
    }
    .cta-text-side h3 {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.5px;
      margin-bottom: 10px;
      color: #ffffff;
    }
    .cta-text-side h3 span {
      color: var(--cyan-accent);
    }
    .cta-text-side p {
      font-size: 14.5px;
      color: #94a3b8;
      line-height: 1.6;
    }
    .cta-action-side {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }
    .btn-cta-gold {
      background: var(--cyan-accent);
      color: #0b141d;
      font-size: 14.5px;
      font-weight: 700;
      padding: 14px 28px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: var(--transition-smooth);
    }
    .btn-cta-gold:hover {
      background: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 229, 255, 0.3);
    }
    .btn-cta-transparent {
      background: transparent;
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.25);
      font-size: 14.5px;
      font-weight: 600;
      padding: 14px 26px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: var(--transition-smooth);
    }
    .btn-cta-transparent:hover {
      border-color: #ffffff;
      background: rgba(255, 255, 255, 0.08);
    }

/* ==========================================================================
   ADDITIONAL POLISH & SUBMISSION MODAL STYLES
   ========================================================================== */
.pagination-item {
  display: inline-flex !important;
}

.intro-text-col {
  display: flex !important;
  flex-direction: column !important;
}

.progress-item {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 24px !important;
}

/* Contact Submission Feedback Modal */
.success-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(11, 20, 29, 0.85) !important;
  backdrop-filter: blur(6px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.28s ease !important;
  padding: 20px !important;
}
.success-modal-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
}
.success-modal-card {
  background: #ffffff !important;
  border-radius: 4px !important;
  padding: 44px !important;
  max-width: 520px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid #e2e8f0 !important;
  transform: scale(0.95) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.success-modal-overlay.show .success-modal-card {
  transform: scale(1) !important;
}
.modal-check-icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: 4px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  margin: 0 auto 24px auto !important;
}
.modal-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0b141d !important;
  margin-bottom: 12px !important;
}
.modal-desc {
  font-size: 14.5px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin-bottom: 28px !important;
}
.btn-modal-close {
  background: #0b141d !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 30px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}
.btn-modal-close:hover {
  background: #00e5ff !important;
  color: #0b141d !important;
}

/* ==========================================================================
   PAGE-FAQ COMPLETE STYLES
   ========================================================================== */
    .faq-hero-banner .hero-banner-inner {
      max-width: 960px;
      margin-left: 0;
      margin-right: auto;
      text-align: left;
    }
    .faq-hero-title {
      font-family: var(--font-serif, "Merriweather", Georgia, serif);
      font-size: 46px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.6px;
      margin-bottom: 18px;
      color: #ffffff;
      text-align: left;
    }
    .faq-hero-title span {
      color: var(--cyan-accent, #00e5ff);
    }
    .faq-hero-desc {
      font-size: 17px;
      color: #cbd5e1;
      line-height: 1.7;
      max-width: 860px;
      margin-bottom: 0;
      text-align: left;
    }
    /* Quick Search Bar */
    .faq-search-wrapper {
      margin-top: 32px;
      max-width: 640px;
      position: relative;
      margin-left: 0;
      margin-right: auto;
    }
    .faq-search-input {
      width: 100%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 4px;
      padding: 16px 24px 16px 54px;
      font-size: 15px;
      color: #ffffff;
      font-family: var(--font-sans);
      outline: none;
      transition: var(--transition-smooth);
    }
    .faq-search-input:focus {
      background: rgba(255, 255, 255, 0.14);
      border-color: var(--cyan-accent);
      box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
    }
    .faq-search-input::placeholder {
      color: #94a3b8;
    }
    .faq-search-icon {
      position: absolute;
      left: 22px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--cyan-accent);
      font-size: 16px;
      pointer-events: none;
    }

    /* ==========================================================================
       SECTION 1: TOPIC FILTER PILLS
       ========================================================================== */
    .topic-filter-section {
      background: #ffffff;
      border-bottom: 1px solid var(--border-light);
      padding: 24px 0;
      position: sticky;
      top: 76px;
      z-index: 900;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    }
    .filter-pills-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: thin;
    }
    .topic-pill {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      color: #475569;
      font-size: 13.5px;
      font-weight: 600;
      padding: 9px 20px;
      border-radius: 4px;
      cursor: pointer;
      white-space: nowrap;
      transition: var(--transition-smooth);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .topic-pill:hover {
      background: #e2e8f0;
      color: #0f172a;
    }
    .topic-pill.active {
      background: var(--navy-bg);
      color: #ffffff;
      border-color: var(--navy-bg);
      box-shadow: 0 4px 12px rgba(11, 20, 29, 0.15);
    }
    .pill-count {
      font-size: 11px;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.2);
    }
    .topic-pill:not(.active) .pill-count {
      background: #cbd5e1;
      color: #0f172a;
    }

    /* ==========================================================================
       SECTION 2: MAIN FAQ CONTENT & SIDEBAR (HERRINGTON LAYOUT)
       ========================================================================== */
    .faq-layout-section {
      padding: 70px 0 95px 0;
      background: #f8fafc;
    }
    .faq-layout-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 48px;
      align-items: flex-start;
    }

    /* Accordion Container */
    .faq-accordion-group {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Individual Accordion Item */
    .faq-item-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      transition: var(--transition-smooth);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    }
    .faq-item-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 8px 24px rgba(11, 20, 29, 0.06);
    }
    .faq-item-card.open {
      border-color: var(--blue-accent);
      box-shadow: 0 10px 28px rgba(2, 132, 199, 0.08);
    }

    .faq-header-btn {
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: 22px 26px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }
    .faq-q-left {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    .faq-q-num {
      font-family: var(--font-code);
      font-size: 13px;
      font-weight: 700;
      color: var(--blue-accent);
      background: #eff6ff;
      border: 1px solid #dbeafe;
      padding: 4px 8px;
      border-radius: 4px;
      line-height: 1;
      margin-top: 2px;
      flex-shrink: 0;
    }
    .faq-q-title {
      font-family: var(--font-serif);
      font-size: 18.5px;
      font-weight: 700;
      color: var(--navy-bg);
      line-height: 1.4;
      transition: color 0.2s ease;
    }
    .faq-item-card:hover .faq-q-title {
      color: var(--blue-accent);
    }
    .faq-item-card.open .faq-q-title {
      color: var(--blue-accent);
    }

    .faq-toggle-icon {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      background: #f1f5f9;
      color: var(--navy-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 13px;
      transition: var(--transition-smooth);
    }
    .faq-item-card.open .faq-toggle-icon {
      background: var(--navy-bg);
      color: var(--cyan-accent);
      transform: rotate(180deg);
    }

    /* Accordion Body */
    .faq-body-collapse {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .faq-item-card.open .faq-body-collapse,
    .faq-body-collapse.open {
      max-height: 2000px;
    }
    .faq-body-inner {
      padding: 0 26px 26px 64px;
      color: #475569;
      font-size: 14.5px;
      line-height: 1.75;
      border-top: 1px solid #f8fafc;
    }
    .faq-body-inner p {
      margin-bottom: 14px;
    }
    .faq-body-inner p:last-child {
      margin-bottom: 0;
    }
    .faq-body-inner strong {
      color: #0f172a;
    }

    /* Structured Callout Inside FAQ */
    .faq-callout-box {
      background: #f8fafc;
      border-left: 4px solid var(--blue-accent);
      border-radius: 0 4px 4px 0;
      padding: 14px 18px;
      margin: 16px 0;
      font-size: 13.5px;
      color: #334155;
    }
    .faq-callout-box strong {
      display: block;
      color: var(--navy-bg);
      margin-bottom: 4px;
      font-size: 14px;
    }
    .faq-code-ref {
      font-family: var(--font-code);
      background: #e2e8f0;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12.5px;
      color: #0f172a;
    }

    /* ==========================================================================
       RIGHT SIDEBAR: DUE DILIGENCE WIDGETS (HERRINGTON SIDEBAR STYLE)
       ========================================================================== */
    .faq-sidebar {
      display: flex;
      flex-direction: column;
      gap: 30px;
      position: sticky;
      top: 170px;
    }

    /* Widget 1: Direct Geoconsulting Desk */
    .sidebar-widget {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 30px 28px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
    }
    .widget-lead-badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: var(--blue-accent);
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      padding: 4px 10px;
      border-radius: 4px;
      display: inline-block;
      margin-bottom: 14px;
    }
    .widget-title {
      font-family: var(--font-serif);
      font-size: 21px;
      font-weight: 700;
      color: var(--navy-bg);
      margin-bottom: 12px;
      line-height: 1.3;
    }
    .widget-desc {
      font-size: 13.5px;
      color: #64748b;
      line-height: 1.65;
      margin-bottom: 22px;
    }
    .sidebar-btn-navy {
      background: var(--navy-bg);
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 12px 22px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: var(--transition-smooth);
      width: 100%;
    }
    .sidebar-btn-navy:hover {
      background: var(--cyan-accent);
      color: var(--navy-bg);
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0, 229, 255, 0.25);
    }

    /* Widget 2: Fiduciary Neutrality Declaration Card */
    .fiduciary-guarantee-card {
      background: linear-gradient(135deg, #0b141d 0%, #070e15 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      padding: 30px 28px;
      color: #ffffff;
      position: relative;
      overflow: hidden;
    }
    .fiduciary-guarantee-card::after {
      content: '';
      position: absolute;
      bottom: -40px;
      right: -40px;
      width: 140px;
      height: 140px;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .fiduciary-guarantee-card h4 {
      font-family: var(--font-serif);
      font-size: 19px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 12px;
    }
    .fiduciary-guarantee-card h4 span {
      color: var(--cyan-accent);
    }
    .fiduciary-guarantee-card p {
      font-size: 13px;
      color: #94a3b8;
      line-height: 1.65;
      margin-bottom: 20px;
    }
    .guarantee-badges {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .badge-line {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12.5px;
      color: #cbd5e1;
    }
    .badge-line i {
      color: var(--cyan-accent);
      font-size: 13px;
    }

    /* Widget 3: Quick Direct Scoping Hotline */
    .hotline-widget {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 4px;
      padding: 24px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .hotline-icon {
      width: 46px;
      height: 46px;
      border-radius: 4px;
      background: var(--blue-accent);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .hotline-meta strong {
      display: block;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--blue-accent);
      font-weight: 800;
    }
    .hotline-meta a {
      font-family: var(--font-code);
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }
    .hotline-meta a:hover {
      color: var(--blue-accent);
    }

    /* ==========================================================================
       SECTION 3: PRE-TENDER SCOPING EXECUTIVE CTA
       ========================================================================== */
    .faq-cta-banner {
      padding: 80px 0;
      background: linear-gradient(135deg, #0b141d 0%, #070e15 100%);
      color: #ffffff;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .cta-flex-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }
    .cta-text-side {
      max-width: 760px;
    }
    .cta-text-side h3 {
      font-family: var(--font-serif);
      font-size: 32px;
      font-weight: 700;
      letter-spacing: -0.5px;
      margin-bottom: 12px;
      color: #ffffff;
    }
    .cta-text-side h3 span {
      color: var(--cyan-accent);
    }
    .cta-text-side p {
      font-size: 15px;
      color: #94a3b8;
      line-height: 1.65;
    }
    .cta-action-side {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }
    .btn-cta-gold {
      background: var(--cyan-accent);
      color: #0b141d;
      font-size: 14.5px;
      font-weight: 700;
      padding: 14px 28px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: var(--transition-smooth);
    }
    .btn-cta-gold:hover {
      background: #ffffff;
      color: #0b141d;
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(0, 229, 255, 0.3);
    }
    .btn-cta-outline {
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
      font-size: 14.5px;
      font-weight: 700;
      padding: 14px 26px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: var(--transition-smooth);
    }
    .btn-cta-outline:hover {
      border-color: #ffffff;
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-3px);
    }

    /* ==========================================================================
       HERRINGTON MASTER FOOTER
       ========================================================================== */
    .site-footer {
      background-color: var(--navy-deep);
      color: #ffffff;
      padding: 80px 0 30px 0;
      border-top: 1px solid var(--border-dark);
    }
    .footer-columns-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.5fr;
      gap: 48px;
      margin-bottom: 60px;
    }
    .footer-brand-col p {
      font-size: 13.5px;
      color: #94a3b8;
      line-height: 1.7;
      margin: 18px 0 24px 0;
      max-width: 320px;
    }
    .footer-cert-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .cert-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #cbd5e1;
      font-family: var(--font-code);
    }
    .footer-col-title {
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 22px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .footer-link-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-link-list li a {
      color: #94a3b8;
      font-size: 13.5px;
      transition: all 0.2s ease;
      display: inline-block;
    }
    .footer-link-list li a:hover {
      color: var(--cyan-accent);
      transform: translateX(4px);
    }
    .newsletter-capsule {
      display: flex;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 4px;
      padding: 4px 6px;
      margin-bottom: 14px;
    }
    .newsletter-capsule input {
      background: transparent;
      border: none;
      color: #ffffff;
      padding: 10px 16px;
      font-size: 13px;
      flex-grow: 1;
      outline: none;
      font-family: var(--font-sans);
    }
    .newsletter-capsule button {
      background-color: var(--cyan-accent);
      border: none;
      color: var(--navy-bg);
      width: 38px;
      height: 38px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition-smooth);
    }
    .newsletter-capsule button:hover {
      background-color: #ffffff;
      transform: scale(1.05);
    }
    .newsletter-notice {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 12px;
      color: #64748b;
      line-height: 1.5;
    }
    .bell-icon-circle {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background: rgba(0, 229, 255, 0.1);
      color: var(--cyan-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 11px;
      margin-top: 2px;
    }

    .footer-bottom-subbar {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12.5px;
      color: #64748b;
      flex-wrap: wrap;
      gap: 16px;
    }
    .footer-bottom-links {
      display: flex;
      gap: 16px;
    }
    .footer-bottom-links a {
      color: #64748b;
    }
    .footer-bottom-links a:hover {
      color: #ffffff;
    }
    .footer-scroll-top {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition-smooth);
    }
    .footer-scroll-top:hover {
      background: var(--cyan-accent);
      color: var(--navy-bg);
      transform: translateY(-3px);
    }

    /* Duplicate mobile drawer rules removed */

    /* Responsive */
    @media (max-width: 1024px) {
      .faq-layout-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .faq-sidebar {
        position: static;
      }
      .footer-columns-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 992px) {
      .top-info-group { display: none; }
      .main-menu, .nav-actions { display: none; }
      .mobile-brand { display: block; }
      .mobile-menu-btn { display: block; }
      .cta-flex-wrap {
        flex-direction: column;
        text-align: center;
      }
      .cta-action-side {
        flex-direction: column;
        width: 100%;
      }
      .cta-action-side a {
        width: 100%;
        justify-content: center;
      }
    }

    @media (max-width: 768px) {
      .container-herrington {
        padding: 0 20px;
      }
      .faq-hero-title {
        font-size: 32px;
      }
      .faq-body-inner {
        padding: 0 20px 22px 20px;
      }
      .faq-q-left {
        gap: 12px;
      }
      .footer-columns-grid {
        grid-template-columns: 1fr;
      }
    }


/* Desktop flyout navigation removed - standard dropdown restored */


/* ==========================================================================
   PERFECT CIRCLE TESTIMONIAL & AVATAR ENFORCEMENT (ANTI-LONJONG)
   ========================================================================== */
.author-avatar,
.client-avatar-frame,
.client-avatar-frame img,
.author-avatar-circle,
.author-avatar-circle img,
.author-mini-avatar,
.leader-avatar-round,
.testimonial-author img,
.testimonial-client-meta img,
.testimonial-slide img {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.author-avatar,
.testimonial-author img {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  border-radius: 4px !important;
  border: 2px solid rgba(0, 229, 255, 0.45) !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2) !important;
}

.client-avatar-frame {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  border: 2px solid rgba(0, 229, 255, 0.45) !important;
}

.client-avatar-frame img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

/* ==========================================================================
   5-PILLAR SIDEBAR DIRECTORY & SYNCHRONIZED REGISTER FORM
   ========================================================================== */
.service-menu-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 18px !important;
  background: #001428 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 4px 4px 0 0 !important;
  border-bottom: 2px solid #00e5ff !important;
}

.service-menu-header i {
  color: #00e5ff !important;
  font-size: 14px !important;
}

.service-pillar-list {
  list-style: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.pillar-nav-group {
  border-radius: 4px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.pillar-title-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 14px !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.pillar-title-link:hover {
  background: #f1f5f9 !important;
  color: #0088cc !important;
}

.pillar-title-link .pillar-name {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.pillar-title-link .pillar-name i {
  color: #0284c7 !important;
  font-size: 12px !important;
}

.pillar-title-link .p-arrow {
  font-size: 10px !important;
  color: #94a3b8 !important;
  transition: transform 0.2s ease !important;
}

.pillar-nav-group.active-pillar {
  border-color: rgba(6, 182, 212, 0.45) !important;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.08) !important;
}

.pillar-nav-group.active-pillar .pillar-title-link {
  background: #001f3b !important;
  color: #00e5ff !important;
}

.pillar-nav-group.active-pillar .pillar-title-link .pillar-name i {
  color: #00e5ff !important;
}

.pillar-nav-group.active-pillar .pillar-title-link .p-arrow {
  transform: rotate(90deg) !important;
  color: #00e5ff !important;
}

.pillar-sub-items {
  list-style: none !important;
  padding: 4px 0 6px 0 !important;
  margin: 0 !important;
  background: #fcfdfd !important;
}

.pillar-sub-items li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px 8px 22px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-decoration: none !important;
  border-left: 2px solid transparent !important;
  transition: all 0.18s ease !important;
}

.pillar-sub-items li a:hover {
  color: #0284c7 !important;
  background: #f1f5f9 !important;
  padding-left: 26px !important;
}

.pillar-sub-items li.active-sub a {
  background: rgba(6, 182, 212, 0.12) !important;
  color: #0088cc !important;
  font-weight: 700 !important;
  border-left-color: #00e5ff !important;
  padding-left: 24px !important;
}

.sub-badge {
  display: inline-block !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  background: rgba(16, 185, 129, 0.15) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.sidebar-all-services-link {
  padding: 10px 14px !important;
  text-align: center !important;
  border-top: 1px solid #e2e8f0 !important;
  margin-top: 6px !important;
}

.sidebar-all-services-link a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0088cc !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.sidebar-all-services-link a:hover {
  color: #00e5ff !important;
}

/* SYNCHRONIZED SCOPING FORM EMERALD PILL BUTTON */
.btn-submit-scoping {
  background: linear-gradient(135deg, #00e5ff 0%, #10b981 100%) !important;
  color: #001020 !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  padding: 14px 34px !important;
  border-radius: 4px !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.28) !important;
  transition: all 0.25s ease !important;
}

.btn-submit-scoping:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 229, 255, 0.35) !important;
  filter: brightness(1.08) !important;
}

/* ==========================================================================
   MOBILE OFFCANVAS DRAWER & HAMBURGER NAVIGATION SYSTEM (DEFINITIVE REPAIR)
   ========================================================================== */

/* 1. Desktop Isolation Lockdown (>992px): Strictly hide mobile drawer and toggle button */
@media (min-width: 993px) {
  .mobile-drawer,
  #mobileDrawer,
  .drawer-overlay,
  #drawerOverlay,
  .mobile-toggle,
  .mobile-menu-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    left: -9999px !important;
    transform: translateX(-150%) !important;
  }
}

/* 2. Mobile Layout & Hamburger Navigation (<=992px) */
@media (max-width: 992px) {
  /* 1. Mobile Top Navbar Header: Dark Midnight Navy (Consistent with Desktop) */
  .site-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 99990 !important;
    background: #000014 !important;
    background-color: #000014 !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
    width: 100% !important;
  }
  .nav-inner {
    height: 64px !important;
  }
  .mobile-brand {
    display: block !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    letter-spacing: -0.4px !important;
  }
  .mobile-brand span {
    color: #00e5ff !important;
  }

  /* Navbar adjustments on mobile: Only Brand, Compact EN/ID, and Hamburger */
  .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .nav-right .btn-pill-navy,
  .nav-actions .btn-pill-navy,
  .site-nav .btn-pill-navy {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Compact & Optimized Mobile Language Switcher */
  .nav-right .lang-switcher-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    background: #08101C !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    gap: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
  .nav-right .lang-globe-icon {
    font-size: 11px !important;
    color: #00e5ff !important;
    margin-right: 2px !important;
  }
  .nav-right .lang-option {
    font-family: var(--font-code, monospace) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    padding: 2px 4px !important;
    border-radius: 2px !important;
    line-height: 1 !important;
  }
  .nav-right .lang-option.active {
    color: #ffffff !important;
    font-weight: 800 !important;
    background: rgba(0, 229, 255, 0.15) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
  }
  .nav-right .lang-divider {
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.2) !important;
  }

  /* Hamburger Toggle Button - Dark Glass with Crisp White Bars */
  .mobile-toggle,
  .mobile-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    z-index: 100 !important;
    transition: all 0.2s ease !important;
  }
  .mobile-toggle:hover,
  .mobile-toggle:active,
  .mobile-menu-btn:hover,
  .mobile-menu-btn:active {
    background: rgba(0, 229, 255, 0.2) !important;
    border-color: #00e5ff !important;
  }
  .mobile-toggle span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
    transition: all 0.25s ease !important;
  }
  .mobile-toggle:hover span,
  .mobile-toggle:active span {
    background-color: #00e5ff !important;
  }

  /* Dimmed Backdrop Overlay (Hidden completely when closed) */
  .drawer-overlay,
  #drawerOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 10, 20, 0.72) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
  }
  .drawer-overlay.open,
  .drawer-overlay.active,
  #drawerOverlay.open,
  #drawerOverlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Offcanvas Drawer - 100% HIDDEN OFF-SCREEN by default (Cannot peek or cover left side) */
  .mobile-drawer,
  #mobileDrawer {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 320px !important;
    max-width: 86vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #0b141d !important;
    color: #ffffff !important;
    z-index: 99999 !important;
    padding: 24px 18px !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    /* PUSH COMPLETELY OFF-SCREEN TO THE LEFT (-105%), VISIBILITY HIDDEN, NO POINTER EVENTS */
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s ease, box-shadow 0.32s ease !important;
  }

  /* Drawer Opened State - Triggered ONLY when hamburger button is clicked */
  .mobile-drawer.open,
  .mobile-drawer.active,
  #mobileDrawer.open,
  #mobileDrawer.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: 16px 0 50px rgba(0, 0, 0, 0.7) !important;
  }

  /* Drawer standard submenu styling restored */


  /* Mobile Hero Banner Dark Navy Theme Lockdown */
.hero-container {
  background-color: #000014 !important;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 20, 0.94) 0%,
    rgba(7, 14, 21, 0.90) 40%,
    rgba(11, 20, 29, 0.88) 75%,
    rgba(0, 0, 20, 0.96) 100%
  ),
  url('https://geoproverisk.com/wp-content/uploads/2026/09/background-website.jpg') !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  min-height: auto !important;
  padding: 48px 0 52px 0 !important;
  display: block !important;
  position: relative !important;
  color: #ffffff !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.hero-heading {
  font-size: clamp(25px, 6.4vw, 31px) !important;
  line-height: 1.32 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85) !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
}

.hero-heading br {
  display: inline !important;
}

.pxl-title--typewriter-main {
  display: inline !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: normal !important;
}

.hero-desc-lead {
  color: #cbd5e1 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
}

  .hero-telemetry-row {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .telemetry-item {
    color: #cbd5e1 !important;
  }
  .telemetry-item strong {
    color: #ffffff !important;
  }
  .telemetry-item i {
    color: #00e5ff !important;
  }
}

/* ==========================================================================
   INTERACTIVE SCOPING SELECTOR HIGHLIGHT PULSE
   ========================================================================== */
@keyframes scopingHighlightPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.8);
    border-color: #00e5ff !important;
  }
  40% {
    box-shadow: 0 0 35px 8px rgba(0, 229, 255, 0.45);
    border-color: #00e5ff !important;
  }
  100% {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
    border-color: #e2e8f0;
  }
}

.scoping-card-form.scoping-highlight-pulse {
  animation: scopingHighlightPulse 2s ease-out !important;
}

.scoping-card-form.scoping-highlight-pulse #consultationInquirySelect {
  border-color: #00e5ff !important;
  background-color: rgba(0, 229, 255, 0.06) !important;
  transition: all 0.3s ease !important;
}

/* ==========================================================================
   STRATEGIC FOOTER & MOBILE ACCORDION STYLING
   ========================================================================== */
.footer-col-accordion {
  display: flex;
  flex-direction: column;
}

.footer-accordion-toggle {
  display: block;
}

.footer-accordion-toggle .footer-chevron {
  display: none !important;
}

.footer-accordion-collapse {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile Accordion Mode (<= 992px) */
@media (max-width: 992px) {
  .site-footer-herrington {
    padding: 55px 0 25px 0 !important;
  }

  .footer-columns-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 25px !important;
  }

  /* Column 1: Brand & Contact Coordinates */
  .footer-columns-grid > div:first-child {
    padding-bottom: 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 6px !important;
  }

  /* Columns 2, 3, 4 Accordion Wrappers */
  .footer-col-accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .footer-accordion-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .footer-accordion-toggle .footer-section-title {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.3px !important;
  }

  .footer-accordion-toggle .footer-chevron {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    color: #00e5ff !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    background: rgba(0, 229, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important;
  }

  .footer-accordion-toggle.open .footer-chevron {
    transform: rotate(180deg) !important;
    background: rgba(0, 229, 255, 0.2) !important;
    border-color: #00e5ff !important;
  }

  .footer-accordion-collapse {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: max-height 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, visibility 0.28s ease, padding 0.28s ease !important;
    padding: 0 !important;
  }

  .footer-accordion-collapse.open {
    max-height: 580px !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 6px 0 20px 0 !important;
  }

  .footer-link-list {
    gap: 10px !important;
  }

  .footer-link-list li a {
    font-size: 13.5px !important;
    color: #cbd5e1 !important;
    padding: 6px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .footer-bottom-subbar {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
    padding-top: 22px !important;
  }
}

/* ==========================================================================
   5 CORE ENGINEERING PRACTICES HUB & SIDEBAR MOBILE POLISH
   ========================================================================== */
@media (max-width: 768px) {
  .accordion-card {
    border-radius: 4px !important;
    margin-bottom: 14px !important;
  }
  .accordion-card .p-6,
  .accordion-card .sm\:p-7 {
    padding: 16px 14px !important;
  }
  .accordion-card h3 {
    font-size: 16.5px !important;
    line-height: 1.35 !important;
  }
  .accordion-content > div {
    padding: 16px 14px !important;
  }
  .accordion-content .grid {
    gap: 14px !important;
  }
  .accordion-content .rounded-xl {
    padding: 14px !important;
  }

  .service-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .service-menu-widget {
    padding: 10px !important;
  }
  .pillar-nav-group {
    margin-bottom: 6px !important;
  }
  .pillar-title-link {
    font-size: 12px !important;
    padding: 9px 10px !important;
  }
  .pillar-sub-items li a {
    font-size: 11.5px !important;
    padding: 6px 8px 6px 14px !important;
  }
  .sub-badge {
    font-size: 8px !important;
    padding: 1px 4px !important;
  }
}

/* ==========================================================================
   FIX RESPONSIF MOBILE LENGKAP: HALAMAN SERVIS (<= 992px)
   ========================================================================== */
@media screen and (max-width: 992px) {
  .service-main-section {
    padding: 24px 0 60px 0 !important;
    overflow-x: hidden !important;
  }

  /* 1. Layout Dasar: Artikel di Atas, Sidebar Turun ke Bawah */
  .service-layout-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 28px !important;
  }
  .service-main-content {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 16px !important;
  }
  .service-sidebar {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
  }

  /* 2. PILAR 01, 02, 03: Disusun Vertikal 3 Baris ke Bawah (Bukan 3 Kolom) */
  .advisory-pillars-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin-bottom: 36px !important;
  }
  .advisory-pillar-item {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 18px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #00e5ff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
  }
  .advisory-pillar-item h4 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin: 10px 0 8px 0 !important;
    color: #0f172a !important;
  }
  .advisory-pillar-item p {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
  }

  /* 3. STAT CALLOUT BOX: Angka Simetris & Tidak Nabrak Pinggir HP */
  .stat-callout-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 24px 18px !important;
    gap: 18px !important;
    margin-bottom: 36px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
  }
  .stat-numbers-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(0, 229, 255, 0.25) !important;
    box-sizing: border-box !important;
  }
  .stat-metric {
    text-align: left !important;
    padding: 12px 14px !important;
    background: rgba(0, 229, 255, 0.06) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }
  .stat-metric .num {
    font-size: clamp(20px, 6vw, 28px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #00e5ff !important;
    margin-bottom: 4px !important;
  }
  .stat-metric .lbl {
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #cbd5e1 !important;
  }

  /* 4. TABEL PERBANDINGAN: Didesain Ulang Menjadi "Executive Battle-Card" */
  .comparison-wrapper {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 20px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 36px !important;
  }
  .comp-table, 
  .comp-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
  }
  .comp-table thead {
    display: none !important;
  }
  .comp-table tr {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Header Parameter: Biru Navy Elegan */
  .comp-table tr td:first-child {
    background: linear-gradient(135deg, #001f3b 0%, #002d54 100%) !important;
    color: #ffffff !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #00e5ff !important;
  }
  .comp-table tr td:first-child strong {
    color: #ffffff !important;
  }
  /* Kotak Pendekatan Kontraktor (Status Quo) */
  .comp-table tr td:nth-child(2) {
    background: #fff8f8 !important;
    padding: 14px !important;
    border-bottom: 1px solid #fee2e2 !important;
    border-left: 4px solid #f87171 !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    word-wrap: break-word !important;
  }
  .comp-table tr td:nth-child(2)::before {
    content: '⚠️ CONTRACTOR APPROACH' !important;
    display: inline-block !important;
    background: #fee2e2 !important;
    color: #b91c1c !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
  }
  /* Kotak GEOPROVE Fiduciary (Keunggulan) */
  .comp-table tr td:nth-child(3) {
    background: #f0fdf4 !important;
    padding: 14px !important;
    border-left: 4px solid #10b981 !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    color: #0f172a !important;
    word-wrap: break-word !important;
  }
  .comp-table tr td:nth-child(3)::before {
    content: '🛡️ GEOPROVE ADVANTAGE' !important;
    display: inline-block !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
  }
  .comp-table tr td.highlight .tag-check {
    display: inline-block !important;
    color: #15803d !important;
    font-weight: 700 !important;
  }

  /* 5. FORMULIR SCOPING: Ramping, Elegan & Jelas Interaktifnya */
  .scoping-form-card {
    border-radius: 4px !important;
    padding: 22px 18px !important;
    margin-bottom: 32px !important;
    border: 1px solid rgba(0, 31, 59, 0.12) !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  }
  .scoping-form-header h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    color: #001f3b !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }
  .scoping-form-header p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    margin-bottom: 18px !important;
  }
  .scoping-form-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 14px 18px !important;
    background: #001f3b !important;
    color: #ffffff !important;
    border: 1.5px solid #001f3b !important;
    border-radius: 4px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-bottom: 6px !important;
    box-shadow: 0 4px 14px rgba(0, 31, 59, 0.15) !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
  }
  .scoping-form-toggle-btn:hover,
  .scoping-form-toggle-btn.open {
    background: #002d54 !important;
    border-color: #00e5ff !important;
    color: #ffffff !important;
  }
  .scoping-form-toggle-btn .btn-text-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }
  .scoping-form-toggle-btn .btn-icon {
    color: #00e5ff !important;
    font-size: 15px !important;
  }
  .scoping-form-toggle-btn .btn-action-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
  }
  .scoping-form-toggle-btn .btn-chevron {
    color: #00e5ff !important;
    font-size: 12px !important;
    transition: transform 0.3s ease !important;
  }
  .scoping-form-toggle-btn.open .btn-chevron {
    transform: rotate(180deg) !important;
  }
  .scoping-form-card:not(.form-expanded) form {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    transition: max-height 0.4s ease, opacity 0.25s ease !important;
  }
  .scoping-form-card.form-expanded form {
    max-height: 3000px !important;
    overflow: visible !important;
    opacity: 1 !important;
    padding-top: 16px !important;
    pointer-events: auto !important;
    transition: max-height 0.5s ease, opacity 0.35s ease !important;
  }

  /* 6. 5 CORE ENGINEERING PILLARS: Elegan, Teks Tidak Berputar, Bahasa Inggris */
  .service-menu-widget {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }
  .service-menu-header {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 18px !important;
    background: linear-gradient(135deg, #001f3b 0%, #002b50 100%) !important;
    color: #ffffff !important;
    border-radius: 4px 4px 0 0 !important;
    user-select: none !important;
    margin-bottom: 0 !important;
    border-bottom: 2px solid #00e5ff !important;
  }
  .service-menu-header i.fa-layer-group {
    color: #00e5ff !important;
    font-size: 16px !important;
    margin-right: 10px !important;
  }
  .service-menu-header span {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
  }
  .pillars-toggle-pill {
    background: rgba(0, 229, 255, 0.12) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    color: #00e5ff !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
  }
  /* HANYA icon panah yang berputar, teks tetap tegak sempurna */
  .pillars-toggle-pill .pill-chevron {
    color: #00e5ff !important;
    font-size: 11px !important;
    transition: transform 0.3s ease !important;
  }
  .service-menu-widget.pillars-open .pillars-toggle-pill .pill-chevron {
    transform: rotate(180deg) !important;
  }
  
  /* Default tersembunyi di HP */
  .service-menu-widget:not(.pillars-open) .service-pillar-list,
  .service-menu-widget:not(.pillars-open) .sidebar-all-services-link {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    transition: max-height 0.35s ease, opacity 0.25s ease !important;
  }
  /* Terbuka saat diklik */
  .service-menu-widget.pillars-open .service-pillar-list {
    max-height: 2500px !important;
    overflow: visible !important;
    opacity: 1 !important;
    padding: 12px 10px !important;
    pointer-events: auto !important;
    transition: max-height 0.5s ease, opacity 0.35s ease !important;
  }
  .service-menu-widget.pillars-open .sidebar-all-services-link {
    max-height: 100px !important;
    opacity: 1 !important;
    padding: 10px 14px 14px 14px !important;
    pointer-events: auto !important;
  }
}

/* ==========================================================================
   GLOBAL HERRINGTON UNIFIED MICRO-RADIUS ARCHITECTURE (2px - 4px)
   Definitive site-wide harmonization across ALL pages, sections, sub-pages,
   cards, articles, modals, widgets, tables, inputs, buttons, and capsule badges.
   Zero oversized pill bubble radius. Everything strictly aligned to 2px - 4px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS, CTA CONTROLS & CAPSULE BOXES (HARMONIZED TO 4px / 3px)
   -------------------------------------------------------------------------- */
.btn-pill-navy,
.btn-pill-white,
.btn-pill-outline,
.btn-pill-dark,
.btn-hero-navy,
.btn-hero-outline,
.btn-cta-gold,
.btn-cta-outline,
.btn-cta-transparent,
.btn-drawer-capsule,
.btn-glossy,
.btn-leadmagnet-download,
.btn-modal-close,
.btn-nl-submit,
.btn-outline-white,
.btn-pillar-action,
.btn-scoping-submit,
.btn-submit-scoping,
.btn-white-scoping,
.btn-gold-scoping,
.btn-inspect-telemetry,
.fiduciary-btn,
.sidebar-btn-navy,
.papers-explore-btn,
.peer-btn-reply,
.btn-submit-inquiry,
.form-submit-btn,
.filter-btn,
.filter-btn sup,
.case-filter-nav .filter-btn,
.corridor-pill-btn,
.segment-tab-btn,
.tab-btn,
.mv-tab-btn,
.mv-nav-btn,
.testi-btn,
.testi-arrow-btn,
.page-circle-btn,
.nav-arrow-circle,
.dark-link-circle,
.round-action-btn,
.video-play-btn,
.half-circle-icon,
.mobile-menu-btn,
.mobile-toggle,
.footer-scroll-top,
.modal-close-btn,
.nav-featured-pill,
.drawer-featured-pill,
.drawer-lang-btn,
.lang-switcher-wrap,
.scoping-form-toggle-btn,
.nav-cta-btn,
.header-cta-btn,
button:not(.pulse-beacon):not(.sensor-pulse-beacon) {
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   2. BADGES, STATUS PILLS, TAGS & METRIC LABELS (MICRO-RADIUS 3px - 4px)
   -------------------------------------------------------------------------- */
.hero-eyebrow,
.case-savings-badge,
.case-sector-badge,
.case-card-badge,
.badge-savings-pill,
.badge-corridor-id,
.case-corridor-id,
.case-status-tag,
.operations-badge,
.service-visual-badge,
.hero-visual-badge-top,
.hero-visual-badge-bottom,
.floating-card-badge-top,
.member-badge-pill,
.dossier-status-pill,
.calc-engine-badge,
.fiduciary-badge,
.leadmagnet-badge,
.card-badge-subtle,
.desk-status-pill,
.sensor-status-pill,
.form-badge-pill,
.tag-pill,
.topic-pill,
.corridor-pill,
.corridor-badge,
.herrington-badge,
.bento-flagship-pill,
.badge-live-nav,
.badge-live-side,
.sub-badge,
.modal-factsheet-badge,
.pillar-risk-shield,
.advisory-pillar-badge,
.pillar-num,
.step-number-badge,
.comp-badge-item,
.compliance-badge-box,
.filter-count,
.pill-count,
.cat-count,
.entry-date-badge,
.paper-date-badge,
.paper-meta-strip,
.badge-day,
.badge-month,
.book-seal,
.quote-bubble-glass,
.quote-icon-top,
.visual-tag-badge,
.tag-check,
.panel-risk-tag,
.risk-tag,
.risk-tag-pill,
.spec-pill,
.step-mini-num,
.checklist-step-num,
.fidic-num-badge {
  border-radius: 3px !important;
}

/* --------------------------------------------------------------------------
   3. KARTU, FRAME, GRID & WIDGET HOMEPAGE & GLOBAL SECTIONS
   -------------------------------------------------------------------------- */
.floating-scoping-card,
.scoping-action-inputs,
.scoping-dropdown-wrap,
.scoping-card-form,
.pillar-col-item,
.pillar-icon-circle,
.standard-grid-cell,
.cell-icon-wrap,
.pillar-bento-card,
.pillar-bento-card.pillar-wide,
.step-mini-card,
.value-card,
.value-card-icon,
.risk-simple-card,
.risk-simple-footnote,
.risk-simple-icon,
.risk-card-solution,
.telemetry-item,
.telemetry-col,
.telemetry-readouts-grid,
.telemetry-strip,
.telemetry-inspector-box,
.segment-telemetry-panel,
.fiduciary-chessboard-section,
.cb-image-wrap,
.cb-floating-counter,
.floating-metrics-box,
.metric-card-item,
.metric-icon-wrap,
.metric-icon-circle,
.info-box-icon,
.support-icon,
.fiduciary-call-icon,
.tab-image-container,
.dark-callout-pill,
.partner-grid-item,
.hero-showcase-card,
.hero-visual-card,
.hero-telemetry-body,
.tri-card,
.spotlight-box,
.leadership-banner-inner,
.bento-card,
.bento-grid,
.hub-banner-card,
.leadmagnet-card,
.leadmagnet-form-card,
.report-book-3d,
.regional-desk-card,
.desk-card-item,
.desk-fiduciary-card,
.office-card,
.callout-box-navy,
.callout-box-amber,
.contractual-pullquote-box,
.nda-assurance-box,
.fiduciary-guarantee-card,
.testimonial-image-wrapper,
.council-member-card,
.member-photo-frame,
.member-photo-frame img,
.member-info-body,
.faculty-card,
.about-hero-card,
.about-mission-card,
.about-history-block,
.paper-bento-hero,
.paper-bento-card-side,
.paper-post-card,
.paper-entry-card,
.paper-img-wrap,
.paper-entry-body,
.single-post-card,
.sidebar-widget,
.author-widget-card,
.author-bio-box,
.recent-post-item,
.recent-thumb-square,
.recent-thumb-square img,
.category-item-row,
.pagination-bar,
.post-table-wrap,
.code-snippet-box {
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   4. NAVBAR DROPDOWNS, SUB-MENUS & HOVER BOXES
   -------------------------------------------------------------------------- */
.dropdown,
.sub-menu,
.dropdown-flyout-parent,
.flyout-sub-menu {
  border-radius: 4px !important;
}

.dropdown li a,
.dropdown-flyout-parent > li.has-flyout-sub > a.flyout-trigger,
.flyout-sub-menu li a,
.dropdown-hub-cta a,
.flyout-view-all a {
  border-radius: 3px !important;
}

/* --------------------------------------------------------------------------
   5. SUBPAGE SERVICES & 5-PILLAR DIRECTORY (Single & Archive)
   -------------------------------------------------------------------------- */
.service-card-main,
.service-card-herrington,
.herrington-service-card,
.service-icon-wrap,
.service-icon-box,
.service-card-media,
.service-sidebar,
.service-sidebar .sidebar-widget,
.service-menu-widget,
.service-menu-header,
.service-main-content,
.service-lead-visual,
.service-lead-visual img,
.feature-point-card,
.feature-card-icon,
.feature-icon-circle,
.advisory-pillar-item,
.stat-callout-box,
.process-card-step,
.process-step-card,
.comparison-wrapper,
.comp-table,
.comp-table th,
.comp-table td,
.matrix-table-card,
.matrix-table-wrap,
.matrix-table,
.tab-content-card,
.tab-tool-img,
.tab-tool-img img,
.accordion-card,
.accordion-item,
.accordion-body,
.scoping-form-card,
.fiduciary-help-card,
.fiduciary-call-box,
.fiduciary-comparison-table,
.testimonial-widget-card,
.download-card,
.download-pdf-icon,
.pdf-icon-box,
.pillar-nav-group {
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   6. SUBPAGE CORRIDORS & STRATEGIC CASES (Archive & Single Case)
   -------------------------------------------------------------------------- */
.cases-grid-container,
.case-card-herrington,
.featured-case,
.case-image-box,
.case-image-box img,
.case-content-body,
.corridor-specs-strip,
.spec-item,
.case-card-footer,
.case-detail-card,
.case-item-card,
.case-gallery-item,
.case-stats-panel,
.case-challenge-box,
.case-outcome-box,
.case-modal-box,
.case-modal-window,
.spec-modal-card,
.success-modal-card,
.case-main-column,
.case-sidebar,
.sidebar-card-widget,
.widget-header-navy,
.factsheet-card-inner,
.factsheet-widget-body,
.scoping-advisory-card,
.compliance-badges-grid,
.breakdown-card,
.two-col-breakdown,
.editorial-section,
.lead-visual-frame,
.lead-visual-frame img {
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   7. SUBPAGE ABOUT US, COUNCIL & GOVERNANCE
   -------------------------------------------------------------------------- */
.mv-carousel-box,
.mv-tab-content,
.mv-tab-icon-wrap,
.operations-milestone-section,
.operations-hero-visual,
.operations-hero-visual img,
.milestones-track,
.milestone-card,
.milestone-card:hover,
.why-choose-section,
.why-visual-wrap,
.why-main-image,
.why-main-image img,
.why-floating-stat,
.progress-bar-group,
.progress-item,
.progress-track,
.progress-fill,
.pillars-grid-6,
.pillar-card-box,
.pillar-icon-box,
.council-section,
.council-grid,
.accreditations-section,
.accred-inner,
.accred-logo-item,
.about-cta-section,
.cta-inner-split,
.cta-desk-item,
.cta-desk-icon {
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   8. SUBPAGE FAQ & CONTACT
   -------------------------------------------------------------------------- */
.faq-item-card,
.faq-header-btn,
.faq-callout-box,
.faq-body-inner,
.faq-accordion-item,
.faq-question-btn,
.faq-answer-pane,
.faq-accordion-details,
.faq-summary,
.faq-answer-content,
.faq-item,
.faq-icon,
.faq-toggle-icon,
.touchpoint-card,
.touchpoint-icon-wrapper,
.scoping-split-section,
.scoping-form-box,
.contact-form-box,
.contact-info-card,
.map-embed-wrapper,
.drawer-hotline-card,
.hotline-icon {
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   9. INPUT FIELDS, TEXTAREAS, SELECTS & CONTROLS (MICRO-RADIUS 3px)
   -------------------------------------------------------------------------- */
.input-styled,
.textarea-styled,
.scoping-select-control,
.custom-select-wrap,
.custom-select-wrap select,
.form-control,
.form-input,
.form-select,
.form-textarea,
.inquiry-input,
.inquiry-textarea,
.lm-input,
.newsletter-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea {
  border-radius: 3px !important;
}

/* --------------------------------------------------------------------------
   10. TAILWIND ROUNDED OVERRIDES (For templates with inline tailwind classes)
   -------------------------------------------------------------------------- */
.rounded-full:not(.ping-dot):not(.animate-ping),
.rounded-3xl,
.rounded-2xl,
.rounded-xl,
.rounded-lg,
.rounded-md,
.rounded {
  border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   11. MEDIA QUERY POLISH OVERRIDES (Strict mobile & tablet enforcement)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .accordion-card,
  .advisory-pillar-item,
  .comparison-wrapper,
  .scoping-form-card,
  .service-menu-widget,
  .service-menu-header,
  .btn-submit-scoping,
  .filter-btn,
  .btn-pill-navy,
  .btn-hero-outline {
    border-radius: 4px !important;
  }
}

/* ==========================================================================
   MOBILE-ONLY CONTROLS ISOLATION (ZERO LEAKAGE ON DESKTOP)
   Ensures scoping form accordion & sidebar directory pills ONLY appear on
   mobile (<=768px) and are 100% hidden on desktop with full form visibility.
   ========================================================================== */
.scoping-form-toggle-btn,
.pillars-toggle-pill {
  display: none !important;
}

@media (max-width: 768px) {
  .scoping-form-toggle-btn {
    display: flex !important;
  }
  .pillars-toggle-pill {
    display: inline-flex !important;
  }
}

@media (min-width: 769px) {
  .scoping-form-toggle-btn,
  .pillars-toggle-pill {
    display: none !important;
  }
  .scoping-form-card:not(.form-expanded) form,
  .scoping-form-card.form-expanded form,
  .scoping-form-card form {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .service-menu-widget:not(.pillars-open) .service-pillar-list,
  .service-menu-widget:not(.pillars-open) .sidebar-all-services-link,
  .service-menu-widget .service-pillar-list,
  .service-menu-widget .sidebar-all-services-link {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
}

/* ==========================================================================
   DESKTOP NAVBAR CONTROLS HARMONIZATION (EN/ID SWITCHER & CTA BUTTON)
   Ensures identical 44px vertical height, perfect baseline centering,
   and compact, content-hugging horizontal padding for the language switcher.
   ========================================================================== */
@media (min-width: 993px) {
  .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .nav-right .lang-switcher-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    background: #0b141d !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(11, 20, 29, 0.25) !important;
    transition: all 0.25s ease !important;
  }

  .nav-right .lang-switcher-wrap:hover {
    border-color: rgba(0, 229, 255, 0.6) !important;
    box-shadow: 0 6px 18px rgba(0, 229, 255, 0.15) !important;
  }

  .nav-right .lang-globe-icon {
    font-size: 13px !important;
    color: #00e5ff !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 0 !important;
  }

  .nav-right .lang-option {
    font-family: var(--font-code, monospace) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    padding: 4px 6px !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
  }

  .nav-right .lang-option:hover {
    color: #00e5ff !important;
  }

  .nav-right .lang-option.active {
    color: #ffffff !important;
    font-weight: 800 !important;
    background: rgba(0, 229, 255, 0.12) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
  }

  .nav-right .lang-divider {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.25) !important;
    user-select: none !important;
  }

  .nav-right .btn-pill-navy {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    background-color: var(--navy-bg, #0b141d) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(11, 20, 29, 0.25) !important;
  }
}

/* ==========================================================================
   UNIFIED NAV DROPDOWN ARCHITECTURE (SERVICES, CORRIDORS, ABOUT US)
   Harmonizes ALL desktop dropdown menus to the flagship Midnight Navy (#08101C)
   and Electric Cyan aesthetic.
   ========================================================================== */
.dropdown,
.sub-menu,
.dropdown:not(.dropdown-flyout-parent) {
  min-width: 340px !important;
  background: #08101C !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  border-top: 1px solid rgba(0, 229, 255, 0.35) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.75) !important;
  border-radius: 4px !important;
  padding: 6px 0 !important;
}

.dropdown-category-tag {
  padding: 8px 20px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #00e5ff !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 229, 255, 0.05) !important;
  margin-bottom: 4px !important;
}

.dropdown li a,
.sub-menu li a,
.dropdown:not(.dropdown-flyout-parent) li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 3px !important;
}

.dropdown li a i.fa-arrow-right,
.dropdown li a i.fa-chevron-right {
  color: rgba(0, 229, 255, 0.6) !important;
  font-size: 10px !important;
  transition: all 0.2s ease !important;
}

.dropdown li a:hover,
.sub-menu li a:hover,
.dropdown:not(.dropdown-flyout-parent) li a:hover {
  background: rgba(0, 229, 255, 0.12) !important;
  color: #00e5ff !important;
  padding-left: 24px !important;
}

.dropdown li a:hover i.fa-arrow-right,
.dropdown li a:hover i.fa-chevron-right {
  color: #00e5ff !important;
  transform: translateX(4px) !important;
}

.dropdown li:last-child a,
.sub-menu li:last-child a {
  border-bottom: none !important;
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE ENFORCEMENT & MOBILE DEFENSE (ALL SUBPAGES)
   Harmonizes About Us, Due Diligence FAQ, Strategic Corridors, Technical Papers,
   and Service Details to prevent layout breaking, squished columns, and horizontal overflow.
   ========================================================================== */

/* 1. TABLET BREAKPOINTS (<= 992px) */
@media (max-width: 992px) {
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .container-herrington {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- ABOUT US (/about/) --- */
  .about-hero-banner {
    padding: 70px 0 55px 0 !important;
  }
  .about-hero-title {
    font-size: 34px !important;
    line-height: 1.25 !important;
  }
  .intro-split-section {
    padding: 60px 0 50px 0 !important;
  }
  .intro-split-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .intro-headline {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
  .operations-milestone-section {
    padding: 60px 0 50px 0 !important;
  }
  .milestones-track {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .why-choose-section {
    padding: 60px 0 50px 0 !important;
  }
  .why-split-top {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    margin-bottom: 40px !important;
  }
  .why-floating-stat {
    position: static !important;
    margin-top: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .pillars-grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .metrics-strip-section {
    padding: 55px 0 !important;
  }
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .metric-card-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 15px 10px !important;
  }
  .metric-card-item:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
  .council-section {
    padding: 65px 0 !important;
  }
  .section-header-split {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 35px !important;
  }
  .council-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .testimonial-section {
    padding: 65px 0 !important;
  }
  .testimonial-split-layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .about-cta-section {
    padding: 65px 0 !important;
  }
  .cta-inner-split {
    grid-template-columns: 1fr !important;
    gap: 35px !important;
  }

  /* --- TECHNICAL PAPERS (/papers/) --- */
  .papers-main-section {
    padding: 50px 0 70px 0 !important;
  }
  .papers-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 45px !important;
  }
  .paper-img-wrap {
    height: 300px !important;
  }
  .paper-entry-body {
    padding: 30px 24px !important;
  }
  .paper-entry-title {
    font-size: 23px !important;
  }

  /* --- FAQ (/faq/) --- */
  .topic-filter-section {
    position: sticky !important;
    top: 64px !important;
    z-index: 900 !important;
    padding: 14px 0 !important;
  }
  .faq-layout-section {
    padding: 45px 0 65px 0 !important;
  }
  .faq-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .faq-sidebar {
    position: static !important;
    margin-top: 10px !important;
  }
}

/* 2. MOBILE PHONE BREAKPOINTS (<= 768px) */
@media (max-width: 768px) {
  .container-herrington {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- ABOUT US (/about/) --- */
  .about-hero-banner {
    padding: 55px 0 40px 0 !important;
  }
  .about-hero-title {
    font-size: 25px !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
  }
  .about-hero-tag {
    font-size: 10px !important;
    padding: 5px 10px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 14px !important;
  }
  .about-hero-divider {
    margin-bottom: 16px !important;
  }
  .breadcrumbs {
    font-size: 12.5px !important;
    gap: 8px !important;
  }
  .intro-split-section {
    padding: 45px 0 35px 0 !important;
  }
  .intro-headline {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 18px !important;
  }
  .intro-lead-text {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
  }
  .intro-sub-text {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }
  .intro-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .intro-actions a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .mv-carousel-box {
    padding: 24px 18px !important;
  }
  .mv-tabs-nav {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
  }
  .mv-tab-btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  .mv-tab-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    margin-bottom: 16px !important;
  }
  .mv-tab-title {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }
  .mv-tab-desc {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }
  .operations-milestone-section {
    padding: 45px 0 35px 0 !important;
  }
  .operations-hero-visual {
    height: 220px !important;
    margin-bottom: 22px !important;
  }
  .operations-visual-overlay {
    padding: 20px 16px !important;
  }
  .operations-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }
  .milestones-track {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .milestone-card {
    padding: 22px 18px !important;
  }
  .milestone-card h4 {
    font-size: 16.5px !important;
  }
  .why-choose-section {
    padding: 45px 0 35px 0 !important;
  }
  .why-content-col h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
  }
  .why-content-col p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 22px !important;
  }
  .why-floating-stat {
    position: static !important;
    margin-top: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }
  .why-floating-stat strong {
    font-size: 26px !important;
  }
  .pillars-grid-6 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pillar-card-box {
    padding: 24px 20px !important;
  }
  .pillar-card-box h4 {
    font-size: 16.5px !important;
  }
  .metrics-strip-section {
    padding: 40px 0 !important;
  }
  .metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .metric-card-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 0 16px 0 !important;
  }
  .metric-card-item:last-child {
    border-bottom: none !important;
  }
  .metric-number-display {
    font-size: 36px !important;
  }
  .council-section {
    padding: 50px 0 !important;
  }
  .section-header-split h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  .council-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .member-photo-frame {
    height: 260px !important;
  }
  .member-info-body {
    padding: 20px 16px !important;
  }
  .member-info-body h4 {
    font-size: 16px !important;
  }
  .testimonial-section {
    padding: 50px 0 !important;
  }
  .testimonial-editorial-card {
    padding: 26px 20px !important;
  }
  .editorial-heading {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }
  .editorial-desc {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }
  .quote-emblem {
    font-size: 36px !important;
    margin-bottom: 14px !important;
  }
  .trust-stat-mini strong {
    font-size: 22px !important;
  }
  .testimonial-carousel-wrap h2 {
    font-size: 22px !important;
    margin-bottom: 16px !important;
  }
  .testimonial-quote-text {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }
  .accreditations-section {
    padding: 35px 0 !important;
  }
  .accred-inner {
    justify-content: center !important;
    gap: 16px !important;
  }
  .accred-logo-item {
    width: 100% !important;
    max-width: 280px !important;
    justify-content: flex-start !important;
  }
  .about-cta-section {
    padding: 50px 0 !important;
  }
  .cta-left-text h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 14px !important;
  }
  .cta-left-text p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }
  .cta-right-action {
    padding: 22px 18px !important;
    gap: 16px !important;
  }
  .btn-white-scoping {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* --- DUE DILIGENCE FAQ (/faq/) --- */
  .faq-hero-banner {
    padding: 55px 0 40px 0 !important;
  }
  .faq-hero-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  .faq-hero-desc {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }
  .faq-search-wrapper {
    width: 100% !important;
    margin-top: 20px !important;
  }
  .faq-search-input {
    padding: 12px 16px 12px 42px !important;
    font-size: 13px !important;
  }
  .faq-search-icon {
    left: 14px !important;
    font-size: 13px !important;
  }
  .topic-filter-section {
    top: 64px !important;
    padding: 10px 0 !important;
  }
  .filter-pills-wrap {
    padding: 0 16px 4px 16px !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .topic-pill {
    font-size: 12px !important;
    padding: 6px 14px !important;
  }
  .faq-header-btn {
    padding: 16px 14px !important;
    gap: 10px !important;
  }
  .faq-q-left {
    gap: 10px !important;
  }
  .faq-q-num {
    font-size: 11px !important;
    padding: 3px 6px !important;
  }
  .faq-q-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  .faq-toggle-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 11px !important;
  }
  .faq-body-inner {
    padding: 0 14px 18px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }
  .faq-callout-box {
    padding: 12px 14px !important;
    margin: 12px 0 !important;
    font-size: 12.5px !important;
  }
  .sidebar-widget {
    padding: 22px 18px !important;
  }
  .faq-cta-banner {
    padding: 45px 0 !important;
  }
  .cta-text-side h3 {
    font-size: 21px !important;
    line-height: 1.3 !important;
  }
  .cta-text-side p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }
  .cta-action-side {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .cta-action-side a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* --- TECHNICAL PAPERS (/papers/) --- */
  .page-hero-banner {
    padding: 55px 0 40px 0 !important;
  }
  .page-hero-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  .page-hero-desc {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }
  .papers-main-section {
    padding: 40px 0 60px 0 !important;
  }
  .paper-img-wrap {
    height: 210px !important;
  }
  .entry-date-badge {
    top: 12px !important;
    left: 12px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .badge-day {
    font-size: 15px !important;
  }
  .badge-month {
    font-size: 9px !important;
  }
  .paper-entry-body {
    padding: 20px 16px !important;
  }
  .entry-meta-strip {
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    font-size: 12px !important;
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
  }
  .paper-entry-title {
    font-size: 19px !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
  }
  .paper-entry-excerpt {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 18px !important;
  }

  /* --- STRATEGIC CORRIDORS (/cases/) --- */
  .cases-hero-banner {
    padding: 55px 0 40px 0 !important;
  }
  .cases-hero-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  .cases-hero-desc {
    font-size: 13.5px !important;
  }
  .telemetry-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .telemetry-col {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 10px 0 12px 0 !important;
  }
  .telemetry-col:last-child {
    border-bottom: none !important;
  }
  .telemetry-val {
    font-size: 24px !important;
  }
  .filter-buttons {
    width: 100% !important;
    gap: 8px !important;
  }
  .filter-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  .cases-grid-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .case-card-body {
    padding: 20px 16px !important;
  }
  .case-card-title {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
  .modal-specs-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 3. EXTRA SMALL PHONES (<= 480px) */
@media (max-width: 480px) {
  .hero-heading,
  .about-hero-title,
  .faq-hero-title,
  .page-hero-title,
  .cases-hero-title {
    font-size: 30px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }
  .intro-headline,
  .why-content-col h2,
  .section-header-split h2,
  .cta-left-text h2,
  .cta-text-side h3 {
    font-size: 23px !important;
    line-height: 1.35 !important;
  }
  .mv-tab-btn {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .accred-logo-item {
    max-width: 100% !important;
  }
}


/* Streamlined Article End CTA Strip */
.article-simple-cta-strip {
  background: linear-gradient(135deg, #00172e 0%, #001f3b 100%);
  border-left: 4px solid var(--cyan-accent, #00d9fc);
  border-radius: 6px;
  padding: 24px 28px;
  margin: 40px 0 25px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 20, 0.08);
}
.cta-strip-info strong {
  color: #ffffff;
  font-size: 16px;
  display: block;
  margin-bottom: 4px;
}
.cta-strip-info p {
  color: #cbd5e1 !important;
  font-size: 13.5px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
.btn-cta-strip {
  background: var(--cyan-accent, #00d9fc);
  color: #000014 !important;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.btn-cta-strip:hover {
  background: #00bfe0;
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .article-simple-cta-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 18px !important;
    gap: 16px !important;
  }
  .btn-cta-strip {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}


/* Strategic Corridors Hero Banner Custom Image */
.hero-banner.cases-hero-banner,
.cases-hero-banner {
  background: linear-gradient(135deg, rgba(7, 14, 21, 0.94) 0%, rgba(11, 20, 29, 0.88) 100%),
              url('https://geoproverisk.com/wp-content/uploads/2026/09/corridors-hero-banner.jpg') center/cover no-repeat !important;
}

/* ==========================================================================
   SCIENTIFIC, PHYSICAL & MATHEMATICAL NOTATION (KATEX ENGINE & ACADEMIC MATH)
   ========================================================================== */
.katex {
  font-size: 1.05em !important;
  text-rendering: auto;
}
.katex-display {
  display: block;
  margin: 1.75em 0 !important;
  padding: 18px 24px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #001f3b !important;
  border-radius: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.katex-display > .katex {
  text-align: center;
  white-space: normal;
}
.katex-html {
  overflow-x: auto;
  overflow-y: hidden;
}
/* Academic Subscript & Superscript Alignment */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }